Added a National ID/Passport field to the demographic information of a student

src/components/DemographicInformationInput.tsx

@@ -19,6 +19,7 @@ interface Props {
 export default function DemographicInformationInput({user, mutateUser}: Props) {
 	const [country, setCountry] = useState<string>();
 	const [phone, setPhone] = useState<string>();
+	const [passport_id, setPassportID] = useState<string>();
 	const [gender, setGender] = useState<Gender>();
 	const [employment, setEmployment] = useState<EmploymentStatus>();
 	const [position, setPosition] = useState<string>();
@@ -39,6 +40,7 @@ export default function DemographicInformationInput({user, mutateUser}: Props) {
 					gender,
 					employment: user.type === "corporate" ? undefined : employment,
 					position: user.type === "corporate" ? position : undefined,
+					passport_id,
 				},
 				agentInformation: user.type === "agent" ? {companyName, commercialRegistration} : undefined,
 			})
@@ -72,11 +74,23 @@ export default function DemographicInformationInput({user, mutateUser}: Props) {
 						/>
 					</div>
 				)}
+				<div className="w-full grid grid-cols-2 gap-6">
 					<div className="relative flex flex-col gap-3 w-full">
 						<label className="font-normal text-base text-mti-gray-dim">Country *</label>
 						<CountrySelect value={country} onChange={setCountry} />
 					</div>
 					<Input type="tel" name="phone" label="Phone number" onChange={(e) => setPhone(e)} placeholder="Enter phone number" required />
+				</div>
+				{user.type === "student" && (
+					<Input
+						type="text"
+						name="passport_id"
+						label="Passport/National ID"
+						onChange={(e) => setPassportID(e)}
+						placeholder="Enter National ID or Passport number"
+						required
+					/>
+				)}
 				<div className="relative flex flex-col gap-3 w-full">
 					<label className="font-normal text-base text-mti-gray-dim">Gender *</label>
 					<RadioGroup value={gender} onChange={setGender} className="flex flex-row justify-between">

src/components/UserCard.tsx

@@ -41,20 +41,22 @@ interface Props {
 
 const USER_STATUS_OPTIONS = [
 	{
-		value: 'active',
-		label: 'Active',
-	}, {
-		value: 'disabled',
-		label: 'Disabled',
-	}, {
-		value: 'paymentDue',
-		label: 'Payment Due',
-	}
+		value: "active",
+		label: "Active",
+	},
+	{
+		value: "disabled",
+		label: "Disabled",
+	},
+	{
+		value: "paymentDue",
+		label: "Payment Due",
+	},
 ];
 
 const USER_TYPE_OPTIONS = Object.keys(USER_TYPE_LABELS).map((type) => ({
 	value: type,
-	label: USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS]
+	label: USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS],
 }));
 
 const CURRENCIES_OPTIONS = CURRENCIES.map(({label, currency}) => ({value: currency, label}));
@@ -65,6 +67,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 	const [status, setStatus] = useState(user.status);
 	const [referralAgentLabel, setReferralAgentLabel] = useState<string>();
 	const [position, setPosition] = useState<string | undefined>(user.type === "corporate" ? user.demographicInformation?.position : undefined);
+	const [passport_id, setPassportID] = useState<string | undefined>(user.type === "student" ? user.demographicInformation?.passport_id : undefined);
 
 	const [referralAgent, setReferralAgent] = useState(user.type === "corporate" ? user.corporateInformation?.referralAgent : undefined);
 	const [companyName, setCompanyName] = useState(
@@ -352,6 +355,19 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 					/>
 				</div>
 
+				{user.type === "student" && (
+					<Input
+						type="text"
+						name="passport_id"
+						label="Passport/National ID"
+						onChange={() => null}
+						placeholder="Enter National ID or Passport number"
+						value={user.type === "student" ? user.demographicInformation?.passport_id : undefined}
+						disabled
+						required
+					/>
+				)}
+
 				<div className="flex flex-col md:flex-row gap-8 w-full">
 					{user.type !== "corporate" && (
 						<div className="relative flex flex-col gap-3 w-full">
@@ -397,8 +413,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 							<RadioGroup
 								value={user.demographicInformation?.gender}
 								className="flex flex-row gap-4 justify-between"
-								disabled={disabled}
-							>
+								disabled={disabled}>
 								<RadioGroup.Option value="male">
 									{({checked}) => (
 										<span
@@ -449,8 +464,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 								<Checkbox
 									isChecked={!!expiryDate}
 									onChange={(checked) => setExpiryDate(checked ? user.subscriptionExpirationDate || new Date() : null)}
-									disabled={disabled}
-								>
+									disabled={disabled}>
 									Enabled
 								</Checkbox>
 							</div>

src/interfaces/user.ts

@@ -77,6 +77,7 @@ export interface DemographicInformation {
 	phone: string;
 	gender: Gender;
 	employment: EmploymentStatus;
+	passport_id?: string;
 }
 
 export interface DemographicCorporateInformation {

src/pages/profile.tsx

@@ -72,6 +72,7 @@ function UserProfile({user, mutateUser}: Props) {
 	const [employment, setEmployment] = useState<EmploymentStatus | undefined>(
 		user.type === "corporate" ? undefined : user.demographicInformation?.employment,
 	);
+	const [passport_id, setPassportID] = useState<string | undefined>(user.type === "student" ? user.demographicInformation?.passport_id : undefined);
 	const [position, setPosition] = useState<string | undefined>(user.type === "corporate" ? user.demographicInformation?.position : undefined);
 	const [companyName, setCompanyName] = useState<string | undefined>(user.type === "agent" ? user.agentInformation?.companyName : undefined);
 	const [commercialRegistration, setCommercialRegistration] = useState<string | undefined>(
@@ -152,6 +153,7 @@ function UserProfile({user, mutateUser}: Props) {
 				employment: user?.type === "corporate" ? undefined : employment,
 				position: user?.type === "corporate" ? position : undefined,
 				gender,
+				passport_id,
 			},
 		});
 		if (request.status === 200) {
@@ -193,6 +195,17 @@ function UserProfile({user, mutateUser}: Props) {
 									required
 								/>
 							</div>
+							{user.type === "student" && (
+								<Input
+									type="text"
+									name="passport_id"
+									label="Passport/National ID"
+									onChange={(e) => setPassportID(e)}
+									placeholder="Enter National ID or Passport number"
+									value={passport_id}
+									required
+								/>
+							)}
 							<div className="flex flex-col md:flex-row gap-8 w-full">
 								<Input
 									label="Current Password"