Having Claude finish implementation of question dialog

frontend/src/pages/candidate/Profile.tsx

@@ -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: string;
-  value: number;
+  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}
+      hidden={active !== value}
-      id={`profile-tabpanel-${index}`}
+      id={`profile-tabpanel-${value}`}
-      aria-labelledby={`profile-tab-${index}`}
+      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>