ENCOA-272

src/components/AssignmentCard.tsx

@@ -0,0 +1,148 @@
+import ProgressBar from "@/components/Low/ProgressBar";
+import useUsers from "@/hooks/useUsers";
+import { Module } from "@/interfaces";
+import { Assignment } from "@/interfaces/results";
+import { calculateBandScore } from "@/utils/score";
+import clsx from "clsx";
+import moment from "moment";
+import { BsBook, BsClipboard, BsHeadphones, BsMegaphone, BsPen } from "react-icons/bs";
+import { usePDFDownload } from "@/hooks/usePDFDownload";
+import { useAssignmentArchive } from "@/hooks/useAssignmentArchive";
+import { uniqBy } from "lodash";
+import { useAssignmentUnarchive } from "@/hooks/useAssignmentUnarchive";
+import { useAssignmentRelease } from "@/hooks/useAssignmentRelease";
+import { getUserName } from "@/utils/users";
+import { User } from "@/interfaces/user";
+import { EntityWithRoles } from "@/interfaces/entity";
+
+interface Props {
+	users: User[];
+	onClick?: () => void;
+	allowDownload?: boolean;
+	reload?: Function;
+	allowArchive?: boolean;
+	allowUnarchive?: boolean;
+	allowExcelDownload?: boolean;
+	entityObj?: EntityWithRoles
+}
+
+export default function AssignmentCard({
+	id,
+	name,
+	assigner,
+	startDate,
+	endDate,
+	entityObj,
+	assignees,
+	results,
+	exams,
+	archived,
+	onClick,
+	allowDownload,
+	reload,
+	allowArchive,
+	allowUnarchive,
+	allowExcelDownload,
+	users,
+	released,
+}: Assignment & Props) {
+	const renderPdfIcon = usePDFDownload("assignments");
+	const renderExcelIcon = usePDFDownload("assignments", "excel");
+	const renderArchiveIcon = useAssignmentArchive(id, reload);
+	const renderUnarchiveIcon = useAssignmentUnarchive(id, reload);
+	const renderReleaseIcon = useAssignmentRelease(id, reload);
+
+	const calculateAverageModuleScore = (module: Module) => {
+		const resultModuleBandScores = results.map((r) => {
+			const moduleStats = r.stats.filter((s) => s.module === module);
+
+			const correct = moduleStats.reduce((acc, curr) => acc + curr.score.correct, 0);
+			const total = moduleStats.reduce((acc, curr) => acc + curr.score.total, 0);
+			return calculateBandScore(correct, total, module, r.type);
+		});
+
+		return resultModuleBandScores.length === 0 ? -1 : resultModuleBandScores.reduce((acc, curr) => acc + curr, 0) / results.length;
+	};
+
+	const uniqModules = uniqBy(exams, (x) => x.module);
+
+	const shouldRenderPDF = () => {
+		if (released && allowDownload) {
+			// in order to be downloadable, the assignment has to be released
+			// the component should have the allowDownload prop
+			// and the assignment should not have the level module
+			return uniqModules.every(({ module }) => module !== "level");
+		}
+
+		return false;
+	};
+
+	const shouldRenderExcel = () => {
+		if (released && allowExcelDownload) {
+			// in order to be downloadable, the assignment has to be released
+			// the component should have the allowExcelDownload prop
+			// and the assignment should have the level module
+			return uniqModules.some(({ module }) => module === "level");
+		}
+
+		return false;
+	};
+
+	return (
+		<div
+			onClick={onClick}
+			className="border-mti-gray-platinum flex h-fit w-[350px] cursor-pointer flex-col gap-6 rounded-xl border bg-white p-4 transition duration-300 ease-in-out hover:drop-shadow">
+			<div className="flex flex-col gap-3">
+				<div className="flex flex-row justify-between">
+					<h3 className="text-xl font-semibold">{name}</h3>
+					<div className="flex gap-2">
+						{shouldRenderPDF() && renderPdfIcon(id, "text-mti-gray-dim", "text-mti-gray-dim")}
+						{shouldRenderExcel() && renderExcelIcon(id, "text-mti-gray-dim", "text-mti-gray-dim")}
+						{allowArchive && !archived && renderArchiveIcon("text-mti-gray-dim", "text-mti-gray-dim")}
+						{allowUnarchive && archived && renderUnarchiveIcon("text-mti-gray-dim", "text-mti-gray-dim")}
+						{!released && renderReleaseIcon("text-mti-gray-dim", "text-mti-gray-dim")}
+					</div>
+				</div>
+				<ProgressBar
+					color={results.length / assignees.length < 0.5 ? "red" : "purple"}
+					percentage={(results.length / assignees.length) * 100}
+					label={`${results.length}/${assignees.length}`}
+					className="h-5"
+					textClassName={results.length / assignees.length < 0.5 ? "!text-mti-gray-dim font-light" : "text-white"}
+				/>
+			</div>
+			<div className="flex flex-col gap-1">
+				<span className="flex justify-between gap-1">
+					<span>{moment(startDate).format("DD/MM/YY, HH:mm")}</span>
+					<span>-</span>
+					<span>{moment(endDate).format("DD/MM/YY, HH:mm")}</span>
+				</span>
+				<span>Assigner: {getUserName(users.find((x) => x.id === assigner))}</span>
+				{entityObj && <span>Entity: {entityObj.label}</span>}
+			</div>
+			<div className="-md:mt-2 grid w-full grid-cols-4 place-items-start gap-2">
+				{uniqModules.map(({ module }) => (
+					<div
+						key={module}
+						className={clsx(
+							"-md:px-4 flex w-fit items-center gap-2 rounded-xl py-2 text-white md:px-2 xl:px-4",
+							module === "reading" && "bg-ielts-reading",
+							module === "listening" && "bg-ielts-listening",
+							module === "writing" && "bg-ielts-writing",
+							module === "speaking" && "bg-ielts-speaking",
+							module === "level" && "bg-ielts-level",
+						)}>
+						{module === "reading" && <BsBook className="h-4 w-4" />}
+						{module === "listening" && <BsHeadphones className="h-4 w-4" />}
+						{module === "writing" && <BsPen className="h-4 w-4" />}
+						{module === "speaking" && <BsMegaphone className="h-4 w-4" />}
+						{module === "level" && <BsClipboard className="h-4 w-4" />}
+						{calculateAverageModuleScore(module) > -1 && (
+							<span className="text-sm">{calculateAverageModuleScore(module).toFixed(1)}</span>
+						)}
+					</div>
+				))}
+			</div>
+		</div>
+	);
+}

