diff --git a/src/components/UserCard.tsx b/src/components/UserCard.tsx index f6643834..7feeec4b 100644 --- a/src/components/UserCard.tsx +++ b/src/components/UserCard.tsx @@ -24,7 +24,12 @@ const expirationDateColor = (date: Date) => { if (today.add(7, "days").isAfter(momentDate)) return "!bg-mti-orange-ultralight border-mti-orange-light"; }; -const UserCard = ({onClose, ...user}: User & {onClose: (reload?: boolean) => void}) => { +const UserCard = ({ + onClose, + onViewStudents, + onViewTeachers, + ...user +}: User & {onClose: (reload?: boolean) => void; onViewStudents?: () => void; onViewTeachers?: () => void}) => { const [expiryDate, setExpiryDate] = useState(user.subscriptionExpirationDate); const {stats} = useStats(user.id); @@ -215,13 +220,27 @@ const UserCard = ({onClose, ...user}: User & {onClose: (reload?: boolean) => voi -
- - +
+
+ {onViewStudents && ( + + )} + {onViewTeachers && ( + + )} +
+
+ + +
); diff --git a/src/dashboards/Owner.tsx b/src/dashboards/Owner.tsx index 75949942..575d61af 100644 --- a/src/dashboards/Owner.tsx +++ b/src/dashboards/Owner.tsx @@ -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(); + 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) => (
Back
-

Students

+

+ 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 + } + ) +

- x.type === "student"} /> + + 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) { Back -

Teachers

+

+ 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 + } + ) +

- x.type === "teacher"} /> + + 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) { Back -

Corporate

+

Corporate ({users.filter((x) => x.type === "admin").length})

x.type === "admin"} /> @@ -90,7 +149,10 @@ export default function OwnerDashboard({user}: Props) { Back -

Inactive Students

+

+ Inactive Students ( + {users.filter((x) => x.type === "student" && (x.isDisabled || moment().isAfter(x.subscriptionExpirationDate))).length}) +

x.type === "student" && (x.isDisabled || moment().isAfter(x.subscriptionExpirationDate))} /> @@ -106,7 +168,10 @@ export default function OwnerDashboard({user}: Props) { Back -

Inactive Corporate

+

+ Inactive Corporate ( + {users.filter((x) => x.type === "admin" && (x.isDisabled || moment().isAfter(x.subscriptionExpirationDate))).length}) +

x.type === "admin" && (x.isDisabled || moment().isAfter(x.subscriptionExpirationDate))} /> @@ -260,7 +325,7 @@ export default function OwnerDashboard({user}: Props) { return ( <> - setSelectedUser(undefined)}> + setSelectedUser(undefined)}> <> {selectedUser && (
@@ -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} />
diff --git a/src/interfaces/user.ts b/src/interfaces/user.ts index e182d457..7234b733 100644 --- a/src/interfaces/user.ts +++ b/src/interfaces/user.ts @@ -14,11 +14,14 @@ export interface User { bio: string; isVerified: boolean; demographicInformation?: DemographicInformation; + companyInformation?: CompanyInformation; subscriptionExpirationDate?: null | Date; isDisabled?: boolean; registrationDate?: Date; } +export interface CompanyInformation {} + export interface DemographicInformation { country: string; phone: string;