Continued with the same updates

src/dashboards/Owner.tsx

@@ -1,8 +1,10 @@
+/* eslint-disable @next/next/no-img-element */
 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 {dateSorter} from "@/utils";
 import {MODULE_ARRAY} from "@/utils/moduleUtils";
 import {averageScore, groupBySession} from "@/utils/stats";
 import {capitalize} from "lodash";
@@ -34,29 +36,29 @@ export default function OwnerDashboard({user}: Props) {
 
 	return (
 		<>
-			<div className="w-full flex flex-wrap -md:flex-col gap-4 items-center justify-center">
+			<div className="w-full flex flex-wrap gap-4 items-center justify-between">
-				<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">
+				<div className="bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center w-48 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">
+				<div className="bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center w-48 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">
+				<div className="bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center w-48 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="text-lg">Corporate</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">
+				<div className="bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center w-48 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>
@@ -65,7 +67,7 @@ export default function OwnerDashboard({user}: Props) {
 						</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">
+				<div className="bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center w-48 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>
@@ -74,16 +76,54 @@ export default function OwnerDashboard({user}: Props) {
 						</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">
+				<div className="bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center w-48 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="text-lg text-center">Inactive Corporate</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>
+			<div className="flex gap-4 w-full">
+				<div className="bg-white shadow p-4 flex flex-col gap-4 rounded-xl w-96">
+					<span>Latest students</span>
+					<div className="flex flex-col gap-4 items-start">
+						{users
+							.filter((x) => x.type === "student")
+							.sort((a, b) => dateSorter(a, b, "asc", "registrationDate"))
+							.slice(0, (users.filter((x) => x.type === "student").length - 1) / 2)
+							.map((x) => (
+								<div className="flex gap-4 items-center" key={x.id}>
+									<img src={x.profilePicture} alt={x.name} className="rounded-full w-10 h-10" />
+									<div className="flex flex-col gap-1 items-start">
+										<span>{x.name}</span>
+										<span className="text-sm opacity-75">{x.email}</span>
+									</div>
+								</div>
+							))}
+					</div>
+				</div>
+				<div className="bg-white shadow p-4 flex flex-col gap-4 rounded-xl w-96">
+					<span>Latest corporate</span>
+					<div className="flex flex-col gap-4 items-start">
+						{users
+							.filter((x) => x.type === "admin")
+							.sort((a, b) => dateSorter(a, b, "asc", "registrationDate"))
+							.slice(0, (users.filter((x) => x.type === "admin").length - 1) / 2)
+							.map((x) => (
+								<div className="flex gap-4 items-center" key={x.id}>
+									<img src={x.profilePicture} alt={x.name} className="rounded-full w-10 h-10" />
+									<div className="flex flex-col gap-1 items-start">
+										<span>{x.name}</span>
+										<span className="text-sm opacity-75">{x.email}</span>
+									</div>
+								</div>
+							))}
+					</div>
+				</div>
+			</div>
 		</>
 	);
 }

src/interfaces/user.ts

@@ -16,6 +16,7 @@ export interface User {
 	demographicInformation?: DemographicInformation;
 	subscriptionExpirationDate?: null | Date;
 	isDisabled?: boolean;
+	registrationDate?: Date;
 }
 
 export interface DemographicInformation {

src/pages/api/register.ts

@@ -53,6 +53,7 @@ async function login(req: NextApiRequest, res: NextApiResponse) {
 				focus: "academic",
 				type: codeData.type,
 				subscriptionExpirationDate: codeData.expiryDate,
+				registrationDate: new Date(),
 			};
 
 			await setDoc(doc(db, "users", userId), user);

src/utils/index.ts

@@ -0,0 +1,10 @@
+import moment from "moment";
+
+export function dateSorter(a: any, b: any, direction: "asc" | "desc", key: string) {
+	if (!a[key] && b[key]) return direction === "asc" ? -1 : 1;
+	if (a[key] && !b[key]) return direction === "asc" ? 1 : -1;
+	if (!a[key] && !b[key]) return 0;
+	if (moment(a[key]).isAfter(b[key])) return direction === "asc" ? -1 : 1;
+	if (moment(b[key]).isAfter(a[key])) return direction === "asc" ? 1 : -1;
+	return 0;
+}