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

Continued with the transformation of the Entities

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-10-08 10:44:57 +01:00
parent 1ef4efcacf
commit c43ab9a911
13 changed files with 260 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
src/pages/(admin)/Lists/StudentPerformanceList.tsx Normal file
View File

@@ -0,0 +1,111 @@
/* eslint-disable @next/next/no-img-element */
import {Stat, StudentUser, User} from "@/interfaces/user";
import {useState} from "react";
import {averageLevelCalculator} from "@/utils/score";
import {groupByExam} from "@/utils/stats";
import {createColumnHelper} from "@tanstack/react-table";
import Checkbox from "@/components/Low/Checkbox";
import List from "@/components/List";
import Table from "@/components/High/Table";
type StudentPerformanceItem = StudentUser & {entitiesLabel: string; group: string};
const StudentPerformanceList = ({items = [], stats}: {items: StudentPerformanceItem[]; stats: Stat[]}) => {
const [isShowingAmount, setIsShowingAmount] = useState(false);
const columnHelper = createColumnHelper<StudentPerformanceItem>();
const columns = [
columnHelper.accessor("name", {
header: "Student Name",
cell: (info) => info.getValue(),
}),
columnHelper.accessor("email", {
header: "E-mail",
cell: (info) => info.getValue(),
}),
columnHelper.accessor("studentID", {
header: "ID",
cell: (info) => info.getValue() || "N/A",
}),
columnHelper.accessor("group", {
header: "Group",
cell: (info) => info.getValue(),
}),
columnHelper.accessor("entitiesLabel", {
header: "Entities",
cell: (info) => info.getValue() || "N/A",
}),
columnHelper.accessor("levels.reading", {
header: "Reading",
cell: (info) =>
!isShowingAmount
? info.getValue() || 0
: `${Object.keys(groupByExam(stats.filter((x) => x.module === "reading" && x.user === info.row.original.id))).length} exams`,
}),
columnHelper.accessor("levels.listening", {
header: "Listening",
cell: (info) =>
!isShowingAmount
? info.getValue() || 0
: `${Object.keys(groupByExam(stats.filter((x) => x.module === "listening" && x.user === info.row.original.id))).length} exams`,
}),
columnHelper.accessor("levels.writing", {
header: "Writing",
cell: (info) =>
!isShowingAmount
? info.getValue() || 0
: `${Object.keys(groupByExam(stats.filter((x) => x.module === "writing" && x.user === info.row.original.id))).length} exams`,
}),
columnHelper.accessor("levels.speaking", {
header: "Speaking",
cell: (info) =>
!isShowingAmount
? info.getValue() || 0
: `${Object.keys(groupByExam(stats.filter((x) => x.module === "speaking" && x.user === info.row.original.id))).length} exams`,
}),
columnHelper.accessor("levels.level", {
header: "Level",
cell: (info) =>
!isShowingAmount
? info.getValue() || 0
: `${Object.keys(groupByExam(stats.filter((x) => x.module === "level" && x.user === info.row.original.id))).length} exams`,
}),
columnHelper.accessor("levels", {
id: "overall_level",
header: "Overall",
cell: (info) =>
!isShowingAmount
? averageLevelCalculator(
items,
stats.filter((x) => x.user === info.row.original.id),
).toFixed(1)
: `${Object.keys(groupByExam(stats.filter((x) => x.user === info.row.original.id))).length} exams`,
}),
];
return (
<div className="flex flex-col gap-4 w-full h-full">
<Checkbox isChecked={isShowingAmount} onChange={setIsShowingAmount}>
Show Utilization
</Checkbox>
<Table<StudentPerformanceItem>
data={items.sort(
(a, b) =>
averageLevelCalculator(
items,
stats.filter((x) => x.user === b.id),
) -
averageLevelCalculator(
items,
stats.filter((x) => x.user === a.id),
),
)}
columns={columns}
searchFields={[["name"], ["email"], ["studentID"], ["entitiesLabel"], ["group"]]}
/>
</div>
);
};
export default StudentPerformanceList;

