devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Continued with the same updates

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-10-23 23:17:47 +01:00
parent e16a9873be
commit 8b872020c6
4 changed files with 61 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/dashboards/Owner.tsx
View File

@@ -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="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="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-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>
</>
);
}