Feature/issue-112-create-trainees

[zalexa19]

Added a button to add new trainees, and also refactored a little bit (for example, reusing selector components)

[Copilot]

Pull request overview

This PR implements a feature to create new trainee profiles via a dialog form, accessible from the Cohorts page. It also includes refactoring work to extract reusable dropdown selector components (GenderSelect, LearningStatusSelect, JobPathSelect) and consolidates error display components. The refactoring improves code reusability but introduces several critical bugs that must be fixed before merging.

Changes:

• Added create trainee functionality with form validation and API integration
• Refactored dropdown selectors into reusable components (GenderSelect, LearningStatusSelect, JobPathSelect)
• Renamed API types and functions for better clarity (SaveTraineeRequestData → UpdateTraineeRequestData, getTraineeInfo → getTrainee)

Reviewed changes

Copilot reviewed 25 out of 25 changed files in this pull request and generated 12 comments.

Show a summary per file

File	Description
client/src/features/trainee-profile/create/AddTraineeDialog.tsx	Main dialog component for creating new trainees with form state management
client/src/features/trainee-profile/create/components/NewTraineeForm.tsx	Form component with input fields for trainee creation
client/src/features/trainee-profile/create/components/TextFieldWrapper.tsx	Wrapper component for text inputs with maxLength handling
client/src/features/trainee-profile/create/lib/formHelper.ts	Validation logic for trainee creation form
client/src/features/trainee-profile/create/data/mutations.ts	React Query mutation hook for creating trainees
client/src/features/trainee-profile/create/api/api.ts	API function for trainee creation
client/src/features/trainee-profile/create/api/types.ts	Type definition for create trainee request data
client/src/features/trainee-profile/profile/components/DropdownSelect.tsx	Reusable dropdown select component
client/src/features/trainee-profile/profile/components/GenderSelect.tsx	Gender-specific dropdown selector
client/src/features/trainee-profile/profile/components/LearningStatusSelect.tsx	Learning status dropdown selector
client/src/features/trainee-profile/profile/components/JobPathSelect.tsx	Job path dropdown selector
client/src/features/trainee-profile/personal-info/PersonalInfo.tsx	Updated to use GenderSelect component
client/src/features/trainee-profile/employment/EmploymentInfo.tsx	Updated to use JobPathSelect component
client/src/features/trainee-profile/education/EducationInfo.tsx	Updated to use LearningStatusSelect component
client/src/features/cohorts/components/ActionsCard.tsx	Card component with Add Trainee button
client/src/features/cohorts/CohortsPage.tsx	Integrated ActionsCard and improved error/loading states
client/src/features/trainee-profile/personal-info/api/api.ts	Renamed functions for clarity (getTraineeInfo → getTrainee, saveTraineeInfo → updateTrainee)
client/src/features/trainee-profile/personal-info/api/types.ts	Renamed SaveTraineeRequestData to UpdateTraineeRequestData
client/src/features/trainee-profile/personal-info/data/useTraineeInfoData.tsx	Updated to use renamed functions and types
client/src/features/trainee-profile/profile/components/TraineeProfile.tsx	Updated to use renamed types
client/src/features/trainee-profile/context/useTraineeProfileProvider.tsx	Updated to use renamed types
client/src/features/trainee-profile/context/useTraineeProfileContext.tsx	Updated to use renamed types
client/src/data/types/Trainee.ts	Added profilePath field to Trainee interface
client/src/components/StyledErrorBox.tsx	Reusable styled error box component
client/src/components/ButtonWithIcon.tsx	Reusable button component with icon support

Comments suppressed due to low confidence (1)

client/src/features/trainee-profile/education/EducationInfo.tsx:94

• There's a duplicate Learning Status select. The new LearningStatusSelect component is added on line 75, but the old FormControl with the Learning Status select was not removed (lines 77-94). This will render two identical Learning Status dropdowns on the page. Remove the old FormControl block (lines 77-94).

        <LearningStatusSelect isEditing={isEditing} value={editedFields.learningStatus} onChange={handleSelectChange} />

        <FormControl variant={isEditing ? 'outlined' : 'standard'} sx={{ mx: 2, my: 1, width: '20ch', gap: '2rem' }}>
          <InputLabel htmlFor="learningStatus">Learning status</InputLabel>
          <Select
            name="learningStatus"
            id="learningStatus"
            label="Learning status"
            value={editedFields?.learningStatus || ''}
            inputProps={{ readOnly: isEditing ? false : true }}
            IconComponent={isEditing ? ArrowDropDownIcon : NoIcon}
            startAdornment=" "
            onChange={handleSelectChange}
          >
            <MenuItem value={LearningStatus.Studying}>Studying</MenuItem>
            <MenuItem value={LearningStatus.Graduated}>Graduated</MenuItem>
            <MenuItem value={LearningStatus.OnHold}>On hold</MenuItem>
            <MenuItem value={LearningStatus.Quit}>Quit</MenuItem>
          </Select>
        </FormControl>

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.