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

Started creating a user type specific dashboard

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-10-22 09:15:11 +01:00
parent e10aebf4c0
commit 7e576738ce
2 changed files with 91 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
src/dashboards/Owner.tsx Normal file
View File

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

3
src/pages/index.tsx
View File

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