Created a dashboard for the Agent

package.json

@@ -44,6 +44,7 @@
     "random-words": "^2.0.0",
     "react": "18.2.0",
     "react-chartjs-2": "^5.2.0",
+    "react-currency-input-field": "^3.6.12",
     "react-datepicker": "^4.18.0",
     "react-dom": "18.2.0",
     "react-firebase-hooks": "^5.1.1",

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,26 +300,27 @@ 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>
+								<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={[
@@ -297,7 +329,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers}:
 										]}
 										defaultValue={{
 											value: referralAgent,
-										label: referralAgent ? users.find((u) => u.id === referralAgent)?.name || "" : "No agent",
+											label: referralAgentLabel,
 										}}
 										onChange={(value) => setReferralAgent(value?.value)}
 										styles={{
@@ -317,6 +349,11 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers}:
 											}),
 										}}
 									/>
+								)}
+							</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) => {

yarn.lock

@@ -4431,6 +4431,11 @@ react-chartjs-2@^5.2.0:
   resolved "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.2.0.tgz"
   integrity sha512-98iN5aguJyVSxp5U3CblRLH67J8gkfyGNbiK3c+l1QI/G4irHMPQw44aEPmjVag+YKTyQ260NcF82GTQ3bdscA==
 
+react-currency-input-field@^3.6.12:
+  version "3.6.12"
+  resolved "https://registry.yarnpkg.com/react-currency-input-field/-/react-currency-input-field-3.6.12.tgz#6c59bec50b9a769459c971f94f9a67b7bf9046f7"
+  integrity sha512-92mVEo1u7tF8Lz5JeaEHpQY/p6ulmnfSk9r3dVMyykQNLoScvgQ7GczvV3uGDr81xkTF3czj7CTJ9Ekqq4+pIA==
+
 react-datepicker@^4.18.0:
   version "4.18.0"
   resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-4.18.0.tgz#d66301acc47833d31fa6f46f98781b084106da0e"