src/components/AssignmentView.tsx

@@ -0,0 +1,339 @@
+import Button from "@/components/Low/Button";
+import ProgressBar from "@/components/Low/ProgressBar";
+import Modal from "@/components/Modal";
+import useUsers from "@/hooks/useUsers";
+import { Module } from "@/interfaces";
+import { Assignment } from "@/interfaces/results";
+import { Stat, User } from "@/interfaces/user";
+import useExamStore from "@/stores/exam";
+import { getExamById } from "@/utils/exams";
+import { sortByModule } from "@/utils/moduleUtils";
+import { calculateBandScore } from "@/utils/score";
+import { getUserName } from "@/utils/users";
+import axios from "axios";
+import clsx from "clsx";
+import { capitalize, uniqBy } from "lodash";
+import moment from "moment";
+import { useRouter } from "next/router";
+import { BsBook, BsClipboard, BsHeadphones, BsMegaphone, BsPen } from "react-icons/bs";
+import { toast } from "react-toastify";
+import { futureAssignmentFilter } from "@/utils/assignments";
+
+interface Props {
+	isOpen: boolean;
+	users: User[];
+	assignment?: Assignment;
+	onClose: () => void;
+}
+
+export default function AssignmentView({ isOpen, users, assignment, onClose }: Props) {
+	const router = useRouter();
+
+	const dispatch = useExamStore((s) => s.dispatch);
+
+	const deleteAssignment = async () => {
+		if (!confirm("Are you sure you want to delete this assignment?")) return;
+
+		axios
+			.delete(`/api/assignments/${assignment?.id}`)
+			.then(() => toast.success(`Successfully deleted the assignment "${assignment?.name}".`))
+			.catch(() => toast.error("Something went wrong, please try again later."))
+			.finally(onClose);
+	};
+
+	const startAssignment = () => {
+		if (assignment) {
+			axios
+				.post(`/api/assignments/${assignment.id}/start`)
+				.then(() => {
+					toast.success(`The assignment "${assignment.name}" has been started successfully!`);
+				})
+				.catch((e) => {
+					console.log(e);
+					toast.error("Something went wrong, please try again later!");
+				});
+		}
+	};
+
+	const formatTimestamp = (timestamp: string) => {
+		const date = moment(parseInt(timestamp));
+		const formatter = "YYYY/MM/DD - HH:mm";
+
+		return date.format(formatter);
+	};
+
+	const calculateAverageModuleScore = (module: Module) => {
+		if (!assignment) return -1;
+
+		const resultModuleBandScores = assignment.results.map((r) => {
+			const moduleStats = r.stats.filter((s) => s.module === module);
+
+			const correct = moduleStats.reduce((acc, curr) => acc + curr.score.correct, 0);
+			const total = moduleStats.reduce((acc, curr) => acc + curr.score.total, 0);
+			return calculateBandScore(correct, total, module, r.type);
+		});
+
+		return resultModuleBandScores.length === 0 ? -1 : resultModuleBandScores.reduce((acc, curr) => acc + curr, 0) / assignment.results.length;
+	};
+
+	const aggregateScoresByModule = (stats: Stat[]): { module: Module; total: number; missing: number; correct: number }[] => {
+		const scores: {
+			[key in Module]: { total: number; missing: number; correct: number };
+		} = {
+			reading: {
+				total: 0,
+				correct: 0,
+				missing: 0,
+			},
+			listening: {
+				total: 0,
+				correct: 0,
+				missing: 0,
+			},
+			writing: {
+				total: 0,
+				correct: 0,
+				missing: 0,
+			},
+			speaking: {
+				total: 0,
+				correct: 0,
+				missing: 0,
+			},
+			level: {
+				total: 0,
+				correct: 0,
+				missing: 0,
+			},
+		};
+
+		stats.filter(x => !x.isPractice).forEach((x) => {
+			scores[x.module!] = {
+				total: scores[x.module!].total + x.score.total,
+				correct: scores[x.module!].correct + x.score.correct,
+				missing: scores[x.module!].missing + x.score.missing,
+			};
+		});
+
+		return Object.keys(scores)
+			.filter((x) => scores[x as Module].total > 0)
+			.map((x) => ({ module: x as Module, ...scores[x as Module] }));
+	};
+
+	const customContent = (stats: Stat[], user: string, focus: "academic" | "general") => {
+		const correct = stats.reduce((accumulator, current) => accumulator + current.score.correct, 0);
+		const total = stats.reduce((accumulator, current) => accumulator + current.score.total, 0);
+		const aggregatedScores = aggregateScoresByModule(stats).filter((x) => x.total > 0);
+
+		const aggregatedLevels = aggregatedScores.map((x) => ({
+			module: x.module,
+			level: calculateBandScore(x.correct, x.total, x.module, focus),
+		}));
+
+		const timeSpent = stats[0].timeSpent;
+
+		const selectExam = () => {
+			const examPromises = uniqBy(stats, "exam").map((stat) => getExamById(stat.module, stat.exam));
+
+			Promise.all(examPromises).then((exams) => {
+				if (exams.every((x) => !!x)) {
+					dispatch({
+						type: 'INIT_SOLUTIONS', payload: {
+							exams: exams.map((x) => x!).sort(sortByModule),
+							modules: exams
+								.map((x) => x!)
+								.sort(sortByModule)
+								.map((x) => x!.module),
+							stats
+						}
+					});
+					router.push("/exam");
+				}
+			});
+		};
+
+		const content = (
+			<>
+				<div className="-md:items-center flex w-full justify-between 2xl:items-center">
+					<div className="-md:gap-2 -md:items-center flex md:flex-col md:gap-1 2xl:flex-row 2xl:items-center 2xl:gap-2">
+						<span className="font-medium">{formatTimestamp(stats[0].date.toString())}</span>
+						{timeSpent && (
+							<>
+								<span className="md:hidden 2xl:flex">• </span>
+								<span className="text-sm">{Math.floor(timeSpent / 60)} minutes</span>
+							</>
+						)}
+					</div>
+					<span
+						className={clsx(
+							correct / total >= 0.7 && "text-mti-purple",
+							correct / total >= 0.3 && correct / total < 0.7 && "text-mti-red",
+							correct / total < 0.3 && "text-mti-rose",
+						)}>
+						Level{" "}
+						{(aggregatedLevels.reduce((accumulator, current) => accumulator + current.level, 0) / aggregatedLevels.length).toFixed(1)}
+					</span>
+				</div>
+
+				<div className="flex w-full flex-col gap-1">
+					<div className="-md:mt-2 grid w-full grid-cols-4 place-items-start gap-2">
+						{aggregatedLevels.map(({ module, level }) => (
+							<div
+								key={module}
+								className={clsx(
+									"-md:px-4 flex w-fit items-center gap-2 rounded-xl py-2 text-white md:px-2 xl:px-4",
+									module === "reading" && "bg-ielts-reading",
+									module === "listening" && "bg-ielts-listening",
+									module === "writing" && "bg-ielts-writing",
+									module === "speaking" && "bg-ielts-speaking",
+									module === "level" && "bg-ielts-level",
+								)}>
+								{module === "reading" && <BsBook className="h-4 w-4" />}
+								{module === "listening" && <BsHeadphones className="h-4 w-4" />}
+								{module === "writing" && <BsPen className="h-4 w-4" />}
+								{module === "speaking" && <BsMegaphone className="h-4 w-4" />}
+								{module === "level" && <BsClipboard className="h-4 w-4" />}
+								<span className="text-sm">{level.toFixed(1)}</span>
+							</div>
+						))}
+					</div>
+				</div>
+			</>
+		);
+
+		return (
+			<div className="flex flex-col gap-2">
+				<span>
+					{(() => {
+						const student = users.find((u) => u.id === user);
+						return `${student?.name} (${student?.email})`;
+					})()}
+				</span>
+				<div
+					key={user}
+					className={clsx(
+						"border-mti-gray-platinum -md:hidden flex cursor-pointer flex-col gap-4 rounded-xl border p-4 transition duration-300 ease-in-out",
+						correct / total >= 0.7 && "hover:border-mti-purple",
+						correct / total >= 0.3 && correct / total < 0.7 && "hover:border-mti-red",
+						correct / total < 0.3 && "hover:border-mti-rose",
+					)}
+					onClick={selectExam}
+					role="button">
+					{content}
+				</div>
+				<div
+					key={user}
+					className={clsx(
+						"border-mti-gray-platinum -md:tooltip flex cursor-pointer flex-col gap-4 rounded-xl border p-4 transition duration-300 ease-in-out md:hidden",
+						correct / total >= 0.7 && "hover:border-mti-purple",
+						correct / total >= 0.3 && correct / total < 0.7 && "hover:border-mti-red",
+						correct / total < 0.3 && "hover:border-mti-rose",
+					)}
+					data-tip="Your screen size is too small to view previous exams."
+					role="button">
+					{content}
+				</div>
+			</div>
+		);
+	};
+
+	const shouldRenderStart = () => {
+		if (assignment) {
+			if (futureAssignmentFilter(assignment)) {
+				return true;
+			}
+		}
+
+		return false;
+	};
+
+	return (
+		<Modal isOpen={isOpen} onClose={onClose} title={assignment?.name}>
+			<div className="mt-4 flex w-full flex-col gap-4">
+				<ProgressBar
+					color="purple"
+					label={`${assignment?.results.length}/${assignment?.assignees.length} assignees completed`}
+					className="h-6"
+					textClassName={
+						(assignment?.results.length || 0) / (assignment?.assignees.length || 1) < 0.5 ? "!text-mti-gray-dim font-light" : "text-white"
+					}
+					percentage={((assignment?.results.length || 0) / (assignment?.assignees.length || 1)) * 100}
+				/>
+				<div className="flex items-start gap-8">
+					<div className="flex flex-col gap-2">
+						<span>Start Date: {moment(assignment?.startDate).format("DD/MM/YY, HH:mm")}</span>
+						<span>End Date: {moment(assignment?.endDate).format("DD/MM/YY, HH:mm")}</span>
+					</div>
+					<div className="flex flex-col gap-2">
+						<span>
+							Assignees:{" "}
+							{users
+								.filter((u) => assignment?.assignees.includes(u.id))
+								.map((u) => `${u.name} (${u.email})`)
+								.join(", ")}
+						</span>
+						<span>Assigner: {getUserName(users.find((x) => x.id === assignment?.assigner))}</span>
+					</div>
+				</div>
+				<div className="flex flex-col gap-2">
+					<span className="text-xl font-bold">Average Scores</span>
+					<div className="-md:mt-2 flex w-full items-center gap-4">
+						{assignment &&
+							uniqBy(assignment.exams, (x) => x.module).map(({ module }) => (
+								<div
+									data-tip={capitalize(module)}
+									key={module}
+									className={clsx(
+										"-md:px-4 tooltip flex w-fit items-center gap-2 rounded-xl py-2 text-white md:px-2 xl:px-4",
+										module === "reading" && "bg-ielts-reading",
+										module === "listening" && "bg-ielts-listening",
+										module === "writing" && "bg-ielts-writing",
+										module === "speaking" && "bg-ielts-speaking",
+										module === "level" && "bg-ielts-level",
+									)}>
+									{module === "reading" && <BsBook className="h-4 w-4" />}
+									{module === "listening" && <BsHeadphones className="h-4 w-4" />}
+									{module === "writing" && <BsPen className="h-4 w-4" />}
+									{module === "speaking" && <BsMegaphone className="h-4 w-4" />}
+									{module === "level" && <BsClipboard className="h-4 w-4" />}
+									{calculateAverageModuleScore(module) > -1 && (
+										<span className="text-sm">{calculateAverageModuleScore(module).toFixed(1)}</span>
+									)}
+								</div>
+							))}
+					</div>
+				</div>
+				<div className="flex flex-col gap-2">
+					<span className="text-xl font-bold">
+						Results ({assignment?.results.length}/{assignment?.assignees.length})
+					</span>
+					<div>
+						{assignment && assignment?.results.length > 0 && (
+							<div className="grid w-full grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3 xl:gap-6">
+								{assignment.results.map((r) => customContent(r.stats, r.user, r.type))}
+							</div>
+						)}
+						{assignment && assignment?.results.length === 0 && <span className="ml-1 font-semibold">No results yet...</span>}
+					</div>
+				</div>
+
+				<div className="flex gap-4 w-full items-center justify-end">
+					{assignment && (assignment.results.length === assignment.assignees.length || moment().isAfter(moment(assignment.endDate))) && (
+						<Button variant="outline" color="red" className="w-full max-w-[200px]" onClick={deleteAssignment}>
+							Delete
+						</Button>
+					)}
+					{/** if the assignment is not deemed as active yet, display start */}
+					{shouldRenderStart() && (
+						<Button variant="outline" color="green" className="w-full max-w-[200px]" onClick={startAssignment}>
+							Start
+						</Button>
+					)}
+					<Button onClick={onClose} className="w-full max-w-[200px]">
+						Close
+					</Button>
+				</div>
+			</div>
+		</Modal>
+	);
+}

