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

Changed the totals of the admin pretty much

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-09-08 16:06:54 +01:00
parent 620e4dd787
commit e6528392a2
1 changed files with 69 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
src/dashboards/Admin.tsx
View File

@@ -31,12 +31,40 @@ interface Props {
user: User; user: User;
} }
const studentHash = {
type: "student",
size: 25,
orderBy: "registrationDate",
};
const teacherHash = {
type: "teacher",
size: 25,
orderBy: "registrationDate",
};
const corporateHash = {
type: "corporate",
size: 25,
orderBy: "registrationDate",
};
const agentsHash = {
type: "agent",
size: 25,
orderBy: "registrationDate",
};
export default function AdminDashboard({user}: Props) { export default function AdminDashboard({user}: Props) {
const [page, setPage] = useState(""); const [page, setPage] = useState("");
const [selectedUser, setSelectedUser] = useState<User>(); const [selectedUser, setSelectedUser] = useState<User>();
const [showModal, setShowModal] = useState(false); const [showModal, setShowModal] = useState(false);
const {users, reload, isLoading} = useUsers(); const {users: students, total: totalStudents, reload: reloadStudents, isLoading: isStudentsLoading} = useUsers(studentHash);
const {users: teachers, total: totalTeachers, reload: reloadTeachers, isLoading: isTeachersLoading} = useUsers(teacherHash);
const {users: corporates, total: totalCorporate, reload: reloadCorporates, isLoading: isCorporatesLoading} = useUsers(corporateHash);
const {users: agents, total: totalAgents, reload: reloadAgents, isLoading: isAgentsLoading} = useUsers(corporateHash);
const {groups} = useGroups({}); const {groups} = useGroups({});
const {pending, done} = usePaymentStatusUsers(); const {pending, done} = usePaymentStatusUsers();
@@ -47,9 +75,6 @@ export default function AdminDashboard({user}: Props) {
setShowModal(!!selectedUser && router.asPath === "/#"); setShowModal(!!selectedUser && router.asPath === "/#");
}, [selectedUser, router.asPath]); }, [selectedUser, router.asPath]);
// eslint-disable-next-line react-hooks/exhaustive-deps
useEffect(reload, [page]);
const inactiveCountryManagerFilter = (x: User) => x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate); const inactiveCountryManagerFilter = (x: User) => x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate);
const UserDisplay = (displayUser: User) => ( const UserDisplay = (displayUser: User) => (
@@ -279,50 +304,50 @@ export default function AdminDashboard({user}: Props) {
<section className="w-full grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 place-items-center items-center justify-between"> <section className="w-full grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 place-items-center items-center justify-between">
<IconCard <IconCard
Icon={BsPersonFill} Icon={BsPersonFill}
isLoading={isLoading} isLoading={isStudentsLoading}
label="Students" label="Students"
value={users.filter((x) => x.type === "student").length} value={totalStudents}
onClick={() => router.push("/#students")} onClick={() => router.push("/#students")}
color="purple" color="purple"
/> />
<IconCard <IconCard
Icon={BsPencilSquare} Icon={BsPencilSquare}
isLoading={isLoading} isLoading={isTeachersLoading}
label="Teachers" label="Teachers"
value={users.filter((x) => x.type === "teacher").length} value={totalTeachers}
onClick={() => router.push("/#teachers")} onClick={() => router.push("/#teachers")}
color="purple" color="purple"
/> />
<IconCard <IconCard
Icon={BsBank} Icon={BsBank}
isLoading={isLoading} isLoading={isCorporatesLoading}
label="Corporate" label="Corporate"
value={users.filter((x) => x.type === "corporate").length} value={totalCorporate}
onClick={() => router.push("/#corporate")} onClick={() => router.push("/#corporate")}
color="purple" color="purple"
/> />
<IconCard <IconCard
Icon={BsBriefcaseFill} Icon={BsBriefcaseFill}
isLoading={isLoading} isLoading={isAgentsLoading}
label="Country Managers" label="Country Managers"
value={users.filter((x) => x.type === "agent").length} value={totalAgents}
onClick={() => router.push("/#agents")} onClick={() => router.push("/#agents")}
color="purple" color="purple"
/> />
<IconCard <IconCard
Icon={BsGlobeCentralSouthAsia} Icon={BsGlobeCentralSouthAsia}
isLoading={isLoading} isLoading={isAgentsLoading}
label="Countries" label="Countries"
value={[...new Set(users.filter((x) => x.demographicInformation).map((x) => x.demographicInformation?.country))].length} value={[...new Set(agents.filter((x) => x.demographicInformation).map((x) => x.demographicInformation?.country))].length}
color="purple" color="purple"
/> />
<IconCard <IconCard
onClick={() => router.push("/#inactiveStudents")} onClick={() => router.push("/#inactiveStudents")}
Icon={BsPersonFill} Icon={BsPersonFill}
isLoading={isLoading} isLoading={isStudentsLoading}
label="Inactive Students" label="Inactive Students"
value={ value={
users.filter((x) => x.type === "student" && (x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate))) students.filter((x) => x.type === "student" && (x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate)))
.length .length
} }
color="rose" color="rose"
@@ -330,26 +355,26 @@ export default function AdminDashboard({user}: Props) {
<IconCard <IconCard
onClick={() => router.push("/#inactiveCountryManagers")} onClick={() => router.push("/#inactiveCountryManagers")}
Icon={BsBriefcaseFill} Icon={BsBriefcaseFill}
isLoading={isLoading} isLoading={isAgentsLoading}
label="Inactive Country Managers" label="Inactive Country Managers"
value={users.filter(inactiveCountryManagerFilter).length} value={agents.filter(inactiveCountryManagerFilter).length}
color="rose" color="rose"
/> />
<IconCard <IconCard
onClick={() => router.push("/#inactiveCorporate")} onClick={() => router.push("/#inactiveCorporate")}
Icon={BsBank} Icon={BsBank}
isLoading={isLoading} isLoading={isCorporatesLoading}
label="Inactive Corporate" label="Inactive Corporate"
value={ value={
users.filter((x) => x.type === "corporate" && (x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate))) corporates.filter(
.length (x) => x.type === "corporate" && (x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate)),
).length
} }
color="rose" color="rose"
/> />
<IconCard <IconCard
onClick={() => router.push("/#paymentdone")} onClick={() => router.push("/#paymentdone")}
Icon={BsCurrencyDollar} Icon={BsCurrencyDollar}
isLoading={isLoading}
label="Payment Done" label="Payment Done"
value={done.length} value={done.length}
color="purple" color="purple"
@@ -357,7 +382,6 @@ export default function AdminDashboard({user}: Props) {
<IconCard <IconCard
onClick={() => router.push("/#paymentpending")} onClick={() => router.push("/#paymentpending")}
Icon={BsCurrencyDollar} Icon={BsCurrencyDollar}
isLoading={isLoading}
label="Pending Payment" label="Pending Payment"
value={pending.length} value={pending.length}
color="rose" color="rose"
@@ -365,14 +389,13 @@ export default function AdminDashboard({user}: Props) {
<IconCard <IconCard
onClick={() => router.push("https://cms.encoach.com/admin")} onClick={() => router.push("https://cms.encoach.com/admin")}
Icon={BsLayoutSidebar} Icon={BsLayoutSidebar}
isLoading={isLoading}
label="Content Management System (CMS)" label="Content Management System (CMS)"
color="green" color="green"
/> />
<IconCard <IconCard
onClick={() => router.push("/#corporatestudentslevels")} onClick={() => router.push("/#corporatestudentslevels")}
Icon={BsPersonFill} Icon={BsPersonFill}
isLoading={isLoading} isLoading={isStudentsLoading}
label="Corporate Students Levels" label="Corporate Students Levels"
color="purple" color="purple"
/> />
@@ -382,8 +405,7 @@ export default function AdminDashboard({user}: Props) {
<div className="bg-white shadow flex flex-col rounded-xl w-full"> <div className="bg-white shadow flex flex-col rounded-xl w-full">
<span className="p-4">Latest students</span> <span className="p-4">Latest students</span>
<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide"> <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
{users {students
.filter((x) => x.type === "student")
.sort((a, b) => dateSorter(a, b, "desc", "registrationDate")) .sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))
.map((x) => ( .map((x) => (
<UserDisplay key={x.id} {...x} /> <UserDisplay key={x.id} {...x} />
@@ -393,8 +415,7 @@ export default function AdminDashboard({user}: Props) {
<div className="bg-white shadow flex flex-col rounded-xl w-full"> <div className="bg-white shadow flex flex-col rounded-xl w-full">
<span className="p-4">Latest teachers</span> <span className="p-4">Latest teachers</span>
<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide"> <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
{users {teachers
.filter((x) => x.type === "teacher")
.sort((a, b) => { .sort((a, b) => {
return dateSorter(a, b, "desc", "registrationDate"); return dateSorter(a, b, "desc", "registrationDate");
}) })
@@ -406,8 +427,7 @@ export default function AdminDashboard({user}: Props) {
<div className="bg-white shadow flex flex-col rounded-xl w-full"> <div className="bg-white shadow flex flex-col rounded-xl w-full">
<span className="p-4">Latest corporate</span> <span className="p-4">Latest corporate</span>
<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide"> <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
{users {corporates
.filter((x) => x.type === "corporate")
.sort((a, b) => { .sort((a, b) => {
return dateSorter(a, b, "desc", "registrationDate"); return dateSorter(a, b, "desc", "registrationDate");
}) })
@@ -419,8 +439,8 @@ export default function AdminDashboard({user}: Props) {
<div className="bg-white shadow flex flex-col rounded-xl w-full"> <div className="bg-white shadow flex flex-col rounded-xl w-full">
<span className="p-4">Unpaid Corporate</span> <span className="p-4">Unpaid Corporate</span>
<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide"> <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
{users {corporates
.filter((x) => x.type === "corporate" && x.status === "paymentDue") .filter((x) => x.status === "paymentDue")
.map((x) => ( .map((x) => (
<UserDisplay key={x.id} {...x} /> <UserDisplay key={x.id} {...x} />
))} ))}
@@ -429,10 +449,9 @@ export default function AdminDashboard({user}: Props) {
<div className="bg-white shadow flex flex-col rounded-xl w-full"> <div className="bg-white shadow flex flex-col rounded-xl w-full">
<span className="p-4">Students expiring in 1 month</span> <span className="p-4">Students expiring in 1 month</span>
<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide"> <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
{users {students
.filter( .filter(
(x) => (x) =>
x.type === "student" &&
x.subscriptionExpirationDate && x.subscriptionExpirationDate &&
moment().isAfter(moment(x.subscriptionExpirationDate).subtract(30, "days")) && moment().isAfter(moment(x.subscriptionExpirationDate).subtract(30, "days")) &&
moment().isBefore(moment(x.subscriptionExpirationDate)), moment().isBefore(moment(x.subscriptionExpirationDate)),
@@ -445,10 +464,9 @@ export default function AdminDashboard({user}: Props) {
<div className="bg-white shadow flex flex-col rounded-xl w-full"> <div className="bg-white shadow flex flex-col rounded-xl w-full">
<span className="p-4">Teachers expiring in 1 month</span> <span className="p-4">Teachers expiring in 1 month</span>
<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide"> <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
{users {teachers
.filter( .filter(
(x) => (x) =>
x.type === "teacher" &&
x.subscriptionExpirationDate && x.subscriptionExpirationDate &&
moment().isAfter(moment(x.subscriptionExpirationDate).subtract(30, "days")) && moment().isAfter(moment(x.subscriptionExpirationDate).subtract(30, "days")) &&
moment().isBefore(moment(x.subscriptionExpirationDate)), moment().isBefore(moment(x.subscriptionExpirationDate)),
@@ -461,10 +479,9 @@ export default function AdminDashboard({user}: Props) {
<div className="bg-white shadow flex flex-col rounded-xl w-full"> <div className="bg-white shadow flex flex-col rounded-xl w-full">
<span className="p-4">Country Manager expiring in 1 month</span> <span className="p-4">Country Manager expiring in 1 month</span>
<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide"> <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
{users {agents
.filter( .filter(
(x) => (x) =>
x.type === "agent" &&
x.subscriptionExpirationDate && x.subscriptionExpirationDate &&
moment().isAfter(moment(x.subscriptionExpirationDate).subtract(30, "days")) && moment().isAfter(moment(x.subscriptionExpirationDate).subtract(30, "days")) &&
moment().isBefore(moment(x.subscriptionExpirationDate)), moment().isBefore(moment(x.subscriptionExpirationDate)),
@@ -477,10 +494,9 @@ export default function AdminDashboard({user}: Props) {
<div className="bg-white shadow flex flex-col rounded-xl w-full"> <div className="bg-white shadow flex flex-col rounded-xl w-full">
<span className="p-4">Corporate expiring in 1 month</span> <span className="p-4">Corporate expiring in 1 month</span>
<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide"> <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
{users {corporates
.filter( .filter(
(x) => (x) =>
x.type === "corporate" &&
x.subscriptionExpirationDate && x.subscriptionExpirationDate &&
moment().isAfter(moment(x.subscriptionExpirationDate).subtract(30, "days")) && moment().isAfter(moment(x.subscriptionExpirationDate).subtract(30, "days")) &&
moment().isBefore(moment(x.subscriptionExpirationDate)), moment().isBefore(moment(x.subscriptionExpirationDate)),
@@ -493,10 +509,8 @@ export default function AdminDashboard({user}: Props) {
<div className="bg-white shadow flex flex-col rounded-xl w-full"> <div className="bg-white shadow flex flex-col rounded-xl w-full">
<span className="p-4">Expired Students</span> <span className="p-4">Expired Students</span>
<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide"> <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
{users {students
.filter( .filter((x) => x.subscriptionExpirationDate && moment().isAfter(moment(x.subscriptionExpirationDate)))
(x) => x.type === "student" && x.subscriptionExpirationDate && moment().isAfter(moment(x.subscriptionExpirationDate)),
)
.map((x) => ( .map((x) => (
<UserDisplay key={x.id} {...x} /> <UserDisplay key={x.id} {...x} />
))} ))}
@@ -505,10 +519,8 @@ export default function AdminDashboard({user}: Props) {
<div className="bg-white shadow flex flex-col rounded-xl w-full"> <div className="bg-white shadow flex flex-col rounded-xl w-full">
<span className="p-4">Expired Teachers</span> <span className="p-4">Expired Teachers</span>
<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide"> <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
{users {teachers
.filter( .filter((x) => x.subscriptionExpirationDate && moment().isAfter(moment(x.subscriptionExpirationDate)))
(x) => x.type === "teacher" && x.subscriptionExpirationDate && moment().isAfter(moment(x.subscriptionExpirationDate)),
)
.map((x) => ( .map((x) => (
<UserDisplay key={x.id} {...x} /> <UserDisplay key={x.id} {...x} />
))} ))}
@@ -517,10 +529,8 @@ export default function AdminDashboard({user}: Props) {
<div className="bg-white shadow flex flex-col rounded-xl w-full"> <div className="bg-white shadow flex flex-col rounded-xl w-full">
<span className="p-4">Expired Country Manager</span> <span className="p-4">Expired Country Manager</span>
<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide"> <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
{users {agents
.filter( .filter((x) => x.subscriptionExpirationDate && moment().isAfter(moment(x.subscriptionExpirationDate)))
(x) => x.type === "agent" && x.subscriptionExpirationDate && moment().isAfter(moment(x.subscriptionExpirationDate)),
)
.map((x) => ( .map((x) => (
<UserDisplay key={x.id} {...x} /> <UserDisplay key={x.id} {...x} />
))} ))}
@@ -529,11 +539,8 @@ export default function AdminDashboard({user}: Props) {
<div className="bg-white shadow flex flex-col rounded-xl w-full"> <div className="bg-white shadow flex flex-col rounded-xl w-full">
<span className="p-4">Expired Corporate</span> <span className="p-4">Expired Corporate</span>
<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide"> <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
{users {corporates
.filter( .filter((x) => x.subscriptionExpirationDate && moment().isAfter(moment(x.subscriptionExpirationDate)))
(x) =>
x.type === "corporate" && x.subscriptionExpirationDate && moment().isAfter(moment(x.subscriptionExpirationDate)),
)
.map((x) => ( .map((x) => (
<UserDisplay key={x.id} {...x} /> <UserDisplay key={x.id} {...x} />
))} ))}
@@ -553,7 +560,10 @@ export default function AdminDashboard({user}: Props) {
loggedInUser={user} loggedInUser={user}
onClose={(shouldReload) => { onClose={(shouldReload) => {
setSelectedUser(undefined); setSelectedUser(undefined);
if (shouldReload) reload(); if (shouldReload && selectedUser!.type === "student") reloadStudents();
if (shouldReload && selectedUser!.type === "teacher") reloadTeachers();
if (shouldReload && selectedUser!.type === "corporate") reloadCorporates();
if (shouldReload && selectedUser!.type === "agent") reloadAgents();
}} }}
onViewStudents={ onViewStudents={
selectedUser.type === "corporate" || selectedUser.type === "teacher" selectedUser.type === "corporate" || selectedUser.type === "teacher"