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

Updated the Dashboard for Corporate accounts

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-10-30 14:29:41 +00:00
parent 37c889a39a
commit dc13a4a7b7
9 changed files with 333 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
src/dashboards/Owner.tsx
View File

@@ -10,6 +10,7 @@ import {useEffect, useState} from "react";
import {BsArrowLeft, BsGlobeCentralSouthAsia, BsPerson, BsPersonFill, BsPersonFillGear, BsPersonGear, BsPersonLinesFill} from "react-icons/bs";
import UserCard from "@/components/UserCard";
import useGroups from "@/hooks/useGroups";
import IconCard from "./IconCard";
interface Props {
user: User;
@@ -153,72 +154,53 @@ export default function OwnerDashboard({user}: Props) {
const DefaultDashboard = () => (
<>
<section className="w-full flex flex-wrap gap-4 items-center justify-between">
<div
<IconCard
Icon={BsPersonFill}
label="Students"
value={users.filter((x) => x.type === "student").length}
onClick={() => setPage("students")}
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
color="purple"
/>
<IconCard
Icon={BsPersonLinesFill}
label="Teachers"
value={users.filter((x) => x.type === "teacher").length}
onClick={() => setPage("teachers")}
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
color="purple"
/>
<IconCard
Icon={BsPersonLinesFill}
label="Corporate"
value={users.filter((x) => x.type === "corporate").length}
onClick={() => setPage("corporate")}
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">Corporate</span>
<span className="font-semibold text-mti-purple">{users.filter((x) => x.type === "corporate").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
color="purple"
/>
<IconCard
Icon={BsGlobeCentralSouthAsia}
label="Countries"
value={[...new Set(users.filter((x) => x.demographicInformation).map((x) => x.demographicInformation?.country))].length}
color="purple"
/>
<IconCard
onClick={() => setPage("inactiveStudents")}
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-rose-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-rose">
{
users.filter(
(x) => x.type === "student" && (x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate)),
).length
}
</span>
</span>
</div>
<div
Icon={BsPerson}
label="Inactive Students"
value={
users.filter((x) => x.type === "student" && (x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate)))
.length
}
color="rose"
/>
<IconCard
onClick={() => setPage("inactiveCorporate")}
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-rose-light text-6xl" />
<span className="flex flex-col gap-1 items-center text-xl">
<span className="text-lg text-center">Inactive Corporate</span>
<span className="font-semibold text-mti-rose">
{
users.filter(
(x) => x.type === "corporate" && (x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate)),
).length
}
</span>
</span>
</div>
Icon={BsPerson}
label="Inactive Corporate"
value={
users.filter((x) => x.type === "corporate" && (x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate)))
.length
}
color="rose"
/>
</section>
<section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 w-full justify-between">