src/components/IconCard.tsx

@@ -0,0 +1,45 @@
+import clsx from "clsx";
+import { IconType } from "react-icons";
+
+interface Props {
+	Icon: IconType;
+	label: string;
+	value?: string | number;
+	color: "purple" | "rose" | "red" | "green";
+	tooltip?: string;
+	onClick?: () => void;
+	isSelected?: boolean;
+	isLoading?: boolean;
+	disabled?: boolean
+	className?: string;
+}
+
+export default function IconCard({ Icon, label, value, color, tooltip, onClick, className, isLoading, disabled, isSelected }: Props) {
+	const colorClasses: { [key in typeof color]: string } = {
+		purple: "mti-purple-light",
+		red: "mti-red-light",
+		rose: "mti-rose-light",
+		green: "mti-green-light",
+	};
+
+	return (
+		<button
+			onClick={onClick}
+			disabled={disabled}
+			className={clsx(
+				"bg-white border rounded-xl shadow p-4 flex flex-col gap-4 items-center text-center w-full h-52 justify-center cursor-pointer hover:shadow-lg hover:border-mti-purple-dark transition ease-in-out duration-300 disabled:grayscale-0",
+				tooltip && "tooltip tooltip-bottom",
+				isSelected && `border border-solid border-${colorClasses[color]}`,
+				className,
+			)}
+			data-tip={tooltip}>
+			<Icon className={clsx("text-6xl", `text-${colorClasses[color]}`)} />
+			<span className="flex flex-col gap-1 items-center text-xl">
+				<span className="text-lg">{label}</span>
+				<span className={clsx("font-semibold", `text-${colorClasses[color]}`, isLoading && "animate-pulse")}>
+					{isLoading ? "..." : value}
+				</span>
+			</span>
+		</button>
+	);
+}

