Merge remote-tracking branch 'origin/develop' into feature/training-content

src/components/Medium/StatGridItem.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
-import { BsClock, BsXCircle } from 'react-icons/bs';
-import clsx from 'clsx';
-import { Stat, User } from '@/interfaces/user';
-import { Module } from "@/interfaces";
+import React from "react";
+import {BsClock, BsXCircle} from "react-icons/bs";
+import clsx from "clsx";
+import {Stat, User} from "@/interfaces/user";
+import {Module} from "@/interfaces";
 import ai_usage from "@/utils/ai.detection";
 import { calculateBandScore } from "@/utils/score";
 import moment from 'moment';
@@ -23,9 +23,9 @@ const formatTimestamp = (timestamp: string | number) => {
 	return date.format(formatter);
 };
 
-const aggregateScoresByModule = (stats: Stat[]): { module: Module; total: number; missing: number; correct: number }[] => {
+const aggregateScoresByModule = (stats: Stat[]): {module: Module; total: number; missing: number; correct: number}[] => {
 	const scores: {
-        [key in Module]: { total: number; missing: number; correct: number };
+		[key in Module]: {total: number; missing: number; correct: number};
 	} = {
 		reading: {
 			total: 0,
@@ -64,7 +64,7 @@ const aggregateScoresByModule = (stats: Stat[]): { module: Module; total: number
 
 	return Object.keys(scores)
 		.filter((x) => scores[x as Module].total > 0)
-        .map((x) => ({ module: x as Module, ...scores[x as Module] }));
+		.map((x) => ({module: x as Module, ...scores[x as Module]}));
 };
 
 interface StatsGridItemProps {
@@ -73,10 +73,10 @@ interface StatsGridItemProps {
 	examNumber?: number | undefined;
 	stats: Stat[];
 	timestamp: string | number;
-    user: User,
+	user: User;
 	assignments: Assignment[];
 	users: User[];
-    training?: boolean,
+	training?: boolean;
 	selectedTrainingExams?: string[];
 	maxTrainingExams?: number;
 	setSelectedTrainingExams?: React.Dispatch<React.SetStateAction<string[]>>;
@@ -108,7 +108,7 @@ const StatsGridItem: React.FC<StatsGridItemProps> = ({
 	width = undefined,
 	height = undefined,
 	examNumber = undefined,
-    maxTrainingExams = undefined
+	maxTrainingExams = undefined,
 }) => {
 	const router = useRouter();
 	const correct = stats.reduce((accumulator, current) => accumulator + current.score.correct, 0);
@@ -131,16 +131,24 @@ const StatsGridItem: React.FC<StatsGridItemProps> = ({
 		correct / total < 0.3 && "text-mti-rose",
 	);
 
-    const { timeSpent, inactivity, session } = stats[0];
+	const {timeSpent, inactivity, session} = stats[0];
 
 	const selectExam = () => {
-        if (training && !isDisabled && typeof maxTrainingExams !== "undefined" && typeof setSelectedTrainingExams !== "undefined" && typeof timestamp == "string") {
-            setSelectedTrainingExams(prevExams => {
-                const uniqueExams = [...new Set(stats.map(stat => `${stat.module}-${stat.date}`))];
-                const indexes = uniqueExams.map(exam => prevExams.indexOf(exam)).filter(index => index !== -1);
+		if (
+			training &&
+			!isDisabled &&
+			typeof maxTrainingExams !== "undefined" &&
+			typeof setSelectedTrainingExams !== "undefined" &&
+			typeof timestamp == "string"
+		) {
+			setSelectedTrainingExams((prevExams) => {
+				const uniqueExams = [...new Set(stats.map((stat) => `${stat.module}-${stat.date}`))];
+				const indexes = uniqueExams.map((exam) => prevExams.indexOf(exam)).filter((index) => index !== -1);
 				if (indexes.length > 0) {
 					const newExams = [...prevExams];
-                    indexes.sort((a, b) => b - a).forEach(index => {
+					indexes
+						.sort((a, b) => b - a)
+						.forEach((index) => {
 							newExams.splice(index, 1);
 						});
 					return newExams;
@@ -179,13 +187,12 @@ const StatsGridItem: React.FC<StatsGridItemProps> = ({
 	};
 
 	const shouldRenderPDFIcon = () => {
-        if(assignment) {
+		if (assignment) {
 			return assignment.released;
 		}
 
 		return true;
-    }
-    
+	};
 
 	const content = (
 		<>
@@ -216,19 +223,17 @@ const StatsGridItem: React.FC<StatsGridItemProps> = ({
 					{examNumber === undefined ? (
 						<>
 							{aiUsage >= 50 && user.type !== "student" && (
-                                <div className={clsx(
-                                    "ml-auto border px-1 rounded w-fit mr-1",
-                                    {
-                                        'bg-orange-100 border-orange-400 text-orange-700': aiUsage < 80,
-                                        'bg-red-100 border-red-400 text-red-700': aiUsage >= 80,
-                                    }
-                                )}>
+								<div
+									className={clsx("ml-auto border px-1 rounded w-fit mr-1", {
+										"bg-orange-100 border-orange-400 text-orange-700": aiUsage < 80,
+										"bg-red-100 border-red-400 text-red-700": aiUsage >= 80,
+									})}>
 									<span className="text-xs">AI Usage</span>
 								</div>
 							)}
 						</>
 					) : (
-                        <div className='flex justify-end'>
+						<div className="flex justify-end">
 							<span className="font-semibold bg-gray-200 text-gray-800 px-2.5 py-0.5 rounded-full mt-0.5">{examNumber}</span>
 						</div>
 					)}
@@ -236,11 +241,8 @@ const StatsGridItem: React.FC<StatsGridItemProps> = ({
 			</div>
 
 			<div className="w-full flex flex-col gap-1">
-                <div className={clsx(
-                    "grid grid-cols-4 gap-2 place-items-start w-full -md:mt-2",
-                    examNumber !== undefined && "pr-10" 
-                )}>
-                    {aggregatedLevels.map(({ module, level }) => (
+				<div className={clsx("grid grid-cols-4 gap-2 place-items-start w-full -md:mt-2", examNumber !== undefined && "pr-10")}>
+					{aggregatedLevels.map(({module, level}) => (
 						<ModuleBadge key={module} module={module} level={level} />
 					))}
 				</div>
@@ -264,12 +266,15 @@ const StatsGridItem: React.FC<StatsGridItemProps> = ({
 					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",
-                    typeof selectedTrainingExams !== "undefined" && typeof timestamp === "string" && selectedTrainingExams.some(exam => exam.includes(timestamp)) && "border-2 border-slate-600",
+					typeof selectedTrainingExams !== "undefined" &&
+						typeof timestamp === "string" &&
+						selectedTrainingExams.some((exam) => exam.includes(timestamp)) &&
+						"border-2 border-slate-600",
 				)}
 				onClick={examNumber === undefined ? selectExam : undefined}
 				style={{
-                    ...(width !== undefined && { width }),
-                    ...(height !== undefined && { height }),
+					...(width !== undefined && {width}),
+					...(height !== undefined && {height}),
 				}}
 				data-tip="This exam is still being evaluated..."
 				role="button">
@@ -285,8 +290,8 @@ const StatsGridItem: React.FC<StatsGridItemProps> = ({
 				)}
 				data-tip="Your screen size is too small to view previous exams."
 				style={{
-                    ...(width !== undefined && { width }),
-                    ...(height !== undefined && { height }),
+					...(width !== undefined && {width}),
+					...(height !== undefined && {height}),
 				}}
 				role="button">
 				{content}

src/dashboards/Student.tsx

@@ -3,6 +3,7 @@ import ProgressBar from "@/components/Low/ProgressBar";
 import InviteCard from "@/components/Medium/InviteCard";
 import ProfileSummary from "@/components/ProfileSummary";
 import useAssignments from "@/hooks/useAssignments";
+import useGradingSystem from "@/hooks/useGrading";
 import useInvites from "@/hooks/useInvites";
 import useFilterRecordsByUser from "@/hooks/useFilterRecordsByUser";
 import useUsers from "@/hooks/useUsers";
@@ -13,7 +14,7 @@ import useExamStore from "@/stores/examStore";
 import {getExamById} from "@/utils/exams";
 import {getUserCorporate} from "@/utils/groups";
 import {countExamModules, countFullExams, MODULE_ARRAY, sortByModule, sortByModuleName} from "@/utils/moduleUtils";
-import {getLevelLabel, getLevelScore} from "@/utils/score";
+import {getGradingLabel, getLevelLabel, getLevelScore} from "@/utils/score";
 import {averageScore, groupBySession} from "@/utils/stats";
 import {CreateOrderActions, CreateOrderData, OnApproveActions, OnApproveData, OrderResponseBody} from "@paypal/paypal-js";
 import {PayPalButtons} from "@paypal/react-paypal-js";
@@ -34,8 +35,9 @@ interface Props {
 export default function StudentDashboard({user}: Props) {
 	const [corporateUserToShow, setCorporateUserToShow] = useState<CorporateUser>();
 
-	const {data: stats} = useFilterRecordsByUser<Stat[]>(user.id, !user?.id);
 	const {users} = useUsers();
+	const {gradingSystem} = useGradingSystem();
+	const {data: stats} = useFilterRecordsByUser<Stat[]>(user.id, !user?.id);
 	const {assignments, isLoading: isAssignmentsLoading, reload: reloadAssignments} = useAssignments({assignees: user?.id});
 	const {invites, isLoading: isInvitesLoading, reload: reloadInvites} = useInvites({to: user.id});
 
@@ -173,10 +175,7 @@ export default function StudentDashboard({user}: Props) {
 											<div
 												className="tooltip flex h-full w-full items-center justify-end pl-8 md:hidden"
 												data-tip="Your screen size is too small to perform an assignment">
-												<Button
-													disabled={!assignment.start}
-													className="h-full w-full !rounded-xl"
-													variant="outline">
+												<Button disabled={!assignment.start} className="h-full w-full !rounded-xl" variant="outline">
 													Start
 												</Button>
 											</div>
@@ -243,7 +242,7 @@ export default function StudentDashboard({user}: Props) {
 									<div className="flex w-full justify-between">
 										<span className="text-sm font-bold md:font-extrabold">{capitalize(module)}</span>
 										<span className="text-mti-gray-dim text-sm font-normal">
-											{module === "level" && `English Level: ${getLevelLabel(level).join(" / ")}`}
+											{module === "level" && !!gradingSystem && `English Level: ${getGradingLabel(level, gradingSystem.steps)}`}
 											{module !== "level" && `Level ${level} / Level 9 (Desired Level: ${desiredLevel})`}
 										</span>
 									</div>
@@ -252,9 +251,9 @@ export default function StudentDashboard({user}: Props) {
 									<ProgressBar
 										color={module}
 										label=""
-										mark={Math.round((desiredLevel * 100) / 9)}
+										mark={module === "level" ? undefined : Math.round((desiredLevel * 100) / 9)}
 										markLabel={`Desired Level: ${desiredLevel}`}
-										percentage={Math.round((level * 100) / 9)}
+										percentage={module === "level" ? level : Math.round((level * 100) / 9)}
 										className="h-2 w-full"
 									/>
 								</div>

src/exams/Finish.tsx

@@ -4,7 +4,7 @@ import {moduleResultText} from "@/constants/ielts";
 import {Module} from "@/interfaces";
 import {User} from "@/interfaces/user";
 import useExamStore from "@/stores/examStore";
-import {calculateBandScore} from "@/utils/score";
+import {calculateBandScore, getGradingLabel} from "@/utils/score";
 import clsx from "clsx";
 import Link from "next/link";
 import {useRouter} from "next/router";
@@ -24,8 +24,9 @@ import {LevelScore} from "@/constants/ielts";
 import {getLevelScore} from "@/utils/score";
 import {capitalize} from "lodash";
 import Modal from "@/components/Modal";
-import { UserSolution } from "@/interfaces/exam";
+import {UserSolution} from "@/interfaces/exam";
 import ai_usage from "@/utils/ai.detection";
+import useGradingSystem from "@/hooks/useGrading";
 
 interface Score {
 	module: Module;
@@ -53,8 +54,8 @@ export default function Finish({user, scores, modules, information, solutions, i
 	const [isExtraInformationOpen, setIsExtraInformationOpen] = useState(false);
 
 	const aiUsage = Math.round(ai_usage(solutions) * 100);
-
 	const exams = useExamStore((state) => state.exams);
+	const {gradingSystem} = useGradingSystem();
 
 	useEffect(() => setSelectedScore(scores.find((x) => x.module === selectedModule)!), [scores, selectedModule]);
 
@@ -94,10 +95,10 @@ export default function Finish({user, scores, modules, information, solutions, i
 
 	const showLevel = (level: number) => {
 		if (selectedModule === "level") {
-			const [levelStr, grade] = getLevelScore(level);
+			const label = getGradingLabel(level, gradingSystem?.steps || []);
 			return (
 				<div className="flex flex-col items-center justify-center gap-1">
-					<span className="text-xl font-bold">{levelStr}</span>
+					<span className="text-xl font-bold">{label}</span>
 				</div>
 			);
 		}
@@ -165,13 +166,11 @@ export default function Finish({user, scores, modules, information, solutions, i
 								<span className="font-semibold">Writing</span>
 							</div>
 							{aiUsage >= 50 && user.type !== "student" && (
-							<div className={clsx(
-								"flex items-center justify-center border px-3 h-full rounded",
-								{
-									'bg-orange-100 border-orange-400 text-orange-700': aiUsage < 80,
-									'bg-red-100 border-red-400 text-red-700': aiUsage >= 80,
-								}
-							)}>
+								<div
+									className={clsx("flex items-center justify-center border px-3 h-full rounded", {
+										"bg-orange-100 border-orange-400 text-orange-700": aiUsage < 80,
+										"bg-red-100 border-red-400 text-red-700": aiUsage >= 80,
+									})}>
 									<span className="text-xs">AI Usage</span>
 								</div>
 							)}

src/hooks/useGrading.tsx

@@ -0,0 +1,22 @@
+import {Grading} from "@/interfaces";
+import {Code, Group, User} from "@/interfaces/user";
+import axios from "axios";
+import {useEffect, useState} from "react";
+
+export default function useGradingSystem() {
+	const [gradingSystem, setGradingSystem] = useState<Grading>();
+	const [isLoading, setIsLoading] = useState(false);
+	const [isError, setIsError] = useState(false);
+
+	const getData = () => {
+		setIsLoading(true);
+		axios
+			.get<Grading>(`/api/grading`)
+			.then((response) => setGradingSystem(response.data))
+			.finally(() => setIsLoading(false));
+	};
+
+	useEffect(getData, []);
+
+	return {gradingSystem, isLoading, isError, reload: getData, mutate: setGradingSystem};
+}

src/interfaces/index.ts

@@ -1 +1,12 @@
 export type Module = "reading" | "listening" | "writing" | "speaking" | "level";
+
+export interface Step {
+	min: number;
+	max: number;
+	label: string;
+}
+
+export interface Grading {
+	user: string;
+	steps: Step[];
+}

src/pages/(admin)/BatchCreateUser.tsx

@@ -104,7 +104,7 @@ export default function BatchCreateUser({user}: {user: User}) {
 					const information = uniqBy(
 						rows
 							.map((row) => {
-								const [firstName, lastName, country, passport_id, email, phone, group, studentID, corporate] = row as string[];
+								const [firstName, lastName, studentID, passport_id, email, phone, corporate, group, country] = row as string[];
 								const countryItem =
 									countryCodes.findOne("countryCode" as any, country.toUpperCase()) ||
 									countryCodes.all().find((x) => x.countryNameEn.toLowerCase() === country.toLowerCase());
@@ -179,13 +179,13 @@ export default function BatchCreateUser({user}: {user: User}) {
 							<tr>
 								<th className="border border-neutral-200 px-2 py-1">First Name</th>
 								<th className="border border-neutral-200 px-2 py-1">Last Name</th>
-								<th className="border border-neutral-200 px-2 py-1">Country</th>
+								<th className="border border-neutral-200 px-2 py-1">Student ID</th>
 								<th className="border border-neutral-200 px-2 py-1">Passport/National ID</th>
 								<th className="border border-neutral-200 px-2 py-1">E-mail</th>
 								<th className="border border-neutral-200 px-2 py-1">Phone Number</th>
-								<th className="border border-neutral-200 px-2 py-1">Group Name</th>
-								<th className="border border-neutral-200 px-2 py-1">Student ID</th>
 								{user?.type !== "corporate" && <th className="border border-neutral-200 px-2 py-1">Corporate (e-mail)</th>}
+								<th className="border border-neutral-200 px-2 py-1">Group Name</th>
+								<th className="border border-neutral-200 px-2 py-1">Country</th>
 							</tr>
 						</thead>
 					</table>

src/pages/(admin)/CorporateGradingSystem.tsx

@@ -0,0 +1,128 @@
+import Button from "@/components/Low/Button";
+import Input from "@/components/Low/Input";
+import {Grading, Step} from "@/interfaces";
+import {User} from "@/interfaces/user";
+import {CEFR_STEPS, GENERAL_STEPS, IELTS_STEPS, TOFEL_STEPS} from "@/resources/grading";
+import axios from "axios";
+import {useEffect, useState} from "react";
+import {BsPlusCircle, BsTrash} from "react-icons/bs";
+import {toast} from "react-toastify";
+
+const areStepsOverlapped = (steps: Step[]) => {
+	for (let i = 0; i < steps.length; i++) {
+		if (i === 0) continue;
+
+		const step = steps[i];
+		const previous = steps[i - 1];
+
+		if (previous.max >= step.min) return true;
+	}
+
+	return false;
+};
+
+export default function CorporateGradingSystem({user, defaultSteps, mutate}: {user: User; defaultSteps: Step[]; mutate: (steps: Step[]) => void}) {
+	const [isLoading, setIsLoading] = useState(false);
+	const [steps, setSteps] = useState<Step[]>(defaultSteps || []);
+
+	const saveGradingSystem = () => {
+		if (!steps.every((x) => x.min < x.max)) return toast.error("One of your steps has a minimum threshold inferior to its superior threshold.");
+		if (areStepsOverlapped(steps)) return toast.error("There seems to be an overlap in one of your steps.");
+		if (
+			steps.reduce((acc, curr) => {
+				console.log(acc - (curr.max - curr.min + 1));
+				return acc - (curr.max - curr.min + 1);
+			}, 100) > 0
+		)
+			return toast.error("There seems to be an open interval in your steps.");
+
+		setIsLoading(true);
+		axios
+			.post("/api/grading", {user: user.id, steps})
+			.then(() => toast.success("Your grading system has been saved!"))
+			.then(() => mutate(steps))
+			.catch(() => toast.error("Something went wrong, please try again later"))
+			.finally(() => setIsLoading(false));
+	};
+
+	return (
+		<div className="flex flex-col gap-4 border p-4 border-mti-gray-platinum rounded-xl">
+			<label className="font-normal text-base text-mti-gray-dim">Grading System</label>
+
+			<label className="font-normal text-base text-mti-gray-dim">Preset Systems</label>
+			<div className="grid grid-cols-4 gap-4">
+				<Button variant="outline" onClick={() => setSteps(CEFR_STEPS)}>
+					CEFR
+				</Button>
+				<Button variant="outline" onClick={() => setSteps(GENERAL_STEPS)}>
+					General English
+				</Button>
+				<Button variant="outline" onClick={() => setSteps(IELTS_STEPS)}>
+					IELTS
+				</Button>
+				<Button variant="outline" onClick={() => setSteps(TOFEL_STEPS)}>
+					TOFEL iBT
+				</Button>
+			</div>
+
+			{steps.map((step, index) => (
+				<>
+					<div className="flex items-center gap-4">
+						<div className="grid grid-cols-3 gap-4 w-full" key={step.min}>
+							<Input
+								label="Min. Percentage"
+								value={step.min}
+								type="number"
+								disabled={index === 0 || isLoading}
+								onChange={(e) => setSteps((prev) => prev.map((x, i) => (i === index ? {...x, min: parseInt(e)} : x)))}
+								name="min"
+							/>
+							<Input
+								label="Grade"
+								value={step.label}
+								type="text"
+								disabled={isLoading}
+								onChange={(e) => setSteps((prev) => prev.map((x, i) => (i === index ? {...x, label: e} : x)))}
+								name="min"
+							/>
+							<Input
+								label="Max. Percentage"
+								value={step.max}
+								type="number"
+								disabled={index === steps.length - 1 || isLoading}
+								onChange={(e) => setSteps((prev) => prev.map((x, i) => (i === index ? {...x, max: parseInt(e)} : x)))}
+								name="max"
+							/>
+						</div>
+						{index !== 0 && index !== steps.length - 1 && (
+							<button
+								disabled={isLoading}
+								className="pt-9 text-xl group"
+								onClick={() => setSteps((prev) => prev.filter((_, i) => i !== index))}>
+								<div className="w-full h-full flex items-center justify-center group-hover:bg-neutral-200 rounded-full p-3 transition ease-in-out duration-300">
+									<BsTrash />
+								</div>
+							</button>
+						)}
+					</div>
+
+					{index < steps.length - 1 && (
+						<Button
+							className="w-full flex items-center justify-center"
+							disabled={isLoading}
+							onClick={() => {
+								const item = {min: steps[index === 0 ? 0 : index - 1].max + 1, max: steps[index + 1].min - 1, label: ""};
+								setSteps((prev) => [...prev.slice(0, index + 1), item, ...prev.slice(index + 1, steps.length)]);
+							}}>
+							<BsPlusCircle />
+						</Button>
+					)}
+				</>
+			))}
+
+			<Button onClick={saveGradingSystem} isLoading={isLoading} disabled={isLoading} className="mt-8">
+				Save Grading System
+			</Button>
+		</div>
+	);
+}

src/pages/(exam)/ExamPage.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @next/next/no-img-element */
-import { Module } from "@/interfaces";
-import { useEffect, useState } from "react";
+import {Module} from "@/interfaces";
+import {useEffect, useState} from "react";
 
 import AbandonPopup from "@/components/AbandonPopup";
 import Layout from "@/components/High/Layout";
@@ -12,24 +12,25 @@ import Selection from "@/exams/Selection";
 import Speaking from "@/exams/Speaking";
 import Writing from "@/exams/Writing";
 import useUser from "@/hooks/useUser";
-import { Exam, LevelExam, UserSolution, Variant } from "@/interfaces/exam";
-import { Stat } from "@/interfaces/user";
+import {Exam, LevelExam, UserSolution, Variant} from "@/interfaces/exam";
+import {Stat} from "@/interfaces/user";
 import useExamStore from "@/stores/examStore";
-import { evaluateSpeakingAnswer, evaluateWritingAnswer } from "@/utils/evaluation";
-import { defaultExamUserSolutions, getExam } from "@/utils/exams";
+import {evaluateSpeakingAnswer, evaluateWritingAnswer} from "@/utils/evaluation";
+import {defaultExamUserSolutions, getExam} from "@/utils/exams";
 import axios from "axios";
-import { useRouter } from "next/router";
-import { toast, ToastContainer } from "react-toastify";
-import { v4 as uuidv4 } from "uuid";
+import {useRouter} from "next/router";
+import {toast, ToastContainer} from "react-toastify";
+import {v4 as uuidv4} from "uuid";
 import useSessions from "@/hooks/useSessions";
 import ShortUniqueId from "short-unique-id";
 import clsx from "clsx";
+import useGradingSystem from "@/hooks/useGrading";
 
 interface Props {
 	page: "exams" | "exercises";
 }
 
-export default function ExamPage({ page }: Props) {
+export default function ExamPage({page}: Props) {
 	const [variant, setVariant] = useState<Variant>("full");
 	const [avoidRepeated, setAvoidRepeated] = useState(false);
 	const [hasBeenUploaded, setHasBeenUploaded] = useState(false);
@@ -44,21 +45,21 @@ export default function ExamPage({ page }: Props) {
 	const assignment = useExamStore((state) => state.assignment);
 	const initialTimeSpent = useExamStore((state) => state.timeSpent);
 
-	const { exam, setExam } = useExamStore((state) => state);
-	const { exams, setExams } = useExamStore((state) => state);
-	const { sessionId, setSessionId } = useExamStore((state) => state);
-	const { partIndex, setPartIndex } = useExamStore((state) => state);
-	const { moduleIndex, setModuleIndex } = useExamStore((state) => state);
-	const { questionIndex, setQuestionIndex } = useExamStore((state) => state);
-	const { exerciseIndex, setExerciseIndex } = useExamStore((state) => state);
-	const { userSolutions, setUserSolutions } = useExamStore((state) => state);
-	const { showSolutions, setShowSolutions } = useExamStore((state) => state);
-	const { selectedModules, setSelectedModules } = useExamStore((state) => state);
-	const { inactivity, setInactivity } = useExamStore((state) => state);
-	const { bgColor, setBgColor } = useExamStore((state) => state);
-	const setShuffleMaps = useExamStore((state) => state.setShuffles)
+	const {exam, setExam} = useExamStore((state) => state);
+	const {exams, setExams} = useExamStore((state) => state);
+	const {sessionId, setSessionId} = useExamStore((state) => state);
+	const {partIndex, setPartIndex} = useExamStore((state) => state);
+	const {moduleIndex, setModuleIndex} = useExamStore((state) => state);
+	const {questionIndex, setQuestionIndex} = useExamStore((state) => state);
+	const {exerciseIndex, setExerciseIndex} = useExamStore((state) => state);
+	const {userSolutions, setUserSolutions} = useExamStore((state) => state);
+	const {showSolutions, setShowSolutions} = useExamStore((state) => state);
+	const {selectedModules, setSelectedModules} = useExamStore((state) => state);
+	const {inactivity, setInactivity} = useExamStore((state) => state);
+	const {bgColor, setBgColor} = useExamStore((state) => state);
+	const setShuffleMaps = useExamStore((state) => state.setShuffles);
 
-	const { user } = useUser({ redirectTo: "/login" });
+	const {user} = useUser({redirectTo: "/login"});
 	const router = useRouter();
 
 	// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -205,9 +206,7 @@ export default function ExamPage({ page }: Props) {
 	});
 
 	useEffect(() => {
-		if (showSolutions) {
-			setModuleIndex(-1);
-		}
+		if (showSolutions) setModuleIndex(-1);
 	}, [setModuleIndex, showSolutions]);
 
 	useEffect(() => {
@@ -261,11 +260,11 @@ export default function ExamPage({ page }: Props) {
 				date: new Date().getTime(),
 				isDisabled: solution.isDisabled,
 				shuffleMaps: solution.shuffleMaps,
-				...(assignment ? { assignment: assignment.id } : {}),
+				...(assignment ? {assignment: assignment.id} : {}),
 			}));
 
 			axios
-				.post<{ ok: boolean }>("/api/stats", newStats)
+				.post<{ok: boolean}>("/api/stats", newStats)
 				.then((response) => setHasBeenUploaded(response.data.ok))
 				.catch(() => setHasBeenUploaded(false));
 		}
@@ -277,18 +276,13 @@ export default function ExamPage({ page }: Props) {
 	}, [statsAwaitingEvaluation]);
 
 	useEffect(() => {
-		if (statsAwaitingEvaluation.length > 0) {
-			checkIfStatsHaveBeenEvaluated(statsAwaitingEvaluation);
-		}
+		if (statsAwaitingEvaluation.length > 0) checkIfStatsHaveBeenEvaluated(statsAwaitingEvaluation);
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [statsAwaitingEvaluation]);
 
 	useEffect(() => {
-
-		if (exam && exam.module === "level" && exam.parts[0].intro && !showSolutions) {
-			setBgColor("bg-ielts-level-light");
-		}
-	}, [exam, showSolutions, setBgColor])
+		if (exam && exam.module === "level" && exam.parts[0].intro && !showSolutions) setBgColor("bg-ielts-level-light");
+	}, [exam, showSolutions, setBgColor]);
 
 	const checkIfStatsHaveBeenEvaluated = (ids: string[]) => {
 		setTimeout(async () => {
@@ -333,7 +327,7 @@ export default function ExamPage({ page }: Props) {
 					),
 				}),
 			);
-			return Object.assign(exam, { parts });
+			return Object.assign(exam, {parts});
 		}
 
 		const exercises = exam.exercises.map((x) =>
@@ -341,7 +335,7 @@ export default function ExamPage({ page }: Props) {
 				userSolutions: userSolutions.find((y) => x.id === y.exercise)?.solutions,
 			}),
 		);
-		return Object.assign(exam, { exercises });
+		return Object.assign(exam, {exercises});
 	};
 
 	const onFinish = async (solutions: UserSolution[]) => {
@@ -396,7 +390,7 @@ export default function ExamPage({ page }: Props) {
 		correct: number;
 	}[] => {
 		const scores: {
-			[key in Module]: { total: number; missing: number; correct: number };
+			[key in Module]: {total: number; missing: number; correct: number};
 		} = {
 			reading: {
 				total: 0,
@@ -438,7 +432,7 @@ export default function ExamPage({ page }: Props) {
 
 		return Object.keys(scores)
 			.filter((x) => scores[x as Module].total > 0)
-			.map((x) => ({ module: x as Module, ...scores[x as Module] }));
+			.map((x) => ({module: x as Module, ...scores[x as Module]}));
 	};
 
 	const renderScreen = () => {
@@ -472,7 +466,7 @@ export default function ExamPage({ page }: Props) {
 					onViewResults={(index?: number) => {
 						if (exams[0].module === "level") {
 							const levelExam = exams[0] as LevelExam;
-							const allExercises = levelExam.parts.flatMap(part => part.exercises);
+							const allExercises = levelExam.parts.flatMap((part) => part.exercises);
 							const exerciseOrderMap = new Map(allExercises.map((ex, index) => [ex.id, index]));
 							const orderedSolutions = userSolutions.slice().sort((a, b) => {
 								const indexA = exerciseOrderMap.get(a.exercise) ?? Infinity;
@@ -480,7 +474,6 @@ export default function ExamPage({ page }: Props) {
 								return indexA - indexB;
 							});
 							setUserSolutions(orderedSolutions);
-
 						} else {
 							setUserSolutions(userSolutions);
 						}

src/pages/api/grading/index.ts

@@ -0,0 +1,75 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type {NextApiRequest, NextApiResponse} from "next";
+import {app} from "@/firebase";
+import {getFirestore, collection, getDocs, setDoc, doc, getDoc, deleteDoc, query} from "firebase/firestore";
+import {withIronSessionApiRoute} from "iron-session/next";
+import {sessionOptions} from "@/lib/session";
+import {CorporateUser, Group} from "@/interfaces/user";
+import {Discount, Package} from "@/interfaces/paypal";
+import {v4} from "uuid";
+import {checkAccess} from "@/utils/permissions";
+import {CEFR_STEPS} from "@/resources/grading";
+import {getCorporateUser} from "@/resources/user";
+import {getUserCorporate} from "@/utils/groups";
+import {Grading} from "@/interfaces";
+import {getGroupsForUser} from "@/utils/groups.be";
+import {uniq} from "lodash";
+import {getUser} from "@/utils/users.be";
+
+const db = getFirestore(app);
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+	if (req.method === "GET") await get(req, res);
+	if (req.method === "POST") await post(req, res);
+}
+
+async function get(req: NextApiRequest, res: NextApiResponse) {
+	if (!req.session.user) {
+		res.status(401).json({ok: false});
+		return;
+	}
+
+	const snapshot = await getDoc(doc(db, "grading", req.session.user.id));
+	if (snapshot.exists()) return res.status(200).json(snapshot.data());
+
+	if (req.session.user.type !== "teacher" && req.session.user.type !== "student")
+		return res.status(200).json({steps: CEFR_STEPS, user: req.session.user.id});
+
+	const corporate = await getUserCorporate(req.session.user.id);
+	if (!corporate) return res.status(200).json(CEFR_STEPS);
+
+	const corporateSnapshot = await getDoc(doc(db, "grading", corporate.id));
+	if (corporateSnapshot.exists()) return res.status(200).json(snapshot.data());
+
+	return res.status(200).json({steps: CEFR_STEPS, user: req.session.user.id});
+}
+
+async function post(req: NextApiRequest, res: NextApiResponse) {
+	if (!req.session.user) {
+		res.status(401).json({ok: false});
+		return;
+	}
+
+	if (!checkAccess(req.session.user, ["admin", "developer", "mastercorporate", "corporate"]))
+		return res.status(403).json({
+			ok: false,
+			reason: "You do not have permission to create a new grading system",
+		});
+
+	const body = req.body as Grading;
+	await setDoc(doc(db, "grading", req.session.user.id), body);
+
+	if (req.session.user.type === "mastercorporate") {
+		const groups = await getGroupsForUser(req.session.user.id);
+		const participants = uniq(groups.flatMap((x) => x.participants));
+
+		const participantUsers = await Promise.all(participants.map(getUser));
+		const corporateUsers = participantUsers.filter((x) => x.type === "corporate") as CorporateUser[];
+
+		await Promise.all(corporateUsers.map(async (g) => await setDoc(doc(db, "grading", g.id), body)));
+	}
+
+	res.status(200).json({ok: true});
+}

src/pages/settings.tsx

@@ -19,8 +19,11 @@ import usePermissions from "@/hooks/usePermissions";
 import {useState} from "react";
 import Modal from "@/components/Modal";
 import IconCard from "@/dashboards/IconCard";
-import {BsCode, BsCodeSquare, BsPeopleFill, BsPersonFill} from "react-icons/bs";
+import {BsCode, BsCodeSquare, BsGearFill, BsPeopleFill, BsPersonFill} from "react-icons/bs";
 import UserCreator from "./(admin)/UserCreator";
+import CorporateGradingSystem from "./(admin)/CorporateGradingSystem";
+import useGradingSystem from "@/hooks/useGrading";
+import {CEFR_STEPS} from "@/resources/grading";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -50,6 +53,7 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 export default function Admin() {
 	const {user} = useUser({redirectTo: "/login"});
 	const {permissions} = usePermissions(user?.id || "");
+	const {gradingSystem, mutate} = useGradingSystem();
 
 	const [modalOpen, setModalOpen] = useState<string>();
 
@@ -71,14 +75,21 @@ export default function Admin() {
 						<BatchCreateUser user={user} />
 					</Modal>
 					<Modal isOpen={modalOpen === "batchCreateCode"} onClose={() => setModalOpen(undefined)}>
-						<CodeGenerator user={user} />
+						<BatchCodeGenerator user={user} />
 					</Modal>
 					<Modal isOpen={modalOpen === "createCode"} onClose={() => setModalOpen(undefined)}>
-						<BatchCodeGenerator user={user} />
+						<CodeGenerator user={user} />
 					</Modal>
 					<Modal isOpen={modalOpen === "createUser"} onClose={() => setModalOpen(undefined)}>
 						<UserCreator user={user} />
 					</Modal>
+					<Modal isOpen={modalOpen === "gradingSystem"} onClose={() => setModalOpen(undefined)}>
+						<CorporateGradingSystem
+							user={user}
+							defaultSteps={gradingSystem?.steps || CEFR_STEPS}
+							mutate={(steps) => mutate({user: user.id, steps})}
+						/>
+					</Modal>
 
 					<section className="w-full grid grid-cols-2 -md:grid-cols-1 gap-8">
 						<ExamLoader />
@@ -112,6 +123,15 @@ export default function Admin() {
 									className="w-full h-full"
 									onClick={() => setModalOpen("batchCreateUser")}
 								/>
+								{checkAccess(user, ["admin", "corporate", "developer", "mastercorporate"]) && (
+									<IconCard
+										Icon={BsGearFill}
+										label="Grading System"
+										color="purple"
+										className="w-full h-full col-span-2"
+										onClick={() => setModalOpen("gradingSystem")}
+									/>
+								)}
 							</div>
 						)}
 					</section>

src/resources/grading.ts

@@ -0,0 +1,37 @@
+export const CEFR_STEPS = [
+	{min: 0, max: 9, label: "Pre A1"},
+	{min: 10, max: 19, label: "A1"},
+	{min: 20, max: 39, label: "A2"},
+	{min: 40, max: 59, label: "B1"},
+	{min: 60, max: 74, label: "B2"},
+	{min: 75, max: 89, label: "C1"},
+	{min: 90, max: 100, label: "C2"},
+];
+
+export const GENERAL_STEPS = [
+	{min: 0, max: 9, label: "Beginner"},
+	{min: 10, max: 19, label: "Elementary"},
+	{min: 20, max: 39, label: "Pre-Intermediate"},
+	{min: 40, max: 59, label: "Intermediate"},
+	{min: 60, max: 74, label: "Upper-Intermediate"},
+	{min: 75, max: 89, label: "Advance"},
+	{min: 90, max: 100, label: "Professional user"},
+];
+
+export const IELTS_STEPS = [
+	{min: 0, max: 9, label: "1.0"},
+	{min: 10, max: 19, label: "2.0 - 2.5"},
+	{min: 20, max: 39, label: "3.0 - 3.5"},
+	{min: 40, max: 59, label: "4.0 - 5.0"},
+	{min: 60, max: 74, label: "5.5  - 6.5"},
+	{min: 75, max: 89, label: "7.0 - 7.0"},
+	{min: 90, max: 100, label: "8.5 - 9.0"},
+];
+
+export const TOFEL_STEPS = [
+	{min: 0, max: 19, label: "0 - 39"},
+	{min: 20, max: 39, label: "40 - 56"},
+	{min: 40, max: 74, label: "57 - 86"},
+	{min: 75, max: 89, label: "87 - 109"},
+	{min: 90, max: 100, label: "110 - 120"},
+];

src/utils/score.ts

@@ -1,5 +1,4 @@
-import {Module} from "@/interfaces";
-import {LevelScore} from "@/constants/ielts";
+import {Module, Step} from "@/interfaces";
 import {Stat, User} from "@/interfaces/user";
 
 type Type = "academic" | "general";
@@ -135,6 +134,8 @@ export const calculateBandScore = (correct: number, total: number, module: Modul
 	const marking = moduleMarkings[module][type];
 	const percentage = (correct * 100) / total;
 
+	if (module === "level") return percentage;
+
 	for (const value of Object.keys(marking)
 		.map((x) => parseFloat(x))
 		.sort((a, b) => b - a)) {
@@ -147,7 +148,11 @@ export const calculateBandScore = (correct: number, total: number, module: Modul
 };
 
 export const calculateAverageLevel = (levels: {[key in Module]: number}) => {
-	return Object.keys(levels).reduce((accumulator, current) => levels[current as Module] + accumulator, 0) / 5;
+	return (
+		Object.keys(levels)
+			.filter((x) => x !== "level")
+			.reduce((accumulator, current) => levels[current as Module] + accumulator, 0) / 4
+	);
 };
 
 export const getLevelScore = (level: number) => {
@@ -180,6 +185,14 @@ export const getLevelLabel = (level: number) => {
 	return ["Proficiency", "C2"];
 };
 
+export const getGradingLabel = (score: number, grading: Step[]) => {
+	for (const step of grading) {
+		if (score >= step.min && score <= step.max) return step.label;
+	}
+
+	return "N/A";
+};
+
 export const averageLevelCalculator = (users: User[], studentStats: Stat[]) => {
 	const formattedStats = studentStats
 		.map((s) => ({