Created a dashboard for the Agent

src/components/UserCard.tsx

@@ -6,7 +6,7 @@ import axios from "axios";
 import clsx from "clsx";
 import moment from "moment";
 import {Divider} from "primereact/divider";
-import {useState} from "react";
+import {useEffect, useState} from "react";
 import ReactDatePicker from "react-datepicker";
 import {BsFileEarmarkText, BsPencil, BsStar} from "react-icons/bs";
 import {toast} from "react-toastify";
@@ -41,15 +41,46 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers}:
 	const [referralAgent, setReferralAgent] = useState(user.corporateInformation?.referralAgent);
 	const [type, setType] = useState(user.type);
 	const [status, setStatus] = useState(user.status);
+	const [companyName, setCompanyName] = useState(user.corporateInformation?.companyInformation.name);
+	const [userAmount, setUserAmount] = useState(user.corporateInformation?.companyInformation.userAmount);
+	const [referralAgentLabel, setReferralAgentLabel] = useState<string>();
 
 	const {stats} = useStats(user.id);
 	const {users} = useUsers();
 
+	useEffect(() => {
+		if (users && users.length > 0) {
+			if (!referralAgent) {
+				setReferralAgentLabel("No manager");
+				return;
+			}
+
+			const agent = users.find((x) => x.id === referralAgent);
+			setReferralAgentLabel(`${agent?.name} - ${agent?.email}`);
+		}
+	}, [users, referralAgent]);
+
 	const updateUser = () => {
 		if (!confirm(`Are you sure you want to update ${user.name}'s account?`)) return;
 
+		// TODO: Add the corporate information when it is changed as well
 		axios
-			.post<{user?: User; ok?: boolean}>(`/api/users/update?id=${user.id}`, {...user, subscriptionExpirationDate: expiryDate, type, status})
+			.post<{user?: User; ok?: boolean}>(`/api/users/update?id=${user.id}`, {
+				...user,
+				subscriptionExpirationDate: expiryDate,
+				type,
+				status,
+				corporateInformation:
+					type === "corporate"
+						? {
+								referralAgent,
+								companyInformation: {
+									companyName,
+									userAmount,
+								},
+						  }
+						: undefined,
+			})
 			.then(() => {
 				toast.success("User updated successfully!");
 				onClose(true);
@@ -269,54 +300,60 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers}:
 				{user.type === "corporate" && (
 					<>
 						<Divider className="w-full" />
-						<div className="flex flex-col md:flex-row gap-8 w-full">
+						<div className="grid grid-cols-2 gap-8 w-full">
 							<Input
 								label="Company Name"
 								type="text"
 								name="companyName"
-								onChange={() => null}
+								onChange={setCompanyName}
 								placeholder="Enter company name"
-								defaultValue={user.corporateInformation?.companyInformation.name}
+								defaultValue={companyName}
 							/>
 							<Input
 								label="Amount of Users"
 								type="number"
 								name="userAmount"
-								onChange={() => null}
+								onChange={(e) => setUserAmount(e ? parseInt(e) : undefined)}
 								placeholder="Enter amount of users"
-								defaultValue={user.corporateInformation?.companyInformation.userAmount}
+								defaultValue={userAmount}
 							/>
 
 							<div className="flex flex-col gap-3 w-full">
-								<label className="font-normal text-base text-mti-gray-dim">Country Agent</label>
-								<Select
-									className="px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
-									options={[
-										{value: "", label: "No referral"},
-										...users.filter((u) => u.type === "agent").map((x) => ({value: x.id, label: `${x.name} - ${x.email}`})),
-									]}
-									defaultValue={{
-										value: referralAgent,
-										label: referralAgent ? users.find((u) => u.id === referralAgent)?.name || "" : "No agent",
-									}}
-									onChange={(value) => setReferralAgent(value?.value)}
-									styles={{
-										control: (styles) => ({
-											...styles,
-											paddingLeft: "4px",
-											border: "none",
-											outline: "none",
-											":focus": {
+								<label className="font-normal text-base text-mti-gray-dim">Country Manager</label>
+								{referralAgentLabel && (
+									<Select
+										className="px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
+										options={[
+											{value: "", label: "No referral"},
+											...users.filter((u) => u.type === "agent").map((x) => ({value: x.id, label: `${x.name} - ${x.email}`})),
+										]}
+										defaultValue={{
+											value: referralAgent,
+											label: referralAgentLabel,
+										}}
+										onChange={(value) => setReferralAgent(value?.value)}
+										styles={{
+											control: (styles) => ({
+												...styles,
+												paddingLeft: "4px",
+												border: "none",
 												outline: "none",
-											},
-										}),
-										option: (styles, state) => ({
-											...styles,
-											backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
-											color: state.isFocused ? "black" : styles.color,
-										}),
-									}}
-								/>
+												":focus": {
+													outline: "none",
+												},
+											}),
+											option: (styles, state) => ({
+												...styles,
+												backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
+												color: state.isFocused ? "black" : styles.color,
+											}),
+										}}
+									/>
+								)}
+							</div>
+
+							<div className="flex flex-col gap-3 w-full">
+								<label className="font-normal text-base text-mti-gray-dim">Pricing</label>
 							</div>
 						</div>
 					</>