src/components/Medium/InviteCard.tsx

@@ -6,72 +6,68 @@ import { BsArrowRepeat } from "react-icons/bs";
 import { toast } from "react-toastify";
 
 interface Props {
-  invite: Invite;
-  users: User[];
-  reload: () => void;
+	invite: Invite;
+	users: User[];
+	reload: () => void;
 }
 
 export default function InviteCard({ invite, users, reload }: Props) {
-  const [isLoading, setIsLoading] = useState(false);
+	const [isLoading, setIsLoading] = useState(false);
 
-  const inviter = users.find((u) => u.id === invite.from);
-  const name = !inviter
-    ? null
-    : inviter.type === "corporate"
-      ? inviter.corporateInformation?.companyInformation?.name || inviter.name
-      : inviter.name;
+	const inviter = users.find((u) => u.id === invite.from);
+	const name = !inviter ? null : inviter.name;
 
-  const decide = (decision: "accept" | "decline") => {
-    if (!confirm(`Are you sure you want to ${decision} this invite?`)) return;
+	const decide = (decision: "accept" | "decline") => {
+		if (!confirm(`Are you sure you want to ${decision} this invite?`)) return;
 
-    setIsLoading(true);
-    axios
-      .get(`/api/invites/${decision}/${invite.id}`)
-      .then(() => {
-        toast.success(
-          `Successfully ${decision === "accept" ? "accepted" : "declined"} the invite!`,
-          { toastId: "success" },
-        );
-        reload();
-      })
-      .catch((e) => {
-        toast.success(`Something went wrong, please try again later!`, {
-          toastId: "error",
-        });
-        reload();
-      })
-      .finally(() => setIsLoading(false));
-  };
+		setIsLoading(true);
+		axios
+			.get(`/api/invites/${decision}/${invite.id}`)
+			.then(() => {
+				toast.success(
+					`Successfully ${decision === "accept" ? "accepted" : "declined"} the invite!`,
+					{ toastId: "success" },
+				);
+				reload();
+			})
+			.catch((e) => {
+				toast.success(`Something went wrong, please try again later!`, {
+					toastId: "error",
+				});
+				reload();
+			})
+			.finally(() => setIsLoading(false));
+	};
 
-  return (
-    <div className="border-mti-gray-anti-flash flex min-w-[200px] flex-col gap-6 rounded-xl border p-4 text-black">
-      <span>Invited by {name}</span>
-      <div className="flex items-center gap-2">
-        <button
-          onClick={() => decide("accept")}
-          disabled={isLoading}
-          className="bg-mti-green-ultralight hover:bg-mti-green-light w-24 rounded-lg p-2 px-4 transition duration-300 ease-in-out hover:text-white disabled:cursor-not-allowed"
-        >
-          {!isLoading && "Accept"}
-          {isLoading && (
-            <div className="flex items-center justify-center">
-              <BsArrowRepeat className="animate-spin text-white" size={25} />
-            </div>
-          )}
-        </button>
-        <button
-          onClick={() => decide("decline")}
-          disabled={isLoading}
-          className="bg-mti-red-ultralight hover:bg-mti-red-light w-24 rounded-lg p-2 px-4 transition duration-300 ease-in-out hover:text-white disabled:cursor-not-allowed"
-        >
-          {!isLoading && "Decline"}
-          {isLoading && (
-            <div className="flex items-center justify-center">
-              <BsArrowRepeat className="animate-spin text-white" size={25} />
-            </div>
-          )}
-        </button>
-      </div>
-    </div>
-  );
+	return (
+		<div className="border-mti-gray-anti-flash flex min-w-[200px] flex-col gap-6 rounded-xl border p-4 text-black">
+			<span>Invited by {name}</span>
+			<div className="flex items-center gap-2">
+				<button
+					onClick={() => decide("accept")}
+					disabled={isLoading}
+					className="bg-mti-green-ultralight hover:bg-mti-green-light w-24 rounded-lg p-2 px-4 transition duration-300 ease-in-out hover:text-white disabled:cursor-not-allowed"
+				>
+					{!isLoading && "Accept"}
+					{isLoading && (
+						<div className="flex items-center justify-center">
+							<BsArrowRepeat className="animate-spin text-white" size={25} />
+						</div>
+					)}
+				</button>
+				<button
+					onClick={() => decide("decline")}
+					disabled={isLoading}
+					className="bg-mti-red-ultralight hover:bg-mti-red-light w-24 rounded-lg p-2 px-4 transition duration-300 ease-in-out hover:text-white disabled:cursor-not-allowed"
+				>
+					{!isLoading && "Decline"}
+					{isLoading && (
+						<div className="flex items-center justify-center">
+							<BsArrowRepeat className="animate-spin text-white" size={25} />
+						</div>
+					)}
+				</button>
+			</div>
+		</div>
+	);
 }

