From 7e576738ce001a68f774f965d0d43423e967f1e3 Mon Sep 17 00:00:00 2001
From: Tiago Ribeiro <tiago.ribeiro@ecrop.dev>
Date: Sun, 22 Oct 2023 09:15:11 +0100
Subject: [PATCH] Started creating a user type specific dashboard

---
 src/dashboards/Owner.tsx | 89 ++++++++++++++++++++++++++++++++++++++++
 src/pages/index.tsx      |  3 +-
 2 files changed, 91 insertions(+), 1 deletion(-)
 create mode 100644 src/dashboards/Owner.tsx

diff --git a/src/dashboards/Owner.tsx b/src/dashboards/Owner.tsx
new file mode 100644
index 00000000..b0c3e679
--- /dev/null
+++ b/src/dashboards/Owner.tsx
@@ -0,0 +1,89 @@
+import ProgressBar from "@/components/Low/ProgressBar";
+import ProfileSummary from "@/components/ProfileSummary";
+import useStats from "@/hooks/useStats";
+import useUsers from "@/hooks/useUsers";
+import {User} from "@/interfaces/user";
+import {MODULE_ARRAY} from "@/utils/moduleUtils";
+import {averageScore, groupBySession} from "@/utils/stats";
+import {capitalize} from "lodash";
+import moment from "moment";
+import {
+	BsBook,
+	BsFileEarmarkText,
+	BsGlobeCentralSouthAsia,
+	BsHeadphones,
+	BsMegaphone,
+	BsPen,
+	BsPencil,
+	BsPeopleFill,
+	BsPerson,
+	BsPersonFill,
+	BsPersonFillGear,
+	BsPersonGear,
+	BsPersonLinesFill,
+	BsStar,
+} from "react-icons/bs";
+
+interface Props {
+	user: User;
+}
+
+export default function OwnerDashboard({user}: Props) {
+	const {stats} = useStats(user.id);
+	const {users} = useUsers();
+
+	return (
+		<>
+			<div className="w-full flex flex-wrap -md:flex-col gap-4 items-center justify-center">
+				<div className="bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center w-52 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300">
+					<BsPersonFill className="text-mti-purple-light text-6xl" />
+					<span className="flex flex-col gap-1 items-center text-xl">
+						<span className="text-lg">Students</span>
+						<span className="font-semibold text-mti-purple">{users.filter((x) => x.type === "student").length}</span>
+					</span>
+				</div>
+				<div className="bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center w-52 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300">
+					<BsPersonLinesFill className="text-mti-purple-light text-6xl" />
+					<span className="flex flex-col gap-1 items-center text-xl">
+						<span className="text-lg">Teachers</span>
+						<span className="font-semibold text-mti-purple">{users.filter((x) => x.type === "teacher").length}</span>
+					</span>
+				</div>
+				<div className="bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center w-52 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300">
+					<BsPersonFillGear className="text-mti-purple-light text-6xl" />
+					<span className="flex flex-col gap-1 items-center text-xl">
+						<span className="text-lg">Corporates</span>
+						<span className="font-semibold text-mti-purple">{users.filter((x) => x.type === "admin").length}</span>
+					</span>
+				</div>
+				<div className="bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center w-52 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300">
+					<BsGlobeCentralSouthAsia className="text-mti-purple-light text-6xl" />
+					<span className="flex flex-col gap-1 items-center text-xl">
+						<span className="text-lg">Countries</span>
+						<span className="font-semibold text-mti-purple">
+							{[...new Set(users.filter((x) => x.demographicInformation).map((x) => x.demographicInformation?.country))].length}
+						</span>
+					</span>
+				</div>
+				<div className="bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center w-52 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300">
+					<BsPerson className="text-mti-purple-light text-6xl" />
+					<span className="flex flex-col gap-1 items-center text-xl">
+						<span className="text-lg">Inactive Students</span>
+						<span className="font-semibold text-mti-purple">
+							{users.filter((x) => x.type === "student" && (x.isDisabled || moment().isAfter(x.subscriptionExpirationDate))).length}
+						</span>
+					</span>
+				</div>
+				<div className="bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center w-52 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300">
+					<BsPersonGear className="text-mti-purple-light text-6xl" />
+					<span className="flex flex-col gap-1 items-center text-xl">
+						<span className="text-lg">Inactive Corporates</span>
+						<span className="font-semibold text-mti-purple">
+							{users.filter((x) => x.type === "admin" && (x.isDisabled || moment().isAfter(x.subscriptionExpirationDate))).length}
+						</span>
+					</span>
+				</div>
+			</div>
+		</>
+	);
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index f1918d82..b2240c96 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -23,6 +23,7 @@ import Link from "next/link";
 import {MODULE_ARRAY} from "@/utils/moduleUtils";
 import ProfileSummary from "@/components/ProfileSummary";
 import StudentDashboard from "@/dashboards/Student";
+import OwnerDashboard from "@/dashboards/Owner";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -164,7 +165,7 @@ export default function Home() {
 					{user.type === "teacher" && <StudentDashboard user={user} />}
 					{user.type === "admin" && <StudentDashboard user={user} />}
 					{user.type === "owner" && <StudentDashboard user={user} />}
-					{user.type === "developer" && <StudentDashboard user={user} />}
+					{user.type === "developer" && <OwnerDashboard user={user} />}
 				</Layout>
 			)}
 		</>