343 lines
10 KiB
TypeScript
343 lines
10 KiB
TypeScript
import React from "react";
|
|
import { CorporateUser, User } from "@/interfaces/user";
|
|
import { 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 { Assignment, AssignmentWithCorporateId } from "@/interfaces/results";
|
|
import {
|
|
CellContext,
|
|
createColumnHelper,
|
|
flexRender,
|
|
getCoreRowModel,
|
|
HeaderGroup,
|
|
Table,
|
|
useReactTable,
|
|
} from "@tanstack/react-table";
|
|
import Checkbox from "@/components/Low/Checkbox";
|
|
|
|
interface Props {
|
|
corporateUsers: User[];
|
|
users: User[];
|
|
}
|
|
|
|
interface TableData {
|
|
user: string;
|
|
correct: number;
|
|
corporate: string;
|
|
submitted: boolean;
|
|
date: moment.Moment;
|
|
assignment: string;
|
|
corporateId: string;
|
|
}
|
|
|
|
interface UserCount {
|
|
userCount: number;
|
|
maxUserCount: number;
|
|
}
|
|
|
|
const MasterStatistical = (props: Props) => {
|
|
const { users, corporateUsers } = props;
|
|
|
|
const corporateRelevantUsers = React.useMemo(
|
|
() => corporateUsers.filter((x) => x.type !== "student") as CorporateUser[],
|
|
[corporateUsers]
|
|
);
|
|
|
|
const corporates = React.useMemo(
|
|
() => corporateRelevantUsers.map((x) => x.id),
|
|
[corporateRelevantUsers]
|
|
);
|
|
|
|
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: [...corporates, "tYU0HTiJdjMsS8SB7XJsUdMMP892"],
|
|
corporates: selectedCorporates,
|
|
startDate,
|
|
endDate,
|
|
});
|
|
|
|
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 userName = users.find((u) => u.id === assignee)?.name || "";
|
|
const corporate = users.find((u) => u.id === a.assigner)?.name || "";
|
|
const commonData = {
|
|
user: userName,
|
|
corporateId: a.corporateId,
|
|
corporate,
|
|
assignment: a.name,
|
|
};
|
|
if (userStats.length === 0) {
|
|
return {
|
|
...commonData,
|
|
correct: 0,
|
|
submitted: false,
|
|
// date: moment(),
|
|
};
|
|
}
|
|
|
|
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]
|
|
);
|
|
|
|
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 corporateScores = corporates.reduce(
|
|
(accm, id) => ({
|
|
...accm,
|
|
[id]: getCorporateScores(id),
|
|
}),
|
|
{}
|
|
) as Record<string, UserCount>;
|
|
|
|
const consolidateScore = Object.values(corporateScores).reduce(
|
|
(acc: UserCount, { userCount, maxUserCount }: UserCount) => ({
|
|
userCount: acc.userCount + userCount,
|
|
maxUserCount: acc.maxUserCount + maxUserCount,
|
|
}),
|
|
{ userCount: 0, maxUserCount: 0 }
|
|
);
|
|
|
|
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("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: "Correct",
|
|
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.format("DD/MM/YYYY")}</span>;
|
|
}
|
|
|
|
return <span>{""}</span>;
|
|
},
|
|
}),
|
|
];
|
|
|
|
const table = useReactTable({
|
|
data: tableResults,
|
|
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 consolidateResults = getStudentsConsolidateScore();
|
|
return (
|
|
<>
|
|
<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}
|
|
/>
|
|
{corporateRelevantUsers.map((group) => {
|
|
const isSelected = selectedCorporates.includes(group.id);
|
|
return (
|
|
<IconCard
|
|
key={group.id}
|
|
Icon={BsBank}
|
|
label={group.corporateInformation?.companyInformation?.name}
|
|
value={getConsolidateScoreStr(corporateScores[group.id])}
|
|
color="purple"
|
|
onClick={() => {
|
|
if (isSelected) {
|
|
setSelectedCorporates(
|
|
selectedCorporates.filter((x) => x !== group.id)
|
|
);
|
|
return;
|
|
}
|
|
setSelectedCorporates([...selectedCorporates, group.id]);
|
|
}}
|
|
isSelected={isSelected}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
<div className="flex flex-col gap-3 w-full">
|
|
<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>
|
|
<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;
|