src/components/Navbar.tsx

@@ -1,25 +1,25 @@
-import {User} from "@/interfaces/user";
+import { User } from "@/interfaces/user";
 import Link from "next/link";
 import FocusLayer from "@/components/FocusLayer";
-import {preventNavigation} from "@/utils/navigation.disabled";
-import {useRouter} from "next/router";
-import {BsList, BsQuestionCircle, BsQuestionCircleFill} from "react-icons/bs";
+import { preventNavigation } from "@/utils/navigation.disabled";
+import { useRouter } from "next/router";
+import { BsList, BsQuestionCircle, BsQuestionCircleFill } from "react-icons/bs";
 import clsx from "clsx";
 import moment from "moment";
 import MobileMenu from "./MobileMenu";
-import {useEffect, useState} from "react";
-import {Type} from "@/interfaces/user";
-import {USER_TYPE_LABELS} from "@/resources/user";
+import { useEffect, useState } from "react";
+import { Type } from "@/interfaces/user";
+import { USER_TYPE_LABELS } from "@/resources/user";
 import useGroups from "@/hooks/useGroups";
-import {isUserFromCorporate} from "@/utils/groups";
+import { isUserFromCorporate } from "@/utils/groups";
 import Button from "./Low/Button";
 import Modal from "./Modal";
 import Input from "./Low/Input";
 import TicketSubmission from "./High/TicketSubmission";
-import {Module} from "@/interfaces";
+import { Module } from "@/interfaces";
 import Badge from "./Low/Badge";
 
