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

Created a dashboard for the Agent

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-11-21 18:01:45 +00:00
parent cd81547022
commit 6e420a8a82
6 changed files with 101 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -44,6 +44,7 @@
"random-words": "^2.0.0", "random-words": "^2.0.0",
"react": "18.2.0", "react": "18.2.0",
"react-chartjs-2": "^5.2.0", "react-chartjs-2": "^5.2.0",
"react-currency-input-field": "^3.6.12",
"react-datepicker": "^4.18.0", "react-datepicker": "^4.18.0",
"react-dom": "18.2.0", "react-dom": "18.2.0",
"react-firebase-hooks": "^5.1.1", "react-firebase-hooks": "^5.1.1",

107
src/components/UserCard.tsx
View File

@@ -6,7 +6,7 @@ import axios from "axios";
import clsx from "clsx"; import clsx from "clsx";
import moment from "moment"; import moment from "moment";
import {Divider} from "primereact/divider"; import {Divider} from "primereact/divider";
import {useState} from "react"; import {useEffect, useState} from "react";
import ReactDatePicker from "react-datepicker"; import ReactDatePicker from "react-datepicker";
import {BsFileEarmarkText, BsPencil, BsStar} from "react-icons/bs"; import {BsFileEarmarkText, BsPencil, BsStar} from "react-icons/bs";
import {toast} from "react-toastify"; import {toast} from "react-toastify";
@@ -41,15 +41,46 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers}:
const [referralAgent, setReferralAgent] = useState(user.corporateInformation?.referralAgent); const [referralAgent, setReferralAgent] = useState(user.corporateInformation?.referralAgent);
const [type, setType] = useState(user.type); const [type, setType] = useState(user.type);
const [status, setStatus] = useState(user.status); const [status, setStatus] = useState(user.status);
const [companyName, setCompanyName] = useState(user.corporateInformation?.companyInformation.name);
const [userAmount, setUserAmount] = useState(user.corporateInformation?.companyInformation.userAmount);
const [referralAgentLabel, setReferralAgentLabel] = useState<string>();
const {stats} = useStats(user.id); const {stats} = useStats(user.id);
const {users} = useUsers(); const {users} = useUsers();
useEffect(() => {
if (users && users.length > 0) {
if (!referralAgent) {
setReferralAgentLabel("No manager");
return;
}
const agent = users.find((x) => x.id === referralAgent);
setReferralAgentLabel(`${agent?.name} - ${agent?.email}`);
}
}, [users, referralAgent]);
const updateUser = () => { const updateUser = () => {
if (!confirm(`Are you sure you want to update ${user.name}'s account?`)) return; if (!confirm(`Are you sure you want to update ${user.name}'s account?`)) return;
// TODO: Add the corporate information when it is changed as well
axios axios
.post<{user?: User; ok?: boolean}>(`/api/users/update?id=${user.id}`, {...user, subscriptionExpirationDate: expiryDate, type, status}) .post<{user?: User; ok?: boolean}>(`/api/users/update?id=${user.id}`, {
...user,
subscriptionExpirationDate: expiryDate,
type,
status,
corporateInformation:
type === "corporate"
? {
referralAgent,
companyInformation: {
companyName,
userAmount,
},
}
: undefined,
})
.then(() => { .then(() => {
toast.success("User updated successfully!"); toast.success("User updated successfully!");
onClose(true); onClose(true);
@@ -269,54 +300,60 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers}:
{user.type === "corporate" && ( {user.type === "corporate" && (
<> <>
<Divider className="w-full" /> <Divider className="w-full" />
<div className="flex flex-col md:flex-row gap-8 w-full"> <div className="grid grid-cols-2 gap-8 w-full">
<Input <Input
label="Company Name" label="Company Name"
type="text" type="text"
name="companyName" name="companyName"
onChange={() => null} onChange={setCompanyName}
placeholder="Enter company name" placeholder="Enter company name"
defaultValue={user.corporateInformation?.companyInformation.name} defaultValue={companyName}
/> />
<Input <Input
label="Amount of Users" label="Amount of Users"
type="number" type="number"
name="userAmount" name="userAmount"
onChange={() => null} onChange={(e) => setUserAmount(e ? parseInt(e) : undefined)}
placeholder="Enter amount of users" placeholder="Enter amount of users"
defaultValue={user.corporateInformation?.companyInformation.userAmount} defaultValue={userAmount}
/> />
<div className="flex flex-col gap-3 w-full"> <div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">Country Agent</label> <label className="font-normal text-base text-mti-gray-dim">Country Manager</label>
<Select {referralAgentLabel && (
className="px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed bg-white rounded-full border border-mti-gray-platinum focus:outline-none" <Select
options={[ className="px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
{value: "", label: "No referral"}, options={[
...users.filter((u) => u.type === "agent").map((x) => ({value: x.id, label: `${x.name} - ${x.email}`})), {value: "", label: "No referral"},
]} ...users.filter((u) => u.type === "agent").map((x) => ({value: x.id, label: `${x.name} - ${x.email}`})),
defaultValue={{ ]}
value: referralAgent, defaultValue={{
label: referralAgent ? users.find((u) => u.id === referralAgent)?.name || "" : "No agent", value: referralAgent,
}} label: referralAgentLabel,
onChange={(value) => setReferralAgent(value?.value)} }}
styles={{ onChange={(value) => setReferralAgent(value?.value)}
control: (styles) => ({ styles={{
...styles, control: (styles) => ({
paddingLeft: "4px", ...styles,
border: "none", paddingLeft: "4px",
outline: "none", border: "none",
":focus": {
outline: "none", outline: "none",
}, ":focus": {
}), outline: "none",
option: (styles, state) => ({ },
...styles, }),
backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white", option: (styles, state) => ({
color: state.isFocused ? "black" : styles.color, ...styles,
}), backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
}} color: state.isFocused ? "black" : styles.color,
/> }),
}}
/>
)}
</div>
<div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">Pricing</label>
</div> </div>
</div> </div>
</> </>

141
src/dashboards/Agent.tsx
View File

@@ -47,10 +47,9 @@ export default function AgentDashboard({user}: Props) {
setShowModal(!!selectedUser && page === ""); setShowModal(!!selectedUser && page === "");
}, [selectedUser, page]); }, [selectedUser, page]);
const studentFilter = (user: User) => user.type === "student" && groups.flatMap((g) => g.participants).includes(user.id); const corporateFilter = (user: User) => user.type === "corporate";
const teacherFilter = (user: User) => user.type === "teacher" && groups.flatMap((g) => g.participants).includes(user.id); const referredCorporateFilter = (x: User) =>
x.type === "corporate" && !!x.corporateInformation && x.corporateInformation.referralAgent === user.id;
const getStatsByStudent = (user: User) => stats.filter((s) => s.user === user.id);
const UserDisplay = (displayUser: User) => ( const UserDisplay = (displayUser: User) => (
<div <div
@@ -64,15 +63,8 @@ export default function AgentDashboard({user}: Props) {
</div> </div>
); );
const StudentsList = () => { const ReferredCorporateList = () => {
const filter = (x: User) => const filter = (x: User) => x.type === "corporate" && !!x.corporateInformation && x.corporateInformation.referralAgent === user.id;
x.type === "student" &&
(!!selectedUser
? groups
.filter((g) => g.admin === selectedUser.id)
.flatMap((g) => g.participants)
.includes(x.id) || false
: groups.flatMap((g) => g.participants).includes(x.id));
return ( return (
<> <>
@@ -83,7 +75,7 @@ export default function AgentDashboard({user}: Props) {
<BsArrowLeft className="text-xl" /> <BsArrowLeft className="text-xl" />
<span>Back</span> <span>Back</span>
</div> </div>
<h2 className="text-2xl font-semibold">Students ({users.filter(filter).length})</h2> <h2 className="text-2xl font-semibold">Referred Corporate ({users.filter(filter).length})</h2>
</div> </div>
<UserList user={user} filter={filter} /> <UserList user={user} filter={filter} />
@@ -91,15 +83,8 @@ export default function AgentDashboard({user}: Props) {
); );
}; };
const TeachersList = () => { const CorporateList = () => {
const filter = (x: User) => const filter = (x: User) => x.type === "corporate";
x.type === "teacher" &&
(!!selectedUser
? groups
.filter((g) => g.admin === selectedUser.id)
.flatMap((g) => g.participants)
.includes(x.id) || false
: groups.flatMap((g) => g.participants).includes(x.id));
return ( return (
<> <>
@@ -110,7 +95,7 @@ export default function AgentDashboard({user}: Props) {
<BsArrowLeft className="text-xl" /> <BsArrowLeft className="text-xl" />
<span>Back</span> <span>Back</span>
</div> </div>
<h2 className="text-2xl font-semibold">Teachers ({users.filter(filter).length})</h2> <h2 className="text-2xl font-semibold">Referred Corporate ({users.filter(filter).length})</h2>
</div> </div>
<UserList user={user} filter={filter} /> <UserList user={user} filter={filter} />
@@ -118,85 +103,31 @@ export default function AgentDashboard({user}: Props) {
); );
}; };
const GroupsList = () => {
const filter = (x: Group) => x.admin === user.id || x.participants.includes(user.id);
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">Groups ({groups.filter(filter).length})</h2>
</div>
<GroupList user={user} />
</>
);
};
const averageLevelCalculator = (studentStats: Stat[]) => {
const formattedStats = studentStats
.map((s) => ({focus: users.find((u) => u.id === s.user)?.focus, score: s.score, module: s.module}))
.filter((f) => !!f.focus);
const bandScores = formattedStats.map((s) => ({
module: s.module,
level: calculateBandScore(s.score.correct, s.score.total, s.module, s.focus!),
}));
const levels: {[key in Module]: number} = {reading: 0, listening: 0, writing: 0, speaking: 0, level: 0};
bandScores.forEach((b) => (levels[b.module] += b.level));
return calculateAverageLevel(levels);
};
const DefaultDashboard = () => ( const DefaultDashboard = () => (
<> <>
<section className="flex flex-wrap gap-2 items-center -lg:justify-center lg:justify-between text-center"> <section className="flex flex-wrap gap-2 items-center -lg:justify-center lg:gap-4 text-center">
<IconCard <IconCard
onClick={() => setPage("students")} onClick={() => setPage("referredCorporate")}
Icon={BsPersonFill} Icon={BsPersonFill}
label="Students" label="Referred Corporate"
value={users.filter(studentFilter).length} value={users.filter(referredCorporateFilter).length}
color="purple" color="purple"
/> />
<IconCard <IconCard
onClick={() => setPage("teachers")} onClick={() => setPage("corporate")}
Icon={BsPersonLinesFill} Icon={BsPersonFill}
label="Teachers" label="Corporate"
value={users.filter(teacherFilter).length} value={users.filter(corporateFilter).length}
color="purple" color="purple"
/> />
<IconCard
Icon={BsClipboard2Data}
label="Exams Performed"
value={stats.filter((s) => groups.flatMap((g) => g.participants).includes(s.user)).length}
color="purple"
/>
<IconCard
Icon={BsPaperclip}
label="Average Level"
value={averageLevelCalculator(stats.filter((s) => groups.flatMap((g) => g.participants).includes(s.user))).toFixed(1)}
color="purple"
/>
<IconCard onClick={() => setPage("groups")} Icon={BsPersonAdd} label="Groups" value={groups.length} color="purple" />
<IconCard
Icon={BsClock}
label="Expiration Date"
value={user.subscriptionExpirationDate ? moment(user.subscriptionExpirationDate).format("DD/MM/yyyy") : "Unlimited"}
color="rose"
/>
</section> </section>
<section className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full justify-between"> <section className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full justify-between">
<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 Referred 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 {users
.filter(studentFilter) .filter(referredCorporateFilter)
.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} />
@@ -204,41 +135,16 @@ export default function AgentDashboard({user}: Props) {
</div> </div>
</div> </div>
<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 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 {users
.filter(teacherFilter) .filter(corporateFilter)
.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} />
))} ))}
</div> </div>
</div> </div>
<div className="bg-white shadow flex flex-col rounded-xl w-full">
<span className="p-4">Highest level students</span>
<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
{users
.filter(studentFilter)
.sort((a, b) => calculateAverageLevel(b.levels) - calculateAverageLevel(a.levels))
.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">Highest exam count students</span>
<div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
{users
.filter(studentFilter)
.sort(
(a, b) =>
Object.keys(groupByExam(getStatsByStudent(b))).length - Object.keys(groupByExam(getStatsByStudent(a))).length,
)
.map((x) => (
<UserDisplay key={x.id} {...x} />
))}
</div>
</div>
</section> </section>
</> </>
); );
@@ -265,9 +171,8 @@ export default function AgentDashboard({user}: Props) {
)} )}
</> </>
</Modal> </Modal>
{page === "students" && <StudentsList />} {page === "referredCorporate" && <ReferredCorporateList />}
{page === "teachers" && <TeachersList />} {page === "corporate" && <CorporateList />}
{page === "groups" && <GroupsList />}
{page === "" && <DefaultDashboard />} {page === "" && <DefaultDashboard />}
</> </>
); );

