Merge branch 'develop'

src/components/UserCard.tsx

@@ -114,7 +114,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 				agentInformation:
 					type === "agent"
 						? {
-								name: companyName,
+								companyName,
 								commercialRegistration,
 						  }
 						: undefined,
@@ -157,7 +157,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 					{
 						icon: <BsPencil className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
 						value: stats.length,
-						label: "Exercises",
+						label: "Modules",
 					},
 					{
 						icon: <BsStar className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,

src/dashboards/Student.tsx

@@ -13,7 +13,7 @@ import {CorporateUser, User} from "@/interfaces/user";
 import useExamStore from "@/stores/examStore";
 import {getExamById} from "@/utils/exams";
 import {getUserCorporate} from "@/utils/groups";
-import {MODULE_ARRAY, sortByModule, sortByModuleName} from "@/utils/moduleUtils";
+import {countExamModules, countFullExams, MODULE_ARRAY, sortByModule, sortByModuleName} from "@/utils/moduleUtils";
 import {getLevelLabel, getLevelScore} from "@/utils/score";
 import {averageScore, groupBySession} from "@/utils/stats";
 import {CreateOrderActions, CreateOrderData, OnApproveActions, OnApproveData, OrderResponseBody} from "@paypal/paypal-js";
@@ -84,16 +84,16 @@ export default function StudentDashboard({user}: Props) {
 				user={user}
 				items={[
 					{
-						icon: <BsFileEarmarkText className="text-mti-red-light h-6 w-6 md:h-8 md:w-8" />,
+						icon: <BsFileEarmarkText className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
-						value: Object.keys(groupBySession(stats)).length,
+						value: countFullExams(stats),
 						label: "Exams",
 						tooltip: "Number of all conducted completed exams",
 					},
 					{
-						icon: <BsPencil className="text-mti-red-light h-6 w-6 md:h-8 md:w-8" />,
+						icon: <BsPencil className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
-						value: stats.length,
+						value: countExamModules(stats),
-						label: "Exercises",
+						label: "Modules",
-						tooltip: "Number of all conducted exercises including Level Test",
+						tooltip: "Number of all exam modules performed including Level Test",
 					},
 					{
 						icon: <BsStar className="text-mti-red-light h-6 w-6 md:h-8 md:w-8" />,

src/pages/(admin)/Lists/UserList.tsx

@@ -16,18 +16,14 @@ import {countries, TCountries} from "countries-list";
 import countryCodes from "country-codes-list";
 import Modal from "@/components/Modal";
 import UserCard from "@/components/UserCard";
-import {USER_TYPE_LABELS} from "@/resources/user";
+import {isAgentUser, USER_TYPE_LABELS} from "@/resources/user";
 import useFilterStore from "@/stores/listFilterStore";
 import {useRouter} from "next/router";
-import {isCorporateUser} from '@/resources/user';
+import {isCorporateUser} from "@/resources/user";
-import { useListSearch } from "@/hooks/useListSearch";
+import {useListSearch} from "@/hooks/useListSearch";
 
 const columnHelper = createColumnHelper<User>();
-const searchFields = [
+const searchFields = [["name"], ["email"], ["corporateInformation", "companyInformation", "name"]];
-	['name'],
-	['email'],
-	['corporateInformation', 'companyInformation', 'name'],
-];
 export default function UserList({user, filters = []}: {user: User; filters?: ((user: User) => boolean)[]}) {
 	const [showDemographicInformation, setShowDemographicInformation] = useState(false);
 	const [sorter, setSorter] = useState<string>();
@@ -331,14 +327,14 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
 			) as any,
 			cell: (info) => USER_TYPE_LABELS[info.getValue()],
 		}),
-		columnHelper.accessor('corporateInformation.companyInformation.name', {
+		columnHelper.accessor("corporateInformation.companyInformation.name", {
 			header: (
 				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "companyName"))}>
 					<span>Company Name</span>
 					<SorterArrow name="companyName" />
 				</button>
 			) as any,
-			cell: (info) => getCorporateName(info.row.original),
+			cell: (info) => getCompanyName(info.row.original),
 		}),
 		columnHelper.accessor("subscriptionExpirationDate", {
 			header: (
@@ -393,13 +389,16 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
 		return undefined;
 	};
 
-	const getCorporateName = (user: User) => {
+	const getCompanyName = (user: User) => {
-		if(isCorporateUser(user)) {
+		if (isCorporateUser(user)) {
-			return user.corporateInformation?.companyInformation?.name
+			return user.corporateInformation?.companyInformation?.name;
+		}
+		if (isAgentUser(user)) {
+			return user.agentInformation.companyName;
 		}
 
-		return '';
+		return "";
-	}
+	};
 
 	const sortFunction = (a: User, b: User) => {
 		if (sorter === "name" || sorter === reverseString("name"))
@@ -468,25 +467,20 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
 				: b.demographicInformation!.gender.localeCompare(a.demographicInformation!.gender);
 		}
 
-		if(sorter === 'companyName' || sorter === reverseString('companyName')) {
+		if (sorter === "companyName" || sorter === reverseString("companyName")) {
-			const aCorporateName = getCorporateName(a);
+			const aCorporateName = getCompanyName(a);
-			const bCorporateName = getCorporateName(b);
+			const bCorporateName = getCompanyName(b);
 			if (!aCorporateName && bCorporateName) return sorter === "companyName" ? -1 : 1;
 			if (aCorporateName && !bCorporateName) return sorter === "companyName" ? 1 : -1;
 			if (!aCorporateName && !bCorporateName) return 0;
 
-			return sorter === "companyName"
+			return sorter === "companyName" ? aCorporateName.localeCompare(bCorporateName) : bCorporateName.localeCompare(aCorporateName);
-				? aCorporateName.localeCompare(bCorporateName)
-				: bCorporateName.localeCompare(aCorporateName);			
 		}
 
 		return a.id.localeCompare(b.id);
 	};
 
-	const { rows: filteredRows, renderSearch } = useListSearch(
+	const {rows: filteredRows, renderSearch} = useListSearch(searchFields, displayUsers);
-		searchFields,
-		displayUsers,
-	)
 
 	const table = useReactTable({
 		data: filteredRows,

src/pages/(generation)/LevelGeneration.tsx

@@ -1,5 +1,5 @@
 import Select from "@/components/Low/Select";
-import {Difficulty, LevelExam, MultipleChoiceExercise} from "@/interfaces/exam";
+import {Difficulty, LevelExam, MultipleChoiceExercise, MultipleChoiceQuestion} from "@/interfaces/exam";
 import useExamStore from "@/stores/examStore";
 import {getExamById} from "@/utils/exams";
 import {playSound} from "@/utils/sound";
@@ -9,12 +9,69 @@ import clsx from "clsx";
 import {capitalize, sample} from "lodash";
 import {useRouter} from "next/router";
 import {useState} from "react";
-import {BsArrowRepeat} from "react-icons/bs";
+import {BsArrowRepeat, BsCheck, BsPencilSquare, BsX} from "react-icons/bs";
 import {toast} from "react-toastify";
 import {v4} from "uuid";
 
 const DIFFICULTIES: Difficulty[] = ["easy", "medium", "hard"];
 
+const QuestionDisplay = ({question, onUpdate}: {question: MultipleChoiceQuestion; onUpdate: (question: MultipleChoiceQuestion) => void}) => {
+	const [isEditing, setIsEditing] = useState(false);
+	const [options, setOptions] = useState(question.options);
+
+	return (
+		<div key={question.id} className="flex flex-col gap-1">
+			<span className="font-semibold">
+				{question.id}. {question.prompt}{" "}
+			</span>
+			<div className="flex flex-col gap-1">
+				{question.options.map((option, index) => (
+					<span key={option.id} className={clsx(question.solution === option.id && "font-bold")}>
+						<span className={clsx("font-semibold", question.solution === option.id ? "text-mti-green-light" : "text-ielts-level")}>
+							({option.id})
+						</span>{" "}
+						{isEditing ? (
+							<input
+								defaultValue={option.text}
+								className="w-60"
+								onChange={(e) => setOptions((prev) => prev.map((x, idx) => (idx === index ? {...x, text: e.target.value} : x)))}
+							/>
+						) : (
+							<span>{option.text}</span>
+						)}
+					</span>
+				))}
+			</div>
+			<div className="flex gap-2 mt-2 w-full">
+				{!isEditing && (
+					<button
+						onClick={() => setIsEditing(true)}
+						className="p-2 border border-neutral-300 bg-white rounded-xl hover:drop-shadow transition ease-in-out duration-300">
+						<BsPencilSquare />
+					</button>
+				)}
+				{isEditing && (
+					<>
+						<button
+							onClick={() => {
+								onUpdate({...question, options});
+								setIsEditing(false);
+							}}
+							className="p-2 border border-neutral-300 bg-white rounded-xl hover:drop-shadow transition ease-in-out duration-300">
+							<BsCheck />
+						</button>
+						<button
+							onClick={() => setIsEditing(false)}
+							className="p-2 border border-neutral-300 bg-white rounded-xl hover:drop-shadow transition ease-in-out duration-300">
+							<BsX />
+						</button>
+					</>
+				)}
+			</div>
+		</div>
+	);
+};
+
 const TaskTab = ({exam, difficulty, setExam}: {exam?: LevelExam; difficulty: Difficulty; setExam: (exam: LevelExam) => void}) => {
 	const [isLoading, setIsLoading] = useState(false);
 
@@ -37,6 +94,20 @@ const TaskTab = ({exam, difficulty, setExam}: {exam?: LevelExam; difficulty: Dif
 			.finally(() => setIsLoading(false));
 	};
 
+	const onUpdate = (question: MultipleChoiceQuestion) => {
+		if (!exam) return;
+
+		const updatedExam = {
+			...exam,
+			exercises: exam.exercises.map((x) => ({
+				...x,
+				questions: (x as MultipleChoiceExercise).questions.map((q) => (q.id === question.id ? question : q)),
+			})),
+		};
+		console.log(updatedExam);
+		setExam(updatedExam as any);
+	};
+
 	return (
 		<Tab.Panel className="w-full bg-ielts-level/20 min-h-[600px] h-full rounded-xl p-6 flex flex-col gap-4">
 			<div className="flex gap-4 items-end">
@@ -80,25 +151,7 @@ const TaskTab = ({exam, difficulty, setExam}: {exam?: LevelExam; difficulty: Dif
 									</div>
 									<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
 										{exercise.questions.map((question) => (
-											<div key={question.id} className="flex flex-col gap-1">
+											<QuestionDisplay question={question} onUpdate={onUpdate} key={question.id} />
-												<span className="font-semibold">
-													{question.id}. {question.prompt}
-												</span>
-												<div className="flex flex-col gap-1">
-													{question.options.map((option) => (
-														<span key={option.id} className={clsx(question.solution === option.id && "font-bold")}>
-															<span
-																className={clsx(
-																	"font-semibold",
-																	question.solution === option.id ? "text-mti-green-light" : "text-ielts-level",
-																)}>
-																({option.id})
-															</span>{" "}
-															{option.text}
-														</span>
-													))}
-												</div>
-											</div>
 										))}
 									</div>
 								</div>

src/pages/api/users/update.ts

@@ -85,7 +85,7 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
 		const user = await setDoc(userRef, updatedUser, {merge: true});
 		await managePaymentRecords(updatedUser, updatedUser.id);
 
-		if (updatedUser.status) {
+		if (updatedUser.status || updatedUser.type === "corporate") {
 			// there's no await as this does not affect the user
 			propagateStatusChange(queryId, updatedUser.status);
 		}

src/pages/stats.tsx

@@ -14,7 +14,7 @@ import {Module} from "@/interfaces";
 import ProgressBar from "@/components/Low/ProgressBar";
 import Layout from "@/components/High/Layout";
 import {calculateAverageLevel, calculateBandScore} from "@/utils/score";
-import {MODULE_ARRAY, sortByModule} from "@/utils/moduleUtils";
+import {countExamModules, countFullExams, MODULE_ARRAY, sortByModule} from "@/utils/moduleUtils";
 import {Chart} from "react-chartjs-2";
 import useUsers from "@/hooks/useUsers";
 import Select from "react-select";
@@ -39,7 +39,7 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 			redirect: {
 				destination: "/login",
 				permanent: false,
-			}
+			},
 		};
 	}
 
@@ -48,7 +48,7 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 			redirect: {
 				destination: "/",
 				permanent: false,
-			}
+			},
 		};
 	}
 
@@ -164,21 +164,21 @@ export default function Stats() {
 						items={[
 							{
 								icon: <BsFileEarmarkText className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
-								value: Object.keys(groupBySession(userStats)).length,
+								value: countFullExams(userStats),
 								label: "Exams",
-								tooltip: 'Number of all conducted completed exams',
+								tooltip: "Number of all conducted completed exams",
 							},
 							{
 								icon: <BsPencil className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
-								value: userStats.length,
+								value: countExamModules(userStats),
-								label: "Exercises",
+								label: "Modules",
-								tooltip: 'Number of all conducted exercises including Level Test',
+								tooltip: "Number of all exam modules performed including Level Test",
 							},
 							{
 								icon: <BsStar className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
 								value: `${userStats.length > 0 ? averageScore(userStats) : 0}%`,
 								label: "Average Score",
-								tooltip: 'Average success rate for questions responded',
+								tooltip: "Average success rate for questions responded",
 							},
 						]}
 					/>

src/resources/user.ts

@@ -1,4 +1,4 @@
-import {Type, User, CorporateUser} from "@/interfaces/user";
+import {Type, User, CorporateUser, AgentUser} from "@/interfaces/user";
 
 export const USER_TYPE_LABELS: {[key in Type]: string} = {
 	student: "Student",
@@ -11,4 +11,8 @@ export const USER_TYPE_LABELS: {[key in Type]: string} = {
 
 export function isCorporateUser(user: User): user is CorporateUser {
 	return (user as CorporateUser).corporateInformation !== undefined;
-  }
+}
+
+export function isAgentUser(user: User): user is AgentUser {
+	return (user as AgentUser).agentInformation !== undefined;
+}

src/utils/moduleUtils.ts

@@ -1,5 +1,8 @@
 import {Module} from "@/interfaces";
 import {Exercise} from "@/interfaces/exam";
+import {Stat} from "@/interfaces/user";
+import {uniq} from "lodash";
+import {groupBySession} from "./stats";
 
 export const MODULE_ARRAY: Module[] = ["reading", "listening", "writing", "speaking", "level"];
 
@@ -29,3 +32,30 @@ export const countExercises = (exercises: Exercise[]) => {
 
 	return lengthMap.reduce((accumulator, current) => accumulator + current, 0);
 };
+
+export const countFullExams = (stats: Stat[]) => {
+	const sessionExams = groupBySession(stats);
+	return Object.keys(sessionExams).filter((x) => {
+		const sessionStats = sessionExams[x as keyof typeof sessionExams];
+		const sessionModules = uniq(sessionStats.map((x) => x.module));
+
+		return (
+			sessionModules.includes("reading") &&
+			sessionModules.includes("listening") &&
+			sessionModules.includes("writing") &&
+			sessionModules.includes("speaking")
+		);
+	}).length;
+};
+
+export const countExamModules = (stats: Stat[]) => {
+	const sessionExams = groupBySession(stats);
+	const modulesPerSession = Object.keys(sessionExams).map((x) => {
+		const sessionStats = sessionExams[x as keyof typeof sessionExams];
+		const sessionModules = uniq(sessionStats.map((x) => x.module));
+
+		return sessionModules.length;
+	});
+
+	return modulesPerSession.reduce((acc, curr) => curr + acc, 0);
+};