- Added the ability for a student/developer to choose a gender for a speaking instructor;

- Made it so, if chosen, the user will only get speaking exams with their chosen gender;
- Added the ability for speaking exams to select a gender when generating;

src/pages/profile.tsx

@@ -28,6 +28,9 @@ import TimezoneSelect from "@/components/Low/TImezoneSelect";
 import Modal from "@/components/Modal";
 import {Module} from "@/interfaces";
 import ModuleLevelSelector from "@/components/Medium/ModuleLevelSelector";
+import Select from "@/components/Low/Select";
+import {InstructorGender} from "@/interfaces/exam";
+import {capitalize} from "lodash";
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
 
@@ -83,6 +86,11 @@ function UserProfile({user, mutateUser}: Props) {
 		user.type === "corporate" ? undefined : user.demographicInformation?.employment,
 	);
 	const [passport_id, setPassportID] = useState<string | undefined>(user.type === "student" ? user.demographicInformation?.passport_id : undefined);
+
+	const [preferredGender, setPreferredGender] = useState<InstructorGender | undefined>(
+		user.type === "student" || user.type === "developer" ? user.preferredGender || "varied" : undefined,
+	);
+
 	const [position, setPosition] = useState<string | undefined>(user.type === "corporate" ? user.demographicInformation?.position : undefined);
 	const [corporateInformation, setCorporateInformation] = useState(user.type === "corporate" ? user.corporateInformation : undefined);
 	const [companyName, setCompanyName] = useState<string | undefined>(user.type === "agent" ? user.agentInformation?.companyName : undefined);
@@ -90,6 +98,7 @@ function UserProfile({user, mutateUser}: Props) {
 		user.type === "agent" ? user.agentInformation?.commercialRegistration : undefined,
 	);
 	const [timezone, setTimezone] = useState<string>(user.demographicInformation?.timezone || moment.tz.guess());
+
 	const {groups} = useGroups();
 	const {users} = useUsers();
 
@@ -146,6 +155,7 @@ function UserProfile({user, mutateUser}: Props) {
 			newPassword,
 			profilePicture,
 			desiredLevels,
+			preferredGender,
 			demographicInformation: {
 				phone,
 				country,
@@ -337,6 +347,24 @@ function UserProfile({user, mutateUser}: Props) {
 								</div>
 							)}
 
+							{preferredGender && ["developer", "student"].includes(user.type) && (
+								<>
+									<Divider />
+									<div className="flex flex-col gap-3 w-full">
+										<label className="font-normal text-base text-mti-gray-dim">Speaking Instructor&apos;s Gender</label>
+										<Select
+											value={{value: preferredGender, label: capitalize(preferredGender)}}
+											onChange={(value) => (value ? setPreferredGender(value.value as InstructorGender) : null)}
+											options={[
+												{value: "male", label: "Male"},
+												{value: "female", label: "Female"},
+												{value: "varied", label: "Varied"},
+											]}
+										/>
+									</div>
+								</>
+							)}
+
 							<Divider />
 
 							{user.type === "corporate" && (