2
src/interfaces/user.ts
View File

@@ -26,9 +26,7 @@ export interface CorporateInformation {
value: number; value: number;
currency: string; currency: string;
}; };
monthlyDuration: number;
referralAgent?: string; referralAgent?: string;
allowedUserAmount?: number;
} }
export interface CompanyInformation { export interface CompanyInformation {

2
src/pages/(register)/RegisterCorporate.tsx
View File

@@ -68,8 +68,6 @@ export default function RegisterCorporate({isLoading, setIsLoading, mutateUser,
userAmount: companyUsers, userAmount: companyUsers,
}, },
referralAgent, referralAgent,
allowedUserAmount: companyUsers,
monthlyDuration: subscriptionDuration,
}, },
}) })
.then((response) => { .then((response) => {

5
yarn.lock
View File

@@ -4431,6 +4431,11 @@ react-chartjs-2@^5.2.0:
resolved "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.2.0.tgz" resolved "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.2.0.tgz"
integrity sha512-98iN5aguJyVSxp5U3CblRLH67J8gkfyGNbiK3c+l1QI/G4irHMPQw44aEPmjVag+YKTyQ260NcF82GTQ3bdscA== integrity sha512-98iN5aguJyVSxp5U3CblRLH67J8gkfyGNbiK3c+l1QI/G4irHMPQw44aEPmjVag+YKTyQ260NcF82GTQ3bdscA==
react-currency-input-field@^3.6.12:
version "3.6.12"
resolved "https://registry.yarnpkg.com/react-currency-input-field/-/react-currency-input-field-3.6.12.tgz#6c59bec50b9a769459c971f94f9a67b7bf9046f7"
integrity sha512-92mVEo1u7tF8Lz5JeaEHpQY/p6ulmnfSk9r3dVMyykQNLoScvgQ7GczvV3uGDr81xkTF3czj7CTJ9Ekqq4+pIA==
react-datepicker@^4.18.0: react-datepicker@^4.18.0:
version "4.18.0" version "4.18.0"
resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-4.18.0.tgz#d66301acc47833d31fa6f46f98781b084106da0e" resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-4.18.0.tgz#d66301acc47833d31fa6f46f98781b084106da0e"