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

- Added more panels and lists;

Browse Source 
- Added the ability to view more information on the user;
- Added the ability to update the user's expiry date
This commit is contained in:
Tiago Ribeiro
2023-10-26 22:41:24 +01:00
parent 8515eaf4ee
commit bdb0ffde95
7 changed files with 563 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

277
src/dashboards/Owner.tsx
View File

@@ -1,64 +1,149 @@
/* eslint-disable @next/next/no-img-element */
import ProgressBar from "@/components/Low/ProgressBar";
import ProfileSummary from "@/components/ProfileSummary";
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 {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";
import {useState} from "react";
import {BsArrowLeft, BsGlobeCentralSouthAsia, BsPerson, BsPersonFill, BsPersonFillGear, BsPersonGear, BsPersonLinesFill} from "react-icons/bs";
import UserCard from "@/components/UserCard";
interface Props {
user: User;
}
export default function OwnerDashboard({user}: Props) {
const {stats} = useStats(user.id);
const {users} = useUsers();
const [page, setPage] = useState("");
const [selectedUser, setSelectedUser] = useState<User>();
return (
const {stats} = useStats(user.id);
const {users, reload} = useUsers();
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 = () => (
<>
<div className="w-full flex flex-wrap gap-4 items-center justify-between">
<div className="bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center w-48 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300">
<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</h2>
</div>
<UserList user={user} filter={(x) => x.type === "student"} />
</>
);
const TeachersList = () => (
<>
<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</h2>
</div>
<UserList user={user} filter={(x) => x.type === "teacher"} />
</>
);
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</h2>
</div>
<UserList user={user} filter={(x) => x.type === "admin"} />
</>
);
const InactiveStudentsList = () => (
<>
<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</h2>
</div>
<UserList user={user} filter={(x) => x.type === "student" && (x.isDisabled || moment().isAfter(x.subscriptionExpirationDate))} />
</>
);
const InactiveCorporateList = () => (
<>
<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</h2>
</div>
<UserList user={user} filter={(x) => x.type === "admin" && (x.isDisabled || moment().isAfter(x.subscriptionExpirationDate))} />
</>
);
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 className="bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center w-48 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300">
<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 className="bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center w-48 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300">
<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-48 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300">
<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>
@@ -67,63 +152,135 @@ export default function OwnerDashboard({user}: Props) {
</span>
</span>
</div>
<div className="bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center w-48 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300">
<BsPerson className="text-mti-purple-light text-6xl" />
<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-purple">
<span className="font-semibold text-mti-rose">
{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-48 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300">
<BsPersonGear className="text-mti-purple-light text-6xl" />
<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-purple">
<span className="font-semibold text-mti-rose">
{users.filter((x) => x.type === "admin" && (x.isDisabled || moment().isAfter(x.subscriptionExpirationDate))).length}
</span>
</span>
</div>
</div>
<div className="flex gap-4 w-full">
<div className="bg-white shadow p-4 flex flex-col gap-4 rounded-xl w-96">
<span>Latest students</span>
<div className="flex flex-col gap-4 items-start">
</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"))
.slice(0, (users.filter((x) => x.type === "student").length - 1) / 2)
.map((x) => (
<div className="flex gap-4 items-center" key={x.id}>
<img src={x.profilePicture} alt={x.name} className="rounded-full w-10 h-10" />
<div className="flex flex-col gap-1 items-start">
<span>{x.name}</span>
<span className="text-sm opacity-75">{x.email}</span>
</div>
</div>
<UserDisplay key={x.id} {...x} />
))}
</div>
</div>
<div className="bg-white shadow p-4 flex flex-col gap-4 rounded-xl w-96">
<span>Latest corporate</span>
<div className="flex flex-col gap-4 items-start">
<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"))
.slice(0, (users.filter((x) => x.type === "admin").length - 1) / 2)
.map((x) => (
<div className="flex gap-4 items-center" key={x.id}>
<img src={x.profilePicture} alt={x.name} className="rounded-full w-10 h-10" />
<div className="flex flex-col gap-1 items-start">
<span>{x.name}</span>
<span className="text-sm opacity-75">{x.email}</span>
</div>
</div>
<UserDisplay key={x.id} {...x} />
))}
</div>
</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={!!selectedUser} onClose={() => setSelectedUser(undefined)}>
<>
{selectedUser && (
<div className="w-full flex flex-col gap-8">
<UserCard
onClose={(shouldReload) => {
setSelectedUser(undefined);
if (shouldReload) reload();
}}
{...selectedUser}
/>
</div>
)}
</>
</Modal>
{page === "students" && <StudentsList />}
{page === "teachers" && <TeachersList />}
{page === "corporate" && <CorporateList />}
{page === "inactiveStudents" && <InactiveStudentsList />}
{page === "inactiveCorporate" && <InactiveCorporateList />}
{page === "" && <DefaultDashboard />}
</>
);
}