Added the possibility to have multiple dashboards

src/dashboards/Student.tsx

@@ -0,0 +1,80 @@
+import ProgressBar from "@/components/Low/ProgressBar";
+import ProfileSummary from "@/components/ProfileSummary";
+import useStats from "@/hooks/useStats";
+import {User} from "@/interfaces/user";
+import {MODULE_ARRAY} from "@/utils/moduleUtils";
+import {averageScore, groupBySession} from "@/utils/stats";
+import {capitalize} from "lodash";
+import {BsBook, BsFileEarmarkText, BsHeadphones, BsMegaphone, BsPen, BsPencil, BsStar} from "react-icons/bs";
+
+interface Props {
+	user: User;
+}
+
+export default function StudentDashboard({user}: Props) {
+	const {stats} = useStats(user.id);
+
+	return (
+		<>
+			<ProfileSummary
+				user={user}
+				items={[
+					{
+						icon: <BsFileEarmarkText className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
+						value: Object.keys(groupBySession(stats)).length,
+						label: "Exams",
+					},
+					{
+						icon: <BsPencil className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
+						value: stats.length,
+						label: "Exercises",
+					},
+					{
+						icon: <BsStar className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
+						value: `${stats.length > 0 ? averageScore(stats) : 0}%`,
+						label: "Average Score",
+					},
+				]}
+			/>
+
+			<section className="flex flex-col gap-1 md:gap-3">
+				<span className="font-bold text-lg">Bio</span>
+				<span className="text-mti-gray-taupe">
+					{user.bio || "Your bio will appear here, you can change it by clicking on your name in the top right corner."}
+				</span>
+			</section>
+
+			<section className="flex flex-col gap-3">
+				<span className="font-bold text-lg">Score History</span>
+				<div className="grid -md:grid-rows-4 md:grid-cols-2 gap-6">
+					{MODULE_ARRAY.map((module) => (
+						<div className="border border-mti-gray-anti-flash rounded-xl flex flex-col gap-2 p-4" key={module}>
+							<div className="flex gap-2 md:gap-3 items-center">
+								<div className="w-8 h-8 md:w-12 md:h-12 bg-mti-gray-smoke flex items-center justify-center rounded-lg md:rounded-xl">
+									{module === "reading" && <BsBook className="text-ielts-reading w-4 h-4 md:w-5 md:h-5" />}
+									{module === "listening" && <BsHeadphones className="text-ielts-listening w-4 h-4 md:w-5 md:h-5" />}
+									{module === "writing" && <BsPen className="text-ielts-writing w-4 h-4 md:w-5 md:h-5" />}
+									{module === "speaking" && <BsMegaphone className="text-ielts-speaking w-4 h-4 md:w-5 md:h-5" />}
+								</div>
+								<div className="flex justify-between w-full">
+									<span className="font-bold md:font-extrabold text-sm">{capitalize(module)}</span>
+									<span className="text-sm font-normal text-mti-gray-dim">
+										Level {user.levels[module]} / Level {user.desiredLevels[module]}
+									</span>
+								</div>
+							</div>
+							<div className="md:pl-14">
+								<ProgressBar
+									color={module}
+									label=""
+									percentage={Math.round((user.levels[module] * 100) / user.desiredLevels[module])}
+									className="w-full h-2"
+								/>
+							</div>
+						</div>
+					))}
+				</div>
+			</section>
+		</>
+	);
+}

src/pages/index.tsx

@@ -22,6 +22,7 @@ import moment from "moment";
 import Link from "next/link";
 import {MODULE_ARRAY} from "@/utils/moduleUtils";
 import ProfileSummary from "@/components/ProfileSummary";
+import StudentDashboard from "@/dashboards/Student";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -46,7 +47,6 @@ export default function Home() {
 	const [showDiagnostics, setShowDiagnostics] = useState(false);
 	const [showDemographicInput, setShowDemographicInput] = useState(false);
 	const {user, mutateUser} = useUser({redirectTo: "/login"});
-	const {stats} = useStats(user?.id);
 
 	useEffect(() => {
 		if (user) {
@@ -160,65 +160,11 @@ export default function Home() {
 			<ToastContainer />
 			{user && (
 				<Layout user={user}>
-					<ProfileSummary
+					{user.type === "student" && <StudentDashboard user={user} />}
-						user={user}
+					{user.type === "teacher" && <StudentDashboard user={user} />}
-						items={[
+					{user.type === "admin" && <StudentDashboard user={user} />}
-							{
+					{user.type === "owner" && <StudentDashboard user={user} />}
-								icon: <BsFileEarmarkText className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
+					{user.type === "developer" && <StudentDashboard user={user} />}
-								value: Object.keys(groupBySession(stats)).length,
-								label: "Exams",
-							},
-							{
-								icon: <BsPencil className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
-								value: stats.length,
-								label: "Exercises",
-							},
-							{
-								icon: <BsStar className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
-								value: `${stats.length > 0 ? averageScore(stats) : 0}%`,
-								label: "Average Score",
-							},
-						]}
-					/>
-
-					<section className="flex flex-col gap-1 md:gap-3">
-						<span className="font-bold text-lg">Bio</span>
-						<span className="text-mti-gray-taupe">
-							{user.bio || "Your bio will appear here, you can change it by clicking on your name in the top right corner."}
-						</span>
-					</section>
-
-					<section className="flex flex-col gap-3">
-						<span className="font-bold text-lg">Score History</span>
-						<div className="grid -md:grid-rows-4 md:grid-cols-2 gap-6">
-							{MODULE_ARRAY.map((module) => (
-								<div className="border border-mti-gray-anti-flash rounded-xl flex flex-col gap-2 p-4" key={module}>
-									<div className="flex gap-2 md:gap-3 items-center">
-										<div className="w-8 h-8 md:w-12 md:h-12 bg-mti-gray-smoke flex items-center justify-center rounded-lg md:rounded-xl">
-											{module === "reading" && <BsBook className="text-ielts-reading w-4 h-4 md:w-5 md:h-5" />}
-											{module === "listening" && <BsHeadphones className="text-ielts-listening w-4 h-4 md:w-5 md:h-5" />}
-											{module === "writing" && <BsPen className="text-ielts-writing w-4 h-4 md:w-5 md:h-5" />}
-											{module === "speaking" && <BsMegaphone className="text-ielts-speaking w-4 h-4 md:w-5 md:h-5" />}
-										</div>
-										<div className="flex justify-between w-full">
-											<span className="font-bold md:font-extrabold text-sm">{capitalize(module)}</span>
-											<span className="text-sm font-normal text-mti-gray-dim">
-												Level {user.levels[module]} / Level {user.desiredLevels[module]}
-											</span>
-										</div>
-									</div>
-									<div className="md:pl-14">
-										<ProgressBar
-											color={module}
-											label=""
-											percentage={Math.round((user.levels[module] * 100) / user.desiredLevels[module])}
-											className="w-full h-2"
-										/>
-									</div>
-								</div>
-							))}
-						</div>
-					</section>
 				</Layout>
 			)}
 		</>