328 lines
12 KiB
TypeScript
328 lines
12 KiB
TypeScript
/* eslint-disable @next/next/no-img-element */
|
|
import Modal from "@/components/Modal";
|
|
import useStats from "@/hooks/useStats";
|
|
import useUsers from "@/hooks/useUsers";
|
|
import {User} from "@/interfaces/user";
|
|
import UserList from "@/pages/(admin)/Lists/UserList";
|
|
import {dateSorter} from "@/utils";
|
|
import moment from "moment";
|
|
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";
|
|
|
|
interface Props {
|
|
user: User;
|
|
}
|
|
|
|
export default function OwnerDashboard({user}: Props) {
|
|
const [page, setPage] = useState("");
|
|
const [selectedUser, setSelectedUser] = useState<User>();
|
|
const [showModal, setShowModal] = useState(false);
|
|
|
|
const {stats} = useStats(user.id);
|
|
const {users, reload} = useUsers();
|
|
const {groups} = useGroups();
|
|
|
|
useEffect(() => {
|
|
setShowModal(!!selectedUser && page === "");
|
|
}, [selectedUser, page]);
|
|
|
|
const UserDisplay = (displayUser: User) => (
|
|
<div
|
|
onClick={() => setSelectedUser(displayUser)}
|
|
className="flex w-full p-4 gap-4 items-center hover:bg-mti-purple-ultralight cursor-pointer transition ease-in-out duration-300">
|
|
<img src={displayUser.profilePicture} alt={displayUser.name} className="rounded-full w-10 h-10" />
|
|
<div className="flex flex-col gap-1 items-start">
|
|
<span>{displayUser.name}</span>
|
|
<span className="text-sm opacity-75">{displayUser.email}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const StudentsList = () => {
|
|
const filter = (x: User) =>
|
|
x.type === "student" &&
|
|
(!!selectedUser
|
|
? groups
|
|
.filter((g) => g.admin === selectedUser.id)
|
|
.flatMap((g) => g.participants)
|
|
.includes(x.id) || false
|
|
: true);
|
|
|
|
return (
|
|
<>
|
|
<div className="flex flex-col gap-4">
|
|
<div
|
|
onClick={() => setPage("")}
|
|
className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
|
|
<BsArrowLeft className="text-xl" />
|
|
<span>Back</span>
|
|
</div>
|
|
<h2 className="text-2xl font-semibold">Students ({users.filter(filter).length})</h2>
|
|
</div>
|
|
|
|
<UserList user={user} filter={filter} />
|
|
</>
|
|
);
|
|
};
|
|
|
|
const TeachersList = () => {
|
|
const filter = (x: User) =>
|
|
x.type === "teacher" &&
|
|
(!!selectedUser
|
|
? groups
|
|
.filter((g) => g.admin === selectedUser.id)
|
|
.flatMap((g) => g.participants)
|
|
.includes(x.id) || false
|
|
: true);
|
|
|
|
return (
|
|
<>
|
|
<div className="flex flex-col gap-4">
|
|
<div
|
|
onClick={() => setPage("")}
|
|
className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
|
|
<BsArrowLeft className="text-xl" />
|
|
<span>Back</span>
|
|
</div>
|
|
<h2 className="text-2xl font-semibold">Teachers ({users.filter(filter).length})</h2>
|
|
</div>
|
|
|
|
<UserList user={user} filter={filter} />
|
|
</>
|
|
);
|
|
};
|
|
|
|
const CorporateList = () => (
|
|
<>
|
|
<div className="flex flex-col gap-4">
|
|
<div
|
|
onClick={() => setPage("")}
|
|
className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
|
|
<BsArrowLeft className="text-xl" />
|
|
<span>Back</span>
|
|
</div>
|
|
<h2 className="text-2xl font-semibold">Corporate ({users.filter((x) => x.type === "admin").length})</h2>
|
|
</div>
|
|
|
|
<UserList user={user} filter={(x) => x.type === "admin"} />
|
|
</>
|
|
);
|
|
|
|
const InactiveStudentsList = () => {
|
|
const filter = (x: User) => x.type === "student" && (x.isDisabled || moment().isAfter(x.subscriptionExpirationDate));
|
|
|
|
return (
|
|
<>
|
|
<div className="flex flex-col gap-4">
|
|
<div
|
|
onClick={() => setPage("")}
|
|
className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
|
|
<BsArrowLeft className="text-xl" />
|
|
<span>Back</span>
|
|
</div>
|
|
<h2 className="text-2xl font-semibold">Inactive Students ({users.filter(filter).length})</h2>
|
|
</div>
|
|
|
|
<UserList user={user} filter={filter} />
|
|
</>
|
|
);
|
|
};
|
|
|
|
const InactiveCorporateList = () => {
|
|
const filter = (x: User) => x.type === "admin" && (x.isDisabled || moment().isAfter(x.subscriptionExpirationDate));
|
|
|
|
return (
|
|
<>
|
|
<div className="flex flex-col gap-4">
|
|
<div
|
|
onClick={() => setPage("")}
|
|
className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
|
|
<BsArrowLeft className="text-xl" />
|
|
<span>Back</span>
|
|
</div>
|
|
<h2 className="text-2xl font-semibold">Inactive Corporate ({users.filter(filter).length})</h2>
|
|
</div>
|
|
|
|
<UserList user={user} filter={filter} />
|
|
</>
|
|
);
|
|
};
|
|
|
|
const DefaultDashboard = () => (
|
|
<>
|
|
<section className="w-full flex flex-wrap gap-4 items-center justify-between">
|
|
<div
|
|
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
|
|
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
|
|
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 === "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
|
|
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.isDisabled || moment().isAfter(x.subscriptionExpirationDate))).length}
|
|
</span>
|
|
</span>
|
|
</div>
|
|
<div
|
|
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 === "admin" && (x.isDisabled || moment().isAfter(x.subscriptionExpirationDate))).length}
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 w-full justify-between">
|
|
<div className="bg-white shadow flex flex-col rounded-xl w-full">
|
|
<span className="p-4">Latest students</span>
|
|
<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
|
|
{users
|
|
.filter((x) => x.type === "student")
|
|
.sort((a, b) => dateSorter(a, b, "asc", "registrationDate"))
|
|
.map((x) => (
|
|
<UserDisplay key={x.id} {...x} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="bg-white shadow flex flex-col rounded-xl w-full">
|
|
<span className="p-4">Latest corporate</span>
|
|
<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
|
|
{users
|
|
.filter((x) => x.type === "admin")
|
|
.sort((a, b) => dateSorter(a, b, "asc", "registrationDate"))
|
|
.map((x) => (
|
|
<UserDisplay key={x.id} {...x} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="bg-white shadow flex flex-col rounded-xl w-full">
|
|
<span className="p-4">Disabled Corporate</span>
|
|
<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
|
|
{users
|
|
.filter((x) => x.type === "admin" && x.isDisabled)
|
|
.map((x) => (
|
|
<UserDisplay key={x.id} {...x} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="bg-white shadow flex flex-col rounded-xl w-full">
|
|
<span className="p-4">Students expiring in 1 month</span>
|
|
<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
|
|
{users
|
|
.filter(
|
|
(x) =>
|
|
x.type === "student" &&
|
|
x.subscriptionExpirationDate &&
|
|
moment().isAfter(moment(x.subscriptionExpirationDate).subtract(30, "days")),
|
|
)
|
|
.map((x) => (
|
|
<UserDisplay key={x.id} {...x} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="bg-white shadow flex flex-col rounded-xl w-full">
|
|
<span className="p-4">Teachers expiring in 1 month</span>
|
|
<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
|
|
{users
|
|
.filter(
|
|
(x) =>
|
|
x.type === "teacher" &&
|
|
x.subscriptionExpirationDate &&
|
|
moment().isAfter(moment(x.subscriptionExpirationDate).subtract(30, "days")),
|
|
)
|
|
.map((x) => (
|
|
<UserDisplay key={x.id} {...x} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="bg-white shadow flex flex-col rounded-xl w-full">
|
|
<span className="p-4">Corporate expiring in 1 month</span>
|
|
<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
|
|
{users
|
|
.filter(
|
|
(x) =>
|
|
x.type === "admin" &&
|
|
x.subscriptionExpirationDate &&
|
|
moment().isAfter(moment(x.subscriptionExpirationDate).subtract(30, "days")),
|
|
)
|
|
.map((x) => (
|
|
<UserDisplay key={x.id} {...x} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</>
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<Modal isOpen={showModal} onClose={() => setSelectedUser(undefined)}>
|
|
<>
|
|
{selectedUser && (
|
|
<div className="w-full flex flex-col gap-8">
|
|
<UserCard
|
|
onClose={(shouldReload) => {
|
|
setSelectedUser(undefined);
|
|
if (shouldReload) reload();
|
|
}}
|
|
onViewStudents={
|
|
selectedUser.type === "admin" || selectedUser.type === "teacher" ? () => setPage("students") : undefined
|
|
}
|
|
onViewTeachers={selectedUser.type === "admin" ? () => setPage("teachers") : undefined}
|
|
{...selectedUser}
|
|
/>
|
|
</div>
|
|
)}
|
|
</>
|
|
</Modal>
|
|
{page === "students" && <StudentsList />}
|
|
{page === "teachers" && <TeachersList />}
|
|
{page === "corporate" && <CorporateList />}
|
|
{page === "inactiveStudents" && <InactiveStudentsList />}
|
|
{page === "inactiveCorporate" && <InactiveCorporateList />}
|
|
{page === "" && <DefaultDashboard />}
|
|
</>
|
|
);
|
|
}
|