Added more information for the Agent User

src/components/DemographicInformationInput.tsx

@@ -12,16 +12,20 @@ import {KeyedMutator} from "swr";
 import CountrySelect from "./Low/CountrySelect";
 
 interface Props {
+	user: User;
 	mutateUser: KeyedMutator<User>;
 }
 
-export default function DemographicInformationInput({mutateUser}: Props) {
+export default function DemographicInformationInput({user, mutateUser}: Props) {
 	const [country, setCountry] = useState<string>();
 	const [phone, setPhone] = useState<string>();
 	const [gender, setGender] = useState<Gender>();
 	const [employment, setEmployment] = useState<EmploymentStatus>();
 	const [isLoading, setIsLoading] = useState(false);
 
+	const [companyName, setCompanyName] = useState<string>();
+	const [commercialRegistration, setCommercialRegistration] = useState<string>();
+
 	const save = (e?: FormEvent) => {
 		if (e) e.preventDefault();
 		setIsLoading(true);
@@ -34,6 +38,7 @@ export default function DemographicInformationInput({mutateUser}: Props) {
 					gender,
 					employment,
 				},
+				agentInformation: user.type === "agent" ? {companyName, commercialRegistration} : undefined,
 			})
 			.then((response) => mutateUser((response.data as {user: User}).user))
 			.catch(() => {
@@ -53,6 +58,18 @@ export default function DemographicInformationInput({mutateUser}: Props) {
 				about yourself.
 			</h2>
 			<form className="flex flex-col items-center justify-items-center gap-6 w-full h-full -md:px-4 lg:w-1/2 mb-32" onSubmit={save}>
+				{user.type === "agent" && (
+					<div className="w-full flex gap-8">
+						<Input type="text" onChange={setCompanyName} name="companyName" label="Company Name" required />
+						<Input
+							type="text"
+							onChange={setCommercialRegistration}
+							name="commercialRegistration"
+							label="Commercial Registration"
+							required
+						/>
+					</div>
+				)}
 				<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} />
@@ -125,7 +142,14 @@ export default function DemographicInformationInput({mutateUser}: Props) {
 					className="lg:mt-8 max-w-[400px] w-full self-end"
 					color="purple"
 					onClick={save}
-					disabled={isLoading || !country || !phone || !gender || !employment}>
+					disabled={
+						isLoading ||
+						!country ||
+						!phone ||
+						!gender ||
+						!employment ||
+						(user.type === "agent" ? !companyName || !commercialRegistration : false)
+					}>
 					{!isLoading && "Save information"}
 					{isLoading && (
 						<div className="flex items-center justify-center">

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>

src/dashboards/Admin.tsx

@@ -7,7 +7,16 @@ import UserList from "@/pages/(admin)/Lists/UserList";
 import {dateSorter} from "@/utils";
 import moment from "moment";
 import {useEffect, useState} from "react";
-import {BsArrowLeft, BsGlobeCentralSouthAsia, BsPerson, BsPersonFill, BsPersonFillGear, BsPersonGear, BsPersonLinesFill} from "react-icons/bs";
+import {
+	BsArrowLeft,
+	BsBriefcaseFill,
+	BsGlobeCentralSouthAsia,
+	BsPerson,
+	BsPersonFill,
+	BsPersonFillGear,
+	BsPersonGear,
+	BsPersonLinesFill,
+} from "react-icons/bs";
 import UserCard from "@/components/UserCard";
 import useGroups from "@/hooks/useGroups";
 import IconCard from "./IconCard";
@@ -95,6 +104,26 @@ export default function AdminDashboard({user}: Props) {
 		);
 	};
 
+	const AgentsList = () => {
+		const filter = (x: User) => x.type === "agent";
+
+		return (
+			<>
+				<div className="flex flex-col gap-4">
+					<div
+						onClick={() => setPage("")}
+						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+						<BsArrowLeft className="text-xl" />
+						<span>Back</span>
+					</div>
+					<h2 className="text-2xl font-semibold">Country Managers ({users.filter(filter).length})</h2>
+				</div>
+
+				<UserList user={user} filter={filter} />
+			</>
+		);
+	};
+
 	const CorporateList = () => (
 		<>
 			<div className="flex flex-col gap-4">
@@ -175,6 +204,13 @@ export default function AdminDashboard({user}: Props) {
 					onClick={() => setPage("corporate")}
 					color="purple"
 				/>
+				<IconCard
+					Icon={BsBriefcaseFill}
+					label="Country Managers"
+					value={users.filter((x) => x.type === "agent").length}
+					onClick={() => setPage("agents")}
+					color="purple"
+				/>
 				<IconCard
 					Icon={BsGlobeCentralSouthAsia}
 					label="Countries"
@@ -350,6 +386,7 @@ export default function AdminDashboard({user}: Props) {
 			{page === "students" && <StudentsList />}
 			{page === "teachers" && <TeachersList />}
 			{page === "corporate" && <CorporateList />}
+			{page === "agents" && <AgentsList />}
 			{page === "inactiveStudents" && <InactiveStudentsList />}
 			{page === "inactiveCorporate" && <InactiveCorporateList />}
 			{page === "" && <DefaultDashboard />}

src/pages/index.tsx

@@ -127,7 +127,7 @@ export default function Home({envVariables}: {envVariables: {[key: string]: stri
 					<link rel="icon" href="/favicon.ico" />
 				</Head>
 				<Layout user={user} navDisabled>
-					<DemographicInformationInput mutateUser={mutateUser} />
+					<DemographicInformationInput mutateUser={mutateUser} user={user} />
 				</Layout>
 			</>
 		);

src/pages/profile.tsx

@@ -208,6 +208,29 @@ export default function Home() {
 										/>
 									</div>
 
+									{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={() => null}
+												placeholder="Enter company name"
+												defaultValue={user.agentInformation.companyName}
+												disabled
+											/>
+											<Input
+												label="Commercial Registration"
+												type="text"
+												name="commercialRegistration"
+												onChange={() => null}
+												placeholder="Enter company name"
+												defaultValue={user.agentInformation.commercialRegistration}
+												disabled
+											/>
+										</div>
+									)}
+
 									<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">Country *</label>