6
src/pages/(admin)/Lists/UserList.tsx
View File

@@ -329,7 +329,7 @@ export default function UserList({
filter: belongsToAdminFilter,
});
router.push("/list/users");
router.push("/users");
}
: undefined
}
@@ -345,7 +345,7 @@ export default function UserList({
filter: belongsToAdminFilter,
});
router.push("/list/users");
router.push("/users");
}
: undefined
}
@@ -361,7 +361,7 @@ export default function UserList({
filter: belongsToAdminFilter
});
router.push("/list/users");
router.push("/users");
}
: undefined
}

15
src/pages/dashboard/admin.tsx
View File

@@ -123,14 +123,14 @@ export default function Dashboard({ user, users, entities, assignments, stats, g
<Layout user={user}>
<section className="grid grid-cols-5 place-items-center -md:grid-cols-2 gap-4 text-center">
<IconCard
onClick={() => router.push("/list/users?type=student")}
onClick={() => router.push("/users?type=student")}
Icon={BsPersonFill}
label="Students"
value={students.length}
color="purple"
/>
<IconCard
onClick={() => router.push("/list/users?type=teacher")}
onClick={() => router.push("/users?type=teacher")}
Icon={BsPencilSquare}
label="Teachers"
value={teachers.length}
@@ -138,14 +138,14 @@ export default function Dashboard({ user, users, entities, assignments, stats, g
/>
<IconCard
Icon={BsBank}
onClick={() => router.push("/list/users?type=corporate")}
onClick={() => router.push("/users?type=corporate")}
label="Corporates"
value={corporates.length}
color="purple"
/>
<IconCard
Icon={BsBank}
onClick={() => router.push("/list/users?type=mastercorporate")}
onClick={() => router.push("/users?type=mastercorporate")}
label="Master Corporates"
value={masterCorporates.length}
color="purple"
@@ -154,7 +154,12 @@ export default function Dashboard({ user, users, entities, assignments, stats, g
<IconCard Icon={BsPeopleFill} label="Entities" value={entities.length} color="purple" />
<IconCard Icon={BsClipboard2Data} label="Exams Performed" value={uniqBy(stats, "exam").length} color="purple" />
<IconCard Icon={BsPaperclip} label="Average Level" value={averageLevelCalculator(stats).toFixed(1)} color="purple" />
<IconCard Icon={BsPersonFillGear} label="Student Performance" value={students.length} color="purple" />
<IconCard Icon={BsPersonFillGear}
onClick={() => router.push("/users/performance")}
label="Student Performance"
value={students.length}
color="purple"
/>
<IconCard
Icon={BsEnvelopePaper}
onClick={() => router.push("/assignments")}

11
src/pages/dashboard/corporate.tsx
View File

@@ -137,14 +137,14 @@ export default function Dashboard({ user, users, entities, assignments, stats, g
)}
<section className="grid grid-cols-5 -md:grid-cols-2 place-items-center gap-4 text-center">
<IconCard
onClick={() => router.push("/list/users?type=student")}
onClick={() => router.push("/users?type=student")}
Icon={BsPersonFill}
label="Students"
value={students.length}
color="purple"
/>
<IconCard
onClick={() => router.push("/list/users?type=teacher")}
onClick={() => router.push("/users?type=teacher")}
Icon={BsPencilSquare}
label="Teachers"
value={teachers.length}
@@ -160,7 +160,12 @@ export default function Dashboard({ user, users, entities, assignments, stats, g
<IconCard Icon={BsPeopleFill} label="Entities" value={entities.length} color="purple" />
<IconCard Icon={BsClipboard2Data} label="Exams Performed" value={uniqBy(stats, "exam").length} color="purple" />
<IconCard Icon={BsPaperclip} label="Average Level" value={averageLevelCalculator(stats).toFixed(1)} color="purple" />
<IconCard Icon={BsPersonFillGear} label="Student Performance" value={students.length} color="purple" />
<IconCard Icon={BsPersonFillGear}
onClick={() => router.push("/users/performance")}
label="Student Performance"
value={students.length}
color="purple"
/>
<IconCard
Icon={BsClock}
label="Expiration Date"

15
src/pages/dashboard/developer.tsx
View File

@@ -123,14 +123,14 @@ export default function Dashboard({ user, users, entities, assignments, stats, g
<Layout user={user}>
<section className="grid grid-cols-5 place-items-center -md:grid-cols-2 gap-4 text-center">
<IconCard
onClick={() => router.push("/list/users?type=student")}
onClick={() => router.push("/users?type=student")}
Icon={BsPersonFill}
label="Students"
value={students.length}
color="purple"
/>
<IconCard
onClick={() => router.push("/list/users?type=teacher")}
onClick={() => router.push("/users?type=teacher")}
Icon={BsPencilSquare}
label="Teachers"
value={teachers.length}
@@ -138,14 +138,14 @@ export default function Dashboard({ user, users, entities, assignments, stats, g
/>
<IconCard
Icon={BsBank}
onClick={() => router.push("/list/users?type=corporate")}
onClick={() => router.push("/users?type=corporate")}
label="Corporates"
value={corporates.length}
color="purple"
/>
<IconCard
Icon={BsBank}
onClick={() => router.push("/list/users?type=mastercorporate")}
onClick={() => router.push("/users?type=mastercorporate")}
label="Master Corporates"
value={masterCorporates.length}
color="purple"
@@ -160,7 +160,12 @@ export default function Dashboard({ user, users, entities, assignments, stats, g
<IconCard Icon={BsPeopleFill} label="Entities" value={entities.length} color="purple" />
<IconCard Icon={BsClipboard2Data} label="Exams Performed" value={uniqBy(stats, "exam").length} color="purple" />
<IconCard Icon={BsPaperclip} label="Average Level" value={averageLevelCalculator(stats).toFixed(1)} color="purple" />
<IconCard Icon={BsPersonFillGear} label="Student Performance" value={students.length} color="purple" />
<IconCard Icon={BsPersonFillGear}
onClick={() => router.push("/users/performance")}
label="Student Performance"
value={students.length}
color="purple"
/>
<IconCard
Icon={BsEnvelopePaper}
onClick={() => router.push("/assignments")}

13
src/pages/dashboard/mastercorporate.tsx
View File

@@ -134,26 +134,31 @@ export default function Dashboard({ user, users, entities, assignments, stats, g
<Layout user={user}>
<section className="grid grid-cols-5 place-items-center -md:grid-cols-2 gap-4 text-center">
<IconCard
onClick={() => router.push("/list/users?type=student")}
onClick={() => router.push("/users?type=student")}
Icon={BsPersonFill}
label="Students"
value={students.length}
color="purple"
/>
<IconCard
onClick={() => router.push("/list/users?type=teacher")}
onClick={() => router.push("/users?type=teacher")}
Icon={BsPencilSquare}
label="Teachers"
value={teachers.length}
color="purple"
/>
<IconCard
onClick={() => router.push("/list/users?type=corporate")} Icon={BsBank} label="Corporate Accounts" value={corporates.length} color="purple" />
onClick={() => router.push("/users?type=corporate")} Icon={BsBank} label="Corporate Accounts" value={corporates.length} color="purple" />
<IconCard onClick={() => router.push("/classrooms")} Icon={BsPeople} label="Classrooms" value={groups.length} color="purple" />
<IconCard Icon={BsPeopleFill} label="Entities" value={entities.length} color="purple" />
<IconCard Icon={BsClipboard2Data} label="Exams Performed" value={uniqBy(stats, "exam").length} color="purple" />
<IconCard Icon={BsPaperclip} label="Average Level" value={averageLevelCalculator(stats).toFixed(1)} color="purple" />
<IconCard Icon={BsPersonFillGear} label="Student Performance" value={students.length} color="purple" />
<IconCard Icon={BsPersonFillGear}
onClick={() => router.push("/users/performance")}
label="Student Performance"
value={students.length}
color="purple"
/>
<IconCard
Icon={BsEnvelopePaper}
onClick={() => router.push("/assignments")}

2
src/pages/list/users.tsx → src/pages/users/index.tsx
View File

@@ -55,7 +55,6 @@ export default function UsersListPage({ user, type }: Props) {
</Head>
<ToastContainer />
{user && (
<Layout user={user}>
<UserList
user={user}
@@ -76,7 +75,6 @@ export default function UsersListPage({ user, type }: Props) {
)}
/>
</Layout>
)}
</>
);
}

96
src/pages/users/performance.tsx Normal file
View File

@@ -0,0 +1,96 @@
import useFilterRecordsByUser from "@/hooks/useFilterRecordsByUser";
import useGroups from "@/hooks/useGroups";
import useUsers, {userHashStudent} from "@/hooks/useUsers";
import {Group, Stat, StudentUser, User} from "@/interfaces/user";
import {getUserCompanyName} from "@/resources/user";
import clsx from "clsx";
import {useRouter} from "next/router";
import {BsArrowLeft, BsArrowRepeat, BsChevronLeft} from "react-icons/bs";
import { mapBy, serialize } from "@/utils";
import {withIronSessionSsr} from "iron-session/next";
import { getEntitiesUsers, getUsers } from "@/utils/users.be";
import { sessionOptions } from "@/lib/session";
import { checkAccess } from "@/utils/permissions";
import { getEntities } from "@/utils/entities.be";
import { Entity } from "@/interfaces/entity";
import { getParticipantGroups, getParticipantsGroups } from "@/utils/groups.be";
import StudentPerformanceList from "../(admin)/Lists/StudentPerformanceList";
import Head from "next/head";
import { ToastContainer } from "react-toastify";
import Layout from "@/components/High/Layout";
export const getServerSideProps = withIronSessionSsr(async ({req, res, query}) => {
const user = req.session.user as User;
if (!user) {
return {
redirect: {
destination: "/login",
permanent: false,
},
};
}
const entityIDs = mapBy(user.entities, 'id')
const entities = await getEntities(checkAccess(user, ["admin", 'developer']) ? undefined : entityIDs)
const students = await (checkAccess(user, ["admin", 'developer'])
? getUsers({type: 'student'})
: getEntitiesUsers(entityIDs, {type: 'student'})
)
const groups = await getParticipantsGroups(mapBy(students, 'id'))
return {
props: serialize({user, students, entities, groups}),
};
}, sessionOptions);
interface Props {
user: User;
students: StudentUser[]
entities: Entity[]
groups: Group[]
}
const StudentPerformance = ({user, students, entities, groups}: Props) => {
const {data: stats} = useFilterRecordsByUser<Stat[]>();
const router = useRouter();
const performanceStudents = students.map((u) => ({
...u,
group: groups.find((x) => x.participants.includes(u.id))?.name || "N/A",
entitiesLabel: mapBy(u.entities, 'id').map((id) => entities.find((e) => e.id === id)?.label).filter((e) => !!e).join(', '),
}));
return (
<>
<Head>
<title>EnCoach</title>
<meta
name="description"
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<ToastContainer />
<Layout user={user}>
<div className="flex items-center gap-2">
<button
onClick={() => {
router.back()
}}
className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
<BsChevronLeft />
</button>
<h2 className="font-bold text-2xl">Student Performance ({ students.length })</h2>
</div>
<StudentPerformanceList items={performanceStudents} stats={stats} />
</Layout>
</>
);
};
export default StudentPerformance;