-import {BsArrowRepeat, BsBook, BsCheck, BsCheckCircle, BsClipboard, BsHeadphones, BsMegaphone, BsPen, BsXCircle} from "react-icons/bs";
+import { BsArrowRepeat, BsBook, BsCheck, BsCheckCircle, BsClipboard, BsHeadphones, BsMegaphone, BsPen, BsXCircle } from "react-icons/bs";
 interface Props {
 	user: User;
 	navDisabled?: boolean;
@@ -29,7 +29,7 @@ interface Props {
 }
 
 /* eslint-disable @next/next/no-img-element */
-export default function Navbar({user, path, navDisabled = false, focusMode = false, onFocusLayerMouseEnter}: Props) {
+export default function Navbar({ user, path, navDisabled = false, focusMode = false, onFocusLayerMouseEnter }: Props) {
 	const [isMenuOpen, setIsMenuOpen] = useState(false);
 	const [disablePaymentPage, setDisablePaymentPage] = useState(true);
 	const [isTicketOpen, setIsTicketOpen] = useState(false);
@@ -109,9 +109,8 @@ export default function Navbar({user, path, navDisabled = false, focusMode = fal
 						badges.map((badge) => (
 							<div
 								key={badge.module}
-								className={`${
-									badge.achieved ? `bg-ielts-${badge.module}` : "bg-mti-gray-anti-flash"
-								} flex h-8 w-8 items-center justify-center rounded-full`}>
+								className={`${badge.achieved ? `bg-ielts-${badge.module}` : "bg-mti-gray-anti-flash"
+									} flex h-8 w-8 items-center justify-center rounded-full`}>
 								{badge.icon()}
 							</div>
 						))}
@@ -145,9 +144,6 @@ export default function Navbar({user, path, navDisabled = false, focusMode = fal
 					<Link href={disableNavigation ? "" : "/profile"} className="-md:hidden flex items-center justify-end gap-6">
 						<img src={user.profilePicture} alt={user.name} className="h-10 w-10 rounded-full object-cover" />
 						<span className="-md:hidden text-right">
-							{(user.type === "corporate" || user.type === "mastercorporate") && !!user.corporateInformation?.companyInformation?.name
-								? `${user.corporateInformation?.companyInformation.name} |`
-								: ""}{" "}
 							{user.name} | {USER_TYPE_LABELS[user.type]}
 							{user.type === "corporate" &&
 								!!user.demographicInformation?.position &&

src/components/UserCard.tsx

@@ -1,15 +1,15 @@
 import useFilterRecordsByUser from "@/hooks/useFilterRecordsByUser";
-import {CorporateInformation, CorporateUser, EMPLOYMENT_STATUS, User, Type, Stat, Gender} from "@/interfaces/user";
-import {groupBySession, averageScore} from "@/utils/stats";
-import {RadioGroup} from "@headlessui/react";
+import { CorporateInformation, CorporateUser, EMPLOYMENT_STATUS, User, Type, Stat, Gender } from "@/interfaces/user";
+import { groupBySession, averageScore } from "@/utils/stats";
+import { RadioGroup } from "@headlessui/react";
 import axios from "axios";
 import clsx from "clsx";
 import moment from "moment";
-import {Divider} from "primereact/divider";
-import {useEffect, useState} from "react";
+import { Divider } from "primereact/divider";
+import { useEffect, useState } from "react";
 import ReactDatePicker from "react-datepicker";
-import {BsFileEarmarkText, BsPencil, BsPerson, BsPersonAdd, BsStar} from "react-icons/bs";
-import {toast} from "react-toastify";
+import { BsFileEarmarkText, BsPencil, BsPerson, BsPersonAdd, BsStar } from "react-icons/bs";
+import { toast } from "react-toastify";
 import Button from "./Low/Button";
 import Checkbox from "./Low/Checkbox";
 import CountrySelect from "./Low/CountrySelect";
@@ -17,12 +17,12 @@ import Input from "./Low/Input";
 import ProfileSummary from "./ProfileSummary";
 import Select from "react-select";
 import useUsers from "@/hooks/useUsers";
-import {USER_TYPE_LABELS} from "@/resources/user";
-import {CURRENCIES} from "@/resources/paypal";
+import { USER_TYPE_LABELS } from "@/resources/user";
+import { CURRENCIES } from "@/resources/paypal";
 import useCodes from "@/hooks/useCodes";
-import {checkAccess, getTypesOfUser} from "@/utils/permissions";
-import {PERMISSIONS} from "@/constants/userPermissions";
-import {PermissionType} from "@/interfaces/permissions";
+import { checkAccess, getTypesOfUser } from "@/utils/permissions";
+import { PERMISSIONS } from "@/constants/userPermissions";
+import { PermissionType } from "@/interfaces/permissions";
 import usePermissions from "@/hooks/usePermissions";
 
 const expirationDateColor = (date: Date) => {
@@ -68,7 +68,7 @@ const USER_TYPE_OPTIONS = Object.keys(USER_TYPE_LABELS).map((type) => ({
 	label: USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS],
 }));
 
-const CURRENCIES_OPTIONS = CURRENCIES.map(({label, currency}) => ({
+const CURRENCIES_OPTIONS = CURRENCIES.map(({ label, currency }) => ({
 	value: currency,
 	label,
 }));
@@ -100,9 +100,7 @@ const UserCard = ({
 		user.type === "corporate" || user.type === "mastercorporate" ? user.corporateInformation?.referralAgent : undefined,
 	);
 	const [companyName, setCompanyName] = useState(
-		user.type === "corporate" || user.type === "mastercorporate"
-			? user.corporateInformation?.companyInformation.name
-			: user.type === "agent"
+		user.type === "agent"
 			? user.agentInformation?.companyName
 			: undefined,
 	);
@@ -110,25 +108,19 @@ const UserCard = ({
 	const [commercialRegistration, setCommercialRegistration] = useState(
 		user.type === "agent" ? user.agentInformation?.commercialRegistration : undefined,
 	);
-	const [userAmount, setUserAmount] = useState(
-		user.type === "corporate" || user.type === "mastercorporate" ? user.corporateInformation?.companyInformation.userAmount : undefined,
-	);
 	const [paymentValue, setPaymentValue] = useState(
 		user.type === "corporate" || user.type === "mastercorporate" ? user.corporateInformation?.payment?.value : undefined,
 	);
 	const [paymentCurrency, setPaymentCurrency] = useState(
 		user.type === "corporate" || user.type === "mastercorporate" ? user.corporateInformation?.payment?.currency : "EUR",
 	);
-	const [monthlyDuration, setMonthlyDuration] = useState(
-		user.type === "corporate" || user.type === "mastercorporate" ? user.corporateInformation?.monthlyDuration : undefined,
-	);
 	const [commissionValue, setCommission] = useState(
 		user.type === "corporate" || user.type === "mastercorporate" ? user.corporateInformation?.payment?.commission : undefined,
 	);
-	const {data: stats} = useFilterRecordsByUser<Stat[]>(user.id);
-	const {users} = useUsers();
-	const {codes} = useCodes(user.id);
-	const {permissions} = usePermissions(loggedInUser.id);
+	const { data: stats } = useFilterRecordsByUser<Stat[]>(user.id);
+	const { users } = useUsers();
+	const { codes } = useCodes(user.id);
+	const { permissions } = usePermissions(loggedInUser.id);
 
 	useEffect(() => {
 		if (users && users.length > 0) {
@@ -153,7 +145,7 @@ const UserCard = ({
 		if (!confirm(`Are you sure you want to update ${user.name}'s account?`)) return;
 
 		axios
-			.post<{user?: User; ok?: boolean}>(`/api/users/update?id=${user.id}`, {
+			.post<{ user?: User; ok?: boolean }>(`/api/users/update?id=${user.id}`, {
 				...user,
 				subscriptionExpirationDate: expiryDate,
 				studentID,
@@ -167,26 +159,21 @@ const UserCard = ({
 				agentInformation:
 					type === "agent"
 						? {
-								companyName,
-								commercialRegistration,
-								arabName,
-						  }
+							companyName,
+							commercialRegistration,
+							arabName,
+						}
 						: undefined,
 				corporateInformation:
 					type === "corporate" || type === "mastercorporate"
 						? {
-								referralAgent,
-								monthlyDuration,
-								companyInformation: {
-									name: companyName,
-									userAmount,
-								},
-								payment: {
-									value: paymentValue,
-									currency: paymentCurrency,
-									...(referralAgent === "" ? {} : {commission: commissionValue}),
-								},
-						  }
+							referralAgent,
+							payment: {
+								value: paymentValue,
+								currency: paymentCurrency,
+								...(referralAgent === "" ? {} : { commission: commissionValue }),
+							},
+						}
 						: undefined,
 			})
 			.then(() => {
@@ -194,7 +181,7 @@ const UserCard = ({
 				onClose(true);
 			})
 			.catch(() => {
-				toast.error("Something went wrong!", {toastId: "update-error"});
+				toast.error("Something went wrong!", { toastId: "update-error" });
 			});
 	};
 
@@ -216,31 +203,16 @@ const UserCard = ({
 		},
 	];
 
-	const corporateProfileItems =
-		user.type === "corporate" || user.type === "mastercorporate"
-			? [
-					{
-						icon: <BsPerson className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
-						value: codes.length,
-						label: "Users Used",
-					},
-					{
-						icon: <BsPersonAdd className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
-						value: user.corporateInformation?.companyInformation?.userAmount,
-						label: "Number of Users",
-					},
-			  ]
-			: [];
-
 	const updateUserPermission = PERMISSIONS.updateUser[user.type] as {
 		list: Type[];
 		perm: PermissionType;
 	};
+
 	return (
 		<>
 			<ProfileSummary
 				user={user}
-				items={user.type === "corporate" || user.type === "mastercorporate" ? corporateProfileItems : generalProfileItems}
+				items={user.type === "corporate" || user.type === "mastercorporate" ? [] : generalProfileItems}
 			/>
 
 			{user.type === "agent" && (
@@ -283,48 +255,6 @@ const UserCard = ({
 			{(user.type === "corporate" || user.type === "mastercorporate") && (
 				<>
 					<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 w-full">
-						<Input
-							label="Corporate Name"
-							type="text"
-							name="companyName"
-							onChange={setCompanyName}
-							placeholder="Enter corporate name"
-							defaultValue={companyName}
-							disabled={
-								disabled ||
-								checkAccess(
-									loggedInUser,
-									getTypesOfUser(
-										user.type === "mastercorporate" ? ["developer", "admin"] : ["developer", "admin", "mastercorporate"],
-									),
-								)
-							}
-						/>
-						<Input
-							label="Number of Users"
-							type="number"
-							name="userAmount"
-							max={maxUserAmount}
-							onChange={(e) => setUserAmount(e ? parseInt(e) : undefined)}
-							placeholder="Enter number of users"
-							defaultValue={userAmount}
-							disabled={
-								disabled ||
-								checkAccess(
-									loggedInUser,
-									getTypesOfUser(["developer", "admin", ...((user.type === "corporate" ? ["mastercorporate"] : []) as Type[])]),
-								)
-							}
-						/>
-						<Input
-							label="Monthly Duration"
-							type="number"
-							name="monthlyDuration"
-							onChange={(e) => setMonthlyDuration(e ? parseInt(e) : undefined)}
-							placeholder="Enter monthly duration"
-							defaultValue={monthlyDuration}
-							disabled={disabled || checkAccess(loggedInUser, getTypesOfUser(["developer", "admin"]))}
-						/>
 						<div className="flex flex-col gap-3 w-full lg:col-span-3">
 							<label className="font-normal text-base text-mti-gray-dim">Pricing</label>
 							<div className="w-full grid grid-cols-6 gap-2">
@@ -346,7 +276,7 @@ const UserCard = ({
 									onChange={(value) => setPaymentCurrency(value?.value)}
 									menuPortalTarget={document?.body}
 									styles={{
-										menuPortal: (base) => ({...base, zIndex: 9999}),
+										menuPortal: (base) => ({ ...base, zIndex: 9999 }),
 										control: (styles) => ({
 											...styles,
 											paddingLeft: "4px",
@@ -375,10 +305,10 @@ const UserCard = ({
 									className={clsx(
 										"px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none",
 										(checkAccess(loggedInUser, getTypesOfUser(["developer", "admin"])) || disabledFields.countryManager) &&
-											"!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed",
+										"!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed",
 									)}
 									options={[
-										{value: "", label: "No referral"},
+										{ value: "", label: "No referral" },
 										...users
 											.filter((u) => u.type === "agent")
 											.map((x) => ({
@@ -393,7 +323,7 @@ const UserCard = ({
 									menuPortalTarget={document?.body}
 									onChange={(value) => setReferralAgent(value?.value)}
 									styles={{
-										menuPortal: (base) => ({...base, zIndex: 9999}),
+										menuPortal: (base) => ({ ...base, zIndex: 9999 }),
 										control: (styles) => ({
 											...styles,
 											paddingLeft: "4px",
@@ -505,9 +435,9 @@ const UserCard = ({
 								value={user.demographicInformation?.employment}
 								className="grid grid-cols-2 items-center gap-4 place-items-center"
 								disabled={disabled}>
-								{EMPLOYMENT_STATUS.map(({status, label}) => (
+								{EMPLOYMENT_STATUS.map(({ status, label }) => (
 									<RadioGroup.Option value={status} key={status}>
-										{({checked}) => (
+										{({ checked }) => (
 											<span
 												className={clsx(
 													"px-6 py-4 w-40 md:w-48 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
@@ -545,7 +475,7 @@ const UserCard = ({
 								className="flex flex-row gap-4 justify-between"
 								disabled={disabled}>
 								<RadioGroup.Option value="male">
-									{({checked}) => (
+									{({ checked }) => (
 										<span
 											className={clsx(
 												"px-6 py-4 w-28 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
@@ -559,7 +489,7 @@ const UserCard = ({
 									)}
 								</RadioGroup.Option>
 								<RadioGroup.Option value="female">
-									{({checked}) => (
+									{({ checked }) => (
 										<span
 											className={clsx(
 												"px-6 py-4 w-28 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
@@ -573,7 +503,7 @@ const UserCard = ({
 									)}
 								</RadioGroup.Option>
 								<RadioGroup.Option value="other">
-									{({checked}) => (
+									{({ checked }) => (
 										<span
 											className={clsx(
 												"px-6 py-4 w-28 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
@@ -643,92 +573,92 @@ const UserCard = ({
 					permissions,
 					user.type === "teacher" ? "editTeacher" : user.type === "student" ? "editStudent" : undefined,
 				) && (
-					<>
-						<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>
-								<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={USER_STATUS_OPTIONS.filter((x) => {
-										if (checkAccess(loggedInUser, ["admin", "developer"])) return true;
-										return x.value !== "paymentDue";
-									})}
-									menuPortalTarget={document?.body}
-									value={USER_STATUS_OPTIONS.find((o) => o.value === status)}
-									onChange={(value) => setStatus(value?.value as typeof user.status)}
-									styles={{
-										control: (styles) => ({
-											...styles,
-											paddingLeft: "4px",
-											border: "none",
-											outline: "none",
-											":focus": {
+						<>
+							<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>
+									<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={USER_STATUS_OPTIONS.filter((x) => {
+											if (checkAccess(loggedInUser, ["admin", "developer"])) return true;
+											return x.value !== "paymentDue";
+										})}
+										menuPortalTarget={document?.body}
+										value={USER_STATUS_OPTIONS.find((o) => o.value === status)}
+										onChange={(value) => setStatus(value?.value as typeof user.status)}
+										styles={{
+											control: (styles) => ({
+												...styles,
+												paddingLeft: "4px",
+												border: "none",
 												outline: "none",
-											},
-										}),
-										menuPortal: (base) => ({...base, zIndex: 9999}),
-										option: (styles, state) => ({
-											...styles,
-											backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
-											color: state.isFocused ? "black" : styles.color,
-										}),
-									}}
-									isDisabled={disabled}
-								/>
-							</div>
-							<div className="flex flex-col gap-3 w-full">
-								<label className="font-normal text-base text-mti-gray-dim">Type</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={USER_TYPE_OPTIONS.filter((x) => {
-										if (x.value === "student")
-											return checkAccess(
-												loggedInUser,
-												["developer", "admin", "corporate", "mastercorporate"],
-												permissions,
-												"editStudent",
-											);
+												":focus": {
+													outline: "none",
+												},
+											}),
+											menuPortal: (base) => ({ ...base, zIndex: 9999 }),
+											option: (styles, state) => ({
+												...styles,
+												backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
+												color: state.isFocused ? "black" : styles.color,
+											}),
+										}}
+										isDisabled={disabled}
+									/>
+								</div>
+								<div className="flex flex-col gap-3 w-full">
+									<label className="font-normal text-base text-mti-gray-dim">Type</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={USER_TYPE_OPTIONS.filter((x) => {
+											if (x.value === "student")
+												return checkAccess(
+													loggedInUser,
+													["developer", "admin", "corporate", "mastercorporate"],
+													permissions,
+													"editStudent",
+												);
 
-										if (x.value === "teacher")
-											return checkAccess(
-												loggedInUser,
-												["developer", "admin", "corporate", "mastercorporate"],
-												permissions,
-												"editTeacher",
-											);
+											if (x.value === "teacher")
+												return checkAccess(
+													loggedInUser,
+													["developer", "admin", "corporate", "mastercorporate"],
+													permissions,
+													"editTeacher",
+												);
 
-										if (x.value === "corporate")
-											return checkAccess(loggedInUser, ["developer", "admin", "mastercorporate"], permissions, "editCorporate");
+											if (x.value === "corporate")
+												return checkAccess(loggedInUser, ["developer", "admin", "mastercorporate"], permissions, "editCorporate");
 
-										return checkAccess(loggedInUser, ["developer", "admin"]);
-									})}
-									menuPortalTarget={document?.body}
-									value={USER_TYPE_OPTIONS.find((o) => o.value === type)}
-									onChange={(value) => setType(value?.value as typeof user.type)}
-									styles={{
-										control: (styles) => ({
-											...styles,
-											paddingLeft: "4px",
-											border: "none",
-											outline: "none",
-											":focus": {
+											return checkAccess(loggedInUser, ["developer", "admin"]);
+										})}
+										menuPortalTarget={document?.body}
+										value={USER_TYPE_OPTIONS.find((o) => o.value === type)}
+										onChange={(value) => setType(value?.value as typeof user.type)}
+										styles={{
+											control: (styles) => ({
+												...styles,
+												paddingLeft: "4px",
+												border: "none",
 												outline: "none",
-											},
-										}),
-										menuPortal: (base) => ({...base, zIndex: 9999}),
-										option: (styles, state) => ({
-											...styles,
-											backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
-											color: state.isFocused ? "black" : styles.color,
-										}),
-									}}
-									isDisabled={disabled}
-								/>
+												":focus": {
+													outline: "none",
+												},
+											}),
+											menuPortal: (base) => ({ ...base, zIndex: 9999 }),
+											option: (styles, state) => ({
+												...styles,
+												backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
+												color: state.isFocused ? "black" : styles.color,
+											}),
+										}}
+										isDisabled={disabled}
+									/>
+								</div>
 							</div>
-						</div>
-					</>
-				)}
+						</>
+					)}
 			</section>
 
 			<div className="flex gap-4 justify-between mt-4 w-full">