Added the ability to view how many students and teachers an admin has

This commit is contained in:
Tiago Ribeiro
2023-10-27 00:28:29 +01:00
parent bdb0ffde95
commit c0269fca45
3 changed files with 108 additions and 17 deletions

View File

@@ -6,9 +6,10 @@ import {User} from "@/interfaces/user";
import UserList from "@/pages/(admin)/Lists/UserList";
import {dateSorter} from "@/utils";
import moment from "moment";
import {useState} from "react";
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;
@@ -17,9 +18,15 @@ interface Props {
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
@@ -42,10 +49,36 @@ export default function OwnerDashboard({user}: Props) {
<BsArrowLeft className="text-xl" />
<span>Back</span>
</div>
<h2 className="text-2xl font-semibold">Students</h2>
<h2 className="text-2xl font-semibold">
Students (
{
users.filter(
(x) =>
x.type === "student" &&
(!!selectedUser
? groups
.filter((g) => g.admin === selectedUser.id)
.flatMap((g) => g.participants)
.includes(x.id) || false
: true),
).length
}
)
</h2>
</div>
<UserList user={user} filter={(x) => x.type === "student"} />
<UserList
user={user}
filter={(x) =>
x.type === "student" &&
(!!selectedUser
? groups
.filter((g) => g.admin === selectedUser.id)
.flatMap((g) => g.participants)
.includes(x.id) || false
: true)
}
/>
</>
);
@@ -58,10 +91,36 @@ export default function OwnerDashboard({user}: Props) {
<BsArrowLeft className="text-xl" />
<span>Back</span>
</div>
<h2 className="text-2xl font-semibold">Teachers</h2>
<h2 className="text-2xl font-semibold">
Teachers (
{
users.filter(
(x) =>
x.type === "teacher" &&
(!!selectedUser
? groups
.filter((g) => g.admin === selectedUser.id)
.flatMap((g) => g.participants)
.includes(x.id) || false
: true),
).length
}
)
</h2>
</div>
<UserList user={user} filter={(x) => x.type === "teacher"} />
<UserList
user={user}
filter={(x) =>
x.type === "teacher" &&
(!!selectedUser
? groups
.filter((g) => g.admin === selectedUser.id)
.flatMap((g) => g.participants)
.includes(x.id) || false
: true)
}
/>
</>
);
@@ -74,7 +133,7 @@ export default function OwnerDashboard({user}: Props) {
<BsArrowLeft className="text-xl" />
<span>Back</span>
</div>
<h2 className="text-2xl font-semibold">Corporate</h2>
<h2 className="text-2xl font-semibold">Corporate ({users.filter((x) => x.type === "admin").length})</h2>
</div>
<UserList user={user} filter={(x) => x.type === "admin"} />
@@ -90,7 +149,10 @@ export default function OwnerDashboard({user}: Props) {
<BsArrowLeft className="text-xl" />
<span>Back</span>
</div>
<h2 className="text-2xl font-semibold">Inactive Students</h2>
<h2 className="text-2xl font-semibold">
Inactive Students (
{users.filter((x) => x.type === "student" && (x.isDisabled || moment().isAfter(x.subscriptionExpirationDate))).length})
</h2>
</div>
<UserList user={user} filter={(x) => x.type === "student" && (x.isDisabled || moment().isAfter(x.subscriptionExpirationDate))} />
@@ -106,7 +168,10 @@ export default function OwnerDashboard({user}: Props) {
<BsArrowLeft className="text-xl" />
<span>Back</span>
</div>
<h2 className="text-2xl font-semibold">Inactive Corporate</h2>
<h2 className="text-2xl font-semibold">
Inactive Corporate (
{users.filter((x) => x.type === "admin" && (x.isDisabled || moment().isAfter(x.subscriptionExpirationDate))).length})
</h2>
</div>
<UserList user={user} filter={(x) => x.type === "admin" && (x.isDisabled || moment().isAfter(x.subscriptionExpirationDate))} />
@@ -260,7 +325,7 @@ export default function OwnerDashboard({user}: Props) {
return (
<>
<Modal isOpen={!!selectedUser} onClose={() => setSelectedUser(undefined)}>
<Modal isOpen={showModal} onClose={() => setSelectedUser(undefined)}>
<>
{selectedUser && (
<div className="w-full flex flex-col gap-8">
@@ -269,6 +334,10 @@ export default function OwnerDashboard({user}: Props) {
setSelectedUser(undefined);
if (shouldReload) reload();
}}
onViewStudents={
selectedUser.type === "admin" || selectedUser.type === "teacher" ? () => setPage("students") : undefined
}
onViewTeachers={selectedUser.type === "admin" ? () => setPage("teachers") : undefined}
{...selectedUser}
/>
</div>