Added more information for the Agent User

src/components/UserCard.tsx

@@ -44,7 +44,16 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers}:
 	const [referralAgentLabel, setReferralAgentLabel] = useState<string>();
 
 	const [referralAgent, setReferralAgent] = useState(user.type === "corporate" ? user.corporateInformation?.referralAgent : undefined);
-	const [companyName, setCompanyName] = useState(user.type === "corporate" ? user.corporateInformation?.companyInformation.name : undefined);
+	const [companyName, setCompanyName] = useState(
+		user.type === "corporate"
+			? user.corporateInformation?.companyInformation.name
+			: user.type === "agent"
+			? user.agentInformation.companyName
+			: undefined,
+	);
+	const [commercialRegistration, setCommercialRegistration] = useState(
+		user.type === "agent" ? user.agentInformation.commercialRegistration : undefined,
+	);
 	const [userAmount, setUserAmount] = useState(user.type === "corporate" ? user.corporateInformation?.companyInformation.userAmount : undefined);
 	const [paymentValue, setPaymentValue] = useState(user.type === "corporate" ? user.corporateInformation?.payment?.value : undefined);
 	const [paymentCurrency, setPaymentCurrency] = useState(user.type === "corporate" ? user.corporateInformation?.payment?.currency : undefined);
@@ -76,6 +85,13 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers}:
 				subscriptionExpirationDate: expiryDate,
 				type,
 				status,
+				agentInformation:
+					type === "agent"
+						? {
+								companyName,
+								commercialRegistration,
+						  }
+						: undefined,
 				corporateInformation:
 					type === "corporate"
 						? {
@@ -124,6 +140,31 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers}:
 				]}
 			/>
 
+			{user.type === "agent" && (
+				<>
+					<div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full">
+						<Input
+							label="Company Name"
+							type="text"
+							name="companyName"
+							onChange={setCompanyName}
+							placeholder="Enter company name"
+							defaultValue={companyName}
+							required
+						/>
+						<Input
+							label="Commercial Registration"
+							type="text"
+							name="commercialRegistration"
+							onChange={setCommercialRegistration}
+							placeholder="Enter company name"
+							defaultValue={commercialRegistration}
+							required
+						/>
+					</div>
+					<Divider className="w-full !m-0" />
+				</>
+			)}
 			{user.type === "corporate" && (
 				<>
 					<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 w-full">
@@ -209,7 +250,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers}:
 							</div>
 						</div>
 					</div>
-					<Divider className="w-full" />
+					<Divider className="w-full !m-0" />
 				</>
 			)}
 			<section className="flex flex-col gap-4 justify-between">
@@ -367,7 +408,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers}:
 				</div>
 				{(loggedInUser.type === "developer" || loggedInUser.type === "admin") && (
 					<>
-						<Divider className="w-full" />
+						<Divider className="w-full !m-0" />
 						<div className="flex flex-col md:flex-row gap-8 w-full">
 							<div className="flex flex-col gap-3 w-full">
 								<label className="font-normal text-base text-mti-gray-dim">Status</label>