406 lines
12 KiB
TypeScript
406 lines
12 KiB
TypeScript
import React, {useEffect, useMemo, useState} from "react";
|
|
import {CorporateUser, User} from "@/interfaces/user";
|
|
import {BsFileExcel, BsBank, BsPersonFill} from "react-icons/bs";
|
|
import IconCard from "../IconCard";
|
|
|
|
import useAssignmentsCorporates from "@/hooks/useAssignmentCorporates";
|
|
import ReactDatePicker from "react-datepicker";
|
|
|
|
import moment from "moment";
|
|
import {AssignmentWithCorporateId} from "@/interfaces/results";
|
|
import {flexRender, createColumnHelper, getCoreRowModel, useReactTable} from "@tanstack/react-table";
|
|
import Checkbox from "@/components/Low/Checkbox";
|
|
import {useListSearch} from "@/hooks/useListSearch";
|
|
import axios from "axios";
|
|
import {toast} from "react-toastify";
|
|
import Button from "@/components/Low/Button";
|
|
import {getUserName} from "@/utils/users";
|
|
|
|
interface GroupedCorporateUsers {
|
|
// list of user Ids
|
|
[key: string]: string[];
|
|
}
|
|
|
|
interface Props {
|
|
corporateUsers: GroupedCorporateUsers;
|
|
users: User[];
|
|
displaySelection?: boolean;
|
|
}
|
|
|
|
interface TableData {
|
|
user: string;
|
|
email: string;
|
|
correct: number;
|
|
corporate: string;
|
|
submitted: boolean;
|
|
date: moment.Moment;
|
|
assignment: string;
|
|
corporateId: string;
|
|
}
|
|
|
|
interface UserCount {
|
|
userCount: number;
|
|
maxUserCount: number;
|
|
}
|
|
|
|
const searchFilters = [["email"], ["user"], ["userId"], ["exams"], ["assignment"]];
|
|
|
|
const SIZE = 16;
|
|
|
|
const MasterStatistical = (props: Props) => {
|
|
const {users, corporateUsers, displaySelection = true} = props;
|
|
const [page, setPage] = useState(0);
|
|
|
|
// const corporateRelevantUsers = React.useMemo(
|
|
// () => corporateUsers.filter((x) => x.type !== "student") as CorporateUser[],
|
|
// [corporateUsers]
|
|
// );
|
|
|
|
const corporates = React.useMemo(() => Object.values(corporateUsers).flat(), [corporateUsers]);
|
|
|
|
const [selectedCorporates, setSelectedCorporates] = React.useState<string[]>(corporates);
|
|
const [startDate, setStartDate] = React.useState<Date | null>(moment("01/01/2023").toDate());
|
|
const [endDate, setEndDate] = React.useState<Date | null>(moment().endOf("year").toDate());
|
|
|
|
const {assignments} = useAssignmentsCorporates({
|
|
corporates: selectedCorporates,
|
|
startDate,
|
|
endDate,
|
|
});
|
|
|
|
const [downloading, setDownloading] = React.useState<boolean>(false);
|
|
|
|
const tableResults = React.useMemo(
|
|
() =>
|
|
assignments.reduce((accmA: TableData[], a: AssignmentWithCorporateId) => {
|
|
const userResults = a.assignees.map((assignee) => {
|
|
const userStats = a.results.find((r) => r.user === assignee)?.stats || [];
|
|
const userData = users.find((u) => u.id === assignee);
|
|
const corporate = getUserName(users.find((u) => u.id === a.assigner));
|
|
const commonData = {
|
|
user: userData?.name || "N/A",
|
|
email: userData?.email || "N/A",
|
|
userId: assignee,
|
|
corporateId: a.corporateId,
|
|
exams: a.exams.map((x) => x.id).join(", "),
|
|
corporate,
|
|
assignment: a.name,
|
|
};
|
|
if (userStats.length === 0) {
|
|
return {
|
|
...commonData,
|
|
correct: 0,
|
|
submitted: false,
|
|
date: null,
|
|
};
|
|
}
|
|
|
|
return {
|
|
...commonData,
|
|
correct: userStats.reduce((n, e) => n + e.score.correct, 0),
|
|
submitted: true,
|
|
date: moment.max(userStats.map((e) => moment(e.date))),
|
|
};
|
|
}) as TableData[];
|
|
|
|
return [...accmA, ...userResults];
|
|
}, []),
|
|
[assignments, users],
|
|
);
|
|
|
|
useEffect(() => console.log(assignments), [assignments]);
|
|
|
|
const getCorporateScores = (corporateId: string): UserCount => {
|
|
const corporateAssignmentsUsers = assignments.filter((a) => a.corporateId === corporateId).reduce((acc, a) => acc + a.assignees.length, 0);
|
|
|
|
const corporateResults = tableResults.filter((r) => r.corporateId === corporateId).length;
|
|
|
|
return {
|
|
maxUserCount: corporateAssignmentsUsers,
|
|
userCount: corporateResults,
|
|
};
|
|
};
|
|
|
|
const getCorporatesScoresHash = (data: string[]) =>
|
|
data.reduce(
|
|
(accm, id) => ({
|
|
...accm,
|
|
[id]: getCorporateScores(id),
|
|
}),
|
|
{},
|
|
) as Record<string, UserCount>;
|
|
|
|
const getConsolidateScore = (data: Record<string, UserCount>) =>
|
|
Object.values(data).reduce(
|
|
(acc: UserCount, {userCount, maxUserCount}: UserCount) => ({
|
|
userCount: acc.userCount + userCount,
|
|
maxUserCount: acc.maxUserCount + maxUserCount,
|
|
}),
|
|
{userCount: 0, maxUserCount: 0},
|
|
);
|
|
|
|
const corporateScores = getCorporatesScoresHash(corporates);
|
|
const consolidateScore = getConsolidateScore(corporateScores);
|
|
|
|
const getConsolidateScoreStr = (data: UserCount) => `${data.userCount}/${data.maxUserCount}`;
|
|
|
|
const columnHelper = createColumnHelper<TableData>();
|
|
|
|
const defaultColumns = [
|
|
columnHelper.accessor("user", {
|
|
header: "User",
|
|
id: "user",
|
|
cell: (info) => {
|
|
return <span>{info.getValue()}</span>;
|
|
},
|
|
}),
|
|
columnHelper.accessor("email", {
|
|
header: "Email",
|
|
id: "email",
|
|
cell: (info) => {
|
|
return <span>{info.getValue()}</span>;
|
|
},
|
|
}),
|
|
...(displaySelection
|
|
? [
|
|
columnHelper.accessor("corporate", {
|
|
header: "Corporate",
|
|
id: "corporate",
|
|
cell: (info) => {
|
|
return <span>{info.getValue()}</span>;
|
|
},
|
|
}),
|
|
]
|
|
: []),
|
|
columnHelper.accessor("assignment", {
|
|
header: "Assignment",
|
|
id: "assignment",
|
|
cell: (info) => {
|
|
return <span>{info.getValue()}</span>;
|
|
},
|
|
}),
|
|
columnHelper.accessor("submitted", {
|
|
header: "Submitted",
|
|
id: "submitted",
|
|
cell: (info) => {
|
|
return (
|
|
<Checkbox isChecked={info.getValue()} disabled onChange={() => {}}>
|
|
<span></span>
|
|
</Checkbox>
|
|
);
|
|
},
|
|
}),
|
|
columnHelper.accessor("correct", {
|
|
header: "Score",
|
|
id: "correct",
|
|
cell: (info) => {
|
|
return <span>{info.getValue()}</span>;
|
|
},
|
|
}),
|
|
columnHelper.accessor("date", {
|
|
header: "Date",
|
|
id: "date",
|
|
cell: (info) => {
|
|
const date = info.getValue();
|
|
if (date) {
|
|
return <span>{!!date ? date.format("DD/MM/YYYY") : "N/A"}</span>;
|
|
}
|
|
|
|
return <span>{""}</span>;
|
|
},
|
|
}),
|
|
];
|
|
|
|
const {rows: filteredRows, renderSearch, text: searchText} = useListSearch(searchFilters, tableResults);
|
|
|
|
useEffect(() => setPage(0), [searchText]);
|
|
const rows = useMemo(
|
|
() => filteredRows.slice(page * SIZE, (page + 1) * SIZE > filteredRows.length ? filteredRows.length : (page + 1) * SIZE),
|
|
[filteredRows, page],
|
|
);
|
|
|
|
const table = useReactTable({
|
|
data: rows,
|
|
columns: defaultColumns,
|
|
getCoreRowModel: getCoreRowModel(),
|
|
});
|
|
|
|
const areAllSelected = selectedCorporates.length === corporates.length;
|
|
|
|
const getStudentsConsolidateScore = () => {
|
|
if (tableResults.length === 0) {
|
|
return {highest: null, lowest: null};
|
|
}
|
|
|
|
// Find the student with the highest and lowest score
|
|
return tableResults.reduce(
|
|
(acc, curr) => {
|
|
if (curr.correct > acc.highest.correct) {
|
|
acc.highest = curr;
|
|
}
|
|
if (curr.correct < acc.lowest.correct) {
|
|
acc.lowest = curr;
|
|
}
|
|
return acc;
|
|
},
|
|
{highest: tableResults[0], lowest: tableResults[0]},
|
|
);
|
|
};
|
|
|
|
const triggerDownload = async () => {
|
|
try {
|
|
setDownloading(true);
|
|
const res = await axios.post("/api/assignments/statistical/excel", {
|
|
ids: selectedCorporates,
|
|
...(startDate ? {startDate: startDate.toISOString()} : {}),
|
|
...(endDate ? {endDate: endDate.toISOString()} : {}),
|
|
searchText,
|
|
});
|
|
toast.success("Report ready!");
|
|
const link = document.createElement("a");
|
|
link.href = res.data;
|
|
// download should have worked but there are some CORS issues
|
|
// https://firebase.google.com/docs/storage/web/download-files#cors_configuration
|
|
// link.download="report.pdf";
|
|
link.target = "_blank";
|
|
link.rel = "noreferrer";
|
|
link.click();
|
|
setDownloading(false);
|
|
} catch (err) {
|
|
toast.error("Failed to display the report!");
|
|
console.error(err);
|
|
setDownloading(false);
|
|
}
|
|
};
|
|
|
|
const consolidateResults = getStudentsConsolidateScore();
|
|
return (
|
|
<>
|
|
{displaySelection && (
|
|
<div className="flex flex-wrap gap-2 items-center text-center">
|
|
<IconCard
|
|
Icon={BsBank}
|
|
label="Consolidate"
|
|
value={getConsolidateScoreStr(consolidateScore)}
|
|
color="purple"
|
|
onClick={() => {
|
|
if (areAllSelected) {
|
|
setSelectedCorporates([]);
|
|
return;
|
|
}
|
|
setSelectedCorporates(corporates);
|
|
}}
|
|
isSelected={areAllSelected}
|
|
/>
|
|
{Object.keys(corporateUsers).map((corporateName) => {
|
|
const group = corporateUsers[corporateName];
|
|
const isSelected = group.every((id) => selectedCorporates.includes(id));
|
|
|
|
const valueHash = getCorporatesScoresHash(group);
|
|
const value = getConsolidateScoreStr(getConsolidateScore(valueHash));
|
|
return (
|
|
<IconCard
|
|
key={corporateName}
|
|
Icon={BsBank}
|
|
label={corporateName}
|
|
value={value}
|
|
color="purple"
|
|
onClick={() => {
|
|
if (isSelected) {
|
|
setSelectedCorporates((prev) => prev.filter((x) => !group.includes(x)));
|
|
return;
|
|
}
|
|
setSelectedCorporates((prev) => [...new Set([...prev, ...group])]);
|
|
}}
|
|
isSelected={isSelected}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
<div className="flex gap-3 w-full">
|
|
<div className="flex flex-col gap-3">
|
|
<label className="font-normal text-base text-mti-gray-dim">Date</label>
|
|
<ReactDatePicker
|
|
dateFormat="dd/MM/yyyy"
|
|
className="px-4 py-6 w-52 text-sm text-center font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed rounded-full border border-mti-gray-platinum focus:outline-none"
|
|
selected={startDate}
|
|
startDate={startDate}
|
|
endDate={endDate}
|
|
selectsRange
|
|
showMonthDropdown
|
|
onChange={([initialDate, finalDate]: [Date, Date]) => {
|
|
setStartDate(initialDate ?? moment("01/01/2023").toDate());
|
|
if (finalDate) {
|
|
// basicly selecting a final day works as if I'm selecting the first
|
|
// minute of that day. this way it covers the whole day
|
|
setEndDate(moment(finalDate).endOf("day").toDate());
|
|
return;
|
|
}
|
|
setEndDate(null);
|
|
}}
|
|
/>
|
|
</div>
|
|
{renderSearch()}
|
|
<div className="flex flex-col gap-3 justify-end">
|
|
<Button className="max-w-[200px] h-[70px]" variant="outline" onClick={triggerDownload}>
|
|
Download
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-full h-full flex flex-col gap-4">
|
|
<div className="w-full flex gap-2 justify-between">
|
|
<Button className="w-full max-w-[200px]" disabled={page === 0} onClick={() => setPage((prev) => prev - 1)}>
|
|
Previous Page
|
|
</Button>
|
|
<div className="flex items-center gap-4 w-fit">
|
|
<span className="opacity-80">
|
|
{page * SIZE + 1} - {(page + 1) * SIZE > filteredRows.length ? filteredRows.length : (page + 1) * SIZE} /{" "}
|
|
{filteredRows.length}
|
|
</span>
|
|
<Button className="w-[200px]" disabled={(page + 1) * SIZE >= rows.length} onClick={() => setPage((prev) => prev + 1)}>
|
|
Next Page
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<table className="rounded-xl h-full bg-mti-purple-ultralight/40 w-full">
|
|
<thead>
|
|
{table.getHeaderGroups().map((headerGroup) => (
|
|
<tr key={headerGroup.id}>
|
|
{headerGroup.headers.map((header) => (
|
|
<th className="p-4 text-left" key={header.id}>
|
|
{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</thead>
|
|
<tbody className="px-2">
|
|
{table.getRowModel().rows.map((row) => (
|
|
<tr className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2" key={row.id}>
|
|
{row.getVisibleCells().map((cell) => (
|
|
<td className="px-4 py-2" key={cell.id}>
|
|
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
|
</td>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2 items-center text-center">
|
|
{consolidateResults.highest && (
|
|
<IconCard onClick={() => {}} Icon={BsPersonFill} label={`Highest result: ${consolidateResults.highest.user}`} color="purple" />
|
|
)}
|
|
{consolidateResults.lowest && (
|
|
<IconCard onClick={() => {}} Icon={BsPersonFill} label={`Lowest result: ${consolidateResults.lowest.user}`} color="purple" />
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default MasterStatistical;
|