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>
 					</>

src/dashboards/Agent.tsx

@@ -47,10 +47,9 @@ export default function AgentDashboard({user}: Props) {
 		setShowModal(!!selectedUser && page === "");
 	}, [selectedUser, page]);
 
-	const studentFilter = (user: User) => user.type === "student" && groups.flatMap((g) => g.participants).includes(user.id);
-	const teacherFilter = (user: User) => user.type === "teacher" && groups.flatMap((g) => g.participants).includes(user.id);
-
-	const getStatsByStudent = (user: User) => stats.filter((s) => s.user === user.id);
+	const corporateFilter = (user: User) => user.type === "corporate";
+	const referredCorporateFilter = (x: User) =>
+		x.type === "corporate" && !!x.corporateInformation && x.corporateInformation.referralAgent === user.id;
 
 	const UserDisplay = (displayUser: User) => (
 		<div
@@ -64,15 +63,8 @@ export default function AgentDashboard({user}: Props) {
 		</div>
 	);
 
-	const StudentsList = () => {
-		const filter = (x: User) =>
-			x.type === "student" &&
-			(!!selectedUser
-				? groups
-						.filter((g) => g.admin === selectedUser.id)
-						.flatMap((g) => g.participants)
-						.includes(x.id) || false
-				: groups.flatMap((g) => g.participants).includes(x.id));
+	const ReferredCorporateList = () => {
+		const filter = (x: User) => x.type === "corporate" && !!x.corporateInformation && x.corporateInformation.referralAgent === user.id;
 
 		return (
 			<>
@@ -83,7 +75,7 @@ export default function AgentDashboard({user}: Props) {
 						<BsArrowLeft className="text-xl" />
 						<span>Back</span>
 					</div>
-					<h2 className="text-2xl font-semibold">Students ({users.filter(filter).length})</h2>
+					<h2 className="text-2xl font-semibold">Referred Corporate ({users.filter(filter).length})</h2>
 				</div>
 
 				<UserList user={user} filter={filter} />
@@ -91,15 +83,8 @@ export default function AgentDashboard({user}: Props) {
 		);
 	};
 
-	const TeachersList = () => {
-		const filter = (x: User) =>
-			x.type === "teacher" &&
-			(!!selectedUser
-				? groups
-						.filter((g) => g.admin === selectedUser.id)
-						.flatMap((g) => g.participants)
-						.includes(x.id) || false
-				: groups.flatMap((g) => g.participants).includes(x.id));
+	const CorporateList = () => {
+		const filter = (x: User) => x.type === "corporate";
 
 		return (
 			<>
@@ -110,7 +95,7 @@ export default function AgentDashboard({user}: Props) {
 						<BsArrowLeft className="text-xl" />
 						<span>Back</span>
 					</div>
-					<h2 className="text-2xl font-semibold">Teachers ({users.filter(filter).length})</h2>
+					<h2 className="text-2xl font-semibold">Referred Corporate ({users.filter(filter).length})</h2>
 				</div>
 
 				<UserList user={user} filter={filter} />
@@ -118,85 +103,31 @@ export default function AgentDashboard({user}: Props) {
 		);
 	};
 
-	const GroupsList = () => {
-		const filter = (x: Group) => x.admin === user.id || x.participants.includes(user.id);
-
-		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">Groups ({groups.filter(filter).length})</h2>
-				</div>
-
-				<GroupList user={user} />
-			</>
-		);
-	};
-
-	const averageLevelCalculator = (studentStats: Stat[]) => {
-		const formattedStats = studentStats
-			.map((s) => ({focus: users.find((u) => u.id === s.user)?.focus, score: s.score, module: s.module}))
-			.filter((f) => !!f.focus);
-		const bandScores = formattedStats.map((s) => ({
-			module: s.module,
-			level: calculateBandScore(s.score.correct, s.score.total, s.module, s.focus!),
-		}));
-
-		const levels: {[key in Module]: number} = {reading: 0, listening: 0, writing: 0, speaking: 0, level: 0};
-		bandScores.forEach((b) => (levels[b.module] += b.level));
-
-		return calculateAverageLevel(levels);
-	};
-
 	const DefaultDashboard = () => (
 		<>
-			<section className="flex flex-wrap gap-2 items-center -lg:justify-center lg:justify-between text-center">
+			<section className="flex flex-wrap gap-2 items-center -lg:justify-center lg:gap-4 text-center">
 				<IconCard
-					onClick={() => setPage("students")}
+					onClick={() => setPage("referredCorporate")}
 					Icon={BsPersonFill}
-					label="Students"
-					value={users.filter(studentFilter).length}
+					label="Referred Corporate"
+					value={users.filter(referredCorporateFilter).length}
 					color="purple"
 				/>
 				<IconCard
-					onClick={() => setPage("teachers")}
-					Icon={BsPersonLinesFill}
-					label="Teachers"
-					value={users.filter(teacherFilter).length}
+					onClick={() => setPage("corporate")}
+					Icon={BsPersonFill}
+					label="Corporate"
+					value={users.filter(corporateFilter).length}
 					color="purple"
 				/>
-				<IconCard
-					Icon={BsClipboard2Data}
-					label="Exams Performed"
-					value={stats.filter((s) => groups.flatMap((g) => g.participants).includes(s.user)).length}
-					color="purple"
-				/>
-				<IconCard
-					Icon={BsPaperclip}
-					label="Average Level"
-					value={averageLevelCalculator(stats.filter((s) => groups.flatMap((g) => g.participants).includes(s.user))).toFixed(1)}
-					color="purple"
-				/>
-				<IconCard onClick={() => setPage("groups")} Icon={BsPersonAdd} label="Groups" value={groups.length} color="purple" />
-				<IconCard
-					Icon={BsClock}
-					label="Expiration Date"
-					value={user.subscriptionExpirationDate ? moment(user.subscriptionExpirationDate).format("DD/MM/yyyy") : "Unlimited"}
-					color="rose"
-				/>
 			</section>
 
 			<section className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full justify-between">
 				<div className="bg-white shadow flex flex-col rounded-xl w-full">
-					<span className="p-4">Latest students</span>
+					<span className="p-4">Latest Referred Corporate</span>
 					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
 						{users
-							.filter(studentFilter)
+							.filter(referredCorporateFilter)
 							.sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))
 							.map((x) => (
 								<UserDisplay key={x.id} {...x} />
@@ -204,41 +135,16 @@ export default function AgentDashboard({user}: Props) {
 					</div>
 				</div>
 				<div className="bg-white shadow flex flex-col rounded-xl w-full">
-					<span className="p-4">Latest teachers</span>
+					<span className="p-4">Latest corporate</span>
 					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
 						{users
-							.filter(teacherFilter)
+							.filter(corporateFilter)
 							.sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))
 							.map((x) => (
 								<UserDisplay key={x.id} {...x} />
 							))}
 					</div>
 				</div>
-				<div className="bg-white shadow flex flex-col rounded-xl w-full">
-					<span className="p-4">Highest level students</span>
-					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
-						{users
-							.filter(studentFilter)
-							.sort((a, b) => calculateAverageLevel(b.levels) - calculateAverageLevel(a.levels))
-							.map((x) => (
-								<UserDisplay key={x.id} {...x} />
-							))}
-					</div>
-				</div>
-				<div className="bg-white shadow flex flex-col rounded-xl w-full">
-					<span className="p-4">Highest exam count students</span>
-					<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
-						{users
-							.filter(studentFilter)
-							.sort(
-								(a, b) =>
-									Object.keys(groupByExam(getStatsByStudent(b))).length - Object.keys(groupByExam(getStatsByStudent(a))).length,
-							)
-							.map((x) => (
-								<UserDisplay key={x.id} {...x} />
-							))}
-					</div>
-				</div>
 			</section>
 		</>
 	);
@@ -265,9 +171,8 @@ export default function AgentDashboard({user}: Props) {
 					)}
 				</>
 			</Modal>
-			{page === "students" && <StudentsList />}
-			{page === "teachers" && <TeachersList />}
-			{page === "groups" && <GroupsList />}
+			{page === "referredCorporate" && <ReferredCorporateList />}
+			{page === "corporate" && <CorporateList />}
 			{page === "" && <DefaultDashboard />}
 		</>
 	);

src/interfaces/user.ts

@@ -26,9 +26,7 @@ export interface CorporateInformation {
 		value: number;
 		currency: string;
 	};
-	monthlyDuration: number;
 	referralAgent?: string;
-	allowedUserAmount?: number;
 }
 
 export interface CompanyInformation {

src/pages/(register)/RegisterCorporate.tsx

@@ -68,8 +68,6 @@ export default function RegisterCorporate({isLoading, setIsLoading, mutateUser,
 						userAmount: companyUsers,
 					},
 					referralAgent,
-					allowedUserAmount: companyUsers,
-					monthlyDuration: subscriptionDuration,
 				},
 			})
 			.then((response) => {