jketreno/backstory
1
0
Fork 0
Code Issues 12 Actions Releases Activity

Having Claude finish implementation of question dialog

Browse Source
This commit is contained in:
James Ketr 2025-06-27 10:46:05 -07:00
parent c470d719ea
commit 4a95c72a6f
1 changed files with 101 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
frontend/src/pages/candidate/Profile.tsx
View File

@ -44,6 +44,7 @@ import {
Phone,
Email,
AccountCircle,
LiveHelp,
} from '@mui/icons-material';
import { useTheme } from '@mui/material/styles';
import { useAuth } from 'hooks/AuthContext';
@ -67,22 +68,22 @@ const VisuallyHiddenInput = styled('input')({
interface TabPanelProps {
children?: React.ReactNode;
index: number;
value: number;
value: string;
active: string;
}
function TabPanel(props: TabPanelProps): JSX.Element {
const { children, value, index, ...other } = props;
const { children, value, active, ...other } = props;
return (
<div
role="tabpanel"
hidden={value !== index}
id={`profile-tabpanel-${index}`}
aria-labelledby={`profile-tab-${index}`}
hidden={active !== value}
id={`profile-tabpanel-${value}`}
aria-labelledby={`profile-tab-${value}`}
{...other}
>
{value === index && (
{value === active && (
<Box
sx={{
p: { xs: 1, sm: 3 },
@ -107,7 +108,7 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (_props: BackstoryPagePro
const candidate = user?.userType === 'candidate' ? (user as Types.Candidate) : null;
// State management
const [tabValue, setTabValue] = useState(0);
const [tabValue, setTabValue] = useState<string>('info');
const [editMode, setEditMode] = useState<{ [key: string]: boolean }>({});
const [loading, setLoading] = useState(false);
const [snackbar, setSnackbar] = useState<{
@ -126,6 +127,7 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (_props: BackstoryPagePro
// Dialog states
const [skillDialog, setSkillDialog] = useState(false);
const [questionDialog, setQuestionDialog] = useState(false);
const [experienceDialog, setExperienceDialog] = useState(false);
// New item states
@ -166,7 +168,7 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (_props: BackstoryPagePro
}
// Handle tab change
const handleTabChange = (event: React.SyntheticEvent, newValue: number): void => {
const handleTabChange = (event: React.SyntheticEvent, newValue: string): void => {
setTabValue(newValue);
};
@ -630,6 +632,78 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (_props: BackstoryPagePro
</Box>
);
// Questions Tab
const renderQuestions = (): JSX.Element => (
<Box>
<Box
sx={{
display: 'flex',
flexDirection: { xs: 'column', sm: 'row' },
justifyContent: 'space-between',
alignItems: { xs: 'stretch', sm: 'center' },
mb: { xs: 2, sm: 3 },
gap: { xs: 1, sm: 0 },
}}
>
<Typography variant={isMobile ? 'subtitle1' : 'h6'}>Questions for Chat</Typography>
<Button
variant="outlined"
startIcon={<Add />}
onClick={(): void => setQuestionDialog(true)}
fullWidth={isMobile}
size={isMobile ? 'small' : 'medium'}
>
Add Question
</Button>
</Box>
<Grid container spacing={{ xs: 1, sm: 2 }} sx={{ maxWidth: '100%' }}>
{(formData.questions || []).map((question, index) => (
<Grid size={{ xs: 12, sm: 6, md: 4 }} key={index}>
<Card variant="outlined" sx={{ height: '100%' }}>
<CardContent sx={{ p: { xs: 1.5, sm: 3 } }}>
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'flex-start',
}}
>
<Box sx={{ flex: 1, minWidth: 0 }}>
<Typography
variant={isMobile ? 'subtitle2' : 'h6'}
component="div"
sx={{
fontSize: { xs: '0.9rem', sm: '1.25rem' },
wordBreak: 'break-word',
}}
>
{question.question}
</Typography>
</Box>
<IconButton
size="small"
onClick={(): void => handleRemoveSkill(index)}
color="error"
sx={{ ml: 1 }}
>
<Delete sx={{ fontSize: { xs: 16, sm: 20 } }} />
</IconButton>
</Box>
</CardContent>
</Card>
</Grid>
))}
</Grid>
{(!formData.skills || formData.skills.length === 0) && (
<Typography variant="body2" color="text.secondary" sx={{ textAlign: 'center', py: 4 }}>
No questions added yet. Click &quot;Add Question&quot; to get started.
</Typography>
)}
</Box>
);
// Experience Tab
const renderExperience = (): JSX.Element => (
<Box>
@ -833,40 +907,54 @@ const CandidateProfile: React.FC<BackstoryPageProps> = (_props: BackstoryPagePro
>
<Tab
label={isMobile ? 'Info' : 'Basic Info'}
value="info"
icon={<AccountCircle sx={{ fontSize: { xs: 18, sm: 24 } }} />}
iconPosition={isMobile ? 'top' : 'start'}
/>
<Tab
label="Questions"
value="questions"
icon={<LiveHelp sx={{ fontSize: { xs: 18, sm: 24 } }} />}
iconPosition={isMobile ? 'top' : 'start'}
/>
<Tab
label="Skills"
value="skills"
icon={<EmojiEvents sx={{ fontSize: { xs: 18, sm: 24 } }} />}
iconPosition={isMobile ? 'top' : 'start'}
/>
<Tab
label={isMobile ? 'Work' : 'Experience'}
value="experience"
icon={<Work sx={{ fontSize: { xs: 18, sm: 24 } }} />}
iconPosition={isMobile ? 'top' : 'start'}
/>
<Tab
label={isMobile ? 'Edu' : 'Education'}
value="education"
icon={<School sx={{ fontSize: { xs: 18, sm: 24 } }} />}
iconPosition={isMobile ? 'top' : 'start'}
/>
</Tabs>
</Box>
<TabPanel value={tabValue} index={0}>
<TabPanel value="info" active={tabValue}>
{renderBasicInfo()}
</TabPanel>
<TabPanel value={tabValue} index={1}>
<TabPanel value="questions" active={tabValue}>
{renderQuestions()}
</TabPanel>
<TabPanel value="skills" active={tabValue}>
<ComingSoon>{renderSkills()}</ComingSoon>
</TabPanel>
<TabPanel value={tabValue} index={2}>
<TabPanel value="experience" active={tabValue}>
<ComingSoon>{renderExperience()}</ComingSoon>
</TabPanel>
<TabPanel value={tabValue} index={3}>
<TabPanel value="education" active={tabValue}>
<ComingSoon>{renderEducation()}</ComingSoon>
</TabPanel>
</Paper>