From 580e319fb9bebc1d60373882377004304b32f1f6 Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.g.correia@inesctec.pt>
Date: Fri, 17 Jan 2025 15:20:46 +0000
Subject: [PATCH 01/69] start implementation of approval workflows. Add nav,
 page, empty table, and status filtering

---
 src/components/Sidebar.tsx          |  11 ++
 src/demo/approval_workflows.json    |   1 +
 src/hooks/useApprovalWorkflows.tsx  |  26 ++++
 src/interfaces/approval.workflow.ts |  17 +++
 src/pages/approval-workflows.tsx    | 186 ++++++++++++++++++++++++++++
 5 files changed, 241 insertions(+)
 create mode 100644 src/demo/approval_workflows.json
 create mode 100644 src/hooks/useApprovalWorkflows.tsx
 create mode 100644 src/interfaces/approval.workflow.ts
 create mode 100644 src/pages/approval-workflows.tsx

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index daffc144..f8db74f3 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -14,6 +14,7 @@ import {
 	BsClipboardData,
 	BsPeople,
 } from "react-icons/bs";
+import { GoWorkflow } from "react-icons/go";
 import { CiDumbbell } from "react-icons/ci";
 import { RiLogoutBoxFill } from "react-icons/ri";
 import Link from "next/link";
@@ -183,6 +184,16 @@ export default function Sidebar({
 							isMinimized={isMinimized}
 						/>
 					)}
+				{checkAccess(user, ["admin", "developer", "teacher", "corporate", "mastercorporate"]) && (
+					<Nav
+						disabled={disableNavigation}
+						Icon={GoWorkflow}
+						label="Approval Workflows"
+						path={path}
+						keyPath="/approval-workflows"
+						isMinimized={isMinimized}
+					/>
+				)}
 			</div>
 			<div className="-xl:flex flex-col gap-3 xl:hidden">
 				<Nav disabled={disableNavigation} Icon={MdSpaceDashboard} label="Dashboard" path={path} keyPath="/" isMinimized />
diff --git a/src/demo/approval_workflows.json b/src/demo/approval_workflows.json
new file mode 100644
index 00000000..0637a088
--- /dev/null
+++ b/src/demo/approval_workflows.json
@@ -0,0 +1 @@
+[]
\ No newline at end of file
diff --git a/src/hooks/useApprovalWorkflows.tsx b/src/hooks/useApprovalWorkflows.tsx
new file mode 100644
index 00000000..c0cc273f
--- /dev/null
+++ b/src/hooks/useApprovalWorkflows.tsx
@@ -0,0 +1,26 @@
+import { ApprovalWorkflow } from "@/interfaces/approval.workflow";
+import axios from "axios";
+import { useCallback, useEffect, useState } from "react";
+
+import approvalWorkflowsData from '../demo/approval_workflows.json' // to test locally
+
+export default function useApprovalWorkflows() {
+  const [approvalWorkflows, setApprovalWorkflows] = useState<ApprovalWorkflow[]>(approvalWorkflowsData);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isError, setIsError] = useState(false);
+
+  /* const getData = useCallback(() => {
+    setIsLoading(true);
+    axios
+      .get<ApprovalWorkflow[]>(`/api/approvalWorkflows`)
+      .then((response) => setApprovalWorkflows(response.data))
+      .catch((error) => {
+        setIsError(true); 
+      })
+      .finally(() => setIsLoading(false));
+  }, []);
+
+  useEffect(getData, [getData]); */
+
+  return { approvalWorkflows, isLoading, isError/* , reload: getData */ };
+}
diff --git a/src/interfaces/approval.workflow.ts b/src/interfaces/approval.workflow.ts
new file mode 100644
index 00000000..c91b06f5
--- /dev/null
+++ b/src/interfaces/approval.workflow.ts
@@ -0,0 +1,17 @@
+import {Module} from ".";
+
+export interface ApprovalWorkflow {
+    id: string;
+    name: string;
+    module: Module;
+    status: ApprovalWorkflowStatus;
+    approvers: string;
+    step: string;
+}
+
+export type ApprovalWorkflowStatus = "approved" | "pending" | "rejected";
+export const ApprovalWorkflowStatusLabel: {[key in ApprovalWorkflowStatus]: string} = {
+    approved: "Approved",
+    pending: "Pending",
+    rejected: "Rejected",
+};
diff --git a/src/pages/approval-workflows.tsx b/src/pages/approval-workflows.tsx
new file mode 100644
index 00000000..795a2262
--- /dev/null
+++ b/src/pages/approval-workflows.tsx
@@ -0,0 +1,186 @@
+import Layout from "@/components/High/Layout";
+import Select from "@/components/Low/Select";
+import useApprovalWorkflows from "@/hooks/useApprovalWorkflows";
+import useUser from "@/hooks/useUser";
+import useUsers from "@/hooks/useUsers";
+import { ApprovalWorkflow, ApprovalWorkflowStatus, ApprovalWorkflowStatusLabel } from "@/interfaces/approval.workflow";
+import { sessionOptions } from "@/lib/session";
+import { redirect } from "@/utils";
+import { requestUser } from "@/utils/api";
+import { shouldRedirectHome } from "@/utils/navigation.disabled";
+import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import clsx from "clsx";
+import { withIronSessionSsr } from "iron-session/next";
+import Head from "next/head";
+import { useEffect, useState } from "react";
+import { ToastContainer } from "react-toastify";
+
+const columnHelper = createColumnHelper<ApprovalWorkflow>();
+
+export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
+    const user = await requestUser(req, res)
+    if (!user) return redirect("/login")
+
+    if (shouldRedirectHome(user) || !["admin", "developer", "teacher", "corporate", "mastercorporate"].includes(user.type))
+        return redirect("/")
+
+    return {
+        props: { user },
+    };
+}, sessionOptions);
+
+const StatusClassNames: { [key in ApprovalWorkflowStatus]: string } = {
+    approved: "bg-mti-green-light",
+    pending: "bg-mti-orange-light",
+    rejected: "bg-mti-red-light",
+};
+
+const escapedURL = process.env.NEXT_PUBLIC_WEBSITE_URL || "".replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+const fromHomepage = [new RegExp(`^${escapedURL}`), /\/contact$/];
+
+type CustomStatus = ApprovalWorkflowStatus | "all" | "pending";
+
+const STATUS_OPTIONS = [
+    {
+        label: "All",
+        value: "all",
+        filter: (x: ApprovalWorkflow) => true,
+    },
+    {
+        label: "Approved",
+        value: "approved",
+        filter: (x: ApprovalWorkflow) => x.status === "approved",
+    },
+    {
+        label: "Pending",
+        value: "pending",
+        filter: (x: ApprovalWorkflow) => x.status === "pending",
+    },
+    {
+        label: "Rejected",
+        value: "rejected",
+        filter: (x: ApprovalWorkflow) => x.status === "rejected",
+    },
+];
+
+export default function ApprovalWorkflows() {
+    const [filteredApprovalWorkflows, setFilteredApprovalWorkflows] = useState<ApprovalWorkflow[]>([]);
+    const [selectedApprovalWorkflow, setSelectedApprovalWorkflow] = useState<ApprovalWorkflow>();
+
+    const [statusFilter, setStatusFilter] = useState<CustomStatus>("pending");
+
+    const { user } = useUser({ redirectTo: "/login" });
+    
+    const { approvalWorkflows/* , reload */ } = useApprovalWorkflows();
+
+    useEffect(() => {
+        const filters = [];
+        if (statusFilter) {
+            const filter = STATUS_OPTIONS.find((x) => x.value === statusFilter)?.filter;
+            if (filter) filters.push(filter);
+        }
+        setFilteredApprovalWorkflows([...filters.reduce((d, f) => d.filter(f), approvalWorkflows)]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [approvalWorkflows, statusFilter]);
+
+    const columns = [
+        /* columnHelper.accessor("id", {
+            header: "ID",
+            cell: (info) => info.getValue(),
+        }), */
+        columnHelper.accessor("name", {
+            header: "Name",
+            cell: (info) => info.getValue(),
+        }),
+        columnHelper.accessor("module", {
+            header: "Module",
+            cell: (info) => info.getValue(),
+        }),
+        columnHelper.accessor("status", {
+            header: "Status",
+            cell: (info) => (
+                <span className={clsx("rounded-lg p-1 px-2 text-white", StatusClassNames[info.getValue()])}>
+                    {ApprovalWorkflowStatusLabel[info.getValue()]}
+                </span>
+            ),
+        }),
+        columnHelper.accessor("approvers", {
+            header: "Approvers",
+            cell: (info) => info.getValue(),
+        }),
+        columnHelper.accessor("step", {
+            header: "Step",
+            cell: (info) => info.getValue(),
+        }),
+    ];
+
+    const table = useReactTable({
+        data: filteredApprovalWorkflows,
+        columns: columns,
+        getCoreRowModel: getCoreRowModel(),
+    });
+
+    return (
+        <>
+            <Head>
+                <title>Approval Workflows Panel | 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 />
+            {user && (
+                <Layout user={user} className="gap-6">
+                    <h1 className="text-2xl font-semibold">Approval Workflows</h1>
+
+                    <div className="flex w-full items-center gap-4">
+                        <div className="flex w-full flex-col gap-3">
+                            <label className="text-mti-gray-dim text-base font-normal">Status</label>
+                            <Select
+                                options={STATUS_OPTIONS}
+                                value={STATUS_OPTIONS.find((x) => x.value === statusFilter)}
+                                onChange={(value) => setStatusFilter((value?.value as ApprovalWorkflowStatus) ?? undefined)}
+                                isClearable
+                                placeholder="Status..."
+                            />
+                        </div>
+                    </div>
+
+                    <table className="bg-mti-purple-ultralight/40 w-full rounded-xl">
+                        <thead>
+                            {table.getHeaderGroups().map((headerGroup) => (
+                                <tr key={headerGroup.id}>
+                                    {headerGroup.headers.map((header) => (
+                                        <th className="px-4 py-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={clsx(
+                                        "even:bg-mti-purple-ultralight/40 hover:bg-mti-purple-ultralight cursor-pointer rounded-lg py-2 odd:bg-white",
+                                        "transition duration-300 ease-in-out",
+                                    )}
+                                    onClick={() => setSelectedApprovalWorkflow(row.original)}
+                                    key={row.id}>
+                                    {row.getVisibleCells().map((cell) => (
+                                        <td className="w-fit items-center px-4 py-2" key={cell.id}>
+                                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                        </td>
+                                    ))}
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </Layout>
+            )}
+        </>
+    );
+}

From 66d23b414018049273335f019b9363bc93e08c5a Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.g.correia@inesctec.pt>
Date: Fri, 17 Jan 2025 18:44:52 +0000
Subject: [PATCH 02/69] Add local test data, implement [id].tsx for approval
 workflows

---
 src/demo/approval_workflows.json              | 43 +++++++++++-
 src/hooks/useApprovalWorkflows.tsx            |  2 +-
 src/pages/approval-workflows/[id].tsx         | 68 ++++++++++++++++++
 .../index.tsx}                                | 70 +++++++++++++++----
 src/utils/approval.workflows.be.ts            |  8 +++
 5 files changed, 175 insertions(+), 16 deletions(-)
 create mode 100644 src/pages/approval-workflows/[id].tsx
 rename src/pages/{approval-workflows.tsx => approval-workflows/index.tsx} (71%)
 create mode 100644 src/utils/approval.workflows.be.ts

diff --git a/src/demo/approval_workflows.json b/src/demo/approval_workflows.json
index 0637a088..d0244fb8 100644
--- a/src/demo/approval_workflows.json
+++ b/src/demo/approval_workflows.json
@@ -1 +1,42 @@
-[]
\ No newline at end of file
+[
+    {
+        "id": "local-test-id-1",
+        "name": "name-1",
+        "module": "reading",
+        "status": "approved",
+        "approvers": "prof-1",
+        "step": "Concluded"
+    },
+    {
+        "id": "local-test-id-2",
+        "name": "name-2",
+        "module": "reading",
+        "status": "pending",
+        "approvers": "prof-2",
+        "step": "Concluded"
+    },
+    {
+        "id": "local-test-id-3",
+        "name": "name-3",
+        "module": "listening",
+        "status": "rejected",
+        "approvers": "prof-3",
+        "step": "Concluded"
+    },
+    {
+        "id": "local-test-id-4",
+        "name": "name-4",
+        "module": "writing",
+        "status": "approved",
+        "approvers": "prof-4",
+        "step": "Concluded"
+    },
+    {
+        "id": "local-test-id-5",
+        "name": "name-5",
+        "module": "reading",
+        "status": "approved",
+        "approvers": "prof-5",
+        "step": "Concluded"
+    }
+]
\ No newline at end of file
diff --git a/src/hooks/useApprovalWorkflows.tsx b/src/hooks/useApprovalWorkflows.tsx
index c0cc273f..9be0459c 100644
--- a/src/hooks/useApprovalWorkflows.tsx
+++ b/src/hooks/useApprovalWorkflows.tsx
@@ -5,7 +5,7 @@ import { useCallback, useEffect, useState } from "react";
 import approvalWorkflowsData from '../demo/approval_workflows.json' // to test locally
 
 export default function useApprovalWorkflows() {
-  const [approvalWorkflows, setApprovalWorkflows] = useState<ApprovalWorkflow[]>(approvalWorkflowsData);
+  const [approvalWorkflows, setApprovalWorkflows] = useState<ApprovalWorkflow[]>(approvalWorkflowsData as ApprovalWorkflow[]);
   const [isLoading, setIsLoading] = useState(false);
   const [isError, setIsError] = useState(false);
 
diff --git a/src/pages/approval-workflows/[id].tsx b/src/pages/approval-workflows/[id].tsx
new file mode 100644
index 00000000..622d6d4e
--- /dev/null
+++ b/src/pages/approval-workflows/[id].tsx
@@ -0,0 +1,68 @@
+import Layout from "@/components/High/Layout";
+import Select from "@/components/Low/Select";
+import useApprovalWorkflows from "@/hooks/useApprovalWorkflows";
+import useUser from "@/hooks/useUser";
+import useUsers from "@/hooks/useUsers";
+import { ApprovalWorkflow, ApprovalWorkflowStatus, ApprovalWorkflowStatusLabel } from "@/interfaces/approval.workflow";
+import { GroupWithUsers, User } from "@/interfaces/user";
+import { sessionOptions } from "@/lib/session";
+import { redirect } from "@/utils";
+import { requestUser } from "@/utils/api";
+import { getApprovalWorkflow } from "@/utils/approval.workflows.be";
+import { shouldRedirectHome } from "@/utils/navigation.disabled";
+import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import axios from "axios";
+import clsx from "clsx";
+import { withIronSessionSsr } from "iron-session/next";
+import Head from "next/head";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { BsTrash } from "react-icons/bs";
+import { FaRegEdit } from "react-icons/fa";
+import { toast, ToastContainer } from "react-toastify";
+
+import approvalWorkflowsData from '../../demo/approval_workflows.json' // to test locally
+
+export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => {
+    const user = await requestUser(req, res)
+    if (!user) return redirect("/login")
+
+    if (shouldRedirectHome(user) || !["admin", "developer", "teacher", "corporate", "mastercorporate"].includes(user.type))
+        return redirect("/")
+
+    const { id } = params as { id: string };
+
+    const approvalWorkflow = approvalWorkflowsData.find(workflow => workflow.id === id);       // await getApprovalWorkflow(id);
+    if (!approvalWorkflow) 
+        return redirect("/approval-workflows")
+
+    return {
+        props: { user },
+    };
+}, sessionOptions);
+
+export default function Home() {
+    const { user } = useUser({ redirectTo: "/login" });
+
+    return (
+        <>
+            <Head>
+                <title>Approval Workflows | 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 />
+            {user && (
+                <Layout user={user} className="gap-6">
+                    <h1 className="text-2xl font-semibold">Approval Workflows</h1>
+
+
+                </Layout>
+            )}
+        </>
+    );
+}
diff --git a/src/pages/approval-workflows.tsx b/src/pages/approval-workflows/index.tsx
similarity index 71%
rename from src/pages/approval-workflows.tsx
rename to src/pages/approval-workflows/index.tsx
index 795a2262..e7688193 100644
--- a/src/pages/approval-workflows.tsx
+++ b/src/pages/approval-workflows/index.tsx
@@ -9,11 +9,15 @@ import { redirect } from "@/utils";
 import { requestUser } from "@/utils/api";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
 import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import axios from "axios";
 import clsx from "clsx";
 import { withIronSessionSsr } from "iron-session/next";
 import Head from "next/head";
+import Link from "next/link";
 import { useEffect, useState } from "react";
-import { ToastContainer } from "react-toastify";
+import { BsTrash } from "react-icons/bs";
+import { FaRegEdit } from "react-icons/fa";
+import { toast, ToastContainer } from "react-toastify";
 
 const columnHelper = createColumnHelper<ApprovalWorkflow>();
 
@@ -30,14 +34,11 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
 }, sessionOptions);
 
 const StatusClassNames: { [key in ApprovalWorkflowStatus]: string } = {
-    approved: "bg-mti-green-light",
-    pending: "bg-mti-orange-light",
-    rejected: "bg-mti-red-light",
+    approved: "bg-green-100 text-green-800 border border-green-300 before:content-[''] before:w-2 before:h-2 before:bg-green-500 before:rounded-full before:inline-block before:mr-2",
+    pending: "bg-orange-100 text-orange-800 border border-orange-300 before:content-[''] before:w-2 before:h-2 before:bg-orange-500 before:rounded-full before:inline-block before:mr-2",
+    rejected: "bg-red-100 text-red-800 border border-red-300 before:content-[''] before:w-2 before:h-2 before:bg-red-500 before:rounded-full before:inline-block before:mr-2",
 };
 
-const escapedURL = process.env.NEXT_PUBLIC_WEBSITE_URL || "".replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-const fromHomepage = [new RegExp(`^${escapedURL}`), /\/contact$/];
-
 type CustomStatus = ApprovalWorkflowStatus | "all" | "pending";
 
 const STATUS_OPTIONS = [
@@ -65,12 +66,12 @@ const STATUS_OPTIONS = [
 
 export default function ApprovalWorkflows() {
     const [filteredApprovalWorkflows, setFilteredApprovalWorkflows] = useState<ApprovalWorkflow[]>([]);
-    const [selectedApprovalWorkflow, setSelectedApprovalWorkflow] = useState<ApprovalWorkflow>();
+    /* const [selectedApprovalWorkflow, setSelectedApprovalWorkflow] = useState<ApprovalWorkflow>();     */
 
-    const [statusFilter, setStatusFilter] = useState<CustomStatus>("pending");
+    const [statusFilter, setStatusFilter] = useState<CustomStatus>("all");
 
     const { user } = useUser({ redirectTo: "/login" });
-    
+
     const { approvalWorkflows/* , reload */ } = useApprovalWorkflows();
 
     useEffect(() => {
@@ -83,6 +84,32 @@ export default function ApprovalWorkflows() {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [approvalWorkflows, statusFilter]);
 
+    const deleteApprovalWorkflow = (id: string, name: string) => {
+        if (!confirm(`Are you sure you want to delete this Approval Workflow?`)) return;
+
+        axios
+            .delete(`/api/approval-workflows/${id}`)
+            .then(() => toast.success(`Deleted ${name} Approval Workflow.`))
+            .catch((reason) => {
+                if (reason.response.status === 404) {
+                    toast.error("Approval Workflow not found!");
+                    return;
+                }
+
+                if (reason.response.status === 403) {
+                    toast.error("You do not have permission to delete an Approval Workflow!");
+                    return;
+                }
+
+                toast.error("Something went wrong, please try again later.");
+            })
+        /* .finally(reload); */
+    };
+
+    const editApprovalWorkflow = (id: string) => {
+
+    };
+
     const columns = [
         /* columnHelper.accessor("id", {
             header: "ID",
@@ -99,7 +126,7 @@ export default function ApprovalWorkflows() {
         columnHelper.accessor("status", {
             header: "Status",
             cell: (info) => (
-                <span className={clsx("rounded-lg p-1 px-2 text-white", StatusClassNames[info.getValue()])}>
+                <span className={clsx("rounded-full px-3 py-1 text-sm font-medium inline-block text-left w-[110px]", StatusClassNames[info.getValue()])}>
                     {ApprovalWorkflowStatusLabel[info.getValue()]}
                 </span>
             ),
@@ -112,6 +139,22 @@ export default function ApprovalWorkflows() {
             header: "Step",
             cell: (info) => info.getValue(),
         }),
+        {
+            header: "Actions",
+            id: "actions",
+            cell: ({ row }: { row: { original: ApprovalWorkflow } }) => {
+                return (
+                    <div className="flex gap-4">
+                        <div data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deleteApprovalWorkflow(row.original.id, row.original.name)}>
+                            <BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+                        </div>
+                        <Link data-tip="Edit" href={`/approval-workflows/${row.original.id}`} className="cursor-pointer tooltip">
+                            <FaRegEdit className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+                        </Link>
+                    </div>
+                );
+            },
+        },
     ];
 
     const table = useReactTable({
@@ -165,11 +208,10 @@ export default function ApprovalWorkflows() {
                             {table.getRowModel().rows.map((row) => (
                                 <tr
                                     className={clsx(
-                                        "even:bg-mti-purple-ultralight/40 hover:bg-mti-purple-ultralight cursor-pointer rounded-lg py-2 odd:bg-white",
-                                        "transition duration-300 ease-in-out",
+                                        "even:bg-mti-purple-ultralight/40 rounded-lg py-2 odd:bg-white"
                                     )}
-                                    onClick={() => setSelectedApprovalWorkflow(row.original)}
                                     key={row.id}>
+
                                     {row.getVisibleCells().map((cell) => (
                                         <td className="w-fit items-center px-4 py-2" key={cell.id}>
                                             {flexRender(cell.column.columnDef.cell, cell.getContext())}
diff --git a/src/utils/approval.workflows.be.ts b/src/utils/approval.workflows.be.ts
new file mode 100644
index 00000000..0173ac48
--- /dev/null
+++ b/src/utils/approval.workflows.be.ts
@@ -0,0 +1,8 @@
+import { ApprovalWorkflow } from "@/interfaces/approval.workflow";
+import client from "@/lib/mongodb";
+
+const db = client.db(process.env.MONGODB_DB);
+
+export const getApprovalWorkflow = async (id: string) => {
+	return await db.collection("approval-workflows").findOne<ApprovalWorkflow>({ id });
+};

From c2c9b3374c0de3b44e8c466f28025296205db38f Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.g.correia@inesctec.pt>
Date: Fri, 17 Jan 2025 20:17:51 +0000
Subject: [PATCH 03/69] Start work on Approval Workflow id page

---
 .../ApprovalWorkflows/RequestedBy.tsx         | 28 ++++++++++
 .../ApprovalWorkflows/StartedOn.tsx           | 22 ++++++++
 src/components/ApprovalWorkflows/Status.tsx   | 23 ++++++++
 src/pages/approval-workflows/[id].tsx         | 55 ++++++++++++-------
 4 files changed, 107 insertions(+), 21 deletions(-)
 create mode 100644 src/components/ApprovalWorkflows/RequestedBy.tsx
 create mode 100644 src/components/ApprovalWorkflows/StartedOn.tsx
 create mode 100644 src/components/ApprovalWorkflows/Status.tsx

diff --git a/src/components/ApprovalWorkflows/RequestedBy.tsx b/src/components/ApprovalWorkflows/RequestedBy.tsx
new file mode 100644
index 00000000..84ea0cea
--- /dev/null
+++ b/src/components/ApprovalWorkflows/RequestedBy.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import { FaRegUser } from "react-icons/fa";
+
+interface Props {
+    name: string;
+    profileImage: string;
+}
+
+export default function RequestedBy({ name, profileImage }: Props) {
+    return (
+        <div className="flex items-center space-x-3">
+            <div className="flex items-center justify-center w-12 h-12 bg-gray-100 rounded-lg border border-gray-300">
+                <FaRegUser className="text-mti-purple-dark size-5"/>
+            </div>
+            <div>
+                <p className="text-sm font-medium text-gray-800">Requested by</p>
+                <div className="flex items-center space-x-2">
+                    <p className="text-xs font-medium text-gray-800">{name}</p>
+                    <img
+                        src={profileImage}
+                        alt={name}
+                        className="w-6 h-6 rounded-full"
+                    />
+                </div>
+            </div>
+        </div>
+    );
+};
\ No newline at end of file
diff --git a/src/components/ApprovalWorkflows/StartedOn.tsx b/src/components/ApprovalWorkflows/StartedOn.tsx
new file mode 100644
index 00000000..452cad72
--- /dev/null
+++ b/src/components/ApprovalWorkflows/StartedOn.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import { PiCalendarDots } from "react-icons/pi";
+
+interface Props {
+    date: string;
+}
+
+export default function StartedOn({ date }: Props) {
+    return (
+        <div className="flex items-center space-x-3">
+            <div className="flex items-center justify-center w-12 h-12 bg-gray-100 rounded-lg border border-gray-300">
+                <PiCalendarDots className="text-mti-purple-dark size-7"/>
+            </div>
+            <div>
+                <p className="pb-1 text-sm font-medium text-gray-800">Started on</p>
+                <div className="flex items-center">
+                    <p className="text-xs font-medium text-gray-800">{date}</p>
+                </div>
+            </div>
+        </div>
+    );
+};
\ No newline at end of file
diff --git a/src/components/ApprovalWorkflows/Status.tsx b/src/components/ApprovalWorkflows/Status.tsx
new file mode 100644
index 00000000..f7176bfa
--- /dev/null
+++ b/src/components/ApprovalWorkflows/Status.tsx
@@ -0,0 +1,23 @@
+import { ApprovalWorkflowStatus, ApprovalWorkflowStatusLabel } from "@/interfaces/approval.workflow";
+import React from "react";
+import { RiProgress5Line } from "react-icons/ri";
+
+interface Props {
+    status: ApprovalWorkflowStatus;
+}
+
+export default function Status({ status }: Props) {
+    return (
+        <div className="flex items-center space-x-3">
+            <div className="flex items-center justify-center w-12 h-12 bg-gray-100 rounded-lg border border-gray-300">
+                <RiProgress5Line className="text-mti-purple-dark size-7"/>
+            </div>
+            <div>
+                <p className="pb-1 text-sm font-medium text-gray-800">Status</p>
+                <div className="flex items-center">
+                    <p className="text-xs font-medium text-gray-800">{ApprovalWorkflowStatusLabel[status]}</p>
+                </div>
+            </div>
+        </div>
+    );
+};
\ No newline at end of file
diff --git a/src/pages/approval-workflows/[id].tsx b/src/pages/approval-workflows/[id].tsx
index 622d6d4e..a9571269 100644
--- a/src/pages/approval-workflows/[id].tsx
+++ b/src/pages/approval-workflows/[id].tsx
@@ -1,27 +1,21 @@
 import Layout from "@/components/High/Layout";
-import Select from "@/components/Low/Select";
-import useApprovalWorkflows from "@/hooks/useApprovalWorkflows";
 import useUser from "@/hooks/useUser";
-import useUsers from "@/hooks/useUsers";
-import { ApprovalWorkflow, ApprovalWorkflowStatus, ApprovalWorkflowStatusLabel } from "@/interfaces/approval.workflow";
-import { GroupWithUsers, User } from "@/interfaces/user";
+import { ApprovalWorkflow } from "@/interfaces/approval.workflow";
 import { sessionOptions } from "@/lib/session";
 import { redirect } from "@/utils";
 import { requestUser } from "@/utils/api";
-import { getApprovalWorkflow } from "@/utils/approval.workflows.be";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
-import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
-import axios from "axios";
-import clsx from "clsx";
 import { withIronSessionSsr } from "iron-session/next";
 import Head from "next/head";
 import Link from "next/link";
-import { useEffect, useState } from "react";
-import { BsTrash } from "react-icons/bs";
-import { FaRegEdit } from "react-icons/fa";
-import { toast, ToastContainer } from "react-toastify";
+import { BsChevronLeft } from "react-icons/bs";
+import { ToastContainer } from "react-toastify";
 
-import approvalWorkflowsData from '../../demo/approval_workflows.json' // to test locally
+import approvalWorkflowsData from '../../demo/approval_workflows.json'; // to test locally
+
+import RequestedBy from "@/components/ApprovalWorkflows/RequestedBy";
+import StartedOn from "@/components/ApprovalWorkflows/StartedOn";
+import Status from "@/components/ApprovalWorkflows/Status";
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => {
     const user = await requestUser(req, res)
@@ -33,21 +27,21 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
     const { id } = params as { id: string };
 
     const approvalWorkflow = approvalWorkflowsData.find(workflow => workflow.id === id);       // await getApprovalWorkflow(id);
-    if (!approvalWorkflow) 
+    if (!approvalWorkflow)
         return redirect("/approval-workflows")
 
     return {
-        props: { user },
+        props: { user, approvalWorkflow },
     };
 }, sessionOptions);
 
-export default function Home() {
+export default function Home({ approvalWorkflow }: { approvalWorkflow: ApprovalWorkflow }) {
     const { user } = useUser({ redirectTo: "/login" });
 
     return (
         <>
             <Head>
-                <title>Approval Workflows | EnCoach</title>
+                <title> {approvalWorkflow.name} | EnCoach</title>
                 <meta
                     name="description"
                     content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
@@ -58,9 +52,28 @@ export default function Home() {
             <ToastContainer />
             {user && (
                 <Layout user={user} className="gap-6">
-                    <h1 className="text-2xl font-semibold">Approval Workflows</h1>
-
-
+                    <section className="flex flex-col gap-0">
+                        <div className="flex items-center gap-2">
+                            <Link
+                                href="/approval-workflows"
+                                className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
+                                <BsChevronLeft />
+                            </Link>
+                            <h1 className="text-2xl font-semibold">{approvalWorkflow.name}</h1>
+                        </div>
+                    </section>
+                    <section className="flex flex-row gap-6">
+                        <RequestedBy
+                            name="Prof. Álvaro Dória"
+                            profileImage="/blue-stock-photo.png"
+                        />
+                        <StartedOn
+                            date="15/12/2024"
+                        />
+                        <Status
+                            status="pending"
+                        />
+                    </section>
                 </Layout>
             )}
         </>

From f485c782f37af9ad3e313f6b1e45b546d1ea1663 Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.g.correia@inesctec.pt>
Date: Sun, 19 Jan 2025 19:23:56 +0000
Subject: [PATCH 04/69] Start implementing workflow step form behaviour

---
 .../ApprovalWorkflows/WorkflowStep.tsx        |  98 ++++++++++++
 .../ApprovalWorkflows/WorkflowStepNumber.tsx  |  25 ++++
 .../ApprovalWorkflows/WorkflowStepSelects.tsx |  53 +++++++
 src/pages/approval-workflows/[id].tsx         | 141 ++++++++++++++++--
 src/pages/approval-workflows/index.tsx        |   4 +-
 5 files changed, 308 insertions(+), 13 deletions(-)
 create mode 100644 src/components/ApprovalWorkflows/WorkflowStep.tsx
 create mode 100644 src/components/ApprovalWorkflows/WorkflowStepNumber.tsx
 create mode 100644 src/components/ApprovalWorkflows/WorkflowStepSelects.tsx

diff --git a/src/components/ApprovalWorkflows/WorkflowStep.tsx b/src/components/ApprovalWorkflows/WorkflowStep.tsx
new file mode 100644
index 00000000..e451744d
--- /dev/null
+++ b/src/components/ApprovalWorkflows/WorkflowStep.tsx
@@ -0,0 +1,98 @@
+import Option from "@/interfaces/option";
+import clsx from "clsx";
+import { useState } from "react";
+import { BsTrash } from "react-icons/bs";
+import WorkflowStepNumber from "./WorkflowStepNumber";
+import WorkflowStepSelects from "./WorkflowStepSelects";
+
+export type StepType = "form-intake" | "approval-by";
+
+const teacherOptions: Option[] = [
+    // fetch from database?
+]
+
+const directorOptions: Option[] = [
+    // fetch from database?
+]
+
+interface Props {
+    editView?: boolean,
+    finalStep?: boolean,
+    isSelected?: boolean,
+    stepNumber: number,
+    stepType: StepType,
+    requestedBy: string,
+    //requestedBy: TeacherUser | CorporateUser | MasterCorporateUser,
+    onDelete?: () => void;
+}
+
+export default function WorkflowStep({
+    editView = false,
+    finalStep = false,
+    isSelected = false,
+    stepNumber,
+    stepType,
+    requestedBy,
+    onDelete,
+}: Props) {
+    // disable selectability of step if in editView
+    const effectiveIsSelected = editView ? false : isSelected;
+
+    const [leftValue, setLeftValue] = useState<Option | null>(null);
+    const [rightValue, setRightValue] = useState<Option | null>(null);
+
+    let showSelects = false;
+    let leftPlaceholder = "";
+    let rightPlaceholder = "";
+
+    if (editView) {
+        if (stepType === "approval-by") {
+            // Show the selects only if it's an 'approval-by' step and in edit mode
+            showSelects = true;
+            leftPlaceholder = "Approval by";
+            rightPlaceholder = finalStep ? "2nd Director" : "2nd Teacher";
+        }
+    }
+
+    return (
+        <div
+            className={clsx(
+                'flex items-center space-x-3 w-[600px] p-5 rounded-2xl border-2 border-mti-purple-ultralight',
+                { 'bg-mti-purple-ultralight': isSelected }
+            )}
+        >
+            <div className="flex w-full items-center">
+                <div className="flex-shrink-0">
+                    <WorkflowStepNumber number={stepNumber} isSelected={isSelected} />
+                </div>
+
+                {/* Only show selects if editView === true and stepType === 'approval-by' */}
+                {showSelects && (
+                    <div className="ml-auto">
+                        <WorkflowStepSelects
+                            // Provide any relevant options:
+                            leftOptions={teacherOptions}
+                            rightOptions={teacherOptions}
+                            leftValue={leftValue}
+                            rightValue={rightValue}
+                            onLeftChange={setLeftValue}
+                            onRightChange={setRightValue}
+                            leftPlaceholder={leftPlaceholder}
+                            rightPlaceholder={rightPlaceholder}
+                        />
+                    </div>
+                )}
+
+                {editView && stepNumber !== 1 && !finalStep && (
+                    <button
+                        data-tip="Delete"
+                        className="ml-4 cursor-pointer tooltip"
+                        onClick={onDelete}
+                    >
+                        <BsTrash className="size-6 hover:text-mti-purple-light transition ease-in-out duration-300" />
+                    </button>
+                )}
+            </div>
+        </div>
+    );
+};
\ No newline at end of file
diff --git a/src/components/ApprovalWorkflows/WorkflowStepNumber.tsx b/src/components/ApprovalWorkflows/WorkflowStepNumber.tsx
new file mode 100644
index 00000000..93e75ca8
--- /dev/null
+++ b/src/components/ApprovalWorkflows/WorkflowStepNumber.tsx
@@ -0,0 +1,25 @@
+import { ApprovalWorkflowStatus, ApprovalWorkflowStatusLabel } from "@/interfaces/approval.workflow";
+import clsx from "clsx";
+import React from "react";
+import { RiProgress5Line } from "react-icons/ri";
+
+interface Props {
+    number: number;
+    isSelected?: boolean;
+}
+
+export default function WorkflowStepNumber({ number, isSelected = false }: Props) {
+    return (
+        <div
+            className={clsx(
+                'flex items-center justify-center w-10 h-10 rounded-full',
+                {
+                    'bg-mti-purple text-mti-purple-ultralight': isSelected,
+                    'bg-mti-purple-ultralight text-gray-500': !isSelected,
+                }
+            )}
+        >
+            <span className="text-lg font-semibold">{number}</span>
+        </div>
+    );
+};
\ No newline at end of file
diff --git a/src/components/ApprovalWorkflows/WorkflowStepSelects.tsx b/src/components/ApprovalWorkflows/WorkflowStepSelects.tsx
new file mode 100644
index 00000000..63e30cfa
--- /dev/null
+++ b/src/components/ApprovalWorkflows/WorkflowStepSelects.tsx
@@ -0,0 +1,53 @@
+import Option from "@/interfaces/option";
+import Select from "../Low/Select";
+
+interface Props {
+    leftOptions: Option[];
+    rightOptions: Option[];
+    leftValue?: Option | null;
+    rightValue?: Option | null;
+    onLeftChange: (value: Option | null) => void;
+    onRightChange: (value: Option | null) => void;
+    leftPlaceholder?: string;
+    rightPlaceholder?: string;
+}
+
+export default function WorkflowStepSelects({
+    leftOptions,
+    rightOptions,
+    leftValue,
+    rightValue,
+    onLeftChange,
+    onRightChange,
+    leftPlaceholder = "Select",
+    rightPlaceholder = "Select",
+}: Props) {
+    return (
+        <div
+            className={"flex flex-row gap-0"}
+        >
+            {/* Left Select */}
+            <div className="flex-1 w-[175px]">
+                <Select
+                    options={leftOptions}
+                    value={leftValue}
+                    onChange={onLeftChange}
+                    placeholder={leftPlaceholder}
+                    flat
+                    className={"px-2 py-1 rounded-none rounded-l-2xl"}
+                />
+            </div>
+            {/* Right Select */}
+            <div className="flex-1 w-[175px]">
+                <Select
+                    options={rightOptions}
+                    value={rightValue}
+                    onChange={onRightChange}
+                    placeholder={rightPlaceholder}
+                    flat
+                    className="px-2 py-1 rounded-none rounded-r-2xl"
+                />
+            </div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/src/pages/approval-workflows/[id].tsx b/src/pages/approval-workflows/[id].tsx
index a9571269..1ba5f088 100644
--- a/src/pages/approval-workflows/[id].tsx
+++ b/src/pages/approval-workflows/[id].tsx
@@ -5,17 +5,31 @@ import { sessionOptions } from "@/lib/session";
 import { redirect } from "@/utils";
 import { requestUser } from "@/utils/api";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
+import { AnimatePresence, motion } from "framer-motion";
 import { withIronSessionSsr } from "iron-session/next";
 import Head from "next/head";
 import Link from "next/link";
 import { BsChevronLeft } from "react-icons/bs";
+import { FaRegCheckCircle } from "react-icons/fa";
+import { IoIosAddCircleOutline } from "react-icons/io";
 import { ToastContainer } from "react-toastify";
 
+
 import approvalWorkflowsData from '../../demo/approval_workflows.json'; // to test locally
 
 import RequestedBy from "@/components/ApprovalWorkflows/RequestedBy";
 import StartedOn from "@/components/ApprovalWorkflows/StartedOn";
 import Status from "@/components/ApprovalWorkflows/Status";
+import WorkflowStep, { StepType } from "@/components/ApprovalWorkflows/WorkflowStep";
+import Button from "@/components/Low/Button";
+import { useState } from "react";
+
+interface Step {
+    stepNumber: number;
+    stepType: StepType;
+    finalStep?: boolean;
+    key: number;
+}
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => {
     const user = await requestUser(req, res)
@@ -38,6 +52,47 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
 export default function Home({ approvalWorkflow }: { approvalWorkflow: ApprovalWorkflow }) {
     const { user } = useUser({ redirectTo: "/login" });
 
+    const [selectedButton, setSelectedButton] = useState<"forms" | "progress">("forms");
+
+    const [steps, setSteps] = useState<Step[]>([
+        { stepNumber: 1, stepType: "form-intake", key: 1 },
+        { stepNumber: 2, stepType: "approval-by", finalStep: true, key: 2 },
+    ]);
+    const [stepCounter, setStepCounter] = useState<number>(3); // to guarantee unique keys used for animations
+
+    const addStep = () => {
+        setSteps((prev) => {
+            const nonFinalSteps = prev.slice(0, -1);
+            const finalStep = prev[prev.length - 1];
+            const newStep: Step = { stepNumber: finalStep.stepNumber, stepType: "approval-by", key: stepCounter };
+
+            const updatedFinalStep = { ...finalStep, stepNumber: finalStep.stepNumber + 1 };
+
+            setStepCounter((prev) => prev + 1); //update counter
+
+            return [...nonFinalSteps, newStep, updatedFinalStep];
+        });
+    };
+
+    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        // Handle form submission logic
+        console.log("Form submitted!", steps);
+    };
+
+    const handleDelete = (index: number) => {
+        setSteps((prev) => {
+            const updatedSteps = prev.filter((_, i) => i !== index);
+
+            const recalculatedSteps = updatedSteps.map((step, idx) => ({
+                ...step,
+                stepNumber: idx + 1,
+            }));
+
+            return recalculatedSteps;
+        });
+    };
+
     return (
         <>
             <Head>
@@ -62,17 +117,81 @@ export default function Home({ approvalWorkflow }: { approvalWorkflow: ApprovalW
                             <h1 className="text-2xl font-semibold">{approvalWorkflow.name}</h1>
                         </div>
                     </section>
-                    <section className="flex flex-row gap-6">
-                        <RequestedBy
-                            name="Prof. Álvaro Dória"
-                            profileImage="/blue-stock-photo.png"
-                        />
-                        <StartedOn
-                            date="15/12/2024"
-                        />
-                        <Status
-                            status="pending"
-                        />
+                    <section className="flex flex-col gap-6">
+                        <div className="flex flex-row gap-6">
+                            <RequestedBy
+                                name="Prof. Álvaro Dória"
+                                profileImage="/blue-stock-photo.png"
+                            />
+                            <StartedOn
+                                date="15/12/2024"
+                            />
+                            <Status
+                                status="pending"
+                            />
+                        </div>
+                        <div className="flex flex-row gap-6">
+                            <Button
+                                color="purple"
+                                variant={selectedButton === "forms" ? "solid" : "outline"}
+                                onClick={() => setSelectedButton("forms")}
+                                className="transition-all duration-300 w-56 text-lg font-medium"
+                            >
+                                Forms
+                            </Button>
+                            <Button
+                                color="purple"
+                                variant={selectedButton === "progress" ? "solid" : "outline"}
+                                onClick={() => setSelectedButton("progress")}
+                                className="transition-all duration-300 w-56 text-lg font-medium"
+                            >
+                                Progress
+                            </Button>
+                        </div>
+
+                        <form onSubmit={handleSubmit}>
+                            <div className="flex flex-col gap-6">
+                                <Button
+                                    color="purple"
+                                    variant="solid"
+                                    onClick={addStep}
+                                    className="max-w-fit text-lg font-medium flex items-center gap-2 text-left"
+                                >
+                                    <IoIosAddCircleOutline className="size-6" />
+                                    Add Step
+                                </Button>
+                                <AnimatePresence>
+                                    {steps.map((step, index) => (
+                                        <motion.div
+                                            key={step.key} // Use step.stepNumber as the unique key
+                                            initial={{ opacity: 0, y: -20 }} // Animation on enter
+                                            animate={{ opacity: 1, y: 0 }}   // Animation on update
+                                            exit={{ opacity: 0, x: 20 }}     // Animation on exit
+                                            transition={{ duration: 0.3 }}   // Animation duration
+                                        >
+                                            <WorkflowStep
+                                                editView
+                                                stepNumber={step.stepNumber}
+                                                finalStep={step.finalStep}
+                                                stepType={step.stepType}
+                                                requestedBy="Prof. foo"
+                                                onDelete={() => handleDelete(index)} // Pass index for deletion
+                                            />
+                                        </motion.div>
+                                    ))}
+                                </AnimatePresence>
+
+                                <Button
+                                    type="submit"
+                                    color="purple"
+                                    variant="solid"
+                                    className="max-w-fit text-lg font-medium flex items-center gap-2 text-left"
+                                >
+                                    <FaRegCheckCircle className="size-5" />
+                                    Confirm Exam Workflow Pipeline
+                                </Button>
+                            </div>
+                        </form>
                     </section>
                 </Layout>
             )}
diff --git a/src/pages/approval-workflows/index.tsx b/src/pages/approval-workflows/index.tsx
index e7688193..580e57c1 100644
--- a/src/pages/approval-workflows/index.tsx
+++ b/src/pages/approval-workflows/index.tsx
@@ -145,9 +145,9 @@ export default function ApprovalWorkflows() {
             cell: ({ row }: { row: { original: ApprovalWorkflow } }) => {
                 return (
                     <div className="flex gap-4">
-                        <div data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deleteApprovalWorkflow(row.original.id, row.original.name)}>
+                        <button data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deleteApprovalWorkflow(row.original.id, row.original.name)}>
                             <BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
-                        </div>
+                        </button>
                         <Link data-tip="Edit" href={`/approval-workflows/${row.original.id}`} className="cursor-pointer tooltip">
                             <FaRegEdit className="hover:text-mti-purple-light transition ease-in-out duration-300" />
                         </Link>

From 50d2841349bf3c30877be3b357658d9caec27e98 Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.g.correia@inesctec.pt>
Date: Sun, 19 Jan 2025 22:26:02 +0000
Subject: [PATCH 05/69] Implement reordering of steps

---
 .../ApprovalWorkflows/WorkflowStep.tsx        |  23 +++-
 .../ApprovalWorkflows/WorkflowStepSelects.tsx |   4 +-
 src/pages/approval-workflows/[id].tsx         | 130 +++++++++++-------
 3 files changed, 104 insertions(+), 53 deletions(-)

diff --git a/src/components/ApprovalWorkflows/WorkflowStep.tsx b/src/components/ApprovalWorkflows/WorkflowStep.tsx
index e451744d..f17a8574 100644
--- a/src/components/ApprovalWorkflows/WorkflowStep.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowStep.tsx
@@ -2,6 +2,8 @@ import Option from "@/interfaces/option";
 import clsx from "clsx";
 import { useState } from "react";
 import { BsTrash } from "react-icons/bs";
+import { FaWpforms } from "react-icons/fa6";
+import { LuGripHorizontal } from "react-icons/lu";
 import WorkflowStepNumber from "./WorkflowStepNumber";
 import WorkflowStepSelects from "./WorkflowStepSelects";
 
@@ -57,13 +59,16 @@ export default function WorkflowStep({
     return (
         <div
             className={clsx(
-                'flex items-center space-x-3 w-[600px] p-5 rounded-2xl border-2 border-mti-purple-ultralight',
+                'flex items-center space-x-3 w-[800px] p-5 rounded-2xl border-2 border-mti-purple-ultralight',
                 { 'bg-mti-purple-ultralight': isSelected }
             )}
         >
             <div className="flex w-full items-center">
-                <div className="flex-shrink-0">
+                <div className="flex items-center space-x-3">
                     <WorkflowStepNumber number={stepNumber} isSelected={isSelected} />
+                    {stepNumber !== 1 && !finalStep &&
+                        <LuGripHorizontal className="cursor-grab active:cursor-grabbing" size={25} />
+                    }
                 </div>
 
                 {/* Only show selects if editView === true and stepType === 'approval-by' */}
@@ -83,6 +88,20 @@ export default function WorkflowStep({
                     </div>
                 )}
 
+                {stepNumber === 1 && (
+                    <div className="ml-auto">
+                        <div className={"flex flex-row gap-0"}>
+                            <div className="flex items-center gap-0 text-mti-gray-dim w-[275px] px-5 py-3 border rounded-l-2xl border-mti-gray-platinum">
+                                <FaWpforms size={20} />
+                                <span className="px-3 text-sm font-normal focus:outline-none">Form Intake</span>
+                            </div>
+                            <div className="flex items-center gap-0 text-mti-gray-dim w-[275px] px-5 py-3 border rounded-r-2xl border-mti-gray-platinum">
+                                <span className="text-sm font-normal focus:outline-none">Prof. X</span>
+                            </div>
+                        </div>
+                    </div>
+                )}
+
                 {editView && stepNumber !== 1 && !finalStep && (
                     <button
                         data-tip="Delete"
diff --git a/src/components/ApprovalWorkflows/WorkflowStepSelects.tsx b/src/components/ApprovalWorkflows/WorkflowStepSelects.tsx
index 63e30cfa..78c5b10c 100644
--- a/src/components/ApprovalWorkflows/WorkflowStepSelects.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowStepSelects.tsx
@@ -27,7 +27,7 @@ export default function WorkflowStepSelects({
             className={"flex flex-row gap-0"}
         >
             {/* Left Select */}
-            <div className="flex-1 w-[175px]">
+            <div className="flex-1 w-[275px]">
                 <Select
                     options={leftOptions}
                     value={leftValue}
@@ -38,7 +38,7 @@ export default function WorkflowStepSelects({
                 />
             </div>
             {/* Right Select */}
-            <div className="flex-1 w-[175px]">
+            <div className="flex-1 w-[275px]">
                 <Select
                     options={rightOptions}
                     value={rightValue}
diff --git a/src/pages/approval-workflows/[id].tsx b/src/pages/approval-workflows/[id].tsx
index 1ba5f088..f9f0d42f 100644
--- a/src/pages/approval-workflows/[id].tsx
+++ b/src/pages/approval-workflows/[id].tsx
@@ -5,7 +5,7 @@ import { sessionOptions } from "@/lib/session";
 import { redirect } from "@/utils";
 import { requestUser } from "@/utils/api";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
-import { AnimatePresence, motion } from "framer-motion";
+import { AnimatePresence, Reorder } from "framer-motion";
 import { withIronSessionSsr } from "iron-session/next";
 import Head from "next/head";
 import Link from "next/link";
@@ -25,12 +25,19 @@ import Button from "@/components/Low/Button";
 import { useState } from "react";
 
 interface Step {
-    stepNumber: number;
     stepType: StepType;
+    firstStep?: boolean;
     finalStep?: boolean;
     key: number;
 }
 
+// Variants for animating steps when they are added/removed
+const itemVariants = {
+    initial: { opacity: 0, y: -20 },
+    animate: { opacity: 1, y: 0 },
+    exit: { opacity: 0, x: 20 },
+};
+
 export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => {
     const user = await requestUser(req, res)
     if (!user) return redirect("/login")
@@ -55,22 +62,23 @@ export default function Home({ approvalWorkflow }: { approvalWorkflow: ApprovalW
     const [selectedButton, setSelectedButton] = useState<"forms" | "progress">("forms");
 
     const [steps, setSteps] = useState<Step[]>([
-        { stepNumber: 1, stepType: "form-intake", key: 1 },
-        { stepNumber: 2, stepType: "approval-by", finalStep: true, key: 2 },
+        { stepType: "form-intake", firstStep: true, key: 1 },
+        { stepType: "approval-by", finalStep: true, key: 2 },
     ]);
     const [stepCounter, setStepCounter] = useState<number>(3); // to guarantee unique keys used for animations
+    const firstStep = steps[0];
+    const lastStep = steps[steps.length - 1];
+    const middleSteps = steps.slice(1, steps.length - 1);
 
     const addStep = () => {
         setSteps((prev) => {
-            const nonFinalSteps = prev.slice(0, -1);
-            const finalStep = prev[prev.length - 1];
-            const newStep: Step = { stepNumber: finalStep.stepNumber, stepType: "approval-by", key: stepCounter };
+            const newStep: Step = {
+                key: stepCounter,
+                stepType: "approval-by",
+            };
+            setStepCounter((count) => count + 1);
 
-            const updatedFinalStep = { ...finalStep, stepNumber: finalStep.stepNumber + 1 };
-
-            setStepCounter((prev) => prev + 1); //update counter
-
-            return [...nonFinalSteps, newStep, updatedFinalStep];
+            return [...prev.slice(0, -1), newStep, lastStep];
         });
     };
 
@@ -80,17 +88,24 @@ export default function Home({ approvalWorkflow }: { approvalWorkflow: ApprovalW
         console.log("Form submitted!", steps);
     };
 
-    const handleDelete = (index: number) => {
-        setSteps((prev) => {
-            const updatedSteps = prev.filter((_, i) => i !== index);
+    const handleDelete = (key: number) => {
+        setSteps((prev) => prev.filter((step) => step.key !== key));
+    };
 
-            const recalculatedSteps = updatedSteps.map((step, idx) => ({
-                ...step,
-                stepNumber: idx + 1,
-            }));
+    const handleReorder = (newOrder: Step[]) => {
+        const firstIndex = newOrder.findIndex((s) => s.firstStep);
+        if (firstIndex !== -1 && firstIndex !== 0) {
+            const [first] = newOrder.splice(firstIndex, 1);
+            newOrder.unshift(first);
+        }
 
-            return recalculatedSteps;
-        });
+        const finalIndex = newOrder.findIndex((s) => s.finalStep);
+        if (finalIndex !== -1 && finalIndex !== newOrder.length - 1) {
+            const [final] = newOrder.splice(finalIndex, 1);
+            newOrder.push(final);
+        }
+
+        setSteps(newOrder);
     };
 
     return (
@@ -160,36 +175,53 @@ export default function Home({ approvalWorkflow }: { approvalWorkflow: ApprovalW
                                     <IoIosAddCircleOutline className="size-6" />
                                     Add Step
                                 </Button>
-                                <AnimatePresence>
-                                    {steps.map((step, index) => (
-                                        <motion.div
-                                            key={step.key} // Use step.stepNumber as the unique key
-                                            initial={{ opacity: 0, y: -20 }} // Animation on enter
-                                            animate={{ opacity: 1, y: 0 }}   // Animation on update
-                                            exit={{ opacity: 0, x: 20 }}     // Animation on exit
-                                            transition={{ duration: 0.3 }}   // Animation duration
-                                        >
-                                            <WorkflowStep
-                                                editView
-                                                stepNumber={step.stepNumber}
-                                                finalStep={step.finalStep}
-                                                stepType={step.stepType}
-                                                requestedBy="Prof. foo"
-                                                onDelete={() => handleDelete(index)} // Pass index for deletion
-                                            />
-                                        </motion.div>
-                                    ))}
-                                </AnimatePresence>
 
-                                <Button
-                                    type="submit"
-                                    color="purple"
-                                    variant="solid"
-                                    className="max-w-fit text-lg font-medium flex items-center gap-2 text-left"
+                                <Reorder.Group
+                                    axis="y"
+                                    values={steps}
+                                    onReorder={handleReorder}
+                                    className="flex flex-col gap-4"
                                 >
-                                    <FaRegCheckCircle className="size-5" />
-                                    Confirm Exam Workflow Pipeline
-                                </Button>
+
+                                    <AnimatePresence>
+                                        {steps.map((step, index) => (
+                                            <Reorder.Item
+                                                key={step.key}
+                                                value={step}
+                                                variants={itemVariants}
+                                                initial="initial"
+                                                animate="animate"
+                                                exit="exit"
+                                                transition={{ duration: 0.3 }}
+                                                layout
+                                                drag={!(step.firstStep || step.finalStep)}
+                                            >
+                                                <WorkflowStep
+                                                    editView
+                                                    stepNumber={index + 1}
+                                                    stepType={step.stepType}
+                                                    requestedBy="Prof. Foo"
+                                                    finalStep={step.finalStep}
+                                                    onDelete={() => handleDelete(step.key)}
+                                                />
+                                                {step.finalStep &&
+                                                    <Button
+                                                        type="submit"
+                                                        color="purple"
+                                                        variant="solid"
+                                                        className="max-w-fit text-lg font-medium flex items-center gap-2 text-left mt-7"
+                                                    >
+                                                        <FaRegCheckCircle className="size-5" />
+                                                        Confirm Exam Workflow Pipeline
+                                                    </Button>
+                                                }
+                                            </Reorder.Item>
+                                        ))}
+
+                                    </AnimatePresence>
+
+
+                                </Reorder.Group>
                             </div>
                         </form>
                     </section>

From ae9a49681e838324f7859bb6b84969529c9ce691 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Marques=20Lima?= <francisco.lima@helppier.com>
Date: Mon, 20 Jan 2025 02:52:39 +0000
Subject: [PATCH 06/69] ENCOA-314 : - Implemented Async Select - Changed Stats
 Page User fetching to use Async Select and only fetch the User data when it
 needs - Changed Record Filter to use Async Select - Changed useTicketListener
 to only fetch needed data - Added Sort/Projection to remove unnecessary data
 processing. - Removed some unnecessary data processing.

---
 src/components/Low/AsyncSelect.tsx            |  117 ++
 src/components/Medium/RecordFilter.tsx        |  327 ++--
 src/exams/Selection.tsx                       |  706 +++++----
 src/hooks/useFilterRecordsByUser.tsx          |   20 +-
 src/hooks/usePermissions.tsx                  |    3 +-
 src/hooks/useTicketsListener.tsx              |   26 +-
 src/hooks/useUserData.tsx                     |   27 +
 src/hooks/useUsersSelect.tsx                  |   99 ++
 src/pages/api/sessions/index.ts               |    2 +-
 src/pages/api/stats/user/[user].ts            |    5 +-
 src/pages/api/tickets/assignedToUser/index.ts |   39 +
 src/pages/api/users/search.ts                 |   39 +
 src/pages/record.tsx                          |   17 +-
 src/pages/stats.tsx                           | 1408 ++++++++++-------
 src/pages/training/index.tsx                  |    2 +-
 src/utils/entities.be.ts                      |    4 +-
 src/utils/users.be.ts                         |   58 +-
 17 files changed, 1856 insertions(+), 1043 deletions(-)
 create mode 100644 src/components/Low/AsyncSelect.tsx
 create mode 100644 src/hooks/useUserData.tsx
 create mode 100644 src/hooks/useUsersSelect.tsx
 create mode 100644 src/pages/api/tickets/assignedToUser/index.ts
 create mode 100644 src/pages/api/users/search.ts

diff --git a/src/components/Low/AsyncSelect.tsx b/src/components/Low/AsyncSelect.tsx
new file mode 100644
index 00000000..b125b2ad
--- /dev/null
+++ b/src/components/Low/AsyncSelect.tsx
@@ -0,0 +1,117 @@
+import clsx from "clsx";
+import { useEffect, useState } from "react";
+import { GroupBase, StylesConfig } from "react-select";
+import ReactSelect from "react-select";
+import Option from "@/interfaces/option";
+
+interface Props {
+  defaultValue?: Option | Option[];
+  options: Option[];
+  value?: Option | Option[] | null;
+  isLoading?: boolean;
+  loadOptions: (inputValue: string) => void;
+  onMenuScrollToBottom: (event: WheelEvent | TouchEvent) => void;
+  disabled?: boolean;
+  placeholder?: string;
+  isClearable?: boolean;
+  styles?: StylesConfig<Option, boolean, GroupBase<Option>>;
+  className?: string;
+  label?: string;
+  flat?: boolean;
+}
+
+interface MultiProps {
+  isMulti: true;
+  onChange: (value: Option[] | null) => void;
+}
+
+interface SingleProps {
+  isMulti?: false;
+  onChange: (value: Option | null) => void;
+}
+
+export default function AsyncSelect({
+  value,
+  isMulti,
+  defaultValue,
+  options,
+  loadOptions,
+  onMenuScrollToBottom,
+  placeholder,
+  disabled,
+  onChange,
+  styles,
+  isClearable,
+  isLoading,
+  label,
+  className,
+  flat,
+}: Props & (MultiProps | SingleProps)) {
+  const [target, setTarget] = useState<HTMLElement>();
+
+  useEffect(() => {
+    if (document) setTarget(document.body);
+  }, []);
+
+  return (
+    <div className="w-full flex flex-col gap-3">
+      {label && (
+        <label className="font-normal text-base text-mti-gray-dim">
+          {label}
+        </label>
+      )}
+      <ReactSelect
+        isMulti={isMulti}
+        className={
+          styles
+            ? undefined
+            : clsx(
+                "placeholder:text-mti-gray-cool border-mti-gray-platinum w-full border bg-white text-sm font-normal focus:outline-none",
+                disabled &&
+                  "!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed",
+                flat ? "rounded-md" : "px-4 py-4 rounded-full",
+                className
+              )
+        }
+        isLoading={isLoading}
+        filterOption={null}
+        loadingMessage={() => "Loading..."}
+        onInputChange={(inputValue) => {
+          loadOptions(inputValue);
+        }}
+        options={options}
+        value={value}
+        onChange={onChange as any}
+        placeholder={placeholder}
+        menuPortalTarget={target}
+        defaultValue={defaultValue}
+        onMenuScrollToBottom={onMenuScrollToBottom}
+        styles={
+          styles || {
+            menuPortal: (base) => ({ ...base, zIndex: 9999 }),
+            control: (styles) => ({
+              ...styles,
+              paddingLeft: "4px",
+              border: "none",
+              outline: "none",
+              ":focus": {
+                outline: "none",
+              },
+            }),
+            option: (styles, state) => ({
+              ...styles,
+              backgroundColor: state.isFocused
+                ? "#D5D9F0"
+                : state.isSelected
+                ? "#7872BF"
+                : "white",
+              color: state.isFocused ? "black" : styles.color,
+            }),
+          }
+        }
+        isDisabled={disabled}
+        isClearable={isClearable}
+      />
+    </div>
+  );
+}
diff --git a/src/components/Medium/RecordFilter.tsx b/src/components/Medium/RecordFilter.tsx
index d3cbdc31..3650a331 100644
--- a/src/components/Medium/RecordFilter.tsx
+++ b/src/components/Medium/RecordFilter.tsx
@@ -9,165 +9,216 @@ import useRecordStore from "@/stores/recordStore";
 import { EntityWithRoles } from "@/interfaces/entity";
 import { mapBy } from "@/utils";
 import { useAllowedEntities } from "@/hooks/useEntityPermissions";
-
+import useUsersSelect from "../../hooks/useUsersSelect";
+import AsyncSelect from "../Low/AsyncSelect";
 
 type TimeFilter = "months" | "weeks" | "days";
 type Filter = TimeFilter | "assignments" | undefined;
 
 interface Props {
-	user: User;
-	entities: EntityWithRoles[]
-	users: User[]
-	filterState: {
-		filter: Filter,
-		setFilter: React.Dispatch<React.SetStateAction<Filter>>
-	},
-	assignments?: boolean;
-	children?: ReactNode
+  user: User;
+  entities: EntityWithRoles[];
+  isAdmin?: boolean;
+  filterState: {
+    filter: Filter;
+    setFilter: React.Dispatch<React.SetStateAction<Filter>>;
+  };
+  assignments?: boolean;
+  children?: ReactNode;
 }
 
 const defaultSelectableCorporate = {
-	value: "",
-	label: "All",
+  value: "",
+  label: "All",
 };
 
 const RecordFilter: React.FC<Props> = ({
-	user,
-	entities,
-	users,
-	filterState,
-	assignments = true,
-	children
+  user,
+  entities,
+  filterState,
+  assignments = true,
+  isAdmin = false,
+  children,
 }) => {
-	const { filter, setFilter } = filterState;
+  const { filter, setFilter } = filterState;
 
-	const [entity, setEntity] = useState<string>()
+  const [entity, setEntity] = useState<string>();
 
-	const [, setStatsUserId] = useRecordStore((state) => [
-		state.selectedUser,
-		state.setSelectedUser
-	]);
+  const [, setStatsUserId] = useRecordStore((state) => [
+    state.selectedUser,
+    state.setSelectedUser,
+  ]);
 
-	const allowedViewEntities = useAllowedEntities(user, entities, 'view_student_record')
+	const entitiesToSearch = useMemo(() => {
+	if(entity) return entity
+    if (isAdmin) return undefined;
+    return mapBy(entities, "id");
+  }, [entities, entity, isAdmin]);
 
-	const entityUsers = useMemo(() => !entity ? users : users.filter(u => mapBy(u.entities, 'id').includes(entity)), [users, entity])
+  const { users, isLoading, onScrollLoadMoreOptions, loadOptions } =
+    useUsersSelect({
+      size: 50,
+      orderBy: "name",
+      direction: "asc",
+      entities: entitiesToSearch,
+    });
 
-	useEffect(() => setStatsUserId(user.id), [setStatsUserId, user.id])
+  const allowedViewEntities = useAllowedEntities(
+    user,
+    entities,
+    "view_student_record"
+  );
+  
 
-	const toggleFilter = (value: "months" | "weeks" | "days" | "assignments") => {
-		setFilter((prev) => (prev === value ? undefined : value));
-	};
+  useEffect(() => setStatsUserId(user.id), [setStatsUserId, user.id]);
 
-	return (
-		<div className="w-full flex -xl:flex-col -xl:gap-4 justify-between items-center">
-			<div className="xl:w-3/4 flex gap-2">
-				{checkAccess(user, ["developer", "admin", "mastercorporate"]) && !children && (
-					<>
-						<div className="flex flex-col gap-2 w-full">
-							<label className="font-normal text-base text-mti-gray-dim">Entity</label>
+  const toggleFilter = (value: "months" | "weeks" | "days" | "assignments") => {
+    setFilter((prev) => (prev === value ? undefined : value));
+  };
 
-							<Select
-								options={allowedViewEntities.map((e) => ({ value: e.id, label: e.label }))}
-								onChange={(value) => setEntity(value?.value || undefined)}
-								isClearable
-								styles={{
-									menuPortal: (base) => ({ ...base, zIndex: 9999 }),
-									option: (styles, state) => ({
-										...styles,
-										backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
-										color: state.isFocused ? "black" : styles.color,
-									}),
-								}} />
-						</div>
-						<div className="flex flex-col gap-2 w-full">
-							<label className="font-normal text-base text-mti-gray-dim">User</label>
+  return (
+    <div className="w-full flex -xl:flex-col -xl:gap-4 justify-between items-center">
+      <div className="xl:w-3/4 flex gap-2">
+        {checkAccess(user, ["developer", "admin", "mastercorporate"]) &&
+          !children && (
+            <>
+              <div className="flex flex-col gap-2 w-full">
+                <label className="font-normal text-base text-mti-gray-dim">
+                  Entity
+                </label>
 
-							<Select
-								options={entityUsers.map((x) => ({
-									value: x.id,
-									label: `${x.name} - ${x.email}`,
-								}))}
-								defaultValue={{ value: user.id, label: `${user.name} - ${user.email}` }}
-								onChange={(value) => setStatsUserId(value?.value!)}
-								styles={{
-									menuPortal: (base) => ({ ...base, zIndex: 9999 }),
-									option: (styles, state) => ({
-										...styles,
-										backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
-										color: state.isFocused ? "black" : styles.color,
-									}),
-								}}
-							/>
-						</div>
-					</>
-				)}
-				{(user.type === "corporate" || user.type === "teacher") && !children && (
-					<div className="flex flex-col gap-2">
-						<label className="font-normal text-base text-mti-gray-dim">User</label>
+                <Select
+                  options={allowedViewEntities.map((e) => ({
+                    value: e.id,
+                    label: e.label,
+                  }))}
+                  onChange={(value) => setEntity(value?.value || undefined)}
+                  isClearable
+                  styles={{
+                    menuPortal: (base) => ({ ...base, zIndex: 9999 }),
+                    option: (styles, state) => ({
+                      ...styles,
+                      backgroundColor: state.isFocused
+                        ? "#D5D9F0"
+                        : state.isSelected
+                        ? "#7872BF"
+                        : "white",
+                      color: state.isFocused ? "black" : styles.color,
+                    }),
+                  }}
+                />
+              </div>
+              <div className="flex flex-col gap-2 w-full">
+                <label className="font-normal text-base text-mti-gray-dim">
+                  User
+                </label>
 
-						<Select
-							options={users
-								.map((x) => ({
-									value: x.id,
-									label: `${x.name} - ${x.email}`,
-								}))}
-							defaultValue={{ value: user.id, label: `${user.name} - ${user.email}` }}
-							onChange={(value) => setStatsUserId(value?.value!)}
-							styles={{
-								menuPortal: (base) => ({ ...base, zIndex: 9999 }),
-								option: (styles, state) => ({
-									...styles,
-									backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
-									color: state.isFocused ? "black" : styles.color,
-								}),
-							}}
-						/>
-					</div>
-				)}
-				{children}
-			</div>
-			<div className="flex gap-4 w-full justify-center xl:justify-end">
-				{assignments && (
-					<button
-						className={clsx(
-							"bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
-							"transition duration-300 ease-in-out",
-							filter === "assignments" && "!bg-mti-purple-light !text-white",
-						)}
-						onClick={() => toggleFilter("assignments")}>
-						Assignments
-					</button>
-				)}
-				<button
-					className={clsx(
-						"bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
-						"transition duration-300 ease-in-out",
-						filter === "months" && "!bg-mti-purple-light !text-white",
-					)}
-					onClick={() => toggleFilter("months")}>
-					Last month
-				</button>
-				<button
-					className={clsx(
-						"bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
-						"transition duration-300 ease-in-out",
-						filter === "weeks" && "!bg-mti-purple-light !text-white",
-					)}
-					onClick={() => toggleFilter("weeks")}>
-					Last week
-				</button>
-				<button
-					className={clsx(
-						"bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
-						"transition duration-300 ease-in-out",
-						filter === "days" && "!bg-mti-purple-light !text-white",
-					)}
-					onClick={() => toggleFilter("days")}>
-					Last day
-				</button>
-			</div>
-		</div>
-	);
-}
+                <AsyncSelect
+                  isLoading={isLoading}
+                  loadOptions={loadOptions}
+                  onMenuScrollToBottom={onScrollLoadMoreOptions}
+                  options={users}
+                  defaultValue={{
+                    value: user.id,
+                    label: `${user.name} - ${user.email}`,
+                  }}
+                  onChange={(value) => setStatsUserId(value?.value!)}
+                  styles={{
+                    menuPortal: (base) => ({ ...base, zIndex: 9999 }),
+                    option: (styles, state) => ({
+                      ...styles,
+                      backgroundColor: state.isFocused
+                        ? "#D5D9F0"
+                        : state.isSelected
+                        ? "#7872BF"
+                        : "white",
+                      color: state.isFocused ? "black" : styles.color,
+                    }),
+                  }}
+                />
+              </div>
+            </>
+          )}
+        {(user.type === "corporate" || user.type === "teacher") &&
+          !children && (
+            <div className="flex flex-col gap-2">
+              <label className="font-normal text-base text-mti-gray-dim">
+                User
+              </label>
+
+              <AsyncSelect
+                isLoading={isLoading}
+                loadOptions={loadOptions}
+                onMenuScrollToBottom={onScrollLoadMoreOptions}
+                options={users}
+                defaultValue={{
+                  value: user.id,
+                  label: `${user.name} - ${user.email}`,
+                }}
+                onChange={(value) => setStatsUserId(value?.value!)}
+                styles={{
+                  menuPortal: (base) => ({ ...base, zIndex: 9999 }),
+                  option: (styles, state) => ({
+                    ...styles,
+                    backgroundColor: state.isFocused
+                      ? "#D5D9F0"
+                      : state.isSelected
+                      ? "#7872BF"
+                      : "white",
+                    color: state.isFocused ? "black" : styles.color,
+                  }),
+                }}
+              />
+            </div>
+          )}
+        {children}
+      </div>
+      <div className="flex gap-4 w-full justify-center xl:justify-end">
+        {assignments && (
+          <button
+            className={clsx(
+              "bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
+              "transition duration-300 ease-in-out",
+              filter === "assignments" && "!bg-mti-purple-light !text-white"
+            )}
+            onClick={() => toggleFilter("assignments")}
+          >
+            Assignments
+          </button>
+        )}
+        <button
+          className={clsx(
+            "bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
+            "transition duration-300 ease-in-out",
+            filter === "months" && "!bg-mti-purple-light !text-white"
+          )}
+          onClick={() => toggleFilter("months")}
+        >
+          Last month
+        </button>
+        <button
+          className={clsx(
+            "bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
+            "transition duration-300 ease-in-out",
+            filter === "weeks" && "!bg-mti-purple-light !text-white"
+          )}
+          onClick={() => toggleFilter("weeks")}
+        >
+          Last week
+        </button>
+        <button
+          className={clsx(
+            "bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
+            "transition duration-300 ease-in-out",
+            filter === "days" && "!bg-mti-purple-light !text-white"
+          )}
+          onClick={() => toggleFilter("days")}
+        >
+          Last day
+        </button>
+      </div>
+    </div>
+  );
+};
 
 export default RecordFilter;
diff --git a/src/exams/Selection.tsx b/src/exams/Selection.tsx
index 6a39ff0a..64f9f615 100644
--- a/src/exams/Selection.tsx
+++ b/src/exams/Selection.tsx
@@ -1,310 +1,440 @@
 /* eslint-disable @next/next/no-img-element */
-import {useMemo, useState} from "react";
-import {Module} from "@/interfaces";
+import { useMemo, useState } from "react";
+import { Module } from "@/interfaces";
 import clsx from "clsx";
-import {Stat, User} from "@/interfaces/user";
-import ProgressBar from "@/components/Low/ProgressBar";
-import {BsArrowRepeat, BsBook, BsCheck, BsCheckCircle, BsClipboard, BsHeadphones, BsMegaphone, BsPen, BsXCircle} from "react-icons/bs";
-import {totalExamsByModule} from "@/utils/stats";
+import { Stat, User } from "@/interfaces/user";
+import {
+  BsArrowRepeat,
+  BsBook,
+  BsCheck,
+  BsCheckCircle,
+  BsClipboard,
+  BsHeadphones,
+  BsMegaphone,
+  BsPen,
+  BsXCircle,
+} from "react-icons/bs";
+import { totalExamsByModule } from "@/utils/stats";
 import useFilterRecordsByUser from "@/hooks/useFilterRecordsByUser";
 import Button from "@/components/Low/Button";
-import {calculateAverageLevel} from "@/utils/score";
-import {sortByModuleName} from "@/utils/moduleUtils";
-import {capitalize} from "lodash";
+import { sortByModuleName } from "@/utils/moduleUtils";
+import { capitalize } from "lodash";
 import ProfileSummary from "@/components/ProfileSummary";
-import {ShuffleMap, Shuffles, Variant} from "@/interfaces/exam";
-import useSessions, {Session} from "@/hooks/useSessions";
+import { Variant } from "@/interfaces/exam";
+import useSessions, { Session } from "@/hooks/useSessions";
 import SessionCard from "@/components/Medium/SessionCard";
 import useExamStore from "@/stores/exam";
 import moment from "moment";
 
 interface Props {
-	user: User;
-	page: "exercises" | "exams";
-	onStart: (modules: Module[], avoidRepeated: boolean, variant: Variant) => void;
+  user: User;
+  page: "exercises" | "exams";
+  onStart: (
+    modules: Module[],
+    avoidRepeated: boolean,
+    variant: Variant
+  ) => void;
 }
 
-export default function Selection({user, page, onStart}: Props) {
-	const [selectedModules, setSelectedModules] = useState<Module[]>([]);
-	const [avoidRepeatedExams, setAvoidRepeatedExams] = useState(true);
-	const [variant, setVariant] = useState<Variant>("full");
+export default function Selection({ user, page, onStart }: Props) {
+  const [selectedModules, setSelectedModules] = useState<Module[]>([]);
+  const [avoidRepeatedExams, setAvoidRepeatedExams] = useState(true);
+  const [variant, setVariant] = useState<Variant>("full");
 
-	const {data: stats} = useFilterRecordsByUser<Stat[]>(user?.id);
-	const {sessions, isLoading, reload} = useSessions(user.id);
+  const { data: stats } = useFilterRecordsByUser<Stat[]>(user?.id);
+  const { sessions, isLoading, reload } = useSessions(user.id);
 
-	const dispatch = useExamStore((state) => state.dispatch);
+  const dispatch = useExamStore((state) => state.dispatch);
 
-	const toggleModule = (module: Module) => {
-		const modules = selectedModules.filter((x) => x !== module);
-		setSelectedModules((prev) => (prev.includes(module) ? modules : [...modules, module]));
-	};
+  const toggleModule = (module: Module) => {
+    const modules = selectedModules.filter((x) => x !== module);
+    setSelectedModules((prev) =>
+      prev.includes(module) ? modules : [...modules, module]
+    );
+  };
 
-	const isCompleteExam = useMemo(() =>
-		["reading", "listening", "writing", "speaking"].every(m => selectedModules.includes(m as Module)), [selectedModules]
-	)
+  const isCompleteExam = useMemo(
+    () =>
+      ["reading", "listening", "writing", "speaking"].every((m) =>
+        selectedModules.includes(m as Module)
+      ),
+    [selectedModules]
+  );
 
-	const loadSession = async (session: Session) => {
-		dispatch({type: "SET_SESSION", payload: { session }})
-	};
+  const loadSession = async (session: Session) => {
+    dispatch({ type: "SET_SESSION", payload: { session } });
+  };
 
-	return (
-		<>
-			<div className="relative flex h-full w-full flex-col gap-8 md:gap-16">
-				{user && (
-					<ProfileSummary
-						user={user}
-						items={[
-							{
-								icon: <BsBook className="text-ielts-reading h-6 w-6 md:h-8 md:w-8" />,
-								label: "Reading",
-								value: totalExamsByModule(stats, "reading"),
-								tooltip: "The amount of reading exams performed.",
-							},
-							{
-								icon: <BsHeadphones className="text-ielts-listening h-6 w-6 md:h-8 md:w-8" />,
-								label: "Listening",
-								value: totalExamsByModule(stats, "listening"),
-								tooltip: "The amount of listening exams performed.",
-							},
-							{
-								icon: <BsPen className="text-ielts-writing h-6 w-6 md:h-8 md:w-8" />,
-								label: "Writing",
-								value: totalExamsByModule(stats, "writing"),
-								tooltip: "The amount of writing exams performed.",
-							},
-							{
-								icon: <BsMegaphone className="text-ielts-speaking h-6 w-6 md:h-8 md:w-8" />,
-								label: "Speaking",
-								value: totalExamsByModule(stats, "speaking"),
-								tooltip: "The amount of speaking exams performed.",
-							},
-							{
-								icon: <BsClipboard className="text-ielts-level h-6 w-6 md:h-8 md:w-8" />,
-								label: "Level",
-								value: totalExamsByModule(stats, "level"),
-								tooltip: "The amount of level exams performed.",
-							},
-						]}
-					/>
-				)}
+  return (
+    <>
+      <div className="relative flex h-full w-full flex-col gap-8 md:gap-16">
+        {user && (
+          <ProfileSummary
+            user={user}
+            items={[
+              {
+                icon: (
+                  <BsBook className="text-ielts-reading h-6 w-6 md:h-8 md:w-8" />
+                ),
+                label: "Reading",
+                value: totalExamsByModule(stats, "reading"),
+                tooltip: "The amount of reading exams performed.",
+              },
+              {
+                icon: (
+                  <BsHeadphones className="text-ielts-listening h-6 w-6 md:h-8 md:w-8" />
+                ),
+                label: "Listening",
+                value: totalExamsByModule(stats, "listening"),
+                tooltip: "The amount of listening exams performed.",
+              },
+              {
+                icon: (
+                  <BsPen className="text-ielts-writing h-6 w-6 md:h-8 md:w-8" />
+                ),
+                label: "Writing",
+                value: totalExamsByModule(stats, "writing"),
+                tooltip: "The amount of writing exams performed.",
+              },
+              {
+                icon: (
+                  <BsMegaphone className="text-ielts-speaking h-6 w-6 md:h-8 md:w-8" />
+                ),
+                label: "Speaking",
+                value: totalExamsByModule(stats, "speaking"),
+                tooltip: "The amount of speaking exams performed.",
+              },
+              {
+                icon: (
+                  <BsClipboard className="text-ielts-level h-6 w-6 md:h-8 md:w-8" />
+                ),
+                label: "Level",
+                value: totalExamsByModule(stats, "level"),
+                tooltip: "The amount of level exams performed.",
+              },
+            ]}
+          />
+        )}
 
-				<section className="flex flex-col gap-3">
-					<span className="text-lg font-bold">About {capitalize(page)}</span>
-					<span className="text-mti-gray-taupe">
-						{page === "exercises" && (
-							<>
-								In the realm of language acquisition, practice makes perfect, and our exercises are the key to unlocking your full
-								potential. Dive into a world of interactive and engaging exercises that cater to diverse learning styles. From grammar
-								drills that build a strong foundation to vocabulary challenges that broaden your lexicon, our exercises are carefully
-								designed to make learning English both enjoyable and effective. Whether you&apos;re looking to reinforce specific
-								skills or embark on a holistic language journey, our exercises are your companions in the pursuit of excellence.
-								Embrace the joy of learning as you navigate through a variety of activities that cater to every facet of language
-								acquisition. Your linguistic adventure starts here!
-							</>
-						)}
-						{page === "exams" && (
-							<>
-								Welcome to the heart of success on your English language journey! Our exams are crafted with precision to assess and
-								enhance your language skills. Each test is a passport to your linguistic prowess, designed to challenge and elevate
-								your abilities. Whether you&apos;re a beginner or a seasoned learner, our exams cater to all levels, providing a
-								comprehensive evaluation of your reading, writing, speaking, and listening skills. Prepare to embark on a journey of
-								self-discovery and language mastery as you navigate through our thoughtfully curated exams. Your success is not just a
-								destination; it&apos;s a testament to your dedication and our commitment to empowering you with the English language.
-							</>
-						)}
-					</span>
-				</section>
+        <section className="flex flex-col gap-3">
+          <span className="text-lg font-bold">About {capitalize(page)}</span>
+          <span className="text-mti-gray-taupe">
+            {page === "exercises" && (
+              <>
+                In the realm of language acquisition, practice makes perfect,
+                and our exercises are the key to unlocking your full potential.
+                Dive into a world of interactive and engaging exercises that
+                cater to diverse learning styles. From grammar drills that build
+                a strong foundation to vocabulary challenges that broaden your
+                lexicon, our exercises are carefully designed to make learning
+                English both enjoyable and effective. Whether you&apos;re
+                looking to reinforce specific skills or embark on a holistic
+                language journey, our exercises are your companions in the
+                pursuit of excellence. Embrace the joy of learning as you
+                navigate through a variety of activities that cater to every
+                facet of language acquisition. Your linguistic adventure starts
+                here!
+              </>
+            )}
+            {page === "exams" && (
+              <>
+                Welcome to the heart of success on your English language
+                journey! Our exams are crafted with precision to assess and
+                enhance your language skills. Each test is a passport to your
+                linguistic prowess, designed to challenge and elevate your
+                abilities. Whether you&apos;re a beginner or a seasoned learner,
+                our exams cater to all levels, providing a comprehensive
+                evaluation of your reading, writing, speaking, and listening
+                skills. Prepare to embark on a journey of self-discovery and
+                language mastery as you navigate through our thoughtfully
+                curated exams. Your success is not just a destination; it&apos;s
+                a testament to your dedication and our commitment to empowering
+                you with the English language.
+              </>
+            )}
+          </span>
+        </section>
 
-				{sessions.length > 0 && (
-					<section className="flex flex-col gap-3 md:gap-3">
-						<div className="flex items-center gap-4">
-							<div
-								onClick={reload}
-								className="text-mti-purple-light hover:text-mti-purple-dark flex cursor-pointer items-center gap-2 transition duration-300 ease-in-out">
-								<span className="text-mti-black text-lg font-bold">Unfinished Sessions</span>
-								<BsArrowRepeat className={clsx("text-xl", isLoading && "animate-spin")} />
-							</div>
-						</div>
-						<span className="text-mti-gray-taupe flex gap-8 overflow-x-auto pb-2">
-							{sessions
-								.sort((a, b) => moment(b.date).diff(moment(a.date)))
-								.map((session) => (
-									<SessionCard session={session} key={session.sessionId} reload={reload} loadSession={loadSession} />
-								))}
-						</span>
-					</section>
-				)}
+        {sessions.length > 0 && (
+          <section className="flex flex-col gap-3 md:gap-3">
+            <div className="flex items-center gap-4">
+              <div
+                onClick={reload}
+                className="text-mti-purple-light hover:text-mti-purple-dark flex cursor-pointer items-center gap-2 transition duration-300 ease-in-out"
+              >
+                <span className="text-mti-black text-lg font-bold">
+                  Unfinished Sessions
+                </span>
+                <BsArrowRepeat
+                  className={clsx("text-xl", isLoading && "animate-spin")}
+                />
+              </div>
+            </div>
+            <span className="text-mti-gray-taupe flex gap-8 overflow-x-auto pb-2">
+              {sessions.map((session) => (
+                <SessionCard
+                  session={session}
+                  key={session.sessionId}
+                  reload={reload}
+                  loadSession={loadSession}
+                />
+              ))}
+            </span>
+          </section>
+        )}
 
-				<section className="-lg:flex-col -lg:items-center -lg:gap-12 mt-4 flex w-full justify-between gap-8">
-					<div
-						onClick={!selectedModules.includes("level") ? () => toggleModule("reading") : undefined}
-						className={clsx(
-							"bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
-							selectedModules.includes("reading") ? "border-mti-purple-light" : "border-mti-gray-platinum",
-						)}>
-						<div className="bg-ielts-reading absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
-							<BsBook className="h-7 w-7 text-white" />
-						</div>
-						<span className="font-semibold">Reading:</span>
-						<p className="text-left text-xs">
-							Expand your vocabulary, improve your reading comprehension and improve your ability to interpret texts in English.
-						</p>
-						{!selectedModules.includes("reading") && !selectedModules.includes("level") && (
-							<div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
-						)}
-						{(selectedModules.includes("reading")) && (
-							<BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
-						)}
-						{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />}
-					</div>
-					<div
-						onClick={!selectedModules.includes("level") ? () => toggleModule("listening") : undefined}
-						className={clsx(
-							"bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
-							selectedModules.includes("listening") ? "border-mti-purple-light" : "border-mti-gray-platinum",
-						)}>
-						<div className="bg-ielts-listening absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
-							<BsHeadphones className="h-7 w-7 text-white" />
-						</div>
-						<span className="font-semibold">Listening:</span>
-						<p className="text-left text-xs">
-							Improve your ability to follow conversations in English and your ability to understand different accents and intonations.
-						</p>
-						{!selectedModules.includes("listening") && !selectedModules.includes("level") && (
-							<div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
-						)}
-						{(selectedModules.includes("listening")) && (
-							<BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
-						)}
-						{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />}
-					</div>
-					<div
-						onClick={!selectedModules.includes("level") ? () => toggleModule("writing") : undefined}
-						className={clsx(
-							"bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
-							selectedModules.includes("writing") ? "border-mti-purple-light" : "border-mti-gray-platinum",
-						)}>
-						<div className="bg-ielts-writing absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
-							<BsPen className="h-7 w-7 text-white" />
-						</div>
-						<span className="font-semibold">Writing:</span>
-						<p className="text-left text-xs">
-							Allow you to practice writing in a variety of formats, from simple paragraphs to complex essays.
-						</p>
-						{!selectedModules.includes("writing") && !selectedModules.includes("level") && (
-							<div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
-						)}
-						{(selectedModules.includes("writing")) && (
-							<BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
-						)}
-						{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />}
-					</div>
-					<div
-						onClick={!selectedModules.includes("level") ? () => toggleModule("speaking") : undefined}
-						className={clsx(
-							"bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
-							selectedModules.includes("speaking") ? "border-mti-purple-light" : "border-mti-gray-platinum",
-						)}>
-						<div className="bg-ielts-speaking absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
-							<BsMegaphone className="h-7 w-7 text-white" />
-						</div>
-						<span className="font-semibold">Speaking:</span>
-						<p className="text-left text-xs">
-							You&apos;ll have access to interactive dialogs, pronunciation exercises and speech recordings.
-						</p>
-						{!selectedModules.includes("speaking") && !selectedModules.includes("level") && (
-							<div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
-						)}
-						{(selectedModules.includes("speaking")) && (
-							<BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
-						)}
-						{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />}
-					</div>
-					<div
-						onClick={selectedModules.length === 0 || selectedModules.includes("level") ? () => toggleModule("level") : undefined}
-						className={clsx(
-							"bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
-							selectedModules.includes("level") ? "border-mti-purple-light" : "border-mti-gray-platinum",
-						)}>
-						<div className="bg-ielts-level absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
-							<BsClipboard className="h-7 w-7 text-white" />
-						</div>
-						<span className="font-semibold">Level:</span>
-						<p className="text-left text-xs">You&apos;ll be able to test your english level with multiple choice questions.</p>
-						{!selectedModules.includes("level") && selectedModules.length === 0 && (
-							<div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
-						)}
-						{(selectedModules.includes("level")) && (
-							<BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
-						)}
-						{!selectedModules.includes("level") && selectedModules.length > 0 && (
-							<BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />
-						)}
-					</div>
-				</section>
-				<div className="-md:flex-col -md:gap-4 -md:justify-center flex w-full items-center md:justify-between">
-					<div className="flex w-full flex-col items-center gap-3">
-						<div
-							className="text-mti-gray-dim -md:justify-center flex w-full cursor-pointer items-center gap-3 text-sm"
-							onClick={() => setAvoidRepeatedExams((prev) => !prev)}>
-							<input type="checkbox" className="hidden" />
-							<div
-								className={clsx(
-									"border-mti-purple-light flex h-6 w-6 items-center justify-center rounded-md border bg-white",
-									"transition duration-300 ease-in-out",
-									avoidRepeatedExams && "!bg-mti-purple-light ",
-								)}>
-								<BsCheck color="white" className="h-full w-full" />
-							</div>
-							<span className="tooltip" data-tip="If possible, the platform will choose exams not yet done.">
-								Avoid Repeated Questions
-							</span>
-						</div>
-						<div
-							className="text-mti-gray-dim -md:justify-center flex w-full cursor-pointer items-center  gap-3 text-sm"
-							onClick={() => setVariant((prev) => (prev === "full" ? "partial" : "full"))}>
-							<input type="checkbox" className="hidden" />
-							<div
-								className={clsx(
-									"border-mti-purple-light flex h-6 w-6 items-center justify-center rounded-md border bg-white",
-									"transition duration-300 ease-in-out",
-									variant === "full" && "!bg-mti-purple-light ",
-								)}>
-								<BsCheck color="white" className="h-full w-full" />
-							</div>
-							<span>Full length exams</span>
-						</div>
-					</div>
-					<div className="tooltip w-full" data-tip={`Your screen size is too small to do ${page}`}>
-						<Button color="purple" className="w-full max-w-xs px-12 md:hidden" disabled>
-							Start Exam
-						</Button>
-					</div>
-					<div className="flex items-center gap-4 w-full">
-						<Button
-							color="green"
-							variant={isCompleteExam ? "solid" : "outline"}
-							onClick={() => isCompleteExam ? setSelectedModules([]) : setSelectedModules(["reading", "listening", "writing", "speaking"])}
-							className="-md:hidden w-full max-w-xs px-12 md:self-end"
-						>
-								Complete Exam
-						</Button>
-						<Button
-							onClick={() =>
-								onStart(
-									selectedModules.sort(sortByModuleName),
-									avoidRepeatedExams,
-									variant,
-								)
-							}
-							color="purple"
-							className="-md:hidden w-full max-w-xs px-12 md:self-end"
-							disabled={selectedModules.length === 0}>
-							Start Exam
-						</Button>
-					</div>
-				</div>
-			</div>
-		</>
-	);
+        <section className="-lg:flex-col -lg:items-center -lg:gap-12 mt-4 flex w-full justify-between gap-8">
+          <div
+            onClick={
+              !selectedModules.includes("level")
+                ? () => toggleModule("reading")
+                : undefined
+            }
+            className={clsx(
+              "bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
+              selectedModules.includes("reading")
+                ? "border-mti-purple-light"
+                : "border-mti-gray-platinum"
+            )}
+          >
+            <div className="bg-ielts-reading absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
+              <BsBook className="h-7 w-7 text-white" />
+            </div>
+            <span className="font-semibold">Reading:</span>
+            <p className="text-left text-xs">
+              Expand your vocabulary, improve your reading comprehension and
+              improve your ability to interpret texts in English.
+            </p>
+            {!selectedModules.includes("reading") &&
+              !selectedModules.includes("level") && (
+                <div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
+              )}
+            {selectedModules.includes("reading") && (
+              <BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
+            )}
+            {selectedModules.includes("level") && (
+              <BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />
+            )}
+          </div>
+          <div
+            onClick={
+              !selectedModules.includes("level")
+                ? () => toggleModule("listening")
+                : undefined
+            }
+            className={clsx(
+              "bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
+              selectedModules.includes("listening")
+                ? "border-mti-purple-light"
+                : "border-mti-gray-platinum"
+            )}
+          >
+            <div className="bg-ielts-listening absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
+              <BsHeadphones className="h-7 w-7 text-white" />
+            </div>
+            <span className="font-semibold">Listening:</span>
+            <p className="text-left text-xs">
+              Improve your ability to follow conversations in English and your
+              ability to understand different accents and intonations.
+            </p>
+            {!selectedModules.includes("listening") &&
+              !selectedModules.includes("level") && (
+                <div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
+              )}
+            {selectedModules.includes("listening") && (
+              <BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
+            )}
+            {selectedModules.includes("level") && (
+              <BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />
+            )}
+          </div>
+          <div
+            onClick={
+              !selectedModules.includes("level")
+                ? () => toggleModule("writing")
+                : undefined
+            }
+            className={clsx(
+              "bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
+              selectedModules.includes("writing")
+                ? "border-mti-purple-light"
+                : "border-mti-gray-platinum"
+            )}
+          >
+            <div className="bg-ielts-writing absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
+              <BsPen className="h-7 w-7 text-white" />
+            </div>
+            <span className="font-semibold">Writing:</span>
+            <p className="text-left text-xs">
+              Allow you to practice writing in a variety of formats, from simple
+              paragraphs to complex essays.
+            </p>
+            {!selectedModules.includes("writing") &&
+              !selectedModules.includes("level") && (
+                <div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
+              )}
+            {selectedModules.includes("writing") && (
+              <BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
+            )}
+            {selectedModules.includes("level") && (
+              <BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />
+            )}
+          </div>
+          <div
+            onClick={
+              !selectedModules.includes("level")
+                ? () => toggleModule("speaking")
+                : undefined
+            }
+            className={clsx(
+              "bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
+              selectedModules.includes("speaking")
+                ? "border-mti-purple-light"
+                : "border-mti-gray-platinum"
+            )}
+          >
+            <div className="bg-ielts-speaking absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
+              <BsMegaphone className="h-7 w-7 text-white" />
+            </div>
+            <span className="font-semibold">Speaking:</span>
+            <p className="text-left text-xs">
+              You&apos;ll have access to interactive dialogs, pronunciation
+              exercises and speech recordings.
+            </p>
+            {!selectedModules.includes("speaking") &&
+              !selectedModules.includes("level") && (
+                <div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
+              )}
+            {selectedModules.includes("speaking") && (
+              <BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
+            )}
+            {selectedModules.includes("level") && (
+              <BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />
+            )}
+          </div>
+          <div
+            onClick={
+              selectedModules.length === 0 || selectedModules.includes("level")
+                ? () => toggleModule("level")
+                : undefined
+            }
+            className={clsx(
+              "bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
+              selectedModules.includes("level")
+                ? "border-mti-purple-light"
+                : "border-mti-gray-platinum"
+            )}
+          >
+            <div className="bg-ielts-level absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
+              <BsClipboard className="h-7 w-7 text-white" />
+            </div>
+            <span className="font-semibold">Level:</span>
+            <p className="text-left text-xs">
+              You&apos;ll be able to test your english level with multiple
+              choice questions.
+            </p>
+            {!selectedModules.includes("level") &&
+              selectedModules.length === 0 && (
+                <div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
+              )}
+            {selectedModules.includes("level") && (
+              <BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
+            )}
+            {!selectedModules.includes("level") &&
+              selectedModules.length > 0 && (
+                <BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />
+              )}
+          </div>
+        </section>
+        <div className="-md:flex-col -md:gap-4 -md:justify-center flex w-full items-center md:justify-between">
+          <div className="flex w-full flex-col items-center gap-3">
+            <div
+              className="text-mti-gray-dim -md:justify-center flex w-full cursor-pointer items-center gap-3 text-sm"
+              onClick={() => setAvoidRepeatedExams((prev) => !prev)}
+            >
+              <input type="checkbox" className="hidden" />
+              <div
+                className={clsx(
+                  "border-mti-purple-light flex h-6 w-6 items-center justify-center rounded-md border bg-white",
+                  "transition duration-300 ease-in-out",
+                  avoidRepeatedExams && "!bg-mti-purple-light "
+                )}
+              >
+                <BsCheck color="white" className="h-full w-full" />
+              </div>
+              <span
+                className="tooltip"
+                data-tip="If possible, the platform will choose exams not yet done."
+              >
+                Avoid Repeated Questions
+              </span>
+            </div>
+            <div
+              className="text-mti-gray-dim -md:justify-center flex w-full cursor-pointer items-center  gap-3 text-sm"
+              onClick={() =>
+                setVariant((prev) => (prev === "full" ? "partial" : "full"))
+              }
+            >
+              <input type="checkbox" className="hidden" />
+              <div
+                className={clsx(
+                  "border-mti-purple-light flex h-6 w-6 items-center justify-center rounded-md border bg-white",
+                  "transition duration-300 ease-in-out",
+                  variant === "full" && "!bg-mti-purple-light "
+                )}
+              >
+                <BsCheck color="white" className="h-full w-full" />
+              </div>
+              <span>Full length exams</span>
+            </div>
+          </div>
+          <div
+            className="tooltip w-full"
+            data-tip={`Your screen size is too small to do ${page}`}
+          >
+            <Button
+              color="purple"
+              className="w-full max-w-xs px-12 md:hidden"
+              disabled
+            >
+              Start Exam
+            </Button>
+          </div>
+          <div className="flex items-center gap-4 w-full">
+            <Button
+              color="green"
+              variant={isCompleteExam ? "solid" : "outline"}
+              onClick={() =>
+                isCompleteExam
+                  ? setSelectedModules([])
+                  : setSelectedModules([
+                      "reading",
+                      "listening",
+                      "writing",
+                      "speaking",
+                    ])
+              }
+              className="-md:hidden w-full max-w-xs px-12 md:self-end"
+            >
+              Complete Exam
+            </Button>
+            <Button
+              onClick={() =>
+                onStart(
+                  selectedModules.sort(sortByModuleName),
+                  avoidRepeatedExams,
+                  variant
+                )
+              }
+              color="purple"
+              className="-md:hidden w-full max-w-xs px-12 md:self-end"
+              disabled={selectedModules.length === 0}
+            >
+              Start Exam
+            </Button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
 }
diff --git a/src/hooks/useFilterRecordsByUser.tsx b/src/hooks/useFilterRecordsByUser.tsx
index 908dab17..5add150b 100644
--- a/src/hooks/useFilterRecordsByUser.tsx
+++ b/src/hooks/useFilterRecordsByUser.tsx
@@ -3,13 +3,13 @@ import { useEffect, useState } from "react";
 
 const endpoints: Record<string, string> = {
   stats: "/api/stats",
-  training: "/api/training"
+  training: "/api/training",
 };
 
 export default function useFilterRecordsByUser<T extends any[]>(
   id?: string,
   shouldNotQuery?: boolean,
-  recordType: string = 'stats'
+  recordType: string = "stats"
 ) {
   type ElementType = T extends (infer U)[] ? U : never;
 
@@ -19,7 +19,7 @@ export default function useFilterRecordsByUser<T extends any[]>(
 
   const endpointURL = endpoints[recordType] || endpoints.stats;
   // CAUTION: This makes the assumption that the record enpoint has a /user/${id} endpoint
-  const endpoint = !id ? endpointURL: `${endpointURL}/user/${id}`;
+  const endpoint = !id ? endpointURL : `${endpointURL}/user/${id}`;
 
   const getData = () => {
     if (shouldNotQuery) return;
@@ -31,7 +31,7 @@ export default function useFilterRecordsByUser<T extends any[]>(
       .get<T>(endpoint)
       .then((response) => {
         // CAUTION: This makes the assumption ElementType has a "user" field that contains the user id
-        setData(response.data.filter((x: ElementType) => (id ? (x as any).user === id : true)) as T);
+        setData(response.data);
       })
       .catch(() => setIsError(true))
       .finally(() => setIsLoading(false));
@@ -42,10 +42,10 @@ export default function useFilterRecordsByUser<T extends any[]>(
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [id, shouldNotQuery, recordType, endpoint]);
 
-  return { 
-    data, 
-    reload: getData, 
-    isLoading, 
-    isError
+  return {
+    data,
+    reload: getData,
+    isLoading,
+    isError,
   };
-}
\ No newline at end of file
+}
diff --git a/src/hooks/usePermissions.tsx b/src/hooks/usePermissions.tsx
index f760de65..d3769fa3 100644
--- a/src/hooks/usePermissions.tsx
+++ b/src/hooks/usePermissions.tsx
@@ -17,8 +17,7 @@ export default function usePermissions(user: string) {
 			.get<Permission[]>(`/api/permissions`)
 			.then((response) => {
 				const permissionTypes = response.data
-					.filter((x) => !x.users.includes(user))
-					.reduce((acc, curr) => [...acc, curr.type], [] as PermissionType[]);
+					.reduce((acc, curr) => curr.users.includes(user)? acc : [...acc, curr.type], [] as PermissionType[]);
 				setPermissions(permissionTypes);
 			})
 			.finally(() => setIsLoading(false));
diff --git a/src/hooks/useTicketsListener.tsx b/src/hooks/useTicketsListener.tsx
index 520ee947..a3babb1a 100644
--- a/src/hooks/useTicketsListener.tsx
+++ b/src/hooks/useTicketsListener.tsx
@@ -1,22 +1,28 @@
-import React from "react";
-import useTickets from "./useTickets";
+import { useState, useEffect } from "react";
+import axios from "axios";
 
 const useTicketsListener = (userId?: string) => {
-  const { tickets, reload } = useTickets();
+  const [assignedTickets, setAssignedTickets] = useState([]);
 
-  React.useEffect(() => {
+  const getData = () => {
+    axios
+      .get("/api/tickets/assignedToUser")
+      .then((response) => setAssignedTickets(response.data));
+  };
+
+  useEffect(() => {
+    getData();
+  }, []);
+
+  useEffect(() => {
     const intervalId = setInterval(() => {
-      reload();
+      getData();
     }, 60 * 1000);
 
     return () => clearInterval(intervalId);
-  }, [reload]);
+  }, [assignedTickets]);
 
   if (userId) {
-    const assignedTickets = tickets.filter(
-      (ticket) => ticket.assignedTo === userId && ticket.status === "submitted"
-    );
-
     return {
       assignedTickets,
       totalAssignedTickets: assignedTickets.length,
diff --git a/src/hooks/useUserData.tsx b/src/hooks/useUserData.tsx
new file mode 100644
index 00000000..d43f1d0a
--- /dev/null
+++ b/src/hooks/useUserData.tsx
@@ -0,0 +1,27 @@
+import { useEffect, useState, useCallback } from "react";
+import { User } from "../interfaces/user";
+import axios from "axios";
+
+export default function useUserData({
+  userId,
+}: {
+  userId: string;
+}) {
+  const [userData, setUserData] = useState<User | undefined>(undefined);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isError, setIsError] = useState(false);
+
+  const getData = useCallback(() => {
+    if (!userId ) return;
+    setIsLoading(true);
+    axios
+      .get(`/api/users/${userId}`)
+      .then((response) => setUserData(response.data))
+      .finally(() => setIsLoading(false))
+      .catch((error) => setIsError(true));
+  }, [userId]);
+
+  useEffect(getData, [getData]);
+
+  return { userData, isLoading, isError, reload: getData };
+}
diff --git a/src/hooks/useUsersSelect.tsx b/src/hooks/useUsersSelect.tsx
new file mode 100644
index 00000000..42fbc02b
--- /dev/null
+++ b/src/hooks/useUsersSelect.tsx
@@ -0,0 +1,99 @@
+import Axios from "axios";
+import { useCallback, useEffect, useState } from "react";
+import { setupCache } from "axios-cache-interceptor";
+import Option from "../interfaces/option";
+const instance = Axios.create();
+const axios = setupCache(instance);
+
+export default function useUsersSelect(props?: {
+  type?: string;
+  size?: number;
+  orderBy?: string;
+  direction?: "asc" | "desc";
+  entities?: string[] | string;
+}) {
+  const [inputValue, setInputValue] = useState("");
+  const [users, setUsers] = useState<Option[]>([]);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isError, setIsError] = useState(false);
+
+  const onScrollLoadMoreOptions = useCallback(() => {
+    if (users.length === total) return;
+    const params = new URLSearchParams();
+
+    if (!!props)
+      Object.keys(props).forEach((key) => {
+        if (props[key as keyof typeof props] !== undefined)
+          params.append(key, props[key as keyof typeof props]!.toString());
+      });
+    setIsLoading(true);
+
+    return axios
+      .get<{ users: Option[]; total: number }>(
+        `/api/users/search?value=${inputValue}&page=${
+          page + 1
+        }&${params.toString()}`,
+        { headers: { page: "register" } }
+      )
+      .then((response) => {
+        setPage((curr) => curr + 1);
+        setTotal(response.data.total);
+        setUsers((curr) => [...curr, ...response.data.users]);
+        setIsLoading(false);
+        return response.data.users;
+      });
+  }, [inputValue, page, props, total, users.length]);
+
+  const loadOptions = useCallback(
+    async (inputValue: string,forced?:boolean) => {
+      let load = true;
+      setInputValue((currValue) => {
+        if (!forced&&currValue === inputValue) {
+          load = false;
+          return currValue;
+        }
+        return inputValue;
+      });
+      if (!load) return;
+      const params = new URLSearchParams();
+
+      if (!!props)
+        Object.keys(props).forEach((key) => {
+          if (props[key as keyof typeof props] !== undefined)
+            params.append(key, props[key as keyof typeof props]!.toString());
+        });
+      setIsLoading(true);
+      setPage(0);
+
+      return axios
+        .get<{ users: Option[]; total: number }>(
+          `/api/users/search?value=${inputValue}&page=0&${params.toString()}`,
+          { headers: { page: "register" } }
+        )
+        .then((response) => {
+          setTotal(response.data.total);
+          setUsers(response.data.users);
+          setIsLoading(false);
+          return response.data.users;
+        });
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [props?.entities, props?.type, props?.size, props?.orderBy, props?.direction]
+  );
+
+  useEffect(() => {
+    loadOptions("",true);
+  }, [loadOptions]);
+
+  return {
+    users,
+    total,
+    isLoading,
+    isError,
+    onScrollLoadMoreOptions,
+    loadOptions,
+    inputValue,
+  };
+}
diff --git a/src/pages/api/sessions/index.ts b/src/pages/api/sessions/index.ts
index a352ea78..68ac3b08 100644
--- a/src/pages/api/sessions/index.ts
+++ b/src/pages/api/sessions/index.ts
@@ -26,7 +26,7 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
 	const q = user ? { user: user } : {};
 	const sessions = await db.collection("sessions").find<Session>({
 		...q,
-	}).limit(12).toArray();
+	}).limit(12).sort({ date: -1 }).toArray();
 	console.log(sessions)
 
 	res.status(200).json(
diff --git a/src/pages/api/stats/user/[user].ts b/src/pages/api/stats/user/[user].ts
index 1f8352d6..35aa9bf2 100644
--- a/src/pages/api/stats/user/[user].ts
+++ b/src/pages/api/stats/user/[user].ts
@@ -15,7 +15,10 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
 	}
 
 	const {user} = req.query;
-	const snapshot = await db.collection("stats").find({ user: user }).toArray();
+	const snapshot = await db.collection("stats").aggregate([
+		{ $match: { user: user } },
+		{ $sort: { "date": 1 } }
+	  ]).toArray();
 
 	res.status(200).json(snapshot);
 }
\ No newline at end of file
diff --git a/src/pages/api/tickets/assignedToUser/index.ts b/src/pages/api/tickets/assignedToUser/index.ts
new file mode 100644
index 00000000..8db00dbc
--- /dev/null
+++ b/src/pages/api/tickets/assignedToUser/index.ts
@@ -0,0 +1,39 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { Ticket, TicketWithCorporate } from "@/interfaces/ticket";
+import { sessionOptions } from "@/lib/session";
+import client from "@/lib/mongodb";
+import { withIronSessionApiRoute } from "iron-session/next";
+import type { NextApiRequest, NextApiResponse } from "next";
+import { Group, CorporateUser } from "@/interfaces/user";
+
+const db = client.db(process.env.MONGODB_DB);
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+
+	// specific logic for the preflight request
+	if (req.method === "OPTIONS") {
+		res.status(200).end();
+		return;
+	}
+
+	if (!req.session.user) {
+		res.status(401).json({ ok: false });
+		return;
+	}
+
+	if (req.method === "GET") {
+		await get(req, res);
+	}
+}
+
+async function get(req: NextApiRequest, res: NextApiResponse) {
+	if (!req.session.user) {
+		res.status(401).json({ ok: false });
+		return;
+	}
+	const docs = await db.collection("tickets").find<Ticket>({ assignedTo: req.session.user.id }).toArray();
+
+	res.status(200).json(docs);
+}
diff --git a/src/pages/api/users/search.ts b/src/pages/api/users/search.ts
new file mode 100644
index 00000000..51a0b922
--- /dev/null
+++ b/src/pages/api/users/search.ts
@@ -0,0 +1,39 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { withIronSessionApiRoute } from "iron-session/next";
+import { sessionOptions } from "@/lib/session";
+import { searchUsers } from "@/utils/users.be";
+import { Type } from "@/interfaces/user";
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+    if (!req.session.user && !req.headers["page"] && req.headers["page"] !== "register") {
+        res.status(401).json({ ok: false });
+        return;
+    }
+
+    const {
+        value,
+        size,
+        page,
+        orderBy = "name",
+        direction = "asc",
+        type,
+        entities
+    } = req.query as { value?: string, size?: string; type?: Type; page?: string; orderBy?: string; direction?: "asc" | "desc", entities?: string };
+
+    const { users, total } = await searchUsers(
+        value,
+        size !== undefined ? parseInt(size) : undefined,
+        page !== undefined ? parseInt(page) : undefined,
+        {
+            [orderBy]: direction === "asc" ? 1 : -1,
+        },
+        {},
+        {
+            ...(type ? { "type": type } : {}),
+            ...(entities ? { "entities.id": entities.split(',') } : {})
+        }
+    );
+    res.status(200).json({ users, total });
+}
\ No newline at end of file
diff --git a/src/pages/record.tsx b/src/pages/record.tsx
index 6366a742..d019272a 100644
--- a/src/pages/record.tsx
+++ b/src/pages/record.tsx
@@ -21,11 +21,9 @@ import useTrainingContentStore from "@/stores/trainingContentStore";
 import { Assignment } from "@/interfaces/results";
 import { getEntitiesUsers, getUsers } from "@/utils/users.be";
 import { getAssignments, getEntitiesAssignments } from "@/utils/assignments.be";
-import useGradingSystem from "@/hooks/useGrading";
 import { findBy, mapBy, redirect, serialize } from "@/utils";
 import { getEntitiesWithRoles } from "@/utils/entities.be";
 import { checkAccess } from "@/utils/permissions";
-import { getGroups, getGroupsByEntities } from "@/utils/groups.be";
 import { getGradingSystemByEntities, getGradingSystemByEntity } from "@/utils/grading.be";
 import { Grading } from "@/interfaces";
 import { EntityWithRoles } from "@/interfaces/entity";
@@ -40,14 +38,16 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
 	if (shouldRedirectHome(user)) return redirect("/")
 
 	const entityIDs = mapBy(user.entities, 'id')
+	const isAdmin = checkAccess(user, ["admin", "developer"])
 
 	const entities = await getEntitiesWithRoles(checkAccess(user, ["admin", "developer"]) ? undefined : entityIDs)
-	const users = await (checkAccess(user, ["admin", "developer"]) ? getUsers() : getEntitiesUsers(mapBy(entities, 'id')))
-	const assignments = await (checkAccess(user, ["admin", "developer"]) ? getAssignments() : getEntitiesAssignments(mapBy(entities, 'id')))
-	const gradingSystems = await getGradingSystemByEntities(mapBy(entities, 'id'))
+	const entitiesIds = mapBy(entities, 'id')
+	const users = await (isAdmin ? getUsers() : getEntitiesUsers(entitiesIds))
+	const assignments = await (isAdmin ? getAssignments() : getEntitiesAssignments(entitiesIds))
+	const gradingSystems = await getGradingSystemByEntities(entitiesIds)
 
 	return {
-		props: serialize({ user, users, assignments, entities, gradingSystems }),
+		props: serialize({ user, users, assignments, entities, gradingSystems,isAdmin }),
 	};
 }, sessionOptions);
 
@@ -59,11 +59,12 @@ interface Props {
 	assignments: Assignment[];
 	entities: EntityWithRoles[]
 	gradingSystems: Grading[]
+	isAdmin:boolean
 }
 
 const MAX_TRAINING_EXAMS = 10;
 
-export default function History({ user, users, assignments, entities, gradingSystems }: Props) {
+export default function History({ user, users, assignments, entities, gradingSystems,isAdmin }: Props) {
 	const router = useRouter();
 	const [statsUserId, setStatsUserId, training, setTraining] = useRecordStore((state) => [
 		state.selectedUser,
@@ -193,7 +194,7 @@ export default function History({ user, users, assignments, entities, gradingSys
 			<ToastContainer />
 			{user && (
 				<Layout user={user}>
-					<RecordFilter user={user} users={users} entities={entities} filterState={{ filter: filter, setFilter: setFilter }}>
+					<RecordFilter user={user} isAdmin={isAdmin} entities={entities} filterState={{ filter: filter, setFilter: setFilter }}>
 						{training && (
 							<div className="flex flex-row">
 								<div className="font-semibold text-2xl mr-4">
diff --git a/src/pages/stats.tsx b/src/pages/stats.tsx
index 6c402baa..51dac7a0 100644
--- a/src/pages/stats.tsx
+++ b/src/pages/stats.tsx
@@ -1,643 +1,895 @@
 /* eslint-disable @next/next/no-img-element */
 import Head from "next/head";
-import { BsArrowClockwise, BsChevronLeft, BsChevronRight, BsFileEarmarkText, BsPencil, BsStar } from "react-icons/bs";
-import { LinearScale, Chart as ChartJS, CategoryScale, PointElement, LineElement, Legend, Tooltip, LineController } from "chart.js";
+import {
+  BsArrowClockwise,
+  BsChevronLeft,
+  BsChevronRight,
+  BsFileEarmarkText,
+  BsPencil,
+  BsStar,
+} from "react-icons/bs";
+import {
+  LinearScale,
+  Chart as ChartJS,
+  CategoryScale,
+  PointElement,
+  LineElement,
+  Legend,
+  Tooltip,
+  LineController,
+} from "chart.js";
 import { withIronSessionSsr } from "iron-session/next";
 import { sessionOptions } from "@/lib/session";
 import { useEffect, useMemo, useState } from "react";
 import useFilterRecordsByUser from "@/hooks/useFilterRecordsByUser";
-import { averageScore, totalExamsByModule, groupBySession, groupByModule, timestampToMoment, groupByDate } from "@/utils/stats";
-import useUser from "@/hooks/useUser";
+import {
+  averageScore,
+  groupBySession,
+  groupByModule,
+  timestampToMoment,
+} from "@/utils/stats";
 import { ToastContainer } from "react-toastify";
-import { capitalize, Dictionary } from "lodash";
+import { capitalize } from "lodash";
 import { Module } from "@/interfaces";
 import ProgressBar from "@/components/Low/ProgressBar";
 import Layout from "@/components/High/Layout";
-import { calculateAverageLevel, calculateBandScore } from "@/utils/score";
-import { countExamModules, countFullExams, MODULE_ARRAY, sortByModule } from "@/utils/moduleUtils";
+import { calculateBandScore } from "@/utils/score";
+import {
+  countExamModules,
+  countFullExams,
+  MODULE_ARRAY,
+  sortByModule,
+} from "@/utils/moduleUtils";
 import { Chart } from "react-chartjs-2";
-import useUsers from "@/hooks/useUsers";
-import useGroups from "@/hooks/useGroups";
 import DatePicker from "react-datepicker";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
 import ProfileSummary from "@/components/ProfileSummary";
 import moment from "moment";
-import { Group, Stat, User } from "@/interfaces/user";
+import { Stat, User } from "@/interfaces/user";
 import { Divider } from "primereact/divider";
 import Badge from "@/components/Low/Badge";
-import { filterBy, mapBy, redirect, serialize } from "@/utils";
-import { getEntitiesWithRoles } from "@/utils/entities.be";
+import { mapBy, redirect, serialize } from "@/utils";
+import { getEntities } from "@/utils/entities.be";
 import { checkAccess } from "@/utils/permissions";
-import { getEntitiesUsers, getUsers } from "@/utils/users.be";
 import { EntityWithRoles } from "@/interfaces/entity";
-import { getGroups, getGroupsByEntities } from "@/utils/groups.be";
 import Select from "@/components/Low/Select";
 import { requestUser } from "@/utils/api";
+import useUserData from "../hooks/useUserData";
+import useUsersSelect from "../hooks/useUsersSelect";
+import AsyncSelect from "../components/Low/AsyncSelect";
 
-ChartJS.register(LinearScale, CategoryScale, PointElement, LineElement, LineController, Legend, Tooltip);
+ChartJS.register(
+  LinearScale,
+  CategoryScale,
+  PointElement,
+  LineElement,
+  LineController,
+  Legend,
+  Tooltip
+);
 
 const COLORS = ["#1EB3FF", "#FF790A", "#3D9F11", "#EF5DA8", "#414288"];
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
-	const user = await requestUser(req, res)
-	if (!user) return redirect("/login")
+  const user = await requestUser(req, res);
+  if (!user) return redirect("/login");
 
-	if (shouldRedirectHome(user)) return redirect("/")
+  if (shouldRedirectHome(user)) return redirect("/");
 
-	const entityIDs = mapBy(user.entities, 'id')
-	const entities = await getEntitiesWithRoles(checkAccess(user, ["admin", "developer"]) ? undefined : entityIDs)
-	const users = await (checkAccess(user, ["admin", "developer"]) ? getUsers() : getEntitiesUsers(mapBy(entities, 'id')))
-	const groups = await (checkAccess(user, ["admin", "developer"]) ? getGroups() : getGroupsByEntities(mapBy(entities, 'id')))
+  const entityIDs = mapBy(user.entities, "id");
+  const isAdmin = checkAccess(user, ["admin", "developer"]);
 
-	return {
-		props: serialize({ user, entities, users, groups }),
-	};
+  const entities = await getEntities(isAdmin ? undefined : entityIDs, {
+    id: 1,
+    label: 1,
+  });
+
+  return {
+    props: serialize({ user, entities, isAdmin }),
+  };
 }, sessionOptions);
 
 interface Props {
-	user: User
-	users: User[]
-	entities: EntityWithRoles[]
-	groups: Group[]
+  user: User;
+  entities: EntityWithRoles[];
+  isAdmin: boolean;
 }
 
-export default function Stats({ user, entities, users, groups }: Props) {
-	const [statsUserId, setStatsUserId] = useState<string>(user.id);
-	const [startDate, setStartDate] = useState<Date | null>(moment(new Date()).subtract(1, "weeks").toDate());
-	const [endDate, setEndDate] = useState<Date | null>(new Date());
-	const [initialStatDate, setInitialStatDate] = useState<Date>();
-	const [selectedEntity, setSelectedEntity] = useState<string>()
+export default function Stats({ user, entities, isAdmin }: Props) {
+  const [statsUserId, setStatsUserId] = useState<string>(user.id);
 
-	const [monthlyOverallScoreDate, setMonthlyOverallScoreDate] = useState<Date | null>(new Date());
-	const [monthlyModuleScoreDate, setMonthlyModuleScoreDate] = useState<Date | null>(new Date());
+  const { userData } = useUserData({ userId: statsUserId });
 
-	const [dailyScoreDate, setDailyScoreDate] = useState<Date | null>(new Date());
-	const [intervalDates, setIntervalDates] = useState<Date[]>([]);
+  const [startDate, setStartDate] = useState<Date | null>(
+    moment(new Date()).subtract(1, "weeks").toDate()
+  );
 
-	const { data: stats } = useFilterRecordsByUser<Stat[]>(statsUserId, !statsUserId);
+  const [endDate, setEndDate] = useState<Date | null>(new Date());
 
-	const students = useMemo(() =>
-		filterBy(users, 'type', 'student').filter(x => !selectedEntity ? true : mapBy(x.entities, 'id').includes((selectedEntity))),
-		[users, selectedEntity]
-	)
+  const [selectedEntity, setSelectedEntity] = useState<string>();
 
-	useEffect(() => {
-		setInitialStatDate(
-			stats
-				.filter((s) => s.date)
-				.sort((a, b) => timestampToMoment(a).diff(timestampToMoment(b)))
-				.map(timestampToMoment)
-				.shift()
-				?.toDate(),
-		);
-	}, [stats]);
+  const entitiesToSearch = useMemo(() => {
+    if(selectedEntity) return [selectedEntity]
+    if (isAdmin) return undefined;
+    return mapBy(entities, "id");
+  }, [entities, isAdmin, selectedEntity]);
 
-	const calculateModuleScore = (stats: Stat[]) => {
-		const moduleStats = groupByModule(stats);
-		return Object.keys(moduleStats).map((y) => {
-			const correct = moduleStats[y].reduce((accumulator, current) => accumulator + current.score.correct, 0);
-			const total = moduleStats[y].reduce((accumulator, current) => accumulator + current.score.total, 0);
+  const {
+    users: students,
+    isLoading,
+    onScrollLoadMoreOptions,
+    loadOptions,
+  } = useUsersSelect({
+    type: "student",
+    size: 50,
+    orderBy: "name",
+    direction: "asc",
+    entities: entitiesToSearch,
+  });
 
-			return {
-				module: y as Module,
-				score: calculateBandScore(correct, total, y as Module, user?.focus || "academic"),
-			};
-		});
-	};
+  const [monthlyOverallScoreDate, setMonthlyOverallScoreDate] =
+    useState<Date | null>(new Date());
 
-	const calculateModularScorePerSession = (stats: Stat[], module: Module) => {
-		const groupedBySession = groupBySession(stats);
-		const sessionAverage = Object.keys(groupedBySession).map((x: string) => {
-			const session = groupedBySession[x];
-			const moduleStats = groupByModule(session);
-			if (!Object.keys(moduleStats).includes(module)) return null;
-			const correct = moduleStats[module].reduce((acc, curr) => acc + curr.score.correct, 0);
-			const total = moduleStats[module].reduce((acc, curr) => acc + curr.score.total, 0);
+  const [monthlyModuleScoreDate, setMonthlyModuleScoreDate] =
+    useState<Date | null>(new Date());
 
-			return calculateBandScore(correct, total, module, user?.focus || "academic");
-		});
+  const [dailyScoreDate, setDailyScoreDate] = useState<Date | null>(new Date());
 
-		return sessionAverage;
-	};
+  const [intervalDates, setIntervalDates] = useState<Date[]>([]);
 
-	const getListOfDateInInterval = (start: Date, end: Date) => {
-		let currentDate = moment(start);
-		const dates = [currentDate.toDate()];
-		while (moment(end).diff(currentDate, "days") > 0) {
-			currentDate = currentDate.add(1, "days");
-			dates.push(currentDate.toDate());
-		}
+  const { data: stats } = useFilterRecordsByUser<Stat[]>(
+    statsUserId,
+    !statsUserId
+  );
 
-		return dates;
-	};
+  const initialStatDate = useMemo(
+    () => (stats[0] ? timestampToMoment(stats[0]).toDate() : null),
+    [stats]
+  );
 
-	useEffect(() => {
-		if (startDate && endDate) {
-			setIntervalDates(getListOfDateInInterval(startDate, endDate));
-		}
-	}, [startDate, endDate]);
+  const calculateModuleScore = (stats: Stat[]) => {
+    const moduleStats = groupByModule(stats);
+    return Object.keys(moduleStats).map((y) => {
+      const correct = moduleStats[y].reduce(
+        (accumulator, current) => accumulator + current.score.correct,
+        0
+      );
+      const total = moduleStats[y].reduce(
+        (accumulator, current) => accumulator + current.score.total,
+        0
+      );
 
-	const calculateTotalScore = (stats: Stat[], divisionFactor: number) => {
-		const moduleScores = calculateModuleScore(stats);
-		return moduleScores.reduce((acc, curr) => acc + curr.score, 0) / divisionFactor;
-	};
+      return {
+        module: y as Module,
+        score: calculateBandScore(
+          correct,
+          total,
+          y as Module,
+          user?.focus || "academic"
+        ),
+      };
+    });
+  };
 
-	const calculateScorePerModule = (stats: Stat[], module: Module) => {
-		const moduleScores = calculateModuleScore(stats);
-		return moduleScores.find((x) => x.module === module)?.score || -1;
-	};
+  const calculateModularScorePerSession = (stats: Stat[], module: Module) => {
+    const groupedBySession = groupBySession(stats);
+    const sessionAverage = Object.keys(groupedBySession).map((x: string) => {
+      const session = groupedBySession[x];
+      const moduleStats = groupByModule(session);
+      if (!Object.keys(moduleStats).includes(module)) return null;
+      const correct = moduleStats[module].reduce(
+        (acc, curr) => acc + curr.score.correct,
+        0
+      );
+      const total = moduleStats[module].reduce(
+        (acc, curr) => acc + curr.score.total,
+        0
+      );
 
-	return (
-		<>
-			<Head>
-				<title>Stats | 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 />
-			{user && (
-				<Layout user={user} className="gap-8">
-					<ProfileSummary
-						user={users.find((x) => x.id === statsUserId) || user}
-						items={[
-							{
-								icon: <BsFileEarmarkText className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
-								value: countFullExams(stats),
-								label: "Exams",
-								tooltip: "Number of all conducted completed exams",
-							},
-							{
-								icon: <BsPencil className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
-								value: countExamModules(stats),
-								label: "Modules",
-								tooltip: "Number of all exam modules performed including Level Test",
-							},
-							{
-								icon: <BsStar className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
-								value: `${stats.length > 0 ? averageScore(stats) : 0}%`,
-								label: "Average Score",
-								tooltip: "Average success rate for questions responded",
-							},
-						]}
-					/>
+      return calculateBandScore(
+        correct,
+        total,
+        module,
+        user?.focus || "academic"
+      );
+    });
 
-					<section className="flex flex-col gap-3">
-						<div className="w-full flex justify-between gap-4 items-center">
-							{["corporate", "teacher", "mastercorporate", "developer", "admin"].includes(user.type) && (
-								<>
-									<Select
-										className="w-full"
-										options={entities.map(e => ({ value: e.id, label: e.label }))}
-										onChange={(value) => setSelectedEntity(value?.value || undefined)}
-										placeholder="Select an entity..."
-										isClearable
-									/>
-									<Select
-										className="w-full"
-										options={students
-											.map((x) => ({ value: x.id, label: `${x.name} - ${x.email}` }))}
-										defaultValue={{ value: user.id, label: `${user.name} - ${user.email}` }}
-										onChange={(value) => setStatsUserId(value?.value || user.id)}
-									/>
-								</>
-							)}
-						</div>
+    return sessionAverage;
+  };
 
-						{stats.length > 0 && (
-							<>
-								<div className="flex -md:flex-col -md:items-center gap-4 flex-wrap">
-									{/* Overall Level per Month */}
-									<div className="flex flex-col items-center gap-4 border w-full h-[420px] overflow-y-scroll scrollbar-hide md:max-w-sm border-mti-gray-platinum p-4 pb-12 rounded-xl">
-										<div className="flex flex-col gap-2 w-full">
-											<span className="text-sm font-bold">Overall Level per Month</span>
-											<div className="flex gap-2 items-center">
-												{monthlyOverallScoreDate && (
-													<button
-														onClick={() =>
-															setMonthlyOverallScoreDate((prev) => moment(prev).subtract(1, "months").toDate())
-														}>
-														<BsChevronLeft />
-													</button>
-												)}
-												<DatePicker
-													dateFormat="MMMM yyyy"
-													className="border border-mti-gray-dim/40 px-2 py-1.5 rounded-lg text-center w-[200px]"
-													minDate={initialStatDate}
-													maxDate={new Date()}
-													selected={monthlyOverallScoreDate}
-													showMonthYearPicker
-													onChange={setMonthlyOverallScoreDate}
-												/>
-												{monthlyOverallScoreDate && (
-													<button
-														disabled={moment(monthlyOverallScoreDate).add(1, "months").isAfter(moment())}
-														onClick={() => setMonthlyOverallScoreDate((prev) => moment(prev).add(1, "months").toDate())}
-														className="disabled:text-neutral-200">
-														<BsChevronRight />
-													</button>
-												)}
-												<button onClick={() => setMonthlyOverallScoreDate(new Date())}>
-													<BsArrowClockwise />
-												</button>
-											</div>
-										</div>
-										<div className="w-full grid grid-cols-3 gap-4 items-center">
-											{[...Array(31).keys()].map((day) => {
-												const date = moment(
-													`${(day + 1).toString().padStart(2, "0")}/${moment(monthlyOverallScoreDate).get("month") + 1
-													}/${moment(monthlyOverallScoreDate).get("year")}`,
-													"DD/MM/yyyy",
-												);
+  const getListOfDateInInterval = (start: Date, end: Date) => {
+    let currentDate = moment(start);
+    const dates = [currentDate.toDate()];
+    while (moment(end).diff(currentDate, "days") > 0) {
+      currentDate = currentDate.add(1, "days");
+      dates.push(currentDate.toDate());
+    }
 
-												return date.isValid() && date.isSameOrBefore(moment()) ? (
-													<div
-														key={day}
-														className="flex flex-col gap-1 items-start border border-mti-gray-smoke rounded-lg overflow-hidden">
-														<span className="bg-mti-purple-ultralight w-full px-2 py-1 font-semibold">
-															Day {(day + 1).toString().padStart(2, "0")}
-														</span>
-														<span className="px-2">
-															Level{" "}
-															{calculateTotalScore(
-																stats.filter((s) => timestampToMoment(s).isBefore(date)),
-																5,
-															).toFixed(1)}
-														</span>
-													</div>
-												) : null;
-											})}
-										</div>
-									</div>
+    return dates;
+  };
 
-									{/* Overall Level per Month Graph */}
-									<div className="w-full md:max-w-2xl border border-mti-gray-platinum p-4 pb-12 rounded-xl h-fit md:h-[420px]">
-										<div className="flex flex-col gap-2 w-full">
-											<span className="text-sm font-bold">Overall Level per Month</span>
-											<div className="flex gap-2 items-center">
-												{monthlyOverallScoreDate && (
-													<button
-														onClick={() =>
-															setMonthlyOverallScoreDate((prev) => moment(prev).subtract(1, "months").toDate())
-														}>
-														<BsChevronLeft />
-													</button>
-												)}
-												<DatePicker
-													dateFormat="MMMM yyyy"
-													className="border border-mti-gray-dim/40 px-2 py-1.5 rounded-lg text-center w-[200px]"
-													minDate={initialStatDate}
-													maxDate={new Date()}
-													selected={monthlyOverallScoreDate}
-													showMonthYearPicker
-													onChange={setMonthlyOverallScoreDate}
-												/>
-												{monthlyOverallScoreDate && (
-													<button
-														disabled={moment(monthlyOverallScoreDate).add(1, "months").isAfter(moment())}
-														onClick={() => setMonthlyOverallScoreDate((prev) => moment(prev).add(1, "months").toDate())}
-														className="disabled:text-neutral-200">
-														<BsChevronRight />
-													</button>
-												)}
-												<button onClick={() => setMonthlyOverallScoreDate(new Date())}>
-													<BsArrowClockwise />
-												</button>
-											</div>
-										</div>
-										<Chart
-											type="line"
-											options={{
-												scales: {
-													y: {
-														min: 0,
-														max: 9,
-													},
-												},
-											}}
-											data={{
-												labels: [...Array(31).keys()]
-													.map((day) => {
-														const date = moment(
-															`${(day + 1).toString().padStart(2, "0")}/${moment(monthlyOverallScoreDate).get("month") + 1
-															}/${moment(monthlyOverallScoreDate).get("year")}`,
-															"DD/MM/yyyy",
-														);
-														return date.isValid() ? (day + 1).toString().padStart(2, "0") : undefined;
-													})
-													.filter((x) => !!x),
-												datasets: [
-													{
-														type: "line",
-														label: "Total",
-														fill: false,
-														borderColor: "#6A5FB1",
-														backgroundColor: "#7872BF",
-														borderWidth: 2,
-														spanGaps: true,
-														data: [...Array(31).keys()]
-															.map((day) => {
-																const date = moment(
-																	`${(day + 1).toString().padStart(2, "0")}/${moment(monthlyOverallScoreDate).get("month") + 1
-																	}/${moment(monthlyOverallScoreDate).get("year")}`,
-																	"DD/MM/yyyy",
-																);
+  useEffect(() => {
+    if (startDate && endDate) {
+      setIntervalDates(getListOfDateInInterval(startDate, endDate));
+    }
+  }, [startDate, endDate]);
 
-																return date.isValid()
-																	? calculateTotalScore(
-																		stats.filter((s) => timestampToMoment(s).isBefore(date)),
-																		5,
-																	).toFixed(1)
-																	: undefined;
-															})
-															.filter((x) => !!x),
-													},
-												],
-											}}
-										/>
-									</div>
+  const calculateTotalScore = (stats: Stat[], divisionFactor: number) => {
+    const moduleScores = calculateModuleScore(stats);
+    return (
+      moduleScores.reduce((acc, curr) => acc + curr.score, 0) / divisionFactor
+    );
+  };
 
-									{/* Module Level per Day */}
-									<div className="flex flex-col gap-8 border w-full h-fit md:h-[420px] md:max-w-xs border-mti-gray-platinum p-4 pb-12 rounded-xl">
-										<div className="flex flex-col gap-2 w-full">
-											<span className="text-sm font-bold">Module Level per Day</span>
-											<div className="flex gap-2 items-center">
-												{monthlyModuleScoreDate && (
-													<button
-														onClick={() =>
-															setMonthlyModuleScoreDate((prev) => moment(prev).subtract(1, "days").toDate())
-														}>
-														<BsChevronLeft />
-													</button>
-												)}
-												<DatePicker
-													dateFormat="dd MMMM yyyy"
-													className="border border-mti-gray-dim/40 px-2 py-1.5 rounded-lg text-center w-[200px]"
-													minDate={initialStatDate}
-													maxDate={new Date()}
-													selected={monthlyModuleScoreDate}
-													onChange={setMonthlyModuleScoreDate}
-												/>
-												{monthlyModuleScoreDate && (
-													<button
-														disabled={moment(monthlyModuleScoreDate).add(1, "days").isAfter(moment())}
-														onClick={() => setMonthlyModuleScoreDate((prev) => moment(prev).add(1, "days").toDate())}
-														className="disabled:text-neutral-200">
-														<BsChevronRight />
-													</button>
-												)}
-												<button onClick={() => setMonthlyModuleScoreDate(new Date())}>
-													<BsArrowClockwise />
-												</button>
-											</div>
-										</div>
-										<div className="flex flex-col gap-4">
-											{calculateModuleScore(stats.filter((s) => timestampToMoment(s).isBefore(moment(monthlyModuleScoreDate))))
-												.sort(sortByModule)
-												.map(({ module, score }) => (
-													<div className="flex flex-col gap-2" key={module}>
-														<div className="flex justify-between items-end">
-															<span className="text-xs">
-																<span className="font-medium">{score}</span> of <span className="font-medium">9</span>
-															</span>
-															<span className="text-xs">{capitalize(module)}</span>
-														</div>
-														<ProgressBar
-															color={module as Module}
-															percentage={(score * 100) / 9}
-															label=""
-															className="h-3"
-														/>
-													</div>
-												))}
-										</div>
-									</div>
-								</div>
+  const calculateScorePerModule = (stats: Stat[], module: Module) => {
+    const moduleScores = calculateModuleScore(stats);
+    return moduleScores.find((x) => x.module === module)?.score || -1;
+  };
 
-								<Divider />
+  return (
+    <>
+      <Head>
+        <title>Stats | 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 />
+      {user && (
+        <Layout user={user} className="gap-8">
+          <ProfileSummary
+            user={userData || user}
+            items={[
+              {
+                icon: (
+                  <BsFileEarmarkText className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />
+                ),
+                value: countFullExams(stats),
+                label: "Exams",
+                tooltip: "Number of all conducted completed exams",
+              },
+              {
+                icon: (
+                  <BsPencil className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />
+                ),
+                value: countExamModules(stats),
+                label: "Modules",
+                tooltip:
+                  "Number of all exam modules performed including Level Test",
+              },
+              {
+                icon: (
+                  <BsStar className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />
+                ),
+                value: `${stats.length > 0 ? averageScore(stats) : 0}%`,
+                label: "Average Score",
+                tooltip: "Average success rate for questions responded",
+              },
+            ]}
+          />
 
-								<div className="flex -md:flex-col -md:items-center gap-4 flex-wrap">
-									{/* Module Level per Exam */}
-									<div className="flex flex-col items-center gap-4 border w-full h-[420px] overflow-y-scroll scrollbar-hide md:max-w-sm border-mti-gray-platinum p-4 pb-12 rounded-xl">
-										<div className="flex flex-col gap-2 w-full">
-											<span className="text-sm font-bold">Module Level per Exam</span>
-											<div className="flex gap-2 items-center">
-												{dailyScoreDate && (
-													<button onClick={() => setDailyScoreDate((prev) => moment(prev).subtract(1, "days").toDate())}>
-														<BsChevronLeft />
-													</button>
-												)}
-												<DatePicker
-													dateFormat="dd MMMM yyyy"
-													className="border border-mti-gray-dim/40 px-2 py-1.5 rounded-lg text-center w-[200px]"
-													minDate={initialStatDate}
-													maxDate={new Date()}
-													selected={dailyScoreDate}
-													onChange={setDailyScoreDate}
-												/>
-												{dailyScoreDate && (
-													<button
-														disabled={moment(dailyScoreDate).add(1, "days").isAfter(moment())}
-														onClick={() => setDailyScoreDate((prev) => moment(prev).add(1, "days").toDate())}
-														className="disabled:text-neutral-200">
-														<BsChevronRight />
-													</button>
-												)}
-												<button onClick={() => setDailyScoreDate(new Date())}>
-													<BsArrowClockwise />
-												</button>
-											</div>
-										</div>
+          <section className="flex flex-col gap-3">
+            <div className="w-full flex justify-between gap-4 items-center">
+              {[
+                "corporate",
+                "teacher",
+                "mastercorporate",
+                "developer",
+                "admin",
+              ].includes(user.type) && (
+                <>
+                  <Select
+                    className="w-full"
+                    options={entities.map((e) => ({
+                      value: e.id,
+                      label: e.label,
+                    }))}
+                    onChange={(value) =>
+                      setSelectedEntity(value?.value || undefined)
+                    }
+                    placeholder="Select an entity..."
+                    isClearable
+                  />
+                  <AsyncSelect
+                    className="w-full"
+                    options={students}
+                    isLoading={isLoading}
+                    defaultValue={{
+                      value: user.id,
+                      label: `${user.name} - ${user.email}`,
+                    }}
+                    onChange={(value) =>
+                      setStatsUserId(value?.value || user.id)
+                    }
+                    loadOptions={loadOptions}
+                    onMenuScrollToBottom={onScrollLoadMoreOptions}
+                  />
+                </>
+              )}
+            </div>
 
-										<div className="w-full grid grid-cols-1 gap-6 items-center">
-											{Object.keys(
-												groupBySession(
-													stats.filter(
-														(s) =>
-															Math.abs(timestampToMoment(s).diff(moment(dailyScoreDate), "days")) === 0 &&
-															timestampToMoment(s).day() === moment(dailyScoreDate).day(),
-													),
-												),
-											).length === 0 && <span className="font-semibold ml-1">No exams performed this day...</span>}
+            {stats.length > 0 && (
+              <>
+                <div className="flex -md:flex-col -md:items-center gap-4 flex-wrap">
+                  {/* Overall Level per Month */}
+                  <div className="flex flex-col items-center gap-4 border w-full h-[420px] overflow-y-scroll scrollbar-hide md:max-w-sm border-mti-gray-platinum p-4 pb-12 rounded-xl">
+                    <div className="flex flex-col gap-2 w-full">
+                      <span className="text-sm font-bold">
+                        Overall Level per Month
+                      </span>
+                      <div className="flex gap-2 items-center">
+                        {monthlyOverallScoreDate && (
+                          <button
+                            onClick={() =>
+                              setMonthlyOverallScoreDate((prev) =>
+                                moment(prev).subtract(1, "months").toDate()
+                              )
+                            }
+                          >
+                            <BsChevronLeft />
+                          </button>
+                        )}
+                        <DatePicker
+                          dateFormat="MMMM yyyy"
+                          className="border border-mti-gray-dim/40 px-2 py-1.5 rounded-lg text-center w-[200px]"
+                          minDate={initialStatDate}
+                          maxDate={new Date()}
+                          selected={monthlyOverallScoreDate}
+                          showMonthYearPicker
+                          onChange={setMonthlyOverallScoreDate}
+                        />
+                        {monthlyOverallScoreDate && (
+                          <button
+                            disabled={moment(monthlyOverallScoreDate)
+                              .add(1, "months")
+                              .isAfter(moment())}
+                            onClick={() =>
+                              setMonthlyOverallScoreDate((prev) =>
+                                moment(prev).add(1, "months").toDate()
+                              )
+                            }
+                            className="disabled:text-neutral-200"
+                          >
+                            <BsChevronRight />
+                          </button>
+                        )}
+                        <button
+                          onClick={() => setMonthlyOverallScoreDate(new Date())}
+                        >
+                          <BsArrowClockwise />
+                        </button>
+                      </div>
+                    </div>
+                    <div className="w-full grid grid-cols-3 gap-4 items-center">
+                      {[...Array(31).keys()].map((day) => {
+                        const date = moment(
+                          `${(day + 1).toString().padStart(2, "0")}/${
+                            moment(monthlyOverallScoreDate).get("month") + 1
+                          }/${moment(monthlyOverallScoreDate).get("year")}`,
+                          "DD/MM/yyyy"
+                        );
 
-											{Object.keys(
-												groupBySession(
-													stats.filter(
-														(s) =>
-															Math.abs(timestampToMoment(s).diff(moment(dailyScoreDate), "days")) === 0 &&
-															timestampToMoment(s).day() === moment(dailyScoreDate).day(),
-													),
-												),
-											).map((session, index) => (
-												<div key={index} className="flex flex-col gap-2 items-start rounded-lg overflow-hidden">
-													<span className="bg-mti-purple-ultralight w-full px-2 py-1 font-semibold">
-														Exam {(index + 1).toString().padStart(2, "0")}
-													</span>
-													<div className="flex justify-between w-full">
-														{MODULE_ARRAY.map((module) => {
-															const score = calculateScorePerModule(
-																groupBySession(
-																	stats.filter(
-																		(s) =>
-																			Math.abs(timestampToMoment(s).diff(moment(dailyScoreDate), "days")) === 0,
-																	),
-																)[session],
-																module,
-															);
+                        return date.isValid() &&
+                          date.isSameOrBefore(moment()) ? (
+                          <div
+                            key={day}
+                            className="flex flex-col gap-1 items-start border border-mti-gray-smoke rounded-lg overflow-hidden"
+                          >
+                            <span className="bg-mti-purple-ultralight w-full px-2 py-1 font-semibold">
+                              Day {(day + 1).toString().padStart(2, "0")}
+                            </span>
+                            <span className="px-2">
+                              Level{" "}
+                              {calculateTotalScore(
+                                stats.filter((s) =>
+                                  timestampToMoment(s).isBefore(date)
+                                ),
+                                5
+                              ).toFixed(1)}
+                            </span>
+                          </div>
+                        ) : null;
+                      })}
+                    </div>
+                  </div>
 
-															return score === -1 ? null : <Badge module={module}>{score.toFixed(1)}</Badge>;
-														}).filter((m) => !!m)}
-													</div>
-												</div>
-											))}
-										</div>
-									</div>
+                  {/* Overall Level per Month Graph */}
+                  <div className="w-full md:max-w-2xl border border-mti-gray-platinum p-4 pb-12 rounded-xl h-fit md:h-[420px]">
+                    <div className="flex flex-col gap-2 w-full">
+                      <span className="text-sm font-bold">
+                        Overall Level per Month
+                      </span>
+                      <div className="flex gap-2 items-center">
+                        {monthlyOverallScoreDate && (
+                          <button
+                            onClick={() =>
+                              setMonthlyOverallScoreDate((prev) =>
+                                moment(prev).subtract(1, "months").toDate()
+                              )
+                            }
+                          >
+                            <BsChevronLeft />
+                          </button>
+                        )}
+                        <DatePicker
+                          dateFormat="MMMM yyyy"
+                          className="border border-mti-gray-dim/40 px-2 py-1.5 rounded-lg text-center w-[200px]"
+                          minDate={initialStatDate}
+                          maxDate={new Date()}
+                          selected={monthlyOverallScoreDate}
+                          showMonthYearPicker
+                          onChange={setMonthlyOverallScoreDate}
+                        />
+                        {monthlyOverallScoreDate && (
+                          <button
+                            disabled={moment(monthlyOverallScoreDate)
+                              .add(1, "months")
+                              .isAfter(moment())}
+                            onClick={() =>
+                              setMonthlyOverallScoreDate((prev) =>
+                                moment(prev).add(1, "months").toDate()
+                              )
+                            }
+                            className="disabled:text-neutral-200"
+                          >
+                            <BsChevronRight />
+                          </button>
+                        )}
+                        <button
+                          onClick={() => setMonthlyOverallScoreDate(new Date())}
+                        >
+                          <BsArrowClockwise />
+                        </button>
+                      </div>
+                    </div>
+                    <Chart
+                      type="line"
+                      options={{
+                        scales: {
+                          y: {
+                            min: 0,
+                            max: 9,
+                          },
+                        },
+                      }}
+                      data={{
+                        labels: [...Array(31).keys()]
+                          .map((day) => {
+                            const date = moment(
+                              `${(day + 1).toString().padStart(2, "0")}/${
+                                moment(monthlyOverallScoreDate).get("month") + 1
+                              }/${moment(monthlyOverallScoreDate).get("year")}`,
+                              "DD/MM/yyyy"
+                            );
+                            return date.isValid()
+                              ? (day + 1).toString().padStart(2, "0")
+                              : undefined;
+                          })
+                          .filter((x) => !!x),
+                        datasets: [
+                          {
+                            type: "line",
+                            label: "Total",
+                            fill: false,
+                            borderColor: "#6A5FB1",
+                            backgroundColor: "#7872BF",
+                            borderWidth: 2,
+                            spanGaps: true,
+                            data: [...Array(31).keys()]
+                              .map((day) => {
+                                const date = moment(
+                                  `${(day + 1).toString().padStart(2, "0")}/${
+                                    moment(monthlyOverallScoreDate).get(
+                                      "month"
+                                    ) + 1
+                                  }/${moment(monthlyOverallScoreDate).get(
+                                    "year"
+                                  )}`,
+                                  "DD/MM/yyyy"
+                                );
 
-									<div className="w-full md:max-w-2xl border border-mti-gray-platinum p-4 pb-12 rounded-xl h-[420px]">
-										<div className="flex flex-col gap-2 w-full mb-2">
-											<span className="text-sm font-bold">Module Level per Exam</span>
-											<div className="flex gap-2 items-center">
-												{dailyScoreDate && (
-													<button onClick={() => setDailyScoreDate((prev) => moment(prev).subtract(1, "days").toDate())}>
-														<BsChevronLeft />
-													</button>
-												)}
-												<DatePicker
-													dateFormat="dd MMMM yyyy"
-													className="border border-mti-gray-dim/40 px-2 py-1.5 rounded-lg text-center w-[200px]"
-													minDate={initialStatDate}
-													maxDate={new Date()}
-													selected={dailyScoreDate}
-													onChange={setDailyScoreDate}
-												/>
-												{dailyScoreDate && (
-													<button
-														disabled={moment(dailyScoreDate).add(1, "days").isAfter(moment())}
-														onClick={() => setDailyScoreDate((prev) => moment(prev).add(1, "days").toDate())}
-														className="disabled:text-neutral-200">
-														<BsChevronRight />
-													</button>
-												)}
-												<button onClick={() => setDailyScoreDate(new Date())}>
-													<BsArrowClockwise />
-												</button>
-											</div>
-										</div>
-										<Chart
-											type="line"
-											options={{
-												scales: {
-													y: {
-														min: 0,
-														max: 9,
-													},
-												},
-											}}
-											data={{
-												labels: Object.keys(
-													groupBySession(
-														stats.filter(
-															(s) =>
-																Math.abs(timestampToMoment(s).diff(moment(dailyScoreDate), "days")) === 0 &&
-																timestampToMoment(s).day() === moment(dailyScoreDate).day(),
-														),
-													),
-												).map((_, index) => `Exam ${(index + 1).toString().padStart(2, "0")}`),
-												datasets: [
-													...MODULE_ARRAY.map((module, index) => ({
-														type: "line" as const,
-														label: capitalize(module),
-														borderColor: COLORS[index],
-														backgroundColor: COLORS[index],
-														borderWidth: 2,
-														data: calculateModularScorePerSession(
-															stats.filter(
-																(s) =>
-																	Math.abs(timestampToMoment(s).diff(moment(dailyScoreDate), "days")) === 0 &&
-																	timestampToMoment(s).day() === moment(dailyScoreDate).day(),
-															),
-															module,
-														),
-													})),
-												],
-											}}
-										/>
-									</div>
-								</div>
+                                return date.isValid()
+                                  ? calculateTotalScore(
+                                      stats.filter((s) =>
+                                        timestampToMoment(s).isBefore(date)
+                                      ),
+                                      5
+                                    ).toFixed(1)
+                                  : undefined;
+                              })
+                              .filter((x) => !!x),
+                          },
+                        ],
+                      }}
+                    />
+                  </div>
 
-								<Divider />
+                  {/* Module Level per Day */}
+                  <div className="flex flex-col gap-8 border w-full h-fit md:h-[420px] md:max-w-xs border-mti-gray-platinum p-4 pb-12 rounded-xl">
+                    <div className="flex flex-col gap-2 w-full">
+                      <span className="text-sm font-bold">
+                        Module Level per Day
+                      </span>
+                      <div className="flex gap-2 items-center">
+                        {monthlyModuleScoreDate && (
+                          <button
+                            onClick={() =>
+                              setMonthlyModuleScoreDate((prev) =>
+                                moment(prev).subtract(1, "days").toDate()
+                              )
+                            }
+                          >
+                            <BsChevronLeft />
+                          </button>
+                        )}
+                        <DatePicker
+                          dateFormat="dd MMMM yyyy"
+                          className="border border-mti-gray-dim/40 px-2 py-1.5 rounded-lg text-center w-[200px]"
+                          minDate={initialStatDate}
+                          maxDate={new Date()}
+                          selected={monthlyModuleScoreDate}
+                          onChange={setMonthlyModuleScoreDate}
+                        />
+                        {monthlyModuleScoreDate && (
+                          <button
+                            disabled={moment(monthlyModuleScoreDate)
+                              .add(1, "days")
+                              .isAfter(moment())}
+                            onClick={() =>
+                              setMonthlyModuleScoreDate((prev) =>
+                                moment(prev).add(1, "days").toDate()
+                              )
+                            }
+                            className="disabled:text-neutral-200"
+                          >
+                            <BsChevronRight />
+                          </button>
+                        )}
+                        <button
+                          onClick={() => setMonthlyModuleScoreDate(new Date())}
+                        >
+                          <BsArrowClockwise />
+                        </button>
+                      </div>
+                    </div>
+                    <div className="flex flex-col gap-4">
+                      {calculateModuleScore(
+                        stats.filter((s) =>
+                          timestampToMoment(s).isBefore(
+                            moment(monthlyModuleScoreDate)
+                          )
+                        )
+                      )
+                        .sort(sortByModule)
+                        .map(({ module, score }) => (
+                          <div className="flex flex-col gap-2" key={module}>
+                            <div className="flex justify-between items-end">
+                              <span className="text-xs">
+                                <span className="font-medium">{score}</span> of{" "}
+                                <span className="font-medium">9</span>
+                              </span>
+                              <span className="text-xs">
+                                {capitalize(module)}
+                              </span>
+                            </div>
+                            <ProgressBar
+                              color={module as Module}
+                              percentage={(score * 100) / 9}
+                              label=""
+                              className="h-3"
+                            />
+                          </div>
+                        ))}
+                    </div>
+                  </div>
+                </div>
 
-								<div className="w-full flex flex-col gap-4">
-									<DatePicker
-										dateFormat="dd/MM/yyyy"
-										className="border border-mti-gray-dim/40 px-4 py-2 rounded-lg text-center w-80"
-										startDate={startDate}
-										endDate={endDate}
-										selectsRange
-										showMonthDropdown
-										filterDate={(date) => moment(date).isSameOrBefore(moment(new Date()))}
-										onChange={([initialDate, finalDate]) => {
-											setStartDate(initialDate);
-											setEndDate(finalDate);
-										}}
-									/>
-									<div className="flex -md:flex-col -md:items-center gap-4 flex-wrap">
-										{/* Module Score Band in Interval */}
-										{MODULE_ARRAY.map((module, index) => (
-											<div
-												className="w-full md:max-w-2xl border border-mti-gray-platinum p-4 pb-12 rounded-xl h-fit md:h-96"
-												key={module}>
-												<span className="text-sm font-bold">{capitalize(module)} Score Band in Interval</span>
-												<Chart
-													options={{
-														scales: {
-															y: {
-																min: 0,
-																max: 9,
-															},
-														},
-													}}
-													type="line"
-													data={{
-														labels: intervalDates.map((date) => moment(date).format("DD/MM/YYYY")),
-														datasets: [
-															{
-																type: "line",
-																label: capitalize(module),
-																fill: false,
-																borderColor: COLORS[index],
-																backgroundColor: COLORS[index],
-																borderWidth: 2,
-																spanGaps: true,
-																data: intervalDates.map((date) => {
-																	return calculateTotalScore(
-																		stats.filter(
-																			(s) => timestampToMoment(s).isBefore(date) && s.module === module,
-																		),
-																		1,
-																	).toFixed(1);
-																}),
-															},
-														],
-													}}
-												/>
-											</div>
-										))}
-									</div>
-								</div>
-							</>
-						)}
-					</section>
-					{stats.length === 0 && (
-						<section className="flex flex-col gap-3">
-							<span className="font-semibold ml-1">No stats to display...</span>
-						</section>
-					)}
-				</Layout>
-			)}
-		</>
-	);
+                <Divider />
+
+                <div className="flex -md:flex-col -md:items-center gap-4 flex-wrap">
+                  {/* Module Level per Exam */}
+                  <div className="flex flex-col items-center gap-4 border w-full h-[420px] overflow-y-scroll scrollbar-hide md:max-w-sm border-mti-gray-platinum p-4 pb-12 rounded-xl">
+                    <div className="flex flex-col gap-2 w-full">
+                      <span className="text-sm font-bold">
+                        Module Level per Exam
+                      </span>
+                      <div className="flex gap-2 items-center">
+                        {dailyScoreDate && (
+                          <button
+                            onClick={() =>
+                              setDailyScoreDate((prev) =>
+                                moment(prev).subtract(1, "days").toDate()
+                              )
+                            }
+                          >
+                            <BsChevronLeft />
+                          </button>
+                        )}
+                        <DatePicker
+                          dateFormat="dd MMMM yyyy"
+                          className="border border-mti-gray-dim/40 px-2 py-1.5 rounded-lg text-center w-[200px]"
+                          minDate={initialStatDate}
+                          maxDate={new Date()}
+                          selected={dailyScoreDate}
+                          onChange={setDailyScoreDate}
+                        />
+                        {dailyScoreDate && (
+                          <button
+                            disabled={moment(dailyScoreDate)
+                              .add(1, "days")
+                              .isAfter(moment())}
+                            onClick={() =>
+                              setDailyScoreDate((prev) =>
+                                moment(prev).add(1, "days").toDate()
+                              )
+                            }
+                            className="disabled:text-neutral-200"
+                          >
+                            <BsChevronRight />
+                          </button>
+                        )}
+                        <button onClick={() => setDailyScoreDate(new Date())}>
+                          <BsArrowClockwise />
+                        </button>
+                      </div>
+                    </div>
+
+                    <div className="w-full grid grid-cols-1 gap-6 items-center">
+                      {Object.keys(
+                        groupBySession(
+                          stats.filter(
+                            (s) =>
+                              Math.abs(
+                                timestampToMoment(s).diff(
+                                  moment(dailyScoreDate),
+                                  "days"
+                                )
+                              ) === 0 &&
+                              timestampToMoment(s).day() ===
+                                moment(dailyScoreDate).day()
+                          )
+                        )
+                      ).length === 0 && (
+                        <span className="font-semibold ml-1">
+                          No exams performed this day...
+                        </span>
+                      )}
+
+                      {Object.keys(
+                        groupBySession(
+                          stats.filter(
+                            (s) =>
+                              Math.abs(
+                                timestampToMoment(s).diff(
+                                  moment(dailyScoreDate),
+                                  "days"
+                                )
+                              ) === 0 &&
+                              timestampToMoment(s).day() ===
+                                moment(dailyScoreDate).day()
+                          )
+                        )
+                      ).map((session, index) => (
+                        <div
+                          key={index}
+                          className="flex flex-col gap-2 items-start rounded-lg overflow-hidden"
+                        >
+                          <span className="bg-mti-purple-ultralight w-full px-2 py-1 font-semibold">
+                            Exam {(index + 1).toString().padStart(2, "0")}
+                          </span>
+                          <div className="flex justify-between w-full">
+                            {MODULE_ARRAY.map((module) => {
+                              const score = calculateScorePerModule(
+                                groupBySession(
+                                  stats.filter(
+                                    (s) =>
+                                      Math.abs(
+                                        timestampToMoment(s).diff(
+                                          moment(dailyScoreDate),
+                                          "days"
+                                        )
+                                      ) === 0
+                                  )
+                                )[session],
+                                module
+                              );
+
+                              return score === -1 ? null : (
+                                <Badge module={module}>
+                                  {score.toFixed(1)}
+                                </Badge>
+                              );
+                            }).filter((m) => !!m)}
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+
+                  <div className="w-full md:max-w-2xl border border-mti-gray-platinum p-4 pb-12 rounded-xl h-[420px]">
+                    <div className="flex flex-col gap-2 w-full mb-2">
+                      <span className="text-sm font-bold">
+                        Module Level per Exam
+                      </span>
+                      <div className="flex gap-2 items-center">
+                        {dailyScoreDate && (
+                          <button
+                            onClick={() =>
+                              setDailyScoreDate((prev) =>
+                                moment(prev).subtract(1, "days").toDate()
+                              )
+                            }
+                          >
+                            <BsChevronLeft />
+                          </button>
+                        )}
+                        <DatePicker
+                          dateFormat="dd MMMM yyyy"
+                          className="border border-mti-gray-dim/40 px-2 py-1.5 rounded-lg text-center w-[200px]"
+                          minDate={initialStatDate}
+                          maxDate={new Date()}
+                          selected={dailyScoreDate}
+                          onChange={setDailyScoreDate}
+                        />
+                        {dailyScoreDate && (
+                          <button
+                            disabled={moment(dailyScoreDate)
+                              .add(1, "days")
+                              .isAfter(moment())}
+                            onClick={() =>
+                              setDailyScoreDate((prev) =>
+                                moment(prev).add(1, "days").toDate()
+                              )
+                            }
+                            className="disabled:text-neutral-200"
+                          >
+                            <BsChevronRight />
+                          </button>
+                        )}
+                        <button onClick={() => setDailyScoreDate(new Date())}>
+                          <BsArrowClockwise />
+                        </button>
+                      </div>
+                    </div>
+                    <Chart
+                      type="line"
+                      options={{
+                        scales: {
+                          y: {
+                            min: 0,
+                            max: 9,
+                          },
+                        },
+                      }}
+                      data={{
+                        labels: Object.keys(
+                          groupBySession(
+                            stats.filter(
+                              (s) =>
+                                Math.abs(
+                                  timestampToMoment(s).diff(
+                                    moment(dailyScoreDate),
+                                    "days"
+                                  )
+                                ) === 0 &&
+                                timestampToMoment(s).day() ===
+                                  moment(dailyScoreDate).day()
+                            )
+                          )
+                        ).map(
+                          (_, index) =>
+                            `Exam ${(index + 1).toString().padStart(2, "0")}`
+                        ),
+                        datasets: [
+                          ...MODULE_ARRAY.map((module, index) => ({
+                            type: "line" as const,
+                            label: capitalize(module),
+                            borderColor: COLORS[index],
+                            backgroundColor: COLORS[index],
+                            borderWidth: 2,
+                            data: calculateModularScorePerSession(
+                              stats.filter(
+                                (s) =>
+                                  Math.abs(
+                                    timestampToMoment(s).diff(
+                                      moment(dailyScoreDate),
+                                      "days"
+                                    )
+                                  ) === 0 &&
+                                  timestampToMoment(s).day() ===
+                                    moment(dailyScoreDate).day()
+                              ),
+                              module
+                            ),
+                          })),
+                        ],
+                      }}
+                    />
+                  </div>
+                </div>
+
+                <Divider />
+
+                <div className="w-full flex flex-col gap-4">
+                  <DatePicker
+                    dateFormat="dd/MM/yyyy"
+                    className="border border-mti-gray-dim/40 px-4 py-2 rounded-lg text-center w-80"
+                    startDate={startDate}
+                    endDate={endDate}
+                    selectsRange
+                    showMonthDropdown
+                    filterDate={(date) =>
+                      moment(date).isSameOrBefore(moment(new Date()))
+                    }
+                    onChange={([initialDate, finalDate]) => {
+                      setStartDate(initialDate);
+                      setEndDate(finalDate);
+                    }}
+                  />
+                  <div className="flex -md:flex-col -md:items-center gap-4 flex-wrap">
+                    {/* Module Score Band in Interval */}
+                    {MODULE_ARRAY.map((module, index) => (
+                      <div
+                        className="w-full md:max-w-2xl border border-mti-gray-platinum p-4 pb-12 rounded-xl h-fit md:h-96"
+                        key={module}
+                      >
+                        <span className="text-sm font-bold">
+                          {capitalize(module)} Score Band in Interval
+                        </span>
+                        <Chart
+                          options={{
+                            scales: {
+                              y: {
+                                min: 0,
+                                max: 9,
+                              },
+                            },
+                          }}
+                          type="line"
+                          data={{
+                            labels: intervalDates.map((date) =>
+                              moment(date).format("DD/MM/YYYY")
+                            ),
+                            datasets: [
+                              {
+                                type: "line",
+                                label: capitalize(module),
+                                fill: false,
+                                borderColor: COLORS[index],
+                                backgroundColor: COLORS[index],
+                                borderWidth: 2,
+                                spanGaps: true,
+                                data: intervalDates.map((date) => {
+                                  return calculateTotalScore(
+                                    stats.filter(
+                                      (s) =>
+                                        timestampToMoment(s).isBefore(date) &&
+                                        s.module === module
+                                    ),
+                                    1
+                                  ).toFixed(1);
+                                }),
+                              },
+                            ],
+                          }}
+                        />
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </>
+            )}
+          </section>
+          {stats.length === 0 && (
+            <section className="flex flex-col gap-3">
+              <span className="font-semibold ml-1">No stats to display...</span>
+            </section>
+          )}
+        </Layout>
+      )}
+    </>
+  );
 }
diff --git a/src/pages/training/index.tsx b/src/pages/training/index.tsx
index c59765e3..df6cdf41 100644
--- a/src/pages/training/index.tsx
+++ b/src/pages/training/index.tsx
@@ -189,7 +189,7 @@ const Training: React.FC<{user: User, entities: EntityWithRoles[], users: User[]
 					</div>
 				) : (
 					<>
-						<RecordFilter users={users} entities={entities} user={user} filterState={{filter: filter, setFilter: setFilter}} assignments={false}>
+						<RecordFilter  entities={entities} user={user} filterState={{filter: filter, setFilter: setFilter}} assignments={false}>
 							{user.type === "student" && (
 								<>
 									<div className="flex items-center">
diff --git a/src/utils/entities.be.ts b/src/utils/entities.be.ts
index 9e4c85d5..7df2d620 100644
--- a/src/utils/entities.be.ts
+++ b/src/utils/entities.be.ts
@@ -29,10 +29,10 @@ export const getEntitiesWithRoles = async (ids?: string[]): Promise<EntityWithRo
 	return entities.map((x) => ({ ...x, roles: roles.filter((y) => y.entityID === x.id) || [] }));
 };
 
-export const getEntities = async (ids?: string[]) => {
+export const getEntities = async (ids?: string[], projection = {}) => {
 	return await db
 		.collection("entities")
-		.find<Entity>(ids ? { id: { $in: ids } } : {})
+		.find<Entity>(ids ? { id: { $in: ids } } : {}, projection)
 		.toArray();
 };
 
diff --git a/src/utils/users.be.ts b/src/utils/users.be.ts
index 7997aef1..7636a89a 100644
--- a/src/utils/users.be.ts
+++ b/src/utils/users.be.ts
@@ -11,14 +11,64 @@ import { mapBy } from ".";
 
 const db = client.db(process.env.MONGODB_DB);
 
-export async function getUsers(filter?: object, limit = 0, sort = {}) {
+export async function getUsers(filter?: object, limit = 0, sort = {}, projection = {}) {
 	return await db
 		.collection("users")
-		.find<User>(filter || {}, { projection: { _id: 0 } })
+		.find<User>(filter || {}, { projection: { _id: 0, ...projection } })
 		.limit(limit)
 		.sort(sort)
 		.toArray();
 }
+
+export async function searchUsers(searchInput?: string, limit = 50, page = 0, sort: object = { "name": 1 }, projection = {}, filter?: object) {
+	const compoundFilter = {
+		"compound": {
+			"should": [...(searchInput != "" ? [{
+				"autocomplete": {
+					"query": searchInput,
+					"path": "name",
+				}
+			}, {
+				"autocomplete": {
+					"query": searchInput,
+					"path": "email",
+				}
+			}] : [{ exists: { path: "name" } }])],
+			"minimumShouldMatch": 1,
+
+		}
+	}
+	
+	const [{ users, totalUsers }] = await db
+		.collection("users").aggregate([
+			{
+				"$search": {
+					"index": "UsersByNameEmail",
+					...compoundFilter
+				}
+			},
+			...(filter ? [{
+				"$match": Object.entries(filter).reduce((accm, [key, value]) => {
+					if (value.length === 0) return accm
+					accm[key] = Array.isArray(value) ? { $in: value } : value
+					return accm;
+				}, {} as any)
+			}] : []),
+			{
+				$facet: {
+					totalUsers: [{ $count: "count" }],
+					users: [
+						{ $sort: sort },
+						{ $skip: limit * page },
+						{ $limit: limit },
+						{ "$project": { _id: 0, label: { $concat: ["$name", " - ", "$email"] }, value: "$id", ...projection } }
+					]
+				}
+			}
+		]).toArray();
+	return { users, total: totalUsers[0]?.count || 0 };
+}
+
 export async function countUsers(filter?: object) {
 	return await db
 		.collection("users")
@@ -67,10 +117,10 @@ export async function countEntityUsers(id: string, filter?: object) {
 	return await db.collection("users").countDocuments({ "entities.id": id, ...(filter || {}) });
 }
 
-export async function getEntitiesUsers(ids: string[], filter?: object, limit?: number) {
+export async function getEntitiesUsers(ids: string[], filter?: object, limit?: number, projection = {}) {
 	return await db
 		.collection("users")
-		.find<User>({ "entities.id": { $in: ids }, ...(filter || {}) })
+		.find<User>({ "entities.id": { $in: ids }, ...(filter || {}) }, projection)
 		.limit(limit || 0)
 		.toArray();
 }

From 39a397d2628ea1da928a241af261d085ff2526af Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Mon, 20 Jan 2025 11:44:29 +0000
Subject: [PATCH 07/69] Add progress vertical bars to pipeline steps

---
 .../ApprovalWorkflows/WorkflowStep.tsx        | 90 ++++++++++---------
 .../ApprovalWorkflows/WorkflowStepNumber.tsx  |  2 +-
 .../ApprovalWorkflows/WorkflowStepSelects.tsx |  4 +-
 src/pages/approval-workflows/[id].tsx         |  2 +-
 4 files changed, 51 insertions(+), 47 deletions(-)

diff --git a/src/components/ApprovalWorkflows/WorkflowStep.tsx b/src/components/ApprovalWorkflows/WorkflowStep.tsx
index f17a8574..7d6adf9f 100644
--- a/src/components/ApprovalWorkflows/WorkflowStep.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowStep.tsx
@@ -57,61 +57,65 @@ export default function WorkflowStep({
     }
 
     return (
-        <div
-            className={clsx(
-                'flex items-center space-x-3 w-[800px] p-5 rounded-2xl border-2 border-mti-purple-ultralight',
-                { 'bg-mti-purple-ultralight': isSelected }
-            )}
-        >
-            <div className="flex w-full items-center">
-                <div className="flex items-center space-x-3">
-                    <WorkflowStepNumber number={stepNumber} isSelected={isSelected} />
-                    {stepNumber !== 1 && !finalStep &&
-                        <LuGripHorizontal className="cursor-grab active:cursor-grabbing" size={25} />
-                    }
-                </div>
 
-                {/* Only show selects if editView === true and stepType === 'approval-by' */}
-                {showSelects && (
-                    <div className="ml-auto">
-                        <WorkflowStepSelects
-                            // Provide any relevant options:
-                            leftOptions={teacherOptions}
-                            rightOptions={teacherOptions}
-                            leftValue={leftValue}
-                            rightValue={rightValue}
-                            onLeftChange={setLeftValue}
-                            onRightChange={setRightValue}
-                            leftPlaceholder={leftPlaceholder}
-                            rightPlaceholder={rightPlaceholder}
-                        />
-                    </div>
+        <div className="flex w-full">
+            <div className="flex flex-col items-center">
+                <WorkflowStepNumber number={stepNumber} isSelected={isSelected} />
+
+                {/* Vertical Bar connecting steps */}
+                {!finalStep && (
+                    <div className="w-1 h-10 bg-mti-purple-dark"></div>
                 )}
+            </div>
 
-                {stepNumber === 1 && (
-                    <div className="ml-auto">
-                        <div className={"flex flex-row gap-0"}>
-                            <div className="flex items-center gap-0 text-mti-gray-dim w-[275px] px-5 py-3 border rounded-l-2xl border-mti-gray-platinum">
-                                <FaWpforms size={20} />
-                                <span className="px-3 text-sm font-normal focus:outline-none">Form Intake</span>
-                            </div>
-                            <div className="flex items-center gap-0 text-mti-gray-dim w-[275px] px-5 py-3 border rounded-r-2xl border-mti-gray-platinum">
-                                <span className="text-sm font-normal focus:outline-none">Prof. X</span>
-                            </div>
+            {stepNumber !== 1 && !finalStep
+                ? <LuGripHorizontal className="ml-3 mt-2 cursor-grab active:cursor-grabbing" size={25} />
+                : <div className="ml-3 mt-2" style={{ width: 25, height: 25 }}></div>
+            }
+
+            {/* Only show selects if editView === true and stepType === 'approval-by' */}
+            {showSelects && (
+                <div className="ml-10">
+                    <WorkflowStepSelects
+                        leftOptions={teacherOptions}
+                        rightOptions={teacherOptions}
+                        leftValue={leftValue}
+                        rightValue={rightValue}
+                        onLeftChange={setLeftValue}
+                        onRightChange={setRightValue}
+                        leftPlaceholder={leftPlaceholder}
+                        rightPlaceholder={rightPlaceholder}
+                    />
+                </div>
+            )}
+
+            {stepNumber === 1 && (
+                <div className="ml-10">
+                    <div className={"flex flex-row gap-0"}>
+                        {/* h-[40px] probably is not the best way to match the height with the select component, but for now should be ok */}
+                        <div className="flex items-center text-mti-gray-dim w-[275px] px-5 h-[40px] border rounded-l-2xl border-mti-gray-platinum">
+                            <FaWpforms size={20} />
+                            <span className="px-3 text-sm font-normal focus:outline-none">Form Intake</span>
+                        </div>
+                        <div className="flex items-center text-mti-gray-dim w-[275px] px-5 h-[40px] border rounded-r-2xl border-mti-gray-platinum">
+                            <span className="text-sm font-normal focus:outline-none">Prof. X</span>
                         </div>
                     </div>
-                )}
+                </div>
+            )}
 
-                {editView && stepNumber !== 1 && !finalStep && (
+            {editView && stepNumber !== 1 && !finalStep && (
+                <div className="ml-4 mt-2">
                     <button
                         data-tip="Delete"
-                        className="ml-4 cursor-pointer tooltip"
+                        className="cursor-pointer tooltip"
                         onClick={onDelete}
                     >
                         <BsTrash className="size-6 hover:text-mti-purple-light transition ease-in-out duration-300" />
                     </button>
-                )}
-            </div>
+                </div>
+            )}
         </div>
+
     );
 };
\ No newline at end of file
diff --git a/src/components/ApprovalWorkflows/WorkflowStepNumber.tsx b/src/components/ApprovalWorkflows/WorkflowStepNumber.tsx
index 93e75ca8..393f19b9 100644
--- a/src/components/ApprovalWorkflows/WorkflowStepNumber.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowStepNumber.tsx
@@ -12,7 +12,7 @@ export default function WorkflowStepNumber({ number, isSelected = false }: Props
     return (
         <div
             className={clsx(
-                'flex items-center justify-center w-10 h-10 rounded-full',
+                'flex items-center justify-center w-11 h-11 rounded-full',
                 {
                     'bg-mti-purple text-mti-purple-ultralight': isSelected,
                     'bg-mti-purple-ultralight text-gray-500': !isSelected,
diff --git a/src/components/ApprovalWorkflows/WorkflowStepSelects.tsx b/src/components/ApprovalWorkflows/WorkflowStepSelects.tsx
index 78c5b10c..f96e3fc2 100644
--- a/src/components/ApprovalWorkflows/WorkflowStepSelects.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowStepSelects.tsx
@@ -34,7 +34,7 @@ export default function WorkflowStepSelects({
                     onChange={onLeftChange}
                     placeholder={leftPlaceholder}
                     flat
-                    className={"px-2 py-1 rounded-none rounded-l-2xl"}
+                    className={"px-2 rounded-none rounded-l-2xl"}
                 />
             </div>
             {/* Right Select */}
@@ -45,7 +45,7 @@ export default function WorkflowStepSelects({
                     onChange={onRightChange}
                     placeholder={rightPlaceholder}
                     flat
-                    className="px-2 py-1 rounded-none rounded-r-2xl"
+                    className="px-2 rounded-none rounded-r-2xl"
                 />
             </div>
         </div>
diff --git a/src/pages/approval-workflows/[id].tsx b/src/pages/approval-workflows/[id].tsx
index f9f0d42f..d35af5ce 100644
--- a/src/pages/approval-workflows/[id].tsx
+++ b/src/pages/approval-workflows/[id].tsx
@@ -180,7 +180,7 @@ export default function Home({ approvalWorkflow }: { approvalWorkflow: ApprovalW
                                     axis="y"
                                     values={steps}
                                     onReorder={handleReorder}
-                                    className="flex flex-col gap-4"
+                                    className="flex flex-col gap-0"
                                 >
 
                                     <AnimatePresence>

From 01222b3a13d599a02a5bba730115eb1ca4f1a112 Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Mon, 20 Jan 2025 23:32:32 +0000
Subject: [PATCH 08/69] dynamic list of new workflows in workflow builder and
 some code refactoring

---
 .../ApprovalWorkflows/WorkflowForm.tsx        | 143 ++++++++++++++
 .../ApprovalWorkflows/WorkflowStep.tsx        |  27 +--
 src/demo/approval_workflows.json              |  96 ++++++----
 src/interfaces/approval.workflow.ts           |  29 ++-
 src/pages/approval-workflows/[id].tsx         | 150 +--------------
 src/pages/approval-workflows/create.tsx       | 179 ++++++++++++++++++
 src/pages/approval-workflows/index.tsx        |  28 ++-
 7 files changed, 435 insertions(+), 217 deletions(-)
 create mode 100644 src/components/ApprovalWorkflows/WorkflowForm.tsx
 create mode 100644 src/pages/approval-workflows/create.tsx

diff --git a/src/components/ApprovalWorkflows/WorkflowForm.tsx b/src/components/ApprovalWorkflows/WorkflowForm.tsx
new file mode 100644
index 00000000..fc59db88
--- /dev/null
+++ b/src/components/ApprovalWorkflows/WorkflowForm.tsx
@@ -0,0 +1,143 @@
+import Option from "@/interfaces/option";
+import { AnimatePresence, Reorder } from "framer-motion";
+import { useEffect, useState } from "react";
+import { FaRegCheckCircle } from "react-icons/fa";
+import { IoIosAddCircleOutline } from "react-icons/io";
+import Button from "../Low/Button";
+import WorkflowStepComponent from "./WorkflowStep";
+import { ApprovalWorkflow, WorkflowStep } from "@/interfaces/approval.workflow";
+
+const teacherOptions: Option[] = [
+    // fetch from database?
+]
+
+const directorOptions: Option[] = [
+    // fetch from database?
+]
+
+// Variants for animating steps when they are added/removed
+const itemVariants = {
+    initial: { opacity: 0, y: -20 },
+    animate: { opacity: 1, y: 0 },
+    exit: { opacity: 0, x: 20 },
+};
+
+interface Props {
+    workflow: ApprovalWorkflow;
+    onWorkflowChange: (workflow: ApprovalWorkflow) => void;
+}
+
+export default function WorkflowForm({ workflow, onWorkflowChange }: Props) {
+    const [steps, setSteps] = useState<WorkflowStep[]>(workflow.steps);
+    const [stepCounter, setStepCounter] = useState<number>(3); // to guarantee unique keys used for animations
+    const lastStep = steps[steps.length - 1];
+
+    useEffect(() => {
+        setSteps(workflow.steps);
+    }, [workflow]);
+
+    useEffect(() => {
+        const updatedWorkflow = { ...workflow, steps };
+        onWorkflowChange(updatedWorkflow);
+    }, [steps]);
+
+    const addStep = () => {
+        setSteps((prev) => {
+            const newStep: WorkflowStep = {
+                key: stepCounter,
+                stepType: "approval-by",
+                stepNumber: steps.length - 1,
+                completed: false,
+            };
+            setStepCounter((count) => count + 1);
+
+            return [...prev.slice(0, -1), newStep, lastStep];
+        });
+    };
+
+    const handleDelete = (key: number | undefined) => {
+        if (key){
+            setSteps((prev) => prev.filter((step) => step.key !== key));
+        }
+    };
+
+    const handleReorder = (newOrder: WorkflowStep[]) => {
+        const firstIndex = newOrder.findIndex((s) => s.firstStep);
+        if (firstIndex !== -1 && firstIndex !== 0) {
+            const [first] = newOrder.splice(firstIndex, 1);
+            newOrder.unshift(first);
+        }
+
+        const finalIndex = newOrder.findIndex((s) => s.finalStep);
+        if (finalIndex !== -1 && finalIndex !== newOrder.length - 1) {
+            const [final] = newOrder.splice(finalIndex, 1);
+            newOrder.push(final);
+        }
+
+        setSteps(newOrder);
+    };
+
+    return (
+        <div className="flex flex-col gap-6">
+            <Button
+                color="purple"
+                variant="solid"
+                onClick={addStep}
+                type="button"
+                className="max-w-fit text-lg font-medium flex items-center gap-2 text-left"
+            >
+                <IoIosAddCircleOutline className="size-6" />
+                Add Step
+            </Button>
+
+            <Reorder.Group
+                axis="y"
+                values={steps}
+                onReorder={handleReorder}
+                className="flex flex-col gap-0"
+            >
+
+                <AnimatePresence>
+                    {steps.map((step, index) => (
+                        <Reorder.Item
+                            key={step.key}
+                            value={step}
+                            variants={itemVariants}
+                            initial="initial"
+                            animate="animate"
+                            exit="exit"
+                            transition={{ duration: 0.3 }}
+                            layout
+                            drag={!(step.firstStep || step.finalStep)}
+                        >
+                            <WorkflowStepComponent
+                                key={step.key}
+                                completed={false}
+                                editView
+                                stepNumber={index + 1}
+                                stepType={step.stepType}
+                                requestedBy="Prof. Foo"
+                                finalStep={step.finalStep}
+                                onDelete={() => handleDelete(step.key)}
+                            />
+                            {step.finalStep &&
+                                <Button
+                                    type="submit"
+                                    color="purple"
+                                    variant="solid"
+                                    className="max-w-fit text-lg font-medium flex items-center gap-2 text-left mt-7"
+                                >
+                                    <FaRegCheckCircle className="size-5" />
+                                    Confirm Exam Workflow Pipeline
+                                </Button>
+                            }
+                        </Reorder.Item>
+                    ))}
+
+                </AnimatePresence>
+            </Reorder.Group>
+        </div>
+
+
+    );
+};
\ No newline at end of file
diff --git a/src/components/ApprovalWorkflows/WorkflowStep.tsx b/src/components/ApprovalWorkflows/WorkflowStep.tsx
index 7d6adf9f..06ec7582 100644
--- a/src/components/ApprovalWorkflows/WorkflowStep.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowStep.tsx
@@ -1,11 +1,11 @@
 import Option from "@/interfaces/option";
-import clsx from "clsx";
 import { useState } from "react";
 import { BsTrash } from "react-icons/bs";
 import { FaWpforms } from "react-icons/fa6";
 import { LuGripHorizontal } from "react-icons/lu";
 import WorkflowStepNumber from "./WorkflowStepNumber";
 import WorkflowStepSelects from "./WorkflowStepSelects";
+import { WorkflowStep } from "@/interfaces/approval.workflow";
 
 export type StepType = "form-intake" | "approval-by";
 
@@ -17,26 +17,16 @@ const directorOptions: Option[] = [
     // fetch from database?
 ]
 
-interface Props {
-    editView?: boolean,
-    finalStep?: boolean,
-    isSelected?: boolean,
-    stepNumber: number,
-    stepType: StepType,
-    requestedBy: string,
-    //requestedBy: TeacherUser | CorporateUser | MasterCorporateUser,
-    onDelete?: () => void;
-}
-
-export default function WorkflowStep({
+export default function WorkflowStepComponent({
+    stepType,
+    stepNumber,
+    completed = false,
     editView = false,
     finalStep = false,
     isSelected = false,
-    stepNumber,
-    stepType,
     requestedBy,
     onDelete,
-}: Props) {
+}: WorkflowStep) {
     // disable selectability of step if in editView
     const effectiveIsSelected = editView ? false : isSelected;
 
@@ -57,7 +47,6 @@ export default function WorkflowStep({
     }
 
     return (
-
         <div className="flex w-full">
             <div className="flex flex-col items-center">
                 <WorkflowStepNumber number={stepNumber} isSelected={isSelected} />
@@ -94,8 +83,7 @@ export default function WorkflowStep({
                     <div className={"flex flex-row gap-0"}>
                         {/* h-[40px] probably is not the best way to match the height with the select component, but for now should be ok */}
                         <div className="flex items-center text-mti-gray-dim w-[275px] px-5 h-[40px] border rounded-l-2xl border-mti-gray-platinum">
-                            <FaWpforms size={20} />
-                            <span className="px-3 text-sm font-normal focus:outline-none">Form Intake</span>
+                            <span className="text-sm font-normal focus:outline-none">Form Intake</span>
                         </div>
                         <div className="flex items-center text-mti-gray-dim w-[275px] px-5 h-[40px] border rounded-r-2xl border-mti-gray-platinum">
                             <span className="text-sm font-normal focus:outline-none">Prof. X</span>
@@ -110,6 +98,7 @@ export default function WorkflowStep({
                         data-tip="Delete"
                         className="cursor-pointer tooltip"
                         onClick={onDelete}
+                        type="button"
                     >
                         <BsTrash className="size-6 hover:text-mti-purple-light transition ease-in-out duration-300" />
                     </button>
diff --git a/src/demo/approval_workflows.json b/src/demo/approval_workflows.json
index d0244fb8..b56a6920 100644
--- a/src/demo/approval_workflows.json
+++ b/src/demo/approval_workflows.json
@@ -1,42 +1,66 @@
 [
     {
-        "id": "local-test-id-1",
+        "id": "kajhfakscbka-asacaca-acawesae",
         "name": "name-1",
-        "module": "reading",
-        "status": "approved",
-        "approvers": "prof-1",
-        "step": "Concluded"
-    },
-    {
-        "id": "local-test-id-2",
-        "name": "name-2",
-        "module": "reading",
+        "modules": [
+            "reading",
+            "writing"
+        ],
         "status": "pending",
-        "approvers": "prof-2",
-        "step": "Concluded"
-    },
-    {
-        "id": "local-test-id-3",
-        "name": "name-3",
-        "module": "listening",
-        "status": "rejected",
-        "approvers": "prof-3",
-        "step": "Concluded"
-    },
-    {
-        "id": "local-test-id-4",
-        "name": "name-4",
-        "module": "writing",
-        "status": "approved",
-        "approvers": "prof-4",
-        "step": "Concluded"
-    },
-    {
-        "id": "local-test-id-5",
-        "name": "name-5",
-        "module": "reading",
-        "status": "approved",
-        "approvers": "prof-5",
-        "step": "Concluded"
+        "approvers": "prof-1",
+        "steps": [
+            {
+                "stepType": "form-intake",
+                "stepNumber": 1,
+                "completed": true,
+                "completedBy": "Prof. X",
+                "assignees": [
+                    "Prof. X",
+                    "Prof. Y",
+                    "Prof. Z"
+                ]
+            },
+            {
+                "stepType": "approval-by",
+                "stepNumber": 2,
+                "completed": true,
+                "completedBy": "Prof. Y",
+                "assignees": [
+                    "Prof. X",
+                    "Prof. Y",
+                    "Prof. Z"
+                ]
+            },
+            {
+                "stepType": "approval-by",
+                "stepNumber": 3,
+                "completed": false,
+                "assignees": [
+                    "Prof. X",
+                    "Prof. Y",
+                    "Prof. Z"
+                ]
+            },
+            {
+                "stepType": "approval-by",
+                "stepNumber": 4,
+                "completed": false,
+                "assignees": [
+                    "Prof. X",
+                    "Prof. Y",
+                    "Prof. Z"
+                ]
+            },
+            {
+                "stepType": "approval-by",
+                "stepNumber": 5,
+                "completed": false,
+                "assignees": [
+                    "Prof. X",
+                    "Prof. Y",
+                    "Prof. Z"
+                ]
+            }
+        ]
     }
 ]
\ No newline at end of file
diff --git a/src/interfaces/approval.workflow.ts b/src/interfaces/approval.workflow.ts
index c91b06f5..51fd4239 100644
--- a/src/interfaces/approval.workflow.ts
+++ b/src/interfaces/approval.workflow.ts
@@ -1,12 +1,29 @@
 import {Module} from ".";
 
 export interface ApprovalWorkflow {
-    id: string;
-    name: string;
-    module: Module;
-    status: ApprovalWorkflowStatus;
-    approvers: string;
-    step: string;
+    id: string,
+    name: string,
+    modules: Module[],
+    status: ApprovalWorkflowStatus,
+    steps: WorkflowStep[],
+}
+
+export type StepType = "form-intake" | "approval-by";
+
+export interface WorkflowStep {
+    key?: number,
+    stepType: StepType,
+    stepNumber: number,
+    completed: boolean,
+    completedBy?: string,
+    assignees?: string[],
+    editView?: boolean,
+    firstStep?: boolean,
+    finalStep?: boolean,
+    isSelected?: boolean,
+    requestedBy?: string,
+    //requestedBy: TeacherUser | CorporateUser | MasterCorporateUser,
+    onDelete?: () => void;
 }
 
 export type ApprovalWorkflowStatus = "approved" | "pending" | "rejected";
diff --git a/src/pages/approval-workflows/[id].tsx b/src/pages/approval-workflows/[id].tsx
index d35af5ce..30e2abe1 100644
--- a/src/pages/approval-workflows/[id].tsx
+++ b/src/pages/approval-workflows/[id].tsx
@@ -5,13 +5,10 @@ import { sessionOptions } from "@/lib/session";
 import { redirect } from "@/utils";
 import { requestUser } from "@/utils/api";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
-import { AnimatePresence, Reorder } from "framer-motion";
 import { withIronSessionSsr } from "iron-session/next";
 import Head from "next/head";
 import Link from "next/link";
 import { BsChevronLeft } from "react-icons/bs";
-import { FaRegCheckCircle } from "react-icons/fa";
-import { IoIosAddCircleOutline } from "react-icons/io";
 import { ToastContainer } from "react-toastify";
 
 
@@ -20,26 +17,9 @@ import approvalWorkflowsData from '../../demo/approval_workflows.json'; // to te
 import RequestedBy from "@/components/ApprovalWorkflows/RequestedBy";
 import StartedOn from "@/components/ApprovalWorkflows/StartedOn";
 import Status from "@/components/ApprovalWorkflows/Status";
-import WorkflowStep, { StepType } from "@/components/ApprovalWorkflows/WorkflowStep";
-import Button from "@/components/Low/Button";
-import { useState } from "react";
-
-interface Step {
-    stepType: StepType;
-    firstStep?: boolean;
-    finalStep?: boolean;
-    key: number;
-}
-
-// Variants for animating steps when they are added/removed
-const itemVariants = {
-    initial: { opacity: 0, y: -20 },
-    animate: { opacity: 1, y: 0 },
-    exit: { opacity: 0, x: 20 },
-};
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => {
-    const user = await requestUser(req, res)
+    const user = await requestUser(req, res);
     if (!user) return redirect("/login")
 
     if (shouldRedirectHome(user) || !["admin", "developer", "teacher", "corporate", "mastercorporate"].includes(user.type))
@@ -59,54 +39,7 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
 export default function Home({ approvalWorkflow }: { approvalWorkflow: ApprovalWorkflow }) {
     const { user } = useUser({ redirectTo: "/login" });
 
-    const [selectedButton, setSelectedButton] = useState<"forms" | "progress">("forms");
-
-    const [steps, setSteps] = useState<Step[]>([
-        { stepType: "form-intake", firstStep: true, key: 1 },
-        { stepType: "approval-by", finalStep: true, key: 2 },
-    ]);
-    const [stepCounter, setStepCounter] = useState<number>(3); // to guarantee unique keys used for animations
-    const firstStep = steps[0];
-    const lastStep = steps[steps.length - 1];
-    const middleSteps = steps.slice(1, steps.length - 1);
-
-    const addStep = () => {
-        setSteps((prev) => {
-            const newStep: Step = {
-                key: stepCounter,
-                stepType: "approval-by",
-            };
-            setStepCounter((count) => count + 1);
-
-            return [...prev.slice(0, -1), newStep, lastStep];
-        });
-    };
-
-    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-        e.preventDefault();
-        // Handle form submission logic
-        console.log("Form submitted!", steps);
-    };
-
-    const handleDelete = (key: number) => {
-        setSteps((prev) => prev.filter((step) => step.key !== key));
-    };
-
-    const handleReorder = (newOrder: Step[]) => {
-        const firstIndex = newOrder.findIndex((s) => s.firstStep);
-        if (firstIndex !== -1 && firstIndex !== 0) {
-            const [first] = newOrder.splice(firstIndex, 1);
-            newOrder.unshift(first);
-        }
-
-        const finalIndex = newOrder.findIndex((s) => s.finalStep);
-        if (finalIndex !== -1 && finalIndex !== newOrder.length - 1) {
-            const [final] = newOrder.splice(finalIndex, 1);
-            newOrder.push(final);
-        }
-
-        setSteps(newOrder);
-    };
+    
 
     return (
         <>
@@ -145,85 +78,6 @@ export default function Home({ approvalWorkflow }: { approvalWorkflow: ApprovalW
                                 status="pending"
                             />
                         </div>
-                        <div className="flex flex-row gap-6">
-                            <Button
-                                color="purple"
-                                variant={selectedButton === "forms" ? "solid" : "outline"}
-                                onClick={() => setSelectedButton("forms")}
-                                className="transition-all duration-300 w-56 text-lg font-medium"
-                            >
-                                Forms
-                            </Button>
-                            <Button
-                                color="purple"
-                                variant={selectedButton === "progress" ? "solid" : "outline"}
-                                onClick={() => setSelectedButton("progress")}
-                                className="transition-all duration-300 w-56 text-lg font-medium"
-                            >
-                                Progress
-                            </Button>
-                        </div>
-
-                        <form onSubmit={handleSubmit}>
-                            <div className="flex flex-col gap-6">
-                                <Button
-                                    color="purple"
-                                    variant="solid"
-                                    onClick={addStep}
-                                    className="max-w-fit text-lg font-medium flex items-center gap-2 text-left"
-                                >
-                                    <IoIosAddCircleOutline className="size-6" />
-                                    Add Step
-                                </Button>
-
-                                <Reorder.Group
-                                    axis="y"
-                                    values={steps}
-                                    onReorder={handleReorder}
-                                    className="flex flex-col gap-0"
-                                >
-
-                                    <AnimatePresence>
-                                        {steps.map((step, index) => (
-                                            <Reorder.Item
-                                                key={step.key}
-                                                value={step}
-                                                variants={itemVariants}
-                                                initial="initial"
-                                                animate="animate"
-                                                exit="exit"
-                                                transition={{ duration: 0.3 }}
-                                                layout
-                                                drag={!(step.firstStep || step.finalStep)}
-                                            >
-                                                <WorkflowStep
-                                                    editView
-                                                    stepNumber={index + 1}
-                                                    stepType={step.stepType}
-                                                    requestedBy="Prof. Foo"
-                                                    finalStep={step.finalStep}
-                                                    onDelete={() => handleDelete(step.key)}
-                                                />
-                                                {step.finalStep &&
-                                                    <Button
-                                                        type="submit"
-                                                        color="purple"
-                                                        variant="solid"
-                                                        className="max-w-fit text-lg font-medium flex items-center gap-2 text-left mt-7"
-                                                    >
-                                                        <FaRegCheckCircle className="size-5" />
-                                                        Confirm Exam Workflow Pipeline
-                                                    </Button>
-                                                }
-                                            </Reorder.Item>
-                                        ))}
-
-                                    </AnimatePresence>
-
-
-                                </Reorder.Group>
-                            </div>
-                        </form>
                     </section>
                 </Layout>
             )}
diff --git a/src/pages/approval-workflows/create.tsx b/src/pages/approval-workflows/create.tsx
new file mode 100644
index 00000000..e82cfdbb
--- /dev/null
+++ b/src/pages/approval-workflows/create.tsx
@@ -0,0 +1,179 @@
+import Layout from "@/components/High/Layout";
+import useUser from "@/hooks/useUser";
+import { sessionOptions } from "@/lib/session";
+import { redirect } from "@/utils";
+import { requestUser } from "@/utils/api";
+import { shouldRedirectHome } from "@/utils/navigation.disabled";
+import { withIronSessionSsr } from "iron-session/next";
+import Head from "next/head";
+import Link from "next/link";
+import { BsChevronLeft, BsTrash } from "react-icons/bs";
+import { ToastContainer } from "react-toastify";
+import { v4 as uuidv4 } from 'uuid';
+
+import WorkflowForm from "@/components/ApprovalWorkflows/WorkflowForm";
+import Button from "@/components/Low/Button";
+import Input from "@/components/Low/Input";
+import { ApprovalWorkflow } from "@/interfaces/approval.workflow";
+import { useState } from "react";
+import { MdFormatListBulletedAdd } from "react-icons/md";
+
+export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
+    const user = await requestUser(req, res)
+    if (!user) return redirect("/login")
+
+    if (shouldRedirectHome(user) || !["admin", "developer", "teacher", "corporate", "mastercorporate"].includes(user.type))
+        return redirect("/")
+
+    return {
+        props: { user },
+    };
+}, sessionOptions);
+
+export default function Home() {
+    const { user } = useUser({ redirectTo: "/login" });
+
+    const [workflows, setWorkflows] = useState<ApprovalWorkflow[]>([]);
+    const [selectedWorkflowId, setSelectedWorkflowId] = useState<string | null>(null);
+    const currentWorkflow = workflows.find(wf => wf.id === selectedWorkflowId);
+
+    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        // Handle form submission logic
+        console.log("Form submitted! Values:", workflows);
+    };
+
+    const handleAddNewWorkflow = () => {
+        const newId = uuidv4();
+        const newWorkflow: ApprovalWorkflow = {
+            id: newId,
+            name: "",
+            modules: [],
+            status: "pending",
+            steps: [
+                { key: Date.now(), completed: false , editView: true, stepType: "form-intake", stepNumber: 1, firstStep: true },
+                { key: Date.now() + 1, completed: false, editView: true, stepType: "approval-by", stepNumber: 2, finalStep: true },
+            ],
+        };
+        setWorkflows((prev) => [...prev, newWorkflow]);
+        setSelectedWorkflowId(newId);
+    };
+
+    const onWorkflowChange = (updatedWorkflow: ApprovalWorkflow) => {
+        setWorkflows(prev =>
+            prev.map(wf => (wf.id === updatedWorkflow.id ? updatedWorkflow : wf))
+        );
+    }
+
+    const handleSelectWorkflow = (id: string) => {
+        setSelectedWorkflowId(id);
+    };
+
+    const handleDeleteWorkflow = (id: string) => {
+        if (!confirm(`Are you sure you want to delete this Approval Workflow?`)) return;
+
+        setWorkflows(prev => prev.filter(wf => wf.id !== id));
+        if (selectedWorkflowId === id) {
+            setSelectedWorkflowId(null);
+        }
+    };
+
+    return (
+        <>
+            <Head>
+                <title> Configure Workflows | 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 />
+            {user && (
+                <Layout user={user}>
+                    <section className="flex flex-col gap-0">
+                        <div className="flex items-center gap-2">
+                            <Link
+                                href="/approval-workflows"
+                                className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
+                                <BsChevronLeft />
+                            </Link>
+                            <h1 className="text-2xl font-semibold">{"Configure Approval Workflows"}</h1>
+                        </div>
+                    </section>
+
+                    <section className="flex flex-row gap-6">
+
+                        <Button
+                            color="purple"
+                            variant="solid"
+                            onClick={handleAddNewWorkflow}
+                            className="min-w-fit max-h-fit text-lg font-medium flex items-center gap-2 text-left"
+                        >
+                            <MdFormatListBulletedAdd className="size-6" />
+                            Add New Workflow
+                        </Button>
+
+                        <div className="flex flex-wrap gap-2">
+                            {workflows.map((workflow) => (
+                                <Button
+                                    key={workflow.id}
+                                    color="purple"
+                                    variant={
+                                        selectedWorkflowId === workflow.id
+                                            ? "solid"
+                                            : "outline"
+                                    }
+                                    onClick={() => handleSelectWorkflow(workflow.id)}
+                                    className="min-w-fit text-lg font-medium flex items-center gap-2 text-left"
+                                >
+                                    {workflow.name.trim() === "" ? "New Workflow" : workflow.name}
+                                </Button>
+
+                            ))}
+                        </div>
+                    </section>
+
+                    <form onSubmit={handleSubmit}>
+                        {currentWorkflow && (
+                            <>
+                                <div className="mb-8 flex flex-row">
+                                    <Input
+                                        type="text"
+                                        name={currentWorkflow.name}
+                                        required={true}
+                                        placeholder="Enter workflow name"
+                                        value={currentWorkflow.name}
+                                        onChange={(updatedName) => {
+                                            const updatedWorkflow = {
+                                                ...currentWorkflow,
+                                                name: updatedName,
+                                            };
+                                            onWorkflowChange(updatedWorkflow);
+                                        }}
+                                    />
+                                    <Button
+                                        color="purple"
+                                        variant="solid"
+                                        onClick={() => handleDeleteWorkflow(currentWorkflow.id)}
+                                        type="button"
+                                        className="min-w-fit text-lg font-medium flex items-center gap-2 text-left ml-4"
+                                    >
+                                        Delete Workflow
+                                        <BsTrash className="size-6" />
+                                    </Button>
+                                </div>
+
+                                <WorkflowForm
+                                    workflow={currentWorkflow}
+                                    onWorkflowChange={onWorkflowChange}
+                                />
+                            </>
+                        )}
+                    </form>
+                </Layout>
+            )}
+        </>
+    );
+}
diff --git a/src/pages/approval-workflows/index.tsx b/src/pages/approval-workflows/index.tsx
index 580e57c1..7a3166e3 100644
--- a/src/pages/approval-workflows/index.tsx
+++ b/src/pages/approval-workflows/index.tsx
@@ -1,8 +1,8 @@
 import Layout from "@/components/High/Layout";
+import Button from "@/components/Low/Button";
 import Select from "@/components/Low/Select";
 import useApprovalWorkflows from "@/hooks/useApprovalWorkflows";
 import useUser from "@/hooks/useUser";
-import useUsers from "@/hooks/useUsers";
 import { ApprovalWorkflow, ApprovalWorkflowStatus, ApprovalWorkflowStatusLabel } from "@/interfaces/approval.workflow";
 import { sessionOptions } from "@/lib/session";
 import { redirect } from "@/utils";
@@ -17,6 +17,7 @@ import Link from "next/link";
 import { useEffect, useState } from "react";
 import { BsTrash } from "react-icons/bs";
 import { FaRegEdit } from "react-icons/fa";
+import { IoIosAddCircleOutline } from "react-icons/io";
 import { toast, ToastContainer } from "react-toastify";
 
 const columnHelper = createColumnHelper<ApprovalWorkflow>();
@@ -119,10 +120,10 @@ export default function ApprovalWorkflows() {
             header: "Name",
             cell: (info) => info.getValue(),
         }),
-        columnHelper.accessor("module", {
+        /* columnHelper.accessor("module", {
             header: "Module",
             cell: (info) => info.getValue(),
-        }),
+        }), */
         columnHelper.accessor("status", {
             header: "Status",
             cell: (info) => (
@@ -131,26 +132,26 @@ export default function ApprovalWorkflows() {
                 </span>
             ),
         }),
-        columnHelper.accessor("approvers", {
+        /* columnHelper.accessor("approvers", {
             header: "Approvers",
             cell: (info) => info.getValue(),
         }),
         columnHelper.accessor("step", {
             header: "Step",
             cell: (info) => info.getValue(),
-        }),
+        }), */
         {
             header: "Actions",
             id: "actions",
             cell: ({ row }: { row: { original: ApprovalWorkflow } }) => {
                 return (
                     <div className="flex gap-4">
-                        <button data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deleteApprovalWorkflow(row.original.id, row.original.name)}>
-                            <BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
-                        </button>
                         <Link data-tip="Edit" href={`/approval-workflows/${row.original.id}`} className="cursor-pointer tooltip">
                             <FaRegEdit className="hover:text-mti-purple-light transition ease-in-out duration-300" />
                         </Link>
+                        <button data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deleteApprovalWorkflow(row.original.id, row.original.name)}>
+                            <BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+                        </button>
                     </div>
                 );
             },
@@ -179,6 +180,17 @@ export default function ApprovalWorkflows() {
                 <Layout user={user} className="gap-6">
                     <h1 className="text-2xl font-semibold">Approval Workflows</h1>
 
+                    <Link href={"/approval-workflows/create"}>
+                        <Button
+                            color="purple"
+                            variant="solid"
+                            className="max-w-fit text-lg font-medium flex items-center gap-2 text-left"
+                        >
+                            <IoIosAddCircleOutline className="size-6" />
+                            Configure New Workflows
+                        </Button>
+                    </Link>
+
                     <div className="flex w-full items-center gap-4">
                         <div className="flex w-full flex-col gap-3">
                             <label className="text-mti-gray-dim text-base font-normal">Status</label>

From 48187fc7f2abf7e12ac1b3ced7c50d1c4a589691 Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Tue, 21 Jan 2025 00:10:14 +0000
Subject: [PATCH 09/69] fix step numbering bug from previous commit and prepare
 non editable workflow view

---
 ....tsx => WorkflowEditableStepComponent.tsx} | 31 ++++++-------------
 .../ApprovalWorkflows/WorkflowForm.tsx        | 26 +++++++++++-----
 .../WorkflowStepComponent.tsx                 | 27 ++++++++++++++++
 3 files changed, 55 insertions(+), 29 deletions(-)
 rename src/components/ApprovalWorkflows/{WorkflowStep.tsx => WorkflowEditableStepComponent.tsx} (79%)
 create mode 100644 src/components/ApprovalWorkflows/WorkflowStepComponent.tsx

diff --git a/src/components/ApprovalWorkflows/WorkflowStep.tsx b/src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx
similarity index 79%
rename from src/components/ApprovalWorkflows/WorkflowStep.tsx
rename to src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx
index 06ec7582..b20c96bc 100644
--- a/src/components/ApprovalWorkflows/WorkflowStep.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx
@@ -1,13 +1,10 @@
+import { WorkflowStep } from "@/interfaces/approval.workflow";
 import Option from "@/interfaces/option";
 import { useState } from "react";
 import { BsTrash } from "react-icons/bs";
-import { FaWpforms } from "react-icons/fa6";
 import { LuGripHorizontal } from "react-icons/lu";
 import WorkflowStepNumber from "./WorkflowStepNumber";
 import WorkflowStepSelects from "./WorkflowStepSelects";
-import { WorkflowStep } from "@/interfaces/approval.workflow";
-
-export type StepType = "form-intake" | "approval-by";
 
 const teacherOptions: Option[] = [
     // fetch from database?
@@ -17,18 +14,13 @@ const directorOptions: Option[] = [
     // fetch from database?
 ]
 
-export default function WorkflowStepComponent({
+export default function WorkflowEditableStepComponent({
     stepType,
     stepNumber,
     completed = false,
-    editView = false,
-    finalStep = false,
-    isSelected = false,
-    requestedBy,
+    finalStep,
     onDelete,
 }: WorkflowStep) {
-    // disable selectability of step if in editView
-    const effectiveIsSelected = editView ? false : isSelected;
 
     const [leftValue, setLeftValue] = useState<Option | null>(null);
     const [rightValue, setRightValue] = useState<Option | null>(null);
@@ -37,19 +29,17 @@ export default function WorkflowStepComponent({
     let leftPlaceholder = "";
     let rightPlaceholder = "";
 
-    if (editView) {
-        if (stepType === "approval-by") {
-            // Show the selects only if it's an 'approval-by' step and in edit mode
-            showSelects = true;
-            leftPlaceholder = "Approval by";
-            rightPlaceholder = finalStep ? "2nd Director" : "2nd Teacher";
-        }
+    if (stepType === "approval-by") {
+        // Show the selects only if it's an 'approval-by' step and in edit mode
+        showSelects = true;
+        leftPlaceholder = "Approval by";
+        rightPlaceholder = finalStep ? "2nd Director" : "2nd Teacher";
     }
 
     return (
         <div className="flex w-full">
             <div className="flex flex-col items-center">
-                <WorkflowStepNumber number={stepNumber} isSelected={isSelected} />
+                <WorkflowStepNumber number={stepNumber} />
 
                 {/* Vertical Bar connecting steps */}
                 {!finalStep && (
@@ -62,7 +52,6 @@ export default function WorkflowStepComponent({
                 : <div className="ml-3 mt-2" style={{ width: 25, height: 25 }}></div>
             }
 
-            {/* Only show selects if editView === true and stepType === 'approval-by' */}
             {showSelects && (
                 <div className="ml-10">
                     <WorkflowStepSelects
@@ -92,7 +81,7 @@ export default function WorkflowStepComponent({
                 </div>
             )}
 
-            {editView && stepNumber !== 1 && !finalStep && (
+            {stepNumber !== 1 && !finalStep && (
                 <div className="ml-4 mt-2">
                     <button
                         data-tip="Delete"
diff --git a/src/components/ApprovalWorkflows/WorkflowForm.tsx b/src/components/ApprovalWorkflows/WorkflowForm.tsx
index fc59db88..f444a8c5 100644
--- a/src/components/ApprovalWorkflows/WorkflowForm.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowForm.tsx
@@ -4,7 +4,7 @@ import { useEffect, useState } from "react";
 import { FaRegCheckCircle } from "react-icons/fa";
 import { IoIosAddCircleOutline } from "react-icons/io";
 import Button from "../Low/Button";
-import WorkflowStepComponent from "./WorkflowStep";
+import WorkflowEditableStepComponent from "./WorkflowEditableStepComponent";
 import { ApprovalWorkflow, WorkflowStep } from "@/interfaces/approval.workflow";
 
 const teacherOptions: Option[] = [
@@ -41,23 +41,34 @@ export default function WorkflowForm({ workflow, onWorkflowChange }: Props) {
         onWorkflowChange(updatedWorkflow);
     }, [steps]);
 
+    const renumberSteps = (steps: WorkflowStep[]): WorkflowStep[] => {
+        return steps.map((step, index) => ({
+            ...step,
+            stepNumber: index + 1,
+        }));
+    };
+
     const addStep = () => {
         setSteps((prev) => {
             const newStep: WorkflowStep = {
                 key: stepCounter,
                 stepType: "approval-by",
-                stepNumber: steps.length - 1,
+                stepNumber: steps.length,
                 completed: false,
             };
             setStepCounter((count) => count + 1);
 
-            return [...prev.slice(0, -1), newStep, lastStep];
+            const updatedSteps = [...prev.slice(0, -1), newStep, lastStep];
+            return renumberSteps(updatedSteps);
         });
     };
 
     const handleDelete = (key: number | undefined) => {
-        if (key){
-            setSteps((prev) => prev.filter((step) => step.key !== key));
+        if (key) {
+            setSteps((prev) => {
+                const updatedSteps = prev.filter((step) => step.key !== key);
+                return renumberSteps(updatedSteps);
+            });
         }
     };
 
@@ -73,8 +84,7 @@ export default function WorkflowForm({ workflow, onWorkflowChange }: Props) {
             const [final] = newOrder.splice(finalIndex, 1);
             newOrder.push(final);
         }
-
-        setSteps(newOrder);
+        setSteps(renumberSteps(newOrder));
     };
 
     return (
@@ -110,7 +120,7 @@ export default function WorkflowForm({ workflow, onWorkflowChange }: Props) {
                             layout
                             drag={!(step.firstStep || step.finalStep)}
                         >
-                            <WorkflowStepComponent
+                            <WorkflowEditableStepComponent
                                 key={step.key}
                                 completed={false}
                                 editView
diff --git a/src/components/ApprovalWorkflows/WorkflowStepComponent.tsx b/src/components/ApprovalWorkflows/WorkflowStepComponent.tsx
new file mode 100644
index 00000000..3f9a04e5
--- /dev/null
+++ b/src/components/ApprovalWorkflows/WorkflowStepComponent.tsx
@@ -0,0 +1,27 @@
+import { WorkflowStep } from "@/interfaces/approval.workflow";
+import WorkflowStepNumber from "./WorkflowStepNumber";
+
+export default function WorkflowStepComponent({
+    stepType,
+    stepNumber,
+    completed,
+    editView = false,
+    finalStep,
+    isSelected = false,
+    requestedBy,
+    onDelete,
+}: WorkflowStep) {
+
+    return (
+        <div className="flex w-full">
+            <div className="flex flex-col items-center">
+                <WorkflowStepNumber number={stepNumber} isSelected={isSelected} />
+
+                {/* Vertical Bar connecting steps */}
+                {!finalStep && (
+                    <div className="w-1 h-10 bg-mti-purple-dark"></div>
+                )}
+            </div>
+        </div>
+    );
+};
\ No newline at end of file

From 73e2e95449b2966c4f54c28b8d8a50b91dc0591a Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Tue, 21 Jan 2025 20:42:03 +0000
Subject: [PATCH 10/69] work on non editable approval workflow steps view

---
 .../ApprovalWorkflows/RequestedBy.tsx         |  5 +-
 .../WorkflowEditableStepComponent.tsx         |  2 +-
 .../WorkflowStepComponent.tsx                 | 74 ++++++++++++++++---
 .../ApprovalWorkflows/WorkflowStepNumber.tsx  | 24 +++---
 src/demo/approval_workflows.json              | 21 ++++--
 src/interfaces/approval.workflow.ts           | 17 ++++-
 src/interfaces/user.ts                        | 10 +++
 src/pages/approval-workflows/[id].tsx         | 44 +++++++++--
 8 files changed, 155 insertions(+), 42 deletions(-)

diff --git a/src/components/ApprovalWorkflows/RequestedBy.tsx b/src/components/ApprovalWorkflows/RequestedBy.tsx
index 84ea0cea..0f13ae32 100644
--- a/src/components/ApprovalWorkflows/RequestedBy.tsx
+++ b/src/components/ApprovalWorkflows/RequestedBy.tsx
@@ -1,3 +1,4 @@
+import Image from "next/image";
 import React from "react";
 import { FaRegUser } from "react-icons/fa";
 
@@ -16,9 +17,11 @@ export default function RequestedBy({ name, profileImage }: Props) {
                 <p className="text-sm font-medium text-gray-800">Requested by</p>
                 <div className="flex items-center space-x-2">
                     <p className="text-xs font-medium text-gray-800">{name}</p>
-                    <img
+                    <Image
                         src={profileImage}
                         alt={name}
+                        width={24}
+                        height={24}
                         className="w-6 h-6 rounded-full"
                     />
                 </div>
diff --git a/src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx b/src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx
index b20c96bc..47a66601 100644
--- a/src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx
@@ -39,7 +39,7 @@ export default function WorkflowEditableStepComponent({
     return (
         <div className="flex w-full">
             <div className="flex flex-col items-center">
-                <WorkflowStepNumber number={stepNumber} />
+                <WorkflowStepNumber stepNumber={stepNumber} />
 
                 {/* Vertical Bar connecting steps */}
                 {!finalStep && (
diff --git a/src/components/ApprovalWorkflows/WorkflowStepComponent.tsx b/src/components/ApprovalWorkflows/WorkflowStepComponent.tsx
index 3f9a04e5..e7fc77ed 100644
--- a/src/components/ApprovalWorkflows/WorkflowStepComponent.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowStepComponent.tsx
@@ -1,25 +1,81 @@
-import { WorkflowStep } from "@/interfaces/approval.workflow";
+import { getUserTypeLabel, WorkflowStep } from "@/interfaces/approval.workflow";
 import WorkflowStepNumber from "./WorkflowStepNumber";
+import clsx from "clsx";
+import { RiThumbUpLine } from "react-icons/ri";
+import { FaWpforms } from "react-icons/fa6";
 
 export default function WorkflowStepComponent({
     stepType,
     stepNumber,
     completed,
-    editView = false,
+    completedBy,
     finalStep,
-    isSelected = false,
-    requestedBy,
-    onDelete,
+    currentStep,
+    selected = false,
+    assignees,
+    assigneesType,
+    onClick,
 }: WorkflowStep) {
 
     return (
-        <div className="flex w-full">
-            <div className="flex flex-col items-center">
-                <WorkflowStepNumber number={stepNumber} isSelected={isSelected} />
+        <div
+            onClick={onClick}
+            className={clsx("flex flex-row gap-5 w-[600px] p-6 my-4 rounded-2xl transition ease-in-out duration-300 disabled:cursor-not-allowed cursor-pointer", {
+                "bg-mti-purple-ultralight": selected,
+            })}
+        >
+            <div className="relative flex flex-col items-center">
+                <WorkflowStepNumber stepNumber={stepNumber} selected={selected} completed={completed} finalStep={finalStep} />
 
                 {/* Vertical Bar connecting steps */}
                 {!finalStep && (
-                    <div className="w-1 h-10 bg-mti-purple-dark"></div>
+                    <div className="absolute w-1 bg-mti-purple-dark -bottom-20 h-20"></div>
+                )}
+            </div>
+
+            <div className="mt-1.5">
+                {stepType === "approval-by" ? (
+                    <RiThumbUpLine size={25} />
+                ) : (
+                    <FaWpforms size={25} />
+                )
+                }
+            </div>
+
+            <div className="mt-1 flex flex-col gap-0">
+                {stepType === "form-intake" ? (
+                    <>
+                        <p className="text-sm font-medium text-gray-800">Form: Intake</p>
+                        {completed && (
+                            <p className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
+                                Completed by {completedBy}
+                            </p>
+                        )}
+                        {!completed && (
+                            <p className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
+                                In progress...
+                            </p>
+                        )}
+                    </>
+                ) : (
+                    stepType === "approval-by" && (
+                        <>
+                            <p className="text-sm font-medium text-gray-800">Approval: {getUserTypeLabel(assigneesType)}</p>
+                            {completed ? (
+                                <p className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
+                                    Approved by {completedBy}
+                                </p>
+                            ) : !completed && currentStep ? (
+                                <p className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
+                                    In progress...
+                                </p>
+                            ) : (
+                                <p className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
+                                    Waiting for previous steps...
+                                </p>
+                            )}
+                        </>
+                    )
                 )}
             </div>
         </div>
diff --git a/src/components/ApprovalWorkflows/WorkflowStepNumber.tsx b/src/components/ApprovalWorkflows/WorkflowStepNumber.tsx
index 393f19b9..588ed60c 100644
--- a/src/components/ApprovalWorkflows/WorkflowStepNumber.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowStepNumber.tsx
@@ -1,25 +1,25 @@
-import { ApprovalWorkflowStatus, ApprovalWorkflowStatusLabel } from "@/interfaces/approval.workflow";
+import { WorkflowStep } from "@/interfaces/approval.workflow";
 import clsx from "clsx";
-import React from "react";
-import { RiProgress5Line } from "react-icons/ri";
+import { IoCheckmarkDoneSharp, IoCheckmarkSharp } from "react-icons/io5";
 
-interface Props {
-    number: number;
-    isSelected?: boolean;
-}
-
-export default function WorkflowStepNumber({ number, isSelected = false }: Props) {
+export default function WorkflowStepNumber({ stepNumber, selected = false, completed, finalStep }: WorkflowStep) {
     return (
         <div
             className={clsx(
                 'flex items-center justify-center w-11 h-11 rounded-full',
                 {
-                    'bg-mti-purple text-mti-purple-ultralight': isSelected,
-                    'bg-mti-purple-ultralight text-gray-500': !isSelected,
+                    'bg-mti-purple-dark text-mti-purple-ultralight': selected,
+                    'bg-mti-purple-ultralight text-gray-500': !selected,
                 }
             )}
         >
-            <span className="text-lg font-semibold">{number}</span>
+            {completed && finalStep ? (
+                <IoCheckmarkDoneSharp className="text-xl font-bold" size={25} />
+            ) : completed && !finalStep ? (
+                <IoCheckmarkSharp className="text-xl font-bold" size={25} />
+            ) : (
+                <span className="text-lg font-semibold">{stepNumber}</span>
+            )}
         </div>
     );
 };
\ No newline at end of file
diff --git a/src/demo/approval_workflows.json b/src/demo/approval_workflows.json
index b56a6920..af95a5c8 100644
--- a/src/demo/approval_workflows.json
+++ b/src/demo/approval_workflows.json
@@ -18,7 +18,8 @@
                     "Prof. X",
                     "Prof. Y",
                     "Prof. Z"
-                ]
+                ],
+                "assigneesType": "teacher"
             },
             {
                 "stepType": "approval-by",
@@ -29,7 +30,8 @@
                     "Prof. X",
                     "Prof. Y",
                     "Prof. Z"
-                ]
+                ],
+                "assigneesType": "teacher"
             },
             {
                 "stepType": "approval-by",
@@ -39,7 +41,8 @@
                     "Prof. X",
                     "Prof. Y",
                     "Prof. Z"
-                ]
+                ],
+                "assigneesType": "teacher"
             },
             {
                 "stepType": "approval-by",
@@ -49,17 +52,19 @@
                     "Prof. X",
                     "Prof. Y",
                     "Prof. Z"
-                ]
+                ],
+                "assigneesType": "teacher"
             },
             {
                 "stepType": "approval-by",
                 "stepNumber": 5,
                 "completed": false,
                 "assignees": [
-                    "Prof. X",
-                    "Prof. Y",
-                    "Prof. Z"
-                ]
+                    "Dir. X",
+                    "Dir. Y",
+                    "Dir. Z"
+                ],
+                "assigneesType": "corporate"
             }
         ]
     }
diff --git a/src/interfaces/approval.workflow.ts b/src/interfaces/approval.workflow.ts
index 51fd4239..845e071f 100644
--- a/src/interfaces/approval.workflow.ts
+++ b/src/interfaces/approval.workflow.ts
@@ -1,4 +1,5 @@
 import {Module} from ".";
+import { CorporateUser, MasterCorporateUser, TeacherUser, userTypeLabels } from "./user";
 
 export interface ApprovalWorkflow {
     id: string,
@@ -10,20 +11,30 @@ export interface ApprovalWorkflow {
 
 export type StepType = "form-intake" | "approval-by";
 
+type AssigneesType = TeacherUser["type"] | CorporateUser["type"] | MasterCorporateUser["type"];
+
 export interface WorkflowStep {
     key?: number,
-    stepType: StepType,
+    stepType?: StepType,
     stepNumber: number,
-    completed: boolean,
+    completed?: boolean,
     completedBy?: string,
     assignees?: string[],
+    assigneesType?: AssigneesType,
     editView?: boolean,
     firstStep?: boolean,
+    currentStep?: boolean,
     finalStep?: boolean,
-    isSelected?: boolean,
+    selected?: boolean,
     requestedBy?: string,
     //requestedBy: TeacherUser | CorporateUser | MasterCorporateUser,
     onDelete?: () => void;
+    onClick?: React.MouseEventHandler<HTMLDivElement>
+}
+
+export function getUserTypeLabel(type: AssigneesType | undefined): string {
+    if (type) return userTypeLabels[type];
+    return '';
 }
 
 export type ApprovalWorkflowStatus = "approved" | "pending" | "rejected";
diff --git a/src/interfaces/user.ts b/src/interfaces/user.ts
index b1ed48bc..e61ceece 100644
--- a/src/interfaces/user.ts
+++ b/src/interfaces/user.ts
@@ -170,4 +170,14 @@ export interface Code {
 export type Type = "student" | "teacher" | "corporate" | "admin" | "developer" | "agent" | "mastercorporate";
 export const userTypes: Type[] = ["student", "teacher", "corporate", "admin", "developer", "agent", "mastercorporate"];
 
+export const userTypeLabels: Record<Type, string> = {
+	student: "Student",
+	teacher: "Teacher",
+	corporate: "Corporate",
+	admin: "Admin",
+	developer: "Developer",
+	agent: "Agent",
+	mastercorporate: "Master Corporate",
+};
+
 export type WithUser<T> = T extends { participants: string[] } ? Omit<T, "participants"> & { participants: User[] } : T;
diff --git a/src/pages/approval-workflows/[id].tsx b/src/pages/approval-workflows/[id].tsx
index 30e2abe1..3b8e154d 100644
--- a/src/pages/approval-workflows/[id].tsx
+++ b/src/pages/approval-workflows/[id].tsx
@@ -1,6 +1,6 @@
 import Layout from "@/components/High/Layout";
 import useUser from "@/hooks/useUser";
-import { ApprovalWorkflow } from "@/interfaces/approval.workflow";
+import { ApprovalWorkflow, WorkflowStep } from "@/interfaces/approval.workflow";
 import { sessionOptions } from "@/lib/session";
 import { redirect } from "@/utils";
 import { requestUser } from "@/utils/api";
@@ -17,6 +17,10 @@ import approvalWorkflowsData from '../../demo/approval_workflows.json'; // to te
 import RequestedBy from "@/components/ApprovalWorkflows/RequestedBy";
 import StartedOn from "@/components/ApprovalWorkflows/StartedOn";
 import Status from "@/components/ApprovalWorkflows/Status";
+import { useState } from "react";
+import Button from "@/components/Low/Button";
+import WorkflowEditableStepComponent from "@/components/ApprovalWorkflows/WorkflowEditableStepComponent";
+import WorkflowStepComponent from "@/components/ApprovalWorkflows/WorkflowStepComponent";
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => {
     const user = await requestUser(req, res);
@@ -27,24 +31,31 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
 
     const { id } = params as { id: string };
 
-    const approvalWorkflow = approvalWorkflowsData.find(workflow => workflow.id === id);       // await getApprovalWorkflow(id);
-    if (!approvalWorkflow)
+    const workflow = approvalWorkflowsData.find(workflow => workflow.id === id);       // await getApprovalWorkflow(id);
+
+    if (!workflow)
         return redirect("/approval-workflows")
 
     return {
-        props: { user, approvalWorkflow },
+        props: { user, workflow },
     };
 }, sessionOptions);
 
-export default function Home({ approvalWorkflow }: { approvalWorkflow: ApprovalWorkflow }) {
+export default function Home({ workflow }: { workflow: ApprovalWorkflow }) {
     const { user } = useUser({ redirectTo: "/login" });
 
-    
+    const steps = workflow.steps;
+
+    const [selectedIndex, setSelectedIndex] = useState(steps.length - 1);
+
+    const handleStepClick = (index: number) => {
+        setSelectedIndex(index);
+    };
 
     return (
         <>
             <Head>
-                <title> {approvalWorkflow.name} | EnCoach</title>
+                <title> {workflow.name} | EnCoach</title>
                 <meta
                     name="description"
                     content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
@@ -62,7 +73,7 @@ export default function Home({ approvalWorkflow }: { approvalWorkflow: ApprovalW
                                 className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
                                 <BsChevronLeft />
                             </Link>
-                            <h1 className="text-2xl font-semibold">{approvalWorkflow.name}</h1>
+                            <h1 className="text-2xl font-semibold">{workflow.name}</h1>
                         </div>
                     </section>
                     <section className="flex flex-col gap-6">
@@ -79,6 +90,23 @@ export default function Home({ approvalWorkflow }: { approvalWorkflow: ApprovalW
                             />
                         </div>
                     </section>
+                    <section className="flex flex-col gap-0">
+                        {steps.map((step, index) => (
+                            <WorkflowStepComponent
+                                key={index}
+                                completed={step.completed}
+                                completedBy={step.completedBy}
+                                stepNumber={step.stepNumber}
+                                stepType={step.stepType}
+                                assignees={step.assignees}
+                                assigneesType={step.assigneesType}
+                                finalStep={index === steps.length - 1}
+                                currentStep={steps.findIndex(step => !step.completed) === index}
+                                selected={index === selectedIndex} // Determine selected state
+                                onClick={() => handleStepClick(index)} // Add click handler
+                            />
+                        ))}
+                    </section>
                 </Layout>
             )}
         </>

From 8f8d5e5640d8bcbeb728be5702465dc189a328dd Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Wed, 22 Jan 2025 00:30:14 +0000
Subject: [PATCH 11/69] Work on workflows table

---
 src/demo/approval_workflows.json       |  77 +++++++++++-
 src/interfaces/approval.workflow.ts    |  10 +-
 src/interfaces/index.ts                |   7 ++
 src/pages/approval-workflows/[id].tsx  |  10 +-
 src/pages/approval-workflows/index.tsx | 165 ++++++++++++++++++-------
 5 files changed, 211 insertions(+), 58 deletions(-)

diff --git a/src/demo/approval_workflows.json b/src/demo/approval_workflows.json
index af95a5c8..ddf0e155 100644
--- a/src/demo/approval_workflows.json
+++ b/src/demo/approval_workflows.json
@@ -1,13 +1,12 @@
 [
     {
         "id": "kajhfakscbka-asacaca-acawesae",
-        "name": "name-1",
+        "name": "English Exam 1st Quarter 2025",
         "modules": [
             "reading",
             "writing"
         ],
         "status": "pending",
-        "approvers": "prof-1",
         "steps": [
             {
                 "stepType": "form-intake",
@@ -67,5 +66,79 @@
                 "assigneesType": "corporate"
             }
         ]
+    },
+    {
+        "id": "aaaaaakscbka-asacaca-acawesae",
+        "name": "English Exam 2nd Quarter 2025",
+        "modules": [
+            "reading",
+            "writing",
+            "level",
+            "speaking",
+            "listening"
+        ],
+        "status": "approved",
+        "steps": [
+            {
+                "stepType": "form-intake",
+                "stepNumber": 1,
+                "completed": true,
+                "completedBy": "Prof. X",
+                "assignees": [
+                    "Prof. X",
+                    "Prof. Y",
+                    "Prof. Z"
+                ],
+                "assigneesType": "teacher"
+            },
+            {
+                "stepType": "approval-by",
+                "stepNumber": 2,
+                "completed": true,
+                "completedBy": "Prof. Y",
+                "assignees": [
+                    "Prof. X",
+                    "Prof. Y",
+                    "Prof. Z"
+                ],
+                "assigneesType": "teacher"
+            },
+            {
+                "stepType": "approval-by",
+                "stepNumber": 3,
+                "completed": true,
+                "completedBy": "Prof. Y",
+                "assignees": [
+                    "Prof. X",
+                    "Prof. Y",
+                    "Prof. Z"
+                ],
+                "assigneesType": "teacher"
+            },
+            {
+                "stepType": "approval-by",
+                "stepNumber": 4,
+                "completed": true,
+                "completedBy": "Prof. Y",
+                "assignees": [
+                    "Prof. X",
+                    "Prof. Y",
+                    "Prof. Z"
+                ],
+                "assigneesType": "teacher"
+            },
+            {
+                "stepType": "approval-by",
+                "stepNumber": 5,
+                "completed": true,
+                "completedBy": "Prof. Y",
+                "assignees": [
+                    "Dir. X",
+                    "Dir. Y",
+                    "Dir. Z"
+                ],
+                "assigneesType": "corporate"
+            }
+        ]
     }
 ]
\ No newline at end of file
diff --git a/src/interfaces/approval.workflow.ts b/src/interfaces/approval.workflow.ts
index 845e071f..a896541d 100644
--- a/src/interfaces/approval.workflow.ts
+++ b/src/interfaces/approval.workflow.ts
@@ -10,6 +10,10 @@ export interface ApprovalWorkflow {
 }
 
 export type StepType = "form-intake" | "approval-by";
+export const StepTypeLabel: Record<StepType, string> = {
+	"form-intake": "Form Intake",
+    "approval-by": "Approval",
+};
 
 type AssigneesType = TeacherUser["type"] | CorporateUser["type"] | MasterCorporateUser["type"];
 
@@ -38,8 +42,8 @@ export function getUserTypeLabel(type: AssigneesType | undefined): string {
 }
 
 export type ApprovalWorkflowStatus = "approved" | "pending" | "rejected";
-export const ApprovalWorkflowStatusLabel: {[key in ApprovalWorkflowStatus]: string} = {
-    approved: "Approved",
+export const ApprovalWorkflowStatusLabel: Record<ApprovalWorkflowStatus, string> = {
+	approved: "Approved",
     pending: "Pending",
     rejected: "Rejected",
-};
+};
\ No newline at end of file
diff --git a/src/interfaces/index.ts b/src/interfaces/index.ts
index 79248c34..4692f2f7 100644
--- a/src/interfaces/index.ts
+++ b/src/interfaces/index.ts
@@ -1,4 +1,11 @@
 export type Module = "reading" | "listening" | "writing" | "speaking" | "level";
+export const ModuleTypeLabels: Record<Module, string> = {
+	reading: "Reading",
+	listening: "Listening",
+	writing: "Writing",
+	speaking: "Speaking",
+	level: "Level",
+};
 
 export interface Step {
 	min: number;
diff --git a/src/pages/approval-workflows/[id].tsx b/src/pages/approval-workflows/[id].tsx
index 3b8e154d..c05d0f74 100644
--- a/src/pages/approval-workflows/[id].tsx
+++ b/src/pages/approval-workflows/[id].tsx
@@ -1,6 +1,6 @@
 import Layout from "@/components/High/Layout";
 import useUser from "@/hooks/useUser";
-import { ApprovalWorkflow, WorkflowStep } from "@/interfaces/approval.workflow";
+import { ApprovalWorkflow } from "@/interfaces/approval.workflow";
 import { sessionOptions } from "@/lib/session";
 import { redirect } from "@/utils";
 import { requestUser } from "@/utils/api";
@@ -17,10 +17,8 @@ import approvalWorkflowsData from '../../demo/approval_workflows.json'; // to te
 import RequestedBy from "@/components/ApprovalWorkflows/RequestedBy";
 import StartedOn from "@/components/ApprovalWorkflows/StartedOn";
 import Status from "@/components/ApprovalWorkflows/Status";
-import { useState } from "react";
-import Button from "@/components/Low/Button";
-import WorkflowEditableStepComponent from "@/components/ApprovalWorkflows/WorkflowEditableStepComponent";
 import WorkflowStepComponent from "@/components/ApprovalWorkflows/WorkflowStepComponent";
+import { useState } from "react";
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => {
     const user = await requestUser(req, res);
@@ -102,8 +100,8 @@ export default function Home({ workflow }: { workflow: ApprovalWorkflow }) {
                                 assigneesType={step.assigneesType}
                                 finalStep={index === steps.length - 1}
                                 currentStep={steps.findIndex(step => !step.completed) === index}
-                                selected={index === selectedIndex} // Determine selected state
-                                onClick={() => handleStepClick(index)} // Add click handler
+                                selected={index === selectedIndex} 
+                                onClick={() => handleStepClick(index)} 
                             />
                         ))}
                     </section>
diff --git a/src/pages/approval-workflows/index.tsx b/src/pages/approval-workflows/index.tsx
index 7a3166e3..ec4a04dd 100644
--- a/src/pages/approval-workflows/index.tsx
+++ b/src/pages/approval-workflows/index.tsx
@@ -3,7 +3,8 @@ import Button from "@/components/Low/Button";
 import Select from "@/components/Low/Select";
 import useApprovalWorkflows from "@/hooks/useApprovalWorkflows";
 import useUser from "@/hooks/useUser";
-import { ApprovalWorkflow, ApprovalWorkflowStatus, ApprovalWorkflowStatusLabel } from "@/interfaces/approval.workflow";
+import { Module, ModuleTypeLabels } from "@/interfaces";
+import { ApprovalWorkflow, ApprovalWorkflowStatus, ApprovalWorkflowStatusLabel, StepTypeLabel } from "@/interfaces/approval.workflow";
 import { sessionOptions } from "@/lib/session";
 import { redirect } from "@/utils";
 import { requestUser } from "@/utils/api";
@@ -117,31 +118,74 @@ export default function ApprovalWorkflows() {
             cell: (info) => info.getValue(),
         }), */
         columnHelper.accessor("name", {
-            header: "Name",
-            cell: (info) => info.getValue(),
-        }),
-        /* columnHelper.accessor("module", {
-            header: "Module",
-            cell: (info) => info.getValue(),
-        }), */
-        columnHelper.accessor("status", {
-            header: "Status",
+            header: "NAME",
             cell: (info) => (
-                <span className={clsx("rounded-full px-3 py-1 text-sm font-medium inline-block text-left w-[110px]", StatusClassNames[info.getValue()])}>
+                <span className="font-medium">
+                    {info.getValue()}
+                </span>
+            ),
+        }),
+        columnHelper.accessor("modules", {
+            header: "MODULES",
+            cell: (info) => (
+                <div className="flex flex-wrap gap-2">
+                    {info.getValue().map((module: Module, index: number) => (
+                        <span
+                            key={index}
+                            className="inline-block rounded-full px-3 py-1 text-sm font-medium bg-purple-100 border border-purple-300 text-purple-900"
+                        >
+                            {ModuleTypeLabels[module]}
+                        </span>
+                    ))}
+                </div>
+            ),
+        }),
+        columnHelper.accessor("status", {
+            header: "STATUS",
+            cell: (info) => (
+                <span className={clsx("inline-block rounded-full px-3 py-1 text-sm font-medium text-left w-[110px]", StatusClassNames[info.getValue()])}>
                     {ApprovalWorkflowStatusLabel[info.getValue()]}
                 </span>
             ),
         }),
-        /* columnHelper.accessor("approvers", {
-            header: "Approvers",
-            cell: (info) => info.getValue(),
+        columnHelper.accessor("steps", {
+            header: "CURRENT APPROVERS",
+            cell: (info) => {
+                const steps = info.row.original.steps;
+                const currentStep = steps.find((step) => !step.completed);
+                const approvers = currentStep?.assignees || [];
+
+                return (
+                    <div className="flex flex-wrap gap-2">
+                        {approvers.map((approver: string, index: number) => (
+                            <span
+                                key={index}
+                                className="inline-block rounded-full px-3 py-1 text-sm font-medium bg-gray-100 border border-gray-300 text-gray-900"
+                            >
+                                {approver}
+                            </span>
+                        ))}
+                    </div>
+                );
+            },
+        }),
+        columnHelper.accessor("steps", {
+            header: "CURRENT STEP",
+            cell: (info) => {
+                const steps = info.row.original.steps;
+                const currentStep = steps.find((step) => !step.completed);
+
+                return (
+                    <span className="font-medium">
+                        {currentStep
+                            ? `Step ${currentStep.stepNumber}: ${StepTypeLabel[currentStep.stepType!]}`
+                            : "Completed"}
+                    </span>
+                );
+            },
         }),
-        columnHelper.accessor("step", {
-            header: "Step",
-            cell: (info) => info.getValue(),
-        }), */
         {
-            header: "Actions",
+            header: "ACTIONS",
             id: "actions",
             cell: ({ row }: { row: { original: ApprovalWorkflow } }) => {
                 return (
@@ -204,35 +248,62 @@ export default function ApprovalWorkflows() {
                         </div>
                     </div>
 
-                    <table className="bg-mti-purple-ultralight/40 w-full rounded-xl">
-                        <thead>
-                            {table.getHeaderGroups().map((headerGroup) => (
-                                <tr key={headerGroup.id}>
-                                    {headerGroup.headers.map((header) => (
-                                        <th className="px-4 py-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={clsx(
-                                        "even:bg-mti-purple-ultralight/40 rounded-lg py-2 odd:bg-white"
-                                    )}
-                                    key={row.id}>
+                    <div className="px-6 pb-4 bg-purple-100 rounded-2xl">
+                        <table
+                            className="w-full table-auto border-separate border-spacing-y-2"
+                            style={{ tableLayout: "auto" }}
+                        >
+                            <thead>
+                                {table.getHeaderGroups().map((headerGroup) => (
+                                    <tr key={headerGroup.id}>
+                                        {headerGroup.headers.map((header) => (
+                                            <th key={header.id} className="px-2 py-3 text-left text-purple-900">
+                                                {header.isPlaceholder
+                                                    ? null
+                                                    : flexRender(
+                                                        header.column.columnDef.header,
+                                                        header.getContext()
+                                                    )}
+                                            </th>
+                                        ))}
+                                    </tr>
+                                ))}
+                            </thead>
+                            <tbody>
+                                {table.getRowModel().rows.map((row) => (
+                                    <tr key={row.id}>
+                                        {/* 
+                                        Might be an overkill way to add rounded borders to the rows, but couldn't figure out another way... 
+                                        border round and margin does not seem to work properly on tr
+                                        Another way to do it was with grid but that puts the same width in all rows, which is inconvenient
+                                        Regardless, it works and all calcs are pretty simple so shouldnt be too inefficient
+                                        */}
+                                        {row.getVisibleCells().map((cell, cellIndex) => {
+                                            const lastCellIndex = row.getVisibleCells().length - 1;
+
+                                            let cellClasses = "px-4 py-2 bg-purple-50 border-y-2 border-purple-300";
+                                            if (cellIndex === 0) {
+                                                cellClasses += " border-l-2 rounded-l-2xl";
+                                            }
+                                            if (cellIndex === lastCellIndex) {
+                                                cellClasses += " border-r-2 rounded-r-2xl";
+                                            }
+
+                                            return (
+                                                <td key={cell.id} className={cellClasses}>
+                                                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                                </td>
+                                            );
+                                        })}
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+
+
+
 
-                                    {row.getVisibleCells().map((cell) => (
-                                        <td className="w-fit items-center px-4 py-2" key={cell.id}>
-                                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                                        </td>
-                                    ))}
-                                </tr>
-                            ))}
-                        </tbody>
-                    </table>
                 </Layout>
             )}
         </>

From e36b24ea3ff2d7477efed919b881e209349722e6 Mon Sep 17 00:00:00 2001
From: Carlos-Mesquita <cmesquita1999@gmail.com>
Date: Wed, 22 Jan 2025 04:46:24 +0000
Subject: [PATCH 12/69] ENCOA-315

---
 src/hooks/useEvaluationPolling.tsx            | 173 ++++++++++--------
 src/pages/(exam)/ExamPage.tsx                 | 112 ++++++------
 src/pages/api/evaluate/fetchSolutions.ts      | 113 ++++++------
 src/pages/api/evaluate/status.ts              |  91 ++++++++-
 .../stats/{updateDisabled.ts => disabled.ts}  |  30 +--
 src/pages/api/stats/session/[session].ts      |  21 +++
 src/pages/record.tsx                          |  18 +-
 src/stores/exam/index.ts                      |   6 +-
 src/stores/exam/reducers/index.ts             |  12 +-
 src/stores/exam/types.ts                      |   6 +-
 src/utils/disabled.be.ts                      |  27 +++
 src/utils/evaluation.ts                       |  47 ++++-
 12 files changed, 425 insertions(+), 231 deletions(-)
 rename src/pages/api/stats/{updateDisabled.ts => disabled.ts} (74%)
 create mode 100644 src/pages/api/stats/session/[session].ts
 create mode 100644 src/utils/disabled.be.ts

diff --git a/src/hooks/useEvaluationPolling.tsx b/src/hooks/useEvaluationPolling.tsx
index fe54da8f..603c2b17 100644
--- a/src/hooks/useEvaluationPolling.tsx
+++ b/src/hooks/useEvaluationPolling.tsx
@@ -1,95 +1,114 @@
-import { UserSolution } from '@/interfaces/exam';
-import useExamStore from '@/stores/exam';
-import { StateFlags } from '@/stores/exam/types';
-import axios from 'axios';
-import { SetStateAction, useEffect, useRef } from 'react';
+import { UserSolution } from "@/interfaces/exam";
+import useExamStore from "@/stores/exam";
+import axios from "axios";
+import { useEffect, useRef } from "react";
+import { useRouter } from "next/router";
 
-type UseEvaluationPolling = (props: {
-    pendingExercises: string[],
-    setPendingExercises: React.Dispatch<SetStateAction<string[]>>,
-}) => void;
+const useEvaluationPolling = (sessionIds: string[], mode: "exam" | "records", userId: string) => {
+  const { setUserSolutions, userSolutions } = useExamStore();
+  const pollingTimeoutsRef = useRef<Map<string, NodeJS.Timeout>>(new Map());
+  const router = useRouter();
 
-const useEvaluationPolling: UseEvaluationPolling = ({
-    pendingExercises,
-    setPendingExercises,
-}) => {
-    const {
-        flags, sessionId, user, 
-        userSolutions, evaluated, 
-        setEvaluated, setFlags
-    } = useExamStore();
+  const poll = async (sessionId: string) => {
+    try {
+      const { data: statusData } = await axios.get('/api/evaluate/status', {
+        params: { op: 'pending', userId, sessionId }
+      });
 
-    const pollingTimeoutRef = useRef<NodeJS.Timeout>();
+      if (!statusData.hasPendingEvaluation) {
 
-    useEffect(() => {
-        return () => {
-            if (pollingTimeoutRef.current) {
-                clearTimeout(pollingTimeoutRef.current);
-            }
-        };
-    }, []);
+        let solutionsOrStats = userSolutions;
 
-    useEffect(() => {
-        if (!flags.pendingEvaluation || pendingExercises.length === 0) {
-
-            if (pollingTimeoutRef.current) {
-                clearTimeout(pollingTimeoutRef.current);
-            }
-            return;
+        if (mode === "records") {
+          const res = await axios.get(`/api/stats/session/${sessionId}`)
+          solutionsOrStats = res.data;
         }
+        const { data: completedSolutions } = await axios.post('/api/evaluate/fetchSolutions?op=session', {
+          sessionId,
+          userId,
+          stats: solutionsOrStats,
+        });
 
-        const pollStatus = async () => {
-            try {
-                const { data } = await axios.get('/api/evaluate/status', {
-                    params: {
-                        sessionId,
-                        userId: user,
-                        exerciseIds: pendingExercises.join(',')
-                    }
-                });
+        await axios.post('/api/stats/disabled', {
+          sessionId,
+          userId,
+          solutions: completedSolutions,
+        });
 
-                if (data.finishedExerciseIds.length > 0) {
-                    const remainingExercises = pendingExercises.filter(
-                        id => !data.finishedExerciseIds.includes(id)
-                    );
+        const timeout = pollingTimeoutsRef.current.get(sessionId);
+        if (timeout) clearTimeout(timeout);
+        pollingTimeoutsRef.current.delete(sessionId);
 
-                    setPendingExercises(remainingExercises);
+        if (mode === "exam") {
+          const updatedSolutions = userSolutions.map(solution => {
+            const completed = completedSolutions.find(
+              (c: UserSolution) => c.exercise === solution.exercise
+            );
+            return completed || solution;
+          });
 
-                    if (remainingExercises.length === 0) {
-                        const evaluatedData = await axios.post('/api/evaluate/fetchSolutions', {
-                            sessionId,
-                            userId: user,
-                            userSolutions
-                        });
+          setUserSolutions(updatedSolutions);
+        } else {
+          router.reload();
+        }
+      } else {
+        if (pollingTimeoutsRef.current.has(sessionId)) {
+          clearTimeout(pollingTimeoutsRef.current.get(sessionId));
+        }
+        pollingTimeoutsRef.current.set(
+          sessionId,
+          setTimeout(() => poll(sessionId), 5000)
+        );
+      }
+    } catch (error) {
+      if (pollingTimeoutsRef.current.has(sessionId)) {
+        clearTimeout(pollingTimeoutsRef.current.get(sessionId));
+      }
+      pollingTimeoutsRef.current.set(
+        sessionId,
+        setTimeout(() => poll(sessionId), 5000)
+      );
+    }
+  };
 
-                        const newEvaluations = evaluatedData.data.filter(
-                            (newEval: UserSolution) =>
-                                !evaluated.some(existingEval => existingEval.exercise === newEval.exercise)
-                        );
+  useEffect(() => {
+    if (mode === "exam") {
+      const hasDisabledSolutions = userSolutions.some(s => s.isDisabled);
 
-                        setEvaluated([...evaluated, ...newEvaluations]);
-                        setFlags({ pendingEvaluation: false });
-                        return;
-                    }
-                }
+      if (hasDisabledSolutions && sessionIds.length > 0) {
+        poll(sessionIds[0]);
+      } else {
+        pollingTimeoutsRef.current.forEach((timeout) => {
+          clearTimeout(timeout);
+        });
+        pollingTimeoutsRef.current.clear();
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [mode, sessionIds, userSolutions]);
 
-                if (pendingExercises.length > 0) {
-                    pollingTimeoutRef.current = setTimeout(pollStatus, 5000);
-                }
-            } catch (error) {
-                console.error('Evaluation polling error:', error);
-                pollingTimeoutRef.current = setTimeout(pollStatus, 5000);
-            }
-        };
+  useEffect(() => {
+    if (mode === "records" && sessionIds.length > 0) {
+      sessionIds.forEach(sessionId => {
+        poll(sessionId);
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [mode, sessionIds]);
 
-        pollStatus();
+  useEffect(() => {
+    const timeouts = pollingTimeoutsRef.current;
+    return () => {
+      timeouts.forEach((timeout) => {
+        clearTimeout(timeout);
+      });
+      timeouts.clear();
+    };
+  }, []);
 
-        return () => {
-            if (pollingTimeoutRef.current) {
-                clearTimeout(pollingTimeoutRef.current);
-            }
-        };
-    });
+  return {
+    isPolling: pollingTimeoutsRef.current.size > 0
+  };
 };
 
 export default useEvaluationPolling;
diff --git a/src/pages/(exam)/ExamPage.tsx b/src/pages/(exam)/ExamPage.tsx
index b2f8963c..14f0e387 100644
--- a/src/pages/(exam)/ExamPage.tsx
+++ b/src/pages/(exam)/ExamPage.tsx
@@ -35,7 +35,7 @@ export default function ExamPage({ page, user, destination = "/", hideSidebar =
 	const [variant, setVariant] = useState<Variant>("full");
 	const [avoidRepeated, setAvoidRepeated] = useState(false);
 	const [showAbandonPopup, setShowAbandonPopup] = useState(false);
-	const [pendingExercises, setPendingExercises] = useState<string[]>([]);
+	const [moduleLock, setModuleLock] = useState(false);
 
 	const {
 		exam, setExam,
@@ -58,7 +58,6 @@ export default function ExamPage({ page, user, destination = "/", hideSidebar =
 		saveSession,
 		setFlags,
 		setShuffles,
-		evaluated,
 	} = useExamStore();
 
 	const [isFetchingExams, setIsFetchingExams] = useState(false);
@@ -114,68 +113,77 @@ export default function ExamPage({ page, user, destination = "/", hideSidebar =
 		setShowAbandonPopup(false);
 	};
 
+	useEvaluationPolling(sessionId ? [sessionId] : [], "exam", user?.id);
+
 	useEffect(() => {
-		if (flags.finalizeModule && !showSolutions && flags.pendingEvaluation) {
-			if (exam && (exam.module === "writing" || exam.module === "speaking") && userSolutions.length > 0 && !showSolutions) {
-				const exercisesToEvaluate = exam.exercises
-					.map(exercise => exercise.id);
+		setModuleLock(true);
+	}, [flags.finalizeModule])
 
-				setPendingExercises(exercisesToEvaluate);
+	useEffect(() => {
+		if (flags.finalizeModule && !showSolutions) {
+			if (exam && (exam.module === "writing" || exam.module === "speaking") && userSolutions.length > 0) {
 				(async () => {
-					await Promise.all(
-						exam.exercises.map(async (exercise, index) => {
-							if (exercise.type === "writing")
-								await evaluateWritingAnswer(user.id, sessionId, exercise, index + 1, userSolutions.find((x) => x.exercise === exercise.id)!, exercise.attachment?.url);
-
-							if (exercise.type === "interactiveSpeaking" || exercise.type === "speaking") {
-								await evaluateSpeakingAnswer(
-									user.id,
-									sessionId,
-									exercise,
-									userSolutions.find((x) => x.exercise === exercise.id)!,
-									index + 1,
-								);
-							}
-						}),
-					)
+					try {
+						const results = await Promise.all(
+							exam.exercises.map(async (exercise, index) => {
+								if (exercise.type === "writing") {
+									const sol = await evaluateWritingAnswer(
+										user.id, sessionId, exercise, index + 1,
+										userSolutions.find((x) => x.exercise === exercise.id)!,
+										exercise.attachment?.url
+									);
+									return sol;
+								}
+								if (exercise.type === "interactiveSpeaking" || exercise.type === "speaking") {
+									const sol = await evaluateSpeakingAnswer(
+										user.id,
+										sessionId,
+										exercise,
+										userSolutions.find((x) => x.exercise === exercise.id)!,
+										index + 1,
+									);
+									return sol;
+								}
+								return null;
+							})
+						);
+						const updatedSolutions = userSolutions.map(solution => {
+							const completed = results.filter(r => r !== null).find(
+								(c: any) => c.exercise === solution.exercise
+							);
+							return completed || solution;
+						});
+						setUserSolutions(updatedSolutions);
+					} catch (error) {
+						console.error('Error during module evaluation:', error);
+					} finally {
+						setModuleLock(false);
+					}
 				})();
+			} else {
+				setModuleLock(false);
 			}
 		}
-	}, [exam, showSolutions, userSolutions, sessionId, user?.id, flags]);
-
-	useEvaluationPolling({ pendingExercises, setPendingExercises });
+	}, [exam, showSolutions, userSolutions, sessionId, user.id, flags.finalizeModule, setUserSolutions]);
 
 	useEffect(() => {
-		if (flags.finalizeExam && moduleIndex !== -1) {
-			setModuleIndex(-1);
-
-
-		}
-	}, [flags.finalizeExam, moduleIndex, setModuleIndex]);
-
-	useEffect(() => {
-		if (flags.finalizeExam && !flags.pendingEvaluation && pendingExercises.length === 0) {
+		if (flags.finalizeExam && moduleIndex !== -1 && !moduleLock) {
 			(async () => {
-				if (evaluated.length !== 0) {
-					setUserSolutions(
-						userSolutions.map(solution => {
-							const evaluatedSolution = evaluated.find(e => e.exercise === solution.exercise);
-							if (evaluatedSolution) {
-								return { ...solution, ...evaluatedSolution };
-							}
-							return solution;
-						})
-					);
-				}
+				setModuleIndex(-1);
 				await saveStats();
 				await axios.get("/api/stats/update");
-				setShowSolutions(true);
-				setFlags({ finalizeExam: false });
-				dispatch({ type: "UPDATE_EXAMS" })
-			})();
+			})()
+		}
+	}, [flags.finalizeExam, moduleIndex, saveStats, setModuleIndex, userSolutions, moduleLock, flags.finalizeModule]);
+
+	useEffect(() => {
+		if (flags.finalizeExam && !userSolutions.some(s => s.isDisabled) && !moduleLock) {
+			setShowSolutions(true);
+			setFlags({ finalizeExam: false });
+			dispatch({ type: "UPDATE_EXAMS" });
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [saveStats, setFlags, setModuleIndex, evaluated, pendingExercises, setUserSolutions, flags]);
+	}, [flags.finalizeExam]);
 
 
 	const aggregateScoresByModule = (isPractice?: boolean): {
@@ -276,7 +284,7 @@ export default function ExamPage({ page, user, destination = "/", hideSidebar =
 						)}
 						{(moduleIndex === -1 && selectedModules.length !== 0) &&
 							<Finish
-								isLoading={flags.pendingEvaluation}
+								isLoading={userSolutions.some(s => s.isDisabled)}
 								user={user!}
 								modules={selectedModules}
 								solutions={userSolutions}
diff --git a/src/pages/api/evaluate/fetchSolutions.ts b/src/pages/api/evaluate/fetchSolutions.ts
index 05045bca..18d9a4c5 100644
--- a/src/pages/api/evaluate/fetchSolutions.ts
+++ b/src/pages/api/evaluate/fetchSolutions.ts
@@ -4,21 +4,71 @@ import { withIronSessionApiRoute } from "iron-session/next";
 import { sessionOptions } from "@/lib/session";
 import { UserSolution } from "@/interfaces/exam";
 import { speakingReverseMarking, writingReverseMarking } from "@/utils/score";
+import { Stat } from "@/interfaces/user";
 
 const db = client.db(process.env.MONGODB_DB);
 
 export default withIronSessionApiRoute(handler, sessionOptions);
 
 async function handler(req: NextApiRequest, res: NextApiResponse) {
-    if (req.method === "POST") return post(req, res);
-}
-
-async function post(req: NextApiRequest, res: NextApiResponse) {
     if (!req.session.user) {
         res.status(401).json({ ok: false });
         return;
     }
-    const { sessionId, userId, userSolutions } = req.body;
+    try {
+        return await getSessionEvals(req, res);
+    } catch (error) {
+        console.error(error);
+        res.status(500).json({ ok: false });
+    }
+}
+
+function formatSolutionWithEval(userSolution: UserSolution | Stat, evaluation: any) {
+    if (userSolution.type === 'writing') {
+        return {
+            ...userSolution,
+            solutions: [{
+                ...userSolution.solutions[0],
+                evaluation: evaluation.result
+            }],
+            score: {
+                correct: writingReverseMarking[evaluation.result.overall],
+                total: 100,
+                missing: 0
+            },
+            isDisabled: false
+        };
+    }
+
+    if (userSolution.type === 'speaking' || userSolution.type === 'interactiveSpeaking') {
+        return {
+            ...userSolution,
+            solutions: [{
+                ...userSolution.solutions[0],
+                ...(
+                    userSolution.type === 'speaking'
+                        ? { fullPath: evaluation.result.fullPath }
+                        : { answer: evaluation.result.answer }
+                ),
+                evaluation: evaluation.result
+            }],
+            score: {
+                correct: speakingReverseMarking[evaluation.result.overall || 0] || 0,
+                total: 100,
+                missing: 0
+            },
+            isDisabled: false
+        };
+    }
+
+    return {
+        solution: userSolution,
+        evaluation
+    };
+}
+
+async function getSessionEvals(req: NextApiRequest, res: NextApiResponse) {
+    const { sessionId, userId, stats } = req.body;
     const completedEvals = await db.collection("evaluation").find({
         session_id: sessionId,
         user: userId,
@@ -29,52 +79,11 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
         completedEvals.map(e => [e.exercise_id, e])
     );
 
-    const solutionsWithEvals = userSolutions.filter((solution: UserSolution) =>
-        evalsByExercise.has(solution.exercise)
-    ).map((solution: any) => {
-        const evaluation = evalsByExercise.get(solution.exercise)!;
+    const statsWithEvals = stats
+        .filter((solution: UserSolution | Stat) => evalsByExercise.has(solution.exercise))
+        .map((solution: UserSolution | Stat) =>
+            formatSolutionWithEval(solution, evalsByExercise.get(solution.exercise)!)
+        );
 
-        if (solution.type === 'writing') {
-            return {
-                ...solution,
-                solutions: [{
-                    ...solution.solutions[0],
-                    evaluation: evaluation.result
-                }],
-                score: {
-                    correct: writingReverseMarking[evaluation.result.overall],
-                    total: 100,
-                    missing: 0
-                },
-                isDisabled: false
-            };
-        }
-
-        if (solution.type === 'speaking' || solution.type === 'interactiveSpeaking') {
-            return {
-                ...solution,
-                solutions: [{
-                    ...solution.solutions[0],
-                    ...(
-                        solution.type === 'speaking'
-                            ? { fullPath: evaluation.result.fullPath }
-                            : { answer: evaluation.result.answer }
-                    ),
-                    evaluation: evaluation.result
-                }],
-                score: {
-                    correct: speakingReverseMarking[evaluation.result.overall || 0] || 0,
-                    total: 100,
-                    missing: 0
-                },
-                isDisabled: false
-            };
-        }
-        return {
-            solution,
-            evaluation
-        };
-    });
-
-    res.status(200).json(solutionsWithEvals)
+    res.status(200).json(statsWithEvals);
 }
diff --git a/src/pages/api/evaluate/status.ts b/src/pages/api/evaluate/status.ts
index 9679a545..dbc089bf 100644
--- a/src/pages/api/evaluate/status.ts
+++ b/src/pages/api/evaluate/status.ts
@@ -11,19 +11,100 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
     if (req.method === "GET") return get(req, res);
 }
 
+type Query = {
+    op: string;
+    sessionId: string;
+    userId: string;
+}
+
 async function get(req: NextApiRequest, res: NextApiResponse) {
     if (!req.session.user) {
-        res.status(401).json({ ok: false });
-        return;
+        return res.status(401).json({ ok: false });
     }
 
-    const { sessionId, userId } = req.query;
+    const { sessionId, userId, op } = req.query as Query;
 
+    switch (op) {
+        case 'pending':
+            return getPendingEvaluation(userId, sessionId, res);
+        case 'disabled':
+            return getSessionsWIthDisabledWithPending(userId, res);
+        default:
+            return res.status(400).json({
+                ok: false,
+            });
+    }
+}
+
+async function getPendingEvaluation(
+    userId: string,
+    sessionId: string,
+    res: NextApiResponse
+) {
     const singleEval = await db.collection("evaluation").findOne({
         session_id: sessionId,
         user: userId,
         status: "pending",
     });
-
-    res.status(200).json({ hasPendingEvaluation: singleEval !== null});
+    return res.status(200).json({ hasPendingEvaluation: singleEval !== null });
+}
+
+async function getSessionsWIthDisabledWithPending(
+    userId: string,
+    res: NextApiResponse
+) {
+    const sessions = await db.collection("stats")
+        .aggregate([
+            {
+                $match: {
+                    user: userId,
+                    disabled: true
+                }
+            },
+            {
+                $project: {
+                    _id: 0,
+                    session: 1
+                }
+            },
+            {
+                $lookup: {
+                    from: "evaluation",
+                    let: { sessionId: "$session" },
+                    pipeline: [
+                        {
+                            $match: {
+                                $expr: {
+                                    $and: [
+                                        { $eq: ["$session", "$$sessionId"] },
+                                        { $eq: ["$user", userId] },
+                                        { $eq: ["$status", "pending"] }
+                                    ]
+                                }
+                            }
+                        },
+                        {
+                            $project: {
+                                _id: 1
+                            }
+                        }
+                    ],
+                    as: "pendingEvals"
+                }
+            },
+            {
+                $match: {
+                    "pendingEvals.0": { $exists: true }
+                }
+            },
+            {
+                $group: {
+                    id: "$session"
+                }
+            }
+        ]).toArray();
+
+    return res.status(200).json({
+        sessions: sessions.map(s => s.id)
+    });
 }
diff --git a/src/pages/api/stats/updateDisabled.ts b/src/pages/api/stats/disabled.ts
similarity index 74%
rename from src/pages/api/stats/updateDisabled.ts
rename to src/pages/api/stats/disabled.ts
index ba7e688c..3fa6b756 100644
--- a/src/pages/api/stats/updateDisabled.ts
+++ b/src/pages/api/stats/disabled.ts
@@ -3,37 +3,41 @@ import type { NextApiRequest, NextApiResponse } from "next";
 import client from "@/lib/mongodb";
 import { withIronSessionApiRoute } from "iron-session/next";
 import { sessionOptions } from "@/lib/session";
-import { Stat } from "@/interfaces/user";
 import { requestUser } from "@/utils/api";
 import { UserSolution } from "@/interfaces/exam";
+import { WithId } from "mongodb";
 
 const db = client.db(process.env.MONGODB_DB);
 
 export default withIronSessionApiRoute(handler, sessionOptions);
 
 async function handler(req: NextApiRequest, res: NextApiResponse) {
-    if (req.method === "POST") return post(req, res);
-}
-
-interface Body {
-    solutions: UserSolution[];
-    sessionID: string;
-}
-
-async function post(req: NextApiRequest, res: NextApiResponse) {
     const user = await requestUser(req, res)
     if (!user) return res.status(401).json({ ok: false });
 
-    const { solutions, sessionID } = req.body as Body;
+    if (req.method === "POST") return post(req, res);
+}
 
-    const disabledStats = await db.collection("stats").find({ user: user.id, session: sessionID, disabled: true }).toArray();
+
+interface Body {
+    solutions: UserSolution[];
+    sessionId: string;
+    userId: string;
+}
+
+async function post(req: NextApiRequest, res: NextApiResponse) {
+    const { userId, solutions, sessionId } = req.body as Body;
+    const disabledStats = await db.collection("stats").find(
+        { user: userId, session: sessionId, isDisabled: true }
+    ).toArray();
 
     await Promise.all(disabledStats.map(async (stat) => {
         const matchingSolution = solutions.find(s => s.exercise === stat.exercise);
         if (matchingSolution) {
+            const { _id, ...updateFields } = matchingSolution as WithId<UserSolution>;
             await db.collection("stats").updateOne(
                 { id: stat.id },
-                { $set: { ...matchingSolution } }
+                { $set: { ...updateFields } }
             );
         }
     }));
diff --git a/src/pages/api/stats/session/[session].ts b/src/pages/api/stats/session/[session].ts
new file mode 100644
index 00000000..2d3ff16e
--- /dev/null
+++ b/src/pages/api/stats/session/[session].ts
@@ -0,0 +1,21 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type {NextApiRequest, NextApiResponse} from "next";
+import client from "@/lib/mongodb";
+import {withIronSessionApiRoute} from "iron-session/next";
+import {sessionOptions} from "@/lib/session";
+
+const db = client.db(process.env.MONGODB_DB);
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+	if (!req.session.user) {
+		res.status(401).json({ok: false});
+		return;
+	}
+
+	const {session} = req.query;
+	const snapshot = await db.collection("stats").find({ user: req.session.user.id, session }).toArray();
+
+	res.status(200).json(snapshot);
+}
\ No newline at end of file
diff --git a/src/pages/record.tsx b/src/pages/record.tsx
index 6366a742..0ad2866d 100644
--- a/src/pages/record.tsx
+++ b/src/pages/record.tsx
@@ -32,6 +32,8 @@ import { EntityWithRoles } from "@/interfaces/entity";
 import CardList from "@/components/High/CardList";
 import { requestUser } from "@/utils/api";
 import { useAllowedEntities } from "@/hooks/useEntityPermissions";
+import getPendingEvals from "@/utils/disabled.be";
+import useEvaluationPolling from "@/hooks/useEvaluationPolling";
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
 	const user = await requestUser(req, res)
@@ -45,9 +47,10 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
 	const users = await (checkAccess(user, ["admin", "developer"]) ? getUsers() : getEntitiesUsers(mapBy(entities, 'id')))
 	const assignments = await (checkAccess(user, ["admin", "developer"]) ? getAssignments() : getEntitiesAssignments(mapBy(entities, 'id')))
 	const gradingSystems = await getGradingSystemByEntities(mapBy(entities, 'id'))
+	const pendingSessionIds = await getPendingEvals(user.id);
 
 	return {
-		props: serialize({ user, users, assignments, entities, gradingSystems }),
+		props: serialize({ user, users, assignments, entities, gradingSystems, pendingSessionIds }),
 	};
 }, sessionOptions);
 
@@ -59,11 +62,12 @@ interface Props {
 	assignments: Assignment[];
 	entities: EntityWithRoles[]
 	gradingSystems: Grading[]
+	pendingSessionIds: string[];
 }
 
 const MAX_TRAINING_EXAMS = 10;
 
-export default function History({ user, users, assignments, entities, gradingSystems }: Props) {
+export default function History({ user, users, assignments, entities, gradingSystems, pendingSessionIds }: Props) {
 	const router = useRouter();
 	const [statsUserId, setStatsUserId, training, setTraining] = useRecordStore((state) => [
 		state.selectedUser,
@@ -85,9 +89,11 @@ export default function History({ user, users, assignments, entities, gradingSys
 	const groupedStats = useMemo(() => groupByDate(
 		stats.filter((x) => {
 			if (
-				(x.module === "writing" || x.module === "speaking") &&
-				!x.isDisabled &&
-				!x.solutions.every((y) => Object.keys(y).includes("evaluation"))
+				(
+					x.module === "writing" || x.module === "speaking") &&
+					!x.isDisabled && Array.isArray(x.solutions) && 
+					!x.solutions.every((y) => Object.keys(y).includes("evaluation")
+				)
 			)
 				return false;
 			return true;
@@ -179,6 +185,8 @@ export default function History({ user, users, assignments, entities, gradingSys
 		);
 	};
 
+	useEvaluationPolling(pendingSessionIds ? pendingSessionIds : [], "records", user.id);
+
 	return (
 		<>
 			<Head>
diff --git a/src/stores/exam/index.ts b/src/stores/exam/index.ts
index 24292a89..e832503c 100644
--- a/src/stores/exam/index.ts
+++ b/src/stores/exam/index.ts
@@ -26,7 +26,6 @@ export const initialState: ExamState = {
     inactivity: 0,
     shuffles: [],
     bgColor: "bg-white",
-    evaluated: [],
     user: undefined,
     navigation: {
         previousDisabled: false,
@@ -39,7 +38,6 @@ export const initialState: ExamState = {
         reviewAll: false,
         finalizeModule: false,
         finalizeExam: false,
-        pendingEvaluation: false,
     },
 };
 
@@ -62,8 +60,6 @@ const useExamStore = create<ExamState & ExamFunctions>((set, get) => ({
     setQuestionIndex: (questionIndex: number) => set(() => ({ questionIndex })),
     setBgColor: (bgColor: string) => set(() => ({ bgColor })),
 
-    setEvaluated: (evaluated: UserSolution[]) => set(() => ({ evaluated })),
-
     setNavigation: (updates: Partial<Navigation>) => set((state) => ({
         navigation: {
             ...state.navigation,
@@ -166,7 +162,7 @@ export const usePersistentExamStore = create<ExamState & ExamFunctions>()(
 
             saveStats: async () => { },
             saveSession: async () => { },
-            setEvaluated: (evaluated: UserSolution[]) => {},
+            setEvalSolutions: (evaluated: UserSolution[]) => {},
             reset: () => set(() => initialState),
             dispatch: (action) => set((state) => rootReducer(state, action))
 
diff --git a/src/stores/exam/reducers/index.ts b/src/stores/exam/reducers/index.ts
index d56212df..3eed8587 100644
--- a/src/stores/exam/reducers/index.ts
+++ b/src/stores/exam/reducers/index.ts
@@ -93,20 +93,11 @@ export const rootReducer = (
         };
         case 'FINALIZE_MODULE': {
             const { updateTimers } = action.payload;
-            const solutions = state.userSolutions;
-            const evaluated = state.evaluated;
-
-            const hasUnevaluatedSolutions = solutions.some(solution =>
-                (solution.type === 'speaking' ||
-                    solution.type === 'writing' ||
-                    solution.type === 'interactiveSpeaking') &&
-                !evaluated.some(evaluation => evaluation.exercise === solution.exercise)
-            );
 
             // To finalize a module first flag the timers to be updated
             if (updateTimers) {
                 return {
-                    flags: { ...state.flags, finalizeModule: true, pendingEvaluation: hasUnevaluatedSolutions }
+                    flags: { ...state.flags, finalizeModule: true }
                 }
             } else {
                 // then check whether there are more modules in the exam, if there are
@@ -118,7 +109,6 @@ export const rootReducer = (
                             ...state.flags,
                             finalizeModule: false,
                             finalizeExam: true,
-                            pendingEvaluation: hasUnevaluatedSolutions,
                         }
                     }
                 } else if (state.moduleIndex < state.selectedModules.length - 1) {
diff --git a/src/stores/exam/types.ts b/src/stores/exam/types.ts
index eadf8b0d..df9d64f2 100644
--- a/src/stores/exam/types.ts
+++ b/src/stores/exam/types.ts
@@ -16,7 +16,6 @@ export interface StateFlags {
 	reviewAll: boolean;
 	finalizeModule: boolean;
 	finalizeExam: boolean;
-	pendingEvaluation: boolean;
 }
 
 export interface ExamState {
@@ -39,8 +38,7 @@ export interface ExamState {
 	user: undefined | string;
 	currentSolution?: UserSolution | undefined;
 	navigation: Navigation;
-	flags: StateFlags,
-	evaluated: UserSolution[];
+	flags: StateFlags;
 }
 
 
@@ -65,8 +63,6 @@ export interface ExamFunctions {
 
 	setTimeIsUp: (timeIsUp: boolean) => void;
 
-	setEvaluated: (evaluated: UserSolution[]) => void,
-
 	saveSession: () => Promise<void>;
 
 	saveStats: () => Promise<void>;
diff --git a/src/utils/disabled.be.ts b/src/utils/disabled.be.ts
new file mode 100644
index 00000000..058b53d8
--- /dev/null
+++ b/src/utils/disabled.be.ts
@@ -0,0 +1,27 @@
+import client from "@/lib/mongodb";
+
+const db = client.db(process.env.MONGODB_DB);
+
+async function getPendingEvals(userId: string): Promise<string[]> {
+  try {
+    const disabledStatsSessions = await db.collection("stats")
+      .distinct("session", {
+        "isDisabled": true,
+        "user": userId
+      });
+
+    const sessionsWithEvals = await db.collection("evaluation")
+      .distinct("session_id", {
+        "session_id": { $in: disabledStatsSessions },
+        "user": userId
+      });
+
+
+    return sessionsWithEvals;
+  } catch (error) {
+    console.error('Error fetching session IDs:', error);
+    throw error;
+  }
+}
+
+export default getPendingEvals;
\ No newline at end of file
diff --git a/src/utils/evaluation.ts b/src/utils/evaluation.ts
index 532e33b0..a430b9e0 100644
--- a/src/utils/evaluation.ts
+++ b/src/utils/evaluation.ts
@@ -5,6 +5,7 @@ import {
 	WritingExercise,
 } from "@/interfaces/exam";
 import axios from "axios";
+import { v4 } from "uuid";
 
 export const evaluateWritingAnswer = async (
 	userId: string,
@@ -13,7 +14,7 @@ export const evaluateWritingAnswer = async (
 	task: number,
 	solution: UserSolution,
 	attachment?: string,
-): Promise<void> => {
+): Promise<UserSolution> => {
 	await axios.post("/api/evaluate/writing", {
 		question: `${exercise.prompt}`.replaceAll("\n", ""),
 		answer: solution.solutions[0].solution.trim().replaceAll("\n", " "),
@@ -23,6 +24,18 @@ export const evaluateWritingAnswer = async (
 		exerciseId: exercise.id,
 		attachment,
 	});
+
+	return {
+		...solution,
+		id: v4(),
+		score: {
+			correct: 0,
+			missing: 0,
+			total: 100,
+		},
+		solutions: [{id: exercise.id, solution: solution.solutions[0].solution}],
+		isDisabled: true,
+	};
 };
 
 export const evaluateSpeakingAnswer = async (
@@ -31,12 +44,12 @@ export const evaluateSpeakingAnswer = async (
 	exercise: SpeakingExercise | InteractiveSpeakingExercise,
 	solution: UserSolution,
 	task: number,
-): Promise<void> => {
+): Promise<UserSolution> => {
 	switch (exercise?.type) {
 		case "speaking":
-			await evaluateSpeakingExercise(userId, sessionId, exercise, solution);
+			return await evaluateSpeakingExercise(userId, sessionId, exercise, solution);
 		case "interactiveSpeaking":
-			await evaluateInteractiveSpeakingExercise(userId, sessionId, exercise.id, solution, task);
+			return await evaluateInteractiveSpeakingExercise(userId, sessionId, exercise.id, solution, task);
 	}
 };
 
@@ -50,7 +63,7 @@ const evaluateSpeakingExercise = async (
 	sessionId: string,
 	exercise: SpeakingExercise,
 	solution: UserSolution,
-): Promise<void> => {
+): Promise<UserSolution> => {
 	const formData = new FormData();
 
 	const url = solution.solutions[0].solution.trim() as string;
@@ -76,6 +89,17 @@ const evaluateSpeakingExercise = async (
 	};
 
 	await axios.post(`/api/evaluate/speaking`, formData, config);
+	return {
+		...solution,
+		id: v4(),
+		score: {
+			correct: 0,
+			missing: 0,
+			total: 100,
+		},
+		solutions: [{id: exercise.id, solution: null}],
+		isDisabled: true,
+	};
 };
 
 const evaluateInteractiveSpeakingExercise = async (
@@ -84,7 +108,7 @@ const evaluateInteractiveSpeakingExercise = async (
 	exerciseId: string,
 	solution: UserSolution,
 	task: number,
-): Promise<void> => {
+): Promise<UserSolution> => {
 	const formData = new FormData();
 	formData.append("userId", userId);
 	formData.append("sessionId", sessionId);
@@ -111,4 +135,15 @@ const evaluateInteractiveSpeakingExercise = async (
 	};
 
 	await axios.post(`/api/evaluate/interactiveSpeaking`, formData, config);
+	return {
+		...solution,
+		id: v4(),
+		score: {
+			correct: 0,
+			missing: 0,
+			total: 100,
+		},
+		solutions: [{id: exerciseId, solution: null}],
+		isDisabled: true,
+	};
 };

From 4895f0018475dc73fec2fe89992dda4dad13f95f Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Wed, 22 Jan 2025 16:39:18 +0000
Subject: [PATCH 13/69] Add entityId to workflow. Allow filter workflows based
 on entityId. Restrict creation of workflows based on user entities.

---
 src/demo/approval_workflows.json        |  2 +
 src/interfaces/approval.workflow.ts     |  1 +
 src/pages/approval-workflows/create.tsx | 52 +++++++++++---
 src/pages/approval-workflows/index.tsx  | 92 ++++++++++++++++++++-----
 src/resources/entityPermissions.ts      |  6 +-
 5 files changed, 124 insertions(+), 29 deletions(-)

diff --git a/src/demo/approval_workflows.json b/src/demo/approval_workflows.json
index ddf0e155..dd4f1fdf 100644
--- a/src/demo/approval_workflows.json
+++ b/src/demo/approval_workflows.json
@@ -2,6 +2,7 @@
     {
         "id": "kajhfakscbka-asacaca-acawesae",
         "name": "English Exam 1st Quarter 2025",
+        "entityId": "ae64d98e-18e4-4978-b600-c542a5b43c2d",
         "modules": [
             "reading",
             "writing"
@@ -70,6 +71,7 @@
     {
         "id": "aaaaaakscbka-asacaca-acawesae",
         "name": "English Exam 2nd Quarter 2025",
+        "entityId": "85fc76e6-da50-45f6-a1ed-0fe3802ecf02",
         "modules": [
             "reading",
             "writing",
diff --git a/src/interfaces/approval.workflow.ts b/src/interfaces/approval.workflow.ts
index a896541d..7ca5fcd8 100644
--- a/src/interfaces/approval.workflow.ts
+++ b/src/interfaces/approval.workflow.ts
@@ -4,6 +4,7 @@ import { CorporateUser, MasterCorporateUser, TeacherUser, userTypeLabels } from
 export interface ApprovalWorkflow {
     id: string,
     name: string,
+    entityId: string,
     modules: Module[],
     status: ApprovalWorkflowStatus,
     steps: WorkflowStep[],
diff --git a/src/pages/approval-workflows/create.tsx b/src/pages/approval-workflows/create.tsx
index e82cfdbb..716b6fb0 100644
--- a/src/pages/approval-workflows/create.tsx
+++ b/src/pages/approval-workflows/create.tsx
@@ -1,7 +1,7 @@
 import Layout from "@/components/High/Layout";
 import useUser from "@/hooks/useUser";
 import { sessionOptions } from "@/lib/session";
-import { redirect } from "@/utils";
+import { redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
 import { withIronSessionSsr } from "iron-session/next";
@@ -17,6 +17,11 @@ import Input from "@/components/Low/Input";
 import { ApprovalWorkflow } from "@/interfaces/approval.workflow";
 import { useState } from "react";
 import { MdFormatListBulletedAdd } from "react-icons/md";
+import { User } from "@/interfaces/user";
+import Select from "@/components/Low/Select";
+import { getUserWithEntity } from "@/utils/users.be";
+import { getEntities } from "@/utils/entities.be";
+import { Entity } from "@/interfaces/entity";
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
     const user = await requestUser(req, res)
@@ -26,17 +31,31 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
         return redirect("/")
 
     return {
-        props: { user },
+        props: serialize({
+            user,
+            userEntitiesWithLabel: await getEntities(user.entities.map(entity => entity.id)),
+        }),
     };
 }, sessionOptions);
 
-export default function Home() {
-    const { user } = useUser({ redirectTo: "/login" });
+interface Props {
+    user: User,
+    userEntitiesWithLabel: Entity[],
+}
 
+export default function Home({ user, userEntitiesWithLabel }: Props) {
     const [workflows, setWorkflows] = useState<ApprovalWorkflow[]>([]);
-    const [selectedWorkflowId, setSelectedWorkflowId] = useState<string | null>(null);
+    const [selectedWorkflowId, setSelectedWorkflowId] = useState<string | undefined>(undefined);
+    const [entityId, setEntityId] = useState<string | undefined>(undefined);
+
     const currentWorkflow = workflows.find(wf => wf.id === selectedWorkflowId);
 
+    const ENTITY_OPTIONS = userEntitiesWithLabel.map(entity => ({
+        label: entity.label,
+        value: entity.id,
+        filter: (x: ApprovalWorkflow) => x.entityId === entity.id,
+    }));
+
     const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();
         // Handle form submission logic
@@ -48,10 +67,11 @@ export default function Home() {
         const newWorkflow: ApprovalWorkflow = {
             id: newId,
             name: "",
+            entityId: "",
             modules: [],
             status: "pending",
             steps: [
-                { key: Date.now(), completed: false , editView: true, stepType: "form-intake", stepNumber: 1, firstStep: true },
+                { key: Date.now(), completed: false, editView: true, stepType: "form-intake", stepNumber: 1, firstStep: true },
                 { key: Date.now() + 1, completed: false, editView: true, stepType: "approval-by", stepNumber: 2, finalStep: true },
             ],
         };
@@ -74,7 +94,7 @@ export default function Home() {
 
         setWorkflows(prev => prev.filter(wf => wf.id !== id));
         if (selectedWorkflowId === id) {
-            setSelectedWorkflowId(null);
+            setSelectedWorkflowId(undefined);
         }
     };
 
@@ -138,7 +158,7 @@ export default function Home() {
                     <form onSubmit={handleSubmit}>
                         {currentWorkflow && (
                             <>
-                                <div className="mb-8 flex flex-row">
+                                <div className="mb-8 flex flex-row gap-6">
                                     <Input
                                         type="text"
                                         name={currentWorkflow.name}
@@ -153,12 +173,26 @@ export default function Home() {
                                             onWorkflowChange(updatedWorkflow);
                                         }}
                                     />
+                                    <Select
+                                        options={ENTITY_OPTIONS}
+                                        onChange={(selectedEntity) => {
+                                            if (selectedEntity?.value) {
+                                                const updatedWorkflow = {
+                                                    ...currentWorkflow,
+                                                    entityId: selectedEntity.value,
+                                                };
+                                                onWorkflowChange(updatedWorkflow);
+                                            }
+                                        }}
+                                        isClearable
+                                        placeholder="Entity..."
+                                    />
                                     <Button
                                         color="purple"
                                         variant="solid"
                                         onClick={() => handleDeleteWorkflow(currentWorkflow.id)}
                                         type="button"
-                                        className="min-w-fit text-lg font-medium flex items-center gap-2 text-left ml-4"
+                                        className="min-w-fit text-lg font-medium flex items-center gap-2 text-left"
                                     >
                                         Delete Workflow
                                         <BsTrash className="size-6" />
diff --git a/src/pages/approval-workflows/index.tsx b/src/pages/approval-workflows/index.tsx
index ec4a04dd..be1ec4b4 100644
--- a/src/pages/approval-workflows/index.tsx
+++ b/src/pages/approval-workflows/index.tsx
@@ -5,12 +5,18 @@ import useApprovalWorkflows from "@/hooks/useApprovalWorkflows";
 import useUser from "@/hooks/useUser";
 import { Module, ModuleTypeLabels } from "@/interfaces";
 import { ApprovalWorkflow, ApprovalWorkflowStatus, ApprovalWorkflowStatusLabel, StepTypeLabel } from "@/interfaces/approval.workflow";
+import { EntityWithRoles } from "@/interfaces/entity";
+import { TeacherUser, User } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
-import { redirect } from "@/utils";
+import { mapBy, redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
+import { getEntitiesWithRoles } from "@/utils/entities.be";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
+import { findAllowedEntities } from "@/utils/permissions";
+import { isAdmin } from "@/utils/users";
+import { getUsers } from "@/utils/users.be";
 import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
-import axios from "axios";
+import axios, { all } from "axios";
 import clsx from "clsx";
 import { withIronSessionSsr } from "iron-session/next";
 import Head from "next/head";
@@ -30,8 +36,16 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
     if (shouldRedirectHome(user) || !["admin", "developer", "teacher", "corporate", "mastercorporate"].includes(user.type))
         return redirect("/")
 
+    const entityIDS = mapBy(user.entities, "id");
+    const entities = await getEntitiesWithRoles(isAdmin(user) ? undefined : entityIDS);
+    const allowedEntities = findAllowedEntities(user, entities, "view_approval_workflows");
+
     return {
-        props: { user },
+        props: serialize({
+            user,
+            teachers: await getUsers({ type: "teacher" }) as TeacherUser[],
+            allowedEntities,
+        }),
     };
 }, sessionOptions);
 
@@ -41,7 +55,8 @@ const StatusClassNames: { [key in ApprovalWorkflowStatus]: string } = {
     rejected: "bg-red-100 text-red-800 border border-red-300 before:content-[''] before:w-2 before:h-2 before:bg-red-500 before:rounded-full before:inline-block before:mr-2",
 };
 
-type CustomStatus = ApprovalWorkflowStatus | "all" | "pending";
+type CustomStatus = ApprovalWorkflowStatus | "all";
+type CustomEntity = EntityWithRoles["label"] | "all";
 
 const STATUS_OPTIONS = [
     {
@@ -66,13 +81,37 @@ const STATUS_OPTIONS = [
     },
 ];
 
-export default function ApprovalWorkflows() {
+interface Props {
+    user: User,
+    teachers: TeacherUser[],
+    allowedEntities: EntityWithRoles[],
+}
+
+export default function ApprovalWorkflows({ user, teachers, allowedEntities }: Props) {
+    console.log(user);
+    console.log(teachers);
+    console.log(allowedEntities);
+
+
+    const ENTITY_OPTIONS = [
+        {
+            label: "All",
+            value: "all",
+            filter: (x: ApprovalWorkflow) => true,
+        },
+        ...allowedEntities
+            .map(entity => ({
+                label: entity.label,
+                value: entity.id,
+                filter: (x: ApprovalWorkflow) => x.entityId === entity.id,
+            }))
+            .sort((a, b) => a.label.localeCompare(b.label)),
+    ];
+
     const [filteredApprovalWorkflows, setFilteredApprovalWorkflows] = useState<ApprovalWorkflow[]>([]);
-    /* const [selectedApprovalWorkflow, setSelectedApprovalWorkflow] = useState<ApprovalWorkflow>();     */
 
     const [statusFilter, setStatusFilter] = useState<CustomStatus>("all");
-
-    const { user } = useUser({ redirectTo: "/login" });
+    const [entityFilter, setEntityFilter] = useState<CustomEntity>("all");
 
     const { approvalWorkflows/* , reload */ } = useApprovalWorkflows();
 
@@ -82,9 +121,14 @@ export default function ApprovalWorkflows() {
             const filter = STATUS_OPTIONS.find((x) => x.value === statusFilter)?.filter;
             if (filter) filters.push(filter);
         }
+        if (entityFilter) {
+            const filter = ENTITY_OPTIONS.find((x) => x.value === entityFilter)?.filter;
+            if (filter) filters.push(filter);
+        }
+
         setFilteredApprovalWorkflows([...filters.reduce((d, f) => d.filter(f), approvalWorkflows)]);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [approvalWorkflows, statusFilter]);
+    }, [approvalWorkflows, statusFilter, entityFilter]);
 
     const deleteApprovalWorkflow = (id: string, name: string) => {
         if (!confirm(`Are you sure you want to delete this Approval Workflow?`)) return;
@@ -132,7 +176,7 @@ export default function ApprovalWorkflows() {
                     {info.getValue().map((module: Module, index: number) => (
                         <span
                             key={index}
-                            className="inline-block rounded-full px-3 py-1 text-sm font-medium bg-purple-100 border border-purple-300 text-purple-900"
+                            className="inline-block rounded-full px-3 py-1 text-sm font-medium bg-indigo-100 border border-indigo-300 text-indigo-900"
                         >
                             {ModuleTypeLabels[module]}
                         </span>
@@ -149,6 +193,7 @@ export default function ApprovalWorkflows() {
             ),
         }),
         columnHelper.accessor("steps", {
+            id: "currentApprovers",
             header: "CURRENT APPROVERS",
             cell: (info) => {
                 const steps = info.row.original.steps;
@@ -170,6 +215,7 @@ export default function ApprovalWorkflows() {
             },
         }),
         columnHelper.accessor("steps", {
+            id: "currentStep",
             header: "CURRENT STEP",
             cell: (info) => {
                 const steps = info.row.original.steps;
@@ -246,6 +292,16 @@ export default function ApprovalWorkflows() {
                                 placeholder="Status..."
                             />
                         </div>
+                        <div className="flex w-full flex-col gap-3">
+                            <label className="text-mti-gray-dim text-base font-normal">Entity</label>
+                            <Select
+                                options={ENTITY_OPTIONS}
+                                value={ENTITY_OPTIONS.find((x) => x.value === entityFilter)}
+                                onChange={(value) => setEntityFilter((value?.value as string) ?? undefined)}
+                                isClearable
+                                placeholder="Entity..."
+                            />
+                        </div>
                     </div>
 
                     <div className="px-6 pb-4 bg-purple-100 rounded-2xl">
@@ -271,13 +327,12 @@ export default function ApprovalWorkflows() {
                             </thead>
                             <tbody>
                                 {table.getRowModel().rows.map((row) => (
-                                    <tr key={row.id}>
-                                        {/* 
-                                        Might be an overkill way to add rounded borders to the rows, but couldn't figure out another way... 
-                                        border round and margin does not seem to work properly on tr
-                                        Another way to do it was with grid but that puts the same width in all rows, which is inconvenient
-                                        Regardless, it works and all calcs are pretty simple so shouldnt be too inefficient
-                                        */}
+                                    <tr
+                                        key={row.id}
+                                        onClick={() => window.location.href = `/approval-workflows/${row.original.id}`}
+                                        style={{ cursor: "pointer" }}
+                                        className="hover:bg-purple-100"
+                                    >
                                         {row.getVisibleCells().map((cell, cellIndex) => {
                                             const lastCellIndex = row.getVisibleCells().length - 1;
 
@@ -290,7 +345,7 @@ export default function ApprovalWorkflows() {
                                             }
 
                                             return (
-                                                <td key={cell.id} className={cellClasses}>
+                                                <td key={cellIndex} className={cellClasses}>
                                                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
                                                 </td>
                                             );
@@ -298,6 +353,7 @@ export default function ApprovalWorkflows() {
                                     </tr>
                                 ))}
                             </tbody>
+
                         </table>
                     </div>
 
diff --git a/src/resources/entityPermissions.ts b/src/resources/entityPermissions.ts
index b9c6c165..76e1b169 100644
--- a/src/resources/entityPermissions.ts
+++ b/src/resources/entityPermissions.ts
@@ -65,7 +65,8 @@ export type RolePermission =
 	"view_student_record" |
 	"download_student_record" |
 	"pay_entity" |
-	"view_payment_record"
+	"view_payment_record" |
+	"view_approval_workflows"
 
 export const DEFAULT_PERMISSIONS: RolePermission[] = [
 	"view_students",
@@ -74,7 +75,8 @@ export const DEFAULT_PERMISSIONS: RolePermission[] = [
 	"view_classrooms",
 	"view_entity_roles",
 	"view_statistics",
-	"download_statistics_report"
+	"download_statistics_report",
+	"view_approval_workflows"
 ]
 
 export const ADMIN_PERMISSIONS: RolePermission[] = [

From 4e81c08adb5b18bfbd5203a524e8c81eea0937f2 Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Wed, 22 Jan 2025 18:07:09 +0000
Subject: [PATCH 14/69] fix bug in last commit where all entities would show up
 on select filter instead of user entities

---
 src/demo/approval_workflows.json       |  2 +-
 src/pages/approval-workflows/index.tsx | 40 +++++++++++++++-----------
 2 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/src/demo/approval_workflows.json b/src/demo/approval_workflows.json
index dd4f1fdf..226167e9 100644
--- a/src/demo/approval_workflows.json
+++ b/src/demo/approval_workflows.json
@@ -71,7 +71,7 @@
     {
         "id": "aaaaaakscbka-asacaca-acawesae",
         "name": "English Exam 2nd Quarter 2025",
-        "entityId": "85fc76e6-da50-45f6-a1ed-0fe3802ecf02",
+        "entityId": "64a92896-fa8c-4908-95f3-23ffe05560c5",
         "modules": [
             "reading",
             "writing",
diff --git a/src/pages/approval-workflows/index.tsx b/src/pages/approval-workflows/index.tsx
index be1ec4b4..968f2d05 100644
--- a/src/pages/approval-workflows/index.tsx
+++ b/src/pages/approval-workflows/index.tsx
@@ -2,21 +2,18 @@ import Layout from "@/components/High/Layout";
 import Button from "@/components/Low/Button";
 import Select from "@/components/Low/Select";
 import useApprovalWorkflows from "@/hooks/useApprovalWorkflows";
-import useUser from "@/hooks/useUser";
 import { Module, ModuleTypeLabels } from "@/interfaces";
 import { ApprovalWorkflow, ApprovalWorkflowStatus, ApprovalWorkflowStatusLabel, StepTypeLabel } from "@/interfaces/approval.workflow";
-import { EntityWithRoles } from "@/interfaces/entity";
+import { Entity, EntityWithRoles } from "@/interfaces/entity";
 import { TeacherUser, User } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
-import { mapBy, redirect, serialize } from "@/utils";
+import { redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
-import { getEntitiesWithRoles } from "@/utils/entities.be";
+import { getEntities } from "@/utils/entities.be";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
-import { findAllowedEntities } from "@/utils/permissions";
-import { isAdmin } from "@/utils/users";
 import { getUsers } from "@/utils/users.be";
 import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
-import axios, { all } from "axios";
+import axios from "axios";
 import clsx from "clsx";
 import { withIronSessionSsr } from "iron-session/next";
 import Head from "next/head";
@@ -36,15 +33,15 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
     if (shouldRedirectHome(user) || !["admin", "developer", "teacher", "corporate", "mastercorporate"].includes(user.type))
         return redirect("/")
 
-    const entityIDS = mapBy(user.entities, "id");
+    /* const entityIDS = mapBy(user.entities, "id");
     const entities = await getEntitiesWithRoles(isAdmin(user) ? undefined : entityIDS);
-    const allowedEntities = findAllowedEntities(user, entities, "view_approval_workflows");
+    const allowedEntities = findAllowedEntities(user, entities, "view_approval_workflows"); */
 
     return {
         props: serialize({
             user,
             teachers: await getUsers({ type: "teacher" }) as TeacherUser[],
-            allowedEntities,
+            userEntitiesWithLabel: await getEntities(user.entities.map(entity => entity.id)),
         }),
     };
 }, sessionOptions);
@@ -56,7 +53,7 @@ const StatusClassNames: { [key in ApprovalWorkflowStatus]: string } = {
 };
 
 type CustomStatus = ApprovalWorkflowStatus | "all";
-type CustomEntity = EntityWithRoles["label"] | "all";
+type CustomEntity = EntityWithRoles | "all";
 
 const STATUS_OPTIONS = [
     {
@@ -84,22 +81,23 @@ const STATUS_OPTIONS = [
 interface Props {
     user: User,
     teachers: TeacherUser[],
-    allowedEntities: EntityWithRoles[],
+    userEntitiesWithLabel: Entity[],
 }
 
-export default function ApprovalWorkflows({ user, teachers, allowedEntities }: Props) {
+export default function ApprovalWorkflows({ user, teachers, userEntitiesWithLabel }: Props) {
     console.log(user);
     console.log(teachers);
-    console.log(allowedEntities);
+    console.log(userEntitiesWithLabel);
 
 
     const ENTITY_OPTIONS = [
         {
             label: "All",
             value: "all",
-            filter: (x: ApprovalWorkflow) => true,
+            filter: (x: ApprovalWorkflow) =>
+                userEntitiesWithLabel.some(entity => entity.id === x.entityId),
         },
-        ...allowedEntities
+        ...userEntitiesWithLabel
             .map(entity => ({
                 label: entity.label,
                 value: entity.id,
@@ -192,6 +190,14 @@ export default function ApprovalWorkflows({ user, teachers, allowedEntities }: P
                 </span>
             ),
         }),
+        columnHelper.accessor("entityId", {
+            header: "ENTITY",
+            cell: (info) => (
+                <span className="font-medium">
+                    {userEntitiesWithLabel.find((entity) => entity.id === info.getValue())?.label}
+                </span>
+            ),
+        }),
         columnHelper.accessor("steps", {
             id: "currentApprovers",
             header: "CURRENT APPROVERS",
@@ -297,7 +303,7 @@ export default function ApprovalWorkflows({ user, teachers, allowedEntities }: P
                             <Select
                                 options={ENTITY_OPTIONS}
                                 value={ENTITY_OPTIONS.find((x) => x.value === entityFilter)}
-                                onChange={(value) => setEntityFilter((value?.value as string) ?? undefined)}
+                                onChange={(value) => setEntityFilter((value?.value as CustomEntity) ?? undefined)}
                                 isClearable
                                 placeholder="Entity..."
                             />

From aa76c2b54be33e759207dc963ed21b6b1a380125 Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Thu, 23 Jan 2025 02:48:25 +0000
Subject: [PATCH 15/69] Work on workflow builder: - Made number of approvers
 dynamic with many select inputs as needed - Tracking approval select input
 changes with step.assignees - Fetching teachers and corporates from backend -
 Responsive styling when rendering several select inputs

---
 .../WorkflowEditableStepComponent.tsx         | 88 +++++++++++--------
 .../ApprovalWorkflows/WorkflowForm.tsx        | 39 +++++---
 .../ApprovalWorkflows/WorkflowStepNumber.tsx  |  2 +-
 .../ApprovalWorkflows/WorkflowStepSelects.tsx | 85 ++++++++++--------
 src/interfaces/approval.workflow.ts           |  3 +-
 src/pages/approval-workflows/create.tsx       | 43 +++++++--
 src/pages/approval-workflows/index.tsx        |  7 +-
 7 files changed, 165 insertions(+), 102 deletions(-)

diff --git a/src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx b/src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx
index 47a66601..511ff65e 100644
--- a/src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx
@@ -1,40 +1,47 @@
 import { WorkflowStep } from "@/interfaces/approval.workflow";
 import Option from "@/interfaces/option";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { BsTrash } from "react-icons/bs";
 import { LuGripHorizontal } from "react-icons/lu";
 import WorkflowStepNumber from "./WorkflowStepNumber";
 import WorkflowStepSelects from "./WorkflowStepSelects";
+import { CorporateUser, TeacherUser } from "@/interfaces/user";
+import { AiOutlineUserAdd } from "react-icons/ai";
 
-const teacherOptions: Option[] = [
-    // fetch from database?
-]
-
-const directorOptions: Option[] = [
-    // fetch from database?
-]
+interface Props extends WorkflowStep {
+    entityTeachers: TeacherUser[];
+    entityCorporates: CorporateUser[];
+    onSelectChange: (numberOfSelects: number, index: number, value: Option | null) => void;
+}
 
 export default function WorkflowEditableStepComponent({
     stepType,
     stepNumber,
-    completed = false,
     finalStep,
     onDelete,
-}: WorkflowStep) {
+    onSelectChange,
+    entityTeachers,
+    entityCorporates,
+}: Props) {
 
-    const [leftValue, setLeftValue] = useState<Option | null>(null);
-    const [rightValue, setRightValue] = useState<Option | null>(null);
+    const [selects, setSelects] = useState<(Option | null | undefined)[]>([null]);
 
-    let showSelects = false;
-    let leftPlaceholder = "";
-    let rightPlaceholder = "";
+    const showSelects = stepType === "approval-by";
 
-    if (stepType === "approval-by") {
-        // Show the selects only if it's an 'approval-by' step and in edit mode
-        showSelects = true;
-        leftPlaceholder = "Approval by";
-        rightPlaceholder = finalStep ? "2nd Director" : "2nd Teacher";
-    }
+    const handleAddSelectComponent = () => {
+        setSelects((prev) => {
+            const updated = [...prev, null];
+            onSelectChange(updated.length, updated.length - 1, null);
+            return updated;
+        });
+    };
+
+    const handleSelectChangeAt = (numberOfSelects: number, index: number, option: Option | null) => {
+        const updated = [...selects];
+        updated[index] = option;
+        setSelects(updated);
+        onSelectChange(numberOfSelects, index, option);
+    };
 
     return (
         <div className="flex w-full">
@@ -43,26 +50,22 @@ export default function WorkflowEditableStepComponent({
 
                 {/* Vertical Bar connecting steps */}
                 {!finalStep && (
-                    <div className="w-1 h-10 bg-mti-purple-dark"></div>
+                    <div className="w-1 h-full min-h-10 bg-mti-purple-dark"></div>
                 )}
             </div>
 
             {stepNumber !== 1 && !finalStep
-                ? <LuGripHorizontal className="ml-3 mt-2 cursor-grab active:cursor-grabbing" size={25} />
+                ? <LuGripHorizontal className="ml-3 mt-2 cursor-grab active:cursor-grabbing min-w-[25px] min-h-[25px]" />
                 : <div className="ml-3 mt-2" style={{ width: 25, height: 25 }}></div>
             }
 
             {showSelects && (
-                <div className="ml-10">
+                <div className="ml-10 mb-12">
                     <WorkflowStepSelects
-                        leftOptions={teacherOptions}
-                        rightOptions={teacherOptions}
-                        leftValue={leftValue}
-                        rightValue={rightValue}
-                        onLeftChange={setLeftValue}
-                        onRightChange={setRightValue}
-                        leftPlaceholder={leftPlaceholder}
-                        rightPlaceholder={rightPlaceholder}
+                        teachers={entityTeachers}
+                        corporates={entityCorporates}
+                        selects={selects}
+                        onSelectChange={handleSelectChangeAt}
                     />
                 </div>
             )}
@@ -81,18 +84,27 @@ export default function WorkflowEditableStepComponent({
                 </div>
             )}
 
-            {stepNumber !== 1 && !finalStep && (
-                <div className="ml-4 mt-2">
+            {stepNumber !== 1 && (
+                <div className="flex flex-row items-start mt-1.5 ml-3">
                     <button
-                        data-tip="Delete"
-                        className="cursor-pointer tooltip"
-                        onClick={onDelete}
                         type="button"
+                        onClick={handleAddSelectComponent}
+                        className="cursor-pointer"
                     >
-                        <BsTrash className="size-6 hover:text-mti-purple-light transition ease-in-out duration-300" />
+                        <AiOutlineUserAdd className="size-7 hover:text-mti-purple-light transition ease-in-out duration-300" />
                     </button>
+                    {!finalStep && (
+                        <button
+                            className="cursor-pointer"
+                            onClick={onDelete}
+                            type="button"
+                        >
+                            <BsTrash className="size-6 mt-0.5 ml-3 hover:text-mti-purple-light transition ease-in-out duration-300" />
+                        </button>
+                    )}
                 </div>
             )}
+
         </div>
 
     );
diff --git a/src/components/ApprovalWorkflows/WorkflowForm.tsx b/src/components/ApprovalWorkflows/WorkflowForm.tsx
index f444a8c5..505915af 100644
--- a/src/components/ApprovalWorkflows/WorkflowForm.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowForm.tsx
@@ -6,14 +6,7 @@ import { IoIosAddCircleOutline } from "react-icons/io";
 import Button from "../Low/Button";
 import WorkflowEditableStepComponent from "./WorkflowEditableStepComponent";
 import { ApprovalWorkflow, WorkflowStep } from "@/interfaces/approval.workflow";
-
-const teacherOptions: Option[] = [
-    // fetch from database?
-]
-
-const directorOptions: Option[] = [
-    // fetch from database?
-]
+import { CorporateUser, TeacherUser } from "@/interfaces/user";
 
 // Variants for animating steps when they are added/removed
 const itemVariants = {
@@ -25,9 +18,11 @@ const itemVariants = {
 interface Props {
     workflow: ApprovalWorkflow;
     onWorkflowChange: (workflow: ApprovalWorkflow) => void;
+    entityTeachers: TeacherUser[];
+    entityCorporates: CorporateUser[];
 }
 
-export default function WorkflowForm({ workflow, onWorkflowChange }: Props) {
+export default function WorkflowForm({ workflow, onWorkflowChange, entityTeachers, entityCorporates }: Props) {
     const [steps, setSteps] = useState<WorkflowStep[]>(workflow.steps);
     const [stepCounter, setStepCounter] = useState<number>(3); // to guarantee unique keys used for animations
     const lastStep = steps[steps.length - 1];
@@ -55,6 +50,7 @@ export default function WorkflowForm({ workflow, onWorkflowChange }: Props) {
                 stepType: "approval-by",
                 stepNumber: steps.length,
                 completed: false,
+                assignees: [null],
             };
             setStepCounter((count) => count + 1);
 
@@ -72,6 +68,27 @@ export default function WorkflowForm({ workflow, onWorkflowChange }: Props) {
         }
     };
 
+    const handleSelectChange = (key: number | undefined, numberOfSelects: number, index: number, selectedOption: Option | null) => {
+        if (key === undefined) return;
+
+        setSteps((prevSteps) =>
+            prevSteps.map((step) => {
+                if (step.key !== key) return step;
+
+                const assignees = step.assignees ?? [];
+                let newAssignees = [...assignees];
+
+                if (numberOfSelects === assignees.length) { // means no new select was added and instead one was changed
+                    newAssignees[index] = selectedOption?.value;
+                } else if (numberOfSelects === assignees.length + 1) { // means a new select was added
+                    newAssignees.push(selectedOption?.value || null);
+                } 
+
+                return { ...step, assignees: newAssignees };
+            })
+        );
+    };
+
     const handleReorder = (newOrder: WorkflowStep[]) => {
         const firstIndex = newOrder.findIndex((s) => s.firstStep);
         if (firstIndex !== -1 && firstIndex !== 0) {
@@ -126,9 +143,11 @@ export default function WorkflowForm({ workflow, onWorkflowChange }: Props) {
                                 editView
                                 stepNumber={index + 1}
                                 stepType={step.stepType}
-                                requestedBy="Prof. Foo"
                                 finalStep={step.finalStep}
                                 onDelete={() => handleDelete(step.key)}
+                                onSelectChange={(numberOfSelects, idx, option) => handleSelectChange(step.key, numberOfSelects, idx, option)}
+                                entityTeachers={entityTeachers}
+                                entityCorporates={entityCorporates}
                             />
                             {step.finalStep &&
                                 <Button
diff --git a/src/components/ApprovalWorkflows/WorkflowStepNumber.tsx b/src/components/ApprovalWorkflows/WorkflowStepNumber.tsx
index 588ed60c..86b0d46d 100644
--- a/src/components/ApprovalWorkflows/WorkflowStepNumber.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowStepNumber.tsx
@@ -6,7 +6,7 @@ export default function WorkflowStepNumber({ stepNumber, selected = false, compl
     return (
         <div
             className={clsx(
-                'flex items-center justify-center w-11 h-11 rounded-full',
+                'flex items-center justify-center min-w-11 min-h-11 rounded-full',
                 {
                     'bg-mti-purple-dark text-mti-purple-ultralight': selected,
                     'bg-mti-purple-ultralight text-gray-500': !selected,
diff --git a/src/components/ApprovalWorkflows/WorkflowStepSelects.tsx b/src/components/ApprovalWorkflows/WorkflowStepSelects.tsx
index f96e3fc2..155d8bd6 100644
--- a/src/components/ApprovalWorkflows/WorkflowStepSelects.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowStepSelects.tsx
@@ -1,53 +1,60 @@
 import Option from "@/interfaces/option";
 import Select from "../Low/Select";
+import { CorporateUser, TeacherUser } from "@/interfaces/user";
 
 interface Props {
-    leftOptions: Option[];
-    rightOptions: Option[];
-    leftValue?: Option | null;
-    rightValue?: Option | null;
-    onLeftChange: (value: Option | null) => void;
-    onRightChange: (value: Option | null) => void;
-    leftPlaceholder?: string;
-    rightPlaceholder?: string;
+    teachers: TeacherUser[];
+    corporates: CorporateUser[];
+    selects: (Option | null | undefined)[];
+    onSelectChange: (numberOfSelects: number, index: number, value: Option | null) => void;
 }
 
 export default function WorkflowStepSelects({
-    leftOptions,
-    rightOptions,
-    leftValue,
-    rightValue,
-    onLeftChange,
-    onRightChange,
-    leftPlaceholder = "Select",
-    rightPlaceholder = "Select",
+    teachers,
+    corporates,
+    selects,
+    onSelectChange,
 }: Props) {
+
+    const teacherOptions: Option[] = teachers.map((teacher) => ({
+        value: teacher.id,
+        label: teacher.name,
+        icon: () => <img src={teacher.profilePicture} alt={teacher.name} />
+    }));
+    const corporateOptions: Option[] = corporates.map((corporate) => ({
+        value: corporate.id,
+        label: corporate.name,
+        icon: () => <img src={corporate.profilePicture} alt={corporate.name} />
+    }));
+
     return (
         <div
-            className={"flex flex-row gap-0"}
+            className={"flex flex-wrap gap-0"}
         >
-            {/* Left Select */}
-            <div className="flex-1 w-[275px]">
-                <Select
-                    options={leftOptions}
-                    value={leftValue}
-                    onChange={onLeftChange}
-                    placeholder={leftPlaceholder}
-                    flat
-                    className={"px-2 rounded-none rounded-l-2xl"}
-                />
-            </div>
-            {/* Right Select */}
-            <div className="flex-1 w-[275px]">
-                <Select
-                    options={rightOptions}
-                    value={rightValue}
-                    onChange={onRightChange}
-                    placeholder={rightPlaceholder}
-                    flat
-                    className="px-2 rounded-none rounded-r-2xl"
-                />
-            </div>
+            {selects.map((option, index) => {
+                let classes = "px-2 rounded-none";
+                if (index === 0 && selects.length === 1) {
+                    classes += " rounded-l-2xl rounded-r-2xl";
+                } else if (index === 0) {
+                    classes += " rounded-l-2xl";
+                } else if (index === selects.length - 1) {
+                    classes += " rounded-r-2xl";
+                }
+
+                return (
+                    <div key={index} className="min-w-fit">
+                        <Select
+                            options={[...teacherOptions, ...corporateOptions]}
+                            value={option}
+                            onChange={(option) => onSelectChange(selects.length, index, option)}
+                            placeholder={"Approval By:"}
+                            flat
+                            isClearable
+                            className={classes}
+                        />
+                    </div>
+                );
+            })}
         </div>
     );
 }
\ No newline at end of file
diff --git a/src/interfaces/approval.workflow.ts b/src/interfaces/approval.workflow.ts
index 7ca5fcd8..62458976 100644
--- a/src/interfaces/approval.workflow.ts
+++ b/src/interfaces/approval.workflow.ts
@@ -1,4 +1,5 @@
 import {Module} from ".";
+import Option from "./option";
 import { CorporateUser, MasterCorporateUser, TeacherUser, userTypeLabels } from "./user";
 
 export interface ApprovalWorkflow {
@@ -24,7 +25,7 @@ export interface WorkflowStep {
     stepNumber: number,
     completed?: boolean,
     completedBy?: string,
-    assignees?: string[],
+    assignees?: (string | null | undefined)[]; // bit of an hack, but allowing null or undefined values allows us to match one to one the select input components with the assignees array. And since select inputs allow undefined or null values, it is allowed here too, but must validate required input before form submission
     assigneesType?: AssigneesType,
     editView?: boolean,
     firstStep?: boolean,
diff --git a/src/pages/approval-workflows/create.tsx b/src/pages/approval-workflows/create.tsx
index 716b6fb0..5a5faf2e 100644
--- a/src/pages/approval-workflows/create.tsx
+++ b/src/pages/approval-workflows/create.tsx
@@ -1,7 +1,7 @@
 import Layout from "@/components/High/Layout";
 import useUser from "@/hooks/useUser";
 import { sessionOptions } from "@/lib/session";
-import { redirect, serialize } from "@/utils";
+import { mapBy, redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
 import { withIronSessionSsr } from "iron-session/next";
@@ -15,11 +15,11 @@ import WorkflowForm from "@/components/ApprovalWorkflows/WorkflowForm";
 import Button from "@/components/Low/Button";
 import Input from "@/components/Low/Input";
 import { ApprovalWorkflow } from "@/interfaces/approval.workflow";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { MdFormatListBulletedAdd } from "react-icons/md";
-import { User } from "@/interfaces/user";
+import { CorporateUser, TeacherUser, User } from "@/interfaces/user";
 import Select from "@/components/Low/Select";
-import { getUserWithEntity } from "@/utils/users.be";
+import { getEntitiesUsers, getUsers, getUserWithEntity } from "@/utils/users.be";
 import { getEntities } from "@/utils/entities.be";
 import { Entity } from "@/interfaces/entity";
 
@@ -30,10 +30,14 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
     if (shouldRedirectHome(user) || !["admin", "developer", "teacher", "corporate", "mastercorporate"].includes(user.type))
         return redirect("/")
 
+    const userEntitiesWithLabel = await getEntities(user.entities.map(entity => entity.id));
+
     return {
         props: serialize({
             user,
-            userEntitiesWithLabel: await getEntities(user.entities.map(entity => entity.id)),
+            userEntitiesWithLabel,
+            userEntitiesTeachers: await getEntitiesUsers(userEntitiesWithLabel.map(entity => entity.id), { type: "teacher" }) as TeacherUser[],
+            userEntitiesCorporates: await getEntitiesUsers(userEntitiesWithLabel.map(entity => entity.id), { type: "corporate" }) as CorporateUser[],
         }),
     };
 }, sessionOptions);
@@ -41,12 +45,34 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
 interface Props {
     user: User,
     userEntitiesWithLabel: Entity[],
+    userEntitiesTeachers: TeacherUser[],
+    userEntitiesCorporates: CorporateUser[],
 }
 
-export default function Home({ user, userEntitiesWithLabel }: Props) {
+export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers, userEntitiesCorporates }: Props) {
     const [workflows, setWorkflows] = useState<ApprovalWorkflow[]>([]);
     const [selectedWorkflowId, setSelectedWorkflowId] = useState<string | undefined>(undefined);
     const [entityId, setEntityId] = useState<string | undefined>(undefined);
+    const [entityTeachers, setEntityTeachers] = useState<TeacherUser[]>([]);
+    const [entityCorporates, setEntityCorporates] = useState<CorporateUser[]>([]);
+
+    useEffect(() => {
+        if (entityId) {
+            setEntityTeachers(
+                userEntitiesTeachers.filter(teacher =>
+                    teacher.entities.some(entity => entity.id === entityId)
+                )
+            );
+            setEntityCorporates(
+                userEntitiesCorporates.filter(corporate =>
+                    corporate.entities.some(entity => entity.id === entityId)
+                )
+            );
+        } else {
+            setEntityTeachers([]);
+            setEntityCorporates([]);
+        }
+    }, [entityId, userEntitiesTeachers, userEntitiesCorporates]);
 
     const currentWorkflow = workflows.find(wf => wf.id === selectedWorkflowId);
 
@@ -58,7 +84,6 @@ export default function Home({ user, userEntitiesWithLabel }: Props) {
 
     const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();
-        // Handle form submission logic
         console.log("Form submitted! Values:", workflows);
     };
 
@@ -80,6 +105,7 @@ export default function Home({ user, userEntitiesWithLabel }: Props) {
     };
 
     const onWorkflowChange = (updatedWorkflow: ApprovalWorkflow) => {
+        console.log(updatedWorkflow);
         setWorkflows(prev =>
             prev.map(wf => (wf.id === updatedWorkflow.id ? updatedWorkflow : wf))
         );
@@ -177,6 +203,7 @@ export default function Home({ user, userEntitiesWithLabel }: Props) {
                                         options={ENTITY_OPTIONS}
                                         onChange={(selectedEntity) => {
                                             if (selectedEntity?.value) {
+                                                setEntityId(selectedEntity.value);
                                                 const updatedWorkflow = {
                                                     ...currentWorkflow,
                                                     entityId: selectedEntity.value,
@@ -202,6 +229,8 @@ export default function Home({ user, userEntitiesWithLabel }: Props) {
                                 <WorkflowForm
                                     workflow={currentWorkflow}
                                     onWorkflowChange={onWorkflowChange}
+                                    entityTeachers={entityTeachers}
+                                    entityCorporates={entityCorporates}
                                 />
                             </>
                         )}
diff --git a/src/pages/approval-workflows/index.tsx b/src/pages/approval-workflows/index.tsx
index 968f2d05..c266b536 100644
--- a/src/pages/approval-workflows/index.tsx
+++ b/src/pages/approval-workflows/index.tsx
@@ -40,7 +40,6 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
     return {
         props: serialize({
             user,
-            teachers: await getUsers({ type: "teacher" }) as TeacherUser[],
             userEntitiesWithLabel: await getEntities(user.entities.map(entity => entity.id)),
         }),
     };
@@ -85,10 +84,6 @@ interface Props {
 }
 
 export default function ApprovalWorkflows({ user, teachers, userEntitiesWithLabel }: Props) {
-    console.log(user);
-    console.log(teachers);
-    console.log(userEntitiesWithLabel);
-
 
     const ENTITY_OPTIONS = [
         {
@@ -208,7 +203,7 @@ export default function ApprovalWorkflows({ user, teachers, userEntitiesWithLabe
 
                 return (
                     <div className="flex flex-wrap gap-2">
-                        {approvers.map((approver: string, index: number) => (
+                        {approvers.map((approver: string | null | undefined, index: number) => (
                             <span
                                 key={index}
                                 className="inline-block rounded-full px-3 py-1 text-sm font-medium bg-gray-100 border border-gray-300 text-gray-900"

From a0936cb1a4bc58b4cc5257fd3e2830e4c43d9b2b Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Thu, 23 Jan 2025 15:10:14 +0000
Subject: [PATCH 16/69] Prevent same input on selects from the same step.
 Change behaviour of initial step to allow multiple assignees

---
 .../WorkflowEditableStepComponent.tsx         | 108 ++++++++++--------
 .../ApprovalWorkflows/WorkflowForm.tsx        |   2 +-
 .../ApprovalWorkflows/WorkflowStepSelects.tsx |  24 ++--
 src/pages/approval-workflows/create.tsx       |  13 +--
 4 files changed, 76 insertions(+), 71 deletions(-)

diff --git a/src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx b/src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx
index 511ff65e..1f208321 100644
--- a/src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx
@@ -1,12 +1,12 @@
 import { WorkflowStep } from "@/interfaces/approval.workflow";
 import Option from "@/interfaces/option";
-import { useEffect, useState } from "react";
+import { CorporateUser, TeacherUser } from "@/interfaces/user";
+import { useMemo, useState } from "react";
+import { AiOutlineUserAdd } from "react-icons/ai";
 import { BsTrash } from "react-icons/bs";
 import { LuGripHorizontal } from "react-icons/lu";
 import WorkflowStepNumber from "./WorkflowStepNumber";
 import WorkflowStepSelects from "./WorkflowStepSelects";
-import { CorporateUser, TeacherUser } from "@/interfaces/user";
-import { AiOutlineUserAdd } from "react-icons/ai";
 
 interface Props extends WorkflowStep {
     entityTeachers: TeacherUser[];
@@ -15,7 +15,6 @@ interface Props extends WorkflowStep {
 }
 
 export default function WorkflowEditableStepComponent({
-    stepType,
     stepNumber,
     finalStep,
     onDelete,
@@ -26,7 +25,42 @@ export default function WorkflowEditableStepComponent({
 
     const [selects, setSelects] = useState<(Option | null | undefined)[]>([null]);
 
-    const showSelects = stepType === "approval-by";
+    const teacherOptions: Option[] = useMemo(() => 
+        entityTeachers
+            .map((teacher) => ({
+                value: teacher.id,
+                label: teacher.name,
+                icon: () => <img src={teacher.profilePicture} alt={teacher.name} />
+            }))
+            .sort((a, b) => a.label.localeCompare(b.label)),
+        [entityTeachers]
+    );
+
+    const corporateOptions: Option[] = useMemo(() => 
+        entityCorporates
+            .map((corporate) => ({
+                value: corporate.id,
+                label: corporate.name,
+                icon: () => <img src={corporate.profilePicture} alt={corporate.name} />
+            }))
+            .sort((a, b) => a.label.localeCompare(b.label)),
+        [entityCorporates]
+    );
+
+    const selectedValues = useMemo(() => 
+        selects.filter((opt): opt is Option => !!opt).map(opt => opt.value),
+        [selects]
+    );
+
+    const availableTeacherOptions = useMemo(() => 
+        teacherOptions.filter(opt => !selectedValues.includes(opt.value)),
+        [teacherOptions, selectedValues]
+    );
+
+    const availableCorporateOptions = useMemo(() => 
+        corporateOptions.filter(opt => !selectedValues.includes(opt.value)),
+        [corporateOptions, selectedValues]
+    );
 
     const handleAddSelectComponent = () => {
         setSelects((prev) => {
@@ -59,52 +93,34 @@ export default function WorkflowEditableStepComponent({
                 : <div className="ml-3 mt-2" style={{ width: 25, height: 25 }}></div>
             }
 
-            {showSelects && (
-                <div className="ml-10 mb-12">
-                    <WorkflowStepSelects
-                        teachers={entityTeachers}
-                        corporates={entityCorporates}
-                        selects={selects}
-                        onSelectChange={handleSelectChangeAt}
-                    />
-                </div>
-            )}
+            <div className="ml-10 mb-12">
+                <WorkflowStepSelects
+                    teachers={availableTeacherOptions}
+                    corporates={availableCorporateOptions}
+                    selects={selects}
+                    placeholder={stepNumber === 1 ? "Form Intake By:" : "Approval By:"}
+                    onSelectChange={handleSelectChangeAt}
+                />
+            </div>
 
-            {stepNumber === 1 && (
-                <div className="ml-10">
-                    <div className={"flex flex-row gap-0"}>
-                        {/* h-[40px] probably is not the best way to match the height with the select component, but for now should be ok */}
-                        <div className="flex items-center text-mti-gray-dim w-[275px] px-5 h-[40px] border rounded-l-2xl border-mti-gray-platinum">
-                            <span className="text-sm font-normal focus:outline-none">Form Intake</span>
-                        </div>
-                        <div className="flex items-center text-mti-gray-dim w-[275px] px-5 h-[40px] border rounded-r-2xl border-mti-gray-platinum">
-                            <span className="text-sm font-normal focus:outline-none">Prof. X</span>
-                        </div>
-                    </div>
-                </div>
-            )}
-
-            {stepNumber !== 1 && (
-                <div className="flex flex-row items-start mt-1.5 ml-3">
+            <div className="flex flex-row items-start mt-1.5 ml-3">
+                <button
+                    type="button"
+                    onClick={handleAddSelectComponent}
+                    className="cursor-pointer"
+                >
+                    <AiOutlineUserAdd className="size-7 hover:text-mti-purple-light transition ease-in-out duration-300" />
+                </button>
+                {stepNumber !== 1 && !finalStep && (
                     <button
-                        type="button"
-                        onClick={handleAddSelectComponent}
                         className="cursor-pointer"
+                        onClick={onDelete}
+                        type="button"
                     >
-                        <AiOutlineUserAdd className="size-7 hover:text-mti-purple-light transition ease-in-out duration-300" />
+                        <BsTrash className="size-6 mt-0.5 ml-3 hover:text-mti-purple-light transition ease-in-out duration-300" />
                     </button>
-                    {!finalStep && (
-                        <button
-                            className="cursor-pointer"
-                            onClick={onDelete}
-                            type="button"
-                        >
-                            <BsTrash className="size-6 mt-0.5 ml-3 hover:text-mti-purple-light transition ease-in-out duration-300" />
-                        </button>
-                    )}
-                </div>
-            )}
-
+                )}
+            </div>
         </div>
 
     );
diff --git a/src/components/ApprovalWorkflows/WorkflowForm.tsx b/src/components/ApprovalWorkflows/WorkflowForm.tsx
index 505915af..838319f6 100644
--- a/src/components/ApprovalWorkflows/WorkflowForm.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowForm.tsx
@@ -111,7 +111,7 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityTeacher
                 variant="solid"
                 onClick={addStep}
                 type="button"
-                className="max-w-fit text-lg font-medium flex items-center gap-2 text-left"
+                className="max-w-fit text-lg font-medium flex items-center gap-2 text-left mb-8"
             >
                 <IoIosAddCircleOutline className="size-6" />
                 Add Step
diff --git a/src/components/ApprovalWorkflows/WorkflowStepSelects.tsx b/src/components/ApprovalWorkflows/WorkflowStepSelects.tsx
index 155d8bd6..c0ebc585 100644
--- a/src/components/ApprovalWorkflows/WorkflowStepSelects.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowStepSelects.tsx
@@ -1,11 +1,11 @@
 import Option from "@/interfaces/option";
 import Select from "../Low/Select";
-import { CorporateUser, TeacherUser } from "@/interfaces/user";
 
 interface Props {
-    teachers: TeacherUser[];
-    corporates: CorporateUser[];
+    teachers: Option[];
+    corporates: Option[];
     selects: (Option | null | undefined)[];
+    placeholder: string;
     onSelectChange: (numberOfSelects: number, index: number, value: Option | null) => void;
 }
 
@@ -13,20 +13,10 @@ export default function WorkflowStepSelects({
     teachers,
     corporates,
     selects,
+    placeholder,
     onSelectChange,
 }: Props) {
 
-    const teacherOptions: Option[] = teachers.map((teacher) => ({
-        value: teacher.id,
-        label: teacher.name,
-        icon: () => <img src={teacher.profilePicture} alt={teacher.name} />
-    }));
-    const corporateOptions: Option[] = corporates.map((corporate) => ({
-        value: corporate.id,
-        label: corporate.name,
-        icon: () => <img src={corporate.profilePicture} alt={corporate.name} />
-    }));
-
     return (
         <div
             className={"flex flex-wrap gap-0"}
@@ -42,12 +32,12 @@ export default function WorkflowStepSelects({
                 }
 
                 return (
-                    <div key={index} className="min-w-fit">
+                    <div key={index} className="w-[275px]">
                         <Select
-                            options={[...teacherOptions, ...corporateOptions]}
+                            options={[...teachers, ...corporates]}
                             value={option}
                             onChange={(option) => onSelectChange(selects.length, index, option)}
-                            placeholder={"Approval By:"}
+                            placeholder={placeholder}
                             flat
                             isClearable
                             className={classes}
diff --git a/src/pages/approval-workflows/create.tsx b/src/pages/approval-workflows/create.tsx
index 5a5faf2e..136aa8cf 100644
--- a/src/pages/approval-workflows/create.tsx
+++ b/src/pages/approval-workflows/create.tsx
@@ -1,7 +1,6 @@
 import Layout from "@/components/High/Layout";
-import useUser from "@/hooks/useUser";
 import { sessionOptions } from "@/lib/session";
-import { mapBy, redirect, serialize } from "@/utils";
+import { redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
 import { withIronSessionSsr } from "iron-session/next";
@@ -14,14 +13,14 @@ import { v4 as uuidv4 } from 'uuid';
 import WorkflowForm from "@/components/ApprovalWorkflows/WorkflowForm";
 import Button from "@/components/Low/Button";
 import Input from "@/components/Low/Input";
+import Select from "@/components/Low/Select";
 import { ApprovalWorkflow } from "@/interfaces/approval.workflow";
+import { Entity } from "@/interfaces/entity";
+import { CorporateUser, TeacherUser, User } from "@/interfaces/user";
+import { getEntities } from "@/utils/entities.be";
+import { getEntitiesUsers } from "@/utils/users.be";
 import { useEffect, useState } from "react";
 import { MdFormatListBulletedAdd } from "react-icons/md";
-import { CorporateUser, TeacherUser, User } from "@/interfaces/user";
-import Select from "@/components/Low/Select";
-import { getEntitiesUsers, getUsers, getUserWithEntity } from "@/utils/users.be";
-import { getEntities } from "@/utils/entities.be";
-import { Entity } from "@/interfaces/entity";
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
     const user = await requestUser(req, res)

From a4f60455b5fec9360d0997870cdda6146b74c38b Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Thu, 23 Jan 2025 17:08:32 +0000
Subject: [PATCH 17/69] Render previous select input options when switching
 between workflows in builder

---
 .../WorkflowEditableStepComponent.tsx         | 16 +++++++++++++-
 .../ApprovalWorkflows/WorkflowForm.tsx        |  7 ++----
 src/pages/approval-workflows/create.tsx       |  9 ++++----
 src/pages/approval-workflows/index.tsx        | 22 ++++++++++---------
 4 files changed, 33 insertions(+), 21 deletions(-)

diff --git a/src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx b/src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx
index 1f208321..18dc8599 100644
--- a/src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx
@@ -1,7 +1,7 @@
 import { WorkflowStep } from "@/interfaces/approval.workflow";
 import Option from "@/interfaces/option";
 import { CorporateUser, TeacherUser } from "@/interfaces/user";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { AiOutlineUserAdd } from "react-icons/ai";
 import { BsTrash } from "react-icons/bs";
 import { LuGripHorizontal } from "react-icons/lu";
@@ -16,6 +16,7 @@ interface Props extends WorkflowStep {
 
 export default function WorkflowEditableStepComponent({
     stepNumber,
+    assignees = [null],
     finalStep,
     onDelete,
     onSelectChange,
@@ -47,6 +48,19 @@ export default function WorkflowEditableStepComponent({
         [entityCorporates]
     );
 
+    const allOptions = useMemo(() => [...teacherOptions, ...corporateOptions], [teacherOptions, corporateOptions]);
+
+    useEffect(() => {
+        if (assignees && assignees.length > 0) {
+            const initialSelects = assignees.map((assignee) =>
+                typeof assignee === 'string' ? allOptions.find(opt => opt.value === assignee) || null : null
+            );
+            if (JSON.stringify(initialSelects) !== JSON.stringify(selects)) {
+                setSelects(initialSelects);
+            }
+        } 
+    }, [assignees, allOptions]);
+
     const selectedValues = useMemo(() => 
         selects.filter((opt): opt is Option => !!opt).map(opt => opt.value),
         [selects]
diff --git a/src/components/ApprovalWorkflows/WorkflowForm.tsx b/src/components/ApprovalWorkflows/WorkflowForm.tsx
index 838319f6..2e105745 100644
--- a/src/components/ApprovalWorkflows/WorkflowForm.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowForm.tsx
@@ -111,7 +111,7 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityTeacher
                 variant="solid"
                 onClick={addStep}
                 type="button"
-                className="max-w-fit text-lg font-medium flex items-center gap-2 text-left mb-8"
+                className="max-w-fit text-lg font-medium flex items-center gap-2 text-left mb-9"
             >
                 <IoIosAddCircleOutline className="size-6" />
                 Add Step
@@ -138,11 +138,8 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityTeacher
                             drag={!(step.firstStep || step.finalStep)}
                         >
                             <WorkflowEditableStepComponent
-                                key={step.key}
-                                completed={false}
-                                editView
                                 stepNumber={index + 1}
-                                stepType={step.stepType}
+                                assignees={step.assignees}
                                 finalStep={step.finalStep}
                                 onDelete={() => handleDelete(step.key)}
                                 onSelectChange={(numberOfSelects, idx, option) => handleSelectChange(step.key, numberOfSelects, idx, option)}
diff --git a/src/pages/approval-workflows/create.tsx b/src/pages/approval-workflows/create.tsx
index 136aa8cf..d9381784 100644
--- a/src/pages/approval-workflows/create.tsx
+++ b/src/pages/approval-workflows/create.tsx
@@ -95,8 +95,8 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
             modules: [],
             status: "pending",
             steps: [
-                { key: Date.now(), completed: false, editView: true, stepType: "form-intake", stepNumber: 1, firstStep: true },
-                { key: Date.now() + 1, completed: false, editView: true, stepType: "approval-by", stepNumber: 2, finalStep: true },
+                { key: Date.now(), completed: false, editView: true, stepType: "form-intake", stepNumber: 1, firstStep: true, assignees: [null] },
+                { key: Date.now() + 1, completed: false, editView: true, stepType: "approval-by", stepNumber: 2, finalStep: true, assignees: [null] },
             ],
         };
         setWorkflows((prev) => [...prev, newWorkflow]);
@@ -104,7 +104,6 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
     };
 
     const onWorkflowChange = (updatedWorkflow: ApprovalWorkflow) => {
-        console.log(updatedWorkflow);
         setWorkflows(prev =>
             prev.map(wf => (wf.id === updatedWorkflow.id ? updatedWorkflow : wf))
         );
@@ -136,8 +135,8 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
             </Head>
             <ToastContainer />
             {user && (
-                <Layout user={user}>
-                    <section className="flex flex-col gap-0">
+                <Layout user={user} className="flex flex-col gap-6">
+                    <section className="flex flex-col">
                         <div className="flex items-center gap-2">
                             <Link
                                 href="/approval-workflows"
diff --git a/src/pages/approval-workflows/index.tsx b/src/pages/approval-workflows/index.tsx
index c266b536..dce7b489 100644
--- a/src/pages/approval-workflows/index.tsx
+++ b/src/pages/approval-workflows/index.tsx
@@ -271,16 +271,18 @@ export default function ApprovalWorkflows({ user, teachers, userEntitiesWithLabe
                 <Layout user={user} className="gap-6">
                     <h1 className="text-2xl font-semibold">Approval Workflows</h1>
 
-                    <Link href={"/approval-workflows/create"}>
-                        <Button
-                            color="purple"
-                            variant="solid"
-                            className="max-w-fit text-lg font-medium flex items-center gap-2 text-left"
-                        >
-                            <IoIosAddCircleOutline className="size-6" />
-                            Configure New Workflows
-                        </Button>
-                    </Link>
+                    <div className="flex flex-row">
+                        <Link href={"/approval-workflows/create"}>
+                            <Button
+                                color="purple"
+                                variant="solid"
+                                className="min-w-fit text-lg font-medium flex items-center gap-2 text-left"
+                            >
+                                <IoIosAddCircleOutline className="size-6" />
+                                Configure New Workflows
+                            </Button>
+                        </Link>
+                    </div>
 
                     <div className="flex w-full items-center gap-4">
                         <div className="flex w-full flex-col gap-3">

From c921d54d508ed0de812814346f01355dc526202e Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Thu, 23 Jan 2025 22:12:25 +0000
Subject: [PATCH 18/69] code refactoring

---
 .../WorkflowEditableStepComponent.tsx         | 18 ++--
 .../ApprovalWorkflows/WorkflowForm.tsx        | 83 +++++++++----------
 src/pages/approval-workflows/create.tsx       |  8 +-
 3 files changed, 55 insertions(+), 54 deletions(-)

diff --git a/src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx b/src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx
index 18dc8599..2a44303b 100644
--- a/src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx
@@ -7,6 +7,7 @@ import { BsTrash } from "react-icons/bs";
 import { LuGripHorizontal } from "react-icons/lu";
 import WorkflowStepNumber from "./WorkflowStepNumber";
 import WorkflowStepSelects from "./WorkflowStepSelects";
+import Image from "next/image";
 
 interface Props extends WorkflowStep {
     entityTeachers: TeacherUser[];
@@ -31,7 +32,7 @@ export default function WorkflowEditableStepComponent({
             .map((teacher) => ({
                 value: teacher.id,
                 label: teacher.name,
-                icon: () => <img src={teacher.profilePicture} alt={teacher.name} />
+                icon: () => <Image src={teacher.profilePicture} alt={teacher.name} />
             }))
             .sort((a, b) => a.label.localeCompare(b.label)),
         [entityTeachers]
@@ -42,7 +43,7 @@ export default function WorkflowEditableStepComponent({
             .map((corporate) => ({
                 value: corporate.id,
                 label: corporate.name,
-                icon: () => <img src={corporate.profilePicture} alt={corporate.name} />
+                icon: () => <Image src={corporate.profilePicture} alt={corporate.name} />
             }))
             .sort((a, b) => a.label.localeCompare(b.label)),
         [entityCorporates]
@@ -55,9 +56,16 @@ export default function WorkflowEditableStepComponent({
             const initialSelects = assignees.map((assignee) =>
                 typeof assignee === 'string' ? allOptions.find(opt => opt.value === assignee) || null : null
             );
-            if (JSON.stringify(initialSelects) !== JSON.stringify(selects)) {
-                setSelects(initialSelects);
-            }
+    
+            setSelects((prevSelects) => {
+                // This is needed to avoid unnecessary re-renders which can cause warning of a child component being re-rendered while parent is in the midle of also re-rendering.
+                const areEqual = initialSelects.length === prevSelects.length && initialSelects.every((option, idx) => option?.value === prevSelects[idx]?.value);
+                
+                if (!areEqual) {
+                    return initialSelects;
+                }
+                return prevSelects;
+            });
         } 
     }, [assignees, allOptions]);
 
diff --git a/src/components/ApprovalWorkflows/WorkflowForm.tsx b/src/components/ApprovalWorkflows/WorkflowForm.tsx
index 2e105745..9361ded4 100644
--- a/src/components/ApprovalWorkflows/WorkflowForm.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowForm.tsx
@@ -23,18 +23,8 @@ interface Props {
 }
 
 export default function WorkflowForm({ workflow, onWorkflowChange, entityTeachers, entityCorporates }: Props) {
-    const [steps, setSteps] = useState<WorkflowStep[]>(workflow.steps);
     const [stepCounter, setStepCounter] = useState<number>(3); // to guarantee unique keys used for animations
-    const lastStep = steps[steps.length - 1];
-
-    useEffect(() => {
-        setSteps(workflow.steps);
-    }, [workflow]);
-
-    useEffect(() => {
-        const updatedWorkflow = { ...workflow, steps };
-        onWorkflowChange(updatedWorkflow);
-    }, [steps]);
+    const lastStep = workflow.steps[workflow.steps.length - 1];
 
     const renumberSteps = (steps: WorkflowStep[]): WorkflowStep[] => {
         return steps.map((step, index) => ({
@@ -44,49 +34,49 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityTeacher
     };
 
     const addStep = () => {
-        setSteps((prev) => {
-            const newStep: WorkflowStep = {
-                key: stepCounter,
-                stepType: "approval-by",
-                stepNumber: steps.length,
-                completed: false,
-                assignees: [null],
-            };
-            setStepCounter((count) => count + 1);
+        const newStep: WorkflowStep = {
+            key: stepCounter,
+            stepType: "approval-by",
+            stepNumber: workflow.steps.length,
+            completed: false,
+            assignees: [null],
+        };
+        setStepCounter((count) => count + 1);
 
-            const updatedSteps = [...prev.slice(0, -1), newStep, lastStep];
-            return renumberSteps(updatedSteps);
-        });
+        const updatedSteps = [
+            ...workflow.steps.slice(0, -1), 
+            newStep,
+            lastStep
+        ];
+        onWorkflowChange({ ...workflow, steps: renumberSteps(updatedSteps) });
     };
 
     const handleDelete = (key: number | undefined) => {
-        if (key) {
-            setSteps((prev) => {
-                const updatedSteps = prev.filter((step) => step.key !== key);
-                return renumberSteps(updatedSteps);
-            });
-        }
+        if (!key) return;
+
+        const updatedSteps = workflow.steps.filter((step) => step.key !== key);
+        onWorkflowChange({ ...workflow, steps: renumberSteps(updatedSteps) });
     };
 
     const handleSelectChange = (key: number | undefined, numberOfSelects: number, index: number, selectedOption: Option | null) => {
-        if (key === undefined) return;
+        if (!key) return;
 
-        setSteps((prevSteps) =>
-            prevSteps.map((step) => {
-                if (step.key !== key) return step;
+        const updatedSteps = workflow.steps.map((step) => {
+            if (step.key !== key) return step;
 
-                const assignees = step.assignees ?? [];
-                let newAssignees = [...assignees];
+            const assignees = step.assignees ?? [];
+            let newAssignees = [...assignees];
 
-                if (numberOfSelects === assignees.length) { // means no new select was added and instead one was changed
-                    newAssignees[index] = selectedOption?.value;
-                } else if (numberOfSelects === assignees.length + 1) { // means a new select was added
-                    newAssignees.push(selectedOption?.value || null);
-                } 
+            if (numberOfSelects === assignees.length) { // means no new select was added and instead one was changed
+                newAssignees[index] = selectedOption?.value;
+            } else if (numberOfSelects === assignees.length + 1) { // means a new select was added
+                newAssignees.push(selectedOption?.value || null);
+            }
 
-                return { ...step, assignees: newAssignees };
-            })
-        );
+            return { ...step, assignees: newAssignees };
+        });
+
+        onWorkflowChange({ ...workflow, steps: updatedSteps });
     };
 
     const handleReorder = (newOrder: WorkflowStep[]) => {
@@ -101,7 +91,8 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityTeacher
             const [final] = newOrder.splice(finalIndex, 1);
             newOrder.push(final);
         }
-        setSteps(renumberSteps(newOrder));
+
+        onWorkflowChange({ ...workflow, steps: renumberSteps(newOrder) });
     };
 
     return (
@@ -119,13 +110,13 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityTeacher
 
             <Reorder.Group
                 axis="y"
-                values={steps}
+                values={workflow.steps}
                 onReorder={handleReorder}
                 className="flex flex-col gap-0"
             >
 
                 <AnimatePresence>
-                    {steps.map((step, index) => (
+                    {workflow.steps.map((step, index) => (
                         <Reorder.Item
                             key={step.key}
                             value={step}
diff --git a/src/pages/approval-workflows/create.tsx b/src/pages/approval-workflows/create.tsx
index d9381784..46e4f922 100644
--- a/src/pages/approval-workflows/create.tsx
+++ b/src/pages/approval-workflows/create.tsx
@@ -118,7 +118,7 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
 
         setWorkflows(prev => prev.filter(wf => wf.id !== id));
         if (selectedWorkflowId === id) {
-            setSelectedWorkflowId(undefined);
+            workflows.length > 0 ? setSelectedWorkflowId(workflows[0].id) : setSelectedWorkflowId(undefined);
         }
     };
 
@@ -159,6 +159,8 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
                             Add New Workflow
                         </Button>
 
+                        {workflows.length !== 0 && <div className="bg-gray-300 w-[1px]"></div>}
+
                         <div className="flex flex-wrap gap-2">
                             {workflows.map((workflow) => (
                                 <Button
@@ -172,7 +174,7 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
                                     onClick={() => handleSelectWorkflow(workflow.id)}
                                     className="min-w-fit text-lg font-medium flex items-center gap-2 text-left"
                                 >
-                                    {workflow.name.trim() === "" ? "New Workflow" : workflow.name}
+                                    {workflow.name.trim() === "" ? "Workflow" : workflow.name}
                                 </Button>
 
                             ))}
@@ -213,7 +215,7 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
                                         placeholder="Entity..."
                                     />
                                     <Button
-                                        color="purple"
+                                        color="red"
                                         variant="solid"
                                         onClick={() => handleDeleteWorkflow(currentWorkflow.id)}
                                         type="button"

From dcd25465fd2126f6b0f97754b172a11355caaf9b Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Thu, 23 Jan 2025 22:56:45 +0000
Subject: [PATCH 19/69] on workflow builder, only render steps if name and
 entity are set. reset workflow on entity reset.

---
 .../ApprovalWorkflows/WorkflowForm.tsx        | 117 +++++++++---------
 src/pages/approval-workflows/create.tsx       |  15 ++-
 2 files changed, 74 insertions(+), 58 deletions(-)

diff --git a/src/components/ApprovalWorkflows/WorkflowForm.tsx b/src/components/ApprovalWorkflows/WorkflowForm.tsx
index 9361ded4..bb4bdddf 100644
--- a/src/components/ApprovalWorkflows/WorkflowForm.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowForm.tsx
@@ -44,7 +44,7 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityTeacher
         setStepCounter((count) => count + 1);
 
         const updatedSteps = [
-            ...workflow.steps.slice(0, -1), 
+            ...workflow.steps.slice(0, -1),
             newStep,
             lastStep
         ];
@@ -95,66 +95,69 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityTeacher
         onWorkflowChange({ ...workflow, steps: renumberSteps(newOrder) });
     };
 
+
     return (
-        <div className="flex flex-col gap-6">
-            <Button
-                color="purple"
-                variant="solid"
-                onClick={addStep}
-                type="button"
-                className="max-w-fit text-lg font-medium flex items-center gap-2 text-left mb-9"
-            >
-                <IoIosAddCircleOutline className="size-6" />
-                Add Step
-            </Button>
+        <>
+            {workflow.entityId && workflow.name &&
+                <div className="flex flex-col gap-6">
+                    <Button
+                        color="purple"
+                        variant="solid"
+                        onClick={addStep}
+                        type="button"
+                        className="max-w-fit text-lg font-medium flex items-center gap-2 text-left mb-9"
+                    >
+                        <IoIosAddCircleOutline className="size-6" />
+                        Add Step
+                    </Button>
 
-            <Reorder.Group
-                axis="y"
-                values={workflow.steps}
-                onReorder={handleReorder}
-                className="flex flex-col gap-0"
-            >
-
-                <AnimatePresence>
-                    {workflow.steps.map((step, index) => (
-                        <Reorder.Item
-                            key={step.key}
-                            value={step}
-                            variants={itemVariants}
-                            initial="initial"
-                            animate="animate"
-                            exit="exit"
-                            transition={{ duration: 0.3 }}
-                            layout
-                            drag={!(step.firstStep || step.finalStep)}
-                        >
-                            <WorkflowEditableStepComponent
-                                stepNumber={index + 1}
-                                assignees={step.assignees}
-                                finalStep={step.finalStep}
-                                onDelete={() => handleDelete(step.key)}
-                                onSelectChange={(numberOfSelects, idx, option) => handleSelectChange(step.key, numberOfSelects, idx, option)}
-                                entityTeachers={entityTeachers}
-                                entityCorporates={entityCorporates}
-                            />
-                            {step.finalStep &&
-                                <Button
-                                    type="submit"
-                                    color="purple"
-                                    variant="solid"
-                                    className="max-w-fit text-lg font-medium flex items-center gap-2 text-left mt-7"
+                    <Reorder.Group
+                        axis="y"
+                        values={workflow.steps}
+                        onReorder={handleReorder}
+                        className="flex flex-col gap-0"
+                    >
+                        <AnimatePresence>
+                            {workflow.steps.map((step, index) => (
+                                <Reorder.Item
+                                    key={step.key}
+                                    value={step}
+                                    variants={itemVariants}
+                                    initial="initial"
+                                    animate="animate"
+                                    exit="exit"
+                                    transition={{ duration: 0.3 }}
+                                    layout
+                                    drag={!(step.firstStep || step.finalStep)}
                                 >
-                                    <FaRegCheckCircle className="size-5" />
-                                    Confirm Exam Workflow Pipeline
-                                </Button>
-                            }
-                        </Reorder.Item>
-                    ))}
-
-                </AnimatePresence>
-            </Reorder.Group>
-        </div>
 
+                                    <WorkflowEditableStepComponent
+                                        stepNumber={index + 1}
+                                        assignees={step.assignees}
+                                        finalStep={step.finalStep}
+                                        onDelete={() => handleDelete(step.key)}
+                                        onSelectChange={(numberOfSelects, idx, option) => handleSelectChange(step.key, numberOfSelects, idx, option)}
+                                        entityTeachers={entityTeachers}
+                                        entityCorporates={entityCorporates}
+                                    />
 
+                                    {step.finalStep &&
+                                        <Button
+                                            type="submit"
+                                            color="purple"
+                                            variant="solid"
+                                            className="max-w-fit text-lg font-medium flex items-center gap-2 text-left mt-7"
+                                        >
+                                            <FaRegCheckCircle className="size-5" />
+                                            Confirm Exam Workflow Pipeline
+                                        </Button>
+                                    }
+                                </Reorder.Item>
+                            ))}
+                        </AnimatePresence>
+                    </Reorder.Group>
+                </div>
+            }
+        </>
     );
 };
\ No newline at end of file
diff --git a/src/pages/approval-workflows/create.tsx b/src/pages/approval-workflows/create.tsx
index 46e4f922..83a50ccf 100644
--- a/src/pages/approval-workflows/create.tsx
+++ b/src/pages/approval-workflows/create.tsx
@@ -51,7 +51,7 @@ interface Props {
 export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers, userEntitiesCorporates }: Props) {
     const [workflows, setWorkflows] = useState<ApprovalWorkflow[]>([]);
     const [selectedWorkflowId, setSelectedWorkflowId] = useState<string | undefined>(undefined);
-    const [entityId, setEntityId] = useState<string | undefined>(undefined);
+    const [entityId, setEntityId] = useState<string | null | undefined>(null);
     const [entityTeachers, setEntityTeachers] = useState<TeacherUser[]>([]);
     const [entityCorporates, setEntityCorporates] = useState<CorporateUser[]>([]);
 
@@ -122,6 +122,11 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
         }
     };
 
+    const handleResetWorkflow = (id: string) => {
+        setWorkflows(prev => prev.filter(wf => wf.id !== id));
+        handleAddNewWorkflow();
+    }
+
     return (
         <>
             <Head>
@@ -201,6 +206,11 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
                                     />
                                     <Select
                                         options={ENTITY_OPTIONS}
+                                        value={
+                                            currentWorkflow.entityId === ""
+                                                ? null
+                                                : ENTITY_OPTIONS.find(option => option.value === currentWorkflow.entityId)
+                                        }
                                         onChange={(selectedEntity) => {
                                             if (selectedEntity?.value) {
                                                 setEntityId(selectedEntity.value);
@@ -209,6 +219,9 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
                                                     entityId: selectedEntity.value,
                                                 };
                                                 onWorkflowChange(updatedWorkflow);
+                                            } else if (selectedEntity === null) {
+                                                if (!confirm("Clearing entity will reset this workflow. Are you sure you want to proceed?")) return;
+                                                handleResetWorkflow(currentWorkflow.id);
                                             }
                                         }}
                                         isClearable

From f6b0c96b3b640ba1471f4a6a3a77467abd5693f0 Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Fri, 24 Jan 2025 00:33:45 +0000
Subject: [PATCH 20/69] Finish Approval Workflow builder for the most part.
 TODO: implement permissions

---
 src/components/ApprovalWorkflows/Tip.tsx      | 14 +++++
 .../ApprovalWorkflows/WorkflowForm.tsx        | 54 ++++++++++---------
 src/pages/approval-workflows/create.tsx       | 49 +++++++++++++----
 3 files changed, 80 insertions(+), 37 deletions(-)
 create mode 100644 src/components/ApprovalWorkflows/Tip.tsx

diff --git a/src/components/ApprovalWorkflows/Tip.tsx b/src/components/ApprovalWorkflows/Tip.tsx
new file mode 100644
index 00000000..5d0b1fbe
--- /dev/null
+++ b/src/components/ApprovalWorkflows/Tip.tsx
@@ -0,0 +1,14 @@
+import { MdTipsAndUpdates } from "react-icons/md";
+
+interface Props {
+    text: string;
+}
+
+export default function Tip({ text }: Props) {
+    return (
+        <div className="flex flex-row gap-3 text-gray-500 font-medium">
+            <MdTipsAndUpdates size={25} />
+            <p>{text}</p>
+        </div>
+    );
+};
\ No newline at end of file
diff --git a/src/components/ApprovalWorkflows/WorkflowForm.tsx b/src/components/ApprovalWorkflows/WorkflowForm.tsx
index bb4bdddf..dbaa05f6 100644
--- a/src/components/ApprovalWorkflows/WorkflowForm.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowForm.tsx
@@ -1,19 +1,13 @@
+import { ApprovalWorkflow, WorkflowStep } from "@/interfaces/approval.workflow";
 import Option from "@/interfaces/option";
-import { AnimatePresence, Reorder } from "framer-motion";
-import { useEffect, useState } from "react";
+import { CorporateUser, TeacherUser } from "@/interfaces/user";
+import { AnimatePresence, AnimateSharedLayout, Reorder, motion } from "framer-motion";
+import { useState } from "react";
 import { FaRegCheckCircle } from "react-icons/fa";
 import { IoIosAddCircleOutline } from "react-icons/io";
 import Button from "../Low/Button";
 import WorkflowEditableStepComponent from "./WorkflowEditableStepComponent";
-import { ApprovalWorkflow, WorkflowStep } from "@/interfaces/approval.workflow";
-import { CorporateUser, TeacherUser } from "@/interfaces/user";
-
-// Variants for animating steps when they are added/removed
-const itemVariants = {
-    initial: { opacity: 0, y: -20 },
-    animate: { opacity: 1, y: 0 },
-    exit: { opacity: 0, x: 20 },
-};
+import Tip from "./Tip";
 
 interface Props {
     workflow: ApprovalWorkflow;
@@ -99,17 +93,26 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityTeacher
     return (
         <>
             {workflow.entityId && workflow.name &&
-                <div className="flex flex-col gap-6">
-                    <Button
-                        color="purple"
-                        variant="solid"
-                        onClick={addStep}
-                        type="button"
-                        className="max-w-fit text-lg font-medium flex items-center gap-2 text-left mb-9"
+                <div>
+                    <motion.div
+                        className="flex flex-col gap-6"
+                        initial={{ opacity: 0, y: 20 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        exit={{ opacity: 0, x: 20 }}
+                        transition={{ duration: 0.3 }}
                     >
-                        <IoIosAddCircleOutline className="size-6" />
-                        Add Step
-                    </Button>
+                        <Tip text="Introduce here all the steps associated with this instance." />
+                        <Button
+                            color="purple"
+                            variant="solid"
+                            onClick={addStep}
+                            type="button"
+                            className="max-w-fit text-lg font-medium flex items-center gap-2 text-left mb-7"
+                        >
+                            <IoIosAddCircleOutline className="size-6" />
+                            Add Step
+                        </Button>
+                    </motion.div>
 
                     <Reorder.Group
                         axis="y"
@@ -122,10 +125,9 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityTeacher
                                 <Reorder.Item
                                     key={step.key}
                                     value={step}
-                                    variants={itemVariants}
-                                    initial="initial"
-                                    animate="animate"
-                                    exit="exit"
+                                    initial={{ opacity: 0, y: 20 }}
+                                    animate={{ opacity: 1, y: 0 }}
+                                    exit={{ opacity: 0, x: 20 }}
                                     transition={{ duration: 0.3 }}
                                     layout
                                     drag={!(step.firstStep || step.finalStep)}
@@ -146,7 +148,7 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityTeacher
                                             type="submit"
                                             color="purple"
                                             variant="solid"
-                                            className="max-w-fit text-lg font-medium flex items-center gap-2 text-left mt-7"
+                                            className="max-w-fit text-lg font-medium flex items-center gap-2 text-left -mt-4"
                                         >
                                             <FaRegCheckCircle className="size-5" />
                                             Confirm Exam Workflow Pipeline
diff --git a/src/pages/approval-workflows/create.tsx b/src/pages/approval-workflows/create.tsx
index 83a50ccf..3ce00bd5 100644
--- a/src/pages/approval-workflows/create.tsx
+++ b/src/pages/approval-workflows/create.tsx
@@ -10,6 +10,7 @@ import { BsChevronLeft, BsTrash } from "react-icons/bs";
 import { ToastContainer } from "react-toastify";
 import { v4 as uuidv4 } from 'uuid';
 
+import Tip from "@/components/ApprovalWorkflows/Tip";
 import WorkflowForm from "@/components/ApprovalWorkflows/WorkflowForm";
 import Button from "@/components/Low/Button";
 import Input from "@/components/Low/Input";
@@ -19,6 +20,7 @@ import { Entity } from "@/interfaces/entity";
 import { CorporateUser, TeacherUser, User } from "@/interfaces/user";
 import { getEntities } from "@/utils/entities.be";
 import { getEntitiesUsers } from "@/utils/users.be";
+import { LayoutGroup, motion } from "framer-motion";
 import { useEffect, useState } from "react";
 import { MdFormatListBulletedAdd } from "react-icons/md";
 
@@ -116,9 +118,12 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
     const handleDeleteWorkflow = (id: string) => {
         if (!confirm(`Are you sure you want to delete this Approval Workflow?`)) return;
 
-        setWorkflows(prev => prev.filter(wf => wf.id !== id));
+        const updatedWorkflows = workflows.filter(wf => wf.id !== id);
+
+        setWorkflows(updatedWorkflows);
+
         if (selectedWorkflowId === id) {
-            workflows.length > 0 ? setSelectedWorkflowId(workflows[0].id) : setSelectedWorkflowId(undefined);
+            setSelectedWorkflowId(updatedWorkflows.find(wf => wf.id)?.id);
         }
     };
 
@@ -212,15 +217,15 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
                                                 : ENTITY_OPTIONS.find(option => option.value === currentWorkflow.entityId)
                                         }
                                         onChange={(selectedEntity) => {
-                                            if (selectedEntity?.value) {
+                                            if (!currentWorkflow.entityId && selectedEntity?.value) {
                                                 setEntityId(selectedEntity.value);
                                                 const updatedWorkflow = {
                                                     ...currentWorkflow,
                                                     entityId: selectedEntity.value,
                                                 };
                                                 onWorkflowChange(updatedWorkflow);
-                                            } else if (selectedEntity === null) {
-                                                if (!confirm("Clearing entity will reset this workflow. Are you sure you want to proceed?")) return;
+                                            } else {
+                                                if (!confirm("Clearing or changing entity will reset this workflow. Are you sure you want to proceed?")) return;
                                                 handleResetWorkflow(currentWorkflow.id);
                                             }
                                         }}
@@ -239,12 +244,34 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
                                     </Button>
                                 </div>
 
-                                <WorkflowForm
-                                    workflow={currentWorkflow}
-                                    onWorkflowChange={onWorkflowChange}
-                                    entityTeachers={entityTeachers}
-                                    entityCorporates={entityCorporates}
-                                />
+                                <LayoutGroup>
+                                    {(!currentWorkflow.name || !currentWorkflow.entityId) && (
+                                        <motion.div
+                                            key={0}
+                                            initial={{ opacity: 0, y: -20 }}
+                                            animate={{ opacity: 1, y: 0 }}
+                                            exit={{ opacity: 0, y: -20 }}
+                                            transition={{ duration: 0.3 }}
+                                        >
+                                            <Tip text="Please fill workflow name and associated entity to start configuring workflow." />
+                                        </motion.div>
+                                    )}
+
+                                    <motion.div
+                                        key={1}
+                                        initial={{ opacity: 0, y: -20 }}
+                                        animate={{ opacity: 1, y: 0 }}
+                                        exit={{ opacity: 0, y: -20 }}
+                                        transition={{ duration: 0.3 }}
+                                    >
+                                        <WorkflowForm
+                                            workflow={currentWorkflow}
+                                            onWorkflowChange={onWorkflowChange}
+                                            entityTeachers={entityTeachers}
+                                            entityCorporates={entityCorporates}
+                                        />
+                                    </motion.div>
+                                </LayoutGroup>
                             </>
                         )}
                     </form>

From 41d09eaad876c84d12590167bafdca97721537a9 Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Fri, 24 Jan 2025 14:14:07 +0000
Subject: [PATCH 21/69] Make data dynamic in workflow view. Add requester and
 startDate to workflows.

---
 .../ApprovalWorkflows/RequestedBy.tsx         |   5 +-
 .../ApprovalWorkflows/StartedOn.tsx           |  26 ++++-
 .../ApprovalWorkflows/UserWithProfilePic.tsx  |  22 ++++
 .../WorkflowStepComponent.tsx                 |  55 ++++++---
 src/demo/approval_workflows.json              | 108 +++++++++---------
 src/interfaces/approval.workflow.ts           |  26 ++---
 src/interfaces/user.ts                        |  10 ++
 src/pages/approval-workflows/[id].tsx         |  51 ++++++---
 src/pages/approval-workflows/create.tsx       |   8 +-
 src/pages/approval-workflows/index.tsx        |   3 +-
 10 files changed, 207 insertions(+), 107 deletions(-)
 create mode 100644 src/components/ApprovalWorkflows/UserWithProfilePic.tsx

diff --git a/src/components/ApprovalWorkflows/RequestedBy.tsx b/src/components/ApprovalWorkflows/RequestedBy.tsx
index 0f13ae32..e3c8d7da 100644
--- a/src/components/ApprovalWorkflows/RequestedBy.tsx
+++ b/src/components/ApprovalWorkflows/RequestedBy.tsx
@@ -3,11 +3,12 @@ import React from "react";
 import { FaRegUser } from "react-icons/fa";
 
 interface Props {
+    prefix: string;
     name: string;
     profileImage: string;
 }
 
-export default function RequestedBy({ name, profileImage }: Props) {
+export default function RequestedBy({ prefix, name, profileImage }: Props) {
     return (
         <div className="flex items-center space-x-3">
             <div className="flex items-center justify-center w-12 h-12 bg-gray-100 rounded-lg border border-gray-300">
@@ -16,7 +17,7 @@ export default function RequestedBy({ name, profileImage }: Props) {
             <div>
                 <p className="text-sm font-medium text-gray-800">Requested by</p>
                 <div className="flex items-center space-x-2">
-                    <p className="text-xs font-medium text-gray-800">{name}</p>
+                    <p className="text-xs font-medium text-gray-800">{prefix} {name}</p>
                     <Image
                         src={profileImage}
                         alt={name}
diff --git a/src/components/ApprovalWorkflows/StartedOn.tsx b/src/components/ApprovalWorkflows/StartedOn.tsx
index 452cad72..7babf998 100644
--- a/src/components/ApprovalWorkflows/StartedOn.tsx
+++ b/src/components/ApprovalWorkflows/StartedOn.tsx
@@ -2,19 +2,39 @@ import React from "react";
 import { PiCalendarDots } from "react-icons/pi";
 
 interface Props {
-    date: string;
+    date: number;
 }
 
 export default function StartedOn({ date }: Props) {
+    const formattedDate = new Date(date);
+
+    const yearMonthDay = formattedDate.toISOString().split("T")[0];
+
+    const fullDateTime = formattedDate.toLocaleString("en-US", {
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+        hour12: false,
+    });
+
     return (
         <div className="flex items-center space-x-3">
             <div className="flex items-center justify-center w-12 h-12 bg-gray-100 rounded-lg border border-gray-300">
-                <PiCalendarDots className="text-mti-purple-dark size-7"/>
+                <PiCalendarDots className="text-mti-purple-dark size-7" />
             </div>
             <div>
                 <p className="pb-1 text-sm font-medium text-gray-800">Started on</p>
                 <div className="flex items-center">
-                    <p className="text-xs font-medium text-gray-800">{date}</p>
+                    {/* Display the formatted date and add a title attribute for hover */}
+                    <p
+                        className="text-xs font-medium text-gray-800"
+                        title={fullDateTime} // Shows full date and time on hover
+                    >
+                        {yearMonthDay}
+                    </p>
                 </div>
             </div>
         </div>
diff --git a/src/components/ApprovalWorkflows/UserWithProfilePic.tsx b/src/components/ApprovalWorkflows/UserWithProfilePic.tsx
new file mode 100644
index 00000000..63ff9434
--- /dev/null
+++ b/src/components/ApprovalWorkflows/UserWithProfilePic.tsx
@@ -0,0 +1,22 @@
+import Image from "next/image";
+
+interface Props {
+    prefix: string;
+    name: string;
+    profileImage: string;
+}
+
+export default function UserWithProfilePic({ prefix, name, profileImage }: Props) {
+    return (
+        <div className="flex items-center space-x-2">
+            <p className="text-xs font-medium text-gray-800">{prefix} {name}</p>
+            <Image
+                src={profileImage}
+                alt={name}
+                width={24}
+                height={24}
+                className="w-6 h-6 rounded-full"
+            />
+        </div>
+    );
+};
\ No newline at end of file
diff --git a/src/components/ApprovalWorkflows/WorkflowStepComponent.tsx b/src/components/ApprovalWorkflows/WorkflowStepComponent.tsx
index e7fc77ed..266238bd 100644
--- a/src/components/ApprovalWorkflows/WorkflowStepComponent.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowStepComponent.tsx
@@ -1,10 +1,17 @@
-import { getUserTypeLabel, WorkflowStep } from "@/interfaces/approval.workflow";
+import { getUserTypeLabel, getUserTypeLabelShort, WorkflowStep } from "@/interfaces/approval.workflow";
 import WorkflowStepNumber from "./WorkflowStepNumber";
 import clsx from "clsx";
 import { RiThumbUpLine } from "react-icons/ri";
 import { FaWpforms } from "react-icons/fa6";
+import { User } from "@/interfaces/user";
+import UserWithProfilePic from "./UserWithProfilePic";
+
+interface Props extends WorkflowStep {
+    workflowAssignees: User[],
+}
 
 export default function WorkflowStepComponent({
+    workflowAssignees,
     stepType,
     stepNumber,
     completed,
@@ -15,12 +22,17 @@ export default function WorkflowStepComponent({
     assignees,
     assigneesType,
     onClick,
-}: WorkflowStep) {
+}: Props) {
+    console.log(workflowAssignees);
+    console.log(completedBy)
+
+    const completedByUser = workflowAssignees.find((assignee) => assignee.id === completedBy);
+    const assigneesUsers = workflowAssignees.filter(user => assignees!.includes(user.id));
 
     return (
         <div
             onClick={onClick}
-            className={clsx("flex flex-row gap-5 w-[600px] p-6 my-4 rounded-2xl transition ease-in-out duration-300 disabled:cursor-not-allowed cursor-pointer", {
+            className={clsx("flex flex-row gap-5 w-[700px] p-6 my-4 rounded-2xl transition ease-in-out duration-300 disabled:cursor-not-allowed cursor-pointer", {
                 "bg-mti-purple-ultralight": selected,
             })}
         >
@@ -29,7 +41,7 @@ export default function WorkflowStepComponent({
 
                 {/* Vertical Bar connecting steps */}
                 {!finalStep && (
-                    <div className="absolute w-1 bg-mti-purple-dark -bottom-20 h-20"></div>
+                    <div className="absolute w-1 bg-mti-purple-dark -bottom-20 top-11"></div>
                 )}
             </div>
 
@@ -46,15 +58,19 @@ export default function WorkflowStepComponent({
                 {stepType === "form-intake" ? (
                     <>
                         <p className="text-sm font-medium text-gray-800">Form: Intake</p>
-                        {completed && (
+                        {completed && completedBy && (
                             <p className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
-                                Completed by {completedBy}
+                                Completed by {getUserTypeLabelShort(completedByUser?.type)} {completedByUser?.name}
                             </p>
                         )}
-                        {!completed && (
-                            <p className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
-                                In progress...
-                            </p>
+                        {!completed && completedBy && (
+                            <>
+                                {assigneesUsers.map(user => (
+                                    <p key={user.id} className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
+                                        {getUserTypeLabelShort(user.type)} {user.name}
+                                    </p>
+                                ))}
+                            </>
                         )}
                     </>
                 ) : (
@@ -63,12 +79,23 @@ export default function WorkflowStepComponent({
                             <p className="text-sm font-medium text-gray-800">Approval: {getUserTypeLabel(assigneesType)}</p>
                             {completed ? (
                                 <p className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
-                                    Approved by {completedBy}
+                                    Approved by {workflowAssignees.find((assignee) => assignee.id === completedBy)?.name || "Unknown"}
                                 </p>
                             ) : !completed && currentStep ? (
-                                <p className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
-                                    In progress...
-                                </p>
+                                <div className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
+                                        In Progress... Assignees:
+                                    <div className="flex flex-row flex-wrap gap-3 items-center">
+                                        {assigneesUsers.map(user => (
+                                            <span key={user.id}>
+                                                <UserWithProfilePic
+                                                    prefix={getUserTypeLabelShort(user.type)}
+                                                    name={user.name}
+                                                    profileImage={user.profilePicture}
+                                                />
+                                            </span>
+                                        ))}
+                                    </div>
+                                </div>
                             ) : (
                                 <p className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
                                     Waiting for previous steps...
diff --git a/src/demo/approval_workflows.json b/src/demo/approval_workflows.json
index 226167e9..47592b7f 100644
--- a/src/demo/approval_workflows.json
+++ b/src/demo/approval_workflows.json
@@ -7,64 +7,61 @@
             "reading",
             "writing"
         ],
+        "requester": "ffdIipRyXTRmm10Sq2eg7P97rLB2",
+        "startDate": 1737712243906,
         "status": "pending",
         "steps": [
             {
                 "stepType": "form-intake",
                 "stepNumber": 1,
                 "completed": true,
-                "completedBy": "Prof. X",
+                "completedBy": "231c84b2-a65a-49a9-803c-c664d84b13e0",
                 "assignees": [
-                    "Prof. X",
-                    "Prof. Y",
-                    "Prof. Z"
-                ],
-                "assigneesType": "teacher"
+                    "fd5fce42-4bcc-4150-a143-b484e750b265",
+                    "231c84b2-a65a-49a9-803c-c664d84b13e0",
+                    "c5fc1514-1a94-4f8c-a046-a62099097a50"
+                ]
             },
             {
                 "stepType": "approval-by",
                 "stepNumber": 2,
                 "completed": true,
-                "completedBy": "Prof. Y",
+                "completedBy": "c5fc1514-1a94-4f8c-a046-a62099097a50",
                 "assignees": [
-                    "Prof. X",
-                    "Prof. Y",
-                    "Prof. Z"
-                ],
-                "assigneesType": "teacher"
+                    "fd5fce42-4bcc-4150-a143-b484e750b265",
+                    "231c84b2-a65a-49a9-803c-c664d84b13e0",
+                    "c5fc1514-1a94-4f8c-a046-a62099097a50"
+                ]
             },
             {
                 "stepType": "approval-by",
                 "stepNumber": 3,
                 "completed": false,
                 "assignees": [
-                    "Prof. X",
-                    "Prof. Y",
-                    "Prof. Z"
-                ],
-                "assigneesType": "teacher"
+                    "fd5fce42-4bcc-4150-a143-b484e750b265",
+                    "231c84b2-a65a-49a9-803c-c664d84b13e0",
+                    "c5fc1514-1a94-4f8c-a046-a62099097a50"
+                ]
             },
             {
                 "stepType": "approval-by",
                 "stepNumber": 4,
                 "completed": false,
                 "assignees": [
-                    "Prof. X",
-                    "Prof. Y",
-                    "Prof. Z"
-                ],
-                "assigneesType": "teacher"
+                    "fd5fce42-4bcc-4150-a143-b484e750b265",
+                    "231c84b2-a65a-49a9-803c-c664d84b13e0",
+                    "c5fc1514-1a94-4f8c-a046-a62099097a50"
+                ]
             },
             {
                 "stepType": "approval-by",
                 "stepNumber": 5,
                 "completed": false,
                 "assignees": [
-                    "Dir. X",
-                    "Dir. Y",
-                    "Dir. Z"
-                ],
-                "assigneesType": "corporate"
+                    "fd5fce42-4bcc-4150-a143-b484e750b265",
+                    "231c84b2-a65a-49a9-803c-c664d84b13e0",
+                    "c5fc1514-1a94-4f8c-a046-a62099097a50"
+                ]
             }
         ]
     },
@@ -79,67 +76,64 @@
             "speaking",
             "listening"
         ],
+        "requester": "231c84b2-a65a-49a9-803c-c664d84b13e0",
+        "startDate": 1737712243906,
         "status": "approved",
         "steps": [
             {
                 "stepType": "form-intake",
                 "stepNumber": 1,
                 "completed": true,
-                "completedBy": "Prof. X",
+                "completedBy": "fd5fce42-4bcc-4150-a143-b484e750b265",
                 "assignees": [
-                    "Prof. X",
-                    "Prof. Y",
-                    "Prof. Z"
-                ],
-                "assigneesType": "teacher"
+                    "fd5fce42-4bcc-4150-a143-b484e750b265",
+                    "231c84b2-a65a-49a9-803c-c664d84b13e0",
+                    "c5fc1514-1a94-4f8c-a046-a62099097a50"
+                ]
             },
             {
                 "stepType": "approval-by",
                 "stepNumber": 2,
                 "completed": true,
-                "completedBy": "Prof. Y",
+                "completedBy": "231c84b2-a65a-49a9-803c-c664d84b13e0",
                 "assignees": [
-                    "Prof. X",
-                    "Prof. Y",
-                    "Prof. Z"
-                ],
-                "assigneesType": "teacher"
+                    "fd5fce42-4bcc-4150-a143-b484e750b265",
+                    "231c84b2-a65a-49a9-803c-c664d84b13e0",
+                    "c5fc1514-1a94-4f8c-a046-a62099097a50"
+                ]
             },
             {
                 "stepType": "approval-by",
                 "stepNumber": 3,
                 "completed": true,
-                "completedBy": "Prof. Y",
+                "completedBy": "231c84b2-a65a-49a9-803c-c664d84b13e0",
                 "assignees": [
-                    "Prof. X",
-                    "Prof. Y",
-                    "Prof. Z"
-                ],
-                "assigneesType": "teacher"
+                    "fd5fce42-4bcc-4150-a143-b484e750b265",
+                    "231c84b2-a65a-49a9-803c-c664d84b13e0",
+                    "c5fc1514-1a94-4f8c-a046-a62099097a50"
+                ]
             },
             {
                 "stepType": "approval-by",
                 "stepNumber": 4,
                 "completed": true,
-                "completedBy": "Prof. Y",
+                "completedBy": "231c84b2-a65a-49a9-803c-c664d84b13e0",
                 "assignees": [
-                    "Prof. X",
-                    "Prof. Y",
-                    "Prof. Z"
-                ],
-                "assigneesType": "teacher"
+                    "fd5fce42-4bcc-4150-a143-b484e750b265",
+                    "231c84b2-a65a-49a9-803c-c664d84b13e0",
+                    "c5fc1514-1a94-4f8c-a046-a62099097a50"
+                ]
             },
             {
                 "stepType": "approval-by",
                 "stepNumber": 5,
                 "completed": true,
-                "completedBy": "Prof. Y",
+                "completedBy": "c5fc1514-1a94-4f8c-a046-a62099097a50",
                 "assignees": [
-                    "Dir. X",
-                    "Dir. Y",
-                    "Dir. Z"
-                ],
-                "assigneesType": "corporate"
+                    "fd5fce42-4bcc-4150-a143-b484e750b265",
+                    "231c84b2-a65a-49a9-803c-c664d84b13e0",
+                    "c5fc1514-1a94-4f8c-a046-a62099097a50"
+                ]
             }
         ]
     }
diff --git a/src/interfaces/approval.workflow.ts b/src/interfaces/approval.workflow.ts
index 62458976..07d19850 100644
--- a/src/interfaces/approval.workflow.ts
+++ b/src/interfaces/approval.workflow.ts
@@ -1,11 +1,12 @@
-import {Module} from ".";
-import Option from "./option";
-import { CorporateUser, MasterCorporateUser, TeacherUser, userTypeLabels } from "./user";
+import { Module } from ".";
+import { Type, User, userTypeLabels, userTypeLabelsShort } from "./user";
 
 export interface ApprovalWorkflow {
     id: string,
     name: string,
     entityId: string,
+    requester: User["id"],
+    startDate: number,
     modules: Module[],
     status: ApprovalWorkflowStatus,
     steps: WorkflowStep[],
@@ -17,35 +18,34 @@ export const StepTypeLabel: Record<StepType, string> = {
     "approval-by": "Approval",
 };
 
-type AssigneesType = TeacherUser["type"] | CorporateUser["type"] | MasterCorporateUser["type"];
-
 export interface WorkflowStep {
     key?: number,
     stepType?: StepType,
     stepNumber: number,
     completed?: boolean,
-    completedBy?: string,
-    assignees?: (string | null | undefined)[]; // bit of an hack, but allowing null or undefined values allows us to match one to one the select input components with the assignees array. And since select inputs allow undefined or null values, it is allowed here too, but must validate required input before form submission
-    assigneesType?: AssigneesType,
-    editView?: boolean,
+    completedBy?: User["id"],
+    assignees?: (User["id"] | null | undefined)[]; // bit of an hack, but allowing null or undefined values allows us to match one to one the select input components with the assignees array. And since select inputs allow undefined or null values, it is allowed here too, but must validate required input before form submission
+    assigneesType?: Type,
     firstStep?: boolean,
     currentStep?: boolean,
     finalStep?: boolean,
     selected?: boolean,
-    requestedBy?: string,
-    //requestedBy: TeacherUser | CorporateUser | MasterCorporateUser,
     onDelete?: () => void;
     onClick?: React.MouseEventHandler<HTMLDivElement>
 }
 
-export function getUserTypeLabel(type: AssigneesType | undefined): string {
+export function getUserTypeLabel(type: Type | undefined): string {
     if (type) return userTypeLabels[type];
     return '';
 }
+export function getUserTypeLabelShort(type: Type | undefined): string {
+    if (type) return userTypeLabelsShort[type];
+    return '';
+}
 
 export type ApprovalWorkflowStatus = "approved" | "pending" | "rejected";
 export const ApprovalWorkflowStatusLabel: Record<ApprovalWorkflowStatus, string> = {
 	approved: "Approved",
     pending: "Pending",
     rejected: "Rejected",
-};
\ No newline at end of file
+};
diff --git a/src/interfaces/user.ts b/src/interfaces/user.ts
index e61ceece..e16f7e0d 100644
--- a/src/interfaces/user.ts
+++ b/src/interfaces/user.ts
@@ -180,4 +180,14 @@ export const userTypeLabels: Record<Type, string> = {
 	mastercorporate: "Master Corporate",
 };
 
+export const userTypeLabelsShort: Record<Type, string> = {
+	student: "",
+	teacher: "Prof.",
+	corporate: "Dir.",
+	admin: "Admin",
+	developer: "Dev.",
+	agent: "Agent",
+	mastercorporate: "Dir.",
+};
+
 export type WithUser<T> = T extends { participants: string[] } ? Omit<T, "participants"> & { participants: User[] } : T;
diff --git a/src/pages/approval-workflows/[id].tsx b/src/pages/approval-workflows/[id].tsx
index c05d0f74..0f197be2 100644
--- a/src/pages/approval-workflows/[id].tsx
+++ b/src/pages/approval-workflows/[id].tsx
@@ -1,8 +1,8 @@
 import Layout from "@/components/High/Layout";
 import useUser from "@/hooks/useUser";
-import { ApprovalWorkflow } from "@/interfaces/approval.workflow";
+import { ApprovalWorkflow, getUserTypeLabelShort } from "@/interfaces/approval.workflow";
 import { sessionOptions } from "@/lib/session";
-import { redirect } from "@/utils";
+import { redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
 import { withIronSessionSsr } from "iron-session/next";
@@ -11,7 +11,6 @@ import Link from "next/link";
 import { BsChevronLeft } from "react-icons/bs";
 import { ToastContainer } from "react-toastify";
 
-
 import approvalWorkflowsData from '../../demo/approval_workflows.json'; // to test locally
 
 import RequestedBy from "@/components/ApprovalWorkflows/RequestedBy";
@@ -19,6 +18,9 @@ import StartedOn from "@/components/ApprovalWorkflows/StartedOn";
 import Status from "@/components/ApprovalWorkflows/Status";
 import WorkflowStepComponent from "@/components/ApprovalWorkflows/WorkflowStepComponent";
 import { useState } from "react";
+import useApprovalWorkflows from "@/hooks/useApprovalWorkflows";
+import { User } from "@/interfaces/user";
+import { getSpecificUsers, getUser, getUsers } from "@/utils/users.be";
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => {
     const user = await requestUser(req, res);
@@ -29,19 +31,40 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
 
     const { id } = params as { id: string };
 
-    const workflow = approvalWorkflowsData.find(workflow => workflow.id === id);       // await getApprovalWorkflow(id);
+    // replace later with await getApprovalWorkflow(id). Don't think a hook is needed here;
+
+    const approvalWorkflowsDataAsWorkflows = approvalWorkflowsData as ApprovalWorkflow[];
+    const workflow: ApprovalWorkflow | undefined = approvalWorkflowsDataAsWorkflows.find(workflow => workflow.id === id);
 
     if (!workflow)
         return redirect("/approval-workflows")
 
+    const allAssigneeIds: string[] = [
+        ...new Set(
+            workflow.steps
+                .map(step => step.assignees) 
+                .flat() as string[] // we are sure assignees coming from a db workflow are all valid strings.
+        )
+    ];
+
     return {
-        props: { user, workflow },
+        props: serialize({
+            user,
+            workflow,
+            workflowAssignees: await getSpecificUsers(allAssigneeIds),
+            workflowRequester: await getUser(workflow.requester),
+        }),
     };
 }, sessionOptions);
 
-export default function Home({ workflow }: { workflow: ApprovalWorkflow }) {
-    const { user } = useUser({ redirectTo: "/login" });
+interface Props {
+    user: User,
+    workflow: ApprovalWorkflow,
+    workflowAssignees: User[],
+    workflowRequester: User,
+}
 
+export default function Home({ user, workflow, workflowAssignees, workflowRequester }: Props) {
     const steps = workflow.steps;
 
     const [selectedIndex, setSelectedIndex] = useState(steps.length - 1);
@@ -77,20 +100,22 @@ export default function Home({ workflow }: { workflow: ApprovalWorkflow }) {
                     <section className="flex flex-col gap-6">
                         <div className="flex flex-row gap-6">
                             <RequestedBy
-                                name="Prof. Álvaro Dória"
-                                profileImage="/blue-stock-photo.png"
+                                prefix={getUserTypeLabelShort(workflowRequester.type)}
+                                name={workflowRequester.name}
+                                profileImage="/blue-stock-photo.png" //{workflowRequester.profilePicture}
                             />
                             <StartedOn
-                                date="15/12/2024"
+                                date={workflow.startDate}
                             />
                             <Status
-                                status="pending"
+                                status={workflow.status}
                             />
                         </div>
                     </section>
                     <section className="flex flex-col gap-0">
                         {steps.map((step, index) => (
                             <WorkflowStepComponent
+                                workflowAssignees={workflowAssignees}
                                 key={index}
                                 completed={step.completed}
                                 completedBy={step.completedBy}
@@ -100,8 +125,8 @@ export default function Home({ workflow }: { workflow: ApprovalWorkflow }) {
                                 assigneesType={step.assigneesType}
                                 finalStep={index === steps.length - 1}
                                 currentStep={steps.findIndex(step => !step.completed) === index}
-                                selected={index === selectedIndex} 
-                                onClick={() => handleStepClick(index)} 
+                                selected={index === selectedIndex}
+                                onClick={() => handleStepClick(index)}
                             />
                         ))}
                     </section>
diff --git a/src/pages/approval-workflows/create.tsx b/src/pages/approval-workflows/create.tsx
index 3ce00bd5..a806186d 100644
--- a/src/pages/approval-workflows/create.tsx
+++ b/src/pages/approval-workflows/create.tsx
@@ -95,10 +95,12 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
             name: "",
             entityId: "",
             modules: [],
+            requester: user.id,
+            startDate: Date.now(),
             status: "pending",
             steps: [
-                { key: Date.now(), completed: false, editView: true, stepType: "form-intake", stepNumber: 1, firstStep: true, assignees: [null] },
-                { key: Date.now() + 1, completed: false, editView: true, stepType: "approval-by", stepNumber: 2, finalStep: true, assignees: [null] },
+                { key: Date.now(), completed: false, stepType: "form-intake", stepNumber: 1, firstStep: true, assignees: [null] },
+                { key: Date.now() + 1, completed: false, stepType: "approval-by", stepNumber: 2, finalStep: true, assignees: [null] },
             ],
         };
         setWorkflows((prev) => [...prev, newWorkflow]);
@@ -253,7 +255,7 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
                                             exit={{ opacity: 0, y: -20 }}
                                             transition={{ duration: 0.3 }}
                                         >
-                                            <Tip text="Please fill workflow name and associated entity to start configuring workflow." />
+                                            <Tip text="Please fill in workflow name and associated entity to start configuring workflow." />
                                         </motion.div>
                                     )}
 
diff --git a/src/pages/approval-workflows/index.tsx b/src/pages/approval-workflows/index.tsx
index dce7b489..a06a9b1b 100644
--- a/src/pages/approval-workflows/index.tsx
+++ b/src/pages/approval-workflows/index.tsx
@@ -79,11 +79,10 @@ const STATUS_OPTIONS = [
 
 interface Props {
     user: User,
-    teachers: TeacherUser[],
     userEntitiesWithLabel: Entity[],
 }
 
-export default function ApprovalWorkflows({ user, teachers, userEntitiesWithLabel }: Props) {
+export default function ApprovalWorkflows({ user, userEntitiesWithLabel }: Props) {
 
     const ENTITY_OPTIONS = [
         {

From 1f7639a30ec2b5d5428729f4138c20d0aa1ab635 Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Fri, 24 Jan 2025 17:09:37 +0000
Subject: [PATCH 22/69] - initial selected step - assignees id to name on table
 view

---
 .../ApprovalWorkflows/UserWithProfilePic.tsx  |  2 +-
 .../WorkflowStepComponent.tsx                 | 51 ++++++++------
 src/pages/approval-workflows/[id].tsx         | 15 +++--
 src/pages/approval-workflows/create.tsx       | 12 +++-
 src/pages/approval-workflows/index.tsx        | 66 +++++++++++++------
 5 files changed, 97 insertions(+), 49 deletions(-)

diff --git a/src/components/ApprovalWorkflows/UserWithProfilePic.tsx b/src/components/ApprovalWorkflows/UserWithProfilePic.tsx
index 63ff9434..4254bfd9 100644
--- a/src/components/ApprovalWorkflows/UserWithProfilePic.tsx
+++ b/src/components/ApprovalWorkflows/UserWithProfilePic.tsx
@@ -9,7 +9,7 @@ interface Props {
 export default function UserWithProfilePic({ prefix, name, profileImage }: Props) {
     return (
         <div className="flex items-center space-x-2">
-            <p className="text-xs font-medium text-gray-800">{prefix} {name}</p>
+            <p className="text-xs font-medium">{prefix} {name}</p>
             <Image
                 src={profileImage}
                 alt={name}
diff --git a/src/components/ApprovalWorkflows/WorkflowStepComponent.tsx b/src/components/ApprovalWorkflows/WorkflowStepComponent.tsx
index 266238bd..54a74a3d 100644
--- a/src/components/ApprovalWorkflows/WorkflowStepComponent.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowStepComponent.tsx
@@ -23,8 +23,6 @@ export default function WorkflowStepComponent({
     assigneesType,
     onClick,
 }: Props) {
-    console.log(workflowAssignees);
-    console.log(completedBy)
 
     const completedByUser = workflowAssignees.find((assignee) => assignee.id === completedBy);
     const assigneesUsers = workflowAssignees.filter(user => assignees!.includes(user.id));
@@ -59,31 +57,46 @@ export default function WorkflowStepComponent({
                     <>
                         <p className="text-sm font-medium text-gray-800">Form: Intake</p>
                         {completed && completedBy && (
-                            <p className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
-                                Completed by {getUserTypeLabelShort(completedByUser?.type)} {completedByUser?.name}
-                            </p>
+                            <div className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
+                                <UserWithProfilePic
+                                    prefix={`Completed by: ${getUserTypeLabelShort(completedByUser!.type)}`}
+                                    name={completedByUser!.name}
+                                    profileImage={completedByUser!.profilePicture}
+                                />
+                            </div>
                         )}
                         {!completed && completedBy && (
-                            <>
-                                {assigneesUsers.map(user => (
-                                    <p key={user.id} className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
-                                        {getUserTypeLabelShort(user.type)} {user.name}
-                                    </p>
-                                ))}
-                            </>
+                            <div className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
+                                In Progress... Assignees:
+                                <div className="flex flex-row flex-wrap gap-3 items-center">
+                                    {assigneesUsers.map(user => (
+                                        <span key={user.id}>
+                                            <UserWithProfilePic
+                                                prefix={getUserTypeLabelShort(user.type)}
+                                                name={user.name}
+                                                profileImage={user.profilePicture}
+                                            />
+                                        </span>
+                                    ))}
+                                </div>
+                            </div>
                         )}
                     </>
                 ) : (
                     stepType === "approval-by" && (
                         <>
                             <p className="text-sm font-medium text-gray-800">Approval: {getUserTypeLabel(assigneesType)}</p>
-                            {completed ? (
-                                <p className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
-                                    Approved by {workflowAssignees.find((assignee) => assignee.id === completedBy)?.name || "Unknown"}
-                                </p>
+                            {completed && completedBy ? (
+                                <div className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
+                                    <UserWithProfilePic
+                                        prefix={`Approved by: ${getUserTypeLabelShort(completedByUser!.type)}`}
+                                        name={completedByUser!.name}
+                                        profileImage={completedByUser!.profilePicture}
+                                    />
+                                </div>
                             ) : !completed && currentStep ? (
                                 <div className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
-                                        In Progress... Assignees:
+                                    In Progress... Assignees:
                                     <div className="flex flex-row flex-wrap gap-3 items-center">
                                         {assigneesUsers.map(user => (
                                             <span key={user.id}>
@@ -97,9 +110,9 @@ export default function WorkflowStepComponent({
                                     </div>
                                 </div>
                             ) : (
-                                <p className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
+                                <div className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
                                     Waiting for previous steps...
-                                </p>
+                                </div>
                             )}
                         </>
                     )
diff --git a/src/pages/approval-workflows/[id].tsx b/src/pages/approval-workflows/[id].tsx
index 0f197be2..32117735 100644
--- a/src/pages/approval-workflows/[id].tsx
+++ b/src/pages/approval-workflows/[id].tsx
@@ -1,5 +1,4 @@
 import Layout from "@/components/High/Layout";
-import useUser from "@/hooks/useUser";
 import { ApprovalWorkflow, getUserTypeLabelShort } from "@/interfaces/approval.workflow";
 import { sessionOptions } from "@/lib/session";
 import { redirect, serialize } from "@/utils";
@@ -17,10 +16,9 @@ import RequestedBy from "@/components/ApprovalWorkflows/RequestedBy";
 import StartedOn from "@/components/ApprovalWorkflows/StartedOn";
 import Status from "@/components/ApprovalWorkflows/Status";
 import WorkflowStepComponent from "@/components/ApprovalWorkflows/WorkflowStepComponent";
-import { useState } from "react";
-import useApprovalWorkflows from "@/hooks/useApprovalWorkflows";
 import { User } from "@/interfaces/user";
-import { getSpecificUsers, getUser, getUsers } from "@/utils/users.be";
+import { getSpecificUsers, getUser } from "@/utils/users.be";
+import { useState } from "react";
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => {
     const user = await requestUser(req, res);
@@ -32,7 +30,6 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
     const { id } = params as { id: string };
 
     // replace later with await getApprovalWorkflow(id). Don't think a hook is needed here;
-
     const approvalWorkflowsDataAsWorkflows = approvalWorkflowsData as ApprovalWorkflow[];
     const workflow: ApprovalWorkflow | undefined = approvalWorkflowsDataAsWorkflows.find(workflow => workflow.id === id);
 
@@ -67,7 +64,11 @@ interface Props {
 export default function Home({ user, workflow, workflowAssignees, workflowRequester }: Props) {
     const steps = workflow.steps;
 
-    const [selectedIndex, setSelectedIndex] = useState(steps.length - 1);
+    let currentStep = steps.findIndex(step => !step.completed);
+    if (currentStep === -1) 
+        currentStep = steps.length - 1;
+
+    const [selectedIndex, setSelectedIndex] = useState(currentStep);
 
     const handleStepClick = (index: number) => {
         setSelectedIndex(index);
@@ -124,7 +125,7 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
                                 assignees={step.assignees}
                                 assigneesType={step.assigneesType}
                                 finalStep={index === steps.length - 1}
-                                currentStep={steps.findIndex(step => !step.completed) === index}
+                                currentStep={currentStep === index}
                                 selected={index === selectedIndex}
                                 onClick={() => handleStepClick(index)}
                             />
diff --git a/src/pages/approval-workflows/create.tsx b/src/pages/approval-workflows/create.tsx
index a806186d..6c355b51 100644
--- a/src/pages/approval-workflows/create.tsx
+++ b/src/pages/approval-workflows/create.tsx
@@ -104,7 +104,7 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
             ],
         };
         setWorkflows((prev) => [...prev, newWorkflow]);
-        setSelectedWorkflowId(newId);
+        handleSelectWorkflow(newId);
     };
 
     const onWorkflowChange = (updatedWorkflow: ApprovalWorkflow) => {
@@ -113,8 +113,14 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
         );
     }
 
-    const handleSelectWorkflow = (id: string) => {
+    const handleSelectWorkflow = (id: string | undefined) => {
         setSelectedWorkflowId(id);
+        const selectedWorkflow = workflows.find(wf => wf.id === id);
+        if (selectedWorkflow) {
+            setEntityId(selectedWorkflow.entityId || null);
+        } else {
+            setEntityId(null);
+        }
     };
 
     const handleDeleteWorkflow = (id: string) => {
@@ -125,7 +131,7 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
         setWorkflows(updatedWorkflows);
 
         if (selectedWorkflowId === id) {
-            setSelectedWorkflowId(updatedWorkflows.find(wf => wf.id)?.id);
+            handleSelectWorkflow(updatedWorkflows.find(wf => wf.id)?.id);
         }
     };
 
diff --git a/src/pages/approval-workflows/index.tsx b/src/pages/approval-workflows/index.tsx
index a06a9b1b..ef09c959 100644
--- a/src/pages/approval-workflows/index.tsx
+++ b/src/pages/approval-workflows/index.tsx
@@ -1,17 +1,16 @@
 import Layout from "@/components/High/Layout";
 import Button from "@/components/Low/Button";
 import Select from "@/components/Low/Select";
-import useApprovalWorkflows from "@/hooks/useApprovalWorkflows";
 import { Module, ModuleTypeLabels } from "@/interfaces";
 import { ApprovalWorkflow, ApprovalWorkflowStatus, ApprovalWorkflowStatusLabel, StepTypeLabel } from "@/interfaces/approval.workflow";
 import { Entity, EntityWithRoles } from "@/interfaces/entity";
-import { TeacherUser, User } from "@/interfaces/user";
+import { User } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
 import { redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
 import { getEntities } from "@/utils/entities.be";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
-import { getUsers } from "@/utils/users.be";
+import { getSpecificUsers } from "@/utils/users.be";
 import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
 import axios from "axios";
 import clsx from "clsx";
@@ -24,6 +23,8 @@ import { FaRegEdit } from "react-icons/fa";
 import { IoIosAddCircleOutline } from "react-icons/io";
 import { toast, ToastContainer } from "react-toastify";
 
+import approvalWorkflowsData from '../../demo/approval_workflows.json'; // to test locally
+
 const columnHelper = createColumnHelper<ApprovalWorkflow>();
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
@@ -37,9 +38,25 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
     const entities = await getEntitiesWithRoles(isAdmin(user) ? undefined : entityIDS);
     const allowedEntities = findAllowedEntities(user, entities, "view_approval_workflows"); */
 
+
+    // replace later with await getApprovalWorkflow(id). Don't think a hook is needed here;
+    const workflows = approvalWorkflowsData as ApprovalWorkflow[];
+
+    const allAssigneeIds: string[] = [
+        ...new Set(
+            workflows
+                .map(workflow => workflow.steps
+                    .map(step => step.assignees)
+                    .flat() as string[] // we are sure assignees coming from a db workflow are all valid strings.
+                ).flat() as string[]
+        )
+    ];
+
     return {
         props: serialize({
             user,
+            workflows,
+            workflowsAssignees: await getSpecificUsers(allAssigneeIds),
             userEntitiesWithLabel: await getEntities(user.entities.map(entity => entity.id)),
         }),
     };
@@ -79,10 +96,12 @@ const STATUS_OPTIONS = [
 
 interface Props {
     user: User,
+    workflows: ApprovalWorkflow[],
+    workflowsAssignees: User[],
     userEntitiesWithLabel: Entity[],
 }
 
-export default function ApprovalWorkflows({ user, userEntitiesWithLabel }: Props) {
+export default function ApprovalWorkflows({ user, workflows, workflowsAssignees, userEntitiesWithLabel }: Props) {
 
     const ENTITY_OPTIONS = [
         {
@@ -100,13 +119,11 @@ export default function ApprovalWorkflows({ user, userEntitiesWithLabel }: Props
             .sort((a, b) => a.label.localeCompare(b.label)),
     ];
 
-    const [filteredApprovalWorkflows, setFilteredApprovalWorkflows] = useState<ApprovalWorkflow[]>([]);
+    const [filteredWorkflows, setFilteredWorkflows] = useState<ApprovalWorkflow[]>([]);
 
     const [statusFilter, setStatusFilter] = useState<CustomStatus>("all");
     const [entityFilter, setEntityFilter] = useState<CustomEntity>("all");
 
-    const { approvalWorkflows/* , reload */ } = useApprovalWorkflows();
-
     useEffect(() => {
         const filters = [];
         if (statusFilter) {
@@ -118,9 +135,9 @@ export default function ApprovalWorkflows({ user, userEntitiesWithLabel }: Props
             if (filter) filters.push(filter);
         }
 
-        setFilteredApprovalWorkflows([...filters.reduce((d, f) => d.filter(f), approvalWorkflows)]);
+        setFilteredWorkflows([...filters.reduce((d, f) => d.filter(f), workflows)]);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [approvalWorkflows, statusFilter, entityFilter]);
+    }, [workflows, statusFilter, entityFilter]);
 
     const deleteApprovalWorkflow = (id: string, name: string) => {
         if (!confirm(`Are you sure you want to delete this Approval Workflow?`)) return;
@@ -193,21 +210,25 @@ export default function ApprovalWorkflows({ user, userEntitiesWithLabel }: Props
             ),
         }),
         columnHelper.accessor("steps", {
-            id: "currentApprovers",
-            header: "CURRENT APPROVERS",
+            id: "currentAssignees",
+            header: "CURRENT ASSIGNEES",
             cell: (info) => {
                 const steps = info.row.original.steps;
                 const currentStep = steps.find((step) => !step.completed);
-                const approvers = currentStep?.assignees || [];
+
+                const assignees = currentStep?.assignees!.map((assigneeId) => {
+                    const assignee = workflowsAssignees.find((user) => user.id === assigneeId);
+                    return assignee?.name || "Unknown Assignee";
+                });
 
                 return (
                     <div className="flex flex-wrap gap-2">
-                        {approvers.map((approver: string | null | undefined, index: number) => (
+                        {assignees?.map((assigneeName: string, index: number) => (
                             <span
                                 key={index}
                                 className="inline-block rounded-full px-3 py-1 text-sm font-medium bg-gray-100 border border-gray-300 text-gray-900"
                             >
-                                {approver}
+                                {assigneeName}
                             </span>
                         ))}
                     </div>
@@ -236,10 +257,17 @@ export default function ApprovalWorkflows({ user, userEntitiesWithLabel }: Props
             cell: ({ row }: { row: { original: ApprovalWorkflow } }) => {
                 return (
                     <div className="flex gap-4">
-                        <Link data-tip="Edit" href={`/approval-workflows/${row.original.id}`} className="cursor-pointer tooltip">
+                        <Link onClick={(e) => e.stopPropagation()} data-tip="Edit" href={`/approval-workflows/${row.original.id}/edit`} className="cursor-pointer tooltip">
                             <FaRegEdit className="hover:text-mti-purple-light transition ease-in-out duration-300" />
                         </Link>
-                        <button data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deleteApprovalWorkflow(row.original.id, row.original.name)}>
+                        <button
+                            data-tip="Delete"
+                            className="cursor-pointer tooltip"
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                deleteApprovalWorkflow(row.original.id, row.original.name);
+                            }}
+                        >
                             <BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
                         </button>
                     </div>
@@ -249,7 +277,7 @@ export default function ApprovalWorkflows({ user, userEntitiesWithLabel }: Props
     ];
 
     const table = useReactTable({
-        data: filteredApprovalWorkflows,
+        data: filteredWorkflows,
         columns: columns,
         getCoreRowModel: getCoreRowModel(),
     });
@@ -315,7 +343,7 @@ export default function ApprovalWorkflows({ user, userEntitiesWithLabel }: Props
                                 {table.getHeaderGroups().map((headerGroup) => (
                                     <tr key={headerGroup.id}>
                                         {headerGroup.headers.map((header) => (
-                                            <th key={header.id} className="px-2 py-3 text-left text-purple-900">
+                                            <th key={header.id} className="px-3 py-2 text-left text-purple-900">
                                                 {header.isPlaceholder
                                                     ? null
                                                     : flexRender(
@@ -338,7 +366,7 @@ export default function ApprovalWorkflows({ user, userEntitiesWithLabel }: Props
                                         {row.getVisibleCells().map((cell, cellIndex) => {
                                             const lastCellIndex = row.getVisibleCells().length - 1;
 
-                                            let cellClasses = "px-4 py-2 bg-purple-50 border-y-2 border-purple-300";
+                                            let cellClasses = "px-3 py-2 bg-purple-50 border-y-2 border-purple-300";
                                             if (cellIndex === 0) {
                                                 cellClasses += " border-l-2 rounded-l-2xl";
                                             }

From f71a7182dde9639c53cc13d1c17ba6549ce2db3f Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Sat, 25 Jan 2025 03:44:50 +0000
Subject: [PATCH 23/69] - Refactor of workflow and steps types to differentiate
 between editView and normalView. - Added side panel with steps details

---
 .../ApprovalWorkflows/StartedOn.tsx           |   3 +-
 .../WorkflowEditableStepComponent.tsx         |   8 +-
 .../ApprovalWorkflows/WorkflowForm.tsx        |  19 +--
 .../WorkflowStepComponent.tsx                 |  11 +-
 .../ApprovalWorkflows/WorkflowStepNumber.tsx  |   4 +-
 src/demo/approval_workflows.json              |  37 +++--
 src/interfaces/approval.workflow.ts           |  34 +++-
 src/pages/approval-workflows/[id].tsx         | 153 ++++++++++++++----
 src/pages/approval-workflows/create.tsx       |  37 +++--
 src/pages/approval-workflows/index.tsx        |  19 +--
 10 files changed, 225 insertions(+), 100 deletions(-)

diff --git a/src/components/ApprovalWorkflows/StartedOn.tsx b/src/components/ApprovalWorkflows/StartedOn.tsx
index 7babf998..2b1fde6d 100644
--- a/src/components/ApprovalWorkflows/StartedOn.tsx
+++ b/src/components/ApprovalWorkflows/StartedOn.tsx
@@ -28,10 +28,9 @@ export default function StartedOn({ date }: Props) {
             <div>
                 <p className="pb-1 text-sm font-medium text-gray-800">Started on</p>
                 <div className="flex items-center">
-                    {/* Display the formatted date and add a title attribute for hover */}
                     <p
                         className="text-xs font-medium text-gray-800"
-                        title={fullDateTime} // Shows full date and time on hover
+                        title={fullDateTime}
                     >
                         {yearMonthDay}
                     </p>
diff --git a/src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx b/src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx
index 2a44303b..ec53d821 100644
--- a/src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx
@@ -1,15 +1,15 @@
-import { WorkflowStep } from "@/interfaces/approval.workflow";
+import { EditableWorkflowStep } from "@/interfaces/approval.workflow";
 import Option from "@/interfaces/option";
 import { CorporateUser, TeacherUser } from "@/interfaces/user";
+import Image from "next/image";
 import { useEffect, useMemo, useState } from "react";
 import { AiOutlineUserAdd } from "react-icons/ai";
 import { BsTrash } from "react-icons/bs";
 import { LuGripHorizontal } from "react-icons/lu";
 import WorkflowStepNumber from "./WorkflowStepNumber";
 import WorkflowStepSelects from "./WorkflowStepSelects";
-import Image from "next/image";
 
-interface Props extends WorkflowStep {
+interface Props extends Pick<EditableWorkflowStep, 'stepNumber' | 'assignees' | 'finalStep' | 'onDelete'> {
     entityTeachers: TeacherUser[];
     entityCorporates: CorporateUser[];
     onSelectChange: (numberOfSelects: number, index: number, value: Option | null) => void;
@@ -102,7 +102,7 @@ export default function WorkflowEditableStepComponent({
     return (
         <div className="flex w-full">
             <div className="flex flex-col items-center">
-                <WorkflowStepNumber stepNumber={stepNumber} />
+                <WorkflowStepNumber stepNumber={stepNumber} completed={false} selected={false}  />
 
                 {/* Vertical Bar connecting steps */}
                 {!finalStep && (
diff --git a/src/components/ApprovalWorkflows/WorkflowForm.tsx b/src/components/ApprovalWorkflows/WorkflowForm.tsx
index dbaa05f6..eb393d4d 100644
--- a/src/components/ApprovalWorkflows/WorkflowForm.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowForm.tsx
@@ -1,17 +1,17 @@
-import { ApprovalWorkflow, WorkflowStep } from "@/interfaces/approval.workflow";
+import { EditableApprovalWorkflow, EditableWorkflowStep } from "@/interfaces/approval.workflow";
 import Option from "@/interfaces/option";
 import { CorporateUser, TeacherUser } from "@/interfaces/user";
-import { AnimatePresence, AnimateSharedLayout, Reorder, motion } from "framer-motion";
+import { AnimatePresence, Reorder, motion } from "framer-motion";
 import { useState } from "react";
 import { FaRegCheckCircle } from "react-icons/fa";
 import { IoIosAddCircleOutline } from "react-icons/io";
 import Button from "../Low/Button";
-import WorkflowEditableStepComponent from "./WorkflowEditableStepComponent";
 import Tip from "./Tip";
+import WorkflowEditableStepComponent from "./WorkflowEditableStepComponent";
 
 interface Props {
-    workflow: ApprovalWorkflow;
-    onWorkflowChange: (workflow: ApprovalWorkflow) => void;
+    workflow: EditableApprovalWorkflow;
+    onWorkflowChange: (workflow: EditableApprovalWorkflow) => void;
     entityTeachers: TeacherUser[];
     entityCorporates: CorporateUser[];
 }
@@ -20,7 +20,7 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityTeacher
     const [stepCounter, setStepCounter] = useState<number>(3); // to guarantee unique keys used for animations
     const lastStep = workflow.steps[workflow.steps.length - 1];
 
-    const renumberSteps = (steps: WorkflowStep[]): WorkflowStep[] => {
+    const renumberSteps = (steps: EditableWorkflowStep[]): EditableWorkflowStep[] => {
         return steps.map((step, index) => ({
             ...step,
             stepNumber: index + 1,
@@ -28,12 +28,13 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityTeacher
     };
 
     const addStep = () => {
-        const newStep: WorkflowStep = {
+        const newStep: EditableWorkflowStep = {
             key: stepCounter,
             stepType: "approval-by",
             stepNumber: workflow.steps.length,
-            completed: false,
             assignees: [null],
+            firstStep: false,
+            finalStep: false,
         };
         setStepCounter((count) => count + 1);
 
@@ -73,7 +74,7 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityTeacher
         onWorkflowChange({ ...workflow, steps: updatedSteps });
     };
 
-    const handleReorder = (newOrder: WorkflowStep[]) => {
+    const handleReorder = (newOrder: EditableWorkflowStep[]) => {
         const firstIndex = newOrder.findIndex((s) => s.firstStep);
         if (firstIndex !== -1 && firstIndex !== 0) {
             const [first] = newOrder.splice(firstIndex, 1);
diff --git a/src/components/ApprovalWorkflows/WorkflowStepComponent.tsx b/src/components/ApprovalWorkflows/WorkflowStepComponent.tsx
index 54a74a3d..a3387201 100644
--- a/src/components/ApprovalWorkflows/WorkflowStepComponent.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowStepComponent.tsx
@@ -16,21 +16,20 @@ export default function WorkflowStepComponent({
     stepNumber,
     completed,
     completedBy,
+    assignees,
     finalStep,
     currentStep,
     selected = false,
-    assignees,
-    assigneesType,
     onClick,
 }: Props) {
 
     const completedByUser = workflowAssignees.find((assignee) => assignee.id === completedBy);
-    const assigneesUsers = workflowAssignees.filter(user => assignees!.includes(user.id));
+    const assigneesUsers = workflowAssignees.filter(user => assignees.includes(user.id));
 
     return (
         <div
             onClick={onClick}
-            className={clsx("flex flex-row gap-5 w-[700px] p-6 my-4 rounded-2xl transition ease-in-out duration-300 disabled:cursor-not-allowed cursor-pointer", {
+            className={clsx("flex flex-row gap-5 w-[600px] p-6 my-4 rounded-2xl transition ease-in-out duration-300 disabled:cursor-not-allowed cursor-pointer", {
                 "bg-mti-purple-ultralight": selected,
             })}
         >
@@ -85,9 +84,9 @@ export default function WorkflowStepComponent({
                 ) : (
                     stepType === "approval-by" && (
                         <>
-                            <p className="text-sm font-medium text-gray-800">Approval: {getUserTypeLabel(assigneesType)}</p>
                             {completed && completedBy ? (
                                 <div className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
+                                    <p className="text-sm font-medium text-gray-800">Approval: {getUserTypeLabel(completedByUser!.type)} Approval</p>
                                     <UserWithProfilePic
                                         prefix={`Approved by: ${getUserTypeLabelShort(completedByUser!.type)}`}
                                         name={completedByUser!.name}
@@ -96,6 +95,7 @@ export default function WorkflowStepComponent({
                                 </div>
                             ) : !completed && currentStep ? (
                                 <div className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
+                                    <p className="text-sm font-medium text-gray-800">Approval: </p>
                                     In Progress... Assignees:
                                     <div className="flex flex-row flex-wrap gap-3 items-center">
                                         {assigneesUsers.map(user => (
@@ -111,6 +111,7 @@ export default function WorkflowStepComponent({
                                 </div>
                             ) : (
                                 <div className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
+                                    <p className="text-sm font-medium text-gray-800">Approval: </p>
                                     Waiting for previous steps...
                                 </div>
                             )}
diff --git a/src/components/ApprovalWorkflows/WorkflowStepNumber.tsx b/src/components/ApprovalWorkflows/WorkflowStepNumber.tsx
index 86b0d46d..a1d6a900 100644
--- a/src/components/ApprovalWorkflows/WorkflowStepNumber.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowStepNumber.tsx
@@ -2,7 +2,9 @@ import { WorkflowStep } from "@/interfaces/approval.workflow";
 import clsx from "clsx";
 import { IoCheckmarkDoneSharp, IoCheckmarkSharp } from "react-icons/io5";
 
-export default function WorkflowStepNumber({ stepNumber, selected = false, completed, finalStep }: WorkflowStep) {
+type Props = Pick<WorkflowStep, 'stepNumber' | 'completed' | 'finalStep' | 'selected'>
+
+export default function WorkflowStepNumber({ stepNumber, selected = false, completed, finalStep }: Props) {
     return (
         <div
             className={clsx(
diff --git a/src/demo/approval_workflows.json b/src/demo/approval_workflows.json
index 47592b7f..a27cf88d 100644
--- a/src/demo/approval_workflows.json
+++ b/src/demo/approval_workflows.json
@@ -16,22 +16,26 @@
                 "stepNumber": 1,
                 "completed": true,
                 "completedBy": "231c84b2-a65a-49a9-803c-c664d84b13e0",
+                "completedDate": 1737712243906,
                 "assignees": [
                     "fd5fce42-4bcc-4150-a143-b484e750b265",
                     "231c84b2-a65a-49a9-803c-c664d84b13e0",
                     "c5fc1514-1a94-4f8c-a046-a62099097a50"
-                ]
+                ],
+                "comments": "This is a random comment\nThis is a random comment\nThis is a random comment\nThis is a random comment\nThis is a random comment\n"
             },
             {
                 "stepType": "approval-by",
                 "stepNumber": 2,
                 "completed": true,
                 "completedBy": "c5fc1514-1a94-4f8c-a046-a62099097a50",
+                "completedDate": 1737712243906,
                 "assignees": [
                     "fd5fce42-4bcc-4150-a143-b484e750b265",
                     "231c84b2-a65a-49a9-803c-c664d84b13e0",
                     "c5fc1514-1a94-4f8c-a046-a62099097a50"
-                ]
+                ],
+                "comments": "This is a random comment"
             },
             {
                 "stepType": "approval-by",
@@ -41,7 +45,8 @@
                     "fd5fce42-4bcc-4150-a143-b484e750b265",
                     "231c84b2-a65a-49a9-803c-c664d84b13e0",
                     "c5fc1514-1a94-4f8c-a046-a62099097a50"
-                ]
+                ],
+                "comments": "This is a random comment"
             },
             {
                 "stepType": "approval-by",
@@ -51,7 +56,8 @@
                     "fd5fce42-4bcc-4150-a143-b484e750b265",
                     "231c84b2-a65a-49a9-803c-c664d84b13e0",
                     "c5fc1514-1a94-4f8c-a046-a62099097a50"
-                ]
+                ],
+                "comments": "This is a random comment"
             },
             {
                 "stepType": "approval-by",
@@ -61,7 +67,8 @@
                     "fd5fce42-4bcc-4150-a143-b484e750b265",
                     "231c84b2-a65a-49a9-803c-c664d84b13e0",
                     "c5fc1514-1a94-4f8c-a046-a62099097a50"
-                ]
+                ],
+                "comments": "This is a random comment"
             }
         ]
     },
@@ -85,55 +92,65 @@
                 "stepNumber": 1,
                 "completed": true,
                 "completedBy": "fd5fce42-4bcc-4150-a143-b484e750b265",
+                "completedDate": 1737712243906,
                 "assignees": [
                     "fd5fce42-4bcc-4150-a143-b484e750b265",
                     "231c84b2-a65a-49a9-803c-c664d84b13e0",
                     "c5fc1514-1a94-4f8c-a046-a62099097a50"
-                ]
+                ],
+                "comments": "This is a random comment"
             },
             {
                 "stepType": "approval-by",
                 "stepNumber": 2,
                 "completed": true,
                 "completedBy": "231c84b2-a65a-49a9-803c-c664d84b13e0",
+                "completedDate": 1737712243906,
                 "assignees": [
                     "fd5fce42-4bcc-4150-a143-b484e750b265",
                     "231c84b2-a65a-49a9-803c-c664d84b13e0",
                     "c5fc1514-1a94-4f8c-a046-a62099097a50"
-                ]
+                ],
+                "comments": "This is a random comment"
             },
             {
                 "stepType": "approval-by",
                 "stepNumber": 3,
                 "completed": true,
                 "completedBy": "231c84b2-a65a-49a9-803c-c664d84b13e0",
+                "completedDate": 1737712243906,
                 "assignees": [
                     "fd5fce42-4bcc-4150-a143-b484e750b265",
                     "231c84b2-a65a-49a9-803c-c664d84b13e0",
                     "c5fc1514-1a94-4f8c-a046-a62099097a50"
-                ]
+                ],
+                "comments": "This is a random comment"
             },
             {
                 "stepType": "approval-by",
                 "stepNumber": 4,
                 "completed": true,
                 "completedBy": "231c84b2-a65a-49a9-803c-c664d84b13e0",
+                "completedDate": 1737712243906,
                 "assignees": [
                     "fd5fce42-4bcc-4150-a143-b484e750b265",
                     "231c84b2-a65a-49a9-803c-c664d84b13e0",
                     "c5fc1514-1a94-4f8c-a046-a62099097a50"
-                ]
+                ],
+                "comments": "This is a random comment"
             },
             {
                 "stepType": "approval-by",
                 "stepNumber": 5,
                 "completed": true,
                 "completedBy": "c5fc1514-1a94-4f8c-a046-a62099097a50",
+                "completedDate": 1737712243906,
                 "assignees": [
                     "fd5fce42-4bcc-4150-a143-b484e750b265",
                     "231c84b2-a65a-49a9-803c-c664d84b13e0",
                     "c5fc1514-1a94-4f8c-a046-a62099097a50"
-                ]
+                ],
+                "comments": "This is a random comment"
             }
         ]
     }
diff --git a/src/interfaces/approval.workflow.ts b/src/interfaces/approval.workflow.ts
index 07d19850..65ae5f4c 100644
--- a/src/interfaces/approval.workflow.ts
+++ b/src/interfaces/approval.workflow.ts
@@ -12,6 +12,17 @@ export interface ApprovalWorkflow {
     steps: WorkflowStep[],
 }
 
+export interface EditableApprovalWorkflow {
+    id: string,
+    name: string,
+    entityId: string,
+    requester: User["id"],
+    startDate: number,
+    modules: Module[],
+    status: ApprovalWorkflowStatus,
+    steps: EditableWorkflowStep[],
+}
+
 export type StepType = "form-intake" | "approval-by";
 export const StepTypeLabel: Record<StepType, string> = {
 	"form-intake": "Form Intake",
@@ -19,19 +30,28 @@ export const StepTypeLabel: Record<StepType, string> = {
 };
 
 export interface WorkflowStep {
-    key?: number,
-    stepType?: StepType,
+    stepType: StepType,
     stepNumber: number,
-    completed?: boolean,
+    completed: boolean,
     completedBy?: User["id"],
-    assignees?: (User["id"] | null | undefined)[]; // bit of an hack, but allowing null or undefined values allows us to match one to one the select input components with the assignees array. And since select inputs allow undefined or null values, it is allowed here too, but must validate required input before form submission
-    assigneesType?: Type,
+    completedDate?: number,
+    assignees: (User["id"])[];
     firstStep?: boolean,
     currentStep?: boolean,
     finalStep?: boolean,
-    selected?: boolean,
+    selected: boolean,
+    comments?: string,
+    onClick: React.MouseEventHandler<HTMLDivElement>
+}
+
+export interface EditableWorkflowStep {
+    key: number,
+    stepType: StepType,
+    stepNumber: number,
+    assignees: (User["id"] | null | undefined)[]; // bit of an hack, but allowing null or undefined values allows us to match one to one the select input components with the assignees array. And since select inputs allow undefined or null values, it is allowed here too, but must validate required input before form submission
+    firstStep: boolean,
+    finalStep?: boolean,
     onDelete?: () => void;
-    onClick?: React.MouseEventHandler<HTMLDivElement>
 }
 
 export function getUserTypeLabel(type: Type | undefined): string {
diff --git a/src/pages/approval-workflows/[id].tsx b/src/pages/approval-workflows/[id].tsx
index 32117735..7b8fc7e7 100644
--- a/src/pages/approval-workflows/[id].tsx
+++ b/src/pages/approval-workflows/[id].tsx
@@ -1,25 +1,28 @@
+import RequestedBy from "@/components/ApprovalWorkflows/RequestedBy";
+import StartedOn from "@/components/ApprovalWorkflows/StartedOn";
+import Status from "@/components/ApprovalWorkflows/Status";
+import UserWithProfilePic from "@/components/ApprovalWorkflows/UserWithProfilePic";
+import WorkflowStepComponent from "@/components/ApprovalWorkflows/WorkflowStepComponent";
 import Layout from "@/components/High/Layout";
-import { ApprovalWorkflow, getUserTypeLabelShort } from "@/interfaces/approval.workflow";
+import { ApprovalWorkflow, getUserTypeLabelShort, WorkflowStep } from "@/interfaces/approval.workflow";
+import { User } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
 import { redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
+import { getSpecificUsers, getUser } from "@/utils/users.be";
 import { withIronSessionSsr } from "iron-session/next";
 import Head from "next/head";
 import Link from "next/link";
+import { useState } from "react";
 import { BsChevronLeft } from "react-icons/bs";
+import { FaWpforms } from "react-icons/fa6";
+import { MdOutlineDoubleArrow } from "react-icons/md";
+import { RiThumbUpLine } from "react-icons/ri";
 import { ToastContainer } from "react-toastify";
 
 import approvalWorkflowsData from '../../demo/approval_workflows.json'; // to test locally
 
-import RequestedBy from "@/components/ApprovalWorkflows/RequestedBy";
-import StartedOn from "@/components/ApprovalWorkflows/StartedOn";
-import Status from "@/components/ApprovalWorkflows/Status";
-import WorkflowStepComponent from "@/components/ApprovalWorkflows/WorkflowStepComponent";
-import { User } from "@/interfaces/user";
-import { getSpecificUsers, getUser } from "@/utils/users.be";
-import { useState } from "react";
-
 export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => {
     const user = await requestUser(req, res);
     if (!user) return redirect("/login")
@@ -29,7 +32,7 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
 
     const { id } = params as { id: string };
 
-    // replace later with await getApprovalWorkflow(id). Don't think a hook is needed here;
+    // replace later with await getApprovalWorkflow(id).
     const approvalWorkflowsDataAsWorkflows = approvalWorkflowsData as ApprovalWorkflow[];
     const workflow: ApprovalWorkflow | undefined = approvalWorkflowsDataAsWorkflows.find(workflow => workflow.id === id);
 
@@ -39,8 +42,8 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
     const allAssigneeIds: string[] = [
         ...new Set(
             workflow.steps
-                .map(step => step.assignees) 
-                .flat() as string[] // we are sure assignees coming from a db workflow are all valid strings.
+                .map(step => step.assignees)
+                .flat()
         )
     ];
 
@@ -65,13 +68,23 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
     const steps = workflow.steps;
 
     let currentStep = steps.findIndex(step => !step.completed);
-    if (currentStep === -1) 
+    if (currentStep === -1)
         currentStep = steps.length - 1;
 
-    const [selectedIndex, setSelectedIndex] = useState(currentStep);
+    const [selectedStepIndex, setSelectedStepIndex] = useState<number>(currentStep);
+    const [selectedStep, setSelectedStep] = useState<WorkflowStep>(steps[selectedStepIndex]);
+    const [isPanelOpen, setIsPanelOpen] = useState(true);
+    const [comments, setComments] = useState<string>(selectedStep.comments || "");
+
+    const handleStepClick = (index: number, stepInfo: WorkflowStep) => {
+        setSelectedStep(stepInfo);
+        setSelectedStepIndex(index);
+        setComments(stepInfo.comments || "");
+        setIsPanelOpen(true);
+    };
+
+    const saveComments = () => {
 
-    const handleStepClick = (index: number) => {
-        setSelectedIndex(index);
     };
 
     return (
@@ -88,16 +101,16 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
             <ToastContainer />
             {user && (
                 <Layout user={user} className="gap-6">
-                    <section className="flex flex-col gap-0">
-                        <div className="flex items-center gap-2">
-                            <Link
-                                href="/approval-workflows"
-                                className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
-                                <BsChevronLeft />
-                            </Link>
-                            <h1 className="text-2xl font-semibold">{workflow.name}</h1>
-                        </div>
+
+                    <section className="flex items-center gap-2">
+                        <Link
+                            href="/approval-workflows"
+                            className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
+                            <BsChevronLeft />
+                        </Link>
+                        <h1 className="text-2xl font-semibold">{workflow.name}</h1>
                     </section>
+
                     <section className="flex flex-col gap-6">
                         <div className="flex flex-row gap-6">
                             <RequestedBy
@@ -113,6 +126,7 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
                             />
                         </div>
                     </section>
+
                     <section className="flex flex-col gap-0">
                         {steps.map((step, index) => (
                             <WorkflowStepComponent
@@ -123,14 +137,95 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
                                 stepNumber={step.stepNumber}
                                 stepType={step.stepType}
                                 assignees={step.assignees}
-                                assigneesType={step.assigneesType}
                                 finalStep={index === steps.length - 1}
-                                currentStep={currentStep === index}
-                                selected={index === selectedIndex}
-                                onClick={() => handleStepClick(index)}
+                                currentStep={index === currentStep}
+                                selected={index === selectedStepIndex}
+                                onClick={() => handleStepClick(index, step)}
                             />
                         ))}
                     </section>
+
+                    <section className={`absolute inset-y-0 right-0 h-full bg-mti-purple-ultralight bg-opacity-50 shadow-xl shadow-mti-purple transition-all duration-300 overflow-hidden ${isPanelOpen ? 'w-2/5' : 'w-0'}`}>
+                        {isPanelOpen && (
+                            <div className="relative inset-y-0 right-0 h-full p-6">
+                                <div className="flex flex-row gap-2">
+                                    <p className="text-2xl font-medium text-left align-middle">Step {selectedStepIndex + 1}</p>
+                                    <div className="ml-auto flex flex-row">
+                                        <button
+                                            className="min-w-fit max-h-fit text-lg font-medium flex items-center gap-2 text-left"
+                                            onClick={() => setIsPanelOpen(false)}
+                                        >
+                                            Collapse
+                                            <MdOutlineDoubleArrow size={20} />
+                                        </button>
+                                    </div>
+                                </div>
+
+                                <hr className="my-4 h-[4px] bg-mti-purple-ultralight rounded-full w-full" />
+
+                                <div>
+                                    <div className="my-8 flex flex-row gap-4 items-center text-lg font-medium">
+                                        {selectedStep.stepType === "approval-by" ? (
+                                            <>
+                                                <RiThumbUpLine size={30} />
+                                                Approval Step
+                                            </>
+                                        ) : (
+                                            <>
+                                                <FaWpforms size={30} />
+                                                Form Intake Step
+                                            </>
+                                        )
+                                        }
+                                    </div>
+
+                                    {selectedStep.completed ? (
+                                        <div className={"text-base font-medium text-gray-500 my-7"}>
+                                            Approved on {new Date(selectedStep.completedDate!).toLocaleString("en-CA", {
+                                                year: "numeric",
+                                                month: "2-digit",
+                                                day: "2-digit",
+                                                hour: "2-digit",
+                                                minute: "2-digit",
+                                                second: "2-digit",
+                                                hour12: false,
+                                            }).replace(", ", " at ")}
+                                            <p className="my-4 text-sm">No additional actions are required.</p>
+                                        </div>
+                                
+                                    ) : (
+                                        <div className={"text-base font-medium text-gray-500"}>
+                                            One assignee is required to sign off to complete this step:
+                                            <div className="flex flex-col gap-2 mt-3">
+                                                {workflowAssignees.map(user => (
+                                                    <span key={user.id}>
+                                                        <UserWithProfilePic
+                                                            prefix={getUserTypeLabelShort(user.type)}
+                                                            name={user.name}
+                                                            profileImage={user.profilePicture}
+                                                        />
+                                                    </span>
+                                                ))}
+                                            </div>
+                                        </div>
+                                    )}
+
+                                    <hr className="my-4 h-[4px] bg-mti-purple-ultralight rounded-full w-full" />
+
+                                    <textarea
+                                        value={comments}
+                                        onChange={(e) => setComments(e.target.value)}
+                                        placeholder="Input comments here"
+                                        className="w-full h-80 p-2 border-2 rounded-xl focus:border-mti-purple focus:outline-none mt-4"
+                                    />
+                                    <button onClick={saveComments} className="mt-4 px-6 py-2 bg-mti-purple-dark text-white rounded-full">
+                                        Save Comments
+                                    </button>
+
+                                </div>
+                            </div>
+                        )}
+                    </section>
                 </Layout>
             )}
         </>
diff --git a/src/pages/approval-workflows/create.tsx b/src/pages/approval-workflows/create.tsx
index 6c355b51..d42bdfab 100644
--- a/src/pages/approval-workflows/create.tsx
+++ b/src/pages/approval-workflows/create.tsx
@@ -1,28 +1,27 @@
-import Layout from "@/components/High/Layout";
-import { sessionOptions } from "@/lib/session";
-import { redirect, serialize } from "@/utils";
-import { requestUser } from "@/utils/api";
-import { shouldRedirectHome } from "@/utils/navigation.disabled";
-import { withIronSessionSsr } from "iron-session/next";
-import Head from "next/head";
-import Link from "next/link";
-import { BsChevronLeft, BsTrash } from "react-icons/bs";
-import { ToastContainer } from "react-toastify";
-import { v4 as uuidv4 } from 'uuid';
-
 import Tip from "@/components/ApprovalWorkflows/Tip";
 import WorkflowForm from "@/components/ApprovalWorkflows/WorkflowForm";
+import Layout from "@/components/High/Layout";
 import Button from "@/components/Low/Button";
 import Input from "@/components/Low/Input";
 import Select from "@/components/Low/Select";
-import { ApprovalWorkflow } from "@/interfaces/approval.workflow";
+import { EditableApprovalWorkflow } from "@/interfaces/approval.workflow";
 import { Entity } from "@/interfaces/entity";
 import { CorporateUser, TeacherUser, User } from "@/interfaces/user";
+import { sessionOptions } from "@/lib/session";
+import { redirect, serialize } from "@/utils";
+import { requestUser } from "@/utils/api";
 import { getEntities } from "@/utils/entities.be";
+import { shouldRedirectHome } from "@/utils/navigation.disabled";
 import { getEntitiesUsers } from "@/utils/users.be";
 import { LayoutGroup, motion } from "framer-motion";
+import { withIronSessionSsr } from "iron-session/next";
+import Head from "next/head";
+import Link from "next/link";
 import { useEffect, useState } from "react";
+import { BsChevronLeft, BsTrash } from "react-icons/bs";
 import { MdFormatListBulletedAdd } from "react-icons/md";
+import { ToastContainer } from "react-toastify";
+import { v4 as uuidv4 } from 'uuid';
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
     const user = await requestUser(req, res)
@@ -51,7 +50,7 @@ interface Props {
 }
 
 export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers, userEntitiesCorporates }: Props) {
-    const [workflows, setWorkflows] = useState<ApprovalWorkflow[]>([]);
+    const [workflows, setWorkflows] = useState<EditableApprovalWorkflow[]>([]);
     const [selectedWorkflowId, setSelectedWorkflowId] = useState<string | undefined>(undefined);
     const [entityId, setEntityId] = useState<string | null | undefined>(null);
     const [entityTeachers, setEntityTeachers] = useState<TeacherUser[]>([]);
@@ -80,7 +79,7 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
     const ENTITY_OPTIONS = userEntitiesWithLabel.map(entity => ({
         label: entity.label,
         value: entity.id,
-        filter: (x: ApprovalWorkflow) => x.entityId === entity.id,
+        filter: (x: EditableApprovalWorkflow) => x.entityId === entity.id,
     }));
 
     const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
@@ -90,7 +89,7 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
 
     const handleAddNewWorkflow = () => {
         const newId = uuidv4();
-        const newWorkflow: ApprovalWorkflow = {
+        const newWorkflow: EditableApprovalWorkflow = {
             id: newId,
             name: "",
             entityId: "",
@@ -99,15 +98,15 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
             startDate: Date.now(),
             status: "pending",
             steps: [
-                { key: Date.now(), completed: false, stepType: "form-intake", stepNumber: 1, firstStep: true, assignees: [null] },
-                { key: Date.now() + 1, completed: false, stepType: "approval-by", stepNumber: 2, finalStep: true, assignees: [null] },
+                { key: Date.now(), stepType: "form-intake", stepNumber: 1, firstStep: true, finalStep: false, assignees: [null] },
+                { key: Date.now() + 1, stepType: "approval-by", stepNumber: 2, firstStep: false, finalStep: true, assignees: [null] },
             ],
         };
         setWorkflows((prev) => [...prev, newWorkflow]);
         handleSelectWorkflow(newId);
     };
 
-    const onWorkflowChange = (updatedWorkflow: ApprovalWorkflow) => {
+    const onWorkflowChange = (updatedWorkflow: EditableApprovalWorkflow) => {
         setWorkflows(prev =>
             prev.map(wf => (wf.id === updatedWorkflow.id ? updatedWorkflow : wf))
         );
diff --git a/src/pages/approval-workflows/index.tsx b/src/pages/approval-workflows/index.tsx
index ef09c959..d909c3b8 100644
--- a/src/pages/approval-workflows/index.tsx
+++ b/src/pages/approval-workflows/index.tsx
@@ -34,12 +34,7 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
     if (shouldRedirectHome(user) || !["admin", "developer", "teacher", "corporate", "mastercorporate"].includes(user.type))
         return redirect("/")
 
-    /* const entityIDS = mapBy(user.entities, "id");
-    const entities = await getEntitiesWithRoles(isAdmin(user) ? undefined : entityIDS);
-    const allowedEntities = findAllowedEntities(user, entities, "view_approval_workflows"); */
-
-
-    // replace later with await getApprovalWorkflow(id). Don't think a hook is needed here;
+    // replace later with useApprovalWorkflows()
     const workflows = approvalWorkflowsData as ApprovalWorkflow[];
 
     const allAssigneeIds: string[] = [
@@ -47,8 +42,8 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
             workflows
                 .map(workflow => workflow.steps
                     .map(step => step.assignees)
-                    .flat() as string[] // we are sure assignees coming from a db workflow are all valid strings.
-                ).flat() as string[]
+                    .flat()
+                ).flat()
         )
     ];
 
@@ -166,10 +161,6 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
     };
 
     const columns = [
-        /* columnHelper.accessor("id", {
-            header: "ID",
-            cell: (info) => info.getValue(),
-        }), */
         columnHelper.accessor("name", {
             header: "NAME",
             cell: (info) => (
@@ -216,7 +207,7 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
                 const steps = info.row.original.steps;
                 const currentStep = steps.find((step) => !step.completed);
 
-                const assignees = currentStep?.assignees!.map((assigneeId) => {
+                const assignees = currentStep?.assignees.map((assigneeId) => {
                     const assignee = workflowsAssignees.find((user) => user.id === assigneeId);
                     return assignee?.name || "Unknown Assignee";
                 });
@@ -245,7 +236,7 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
                 return (
                     <span className="font-medium">
                         {currentStep
-                            ? `Step ${currentStep.stepNumber}: ${StepTypeLabel[currentStep.stepType!]}`
+                            ? `Step ${currentStep.stepNumber}: ${StepTypeLabel[currentStep.stepType]}`
                             : "Completed"}
                     </span>
                 );

From 2eff08bf86c15835147b7b7de31ed79711a65743 Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Sat, 25 Jan 2025 04:23:28 +0000
Subject: [PATCH 24/69] Add approval by to step details panel and add text size
 prop to UserWithProfilePicture component

---
 .../ApprovalWorkflows/UserWithProfilePic.tsx  |  6 +++--
 src/pages/approval-workflows/[id].tsx         | 25 ++++++++++++++++---
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/components/ApprovalWorkflows/UserWithProfilePic.tsx b/src/components/ApprovalWorkflows/UserWithProfilePic.tsx
index 4254bfd9..34c78adb 100644
--- a/src/components/ApprovalWorkflows/UserWithProfilePic.tsx
+++ b/src/components/ApprovalWorkflows/UserWithProfilePic.tsx
@@ -4,12 +4,14 @@ interface Props {
     prefix: string;
     name: string;
     profileImage: string;
+    textSize?: string;
 }
 
-export default function UserWithProfilePic({ prefix, name, profileImage }: Props) {
+export default function UserWithProfilePic({ prefix, name, profileImage, textSize }: Props) {
+    const textClassName = `${textSize ? textSize : "text-xs"} font-medium`
     return (
         <div className="flex items-center space-x-2">
-            <p className="text-xs font-medium">{prefix} {name}</p>
+            <p className={textClassName}>{prefix} {name}</p>
             <Image
                 src={profileImage}
                 alt={name}
diff --git a/src/pages/approval-workflows/[id].tsx b/src/pages/approval-workflows/[id].tsx
index 7b8fc7e7..38f18439 100644
--- a/src/pages/approval-workflows/[id].tsx
+++ b/src/pages/approval-workflows/[id].tsx
@@ -180,7 +180,7 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
                                     </div>
 
                                     {selectedStep.completed ? (
-                                        <div className={"text-base font-medium text-gray-500 my-7"}>
+                                        <div className={"text-base font-medium text-gray-500 flex flex-col gap-6"}>
                                             Approved on {new Date(selectedStep.completedDate!).toLocaleString("en-CA", {
                                                 year: "numeric",
                                                 month: "2-digit",
@@ -190,9 +190,27 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
                                                 second: "2-digit",
                                                 hour12: false,
                                             }).replace(", ", " at ")}
-                                            <p className="my-4 text-sm">No additional actions are required.</p>
+                                            <div className="flex flex-row gap-1 text-sm">
+                                                <p className="text-base">Approved by:</p>
+                                                {(() => {
+                                                    const assignee = workflowAssignees.find(
+                                                        (assignee) => assignee.id === selectedStep.completedBy
+                                                    );
+                                                    return assignee ? (
+                                                        <UserWithProfilePic
+                                                            textSize="text-base"
+                                                            prefix={getUserTypeLabelShort(assignee.type)}
+                                                            name={assignee.name}
+                                                            profileImage={assignee.profilePicture}
+                                                        />
+                                                    ) : (
+                                                        "Unknown"
+                                                    );
+                                                })()}
+                                            </div>
+                                            <p className="text-sm">No additional actions are required.</p>
                                         </div>
-                                
+
                                     ) : (
                                         <div className={"text-base font-medium text-gray-500"}>
                                             One assignee is required to sign off to complete this step:
@@ -200,6 +218,7 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
                                                 {workflowAssignees.map(user => (
                                                     <span key={user.id}>
                                                         <UserWithProfilePic
+                                                            textSize="text-sm"
                                                             prefix={getUserTypeLabelShort(user.type)}
                                                             name={user.name}
                                                             profileImage={user.profilePicture}

From 2c0153e0559fb793e415c852e120406f1ef8dcdd Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Sat, 25 Jan 2025 15:10:52 +0000
Subject: [PATCH 25/69] Fix animations

---
 .../ApprovalWorkflows/WorkflowForm.tsx        | 14 +++---
 .../WorkflowStepComponent.tsx                 |  2 +-
 src/pages/approval-workflows/[id].tsx         |  6 ++-
 src/pages/approval-workflows/create.tsx       | 43 ++++++++-----------
 4 files changed, 29 insertions(+), 36 deletions(-)

diff --git a/src/components/ApprovalWorkflows/WorkflowForm.tsx b/src/components/ApprovalWorkflows/WorkflowForm.tsx
index eb393d4d..d730b16a 100644
--- a/src/components/ApprovalWorkflows/WorkflowForm.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowForm.tsx
@@ -95,12 +95,8 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityTeacher
         <>
             {workflow.entityId && workflow.name &&
                 <div>
-                    <motion.div
+                    <div
                         className="flex flex-col gap-6"
-                        initial={{ opacity: 0, y: 20 }}
-                        animate={{ opacity: 1, y: 0 }}
-                        exit={{ opacity: 0, x: 20 }}
-                        transition={{ duration: 0.3 }}
                     >
                         <Tip text="Introduce here all the steps associated with this instance." />
                         <Button
@@ -113,7 +109,7 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityTeacher
                             <IoIosAddCircleOutline className="size-6" />
                             Add Step
                         </Button>
-                    </motion.div>
+                    </div>
 
                     <Reorder.Group
                         axis="y"
@@ -126,10 +122,10 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityTeacher
                                 <Reorder.Item
                                     key={step.key}
                                     value={step}
-                                    initial={{ opacity: 0, y: 20 }}
+                                    initial={{ opacity: 0, y: -30 }}
                                     animate={{ opacity: 1, y: 0 }}
-                                    exit={{ opacity: 0, x: 20 }}
-                                    transition={{ duration: 0.3 }}
+                                    exit={{ opacity: 0, x: 30 }}
+                                    transition={{ duration: 0.20 }}
                                     layout
                                     drag={!(step.firstStep || step.finalStep)}
                                 >
diff --git a/src/components/ApprovalWorkflows/WorkflowStepComponent.tsx b/src/components/ApprovalWorkflows/WorkflowStepComponent.tsx
index a3387201..a6741148 100644
--- a/src/components/ApprovalWorkflows/WorkflowStepComponent.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowStepComponent.tsx
@@ -29,7 +29,7 @@ export default function WorkflowStepComponent({
     return (
         <div
             onClick={onClick}
-            className={clsx("flex flex-row gap-5 w-[600px] p-6 my-4 rounded-2xl transition ease-in-out duration-300 disabled:cursor-not-allowed cursor-pointer", {
+            className={clsx("flex flex-row gap-5 w-[600px] p-6 mb-5 rounded-2xl transition ease-in-out duration-300 cursor-pointer", {
                 "bg-mti-purple-ultralight": selected,
             })}
         >
diff --git a/src/pages/approval-workflows/[id].tsx b/src/pages/approval-workflows/[id].tsx
index 38f18439..5ecd6ca2 100644
--- a/src/pages/approval-workflows/[id].tsx
+++ b/src/pages/approval-workflows/[id].tsx
@@ -22,6 +22,7 @@ import { RiThumbUpLine } from "react-icons/ri";
 import { ToastContainer } from "react-toastify";
 
 import approvalWorkflowsData from '../../demo/approval_workflows.json'; // to test locally
+import Tip from "@/components/ApprovalWorkflows/Tip";
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => {
     const user = await requestUser(req, res);
@@ -125,6 +126,9 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
                                 status={workflow.status}
                             />
                         </div>
+                        {steps.find((step) => !step.completed) === undefined &&
+                            <Tip text="All steps in this instance have been completed." />
+                        }
                     </section>
 
                     <section className="flex flex-col gap-0">
@@ -235,7 +239,7 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
                                         value={comments}
                                         onChange={(e) => setComments(e.target.value)}
                                         placeholder="Input comments here"
-                                        className="w-full h-80 p-2 border-2 rounded-xl focus:border-mti-purple focus:outline-none mt-4"
+                                        className="w-full h-80 p-2 border-2 rounded-xl shadow-lg focus:border-mti-purple focus:outline-none mt-4"
                                     />
                                     <button onClick={saveComments} className="mt-4 px-6 py-2 bg-mti-purple-dark text-white rounded-full">
                                         Save Comments
diff --git a/src/pages/approval-workflows/create.tsx b/src/pages/approval-workflows/create.tsx
index d42bdfab..b78f53c2 100644
--- a/src/pages/approval-workflows/create.tsx
+++ b/src/pages/approval-workflows/create.tsx
@@ -13,7 +13,7 @@ import { requestUser } from "@/utils/api";
 import { getEntities } from "@/utils/entities.be";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
 import { getEntitiesUsers } from "@/utils/users.be";
-import { LayoutGroup, motion } from "framer-motion";
+import { AnimatePresence, LayoutGroup, motion } from "framer-motion";
 import { withIronSessionSsr } from "iron-session/next";
 import Head from "next/head";
 import Link from "next/link";
@@ -251,34 +251,27 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
                                     </Button>
                                 </div>
 
-                                <LayoutGroup>
-                                    {(!currentWorkflow.name || !currentWorkflow.entityId) && (
+                                <AnimatePresence mode="wait">
+                                    <LayoutGroup key={currentWorkflow.id}>
                                         <motion.div
-                                            key={0}
-                                            initial={{ opacity: 0, y: -20 }}
+                                            key="form"
+                                            initial={{ opacity: 0, y: -30 }}
                                             animate={{ opacity: 1, y: 0 }}
-                                            exit={{ opacity: 0, y: -20 }}
-                                            transition={{ duration: 0.3 }}
+                                            exit={{ opacity: 0, x: 60 }}
+                                            transition={{ duration: 0.20 }}
                                         >
-                                            <Tip text="Please fill in workflow name and associated entity to start configuring workflow." />
+                                            {(!currentWorkflow.name || !currentWorkflow.entityId) && (
+                                                <Tip text="Please fill in workflow name and associated entity to start configuring workflow." />
+                                            )}
+                                            <WorkflowForm
+                                                workflow={currentWorkflow}
+                                                onWorkflowChange={onWorkflowChange}
+                                                entityTeachers={entityTeachers}
+                                                entityCorporates={entityCorporates}
+                                            />
                                         </motion.div>
-                                    )}
-
-                                    <motion.div
-                                        key={1}
-                                        initial={{ opacity: 0, y: -20 }}
-                                        animate={{ opacity: 1, y: 0 }}
-                                        exit={{ opacity: 0, y: -20 }}
-                                        transition={{ duration: 0.3 }}
-                                    >
-                                        <WorkflowForm
-                                            workflow={currentWorkflow}
-                                            onWorkflowChange={onWorkflowChange}
-                                            entityTeachers={entityTeachers}
-                                            entityCorporates={entityCorporates}
-                                        />
-                                    </motion.div>
-                                </LayoutGroup>
+                                    </LayoutGroup>
+                                </AnimatePresence>
                             </>
                         )}
                     </form>

From ac072b0a5a509b3a2fa1f27c3bdc8d3853e13816 Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Sat, 25 Jan 2025 15:47:33 +0000
Subject: [PATCH 26/69] small fixes and animate side panel content

---
 .../ApprovalWorkflows/UserWithProfilePic.tsx  |   2 +-
 src/pages/approval-workflows/[id].tsx         | 203 ++++++++++--------
 src/pages/approval-workflows/create.tsx       |   6 +
 3 files changed, 115 insertions(+), 96 deletions(-)

diff --git a/src/components/ApprovalWorkflows/UserWithProfilePic.tsx b/src/components/ApprovalWorkflows/UserWithProfilePic.tsx
index 34c78adb..9b647847 100644
--- a/src/components/ApprovalWorkflows/UserWithProfilePic.tsx
+++ b/src/components/ApprovalWorkflows/UserWithProfilePic.tsx
@@ -17,7 +17,7 @@ export default function UserWithProfilePic({ prefix, name, profileImage, textSiz
                 alt={name}
                 width={24}
                 height={24}
-                className="w-6 h-6 rounded-full"
+                className="rounded-full"
             />
         </div>
     );
diff --git a/src/pages/approval-workflows/[id].tsx b/src/pages/approval-workflows/[id].tsx
index 5ecd6ca2..b9c39671 100644
--- a/src/pages/approval-workflows/[id].tsx
+++ b/src/pages/approval-workflows/[id].tsx
@@ -23,6 +23,7 @@ import { ToastContainer } from "react-toastify";
 
 import approvalWorkflowsData from '../../demo/approval_workflows.json'; // to test locally
 import Tip from "@/components/ApprovalWorkflows/Tip";
+import { AnimatePresence, LayoutGroup, motion } from "framer-motion";
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => {
     const user = await requestUser(req, res);
@@ -149,106 +150,118 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
                         ))}
                     </section>
 
-                    <section className={`absolute inset-y-0 right-0 h-full bg-mti-purple-ultralight bg-opacity-50 shadow-xl shadow-mti-purple transition-all duration-300 overflow-hidden ${isPanelOpen ? 'w-2/5' : 'w-0'}`}>
-                        {isPanelOpen && (
-                            <div className="relative inset-y-0 right-0 h-full p-6">
-                                <div className="flex flex-row gap-2">
-                                    <p className="text-2xl font-medium text-left align-middle">Step {selectedStepIndex + 1}</p>
-                                    <div className="ml-auto flex flex-row">
-                                        <button
-                                            className="min-w-fit max-h-fit text-lg font-medium flex items-center gap-2 text-left"
-                                            onClick={() => setIsPanelOpen(false)}
-                                        >
-                                            Collapse
-                                            <MdOutlineDoubleArrow size={20} />
-                                        </button>
-                                    </div>
-                                </div>
-
-                                <hr className="my-4 h-[4px] bg-mti-purple-ultralight rounded-full w-full" />
-
-                                <div>
-                                    <div className="my-8 flex flex-row gap-4 items-center text-lg font-medium">
-                                        {selectedStep.stepType === "approval-by" ? (
-                                            <>
-                                                <RiThumbUpLine size={30} />
-                                                Approval Step
-                                            </>
-                                        ) : (
-                                            <>
-                                                <FaWpforms size={30} />
-                                                Form Intake Step
-                                            </>
-                                        )
-                                        }
-                                    </div>
-
-                                    {selectedStep.completed ? (
-                                        <div className={"text-base font-medium text-gray-500 flex flex-col gap-6"}>
-                                            Approved on {new Date(selectedStep.completedDate!).toLocaleString("en-CA", {
-                                                year: "numeric",
-                                                month: "2-digit",
-                                                day: "2-digit",
-                                                hour: "2-digit",
-                                                minute: "2-digit",
-                                                second: "2-digit",
-                                                hour12: false,
-                                            }).replace(", ", " at ")}
-                                            <div className="flex flex-row gap-1 text-sm">
-                                                <p className="text-base">Approved by:</p>
-                                                {(() => {
-                                                    const assignee = workflowAssignees.find(
-                                                        (assignee) => assignee.id === selectedStep.completedBy
-                                                    );
-                                                    return assignee ? (
-                                                        <UserWithProfilePic
-                                                            textSize="text-base"
-                                                            prefix={getUserTypeLabelShort(assignee.type)}
-                                                            name={assignee.name}
-                                                            profileImage={assignee.profilePicture}
-                                                        />
-                                                    ) : (
-                                                        "Unknown"
-                                                    );
-                                                })()}
-                                            </div>
-                                            <p className="text-sm">No additional actions are required.</p>
-                                        </div>
-
-                                    ) : (
-                                        <div className={"text-base font-medium text-gray-500"}>
-                                            One assignee is required to sign off to complete this step:
-                                            <div className="flex flex-col gap-2 mt-3">
-                                                {workflowAssignees.map(user => (
-                                                    <span key={user.id}>
-                                                        <UserWithProfilePic
-                                                            textSize="text-sm"
-                                                            prefix={getUserTypeLabelShort(user.type)}
-                                                            name={user.name}
-                                                            profileImage={user.profilePicture}
-                                                        />
-                                                    </span>
-                                                ))}
+                    {/* Side panel */}
+                    <AnimatePresence mode="wait">
+                        <LayoutGroup key="sidePanel">
+                            <section className={`absolute inset-y-0 right-0 h-full bg-mti-purple-ultralight bg-opacity-50 shadow-xl shadow-mti-purple transition-all duration-300 overflow-hidden ${isPanelOpen ? 'w-2/5' : 'w-0'}`}>
+                                {isPanelOpen && selectedStep && (
+                                    <motion.div
+                                        className="p-6"
+                                        key={selectedStep.stepNumber}
+                                        initial={{ opacity: 0, x: 30 }}
+                                        animate={{ opacity: 1, x: 0 }}
+                                        exit={{ opacity: 0, x: 30 }}
+                                        transition={{ duration: 0.2 }}
+                                    >
+                                        <div className="flex flex-row gap-2">
+                                            <p className="text-2xl font-medium text-left align-middle">Step {selectedStepIndex + 1}</p>
+                                            <div className="ml-auto flex flex-row">
+                                                <button
+                                                    className="min-w-fit max-h-fit text-lg font-medium flex items-center gap-2 text-left"
+                                                    onClick={() => setIsPanelOpen(false)}
+                                                >
+                                                    Collapse
+                                                    <MdOutlineDoubleArrow size={20} />
+                                                </button>
                                             </div>
                                         </div>
-                                    )}
 
-                                    <hr className="my-4 h-[4px] bg-mti-purple-ultralight rounded-full w-full" />
+                                        <hr className="my-4 h-[4px] bg-mti-purple-ultralight rounded-full w-full" />
 
-                                    <textarea
-                                        value={comments}
-                                        onChange={(e) => setComments(e.target.value)}
-                                        placeholder="Input comments here"
-                                        className="w-full h-80 p-2 border-2 rounded-xl shadow-lg focus:border-mti-purple focus:outline-none mt-4"
-                                    />
-                                    <button onClick={saveComments} className="mt-4 px-6 py-2 bg-mti-purple-dark text-white rounded-full">
-                                        Save Comments
-                                    </button>
+                                        <div>
+                                            <div className="my-8 flex flex-row gap-4 items-center text-lg font-medium">
+                                                {selectedStep.stepType === "approval-by" ? (
+                                                    <>
+                                                        <RiThumbUpLine size={30} />
+                                                        Approval Step
+                                                    </>
+                                                ) : (
+                                                    <>
+                                                        <FaWpforms size={30} />
+                                                        Form Intake Step
+                                                    </>
+                                                )
+                                                }
+                                            </div>
 
-                                </div>
-                            </div>
-                        )}
-                    </section>
+                                            {selectedStep.completed ? (
+                                                <div className={"text-base font-medium text-gray-500 flex flex-col gap-6"}>
+                                                    Approved on {new Date(selectedStep.completedDate!).toLocaleString("en-CA", {
+                                                        year: "numeric",
+                                                        month: "2-digit",
+                                                        day: "2-digit",
+                                                        hour: "2-digit",
+                                                        minute: "2-digit",
+                                                        second: "2-digit",
+                                                        hour12: false,
+                                                    }).replace(", ", " at ")}
+                                                    <div className="flex flex-row gap-1 text-sm">
+                                                        <p className="text-base">Approved by:</p>
+                                                        {(() => {
+                                                            const assignee = workflowAssignees.find(
+                                                                (assignee) => assignee.id === selectedStep.completedBy
+                                                            );
+                                                            return assignee ? (
+                                                                <UserWithProfilePic
+                                                                    textSize="text-base"
+                                                                    prefix={getUserTypeLabelShort(assignee.type)}
+                                                                    name={assignee.name}
+                                                                    profileImage={assignee.profilePicture}
+                                                                />
+                                                            ) : (
+                                                                "Unknown"
+                                                            );
+                                                        })()}
+                                                    </div>
+                                                    <p className="text-sm">No additional actions are required.</p>
+                                                </div>
+
+                                            ) : (
+                                                <div className={"text-base font-medium text-gray-500"}>
+                                                    One assignee is required to sign off to complete this step:
+                                                    <div className="flex flex-col gap-2 mt-3">
+                                                        {workflowAssignees.map(user => (
+                                                            <span key={user.id}>
+                                                                <UserWithProfilePic
+                                                                    textSize="text-sm"
+                                                                    prefix={getUserTypeLabelShort(user.type)}
+                                                                    name={user.name}
+                                                                    profileImage={user.profilePicture}
+                                                                />
+                                                            </span>
+                                                        ))}
+                                                    </div>
+                                                </div>
+                                            )}
+
+                                            <hr className="my-4 h-[4px] bg-mti-purple-ultralight rounded-full w-full" />
+
+                                            <textarea
+                                                value={comments}
+                                                onChange={(e) => setComments(e.target.value)}
+                                                placeholder="Input comments here"
+                                                className="w-full h-80 p-2 border-2 rounded-xl shadow-lg focus:border-mti-purple focus:outline-none mt-4"
+                                            />
+                                            <button onClick={saveComments} className="mt-4 px-6 py-2 bg-mti-purple-dark text-white rounded-full">
+                                                Save Comments
+                                            </button>
+
+                                        </div>
+                                    </motion.div>
+                                )}
+                            </section>
+                        </LayoutGroup>
+                    </AnimatePresence>
                 </Layout>
             )}
         </>
diff --git a/src/pages/approval-workflows/create.tsx b/src/pages/approval-workflows/create.tsx
index b78f53c2..b7688157 100644
--- a/src/pages/approval-workflows/create.tsx
+++ b/src/pages/approval-workflows/create.tsx
@@ -55,6 +55,7 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
     const [entityId, setEntityId] = useState<string | null | undefined>(null);
     const [entityTeachers, setEntityTeachers] = useState<TeacherUser[]>([]);
     const [entityCorporates, setEntityCorporates] = useState<CorporateUser[]>([]);
+    const [isAdding, setIsAdding] = useState(false); // used to temporary timeout new workflow button. With animations, clicking too fast might cause state inconsistencies between renders.
 
     useEffect(() => {
         if (entityId) {
@@ -88,6 +89,9 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
     };
 
     const handleAddNewWorkflow = () => {
+        if (isAdding) return;
+        setIsAdding(true);
+
         const newId = uuidv4();
         const newWorkflow: EditableApprovalWorkflow = {
             id: newId,
@@ -104,6 +108,8 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
         };
         setWorkflows((prev) => [...prev, newWorkflow]);
         handleSelectWorkflow(newId);
+
+        setTimeout(() => setIsAdding(false), 300);
     };
 
     const onWorkflowChange = (updatedWorkflow: EditableApprovalWorkflow) => {

From 37216e2a5ad70ab8cdc44702b8fd1fc38d194e04 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Marques=20Lima?= <francisco.lima@helppier.com>
Date: Sat, 25 Jan 2025 19:38:29 +0000
Subject: [PATCH 27/69] ENCOA-316 ENCOA-317: Refactor components to remove
 Layout wrapper and pass it in the App component , implemented a skeleton
 feedback while loading page and improved API calls related to Dashboard/User
 Profile

---
 src/components/High/Layout.tsx                |  171 ++-
 src/components/Low/AsyncSelect.tsx            |   11 +-
 src/components/Medium/UserProfileSkeleton.tsx |   60 +
 src/components/Sidebar.tsx                    |  639 ++++++---
 src/exams/Selection.tsx                       |   30 +-
 src/hooks/useEntities.tsx                     |   13 +-
 src/hooks/useStats.tsx                        |   42 +
 src/hooks/useTicketsListener.tsx              |   18 +-
 src/interfaces/results.ts                     |    2 +
 src/pages/(exam)/ExamPage.tsx                 |  694 +++++----
 src/pages/(status)/PaymentDue.tsx             |  554 +++++---
 src/pages/_app.tsx                            |   76 +-
 src/pages/api/stats/user/[user].ts            |   18 +-
 src/pages/assignments/[id].tsx                |   15 +-
 src/pages/assignments/creator/[id].tsx        |    5 +-
 src/pages/assignments/creator/index.tsx       |    5 +-
 src/pages/assignments/index.tsx               |   13 +-
 src/pages/classrooms/[id].tsx                 |    5 +-
 src/pages/classrooms/create.tsx               |   11 +-
 src/pages/classrooms/index.tsx                |    9 +-
 src/pages/dashboard/admin.tsx                 |  345 ++---
 src/pages/dashboard/corporate.tsx             |  387 ++---
 src/pages/dashboard/developer.tsx             |  341 ++---
 src/pages/dashboard/mastercorporate.tsx       |  393 ++---
 src/pages/dashboard/student.tsx               |  552 +++++---
 src/pages/dashboard/teacher.tsx               |  270 ++--
 src/pages/entities/[id]/index.tsx             |   20 +-
 src/pages/entities/[id]/roles/[role].tsx      |    7 +-
 src/pages/entities/[id]/roles/index.tsx       |   29 +-
 src/pages/entities/create.tsx                 |   14 +-
 src/pages/entities/index.tsx                  |  194 +--
 src/pages/exam.tsx                            |    1 -
 src/pages/generation.tsx                      |   12 +-
 src/pages/official-exam.tsx                   |  277 ++--
 src/pages/payment-record.tsx                  |    8 +-
 src/pages/permissions/[id].tsx                |  343 +++--
 src/pages/permissions/index.tsx               |  120 +-
 src/pages/profile.tsx                         | 1258 +++++++++--------
 src/pages/record.tsx                          |    5 +-
 src/pages/register.tsx                        |    2 -
 src/pages/settings.tsx                        |   13 +-
 src/pages/statistical.tsx                     |   12 +-
 src/pages/stats.tsx                           |   35 +-
 src/pages/tickets.tsx                         |    5 +-
 src/pages/training/[id]/index.tsx             |    5 +-
 src/pages/training/index.tsx                  |    7 +-
 src/pages/users/index.tsx                     |   11 +-
 src/pages/users/performance.tsx               |   17 +-
 src/utils/api.ts                              |    1 -
 src/utils/assignments.be.ts                   |   67 +-
 src/utils/entities.be.ts                      |    2 +-
 src/utils/grading.be.ts                       |    8 +-
 src/utils/groups.be.ts                        |    4 +-
 src/utils/permissions.ts                      |   38 +-
 src/utils/stats.be.ts                         |  134 +-
 src/utils/users.be.ts                         |   91 +-
 56 files changed, 4440 insertions(+), 2979 deletions(-)
 create mode 100644 src/components/Medium/UserProfileSkeleton.tsx
 create mode 100644 src/hooks/useStats.tsx

diff --git a/src/components/High/Layout.tsx b/src/components/High/Layout.tsx
index 502384e1..b8765a97 100644
--- a/src/components/High/Layout.tsx
+++ b/src/components/High/Layout.tsx
@@ -1,4 +1,3 @@
-import useEntities from "@/hooks/useEntities";
 import { EntityWithRoles } from "@/interfaces/entity";
 import { User } from "@/interfaces/user";
 import clsx from "clsx";
@@ -6,66 +5,126 @@ import { useRouter } from "next/router";
 import { ToastContainer } from "react-toastify";
 import Navbar from "../Navbar";
 import Sidebar from "../Sidebar";
+import React, { useEffect, useState } from "react";
+
+export const LayoutContext = React.createContext({
+  onFocusLayerMouseEnter: () => {},
+  setOnFocusLayerMouseEnter: (() => {}) as React.Dispatch<
+    React.SetStateAction<() => void>
+  >,
+  navDisabled: false,
+  setNavDisabled: (() => {}) as React.Dispatch<React.SetStateAction<boolean>>,
+  focusMode: false,
+  setFocusMode: (() => {}) as React.Dispatch<React.SetStateAction<boolean>>,
+  hideSidebar: false,
+  setHideSidebar: (() => {}) as React.Dispatch<React.SetStateAction<boolean>>,
+  bgColor: "bg-white",
+  setBgColor: (() => {}) as React.Dispatch<React.SetStateAction<string>>,
+  className: "",
+  setClassName: (() => {}) as React.Dispatch<React.SetStateAction<string>>,
+});
 
 interface Props {
-	user: User;
-	entities?: EntityWithRoles[]
-	children: React.ReactNode;
-	className?: string;
-	navDisabled?: boolean;
-	focusMode?: boolean;
-	hideSidebar?: boolean
-	bgColor?: string;
-	onFocusLayerMouseEnter?: () => void;
+  user: User;
+  entities?: EntityWithRoles[];
+  children: React.ReactNode;
+  refreshPage?: boolean;
 }
 
 export default function Layout({
-	user,
-	children,
-	className,
-	bgColor = "bg-white",
-	hideSidebar,
-	navDisabled = false,
-	focusMode = false,
-	onFocusLayerMouseEnter
+  user,
+  entities,
+  children,
+  refreshPage,
 }: Props) {
-	const router = useRouter();
-	const { entities } = useEntities()
+  const [onFocusLayerMouseEnter, setOnFocusLayerMouseEnter] = useState(
+    () => () => {}
+  );
+  const [navDisabled, setNavDisabled] = useState(false);
+  const [focusMode, setFocusMode] = useState(false);
+  const [hideSidebar, setHideSidebar] = useState(false);
+  const [bgColor, setBgColor] = useState("bg-white");
+  const [className, setClassName] = useState("");
 
-	return (
-		<main className={clsx("w-full min-h-full h-screen flex flex-col bg-mti-gray-smoke relative")}>
-			<ToastContainer />
-			{!hideSidebar && user && (
-				<Navbar
-					path={router.pathname}
-					user={user}
-					navDisabled={navDisabled}
-					focusMode={focusMode}
-					onFocusLayerMouseEnter={onFocusLayerMouseEnter}
-				/>
-			)}
-			<div className={clsx("h-full w-full flex gap-2")}>
-				{!hideSidebar && user && (
-					<Sidebar
-						path={router.pathname}
-						navDisabled={navDisabled}
-						focusMode={focusMode}
-						onFocusLayerMouseEnter={onFocusLayerMouseEnter}
-						className="-md:hidden"
-						user={user}
-						entities={entities}
-					/>
-				)}
-				<div
-					className={clsx(
-						`w-full min-h-full ${bgColor} shadow-md rounded-2xl p-4 xl:p-10 pb-8 flex flex-col gap-8 relative overflow-hidden mt-2`,
-						bgColor !== "bg-white" ? "justify-center" : "h-fit",
-						hideSidebar ? "md:mx-8" : "md:mr-8",
-						className,
-					)}>
-					{children}
-				</div>
-			</div>
-		</main>
-	);
+  useEffect(() => {
+    if (refreshPage) {
+      setClassName("");
+      setBgColor("bg-white");
+      setFocusMode(false);
+      setHideSidebar(false);
+      setNavDisabled(false);
+      setOnFocusLayerMouseEnter(() => () => {});
+    }
+  }, [refreshPage]);
+
+  const LayoutContextValue = React.useMemo(
+    () => ({
+      onFocusLayerMouseEnter,
+      setOnFocusLayerMouseEnter,
+      navDisabled,
+      setNavDisabled,
+      focusMode,
+      setFocusMode,
+      hideSidebar,
+      setHideSidebar,
+      bgColor,
+      setBgColor,
+      className,
+      setClassName,
+    }),
+    [
+      bgColor,
+      className,
+      focusMode,
+      hideSidebar,
+      navDisabled,
+      onFocusLayerMouseEnter,
+    ]
+  );
+
+  const router = useRouter();
+
+  return (
+    <LayoutContext.Provider value={LayoutContextValue}>
+      <main
+        className={clsx(
+          "w-full min-h-full h-screen flex flex-col bg-mti-gray-smoke relative"
+        )}
+      >
+        <ToastContainer />
+        {!hideSidebar && user && (
+          <Navbar
+            path={router.pathname}
+            user={user}
+            navDisabled={navDisabled}
+            focusMode={focusMode}
+            onFocusLayerMouseEnter={onFocusLayerMouseEnter}
+          />
+        )}
+        <div className={clsx("h-full w-full flex gap-2")}>
+          {!hideSidebar && user && (
+            <Sidebar
+              path={router.pathname}
+              navDisabled={navDisabled}
+              focusMode={focusMode}
+              onFocusLayerMouseEnter={onFocusLayerMouseEnter}
+              className="-md:hidden"
+              user={user}
+              entities={entities}
+            />
+          )}
+          <div
+            className={clsx(
+              `w-full min-h-full ${bgColor} shadow-md rounded-2xl p-4 xl:p-10 pb-8 flex flex-col gap-8 relative overflow-hidden mt-2`,
+              bgColor !== "bg-white" ? "justify-center" : "h-fit",
+              hideSidebar ? "md:mx-8" : "md:mr-8",
+              className
+            )}
+          >
+            {children}
+          </div>
+        </div>
+      </main>
+    </LayoutContext.Provider>
+  );
 }
diff --git a/src/components/Low/AsyncSelect.tsx b/src/components/Low/AsyncSelect.tsx
index b125b2ad..a839bc23 100644
--- a/src/components/Low/AsyncSelect.tsx
+++ b/src/components/Low/AsyncSelect.tsx
@@ -48,6 +48,15 @@ export default function AsyncSelect({
   flat,
 }: Props & (MultiProps | SingleProps)) {
   const [target, setTarget] = useState<HTMLElement>();
+  const [inputValue, setInputValue] = useState("");
+  
+  //Implemented a debounce to prevent the API from being called too frequently
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      loadOptions(inputValue);
+    }, 200);
+    return () => clearTimeout(timer);
+  }, [inputValue, loadOptions]);
 
   useEffect(() => {
     if (document) setTarget(document.body);
@@ -77,7 +86,7 @@ export default function AsyncSelect({
         filterOption={null}
         loadingMessage={() => "Loading..."}
         onInputChange={(inputValue) => {
-          loadOptions(inputValue);
+          setInputValue(inputValue);
         }}
         options={options}
         value={value}
diff --git a/src/components/Medium/UserProfileSkeleton.tsx b/src/components/Medium/UserProfileSkeleton.tsx
new file mode 100644
index 00000000..33b46f3b
--- /dev/null
+++ b/src/components/Medium/UserProfileSkeleton.tsx
@@ -0,0 +1,60 @@
+import React from "react";
+
+export default function UserProfileSkeleton() {
+  return (
+    <div className="bg-white min-h-screen p-6">
+      <div className="mt-6 bg-white p-6  rounded-lg flex gap-4 items-center">
+        <div className="h-64 w-60 bg-gray-300 animate-pulse rounded"></div>
+        <div className="flex-1">
+          <div className="h-12 w-64 bg-gray-300 animate-pulse rounded"></div>
+          <div className="flex justify-between items-center mt-1">
+            <div className="h-4 w-60 bg-gray-300 animate-pulse mt-2 rounded"></div>
+            <div className="h-8 w-32 bg-gray-300 animate-pulse mt-2 rounded"></div>
+          </div>
+          <div className="h-4 w-100 bg-gray-300 animate-pulse mt-2 rounded"></div>
+          <div className="mt-6 grid grid-cols-4 justify-item-start gap-4">
+          <div className="bg-white p-4 rounded-lg text-center flex flex-row items-center justify-center">
+              <div className="h-12 w-12 mx-2  bg-gray-300 animate-pulse rounded"></div>
+              <div className="flex flex-col">
+                <div className="h-4 w-4 bg-gray-300 animate-pulse mt-2 rounded"></div>
+                <div className="h-4 w-16 bg-gray-300 animate-pulse mt-2 rounded"></div>
+              </div>
+            </div>
+            <div className="bg-white p-4 rounded-lg text-center flex flex-row items-center justify-center">
+              <div className="h-12 w-12 mx-2  bg-gray-300 animate-pulse rounded"></div>
+              <div className="flex flex-col">
+                <div className="h-4 w-4 bg-gray-300 animate-pulse mt-2 rounded"></div>
+                <div className="h-4 w-16 bg-gray-300 animate-pulse mt-2 rounded"></div>
+              </div>
+            </div>
+            <div className="bg-white p-4 rounded-lg text-center flex flex-row items-center justify-center">
+              <div className="h-12 w-12 mx-2  bg-gray-300 animate-pulse rounded"></div>
+              <div className="flex flex-col">
+                <div className="h-4 w-4 bg-gray-300 animate-pulse mt-2 rounded"></div>
+                <div className="h-4 w-16 bg-gray-300 animate-pulse mt-2 rounded"></div>
+              </div>
+            </div>
+            <div className="bg-white p-4 rounded-lg text-center flex flex-row items-center justify-center">
+              <div className="h-12 w-12 mx-2  bg-gray-300 animate-pulse rounded"></div>
+              <div className="flex flex-col">
+                <div className="h-4 w-4 bg-gray-300 animate-pulse mt-2 rounded"></div>
+                <div className="h-4 w-16 bg-gray-300 animate-pulse mt-2 rounded"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="mt-6 bg-white p-6 rounded-lg">
+        <div className="h-6 w-40 bg-gray-300 animate-pulse rounded mb-4"></div>
+        <div className="space-y-4">
+          {[...Array(4)].map((_, i) => (
+            <div key={i} className="flex justify-between items-center">
+              <div className="h-4 w-24 bg-gray-300 animate-pulse rounded"></div>
+              <div className="h-2 w-3/4 bg-gray-300 animate-pulse rounded"></div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index daffc144..a4b6f39e 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -2,17 +2,16 @@ import clsx from "clsx";
 import { IconType } from "react-icons";
 import { MdSpaceDashboard } from "react-icons/md";
 import {
-	BsFileEarmarkText,
-	BsClockHistory,
-	BsPencil,
-	BsGraphUp,
-	BsChevronBarRight,
-	BsChevronBarLeft,
-	BsShieldFill,
-	BsCloudFill,
-	BsCurrencyDollar,
-	BsClipboardData,
-	BsPeople,
+  BsFileEarmarkText,
+  BsClockHistory,
+  BsGraphUp,
+  BsChevronBarRight,
+  BsChevronBarLeft,
+  BsShieldFill,
+  BsCloudFill,
+  BsCurrencyDollar,
+  BsClipboardData,
+  BsPeople,
 } from "react-icons/bs";
 import { CiDumbbell } from "react-icons/ci";
 import { RiLogoutBoxFill } from "react-icons/ri";
@@ -24,218 +23,454 @@ import { preventNavigation } from "@/utils/navigation.disabled";
 import usePreferencesStore from "@/stores/preferencesStore";
 import { User } from "@/interfaces/user";
 import useTicketsListener from "@/hooks/useTicketsListener";
-import { checkAccess, getTypesOfUser } from "@/utils/permissions";
+import { getTypesOfUser } from "@/utils/permissions";
 import usePermissions from "@/hooks/usePermissions";
 import { EntityWithRoles } from "@/interfaces/entity";
-import { useAllowedEntities, useAllowedEntitiesSomePermissions } from "@/hooks/useEntityPermissions";
+import {
+  useAllowedEntities,
+  useAllowedEntitiesSomePermissions,
+} from "@/hooks/useEntityPermissions";
 import { useMemo } from "react";
+import { PermissionType } from "../interfaces/permissions";
 
 interface Props {
-	path: string;
-	navDisabled?: boolean;
-	focusMode?: boolean;
-	onFocusLayerMouseEnter?: () => void;
-	className?: string;
-	user: User;
-	entities?: EntityWithRoles[]
+  path: string;
+  navDisabled?: boolean;
+  focusMode?: boolean;
+  onFocusLayerMouseEnter?: () => void;
+  className?: string;
+  user: User;
+  entities?: EntityWithRoles[];
 }
 
 interface NavProps {
-	Icon: IconType;
-	label: string;
-	path: string;
-	keyPath: string;
-	disabled?: boolean;
-	isMinimized?: boolean;
-	badge?: number;
+  Icon: IconType;
+  label: string;
+  path: string;
+  keyPath: string;
+  disabled?: boolean;
+  isMinimized?: boolean;
+  badge?: number;
 }
 
-const Nav = ({ Icon, label, path, keyPath, disabled = false, isMinimized = false, badge }: NavProps) => {
-	return (
-		<Link
-			href={!disabled ? keyPath : ""}
-			className={clsx(
-				"flex items-center gap-4 rounded-full p-4 text-gray-500 hover:text-white",
-				"transition-all duration-300 ease-in-out relative",
-				disabled ? "hover:bg-mti-gray-dim cursor-not-allowed" : "hover:bg-mti-purple-light cursor-pointer",
-				path.startsWith(keyPath) && "bg-mti-purple-light text-white",
-				isMinimized ? "w-fit" : "w-full min-w-[200px] px-8 2xl:min-w-[220px]",
-			)}>
-			<Icon size={24} />
-			{!isMinimized && <span className="text-lg font-semibold">{label}</span>}
-			{!!badge && badge > 0 && (
-				<div
-					className={clsx(
-						"bg-mti-purple-light h-5 w-5 text-xs rounded-full flex items-center justify-center text-white",
-						"transition ease-in-out duration-300",
-						isMinimized && "absolute right-0 top-0",
-					)}>
-					{badge}
-				</div>
-			)}
-		</Link>
-	);
+const Nav = ({
+  Icon,
+  label,
+  path,
+  keyPath,
+  disabled = false,
+  isMinimized = false,
+  badge,
+}: NavProps) => {
+  return (
+    <Link
+      href={!disabled ? keyPath : ""}
+      className={clsx(
+        "flex items-center gap-4 rounded-full p-4 text-gray-500 hover:text-white",
+        "transition-all duration-300 ease-in-out relative",
+        disabled
+          ? "hover:bg-mti-gray-dim cursor-not-allowed"
+          : "hover:bg-mti-purple-light cursor-pointer",
+        path.startsWith(keyPath) && "bg-mti-purple-light text-white",
+        isMinimized ? "w-fit" : "w-full min-w-[200px] px-8 2xl:min-w-[220px]"
+      )}
+    >
+      <Icon size={24} />
+      {!isMinimized && <span className="text-lg font-semibold">{label}</span>}
+      {!!badge && badge > 0 && (
+        <div
+          className={clsx(
+            "bg-mti-purple-light h-5 w-5 text-xs rounded-full flex items-center justify-center text-white",
+            "transition ease-in-out duration-300",
+            isMinimized && "absolute right-0 top-0"
+          )}
+        >
+          {badge}
+        </div>
+      )}
+    </Link>
+  );
 };
 
 export default function Sidebar({
-	path,
-	entities = [],
-	navDisabled = false,
-	focusMode = false,
-	user,
-	onFocusLayerMouseEnter,
-	className
+  path,
+  entities = [],
+  navDisabled = false,
+  focusMode = false,
+  user,
+  onFocusLayerMouseEnter,
+  className,
 }: Props) {
-	const router = useRouter();
+  const router = useRouter();
 
-	const isAdmin = useMemo(() => ['developer', 'admin'].includes(user?.type), [user?.type])
+  const isAdmin = useMemo(
+    () => ["developer", "admin"].includes(user?.type),
+    [user?.type]
+  );
 
-	const [isMinimized, toggleMinimize] = usePreferencesStore((state) => [state.isSidebarMinimized, state.toggleSidebarMinimized]);
+  const [isMinimized, toggleMinimize] = usePreferencesStore((state) => [
+    state.isSidebarMinimized,
+    state.toggleSidebarMinimized,
+  ]);
 
-	const { totalAssignedTickets } = useTicketsListener(user.id);
-	const { permissions } = usePermissions(user.id);
+  const { permissions } = usePermissions(user.id);
 
-	const entitiesAllowStatistics = useAllowedEntities(user, entities, "view_statistics")
-	const entitiesAllowPaymentRecord = useAllowedEntities(user, entities, "view_payment_record")
+  const entitiesAllowStatistics = useAllowedEntities(
+    user,
+    entities,
+    "view_statistics"
+  );
+  const entitiesAllowPaymentRecord = useAllowedEntities(
+    user,
+    entities,
+    "view_payment_record"
+  );
 
-	const entitiesAllowGeneration = useAllowedEntitiesSomePermissions(user, entities, [
-		"generate_reading", "generate_listening", "generate_writing", "generate_speaking", "generate_level"
-	])
+  const entitiesAllowGeneration = useAllowedEntitiesSomePermissions(
+    user,
+    entities,
+    [
+      "generate_reading",
+      "generate_listening",
+      "generate_writing",
+      "generate_speaking",
+      "generate_level",
+    ]
+  );
 
-	const logout = async () => {
-		axios.post("/api/logout").finally(() => {
-			setTimeout(() => router.reload(), 500);
-		});
-	};
+  const sidebarPermissions = useMemo<{ [key: string]: boolean }>(() => {
+    if (user.type === "developer") {
+      return {
+        viewExams: true,
+        viewStats: true,
+        viewRecords: true,
+        viewTickets: true,
+        viewClassrooms: true,
+        viewSettings: true,
+        viewPaymentRecord: true,
+        viewGeneration: true,
+      };
+    }
+    const sidebarPermissions: { [key: string]: boolean } = {
+      viewExams: false,
+      viewStats: false,
+      viewRecords: false,
+      viewTickets: false,
+      viewClassrooms: false,
+      viewSettings: false,
+      viewPaymentRecord: false,
+      viewGeneration: false,
+    };
 
-	const disableNavigation = preventNavigation(navDisabled, focusMode);
+    if (!user || !user?.type) return sidebarPermissions;
 
-	return (
-		<section
-			className={clsx(
-				"relative flex h-full flex-col justify-between bg-transparent px-4 py-4 pb-8",
-				isMinimized ? "w-fit" : "-xl:w-fit w-1/6",
-				className,
-			)}>
-			<div className="-xl:hidden flex-col gap-3 xl:flex">
-				<Nav disabled={disableNavigation} Icon={MdSpaceDashboard} label="Dashboard" path={path} keyPath="/dashboard" isMinimized={isMinimized} />
-				{checkAccess(user, ["student", "teacher", "developer"], permissions, "viewExams") && (
-					<Nav disabled={disableNavigation} Icon={BsFileEarmarkText} label="Practice" path={path} keyPath="/exam" isMinimized={isMinimized} />
-				)}
-				{checkAccess(user, getTypesOfUser(["agent"])) && entitiesAllowStatistics.length > 0 && (
-					<Nav disabled={disableNavigation} Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" isMinimized={isMinimized} />
-				)}
-				{checkAccess(user, ["developer", "admin", "mastercorporate", "corporate", "teacher", "student"], permissions) && (
-					<Nav
-						disabled={disableNavigation}
-						Icon={BsPeople}
-						label="Classrooms"
-						path={path}
-						keyPath="/classrooms"
-						isMinimized={isMinimized}
-					/>
-				)}
-				{checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewRecords") && (
-					<Nav disabled={disableNavigation} Icon={BsClockHistory} label="Record" path={path} keyPath="/record" isMinimized={isMinimized} />
-				)}
-				{checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewRecords") && (
-					<Nav disabled={disableNavigation} Icon={CiDumbbell} label="Training" path={path} keyPath="/training" isMinimized={isMinimized} />
-				)}
-				{checkAccess(user, ["admin", "developer", "agent", "corporate", "mastercorporate"]) && entitiesAllowPaymentRecord.length > 0 && (
-					<Nav
-						disabled={disableNavigation}
-						Icon={BsCurrencyDollar}
-						label="Payment Record"
-						path={path}
-						keyPath="/payment-record"
-						isMinimized={isMinimized}
-					/>
-				)}
-				{checkAccess(user, ["admin", "developer", "corporate", "teacher", "mastercorporate"]) && (
-					<Nav
-						disabled={disableNavigation}
-						Icon={BsShieldFill}
-						label="Settings"
-						path={path}
-						keyPath="/settings"
-						isMinimized={isMinimized}
-					/>
-				)}
-				{checkAccess(user, ["admin", "developer", "agent"], permissions, "viewTickets") && (
-					<Nav
-						disabled={disableNavigation}
-						Icon={BsClipboardData}
-						label="Tickets"
-						path={path}
-						keyPath="/tickets"
-						isMinimized={isMinimized}
-						badge={totalAssignedTickets}
-					/>
-				)}
-				{checkAccess(user, ["admin", "developer", "teacher", 'corporate', 'mastercorporate'])
-					&& (entitiesAllowGeneration.length > 0 || isAdmin) && (
-						<Nav
-							disabled={disableNavigation}
-							Icon={BsCloudFill}
-							label="Generation"
-							path={path}
-							keyPath="/generation"
-							isMinimized={isMinimized}
-						/>
-					)}
-			</div>
-			<div className="-xl:flex flex-col gap-3 xl:hidden">
-				<Nav disabled={disableNavigation} Icon={MdSpaceDashboard} label="Dashboard" path={path} keyPath="/" isMinimized />
-				<Nav disabled={disableNavigation} Icon={BsFileEarmarkText} label="Exams" path={path} keyPath="/exam" isMinimized />
-				{checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewStats") && (
-					<Nav disabled={disableNavigation} Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" isMinimized />
-				)}
-				{checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewRecords") && (
-					<Nav disabled={disableNavigation} Icon={BsClockHistory} label="Record" path={path} keyPath="/record" isMinimized />
-				)}
-				{checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewRecords") && (
-					<Nav disabled={disableNavigation} Icon={CiDumbbell} label="Training" path={path} keyPath="/training" isMinimized />
-				)}
-				{checkAccess(user, getTypesOfUser(["student"])) && (
-					<Nav disabled={disableNavigation} Icon={BsShieldFill} label="Settings" path={path} keyPath="/settings" isMinimized />
-				)}
-				{entitiesAllowGeneration.length > 0 && (
-					<Nav
-						disabled={disableNavigation}
-						Icon={BsCloudFill}
-						label="Generation"
-						path={path}
-						keyPath="/generation"
-						isMinimized
-					/>
-				)}
-			</div>
+    const neededPermissions = permissions.reduce((acc, curr) => {
+      if (
+        ["viewExams", "viewRecords", "viewTickets"].includes(curr as string)
+      ) {
+        acc.push(curr);
+      }
+      return acc;
+    }, [] as PermissionType[]);
 
-			<div className="2xl:fixed bottom-12 flex flex-col gap-0 -2xl:mt-8">
-				<div
-					role="button"
-					tabIndex={1}
-					onClick={toggleMinimize}
-					className={clsx(
-						"hover:text-mti-rose -xl:hidden flex cursor-pointer items-center gap-4 rounded-full p-4 text-black transition duration-300 ease-in-out",
-						isMinimized ? "w-fit" : "w-full min-w-[250px] px-8",
-					)}>
-					{isMinimized ? <BsChevronBarRight size={24} /> : <BsChevronBarLeft size={24} />}
-					{!isMinimized && <span className="text-lg font-medium">Minimize</span>}
-				</div>
-				<div
-					role="button"
-					tabIndex={1}
-					onClick={focusMode ? () => { } : logout}
-					className={clsx(
-						"hover:text-mti-rose flex cursor-pointer items-center gap-4 rounded-full p-4 text-black transition duration-300 ease-in-out",
-						isMinimized ? "w-fit" : "w-full min-w-[250px] px-8",
-					)}>
-					<RiLogoutBoxFill size={24} />
-					{!isMinimized && <span className="-xl:hidden text-lg font-medium">Log Out</span>}
-				</div>
-			</div>
-			{focusMode && <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />}
-		</section>
-	);
+    if (
+      ["student", "teacher", "developer"].includes(user.type) &&
+      neededPermissions.includes("viewExams")
+    ) {
+      sidebarPermissions["viewExams"] = true;
+    }
+    if (
+      getTypesOfUser(["agent"]).includes(user.type) &&
+      (entitiesAllowStatistics.length > 0 ||
+        neededPermissions.includes("viewStats"))
+    ) {
+      sidebarPermissions["viewStats"] = true;
+    }
+    if (
+      [
+        "admin",
+        "developer",
+        "teacher",
+        "corporate",
+        "mastercorporate",
+      ].includes(user.type) &&
+      (entitiesAllowGeneration.length > 0 || isAdmin)
+    ) {
+      sidebarPermissions["viewGeneration"] = true;
+    }
+    if (
+      getTypesOfUser(["agent"]).includes(user.type) &&
+      neededPermissions.includes("viewRecords")
+    ) {
+      sidebarPermissions["viewRecords"] = true;
+    }
+    if (
+      ["admin", "developer", "agent"].includes(user.type) &&
+      neededPermissions.includes("viewTickets")
+    ) {
+      sidebarPermissions["viewTickets"] = true;
+    }
+    if (
+      [
+        "admin",
+        "mastercorporate",
+        "developer",
+        "corporate",
+        "teacher",
+        "student",
+      ].includes(user.type)
+    ) {
+      sidebarPermissions["viewClassrooms"] = true;
+    }
+    if (getTypesOfUser(["student", "agent"]).includes(user.type)) {
+      sidebarPermissions["viewSettings"] = true;
+    }
+    if (
+      ["admin", "developer", "agent", "corporate", "mastercorporate"].includes(
+        user.type
+      ) &&
+      entitiesAllowPaymentRecord.length > 0
+    ) {
+      sidebarPermissions["viewPaymentRecord"] = true;
+    }
+    return sidebarPermissions;
+  }, [
+    entitiesAllowGeneration.length,
+    entitiesAllowPaymentRecord.length,
+    entitiesAllowStatistics.length,
+    isAdmin,
+    permissions,
+    user,
+  ]);
+
+  const { totalAssignedTickets } = useTicketsListener(
+    user.id,
+    sidebarPermissions["viewTickets"]
+  );
+
+  const logout = async () => {
+    axios.post("/api/logout").finally(() => {
+      setTimeout(() => router.reload(), 500);
+    });
+  };
+
+  const disableNavigation = preventNavigation(navDisabled, focusMode);
+
+  return (
+    <section
+      className={clsx(
+        "relative flex h-full flex-col justify-between bg-transparent px-4 py-4 pb-8",
+        isMinimized ? "w-fit" : "-xl:w-fit w-1/6",
+        className
+      )}
+    >
+      <div className="-xl:hidden flex-col gap-3 xl:flex">
+        <Nav
+          disabled={disableNavigation}
+          Icon={MdSpaceDashboard}
+          label="Dashboard"
+          path={path}
+          keyPath="/dashboard"
+          isMinimized={isMinimized}
+        />
+        {sidebarPermissions["viewExams"] && (
+          <Nav
+            disabled={disableNavigation}
+            Icon={BsFileEarmarkText}
+            label="Practice"
+            path={path}
+            keyPath="/exam"
+            isMinimized={isMinimized}
+          />
+        )}
+        {sidebarPermissions["viewStats"] && (
+          <Nav
+            disabled={disableNavigation}
+            Icon={BsGraphUp}
+            label="Stats"
+            path={path}
+            keyPath="/stats"
+            isMinimized={isMinimized}
+          />
+        )}
+        {sidebarPermissions["viewClassrooms"] && (
+          <Nav
+            disabled={disableNavigation}
+            Icon={BsPeople}
+            label="Classrooms"
+            path={path}
+            keyPath="/classrooms"
+            isMinimized={isMinimized}
+          />
+        )}
+        {sidebarPermissions["viewRecords"] && (
+          <Nav
+            disabled={disableNavigation}
+            Icon={BsClockHistory}
+            label="Record"
+            path={path}
+            keyPath="/record"
+            isMinimized={isMinimized}
+          />
+        )}
+        {sidebarPermissions["viewRecords"] && (
+          <Nav
+            disabled={disableNavigation}
+            Icon={CiDumbbell}
+            label="Training"
+            path={path}
+            keyPath="/training"
+            isMinimized={isMinimized}
+          />
+        )}
+        {sidebarPermissions["viewPaymentRecords"] && (
+          <Nav
+            disabled={disableNavigation}
+            Icon={BsCurrencyDollar}
+            label="Payment Record"
+            path={path}
+            keyPath="/payment-record"
+            isMinimized={isMinimized}
+          />
+        )}
+        {sidebarPermissions["viewSettings"] && (
+          <Nav
+            disabled={disableNavigation}
+            Icon={BsShieldFill}
+            label="Settings"
+            path={path}
+            keyPath="/settings"
+            isMinimized={isMinimized}
+          />
+        )}
+        {sidebarPermissions["viewTickets"] && (
+          <Nav
+            disabled={disableNavigation}
+            Icon={BsClipboardData}
+            label="Tickets"
+            path={path}
+            keyPath="/tickets"
+            isMinimized={isMinimized}
+            badge={totalAssignedTickets}
+          />
+        )}
+        {sidebarPermissions["viewGeneration"] && (
+          <Nav
+            disabled={disableNavigation}
+            Icon={BsCloudFill}
+            label="Generation"
+            path={path}
+            keyPath="/generation"
+            isMinimized={isMinimized}
+          />
+        )}
+      </div>
+      <div className="-xl:flex flex-col gap-3 xl:hidden">
+        <Nav
+          disabled={disableNavigation}
+          Icon={MdSpaceDashboard}
+          label="Dashboard"
+          path={path}
+          keyPath="/"
+          isMinimized
+        />
+        <Nav
+          disabled={disableNavigation}
+          Icon={BsFileEarmarkText}
+          label="Exams"
+          path={path}
+          keyPath="/exam"
+          isMinimized
+        />
+        {sidebarPermissions["viewStats"] && (
+          <Nav
+            disabled={disableNavigation}
+            Icon={BsGraphUp}
+            label="Stats"
+            path={path}
+            keyPath="/stats"
+            isMinimized
+          />
+        )}
+        {sidebarPermissions["viewRecords"] && (
+          <Nav
+            disabled={disableNavigation}
+            Icon={BsClockHistory}
+            label="Record"
+            path={path}
+            keyPath="/record"
+            isMinimized
+          />
+        )}
+        {sidebarPermissions["viewRecords"] && (
+          <Nav
+            disabled={disableNavigation}
+            Icon={CiDumbbell}
+            label="Training"
+            path={path}
+            keyPath="/training"
+            isMinimized
+          />
+        )}
+        {sidebarPermissions["viewSettings"] && (
+          <Nav
+            disabled={disableNavigation}
+            Icon={BsShieldFill}
+            label="Settings"
+            path={path}
+            keyPath="/settings"
+            isMinimized
+          />
+        )}
+        {sidebarPermissions["viewGeneration"] && (
+          <Nav
+            disabled={disableNavigation}
+            Icon={BsCloudFill}
+            label="Generation"
+            path={path}
+            keyPath="/generation"
+            isMinimized
+          />
+        )}
+      </div>
+
+      <div className="2xl:fixed bottom-12 flex flex-col gap-0 -2xl:mt-8">
+        <div
+          role="button"
+          tabIndex={1}
+          onClick={toggleMinimize}
+          className={clsx(
+            "hover:text-mti-rose -xl:hidden flex cursor-pointer items-center gap-4 rounded-full p-4 text-black transition duration-300 ease-in-out",
+            isMinimized ? "w-fit" : "w-full min-w-[250px] px-8"
+          )}
+        >
+          {isMinimized ? (
+            <BsChevronBarRight size={24} />
+          ) : (
+            <BsChevronBarLeft size={24} />
+          )}
+          {!isMinimized && (
+            <span className="text-lg font-medium">Minimize</span>
+          )}
+        </div>
+        <div
+          role="button"
+          tabIndex={1}
+          onClick={focusMode ? () => {} : logout}
+          className={clsx(
+            "hover:text-mti-rose flex cursor-pointer items-center gap-4 rounded-full p-4 text-black transition duration-300 ease-in-out",
+            isMinimized ? "w-fit" : "w-full min-w-[250px] px-8"
+          )}
+        >
+          <RiLogoutBoxFill size={24} />
+          {!isMinimized && (
+            <span className="-xl:hidden text-lg font-medium">Log Out</span>
+          )}
+        </div>
+      </div>
+      {focusMode && (
+        <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />
+      )}
+    </section>
+  );
 }
diff --git a/src/exams/Selection.tsx b/src/exams/Selection.tsx
index 64f9f615..848c66c3 100644
--- a/src/exams/Selection.tsx
+++ b/src/exams/Selection.tsx
@@ -14,8 +14,6 @@ import {
   BsPen,
   BsXCircle,
 } from "react-icons/bs";
-import { totalExamsByModule } from "@/utils/stats";
-import useFilterRecordsByUser from "@/hooks/useFilterRecordsByUser";
 import Button from "@/components/Low/Button";
 import { sortByModuleName } from "@/utils/moduleUtils";
 import { capitalize } from "lodash";
@@ -24,7 +22,7 @@ import { Variant } from "@/interfaces/exam";
 import useSessions, { Session } from "@/hooks/useSessions";
 import SessionCard from "@/components/Medium/SessionCard";
 import useExamStore from "@/stores/exam";
-import moment from "moment";
+import useStats from "../hooks/useStats";
 
 interface Props {
   user: User;
@@ -41,7 +39,21 @@ export default function Selection({ user, page, onStart }: Props) {
   const [avoidRepeatedExams, setAvoidRepeatedExams] = useState(true);
   const [variant, setVariant] = useState<Variant>("full");
 
-  const { data: stats } = useFilterRecordsByUser<Stat[]>(user?.id);
+  const {
+    data: {
+      allStats = [],
+      moduleCount: { reading, listening, writing, speaking, level } = {
+        reading: 0,
+        listening: 0,
+        writing: 0,
+        speaking: 0,
+        level: 0,
+      },
+    },
+  } = useStats<{
+    allStats: Stat[];
+    moduleCount: Record<Module, number>;
+  }>(user?.id, !user?.id, "byModule");
   const { sessions, isLoading, reload } = useSessions(user.id);
 
   const dispatch = useExamStore((state) => state.dispatch);
@@ -77,7 +89,7 @@ export default function Selection({ user, page, onStart }: Props) {
                   <BsBook className="text-ielts-reading h-6 w-6 md:h-8 md:w-8" />
                 ),
                 label: "Reading",
-                value: totalExamsByModule(stats, "reading"),
+                value: reading,
                 tooltip: "The amount of reading exams performed.",
               },
               {
@@ -85,7 +97,7 @@ export default function Selection({ user, page, onStart }: Props) {
                   <BsHeadphones className="text-ielts-listening h-6 w-6 md:h-8 md:w-8" />
                 ),
                 label: "Listening",
-                value: totalExamsByModule(stats, "listening"),
+                value: listening,
                 tooltip: "The amount of listening exams performed.",
               },
               {
@@ -93,7 +105,7 @@ export default function Selection({ user, page, onStart }: Props) {
                   <BsPen className="text-ielts-writing h-6 w-6 md:h-8 md:w-8" />
                 ),
                 label: "Writing",
-                value: totalExamsByModule(stats, "writing"),
+                value: writing,
                 tooltip: "The amount of writing exams performed.",
               },
               {
@@ -101,7 +113,7 @@ export default function Selection({ user, page, onStart }: Props) {
                   <BsMegaphone className="text-ielts-speaking h-6 w-6 md:h-8 md:w-8" />
                 ),
                 label: "Speaking",
-                value: totalExamsByModule(stats, "speaking"),
+                value: speaking,
                 tooltip: "The amount of speaking exams performed.",
               },
               {
@@ -109,7 +121,7 @@ export default function Selection({ user, page, onStart }: Props) {
                   <BsClipboard className="text-ielts-level h-6 w-6 md:h-8 md:w-8" />
                 ),
                 label: "Level",
-                value: totalExamsByModule(stats, "level"),
+                value: level,
                 tooltip: "The amount of level exams performed.",
               },
             ]}
diff --git a/src/hooks/useEntities.tsx b/src/hooks/useEntities.tsx
index 434d5d1f..a9f17094 100644
--- a/src/hooks/useEntities.tsx
+++ b/src/hooks/useEntities.tsx
@@ -1,23 +1,22 @@
 import { EntityWithRoles } from "@/interfaces/entity";
-import { Discount } from "@/interfaces/paypal";
-import { Code, Group, User } from "@/interfaces/user";
 import axios from "axios";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
-export default function useEntities() {
+export default function useEntities(shouldNot?: boolean) {
   const [entities, setEntities] = useState<EntityWithRoles[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [isError, setIsError] = useState(false);
 
-  const getData = () => {
+  const getData = useCallback(() => {
+    if (shouldNot) return;
     setIsLoading(true);
     axios
       .get<EntityWithRoles[]>("/api/entities?showRoles=true")
       .then((response) => setEntities(response.data))
       .finally(() => setIsLoading(false));
-  };
+  }, [shouldNot]);
 
-  useEffect(getData, []);
+  useEffect(getData, [getData])
 
   return { entities, isLoading, isError, reload: getData };
 }
diff --git a/src/hooks/useStats.tsx b/src/hooks/useStats.tsx
new file mode 100644
index 00000000..1f182469
--- /dev/null
+++ b/src/hooks/useStats.tsx
@@ -0,0 +1,42 @@
+import axios from "axios";
+import { useCallback, useEffect, useState } from "react";
+
+export default function useStats<T extends any>(
+  id?: string,
+  shouldNotQuery: boolean = !id,
+  queryType: string = "stats"
+) {
+  type ElementType = T extends (infer U)[] ? U : never;
+
+  const [data, setData] = useState<T>({} as unknown as T);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isError, setIsError] = useState(false);
+
+  const getData = useCallback(() => {
+    if (shouldNotQuery) return;
+
+    setIsLoading(true);
+    setIsError(false);
+    let endpoint = `/api/stats/user/${id}`;
+    if (queryType) endpoint += `?query=${queryType}`;
+    axios
+      .get<T>(endpoint)
+      .then((response) => {
+        console.log(response.data);
+        setData(response.data);
+      })
+      .catch(() => setIsError(true))
+      .finally(() => setIsLoading(false));
+  }, [id, shouldNotQuery, queryType]);
+
+  useEffect(() => {
+    getData();
+  }, [getData]);
+
+  return {
+    data,
+    reload: getData,
+    isLoading,
+    isError,
+  };
+}
diff --git a/src/hooks/useTicketsListener.tsx b/src/hooks/useTicketsListener.tsx
index a3babb1a..75a552e9 100644
--- a/src/hooks/useTicketsListener.tsx
+++ b/src/hooks/useTicketsListener.tsx
@@ -1,26 +1,28 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import axios from "axios";
 
-const useTicketsListener = (userId?: string) => {
+const useTicketsListener = (userId?: string, canFetch?: boolean) => {
   const [assignedTickets, setAssignedTickets] = useState([]);
 
-  const getData = () => {
+  const getData = useCallback(() => {
     axios
       .get("/api/tickets/assignedToUser")
       .then((response) => setAssignedTickets(response.data));
-  };
-
-  useEffect(() => {
-    getData();
   }, []);
 
   useEffect(() => {
+    if (!canFetch) return;
+    getData();
+  }, [canFetch, getData]);
+
+  useEffect(() => {
+    if (!canFetch) return;
     const intervalId = setInterval(() => {
       getData();
     }, 60 * 1000);
 
     return () => clearInterval(intervalId);
-  }, [assignedTickets]);
+  }, [assignedTickets, canFetch, getData]);
 
   if (userId) {
     return {
diff --git a/src/interfaces/results.ts b/src/interfaces/results.ts
index 58832a4f..ba94076f 100644
--- a/src/interfaces/results.ts
+++ b/src/interfaces/results.ts
@@ -37,3 +37,5 @@ export interface Assignment {
 }
 
 export type AssignmentWithCorporateId = Assignment & { corporateId: string };
+
+export type AssignmentWithHasResults = Assignment & { hasResults: boolean };
diff --git a/src/pages/(exam)/ExamPage.tsx b/src/pages/(exam)/ExamPage.tsx
index b2f8963c..faad8317 100644
--- a/src/pages/(exam)/ExamPage.tsx
+++ b/src/pages/(exam)/ExamPage.tsx
@@ -1,9 +1,9 @@
 /* eslint-disable @next/next/no-img-element */
 import { Module } from "@/interfaces";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 
 import AbandonPopup from "@/components/AbandonPopup";
-import Layout from "@/components/High/Layout";
+import { LayoutContext } from "@/components/High/Layout";
 import Finish from "@/exams/Finish";
 import Level from "@/exams/Level";
 import Listening from "@/exams/Listening";
@@ -11,9 +11,12 @@ import Reading from "@/exams/Reading";
 import Selection from "@/exams/Selection";
 import Speaking from "@/exams/Speaking";
 import Writing from "@/exams/Writing";
-import { Exam, LevelExam, UserSolution, Variant, WritingExam } from "@/interfaces/exam";
+import { Exam, LevelExam, Variant } from "@/interfaces/exam";
 import { User } from "@/interfaces/user";
-import { evaluateSpeakingAnswer, evaluateWritingAnswer } from "@/utils/evaluation";
+import {
+  evaluateSpeakingAnswer,
+  evaluateWritingAnswer,
+} from "@/utils/evaluation";
 import { getExam } from "@/utils/exams";
 import axios from "axios";
 import { useRouter } from "next/router";
@@ -24,317 +27,424 @@ import useExamStore from "@/stores/exam";
 import useEvaluationPolling from "@/hooks/useEvaluationPolling";
 
 interface Props {
-	page: "exams" | "exercises";
-	user: User;
-	destination?: string
-	hideSidebar?: boolean
+  page: "exams" | "exercises";
+  user: User;
+  destination?: string;
+  hideSidebar?: boolean;
 }
 
-export default function ExamPage({ page, user, destination = "/", hideSidebar = false }: Props) {
-	const router = useRouter();
-	const [variant, setVariant] = useState<Variant>("full");
-	const [avoidRepeated, setAvoidRepeated] = useState(false);
-	const [showAbandonPopup, setShowAbandonPopup] = useState(false);
-	const [pendingExercises, setPendingExercises] = useState<string[]>([]);
+export default function ExamPage({
+  page,
+  user,
+  destination = "/",
+  hideSidebar = false,
+}: Props) {
+  const router = useRouter();
+  const [variant, setVariant] = useState<Variant>("full");
+  const [avoidRepeated, setAvoidRepeated] = useState(false);
+  const [showAbandonPopup, setShowAbandonPopup] = useState(false);
+  const [pendingExercises, setPendingExercises] = useState<string[]>([]);
 
-	const {
-		exam, setExam,
-		exams,
-		sessionId, setSessionId, setPartIndex,
-		moduleIndex, setModuleIndex,
-		setQuestionIndex, setExerciseIndex,
-		userSolutions, setUserSolutions,
-		showSolutions, setShowSolutions,
-		selectedModules, setSelectedModules,
-		setUser,
-		inactivity,
-		timeSpent,
-		assignment,
-		bgColor,
-		flags,
-		dispatch,
-		reset: resetStore,
-		saveStats,
-		saveSession,
-		setFlags,
-		setShuffles,
-		evaluated,
-	} = useExamStore();
+  const {
+    exam,
+    setExam,
+    exams,
+    sessionId,
+    setSessionId,
+    setPartIndex,
+    moduleIndex,
+    setModuleIndex,
+    setQuestionIndex,
+    setExerciseIndex,
+    userSolutions,
+    setUserSolutions,
+    showSolutions,
+    setShowSolutions,
+    selectedModules,
+    setSelectedModules,
+    setUser,
+    inactivity,
+    timeSpent,
+    assignment,
+    bgColor,
+    flags,
+    dispatch,
+    reset: resetStore,
+    saveStats,
+    saveSession,
+    setFlags,
+    setShuffles,
+    evaluated,
+  } = useExamStore();
 
-	const [isFetchingExams, setIsFetchingExams] = useState(false);
-	const [isExamLoaded, setIsExamLoaded] = useState(moduleIndex < selectedModules.length);
+  const [isFetchingExams, setIsFetchingExams] = useState(false);
+  const [isExamLoaded, setIsExamLoaded] = useState(
+    moduleIndex < selectedModules.length
+  );
 
-	useEffect(() => {
-		setIsExamLoaded(moduleIndex < selectedModules.length);
-	}, [showSolutions, moduleIndex, selectedModules]);
+  useEffect(() => {
+    setIsExamLoaded(moduleIndex < selectedModules.length);
+  }, [showSolutions, moduleIndex, selectedModules]);
 
-	useEffect(() => {
-		if (!showSolutions && sessionId.length === 0 && user?.id) {
-			const shortUID = new ShortUniqueId();
-			setUser(user.id);
-			setSessionId(shortUID.randomUUID(8));
-		}
-	}, [setSessionId, isExamLoaded, sessionId, showSolutions, setUser, user?.id]);
+  useEffect(() => {
+    if (!showSolutions && sessionId.length === 0 && user?.id) {
+      const shortUID = new ShortUniqueId();
+      setUser(user.id);
+      setSessionId(shortUID.randomUUID(8));
+    }
+  }, [setSessionId, isExamLoaded, sessionId, showSolutions, setUser, user?.id]);
 
-	useEffect(() => {
-		if (user?.type === "developer") console.log(exam);
-	}, [exam, user]);
+  useEffect(() => {
+    if (user?.type === "developer") console.log(exam);
+  }, [exam, user]);
 
-	useEffect(() => {
-		(async () => {
-			if (selectedModules.length > 0 && exams.length === 0) {
-				setIsFetchingExams(true);
-				const examPromises = selectedModules.map((module) =>
-					getExam(
-						module,
-						avoidRepeated,
-						variant,
-						user?.type === "student" || user?.type === "developer" ? user.preferredGender : undefined,
-					),
-				);
-				Promise.all(examPromises).then((values) => {
-					setIsFetchingExams(false);
-					if (values.every((x) => !!x)) {
-						dispatch({ type: 'INIT_EXAM', payload: { exams: values.map((x) => x!), modules: selectedModules } })
-					} else {
-						toast.error("Something went wrong, please try again");
-						setTimeout(router.reload, 500);
-					}
-				});
-			}
-		})();
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [selectedModules, exams]);
+  useEffect(() => {
+    (async () => {
+      if (selectedModules.length > 0 && exams.length === 0) {
+        setIsFetchingExams(true);
+        const examPromises = selectedModules.map((module) =>
+          getExam(
+            module,
+            avoidRepeated,
+            variant,
+            user?.type === "student" || user?.type === "developer"
+              ? user.preferredGender
+              : undefined
+          )
+        );
+        Promise.all(examPromises).then((values) => {
+          setIsFetchingExams(false);
+          if (values.every((x) => !!x)) {
+            dispatch({
+              type: "INIT_EXAM",
+              payload: {
+                exams: values.map((x) => x!),
+                modules: selectedModules,
+              },
+            });
+          } else {
+            toast.error("Something went wrong, please try again");
+            setTimeout(router.reload, 500);
+          }
+        });
+      }
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedModules, exams]);
 
+  const reset = () => {
+    resetStore();
+    setVariant("full");
+    setAvoidRepeated(false);
+    setShowAbandonPopup(false);
+  };
 
-	const reset = () => {
-		resetStore();
-		setVariant("full");
-		setAvoidRepeated(false);
-		setShowAbandonPopup(false);
-	};
+  useEffect(() => {
+    if (flags.finalizeModule && !showSolutions && flags.pendingEvaluation) {
+      if (
+        exam &&
+        (exam.module === "writing" || exam.module === "speaking") &&
+        userSolutions.length > 0 &&
+        !showSolutions
+      ) {
+        const exercisesToEvaluate = exam.exercises.map(
+          (exercise) => exercise.id
+        );
 
-	useEffect(() => {
-		if (flags.finalizeModule && !showSolutions && flags.pendingEvaluation) {
-			if (exam && (exam.module === "writing" || exam.module === "speaking") && userSolutions.length > 0 && !showSolutions) {
-				const exercisesToEvaluate = exam.exercises
-					.map(exercise => exercise.id);
+        setPendingExercises(exercisesToEvaluate);
+        (async () => {
+          await Promise.all(
+            exam.exercises.map(async (exercise, index) => {
+              if (exercise.type === "writing")
+                await evaluateWritingAnswer(
+                  user.id,
+                  sessionId,
+                  exercise,
+                  index + 1,
+                  userSolutions.find((x) => x.exercise === exercise.id)!,
+                  exercise.attachment?.url
+                );
 
-				setPendingExercises(exercisesToEvaluate);
-				(async () => {
-					await Promise.all(
-						exam.exercises.map(async (exercise, index) => {
-							if (exercise.type === "writing")
-								await evaluateWritingAnswer(user.id, sessionId, exercise, index + 1, userSolutions.find((x) => x.exercise === exercise.id)!, exercise.attachment?.url);
+              if (
+                exercise.type === "interactiveSpeaking" ||
+                exercise.type === "speaking"
+              ) {
+                await evaluateSpeakingAnswer(
+                  user.id,
+                  sessionId,
+                  exercise,
+                  userSolutions.find((x) => x.exercise === exercise.id)!,
+                  index + 1
+                );
+              }
+            })
+          );
+        })();
+      }
+    }
+  }, [exam, showSolutions, userSolutions, sessionId, user?.id, flags]);
 
-							if (exercise.type === "interactiveSpeaking" || exercise.type === "speaking") {
-								await evaluateSpeakingAnswer(
-									user.id,
-									sessionId,
-									exercise,
-									userSolutions.find((x) => x.exercise === exercise.id)!,
-									index + 1,
-								);
-							}
-						}),
-					)
-				})();
-			}
-		}
-	}, [exam, showSolutions, userSolutions, sessionId, user?.id, flags]);
+  useEvaluationPolling({ pendingExercises, setPendingExercises });
 
-	useEvaluationPolling({ pendingExercises, setPendingExercises });
+  useEffect(() => {
+    if (flags.finalizeExam && moduleIndex !== -1) {
+      setModuleIndex(-1);
+    }
+  }, [flags.finalizeExam, moduleIndex, setModuleIndex]);
 
-	useEffect(() => {
-		if (flags.finalizeExam && moduleIndex !== -1) {
-			setModuleIndex(-1);
+  useEffect(() => {
+    if (
+      flags.finalizeExam &&
+      !flags.pendingEvaluation &&
+      pendingExercises.length === 0
+    ) {
+      (async () => {
+        if (evaluated.length !== 0) {
+          setUserSolutions(
+            userSolutions.map((solution) => {
+              const evaluatedSolution = evaluated.find(
+                (e) => e.exercise === solution.exercise
+              );
+              if (evaluatedSolution) {
+                return { ...solution, ...evaluatedSolution };
+              }
+              return solution;
+            })
+          );
+        }
+        await saveStats();
+        await axios.get("/api/stats/update");
+        setShowSolutions(true);
+        setFlags({ finalizeExam: false });
+        dispatch({ type: "UPDATE_EXAMS" });
+      })();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    saveStats,
+    setFlags,
+    setModuleIndex,
+    evaluated,
+    pendingExercises,
+    setUserSolutions,
+    flags,
+  ]);
 
+  const aggregateScoresByModule = (
+    isPractice?: boolean
+  ): {
+    module: Module;
+    total: number;
+    missing: number;
+    correct: number;
+  }[] => {
+    const scores: {
+      [key in Module]: { total: number; missing: number; correct: number };
+    } = {
+      reading: {
+        total: 0,
+        correct: 0,
+        missing: 0,
+      },
+      listening: {
+        total: 0,
+        correct: 0,
+        missing: 0,
+      },
+      writing: {
+        total: 0,
+        correct: 0,
+        missing: 0,
+      },
+      speaking: {
+        total: 0,
+        correct: 0,
+        missing: 0,
+      },
+      level: {
+        total: 0,
+        correct: 0,
+        missing: 0,
+      },
+    };
 
-		}
-	}, [flags.finalizeExam, moduleIndex, setModuleIndex]);
+    userSolutions.forEach((x) => {
+      if ((isPractice && x.isPractice) || (!isPractice && !x.isPractice)) {
+        const examModule =
+          x.module ||
+          (x.type === "writing"
+            ? "writing"
+            : x.type === "speaking" || x.type === "interactiveSpeaking"
+            ? "speaking"
+            : undefined);
 
-	useEffect(() => {
-		if (flags.finalizeExam && !flags.pendingEvaluation && pendingExercises.length === 0) {
-			(async () => {
-				if (evaluated.length !== 0) {
-					setUserSolutions(
-						userSolutions.map(solution => {
-							const evaluatedSolution = evaluated.find(e => e.exercise === solution.exercise);
-							if (evaluatedSolution) {
-								return { ...solution, ...evaluatedSolution };
-							}
-							return solution;
-						})
-					);
-				}
-				await saveStats();
-				await axios.get("/api/stats/update");
-				setShowSolutions(true);
-				setFlags({ finalizeExam: false });
-				dispatch({ type: "UPDATE_EXAMS" })
-			})();
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [saveStats, setFlags, setModuleIndex, evaluated, pendingExercises, setUserSolutions, flags]);
+        scores[examModule!] = {
+          total: scores[examModule!].total + x.score.total,
+          correct: scores[examModule!].correct + x.score.correct,
+          missing: scores[examModule!].missing + x.score.missing,
+        };
+      }
+    });
 
+    return Object.keys(scores).reduce((acc, x) => {
+      if (scores[x as Module].total > 0) {
+        acc.push({ module: x as Module, ...scores[x as Module] });
+      }
+      return acc;
+    }, [] as any[]);
+  };
 
-	const aggregateScoresByModule = (isPractice?: boolean): {
-		module: Module;
-		total: number;
-		missing: number;
-		correct: number;
-	}[] => {
-		const scores: {
-			[key in Module]: { total: number; missing: number; correct: number };
-		} = {
-			reading: {
-				total: 0,
-				correct: 0,
-				missing: 0,
-			},
-			listening: {
-				total: 0,
-				correct: 0,
-				missing: 0,
-			},
-			writing: {
-				total: 0,
-				correct: 0,
-				missing: 0,
-			},
-			speaking: {
-				total: 0,
-				correct: 0,
-				missing: 0,
-			},
-			level: {
-				total: 0,
-				correct: 0,
-				missing: 0,
-			},
-		};
+  const ModuleExamMap: Record<Module, React.ComponentType<ExamProps<Exam>>> = {
+    reading: Reading as React.ComponentType<ExamProps<Exam>>,
+    listening: Listening as React.ComponentType<ExamProps<Exam>>,
+    writing: Writing as React.ComponentType<ExamProps<Exam>>,
+    speaking: Speaking as React.ComponentType<ExamProps<Exam>>,
+    level: Level as React.ComponentType<ExamProps<Exam>>,
+  };
 
-		userSolutions.filter(x => isPractice ? x.isPractice : !x.isPractice).forEach((x) => {
-			const examModule =
-				x.module || (x.type === "writing" ? "writing" : x.type === "speaking" || x.type === "interactiveSpeaking" ? "speaking" : undefined);
+  const CurrentExam = exam?.module ? ModuleExamMap[exam.module] : undefined;
 
-			scores[examModule!] = {
-				total: scores[examModule!].total + x.score.total,
-				correct: scores[examModule!].correct + x.score.correct,
-				missing: scores[examModule!].missing + x.score.missing,
-			};
-		});
+  const onAbandon = async () => {
+    await saveSession();
+    reset();
+  };
 
-		return Object.keys(scores)
-			.filter((x) => scores[x as Module].total > 0)
-			.map((x) => ({ module: x as Module, ...scores[x as Module] }));
-	};
+  const {
+    setBgColor,
+    setHideSidebar,
+    setFocusMode,
+    setOnFocusLayerMouseEnter,
+  } = React.useContext(LayoutContext);
 
-	const ModuleExamMap: Record<Module, React.ComponentType<ExamProps<Exam>>> = {
-		"reading": Reading as React.ComponentType<ExamProps<Exam>>,
-		"listening": Listening as React.ComponentType<ExamProps<Exam>>,
-		"writing": Writing as React.ComponentType<ExamProps<Exam>>,
-		"speaking": Speaking as React.ComponentType<ExamProps<Exam>>,
-		"level": Level as React.ComponentType<ExamProps<Exam>>,
-	}
+  useEffect(() => {
+    setOnFocusLayerMouseEnter(() => () => setShowAbandonPopup(true));
+  }, [
+  ]);
 
-	const CurrentExam = exam?.module ? ModuleExamMap[exam.module] : undefined;
-
-	const onAbandon = async () => {
-		await saveSession();
-		reset();
-	};
-
-	return (
-		<>
-			<ToastContainer />
-			{user && (
-				<Layout
-					user={user}
-					bgColor={bgColor}
-					hideSidebar={hideSidebar}
-					className="justify-between"
-					focusMode={selectedModules.length !== 0 && !showSolutions && moduleIndex < selectedModules.length}
-					onFocusLayerMouseEnter={() => setShowAbandonPopup(true)}>
-					<>
-						{/* Modules weren't yet set by an INIT_EXAM or INIT_SOLUTIONS dispatch, show Selection component*/}
-						{selectedModules.length === 0 && <Selection
-							page={page}
-							user={user!}
-							onStart={(modules: Module[], avoid: boolean, variant: Variant) => {
-								setModuleIndex(0);
-								setAvoidRepeated(avoid);
-								setSelectedModules(modules);
-								setVariant(variant);
-							}}
-						/>}
-						{isFetchingExams && (
-							<div className="flex flex-grow flex-col items-center justify-center animate-pulse">
-								<span className={`loading loading-infinity w-32 bg-ielts-${selectedModules[0]}`} />
-								<span className={`font-bold text-2xl text-ielts-${selectedModules[0]}`}>Loading Exam ...</span>
-							</div>
-						)}
-						{(moduleIndex === -1 && selectedModules.length !== 0) &&
-							<Finish
-								isLoading={flags.pendingEvaluation}
-								user={user!}
-								modules={selectedModules}
-								solutions={userSolutions}
-								assignment={assignment}
-								information={{
-									timeSpent,
-									inactivity,
-								}}
-								destination={destination}
-								onViewResults={(index?: number) => {
-									if (exams[0].module === "level") {
-										const levelExam = exams[0] as LevelExam;
-										const allExercises = levelExam.parts.flatMap((part) => part.exercises);
-										const exerciseOrderMap = new Map(allExercises.map((ex, index) => [ex.id, index]));
-										const orderedSolutions = userSolutions.slice().sort((a, b) => {
-											const indexA = exerciseOrderMap.get(a.exercise) ?? Infinity;
-											const indexB = exerciseOrderMap.get(b.exercise) ?? Infinity;
-											return indexA - indexB;
-										});
-										setUserSolutions(orderedSolutions);
-									} else {
-										setUserSolutions(userSolutions);
-									}
-									setShuffles([]);
-									if (index === undefined) {
-										setFlags({ reviewAll: true });
-										setModuleIndex(0);
-										setExam(exams[0]);
-									} else {
-										setModuleIndex(index);
-										setExam(exams[index]);
-									}
-									setShowSolutions(true);
-									setQuestionIndex(0);
-									setExerciseIndex(0);
-									setPartIndex(0);
-								}}
-								scores={aggregateScoresByModule()}
-								practiceScores={aggregateScoresByModule(true)}
-							/>}
-						{/* Exam is on going, display it and the abandon modal */}
-						{isExamLoaded && moduleIndex !== -1 && (
-							<>
-								{exam && CurrentExam && <CurrentExam exam={exam} showSolutions={showSolutions} />}
-								{!showSolutions && <AbandonPopup
-									isOpen={showAbandonPopup}
-									abandonPopupTitle="Leave Exercise"
-									abandonPopupDescription="Are you sure you want to leave the exercise? Your progress will be saved and this exam can be resumed on the Dashboard."
-									abandonConfirmButtonText="Confirm"
-									onAbandon={onAbandon}
-									onCancel={() => setShowAbandonPopup(false)}
-								/>
-								}
-							</>
-						)}
-					</>
-				</Layout>
-			)}
-		</>
-	);
+  useEffect(() => {
+    setBgColor(bgColor);
+    setHideSidebar(hideSidebar);
+    setFocusMode(
+      selectedModules.length !== 0 &&
+        !showSolutions &&
+        moduleIndex < selectedModules.length
+    );
+  }, [
+    bgColor,
+    hideSidebar,
+    moduleIndex,
+    selectedModules.length,
+    setBgColor,
+    setFocusMode,
+    setHideSidebar,
+    showSolutions,
+  ]);
+  return (
+    <>
+      <ToastContainer />
+      {user && (
+        <>
+          {/* Modules weren't yet set by an INIT_EXAM or INIT_SOLUTIONS dispatch, show Selection component*/}
+          {selectedModules.length === 0 && (
+            <Selection
+              page={page}
+              user={user!}
+              onStart={(
+                modules: Module[],
+                avoid: boolean,
+                variant: Variant
+              ) => {
+                setModuleIndex(0);
+                setAvoidRepeated(avoid);
+                setSelectedModules(modules);
+                setVariant(variant);
+              }}
+            />
+          )}
+          {isFetchingExams && (
+            <div className="flex flex-grow flex-col items-center justify-center animate-pulse">
+              <span
+                className={`loading loading-infinity w-32 bg-ielts-${selectedModules[0]}`}
+              />
+              <span
+                className={`font-bold text-2xl text-ielts-${selectedModules[0]}`}
+              >
+                Loading Exam ...
+              </span>
+            </div>
+          )}
+          {moduleIndex === -1 && selectedModules.length !== 0 && (
+            <Finish
+              isLoading={flags.pendingEvaluation}
+              user={user!}
+              modules={selectedModules}
+              solutions={userSolutions}
+              assignment={assignment}
+              information={{
+                timeSpent,
+                inactivity,
+              }}
+              destination={destination}
+              onViewResults={(index?: number) => {
+                if (exams[0].module === "level") {
+                  const levelExam = exams[0] as LevelExam;
+                  const allExercises = levelExam.parts.flatMap(
+                    (part) => part.exercises
+                  );
+                  const exerciseOrderMap = new Map(
+                    allExercises.map((ex, index) => [ex.id, index])
+                  );
+                  const orderedSolutions = userSolutions
+                    .slice()
+                    .sort((a, b) => {
+                      const indexA =
+                        exerciseOrderMap.get(a.exercise) ?? Infinity;
+                      const indexB =
+                        exerciseOrderMap.get(b.exercise) ?? Infinity;
+                      return indexA - indexB;
+                    });
+                  setUserSolutions(orderedSolutions);
+                } else {
+                  setUserSolutions(userSolutions);
+                }
+                setShuffles([]);
+                if (index === undefined) {
+                  setFlags({ reviewAll: true });
+                  setModuleIndex(0);
+                  setExam(exams[0]);
+                } else {
+                  setModuleIndex(index);
+                  setExam(exams[index]);
+                }
+                setShowSolutions(true);
+                setQuestionIndex(0);
+                setExerciseIndex(0);
+                setPartIndex(0);
+              }}
+              scores={aggregateScoresByModule()}
+              practiceScores={aggregateScoresByModule(true)}
+            />
+          )}
+          {/* Exam is on going, display it and the abandon modal */}
+          {isExamLoaded && moduleIndex !== -1 && (
+            <>
+              {exam && CurrentExam && (
+                <CurrentExam exam={exam} showSolutions={showSolutions} />
+              )}
+              {!showSolutions && (
+                <AbandonPopup
+                  isOpen={showAbandonPopup}
+                  abandonPopupTitle="Leave Exercise"
+                  abandonPopupDescription="Are you sure you want to leave the exercise? Your progress will be saved and this exam can be resumed on the Dashboard."
+                  abandonConfirmButtonText="Confirm"
+                  onAbandon={onAbandon}
+                  onCancel={() => setShowAbandonPopup(false)}
+                />
+              )}
+            </>
+          )}
+        </>
+      )}
+    </>
+  );
 }
diff --git a/src/pages/(status)/PaymentDue.tsx b/src/pages/(status)/PaymentDue.tsx
index 5dfc9842..7ff8b626 100644
--- a/src/pages/(status)/PaymentDue.tsx
+++ b/src/pages/(status)/PaymentDue.tsx
@@ -1,18 +1,14 @@
 /* eslint-disable @next/next/no-img-element */
-import Layout from "@/components/High/Layout";
-import useGroups from "@/hooks/useGroups";
-import usePackages from "@/hooks/usePackages";
 import useUsers from "@/hooks/useUsers";
 import { User } from "@/interfaces/user";
 import clsx from "clsx";
-import { capitalize, sortBy } from "lodash";
+import { capitalize } from "lodash";
 import { useEffect, useMemo, useState } from "react";
 import useInvites from "@/hooks/useInvites";
 import { BsArrowRepeat } from "react-icons/bs";
 import InviteCard from "@/components/Medium/InviteCard";
 import { useRouter } from "next/router";
 import { ToastContainer } from "react-toastify";
-import useDiscounts from "@/hooks/useDiscounts";
 import PaymobPayment from "@/components/PaymobPayment";
 import moment from "moment";
 import { EntityWithRoles } from "@/interfaces/entity";
@@ -22,241 +18,345 @@ import { useAllowedEntities } from "@/hooks/useEntityPermissions";
 import Select from "@/components/Low/Select";
 
 interface Props {
-	user: User
-	discounts: Discount[]
-	packages: Package[]
-	entities: EntityWithRoles[]
-	hasExpired?: boolean;
-	reload: () => void;
+  user: User;
+  discounts: Discount[];
+  packages: Package[];
+  entities: EntityWithRoles[];
+  hasExpired?: boolean;
+  reload: () => void;
 }
 
-export default function PaymentDue({ user, discounts = [], entities = [], packages = [], hasExpired = false, reload }: Props) {
-	const [isLoading, setIsLoading] = useState(false);
-	const [entity, setEntity] = useState<EntityWithRoles>()
+export default function PaymentDue({
+  user,
+  discounts = [],
+  entities = [],
+  packages = [],
+  hasExpired = false,
+  reload,
+}: Props) {
+  const [isLoading, setIsLoading] = useState(false);
+  const [entity, setEntity] = useState<EntityWithRoles>();
 
-	const router = useRouter();
+  const router = useRouter();
 
-	const { users } = useUsers();
-	const { invites, isLoading: isInvitesLoading, reload: reloadInvites } = useInvites({ to: user?.id });
+  const { users } = useUsers();
+  const {
+    invites,
+    isLoading: isInvitesLoading,
+    reload: reloadInvites,
+  } = useInvites({ to: user?.id });
 
-	const isIndividual = useMemo(() => {
-		if (isAdmin(user)) return false;
-		if (user?.type !== "student") return false;
+  const isIndividual = useMemo(() => {
+    if (isAdmin(user)) return false;
+    if (user?.type !== "student") return false;
 
-		return user.entities.length === 0
-	}, [user])
+    return user.entities.length === 0;
+  }, [user]);
 
-	const appliedDiscount = useMemo(() => {
-		const biggestDiscount = [...discounts].sort((a, b) => b.percentage - a.percentage).shift();
+  const appliedDiscount = useMemo(() => {
+    const biggestDiscount = [...discounts]
+      .sort((a, b) => b.percentage - a.percentage)
+      .shift();
 
-		if (!biggestDiscount || (biggestDiscount.validUntil && moment(biggestDiscount.validUntil).isBefore(moment())))
-			return 0;
+    if (
+      !biggestDiscount ||
+      (biggestDiscount.validUntil &&
+        moment(biggestDiscount.validUntil).isBefore(moment()))
+    )
+      return 0;
 
-		return biggestDiscount.percentage
-	}, [discounts])
+    return biggestDiscount.percentage;
+  }, [discounts]);
 
-	const entitiesThatCanBePaid = useAllowedEntities(user, entities, 'pay_entity')
+  const entitiesThatCanBePaid = useAllowedEntities(
+    user,
+    entities,
+    "pay_entity"
+  );
 
-	useEffect(() => {
-		if (entitiesThatCanBePaid.length > 0) setEntity(entitiesThatCanBePaid[0])
-	}, [entitiesThatCanBePaid])
+  useEffect(() => {
+    if (entitiesThatCanBePaid.length > 0) setEntity(entitiesThatCanBePaid[0]);
+  }, [entitiesThatCanBePaid]);
 
-	return (
-		<>
-			<ToastContainer />
-			{isLoading && (
-				<div className="absolute left-0 top-0 z-[999] h-screen w-screen overflow-hidden bg-black/60">
-					<div className="absolute left-1/2 top-1/2 flex h-fit w-fit -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-8 text-white">
-						<span className={clsx("loading loading-infinity w-48 animate-pulse")} />
-						<span className={clsx("text-2xl font-bold animate-pulse")}>Completing your payment...</span>
-						<span>If you canceled your payment or it failed, please click the button below to restart</span>
-						<button
-							onClick={() => setIsLoading(false)}
-							className="border border-white rounded-full px-4 py-2 hover:bg-white/80 hover:text-black cursor-pointer transition ease-in-out duration-300">
-							Cancel Payment
-						</button>
-					</div>
-				</div>
-			)}
-			<Layout user={user} navDisabled={hasExpired}>
-				{invites.length > 0 && (
-					<section className="flex flex-col gap-1 md:gap-3">
-						<div className="flex items-center gap-4">
-							<div
-								onClick={reloadInvites}
-								className="text-mti-purple-light hover:text-mti-purple-dark flex cursor-pointer items-center gap-2 transition duration-300 ease-in-out">
-								<span className="text-mti-black text-lg font-bold">Invites</span>
-								<BsArrowRepeat className={clsx("text-xl", isInvitesLoading && "animate-spin")} />
-							</div>
-						</div>
-						<span className="text-mti-gray-taupe scrollbar-hide flex gap-8 overflow-x-scroll">
-							{invites.map((invite) => (
-								<InviteCard
-									key={invite.id}
-									invite={invite}
-									users={users}
-									reload={() => {
-										reloadInvites();
-										router.reload();
-									}}
-								/>
-							))}
-						</span>
-					</section>
-				)}
+  return (
+    <>
+      <ToastContainer />
+      {isLoading && (
+        <div className="absolute left-0 top-0 z-[999] h-screen w-screen overflow-hidden bg-black/60">
+          <div className="absolute left-1/2 top-1/2 flex h-fit w-fit -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-8 text-white">
+            <span
+              className={clsx("loading loading-infinity w-48 animate-pulse")}
+            />
+            <span className={clsx("text-2xl font-bold animate-pulse")}>
+              Completing your payment...
+            </span>
+            <span>
+              If you canceled your payment or it failed, please click the button
+              below to restart
+            </span>
+            <button
+              onClick={() => setIsLoading(false)}
+              className="border border-white rounded-full px-4 py-2 hover:bg-white/80 hover:text-black cursor-pointer transition ease-in-out duration-300"
+            >
+              Cancel Payment
+            </button>
+          </div>
+        </div>
+      )}
+      <>
+        {invites.length > 0 && (
+          <section className="flex flex-col gap-1 md:gap-3">
+            <div className="flex items-center gap-4">
+              <div
+                onClick={reloadInvites}
+                className="text-mti-purple-light hover:text-mti-purple-dark flex cursor-pointer items-center gap-2 transition duration-300 ease-in-out"
+              >
+                <span className="text-mti-black text-lg font-bold">
+                  Invites
+                </span>
+                <BsArrowRepeat
+                  className={clsx(
+                    "text-xl",
+                    isInvitesLoading && "animate-spin"
+                  )}
+                />
+              </div>
+            </div>
+            <span className="text-mti-gray-taupe scrollbar-hide flex gap-8 overflow-x-scroll">
+              {invites.map((invite) => (
+                <InviteCard
+                  key={invite.id}
+                  invite={invite}
+                  users={users}
+                  reload={() => {
+                    reloadInvites();
+                    router.reload();
+                  }}
+                />
+              ))}
+            </span>
+          </section>
+        )}
 
-				<div className="flex w-full flex-col items-center justify-center gap-4 text-center">
-					{hasExpired && <span className="text-lg font-bold">You do not have time credits for your account type!</span>}
-					{isIndividual && (
-						<div className="scrollbar-hide flex w-full flex-col items-center gap-12 overflow-x-scroll">
-							<span className="max-w-lg">
-								To add to your use of EnCoach, please purchase one of the time packages available below:
-							</span>
-							<div className="flex w-full flex-wrap justify-center gap-8">
-								{packages.map((p) => (
-									<div key={p.id} className={clsx("flex flex-col items-start gap-6 rounded-xl bg-white p-4")}>
-										<div className="mb-2 flex flex-col items-start">
-											<img src="/logo_title.png" alt="EnCoach's Logo" className="w-32" />
-											<span className="text-xl font-semibold">
-												EnCoach - {p.duration}{" "}
-												{capitalize(
-													p.duration === 1 ? p.duration_unit.slice(0, p.duration_unit.length - 1) : p.duration_unit,
-												)}
-											</span>
-										</div>
-										<div className="flex w-full flex-col items-start gap-2">
-											{appliedDiscount === 0 && (
-												<span className="text-2xl">
-													{p.price} {p.currency}
-												</span>
-											)}
-											{appliedDiscount > 0 && (
-												<div className="flex items-center gap-2">
-													<span className="text-2xl line-through">
-														{p.price} {p.currency}
-													</span>
-													<span className="text-2xl text-mti-red-light">
-														{(p.price - p.price * (appliedDiscount / 100)).toFixed(2)} {p.currency}
-													</span>
-												</div>
-											)}
-											<PaymobPayment
-												user={user}
-												setIsPaymentLoading={setIsLoading}
-												onSuccess={() => {
-													setTimeout(reload, 500);
-												}}
-												currency={p.currency}
-												duration={p.duration}
-												duration_unit={p.duration_unit}
-												price={+(p.price - p.price * (appliedDiscount / 100)).toFixed(2)}
-											/>
-										</div>
-										<div className="flex flex-col items-start gap-1">
-											<span>This includes:</span>
-											<ul className="flex flex-col items-start text-sm">
-												<li>- Train your abilities for the IELTS exam</li>
-												<li>- Gain insights into your weaknesses and strengths</li>
-												<li>- Allow yourself to correctly prepare for the exam</li>
-											</ul>
-										</div>
-									</div>
-								))}
-							</div>
-						</div>
-					)}
+        <div className="flex w-full flex-col items-center justify-center gap-4 text-center">
+          {hasExpired && (
+            <span className="text-lg font-bold">
+              You do not have time credits for your account type!
+            </span>
+          )}
+          {isIndividual && (
+            <div className="scrollbar-hide flex w-full flex-col items-center gap-12 overflow-x-scroll">
+              <span className="max-w-lg">
+                To add to your use of EnCoach, please purchase one of the time
+                packages available below:
+              </span>
+              <div className="flex w-full flex-wrap justify-center gap-8">
+                {packages.map((p) => (
+                  <div
+                    key={p.id}
+                    className={clsx(
+                      "flex flex-col items-start gap-6 rounded-xl bg-white p-4"
+                    )}
+                  >
+                    <div className="mb-2 flex flex-col items-start">
+                      <img
+                        src="/logo_title.png"
+                        alt="EnCoach's Logo"
+                        className="w-32"
+                      />
+                      <span className="text-xl font-semibold">
+                        EnCoach - {p.duration}{" "}
+                        {capitalize(
+                          p.duration === 1
+                            ? p.duration_unit.slice(
+                                0,
+                                p.duration_unit.length - 1
+                              )
+                            : p.duration_unit
+                        )}
+                      </span>
+                    </div>
+                    <div className="flex w-full flex-col items-start gap-2">
+                      {appliedDiscount === 0 && (
+                        <span className="text-2xl">
+                          {p.price} {p.currency}
+                        </span>
+                      )}
+                      {appliedDiscount > 0 && (
+                        <div className="flex items-center gap-2">
+                          <span className="text-2xl line-through">
+                            {p.price} {p.currency}
+                          </span>
+                          <span className="text-2xl text-mti-red-light">
+                            {(
+                              p.price -
+                              p.price * (appliedDiscount / 100)
+                            ).toFixed(2)}{" "}
+                            {p.currency}
+                          </span>
+                        </div>
+                      )}
+                      <PaymobPayment
+                        user={user}
+                        setIsPaymentLoading={setIsLoading}
+                        onSuccess={() => {
+                          setTimeout(reload, 500);
+                        }}
+                        currency={p.currency}
+                        duration={p.duration}
+                        duration_unit={p.duration_unit}
+                        price={
+                          +(
+                            p.price -
+                            p.price * (appliedDiscount / 100)
+                          ).toFixed(2)
+                        }
+                      />
+                    </div>
+                    <div className="flex flex-col items-start gap-1">
+                      <span>This includes:</span>
+                      <ul className="flex flex-col items-start text-sm">
+                        <li>- Train your abilities for the IELTS exam</li>
+                        <li>
+                          - Gain insights into your weaknesses and strengths
+                        </li>
+                        <li>
+                          - Allow yourself to correctly prepare for the exam
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
 
-					{!isIndividual && entitiesThatCanBePaid.length > 0 &&
-						entity?.payment && (
-							<div className="flex flex-col items-center gap-8">
-								<div className={clsx("flex flex-col items-center gap-4 w-full")}>
-									<label className="font-normal text-base text-mti-gray-dim">Entity</label>
-									<Select
-										defaultValue={{ value: entity?.id, label: entity?.label }}
-										options={entitiesThatCanBePaid.map((e) => ({ value: e.id, label: e.label, entity: e }))}
-										onChange={(e) => e?.value ? setEntity(e?.entity) : null}
-										className="!w-full max-w-[400px] self-center"
-									/>
-								</div>
+          {!isIndividual &&
+            entitiesThatCanBePaid.length > 0 &&
+            entity?.payment && (
+              <div className="flex flex-col items-center gap-8">
+                <div
+                  className={clsx("flex flex-col items-center gap-4 w-full")}
+                >
+                  <label className="font-normal text-base text-mti-gray-dim">
+                    Entity
+                  </label>
+                  <Select
+                    defaultValue={{ value: entity?.id, label: entity?.label }}
+                    options={entitiesThatCanBePaid.map((e) => ({
+                      value: e.id,
+                      label: e.label,
+                      entity: e,
+                    }))}
+                    onChange={(e) => (e?.value ? setEntity(e?.entity) : null)}
+                    className="!w-full max-w-[400px] self-center"
+                  />
+                </div>
 
-								<span className="max-w-lg">
-									To add to your use of EnCoach and that of your students and teachers, please pay your designated package
-									below:
-								</span>
-								<div className={clsx("flex flex-col items-start gap-6 rounded-xl bg-white p-4")}>
-									<div className="mb-2 flex flex-col items-start">
-										<img src="/logo_title.png" alt="EnCoach's Logo" className="w-32" />
-										<span className="text-xl font-semibold">
-											EnCoach - {12} Months
-										</span>
-									</div>
-									<div className="flex w-full flex-col items-start gap-2">
-										<span className="text-2xl">
-											{entity.payment.price} {entity.payment.currency}
-										</span>
-										<PaymobPayment
-											user={user}
-											setIsPaymentLoading={setIsLoading}
-											entity={entity}
-											currency={entity.payment.currency}
-											price={entity.payment.price}
-											duration={12}
-											duration_unit="months"
-											onSuccess={() => {
-												setIsLoading(false);
-												setTimeout(reload, 500);
-											}}
-										/>
-									</div>
-									<div className="flex flex-col items-start gap-1">
-										<span>This includes:</span>
-										<ul className="flex flex-col items-start text-sm">
-											<li>
-												- Allow a total of {entity.licenses} students and teachers to use EnCoach
-											</li>
-											<li>- Train their abilities for the IELTS exam</li>
-											<li>- Gain insights into your students&apos; weaknesses and strengths</li>
-											<li>- Allow them to correctly prepare for the exam</li>
-										</ul>
-									</div>
-								</div>
-							</div>
-						)}
-					{!isIndividual && entitiesThatCanBePaid.length === 0 && (
-						<div className="flex flex-col items-center">
-							<span className="max-w-lg">
-								You are not the person in charge of your time credits, please contact your administrator about this situation.
-							</span>
-							<span className="max-w-lg">
-								If you believe this to be a mistake, please contact the platform&apos;s administration, thank you for your
-								patience.
-							</span>
-						</div>
-					)}
-					{!isIndividual &&
-						entitiesThatCanBePaid.length > 0 &&
-						!entity?.payment && (
-							<div className="flex flex-col items-center gap-8">
-								<div className={clsx("flex flex-col items-center gap-4 w-full")}>
-									<label className="font-normal text-base text-mti-gray-dim">Entity</label>
-									<Select
-										defaultValue={{ value: entity?.id || "", label: entity?.label || "" }}
-										options={entitiesThatCanBePaid.map((e) => ({ value: e.id, label: e.label, entity: e }))}
-										onChange={(e) => e?.value ? setEntity(e?.entity) : null}
-										className="!w-full max-w-[400px] self-center"
-									/>
-								</div>
-								<span className="max-w-lg">
-									An admin nor your agent have yet set the price intended to your requirements in terms of the amount of users
-									you desire and your expected monthly duration.
-								</span>
-								<span className="max-w-lg">
-									Please try again later or contact your agent or an admin, thank you for your patience.
-								</span>
-							</div>
-						)}
-				</div>
-			</Layout>
-		</>
-	);
+                <span className="max-w-lg">
+                  To add to your use of EnCoach and that of your students and
+                  teachers, please pay your designated package below:
+                </span>
+                <div
+                  className={clsx(
+                    "flex flex-col items-start gap-6 rounded-xl bg-white p-4"
+                  )}
+                >
+                  <div className="mb-2 flex flex-col items-start">
+                    <img
+                      src="/logo_title.png"
+                      alt="EnCoach's Logo"
+                      className="w-32"
+                    />
+                    <span className="text-xl font-semibold">
+                      EnCoach - {12} Months
+                    </span>
+                  </div>
+                  <div className="flex w-full flex-col items-start gap-2">
+                    <span className="text-2xl">
+                      {entity.payment.price} {entity.payment.currency}
+                    </span>
+                    <PaymobPayment
+                      user={user}
+                      setIsPaymentLoading={setIsLoading}
+                      entity={entity}
+                      currency={entity.payment.currency}
+                      price={entity.payment.price}
+                      duration={12}
+                      duration_unit="months"
+                      onSuccess={() => {
+                        setIsLoading(false);
+                        setTimeout(reload, 500);
+                      }}
+                    />
+                  </div>
+                  <div className="flex flex-col items-start gap-1">
+                    <span>This includes:</span>
+                    <ul className="flex flex-col items-start text-sm">
+                      <li>
+                        - Allow a total of {entity.licenses} students and
+                        teachers to use EnCoach
+                      </li>
+                      <li>- Train their abilities for the IELTS exam</li>
+                      <li>
+                        - Gain insights into your students&apos; weaknesses and
+                        strengths
+                      </li>
+                      <li>- Allow them to correctly prepare for the exam</li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            )}
+          {!isIndividual && entitiesThatCanBePaid.length === 0 && (
+            <div className="flex flex-col items-center">
+              <span className="max-w-lg">
+                You are not the person in charge of your time credits, please
+                contact your administrator about this situation.
+              </span>
+              <span className="max-w-lg">
+                If you believe this to be a mistake, please contact the
+                platform&apos;s administration, thank you for your patience.
+              </span>
+            </div>
+          )}
+          {!isIndividual &&
+            entitiesThatCanBePaid.length > 0 &&
+            !entity?.payment && (
+              <div className="flex flex-col items-center gap-8">
+                <div
+                  className={clsx("flex flex-col items-center gap-4 w-full")}
+                >
+                  <label className="font-normal text-base text-mti-gray-dim">
+                    Entity
+                  </label>
+                  <Select
+                    defaultValue={{
+                      value: entity?.id || "",
+                      label: entity?.label || "",
+                    }}
+                    options={entitiesThatCanBePaid.map((e) => ({
+                      value: e.id,
+                      label: e.label,
+                      entity: e,
+                    }))}
+                    onChange={(e) => (e?.value ? setEntity(e?.entity) : null)}
+                    className="!w-full max-w-[400px] self-center"
+                  />
+                </div>
+                <span className="max-w-lg">
+                  An admin nor your agent have yet set the price intended to
+                  your requirements in terms of the amount of users you desire
+                  and your expected monthly duration.
+                </span>
+                <span className="max-w-lg">
+                  Please try again later or contact your agent or an admin,
+                  thank you for your patience.
+                </span>
+              </div>
+            )}
+        </div>
+      </>
+    </>
+  );
 }
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index b12f32a5..fada3931 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,35 +1,71 @@
 import "@/styles/globals.css";
 import "react-toastify/dist/ReactToastify.css";
-import type {AppProps} from "next/app";
+import type { AppProps } from "next/app";
 
 import "primereact/resources/themes/lara-light-indigo/theme.css";
 import "primereact/resources/primereact.min.css";
 import "primeicons/primeicons.css";
 import "react-datepicker/dist/react-datepicker.css";
-import {useRouter} from "next/router";
-import {useEffect} from "react";
+import { Router, useRouter } from "next/router";
+import { useEffect, useState } from "react";
 import useExamStore from "@/stores/exam";
 import usePreferencesStore from "@/stores/preferencesStore";
+import Layout from "../components/High/Layout";
+import useEntities from "../hooks/useEntities";
+import UserProfileSkeleton from "../components/Medium/UserProfileSkeleton";
 
-export default function App({Component, pageProps}: AppProps) {
-	const {reset} = useExamStore();
-	const setIsSidebarMinimized = usePreferencesStore((state) => state.setSidebarMinimized);
+export default function App({ Component, pageProps }: AppProps) {
+  const [loading, setLoading] = useState(false);
 
-	const router = useRouter();
+  const { reset } = useExamStore();
 
-	useEffect(() => {
-		if (router.pathname !== "/exam" && router.pathname !== "/exercises") reset();
-	}, [router.pathname, reset]);
+  const setIsSidebarMinimized = usePreferencesStore(
+    (state) => state.setSidebarMinimized
+  );
 
-	useEffect(() => {
-		if (localStorage.getItem("isSidebarMinimized")) {
-			if (localStorage.getItem("isSidebarMinimized") === "true") {
-				setIsSidebarMinimized(true);
-			} else {
-				setIsSidebarMinimized(false);
-			}
-		}
-	}, [setIsSidebarMinimized]);
+  const router = useRouter();
 
-	return <Component {...pageProps} />;
+  const { entities } = useEntities(!pageProps?.user?.id);
+
+  useEffect(() => {
+    const start = () => {
+      setLoading(true);
+    };
+    const end = () => {
+     setLoading(false);
+    };
+    Router.events.on("routeChangeStart", start);
+    Router.events.on("routeChangeComplete", end);
+    Router.events.on("routeChangeError", end);
+    return () => {
+      Router.events.off("routeChangeStart", start);
+      Router.events.off("routeChangeComplete", end);
+      Router.events.off("routeChangeError", end);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (router.pathname !== "/exam" && router.pathname !== "/exercises")
+      reset();
+  }, [router.pathname, reset]);
+
+  useEffect(() => {
+    if (localStorage.getItem("isSidebarMinimized")) {
+      if (localStorage.getItem("isSidebarMinimized") === "true") {
+        setIsSidebarMinimized(true);
+      } else {
+        setIsSidebarMinimized(false);
+      }
+    }
+  }, [setIsSidebarMinimized]);
+
+  return (
+    <Layout user={pageProps.user} entities={entities} refreshPage={loading}>
+      {loading ? (
+        <UserProfileSkeleton />
+      ) : (
+        <Component {...pageProps} entities={entities} />
+      )}
+    </Layout>
+  );
 }
diff --git a/src/pages/api/stats/user/[user].ts b/src/pages/api/stats/user/[user].ts
index 35aa9bf2..3bc33e74 100644
--- a/src/pages/api/stats/user/[user].ts
+++ b/src/pages/api/stats/user/[user].ts
@@ -1,24 +1,20 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type {NextApiRequest, NextApiResponse} from "next";
-import client from "@/lib/mongodb";
-import {withIronSessionApiRoute} from "iron-session/next";
-import {sessionOptions} from "@/lib/session";
+import type { NextApiRequest, NextApiResponse } from "next";
+import { withIronSessionApiRoute } from "iron-session/next";
+import { sessionOptions } from "@/lib/session";
+import { getDetailedStatsByUser } from "../../../../utils/stats.be";
 
-const db = client.db(process.env.MONGODB_DB);
 
 export default withIronSessionApiRoute(handler, sessionOptions);
 
 async function handler(req: NextApiRequest, res: NextApiResponse) {
 	if (!req.session.user) {
-		res.status(401).json({ok: false});
+		res.status(401).json({ ok: false });
 		return;
 	}
 
-	const {user} = req.query;
-	const snapshot = await db.collection("stats").aggregate([
-		{ $match: { user: user } },
-		{ $sort: { "date": 1 } }
-	  ]).toArray();
+	const { user, query } = req.query as { user: string, query?: string };
 
+	const snapshot = await getDetailedStatsByUser(user, query);
 	res.status(200).json(snapshot);
 }
\ No newline at end of file
diff --git a/src/pages/assignments/[id].tsx b/src/pages/assignments/[id].tsx
index 51ae2a62..6a806362 100644
--- a/src/pages/assignments/[id].tsx
+++ b/src/pages/assignments/[id].tsx
@@ -1,15 +1,12 @@
 import Button from "@/components/Low/Button";
 import ProgressBar from "@/components/Low/ProgressBar";
-import Modal from "@/components/Modal";
-import useUsers from "@/hooks/useUsers";
 import { Grading, Module } from "@/interfaces";
 import { Assignment } from "@/interfaces/results";
-import { Group, Stat, User } from "@/interfaces/user";
+import { Stat, User } from "@/interfaces/user";
 import useExamStore from "@/stores/exam";
 import { getExamById } from "@/utils/exams";
 import { sortByModule } from "@/utils/moduleUtils";
 import { calculateBandScore, getGradingLabel } from "@/utils/score";
-import { convertToUserSolutions } from "@/utils/stats";
 import { getUserName } from "@/utils/users";
 import axios from "axios";
 import clsx from "clsx";
@@ -23,13 +20,11 @@ import { withIronSessionSsr } from "iron-session/next";
 import { checkAccess, doesEntityAllow } from "@/utils/permissions";
 import { mapBy, redirect, serialize } from "@/utils";
 import { getAssignment } from "@/utils/assignments.be";
-import { getEntitiesUsers, getEntityUsers, getUsers } from "@/utils/users.be";
-import { getEntitiesWithRoles, getEntityWithRoles } from "@/utils/entities.be";
-import { getGroups, getGroupsByEntities, getGroupsByEntity } from "@/utils/groups.be";
+import {  getEntityUsers, getUsers } from "@/utils/users.be";
+import {  getEntityWithRoles } from "@/utils/entities.be";
 import { sessionOptions } from "@/lib/session";
 import { EntityWithRoles } from "@/interfaces/entity";
 import Head from "next/head";
-import Layout from "@/components/High/Layout";
 import Separator from "@/components/Low/Separator";
 import Link from "next/link";
 import { requestUser } from "@/utils/api";
@@ -353,7 +348,7 @@ export default function AssignmentView({ user, users, entity, assignment, gradin
 				<meta name="viewport" content="width=device-width, initial-scale=1" />
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
-			<Layout user={user}>
+			<>
 				<div className="flex flex-col gap-4">
 					<div className="w-full flex items-center justify-between">
 						<div className="flex items-center gap-2">
@@ -466,7 +461,7 @@ export default function AssignmentView({ user, users, entity, assignment, gradin
 						</Button>
 					</div>
 				</div>
-			</Layout>
+			</>
 		</>
 	);
 }
diff --git a/src/pages/assignments/creator/[id].tsx b/src/pages/assignments/creator/[id].tsx
index 4d6206ea..5c9d18bb 100644
--- a/src/pages/assignments/creator/[id].tsx
+++ b/src/pages/assignments/creator/[id].tsx
@@ -1,4 +1,3 @@
-import Layout from "@/components/High/Layout";
 import Button from "@/components/Low/Button";
 import Checkbox from "@/components/Low/Checkbox";
 import Input from "@/components/Low/Input";
@@ -212,7 +211,7 @@ export default function AssignmentsPage({ assignment, user, users, entities, gro
 				<meta name="viewport" content="width=device-width, initial-scale=1" />
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
-			<Layout user={user}>
+			<>
 				<div className="flex flex-col gap-4">
 					<div className="flex items-center gap-2">
 						<Link href="/assignments" className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
@@ -589,7 +588,7 @@ export default function AssignmentsPage({ assignment, user, users, entities, gro
 						</Button>
 					</div>
 				</div>
-			</Layout>
+			</>
 		</>
 	);
 }
diff --git a/src/pages/assignments/creator/index.tsx b/src/pages/assignments/creator/index.tsx
index 912a99b6..c2771860 100644
--- a/src/pages/assignments/creator/index.tsx
+++ b/src/pages/assignments/creator/index.tsx
@@ -1,4 +1,3 @@
-import Layout from "@/components/High/Layout";
 import Button from "@/components/Low/Button";
 import Checkbox from "@/components/Low/Checkbox";
 import Input from "@/components/Low/Input";
@@ -170,7 +169,7 @@ export default function AssignmentsPage({ user, users, groups, entities }: Props
 				<meta name="viewport" content="width=device-width, initial-scale=1" />
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
-			<Layout user={user}>
+			<>
 				<div className="flex flex-col gap-4">
 					<div className="flex items-center gap-2">
 						<Link href="/assignments" className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
@@ -528,7 +527,7 @@ export default function AssignmentsPage({ user, users, groups, entities }: Props
 						</Button>
 					</div>
 				</div>
-			</Layout>
+			</>
 		</>
 	);
 }
diff --git a/src/pages/assignments/index.tsx b/src/pages/assignments/index.tsx
index ae0c1eca..113de22f 100644
--- a/src/pages/assignments/index.tsx
+++ b/src/pages/assignments/index.tsx
@@ -1,15 +1,12 @@
-import Layout from "@/components/High/Layout";
 import Separator from "@/components/Low/Separator";
 import AssignmentCard from "@/components/AssignmentCard";
-import AssignmentView from "@/components/AssignmentView";
 import { useAllowedEntities } from "@/hooks/useEntityPermissions";
 import { useListSearch } from "@/hooks/useListSearch";
 import usePagination from "@/hooks/usePagination";
 import { EntityWithRoles } from "@/interfaces/entity";
 import { Assignment } from "@/interfaces/results";
-import { CorporateUser, Group, User } from "@/interfaces/user";
+import {  User } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
-import { getUserCompanyName } from "@/resources/user";
 import { findBy, mapBy, redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
 import {
@@ -21,15 +18,13 @@ import {
 } from "@/utils/assignments";
 import { getAssignments, getEntitiesAssignments } from "@/utils/assignments.be";
 import { getEntitiesWithRoles } from "@/utils/entities.be";
-import { getGroups, getGroupsByEntities } from "@/utils/groups.be";
 import { checkAccess, findAllowedEntities } from "@/utils/permissions";
 import { getEntitiesUsers, getUsers } from "@/utils/users.be";
 import { withIronSessionSsr } from "iron-session/next";
-import { groupBy } from "lodash";
 import Head from "next/head";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
 import { BsChevronLeft, BsPlus } from "react-icons/bs";
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
@@ -98,7 +93,7 @@ export default function AssignmentsPage({ assignments, entities, user, users }:
 				<meta name="viewport" content="width=device-width, initial-scale=1" />
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
-			<Layout user={user}>
+			<>
 				<div className="flex flex-col gap-4">
 					<div className="flex items-center gap-2">
 						<Link href="/dashboard" className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
@@ -223,7 +218,7 @@ export default function AssignmentsPage({ assignments, entities, user, users }:
 						))}
 					</div>
 				</section>
-			</Layout>
+			</>
 		</>
 	);
 }
diff --git a/src/pages/classrooms/[id].tsx b/src/pages/classrooms/[id].tsx
index 38babb7a..c6eb70ce 100644
--- a/src/pages/classrooms/[id].tsx
+++ b/src/pages/classrooms/[id].tsx
@@ -1,5 +1,4 @@
 /* eslint-disable @next/next/no-img-element */
-import Layout from "@/components/High/Layout";
 import Tooltip from "@/components/Low/Tooltip";
 import { useEntityPermission } from "@/hooks/useEntityPermissions";
 import { useListSearch } from "@/hooks/useListSearch";
@@ -183,7 +182,7 @@ export default function Home({ user, group, users, entity }: Props) {
 			</Head>
 			<ToastContainer />
 			{user && (
-				<Layout user={user}>
+				<>
 					<section className="flex flex-col gap-0">
 						<div className="flex items-center justify-between">
 							<div className="flex flex-col gap-3">
@@ -339,7 +338,7 @@ export default function Home({ user, group, users, entity }: Props) {
 							</button>
 						))}
 					</section>
-				</Layout>
+				</>
 			)}
 		</>
 	);
diff --git a/src/pages/classrooms/create.tsx b/src/pages/classrooms/create.tsx
index b0192c08..be248ae7 100644
--- a/src/pages/classrooms/create.tsx
+++ b/src/pages/classrooms/create.tsx
@@ -1,19 +1,18 @@
 /* eslint-disable @next/next/no-img-element */
-import Layout from "@/components/High/Layout";
 import Input from "@/components/Low/Input";
 import Select from "@/components/Low/Select";
 import Tooltip from "@/components/Low/Tooltip";
 import {useListSearch} from "@/hooks/useListSearch";
 import usePagination from "@/hooks/usePagination";
-import {Entity, EntityWithRoles} from "@/interfaces/entity";
+import {EntityWithRoles} from "@/interfaces/entity";
 import {User} from "@/interfaces/user";
 import {sessionOptions} from "@/lib/session";
 import {USER_TYPE_LABELS} from "@/resources/user";
 import {filterBy, mapBy, redirect, serialize} from "@/utils";
-import {getEntities, getEntitiesWithRoles} from "@/utils/entities.be";
+import { getEntitiesWithRoles} from "@/utils/entities.be";
 import {shouldRedirectHome} from "@/utils/navigation.disabled";
 import {getUserName, isAdmin} from "@/utils/users";
-import {getEntitiesUsers, getLinkedUsers} from "@/utils/users.be";
+import {getEntitiesUsers} from "@/utils/users.be";
 import axios from "axios";
 import clsx from "clsx";
 import {withIronSessionSsr} from "iron-session/next";
@@ -102,7 +101,7 @@ export default function Home({user, users, entities}: Props) {
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
 			<ToastContainer />
-			<Layout user={user}>
+			<>
 				<section className="flex flex-col gap-0">
 					<div className="flex gap-3 justify-between">
 						<div className="flex items-center gap-2">
@@ -217,7 +216,7 @@ export default function Home({user, users, entities}: Props) {
 						</button>
 					))}
 				</section>
-			</Layout>
+			</>
 		</>
 	);
 }
diff --git a/src/pages/classrooms/index.tsx b/src/pages/classrooms/index.tsx
index 293ac3d1..d18baac5 100644
--- a/src/pages/classrooms/index.tsx
+++ b/src/pages/classrooms/index.tsx
@@ -3,7 +3,6 @@ import Head from "next/head";
 import { withIronSessionSsr } from "iron-session/next";
 import { sessionOptions } from "@/lib/session";
 import { ToastContainer } from "react-toastify";
-import Layout from "@/components/High/Layout";
 import { GroupWithUsers, User } from "@/interfaces/user";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
 import { getUserName, isAdmin } from "@/utils/users";
@@ -11,13 +10,13 @@ import { convertToUsers, getGroupsForEntities } from "@/utils/groups.be";
 import { getSpecificUsers } from "@/utils/users.be";
 import Link from "next/link";
 import { uniq } from "lodash";
-import { BsFillMortarboardFill, BsPlus } from "react-icons/bs";
+import { BsPlus } from "react-icons/bs";
 import CardList from "@/components/High/CardList";
 import Separator from "@/components/Low/Separator";
 import { findBy, mapBy, redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
 import { findAllowedEntities } from "@/utils/permissions";
-import { getEntities, getEntitiesWithRoles } from "@/utils/entities.be";
+import { getEntitiesWithRoles } from "@/utils/entities.be";
 import { useAllowedEntities } from "@/hooks/useEntityPermissions";
 import { EntityWithRoles } from "@/interfaces/entity";
 import { FaPersonChalkboard } from "react-icons/fa6";
@@ -122,7 +121,7 @@ export default function Home({ user, groups, entities }: Props) {
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
 			<ToastContainer />
-			<Layout user={user} className="!gap-4">
+			<>
 				<section className="flex flex-col gap-4 w-full h-full">
 					<Modal isOpen={showImport} onClose={() => setShowImport(false)} maxWidth="max-w-[85%]">
 						<StudentClassroomTransfer user={user} entities={entities} onFinish={() => setShowImport(false)} />
@@ -153,7 +152,7 @@ export default function Home({ user, groups, entities }: Props) {
 						firstCard={entitiesAllowCreate.length === 0 ? undefined : firstCard}
 					/>
 				</section>
-			</Layout>
+			</>
 		</>
 	);
 }
diff --git a/src/pages/dashboard/admin.tsx b/src/pages/dashboard/admin.tsx
index ab5e7931..05783216 100644
--- a/src/pages/dashboard/admin.tsx
+++ b/src/pages/dashboard/admin.tsx
@@ -1,191 +1,220 @@
 /* eslint-disable @next/next/no-img-element */
-import Layout from "@/components/High/Layout";
 import UserDisplayList from "@/components/UserDisplayList";
 import IconCard from "@/components/IconCard";
 import { EntityWithRoles } from "@/interfaces/entity";
-import { Assignment } from "@/interfaces/results";
-import { Group, Stat, Type, User } from "@/interfaces/user";
+import { Stat, Type, User } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
-import { dateSorter, filterBy, mapBy, redirect, serialize } from "@/utils";
+import {  filterBy, mapBy, redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
-import { countEntitiesAssignments, getAssignments } from "@/utils/assignments.be";
-import { getEntitiesWithRoles } from "@/utils/entities.be";
-import { countGroups, getGroups } from "@/utils/groups.be";
+import {
+  countEntitiesAssignments,
+} from "@/utils/assignments.be";
+import { getEntities } from "@/utils/entities.be";
+import { countGroups } from "@/utils/groups.be";
 import { checkAccess } from "@/utils/permissions";
-import { calculateAverageLevel, calculateBandScore } from "@/utils/score";
 import { groupByExam } from "@/utils/stats";
 import { getStatsByUsers } from "@/utils/stats.be";
-import { countUsers, getUser, getUsers } from "@/utils/users.be";
+import {
+  countUsersByTypes,
+  getUsers,
+} from "@/utils/users.be";
 import { withIronSessionSsr } from "iron-session/next";
-import { uniqBy } from "lodash";
 import Head from "next/head";
 import { useRouter } from "next/router";
-import { useMemo } from "react";
 import {
-	BsBank,
-	BsClipboard2Data,
-	BsEnvelopePaper,
-	BsPencilSquare,
-	BsPeople,
-	BsPeopleFill,
-	BsPersonFill,
-	BsPersonFillGear,
+  BsBank,
+  BsEnvelopePaper,
+  BsPencilSquare,
+  BsPeople,
+  BsPeopleFill,
+  BsPersonFill,
+  BsPersonFillGear,
 } from "react-icons/bs";
 import { ToastContainer } from "react-toastify";
 
 interface Props {
-	user: User;
-	students: User[];
-	latestStudents: User[]
-	latestTeachers: User[]
-	entities: EntityWithRoles[];
-	usersCount: { [key in Type]: number }
-	assignmentsCount: number;
-	stats: Stat[];
-	groupsCount: number;
+  user: User;
+  students: User[];
+  latestStudents: User[];
+  latestTeachers: User[];
+  entities: EntityWithRoles[];
+  usersCount: { [key in Type]: number };
+  assignmentsCount: number;
+  stats: Stat[];
+  groupsCount: number;
 }
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
-	const user = await requestUser(req, res)
-	if (!user || !user.isVerified) return redirect("/login")
+  const user = await requestUser(req, res);
+  if (!user || !user.isVerified) return redirect("/login");
 
-	if (!checkAccess(user, ["admin", "developer"])) return redirect("/")
+  if (!checkAccess(user, ["admin", "developer"])) return redirect("/");
 
-	const students = await getUsers({ type: 'student' });
-	const usersCount = {
-		student: await countUsers({ type: "student" }),
-		teacher: await countUsers({ type: "teacher" }),
-		corporate: await countUsers({ type: "corporate" }),
-		mastercorporate: await countUsers({ type: "mastercorporate" }),
-	}
+  const students = await getUsers(
+    { type: "student" },
+    10,
+    {
+      averageLevel: -1,
+    },
+    { id: 1, name: 1, email: 1, profilePicture: 1 }
+  );
 
-	const latestStudents = await getUsers({ type: 'student' }, 10, { registrationDate: -1 })
-	const latestTeachers = await getUsers({ type: 'teacher' }, 10, { registrationDate: -1 })
+  const usersCount = await countUsersByTypes([
+    "student",
+    "teacher",
+    "corporate",
+    "mastercorporate",
+  ]);
 
-	const entities = await getEntitiesWithRoles();
-	const assignmentsCount = await countEntitiesAssignments(mapBy(entities, 'id'), { archived: { $ne: true } });
-	const groupsCount = await countGroups();
+  const latestStudents = await getUsers(
+    { type: "student" },
+    10,
+    {
+      registrationDate: -1,
+    },
+    { id: 1, name: 1, email: 1, profilePicture: 1 }
+  );
+  const latestTeachers = await getUsers(
+    { type: "teacher" },
+    10,
+    {
+      registrationDate: -1,
+    },
+    { id: 1, name: 1, email: 1, profilePicture: 1 }
+  );
 
-	const stats = await getStatsByUsers(mapBy(students, 'id'));
+  const entities = await getEntities(undefined, { _id: 0, id: 1, label: 1 });
 
-	return { props: serialize({ user, students, latestStudents, latestTeachers, usersCount, entities, assignmentsCount, stats, groupsCount }) };
+  const assignmentsCount = await countEntitiesAssignments(
+    mapBy(entities, "id"),
+    { archived: { $ne: true } }
+  );
+
+  const groupsCount = await countGroups();
+
+  const stats = await getStatsByUsers(mapBy(students, "id"));
+
+  return {
+    props: serialize({
+      user,
+      students,
+      latestStudents,
+      latestTeachers,
+      usersCount,
+      entities,
+      assignmentsCount,
+      stats,
+      groupsCount,
+    }),
+  };
 }, sessionOptions);
 
 export default function Dashboard({
-	user,
-	students,
-	latestStudents,
-	latestTeachers,
-	usersCount,
-	entities,
-	assignmentsCount,
-	stats,
-	groupsCount
+  user,
+  students,
+  latestStudents,
+  latestTeachers,
+  usersCount,
+  entities,
+  assignmentsCount,
+  stats,
+  groupsCount,
 }: Props) {
-	const router = useRouter();
+  const router = useRouter();
 
-	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}>
-				<section className="grid grid-cols-5 place-items-center -md:grid-cols-2 gap-4 text-center">
-					<IconCard
-						onClick={() => router.push("/users?type=student")}
-						Icon={BsPersonFill}
-						label="Students"
-						value={usersCount.student}
-						color="purple"
-					/>
-					<IconCard
-						onClick={() => router.push("/users?type=teacher")}
-						Icon={BsPencilSquare}
-						label="Teachers"
-						value={usersCount.teacher}
-						color="purple"
-					/>
-					<IconCard
-						Icon={BsBank}
-						onClick={() => router.push("/users?type=corporate")}
-						label="Corporates"
-						value={usersCount.corporate}
-						color="purple"
-					/>
-					<IconCard
-						Icon={BsBank}
-						onClick={() => router.push("/users?type=mastercorporate")}
-						label="Master Corporates"
-						value={usersCount.mastercorporate}
-						color="purple"
-					/>
-					<IconCard
-						Icon={BsPeople}
-						onClick={() => router.push("/classrooms")}
-						label="Classrooms"
-						value={groupsCount}
-						color="purple"
-					/>
-					<IconCard Icon={BsPeopleFill}
-						onClick={() => router.push("/entities")}
-						label="Entities"
-						value={entities.length}
-						color="purple"
-					/>
-					<IconCard Icon={BsPersonFillGear}
-						onClick={() => router.push("/statistical")}
-						label="Entity Statistics"
-						value={entities.length}
-						color="purple"
-					/>
-					<IconCard Icon={BsPersonFillGear}
-						onClick={() => router.push("/users/performance")}
-						label="Student Performance"
-						value={usersCount.student}
-						color="purple"
-					/>
-					<IconCard
-						Icon={BsEnvelopePaper}
-						onClick={() => router.push("/assignments")}
-						label="Assignments"
-						value={assignmentsCount}
-						color="purple"
-					/>
-				</section>
+  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 />
+      <>
+        <section className="grid grid-cols-5 place-items-center -md:grid-cols-2 gap-4 text-center">
+          <IconCard
+            onClick={() => router.push("/users?type=student")}
+            Icon={BsPersonFill}
+            label="Students"
+            value={usersCount.student}
+            color="purple"
+          />
+          <IconCard
+            onClick={() => router.push("/users?type=teacher")}
+            Icon={BsPencilSquare}
+            label="Teachers"
+            value={usersCount.teacher}
+            color="purple"
+          />
+          <IconCard
+            Icon={BsBank}
+            onClick={() => router.push("/users?type=corporate")}
+            label="Corporates"
+            value={usersCount.corporate}
+            color="purple"
+          />
+          <IconCard
+            Icon={BsBank}
+            onClick={() => router.push("/users?type=mastercorporate")}
+            label="Master Corporates"
+            value={usersCount.mastercorporate}
+            color="purple"
+          />
+          <IconCard
+            Icon={BsPeople}
+            onClick={() => router.push("/classrooms")}
+            label="Classrooms"
+            value={groupsCount}
+            color="purple"
+          />
+          <IconCard
+            Icon={BsPeopleFill}
+            onClick={() => router.push("/entities")}
+            label="Entities"
+            value={entities.length}
+            color="purple"
+          />
+          <IconCard
+            Icon={BsPersonFillGear}
+            onClick={() => router.push("/statistical")}
+            label="Entity Statistics"
+            value={entities.length}
+            color="purple"
+          />
+          <IconCard
+            Icon={BsPersonFillGear}
+            onClick={() => router.push("/users/performance")}
+            label="Student Performance"
+            value={usersCount.student}
+            color="purple"
+          />
+          <IconCard
+            Icon={BsEnvelopePaper}
+            onClick={() => router.push("/assignments")}
+            label="Assignments"
+            value={assignmentsCount}
+            color="purple"
+          />
+        </section>
 
-				<section className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full justify-between">
-					<UserDisplayList
-						users={latestStudents}
-						title="Latest Students"
-					/>
-					<UserDisplayList
-						users={latestTeachers}
-						title="Latest Teachers"
-					/>
-					<UserDisplayList
-						users={students.sort((a, b) => calculateAverageLevel(b.levels) - calculateAverageLevel(a.levels))}
-						title="Highest level students"
-					/>
-					<UserDisplayList
-						users={
-							students
-								.sort(
-									(a, b) =>
-										Object.keys(groupByExam(filterBy(stats, "user", b))).length -
-										Object.keys(groupByExam(filterBy(stats, "user", a))).length,
-								)
-						}
-						title="Highest exam count students"
-					/>
-				</section>
-			</Layout>
-		</>
-	);
+        <section className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full justify-between">
+          <UserDisplayList users={latestStudents} title="Latest Students" />
+          <UserDisplayList users={latestTeachers} title="Latest Teachers" />
+          <UserDisplayList users={students} title="Highest level students" />
+          <UserDisplayList
+            users={students.sort(
+              (a, b) =>
+                Object.keys(groupByExam(filterBy(stats, "user", b))).length -
+                Object.keys(groupByExam(filterBy(stats, "user", a))).length
+            )}
+            title="Highest exam count students"
+          />
+        </section>
+      </>
+    </>
+  );
 }
diff --git a/src/pages/dashboard/corporate.tsx b/src/pages/dashboard/corporate.tsx
index 3eb71ca5..5abc3604 100644
--- a/src/pages/dashboard/corporate.tsx
+++ b/src/pages/dashboard/corporate.tsx
@@ -1,194 +1,265 @@
 /* eslint-disable @next/next/no-img-element */
-import Layout from "@/components/High/Layout";
 import UserDisplayList from "@/components/UserDisplayList";
 import IconCard from "@/components/IconCard";
 import { EntityWithRoles } from "@/interfaces/entity";
 import { Stat, StudentUser, Type, User } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
-import { dateSorter, filterBy, mapBy, redirect, serialize } from "@/utils";
+import { filterBy, mapBy, redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
 import { countEntitiesAssignments } from "@/utils/assignments.be";
 import { getEntitiesWithRoles } from "@/utils/entities.be";
 import { countGroupsByEntities } from "@/utils/groups.be";
-import { checkAccess, findAllowedEntities } from "@/utils/permissions";
-import { calculateAverageLevel } from "@/utils/score";
+import {
+  checkAccess,
+  groupAllowedEntitiesByPermissions,
+} from "@/utils/permissions";
 import { groupByExam } from "@/utils/stats";
-import { getStatsByUsers } from "@/utils/stats.be";
-import { countAllowedUsers, filterAllowedUsers, getUsers } from "@/utils/users.be";
+import {
+  countAllowedUsers,
+  getUsers,
+} from "@/utils/users.be";
 import { withIronSessionSsr } from "iron-session/next";
-import { uniqBy } from "lodash";
 import moment from "moment";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import { useMemo } from "react";
 import {
-	BsClipboard2Data,
-	BsClock,
-	BsEnvelopePaper,
-	BsPencilSquare,
-	BsPeople,
-	BsPeopleFill,
-	BsPersonFill,
-	BsPersonFillGear,
+  BsClock,
+  BsEnvelopePaper,
+  BsPencilSquare,
+  BsPeople,
+  BsPeopleFill,
+  BsPersonFill,
+  BsPersonFillGear,
 } from "react-icons/bs";
 import { ToastContainer } from "react-toastify";
 import { useAllowedEntities } from "@/hooks/useEntityPermissions";
 import { isAdmin } from "@/utils/users";
 
 interface Props {
-	user: User;
-	students: StudentUser[]
-	latestStudents: User[]
-	latestTeachers: User[]
-	userCounts: { [key in Type]: number }
-	entities: EntityWithRoles[];
-	assignmentsCount: number;
-	stats: Stat[];
-	groupsCount: number;
+  user: User;
+  students: StudentUser[];
+  latestStudents: User[];
+  latestTeachers: User[];
+  userCounts: { [key in Type]: number };
+  entities: EntityWithRoles[];
+  assignmentsCount: number;
+  stats: Stat[];
+  groupsCount: number;
 }
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
-	const user = await requestUser(req, res)
-	if (!user || !user.isVerified) return redirect("/login")
+  const user = await requestUser(req, res);
+  if (!user || !user.isVerified) return redirect("/login");
 
-	if (!checkAccess(user, ["admin", "developer", "corporate"])) return redirect("/")
+  if (!checkAccess(user, ["admin", "developer", "corporate"]))
+    return redirect("/");
 
-	const entityIDS = mapBy(user.entities, "id") || [];
-	const entities = await getEntitiesWithRoles(isAdmin(user) ? undefined : entityIDS);
+  const entityIDS = mapBy(user.entities, "id") || [];
+  const entities = await getEntitiesWithRoles(
+    isAdmin(user) ? undefined : entityIDS
+  );
 
-	const allowedStudentEntities = findAllowedEntities(user, entities, "view_students")
-	const allowedTeacherEntities = findAllowedEntities(user, entities, "view_teachers")
+  const {
+    ["view_students"]: allowedStudentEntities,
+    ["view_teachers"]: allowedTeacherEntities,
+  } = groupAllowedEntitiesByPermissions(user, entities, [
+    "view_students",
+    "view_teachers",
+  ]);
 
-	const students =
-		await getUsers({ type: 'student', "entities.id": { $in: mapBy(allowedStudentEntities, 'id') } }, 10, { averageLevel: -1 });
-	const latestStudents =
-		await getUsers({ type: 'student', "entities.id": { $in: mapBy(allowedStudentEntities, 'id') } }, 10, { registrationDate: -1 })
-	const latestTeachers =
-		await getUsers({ type: 'teacher', "entities.id": { $in: mapBy(allowedTeacherEntities, 'id') } }, 10, { registrationDate: -1 })
+	const allowedStudentEntitiesIDS = mapBy(allowedStudentEntities, "id");
+	const entitiesIDS = mapBy(entities, "id") || [];
 
-	const userCounts = await countAllowedUsers(user, entities)
-	const assignmentsCount = await countEntitiesAssignments(mapBy(entities, "id"), { archived: { $ne: true } });
-	const groupsCount = await countGroupsByEntities(mapBy(entities, "id"));
 
-	return { props: serialize({ user, students, latestStudents, latestTeachers, userCounts, entities, assignmentsCount, groupsCount }) };
+  const students = await getUsers(
+    { type: "student", "entities.id": { $in: allowedStudentEntitiesIDS } },
+    10,
+    { averageLevel: -1 },
+    { id: 1, name: 1, email: 1, profilePicture: 1 }
+  );
+  const latestStudents = await getUsers(
+    { type: "student", "entities.id": { $in: allowedStudentEntitiesIDS } },
+    10,
+    { registrationDate: -1 },
+    { id: 1, name: 1, email: 1, profilePicture: 1 }
+  );
+  const latestTeachers = await getUsers(
+    {
+      type: "teacher",
+      "entities.id": { $in: mapBy(allowedTeacherEntities, "id") },
+    },
+    10,
+    { registrationDate: -1 },
+    { id: 1, name: 1, email: 1, profilePicture: 1 }
+  );
+	
+	const userCounts = await countAllowedUsers(user, entities);
+	
+  const assignmentsCount = await countEntitiesAssignments(
+	entitiesIDS,
+    { archived: { $ne: true } }
+	);
+	
+  const groupsCount = await countGroupsByEntities(entitiesIDS);
+
+  return {
+    props: serialize({
+      user,
+      students,
+      latestStudents,
+      latestTeachers,
+      userCounts,
+      entities,
+      assignmentsCount,
+      groupsCount,
+    }),
+  };
 }, sessionOptions);
 
-export default function Dashboard({ user, students, latestStudents, latestTeachers, userCounts, entities, assignmentsCount, stats = [], groupsCount }: Props) {
-	const totalCount = useMemo(() =>
-		userCounts.corporate + userCounts.mastercorporate + userCounts.student + userCounts.teacher, [userCounts])
-	const totalLicenses = useMemo(() => entities.reduce((acc, curr) => acc + parseInt(curr.licenses.toString()), 0), [entities])
-
-	const allowedEntityStatistics = useAllowedEntities(user, entities, 'view_entity_statistics')
-	const allowedStudentPerformance = useAllowedEntities(user, entities, 'view_student_performance')
-
-	const router = useRouter();
-
-	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="w-full flex flex-col gap-4">
-					{entities.length > 0 && (
-						<div className="w-fit self-end bg-neutral-200 px-2 rounded-lg py-1">
-							<b>{mapBy(entities, "label")?.join(", ")}</b>
-						</div>
-					)}
-					<section className="grid grid-cols-5 -md:grid-cols-2 place-items-center gap-4 text-center">
-						<IconCard
-							onClick={() => router.push("/users?type=student")}
-							Icon={BsPersonFill}
-							label="Students"
-							value={userCounts.student}
-							color="purple"
-						/>
-						<IconCard
-							onClick={() => router.push("/users?type=teacher")}
-							Icon={BsPencilSquare}
-							label="Teachers"
-							value={userCounts.teacher}
-							color="purple"
-						/>
-						<IconCard
-							onClick={() => router.push("/classrooms")}
-							Icon={BsPeople}
-							label="Classrooms"
-							value={groupsCount}
-							color="purple"
-						/>
-						<IconCard Icon={BsPeopleFill}
-							onClick={() => router.push("/entities")}
-							label="Entities"
-							value={`${entities.length} - ${totalCount}/${totalLicenses}`}
-							color="purple"
-						/>
-						{allowedEntityStatistics.length > 0 && (
-							<IconCard Icon={BsPersonFillGear}
-								onClick={() => router.push("/statistical")}
-								label="Entity Statistics"
-								value={allowedEntityStatistics.length}
-								color="purple"
-							/>
-						)}
-						{allowedStudentPerformance.length > 0 && (
-							<IconCard Icon={BsPersonFillGear}
-								onClick={() => router.push("/users/performance")}
-								label="Student Performance"
-								value={userCounts.student}
-								color="purple"
-							/>
-						)}
-						<IconCard
-							Icon={BsClock}
-							label="Expiration Date"
-							value={user.subscriptionExpirationDate ? moment(user.subscriptionExpirationDate).format("DD/MM/yyyy") : "Unlimited"}
-							color="rose"
-						/>
-						<IconCard
-							Icon={BsEnvelopePaper}
-							className="col-span-2"
-							onClick={() => router.push("/assignments")}
-							label="Assignments"
-							value={assignmentsCount}
-							color="purple"
-						/>
-					</section>
-				</div>
-
-				<section className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full justify-between">
-					<UserDisplayList
-						users={latestStudents}
-						title="Latest Students"
-					/>
-					<UserDisplayList
-						users={latestTeachers}
-						title="Latest Teachers"
-					/>
-					<UserDisplayList
-						users={students}
-						title="Highest level students"
-					/>
-					<UserDisplayList
-						users={
-							students
-								.sort(
-									(a, b) =>
-										Object.keys(groupByExam(filterBy(stats, "user", b))).length -
-										Object.keys(groupByExam(filterBy(stats, "user", a))).length,
-								)
-						}
-						title="Highest exam count students"
-					/>
-				</section>
-			</Layout>
-		</>
+export default function Dashboard({
+  user,
+  students,
+  latestStudents,
+  latestTeachers,
+  userCounts,
+  entities,
+  assignmentsCount,
+  stats = [],
+  groupsCount,
+}: Props) {
+  const totalCount = useMemo(
+    () =>
+      userCounts.corporate +
+      userCounts.mastercorporate +
+      userCounts.student +
+      userCounts.teacher,
+    [userCounts]
 	);
+	
+  const totalLicenses = useMemo(
+    () =>
+      entities.reduce(
+        (acc, curr) => acc + parseInt(curr.licenses.toString()),
+        0
+      ),
+    [entities]
+  );
+
+  const allowedEntityStatistics = useAllowedEntities(
+    user,
+    entities,
+    "view_entity_statistics"
+  );
+  const allowedStudentPerformance = useAllowedEntities(
+    user,
+    entities,
+    "view_student_performance"
+  );
+
+  const router = useRouter();
+
+  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 />
+      <>
+        <div className="w-full flex flex-col gap-4">
+          {entities.length > 0 && (
+            <div className="w-fit self-end bg-neutral-200 px-2 rounded-lg py-1">
+              <b>{mapBy(entities, "label")?.join(", ")}</b>
+            </div>
+          )}
+          <section className="grid grid-cols-5 -md:grid-cols-2 place-items-center gap-4 text-center">
+            <IconCard
+              onClick={() => router.push("/users?type=student")}
+              Icon={BsPersonFill}
+              label="Students"
+              value={userCounts.student}
+              color="purple"
+            />
+            <IconCard
+              onClick={() => router.push("/users?type=teacher")}
+              Icon={BsPencilSquare}
+              label="Teachers"
+              value={userCounts.teacher}
+              color="purple"
+            />
+            <IconCard
+              onClick={() => router.push("/classrooms")}
+              Icon={BsPeople}
+              label="Classrooms"
+              value={groupsCount}
+              color="purple"
+            />
+            <IconCard
+              Icon={BsPeopleFill}
+              onClick={() => router.push("/entities")}
+              label="Entities"
+              value={`${entities.length} - ${totalCount}/${totalLicenses}`}
+              color="purple"
+            />
+            {allowedEntityStatistics.length > 0 && (
+              <IconCard
+                Icon={BsPersonFillGear}
+                onClick={() => router.push("/statistical")}
+                label="Entity Statistics"
+                value={allowedEntityStatistics.length}
+                color="purple"
+              />
+            )}
+            {allowedStudentPerformance.length > 0 && (
+              <IconCard
+                Icon={BsPersonFillGear}
+                onClick={() => router.push("/users/performance")}
+                label="Student Performance"
+                value={userCounts.student}
+                color="purple"
+              />
+            )}
+            <IconCard
+              Icon={BsClock}
+              label="Expiration Date"
+              value={
+                user.subscriptionExpirationDate
+                  ? moment(user.subscriptionExpirationDate).format("DD/MM/yyyy")
+                  : "Unlimited"
+              }
+              color="rose"
+            />
+            <IconCard
+              Icon={BsEnvelopePaper}
+              className="col-span-2"
+              onClick={() => router.push("/assignments")}
+              label="Assignments"
+              value={assignmentsCount}
+              color="purple"
+            />
+          </section>
+        </div>
+
+        <section className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full justify-between">
+          <UserDisplayList users={latestStudents} title="Latest Students" />
+          <UserDisplayList users={latestTeachers} title="Latest Teachers" />
+          <UserDisplayList users={students} title="Highest level students" />
+          <UserDisplayList
+            users={students.sort(
+              (a, b) =>
+                Object.keys(groupByExam(filterBy(stats, "user", b))).length -
+                Object.keys(groupByExam(filterBy(stats, "user", a))).length
+            )}
+            title="Highest exam count students"
+          />
+        </section>
+      </>
+    </>
+  );
 }
diff --git a/src/pages/dashboard/developer.tsx b/src/pages/dashboard/developer.tsx
index 1631bd61..03396bd2 100644
--- a/src/pages/dashboard/developer.tsx
+++ b/src/pages/dashboard/developer.tsx
@@ -1,189 +1,214 @@
 /* eslint-disable @next/next/no-img-element */
-import Layout from "@/components/High/Layout";
 import UserDisplayList from "@/components/UserDisplayList";
 import IconCard from "@/components/IconCard";
 import { EntityWithRoles } from "@/interfaces/entity";
-import { Assignment } from "@/interfaces/results";
-import { Group, Stat, StudentUser, Type, User } from "@/interfaces/user";
+import { Stat,  Type, User } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
-import { dateSorter, filterBy, mapBy, redirect, serialize } from "@/utils";
+import { filterBy, mapBy, redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
-import { countEntitiesAssignments, getAssignments } from "@/utils/assignments.be";
-import { getEntitiesWithRoles } from "@/utils/entities.be";
-import { countGroups, getGroups } from "@/utils/groups.be";
+import {
+  countEntitiesAssignments,
+} from "@/utils/assignments.be";
+import { getEntities } from "@/utils/entities.be";
+import { countGroups } from "@/utils/groups.be";
 import { checkAccess } from "@/utils/permissions";
-import { calculateAverageLevel, calculateBandScore } from "@/utils/score";
 import { groupByExam } from "@/utils/stats";
-import { getStatsByUsers } from "@/utils/stats.be";
-import { countUsers, getUser, getUsers } from "@/utils/users.be";
+import {
+  countUsersByTypes,
+  getUsers,
+} from "@/utils/users.be";
 import { withIronSessionSsr } from "iron-session/next";
-import { uniqBy } from "lodash";
 import Head from "next/head";
 import { useRouter } from "next/router";
-import { useMemo } from "react";
 import {
-	BsBank,
-	BsClipboard2Data,
-	BsEnvelopePaper,
-	BsPencilSquare,
-	BsPeople,
-	BsPeopleFill,
-	BsPersonFill,
-	BsPersonFillGear,
+  BsBank,
+  BsEnvelopePaper,
+  BsPencilSquare,
+  BsPeople,
+  BsPeopleFill,
+  BsPersonFill,
+  BsPersonFillGear,
 } from "react-icons/bs";
 import { ToastContainer } from "react-toastify";
 
 interface Props {
-	user: User;
-	students: User[];
-	latestStudents: User[]
-	latestTeachers: User[]
-	entities: EntityWithRoles[];
-	usersCount: { [key in Type]: number }
-	assignmentsCount: number;
-	stats: Stat[];
-	groupsCount: number;
+  user: User;
+  students: User[];
+  latestStudents: User[];
+  latestTeachers: User[];
+  entities: EntityWithRoles[];
+  usersCount: { [key in Type]: number };
+  assignmentsCount: number;
+  stats: Stat[];
+  groupsCount: number;
 }
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
-	const user = await requestUser(req, res)
-	if (!user || !user.isVerified) return redirect("/login")
+  const user = await requestUser(req, res);
+  if (!user || !user.isVerified) return redirect("/login");
 
-	if (!checkAccess(user, ["admin", "developer"])) return redirect("/")
+  if (!checkAccess(user, ["admin", "developer"])) return redirect("/");
 
-	const students = await getUsers({ type: 'student' }, 10, { averageLevel: -1 });
-	const usersCount = {
-		student: await countUsers({ type: "student" }),
-		teacher: await countUsers({ type: "teacher" }),
-		corporate: await countUsers({ type: "corporate" }),
-		mastercorporate: await countUsers({ type: "mastercorporate" }),
-	}
+  const students = await getUsers(
+    { type: "student" },
+    10,
+    {
+      averageLevel: -1,
+    },
+    { id: 1, name: 1, email: 1, profilePicture: 1 }
+  );
 
-	const latestStudents = await getUsers({ type: 'student' }, 10, { registrationDate: -1 })
-	const latestTeachers = await getUsers({ type: 'teacher' }, 10, { registrationDate: -1 })
+  const usersCount = await countUsersByTypes([
+    "student",
+    "teacher",
+    "corporate",
+    "mastercorporate",
+  ]);
 
-	const entities = await getEntitiesWithRoles();
-	const assignmentsCount = await countEntitiesAssignments(mapBy(entities, 'id'), { archived: { $ne: true } });
-	const groupsCount = await countGroups();
+  const latestStudents = await getUsers(
+    { type: "student" },
+    10,
+    {
+      registrationDate: -1,
+    },
+    {id:1, name: 1, email: 1, profilePicture: 1 }
+  );
+  const latestTeachers = await getUsers(
+    { type: "teacher" },
+    10,
+    {
+      registrationDate: -1,
+    },
+    { id:1,name: 1, email: 1, profilePicture: 1 }
+  );
 
-	return { props: serialize({ user, students, latestStudents, latestTeachers, usersCount, entities, assignmentsCount, groupsCount }) };
+  const entities = await getEntities(undefined, { _id: 0, id: 1, label: 1 });
+  const assignmentsCount = await countEntitiesAssignments(
+    mapBy(entities, "id"),
+    { archived: { $ne: true } }
+  );
+  const groupsCount = await countGroups();
+
+  return {
+    props: serialize({
+      user,
+      students,
+      latestStudents,
+      latestTeachers,
+      usersCount,
+      entities,
+      assignmentsCount,
+      groupsCount,
+    }),
+  };
 }, sessionOptions);
 
 export default function Dashboard({
-	user,
-	students = [],
-	latestStudents,
-	latestTeachers,
-	usersCount,
-	entities,
-	assignmentsCount,
-	stats = [],
-	groupsCount
+  user,
+  students = [],
+  latestStudents,
+  latestTeachers,
+  usersCount,
+  entities,
+  assignmentsCount,
+  stats = [],
+  groupsCount,
 }: Props) {
-	const router = useRouter();
+  const router = useRouter();
 
-	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}>
-				<section className="grid grid-cols-5 place-items-center -md:grid-cols-2 gap-4 text-center">
-					<IconCard
-						onClick={() => router.push("/users?type=student")}
-						Icon={BsPersonFill}
-						label="Students"
-						value={usersCount.student}
-						color="purple"
-					/>
-					<IconCard
-						onClick={() => router.push("/users?type=teacher")}
-						Icon={BsPencilSquare}
-						label="Teachers"
-						value={usersCount.teacher}
-						color="purple"
-					/>
-					<IconCard
-						Icon={BsBank}
-						onClick={() => router.push("/users?type=corporate")}
-						label="Corporates"
-						value={usersCount.corporate}
-						color="purple"
-					/>
-					<IconCard
-						Icon={BsBank}
-						onClick={() => router.push("/users?type=mastercorporate")}
-						label="Master Corporates"
-						value={usersCount.mastercorporate}
-						color="purple"
-					/>
-					<IconCard
-						Icon={BsPeople}
-						onClick={() => router.push("/classrooms")}
-						label="Classrooms"
-						value={groupsCount}
-						color="purple"
-					/>
-					<IconCard Icon={BsPeopleFill}
-						onClick={() => router.push("/entities")}
-						label="Entities"
-						value={entities.length}
-						color="purple"
-					/>
-					<IconCard Icon={BsPersonFillGear}
-						onClick={() => router.push("/statistical")}
-						label="Entity Statistics"
-						value={entities.length}
-						color="purple"
-					/>
-					<IconCard Icon={BsPersonFillGear}
-						onClick={() => router.push("/users/performance")}
-						label="Student Performance"
-						value={usersCount.student}
-						color="purple"
-					/>
-					<IconCard
-						Icon={BsEnvelopePaper}
-						onClick={() => router.push("/assignments")}
-						label="Assignments"
-						value={assignmentsCount}
-						color="purple"
-					/>
-				</section>
+  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 />
+      <>
+        <section className="grid grid-cols-5 place-items-center -md:grid-cols-2 gap-4 text-center">
+          <IconCard
+            onClick={() => router.push("/users?type=student")}
+            Icon={BsPersonFill}
+            label="Students"
+            value={usersCount.student}
+            color="purple"
+          />
+          <IconCard
+            onClick={() => router.push("/users?type=teacher")}
+            Icon={BsPencilSquare}
+            label="Teachers"
+            value={usersCount.teacher}
+            color="purple"
+          />
+          <IconCard
+            Icon={BsBank}
+            onClick={() => router.push("/users?type=corporate")}
+            label="Corporates"
+            value={usersCount.corporate}
+            color="purple"
+          />
+          <IconCard
+            Icon={BsBank}
+            onClick={() => router.push("/users?type=mastercorporate")}
+            label="Master Corporates"
+            value={usersCount.mastercorporate}
+            color="purple"
+          />
+          <IconCard
+            Icon={BsPeople}
+            onClick={() => router.push("/classrooms")}
+            label="Classrooms"
+            value={groupsCount}
+            color="purple"
+          />
+          <IconCard
+            Icon={BsPeopleFill}
+            onClick={() => router.push("/entities")}
+            label="Entities"
+            value={entities.length}
+            color="purple"
+          />
+          <IconCard
+            Icon={BsPersonFillGear}
+            onClick={() => router.push("/statistical")}
+            label="Entity Statistics"
+            value={entities.length}
+            color="purple"
+          />
+          <IconCard
+            Icon={BsPersonFillGear}
+            onClick={() => router.push("/users/performance")}
+            label="Student Performance"
+            value={usersCount.student}
+            color="purple"
+          />
+          <IconCard
+            Icon={BsEnvelopePaper}
+            onClick={() => router.push("/assignments")}
+            label="Assignments"
+            value={assignmentsCount}
+            color="purple"
+          />
+        </section>
 
-				<section className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full justify-between">
-					<UserDisplayList
-						users={latestStudents}
-						title="Latest Students"
-					/>
-					<UserDisplayList
-						users={latestTeachers}
-						title="Latest Teachers"
-					/>
-					<UserDisplayList
-						users={students}
-						title="Highest level students"
-					/>
-					<UserDisplayList
-						users={
-							students
-								.sort(
-									(a, b) =>
-										Object.keys(groupByExam(filterBy(stats, "user", b))).length -
-										Object.keys(groupByExam(filterBy(stats, "user", a))).length,
-								)
-						}
-						title="Highest exam count students"
-					/>
-				</section>
-			</Layout>
-		</>
-	);
+        <section className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full justify-between">
+          <UserDisplayList users={latestStudents} title="Latest Students" />
+          <UserDisplayList users={latestTeachers} title="Latest Teachers" />
+          <UserDisplayList users={students} title="Highest level students" />
+          <UserDisplayList
+            users={students.sort(
+              (a, b) =>
+                Object.keys(groupByExam(filterBy(stats, "user", b.id))).length -
+                Object.keys(groupByExam(filterBy(stats, "user", a.id))).length
+            )}
+            title="Highest exam count students"
+          />
+        </section>
+      </>
+    </>
+  );
 }
diff --git a/src/pages/dashboard/mastercorporate.tsx b/src/pages/dashboard/mastercorporate.tsx
index 33044718..d8cc6432 100644
--- a/src/pages/dashboard/mastercorporate.tsx
+++ b/src/pages/dashboard/mastercorporate.tsx
@@ -1,203 +1,266 @@
 /* eslint-disable @next/next/no-img-element */
-import Layout from "@/components/High/Layout";
 import UserDisplayList from "@/components/UserDisplayList";
 import IconCard from "@/components/IconCard";
 import { useAllowedEntities } from "@/hooks/useEntityPermissions";
-import { Module } from "@/interfaces";
 import { EntityWithRoles } from "@/interfaces/entity";
-import { Assignment } from "@/interfaces/results";
-import { Group, Stat, StudentUser, Type, User } from "@/interfaces/user";
+import { Stat, StudentUser, Type, User } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
-import { dateSorter, filterBy, mapBy, redirect, serialize } from "@/utils";
+import { filterBy, mapBy, redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
-import { countEntitiesAssignments, getEntitiesAssignments } from "@/utils/assignments.be";
+import { countEntitiesAssignments } from "@/utils/assignments.be";
 import { getEntitiesWithRoles } from "@/utils/entities.be";
-import { countGroupsByEntities, getGroupsByEntities } from "@/utils/groups.be";
-import { checkAccess, findAllowedEntities } from "@/utils/permissions";
-import { calculateAverageLevel, calculateBandScore } from "@/utils/score";
+import { countGroupsByEntities } from "@/utils/groups.be";
+import {
+  checkAccess,
+  groupAllowedEntitiesByPermissions,
+} from "@/utils/permissions";
 import { groupByExam } from "@/utils/stats";
-import { getStatsByUsers } from "@/utils/stats.be";
-import { countAllowedUsers, filterAllowedUsers, getUsers } from "@/utils/users.be";
-import { getEntitiesUsers } from "@/utils/users.be";
+import { countAllowedUsers, getUsers } from "@/utils/users.be";
 import { clsx } from "clsx";
 import { withIronSessionSsr } from "iron-session/next";
-import { uniqBy } from "lodash";
 import moment from "moment";
 import Head from "next/head";
-import Link from "next/link";
 import { useRouter } from "next/router";
 import { useMemo } from "react";
 import {
-	BsBank,
-	BsClipboard2Data,
-	BsClock,
-	BsEnvelopePaper,
-	BsPaperclip,
-	BsPencilSquare,
-	BsPeople,
-	BsPeopleFill,
-	BsPersonFill,
-	BsPersonFillGear,
+  BsBank,
+  BsClock,
+  BsEnvelopePaper,
+  BsPencilSquare,
+  BsPeople,
+  BsPeopleFill,
+  BsPersonFill,
+  BsPersonFillGear,
 } from "react-icons/bs";
 import { ToastContainer } from "react-toastify";
 import { isAdmin } from "@/utils/users";
 
 interface Props {
-	user: User;
-	students: StudentUser[]
-	latestStudents: User[]
-	latestTeachers: User[]
-	userCounts: { [key in Type]: number }
-	entities: EntityWithRoles[];
-	assignmentsCount: number;
-	stats: Stat[];
-	groupsCount: number;
+  user: User;
+  students: StudentUser[];
+  latestStudents: User[];
+  latestTeachers: User[];
+  userCounts: { [key in Type]: number };
+  entities: EntityWithRoles[];
+  assignmentsCount: number;
+  stats: Stat[];
+  groupsCount: number;
 }
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
-	const user = await requestUser(req, res)
-	if (!user || !user.isVerified) return redirect("/login")
+  const user = await requestUser(req, res);
+  if (!user || !user.isVerified) return redirect("/login");
 
-	if (!checkAccess(user, ["admin", "developer", "mastercorporate"])) return redirect("/")
+  if (!checkAccess(user, ["admin", "developer", "mastercorporate"]))
+    return redirect("/");
 
-	const entityIDS = mapBy(user.entities, "id") || [];
-	const entities = await getEntitiesWithRoles(isAdmin(user) ? undefined : entityIDS);
+  const entityIDS = mapBy(user.entities, "id") || [];
+  const entities = await getEntitiesWithRoles(
+    isAdmin(user) ? undefined : entityIDS
+  );
+  const {
+    ["view_students"]: allowedStudentEntities,
+    ["view_teachers"]: allowedTeacherEntities,
+  } = groupAllowedEntitiesByPermissions(user, entities, [
+    "view_students",
+    "view_teachers",
+  ]);
 
-	const allowedStudentEntities = findAllowedEntities(user, entities, "view_students")
-	const allowedTeacherEntities = findAllowedEntities(user, entities, "view_teachers")
+  const allowedStudentEntitiesIDS = mapBy(allowedStudentEntities, "id");
 
-	const students =
-		await getUsers({ type: 'student', "entities.id": { $in: mapBy(allowedStudentEntities, 'id') } }, 10, { averageLevel: -1 });
-	const latestStudents =
-		await getUsers({ type: 'student', "entities.id": { $in: mapBy(allowedStudentEntities, 'id') } }, 10, { registrationDate: -1 })
-	const latestTeachers =
-		await getUsers({ type: 'teacher', "entities.id": { $in: mapBy(allowedTeacherEntities, 'id') } }, 10, { registrationDate: -1 })
+  const entitiesIDS = mapBy(entities, "id") || [];
 
-	const userCounts = await countAllowedUsers(user, entities)
-	const assignmentsCount = await countEntitiesAssignments(mapBy(entities, "id"), { archived: { $ne: true } });
-	const groupsCount = await countGroupsByEntities(mapBy(entities, "id"));
+  const students = await getUsers(
+    { type: "student", "entities.id": { $in: allowedStudentEntitiesIDS } },
+    10,
+    { averageLevel: -1 },
+    { id: 1, name: 1, email: 1, profilePicture: 1 }
+  );
 
-	return { props: serialize({ user, students, latestStudents, latestTeachers, userCounts, entities, assignmentsCount, groupsCount }) };
+  const latestStudents = await getUsers(
+    { type: "student", "entities.id": { $in: allowedStudentEntitiesIDS } },
+    10,
+    { registrationDate: -1 },
+    { id: 1, name: 1, email: 1, profilePicture: 1 }
+  );
+
+  const latestTeachers = await getUsers(
+    {
+      type: "teacher",
+      "entities.id": { $in: mapBy(allowedTeacherEntities, "id") },
+    },
+    10,
+    { registrationDate: -1 },
+    { id: 1, name: 1, email: 1, profilePicture: 1 }
+  );
+
+  const userCounts = await countAllowedUsers(user, entities);
+
+  const assignmentsCount = await countEntitiesAssignments(entitiesIDS, {
+    archived: { $ne: true },
+  });
+
+  const groupsCount = await countGroupsByEntities(entitiesIDS);
+
+  return {
+    props: serialize({
+      user,
+      students,
+      latestStudents,
+      latestTeachers,
+      userCounts,
+      entities,
+      assignmentsCount,
+      groupsCount,
+    }),
+  };
 }, sessionOptions);
 
-export default function Dashboard({ user, students, latestStudents, latestTeachers, userCounts, entities, assignmentsCount, stats = [], groupsCount }: Props) {
+export default function Dashboard({
+  user,
+  students,
+  latestStudents,
+  latestTeachers,
+  userCounts,
+  entities,
+  assignmentsCount,
+  stats = [],
+  groupsCount,
+}: Props) {
+  const totalCount = useMemo(
+    () =>
+      userCounts.corporate +
+      userCounts.mastercorporate +
+      userCounts.student +
+      userCounts.teacher,
+    [userCounts]
+  );
 
-	const totalCount = useMemo(() =>
-		userCounts.corporate + userCounts.mastercorporate + userCounts.student + userCounts.teacher, [userCounts])
+  const totalLicenses = useMemo(
+    () =>
+      entities.reduce(
+        (acc, curr) => acc + parseInt(curr.licenses.toString()),
+        0
+      ),
+    [entities]
+  );
 
-	const totalLicenses = useMemo(() => entities.reduce((acc, curr) => acc + parseInt(curr.licenses.toString()), 0), [entities])
+  const router = useRouter();
 
-	const router = useRouter();
+  const allowedEntityStatistics = useAllowedEntities(
+    user,
+    entities,
+    "view_entity_statistics"
+  );
+  const allowedStudentPerformance = useAllowedEntities(
+    user,
+    entities,
+    "view_student_performance"
+  );
 
-	const allowedEntityStatistics = useAllowedEntities(user, entities, 'view_entity_statistics')
-	const allowedStudentPerformance = useAllowedEntities(user, entities, 'view_student_performance')
+  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 />
+      <>
+        <section className="grid grid-cols-5 place-items-center -md:grid-cols-2 gap-4 text-center">
+          <IconCard
+            onClick={() => router.push("/users?type=student")}
+            Icon={BsPersonFill}
+            label="Students"
+            value={userCounts.student}
+            color="purple"
+          />
+          <IconCard
+            onClick={() => router.push("/users?type=teacher")}
+            Icon={BsPencilSquare}
+            label="Teachers"
+            value={userCounts.teacher}
+            color="purple"
+          />
+          <IconCard
+            onClick={() => router.push("/users?type=corporate")}
+            Icon={BsBank}
+            label="Corporate Accounts"
+            value={userCounts.corporate}
+            color="purple"
+          />
+          <IconCard
+            Icon={BsPeople}
+            onClick={() => router.push("/classrooms")}
+            label="Classrooms"
+            value={groupsCount}
+            color="purple"
+          />
+          <IconCard
+            Icon={BsPeopleFill}
+            onClick={() => router.push("/entities")}
+            label="Entities"
+            value={`${entities.length} - ${totalCount}/${totalLicenses}`}
+            color="purple"
+          />
+          {allowedStudentPerformance.length > 0 && (
+            <IconCard
+              Icon={BsPersonFillGear}
+              onClick={() => router.push("/users/performance")}
+              label="Student Performance"
+              value={userCounts.student}
+              color="purple"
+            />
+          )}
+          {allowedEntityStatistics.length > 0 && (
+            <IconCard
+              Icon={BsPersonFillGear}
+              onClick={() => router.push("/statistical")}
+              label="Entity Statistics"
+              value={allowedEntityStatistics.length}
+              color="purple"
+            />
+          )}
+          <IconCard
+            Icon={BsEnvelopePaper}
+            onClick={() => router.push("/assignments")}
+            label="Assignments"
+            value={assignmentsCount}
+            className={clsx(
+              allowedEntityStatistics.length === 0 && "col-span-2"
+            )}
+            color="purple"
+          />
+          <IconCard
+            Icon={BsClock}
+            label="Expiration Date"
+            value={
+              user.subscriptionExpirationDate
+                ? moment(user.subscriptionExpirationDate).format("DD/MM/yyyy")
+                : "Unlimited"
+            }
+            color="rose"
+          />
+        </section>
 
-	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}>
-				<section className="grid grid-cols-5 place-items-center -md:grid-cols-2 gap-4 text-center">
-					<IconCard
-						onClick={() => router.push("/users?type=student")}
-						Icon={BsPersonFill}
-						label="Students"
-						value={userCounts.student}
-						color="purple"
-					/>
-					<IconCard
-						onClick={() => router.push("/users?type=teacher")}
-						Icon={BsPencilSquare}
-						label="Teachers"
-						value={userCounts.teacher}
-						color="purple"
-					/>
-					<IconCard
-						onClick={() => router.push("/users?type=corporate")}
-						Icon={BsBank}
-						label="Corporate Accounts"
-						value={userCounts.corporate}
-						color="purple"
-					/>
-					<IconCard
-						Icon={BsPeople}
-						onClick={() => router.push("/classrooms")}
-						label="Classrooms"
-						value={groupsCount}
-						color="purple"
-					/>
-					<IconCard Icon={BsPeopleFill}
-						onClick={() => router.push("/entities")}
-						label="Entities"
-						value={`${entities.length} - ${totalCount}/${totalLicenses}`}
-						color="purple"
-					/>
-					{allowedStudentPerformance.length > 0 && (
-						<IconCard Icon={BsPersonFillGear}
-							onClick={() => router.push("/users/performance")}
-							label="Student Performance"
-							value={userCounts.student}
-							color="purple"
-						/>
-					)}
-					{allowedEntityStatistics.length > 0 && (
-						<IconCard Icon={BsPersonFillGear}
-							onClick={() => router.push("/statistical")}
-							label="Entity Statistics"
-							value={allowedEntityStatistics.length}
-							color="purple"
-						/>
-					)}
-					<IconCard
-						Icon={BsEnvelopePaper}
-						onClick={() => router.push("/assignments")}
-						label="Assignments"
-						value={assignmentsCount}
-						className={clsx(allowedEntityStatistics.length === 0 && "col-span-2")}
-						color="purple"
-					/>
-					<IconCard
-						Icon={BsClock}
-						label="Expiration Date"
-						value={user.subscriptionExpirationDate ? moment(user.subscriptionExpirationDate).format("DD/MM/yyyy") : "Unlimited"}
-						color="rose"
-					/>
-				</section>
-
-				<section className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full justify-between">
-					<UserDisplayList
-						users={latestStudents}
-						title="Latest Students"
-					/>
-					<UserDisplayList
-						users={latestTeachers}
-						title="Latest Teachers"
-					/>
-					<UserDisplayList
-						users={students}
-						title="Highest level students"
-					/>
-					<UserDisplayList
-						users={
-							students
-								.sort(
-									(a, b) =>
-										Object.keys(groupByExam(filterBy(stats, "user", b))).length -
-										Object.keys(groupByExam(filterBy(stats, "user", a))).length,
-								)
-						}
-						title="Highest exam count students"
-					/>
-				</section>
-			</Layout>
-		</>
-	);
+        <section className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full justify-between">
+          <UserDisplayList users={latestStudents} title="Latest Students" />
+          <UserDisplayList users={latestTeachers} title="Latest Teachers" />
+          <UserDisplayList users={students} title="Highest level students" />
+          <UserDisplayList
+            users={students.sort(
+              (a, b) =>
+                Object.keys(groupByExam(filterBy(stats, "user", b))).length -
+                Object.keys(groupByExam(filterBy(stats, "user", a))).length
+            )}
+            title="Highest exam count students"
+          />
+        </section>
+      </>
+    </>
+  );
 }
diff --git a/src/pages/dashboard/student.tsx b/src/pages/dashboard/student.tsx
index 2a1f000c..90e4da8b 100644
--- a/src/pages/dashboard/student.tsx
+++ b/src/pages/dashboard/student.tsx
@@ -1,5 +1,4 @@
 /* eslint-disable @next/next/no-img-element */
-import Layout from "@/components/High/Layout";
 import Button from "@/components/Low/Button";
 import ProgressBar from "@/components/Low/ProgressBar";
 import InviteWithUserCard from "@/components/Medium/InviteWithUserCard";
@@ -10,267 +9,368 @@ import { Grading } from "@/interfaces";
 import { EntityWithRoles } from "@/interfaces/entity";
 import { Exam } from "@/interfaces/exam";
 import { InviteWithEntity } from "@/interfaces/invite";
-import { Assignment } from "@/interfaces/results";
-import { Stat, User } from "@/interfaces/user";
+import { Assignment, AssignmentWithHasResults } from "@/interfaces/results";
+import { User } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
 import useExamStore from "@/stores/exam";
 import { findBy, mapBy, redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
-import { activeAssignmentFilter } from "@/utils/assignments";
-import { getAssignmentsByAssignee } from "@/utils/assignments.be";
-import { getEntitiesWithRoles, getEntityWithRoles } from "@/utils/entities.be";
+import { getAssignmentsForStudent } from "@/utils/assignments.be";
+import { getEntities } from "@/utils/entities.be";
 import { getExamsByIds } from "@/utils/exams.be";
 import { getGradingSystemByEntity } from "@/utils/grading.be";
-import { convertInvitersToEntity, getInvitesByInvitee } from "@/utils/invites.be";
-import { countExamModules, countFullExams, MODULE_ARRAY, sortByModule, sortByModuleName } from "@/utils/moduleUtils";
+import {
+  convertInvitersToEntity,
+  getInvitesByInvitee,
+} from "@/utils/invites.be";
+import { MODULE_ARRAY, sortByModule } from "@/utils/moduleUtils";
 import { checkAccess } from "@/utils/permissions";
 import { getGradingLabel } from "@/utils/score";
 import { getSessionsByUser } from "@/utils/sessions.be";
-import { averageScore } from "@/utils/stats";
-import { getStatsByUser } from "@/utils/stats.be";
+import { getDetailedStatsByUser } from "@/utils/stats.be";
 import clsx from "clsx";
 import { withIronSessionSsr } from "iron-session/next";
 import { capitalize, uniqBy } from "lodash";
 import moment from "moment";
 import Head from "next/head";
 import { useRouter } from "next/router";
-import { useMemo } from "react";
-import { BsBook, BsClipboard, BsFileEarmarkText, BsHeadphones, BsMegaphone, BsPen, BsPencil, BsStar } from "react-icons/bs";
+import {
+  BsBook,
+  BsClipboard,
+  BsFileEarmarkText,
+  BsHeadphones,
+  BsMegaphone,
+  BsPen,
+  BsPencil,
+  BsStar,
+} from "react-icons/bs";
 import { ToastContainer } from "react-toastify";
 
 interface Props {
-	user: User;
-	entities: EntityWithRoles[];
-	assignments: Assignment[];
-	stats: Stat[];
-	exams: Exam[];
-	sessions: Session[];
-	invites: InviteWithEntity[];
-	grading: Grading;
+  user: User;
+  entities: EntityWithRoles[];
+  assignments: AssignmentWithHasResults[];
+  stats: { fullExams: number; uniqueModules: number; averageScore: number };
+  exams: Exam[];
+  sessions: Session[];
+  invites: InviteWithEntity[];
+  grading: Grading;
 }
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
-	const user = await requestUser(req, res)
-	if (!user || !user.isVerified) return redirect("/login")
+  const user = await requestUser(req, res);
+  if (!user || !user.isVerified) return redirect("/login");
 
-	if (!checkAccess(user, ["admin", "developer", "student"]))
-		return redirect("/")
+  if (!checkAccess(user, ["admin", "developer", "student"]))
+    return redirect("/");
 
-	const entityIDS = mapBy(user.entities, "id") || [];
+  const entityIDS = mapBy(user.entities, "id") || [];
 
-	const entities = await getEntitiesWithRoles(entityIDS);
-	const assignments = await getAssignmentsByAssignee(user.id, { archived: { $ne: true } });
-	const stats = await getStatsByUser(user.id);
-	const sessions = await getSessionsByUser(user.id, 10);
-	const invites = await getInvitesByInvitee(user.id);
-	const grading = await getGradingSystemByEntity(entityIDS[0] || "");
+  const entities = await getEntities(entityIDS, { _id: 0, label: 1 });
+  const currentDate = moment().toISOString();
+  const assignments = await getAssignmentsForStudent(user.id, currentDate);
+  const stats = await getDetailedStatsByUser(user.id, "stats");
 
-	const formattedInvites = await Promise.all(invites.map(convertInvitersToEntity));
+  const assignmentsIDs = mapBy(assignments, "id");
 
-	const examIDs = uniqBy(
-		assignments.flatMap((a) =>
-			a.exams.filter((e) => e.assignee === user.id).map((e) => ({ module: e.module, id: e.id, key: `${e.module}_${e.id}` })),
-		),
-		"key",
-	);
-	const exams = await getExamsByIds(examIDs);
+  const sessions = await getSessionsByUser(user.id, 10, {
+    ["assignment.id"]: { $in: assignmentsIDs },
+  });
+  const invites = await getInvitesByInvitee(user.id);
+  const grading = await getGradingSystemByEntity(entityIDS[0] || "", {
+    _id: 0,
+    steps: 1,
+  });
 
-	return { props: serialize({ user, entities, assignments, stats, exams, sessions, invites: formattedInvites, grading }) };
+  const formattedInvites = await Promise.all(
+    invites.map(convertInvitersToEntity)
+  );
+  const examIDs = uniqBy(
+    assignments.flatMap((a) =>
+      a.exams.map((e: { module: string; id: string }) => ({
+        module: e.module,
+        id: e.id,
+        key: `${e.module}_${e.id}`,
+      }))
+    ),
+    "key"
+  );
+  const exams = examIDs.length > 0 ? await getExamsByIds(examIDs) : [];
+
+  return {
+    props: serialize({
+      user,
+      entities,
+      assignments,
+      stats,
+      exams,
+      sessions,
+      invites: formattedInvites,
+      grading,
+    }),
+  };
 }, sessionOptions);
 
-export default function Dashboard({ user, entities, assignments, stats, invites, grading, sessions, exams }: Props) {
-	const router = useRouter();
+export default function Dashboard({
+  user,
+  entities,
+  assignments,
+  stats,
+  invites,
+  grading,
+  sessions,
+  exams,
+}: Props) {
+  const router = useRouter();
 
-	const dispatch = useExamStore((state) => state.dispatch);
+  const dispatch = useExamStore((state) => state.dispatch);
 
-	const startAssignment = (assignment: Assignment) => {
-		const assignmentExams = exams.filter(e => {
-			const exam = findBy(assignment.exams, 'id', e.id)
-			return !!exam && exam.module === e.module
-		})
+  const startAssignment = (assignment: Assignment) => {
+    const assignmentExams = exams.filter((e) => {
+      const exam = findBy(assignment.exams, "id", e.id);
+      return !!exam && exam.module === e.module;
+    });
 
-		if (assignmentExams.every((x) => !!x)) {
-			dispatch({
-				type: "INIT_EXAM", payload: {
-					exams: assignmentExams.sort(sortByModule),
-					modules: mapBy(assignmentExams.sort(sortByModule), 'module'),
-					assignment
-				}
-			})
+    if (assignmentExams.every((x) => !!x)) {
+      dispatch({
+        type: "INIT_EXAM",
+        payload: {
+          exams: assignmentExams.sort(sortByModule),
+          modules: mapBy(assignmentExams.sort(sortByModule), "module"),
+          assignment,
+        },
+      });
 
-			router.push("/exam");
-		}
-	};
+      router.push("/exam");
+    }
+  };
 
-	const studentAssignments = useMemo(() => assignments.filter(activeAssignmentFilter), [assignments]);
+  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 />
+      <>
+        {entities.length > 0 && (
+          <div className="rounded-lg bg-neutral-200 px-2 py-1 ">
+            <b>{mapBy(entities, "label")?.join(", ")}</b>
+          </div>
+        )}
 
-	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}>
-				{entities.length > 0 && (
-					<div className="absolute right-4 top-4 rounded-lg bg-neutral-200 px-2 py-1">
-						<b>{mapBy(entities, "label")?.join(", ")}</b>
-					</div>
-				)}
+        <ProfileSummary
+          user={user}
+          items={[
+            {
+              icon: (
+                <BsFileEarmarkText className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />
+              ),
+              value: stats.fullExams,
+              label: "Exams",
+              tooltip: "Number of all conducted completed exams",
+            },
+            {
+              icon: (
+                <BsPencil className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />
+              ),
+              value: stats.uniqueModules,
+              label: "Modules",
+              tooltip:
+                "Number of all exam modules performed including Level Test",
+            },
+            {
+              icon: (
+                <BsStar className="text-mti-red-light h-6 w-6 md:h-8 md:w-8" />
+              ),
+              value: `${stats?.averageScore.toFixed(2) || 0}%`,
+              label: "Average Score",
+              tooltip: "Average success rate for questions responded",
+            },
+          ]}
+        />
 
-				<ProfileSummary
-					user={user}
-					items={[
-						{
-							icon: <BsFileEarmarkText className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
-							value: countFullExams(stats),
-							label: "Exams",
-							tooltip: "Number of all conducted completed exams",
-						},
-						{
-							icon: <BsPencil className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
-							value: countExamModules(stats),
-							label: "Modules",
-							tooltip: "Number of all exam modules performed including Level Test",
-						},
-						{
-							icon: <BsStar className="text-mti-red-light h-6 w-6 md:h-8 md:w-8" />,
-							value: `${stats.length > 0 ? averageScore(stats) : 0}%`,
-							label: "Average Score",
-							tooltip: "Average success rate for questions responded",
-						},
-					]}
-				/>
+        {/* Assignments */}
+        <section className="flex flex-col gap-1 md:gap-3">
+          <span className="text-mti-black text-lg font-bold">Assignments</span>
+          <span className="text-mti-gray-taupe scrollbar-hide flex gap-8 overflow-x-scroll">
+            {assignments.length === 0 &&
+              "Assignments will appear here. It seems that for now there are no assignments for you."}
+            {assignments.map((assignment) => (
+              <div
+                className={clsx(
+                  "border-mti-gray-anti-flash flex min-w-[350px] flex-col gap-6 rounded-xl border p-4",
+                  assignment.hasResults && "border-mti-green-light"
+                )}
+                key={assignment.id}
+              >
+                <div className="flex flex-col gap-1">
+                  <h3 className="text-mti-black/90 text-xl font-semibold">
+                    {assignment.name}
+                  </h3>
+                  <span className="flex justify-between gap-1 text-lg">
+                    <span>
+                      {moment(assignment.startDate).format("DD/MM/YY, HH:mm")}
+                    </span>
+                    <span>-</span>
+                    <span>
+                      {moment(assignment.endDate).format("DD/MM/YY, HH:mm")}
+                    </span>
+                  </span>
+                </div>
+                <div className="flex w-full items-center justify-between">
+                  <div className="-md:mt-2 grid w-fit min-w-[140px] grid-cols-2 grid-rows-2 place-items-center justify-between gap-4">
+                    {assignment.exams.map((e) => (
+                      <ModuleBadge
+                        className="scale-110 w-full"
+                        key={e.module}
+                        module={e.module}
+                      />
+                    ))}
+                  </div>
+                  {!assignment.hasResults && (
+                    <>
+                      <div
+                        className="tooltip flex h-full w-full items-center justify-end pl-8 md:hidden"
+                        data-tip="Your screen size is too small to perform an assignment"
+                      >
+                        <Button
+                          className="h-full w-full !rounded-xl"
+                          variant="outline"
+                        >
+                          Start
+                        </Button>
+                      </div>
+                      <div
+                        data-tip="You have already started this assignment!"
+                        className={clsx(
+                          "-md:hidden h-full w-full max-w-[50%] cursor-pointer",
+                          sessions.filter(
+                            (x) => x.assignment?.id === assignment.id
+                          ).length > 0 && "tooltip"
+                        )}
+                      >
+                        <Button
+                          className={clsx("w-full h-full !rounded-xl")}
+                          onClick={() => startAssignment(assignment)}
+                          variant="outline"
+                          disabled={
+                            sessions.filter(
+                              (x) => x.assignment?.id === assignment.id
+                            ).length > 0
+                          }
+                        >
+                          Start
+                        </Button>
+                      </div>
+                    </>
+                  )}
+                  {assignment.hasResults && (
+                    <Button
+                      onClick={() => router.push("/record")}
+                      color="green"
+                      className="-md:hidden h-full w-full max-w-[50%] !rounded-xl"
+                      variant="outline"
+                    >
+                      Submitted
+                    </Button>
+                  )}
+                </div>
+              </div>
+            ))}
+          </span>
+        </section>
 
-				{/* Assignments */}
-				<section className="flex flex-col gap-1 md:gap-3">
-					<span className="text-mti-black text-lg font-bold">Assignments</span>
-					<span className="text-mti-gray-taupe scrollbar-hide flex gap-8 overflow-x-scroll">
-						{studentAssignments.length === 0 && "Assignments will appear here. It seems that for now there are no assignments for you."}
-						{studentAssignments
-							.sort((a, b) => moment(a.startDate).diff(b.startDate))
-							.map((assignment) => (
-								<div
-									className={clsx(
-										"border-mti-gray-anti-flash flex min-w-[350px] flex-col gap-6 rounded-xl border p-4",
-										assignment.results.map((r) => r.user).includes(user.id) && "border-mti-green-light",
-									)}
-									key={assignment.id}>
-									<div className="flex flex-col gap-1">
-										<h3 className="text-mti-black/90 text-xl font-semibold">{assignment.name}</h3>
-										<span className="flex justify-between gap-1 text-lg">
-											<span>{moment(assignment.startDate).format("DD/MM/YY, HH:mm")}</span>
-											<span>-</span>
-											<span>{moment(assignment.endDate).format("DD/MM/YY, HH:mm")}</span>
-										</span>
-									</div>
-									<div className="flex w-full items-center justify-between">
-										<div className="-md:mt-2 grid w-fit min-w-[140px] grid-cols-2 grid-rows-2 place-items-center justify-between gap-4">
-											{assignment.exams
-												.filter((e) => e.assignee === user.id)
-												.map((e) => e.module)
-												.sort(sortByModuleName)
-												.map((module) => (
-													<ModuleBadge className="scale-110 w-full" key={module} module={module} />
-												))}
-										</div>
-										{!assignment.results.map((r) => r.user).includes(user.id) && (
-											<>
-												<div
-													className="tooltip flex h-full w-full items-center justify-end pl-8 md:hidden"
-													data-tip="Your screen size is too small to perform an assignment">
-													<Button className="h-full w-full !rounded-xl" variant="outline">
-														Start
-													</Button>
-												</div>
-												<div
-													data-tip="You have already started this assignment!"
-													className={clsx(
-														"-md:hidden h-full w-full max-w-[50%] cursor-pointer",
-														sessions.filter((x) => x.assignment?.id === assignment.id).length > 0 && "tooltip",
-													)}>
-													<Button
-														className={clsx("w-full h-full !rounded-xl")}
-														onClick={() => startAssignment(assignment)}
-														variant="outline"
-														disabled={sessions.filter((x) => x.assignment?.id === assignment.id).length > 0}>
-														Start
-													</Button>
-												</div>
-											</>
-										)}
-										{assignment.results.map((r) => r.user).includes(user.id) && (
-											<Button
-												onClick={() => router.push("/record")}
-												color="green"
-												className="-md:hidden h-full w-full max-w-[50%] !rounded-xl"
-												variant="outline">
-												Submitted
-											</Button>
-										)}
-									</div>
-								</div>
-							))}
-					</span>
-				</section>
+        {/* Invites */}
+        {invites.length > 0 && (
+          <section className="flex flex-col gap-1 md:gap-3">
+            <span className="text-mti-gray-taupe scrollbar-hide flex gap-8 overflow-x-scroll">
+              {invites.map((invite) => (
+                <InviteWithUserCard
+                  key={invite.id}
+                  invite={invite}
+                  reload={() => router.replace(router.asPath)}
+                />
+              ))}
+            </span>
+          </section>
+        )}
 
-				{/* Invites */}
-				{invites.length > 0 && (
-					<section className="flex flex-col gap-1 md:gap-3">
-						<span className="text-mti-gray-taupe scrollbar-hide flex gap-8 overflow-x-scroll">
-							{invites.map((invite) => (
-								<InviteWithUserCard key={invite.id} invite={invite} reload={() => router.replace(router.asPath)} />
-							))}
-						</span>
-					</section>
-				)}
-
-				{/* Score History */}
-				<section className="flex flex-col gap-3">
-					<span className="text-lg font-bold">Score History</span>
-					<div className="-md:grid-rows-4 grid gap-6 md:grid-cols-2">
-						{MODULE_ARRAY.map((module) => {
-							const desiredLevel = user.desiredLevels[module] || 9;
-							const level = user.levels[module] || 0;
-							return (
-								<div className="border-mti-gray-anti-flash flex flex-col gap-2 rounded-xl border p-4" key={module}>
-									<div className="flex items-center gap-2 md:gap-3">
-										<div className="bg-mti-gray-smoke flex h-8 w-8 items-center justify-center rounded-lg md:h-12 md:w-12 md:rounded-xl">
-											{module === "reading" && <BsBook className="text-ielts-reading h-4 w-4 md:h-5 md:w-5" />}
-											{module === "listening" && <BsHeadphones className="text-ielts-listening h-4 w-4 md:h-5 md:w-5" />}
-											{module === "writing" && <BsPen className="text-ielts-writing h-4 w-4 md:h-5 md:w-5" />}
-											{module === "speaking" && <BsMegaphone className="text-ielts-speaking h-4 w-4 md:h-5 md:w-5" />}
-											{module === "level" && <BsClipboard className="text-ielts-level h-4 w-4 md:h-5 md:w-5" />}
-										</div>
-										<div className="flex w-full justify-between">
-											<span className="text-sm font-bold md:font-extrabold">{capitalize(module)}</span>
-											<span className="text-mti-gray-dim text-sm font-normal">
-												{module === "level" && !!grading && `English Level: ${getGradingLabel(level, grading.steps)}`}
-												{module !== "level" && `Level ${level} / Level 9 (Desired Level: ${desiredLevel})`}
-											</span>
-										</div>
-									</div>
-									<div className="md:pl-14">
-										<ProgressBar
-											color={module}
-											label=""
-											mark={module === "level" ? undefined : Math.round((desiredLevel * 100) / 9)}
-											markLabel={`Desired Level: ${desiredLevel}`}
-											percentage={module === "level" ? level : Math.round((level * 100) / 9)}
-											className="h-2 w-full"
-										/>
-									</div>
-								</div>
-							);
-						})}
-					</div>
-				</section>
-			</Layout>
-		</>
-	);
+        {/* Score History */}
+        <section className="flex flex-col gap-3">
+          <span className="text-lg font-bold">Score History</span>
+          <div className="-md:grid-rows-4 grid gap-6 md:grid-cols-2">
+            {MODULE_ARRAY.map((module) => {
+              const desiredLevel = user.desiredLevels[module] || 9;
+              const level = user.levels[module] || 0;
+              return (
+                <div
+                  className="border-mti-gray-anti-flash flex flex-col gap-2 rounded-xl border p-4 w-full"
+                  key={module}
+                >
+                  <div className="flex items-center gap-2 md:gap-3">
+                    <div className="bg-mti-gray-smoke flex h-8 w-8 items-center justify-center rounded-lg md:h-12 md:w-12 md:rounded-xl">
+                      {module === "reading" && (
+                        <BsBook className="text-ielts-reading h-4 w-4 md:h-5 md:w-5" />
+                      )}
+                      {module === "listening" && (
+                        <BsHeadphones className="text-ielts-listening h-4 w-4 md:h-5 md:w-5" />
+                      )}
+                      {module === "writing" && (
+                        <BsPen className="text-ielts-writing h-4 w-4 md:h-5 md:w-5" />
+                      )}
+                      {module === "speaking" && (
+                        <BsMegaphone className="text-ielts-speaking h-4 w-4 md:h-5 md:w-5" />
+                      )}
+                      {module === "level" && (
+                        <BsClipboard className="text-ielts-level h-4 w-4 md:h-5 md:w-5" />
+                      )}
+                    </div>
+                    <div className="flex w-full justify-between">
+                      <span className="text-sm font-bold md:font-extrabold">
+                        {capitalize(module)}
+                      </span>
+                      <span className="text-mti-gray-dim text-sm font-normal">
+                        {module === "level" &&
+                          !!grading &&
+                          `English Level: ${getGradingLabel(
+                            level,
+                            grading.steps
+                          )}`}
+                        {module !== "level" &&
+                          `Level ${level} / Level 9 (Desired Level: ${desiredLevel})`}
+                      </span>
+                    </div>
+                  </div>
+                  <div className="md:pl-14">
+                    <ProgressBar
+                      color={module}
+                      label=""
+                      mark={
+                        module === "level"
+                          ? undefined
+                          : Math.round((desiredLevel * 100) / 9)
+                      }
+                      markLabel={`Desired Level: ${desiredLevel}`}
+                      percentage={
+                        module === "level"
+                          ? level
+                          : Math.round((level * 100) / 9)
+                      }
+                      className="h-2 w-full"
+                    />
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </section>
+      </>
+    </>
+  );
 }
diff --git a/src/pages/dashboard/teacher.tsx b/src/pages/dashboard/teacher.tsx
index 56fd56da..675805ec 100644
--- a/src/pages/dashboard/teacher.tsx
+++ b/src/pages/dashboard/teacher.tsx
@@ -1,8 +1,6 @@
 /* eslint-disable @next/next/no-img-element */
-import Layout from "@/components/High/Layout";
 import UserDisplayList from "@/components/UserDisplayList";
 import IconCard from "@/components/IconCard";
-import { Module } from "@/interfaces";
 import { EntityWithRoles } from "@/interfaces/entity";
 import { Assignment } from "@/interfaces/results";
 import { Group, Stat, User } from "@/interfaces/user";
@@ -12,138 +10,184 @@ import { getEntitiesAssignments } from "@/utils/assignments.be";
 import { getEntitiesWithRoles } from "@/utils/entities.be";
 import { getGroupsByEntities } from "@/utils/groups.be";
 import { checkAccess, findAllowedEntities } from "@/utils/permissions";
-import { calculateAverageLevel, calculateBandScore } from "@/utils/score";
+import { calculateAverageLevel } from "@/utils/score";
 import { groupByExam } from "@/utils/stats";
 import { getStatsByUsers } from "@/utils/stats.be";
-import { getEntitiesUsers } from "@/utils/users.be";
 import { withIronSessionSsr } from "iron-session/next";
-import { uniqBy } from "lodash";
 import Head from "next/head";
 import { useRouter } from "next/router";
-import { useMemo } from "react";
-import { BsClipboard2Data, BsEnvelopePaper, BsPaperclip, BsPeople, BsPersonFill, BsPersonFillGear } from "react-icons/bs";
+import {
+  BsEnvelopePaper,
+  BsPeople,
+  BsPersonFill,
+  BsPersonFillGear,
+} from "react-icons/bs";
 import { ToastContainer } from "react-toastify";
 import { requestUser } from "@/utils/api";
 import { useAllowedEntities } from "@/hooks/useEntityPermissions";
-import { filterAllowedUsers } from "@/utils/users.be";
+import { getEntitiesUsers } from "@/utils/users.be";
 import { isAdmin } from "@/utils/users";
 
 interface Props {
-	user: User;
-	users: User[];
-	entities: EntityWithRoles[];
-	assignments: Assignment[];
-	stats: Stat[];
-	groups: Group[];
+  user: User;
+  students: User[];
+  entities: EntityWithRoles[];
+  assignments: Assignment[];
+  stats: Stat[];
+  groups: Group[];
 }
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
-	const user = await requestUser(req, res)
-	if (!user || !user.isVerified) return redirect("/login")
+  const user = await requestUser(req, res);
+  if (!user || !user.isVerified) return redirect("/login");
 
-	if (!checkAccess(user, ["admin", "developer", "teacher"]))
-		return redirect("/")
+  if (!checkAccess(user, ["admin", "developer", "teacher"]))
+    return redirect("/");
 
-	const entityIDS = mapBy(user.entities, "id") || [];
-	const entities = await getEntitiesWithRoles(isAdmin(user) ? undefined : entityIDS);
-	const users = await filterAllowedUsers(user, entities)
+  const entityIDS = mapBy(user.entities, "id") || [];
 
-	const assignments = await getEntitiesAssignments(entityIDS);
-	const stats = await getStatsByUsers(users.map((u) => u.id));
-	const groups = await getGroupsByEntities(entityIDS);
+  const entities = await getEntitiesWithRoles(
+    isAdmin(user) ? undefined : entityIDS
+  );
 
-	return { props: serialize({ user, users, entities, assignments, stats, groups }) };
+  const filteredEntities = findAllowedEntities(user, entities, "view_students");
+
+  const students = await getEntitiesUsers(
+    mapBy(filteredEntities, "id"),
+    {
+      type: "student",
+    },
+    0,
+    {
+      _id: 0,
+      id: 1,
+      name: 1,
+      email: 1,
+      profilePicture: 1,
+      levels: 1,
+      registrationDate: 1,
+    }
+  );
+
+  const assignments = await getEntitiesAssignments(entityIDS);
+
+  const stats = await getStatsByUsers(students.map((u) => u.id));
+
+  const groups = await getGroupsByEntities(entityIDS);
+
+  return {
+    props: serialize({ user, students, entities, assignments, stats, groups }),
+  };
 }, sessionOptions);
 
-export default function Dashboard({ user, users, entities, assignments, stats, groups }: Props) {
-	const students = useMemo(() => users.filter((u) => u.type === "student"), [users]);
-	const router = useRouter();
+export default function Dashboard({
+  user,
+  students,
+  entities,
+  assignments,
+  stats,
+  groups,
+}: Props) {
+  const router = useRouter();
 
-	const allowedEntityStatistics = useAllowedEntities(user, entities, 'view_entity_statistics')
-	const allowedStudentPerformance = useAllowedEntities(user, entities, 'view_student_performance')
+  const allowedEntityStatistics = useAllowedEntities(
+    user,
+    entities,
+    "view_entity_statistics"
+  );
+  const allowedStudentPerformance = useAllowedEntities(
+    user,
+    entities,
+    "view_student_performance"
+  );
 
-	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="w-full flex flex-col gap-4">
-					{entities.length > 0 && (
-						<div className="w-fit self-end bg-neutral-200 px-2 rounded-lg py-1">
-							<b>{mapBy(entities, "label")?.join(", ")}</b>
-						</div>
-					)}
-					<section className="grid grid-cols-5 -md:grid-cols-2 place-items-center gap-4 text-center">
-						<IconCard
-							Icon={BsPersonFill}
-							onClick={() => router.push("/users?type=student")}
-							label="Students"
-							value={students.length}
-							color="purple"
-						/>
-						<IconCard
-							onClick={() => router.push("/classrooms")}
-							Icon={BsPeople}
-							label="Classrooms"
-							value={groups.length}
-							color="purple"
-						/>
-						{allowedStudentPerformance.length > 0 && (
-							<IconCard Icon={BsPersonFillGear}
-								onClick={() => router.push("/users/performance")}
-								label="Student Performance"
-								value={students.length}
-								color="purple"
-							/>
-						)}
-						{allowedEntityStatistics.length > 0 && (
-							<IconCard Icon={BsPersonFillGear}
-								onClick={() => router.push("/statistical")}
-								label="Entity Statistics"
-								value={allowedEntityStatistics.length}
-								color="purple"
-							/>
-						)}
-						<IconCard
-							Icon={BsEnvelopePaper}
-							onClick={() => router.push("/assignments")}
-							label="Assignments"
-							value={assignments.filter((a) => !a.archived).length}
-							color="purple"
-						/>
-					</section>
-				</div>
+  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 />
+      <>
+        <div className="w-full flex flex-col gap-4">
+          {entities.length > 0 && (
+            <div className="w-fit self-end bg-neutral-200 px-2 rounded-lg py-1">
+              <b>{mapBy(entities, "label")?.join(", ")}</b>
+            </div>
+          )}
+          <section className="grid grid-cols-5 -md:grid-cols-2 place-items-center gap-4 text-center">
+            <IconCard
+              Icon={BsPersonFill}
+              onClick={() => router.push("/users?type=student")}
+              label="Students"
+              value={students.length}
+              color="purple"
+            />
+            <IconCard
+              onClick={() => router.push("/classrooms")}
+              Icon={BsPeople}
+              label="Classrooms"
+              value={groups.length}
+              color="purple"
+            />
+            {allowedStudentPerformance.length > 0 && (
+              <IconCard
+                Icon={BsPersonFillGear}
+                onClick={() => router.push("/users/performance")}
+                label="Student Performance"
+                value={students.length}
+                color="purple"
+              />
+            )}
+            {allowedEntityStatistics.length > 0 && (
+              <IconCard
+                Icon={BsPersonFillGear}
+                onClick={() => router.push("/statistical")}
+                label="Entity Statistics"
+                value={allowedEntityStatistics.length}
+                color="purple"
+              />
+            )}
+            <IconCard
+              Icon={BsEnvelopePaper}
+              onClick={() => router.push("/assignments")}
+              label="Assignments"
+              value={assignments.filter((a) => !a.archived).length}
+              color="purple"
+            />
+          </section>
+        </div>
 
-				<section className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full justify-between">
-					<UserDisplayList
-						users={students.sort((a, b) => dateSorter(a, b, "desc", "registrationDate"))}
-						title="Latest Students"
-					/>
-					<UserDisplayList
-						users={students.sort((a, b) => calculateAverageLevel(b.levels) - calculateAverageLevel(a.levels))}
-						title="Highest level students"
-					/>
-					<UserDisplayList
-						users={
-							students
-								.sort(
-									(a, b) =>
-										Object.keys(groupByExam(filterBy(stats, "user", b))).length -
-										Object.keys(groupByExam(filterBy(stats, "user", a))).length,
-								)
-						}
-						title="Highest exam count students"
-					/>
-				</section>
-			</Layout>
-		</>
-	);
+        <section className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full justify-between">
+          <UserDisplayList
+            users={students.sort((a, b) =>
+              dateSorter(a, b, "desc", "registrationDate")
+            )}
+            title="Latest Students"
+          />
+          <UserDisplayList
+            users={students.sort(
+              (a, b) =>
+                calculateAverageLevel(b.levels) -
+                calculateAverageLevel(a.levels)
+            )}
+            title="Highest level students"
+          />
+          <UserDisplayList
+            users={students.sort(
+              (a, b) =>
+                Object.keys(groupByExam(filterBy(stats, "user", b))).length -
+                Object.keys(groupByExam(filterBy(stats, "user", a))).length
+            )}
+            title="Highest exam count students"
+          />
+        </section>
+      </>
+    </>
+  );
 }
diff --git a/src/pages/entities/[id]/index.tsx b/src/pages/entities/[id]/index.tsx
index 34b35978..473f7a0b 100644
--- a/src/pages/entities/[id]/index.tsx
+++ b/src/pages/entities/[id]/index.tsx
@@ -1,24 +1,20 @@
 /* eslint-disable @next/next/no-img-element */
 import CardList from "@/components/High/CardList";
-import Layout from "@/components/High/Layout";
 import Select from "@/components/Low/Select";
 import Input from "@/components/Low/Input";
 import Checkbox from "@/components/Low/Checkbox";
 import Tooltip from "@/components/Low/Tooltip";
 import { useEntityPermission } from "@/hooks/useEntityPermissions";
-import { useListSearch } from "@/hooks/useListSearch";
-import usePagination from "@/hooks/usePagination";
-import { Entity, EntityWithRoles, Role } from "@/interfaces/entity";
-import { GroupWithUsers, User } from "@/interfaces/user";
+import { EntityWithRoles, Role } from "@/interfaces/entity";
+import {  User } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
 import { USER_TYPE_LABELS } from "@/resources/user";
 import { findBy, mapBy, redirect, serialize } from "@/utils";
 import { getEntityWithRoles } from "@/utils/entities.be";
-import { convertToUsers, getGroup } from "@/utils/groups.be";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
-import { checkAccess, doesEntityAllow, getTypesOfUser } from "@/utils/permissions";
+import { doesEntityAllow  } from "@/utils/permissions";
 import { getUserName, isAdmin } from "@/utils/users";
-import { filterAllowedUsers, getEntitiesUsers, getEntityUsers, getLinkedUsers, getSpecificUsers, getUsers } from "@/utils/users.be";
+import { filterAllowedUsers, getEntitiesUsers, getEntityUsers,  getUsers } from "@/utils/users.be";
 import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
 import axios from "axios";
 import clsx from "clsx";
@@ -28,7 +24,7 @@ import Head from "next/head";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { Divider } from "primereact/divider";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect,  useState } from "react";
 import ReactDatePicker from "react-datepicker";
 import { CURRENCIES } from "@/resources/paypal";
 
@@ -37,11 +33,9 @@ import {
 	BsChevronLeft,
 	BsClockFill,
 	BsEnvelopeFill,
-	BsFillPersonVcardFill,
 	BsHash,
 	BsPerson,
 	BsPlus,
-	BsSquare,
 	BsStopwatchFill,
 	BsTag,
 	BsTrash,
@@ -344,7 +338,7 @@ export default function Home({ user, entity, users, linkedUsers }: Props) {
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
 
-			<Layout user={user}>
+			<>
 				<section className="flex flex-col gap-0">
 					<div className="flex flex-col gap-3">
 						<div className="flex items-start justify-between">
@@ -555,7 +549,7 @@ export default function Home({ user, entity, users, linkedUsers }: Props) {
 						searchFields={[["name"], ["email"], ["corporateInformation", "companyInformation", "name"], ["role", "label"], ["type"]]}
 					/>
 				</section>
-			</Layout>
+			</>
 		</>
 	);
 }
diff --git a/src/pages/entities/[id]/roles/[role].tsx b/src/pages/entities/[id]/roles/[role].tsx
index 5c41954f..907c157b 100644
--- a/src/pages/entities/[id]/roles/[role].tsx
+++ b/src/pages/entities/[id]/roles/[role].tsx
@@ -1,4 +1,3 @@
-import Layout from "@/components/High/Layout";
 import Checkbox from "@/components/Low/Checkbox";
 import Separator from "@/components/Low/Separator";
 import { useEntityPermission } from "@/hooks/useEntityPermissions";
@@ -152,7 +151,7 @@ interface Props {
 	disableEdit?: boolean
 }
 
-export default function Role({ user, entity, role, userCount, disableEdit }: Props) {
+export default function EntityRole({ user, entity, role, userCount, disableEdit }: Props) {
 	const [permissions, setPermissions] = useState(role.permissions)
 	const [isLoading, setIsLoading] = useState(false);
 
@@ -240,7 +239,7 @@ export default function Role({ user, entity, role, userCount, disableEdit }: Pro
 				<meta name="viewport" content="width=device-width, initial-scale=1" />
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
-			<Layout user={user}>
+			<>
 				<section className="flex flex-col gap-0">
 					<div className="flex flex-col gap-3">
 						<div className="flex items-end justify-between">
@@ -388,7 +387,7 @@ export default function Role({ user, entity, role, userCount, disableEdit }: Pro
 						</div>
 					</section>
 				</section>
-			</Layout>
+			</>
 		</>
 	);
 }
diff --git a/src/pages/entities/[id]/roles/index.tsx b/src/pages/entities/[id]/roles/index.tsx
index cb4a8639..bb9aab05 100644
--- a/src/pages/entities/[id]/roles/index.tsx
+++ b/src/pages/entities/[id]/roles/index.tsx
@@ -1,42 +1,25 @@
 /* eslint-disable @next/next/no-img-element */
 import CardList from "@/components/High/CardList";
-import Layout from "@/components/High/Layout";
-import Tooltip from "@/components/Low/Tooltip";
 import { useEntityPermission } from "@/hooks/useEntityPermissions";
-import {useListSearch} from "@/hooks/useListSearch";
-import usePagination from "@/hooks/usePagination";
-import {Entity, EntityWithRoles, Role} from "@/interfaces/entity";
-import {GroupWithUsers, User} from "@/interfaces/user";
+import { EntityWithRoles, Role} from "@/interfaces/entity";
+import { User} from "@/interfaces/user";
 import {sessionOptions} from "@/lib/session";
-import {USER_TYPE_LABELS} from "@/resources/user";
 import { redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
 import {getEntityWithRoles} from "@/utils/entities.be";
-import {convertToUsers, getGroup} from "@/utils/groups.be";
 import {shouldRedirectHome} from "@/utils/navigation.disabled";
-import {checkAccess, doesEntityAllow, getTypesOfUser} from "@/utils/permissions";
-import {getUserName} from "@/utils/users";
-import {getEntityUsers, getLinkedUsers, getSpecificUsers} from "@/utils/users.be";
+import { doesEntityAllow} from "@/utils/permissions";
+import {getEntityUsers} from "@/utils/users.be";
 import axios from "axios";
 import clsx from "clsx";
 import {withIronSessionSsr} from "iron-session/next";
-import moment from "moment";
 import Head from "next/head";
 import Link from "next/link";
 import {useRouter} from "next/router";
 import {Divider} from "primereact/divider";
-import {useEffect, useMemo, useState} from "react";
 import {
 	BsChevronLeft,
-	BsClockFill,
-	BsEnvelopeFill,
-	BsFillPersonVcardFill,
 	BsPlus,
-	BsSquare,
-	BsStopwatchFill,
-	BsTag,
-	BsTrash,
-	BsX,
 } from "react-icons/bs";
 import {toast, ToastContainer} from "react-toastify";
 
@@ -133,7 +116,7 @@ export default function Home({user, entity, roles, users}: Props) {
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
 			<ToastContainer />
-			<Layout user={user}>
+			<>
 				<section className="flex flex-col gap-0">
 					<div className="flex flex-col gap-3">
 						<div className="flex items-end justify-between">
@@ -152,7 +135,7 @@ export default function Home({user, entity, roles, users}: Props) {
 
 					<CardList list={roles} searchFields={[["label"]]} renderCard={renderCard} firstCard={canCreateRole ? firstCard : undefined} />
 				</section>
-			</Layout>
+			</>
 		</>
 	);
 }
diff --git a/src/pages/entities/create.tsx b/src/pages/entities/create.tsx
index a3f92b54..0b974c8f 100644
--- a/src/pages/entities/create.tsx
+++ b/src/pages/entities/create.tsx
@@ -1,19 +1,16 @@
 /* eslint-disable @next/next/no-img-element */
-import Layout from "@/components/High/Layout";
 import Input from "@/components/Low/Input";
-import Select from "@/components/Low/Select";
 import Tooltip from "@/components/Low/Tooltip";
 import { useListSearch } from "@/hooks/useListSearch";
 import usePagination from "@/hooks/usePagination";
-import { Entity, EntityWithRoles } from "@/interfaces/entity";
+import { Entity } from "@/interfaces/entity";
 import { User } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
 import { USER_TYPE_LABELS } from "@/resources/user";
-import { mapBy, redirect, serialize } from "@/utils";
-import { getEntities, getEntitiesWithRoles } from "@/utils/entities.be";
+import { redirect, serialize } from "@/utils";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
 import { getUserName } from "@/utils/users";
-import { getLinkedUsers, getUsers } from "@/utils/users.be";
+import {  getUsers } from "@/utils/users.be";
 import axios from "axios";
 import clsx from "clsx";
 import { withIronSessionSsr } from "iron-session/next";
@@ -26,7 +23,6 @@ import { useState } from "react";
 import { BsCheck, BsChevronLeft, BsClockFill, BsEnvelopeFill, BsStopwatchFill } from "react-icons/bs";
 import { toast, ToastContainer } from "react-toastify";
 import { requestUser } from "@/utils/api";
-import { findAllowedEntities } from "@/utils/permissions";
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
 	const user = await requestUser(req, res)
@@ -91,7 +87,7 @@ export default function Home({ user, users }: Props) {
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
 			<ToastContainer />
-			<Layout user={user}>
+			<>
 				<section className="flex flex-col gap-0">
 					<div className="flex gap-3 justify-between">
 						<div className="flex items-center gap-2">
@@ -178,7 +174,7 @@ export default function Home({ user, users }: Props) {
 						</button>
 					))}
 				</section>
-			</Layout>
+			</>
 		</>
 	);
 }
diff --git a/src/pages/entities/index.tsx b/src/pages/entities/index.tsx
index 8f588ced..d9ef0924 100644
--- a/src/pages/entities/index.tsx
+++ b/src/pages/entities/index.tsx
@@ -3,15 +3,12 @@ import Head from "next/head";
 import { withIronSessionSsr } from "iron-session/next";
 import { sessionOptions } from "@/lib/session";
 import { ToastContainer } from "react-toastify";
-import Layout from "@/components/High/Layout";
-import { GroupWithUsers, User } from "@/interfaces/user";
+import { User } from "@/interfaces/user";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
 import { getUserName, isAdmin } from "@/utils/users";
-import { convertToUsers, getGroupsForUser } from "@/utils/groups.be";
-import { countEntityUsers, getEntityUsers, getSpecificUsers, getUsers } from "@/utils/users.be";
-import { checkAccess, findAllowedEntities, getTypesOfUser } from "@/utils/permissions";
+import { countEntityUsers, getEntityUsers } from "@/utils/users.be";
+import { findAllowedEntities } from "@/utils/permissions";
 import Link from "next/link";
-import { uniq } from "lodash";
 import { BsBank, BsPlus } from "react-icons/bs";
 import CardList from "@/components/High/CardList";
 import { getEntitiesWithRoles } from "@/utils/entities.be";
@@ -20,99 +17,126 @@ import Separator from "@/components/Low/Separator";
 import { requestUser } from "@/utils/api";
 import { mapBy, redirect, serialize } from "@/utils";
 
-type EntitiesWithCount = { entity: EntityWithRoles; users: User[]; count: number };
+type EntitiesWithCount = {
+  entity: EntityWithRoles;
+  users: User[];
+  count: number;
+};
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
-	const user = await requestUser(req, res)
-	if (!user) return redirect("/login")
+  const user = await requestUser(req, res);
+  if (!user) return redirect("/login");
 
-	if (shouldRedirectHome(user)) return redirect("/")
+  if (shouldRedirectHome(user)) return redirect("/");
 
-	const entityIDs = mapBy(user.entities, 'id')
-	const entities = await getEntitiesWithRoles(["admin", "developer"].includes(user.type) ? undefined : entityIDs);
-	const allowedEntities = findAllowedEntities(user, entities, 'view_entities')
+  const entityIDs = mapBy(user.entities, "id");
+  const entities = await getEntitiesWithRoles(
+    ["admin", "developer"].includes(user.type) ? undefined : entityIDs
+  );
+  const allowedEntities = findAllowedEntities(user, entities, "view_entities");
 
-	const entitiesWithCount = await Promise.all(
-		allowedEntities.map(async (e) => ({
-			entity: e,
-			count: await countEntityUsers(e.id, { type: { $in: ["student", "teacher", "corporate", "mastercorporate"] } }),
-			users: await getEntityUsers(e.id, 5, { type: { $in: ["student", "teacher", "corporate", "mastercorporate"] } })
-		})),
-	);
+  const entitiesWithCount = await Promise.all(
+    allowedEntities.map(async (e) => ({
+      entity: e,
+      count: await countEntityUsers(e.id, {
+        type: { $in: ["student", "teacher", "corporate", "mastercorporate"] },
+      }),
+      users: await getEntityUsers(e.id, 5, {
+        type: { $in: ["student", "teacher", "corporate", "mastercorporate"] },
+      }),
+    }))
+  );
 
-	return {
-		props: serialize({ user, entities: entitiesWithCount }),
-	};
+  return {
+    props: serialize({ user, entities: entitiesWithCount }),
+  };
 }, sessionOptions);
 
 const SEARCH_FIELDS: string[][] = [["entity", "label"]];
 
 interface Props {
-	user: User;
-	entities: EntitiesWithCount[];
+  user: User;
+  entities: EntitiesWithCount[];
 }
 export default function Home({ user, entities }: Props) {
-	const renderCard = ({ entity, users, count }: EntitiesWithCount) => (
-		<Link
-			href={`/entities/${entity.id}`}
-			key={entity.id}
-			className="p-4 border-2 border-mti-purple-light/20 rounded-xl flex gap-2 justify-between hover:border-mti-purple group transition ease-in-out duration-300 text-left cursor-pointer">
-			<div className="flex flex-col gap-2 w-full">
-				<span className="flex items-center gap-1">
-					<span className="bg-mti-purple text-white font-semibold px-2">Entity</span>
-					{entity.label}
-				</span>
-				<span className="flex items-center gap-1">
-					<span className="bg-mti-purple text-white font-semibold px-2">Members</span>
-					<span className="bg-mti-purple-light/50 px-2">{count}{isAdmin(user) && ` / ${entity.licenses || 0}`}</span>
-				</span>
-				<span>
-					{users.map(getUserName).join(", ")}{' '}
-					{count > 5 ? <span className="opacity-50 bg-mti-purple-light/50 px-1 text-sm">and {count - 5} more</span> : ""}
-				</span>
-			</div>
-			<div className="w-fit">
-				<BsBank className="w-full h-20 -translate-y-[15%] group-hover:text-mti-purple transition ease-in-out duration-300" />
-			</div>
-		</Link>
-	);
+  const renderCard = ({ entity, users, count }: EntitiesWithCount) => (
+    <Link
+      href={`/entities/${entity.id}`}
+      key={entity.id}
+      className="p-4 border-2 border-mti-purple-light/20 rounded-xl flex gap-2 justify-between hover:border-mti-purple group transition ease-in-out duration-300 text-left cursor-pointer"
+    >
+      <div className="flex flex-col gap-2 w-full">
+        <span className="flex items-center gap-1">
+          <span className="bg-mti-purple text-white font-semibold px-2">
+            Entity
+          </span>
+          {entity.label}
+        </span>
+        <span className="flex items-center gap-1">
+          <span className="bg-mti-purple text-white font-semibold px-2">
+            Members
+          </span>
+          <span className="bg-mti-purple-light/50 px-2">
+            {count}
+            {isAdmin(user) && ` / ${entity.licenses || 0}`}
+          </span>
+        </span>
+        <span>
+          {users.map(getUserName).join(", ")}{" "}
+          {count > 5 ? (
+            <span className="opacity-50 bg-mti-purple-light/50 px-1 text-sm">
+              and {count - 5} more
+            </span>
+          ) : (
+            ""
+          )}
+        </span>
+      </div>
+      <div className="w-fit">
+        <BsBank className="w-full h-20 -translate-y-[15%] group-hover:text-mti-purple transition ease-in-out duration-300" />
+      </div>
+    </Link>
+  );
 
-	const firstCard = () => (
-		<Link
-			href={`/entities/create`}
-			className="p-4 border-2 hover:text-mti-purple rounded-xl flex flex-col items-center justify-center gap-0 hover:border-mti-purple transition ease-in-out duration-300 text-left cursor-pointer">
-			<BsPlus size={40} />
-			<span className="font-semibold">Create Entity</span>
-		</Link>
-	);
+  const firstCard = () => (
+    <Link
+      href={`/entities/create`}
+      className="p-4 border-2 hover:text-mti-purple rounded-xl flex flex-col items-center justify-center gap-0 hover:border-mti-purple transition ease-in-out duration-300 text-left cursor-pointer"
+    >
+      <BsPlus size={40} />
+      <span className="font-semibold">Create Entity</span>
+    </Link>
+  );
 
-	return (
-		<>
-			<Head>
-				<title>Entities | 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} className="!gap-4">
-				<section className="flex flex-col gap-4 w-full h-full">
-					<div className="flex flex-col gap-4">
-						<h2 className="font-bold text-2xl">Entities</h2>
-						<Separator />
-					</div>
+  return (
+    <>
+      <Head>
+        <title>Entities | 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 />
+      <>
+        <section className="flex flex-col gap-4 w-full h-full">
+          <div className="flex flex-col gap-4">
+            <h2 className="font-bold text-2xl">Entities</h2>
+            <Separator />
+          </div>
 
-					<CardList<EntitiesWithCount>
-						list={entities}
-						searchFields={SEARCH_FIELDS}
-						renderCard={renderCard}
-						firstCard={["admin", "developer"].includes(user.type) ? firstCard : undefined}
-					/>
-				</section>
-			</Layout>
-		</>
-	);
+          <CardList<EntitiesWithCount>
+            list={entities}
+            searchFields={SEARCH_FIELDS}
+            renderCard={renderCard}
+            firstCard={
+              ["admin", "developer"].includes(user.type) ? firstCard : undefined
+            }
+          />
+        </section>
+      </>
+    </>
+  );
 }
diff --git a/src/pages/exam.tsx b/src/pages/exam.tsx
index 301506f9..99f1e63c 100644
--- a/src/pages/exam.tsx
+++ b/src/pages/exam.tsx
@@ -20,7 +20,6 @@ import { useRouter } from "next/router";
 import { getSessionByAssignment } from "@/utils/sessions.be";
 import { Session } from "@/hooks/useSessions";
 import { activeAssignmentFilter } from "@/utils/assignments";
-import { checkAccess } from "@/utils/permissions";
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res, query }) => {
 	const user = await requestUser(req, res)
diff --git a/src/pages/generation.tsx b/src/pages/generation.tsx
index 595a6c39..94f9de64 100644
--- a/src/pages/generation.tsx
+++ b/src/pages/generation.tsx
@@ -2,24 +2,22 @@
 import Head from "next/head";
 import { withIronSessionSsr } from "iron-session/next";
 import { sessionOptions } from "@/lib/session";
-import { toast, ToastContainer } from "react-toastify";
-import Layout from "@/components/High/Layout";
+import { ToastContainer } from "react-toastify";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
 import { Radio, RadioGroup } from "@headlessui/react";
 import clsx from "clsx";
 import { MODULE_ARRAY } from "@/utils/moduleUtils";
 import { capitalize } from "lodash";
 import Input from "@/components/Low/Input";
-import { checkAccess, findAllowedEntities } from "@/utils/permissions";
+import {  findAllowedEntities } from "@/utils/permissions";
 import { User } from "@/interfaces/user";
 import useExamEditorStore from "@/stores/examEditor";
 import ExamEditorStore from "@/stores/examEditor/types";
 import ExamEditor from "@/components/ExamEditor";
-import MultipleAudioUploader from "@/components/ExamEditor/Shared/AudioEdit";
 import { mapBy, redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
 import { Module } from "@/interfaces";
-import { getExam, getExams } from "@/utils/exams.be";
+import { getExam, } from "@/utils/exams.be";
 import { Exam, Exercise, InteractiveSpeakingExercise, ListeningPart, SpeakingExercise } from "@/interfaces/exam";
 import { useEffect, useState } from "react";
 import { getEntitiesWithRoles } from "@/utils/entities.be";
@@ -157,7 +155,7 @@ export default function Generation({ id, user, exam, examModule, permissions }:
 			</Head>
 			<ToastContainer />
 			{user && (
-				<Layout user={user} className="gap-6">
+				<>
 					<h1 className="text-2xl font-semibold">Exam Editor</h1>
 					<div className="flex flex-col gap-3">
 						<Input
@@ -212,7 +210,7 @@ export default function Generation({ id, user, exam, examModule, permissions }:
 						</RadioGroup>
 					</div>
 					<ExamEditor levelParts={examLevelParts} />
-				</Layout>
+				</>
 			)}
 		</>
 	);
diff --git a/src/pages/official-exam.tsx b/src/pages/official-exam.tsx
index b1695263..d472f9d9 100644
--- a/src/pages/official-exam.tsx
+++ b/src/pages/official-exam.tsx
@@ -1,6 +1,5 @@
 /* eslint-disable @next/next/no-img-element */
 import AssignmentCard from "@/components/High/AssignmentCard";
-import Layout from "@/components/High/Layout";
 import Button from "@/components/Low/Button";
 import Separator from "@/components/Low/Separator";
 import ProfileSummary from "@/components/ProfileSummary";
@@ -15,7 +14,10 @@ import { sessionOptions } from "@/lib/session";
 import useExamStore from "@/stores/exam";
 import { filterBy, findBy, mapBy, redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
-import { activeAssignmentFilter, futureAssignmentFilter } from "@/utils/assignments";
+import {
+  activeAssignmentFilter,
+  futureAssignmentFilter,
+} from "@/utils/assignments";
 import { getAssignmentsByAssignee } from "@/utils/assignments.be";
 import { getEntitiesWithRoles } from "@/utils/entities.be";
 import { getExamsByIds } from "@/utils/exams.be";
@@ -34,142 +36,187 @@ import { BsArrowRepeat } from "react-icons/bs";
 import { ToastContainer } from "react-toastify";
 
 interface Props {
-	user: User;
-	entities: EntityWithRoles[];
-	assignments: Assignment[];
-	stats: Stat[];
-	exams: Exam[];
-	sessions: Session[];
-	invites: InviteWithEntity[];
-	grading: Grading;
+  user: User;
+  entities: EntityWithRoles[];
+  assignments: Assignment[];
+  stats: Stat[];
+  exams: Exam[];
+  sessions: Session[];
+  invites: InviteWithEntity[];
+  grading: Grading;
 }
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
-	const user = await requestUser(req, res)
-	const destination = Buffer.from(req.url || "/").toString("base64")
-	if (!user) return redirect(`/login?destination=${destination}`)
+  const user = await requestUser(req, res);
+  const destination = Buffer.from(req.url || "/").toString("base64");
+  if (!user) return redirect(`/login?destination=${destination}`);
 
-	if (!checkAccess(user, ["admin", "developer", "student"]))
-		return redirect("/")
+  if (!checkAccess(user, ["admin", "developer", "student"]))
+    return redirect("/");
 
-	const entityIDS = mapBy(user.entities, "id") || [];
+  const entityIDS = mapBy(user.entities, "id") || [];
 
-	const entities = await getEntitiesWithRoles(entityIDS);
-	const assignments = await getAssignmentsByAssignee(user.id, { archived: { $ne: true } });
-	const sessions = await getSessionsByUser(user.id, 0, { "assignment.id": { $in: mapBy(assignments, 'id') } });
+  const entities = await getEntitiesWithRoles(entityIDS);
+  const assignments = await getAssignmentsByAssignee(user.id, {
+    archived: { $ne: true },
+  });
+  const sessions = await getSessionsByUser(user.id, 0, {
+    "assignment.id": { $in: mapBy(assignments, "id") },
+  });
 
-	const examIDs = uniqBy(
-		assignments.flatMap((a) =>
-			filterBy(a.exams, 'assignee', user.id).map((e) => ({ module: e.module, id: e.id, key: `${e.module}_${e.id}` })),
-		),
-		"key",
-	);
-	const exams = await getExamsByIds(examIDs);
+  const examIDs = uniqBy(
+    assignments.flatMap((a) =>
+      filterBy(a.exams, "assignee", user.id).map(
+        (e: any) => ({
+          module: e.module,
+          id: e.id,
+          key: `${e.module}_${e.id}`,
+        })
+      )
+    ),
+    "key"
+  );
+  const exams = await getExamsByIds(examIDs);
 
-	return { props: serialize({ user, entities, assignments, exams, sessions }) };
+  return { props: serialize({ user, entities, assignments, exams, sessions }) };
 }, sessionOptions);
 
-const destination = Buffer.from("/official-exam").toString("base64")
+const destination = Buffer.from("/official-exam").toString("base64");
 
-export default function OfficialExam({ user, entities, assignments, sessions, exams }: Props) {
-	const [isLoading, setIsLoading] = useState(false)
+export default function OfficialExam({
+  user,
+  entities,
+  assignments,
+  sessions,
+  exams,
+}: Props) {
+  const [isLoading, setIsLoading] = useState(false);
 
-	const router = useRouter();
+  const router = useRouter();
 
-	const dispatch = useExamStore((state) => state.dispatch);
+  const dispatch = useExamStore((state) => state.dispatch);
 
-	const reload = () => {
-		setIsLoading(true)
-		router.replace(router.asPath)
-		setTimeout(() => setIsLoading(false), 500)
-	}
+  const reload = () => {
+    setIsLoading(true);
+    router.replace(router.asPath);
+    setTimeout(() => setIsLoading(false), 500);
+  };
 
-	const startAssignment = (assignment: Assignment) => {
-		const assignmentExams = exams.filter(e => {
-			const exam = findBy(assignment.exams, 'id', e.id)
-			return !!exam && exam.module === e.module
-		})
+  const startAssignment = (assignment: Assignment) => {
+    const assignmentExams = exams.filter((e) => {
+      const exam = findBy(assignment.exams, "id", e.id);
+      return !!exam && exam.module === e.module;
+    });
 
-		if (assignmentExams.every((x) => !!x)) {
-			dispatch({
-				type: "INIT_EXAM", payload: {
-					exams: assignmentExams.sort(sortByModule),
-					modules: mapBy(assignmentExams.sort(sortByModule), 'module'),
-					assignment
-				}
-			})
-			router.push(`/exam?assignment=${assignment.id}&destination=${destination}`);
-		}
-	};
+    if (assignmentExams.every((x) => !!x)) {
+      dispatch({
+        type: "INIT_EXAM",
+        payload: {
+          exams: assignmentExams.sort(sortByModule),
+          modules: mapBy(assignmentExams.sort(sortByModule), "module"),
+          assignment,
+        },
+      });
+      router.push(
+        `/exam?assignment=${assignment.id}&destination=${destination}`
+      );
+    }
+  };
 
-	const loadSession = async (session: Session) => {
-		dispatch({type: "SET_SESSION", payload: {session}});
-		router.push(`/exam?assignment=${session.assignment?.id}&destination=${destination}`);
-	};
+  const loadSession = async (session: Session) => {
+    dispatch({ type: "SET_SESSION", payload: { session } });
+    router.push(
+      `/exam?assignment=${session.assignment?.id}&destination=${destination}`
+    );
+  };
 
-	const logout = async () => {
-		axios.post("/api/logout").finally(() => {
-			setTimeout(() => router.reload(), 500);
-		});
-	};
+  const logout = async () => {
+    axios.post("/api/logout").finally(() => {
+      setTimeout(() => router.reload(), 500);
+    });
+  };
 
-	const studentAssignments = useMemo(() => [
-		...assignments.filter(activeAssignmentFilter), ...assignments.filter(futureAssignmentFilter)],
-		[assignments]
-	);
+  const studentAssignments = useMemo(
+    () => [
+      ...assignments.filter(activeAssignmentFilter),
+      ...assignments.filter(futureAssignmentFilter),
+    ],
+    [assignments]
+  );
 
-	const assignmentSessions = useMemo(() => sessions.filter(s => mapBy(studentAssignments, 'id').includes(s.assignment?.id || "")), [sessions, studentAssignments])
+  const assignmentSessions = useMemo(
+    () =>
+      sessions.filter((s) =>
+        mapBy(studentAssignments, "id").includes(s.assignment?.id || "")
+      ),
+    [sessions, studentAssignments]
+  );
 
-	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} hideSidebar>
-				{entities.length > 0 && (
-					<div className="absolute right-4 top-4 rounded-lg bg-neutral-200 px-2 py-1">
-						<b>{mapBy(entities, "label")?.join(", ")}</b>
-					</div>
-				)}
+  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 />
+      <>
+        {entities.length > 0 && (
+          <div className="absolute right-4 top-4 rounded-lg bg-neutral-200 px-2 py-1">
+            <b>{mapBy(entities, "label")?.join(", ")}</b>
+          </div>
+        )}
 
-				<ProfileSummary user={user} items={[]} removeLevel />
+        <ProfileSummary user={user} items={[]} removeLevel />
 
-				<Separator />
+        <Separator />
 
-				{/* Assignments */}
-				<section className="flex flex-col gap-1 md:gap-3">
-					<div
-						onClick={reload}
-						className="text-mti-purple-light hover:text-mti-purple-dark flex cursor-pointer items-center gap-2 transition duration-300 ease-in-out">
-						<span className="text-mti-black text-lg font-bold">Assignments</span>
-						<BsArrowRepeat className={clsx("text-xl", isLoading && "animate-spin")} />
-					</div>
-					<span className="text-mti-gray-taupe scrollbar-hide flex gap-8 overflow-x-scroll">
-						{studentAssignments.length === 0 && "Assignments will appear here. It seems that for now there are no assignments for you."}
-						{studentAssignments
-							.sort((a, b) => moment(a.startDate).diff(b.startDate))
-							.map((a) =>
-								<AssignmentCard
-									key={a.id}
-									assignment={a}
-									user={user}
-									session={assignmentSessions.find(s => s.assignment?.id === a.id)}
-									startAssignment={startAssignment}
-									resumeAssignment={loadSession}
-								/>
-							)}
-					</span>
-				</section>
+        {/* Assignments */}
+        <section className="flex flex-col gap-1 md:gap-3">
+          <div
+            onClick={reload}
+            className="text-mti-purple-light hover:text-mti-purple-dark flex cursor-pointer items-center gap-2 transition duration-300 ease-in-out"
+          >
+            <span className="text-mti-black text-lg font-bold">
+              Assignments
+            </span>
+            <BsArrowRepeat
+              className={clsx("text-xl", isLoading && "animate-spin")}
+            />
+          </div>
+          <span className="text-mti-gray-taupe scrollbar-hide flex gap-8 overflow-x-scroll">
+            {studentAssignments.length === 0 &&
+              "Assignments will appear here. It seems that for now there are no assignments for you."}
+            {studentAssignments
+              .sort((a, b) => moment(a.startDate).diff(b.startDate))
+              .map((a) => (
+                <AssignmentCard
+                  key={a.id}
+                  assignment={a}
+                  user={user}
+                  session={assignmentSessions.find(
+                    (s) => s.assignment?.id === a.id
+                  )}
+                  startAssignment={startAssignment}
+                  resumeAssignment={loadSession}
+                />
+              ))}
+          </span>
+        </section>
 
-				<Button onClick={logout} variant="outline" color="red" className="max-w-[200px] w-full absolute bottom-8 left-8">Sign out</Button>
-			</Layout>
-		</>
-	);
+        <Button
+          onClick={logout}
+          variant="outline"
+          color="red"
+          className="max-w-[200px] w-full absolute bottom-8 left-8"
+        >
+          Sign out
+        </Button>
+      </>
+    </>
+  );
 }
diff --git a/src/pages/payment-record.tsx b/src/pages/payment-record.tsx
index a1594bc2..618d9621 100644
--- a/src/pages/payment-record.tsx
+++ b/src/pages/payment-record.tsx
@@ -2,14 +2,12 @@
 import Head from "next/head";
 import { withIronSessionSsr } from "iron-session/next";
 import { sessionOptions } from "@/lib/session";
-import useUser from "@/hooks/useUser";
 import { toast, ToastContainer } from "react-toastify";
-import Layout from "@/components/High/Layout";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
 import usePayments from "@/hooks/usePayments";
 import usePaypalPayments from "@/hooks/usePaypalPayments";
 import { Payment, PaypalPayment } from "@/interfaces/paypal";
-import { CellContext, createColumnHelper, flexRender, getCoreRowModel, HeaderGroup, Table, useReactTable } from "@tanstack/react-table";
+import { createColumnHelper, flexRender, getCoreRowModel, HeaderGroup, Table, useReactTable } from "@tanstack/react-table";
 import { CURRENCIES } from "@/resources/paypal";
 import { BsTrash } from "react-icons/bs";
 import axios from "axios";
@@ -943,7 +941,7 @@ export default function PaymentRecord({ user, entities }: Props) {
 			</Head>
 			<ToastContainer />
 			{user && (
-				<Layout user={user} className="gap-6">
+				<>
 					{getUserModal()}
 					<Modal isOpen={isCreatingPayment} onClose={() => setIsCreatingPayment(false)}>
 						<PaymentCreator
@@ -1248,7 +1246,7 @@ export default function PaymentRecord({ user, entities }: Props) {
 							</Tab.Panel>
 						</Tab.Panels>
 					</Tab.Group>
-				</Layout>
+				</>
 			)}
 		</>
 	);
diff --git a/src/pages/permissions/[id].tsx b/src/pages/permissions/[id].tsx
index e7ac515c..6e79b2d3 100644
--- a/src/pages/permissions/[id].tsx
+++ b/src/pages/permissions/[id].tsx
@@ -1,188 +1,219 @@
 /* eslint-disable @next/next/no-img-element */
 import Head from "next/head";
-import {useEffect, useState} from "react";
-import {withIronSessionSsr} from "iron-session/next";
-import {sessionOptions} from "@/lib/session";
-import {shouldRedirectHome} from "@/utils/navigation.disabled";
-import {Permission, PermissionType} from "@/interfaces/permissions";
-import {getPermissionDoc} from "@/utils/permissions.be";
-import {User} from "@/interfaces/user";
-import Layout from "@/components/High/Layout";
-import {getUsers} from "@/utils/users.be";
-import {BsTrash} from "react-icons/bs";
+import React, { useEffect, useState } from "react";
+import { withIronSessionSsr } from "iron-session/next";
+import { sessionOptions } from "@/lib/session";
+import { shouldRedirectHome } from "@/utils/navigation.disabled";
+import { Permission, PermissionType } from "@/interfaces/permissions";
+import { getPermissionDoc } from "@/utils/permissions.be";
+import { User } from "@/interfaces/user";
+import  { LayoutContext } from "@/components/High/Layout";
+import { getUsers } from "@/utils/users.be";
+import { BsTrash } from "react-icons/bs";
 import Select from "@/components/Low/Select";
 import Button from "@/components/Low/Button";
 import axios from "axios";
-import {toast, ToastContainer} from "react-toastify";
-import {Type as UserType} from "@/interfaces/user";
-import {getGroups} from "@/utils/groups.be";
+import { toast, ToastContainer } from "react-toastify";
+import { Type as UserType } from "@/interfaces/user";
+import { getGroups } from "@/utils/groups.be";
 import { requestUser } from "@/utils/api";
 import { redirect } from "@/utils";
 interface BasicUser {
-	id: string;
-	name: string;
-	type: UserType;
+  id: string;
+  name: string;
+  type: UserType;
 }
 
 interface PermissionWithBasicUsers {
-	id: string;
-	type: PermissionType;
-	users: BasicUser[];
+  id: string;
+  type: PermissionType;
+  users: BasicUser[];
 }
 
-export const getServerSideProps = withIronSessionSsr(async ({req, res, params}) => {
-	const user = await requestUser(req, res)
-	if (!user) return redirect("/login")
+export const getServerSideProps = withIronSessionSsr(
+  async ({ req, res, params }) => {
+    const user = await requestUser(req, res);
+    if (!user) return redirect("/login");
 
-	if (shouldRedirectHome(user)) return redirect("/")
+    if (shouldRedirectHome(user)) return redirect("/");
 
-	if (!params?.id) return redirect("/permissions")
+    if (!params?.id) return redirect("/permissions");
 
-	// Fetch data from external API
-	const permission: Permission = await getPermissionDoc(params.id as string);
+    // Fetch data from external API
+    const permission: Permission = await getPermissionDoc(params.id as string);
 
-	const allUserData: User[] = await getUsers();
-	const groups = await getGroups();
+    const allUserData: User[] = await getUsers();
+    const groups = await getGroups();
 
-	const userGroups = groups.filter((x) => x.admin === user.id);
-	const filteredGroups =
-		user.type === "corporate"
-			? userGroups
-			: user.type === "mastercorporate"
-			? groups.filter((x) => userGroups.flatMap((y) => y.participants).includes(x.admin))
-			: groups;
+    const userGroups = groups.filter((x) => x.admin === user.id);
+    const filteredGroups =
+      user.type === "corporate"
+        ? userGroups
+        : user.type === "mastercorporate"
+        ? groups.filter((x) =>
+            userGroups.flatMap((y) => y.participants).includes(x.admin)
+          )
+        : groups;
 
-	const users = allUserData.map((u) => ({
-		id: u.id,
-		name: u.name,
-		type: u.type,
-	})) as BasicUser[];
+    const users = allUserData.map((u) => ({
+      id: u.id,
+      name: u.name,
+      type: u.type,
+    })) as BasicUser[];
 
-	const filteredUsers = ["mastercorporate", "corporate"].includes(user.type)
-		? users.filter((u) => filteredGroups.flatMap((g) => g.participants).includes(u.id))
-		: users;
+    const filteredUsers = ["mastercorporate", "corporate"].includes(user.type)
+      ? users.filter((u) =>
+          filteredGroups.flatMap((g) => g.participants).includes(u.id)
+        )
+      : users;
 
-	// const res = await fetch("api/permissions");
-	// const permissions: Permission[] = await res.json();
-	// Pass data to the page via props
-	const usersData: BasicUser[] = permission.users.reduce((acc: BasicUser[], userId) => {
-		const user = filteredUsers.find((u) => u.id === userId) as BasicUser;
-		if (!!user) acc.push(user);
-		return acc;
-	}, []);
+    // const res = await fetch("api/permissions");
+    // const permissions: Permission[] = await res.json();
+    // Pass data to the page via props
+    const usersData: BasicUser[] = permission.users.reduce(
+      (acc: BasicUser[], userId) => {
+        const user = filteredUsers.find((u) => u.id === userId) as BasicUser;
+        if (!!user) acc.push(user);
+        return acc;
+      },
+      []
+    );
 
-	return {
-		props: {
-			// permissions: permissions.map((p) => ({ id: p.id, type: p.type })),
-			permission: {
-				...permission,
-				id: params.id,
-				users: usersData,
-			},
-			user,
-			users: filteredUsers,
-		},
-	};
-}, sessionOptions);
+    return {
+      props: {
+        // permissions: permissions.map((p) => ({ id: p.id, type: p.type })),
+        permission: {
+          ...permission,
+          id: params.id,
+          users: usersData,
+        },
+        user,
+        users: filteredUsers,
+      },
+    };
+  },
+  sessionOptions
+);
 
 interface Props {
-	permission: PermissionWithBasicUsers;
-	user: User;
-	users: BasicUser[];
+  permission: PermissionWithBasicUsers;
+  user: User;
+  users: BasicUser[];
 }
 
 export default function Page(props: Props) {
-	const {permission, user, users} = props;
+  const { permission, user, users } = props;
 
-	const [selectedUsers, setSelectedUsers] = useState<string[]>(() => permission.users.map((u) => u.id));
+  const [selectedUsers, setSelectedUsers] = useState<string[]>(() =>
+    permission.users.map((u) => u.id)
+  );
 
-	const onChange = (value: any) => {
-		setSelectedUsers((prev) => {
-			if (value?.value) {
-				return [...prev, value?.value];
-			}
-			return prev;
-		});
-	};
-	const removeUser = (id: string) => {
-		setSelectedUsers((prev) => prev.filter((u) => u !== id));
-	};
+  const onChange = (value: any) => {
+    setSelectedUsers((prev) => {
+      if (value?.value) {
+        return [...prev, value?.value];
+      }
+      return prev;
+    });
+  };
+  const removeUser = (id: string) => {
+    setSelectedUsers((prev) => prev.filter((u) => u !== id));
+  };
 
-	const update = async () => {
-		try {
-			await axios.patch(`/api/permissions/${permission.id}`, {
-				users: selectedUsers,
-			});
-			toast.success("Permission updated");
-		} catch (err) {
-			toast.error("Failed to update permission");
-		}
-	};
+  const update = async () => {
+    try {
+      await axios.patch(`/api/permissions/${permission.id}`, {
+        users: selectedUsers,
+      });
+      toast.success("Permission updated");
+    } catch (err) {
+      toast.error("Failed to update permission");
+    }
+  };
 
-	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} className="gap-6">
-				<div className="flex flex-col gap-6 w-full h-[88vh] overflow-y-scroll scrollbar-hide rounded-xl">
-					<h1 className="text-2xl font-semibold">Permission: {permission.type as string}</h1>
-					<div className="flex gap-3">
-						<Select
-							value={null}
-							options={users
-								.filter((u) => !selectedUsers.includes(u.id))
-								.map((u) => ({
-									label: `${u?.type}-${u?.name}`,
-									value: u.id,
-								}))}
-							onChange={onChange}
-						/>
-						<Button onClick={update}>Update</Button>
-					</div>
-					<div className="flex flex-row justify-between">
-						<div className="flex flex-col gap-3">
-							<h2>Blacklisted Users</h2>
-							<div className="flex gap-3 flex-wrap">
-								{selectedUsers.map((userId) => {
-									const user = users.find((u) => u.id === userId);
-									return (
-										<div className="flex p-4 rounded-xl w-auto bg-mti-purple-light text-white gap-4" key={userId}>
-											<span className="text-base first-letter:uppercase">
-												{user?.type}-{user?.name}
-											</span>
-											<BsTrash style={{cursor: "pointer"}} onClick={() => removeUser(userId)} size={20} />
-										</div>
-									);
-								})}
-							</div>
-						</div>
-						<div className="flex flex-col gap-3">
-							<h2>Whitelisted Users</h2>
-							<div className="flex flex-col gap-3 flex-wrap">
-								{users
-									.filter((user) => !selectedUsers.includes(user.id))
-									.map((user) => {
-										return (
-											<div className="flex p-4 rounded-xl w-auto bg-mti-purple-light text-white gap-4" key={user.id}>
-												<span className="text-base first-letter:uppercase">
-													{user?.type}-{user?.name}
-												</span>
-											</div>
-										);
-									})}
-							</div>
-						</div>
-					</div>
-				</div>
-			</Layout>
-		</>
-	);
+  const { setClassName } = React.useContext(LayoutContext);
+
+  useEffect(() => {
+    setClassName("gap-6");
+    return () => setClassName("");
+  }, [setClassName]);
+
+  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 />
+      <>
+        <div className="flex flex-col gap-6 w-full h-[88vh] overflow-y-scroll scrollbar-hide rounded-xl">
+          <h1 className="text-2xl font-semibold">
+            Permission: {permission.type as string}
+          </h1>
+          <div className="flex gap-3">
+            <Select
+              value={null}
+              options={users
+                .filter((u) => !selectedUsers.includes(u.id))
+                .map((u) => ({
+                  label: `${u?.type}-${u?.name}`,
+                  value: u.id,
+                }))}
+              onChange={onChange}
+            />
+            <Button onClick={update}>Update</Button>
+          </div>
+          <div className="flex flex-row justify-between">
+            <div className="flex flex-col gap-3">
+              <h2>Blacklisted Users</h2>
+              <div className="flex gap-3 flex-wrap">
+                {selectedUsers.map((userId) => {
+                  const user = users.find((u) => u.id === userId);
+                  return (
+                    <div
+                      className="flex p-4 rounded-xl w-auto bg-mti-purple-light text-white gap-4"
+                      key={userId}
+                    >
+                      <span className="text-base first-letter:uppercase">
+                        {user?.type}-{user?.name}
+                      </span>
+                      <BsTrash
+                        style={{ cursor: "pointer" }}
+                        onClick={() => removeUser(userId)}
+                        size={20}
+                      />
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+            <div className="flex flex-col gap-3">
+              <h2>Whitelisted Users</h2>
+              <div className="flex flex-col gap-3 flex-wrap">
+                {users
+                  .filter((user) => !selectedUsers.includes(user.id))
+                  .map((user) => {
+                    return (
+                      <div
+                        className="flex p-4 rounded-xl w-auto bg-mti-purple-light text-white gap-4"
+                        key={user.id}
+                      >
+                        <span className="text-base first-letter:uppercase">
+                          {user?.type}-{user?.name}
+                        </span>
+                      </div>
+                    );
+                  })}
+              </div>
+            </div>
+          </div>
+        </div>
+      </>
+    </>
+  );
 }
diff --git a/src/pages/permissions/index.tsx b/src/pages/permissions/index.tsx
index 4ca504b8..50e71247 100644
--- a/src/pages/permissions/index.tsx
+++ b/src/pages/permissions/index.tsx
@@ -1,73 +1,85 @@
 /* eslint-disable @next/next/no-img-element */
 import Head from "next/head";
-import {withIronSessionSsr} from "iron-session/next";
-import {sessionOptions} from "@/lib/session";
-import {shouldRedirectHome} from "@/utils/navigation.disabled";
-import {Permission} from "@/interfaces/permissions";
-import {getPermissionDocs} from "@/utils/permissions.be";
-import {User} from "@/interfaces/user";
-import Layout from "@/components/High/Layout";
+import { withIronSessionSsr } from "iron-session/next";
+import { sessionOptions } from "@/lib/session";
+import { shouldRedirectHome } from "@/utils/navigation.disabled";
+import { Permission } from "@/interfaces/permissions";
+import { getPermissionDocs } from "@/utils/permissions.be";
+import { User } from "@/interfaces/user";
+import  { LayoutContext } from "@/components/High/Layout";
 import PermissionList from "@/components/PermissionList";
 import { requestUser } from "@/utils/api";
 import { redirect } from "@/utils";
+import React from "react";
 
-export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
-	const user = await requestUser(req, res)
-	if (!user) return redirect("/login")
+export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
+  const user = await requestUser(req, res);
+  if (!user) return redirect("/login");
 
-	if (shouldRedirectHome(user)) return redirect("/")
+  if (shouldRedirectHome(user)) return redirect("/");
 
-	// Fetch data from external API
-	const permissions: Permission[] = await getPermissionDocs();
-	const filteredPermissions = permissions.filter((p) => {
-		const permissionType = p.type.toString().toLowerCase();
+  // Fetch data from external API
+  const permissions: Permission[] = await getPermissionDocs();
+  const filteredPermissions = permissions.filter((p) => {
+    const permissionType = p.type.toString().toLowerCase();
 
-		if (user.type === "corporate") return !permissionType.includes("corporate") && !permissionType.includes("admin");
-		if (user.type === "mastercorporate") return !permissionType.includes("mastercorporate") && !permissionType.includes("admin");
+    if (user.type === "corporate")
+      return (
+        !permissionType.includes("corporate") &&
+        !permissionType.includes("admin")
+      );
+    if (user.type === "mastercorporate")
+      return (
+        !permissionType.includes("mastercorporate") &&
+        !permissionType.includes("admin")
+      );
 
-		return true;
-	});
+    return true;
+  });
 
-	// const res = await fetch("api/permissions");
-	// const permissions: Permission[] = await res.json();
-	// Pass data to the page via props
-	return {
-		props: {
-			// permissions: permissions.map((p) => ({ id: p.id, type: p.type })),
-			permissions: filteredPermissions.map((p) => {
-				const {users, ...rest} = p;
-				return rest;
-			}),
-			user,
-		},
-	};
+  // const res = await fetch("api/permissions");
+  // const permissions: Permission[] = await res.json();
+  // Pass data to the page via props
+  return {
+    props: {
+      // permissions: permissions.map((p) => ({ id: p.id, type: p.type })),
+      permissions: filteredPermissions.map((p) => {
+        const { users, ...rest } = p;
+        return rest;
+      }),
+      user,
+    },
+  };
 }, sessionOptions);
 
 interface Props {
-	permissions: Permission[];
-	user: User;
+  permissions: Permission[];
+  user: User;
 }
 
 export default function Page(props: Props) {
-	const {permissions, user} = props;
+  const { permissions, user } = props;
 
-	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>
-			<Layout user={user} className="gap-6">
-				<h1 className="text-2xl font-semibold">Permissions</h1>
-				<div className="flex gap-3 flex-wrap overflow-y-scroll scrollbar-hide h-[80vh] rounded-xl">
-					<PermissionList permissions={permissions} />
-				</div>
-			</Layout>
-		</>
-	);
+  const { setClassName } = React.useContext(LayoutContext);
+  React.useEffect(() => setClassName("gap-6"), [setClassName]);
+
+  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>
+      <>
+        <h1 className="text-2xl font-semibold">Permissions</h1>
+        <div className="flex gap-3 flex-wrap overflow-y-scroll scrollbar-hide h-[80vh] rounded-xl">
+          <PermissionList permissions={permissions} />
+        </div>
+      </>
+    </>
+  );
 }
diff --git a/src/pages/profile.tsx b/src/pages/profile.tsx
index 9bb4c9f9..9c1ec17a 100644
--- a/src/pages/profile.tsx
+++ b/src/pages/profile.tsx
@@ -2,10 +2,16 @@
 import Head from "next/head";
 import { withIronSessionSsr } from "iron-session/next";
 import { sessionOptions } from "@/lib/session";
-import { ChangeEvent, Dispatch, ReactNode, SetStateAction, useEffect, useRef, useState } from "react";
+import {
+  ChangeEvent,
+  Dispatch,
+  ReactNode,
+  SetStateAction,
+  useRef,
+  useState,
+} from "react";
 import useUser from "@/hooks/useUser";
 import { toast, ToastContainer } from "react-toastify";
-import Layout from "@/components/High/Layout";
 import Input from "@/components/Low/Input";
 import Button from "@/components/Low/Button";
 import Link from "next/link";
@@ -13,28 +19,23 @@ import axios from "axios";
 import { ErrorMessage } from "@/constants/errors";
 import clsx from "clsx";
 import {
-	CorporateUser,
-	EmploymentStatus,
-	EMPLOYMENT_STATUS,
-	Gender,
-	User,
-	DemographicInformation,
-	MasterCorporateUser,
-	Group,
+  CorporateUser,
+  EmploymentStatus,
+  Gender,
+  User,
+  DemographicInformation,
+  MasterCorporateUser,
 } from "@/interfaces/user";
 import CountrySelect from "@/components/Low/CountrySelect";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
 import moment from "moment";
 import { BsCamera, BsQuestionCircleFill } from "react-icons/bs";
 import { USER_TYPE_LABELS } from "@/resources/user";
-import useGroups from "@/hooks/useGroups";
-import useUsers from "@/hooks/useUsers";
 import { convertBase64, redirect } from "@/utils";
 import { Divider } from "primereact/divider";
 import GenderInput from "@/components/High/GenderInput";
 import EmploymentStatusInput from "@/components/High/EmploymentStatusInput";
 import TimezoneSelect from "@/components/Low/TImezoneSelect";
-import Modal from "@/components/Modal";
 import { Module } from "@/interfaces";
 import ModuleLevelSelector from "@/components/Medium/ModuleLevelSelector";
 import Select from "@/components/Low/Select";
@@ -42,594 +43,741 @@ import { InstructorGender } from "@/interfaces/exam";
 import { capitalize } from "lodash";
 import TopicModal from "@/components/Medium/TopicModal";
 import { v4 } from "uuid";
-import { checkAccess, getTypesOfUser } from "@/utils/permissions";
+import { checkAccess } from "@/utils/permissions";
 import { getParticipantGroups, getUserCorporate } from "@/utils/groups.be";
-import { InferGetServerSidePropsType } from "next";
-import { getUsers } from "@/utils/users.be";
+import { countUsers, getUser } from "@/utils/users.be";
 import { requestUser } from "@/utils/api";
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
-	const user = await requestUser(req, res)
-	if (!user) return redirect("/login")
+  const user = await requestUser(req, res);
+  if (!user) return redirect("/login");
 
-	if (shouldRedirectHome(user)) return redirect("/")
+  if (shouldRedirectHome(user)) return redirect("/");
+  const linkedCorporate = (await getUserCorporate(user.id)) || null;
+  const groups = (
+    await getParticipantGroups(user.id, { _id: 0, admin: 1 })
+  ).map((group) => group.admin);
+  const referralAgent =
+    user.type === "corporate" && user.corporateInformation.referralAgent
+      ? await getUser(user.corporateInformation.referralAgent, {
+          _id: 0,
+          name: 1,
+          email: 1,
+          demographicInformation: 1,
+        })
+      : null;
 
-	return {
-		props: {
-			user,
-			linkedCorporate: (await getUserCorporate(user.id)) || null,
-			groups: await getParticipantGroups(user.id),
-			users: await getUsers(),
-		},
-	};
+  const hasBenefitsFromUniversity =
+    (await countUsers({
+      id: { $in: groups },
+      type: "corporate",
+    })) > 0;
+
+  return {
+    props: {
+      user,
+      linkedCorporate,
+      hasBenefitsFromUniversity,
+      referralAgent,
+    },
+  };
 }, sessionOptions);
 
 interface Props {
-	user: User;
-	groups: Group[];
-	users: User[];
-	mutateUser: Function;
-	linkedCorporate?: CorporateUser | MasterCorporateUser;
+  user: User;
+  hasBenefitsFromUniversity: boolean;
+  mutateUser: Function;
+  referralAgent?: User;
+  linkedCorporate?: CorporateUser | MasterCorporateUser;
 }
 
-const DoubleColumnRow = ({ children }: { children: ReactNode }) => <div className="flex flex-col lg:flex-row gap-8 w-full">{children}</div>;
+const DoubleColumnRow = ({ children }: { children: ReactNode }) => (
+  <div className="flex flex-col lg:flex-row gap-8 w-full">{children}</div>
+);
 
-function UserProfile({ user, mutateUser, linkedCorporate, groups, users }: Props) {
-	const [bio, setBio] = useState(user.bio || "");
-	const [name, setName] = useState(user.name || "");
-	const [email, setEmail] = useState(user.email || "");
-	const [password, setPassword] = useState("");
-	const [newPassword, setNewPassword] = useState("");
-	const [isLoading, setIsLoading] = useState(false);
-	const [profilePicture, setProfilePicture] = useState(user.profilePicture);
+function UserProfile({
+  user,
+  mutateUser,
+  linkedCorporate,
+  hasBenefitsFromUniversity,
+  referralAgent,
+}: Props) {
+  const [bio, setBio] = useState(user.bio || "");
+  const [name, setName] = useState(user.name || "");
+  const [email, setEmail] = useState(user.email || "");
+  const [password, setPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [profilePicture, setProfilePicture] = useState(user.profilePicture);
 
-	const [desiredLevels, setDesiredLevels] = useState(checkAccess(user, ["developer", "student"]) ? user.desiredLevels : undefined);
-	const [focus, setFocus] = useState<"academic" | "general">(user.focus);
+  const [desiredLevels, setDesiredLevels] = useState(
+    checkAccess(user, ["developer", "student"]) ? user.desiredLevels : undefined
+  );
+  const [focus, setFocus] = useState<"academic" | "general">(user.focus);
 
-	const [country, setCountry] = useState<string>(user.demographicInformation?.country || "");
-	const [phone, setPhone] = useState<string>(user.demographicInformation?.phone || "");
-	const [gender, setGender] = useState<Gender | undefined>(user.demographicInformation?.gender || undefined);
-	const [employment, setEmployment] = useState<EmploymentStatus | undefined>(
-		checkAccess(user, ["corporate", "mastercorporate"]) ? undefined : (user.demographicInformation as DemographicInformation)?.employment,
-	);
-	const [passport_id, setPassportID] = useState<string | undefined>(
-		checkAccess(user, ["student"]) ? (user.demographicInformation as DemographicInformation)?.passport_id : undefined,
-	);
+  const [country, setCountry] = useState<string>(
+    user.demographicInformation?.country || ""
+  );
+  const [phone, setPhone] = useState<string>(
+    user.demographicInformation?.phone || ""
+  );
+  const [gender, setGender] = useState<Gender | undefined>(
+    user.demographicInformation?.gender || undefined
+  );
+  const [employment, setEmployment] = useState<EmploymentStatus | undefined>(
+    checkAccess(user, ["corporate", "mastercorporate"])
+      ? undefined
+      : (user.demographicInformation as DemographicInformation)?.employment
+  );
+  const [passport_id, setPassportID] = useState<string | undefined>(
+    checkAccess(user, ["student"])
+      ? (user.demographicInformation as DemographicInformation)?.passport_id
+      : undefined
+  );
 
-	const [preferredGender, setPreferredGender] = useState<InstructorGender | undefined>(
-		user.type === "student" || user.type === "developer" ? user.preferredGender || "varied" : undefined,
-	);
-	const [preferredTopics, setPreferredTopics] = useState<string[] | undefined>(
-		user.type === "student" || user.type === "developer" ? user.preferredTopics : undefined,
-	);
+  const [preferredGender, setPreferredGender] = useState<
+    InstructorGender | undefined
+  >(
+    user.type === "student" || user.type === "developer"
+      ? user.preferredGender || "varied"
+      : undefined
+  );
+  const [preferredTopics, setPreferredTopics] = useState<string[] | undefined>(
+    user.type === "student" || user.type === "developer"
+      ? user.preferredTopics
+      : undefined
+  );
 
-	const [position, setPosition] = useState<string | undefined>(
-		user.type === "corporate" || user.type === "mastercorporate" ? user.demographicInformation?.position : undefined,
-	);
-	const [corporateInformation, setCorporateInformation] = useState(
-		user.type === "corporate" || user.type === "mastercorporate" ? user.corporateInformation : undefined,
-	);
+  const [position, setPosition] = useState<string | undefined>(
+    user.type === "corporate" || user.type === "mastercorporate"
+      ? user.demographicInformation?.position
+      : undefined
+  );
+  const [corporateInformation, setCorporateInformation] = useState(
+    user.type === "corporate" || user.type === "mastercorporate"
+      ? user.corporateInformation
+      : undefined
+  );
 
-	const [companyName] = useState<string | undefined>(user.type === "agent" ? user.agentInformation?.companyName : undefined);
-	const [commercialRegistration] = useState<string | undefined>(user.type === "agent" ? user.agentInformation?.commercialRegistration : undefined);
-	const [arabName, setArabName] = useState<string | undefined>(user.type === "agent" ? user.agentInformation?.companyArabName : undefined);
-	const [timezone, setTimezone] = useState<string>(user.demographicInformation?.timezone || moment.tz.guess());
-	const [isPreferredTopicsOpen, setIsPreferredTopicsOpen] = useState(false);
+  const [companyName] = useState<string | undefined>(
+    user.type === "agent" ? user.agentInformation?.companyName : undefined
+  );
+  const [commercialRegistration] = useState<string | undefined>(
+    user.type === "agent"
+      ? user.agentInformation?.commercialRegistration
+      : undefined
+  );
+  const [arabName, setArabName] = useState<string | undefined>(
+    user.type === "agent" ? user.agentInformation?.companyArabName : undefined
+  );
+  const [timezone, setTimezone] = useState<string>(
+    user.demographicInformation?.timezone || moment.tz.guess()
+  );
+  const [isPreferredTopicsOpen, setIsPreferredTopicsOpen] = useState(false);
 
-	const profilePictureInput = useRef(null);
-	const expirationDateColor = (date: Date) => {
-		const momentDate = moment(date);
-		const today = moment(new Date());
+  const profilePictureInput = useRef(null);
+  const expirationDateColor = (date: Date) => {
+    const momentDate = moment(date);
+    const today = moment(new Date());
 
-		if (today.add(1, "days").isAfter(momentDate)) return "!bg-mti-red-ultralight border-mti-red-light";
-		if (today.add(3, "days").isAfter(momentDate)) return "!bg-mti-rose-ultralight border-mti-rose-light";
-		if (today.add(7, "days").isAfter(momentDate)) return "!bg-mti-orange-ultralight border-mti-orange-light";
-	};
+    if (today.add(1, "days").isAfter(momentDate))
+      return "!bg-mti-red-ultralight border-mti-red-light";
+    if (today.add(3, "days").isAfter(momentDate))
+      return "!bg-mti-rose-ultralight border-mti-rose-light";
+    if (today.add(7, "days").isAfter(momentDate))
+      return "!bg-mti-orange-ultralight border-mti-orange-light";
+  };
 
-	const uploadProfilePicture = async (event: ChangeEvent<HTMLInputElement>) => {
-		if (event.target.files && event.target.files[0]) {
-			const picture = event.target.files[0];
-			const base64 = await convertBase64(picture);
-			setProfilePicture(base64 as string);
-		}
-	};
+  const uploadProfilePicture = async (event: ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files && event.target.files[0]) {
+      const picture = event.target.files[0];
+      const base64 = await convertBase64(picture);
+      setProfilePicture(base64 as string);
+    }
+  };
 
-	const updateUser = async () => {
-		setIsLoading(true);
-		if (email !== user?.email && !password) {
-			toast.error("To update your e-mail you need to input your password!");
-			setIsLoading(false);
-			return;
-		}
+  const updateUser = async () => {
+    setIsLoading(true);
+    if (email !== user?.email && !password) {
+      toast.error("To update your e-mail you need to input your password!");
+      setIsLoading(false);
+      return;
+    }
 
-		if (newPassword && !password) {
-			toast.error("To update your password you need to input your current one!");
-			setIsLoading(false);
-			return;
-		}
+    if (newPassword && !password) {
+      toast.error(
+        "To update your password you need to input your current one!"
+      );
+      setIsLoading(false);
+      return;
+    }
 
-		if (email !== user?.email) {
-			const userAdmins = groups.filter((x) => x.participants.includes(user.id)).map((x) => x.admin);
-			const message =
-				users.filter((x) => userAdmins.includes(x.id) && x.type === "corporate").length > 0
-					? "If you change your e-mail address, you will lose all benefits from your university/institute. Are you sure you want to continue?"
-					: "Are you sure you want to update your e-mail address?";
+    if (email !== user?.email) {
+      const message = hasBenefitsFromUniversity
+        ? "If you change your e-mail address, you will lose all benefits from your university/institute. Are you sure you want to continue?"
+        : "Are you sure you want to update your e-mail address?";
 
-			if (!confirm(message)) {
-				setIsLoading(false);
-				return;
-			}
-		}
+      if (!confirm(message)) {
+        setIsLoading(false);
+        return;
+      }
+    }
 
-		axios
-			.post("/api/users/update", {
-				bio,
-				name,
-				email,
-				password,
-				newPassword,
-				profilePicture,
-				desiredLevels,
-				preferredGender,
-				preferredTopics,
-				focus,
-				demographicInformation: {
-					phone,
-					country,
-					employment: user?.type === "corporate" ? undefined : employment,
-					position: user?.type === "corporate" ? position : undefined,
-					gender,
-					passport_id,
-					timezone,
-				},
-				...(user.type === "corporate" ? { corporateInformation } : {}),
-				...(user.type === "agent"
-					? {
-						agentInformation: {
-							companyName,
-							commercialRegistration,
-							arabName,
-						},
-					}
-					: {}),
-			})
-			.then((response) => {
-				if (response.status === 200) {
-					toast.success("Your profile has been updated!");
-					mutateUser((response.data as { user: User }).user);
-					setIsLoading(false);
-					return;
-				}
-			})
-			.catch((error) => {
-				console.log(error);
-				toast.error((error.response.data as ErrorMessage).message);
-			})
-			.finally(() => {
-				setIsLoading(false);
-			});
-	};
+    axios
+      .post("/api/users/update", {
+        bio,
+        name,
+        email,
+        password,
+        newPassword,
+        profilePicture,
+        desiredLevels,
+        preferredGender,
+        preferredTopics,
+        focus,
+        demographicInformation: {
+          phone,
+          country,
+          employment: user?.type === "corporate" ? undefined : employment,
+          position: user?.type === "corporate" ? position : undefined,
+          gender,
+          passport_id,
+          timezone,
+        },
+        ...(user.type === "corporate" ? { corporateInformation } : {}),
+        ...(user.type === "agent"
+          ? {
+              agentInformation: {
+                companyName,
+                commercialRegistration,
+                arabName,
+              },
+            }
+          : {}),
+      })
+      .then((response) => {
+        if (response.status === 200) {
+          toast.success("Your profile has been updated!");
+          mutateUser((response.data as { user: User }).user);
+          setIsLoading(false);
+          return;
+        }
+      })
+      .catch((error) => {
+        console.log(error);
+        toast.error((error.response.data as ErrorMessage).message);
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });
+  };
 
-	const ExpirationDate = () => (
-		<div className="flex flex-col gap-3 w-full">
-			<label className="font-normal text-base text-mti-gray-dim">Expiry Date (click to purchase)</label>
-			<Link
-				href="/payment"
-				className={clsx(
-					"p-6 w-full flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-					"transition duration-300 ease-in-out",
-					!user.subscriptionExpirationDate
-						? "!bg-mti-green-ultralight !border-mti-green-light"
-						: expirationDateColor(user.subscriptionExpirationDate),
-					"bg-white border-mti-gray-platinum",
-				)}>
-				{!user.subscriptionExpirationDate && "Unlimited"}
-				{user.subscriptionExpirationDate && moment(user.subscriptionExpirationDate).format("DD/MM/YYYY")}
-			</Link>
-		</div>
-	);
+  const ExpirationDate = () => (
+    <div className="flex flex-col gap-3 w-full">
+      <label className="font-normal text-base text-mti-gray-dim">
+        Expiry Date (click to purchase)
+      </label>
+      <Link
+        href="/payment"
+        className={clsx(
+          "p-6 w-full flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+          "transition duration-300 ease-in-out",
+          !user.subscriptionExpirationDate
+            ? "!bg-mti-green-ultralight !border-mti-green-light"
+            : expirationDateColor(user.subscriptionExpirationDate),
+          "bg-white border-mti-gray-platinum"
+        )}
+      >
+        {!user.subscriptionExpirationDate && "Unlimited"}
+        {user.subscriptionExpirationDate &&
+          moment(user.subscriptionExpirationDate).format("DD/MM/YYYY")}
+      </Link>
+    </div>
+  );
 
-	const TimezoneInput = () => (
-		<div className="flex flex-col gap-3 w-full">
-			<label className="font-normal text-base text-mti-gray-dim">Timezone</label>
-			<TimezoneSelect value={timezone} onChange={setTimezone} />
-		</div>
-	);
+  const TimezoneInput = () => (
+    <div className="flex flex-col gap-3 w-full">
+      <label className="font-normal text-base text-mti-gray-dim">
+        Timezone
+      </label>
+      <TimezoneSelect value={timezone} onChange={setTimezone} />
+    </div>
+  );
 
-	const manualDownloadLink = ["student", "teacher", "corporate"].includes(user.type) ? `/manuals/${user.type}.pdf` : "";
+  const manualDownloadLink = ["student", "teacher", "corporate"].includes(
+    user.type
+  )
+    ? `/manuals/${user.type}.pdf`
+    : "";
 
-	return (
-		<Layout user={user}>
-			<section className="w-full flex flex-col gap-4 md:gap-8 px-4 py-8">
-				<h1 className="text-4xl font-bold mb-6 md:hidden">Edit Profile</h1>
-				<div className="flex -md:flex-col-reverse -md:items-center w-full justify-between">
-					<div className="flex flex-col gap-8 w-full md:w-2/3">
-						<h1 className="text-4xl font-bold mb-6 -md:hidden">Edit Profile</h1>
-						<form className="flex flex-col items-center gap-6 w-full" onSubmit={(e) => e.preventDefault()}>
-							<DoubleColumnRow>
-								{user.type !== "corporate" && user.type !== "mastercorporate" && (
-									<Input
-										label={user.type === "agent" ? "English name" : "Name"}
-										type="text"
-										name="name"
-										onChange={(e) => setName(e)}
-										placeholder="Enter your name"
-										defaultValue={name}
-										required
-									/>
-								)}
+  return (
+    <>
+      <section className="w-full flex flex-col gap-4 md:gap-8 px-4 py-8">
+        <h1 className="text-4xl font-bold mb-6 md:hidden">Edit Profile</h1>
+        <div className="flex -md:flex-col-reverse -md:items-center w-full justify-between">
+          <div className="flex flex-col gap-8 w-full md:w-2/3">
+            <h1 className="text-4xl font-bold mb-6 -md:hidden">Edit Profile</h1>
+            <form
+              className="flex flex-col items-center gap-6 w-full"
+              onSubmit={(e) => e.preventDefault()}
+            >
+              <DoubleColumnRow>
+                {user.type !== "corporate" &&
+                  user.type !== "mastercorporate" && (
+                    <Input
+                      label={user.type === "agent" ? "English name" : "Name"}
+                      type="text"
+                      name="name"
+                      onChange={(e) => setName(e)}
+                      placeholder="Enter your name"
+                      defaultValue={name}
+                      required
+                    />
+                  )}
 
-								{user.type === "agent" && (
-									<Input
-										label="Arab name"
-										type="text"
-										name="arabName"
-										onChange={(e) => setArabName(e)}
-										placeholder="Enter your arab name"
-										defaultValue={arabName}
-										required
-									/>
-								)}
+                {user.type === "agent" && (
+                  <Input
+                    label="Arab name"
+                    type="text"
+                    name="arabName"
+                    onChange={(e) => setArabName(e)}
+                    placeholder="Enter your arab name"
+                    defaultValue={arabName}
+                    required
+                  />
+                )}
 
-								<Input
-									label="E-mail Address"
-									type="email"
-									name="email"
-									onChange={(e) => setEmail(e)}
-									placeholder="Enter email address"
-									defaultValue={email}
-									required
-								/>
-							</DoubleColumnRow>
-							<DoubleColumnRow>
-								<Input
-									label="Current Password"
-									type="password"
-									name="password"
-									onChange={(e) => setPassword(e)}
-									placeholder="Enter your password"
-									required
-								/>
-								<Input
-									label="New Password"
-									type="password"
-									name="newPassword"
-									onChange={(e) => setNewPassword(e)}
-									placeholder="Enter your new password (optional)"
-								/>
-							</DoubleColumnRow>
-							{user.type === "agent" && (
-								<div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full">
-									<Input
-										label="Company Name"
-										type="text"
-										name="companyName"
-										onChange={() => null}
-										placeholder="Enter your company's name"
-										defaultValue={companyName}
-										disabled
-									/>
-									<Input
-										label="Commercial Registration"
-										type="text"
-										name="commercialRegistration"
-										onChange={() => null}
-										placeholder="Enter commercial registration"
-										defaultValue={commercialRegistration}
-										disabled
-									/>
-								</div>
-							)}
+                <Input
+                  label="E-mail Address"
+                  type="email"
+                  name="email"
+                  onChange={(e) => setEmail(e)}
+                  placeholder="Enter email address"
+                  defaultValue={email}
+                  required
+                />
+              </DoubleColumnRow>
+              <DoubleColumnRow>
+                <Input
+                  label="Current Password"
+                  type="password"
+                  name="password"
+                  onChange={(e) => setPassword(e)}
+                  placeholder="Enter your password"
+                  required
+                />
+                <Input
+                  label="New Password"
+                  type="password"
+                  name="newPassword"
+                  onChange={(e) => setNewPassword(e)}
+                  placeholder="Enter your new password (optional)"
+                />
+              </DoubleColumnRow>
+              {user.type === "agent" && (
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full">
+                  <Input
+                    label="Company Name"
+                    type="text"
+                    name="companyName"
+                    onChange={() => null}
+                    placeholder="Enter your company's name"
+                    defaultValue={companyName}
+                    disabled
+                  />
+                  <Input
+                    label="Commercial Registration"
+                    type="text"
+                    name="commercialRegistration"
+                    onChange={() => null}
+                    placeholder="Enter commercial registration"
+                    defaultValue={commercialRegistration}
+                    disabled
+                  />
+                </div>
+              )}
 
-							<DoubleColumnRow>
-								<div className="flex flex-col gap-3 w-full">
-									<label className="font-normal text-base text-mti-gray-dim">Country *</label>
-									<CountrySelect value={country} onChange={setCountry} />
-								</div>
-								<Input
-									type="tel"
-									name="phone"
-									label="Phone number"
-									onChange={(e) => setPhone(e)}
-									placeholder="Enter phone number"
-									defaultValue={phone}
-									required
-								/>
-							</DoubleColumnRow>
+              <DoubleColumnRow>
+                <div className="flex flex-col gap-3 w-full">
+                  <label className="font-normal text-base text-mti-gray-dim">
+                    Country *
+                  </label>
+                  <CountrySelect value={country} onChange={setCountry} />
+                </div>
+                <Input
+                  type="tel"
+                  name="phone"
+                  label="Phone number"
+                  onChange={(e) => setPhone(e)}
+                  placeholder="Enter phone number"
+                  defaultValue={phone}
+                  required
+                />
+              </DoubleColumnRow>
 
-							{user.type === "student" ? (
-								<DoubleColumnRow>
-									<Input
-										type="text"
-										name="passport_id"
-										label="Passport/National ID"
-										onChange={(e) => setPassportID(e)}
-										placeholder="Enter National ID or Passport number"
-										value={passport_id}
-										required
-									/>
-									<TimezoneInput />
-								</DoubleColumnRow>
-							) : (
-								<TimezoneInput />
-							)}
+              {user.type === "student" ? (
+                <DoubleColumnRow>
+                  <Input
+                    type="text"
+                    name="passport_id"
+                    label="Passport/National ID"
+                    onChange={(e) => setPassportID(e)}
+                    placeholder="Enter National ID or Passport number"
+                    value={passport_id}
+                    required
+                  />
+                  <TimezoneInput />
+                </DoubleColumnRow>
+              ) : (
+                <TimezoneInput />
+              )}
 
-							<Divider />
+              <Divider />
 
-							{desiredLevels && ["developer", "student"].includes(user.type) && (
-								<>
-									<div className="flex flex-col gap-3 w-full">
-										<label className="font-normal text-base text-mti-gray-dim">Desired Levels</label>
-										<ModuleLevelSelector
-											levels={desiredLevels}
-											setLevels={setDesiredLevels as Dispatch<SetStateAction<{ [key in Module]: number }>>}
-										/>
-									</div>
-									<div className="flex flex-col gap-3 w-full">
-										<label className="font-normal text-base text-mti-gray-dim">Focus</label>
-										<div className="grid grid-cols-1 md:grid-cols-2 gap-y-4 gap-x-16 w-full">
-											<button
-												onClick={() => setFocus("academic")}
-												className={clsx(
-													"w-full border border-mti-gray-platinum rounded-full px-6 py-4 flex justify-center items-center gap-12 bg-white",
-													"hover:bg-mti-purple-light hover:text-white",
-													focus === "academic" && "!bg-mti-purple-light !text-white",
-													"transition duration-300 ease-in-out",
-												)}>
-												Academic
-											</button>
-											<button
-												onClick={() => setFocus("general")}
-												className={clsx(
-													"w-full border border-mti-gray-platinum rounded-full px-6 py-4 flex justify-center items-center gap-12 bg-white",
-													"hover:bg-mti-purple-light hover:text-white",
-													focus === "general" && "!bg-mti-purple-light !text-white",
-													"transition duration-300 ease-in-out",
-												)}>
-												General
-											</button>
-										</div>
-									</div>
-								</>
-							)}
+              {desiredLevels &&
+                ["developer", "student"].includes(user.type) && (
+                  <>
+                    <div className="flex flex-col gap-3 w-full">
+                      <label className="font-normal text-base text-mti-gray-dim">
+                        Desired Levels
+                      </label>
+                      <ModuleLevelSelector
+                        levels={desiredLevels}
+                        setLevels={
+                          setDesiredLevels as Dispatch<
+                            SetStateAction<{ [key in Module]: number }>
+                          >
+                        }
+                      />
+                    </div>
+                    <div className="flex flex-col gap-3 w-full">
+                      <label className="font-normal text-base text-mti-gray-dim">
+                        Focus
+                      </label>
+                      <div className="grid grid-cols-1 md:grid-cols-2 gap-y-4 gap-x-16 w-full">
+                        <button
+                          onClick={() => setFocus("academic")}
+                          className={clsx(
+                            "w-full border border-mti-gray-platinum rounded-full px-6 py-4 flex justify-center items-center gap-12 bg-white",
+                            "hover:bg-mti-purple-light hover:text-white",
+                            focus === "academic" &&
+                              "!bg-mti-purple-light !text-white",
+                            "transition duration-300 ease-in-out"
+                          )}
+                        >
+                          Academic
+                        </button>
+                        <button
+                          onClick={() => setFocus("general")}
+                          className={clsx(
+                            "w-full border border-mti-gray-platinum rounded-full px-6 py-4 flex justify-center items-center gap-12 bg-white",
+                            "hover:bg-mti-purple-light hover:text-white",
+                            focus === "general" &&
+                              "!bg-mti-purple-light !text-white",
+                            "transition duration-300 ease-in-out"
+                          )}
+                        >
+                          General
+                        </button>
+                      </div>
+                    </div>
+                  </>
+                )}
 
-							{preferredGender && ["developer", "student"].includes(user.type) && (
-								<>
-									<Divider />
-									<DoubleColumnRow>
-										<div className="flex flex-col gap-3 w-full">
-											<label className="font-normal text-base text-mti-gray-dim">Speaking Instructor&apos;s Gender</label>
-											<Select
-												value={{
-													value: preferredGender,
-													label: capitalize(preferredGender),
-												}}
-												onChange={(value) => (value ? setPreferredGender(value.value as InstructorGender) : null)}
-												options={[
-													{ value: "male", label: "Male" },
-													{ value: "female", label: "Female" },
-													{ value: "varied", label: "Varied" },
-												]}
-											/>
-										</div>
-										<div className="flex flex-col gap-4 w-full">
-											<label className="font-normal text-base text-mti-gray-dim flex gap-2 items-center">
-												Preferred Topics{" "}
-												<span
-													className="tooltip"
-													data-tip="These topics will be considered for speaking and writing modules, aiming to include at least one exercise containing of the these in the selected exams.">
-													<BsQuestionCircleFill />
-												</span>
-											</label>
-											<Button className="w-full" variant="outline" onClick={() => setIsPreferredTopicsOpen(true)}>
-												Select Topics ({preferredTopics?.length || "All"} selected)
-											</Button>
-										</div>
-									</DoubleColumnRow>
+              {preferredGender &&
+                ["developer", "student"].includes(user.type) && (
+                  <>
+                    <Divider />
+                    <DoubleColumnRow>
+                      <div className="flex flex-col gap-3 w-full">
+                        <label className="font-normal text-base text-mti-gray-dim">
+                          Speaking Instructor&apos;s Gender
+                        </label>
+                        <Select
+                          value={{
+                            value: preferredGender,
+                            label: capitalize(preferredGender),
+                          }}
+                          onChange={(value) =>
+                            value
+                              ? setPreferredGender(
+                                  value.value as InstructorGender
+                                )
+                              : null
+                          }
+                          options={[
+                            { value: "male", label: "Male" },
+                            { value: "female", label: "Female" },
+                            { value: "varied", label: "Varied" },
+                          ]}
+                        />
+                      </div>
+                      <div className="flex flex-col gap-4 w-full">
+                        <label className="font-normal text-base text-mti-gray-dim flex gap-2 items-center">
+                          Preferred Topics{" "}
+                          <span
+                            className="tooltip"
+                            data-tip="These topics will be considered for speaking and writing modules, aiming to include at least one exercise containing of the these in the selected exams."
+                          >
+                            <BsQuestionCircleFill />
+                          </span>
+                        </label>
+                        <Button
+                          className="w-full"
+                          variant="outline"
+                          onClick={() => setIsPreferredTopicsOpen(true)}
+                        >
+                          Select Topics ({preferredTopics?.length || "All"}{" "}
+                          selected)
+                        </Button>
+                      </div>
+                    </DoubleColumnRow>
 
-									<TopicModal
-										key={v4()}
-										isOpen={isPreferredTopicsOpen}
-										onClose={() => setIsPreferredTopicsOpen(false)}
-										selectTopics={setPreferredTopics}
-										initialTopics={preferredTopics || []}
-									/>
+                    <TopicModal
+                      key={v4()}
+                      isOpen={isPreferredTopicsOpen}
+                      onClose={() => setIsPreferredTopicsOpen(false)}
+                      selectTopics={setPreferredTopics}
+                      initialTopics={preferredTopics || []}
+                    />
 
-									<Divider />
-								</>
-							)}
+                    <Divider />
+                  </>
+                )}
 
-							{user.type === "corporate" && (
-								<>
-									<DoubleColumnRow>
-										<Input
-											type="text"
-											name="pricing"
-											onChange={() => null}
-											label="Pricing"
-											defaultValue={`${user.corporateInformation.payment?.value} ${user.corporateInformation.payment?.currency}`}
-											disabled
-											required
-										/>
-									</DoubleColumnRow>
-									<ExpirationDate />
-								</>
-							)}
+              {user.type === "corporate" && (
+                <>
+                  <DoubleColumnRow>
+                    <Input
+                      type="text"
+                      name="pricing"
+                      onChange={() => null}
+                      label="Pricing"
+                      defaultValue={`${user.corporateInformation.payment?.value} ${user.corporateInformation.payment?.currency}`}
+                      disabled
+                      required
+                    />
+                  </DoubleColumnRow>
+                  <ExpirationDate />
+                </>
+              )}
 
-							{user.type === "corporate" && (
-								<>
-									<Divider />
-									<DoubleColumnRow>
-										<Input
-											label="Name"
-											type="text"
-											name="name"
-											onChange={(e) => setName(e)}
-											placeholder="Enter your name"
-											defaultValue={name}
-											required
-										/>
-										<Input
-											name="position"
-											onChange={setPosition}
-											defaultValue={position}
-											type="text"
-											label="Department"
-											placeholder="CEO, Head of Marketing..."
-											required
-											disabled={!!linkedCorporate}
-										/>
-									</DoubleColumnRow>
-								</>
-							)}
+              {user.type === "corporate" && (
+                <>
+                  <Divider />
+                  <DoubleColumnRow>
+                    <Input
+                      label="Name"
+                      type="text"
+                      name="name"
+                      onChange={(e) => setName(e)}
+                      placeholder="Enter your name"
+                      defaultValue={name}
+                      required
+                    />
+                    <Input
+                      name="position"
+                      onChange={setPosition}
+                      defaultValue={position}
+                      type="text"
+                      label="Department"
+                      placeholder="CEO, Head of Marketing..."
+                      required
+                      disabled={!!linkedCorporate}
+                    />
+                  </DoubleColumnRow>
+                </>
+              )}
 
-							{user.type === "corporate" && user.corporateInformation.referralAgent && (
-								<>
-									<Divider />
-									<DoubleColumnRow>
-										<Input
-											name="agentName"
-											onChange={() => null}
-											defaultValue={users.find((x) => x.id === user.corporateInformation.referralAgent)?.name}
-											type="text"
-											label="Country Manager's Name"
-											placeholder="Not available"
-											required
-											disabled
-										/>
-										<Input
-											name="agentEmail"
-											onChange={() => null}
-											defaultValue={users.find((x) => x.id === user.corporateInformation.referralAgent)?.email}
-											type="text"
-											label="Country Manager's E-mail"
-											placeholder="Not available"
-											required
-											disabled
-										/>
-									</DoubleColumnRow>
-									<DoubleColumnRow>
-										<div className="flex flex-col gap-2 w-full">
-											<label className="font-normal text-base text-mti-gray-dim">Country Manager&apos;s Country *</label>
-											<CountrySelect
-												value={
-													users.find((x) => x.id === user.corporateInformation.referralAgent)?.demographicInformation
-														?.country
-												}
-												onChange={() => null}
-												disabled
-											/>
-										</div>
+              {user.type === "corporate" &&
+                user.corporateInformation.referralAgent &&
+                referralAgent && (
+                  <>
+                    <Divider />
+                    <DoubleColumnRow>
+                      <Input
+                        name="agentName"
+                        onChange={() => null}
+                        defaultValue={referralAgent?.name}
+                        type="text"
+                        label="Country Manager's Name"
+                        placeholder="Not available"
+                        required
+                        disabled
+                      />
+                      <Input
+                        name="agentEmail"
+                        onChange={() => null}
+                        defaultValue={referralAgent?.email}
+                        type="text"
+                        label="Country Manager's E-mail"
+                        placeholder="Not available"
+                        required
+                        disabled
+                      />
+                    </DoubleColumnRow>
+                    <DoubleColumnRow>
+                      <div className="flex flex-col gap-2 w-full">
+                        <label className="font-normal text-base text-mti-gray-dim">
+                          Country Manager&apos;s Country *
+                        </label>
+                        <CountrySelect
+                          value={referralAgent?.demographicInformation?.country}
+                          onChange={() => null}
+                          disabled
+                        />
+                      </div>
 
-										<Input
-											type="tel"
-											name="agentPhone"
-											label="Country Manager's Phone"
-											onChange={() => null}
-											placeholder="Not available"
-											defaultValue={
-												users.find((x) => x.id === user.corporateInformation.referralAgent)?.demographicInformation?.phone
-											}
-											disabled
-											required
-										/>
-									</DoubleColumnRow>
-								</>
-							)}
+                      <Input
+                        type="tel"
+                        name="agentPhone"
+                        label="Country Manager's Phone"
+                        onChange={() => null}
+                        placeholder="Not available"
+                        defaultValue={
+                          referralAgent?.demographicInformation?.phone
+                        }
+                        disabled
+                        required
+                      />
+                    </DoubleColumnRow>
+                  </>
+                )}
 
-							{user.type !== "corporate" && (
-								<DoubleColumnRow>
-									<EmploymentStatusInput value={employment} onChange={setEmployment} />
+              {user.type !== "corporate" && (
+                <DoubleColumnRow>
+                  <EmploymentStatusInput
+                    value={employment}
+                    onChange={setEmployment}
+                  />
 
-									<div className="flex flex-col gap-8 w-full">
-										<GenderInput value={gender} onChange={setGender} />
-										<ExpirationDate />
-									</div>
-								</DoubleColumnRow>
-							)}
-						</form>
-					</div>
-					<div className="flex flex-col gap-6 w-48">
-						<div
-							className="flex flex-col gap-3 items-center h-fit cursor-pointer group"
-							onClick={() => (profilePictureInput.current as any)?.click()}>
-							<div className="relative overflow-hidden h-48 w-48 rounded-full">
-								<div
-									className={clsx(
-										"absolute top-0 left-0 bg-mti-purple-light/60 w-full h-full z-20 flex items-center justify-center opacity-0 group-hover:opacity-100",
-										"transition ease-in-out duration-300",
-									)}>
-									<BsCamera className="text-6xl text-mti-purple-ultralight/80" />
-								</div>
-								<img src={profilePicture} alt={user.name} className="aspect-square drop-shadow-xl self-end object-cover" />
-							</div>
-							<input type="file" className="hidden" onChange={uploadProfilePicture} accept="image/*" ref={profilePictureInput} />
-							<span
-								onClick={() => (profilePictureInput.current as any)?.click()}
-								className="cursor-pointer text-mti-purple-light text-sm">
-								Change picture
-							</span>
-							<h6 className="font-normal text-base text-mti-gray-taupe">{USER_TYPE_LABELS[user.type]}</h6>
-						</div>
-						{user.type === "agent" && (
-							<div className="flag items-center h-fit">
-								<img
-									alt={user.demographicInformation?.country.toLowerCase() + "_flag"}
-									src={`https://flagcdn.com/w320/${user.demographicInformation?.country.toLowerCase()}.png`}
-									width="320"
-								/>
-							</div>
-						)}
-						{manualDownloadLink && (
-							<a href={manualDownloadLink} className="max-w-[200px] self-end w-full" download>
-								<Button color="purple" variant="outline" className="max-w-[200px] self-end w-full">
-									Download Manual
-								</Button>
-							</a>
-						)}
-					</div>
-				</div>
-				<div className="flex flex-col gap-4 mt-8 mb-20">
-					<span className="text-lg font-bold">Bio</span>
-					<textarea
-						className="w-full h-full min-h-[148px] cursor-text px-7 py-8 input border-2 border-mti-gray-platinum bg-white rounded-3xl"
-						onChange={(e) => setBio(e.target.value)}
-						defaultValue={bio}
-						placeholder="Write your text here..."
-					/>
-				</div>
+                  <div className="flex flex-col gap-8 w-full">
+                    <GenderInput value={gender} onChange={setGender} />
+                    <ExpirationDate />
+                  </div>
+                </DoubleColumnRow>
+              )}
+            </form>
+          </div>
+          <div className="flex flex-col gap-6 w-48">
+            <div
+              className="flex flex-col gap-3 items-center h-fit cursor-pointer group"
+              onClick={() => (profilePictureInput.current as any)?.click()}
+            >
+              <div className="relative overflow-hidden h-48 w-48 rounded-full">
+                <div
+                  className={clsx(
+                    "absolute top-0 left-0 bg-mti-purple-light/60 w-full h-full z-20 flex items-center justify-center opacity-0 group-hover:opacity-100",
+                    "transition ease-in-out duration-300"
+                  )}
+                >
+                  <BsCamera className="text-6xl text-mti-purple-ultralight/80" />
+                </div>
+                <img
+                  src={profilePicture}
+                  alt={user.name}
+                  className="aspect-square drop-shadow-xl self-end object-cover"
+                />
+              </div>
+              <input
+                type="file"
+                className="hidden"
+                onChange={uploadProfilePicture}
+                accept="image/*"
+                ref={profilePictureInput}
+              />
+              <span
+                onClick={() => (profilePictureInput.current as any)?.click()}
+                className="cursor-pointer text-mti-purple-light text-sm"
+              >
+                Change picture
+              </span>
+              <h6 className="font-normal text-base text-mti-gray-taupe">
+                {USER_TYPE_LABELS[user.type]}
+              </h6>
+            </div>
+            {user.type === "agent" && (
+              <div className="flag items-center h-fit">
+                <img
+                  alt={
+                    user.demographicInformation?.country.toLowerCase() + "_flag"
+                  }
+                  src={`https://flagcdn.com/w320/${user.demographicInformation?.country.toLowerCase()}.png`}
+                  width="320"
+                />
+              </div>
+            )}
+            {manualDownloadLink && (
+              <a
+                href={manualDownloadLink}
+                className="max-w-[200px] self-end w-full"
+                download
+              >
+                <Button
+                  color="purple"
+                  variant="outline"
+                  className="max-w-[200px] self-end w-full"
+                >
+                  Download Manual
+                </Button>
+              </a>
+            )}
+          </div>
+        </div>
+        <div className="flex flex-col gap-4 mt-8 mb-20">
+          <span className="text-lg font-bold">Bio</span>
+          <textarea
+            className="w-full h-full min-h-[148px] cursor-text px-7 py-8 input border-2 border-mti-gray-platinum bg-white rounded-3xl"
+            onChange={(e) => setBio(e.target.value)}
+            defaultValue={bio}
+            placeholder="Write your text here..."
+          />
+        </div>
 
-				<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
-					<Link href="/" className="max-w-[200px] self-end w-full">
-						<Button color="purple" variant="outline" className="max-w-[200px] self-end w-full">
-							Back
-						</Button>
-					</Link>
-					<Button color="purple" className="max-w-[200px] self-end w-full" onClick={updateUser} disabled={isLoading}>
-						Save Changes
-					</Button>
-				</div>
-			</section>
-		</Layout>
-	);
+        <div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
+          <Link href="/" className="max-w-[200px] self-end w-full">
+            <Button
+              color="purple"
+              variant="outline"
+              className="max-w-[200px] self-end w-full"
+            >
+              Back
+            </Button>
+          </Link>
+          <Button
+            color="purple"
+            className="max-w-[200px] self-end w-full"
+            onClick={updateUser}
+            disabled={isLoading}
+          >
+            Save Changes
+          </Button>
+        </div>
+      </section>
+    </>
+  );
 }
 
-export default function Home(props: { linkedCorporate?: CorporateUser | MasterCorporateUser; groups: Group[]; users: User[] }) {
-	const { user, mutateUser } = useUser({ redirectTo: "/login" });
+export default function Home(props: {
+  hasBenefitsFromUniversity: boolean;
+  referralAgent?: User;
+  linkedCorporate?: CorporateUser | MasterCorporateUser;
+}) {
+  const { user, mutateUser } = useUser({ redirectTo: "/login" });
 
-	return (
-		<>
-			<Head>
-				<title>Profile | 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 />
-			{user && <UserProfile user={user} mutateUser={mutateUser} {...props} />}
-		</>
-	);
+  return (
+    <>
+      <Head>
+        <title>Profile | 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 />
+      {user && <UserProfile user={user} mutateUser={mutateUser} {...props} />}
+    </>
+  );
 }
diff --git a/src/pages/record.tsx b/src/pages/record.tsx
index d019272a..9adf3065 100644
--- a/src/pages/record.tsx
+++ b/src/pages/record.tsx
@@ -8,7 +8,6 @@ import useFilterRecordsByUser from "@/hooks/useFilterRecordsByUser";
 import { groupByDate } from "@/utils/stats";
 import moment from "moment";
 import { ToastContainer } from "react-toastify";
-import Layout from "@/components/High/Layout";
 import clsx from "clsx";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
 import { uuidv4 } from "@firebase/util";
@@ -193,7 +192,7 @@ export default function History({ user, users, assignments, entities, gradingSys
 			</Head>
 			<ToastContainer />
 			{user && (
-				<Layout user={user}>
+				<>
 					<RecordFilter user={user} isAdmin={isAdmin} entities={entities} filterState={{ filter: filter, setFilter: setFilter }}>
 						{training && (
 							<div className="flex flex-row">
@@ -226,7 +225,7 @@ export default function History({ user, users, assignments, entities, gradingSys
 							<span className="loading loading-infinity w-32 bg-mti-green-light" />
 						</div>
 					)}
-				</Layout>
+				</>
 			)}
 		</>
 	);
diff --git a/src/pages/register.tsx b/src/pages/register.tsx
index b8961ae9..817386a8 100644
--- a/src/pages/register.tsx
+++ b/src/pages/register.tsx
@@ -8,9 +8,7 @@ import clsx from "clsx";
 import {Tab} from "@headlessui/react";
 import RegisterIndividual from "./(register)/RegisterIndividual";
 import RegisterCorporate from "./(register)/RegisterCorporate";
-import EmailVerification from "./(auth)/EmailVerification";
 import {sendEmailVerification} from "@/utils/email";
-import useUsers from "@/hooks/useUsers";
 import axios from "axios";
 
 export const getServerSideProps = (context: any) => {
diff --git a/src/pages/settings.tsx b/src/pages/settings.tsx
index e3688205..29aa8e01 100644
--- a/src/pages/settings.tsx
+++ b/src/pages/settings.tsx
@@ -3,17 +3,13 @@ import Head from "next/head";
 import { withIronSessionSsr } from "iron-session/next";
 import { sessionOptions } from "@/lib/session";
 import { ToastContainer } from "react-toastify";
-import Layout from "@/components/High/Layout";
 import CodeGenerator from "./(admin)/CodeGenerator";
 import ExamLoader from "./(admin)/ExamLoader";
-import { Tab } from "@headlessui/react";
-import clsx from "clsx";
 import Lists from "./(admin)/Lists";
 import BatchCodeGenerator from "./(admin)/BatchCodeGenerator";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
 import BatchCreateUser from "./(admin)/Lists/BatchCreateUser";
 import { checkAccess, getTypesOfUser } from "@/utils/permissions";
-import usePermissions from "@/hooks/usePermissions";
 import { useState } from "react";
 import Modal from "@/components/Modal";
 import IconCard from "@/components/IconCard";
@@ -23,10 +19,9 @@ import CorporateGradingSystem from "./(admin)/CorporateGradingSystem";
 import { CEFR_STEPS } from "@/resources/grading";
 import { User } from "@/interfaces/user";
 import { getUserPermissions } from "@/utils/permissions.be";
-import { Permission, PermissionType } from "@/interfaces/permissions";
+import {  PermissionType } from "@/interfaces/permissions";
 import { getUsers } from "@/utils/users.be";
-import useUsers from "@/hooks/useUsers";
-import { getEntitiesWithRoles, getEntityWithRoles } from "@/utils/entities.be";
+import { getEntitiesWithRoles } from "@/utils/entities.be";
 import { mapBy, serialize, redirect } from "@/utils";
 import { EntityWithRoles } from "@/interfaces/entity";
 import { requestUser } from "@/utils/api";
@@ -84,7 +79,7 @@ export default function Admin({ user, entities, permissions, allUsers, entitiesG
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
 			<ToastContainer />
-			<Layout user={user} className="gap-6">
+			<>
 				<Modal isOpen={modalOpen === "batchCreateUser"} onClose={() => setModalOpen(undefined)} maxWidth="max-w-[85%]">
 					<BatchCreateUser
 						user={user}
@@ -180,7 +175,7 @@ export default function Admin({ user, entities, permissions, allUsers, entitiesG
 				<section className="w-full">
 					<Lists user={user} entities={entities} permissions={permissions} />
 				</section>
-			</Layout>
+			</>
 		</>
 	);
 }
diff --git a/src/pages/statistical.tsx b/src/pages/statistical.tsx
index 1b77542f..0795d0b2 100644
--- a/src/pages/statistical.tsx
+++ b/src/pages/statistical.tsx
@@ -1,5 +1,4 @@
 /* eslint-disable @next/next/no-img-element */
-import Layout from "@/components/High/Layout";
 import Table from "@/components/High/Table";
 import Checkbox from "@/components/Low/Checkbox";
 import Separator from "@/components/Low/Separator";
@@ -8,16 +7,15 @@ import { Session } from "@/hooks/useSessions";
 import { Entity, EntityWithRoles } from "@/interfaces/entity";
 import { Exam } from "@/interfaces/exam";
 import { Assignment, AssignmentResult } from "@/interfaces/results";
-import { Group, Stat, StudentUser, User } from "@/interfaces/user";
+import {  StudentUser, User } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
 import { filterBy, findBy, mapBy, redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
 import { getEntitiesAssignments } from "@/utils/assignments.be";
 import { getEntitiesWithRoles } from "@/utils/entities.be";
 import { getExamsByIds } from "@/utils/exams.be";
-import { checkAccess, findAllowedEntities } from "@/utils/permissions";
-import { getSessionsByAssignments, getSessionsByUser } from "@/utils/sessions.be";
-import { getStatsByUsers } from "@/utils/stats.be";
+import {  findAllowedEntities } from "@/utils/permissions";
+import { getSessionsByAssignments } from "@/utils/sessions.be";
 import { isAdmin } from "@/utils/users";
 import { getEntitiesUsers } from "@/utils/users.be";
 import { createColumnHelper } from "@tanstack/react-table";
@@ -222,7 +220,7 @@ export default function Statistical({ user, students, entities, assignments, ses
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
 
-			<Layout user={user}>
+			<>
 				<div className="flex flex-col gap-4">
 					<div className="flex items-center justify-between w-full">
 						<div className="flex items-center gap-2">
@@ -301,7 +299,7 @@ export default function Statistical({ user, students, entities, assignments, ses
 						isDownloadLoading={isDownloading}
 					/>
 				)}
-			</Layout>
+			</>
 		</>
 	)
 }
diff --git a/src/pages/stats.tsx b/src/pages/stats.tsx
index 51dac7a0..d3d61660 100644
--- a/src/pages/stats.tsx
+++ b/src/pages/stats.tsx
@@ -21,9 +21,8 @@ import {
 import { withIronSessionSsr } from "iron-session/next";
 import { sessionOptions } from "@/lib/session";
 import { useEffect, useMemo, useState } from "react";
-import useFilterRecordsByUser from "@/hooks/useFilterRecordsByUser";
+import useStats from "@/hooks/useStats";
 import {
-  averageScore,
   groupBySession,
   groupByModule,
   timestampToMoment,
@@ -32,11 +31,8 @@ import { ToastContainer } from "react-toastify";
 import { capitalize } from "lodash";
 import { Module } from "@/interfaces";
 import ProgressBar from "@/components/Low/ProgressBar";
-import Layout from "@/components/High/Layout";
 import { calculateBandScore } from "@/utils/score";
 import {
-  countExamModules,
-  countFullExams,
   MODULE_ARRAY,
   sortByModule,
 } from "@/utils/moduleUtils";
@@ -109,7 +105,7 @@ export default function Stats({ user, entities, isAdmin }: Props) {
   const [selectedEntity, setSelectedEntity] = useState<string>();
 
   const entitiesToSearch = useMemo(() => {
-    if(selectedEntity) return [selectedEntity]
+    if (selectedEntity) return [selectedEntity];
     if (isAdmin) return undefined;
     return mapBy(entities, "id");
   }, [entities, isAdmin, selectedEntity]);
@@ -137,10 +133,19 @@ export default function Stats({ user, entities, isAdmin }: Props) {
 
   const [intervalDates, setIntervalDates] = useState<Date[]>([]);
 
-  const { data: stats } = useFilterRecordsByUser<Stat[]>(
-    statsUserId,
-    !statsUserId
-  );
+  const {
+    data: {
+      allStats: stats = [],
+      fullExams: exams = 0,
+      uniqueModules: modules = 0,
+      averageScore = 0,
+    },
+  } = useStats<{
+    allStats: Stat[];
+    fullExams: number;
+    uniqueModules: number;
+    averageScore: number;
+  }>(statsUserId, !statsUserId, "stats");
 
   const initialStatDate = useMemo(
     () => (stats[0] ? timestampToMoment(stats[0]).toDate() : null),
@@ -239,7 +244,7 @@ export default function Stats({ user, entities, isAdmin }: Props) {
       </Head>
       <ToastContainer />
       {user && (
-        <Layout user={user} className="gap-8">
+        <>
           <ProfileSummary
             user={userData || user}
             items={[
@@ -247,7 +252,7 @@ export default function Stats({ user, entities, isAdmin }: Props) {
                 icon: (
                   <BsFileEarmarkText className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />
                 ),
-                value: countFullExams(stats),
+                value: exams,
                 label: "Exams",
                 tooltip: "Number of all conducted completed exams",
               },
@@ -255,7 +260,7 @@ export default function Stats({ user, entities, isAdmin }: Props) {
                 icon: (
                   <BsPencil className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />
                 ),
-                value: countExamModules(stats),
+                value: modules,
                 label: "Modules",
                 tooltip:
                   "Number of all exam modules performed including Level Test",
@@ -264,7 +269,7 @@ export default function Stats({ user, entities, isAdmin }: Props) {
                 icon: (
                   <BsStar className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />
                 ),
-                value: `${stats.length > 0 ? averageScore(stats) : 0}%`,
+                value: `${averageScore.toFixed(2) || 0}%`,
                 label: "Average Score",
                 tooltip: "Average success rate for questions responded",
               },
@@ -888,7 +893,7 @@ export default function Stats({ user, entities, isAdmin }: Props) {
               <span className="font-semibold ml-1">No stats to display...</span>
             </section>
           )}
-        </Layout>
+        </>
       )}
     </>
   );
diff --git a/src/pages/tickets.tsx b/src/pages/tickets.tsx
index 21f2a6cc..0e8f30be 100644
--- a/src/pages/tickets.tsx
+++ b/src/pages/tickets.tsx
@@ -1,4 +1,3 @@
-import Layout from "@/components/High/Layout";
 import TicketDisplay from "@/components/High/TicketDisplay";
 import Select from "@/components/Low/Select";
 import Modal from "@/components/Modal";
@@ -228,7 +227,7 @@ export default function Tickets() {
 			</Head>
 			<ToastContainer />
 			{user && (
-				<Layout user={user} className="gap-6">
+				<>
 					<h1 className="text-2xl font-semibold">Tickets</h1>
 
 					<div className="flex w-full items-center gap-4">
@@ -317,7 +316,7 @@ export default function Tickets() {
 							))}
 						</tbody>
 					</table>
-				</Layout>
+				</>
 			)}
 		</>
 	);
diff --git a/src/pages/training/[id]/index.tsx b/src/pages/training/[id]/index.tsx
index 10468da5..4e6b2b63 100644
--- a/src/pages/training/[id]/index.tsx
+++ b/src/pages/training/[id]/index.tsx
@@ -13,7 +13,6 @@ import { ITrainingContent, ITrainingTip } from "@/training/TrainingInterfaces";
 import formatTip from "@/training/FormatTip";
 import { Stat, User } from "@/interfaces/user";
 import Head from "next/head";
-import Layout from "@/components/High/Layout";
 import { ToastContainer } from "react-toastify";
 import { withIronSessionSsr } from "iron-session/next";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
@@ -149,7 +148,7 @@ const TrainingContent: React.FC<{ user: User }> = ({ user }) => {
 			</Head>
 			<ToastContainer />
 
-			<Layout user={user}>
+			<>
 				{loading ? (
 					<div className="absolute left-1/2 top-1/2 flex h-fit w-fit -translate-x-1/2 -translate-y-1/2 animate-pulse flex-col items-center gap-12">
 						<span className="loading loading-infinity w-32 bg-mti-green-light" />
@@ -343,7 +342,7 @@ const TrainingContent: React.FC<{ user: User }> = ({ user }) => {
 						</div>
 					)
 				)}
-			</Layout>
+			</>
 		</>
 	);
 };
diff --git a/src/pages/training/index.tsx b/src/pages/training/index.tsx
index df6cdf41..0cab1ff3 100644
--- a/src/pages/training/index.tsx
+++ b/src/pages/training/index.tsx
@@ -4,7 +4,6 @@ import {withIronSessionSsr} from "iron-session/next";
 import {sessionOptions} from "@/lib/session";
 import {User} from "@/interfaces/user";
 import {ToastContainer} from "react-toastify";
-import Layout from "@/components/High/Layout";
 import {shouldRedirectHome} from "@/utils/navigation.disabled";
 import {useEffect, useState} from "react";
 import clsx from "clsx";
@@ -22,10 +21,8 @@ import RecordFilter from "@/components/Medium/RecordFilter";
 import useFilterRecordsByUser from "@/hooks/useFilterRecordsByUser";
 import { mapBy, redirect, serialize } from "@/utils";
 import { getEntitiesWithRoles } from "@/utils/entities.be";
-import { getAssignmentsByAssignee } from "@/utils/assignments.be";
 import { getEntitiesUsers } from "@/utils/users.be";
 import { EntityWithRoles } from "@/interfaces/entity";
-import { Assignment } from "@/interfaces/results";
 import { requestUser } from "@/utils/api";
 
 export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
@@ -179,7 +176,7 @@ const Training: React.FC<{user: User, entities: EntityWithRoles[], users: User[]
 			</Head>
 			<ToastContainer />
 
-			<Layout user={user}>
+			<>
 				{isNewContentLoading || areRecordsLoading ? (
 					<div className="absolute left-1/2 top-1/2 flex h-fit w-fit -translate-x-1/2 -translate-y-1/2 animate-pulse flex-col items-center gap-12">
 						<span className="loading loading-infinity w-32 bg-mti-green-light" />
@@ -220,7 +217,7 @@ const Training: React.FC<{user: User, entities: EntityWithRoles[], users: User[]
 						)}
 					</>
 				)}
-			</Layout>
+			</>
 		</>
 	);
 };
diff --git a/src/pages/users/index.tsx b/src/pages/users/index.tsx
index bbf73b40..085b51ec 100644
--- a/src/pages/users/index.tsx
+++ b/src/pages/users/index.tsx
@@ -1,6 +1,4 @@
-import Layout from "@/components/High/Layout";
-import useUser from "@/hooks/useUser";
-import useUsers from "@/hooks/useUsers";
+
 import { Type, User } from "@/interfaces/user";
 import {sessionOptions} from "@/lib/session";
 import useFilterStore from "@/stores/listFilterStore";
@@ -10,8 +8,7 @@ import { shouldRedirectHome } from "@/utils/navigation.disabled";
 import {withIronSessionSsr} from "iron-session/next";
 import Head from "next/head";
 import {useRouter} from "next/router";
-import {useEffect} from "react";
-import {BsArrowLeft, BsChevronLeft} from "react-icons/bs";
+import { BsChevronLeft} from "react-icons/bs";
 import {ToastContainer} from "react-toastify";
 import UserList from "../(admin)/Lists/UserList";
 
@@ -51,7 +48,7 @@ export default function UsersListPage({ user, type }: Props) {
 			</Head>
 			<ToastContainer />
 
-				<Layout user={user}>
+				<>
 					<UserList
 						user={user}
 						type={type}
@@ -70,7 +67,7 @@ export default function UsersListPage({ user, type }: Props) {
 							</div>
 						)}
 					/>
-				</Layout>
+				</>
 		</>
 	);
 }
diff --git a/src/pages/users/performance.tsx b/src/pages/users/performance.tsx
index 4653c959..d2816f96 100644
--- a/src/pages/users/performance.tsx
+++ b/src/pages/users/performance.tsx
@@ -1,27 +1,22 @@
 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 {  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, findAllowedEntities } from "@/utils/permissions";
-import { getEntities, getEntitiesWithRoles } from "@/utils/entities.be";
+import {  getEntitiesWithRoles } from "@/utils/entities.be";
 import { Entity } from "@/interfaces/entity";
-import { getParticipantGroups, getParticipantsGroups } from "@/utils/groups.be";
+import {  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";
 import { requestUser } from "@/utils/api";
 import { redirect } from "@/utils";
 
-export const getServerSideProps = withIronSessionSsr(async ({ req, res, query }) => {
+export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
 	const user = await requestUser(req, res)
 	if (!user) return redirect("/login")
 
@@ -74,7 +69,7 @@ const StudentPerformance = ({ user, students, entities, groups }: Props) => {
 			</Head>
 			<ToastContainer />
 
-			<Layout user={user}>
+			<>
 				<div className="flex items-center gap-2">
 					<button
 						onClick={() => {
@@ -86,7 +81,7 @@ const StudentPerformance = ({ user, students, entities, groups }: Props) => {
 					<h2 className="font-bold text-2xl">Student Performance ({students.length})</h2>
 				</div>
 				<StudentPerformanceList items={performanceStudents} stats={stats} />
-			</Layout>
+			</>
 		</>
 	);
 };
diff --git a/src/utils/api.ts b/src/utils/api.ts
index ef805baa..b9cd4fca 100644
--- a/src/utils/api.ts
+++ b/src/utils/api.ts
@@ -1,6 +1,5 @@
 import { User } from "@/interfaces/user";
 import { IncomingMessage, ServerResponse } from "http";
-import { IronSession } from "iron-session";
 import { NextApiRequest, NextApiResponse } from "next";
 import { getUser } from "./users.be";
 
diff --git a/src/utils/assignments.be.ts b/src/utils/assignments.be.ts
index fd8faed9..a61f3bb9 100644
--- a/src/utils/assignments.be.ts
+++ b/src/utils/assignments.be.ts
@@ -27,13 +27,72 @@ export const getAssignment = async (id: string) => {
 	return await db.collection("assignments").findOne<Assignment>({ id });
 };
 
-export const getAssignmentsByAssignee = async (id: string, filter?: { [key in keyof Partial<Assignment>]: any }) => {
-	return await db
-		.collection("assignments")
-		.find<Assignment>({ assignees: id, ...(!filter ? {} : filter) })
+export const getAssignmentsByAssignee = async (id: string, filter?: {}, projection?: {}, sort?: {}) => {
+	return await db.collection("assignments")
+		.aggregate([
+			{ $match: { assignees: id, ...(!filter ? {} : filter) } },
+			...(sort ? [{ $sort: sort }] : []),
+			...(projection ? [{ $project: projection }] : []),
+		])
 		.toArray();
 };
 
+export const getAssignmentsForStudent = async (id: string, currentDate: string) => {
+	return await db.collection("assignments")
+		.aggregate([{
+			$match: {
+				assignees: id, archived: { $ne: true },
+				endDate: { $gte: currentDate },
+				$or: [
+					{ autoStart: true, startDate: { $lt: currentDate } },
+					{ start: true },
+				],
+			}
+		},
+		{ $sort: { startDate: 1 } },
+		{
+			$project: {
+				id: 1,
+				name: 1,
+				startDate: 1,
+				endDate: 1,
+				exams: {
+					$sortArray: {
+						input: {
+							$filter: {
+								input: "$exams",
+								as: "exam",
+								cond: { $eq: ["$$exam.assignee", id] },
+							},
+						},
+						sortBy: { module: 1 },
+					},
+				},
+				hasResults: {
+					$cond: {
+						if: {
+							$gt: [
+								{
+									$size: {
+										$filter: {
+											input: "$results",
+											as: "result",
+											cond: { $eq: ["$$result.userId", id] },
+										},
+									},
+								},
+								0,
+							],
+						},
+						then: true,
+						else: false,
+					},
+				}
+			}
+		}
+		]).toArray()
+};
+
 export const getAssignmentsByAssignerBetweenDates = async (id: string, startDate: Date, endDate: Date) => {
 	return await db.collection("assignments").find<Assignment>({ assigner: id }).toArray();
 };
diff --git a/src/utils/entities.be.ts b/src/utils/entities.be.ts
index 7df2d620..8612c09c 100644
--- a/src/utils/entities.be.ts
+++ b/src/utils/entities.be.ts
@@ -32,7 +32,7 @@ export const getEntitiesWithRoles = async (ids?: string[]): Promise<EntityWithRo
 export const getEntities = async (ids?: string[], projection = {}) => {
 	return await db
 		.collection("entities")
-		.find<Entity>(ids ? { id: { $in: ids } } : {}, projection)
+		.find<Entity>(ids ? { id: { $in: ids } } : {}, { projection })
 		.toArray();
 };
 
diff --git a/src/utils/grading.be.ts b/src/utils/grading.be.ts
index cffad61c..a1b95ff2 100644
--- a/src/utils/grading.be.ts
+++ b/src/utils/grading.be.ts
@@ -1,13 +1,13 @@
 import { CEFR_STEPS } from "@/resources/grading";
-import { getUserCorporate } from "@/utils/groups.be";
-import { User } from "@/interfaces/user";
 import { Grading } from "@/interfaces";
 import client from "@/lib/mongodb";
 
 const db = client.db(process.env.MONGODB_DB);
 
-export const getGradingSystemByEntity = async (id: string) =>
-	(await db.collection("grading").findOne<Grading>({ entity: id })) || { steps: CEFR_STEPS, entity: "" };
+export const getGradingSystemByEntity = async (id: string, projection?: {}) =>
+	(await db.collection("grading").findOne<Grading>({ entity: id }, {
+		projection: projection,
+	})) || { steps: CEFR_STEPS, entity: "" };
 
 export const getGradingSystemByEntities = async (ids: string[]) =>
 	await db.collection("grading").find<Grading>({ entity: { $in: ids } }).toArray();
diff --git a/src/utils/groups.be.ts b/src/utils/groups.be.ts
index fcfd3e67..be139bd8 100644
--- a/src/utils/groups.be.ts
+++ b/src/utils/groups.be.ts
@@ -82,8 +82,8 @@ export const getGroups = async (): Promise<WithEntity<Group>[]> => {
 		.aggregate<WithEntity<Group>>(addEntityToGroupPipeline).toArray()
 };
 
-export const getParticipantGroups = async (id: string) => {
-	return await db.collection("groups").find<Group>({ participants: id }).toArray();
+export const getParticipantGroups = async (id: string, projection?: {}) => {
+	return await db.collection("groups").find<Group>({ participants: id }, { projection: projection }).toArray();
 };
 
 export const getParticipantsGroups = async (ids: string[]) => {
diff --git a/src/utils/permissions.ts b/src/utils/permissions.ts
index 15aa15e2..14223391 100644
--- a/src/utils/permissions.ts
+++ b/src/utils/permissions.ts
@@ -36,6 +36,43 @@ export function checkAccess(user: User, types: Type[], permissions?: PermissionT
 	return true;
 }
 
+export function groupAllowedEntitiesByPermissions(
+	user: User,
+	entities: EntityWithRoles[],
+	permissions: RolePermission[]
+): { [key: string]: EntityWithRoles[] } {
+	if (["admin", "developer"].includes(user?.type)) {
+		return permissions.reduce((acc, permission) => {
+			acc[permission] = entities;
+			return acc;
+		}, {} as { [key: string]: EntityWithRoles[] });
+	}
+
+	const userEntityMap = new Map(user.entities.map(e => [e.id, e]));
+	const roleCache = new Map<string, Role | null>();
+
+	return entities.reduce((acc, entity) => {
+		const userEntity = userEntityMap.get(entity.id);
+		const role = userEntity
+			? roleCache.get(userEntity.role) ??
+			  (() => {
+				  const foundRole = entity.roles.find(r => r.id === userEntity.role) || null;
+				  roleCache.set(userEntity.role, foundRole);
+				  return foundRole;
+			  })()
+			: null;
+
+		permissions.forEach(permission => {
+			if (!acc[permission]) acc[permission] = [];
+			if (role && role.permissions.includes(permission)) {
+				acc[permission].push(entity);
+			}
+		});
+
+		return acc;
+	}, {} as { [key: string]: EntityWithRoles[] });
+}
+
 export function findAllowedEntities(user: User, entities: EntityWithRoles[], permission: RolePermission) {
 	if (["admin", "developer"].includes(user?.type)) return entities
 
@@ -52,7 +89,6 @@ export function findAllowedEntitiesSomePermissions(user: User, entities: EntityW
 
 export function doesEntityAllow(user: User, entity: EntityWithRoles, permission: RolePermission) {
 	if (isAdmin(user)) return true
-
 	const userEntity = findBy(user.entities, 'id', entity?.id)
 	if (!userEntity) return false
 
diff --git a/src/utils/stats.be.ts b/src/utils/stats.be.ts
index 4abc852e..84a5147e 100644
--- a/src/utils/stats.be.ts
+++ b/src/utils/stats.be.ts
@@ -1,12 +1,140 @@
-import {Stat} from "@/interfaces/user";
+import { Stat } from "@/interfaces/user";
 import client from "@/lib/mongodb";
 
 const db = client.db(process.env.MONGODB_DB);
 
-export const getStatsByUser = async (id: string) => await db.collection("stats").find<Stat>({user: id}).toArray();
+export const getStatsByUser = async (id: string) => await db.collection("stats").find<Stat>({ user: id }).toArray();
 
 export const getStatsByUsers = async (ids: string[]) =>
 	await db
 		.collection("stats")
-		.find<Stat>({user: {$in: ids}})
+		.find<Stat>({ user: { $in: ids } })
 		.toArray();
+
+export const getDetailedStatsByUser = async (id: string, query?: string) => {
+	let aggregateArray: any[] = [
+		{ $match: { user: id } },
+		{ $sort: { "date": 1 } },
+	]
+	switch (query) {
+		case "stats":
+			{
+				aggregateArray = aggregateArray.concat([{
+					$group: {
+						_id: "$session",
+						modules: { $addToSet: "$module" },
+						documents: { $push: "$$ROOT" },
+						totalCorrect: { $sum: "$score.correct" },
+						totalQuestions: { $sum: "$score.total" }
+					}
+				},
+				{
+					$project: {
+						_id: 0,
+						hasAllModules: {
+							$eq: [
+								{ $size: { $setIntersection: ["$modules", ["reading", "listening", "writing", "speaking"]] } },
+								4
+							]
+						},
+						uniqueModulesCount: { $size: "$modules" },
+						averageScore: {
+							$cond: [
+								{ $gt: ["$totalQuestions", 0] },
+								{ $multiply: [{ $divide: ["$totalCorrect", "$totalQuestions"] }, 100] },
+								0
+							]
+						},
+						documents: 1
+					}
+				},
+				{
+					$group: {
+						_id: null,
+						fullExams: { $sum: { $cond: ["$hasAllModules", 1, 0] } },
+						uniqueModules: { $sum: "$uniqueModulesCount" },
+						averageScore: {
+							$avg: "$averageScore"
+						},
+						allStats: { $push: "$documents" }
+					}
+				},
+				{
+					$project: {
+						_id: 0,
+						fullExams: 1,
+						uniqueModules: 1,
+						averageScore: 1,
+						allStats: {
+							$reduce: {
+								input: "$allStats",
+								initialValue: [],
+								in: { $concatArrays: ["$$value", "$$this"] }
+							}
+						}
+					}
+				}])
+			}
+			break;
+		case "byModule": {
+			aggregateArray = aggregateArray.concat([{
+				$facet: {
+					moduleCounts: [
+						{
+							$group: {
+								_id: {
+									module: "$module",
+									session: "$session"
+								}
+							}
+						},
+						{
+							$group: {
+								_id: "$_id.module",
+								count: {
+									$count: {}
+								}
+							}
+						},
+						{
+							$project: {
+								_id: 0,
+								module: "$_id",
+								count: "$count"
+							}
+						}
+					],
+					allDocuments: [
+						{
+							$project: {
+								_id: 0
+							}
+						}
+					]
+				}
+			},
+			{
+				$project: {
+					moduleCount: {
+						$arrayToObject: {
+							$map: {
+								input: "$moduleCounts",
+								as: "module",
+								in: {
+									k: "$$module.module",
+									v: "$$module.count"
+								}
+							}
+						}
+					},
+					allDocs: "$allDocuments"
+				}
+			}])
+
+		}
+		default:
+	}
+
+	return await db.collection("stats").aggregate(aggregateArray).toArray().then((result) => query ? result[0] : result
+	);
+}
diff --git a/src/utils/users.be.ts b/src/utils/users.be.ts
index 7636a89a..519d1edb 100644
--- a/src/utils/users.be.ts
+++ b/src/utils/users.be.ts
@@ -6,7 +6,7 @@ import client from "@/lib/mongodb";
 import { EntityWithRoles, WithEntities } from "@/interfaces/entity";
 import { getEntity } from "./entities.be";
 import { getRole } from "./roles.be";
-import { findAllowedEntities } from "./permissions";
+import { findAllowedEntities, groupAllowedEntitiesByPermissions } from "./permissions";
 import { mapBy } from ".";
 
 const db = client.db(process.env.MONGODB_DB);
@@ -38,7 +38,7 @@ export async function searchUsers(searchInput?: string, limit = 50, page = 0, so
 
 		}
 	}
-	
+
 	const [{ users, totalUsers }] = await db
 		.collection("users").aggregate([
 			{
@@ -75,6 +75,39 @@ export async function countUsers(filter?: object) {
 		.countDocuments(filter || {})
 }
 
+export async function countUsersByTypes(types: Type[]) {
+	return await db
+		.collection("users")
+		.aggregate([
+			{
+				$match: {
+					type: { $in: types } // Filter only specified types
+				}
+			},
+			{
+				$group: {
+					_id: "$type",
+					count: { $sum: 1 } // Count documents in each group
+				}
+			},
+			{
+				$group: {
+					_id: null,
+					counts: {
+						$push: { k: "$_id", v: "$count" } // Convert to key-value pairs
+					}
+				}
+			},
+			{
+				$project: {
+					_id: 0,
+					result: { $arrayToObject: "$counts" } // Convert key-value pairs to an object
+				}
+			}
+		]).toArray().then(([{ result }]) => result);
+
+}
+
 export async function getUserWithEntity(id: string): Promise<WithEntities<User> | undefined> {
 	const user = await db.collection("users").findOne<User>({ id: id }, { projection: { _id: 0 } });
 	if (!user) return undefined;
@@ -91,8 +124,8 @@ export async function getUserWithEntity(id: string): Promise<WithEntities<User>
 	return { ...user, entities };
 }
 
-export async function getUser(id: string): Promise<User | undefined> {
-	const user = await db.collection("users").findOne<User>({ id: id }, { projection: { _id: 0 } });
+export async function getUser(id: string, projection = {}): Promise<User | undefined> {
+	const user = await db.collection("users").findOne<User>({ id: id }, { projection: { _id: 0, ...projection } });
 	return !!user ? user : undefined;
 }
 
@@ -120,7 +153,7 @@ export async function countEntityUsers(id: string, filter?: object) {
 export async function getEntitiesUsers(ids: string[], filter?: object, limit?: number, projection = {}) {
 	return await db
 		.collection("users")
-		.find<User>({ "entities.id": { $in: ids }, ...(filter || {}) }, projection)
+		.find<User>({ "entities.id": { $in: ids }, ...(filter || {}) }, { projection })
 		.limit(limit || 0)
 		.toArray();
 }
@@ -199,29 +232,45 @@ export async function getUserBalance(user: User) {
 }
 
 export const filterAllowedUsers = async (user: User, entities: EntityWithRoles[]) => {
-	const studentsAllowedEntities = findAllowedEntities(user, entities, 'view_students')
-	const teachersAllowedEntities = findAllowedEntities(user, entities, 'view_teachers')
-	const corporateAllowedEntities = findAllowedEntities(user, entities, 'view_corporates')
-	const masterCorporateAllowedEntities = findAllowedEntities(user, entities, 'view_mastercorporates')
+	
+	const {
+		["view_students"]: allowedStudentEntities,
+		["view_teachers"]: allowedTeacherEntities,
+		["view_corporates"]: allowedCorporateEntities,
+		["view_mastercorporates"]: allowedMasterCorporateEntities,
+	} = groupAllowedEntitiesByPermissions(user, entities, [
+		"view_students",
+		"view_teachers",
+		'view_corporates',
+		'view_mastercorporates',
+	]);
 
-	const students = await getEntitiesUsers(mapBy(studentsAllowedEntities, 'id'), { type: "student" })
-	const teachers = await getEntitiesUsers(mapBy(teachersAllowedEntities, 'id'), { type: "teacher" })
-	const corporates = await getEntitiesUsers(mapBy(corporateAllowedEntities, 'id'), { type: "corporate" })
-	const masterCorporates = await getEntitiesUsers(mapBy(masterCorporateAllowedEntities, 'id'), { type: "mastercorporate" })
+
+	const students = await getEntitiesUsers(mapBy(allowedStudentEntities, 'id'), { type: "student" })
+	const teachers = await getEntitiesUsers(mapBy(allowedTeacherEntities, 'id'), { type: "teacher" })
+	const corporates = await getEntitiesUsers(mapBy(allowedCorporateEntities, 'id'), { type: "corporate" })
+	const masterCorporates = await getEntitiesUsers(mapBy(allowedMasterCorporateEntities, 'id'), { type: "mastercorporate" })
 
 	return [...students, ...teachers, ...corporates, ...masterCorporates]
 }
 
 export const countAllowedUsers = async (user: User, entities: EntityWithRoles[]) => {
-	const studentsAllowedEntities = findAllowedEntities(user, entities, 'view_students')
-	const teachersAllowedEntities = findAllowedEntities(user, entities, 'view_teachers')
-	const corporateAllowedEntities = findAllowedEntities(user, entities, 'view_corporates')
-	const masterCorporateAllowedEntities = findAllowedEntities(user, entities, 'view_mastercorporates')
+	const {
+		["view_students"]: allowedStudentEntities,
+		["view_teachers"]: allowedTeacherEntities,
+		["view_corporates"]: allowedCorporateEntities,
+		["view_mastercorporates"]: allowedMasterCorporateEntities,
+	} = groupAllowedEntitiesByPermissions(user, entities, [
+		"view_students",
+		"view_teachers",
+		'view_corporates',
+		'view_mastercorporates',
+	]);
 
-	const student = await countEntitiesUsers(mapBy(studentsAllowedEntities, 'id'), { type: "student" })
-	const teacher = await countEntitiesUsers(mapBy(teachersAllowedEntities, 'id'), { type: "teacher" })
-	const corporate = await countEntitiesUsers(mapBy(corporateAllowedEntities, 'id'), { type: "corporate" })
-	const mastercorporate = await countEntitiesUsers(mapBy(masterCorporateAllowedEntities, 'id'), { type: "mastercorporate" })
+	const student = await countEntitiesUsers(mapBy(allowedStudentEntities, 'id'), { type: "student" })
+	const teacher = await countEntitiesUsers(mapBy(allowedTeacherEntities, 'id'), { type: "teacher" })
+	const corporate = await countEntitiesUsers(mapBy(allowedCorporateEntities, 'id'), { type: "corporate" })
+	const mastercorporate = await countEntitiesUsers(mapBy(allowedMasterCorporateEntities, 'id'), { type: "mastercorporate" })
 
 	return { student, teacher, corporate, mastercorporate }
 }

From 73610dc273192c8581f71b5659e2eaacf33aaff3 Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Sat, 25 Jan 2025 19:45:39 +0000
Subject: [PATCH 28/69] implement edit workflow

---
 src/demo/approval_workflows.json              |   2 +
 src/pages/approval-workflows/[id]/edit.tsx    | 153 ++++++++++++++++++
 .../{[id].tsx => [id]/index.tsx}              |   2 +-
 src/pages/approval-workflows/create.tsx       |   4 +-
 src/pages/approval-workflows/index.tsx        |  23 ++-
 5 files changed, 175 insertions(+), 9 deletions(-)
 create mode 100644 src/pages/approval-workflows/[id]/edit.tsx
 rename src/pages/approval-workflows/{[id].tsx => [id]/index.tsx} (99%)

diff --git a/src/demo/approval_workflows.json b/src/demo/approval_workflows.json
index a27cf88d..7a804c8d 100644
--- a/src/demo/approval_workflows.json
+++ b/src/demo/approval_workflows.json
@@ -63,6 +63,7 @@
                 "stepType": "approval-by",
                 "stepNumber": 5,
                 "completed": false,
+                "finalStep": true,
                 "assignees": [
                     "fd5fce42-4bcc-4150-a143-b484e750b265",
                     "231c84b2-a65a-49a9-803c-c664d84b13e0",
@@ -145,6 +146,7 @@
                 "completed": true,
                 "completedBy": "c5fc1514-1a94-4f8c-a046-a62099097a50",
                 "completedDate": 1737712243906,
+                "finalStep": true,
                 "assignees": [
                     "fd5fce42-4bcc-4150-a143-b484e750b265",
                     "231c84b2-a65a-49a9-803c-c664d84b13e0",
diff --git a/src/pages/approval-workflows/[id]/edit.tsx b/src/pages/approval-workflows/[id]/edit.tsx
new file mode 100644
index 00000000..bae9fb09
--- /dev/null
+++ b/src/pages/approval-workflows/[id]/edit.tsx
@@ -0,0 +1,153 @@
+import RequestedBy from "@/components/ApprovalWorkflows/RequestedBy";
+import StartedOn from "@/components/ApprovalWorkflows/StartedOn";
+import Status from "@/components/ApprovalWorkflows/Status";
+import WorkflowForm from "@/components/ApprovalWorkflows/WorkflowForm";
+import Layout from "@/components/High/Layout";
+import { ApprovalWorkflow, EditableApprovalWorkflow, EditableWorkflowStep, getUserTypeLabelShort } from "@/interfaces/approval.workflow";
+import { CorporateUser, TeacherUser, User } from "@/interfaces/user";
+import { sessionOptions } from "@/lib/session";
+import { redirect, serialize } from "@/utils";
+import { requestUser } from "@/utils/api";
+import { shouldRedirectHome } from "@/utils/navigation.disabled";
+import { getEntityUsers } from "@/utils/users.be";
+import { motion } from "framer-motion";
+import { withIronSessionSsr } from "iron-session/next";
+import Head from "next/head";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { BsChevronLeft } from "react-icons/bs";
+import { ToastContainer } from "react-toastify";
+import approvalWorkflowsData from '../../../demo/approval_workflows.json'; // to test locally
+
+export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => {
+    const user = await requestUser(req, res);
+    if (!user) return redirect("/login")
+
+    if (shouldRedirectHome(user) || !["admin", "developer", "teacher", "corporate", "mastercorporate"].includes(user.type))
+        return redirect("/")
+
+    const { id } = params as { id: string };
+
+    // replace later with await getApprovalWorkflow(id).
+    const approvalWorkflowsDataAsWorkflows = approvalWorkflowsData as ApprovalWorkflow[];
+    const workflow: ApprovalWorkflow | undefined = approvalWorkflowsDataAsWorkflows.find(workflow => workflow.id === id);
+
+    if (!workflow)
+        return redirect("/approval-workflows")
+
+    return {
+        props: serialize({
+            user,
+            workflow,
+            workflowEntityTeachers: await getEntityUsers(workflow.entityId, undefined, { type: "teacher" }),
+            workflowEntityCorporates: await getEntityUsers(workflow.entityId, undefined, { type: "corporate" }),
+        }),
+    };
+}, sessionOptions);
+
+interface Props {
+    user: User,
+    workflow: ApprovalWorkflow,
+    workflowEntityTeachers: TeacherUser[],
+    workflowEntityCorporates: CorporateUser[],
+}
+
+export default function Home({ user, workflow, workflowEntityTeachers, workflowEntityCorporates }: Props) {
+    const [updatedWorkflow, setUpdatedWorkflow] = useState<EditableApprovalWorkflow | null>(null);
+
+    useEffect(() => {
+        const editableSteps: EditableWorkflowStep[] = workflow.steps.map(step => ({
+            key: step.stepNumber + 999, // just making sure they are unique because new steps that users add will have key=3 key=4 etc
+            stepType: step.stepType,
+            stepNumber: step.stepNumber,
+            assignees: step.assignees.map(id => id),
+            firstStep: step.firstStep || false,
+            finalStep: step.finalStep || false,
+            onDelete: undefined,
+        }));
+
+        const editableWorkflow: EditableApprovalWorkflow = {
+            id: workflow.id,
+            name: workflow.name,
+            entityId: workflow.entityId,
+            requester: user.id, // should it change to the editor?
+            startDate: workflow.startDate,
+            modules: workflow.modules,
+            status: workflow.status,
+            steps: editableSteps,
+        };
+
+        setUpdatedWorkflow(editableWorkflow);
+    }, []);
+
+    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        console.log("Form submitted! Values:", updatedWorkflow);
+    };
+
+    const onWorkflowChange = (wf: EditableApprovalWorkflow) => {
+        setUpdatedWorkflow(wf);
+    }
+
+    return (
+        <>
+            <Head>
+                <title> Edit Workflow | 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 />
+            {user && (
+                <Layout user={user} className="gap-6">
+                    <section className="flex items-center gap-2">
+                        <Link
+                            href="/approval-workflows"
+                            className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
+                            <BsChevronLeft />
+                        </Link>
+                        <h1 className="text-2xl font-semibold">{workflow.name}</h1>
+                    </section>
+
+                    <section className="flex flex-col gap-6">
+                        <div className="flex flex-row gap-6">
+                            <RequestedBy
+                                prefix={getUserTypeLabelShort(user.type)}
+                                name={user.name}
+                                profileImage="/blue-stock-photo.png" //{user.profilePicture}
+                            />
+                            <StartedOn
+                                date={workflow.startDate}
+                            />
+                            <Status
+                                status={workflow.status}
+                            />
+                        </div>
+                    </section>
+
+                    <form onSubmit={handleSubmit}>
+                        <motion.div
+                            key="form"
+                            initial={{ opacity: 0, y: -30 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            exit={{ opacity: 0, x: 60 }}
+                            transition={{ duration: 0.20 }}
+                        >
+                            {updatedWorkflow &&
+                                <WorkflowForm
+                                    workflow={updatedWorkflow}
+                                    onWorkflowChange={onWorkflowChange}
+                                    entityTeachers={workflowEntityTeachers}
+                                    entityCorporates={workflowEntityCorporates}
+                                />
+                            }
+                        </motion.div>
+                    </form>
+                </Layout>
+            )}
+        </>
+    );
+}
diff --git a/src/pages/approval-workflows/[id].tsx b/src/pages/approval-workflows/[id]/index.tsx
similarity index 99%
rename from src/pages/approval-workflows/[id].tsx
rename to src/pages/approval-workflows/[id]/index.tsx
index b9c39671..86ea893d 100644
--- a/src/pages/approval-workflows/[id].tsx
+++ b/src/pages/approval-workflows/[id]/index.tsx
@@ -21,7 +21,7 @@ import { MdOutlineDoubleArrow } from "react-icons/md";
 import { RiThumbUpLine } from "react-icons/ri";
 import { ToastContainer } from "react-toastify";
 
-import approvalWorkflowsData from '../../demo/approval_workflows.json'; // to test locally
+import approvalWorkflowsData from '../../../demo/approval_workflows.json'; // to test locally
 import Tip from "@/components/ApprovalWorkflows/Tip";
 import { AnimatePresence, LayoutGroup, motion } from "framer-motion";
 
diff --git a/src/pages/approval-workflows/create.tsx b/src/pages/approval-workflows/create.tsx
index b7688157..2047ab8e 100644
--- a/src/pages/approval-workflows/create.tsx
+++ b/src/pages/approval-workflows/create.tsx
@@ -102,8 +102,8 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
             startDate: Date.now(),
             status: "pending",
             steps: [
-                { key: Date.now(), stepType: "form-intake", stepNumber: 1, firstStep: true, finalStep: false, assignees: [null] },
-                { key: Date.now() + 1, stepType: "approval-by", stepNumber: 2, firstStep: false, finalStep: true, assignees: [null] },
+                { key: 9998, stepType: "form-intake", stepNumber: 1, firstStep: true, finalStep: false, assignees: [null] },
+                { key: 9999, stepType: "approval-by", stepNumber: 2, firstStep: false, finalStep: true, assignees: [null] },
             ],
         };
         setWorkflows((prev) => [...prev, newWorkflow]);
diff --git a/src/pages/approval-workflows/index.tsx b/src/pages/approval-workflows/index.tsx
index d909c3b8..0c4ae873 100644
--- a/src/pages/approval-workflows/index.tsx
+++ b/src/pages/approval-workflows/index.tsx
@@ -242,15 +242,15 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
                 );
             },
         }),
-        {
+        columnHelper.accessor("steps", {
             header: "ACTIONS",
             id: "actions",
-            cell: ({ row }: { row: { original: ApprovalWorkflow } }) => {
+            cell: ({ row }) => {
+                const steps = row.original.steps;
+                const currentStep = steps.find((step) => !step.completed);
+
                 return (
                     <div className="flex gap-4">
-                        <Link onClick={(e) => e.stopPropagation()} data-tip="Edit" href={`/approval-workflows/${row.original.id}/edit`} className="cursor-pointer tooltip">
-                            <FaRegEdit className="hover:text-mti-purple-light transition ease-in-out duration-300" />
-                        </Link>
                         <button
                             data-tip="Delete"
                             className="cursor-pointer tooltip"
@@ -261,10 +261,21 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
                         >
                             <BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
                         </button>
+
+                        {currentStep && (
+                            <Link
+                                onClick={(e) => e.stopPropagation()}
+                                data-tip="Edit"
+                                href={`/approval-workflows/${row.original.id}/edit`}
+                                className="cursor-pointer tooltip"
+                            >
+                                <FaRegEdit className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+                            </Link>
+                        )}
                     </div>
                 );
             },
-        },
+        })
     ];
 
     const table = useReactTable({

From ab81a1753d167283c0b1d5cc5798d8a29f23949a Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Sun, 26 Jan 2025 04:31:36 +0000
Subject: [PATCH 29/69] - Implement cloning of workflow - Entity change will
 now only clear the assignees instead of the whole workflow - Fix bug where
 side panel was showing all workflow assignees instead of just selected step
 assignees

---
 src/demo/approval_workflows.json            |  69 +++++-
 src/pages/approval-workflows/[id]/clone.tsx | 260 ++++++++++++++++++++
 src/pages/approval-workflows/[id]/index.tsx |   2 +-
 src/pages/approval-workflows/create.tsx     |  36 +--
 src/pages/approval-workflows/index.tsx      |  16 +-
 5 files changed, 349 insertions(+), 34 deletions(-)
 create mode 100644 src/pages/approval-workflows/[id]/clone.tsx

diff --git a/src/demo/approval_workflows.json b/src/demo/approval_workflows.json
index 7a804c8d..3f8c03e7 100644
--- a/src/demo/approval_workflows.json
+++ b/src/demo/approval_workflows.json
@@ -17,6 +17,7 @@
                 "completed": true,
                 "completedBy": "231c84b2-a65a-49a9-803c-c664d84b13e0",
                 "completedDate": 1737712243906,
+                "firstStep": true,
                 "assignees": [
                     "fd5fce42-4bcc-4150-a143-b484e750b265",
                     "231c84b2-a65a-49a9-803c-c664d84b13e0",
@@ -28,11 +29,11 @@
                 "stepType": "approval-by",
                 "stepNumber": 2,
                 "completed": true,
-                "completedBy": "c5fc1514-1a94-4f8c-a046-a62099097a50",
+                "completedBy": "rTh9yz6Z1WOidHlVOSGInlpoxrk1",
                 "completedDate": 1737712243906,
                 "assignees": [
                     "fd5fce42-4bcc-4150-a143-b484e750b265",
-                    "231c84b2-a65a-49a9-803c-c664d84b13e0",
+                    "rTh9yz6Z1WOidHlVOSGInlpoxrk1",
                     "c5fc1514-1a94-4f8c-a046-a62099097a50"
                 ],
                 "comments": "This is a random comment"
@@ -53,9 +54,7 @@
                 "stepNumber": 4,
                 "completed": false,
                 "assignees": [
-                    "fd5fce42-4bcc-4150-a143-b484e750b265",
-                    "231c84b2-a65a-49a9-803c-c664d84b13e0",
-                    "c5fc1514-1a94-4f8c-a046-a62099097a50"
+                    "fd5fce42-4bcc-4150-a143-b484e750b265"
                 ],
                 "comments": "This is a random comment"
             },
@@ -65,8 +64,7 @@
                 "completed": false,
                 "finalStep": true,
                 "assignees": [
-                    "fd5fce42-4bcc-4150-a143-b484e750b265",
-                    "231c84b2-a65a-49a9-803c-c664d84b13e0",
+                    "rTh9yz6Z1WOidHlVOSGInlpoxrk1",
                     "c5fc1514-1a94-4f8c-a046-a62099097a50"
                 ],
                 "comments": "This is a random comment"
@@ -94,6 +92,7 @@
                 "completed": true,
                 "completedBy": "fd5fce42-4bcc-4150-a143-b484e750b265",
                 "completedDate": 1737712243906,
+                "firstStep": true,
                 "assignees": [
                     "fd5fce42-4bcc-4150-a143-b484e750b265",
                     "231c84b2-a65a-49a9-803c-c664d84b13e0",
@@ -105,11 +104,11 @@
                 "stepType": "approval-by",
                 "stepNumber": 2,
                 "completed": true,
-                "completedBy": "231c84b2-a65a-49a9-803c-c664d84b13e0",
+                "completedBy": "rTh9yz6Z1WOidHlVOSGInlpoxrk1",
                 "completedDate": 1737712243906,
                 "assignees": [
                     "fd5fce42-4bcc-4150-a143-b484e750b265",
-                    "231c84b2-a65a-49a9-803c-c664d84b13e0",
+                    "rTh9yz6Z1WOidHlVOSGInlpoxrk1",
                     "c5fc1514-1a94-4f8c-a046-a62099097a50"
                 ],
                 "comments": "This is a random comment"
@@ -134,9 +133,7 @@
                 "completedBy": "231c84b2-a65a-49a9-803c-c664d84b13e0",
                 "completedDate": 1737712243906,
                 "assignees": [
-                    "fd5fce42-4bcc-4150-a143-b484e750b265",
-                    "231c84b2-a65a-49a9-803c-c664d84b13e0",
-                    "c5fc1514-1a94-4f8c-a046-a62099097a50"
+                    "fd5fce42-4bcc-4150-a143-b484e750b265"
                 ],
                 "comments": "This is a random comment"
             },
@@ -147,11 +144,59 @@
                 "completedBy": "c5fc1514-1a94-4f8c-a046-a62099097a50",
                 "completedDate": 1737712243906,
                 "finalStep": true,
+                "assignees": [
+                    "rTh9yz6Z1WOidHlVOSGInlpoxrk1",
+                    "c5fc1514-1a94-4f8c-a046-a62099097a50"
+                ],
+                "comments": "This is a random comment"
+            }
+        ]
+    },
+    {
+        "id": "bbbbkscbka-asacaca-acawesae",
+        "name": "English Exam 3rd Quarter 2025",
+        "entityId": "49ed2f0c-7d0d-46e4-9576-7cf19edc4980",
+        "modules": [
+            "reading"
+        ],
+        "requester": "rTh9yz6Z1WOidHlVOSGInlpoxrk1",
+        "startDate": 1737712243906,
+        "status": "rejected",
+        "steps": [
+            {
+                "stepType": "form-intake",
+                "stepNumber": 1,
+                "completed": true,
+                "completedBy": "231c84b2-a65a-49a9-803c-c664d84b13e0",
+                "completedDate": 1737712243906,
+                "firstStep": true,
                 "assignees": [
                     "fd5fce42-4bcc-4150-a143-b484e750b265",
                     "231c84b2-a65a-49a9-803c-c664d84b13e0",
                     "c5fc1514-1a94-4f8c-a046-a62099097a50"
                 ],
+                "comments": "This is a random comment\nThis is a random comment\nThis is a random comment\nThis is a random comment\nThis is a random comment\n"
+            },
+            {
+                "stepType": "approval-by",
+                "stepNumber": 2,
+                "completed": true,
+                "completedBy": "rTh9yz6Z1WOidHlVOSGInlpoxrk1",
+                "completedDate": 1737712243906,
+                "assignees": [
+                    "rTh9yz6Z1WOidHlVOSGInlpoxrk1",
+                    "c5fc1514-1a94-4f8c-a046-a62099097a50"
+                ],
+                "comments": "This is a random comment"
+            },
+            {
+                "stepType": "approval-by",
+                "stepNumber": 3,
+                "completed": false,
+                "finalStep": true,
+                "assignees": [
+                    "rTh9yz6Z1WOidHlVOSGInlpoxrk1"
+                ],
                 "comments": "This is a random comment"
             }
         ]
diff --git a/src/pages/approval-workflows/[id]/clone.tsx b/src/pages/approval-workflows/[id]/clone.tsx
new file mode 100644
index 00000000..43cf969d
--- /dev/null
+++ b/src/pages/approval-workflows/[id]/clone.tsx
@@ -0,0 +1,260 @@
+import Tip from "@/components/ApprovalWorkflows/Tip";
+import WorkflowForm from "@/components/ApprovalWorkflows/WorkflowForm";
+import Layout from "@/components/High/Layout";
+import Button from "@/components/Low/Button";
+import Input from "@/components/Low/Input";
+import Select from "@/components/Low/Select";
+import { ApprovalWorkflow, EditableApprovalWorkflow, EditableWorkflowStep } from "@/interfaces/approval.workflow";
+import { Entity } from "@/interfaces/entity";
+import { CorporateUser, TeacherUser, User } from "@/interfaces/user";
+import { sessionOptions } from "@/lib/session";
+import { redirect, serialize } from "@/utils";
+import { requestUser } from "@/utils/api";
+import { getEntities } from "@/utils/entities.be";
+import { shouldRedirectHome } from "@/utils/navigation.disabled";
+import { getEntitiesUsers } from "@/utils/users.be";
+import { uuidv4 } from "@firebase/util";
+import { AnimatePresence, LayoutGroup, motion } from "framer-motion";
+import { withIronSessionSsr } from "iron-session/next";
+import Head from "next/head";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { BsChevronLeft } from "react-icons/bs";
+import { GrClearOption } from "react-icons/gr";
+import { ToastContainer } from "react-toastify";
+import approvalWorkflowsData from '../../../demo/approval_workflows.json'; // to test locally
+
+export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => {
+    const user = await requestUser(req, res);
+    if (!user) return redirect("/login")
+
+    if (shouldRedirectHome(user) || !["admin", "developer", "teacher", "corporate", "mastercorporate"].includes(user.type))
+        return redirect("/")
+
+    const { id } = params as { id: string };
+
+    // replace later with await getApprovalWorkflow(id).
+    const approvalWorkflowsDataAsWorkflows = approvalWorkflowsData as ApprovalWorkflow[];
+    const workflow: ApprovalWorkflow | undefined = approvalWorkflowsDataAsWorkflows.find(workflow => workflow.id === id);
+
+    if (!workflow)
+        return redirect("/approval-workflows")
+
+    const userEntitiesWithLabel = await getEntities(user.entities.map(entity => entity.id));
+
+    return {
+        props: serialize({
+            user,
+            workflow,
+            userEntitiesWithLabel,
+            userEntitiesTeachers: await getEntitiesUsers(userEntitiesWithLabel.map(entity => entity.id), { type: "teacher" }) as TeacherUser[],
+            userEntitiesCorporates: await getEntitiesUsers(userEntitiesWithLabel.map(entity => entity.id), { type: "corporate" }) as CorporateUser[],
+        }),
+    };
+}, sessionOptions);
+
+interface Props {
+    user: User,
+    workflow: ApprovalWorkflow,
+    userEntitiesWithLabel: Entity[],
+    userEntitiesTeachers: TeacherUser[],
+    userEntitiesCorporates: CorporateUser[],
+}
+
+export default function Home({ user, workflow, userEntitiesWithLabel, userEntitiesTeachers, userEntitiesCorporates }: Props) {
+    const [cloneWorkflow, setCloneWorkflow] = useState<EditableApprovalWorkflow | null>(null);
+    const [entityId, setEntityId] = useState<string | null | undefined>(workflow.entityId);
+    const [entityTeachers, setEntityTeachers] = useState<TeacherUser[]>([]);
+    const [entityCorporates, setEntityCorporates] = useState<CorporateUser[]>([]);
+
+    useEffect(() => {
+        if (entityId) {
+            setEntityTeachers(
+                userEntitiesTeachers.filter(teacher =>
+                    teacher.entities.some(entity => entity.id === entityId)
+                )
+            );
+            setEntityCorporates(
+                userEntitiesCorporates.filter(corporate =>
+                    corporate.entities.some(entity => entity.id === entityId)
+                )
+            );
+        } else {
+            setEntityTeachers([]);
+            setEntityCorporates([]);
+        }
+    }, [entityId, userEntitiesTeachers, userEntitiesCorporates]);
+
+    const ENTITY_OPTIONS = userEntitiesWithLabel.map(entity => ({
+        label: entity.label,
+        value: entity.id,
+        filter: (x: EditableApprovalWorkflow) => x.entityId === entity.id,
+    }));
+
+    useEffect(() => {
+        const editableSteps: EditableWorkflowStep[] = workflow.steps.map(step => ({
+            key: step.stepNumber + 999, // just making sure they are unique because new steps that users add will have key=3 key=4 etc
+            stepType: step.stepType,
+            stepNumber: step.stepNumber,
+            assignees: step.assignees.map(id => id),
+            firstStep: step.firstStep || false,
+            finalStep: step.finalStep || false,
+            onDelete: undefined,
+        }));
+
+        const editableWorkflow: EditableApprovalWorkflow = {
+            id: uuidv4(),
+            name: workflow.name,
+            entityId: workflow.entityId,
+            requester: user.id,
+            startDate: Date.now(),
+            modules: workflow.modules,
+            status: "pending",
+            steps: editableSteps,
+        };
+
+        setCloneWorkflow(editableWorkflow);
+    }, []);
+
+    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        console.log("Form submitted! Values:", cloneWorkflow);
+    };
+
+    const onWorkflowChange = (wf: EditableApprovalWorkflow) => {
+        setCloneWorkflow(wf);
+    }
+
+    const handleEntityChange = (wf: EditableApprovalWorkflow, entityId: string) => {
+        const updatedWorkflow = {
+            ...wf,
+            entityId: entityId,
+            steps: wf.steps.map(step => ({
+                ...step,
+                assignees: step.assignees.map(() => null)
+            }))
+        }
+        onWorkflowChange(updatedWorkflow);
+    }
+
+    const handleResetWorkflow = () => {
+        if (!confirm("This action will reset all the fields in this workflow. Are you sure you want to proceed?")) return;
+        const newId = uuidv4();
+        const newWorkflow: EditableApprovalWorkflow = {
+            id: newId,
+            name: "",
+            entityId: "",
+            modules: [],
+            requester: user.id,
+            startDate: Date.now(),
+            status: "pending",
+            steps: [
+                { key: 9998, stepType: "form-intake", stepNumber: 1, firstStep: true, finalStep: false, assignees: [null] },
+                { key: 9999, stepType: "approval-by", stepNumber: 2, firstStep: false, finalStep: true, assignees: [null] },
+            ],
+        };
+        setCloneWorkflow(newWorkflow);
+    }
+
+    return (
+        <>
+            <Head>
+                <title> Clone Workflow | 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 />
+            {user && (
+                <Layout user={user} className="gap-6">
+                    <section className="flex items-center gap-2">
+                        <Link
+                            href="/approval-workflows"
+                            className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
+                            <BsChevronLeft />
+                        </Link>
+                        <h1 className="text-2xl font-semibold">Clone Workflow</h1>
+                    </section>
+
+                    <form onSubmit={handleSubmit}>
+                        {cloneWorkflow && (
+                            <>
+                                <div className="mb-8 flex flex-row gap-6 items-end">
+                                    <Input
+                                        label="Name:"
+                                        type="text"
+                                        name={cloneWorkflow.name}
+                                        placeholder="Enter workflow name"
+                                        value={cloneWorkflow.name}
+                                        onChange={(updatedName) => {
+                                            const updatedWorkflow = {
+                                                ...cloneWorkflow,
+                                                name: updatedName,
+                                            };
+                                            onWorkflowChange(updatedWorkflow);
+                                        }}
+                                    />
+                                    <Select
+                                        label="Entity:"
+                                        options={ENTITY_OPTIONS}
+                                        value={
+                                            cloneWorkflow.entityId === ""
+                                                ? null
+                                                : ENTITY_OPTIONS.find(option => option.value === cloneWorkflow.entityId)
+                                        }
+                                        onChange={(selectedEntity) => {
+                                            if (cloneWorkflow.entityId) {
+                                                if (!confirm("Clearing or changing entity will clear all the assignees for all steps in this workflow. Are you sure you want to proceed?")) return;
+                                            }
+                                            if (selectedEntity?.value) {
+                                                setEntityId(selectedEntity.value);
+                                                handleEntityChange(cloneWorkflow, selectedEntity.value);
+                                            }
+                                        }}
+                                        isClearable
+                                        placeholder="Enter workflow entity"
+                                    />
+                                    <Button
+                                        color="red"
+                                        variant="solid"
+                                        onClick={handleResetWorkflow}
+                                        type="button"
+                                        className="min-w-fit h-[72px] text-lg font-medium flex items-center gap-2 text-left"
+                                    >
+                                        Clear Workflow
+                                        <GrClearOption className="size-6" />
+                                    </Button>
+                                </div>
+
+                                <AnimatePresence mode="wait">
+                                    <LayoutGroup key="workflow">
+                                        <motion.div
+                                            key="form"
+                                            initial={{ opacity: 0, y: -30 }}
+                                            animate={{ opacity: 1, y: 0 }}
+                                            exit={{ opacity: 0, x: 60 }}
+                                            transition={{ duration: 0.20 }}
+                                        >
+                                            {(!cloneWorkflow.name || !cloneWorkflow.entityId) && (
+                                                <Tip text="Please fill in workflow name and associated entity to start configuring workflow." />
+                                            )}
+                                            <WorkflowForm
+                                                workflow={cloneWorkflow}
+                                                onWorkflowChange={onWorkflowChange}
+                                                entityTeachers={entityTeachers}
+                                                entityCorporates={entityCorporates}
+                                            />
+                                        </motion.div>
+                                    </LayoutGroup>
+                                </AnimatePresence>
+                            </>
+                        )}
+                    </form>
+                </Layout>
+            )}
+        </>
+    );
+}
diff --git a/src/pages/approval-workflows/[id]/index.tsx b/src/pages/approval-workflows/[id]/index.tsx
index 86ea893d..98e09659 100644
--- a/src/pages/approval-workflows/[id]/index.tsx
+++ b/src/pages/approval-workflows/[id]/index.tsx
@@ -230,7 +230,7 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
                                                 <div className={"text-base font-medium text-gray-500"}>
                                                     One assignee is required to sign off to complete this step:
                                                     <div className="flex flex-col gap-2 mt-3">
-                                                        {workflowAssignees.map(user => (
+                                                        {workflowAssignees.filter(user => selectedStep.assignees.includes(user.id)).map(user => (
                                                             <span key={user.id}>
                                                                 <UserWithProfilePic
                                                                     textSize="text-sm"
diff --git a/src/pages/approval-workflows/create.tsx b/src/pages/approval-workflows/create.tsx
index 2047ab8e..ce04fbd8 100644
--- a/src/pages/approval-workflows/create.tsx
+++ b/src/pages/approval-workflows/create.tsx
@@ -140,9 +140,16 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
         }
     };
 
-    const handleResetWorkflow = (id: string) => {
-        setWorkflows(prev => prev.filter(wf => wf.id !== id));
-        handleAddNewWorkflow();
+    const handleEntityChange = (wf: EditableApprovalWorkflow, entityId: string) => {
+        const updatedWorkflow = {
+            ...wf,
+            entityId: entityId,
+            steps: wf.steps.map(step => ({
+                ...step,
+                assignees: step.assignees.map(() => null)
+            }))
+        }
+        onWorkflowChange(updatedWorkflow);
     }
 
     return (
@@ -207,11 +214,11 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
                     <form onSubmit={handleSubmit}>
                         {currentWorkflow && (
                             <>
-                                <div className="mb-8 flex flex-row gap-6">
+                                <div className="mb-8 flex flex-row gap-6 items-end">
                                     <Input
+                                        label="Name:"
                                         type="text"
                                         name={currentWorkflow.name}
-                                        required={true}
                                         placeholder="Enter workflow name"
                                         value={currentWorkflow.name}
                                         onChange={(updatedName) => {
@@ -223,6 +230,7 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
                                         }}
                                     />
                                     <Select
+                                        label="Entity:"
                                         options={ENTITY_OPTIONS}
                                         value={
                                             currentWorkflow.entityId === ""
@@ -230,27 +238,23 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
                                                 : ENTITY_OPTIONS.find(option => option.value === currentWorkflow.entityId)
                                         }
                                         onChange={(selectedEntity) => {
-                                            if (!currentWorkflow.entityId && selectedEntity?.value) {
+                                            if (currentWorkflow.entityId) {
+                                                if (!confirm("Clearing or changing entity will clear all the assignees for all steps in this workflow. Are you sure you want to proceed?")) return;
+                                            }
+                                            if (selectedEntity?.value) {
                                                 setEntityId(selectedEntity.value);
-                                                const updatedWorkflow = {
-                                                    ...currentWorkflow,
-                                                    entityId: selectedEntity.value,
-                                                };
-                                                onWorkflowChange(updatedWorkflow);
-                                            } else {
-                                                if (!confirm("Clearing or changing entity will reset this workflow. Are you sure you want to proceed?")) return;
-                                                handleResetWorkflow(currentWorkflow.id);
+                                                handleEntityChange(currentWorkflow, selectedEntity.value);
                                             }
                                         }}
                                         isClearable
-                                        placeholder="Entity..."
+                                        placeholder="Enter workflow entity"
                                     />
                                     <Button
                                         color="red"
                                         variant="solid"
                                         onClick={() => handleDeleteWorkflow(currentWorkflow.id)}
                                         type="button"
-                                        className="min-w-fit text-lg font-medium flex items-center gap-2 text-left"
+                                        className="min-w-fit h-[72px] text-lg font-medium flex items-center gap-2 text-left"
                                     >
                                         Delete Workflow
                                         <BsTrash className="size-6" />
diff --git a/src/pages/approval-workflows/index.tsx b/src/pages/approval-workflows/index.tsx
index 0c4ae873..d22d9326 100644
--- a/src/pages/approval-workflows/index.tsx
+++ b/src/pages/approval-workflows/index.tsx
@@ -24,6 +24,7 @@ import { IoIosAddCircleOutline } from "react-icons/io";
 import { toast, ToastContainer } from "react-toastify";
 
 import approvalWorkflowsData from '../../demo/approval_workflows.json'; // to test locally
+import { FaRegClone } from "react-icons/fa6";
 
 const columnHelper = createColumnHelper<ApprovalWorkflow>();
 
@@ -156,10 +157,6 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
         /* .finally(reload); */
     };
 
-    const editApprovalWorkflow = (id: string) => {
-
-    };
-
     const columns = [
         columnHelper.accessor("name", {
             header: "NAME",
@@ -262,6 +259,15 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
                             <BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
                         </button>
 
+                        <Link
+                            onClick={(e) => e.stopPropagation()}
+                            data-tip="Clone"
+                            href={`/approval-workflows/${row.original.id}/clone`}
+                            className="cursor-pointer tooltip"
+                        >
+                            <FaRegClone className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+                        </Link>
+
                         {currentStep && (
                             <Link
                                 onClick={(e) => e.stopPropagation()}
@@ -368,7 +374,7 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
                                         {row.getVisibleCells().map((cell, cellIndex) => {
                                             const lastCellIndex = row.getVisibleCells().length - 1;
 
-                                            let cellClasses = "px-3 py-2 bg-purple-50 border-y-2 border-purple-300";
+                                            let cellClasses = "pl-3 pr-4 py-2 bg-purple-50 border-y-2 border-purple-300";
                                             if (cellIndex === 0) {
                                                 cellClasses += " border-l-2 rounded-l-2xl";
                                             }

From 8db47a3962482a494efe64a79933de7cf9b3adb6 Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Sun, 26 Jan 2025 14:07:25 +0000
Subject: [PATCH 30/69] Filter out empty select inputs on form submission

---
 src/pages/approval-workflows/[id]/clone.tsx | 13 ++++++++++++-
 src/pages/approval-workflows/[id]/edit.tsx  | 13 ++++++++++++-
 src/pages/approval-workflows/create.tsx     | 11 ++++++++++-
 3 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/src/pages/approval-workflows/[id]/clone.tsx b/src/pages/approval-workflows/[id]/clone.tsx
index 43cf969d..0d12b2f4 100644
--- a/src/pages/approval-workflows/[id]/clone.tsx
+++ b/src/pages/approval-workflows/[id]/clone.tsx
@@ -118,7 +118,18 @@ export default function Home({ user, workflow, userEntitiesWithLabel, userEntiti
 
     const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();
-        console.log("Form submitted! Values:", cloneWorkflow);
+    
+        if (!cloneWorkflow) return;
+    
+        const filteredWorkflow = {
+            ...cloneWorkflow,
+            steps: cloneWorkflow.steps.map(step => ({
+                ...step,
+                assignees: step.assignees.filter(assignee => assignee !== null && assignee !== undefined)
+            }))
+        };
+    
+        console.log("Form submitted! Filtered Workflow:", filteredWorkflow);
     };
 
     const onWorkflowChange = (wf: EditableApprovalWorkflow) => {
diff --git a/src/pages/approval-workflows/[id]/edit.tsx b/src/pages/approval-workflows/[id]/edit.tsx
index bae9fb09..bbe35b89 100644
--- a/src/pages/approval-workflows/[id]/edit.tsx
+++ b/src/pages/approval-workflows/[id]/edit.tsx
@@ -82,7 +82,18 @@ export default function Home({ user, workflow, workflowEntityTeachers, workflowE
 
     const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();
-        console.log("Form submitted! Values:", updatedWorkflow);
+    
+        if (!updatedWorkflow) return;
+    
+        const filteredWorkflow = {
+            ...updatedWorkflow,
+            steps: updatedWorkflow.steps.map(step => ({
+                ...step,
+                assignees: step.assignees.filter(assignee => assignee !== null && assignee !== undefined)
+            }))
+        };
+    
+        console.log("Form submitted! Filtered Workflow:", filteredWorkflow);
     };
 
     const onWorkflowChange = (wf: EditableApprovalWorkflow) => {
diff --git a/src/pages/approval-workflows/create.tsx b/src/pages/approval-workflows/create.tsx
index ce04fbd8..a0cd86e4 100644
--- a/src/pages/approval-workflows/create.tsx
+++ b/src/pages/approval-workflows/create.tsx
@@ -85,7 +85,16 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
 
     const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();
-        console.log("Form submitted! Values:", workflows);
+
+        const filteredWorkflows = workflows.map(workflow => ({
+            ...workflow,
+            steps: workflow.steps.map(step => ({
+                ...step,
+                assignees: step.assignees.filter(assignee => assignee !== null && assignee !== undefined)
+            }))
+        }));
+
+        console.log("Form submitted! Filtered Values:", filteredWorkflows);
     };
 
     const handleAddNewWorkflow = () => {

From a40ae04aa3c80d9d1ea3ec0817a3ed34e909cda4 Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Mon, 27 Jan 2025 12:50:18 +0000
Subject: [PATCH 31/69] Add workflow table name filter

---
 .gitignore                             |  4 +-
 src/pages/approval-workflows/index.tsx | 76 ++++++++++++++++----------
 2 files changed, 51 insertions(+), 29 deletions(-)

diff --git a/.gitignore b/.gitignore
index 30f9f1ed..46468831 100644
--- a/.gitignore
+++ b/.gitignore
@@ -40,4 +40,6 @@ next-env.d.ts
 .env
 .yarn/*
 .history*
-__ENV.js
\ No newline at end of file
+__ENV.js
+
+settings.json
\ No newline at end of file
diff --git a/src/pages/approval-workflows/index.tsx b/src/pages/approval-workflows/index.tsx
index d22d9326..556e6694 100644
--- a/src/pages/approval-workflows/index.tsx
+++ b/src/pages/approval-workflows/index.tsx
@@ -17,7 +17,7 @@ import clsx from "clsx";
 import { withIronSessionSsr } from "iron-session/next";
 import Head from "next/head";
 import Link from "next/link";
-import { useEffect, useState } from "react";
+import { ChangeEvent, useEffect, useState } from "react";
 import { BsTrash } from "react-icons/bs";
 import { FaRegEdit } from "react-icons/fa";
 import { IoIosAddCircleOutline } from "react-icons/io";
@@ -25,6 +25,7 @@ import { toast, ToastContainer } from "react-toastify";
 
 import approvalWorkflowsData from '../../demo/approval_workflows.json'; // to test locally
 import { FaRegClone } from "react-icons/fa6";
+import Input from "@/components/Low/Input";
 
 const columnHelper = createColumnHelper<ApprovalWorkflow>();
 
@@ -64,15 +65,10 @@ const StatusClassNames: { [key in ApprovalWorkflowStatus]: string } = {
     rejected: "bg-red-100 text-red-800 border border-red-300 before:content-[''] before:w-2 before:h-2 before:bg-red-500 before:rounded-full before:inline-block before:mr-2",
 };
 
-type CustomStatus = ApprovalWorkflowStatus | "all";
-type CustomEntity = EntityWithRoles | "all";
+type CustomStatus = ApprovalWorkflowStatus | undefined;
+type CustomEntity = EntityWithRoles["id"] | undefined;
 
 const STATUS_OPTIONS = [
-    {
-        label: "All",
-        value: "all",
-        filter: (x: ApprovalWorkflow) => true,
-    },
     {
         label: "Approved",
         value: "approved",
@@ -100,12 +96,6 @@ interface Props {
 export default function ApprovalWorkflows({ user, workflows, workflowsAssignees, userEntitiesWithLabel }: Props) {
 
     const ENTITY_OPTIONS = [
-        {
-            label: "All",
-            value: "all",
-            filter: (x: ApprovalWorkflow) =>
-                userEntitiesWithLabel.some(entity => entity.id === x.entityId),
-        },
         ...userEntitiesWithLabel
             .map(entity => ({
                 label: entity.label,
@@ -117,23 +107,43 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
 
     const [filteredWorkflows, setFilteredWorkflows] = useState<ApprovalWorkflow[]>([]);
 
-    const [statusFilter, setStatusFilter] = useState<CustomStatus>("all");
-    const [entityFilter, setEntityFilter] = useState<CustomEntity>("all");
+    const [statusFilter, setStatusFilter] = useState<CustomStatus>(undefined);
+    const [entityFilter, setEntityFilter] = useState<CustomEntity>(undefined);
+    const [nameFilter, setNameFilter] = useState<string>("");
 
     useEffect(() => {
-        const filters = [];
-        if (statusFilter) {
-            const filter = STATUS_OPTIONS.find((x) => x.value === statusFilter)?.filter;
-            if (filter) filters.push(filter);
+        const filters: Array<(workflow: ApprovalWorkflow) => boolean> = [];
+    
+        if (statusFilter && statusFilter !== undefined) {
+            const statusOption = STATUS_OPTIONS.find((x) => x.value === statusFilter);
+            if (statusOption && statusOption.filter) {
+                filters.push(statusOption.filter);
+            }
         }
-        if (entityFilter) {
-            const filter = ENTITY_OPTIONS.find((x) => x.value === entityFilter)?.filter;
-            if (filter) filters.push(filter);
+    
+        if (entityFilter && entityFilter !== undefined) {
+            const entityOption = ENTITY_OPTIONS.find((x) => x.value === entityFilter);
+            if (entityOption && entityOption.filter) {
+                filters.push(entityOption.filter);
+            }
         }
-
-        setFilteredWorkflows([...filters.reduce((d, f) => d.filter(f), workflows)]);
+    
+        if (nameFilter.trim() !== "") {
+            const nameFilterFunction = (workflow: ApprovalWorkflow) =>
+                workflow.name.toLowerCase().includes(nameFilter.toLowerCase());
+            filters.push(nameFilterFunction);
+        }
+    
+        // Apply all filters
+        const filtered = workflows.filter(workflow => filters.every(filterFn => filterFn(workflow)));
+        setFilteredWorkflows(filtered);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [workflows, statusFilter, entityFilter]);
+    }, [workflows, statusFilter, entityFilter, nameFilter]);
+    
+
+    const handleNameFilterChange = (name: ApprovalWorkflow["name"]) => {
+        setNameFilter(name);
+    };
 
     const deleteApprovalWorkflow = (id: string, name: string) => {
         if (!confirm(`Are you sure you want to delete this Approval Workflow?`)) return;
@@ -320,6 +330,16 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
                     </div>
 
                     <div className="flex w-full items-center gap-4">
+                        <div className="flex w-full flex-col gap-3">
+                            <label className="text-mti-gray-dim text-base font-normal">Name</label>
+                            <Input
+                                name="nameFilter"
+                                type="text"
+                                value={nameFilter}
+                                onChange={handleNameFilterChange}
+                                placeholder="Filter by name..."
+                            />
+                        </div>
                         <div className="flex w-full flex-col gap-3">
                             <label className="text-mti-gray-dim text-base font-normal">Status</label>
                             <Select
@@ -327,7 +347,7 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
                                 value={STATUS_OPTIONS.find((x) => x.value === statusFilter)}
                                 onChange={(value) => setStatusFilter((value?.value as ApprovalWorkflowStatus) ?? undefined)}
                                 isClearable
-                                placeholder="Status..."
+                                placeholder="Filter by status..."
                             />
                         </div>
                         <div className="flex w-full flex-col gap-3">
@@ -337,7 +357,7 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
                                 value={ENTITY_OPTIONS.find((x) => x.value === entityFilter)}
                                 onChange={(value) => setEntityFilter((value?.value as CustomEntity) ?? undefined)}
                                 isClearable
-                                placeholder="Entity..."
+                                placeholder="Filter by entity..."
                             />
                         </div>
                     </div>

From 16b959fb7abba4d0246fc197528c733052cba13a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Marques=20Lima?= <francisco.lima@helppier.com>
Date: Mon, 27 Jan 2025 22:06:34 +0000
Subject: [PATCH 32/69] Fix entities Page not rendering

---
 src/pages/_app.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index fada3931..872b6f46 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -64,7 +64,7 @@ export default function App({ Component, pageProps }: AppProps) {
       {loading ? (
         <UserProfileSkeleton />
       ) : (
-        <Component {...pageProps} entities={entities} />
+        <Component {...pageProps} />
       )}
     </Layout>
   );

From b69b6e6c77b7d0c07c89c6b23779acd16e77c6af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Marques=20Lima?= <francisco.lima@helppier.com>
Date: Tue, 28 Jan 2025 20:31:19 +0000
Subject: [PATCH 33/69] Fix login page having a Card

---
 src/pages/(exam)/ExamPage.tsx |  1 +
 src/pages/_app.tsx            | 12 +++++-------
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/pages/(exam)/ExamPage.tsx b/src/pages/(exam)/ExamPage.tsx
index bfb491b5..fb212a77 100644
--- a/src/pages/(exam)/ExamPage.tsx
+++ b/src/pages/(exam)/ExamPage.tsx
@@ -329,6 +329,7 @@ export default function ExamPage({
 
   useEffect(() => {
     setOnFocusLayerMouseEnter(() => () => setShowAbandonPopup(true));
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 872b6f46..f5b32313 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -32,7 +32,7 @@ export default function App({ Component, pageProps }: AppProps) {
       setLoading(true);
     };
     const end = () => {
-     setLoading(false);
+      setLoading(false);
     };
     Router.events.on("routeChangeStart", start);
     Router.events.on("routeChangeComplete", end);
@@ -59,13 +59,11 @@ export default function App({ Component, pageProps }: AppProps) {
     }
   }, [setIsSidebarMinimized]);
 
-  return (
+  return pageProps?.user ? (
     <Layout user={pageProps.user} entities={entities} refreshPage={loading}>
-      {loading ? (
-        <UserProfileSkeleton />
-      ) : (
-        <Component {...pageProps} />
-      )}
+      {loading ? <UserProfileSkeleton /> : <Component {...pageProps} />}
     </Layout>
+  ) : (
+    <Component {...pageProps} />
   );
 }

From 42a8ec2f8a090fc802cf5961603ac6d4a6fc7037 Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Wed, 29 Jan 2025 15:35:59 +0000
Subject: [PATCH 34/69] small fixes

---
 .../ApprovalWorkflows/RequestedBy.tsx         |  2 +-
 .../ApprovalWorkflows/UserWithProfilePic.tsx  |  4 +--
 src/demo/approval_workflows.json              | 30 +++++++++----------
 src/pages/approval-workflows/[id]/index.tsx   |  2 +-
 src/pages/approval-workflows/index.tsx        | 18 +++++------
 5 files changed, 26 insertions(+), 30 deletions(-)

diff --git a/src/components/ApprovalWorkflows/RequestedBy.tsx b/src/components/ApprovalWorkflows/RequestedBy.tsx
index e3c8d7da..536c0e63 100644
--- a/src/components/ApprovalWorkflows/RequestedBy.tsx
+++ b/src/components/ApprovalWorkflows/RequestedBy.tsx
@@ -19,7 +19,7 @@ export default function RequestedBy({ prefix, name, profileImage }: Props) {
                 <div className="flex items-center space-x-2">
                     <p className="text-xs font-medium text-gray-800">{prefix} {name}</p>
                     <Image
-                        src={profileImage}
+                        src={profileImage ? profileImage : "/defaultAvatar.png"}
                         alt={name}
                         width={24}
                         height={24}
diff --git a/src/components/ApprovalWorkflows/UserWithProfilePic.tsx b/src/components/ApprovalWorkflows/UserWithProfilePic.tsx
index 9b647847..9659da3c 100644
--- a/src/components/ApprovalWorkflows/UserWithProfilePic.tsx
+++ b/src/components/ApprovalWorkflows/UserWithProfilePic.tsx
@@ -13,11 +13,11 @@ export default function UserWithProfilePic({ prefix, name, profileImage, textSiz
         <div className="flex items-center space-x-2">
             <p className={textClassName}>{prefix} {name}</p>
             <Image
-                src={profileImage}
+                src={profileImage ? profileImage : "/defaultAvatar.png"}
                 alt={name}
                 width={24}
                 height={24}
-                className="rounded-full"
+                className="rounded-full h-auto"
             />
         </div>
     );
diff --git a/src/demo/approval_workflows.json b/src/demo/approval_workflows.json
index 3f8c03e7..8966eb9e 100644
--- a/src/demo/approval_workflows.json
+++ b/src/demo/approval_workflows.json
@@ -2,7 +2,7 @@
     {
         "id": "kajhfakscbka-asacaca-acawesae",
         "name": "English Exam 1st Quarter 2025",
-        "entityId": "ae64d98e-18e4-4978-b600-c542a5b43c2d",
+        "entityId": "64a92896-fa8c-4908-95f3-23ffe05560c5",
         "modules": [
             "reading",
             "writing"
@@ -15,13 +15,13 @@
                 "stepType": "form-intake",
                 "stepNumber": 1,
                 "completed": true,
-                "completedBy": "231c84b2-a65a-49a9-803c-c664d84b13e0",
+                "completedBy": "5fZibjknlJdfIZVndlV2FIdamtn1",
                 "completedDate": 1737712243906,
                 "firstStep": true,
                 "assignees": [
-                    "fd5fce42-4bcc-4150-a143-b484e750b265",
-                    "231c84b2-a65a-49a9-803c-c664d84b13e0",
-                    "c5fc1514-1a94-4f8c-a046-a62099097a50"
+                    "5fZibjknlJdfIZVndlV2FIdamtn1",
+                    "50jqJuESQNX0Qas64B5JZBQTIiq1",
+                    "2rtgJKmBXfWFzrtG8AjFgyrGBcp1"
                 ],
                 "comments": "This is a random comment\nThis is a random comment\nThis is a random comment\nThis is a random comment\nThis is a random comment\n"
             },
@@ -29,12 +29,12 @@
                 "stepType": "approval-by",
                 "stepNumber": 2,
                 "completed": true,
-                "completedBy": "rTh9yz6Z1WOidHlVOSGInlpoxrk1",
+                "completedBy": "50jqJuESQNX0Qas64B5JZBQTIiq1",
                 "completedDate": 1737712243906,
                 "assignees": [
-                    "fd5fce42-4bcc-4150-a143-b484e750b265",
-                    "rTh9yz6Z1WOidHlVOSGInlpoxrk1",
-                    "c5fc1514-1a94-4f8c-a046-a62099097a50"
+                    "5fZibjknlJdfIZVndlV2FIdamtn1",
+                    "50jqJuESQNX0Qas64B5JZBQTIiq1",
+                    "2rtgJKmBXfWFzrtG8AjFgyrGBcp1"
                 ],
                 "comments": "This is a random comment"
             },
@@ -43,9 +43,9 @@
                 "stepNumber": 3,
                 "completed": false,
                 "assignees": [
-                    "fd5fce42-4bcc-4150-a143-b484e750b265",
-                    "231c84b2-a65a-49a9-803c-c664d84b13e0",
-                    "c5fc1514-1a94-4f8c-a046-a62099097a50"
+                    "5fZibjknlJdfIZVndlV2FIdamtn1",
+                    "50jqJuESQNX0Qas64B5JZBQTIiq1",
+                    "2rtgJKmBXfWFzrtG8AjFgyrGBcp1"
                 ],
                 "comments": "This is a random comment"
             },
@@ -54,7 +54,7 @@
                 "stepNumber": 4,
                 "completed": false,
                 "assignees": [
-                    "fd5fce42-4bcc-4150-a143-b484e750b265"
+                    "50jqJuESQNX0Qas64B5JZBQTIiq1"
                 ],
                 "comments": "This is a random comment"
             },
@@ -64,8 +64,8 @@
                 "completed": false,
                 "finalStep": true,
                 "assignees": [
-                    "rTh9yz6Z1WOidHlVOSGInlpoxrk1",
-                    "c5fc1514-1a94-4f8c-a046-a62099097a50"
+                    "50jqJuESQNX0Qas64B5JZBQTIiq1",
+                    "2rtgJKmBXfWFzrtG8AjFgyrGBcp1"
                 ],
                 "comments": "This is a random comment"
             }
diff --git a/src/pages/approval-workflows/[id]/index.tsx b/src/pages/approval-workflows/[id]/index.tsx
index 98e09659..32e3a2b1 100644
--- a/src/pages/approval-workflows/[id]/index.tsx
+++ b/src/pages/approval-workflows/[id]/index.tsx
@@ -234,7 +234,7 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
                                                             <span key={user.id}>
                                                                 <UserWithProfilePic
                                                                     textSize="text-sm"
-                                                                    prefix={getUserTypeLabelShort(user.type)}
+                                                                    prefix={`- ${getUserTypeLabelShort(user.type)}`}
                                                                     name={user.name}
                                                                     profileImage={user.profilePicture}
                                                                 />
diff --git a/src/pages/approval-workflows/index.tsx b/src/pages/approval-workflows/index.tsx
index 556e6694..30dae0b7 100644
--- a/src/pages/approval-workflows/index.tsx
+++ b/src/pages/approval-workflows/index.tsx
@@ -17,15 +17,15 @@ import clsx from "clsx";
 import { withIronSessionSsr } from "iron-session/next";
 import Head from "next/head";
 import Link from "next/link";
-import { ChangeEvent, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { BsTrash } from "react-icons/bs";
 import { FaRegEdit } from "react-icons/fa";
 import { IoIosAddCircleOutline } from "react-icons/io";
 import { toast, ToastContainer } from "react-toastify";
 
-import approvalWorkflowsData from '../../demo/approval_workflows.json'; // to test locally
-import { FaRegClone } from "react-icons/fa6";
 import Input from "@/components/Low/Input";
+import { FaRegClone } from "react-icons/fa6";
+import approvalWorkflowsData from '../../demo/approval_workflows.json'; // to test locally
 
 const columnHelper = createColumnHelper<ApprovalWorkflow>();
 
@@ -362,7 +362,7 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
                         </div>
                     </div>
 
-                    <div className="px-6 pb-4 bg-purple-100 rounded-2xl">
+                    <div className="px-6 pb-4 bg-mti-purple-ultralight rounded-2xl border-2 border-mti-purple-light border-opacity-40">
                         <table
                             className="w-full table-auto border-separate border-spacing-y-2"
                             style={{ tableLayout: "auto" }}
@@ -371,7 +371,7 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
                                 {table.getHeaderGroups().map((headerGroup) => (
                                     <tr key={headerGroup.id}>
                                         {headerGroup.headers.map((header) => (
-                                            <th key={header.id} className="px-3 py-2 text-left text-purple-900">
+                                            <th key={header.id} className="px-3 py-2 text-left text-mti-purple-ultradark">
                                                 {header.isPlaceholder
                                                     ? null
                                                     : flexRender(
@@ -389,12 +389,12 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
                                         key={row.id}
                                         onClick={() => window.location.href = `/approval-workflows/${row.original.id}`}
                                         style={{ cursor: "pointer" }}
-                                        className="hover:bg-purple-100"
+                                        className="bg-purple-50"
                                     >
                                         {row.getVisibleCells().map((cell, cellIndex) => {
                                             const lastCellIndex = row.getVisibleCells().length - 1;
 
-                                            let cellClasses = "pl-3 pr-4 py-2 bg-purple-50 border-y-2 border-purple-300";
+                                            let cellClasses = "pl-3 pr-4 py-2 border-y-2 border-mti-purple-light border-opacity-60";
                                             if (cellIndex === 0) {
                                                 cellClasses += " border-l-2 rounded-l-2xl";
                                             }
@@ -414,10 +414,6 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
 
                         </table>
                     </div>
-
-
-
-
                 </Layout>
             )}
         </>

From 011c6e9e30f820c1ecd7c21ef33da51f2289a06c Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Wed, 29 Jan 2025 17:50:03 +0000
Subject: [PATCH 35/69] Start implementing with back-end. Create workflows
 completed and fetching workflows on server side as well, to show them in the
 table.

---
 src/hooks/useApprovalWorkflows.tsx         | 14 +++++-----
 src/interfaces/approval.workflow.ts        |  6 ++---
 src/pages/api/approval-workflows/create.ts | 28 ++++++++++++++++++++
 src/pages/approval-workflows/create.tsx    | 30 +++++++++++++++++++---
 src/pages/approval-workflows/index.tsx     |  6 ++---
 src/utils/approval.workflows.be.ts         | 16 ++++++++++++
 6 files changed, 82 insertions(+), 18 deletions(-)
 create mode 100644 src/pages/api/approval-workflows/create.ts

diff --git a/src/hooks/useApprovalWorkflows.tsx b/src/hooks/useApprovalWorkflows.tsx
index 9be0459c..884f1cb4 100644
--- a/src/hooks/useApprovalWorkflows.tsx
+++ b/src/hooks/useApprovalWorkflows.tsx
@@ -2,25 +2,23 @@ import { ApprovalWorkflow } from "@/interfaces/approval.workflow";
 import axios from "axios";
 import { useCallback, useEffect, useState } from "react";
 
-import approvalWorkflowsData from '../demo/approval_workflows.json' // to test locally
-
 export default function useApprovalWorkflows() {
-  const [approvalWorkflows, setApprovalWorkflows] = useState<ApprovalWorkflow[]>(approvalWorkflowsData as ApprovalWorkflow[]);
+  const [workflows, setWorkflows] = useState<ApprovalWorkflow[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [isError, setIsError] = useState(false);
 
-  /* const getData = useCallback(() => {
+  const getData = useCallback(() => {
     setIsLoading(true);
     axios
-      .get<ApprovalWorkflow[]>(`/api/approvalWorkflows`)
-      .then((response) => setApprovalWorkflows(response.data))
+      .get<ApprovalWorkflow[]>(`/api/approval-workflows`)
+      .then((response) => setWorkflows(response.data))
       .catch((error) => {
         setIsError(true); 
       })
       .finally(() => setIsLoading(false));
   }, []);
 
-  useEffect(getData, [getData]); */
+  useEffect(getData, [getData]);
 
-  return { approvalWorkflows, isLoading, isError/* , reload: getData */ };
+  return { workflows, isLoading, isError, reload: getData };
 }
diff --git a/src/interfaces/approval.workflow.ts b/src/interfaces/approval.workflow.ts
index 65ae5f4c..8b7efcf1 100644
--- a/src/interfaces/approval.workflow.ts
+++ b/src/interfaces/approval.workflow.ts
@@ -37,11 +37,11 @@ export interface WorkflowStep {
     completedDate?: number,
     assignees: (User["id"])[];
     firstStep?: boolean,
-    currentStep?: boolean,
+    currentStep: boolean,
     finalStep?: boolean,
-    selected: boolean,
+    selected?: boolean,
     comments?: string,
-    onClick: React.MouseEventHandler<HTMLDivElement>
+    onClick?: React.MouseEventHandler<HTMLDivElement>
 }
 
 export interface EditableWorkflowStep {
diff --git a/src/pages/api/approval-workflows/create.ts b/src/pages/api/approval-workflows/create.ts
new file mode 100644
index 00000000..dab8e80f
--- /dev/null
+++ b/src/pages/api/approval-workflows/create.ts
@@ -0,0 +1,28 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { ApprovalWorkflow } from "@/interfaces/approval.workflow";
+import { sessionOptions } from "@/lib/session";
+import { requestUser } from "@/utils/api";
+import { createApprovalWorkflows } from "@/utils/approval.workflows.be";
+import { withIronSessionApiRoute } from "iron-session/next";
+import type { NextApiRequest, NextApiResponse } from "next";
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+    if (req.method === "POST") return await post(req, res);
+}
+
+async function post(req: NextApiRequest, res: NextApiResponse) {
+    const user = await requestUser(req, res);
+    if (!user) return res.status(401).json({ ok: false });
+
+    if (!["admin", "developer", "corporate", "mastercorporate"].includes(user.type)) {
+        return res.status(403).json({ ok: false });
+    }
+
+    const approvalWorkflows: ApprovalWorkflow[] = req.body;
+
+    await createApprovalWorkflows(approvalWorkflows);
+
+    return res.status(201).json(approvalWorkflows);
+}
diff --git a/src/pages/approval-workflows/create.tsx b/src/pages/approval-workflows/create.tsx
index a0cd86e4..7dbdae77 100644
--- a/src/pages/approval-workflows/create.tsx
+++ b/src/pages/approval-workflows/create.tsx
@@ -4,7 +4,7 @@ import Layout from "@/components/High/Layout";
 import Button from "@/components/Low/Button";
 import Input from "@/components/Low/Input";
 import Select from "@/components/Low/Select";
-import { EditableApprovalWorkflow } from "@/interfaces/approval.workflow";
+import { ApprovalWorkflow, EditableApprovalWorkflow } from "@/interfaces/approval.workflow";
 import { Entity } from "@/interfaces/entity";
 import { CorporateUser, TeacherUser, User } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
@@ -13,6 +13,7 @@ import { requestUser } from "@/utils/api";
 import { getEntities } from "@/utils/entities.be";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
 import { getEntitiesUsers } from "@/utils/users.be";
+import axios from "axios";
 import { AnimatePresence, LayoutGroup, motion } from "framer-motion";
 import { withIronSessionSsr } from "iron-session/next";
 import Head from "next/head";
@@ -20,7 +21,7 @@ import Link from "next/link";
 import { useEffect, useState } from "react";
 import { BsChevronLeft, BsTrash } from "react-icons/bs";
 import { MdFormatListBulletedAdd } from "react-icons/md";
-import { ToastContainer } from "react-toastify";
+import { toast, ToastContainer } from "react-toastify";
 import { v4 as uuidv4 } from 'uuid';
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
@@ -86,15 +87,36 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
     const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();
 
-        const filteredWorkflows = workflows.map(workflow => ({
+        const filteredWorkflows: ApprovalWorkflow[] = workflows.map(workflow => ({
             ...workflow,
             steps: workflow.steps.map(step => ({
                 ...step,
-                assignees: step.assignees.filter(assignee => assignee !== null && assignee !== undefined)
+                currentStep: step.stepNumber === 1 ? true : false,
+                completed: false,
+                assignees: step.assignees.filter((assignee): assignee is string => assignee !== null && assignee !== undefined)
             }))
         }));
 
+        axios
+            .post(`/api/approval-workflows/create`, filteredWorkflows)
+            .then(() => toast.success(`Approval Workflows created successfully.`))
+            .catch((reason) => {
+                if (reason.response.status === 401) {
+                    toast.error("Not logged in!");
+                    return redirect("/login");
+                }
+                if (reason.response.status === 403) {
+                    toast.error("You do not have permission to create Approval Workflows!");
+                    return;
+                }
+
+                toast.error("Something went wrong, please try again later.");
+                return;
+            })
+
         console.log("Form submitted! Filtered Values:", filteredWorkflows);
+
+        return redirect("/approval-workflows");
     };
 
     const handleAddNewWorkflow = () => {
diff --git a/src/pages/approval-workflows/index.tsx b/src/pages/approval-workflows/index.tsx
index 30dae0b7..a109fd52 100644
--- a/src/pages/approval-workflows/index.tsx
+++ b/src/pages/approval-workflows/index.tsx
@@ -25,7 +25,8 @@ import { toast, ToastContainer } from "react-toastify";
 
 import Input from "@/components/Low/Input";
 import { FaRegClone } from "react-icons/fa6";
-import approvalWorkflowsData from '../../demo/approval_workflows.json'; // to test locally
+import useApprovalWorkflows from "@/hooks/useApprovalWorkflows";
+import { getApprovalWorkflows } from "@/utils/approval.workflows.be";
 
 const columnHelper = createColumnHelper<ApprovalWorkflow>();
 
@@ -36,8 +37,7 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
     if (shouldRedirectHome(user) || !["admin", "developer", "teacher", "corporate", "mastercorporate"].includes(user.type))
         return redirect("/")
 
-    // replace later with useApprovalWorkflows()
-    const workflows = approvalWorkflowsData as ApprovalWorkflow[];
+    const workflows = await getApprovalWorkflows();
 
     const allAssigneeIds: string[] = [
         ...new Set(
diff --git a/src/utils/approval.workflows.be.ts b/src/utils/approval.workflows.be.ts
index 0173ac48..5c7549d3 100644
--- a/src/utils/approval.workflows.be.ts
+++ b/src/utils/approval.workflows.be.ts
@@ -3,6 +3,22 @@ import client from "@/lib/mongodb";
 
 const db = client.db(process.env.MONGODB_DB);
 
+export const getApprovalWorkflows = async (ids?: string[]) => {
+	return await db
+		.collection("approval-workflows")
+		.find<ApprovalWorkflow>(ids ? { id: { $in: ids } } : {})
+		.toArray();
+};
+
 export const getApprovalWorkflow = async (id: string) => {
 	return await db.collection("approval-workflows").findOne<ApprovalWorkflow>({ id });
 };
+
+export const createApprovalWorkflow = async (workflow: ApprovalWorkflow) => {
+	await db.collection("approval-workflows").insertOne(workflow);
+}
+
+export const createApprovalWorkflows = async (workflows: ApprovalWorkflow[]) => {
+	if (workflows.length === 0) return;
+	await db.collection<ApprovalWorkflow>("approval-workflows").insertMany(workflows);
+};
\ No newline at end of file

From bdc5ff7797bb032ab7849f9e0c0410b463f2cb77 Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Wed, 29 Jan 2025 20:49:19 +0000
Subject: [PATCH 36/69] - edit workflow back-end implementation - clone
 workflow back-end implementation - added loading and redirecting to form
 submissions - fixed form intake in progress bug - fixed rendering bug

---
 .../WorkflowEditableStepComponent.tsx         | 15 +++--
 .../ApprovalWorkflows/WorkflowForm.tsx        | 25 +++++--
 .../WorkflowStepComponent.tsx                 |  2 +-
 .../api/approval-workflows/[id]/clone.ts      | 27 ++++++++
 src/pages/api/approval-workflows/[id]/edit.ts | 28 ++++++++
 src/pages/approval-workflows/[id]/clone.tsx   | 58 +++++++++++++----
 src/pages/approval-workflows/[id]/edit.tsx    | 65 ++++++++++++++-----
 src/pages/approval-workflows/[id]/index.tsx   | 11 ++--
 src/pages/approval-workflows/create.tsx       | 32 ++++++---
 src/utils/approval.workflows.be.ts            |  8 ++-
 10 files changed, 218 insertions(+), 53 deletions(-)
 create mode 100644 src/pages/api/approval-workflows/[id]/clone.ts
 create mode 100644 src/pages/api/approval-workflows/[id]/edit.ts

diff --git a/src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx b/src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx
index ec53d821..263202a9 100644
--- a/src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx
@@ -26,6 +26,7 @@ export default function WorkflowEditableStepComponent({
 }: Props) {
 
     const [selects, setSelects] = useState<(Option | null | undefined)[]>([null]);
+    const [isAdding, setIsAdding] = useState(false);
 
     const teacherOptions: Option[] = useMemo(() => 
         entityTeachers
@@ -85,13 +86,17 @@ export default function WorkflowEditableStepComponent({
     );
 
     const handleAddSelectComponent = () => {
-        setSelects((prev) => {
-            const updated = [...prev, null];
-            onSelectChange(updated.length, updated.length - 1, null);
-            return updated;
-        });
+        setIsAdding(true); // I hate to use flags... but it was the only way i was able to prevent onSelectChange to cause parent component from re-rendering in the midle of EditableWorkflowStep rerender.
+        setSelects(prev => [...prev, null]);
     };
 
+    useEffect(() => {
+        if (isAdding) {
+            onSelectChange(selects.length, selects.length - 1, null);
+            setIsAdding(false); 
+        }
+    }, [selects.length, isAdding, onSelectChange]);
+
     const handleSelectChangeAt = (numberOfSelects: number, index: number, option: Option | null) => {
         const updated = [...selects];
         updated[index] = option;
diff --git a/src/components/ApprovalWorkflows/WorkflowForm.tsx b/src/components/ApprovalWorkflows/WorkflowForm.tsx
index d730b16a..da1cdffa 100644
--- a/src/components/ApprovalWorkflows/WorkflowForm.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowForm.tsx
@@ -3,7 +3,7 @@ import Option from "@/interfaces/option";
 import { CorporateUser, TeacherUser } from "@/interfaces/user";
 import { AnimatePresence, Reorder, motion } from "framer-motion";
 import { useState } from "react";
-import { FaRegCheckCircle } from "react-icons/fa";
+import { FaRegCheckCircle, FaSpinner } from "react-icons/fa";
 import { IoIosAddCircleOutline } from "react-icons/io";
 import Button from "../Low/Button";
 import Tip from "./Tip";
@@ -14,9 +14,11 @@ interface Props {
     onWorkflowChange: (workflow: EditableApprovalWorkflow) => void;
     entityTeachers: TeacherUser[];
     entityCorporates: CorporateUser[];
+    isLoading: boolean;
+    isRedirecting: boolean;
 }
 
-export default function WorkflowForm({ workflow, onWorkflowChange, entityTeachers, entityCorporates }: Props) {
+export default function WorkflowForm({ workflow, onWorkflowChange, entityTeachers, entityCorporates, isLoading, isRedirecting }: Props) {
     const [stepCounter, setStepCounter] = useState<number>(3); // to guarantee unique keys used for animations
     const lastStep = workflow.steps[workflow.steps.length - 1];
 
@@ -145,10 +147,25 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityTeacher
                                             type="submit"
                                             color="purple"
                                             variant="solid"
+                                            disabled={isLoading}
                                             className="max-w-fit text-lg font-medium flex items-center gap-2 text-left -mt-4"
                                         >
-                                            <FaRegCheckCircle className="size-5" />
-                                            Confirm Exam Workflow Pipeline
+                                            {isRedirecting ? (
+                                                <>
+                                                    <FaSpinner className="animate-spin size-5" />
+                                                    Redirecting...
+                                                </>
+                                            ) : isLoading ? (
+                                                <>
+                                                    <FaSpinner className="animate-spin size-5" />
+                                                    Loading...
+                                                </>
+                                            ) : (
+                                                <>
+                                                    <FaRegCheckCircle className="size-5" />
+                                                    Confirm Exam Workflow Pipeline
+                                                </>
+                                            )}
                                         </Button>
                                     }
                                 </Reorder.Item>
diff --git a/src/components/ApprovalWorkflows/WorkflowStepComponent.tsx b/src/components/ApprovalWorkflows/WorkflowStepComponent.tsx
index a6741148..90de7772 100644
--- a/src/components/ApprovalWorkflows/WorkflowStepComponent.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowStepComponent.tsx
@@ -64,7 +64,7 @@ export default function WorkflowStepComponent({
                                 />
                             </div>
                         )}
-                        {!completed && completedBy && (
+                        {!completed && currentStep && (
                             <div className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
                                 In Progress... Assignees:
                                 <div className="flex flex-row flex-wrap gap-3 items-center">
diff --git a/src/pages/api/approval-workflows/[id]/clone.ts b/src/pages/api/approval-workflows/[id]/clone.ts
new file mode 100644
index 00000000..6515d751
--- /dev/null
+++ b/src/pages/api/approval-workflows/[id]/clone.ts
@@ -0,0 +1,27 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { ApprovalWorkflow } from "@/interfaces/approval.workflow";
+import { sessionOptions } from "@/lib/session";
+import { requestUser } from "@/utils/api";
+import { createApprovalWorkflow } from "@/utils/approval.workflows.be";
+import { withIronSessionApiRoute } from "iron-session/next";
+import type { NextApiRequest, NextApiResponse } from "next";
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+    if (req.method === "POST") return await post(req, res);
+}
+
+async function post(req: NextApiRequest, res: NextApiResponse) {
+    const user = await requestUser(req, res);
+    if (!user) return res.status(401).json({ ok: false });
+
+    if (!["admin", "developer", "corporate", "mastercorporate"].includes(user.type)) {
+        return res.status(403).json({ ok: false });
+    }
+
+    const approvalWorkflow: ApprovalWorkflow = req.body;
+
+    if (approvalWorkflow)
+        return res.status(201).json(await createApprovalWorkflow(approvalWorkflow));
+}
diff --git a/src/pages/api/approval-workflows/[id]/edit.ts b/src/pages/api/approval-workflows/[id]/edit.ts
new file mode 100644
index 00000000..2d517f0e
--- /dev/null
+++ b/src/pages/api/approval-workflows/[id]/edit.ts
@@ -0,0 +1,28 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { ApprovalWorkflow } from "@/interfaces/approval.workflow";
+import { sessionOptions } from "@/lib/session";
+import { requestUser } from "@/utils/api";
+import { createApprovalWorkflows, updateApprovalWorkflow } from "@/utils/approval.workflows.be";
+import { withIronSessionApiRoute } from "iron-session/next";
+import type { NextApiRequest, NextApiResponse } from "next";
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+    if (req.method === "PUT") return await put(req, res);
+}
+
+async function put(req: NextApiRequest, res: NextApiResponse) {
+    const user = await requestUser(req, res);
+    if (!user) return res.status(401).json({ ok: false });
+
+    if (!["admin", "developer", "corporate", "mastercorporate"].includes(user.type)) {
+        return res.status(403).json({ ok: false });
+    }
+
+    const { id } = req.query as { id?: string };
+    const approvalWorkflow: ApprovalWorkflow = req.body;
+
+    if (id && approvalWorkflow)
+        return res.status(204).json(await updateApprovalWorkflow(id, approvalWorkflow));
+}
diff --git a/src/pages/approval-workflows/[id]/clone.tsx b/src/pages/approval-workflows/[id]/clone.tsx
index 0d12b2f4..8bb620f7 100644
--- a/src/pages/approval-workflows/[id]/clone.tsx
+++ b/src/pages/approval-workflows/[id]/clone.tsx
@@ -21,8 +21,11 @@ import Link from "next/link";
 import { useEffect, useState } from "react";
 import { BsChevronLeft } from "react-icons/bs";
 import { GrClearOption } from "react-icons/gr";
-import { ToastContainer } from "react-toastify";
+import { toast, ToastContainer } from "react-toastify";
 import approvalWorkflowsData from '../../../demo/approval_workflows.json'; // to test locally
+import { getApprovalWorkflow } from "@/utils/approval.workflows.be";
+import { useRouter } from "next/router";
+import axios from "axios";
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => {
     const user = await requestUser(req, res);
@@ -33,9 +36,7 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
 
     const { id } = params as { id: string };
 
-    // replace later with await getApprovalWorkflow(id).
-    const approvalWorkflowsDataAsWorkflows = approvalWorkflowsData as ApprovalWorkflow[];
-    const workflow: ApprovalWorkflow | undefined = approvalWorkflowsDataAsWorkflows.find(workflow => workflow.id === id);
+    const workflow: ApprovalWorkflow | null = await getApprovalWorkflow(id);
 
     if (!workflow)
         return redirect("/approval-workflows")
@@ -66,6 +67,10 @@ export default function Home({ user, workflow, userEntitiesWithLabel, userEntiti
     const [entityId, setEntityId] = useState<string | null | undefined>(workflow.entityId);
     const [entityTeachers, setEntityTeachers] = useState<TeacherUser[]>([]);
     const [entityCorporates, setEntityCorporates] = useState<CorporateUser[]>([]);
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+    const [isRedirecting, setIsRedirecting] = useState<boolean>(false);
+
+    const router = useRouter();
 
     useEffect(() => {
         if (entityId) {
@@ -118,18 +123,47 @@ export default function Home({ user, workflow, userEntitiesWithLabel, userEntiti
 
     const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();
-    
-        if (!cloneWorkflow) return;
-    
-        const filteredWorkflow = {
+        setIsLoading(true);
+
+        if (!cloneWorkflow) {
+            setIsLoading(false);
+            return;
+        }
+
+        const filteredWorkflow: ApprovalWorkflow = {
             ...cloneWorkflow,
             steps: cloneWorkflow.steps.map(step => ({
                 ...step,
-                assignees: step.assignees.filter(assignee => assignee !== null && assignee !== undefined)
+                currentStep: step.stepNumber === 1 ? true : false,
+                completed: false,
+                assignees: step.assignees.filter((assignee): assignee is string => assignee !== null && assignee !== undefined)
             }))
         };
-    
-        console.log("Form submitted! Filtered Workflow:", filteredWorkflow);
+
+        axios
+            .post(`/api/approval-workflows/${workflow.id}/clone`, filteredWorkflow)
+            .then(() => {
+                toast.success("Approval Workflow cloned successfully.");
+                setIsRedirecting(true);
+                setTimeout(() => {
+                    router.push("/approval-workflows");
+                }, 2000);
+            })
+            .catch((reason) => {
+                if (reason.response.status === 401) {
+                    toast.error("Not logged in!");
+                    return router.push("/login");
+                }
+                if (reason.response.status === 403) {
+                    toast.error("You do not have permission to clone Approval Workflows!");
+                    return router.push("/approval-workflows");
+                }
+                toast.error("Something went wrong, please try again later.");
+                setIsLoading(false);
+                return;
+            })
+
+        console.log("Form submitted! Filtered Values:", filteredWorkflow);
     };
 
     const onWorkflowChange = (wf: EditableApprovalWorkflow) => {
@@ -257,6 +291,8 @@ export default function Home({ user, workflow, userEntitiesWithLabel, userEntiti
                                                 onWorkflowChange={onWorkflowChange}
                                                 entityTeachers={entityTeachers}
                                                 entityCorporates={entityCorporates}
+                                                isLoading={isLoading}
+                                                isRedirecting={isRedirecting}
                                             />
                                         </motion.div>
                                     </LayoutGroup>
diff --git a/src/pages/approval-workflows/[id]/edit.tsx b/src/pages/approval-workflows/[id]/edit.tsx
index bbe35b89..6d8b477d 100644
--- a/src/pages/approval-workflows/[id]/edit.tsx
+++ b/src/pages/approval-workflows/[id]/edit.tsx
@@ -16,8 +16,10 @@ import Head from "next/head";
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import { BsChevronLeft } from "react-icons/bs";
-import { ToastContainer } from "react-toastify";
-import approvalWorkflowsData from '../../../demo/approval_workflows.json'; // to test locally
+import { toast, ToastContainer } from "react-toastify";
+import axios from "axios";
+import { getApprovalWorkflow } from "@/utils/approval.workflows.be";
+import { useRouter } from "next/router";
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => {
     const user = await requestUser(req, res);
@@ -28,9 +30,7 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
 
     const { id } = params as { id: string };
 
-    // replace later with await getApprovalWorkflow(id).
-    const approvalWorkflowsDataAsWorkflows = approvalWorkflowsData as ApprovalWorkflow[];
-    const workflow: ApprovalWorkflow | undefined = approvalWorkflowsDataAsWorkflows.find(workflow => workflow.id === id);
+    const workflow: ApprovalWorkflow | null = await getApprovalWorkflow(id);
 
     if (!workflow)
         return redirect("/approval-workflows")
@@ -54,6 +54,10 @@ interface Props {
 
 export default function Home({ user, workflow, workflowEntityTeachers, workflowEntityCorporates }: Props) {
     const [updatedWorkflow, setUpdatedWorkflow] = useState<EditableApprovalWorkflow | null>(null);
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+    const [isRedirecting, setIsRedirecting] = useState<boolean>(false);
+    
+    const router = useRouter();
 
     useEffect(() => {
         const editableSteps: EditableWorkflowStep[] = workflow.steps.map(step => ({
@@ -82,23 +86,52 @@ export default function Home({ user, workflow, workflowEntityTeachers, workflowE
 
     const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();
-    
-        if (!updatedWorkflow) return;
-    
-        const filteredWorkflow = {
+        setIsLoading(true);
+
+        if (!updatedWorkflow){
+            setIsLoading(false);
+            return;
+        } 
+
+        const filteredWorkflow: ApprovalWorkflow = {
             ...updatedWorkflow,
             steps: updatedWorkflow.steps.map(step => ({
                 ...step,
-                assignees: step.assignees.filter(assignee => assignee !== null && assignee !== undefined)
+                currentStep: step.stepNumber === 1 ? true : false,
+                completed: false,
+                assignees: step.assignees.filter((assignee): assignee is string => assignee !== null && assignee !== undefined)
             }))
         };
-    
-        console.log("Form submitted! Filtered Workflow:", filteredWorkflow);
+
+        axios
+            .put(`/api/approval-workflows/${workflow.id}/edit`, filteredWorkflow)
+            .then(() => {
+                toast.success("Approval Workflow edited successfully.");
+                setIsRedirecting(true);
+                setTimeout(() => {
+                    router.push("/approval-workflows");
+                }, 2000);
+            })
+            .catch((reason) => {
+                if (reason.response.status === 401) {
+                    toast.error("Not logged in!");
+                    return router.push("/login");
+                }
+                if (reason.response.status === 403) {
+                    toast.error("You do not have permission to edit Approval Workflows!");
+                    return router.push("/approval-workflows");
+                }
+                toast.error("Something went wrong, please try again later.");
+                setIsLoading(false);
+                return;
+            })
+
+        console.log("Form submitted! Filtered Values:", filteredWorkflow);
     };
 
-    const onWorkflowChange = (wf: EditableApprovalWorkflow) => {
-        setUpdatedWorkflow(wf);
-    }
+    const onWorkflowChange = (updatedWorkflow: EditableApprovalWorkflow) => {
+        setUpdatedWorkflow(updatedWorkflow);
+    };
 
     return (
         <>
@@ -153,6 +186,8 @@ export default function Home({ user, workflow, workflowEntityTeachers, workflowE
                                     onWorkflowChange={onWorkflowChange}
                                     entityTeachers={workflowEntityTeachers}
                                     entityCorporates={workflowEntityCorporates}
+                                    isLoading={isLoading}
+                                    isRedirecting={isRedirecting}
                                 />
                             }
                         </motion.div>
diff --git a/src/pages/approval-workflows/[id]/index.tsx b/src/pages/approval-workflows/[id]/index.tsx
index 32e3a2b1..0ffe56e2 100644
--- a/src/pages/approval-workflows/[id]/index.tsx
+++ b/src/pages/approval-workflows/[id]/index.tsx
@@ -1,6 +1,7 @@
 import RequestedBy from "@/components/ApprovalWorkflows/RequestedBy";
 import StartedOn from "@/components/ApprovalWorkflows/StartedOn";
 import Status from "@/components/ApprovalWorkflows/Status";
+import Tip from "@/components/ApprovalWorkflows/Tip";
 import UserWithProfilePic from "@/components/ApprovalWorkflows/UserWithProfilePic";
 import WorkflowStepComponent from "@/components/ApprovalWorkflows/WorkflowStepComponent";
 import Layout from "@/components/High/Layout";
@@ -9,8 +10,10 @@ import { User } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
 import { redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
+import { getApprovalWorkflow } from "@/utils/approval.workflows.be";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
 import { getSpecificUsers, getUser } from "@/utils/users.be";
+import { AnimatePresence, LayoutGroup, motion } from "framer-motion";
 import { withIronSessionSsr } from "iron-session/next";
 import Head from "next/head";
 import Link from "next/link";
@@ -21,10 +24,6 @@ import { MdOutlineDoubleArrow } from "react-icons/md";
 import { RiThumbUpLine } from "react-icons/ri";
 import { ToastContainer } from "react-toastify";
 
-import approvalWorkflowsData from '../../../demo/approval_workflows.json'; // to test locally
-import Tip from "@/components/ApprovalWorkflows/Tip";
-import { AnimatePresence, LayoutGroup, motion } from "framer-motion";
-
 export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => {
     const user = await requestUser(req, res);
     if (!user) return redirect("/login")
@@ -34,9 +33,7 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
 
     const { id } = params as { id: string };
 
-    // replace later with await getApprovalWorkflow(id).
-    const approvalWorkflowsDataAsWorkflows = approvalWorkflowsData as ApprovalWorkflow[];
-    const workflow: ApprovalWorkflow | undefined = approvalWorkflowsDataAsWorkflows.find(workflow => workflow.id === id);
+    const workflow: ApprovalWorkflow | null = await getApprovalWorkflow(id);
 
     if (!workflow)
         return redirect("/approval-workflows")
diff --git a/src/pages/approval-workflows/create.tsx b/src/pages/approval-workflows/create.tsx
index 7dbdae77..8e34dca1 100644
--- a/src/pages/approval-workflows/create.tsx
+++ b/src/pages/approval-workflows/create.tsx
@@ -18,6 +18,7 @@ import { AnimatePresence, LayoutGroup, motion } from "framer-motion";
 import { withIronSessionSsr } from "iron-session/next";
 import Head from "next/head";
 import Link from "next/link";
+import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { BsChevronLeft, BsTrash } from "react-icons/bs";
 import { MdFormatListBulletedAdd } from "react-icons/md";
@@ -56,7 +57,11 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
     const [entityId, setEntityId] = useState<string | null | undefined>(null);
     const [entityTeachers, setEntityTeachers] = useState<TeacherUser[]>([]);
     const [entityCorporates, setEntityCorporates] = useState<CorporateUser[]>([]);
-    const [isAdding, setIsAdding] = useState(false); // used to temporary timeout new workflow button. With animations, clicking too fast might cause state inconsistencies between renders.
+    const [isAdding, setIsAdding] = useState<boolean>(false); // used to temporary timeout new workflow button. With animations, clicking too fast might cause state inconsistencies between renders.
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+    const [isRedirecting, setIsRedirecting] = useState<boolean>(false);
+
+    const router = useRouter();
 
     useEffect(() => {
         if (entityId) {
@@ -86,6 +91,11 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
 
     const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();
+        setIsLoading(true);
+
+        if (workflows.length === 0) {
+            setIsLoading(false);
+        }
 
         const filteredWorkflows: ApprovalWorkflow[] = workflows.map(workflow => ({
             ...workflow,
@@ -99,24 +109,28 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
 
         axios
             .post(`/api/approval-workflows/create`, filteredWorkflows)
-            .then(() => toast.success(`Approval Workflows created successfully.`))
+            .then(() => {
+                toast.success("Approval Workflows created successfully.");
+                setIsRedirecting(true);
+                setTimeout(() => {
+                    router.push("/approval-workflows");
+                }, 2000);
+            })
             .catch((reason) => {
                 if (reason.response.status === 401) {
                     toast.error("Not logged in!");
-                    return redirect("/login");
+                    return router.push("/login");
                 }
                 if (reason.response.status === 403) {
                     toast.error("You do not have permission to create Approval Workflows!");
-                    return;
+                    return router.push("/approval-workflows");
                 }
-
                 toast.error("Something went wrong, please try again later.");
+                setIsLoading(false);
                 return;
             })
-
+        
         console.log("Form submitted! Filtered Values:", filteredWorkflows);
-
-        return redirect("/approval-workflows");
     };
 
     const handleAddNewWorkflow = () => {
@@ -309,6 +323,8 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
                                                 onWorkflowChange={onWorkflowChange}
                                                 entityTeachers={entityTeachers}
                                                 entityCorporates={entityCorporates}
+                                                isLoading={isLoading}
+                                                isRedirecting={isRedirecting}
                                             />
                                         </motion.div>
                                     </LayoutGroup>
diff --git a/src/utils/approval.workflows.be.ts b/src/utils/approval.workflows.be.ts
index 5c7549d3..b163e9d0 100644
--- a/src/utils/approval.workflows.be.ts
+++ b/src/utils/approval.workflows.be.ts
@@ -16,9 +16,13 @@ export const getApprovalWorkflow = async (id: string) => {
 
 export const createApprovalWorkflow = async (workflow: ApprovalWorkflow) => {
 	await db.collection("approval-workflows").insertOne(workflow);
-}
+};
 
 export const createApprovalWorkflows = async (workflows: ApprovalWorkflow[]) => {
 	if (workflows.length === 0) return;
 	await db.collection<ApprovalWorkflow>("approval-workflows").insertMany(workflows);
-};
\ No newline at end of file
+};
+
+export const updateApprovalWorkflow = async (id: string, workflow: ApprovalWorkflow) => {
+	await db.collection("approval-workflows").replaceOne({ id }, workflow);
+};

From 5d727fc528754d45d32f224ec9265d66cf0f63b8 Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Thu, 30 Jan 2025 11:07:13 +0000
Subject: [PATCH 37/69] implement delete workflow

---
 .../api/approval-workflows/[id]/index.ts      | 27 +++++++++++++++++++
 src/pages/approval-workflows/index.tsx        | 18 ++++++++-----
 src/utils/approval.workflows.be.ts            | 10 ++++---
 3 files changed, 45 insertions(+), 10 deletions(-)
 create mode 100644 src/pages/api/approval-workflows/[id]/index.ts

diff --git a/src/pages/api/approval-workflows/[id]/index.ts b/src/pages/api/approval-workflows/[id]/index.ts
new file mode 100644
index 00000000..16efab91
--- /dev/null
+++ b/src/pages/api/approval-workflows/[id]/index.ts
@@ -0,0 +1,27 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { ApprovalWorkflow } from "@/interfaces/approval.workflow";
+import { sessionOptions } from "@/lib/session";
+import { requestUser } from "@/utils/api";
+import { createApprovalWorkflows, deleteApprovalWorkflow, updateApprovalWorkflow } from "@/utils/approval.workflows.be";
+import { withIronSessionApiRoute } from "iron-session/next";
+import type { NextApiRequest, NextApiResponse } from "next";
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+    if (req.method === "DELETE") return await del(req, res);
+}
+
+async function del(req: NextApiRequest, res: NextApiResponse) {
+    const user = await requestUser(req, res);
+    if (!user) return res.status(401).json({ ok: false });
+
+    if (!["admin", "developer", "corporate", "mastercorporate"].includes(user.type)) {
+        return res.status(403).json({ ok: false });
+    }
+
+    const { id } = req.query as { id?: string };
+
+    if (id)
+        return res.status(200).json(await deleteApprovalWorkflow(id));
+}
diff --git a/src/pages/approval-workflows/index.tsx b/src/pages/approval-workflows/index.tsx
index a109fd52..ac042851 100644
--- a/src/pages/approval-workflows/index.tsx
+++ b/src/pages/approval-workflows/index.tsx
@@ -113,33 +113,33 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
 
     useEffect(() => {
         const filters: Array<(workflow: ApprovalWorkflow) => boolean> = [];
-    
+
         if (statusFilter && statusFilter !== undefined) {
             const statusOption = STATUS_OPTIONS.find((x) => x.value === statusFilter);
             if (statusOption && statusOption.filter) {
                 filters.push(statusOption.filter);
             }
         }
-    
+
         if (entityFilter && entityFilter !== undefined) {
             const entityOption = ENTITY_OPTIONS.find((x) => x.value === entityFilter);
             if (entityOption && entityOption.filter) {
                 filters.push(entityOption.filter);
             }
         }
-    
+
         if (nameFilter.trim() !== "") {
             const nameFilterFunction = (workflow: ApprovalWorkflow) =>
                 workflow.name.toLowerCase().includes(nameFilter.toLowerCase());
             filters.push(nameFilterFunction);
         }
-    
+
         // Apply all filters
         const filtered = workflows.filter(workflow => filters.every(filterFn => filterFn(workflow)));
         setFilteredWorkflows(filtered);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [workflows, statusFilter, entityFilter, nameFilter]);
-    
+
 
     const handleNameFilterChange = (name: ApprovalWorkflow["name"]) => {
         setNameFilter(name);
@@ -150,7 +150,12 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
 
         axios
             .delete(`/api/approval-workflows/${id}`)
-            .then(() => toast.success(`Deleted ${name} Approval Workflow.`))
+            .then(() => {
+                toast.success(`Successfully deleted ${name} Approval Workflow.`);
+                setTimeout(() => {
+                    window.location.reload();
+                }, 2000);
+            })
             .catch((reason) => {
                 if (reason.response.status === 404) {
                     toast.error("Approval Workflow not found!");
@@ -164,7 +169,6 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
 
                 toast.error("Something went wrong, please try again later.");
             })
-        /* .finally(reload); */
     };
 
     const columns = [
diff --git a/src/utils/approval.workflows.be.ts b/src/utils/approval.workflows.be.ts
index b163e9d0..a09489a2 100644
--- a/src/utils/approval.workflows.be.ts
+++ b/src/utils/approval.workflows.be.ts
@@ -15,14 +15,18 @@ export const getApprovalWorkflow = async (id: string) => {
 };
 
 export const createApprovalWorkflow = async (workflow: ApprovalWorkflow) => {
-	await db.collection("approval-workflows").insertOne(workflow);
+	return await db.collection("approval-workflows").insertOne(workflow);
 };
 
 export const createApprovalWorkflows = async (workflows: ApprovalWorkflow[]) => {
 	if (workflows.length === 0) return;
-	await db.collection<ApprovalWorkflow>("approval-workflows").insertMany(workflows);
+	return await db.collection<ApprovalWorkflow>("approval-workflows").insertMany(workflows);
 };
 
 export const updateApprovalWorkflow = async (id: string, workflow: ApprovalWorkflow) => {
-	await db.collection("approval-workflows").replaceOne({ id }, workflow);
+	return await db.collection("approval-workflows").replaceOne({ id }, workflow);
 };
+
+export const deleteApprovalWorkflow = async (id: string) => {
+	return await db.collection("approval-workflows").deleteOne({ id });
+};
\ No newline at end of file

From c968044160fcabc155612e6951574150e03f6674 Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Thu, 30 Jan 2025 11:50:28 +0000
Subject: [PATCH 38/69] switch to mongo's id handling

---
 src/interfaces/approval.workflow.ts         | 11 +++-----
 src/pages/approval-workflows/[id]/clone.tsx |  4 +--
 src/pages/approval-workflows/[id]/edit.tsx  |  4 +--
 src/pages/approval-workflows/create.tsx     |  2 +-
 src/pages/approval-workflows/index.tsx      | 11 ++++----
 src/utils/approval.workflows.be.ts          | 29 +++++++++++----------
 6 files changed, 29 insertions(+), 32 deletions(-)

diff --git a/src/interfaces/approval.workflow.ts b/src/interfaces/approval.workflow.ts
index 8b7efcf1..b3f5aa7d 100644
--- a/src/interfaces/approval.workflow.ts
+++ b/src/interfaces/approval.workflow.ts
@@ -1,8 +1,9 @@
+import { ObjectId } from "mongodb";
 import { Module } from ".";
 import { Type, User, userTypeLabels, userTypeLabelsShort } from "./user";
 
 export interface ApprovalWorkflow {
-    id: string,
+    _id?: ObjectId,
     name: string,
     entityId: string,
     requester: User["id"],
@@ -12,14 +13,8 @@ export interface ApprovalWorkflow {
     steps: WorkflowStep[],
 }
 
-export interface EditableApprovalWorkflow {
+export interface EditableApprovalWorkflow extends Omit<ApprovalWorkflow, "_id" | "steps"> {
     id: string,
-    name: string,
-    entityId: string,
-    requester: User["id"],
-    startDate: number,
-    modules: Module[],
-    status: ApprovalWorkflowStatus,
     steps: EditableWorkflowStep[],
 }
 
diff --git a/src/pages/approval-workflows/[id]/clone.tsx b/src/pages/approval-workflows/[id]/clone.tsx
index 8bb620f7..e62ee2d7 100644
--- a/src/pages/approval-workflows/[id]/clone.tsx
+++ b/src/pages/approval-workflows/[id]/clone.tsx
@@ -108,7 +108,7 @@ export default function Home({ user, workflow, userEntitiesWithLabel, userEntiti
         }));
 
         const editableWorkflow: EditableApprovalWorkflow = {
-            id: uuidv4(),
+            id: uuidv4(), // this id is only used in UI. it is ommited on submission to DB and lets mongo handle unique id.
             name: workflow.name,
             entityId: workflow.entityId,
             requester: user.id,
@@ -141,7 +141,7 @@ export default function Home({ user, workflow, userEntitiesWithLabel, userEntiti
         };
 
         axios
-            .post(`/api/approval-workflows/${workflow.id}/clone`, filteredWorkflow)
+            .post(`/api/approval-workflows/${workflow._id}/clone`, filteredWorkflow)
             .then(() => {
                 toast.success("Approval Workflow cloned successfully.");
                 setIsRedirecting(true);
diff --git a/src/pages/approval-workflows/[id]/edit.tsx b/src/pages/approval-workflows/[id]/edit.tsx
index 6d8b477d..7765e009 100644
--- a/src/pages/approval-workflows/[id]/edit.tsx
+++ b/src/pages/approval-workflows/[id]/edit.tsx
@@ -71,7 +71,7 @@ export default function Home({ user, workflow, workflowEntityTeachers, workflowE
         }));
 
         const editableWorkflow: EditableApprovalWorkflow = {
-            id: workflow.id,
+            id: workflow._id?.toString() ?? "",
             name: workflow.name,
             entityId: workflow.entityId,
             requester: user.id, // should it change to the editor?
@@ -104,7 +104,7 @@ export default function Home({ user, workflow, workflowEntityTeachers, workflowE
         };
 
         axios
-            .put(`/api/approval-workflows/${workflow.id}/edit`, filteredWorkflow)
+            .put(`/api/approval-workflows/${updatedWorkflow.id}/edit`, filteredWorkflow)
             .then(() => {
                 toast.success("Approval Workflow edited successfully.");
                 setIsRedirecting(true);
diff --git a/src/pages/approval-workflows/create.tsx b/src/pages/approval-workflows/create.tsx
index 8e34dca1..5fafb405 100644
--- a/src/pages/approval-workflows/create.tsx
+++ b/src/pages/approval-workflows/create.tsx
@@ -137,7 +137,7 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
         if (isAdding) return;
         setIsAdding(true);
 
-        const newId = uuidv4();
+        const newId = uuidv4(); // this id is only used in UI. it is ommited on submission to DB and lets mongo handle unique id.
         const newWorkflow: EditableApprovalWorkflow = {
             id: newId,
             name: "",
diff --git a/src/pages/approval-workflows/index.tsx b/src/pages/approval-workflows/index.tsx
index ac042851..c7c71731 100644
--- a/src/pages/approval-workflows/index.tsx
+++ b/src/pages/approval-workflows/index.tsx
@@ -145,7 +145,8 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
         setNameFilter(name);
     };
 
-    const deleteApprovalWorkflow = (id: string, name: string) => {
+    const deleteApprovalWorkflow = (id: string | undefined, name: string) => {
+        if (id === undefined) return;
         if (!confirm(`Are you sure you want to delete this Approval Workflow?`)) return;
 
         axios
@@ -267,7 +268,7 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
                             className="cursor-pointer tooltip"
                             onClick={(e) => {
                                 e.stopPropagation();
-                                deleteApprovalWorkflow(row.original.id, row.original.name);
+                                deleteApprovalWorkflow(row.original._id?.toString(), row.original.name);
                             }}
                         >
                             <BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
@@ -276,7 +277,7 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
                         <Link
                             onClick={(e) => e.stopPropagation()}
                             data-tip="Clone"
-                            href={`/approval-workflows/${row.original.id}/clone`}
+                            href={`/approval-workflows/${row.original._id?.toString()}/clone`}
                             className="cursor-pointer tooltip"
                         >
                             <FaRegClone className="hover:text-mti-purple-light transition ease-in-out duration-300" />
@@ -286,7 +287,7 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
                             <Link
                                 onClick={(e) => e.stopPropagation()}
                                 data-tip="Edit"
-                                href={`/approval-workflows/${row.original.id}/edit`}
+                                href={`/approval-workflows/${row.original._id?.toString()}/edit`}
                                 className="cursor-pointer tooltip"
                             >
                                 <FaRegEdit className="hover:text-mti-purple-light transition ease-in-out duration-300" />
@@ -391,7 +392,7 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
                                 {table.getRowModel().rows.map((row) => (
                                     <tr
                                         key={row.id}
-                                        onClick={() => window.location.href = `/approval-workflows/${row.original.id}`}
+                                        onClick={() => window.location.href = `/approval-workflows/${row.original._id?.toString()}`}
                                         style={{ cursor: "pointer" }}
                                         className="bg-purple-50"
                                     >
diff --git a/src/utils/approval.workflows.be.ts b/src/utils/approval.workflows.be.ts
index a09489a2..e876a279 100644
--- a/src/utils/approval.workflows.be.ts
+++ b/src/utils/approval.workflows.be.ts
@@ -1,32 +1,33 @@
+import { ObjectId } from "mongodb";
 import { ApprovalWorkflow } from "@/interfaces/approval.workflow";
 import client from "@/lib/mongodb";
 
 const db = client.db(process.env.MONGODB_DB);
 
 export const getApprovalWorkflows = async (ids?: string[]) => {
-	return await db
-		.collection("approval-workflows")
-		.find<ApprovalWorkflow>(ids ? { id: { $in: ids } } : {})
-		.toArray();
+    return await db
+        .collection<ApprovalWorkflow>("approval-workflows")
+        .find(ids ? { _id: { $in: ids.map((id) => new ObjectId(id)) } } : {})
+        .toArray();
 };
 
 export const getApprovalWorkflow = async (id: string) => {
-	return await db.collection("approval-workflows").findOne<ApprovalWorkflow>({ id });
+    return await db.collection<ApprovalWorkflow>("approval-workflows").findOne({ _id: new ObjectId(id) });
 };
 
-export const createApprovalWorkflow = async (workflow: ApprovalWorkflow) => {
-	return await db.collection("approval-workflows").insertOne(workflow);
+export const createApprovalWorkflow = async (workflow: Omit<ApprovalWorkflow, "_id">) => {
+    return await db.collection("approval-workflows").insertOne(workflow);
 };
 
-export const createApprovalWorkflows = async (workflows: ApprovalWorkflow[]) => {
-	if (workflows.length === 0) return;
-	return await db.collection<ApprovalWorkflow>("approval-workflows").insertMany(workflows);
+export const createApprovalWorkflows = async (workflows: Omit<ApprovalWorkflow, "_id">[]) => {
+    if (workflows.length === 0) return;
+    return await db.collection("approval-workflows").insertMany(workflows);
 };
 
-export const updateApprovalWorkflow = async (id: string, workflow: ApprovalWorkflow) => {
-	return await db.collection("approval-workflows").replaceOne({ id }, workflow);
+export const updateApprovalWorkflow = async (id: string, workflow: Omit<ApprovalWorkflow, "_id">) => {
+    return await db.collection("approval-workflows").replaceOne({ _id: new ObjectId(id) }, workflow);
 };
 
 export const deleteApprovalWorkflow = async (id: string) => {
-	return await db.collection("approval-workflows").deleteOne({ id });
-};
\ No newline at end of file
+    return await db.collection("approval-workflows").deleteOne({ _id: new ObjectId(id) });
+};

From f89b42c41cbc73e93e44367a61f661c434e1dfde Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Thu, 30 Jan 2025 12:06:13 +0000
Subject: [PATCH 39/69] remove currentStep from step type

---
 src/components/ApprovalWorkflows/WorkflowStepComponent.tsx | 3 ++-
 src/interfaces/approval.workflow.ts                        | 1 -
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ApprovalWorkflows/WorkflowStepComponent.tsx b/src/components/ApprovalWorkflows/WorkflowStepComponent.tsx
index 90de7772..8ae7d862 100644
--- a/src/components/ApprovalWorkflows/WorkflowStepComponent.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowStepComponent.tsx
@@ -8,17 +8,18 @@ import UserWithProfilePic from "./UserWithProfilePic";
 
 interface Props extends WorkflowStep {
     workflowAssignees: User[],
+    currentStep: boolean,
 }
 
 export default function WorkflowStepComponent({
     workflowAssignees,
+    currentStep,
     stepType,
     stepNumber,
     completed,
     completedBy,
     assignees,
     finalStep,
-    currentStep,
     selected = false,
     onClick,
 }: Props) {
diff --git a/src/interfaces/approval.workflow.ts b/src/interfaces/approval.workflow.ts
index b3f5aa7d..5c7dacf2 100644
--- a/src/interfaces/approval.workflow.ts
+++ b/src/interfaces/approval.workflow.ts
@@ -32,7 +32,6 @@ export interface WorkflowStep {
     completedDate?: number,
     assignees: (User["id"])[];
     firstStep?: boolean,
-    currentStep: boolean,
     finalStep?: boolean,
     selected?: boolean,
     comments?: string,

From 98ba0bfc04faf2c2d3b9cbb4e015f0daa99972ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Marques=20Lima?= <francisco.lima@helppier.com>
Date: Thu, 30 Jan 2025 18:25:42 +0000
Subject: [PATCH 40/69] Refactor most getServerProps to fetch independent
 request in parallel and projected the data only to return the necessary
 fields and changed some functions

---
 src/components/High/AssignmentCard.tsx  |  217 ++--
 src/pages/_app.tsx                      |    9 +-
 src/pages/assignments/[id].tsx          |  972 ++++++++++-------
 src/pages/assignments/creator/[id].tsx  | 1295 ++++++++++++++---------
 src/pages/assignments/creator/index.tsx | 1136 ++++++++++++--------
 src/pages/assignments/index.tsx         |  474 +++++----
 src/pages/classrooms/[id].tsx           |  712 ++++++++-----
 src/pages/classrooms/create.tsx         |  461 ++++----
 src/pages/classrooms/index.tsx          |  272 +++--
 src/pages/dashboard/admin.tsx           |   82 +-
 src/pages/dashboard/corporate.tsx       |   80 +-
 src/pages/dashboard/developer.tsx       |   73 +-
 src/pages/dashboard/mastercorporate.tsx |   66 +-
 src/pages/dashboard/student.tsx         |   49 +-
 src/pages/dashboard/teacher.tsx         |   47 +-
 src/pages/entities/[id]/index.tsx       | 1061 +++++++++++--------
 src/pages/entities/create.tsx           |  327 +++---
 src/pages/entities/index.tsx            |   40 +-
 src/pages/exam.tsx                      |  175 +--
 src/pages/exercises.tsx                 |  150 +--
 src/pages/official-exam.tsx             |  117 +-
 src/pages/payment-record.tsx            |    2 +-
 src/pages/payment.tsx                   |    9 +-
 src/pages/permissions/[id].tsx          |   53 +-
 src/pages/profile.tsx                   |   16 +-
 src/pages/record.tsx                    |  408 ++++---
 src/pages/settings.tsx                  |  365 ++++---
 src/pages/statistical.tsx               |  587 ++++++----
 src/pages/stats.tsx                     |   17 +-
 src/pages/training/index.tsx            |  410 +++----
 src/pages/users/performance.tsx         |  121 ++-
 src/utils/assignments.be.ts             |    4 +-
 src/utils/entities.be.ts                |    1 -
 src/utils/exams.be.ts                   |    7 +-
 src/utils/sessions.be.ts                |    4 +-
 src/utils/users.be.ts                   |   35 +-
 36 files changed, 5796 insertions(+), 4058 deletions(-)

diff --git a/src/components/High/AssignmentCard.tsx b/src/components/High/AssignmentCard.tsx
index e53bb846..0c23ed03 100644
--- a/src/components/High/AssignmentCard.tsx
+++ b/src/components/High/AssignmentCard.tsx
@@ -1,7 +1,10 @@
 import { Session } from "@/hooks/useSessions";
 import { Assignment } from "@/interfaces/results";
 import { User } from "@/interfaces/user";
-import { activeAssignmentFilter, futureAssignmentFilter } from "@/utils/assignments";
+import {
+  activeAssignmentFilter,
+  futureAssignmentFilter,
+} from "@/utils/assignments";
 import { sortByModuleName } from "@/utils/moduleUtils";
 import clsx from "clsx";
 import moment from "moment";
@@ -11,102 +14,124 @@ import Button from "../Low/Button";
 import ModuleBadge from "../ModuleBadge";
 
 interface Props {
-	assignment: Assignment
-	user: User
-	session?: Session
-	startAssignment: (assignment: Assignment) => void
-	resumeAssignment: (session: Session) => void
+  assignment: Assignment;
+  user: User;
+  session?: Session;
+  startAssignment: (assignment: Assignment) => void;
+  resumeAssignment: (session: Session) => void;
 }
 
-export default function AssignmentCard({ user, assignment, session, startAssignment, resumeAssignment }: Props) {
-	const router = useRouter()
+export default function AssignmentCard({
+  user,
+  assignment,
+  session,
+  startAssignment,
+  resumeAssignment,
+}: Props) {
+  const hasBeenSubmitted = useMemo(
+    () => assignment.results.map((r) => r.user).includes(user.id),
+    [assignment.results, user.id]
+  );
 
-	const hasBeenSubmitted = useMemo(() => assignment.results.map((r) => r.user).includes(user.id), [assignment.results, user.id])
-
-	return (
-		<div
-			className={clsx(
-				"border-mti-gray-anti-flash flex min-w-[350px] flex-col gap-6 rounded-xl border p-4",
-				assignment.results.map((r) => r.user).includes(user.id) && "border-mti-green-light",
-			)}
-			key={assignment.id}>
-			<div className="flex flex-col gap-1">
-				<h3 className="text-mti-black/90 text-xl font-semibold">{assignment.name}</h3>
-				<span className="flex justify-between gap-1 text-lg">
-					<span>{moment(assignment.startDate).format("DD/MM/YY, HH:mm")}</span>
-					<span>-</span>
-					<span>{moment(assignment.endDate).format("DD/MM/YY, HH:mm")}</span>
-				</span>
-			</div>
-			<div className="flex w-full items-center justify-between">
-				<div className="-md:mt-2 grid w-fit min-w-[140px] grid-cols-2 grid-rows-2 place-items-center justify-between gap-4">
-					{assignment.exams
-						.filter((e) => e.assignee === user.id)
-						.map((e) => e.module)
-						.sort(sortByModuleName)
-						.map((module) => (
-							<ModuleBadge className="scale-110 w-full" key={module} module={module} />
-						))}
-				</div>
-				{futureAssignmentFilter(assignment) && !hasBeenSubmitted && (
-					<Button
-						color="rose"
-						className="-md:hidden h-full w-full max-w-[50%] !rounded-xl"
-						disabled
-						variant="outline">
-						Not yet started
-					</Button>
-				)}
-				{activeAssignmentFilter(assignment) && !hasBeenSubmitted && (
-					<>
-						<div
-							className="tooltip flex h-full w-full items-center justify-end pl-8 md:hidden"
-							data-tip="Your screen size is too small to perform an assignment">
-							<Button className="h-full w-full !rounded-xl" variant="outline">
-								Start
-							</Button>
-						</div>
-						{!session && (
-							<div
-								data-tip="You have already started this assignment!"
-								className={clsx(
-									"-md:hidden h-full w-full max-w-[50%] cursor-pointer",
-									!!session && "tooltip",
-								)}>
-								<Button
-									className={clsx("w-full h-full !rounded-xl")}
-									onClick={() => startAssignment(assignment)}
-									variant="outline">
-									Start
-								</Button>
-							</div>
-						)}
-						{!!session && (
-							<div
-								className={clsx(
-									"-md:hidden h-full w-full max-w-[50%] cursor-pointer"
-								)}>
-								<Button
-									className={clsx("w-full h-full !rounded-xl")}
-									onClick={() => resumeAssignment(session)}
-									color="green"
-									variant="outline">
-									Resume
-								</Button>
-							</div>
-						)}
-					</>
-				)}
-				{hasBeenSubmitted && (
-					<Button
-						color="green"
-						className="-md:hidden h-full w-full max-w-[50%] !rounded-xl"
-						disabled
-						variant="outline">
-						Submitted
-					</Button>
-				)}
-			</div>
-		</div>
-	)
+  return (
+    <div
+      className={clsx(
+        "border-mti-gray-anti-flash flex min-w-[350px] flex-col gap-6 rounded-xl border p-4",
+        assignment.results.map((r) => r.user).includes(user.id) &&
+          "border-mti-green-light"
+      )}
+      key={assignment.id}
+    >
+      <div className="flex flex-col gap-1">
+        <h3 className="text-mti-black/90 text-xl font-semibold">
+          {assignment.name}
+        </h3>
+        <span className="flex justify-between gap-1 text-lg">
+          <span>{moment(assignment.startDate).format("DD/MM/YY, HH:mm")}</span>
+          <span>-</span>
+          <span>{moment(assignment.endDate).format("DD/MM/YY, HH:mm")}</span>
+        </span>
+      </div>
+      <div className="flex w-full items-center justify-between">
+        <div className="-md:mt-2 grid w-fit min-w-[140px] grid-cols-2 grid-rows-2 place-items-center justify-between gap-4">
+          {assignment.exams
+            .filter((e) => e.assignee === user.id)
+            .map((e) => e.module)
+            .sort(sortByModuleName)
+            .map((module) => (
+              <ModuleBadge
+                className="scale-110 w-full"
+                key={module}
+                module={module}
+              />
+            ))}
+        </div>
+        {futureAssignmentFilter(assignment) && !hasBeenSubmitted && (
+          <Button
+            color="rose"
+            className="-md:hidden h-full w-full max-w-[50%] !rounded-xl"
+            disabled
+            variant="outline"
+          >
+            Not yet started
+          </Button>
+        )}
+        {activeAssignmentFilter(assignment) && !hasBeenSubmitted && (
+          <>
+            <div
+              className="tooltip flex h-full w-full items-center justify-end pl-8 md:hidden"
+              data-tip="Your screen size is too small to perform an assignment"
+            >
+              <Button className="h-full w-full !rounded-xl" variant="outline">
+                Start
+              </Button>
+            </div>
+            {!session && (
+              <div
+                data-tip="You have already started this assignment!"
+                className={clsx(
+                  "-md:hidden h-full w-full max-w-[50%] cursor-pointer",
+                  !!session && "tooltip"
+                )}
+              >
+                <Button
+                  className={clsx("w-full h-full !rounded-xl")}
+                  onClick={() => startAssignment(assignment)}
+                  variant="outline"
+                >
+                  Start
+                </Button>
+              </div>
+            )}
+            {!!session && (
+              <div
+                className={clsx(
+                  "-md:hidden h-full w-full max-w-[50%] cursor-pointer"
+                )}
+              >
+                <Button
+                  className={clsx("w-full h-full !rounded-xl")}
+                  onClick={() => resumeAssignment(session)}
+                  color="green"
+                  variant="outline"
+                >
+                  Resume
+                </Button>
+              </div>
+            )}
+          </>
+        )}
+        {hasBeenSubmitted && (
+          <Button
+            color="green"
+            className="-md:hidden h-full w-full max-w-[50%] !rounded-xl"
+            disabled
+            variant="outline"
+          >
+            Submitted
+          </Button>
+        )}
+      </div>
+    </div>
+  );
 }
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index f5b32313..6702ac02 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -61,7 +61,14 @@ export default function App({ Component, pageProps }: AppProps) {
 
   return pageProps?.user ? (
     <Layout user={pageProps.user} entities={entities} refreshPage={loading}>
-      {loading ? <UserProfileSkeleton /> : <Component {...pageProps} />}
+      {loading ? (
+        // TODO: Change this later to a better loading screen (example: skeletons for each page)
+        <div className="min-h-screen flex justify-center items-start">
+          <span className="loading loading-infinity w-32" />
+        </div>
+      ) : (
+        <Component entities={entities} {...pageProps} />
+      )}
     </Layout>
   ) : (
     <Component {...pageProps} />
diff --git a/src/pages/assignments/[id].tsx b/src/pages/assignments/[id].tsx
index 6a806362..987ff1cc 100644
--- a/src/pages/assignments/[id].tsx
+++ b/src/pages/assignments/[id].tsx
@@ -13,15 +13,23 @@ import clsx from "clsx";
 import { capitalize, uniqBy } from "lodash";
 import moment from "moment";
 import { useRouter } from "next/router";
-import { BsBook, BsBuilding, BsChevronLeft, BsClipboard, BsHeadphones, BsMegaphone, BsPen } from "react-icons/bs";
+import {
+  BsBook,
+  BsBuilding,
+  BsChevronLeft,
+  BsClipboard,
+  BsHeadphones,
+  BsMegaphone,
+  BsPen,
+} from "react-icons/bs";
 import { toast } from "react-toastify";
 import { futureAssignmentFilter } from "@/utils/assignments";
 import { withIronSessionSsr } from "iron-session/next";
 import { checkAccess, doesEntityAllow } from "@/utils/permissions";
 import { mapBy, redirect, serialize } from "@/utils";
 import { getAssignment } from "@/utils/assignments.be";
-import {  getEntityUsers, getUsers } from "@/utils/users.be";
-import {  getEntityWithRoles } from "@/utils/entities.be";
+import { getEntityUsers, getUsers } from "@/utils/users.be";
+import { getEntityWithRoles } from "@/utils/entities.be";
 import { sessionOptions } from "@/lib/session";
 import { EntityWithRoles } from "@/interfaces/entity";
 import Head from "next/head";
@@ -31,437 +39,629 @@ import { requestUser } from "@/utils/api";
 import { useEntityPermission } from "@/hooks/useEntityPermissions";
 import { getGradingSystemByEntity } from "@/utils/grading.be";
 
-export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => {
-	const user = await requestUser(req, res)
-	if (!user) return redirect("/login")
+export const getServerSideProps = withIronSessionSsr(
+  async ({ req, res, params }) => {
+    const user = await requestUser(req, res);
+    if (!user) return redirect("/login");
 
-	if (!checkAccess(user, ["admin", "developer", "corporate", "teacher", "mastercorporate"]))
-		return redirect("/assignments")
+    if (
+      !checkAccess(user, [
+        "admin",
+        "developer",
+        "corporate",
+        "teacher",
+        "mastercorporate",
+      ])
+    )
+      return redirect("/assignments");
 
-	res.setHeader("Cache-Control", "public, s-maxage=10, stale-while-revalidate=59");
+    res.setHeader(
+      "Cache-Control",
+      "public, s-maxage=10, stale-while-revalidate=59"
+    );
 
-	const { id } = params as { id: string };
+    const { id } = params as { id: string };
 
-	const assignment = await getAssignment(id);
-	if (!assignment) return redirect("/assignments")
+    const assignment = await getAssignment(id);
+    if (!assignment) return redirect("/assignments");
 
-	const entity = await getEntityWithRoles(assignment.entity || "")
-	if (!entity) {
-		const users = await getUsers()
-		return { props: serialize({ user, users, assignment }) };
-	}
+    const entity = await getEntityWithRoles(assignment.entity || "");
+    if (!entity) {
+      const users = await getUsers(
+        {},
+        0,
+        {},
+        {
+          _id: 0,
+          id: 1,
+          name: 1,
+          email: 1,
+        }
+      );
+      return { props: serialize({ user, users, assignment }) };
+    }
 
-	if (!doesEntityAllow(user, entity, 'view_assignments')) return redirect("/assignments")
+    if (!doesEntityAllow(user, entity, "view_assignments"))
+      return redirect("/assignments");
 
-	const users = await (checkAccess(user, ["developer", "admin"]) ? getUsers() : getEntityUsers(entity.id));
-	const gradingSystem = await getGradingSystemByEntity(entity.id)
+    const [users, gradingSystem] = await Promise.all([
+      await (checkAccess(user, ["developer", "admin"])
+        ? getUsers(
+            {},
+            0,
+            {},
+            {
+              _id: 0,
+              id: 1,
+              name: 1,
+              email: 1,
+            }
+          )
+        : getEntityUsers(
+            entity.id,
+            0,
+            {},
+            {
+              _id: 0,
+              id: 1,
+              name: 1,
+              email: 1,
+            }
+          )),
+      getGradingSystemByEntity(entity.id),
+    ]);
 
-	return { props: serialize({ user, users, entity, assignment, gradingSystem }) };
-}, sessionOptions);
+    return {
+      props: serialize({ user, users, entity, assignment, gradingSystem }),
+    };
+  },
+  sessionOptions
+);
 
 interface Props {
-	user: User;
-	users: User[];
-	assignment: Assignment;
-	entity?: EntityWithRoles
-	gradingSystem?: Grading
+  user: User;
+  users: User[];
+  assignment: Assignment;
+  entity?: EntityWithRoles;
+  gradingSystem?: Grading;
 }
 
-export default function AssignmentView({ user, users, entity, assignment, gradingSystem }: Props) {
-	const canDeleteAssignment = useEntityPermission(user, entity, 'delete_assignment')
-	const canStartAssignment = useEntityPermission(user, entity, 'start_assignment')
+export default function AssignmentView({
+  user,
+  users,
+  entity,
+  assignment,
+  gradingSystem,
+}: Props) {
+  const canDeleteAssignment = useEntityPermission(
+    user,
+    entity,
+    "delete_assignment"
+  );
+  const canStartAssignment = useEntityPermission(
+    user,
+    entity,
+    "start_assignment"
+  );
 
-	const router = useRouter();
+  const router = useRouter();
 
-	const dispatch = useExamStore((state) => state.dispatch);
+  const dispatch = useExamStore((state) => state.dispatch);
 
-	const deleteAssignment = async () => {
-		if (!canDeleteAssignment) return
-		if (!confirm("Are you sure you want to delete this assignment?")) return;
+  const deleteAssignment = async () => {
+    if (!canDeleteAssignment) return;
+    if (!confirm("Are you sure you want to delete this assignment?")) return;
 
-		axios
-			.delete(`/api/assignments/${assignment?.id}`)
-			.then(() => toast.success(`Successfully deleted the assignment "${assignment?.name}".`))
-			.catch(() => toast.error("Something went wrong, please try again later."))
-			.finally(() => router.push("/assignments"));
-	};
+    axios
+      .delete(`/api/assignments/${assignment?.id}`)
+      .then(() =>
+        toast.success(
+          `Successfully deleted the assignment "${assignment?.name}".`
+        )
+      )
+      .catch(() => toast.error("Something went wrong, please try again later."))
+      .finally(() => router.push("/assignments"));
+  };
 
-	const startAssignment = () => {
-		if (!canStartAssignment) return
-		if (!confirm("Are you sure you want to start this assignment?")) return;
+  const startAssignment = () => {
+    if (!canStartAssignment) return;
+    if (!confirm("Are you sure you want to start this assignment?")) return;
 
-		axios
-			.post(`/api/assignments/${assignment.id}/start`)
-			.then(() => {
-				toast.success(`The assignment "${assignment.name}" has been started successfully!`);
-				router.replace(router.asPath);
-			})
-			.catch((e) => {
-				console.log(e);
-				toast.error("Something went wrong, please try again later!");
-			});
-	};
+    axios
+      .post(`/api/assignments/${assignment.id}/start`)
+      .then(() => {
+        toast.success(
+          `The assignment "${assignment.name}" has been started successfully!`
+        );
+        router.replace(router.asPath);
+      })
+      .catch((e) => {
+        console.log(e);
+        toast.error("Something went wrong, please try again later!");
+      });
+  };
 
-	const formatTimestamp = (timestamp: string) => {
-		const date = moment(parseInt(timestamp));
-		const formatter = "YYYY/MM/DD - HH:mm";
+  const formatTimestamp = (timestamp: string) => {
+    const date = moment(parseInt(timestamp));
+    const formatter = "YYYY/MM/DD - HH:mm";
 
-		return date.format(formatter);
-	};
+    return date.format(formatter);
+  };
 
-	const calculateAverageModuleScore = (module: Module) => {
-		if (!assignment) return -1;
+  const calculateAverageModuleScore = (module: Module) => {
+    if (!assignment) return -1;
 
-		const resultModuleBandScores = assignment.results.map((r) => {
-			const moduleStats = r.stats.filter((s) => s.module === module);
+    const resultModuleBandScores = assignment.results.map((r) => {
+      const moduleStats = r.stats.filter((s) => s.module === module);
 
-			const correct = moduleStats.reduce((acc, curr) => acc + curr.score.correct, 0);
-			const total = moduleStats.reduce((acc, curr) => acc + curr.score.total, 0);
-			return calculateBandScore(correct, total, module, r.type);
-		});
+      const correct = moduleStats.reduce(
+        (acc, curr) => acc + curr.score.correct,
+        0
+      );
+      const total = moduleStats.reduce(
+        (acc, curr) => acc + curr.score.total,
+        0
+      );
+      return calculateBandScore(correct, total, module, r.type);
+    });
 
-		return resultModuleBandScores.length === 0 ? -1 : resultModuleBandScores.reduce((acc, curr) => acc + curr, 0) / assignment.results.length;
-	};
+    return resultModuleBandScores.length === 0
+      ? -1
+      : resultModuleBandScores.reduce((acc, curr) => acc + curr, 0) /
+          assignment.results.length;
+  };
 
-	const aggregateScoresByModule = (stats: Stat[]): { module: Module; total: number; missing: number; correct: number }[] => {
-		const scores: {
-			[key in Module]: { total: number; missing: number; correct: number };
-		} = {
-			reading: {
-				total: 0,
-				correct: 0,
-				missing: 0,
-			},
-			listening: {
-				total: 0,
-				correct: 0,
-				missing: 0,
-			},
-			writing: {
-				total: 0,
-				correct: 0,
-				missing: 0,
-			},
-			speaking: {
-				total: 0,
-				correct: 0,
-				missing: 0,
-			},
-			level: {
-				total: 0,
-				correct: 0,
-				missing: 0,
-			},
-		};
+  const aggregateScoresByModule = (
+    stats: Stat[]
+  ): { module: Module; total: number; missing: number; correct: number }[] => {
+    const scores: {
+      [key in Module]: { total: number; missing: number; correct: number };
+    } = {
+      reading: {
+        total: 0,
+        correct: 0,
+        missing: 0,
+      },
+      listening: {
+        total: 0,
+        correct: 0,
+        missing: 0,
+      },
+      writing: {
+        total: 0,
+        correct: 0,
+        missing: 0,
+      },
+      speaking: {
+        total: 0,
+        correct: 0,
+        missing: 0,
+      },
+      level: {
+        total: 0,
+        correct: 0,
+        missing: 0,
+      },
+    };
 
-		stats.filter(x => !x.isPractice).forEach((x) => {
-			scores[x.module!] = {
-				total: scores[x.module!].total + x.score.total,
-				correct: scores[x.module!].correct + x.score.correct,
-				missing: scores[x.module!].missing + x.score.missing,
-			};
-		});
+    stats
+      .filter((x) => !x.isPractice)
+      .forEach((x) => {
+        scores[x.module!] = {
+          total: scores[x.module!].total + x.score.total,
+          correct: scores[x.module!].correct + x.score.correct,
+          missing: scores[x.module!].missing + x.score.missing,
+        };
+      });
 
-		return Object.keys(scores)
-			.filter((x) => scores[x as Module].total > 0)
-			.map((x) => ({ module: x as Module, ...scores[x as Module] }));
-	};
+    return Object.keys(scores)
+      .filter((x) => scores[x as Module].total > 0)
+      .map((x) => ({ module: x as Module, ...scores[x as Module] }));
+  };
 
-	const levelAverage = (aggregatedLevels: { module: Module, level: number }[]) =>
-		aggregatedLevels.reduce((accumulator, current) => accumulator + current.level, 0) / aggregatedLevels.length
+  const levelAverage = (
+    aggregatedLevels: { module: Module; level: number }[]
+  ) =>
+    aggregatedLevels.reduce(
+      (accumulator, current) => accumulator + current.level,
+      0
+    ) / aggregatedLevels.length;
 
-	const renderLevelScore = (stats: Stat[], aggregatedLevels: { module: Module, level: number }[]) => {
-		const defaultLevelScore = levelAverage(aggregatedLevels).toFixed(1)
-		if (!stats.every(s => s.module === "level")) return defaultLevelScore
-		if (!gradingSystem) return defaultLevelScore
+  const renderLevelScore = (
+    stats: Stat[],
+    aggregatedLevels: { module: Module; level: number }[]
+  ) => {
+    const defaultLevelScore = levelAverage(aggregatedLevels).toFixed(1);
+    if (!stats.every((s) => s.module === "level")) return defaultLevelScore;
+    if (!gradingSystem) return defaultLevelScore;
 
-		const score = {
-			correct: stats.reduce((acc, curr) => acc + curr.score.correct, 0),
-			total: stats.reduce((acc, curr) => acc + curr.score.total, 0)
-		}
+    const score = {
+      correct: stats.reduce((acc, curr) => acc + curr.score.correct, 0),
+      total: stats.reduce((acc, curr) => acc + curr.score.total, 0),
+    };
 
-		const level: number = calculateBandScore(score.correct, score.total, "level", user.focus);
+    const level: number = calculateBandScore(
+      score.correct,
+      score.total,
+      "level",
+      user.focus
+    );
 
-		return getGradingLabel(level, gradingSystem.steps)
-	}
+    return getGradingLabel(level, gradingSystem.steps);
+  };
 
-	const customContent = (stats: Stat[], user: string, focus: "academic" | "general") => {
-		const correct = stats.reduce((accumulator, current) => accumulator + current.score.correct, 0);
-		const total = stats.reduce((accumulator, current) => accumulator + current.score.total, 0);
-		const aggregatedScores = aggregateScoresByModule(stats).filter((x) => x.total > 0);
+  const customContent = (
+    stats: Stat[],
+    user: string,
+    focus: "academic" | "general"
+  ) => {
+    const correct = stats.reduce(
+      (accumulator, current) => accumulator + current.score.correct,
+      0
+    );
+    const total = stats.reduce(
+      (accumulator, current) => accumulator + current.score.total,
+      0
+    );
+    const aggregatedScores = aggregateScoresByModule(stats).filter(
+      (x) => x.total > 0
+    );
 
-		const aggregatedLevels = aggregatedScores.map((x) => ({
-			module: x.module,
-			level: calculateBandScore(x.correct, x.total, x.module, focus),
-		}));
+    const aggregatedLevels = aggregatedScores.map((x) => ({
+      module: x.module,
+      level: calculateBandScore(x.correct, x.total, x.module, focus),
+    }));
 
-		const timeSpent = stats[0].timeSpent;
+    const timeSpent = stats[0].timeSpent;
 
-		const selectExam = () => {
-			const examPromises = uniqBy(stats, "exam").map((stat) => getExamById(stat.module, stat.exam));
+    const selectExam = () => {
+      const examPromises = uniqBy(stats, "exam").map((stat) =>
+        getExamById(stat.module, stat.exam)
+      );
 
-			Promise.all(examPromises).then((exams) => {
-				if (exams.every((x) => !!x)) {
-					dispatch({
-						type: 'INIT_SOLUTIONS', payload: {
-							exams: exams.map((x) => x!).sort(sortByModule),
-							modules: exams
-								.map((x) => x!)
-								.sort(sortByModule)
-								.map((x) => x!.module),
-							stats,
-						}
-					});
-					router.push("/exam");
-				}
-			});
-		};
+      Promise.all(examPromises).then((exams) => {
+        if (exams.every((x) => !!x)) {
+          dispatch({
+            type: "INIT_SOLUTIONS",
+            payload: {
+              exams: exams.map((x) => x!).sort(sortByModule),
+              modules: exams
+                .map((x) => x!)
+                .sort(sortByModule)
+                .map((x) => x!.module),
+              stats,
+            },
+          });
+          router.push("/exam");
+        }
+      });
+    };
 
-		const content = (
-			<>
-				<div className="-md:items-center flex w-full justify-between 2xl:items-center">
-					<div className="-md:gap-2 -md:items-center flex md:flex-col md:gap-1 2xl:flex-row 2xl:items-center 2xl:gap-2">
-						<span className="font-medium">{formatTimestamp(stats[0].date.toString())}</span>
-						{timeSpent && (
-							<>
-								<span className="md:hidden 2xl:flex">• </span>
-								<span className="text-sm">{Math.floor(timeSpent / 60)} minutes</span>
-							</>
-						)}
-					</div>
-					<span
-						className={clsx(
-							correct / total >= 0.7 && "text-mti-purple",
-							correct / total >= 0.3 && correct / total < 0.7 && "text-mti-red",
-							correct / total < 0.3 && "text-mti-rose",
-						)}>
-						Level{' '}
-						{renderLevelScore(stats, aggregatedLevels)}
-					</span>
-				</div>
+    const content = (
+      <>
+        <div className="-md:items-center flex w-full justify-between 2xl:items-center">
+          <div className="-md:gap-2 -md:items-center flex md:flex-col md:gap-1 2xl:flex-row 2xl:items-center 2xl:gap-2">
+            <span className="font-medium">
+              {formatTimestamp(stats[0].date.toString())}
+            </span>
+            {timeSpent && (
+              <>
+                <span className="md:hidden 2xl:flex">• </span>
+                <span className="text-sm">
+                  {Math.floor(timeSpent / 60)} minutes
+                </span>
+              </>
+            )}
+          </div>
+          <span
+            className={clsx(
+              correct / total >= 0.7 && "text-mti-purple",
+              correct / total >= 0.3 && correct / total < 0.7 && "text-mti-red",
+              correct / total < 0.3 && "text-mti-rose"
+            )}
+          >
+            Level {renderLevelScore(stats, aggregatedLevels)}
+          </span>
+        </div>
 
-				<div className="flex w-full flex-col gap-1">
-					<div className="-md:mt-2 grid w-full grid-cols-4 place-items-start gap-2">
-						{aggregatedLevels.map(({ module, level }) => (
-							<div
-								key={module}
-								className={clsx(
-									"-md:px-4 flex w-fit items-center gap-2 rounded-xl py-2 text-white md:px-2 xl:px-4",
-									module === "reading" && "bg-ielts-reading",
-									module === "listening" && "bg-ielts-listening",
-									module === "writing" && "bg-ielts-writing",
-									module === "speaking" && "bg-ielts-speaking",
-									module === "level" && "bg-ielts-level",
-								)}>
-								{module === "reading" && <BsBook className="h-4 w-4" />}
-								{module === "listening" && <BsHeadphones className="h-4 w-4" />}
-								{module === "writing" && <BsPen className="h-4 w-4" />}
-								{module === "speaking" && <BsMegaphone className="h-4 w-4" />}
-								{module === "level" && <BsClipboard className="h-4 w-4" />}
-								<span className="text-sm">{level.toFixed(1)}</span>
-							</div>
-						))}
-					</div>
-				</div>
-			</>
-		);
+        <div className="flex w-full flex-col gap-1">
+          <div className="-md:mt-2 grid w-full grid-cols-4 place-items-start gap-2">
+            {aggregatedLevels.map(({ module, level }) => (
+              <div
+                key={module}
+                className={clsx(
+                  "-md:px-4 flex w-fit items-center gap-2 rounded-xl py-2 text-white md:px-2 xl:px-4",
+                  module === "reading" && "bg-ielts-reading",
+                  module === "listening" && "bg-ielts-listening",
+                  module === "writing" && "bg-ielts-writing",
+                  module === "speaking" && "bg-ielts-speaking",
+                  module === "level" && "bg-ielts-level"
+                )}
+              >
+                {module === "reading" && <BsBook className="h-4 w-4" />}
+                {module === "listening" && <BsHeadphones className="h-4 w-4" />}
+                {module === "writing" && <BsPen className="h-4 w-4" />}
+                {module === "speaking" && <BsMegaphone className="h-4 w-4" />}
+                {module === "level" && <BsClipboard className="h-4 w-4" />}
+                <span className="text-sm">{level.toFixed(1)}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </>
+    );
 
-		return (
-			<div className="flex flex-col gap-2">
-				<span>
-					{(() => {
-						const student = users.find((u) => u.id === user);
-						return `${student?.name} (${student?.email})`;
-					})()}
-				</span>
-				<div
-					key={user}
-					className={clsx(
-						"border-mti-gray-platinum -md:hidden flex cursor-pointer flex-col gap-4 rounded-xl border p-4 transition duration-300 ease-in-out",
-						correct / total >= 0.7 && "hover:border-mti-purple",
-						correct / total >= 0.3 && correct / total < 0.7 && "hover:border-mti-red",
-						correct / total < 0.3 && "hover:border-mti-rose",
-					)}
-					onClick={selectExam}
-					role="button">
-					{content}
-				</div>
-				<div
-					key={user}
-					className={clsx(
-						"border-mti-gray-platinum -md:tooltip flex cursor-pointer flex-col gap-4 rounded-xl border p-4 transition duration-300 ease-in-out md:hidden",
-						correct / total >= 0.7 && "hover:border-mti-purple",
-						correct / total >= 0.3 && correct / total < 0.7 && "hover:border-mti-red",
-						correct / total < 0.3 && "hover:border-mti-rose",
-					)}
-					data-tip="Your screen size is too small to view previous exams."
-					role="button">
-					{content}
-				</div>
-			</div>
-		);
-	};
+    return (
+      <div className="flex flex-col gap-2">
+        <span>
+          {(() => {
+            const student = users.find((u) => u.id === user);
+            return `${student?.name} (${student?.email})`;
+          })()}
+        </span>
+        <div
+          key={user}
+          className={clsx(
+            "border-mti-gray-platinum -md:hidden flex cursor-pointer flex-col gap-4 rounded-xl border p-4 transition duration-300 ease-in-out",
+            correct / total >= 0.7 && "hover:border-mti-purple",
+            correct / total >= 0.3 &&
+              correct / total < 0.7 &&
+              "hover:border-mti-red",
+            correct / total < 0.3 && "hover:border-mti-rose"
+          )}
+          onClick={selectExam}
+          role="button"
+        >
+          {content}
+        </div>
+        <div
+          key={user}
+          className={clsx(
+            "border-mti-gray-platinum -md:tooltip flex cursor-pointer flex-col gap-4 rounded-xl border p-4 transition duration-300 ease-in-out md:hidden",
+            correct / total >= 0.7 && "hover:border-mti-purple",
+            correct / total >= 0.3 &&
+              correct / total < 0.7 &&
+              "hover:border-mti-red",
+            correct / total < 0.3 && "hover:border-mti-rose"
+          )}
+          data-tip="Your screen size is too small to view previous exams."
+          role="button"
+        >
+          {content}
+        </div>
+      </div>
+    );
+  };
 
-	const shouldRenderStart = () => {
-		if (assignment) {
-			if (futureAssignmentFilter(assignment)) {
-				return true;
-			}
-		}
+  const shouldRenderStart = () => {
+    if (assignment) {
+      if (futureAssignmentFilter(assignment)) {
+        return true;
+      }
+    }
 
-		return false;
-	};
+    return false;
+  };
 
-	const removeInactiveAssignees = () => {
-		const mappedResults = mapBy(assignment.results, 'user')
-		const inactiveAssignees = assignment.assignees.filter((a) => !mappedResults.includes(a))
-		const activeAssignees = assignment.assignees.filter((a) => mappedResults.includes(a))
+  const removeInactiveAssignees = () => {
+    const mappedResults = mapBy(assignment.results, "user");
+    const inactiveAssignees = assignment.assignees.filter(
+      (a) => !mappedResults.includes(a)
+    );
+    const activeAssignees = assignment.assignees.filter((a) =>
+      mappedResults.includes(a)
+    );
 
-		if (!confirm(`Are you sure you want to remove ${inactiveAssignees.length} assignees?`)) return
+    if (
+      !confirm(
+        `Are you sure you want to remove ${inactiveAssignees.length} assignees?`
+      )
+    )
+      return;
 
-		axios
-			.patch(`/api/assignments/${assignment.id}`, { assignees: activeAssignees })
-			.then(() => {
-				toast.success(`The assignment "${assignment.name}" has been updated successfully!`);
-				router.replace(router.asPath);
-			})
-			.catch((e) => {
-				console.log(e);
-				toast.error("Something went wrong, please try again later!");
-			});
-	}
+    axios
+      .patch(`/api/assignments/${assignment.id}`, {
+        assignees: activeAssignees,
+      })
+      .then(() => {
+        toast.success(
+          `The assignment "${assignment.name}" has been updated successfully!`
+        );
+        router.replace(router.asPath);
+      })
+      .catch((e) => {
+        console.log(e);
+        toast.error("Something went wrong, please try again later!");
+      });
+  };
 
-	const copyLink = async () => {
-		const origin = window.location.origin
-		await navigator.clipboard.writeText(`${origin}/exam?assignment=${assignment.id}`)
-		toast.success("The URL to the assignment has been copied to your clipboard!")
-	}
+  const copyLink = async () => {
+    const origin = window.location.origin;
+    await navigator.clipboard.writeText(
+      `${origin}/exam?assignment=${assignment.id}`
+    );
+    toast.success(
+      "The URL to the assignment has been copied to your clipboard!"
+    );
+  };
 
-	return (
-		<>
-			<Head>
-				<title>{assignment.name} | 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>
-			<>
-				<div className="flex flex-col gap-4">
-					<div className="w-full flex items-center justify-between">
-						<div className="flex items-center gap-2">
-							<Link href="/assignments" className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
-								<BsChevronLeft />
-							</Link>
-							<h2 className="font-bold text-2xl">{assignment.name}</h2>
-						</div>
-						{!!entity && (
-							<span className="flex items-center gap-2">
-								<BsBuilding className="text-xl" /> {entity.label}
-							</span>
-						)}
-					</div>
-					<Separator />
-				</div>
-				<div className="mt-4 flex w-full flex-col gap-4">
-					<ProgressBar
-						color="purple"
-						label={`${assignment?.results.length}/${assignment?.assignees.length} assignees completed`}
-						className="h-6"
-						textClassName={
-							(assignment?.results.length || 0) / (assignment?.assignees.length || 1) < 0.5
-								? "!text-mti-gray-dim font-light"
-								: "text-white"
-						}
-						percentage={((assignment?.results.length || 0) / (assignment?.assignees.length || 1)) * 100}
-					/>
-					<div className="flex items-start gap-8">
-						<div className="flex flex-col gap-2">
-							<span>Start Date: {moment(assignment?.startDate).format("DD/MM/YY, HH:mm")}</span>
-							<span>End Date: {moment(assignment?.endDate).format("DD/MM/YY, HH:mm")}</span>
-						</div>
-						<div className="flex flex-col gap-2">
-							<span>
-								Assignees:{" "}
-								{users
-									.filter((u) => assignment?.assignees.includes(u.id))
-									.map((u) => `${u.name} (${u.email})`)
-									.join(", ")}
-							</span>
-							<span>Assigner: {getUserName(users.find((x) => x.id === assignment?.assigner))}</span>
-						</div>
-					</div>
+  return (
+    <>
+      <Head>
+        <title>{assignment.name} | 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>
+      <>
+        <div className="flex flex-col gap-4">
+          <div className="w-full flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <Link
+                href="/assignments"
+                className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl"
+              >
+                <BsChevronLeft />
+              </Link>
+              <h2 className="font-bold text-2xl">{assignment.name}</h2>
+            </div>
+            {!!entity && (
+              <span className="flex items-center gap-2">
+                <BsBuilding className="text-xl" /> {entity.label}
+              </span>
+            )}
+          </div>
+          <Separator />
+        </div>
+        <div className="mt-4 flex w-full flex-col gap-4">
+          <ProgressBar
+            color="purple"
+            label={`${assignment?.results.length}/${assignment?.assignees.length} assignees completed`}
+            className="h-6"
+            textClassName={
+              (assignment?.results.length || 0) /
+                (assignment?.assignees.length || 1) <
+              0.5
+                ? "!text-mti-gray-dim font-light"
+                : "text-white"
+            }
+            percentage={
+              ((assignment?.results.length || 0) /
+                (assignment?.assignees.length || 1)) *
+              100
+            }
+          />
+          <div className="flex items-start gap-8">
+            <div className="flex flex-col gap-2">
+              <span>
+                Start Date:{" "}
+                {moment(assignment?.startDate).format("DD/MM/YY, HH:mm")}
+              </span>
+              <span>
+                End Date:{" "}
+                {moment(assignment?.endDate).format("DD/MM/YY, HH:mm")}
+              </span>
+            </div>
+            <div className="flex flex-col gap-2">
+              <span>
+                Assignees:{" "}
+                {users
+                  .filter((u) => assignment?.assignees.includes(u.id))
+                  .map((u) => `${u.name} (${u.email})`)
+                  .join(", ")}
+              </span>
+              <span>
+                Assigner:{" "}
+                {getUserName(users.find((x) => x.id === assignment?.assigner))}
+              </span>
+            </div>
+          </div>
 
-					{assignment.assignees.length !== 0 && assignment.results.length !== assignment.assignees.length && (
-						<Button onClick={removeInactiveAssignees} variant="outline">Remove Inactive Assignees</Button>
-					)}
+          {assignment.assignees.length !== 0 &&
+            assignment.results.length !== assignment.assignees.length && (
+              <Button onClick={removeInactiveAssignees} variant="outline">
+                Remove Inactive Assignees
+              </Button>
+            )}
 
-					<div className="flex flex-col gap-2">
-						<span className="text-xl font-bold">Average Scores</span>
-						<div className="-md:mt-2 flex w-full items-center gap-4">
-							{assignment &&
-								uniqBy(assignment.exams, (x) => x.module).map(({ module }) => (
-									<div
-										data-tip={capitalize(module)}
-										key={module}
-										className={clsx(
-											"-md:px-4 tooltip flex w-fit items-center gap-2 rounded-xl py-2 text-white md:px-2 xl:px-4",
-											module === "reading" && "bg-ielts-reading",
-											module === "listening" && "bg-ielts-listening",
-											module === "writing" && "bg-ielts-writing",
-											module === "speaking" && "bg-ielts-speaking",
-											module === "level" && "bg-ielts-level",
-										)}>
-										{module === "reading" && <BsBook className="h-4 w-4" />}
-										{module === "listening" && <BsHeadphones className="h-4 w-4" />}
-										{module === "writing" && <BsPen className="h-4 w-4" />}
-										{module === "speaking" && <BsMegaphone className="h-4 w-4" />}
-										{module === "level" && <BsClipboard className="h-4 w-4" />}
-										{calculateAverageModuleScore(module) > -1 && (
-											<span className="text-sm">{calculateAverageModuleScore(module).toFixed(1)}</span>
-										)}
-									</div>
-								))}
-						</div>
-					</div>
-					<div className="flex flex-col gap-2">
-						<span className="text-xl font-bold">
-							Results ({assignment?.results.length}/{assignment?.assignees.length})
-						</span>
-						<div>
-							{assignment && assignment?.results.length > 0 && (
-								<div className="grid w-full grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3 xl:gap-6">
-									{assignment.results.map((r) => customContent(r.stats, r.user, r.type))}
-								</div>
-							)}
-							{assignment && assignment?.results.length === 0 && <span className="ml-1 font-semibold">No results yet...</span>}
-						</div>
-					</div>
+          <div className="flex flex-col gap-2">
+            <span className="text-xl font-bold">Average Scores</span>
+            <div className="-md:mt-2 flex w-full items-center gap-4">
+              {assignment &&
+                uniqBy(assignment.exams, (x) => x.module).map(({ module }) => (
+                  <div
+                    data-tip={capitalize(module)}
+                    key={module}
+                    className={clsx(
+                      "-md:px-4 tooltip flex w-fit items-center gap-2 rounded-xl py-2 text-white md:px-2 xl:px-4",
+                      module === "reading" && "bg-ielts-reading",
+                      module === "listening" && "bg-ielts-listening",
+                      module === "writing" && "bg-ielts-writing",
+                      module === "speaking" && "bg-ielts-speaking",
+                      module === "level" && "bg-ielts-level"
+                    )}
+                  >
+                    {module === "reading" && <BsBook className="h-4 w-4" />}
+                    {module === "listening" && (
+                      <BsHeadphones className="h-4 w-4" />
+                    )}
+                    {module === "writing" && <BsPen className="h-4 w-4" />}
+                    {module === "speaking" && (
+                      <BsMegaphone className="h-4 w-4" />
+                    )}
+                    {module === "level" && <BsClipboard className="h-4 w-4" />}
+                    {calculateAverageModuleScore(module) > -1 && (
+                      <span className="text-sm">
+                        {calculateAverageModuleScore(module).toFixed(1)}
+                      </span>
+                    )}
+                  </div>
+                ))}
+            </div>
+          </div>
+          <div className="flex flex-col gap-2">
+            <span className="text-xl font-bold">
+              Results ({assignment?.results.length}/
+              {assignment?.assignees.length})
+            </span>
+            <div>
+              {assignment && assignment?.results.length > 0 && (
+                <div className="grid w-full grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3 xl:gap-6">
+                  {assignment.results.map((r) =>
+                    customContent(r.stats, r.user, r.type)
+                  )}
+                </div>
+              )}
+              {assignment && assignment?.results.length === 0 && (
+                <span className="ml-1 font-semibold">No results yet...</span>
+              )}
+            </div>
+          </div>
 
-					<div className="flex gap-4 w-full items-center justify-end">
-						<Button variant="outline" color="purple" className="w-full max-w-[200px]" onClick={copyLink}>
-							Copy Link
-						</Button>
-						{assignment &&
-							(assignment.results.length === assignment.assignees.length || moment().isAfter(moment(assignment.endDate))) && (
-								<Button variant="outline" color="red" className="w-full max-w-[200px]" onClick={deleteAssignment}>
-									Delete
-								</Button>
-							)}
-						{/** if the assignment is not deemed as active yet, display start */}
-						{shouldRenderStart() && (
-							<Button variant="outline" color="green" className="w-full max-w-[200px]" onClick={startAssignment}>
-								Start
-							</Button>
-						)}
-						<Button onClick={() => router.push("/assignments")} className="w-full max-w-[200px]">
-							Close
-						</Button>
-					</div>
-				</div>
-			</>
-		</>
-	);
+          <div className="flex gap-4 w-full items-center justify-end">
+            <Button
+              variant="outline"
+              color="purple"
+              className="w-full max-w-[200px]"
+              onClick={copyLink}
+            >
+              Copy Link
+            </Button>
+            {assignment &&
+              (assignment.results.length === assignment.assignees.length ||
+                moment().isAfter(moment(assignment.endDate))) && (
+                <Button
+                  variant="outline"
+                  color="red"
+                  className="w-full max-w-[200px]"
+                  onClick={deleteAssignment}
+                >
+                  Delete
+                </Button>
+              )}
+            {/** if the assignment is not deemed as active yet, display start */}
+            {shouldRenderStart() && (
+              <Button
+                variant="outline"
+                color="green"
+                className="w-full max-w-[200px]"
+                onClick={startAssignment}
+              >
+                Start
+              </Button>
+            )}
+            <Button
+              onClick={() => router.push("/assignments")}
+              className="w-full max-w-[200px]"
+            >
+              Close
+            </Button>
+          </div>
+        </div>
+      </>
+    </>
+  );
 }
diff --git a/src/pages/assignments/creator/[id].tsx b/src/pages/assignments/creator/[id].tsx
index 5c9d18bb..d97505c8 100644
--- a/src/pages/assignments/creator/[id].tsx
+++ b/src/pages/assignments/creator/[id].tsx
@@ -18,7 +18,11 @@ import { requestUser } from "@/utils/api";
 import { getAssignment } from "@/utils/assignments.be";
 import { getEntitiesWithRoles } from "@/utils/entities.be";
 import { getGroups, getGroupsByEntities } from "@/utils/groups.be";
-import { checkAccess, doesEntityAllow, findAllowedEntities } from "@/utils/permissions";
+import {
+  checkAccess,
+  doesEntityAllow,
+  findAllowedEntities,
+} from "@/utils/permissions";
 import { calculateAverageLevel } from "@/utils/score";
 import { getEntitiesUsers, getUsers } from "@/utils/users.be";
 import axios from "axios";
@@ -32,563 +36,834 @@ import { useRouter } from "next/router";
 import { generate } from "random-words";
 import { useEffect, useMemo, useState } from "react";
 import ReactDatePicker from "react-datepicker";
-import { BsBook, BsCheckCircle, BsChevronLeft, BsClipboard, BsHeadphones, BsMegaphone, BsPen, BsXCircle } from "react-icons/bs";
+import {
+  BsBook,
+  BsCheckCircle,
+  BsChevronLeft,
+  BsClipboard,
+  BsHeadphones,
+  BsMegaphone,
+  BsPen,
+  BsXCircle,
+} from "react-icons/bs";
 import { toast } from "react-toastify";
 
-export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => {
-	const user = await requestUser(req, res)
-	if (!user) return redirect("/login")
+export const getServerSideProps = withIronSessionSsr(
+  async ({ req, res, params }) => {
+    const user = await requestUser(req, res);
+    if (!user) return redirect("/login");
 
-	res.setHeader("Cache-Control", "public, s-maxage=10, stale-while-revalidate=59");
+    res.setHeader(
+      "Cache-Control",
+      "public, s-maxage=10, stale-while-revalidate=59"
+    );
 
-	const { id } = params as { id: string };
-	const entityIDS = mapBy(user.entities, "id") || [];
+    const { id } = params as { id: string };
+    const entityIDS = mapBy(user.entities, "id") || [];
+    const isAdmin = checkAccess(user, ["developer", "admin"]);
 
-	const assignment = await getAssignment(id);
-	if (!assignment) return redirect("/assignments")
+    const [assignment, entities] = await Promise.all([
+      getAssignment(id),
+      getEntitiesWithRoles(isAdmin ? undefined : entityIDS),
+    ]);
 
-	const entities = await (checkAccess(user, ["developer", "admin"]) ? getEntitiesWithRoles() : getEntitiesWithRoles(entityIDS));
-	const entity = entities.find((e) => e.id === assignment.entity)
+    if (!assignment) return redirect("/assignments");
+    const entity = entities.find((e) => e.id === assignment.entity);
 
-	if (!entity) return redirect("/assignments")
-	if (!doesEntityAllow(user, entity, 'edit_assignment')) return redirect("/assignments")
+    if (!entity) return redirect("/assignments");
 
-	const allowedEntities = findAllowedEntities(user, entities, 'edit_assignment')
+    if (!doesEntityAllow(user, entity, "edit_assignment"))
+      return redirect("/assignments");
 
-	const users = await (checkAccess(user, ["developer", "admin"]) ? getUsers() : getEntitiesUsers(mapBy(allowedEntities, 'id')));
-	const groups = await (checkAccess(user, ["developer", "admin"]) ? getGroups() : getGroupsByEntities(mapBy(allowedEntities, 'id')));
+    const allowedEntities = findAllowedEntities(
+      user,
+      entities,
+      "edit_assignment"
+    );
 
-	return { props: serialize({ user, users, entities: allowedEntities, assignment, groups }) };
-}, sessionOptions);
+    const allowEntitiesIDs = mapBy(allowedEntities, "id");
+
+    const [users, groups] = await Promise.all([
+      isAdmin
+        ? getUsers(
+            {},
+            0,
+            {},
+            {
+              _id: 0,
+              id: 1,
+              type: 1,
+              name: 1,
+              email: 1,
+              levels: 1,
+            }
+          )
+        : getEntitiesUsers(allowEntitiesIDs, {}, 0, {
+            _id: 0,
+            id: 1,
+            type: 1,
+            name: 1,
+            email: 1,
+            levels: 1,
+          }),
+      isAdmin ? getGroups() : getGroupsByEntities(allowEntitiesIDs),
+    ]);
+
+    return {
+      props: serialize({
+        user,
+        users,
+        entities: allowedEntities,
+        assignment,
+        groups,
+      }),
+    };
+  },
+  sessionOptions
+);
 
 interface Props {
-	assignment: Assignment;
-	groups: Group[];
-	user: User;
-	users: User[];
-	entities: EntityWithRoles[];
+  assignment: Assignment;
+  groups: Group[];
+  user: User;
+  users: User[];
+  entities: EntityWithRoles[];
 }
 
 const SIZE = 9;
 
-export default function AssignmentsPage({ assignment, user, users, entities, groups }: Props) {
-	const [selectedModules, setSelectedModules] = useState<Module[]>(assignment.exams.map((e) => e.module));
-	const [assignees, setAssignees] = useState<string[]>(assignment.assignees);
-	const [teachers, setTeachers] = useState<string[]>(assignment.teachers || []);
-	const [entity, setEntity] = useState<string | undefined>(assignment.entity || entities[0]?.id);
-	const [name, setName] = useState(assignment.name);
-	const [isLoading, setIsLoading] = useState(false);
+export default function AssignmentsPage({
+  assignment,
+  user,
+  users,
+  entities,
+  groups,
+}: Props) {
+  const [selectedModules, setSelectedModules] = useState<Module[]>(
+    assignment.exams.map((e) => e.module)
+  );
+  const [assignees, setAssignees] = useState<string[]>(assignment.assignees);
+  const [teachers, setTeachers] = useState<string[]>(assignment.teachers || []);
+  const [entity, setEntity] = useState<string | undefined>(
+    assignment.entity || entities[0]?.id
+  );
+  const [name, setName] = useState(assignment.name);
+  const [isLoading, setIsLoading] = useState(false);
 
-	const [startDate, setStartDate] = useState<Date | null>(moment(assignment.startDate).toDate());
-	const [endDate, setEndDate] = useState<Date | null>(moment(assignment.endDate).toDate());
+  const [startDate, setStartDate] = useState<Date | null>(
+    moment(assignment.startDate).toDate()
+  );
+  const [endDate, setEndDate] = useState<Date | null>(
+    moment(assignment.endDate).toDate()
+  );
 
-	const [variant, setVariant] = useState<Variant>("full");
-	const [instructorGender, setInstructorGender] = useState<InstructorGender>(assignment?.instructorGender || "varied");
+  const [variant, setVariant] = useState<Variant>("full");
+  const [instructorGender, setInstructorGender] = useState<InstructorGender>(
+    assignment?.instructorGender || "varied"
+  );
 
-	const [generateMultiple, setGenerateMultiple] = useState<boolean>(false);
-	const [released, setReleased] = useState<boolean>(assignment.released || false);
+  const [generateMultiple, setGenerateMultiple] = useState<boolean>(false);
+  const [released, setReleased] = useState<boolean>(
+    assignment.released || false
+  );
 
-	const [autoStart, setAutostart] = useState<boolean>(assignment.autoStart || false);
+  const [autoStart, setAutostart] = useState<boolean>(
+    assignment.autoStart || false
+  );
 
-	const [useRandomExams, setUseRandomExams] = useState(true);
-	const [examIDs, setExamIDs] = useState<{ id: string; module: Module }[]>([]);
+  const [useRandomExams, setUseRandomExams] = useState(true);
+  const [examIDs, setExamIDs] = useState<{ id: string; module: Module }[]>([]);
 
-	const { exams } = useExams();
-	const router = useRouter();
+  const { exams } = useExams();
+  const router = useRouter();
 
-	const classrooms = useMemo(() => groups.filter((e) => e.entity === entity), [entity, groups]);
+  const classrooms = useMemo(
+    () => groups.filter((e) => e.entity === entity),
+    [entity, groups]
+  );
 
-	const userStudents = useMemo(() => users.filter((x) => x.type === "student"), [users]);
-	const userTeachers = useMemo(() => users.filter((x) => x.type === "teacher"), [users]);
+  const userStudents = useMemo(
+    () => users.filter((x) => x.type === "student"),
+    [users]
+  );
+  const userTeachers = useMemo(
+    () => users.filter((x) => x.type === "teacher"),
+    [users]
+  );
 
-	const { rows: filteredStudentsRows, renderSearch: renderStudentSearch } = useListSearch([["name"], ["email"]], userStudents);
-	const { rows: filteredTeachersRows, renderSearch: renderTeacherSearch } = useListSearch([["name"], ["email"]], userTeachers);
+  const { rows: filteredStudentsRows, renderSearch: renderStudentSearch } =
+    useListSearch([["name"], ["email"]], userStudents);
+  const { rows: filteredTeachersRows, renderSearch: renderTeacherSearch } =
+    useListSearch([["name"], ["email"]], userTeachers);
 
-	const { items: studentRows, renderMinimal: renderStudentPagination } = usePagination(filteredStudentsRows, SIZE);
-	const { items: teacherRows, renderMinimal: renderTeacherPagination } = usePagination(filteredTeachersRows, SIZE);
+  const { items: studentRows, renderMinimal: renderStudentPagination } =
+    usePagination(filteredStudentsRows, SIZE);
+  const { items: teacherRows, renderMinimal: renderTeacherPagination } =
+    usePagination(filteredTeachersRows, SIZE);
 
-	useEffect(() => {
-		setExamIDs((prev) => prev.filter((x) => selectedModules.includes(x.module)));
-	}, [selectedModules]);
+  useEffect(() => {
+    setExamIDs((prev) =>
+      prev.filter((x) => selectedModules.includes(x.module))
+    );
+  }, [selectedModules]);
 
-	useEffect(() => {
-		setAssignees([]);
-		setTeachers([]);
-	}, [entity]);
+  useEffect(() => {
+    setAssignees([]);
+    setTeachers([]);
+  }, [entity]);
 
-	const toggleModule = (module: Module) => {
-		const modules = selectedModules.filter((x) => x !== module);
-		setSelectedModules((prev) => (prev.includes(module) ? modules : [...modules, module]));
-	};
+  const toggleModule = (module: Module) => {
+    const modules = selectedModules.filter((x) => x !== module);
+    setSelectedModules((prev) =>
+      prev.includes(module) ? modules : [...modules, module]
+    );
+  };
 
-	const toggleAssignee = (user: User) => {
-		setAssignees((prev) => (prev.includes(user.id) ? prev.filter((a) => a !== user.id) : [...prev, user.id]));
-	};
+  const toggleAssignee = (user: User) => {
+    setAssignees((prev) =>
+      prev.includes(user.id)
+        ? prev.filter((a) => a !== user.id)
+        : [...prev, user.id]
+    );
+  };
 
-	const toggleTeacher = (user: User) => {
-		setTeachers((prev) => (prev.includes(user.id) ? prev.filter((a) => a !== user.id) : [...prev, user.id]));
-	};
+  const toggleTeacher = (user: User) => {
+    setTeachers((prev) =>
+      prev.includes(user.id)
+        ? prev.filter((a) => a !== user.id)
+        : [...prev, user.id]
+    );
+  };
 
-	const createAssignment = () => {
-		setIsLoading(true);
+  const createAssignment = () => {
+    setIsLoading(true);
 
-		(assignment ? axios.patch : axios.post)(`/api/assignments/${assignment.id}`, {
-			assignees,
-			name,
-			startDate,
-			examIDs: !useRandomExams ? examIDs : undefined,
-			endDate,
-			selectedModules,
-			generateMultiple,
-			entity,
-			teachers,
-			variant,
-			instructorGender,
-			released,
-			autoStart,
-		})
-			.then(() => {
-				toast.success(`The assignment "${name}" has been updated successfully!`);
-				router.push(`/assignments/${assignment.id}`);
-			})
-			.catch((e) => {
-				console.log(e);
-				toast.error("Something went wrong, please try again later!");
-			})
-			.finally(() => setIsLoading(false));
-	};
+    (assignment ? axios.patch : axios.post)(
+      `/api/assignments/${assignment.id}`,
+      {
+        assignees,
+        name,
+        startDate,
+        examIDs: !useRandomExams ? examIDs : undefined,
+        endDate,
+        selectedModules,
+        generateMultiple,
+        entity,
+        teachers,
+        variant,
+        instructorGender,
+        released,
+        autoStart,
+      }
+    )
+      .then(() => {
+        toast.success(
+          `The assignment "${name}" has been updated successfully!`
+        );
+        router.push(`/assignments/${assignment.id}`);
+      })
+      .catch((e) => {
+        console.log(e);
+        toast.error("Something went wrong, please try again later!");
+      })
+      .finally(() => setIsLoading(false));
+  };
 
-	const deleteAssignment = () => {
-		if (!confirm(`Are you sure you want to delete the "${assignment.name}" assignment?`)) return;
-		console.log("GOT HERE");
-		setIsLoading(true);
+  const deleteAssignment = () => {
+    if (
+      !confirm(
+        `Are you sure you want to delete the "${assignment.name}" assignment?`
+      )
+    )
+      return;
+    console.log("GOT HERE");
+    setIsLoading(true);
 
-		axios
-			.delete(`/api/assignments/${assignment.id}`)
-			.then(() => {
-				toast.success(`The assignment "${name}" has been deleted successfully!`);
-				router.push("/assignments");
-			})
-			.catch((e) => {
-				console.log(e);
-				toast.error("Something went wrong, please try again later!");
-			})
-			.finally(() => setIsLoading(false));
-	};
+    axios
+      .delete(`/api/assignments/${assignment.id}`)
+      .then(() => {
+        toast.success(
+          `The assignment "${name}" has been deleted successfully!`
+        );
+        router.push("/assignments");
+      })
+      .catch((e) => {
+        console.log(e);
+        toast.error("Something went wrong, please try again later!");
+      })
+      .finally(() => setIsLoading(false));
+  };
 
-	const startAssignment = () => {
-		if (assignment) {
-			setIsLoading(true);
+  const startAssignment = () => {
+    if (assignment) {
+      setIsLoading(true);
 
-			axios
-				.post(`/api/assignments/${assignment.id}/start`)
-				.then(() => {
-					toast.success(`The assignment "${name}" has been started successfully!`);
-					router.push(`/assignments/${assignment.id}`);
-				})
-				.catch((e) => {
-					console.log(e);
-					toast.error("Something went wrong, please try again later!");
-				})
-				.finally(() => setIsLoading(false));
-		}
-	};
+      axios
+        .post(`/api/assignments/${assignment.id}/start`)
+        .then(() => {
+          toast.success(
+            `The assignment "${name}" has been started successfully!`
+          );
+          router.push(`/assignments/${assignment.id}`);
+        })
+        .catch((e) => {
+          console.log(e);
+          toast.error("Something went wrong, please try again later!");
+        })
+        .finally(() => setIsLoading(false));
+    }
+  };
 
-	const copyLink = async () => {
-		const origin = window.location.origin
-		await navigator.clipboard.writeText(`${origin}/exam?assignment=${assignment.id}`)
-		toast.success("The URL to the assignment has been copied to your clipboard!")
-	}
+  const copyLink = async () => {
+    const origin = window.location.origin;
+    await navigator.clipboard.writeText(
+      `${origin}/exam?assignment=${assignment.id}`
+    );
+    toast.success(
+      "The URL to the assignment has been copied to your clipboard!"
+    );
+  };
 
-	return (
-		<>
-			<Head>
-				<title>Edit {assignment.name} | 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>
-			<>
-				<div className="flex flex-col gap-4">
-					<div className="flex items-center gap-2">
-						<Link href="/assignments" className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
-							<BsChevronLeft />
-						</Link>
-						<h2 className="font-bold text-2xl">Edit {assignment.name}</h2>
-					</div>
-					<Separator />
-				</div>
-				<div className="w-full flex flex-col gap-4">
-					<section className="w-full grid -md:grid-cols-1 md:grid-cols-3 place-items-center -md:flex-col -md:items-center -md:gap-12 justify-between gap-8 mt-8 px-8">
-						<div
-							onClick={!selectedModules.includes("level") ? () => toggleModule("reading") : undefined}
-							className={clsx(
-								"w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
-								selectedModules.includes("reading") ? "border-mti-purple-light" : "border-mti-gray-platinum",
-							)}>
-							<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-reading top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
-								<BsBook className="text-white w-7 h-7" />
-							</div>
-							<span className="ml-8 font-semibold">Reading</span>
-							{!selectedModules.includes("reading") && !selectedModules.includes("level") && (
-								<div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
-							)}
-							{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light w-8 h-8" />}
-							{selectedModules.includes("reading") && <BsCheckCircle className="text-mti-purple-light w-8 h-8" />}
-						</div>
-						<div
-							onClick={!selectedModules.includes("level") ? () => toggleModule("listening") : undefined}
-							className={clsx(
-								"w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
-								selectedModules.includes("listening") ? "border-mti-purple-light" : "border-mti-gray-platinum",
-							)}>
-							<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-listening top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
-								<BsHeadphones className="text-white w-7 h-7" />
-							</div>
-							<span className="ml-8 font-semibold">Listening</span>
-							{!selectedModules.includes("listening") && !selectedModules.includes("level") && (
-								<div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
-							)}
-							{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light w-8 h-8" />}
-							{selectedModules.includes("listening") && <BsCheckCircle className="text-mti-purple-light w-8 h-8" />}
-						</div>
-						<div
-							onClick={
-								(!selectedModules.includes("level") && selectedModules.length === 0) || selectedModules.includes("level")
-									? () => toggleModule("level")
-									: undefined
-							}
-							className={clsx(
-								"w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
-								selectedModules.includes("level") ? "border-mti-purple-light" : "border-mti-gray-platinum",
-							)}>
-							<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-level top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
-								<BsClipboard className="text-white w-7 h-7" />
-							</div>
-							<span className="ml-8 font-semibold">Level</span>
-							{!selectedModules.includes("level") && selectedModules.length === 0 && (
-								<div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
-							)}
-							{!selectedModules.includes("level") && selectedModules.length > 0 && <BsXCircle className="text-mti-red-light w-8 h-8" />}
-							{selectedModules.includes("level") && <BsCheckCircle className="text-mti-purple-light w-8 h-8" />}
-						</div>
-						<div
-							onClick={!selectedModules.includes("level") ? () => toggleModule("writing") : undefined}
-							className={clsx(
-								"w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
-								selectedModules.includes("writing") ? "border-mti-purple-light" : "border-mti-gray-platinum",
-							)}>
-							<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-writing top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
-								<BsPen className="text-white w-7 h-7" />
-							</div>
-							<span className="ml-8 font-semibold">Writing</span>
-							{!selectedModules.includes("writing") && !selectedModules.includes("level") && (
-								<div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
-							)}
-							{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light w-8 h-8" />}
-							{selectedModules.includes("writing") && <BsCheckCircle className="text-mti-purple-light w-8 h-8" />}
-						</div>
-						<div
-							onClick={!selectedModules.includes("level") ? () => toggleModule("speaking") : undefined}
-							className={clsx(
-								"w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
-								selectedModules.includes("speaking") ? "border-mti-purple-light" : "border-mti-gray-platinum",
-							)}>
-							<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-speaking top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
-								<BsMegaphone className="text-white w-7 h-7" />
-							</div>
-							<span className="ml-8 font-semibold">Speaking</span>
-							{!selectedModules.includes("speaking") && !selectedModules.includes("level") && (
-								<div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
-							)}
-							{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light w-8 h-8" />}
-							{selectedModules.includes("speaking") && <BsCheckCircle className="text-mti-purple-light w-8 h-8" />}
-						</div>
-					</section>
+  return (
+    <>
+      <Head>
+        <title>Edit {assignment.name} | 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>
+      <>
+        <div className="flex flex-col gap-4">
+          <div className="flex items-center gap-2">
+            <Link
+              href="/assignments"
+              className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl"
+            >
+              <BsChevronLeft />
+            </Link>
+            <h2 className="font-bold text-2xl">Edit {assignment.name}</h2>
+          </div>
+          <Separator />
+        </div>
+        <div className="w-full flex flex-col gap-4">
+          <section className="w-full grid -md:grid-cols-1 md:grid-cols-3 place-items-center -md:flex-col -md:items-center -md:gap-12 justify-between gap-8 mt-8 px-8">
+            <div
+              onClick={
+                !selectedModules.includes("level")
+                  ? () => toggleModule("reading")
+                  : undefined
+              }
+              className={clsx(
+                "w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
+                selectedModules.includes("reading")
+                  ? "border-mti-purple-light"
+                  : "border-mti-gray-platinum"
+              )}
+            >
+              <div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-reading top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
+                <BsBook className="text-white w-7 h-7" />
+              </div>
+              <span className="ml-8 font-semibold">Reading</span>
+              {!selectedModules.includes("reading") &&
+                !selectedModules.includes("level") && (
+                  <div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
+                )}
+              {selectedModules.includes("level") && (
+                <BsXCircle className="text-mti-red-light w-8 h-8" />
+              )}
+              {selectedModules.includes("reading") && (
+                <BsCheckCircle className="text-mti-purple-light w-8 h-8" />
+              )}
+            </div>
+            <div
+              onClick={
+                !selectedModules.includes("level")
+                  ? () => toggleModule("listening")
+                  : undefined
+              }
+              className={clsx(
+                "w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
+                selectedModules.includes("listening")
+                  ? "border-mti-purple-light"
+                  : "border-mti-gray-platinum"
+              )}
+            >
+              <div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-listening top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
+                <BsHeadphones className="text-white w-7 h-7" />
+              </div>
+              <span className="ml-8 font-semibold">Listening</span>
+              {!selectedModules.includes("listening") &&
+                !selectedModules.includes("level") && (
+                  <div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
+                )}
+              {selectedModules.includes("level") && (
+                <BsXCircle className="text-mti-red-light w-8 h-8" />
+              )}
+              {selectedModules.includes("listening") && (
+                <BsCheckCircle className="text-mti-purple-light w-8 h-8" />
+              )}
+            </div>
+            <div
+              onClick={
+                (!selectedModules.includes("level") &&
+                  selectedModules.length === 0) ||
+                selectedModules.includes("level")
+                  ? () => toggleModule("level")
+                  : undefined
+              }
+              className={clsx(
+                "w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
+                selectedModules.includes("level")
+                  ? "border-mti-purple-light"
+                  : "border-mti-gray-platinum"
+              )}
+            >
+              <div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-level top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
+                <BsClipboard className="text-white w-7 h-7" />
+              </div>
+              <span className="ml-8 font-semibold">Level</span>
+              {!selectedModules.includes("level") &&
+                selectedModules.length === 0 && (
+                  <div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
+                )}
+              {!selectedModules.includes("level") &&
+                selectedModules.length > 0 && (
+                  <BsXCircle className="text-mti-red-light w-8 h-8" />
+                )}
+              {selectedModules.includes("level") && (
+                <BsCheckCircle className="text-mti-purple-light w-8 h-8" />
+              )}
+            </div>
+            <div
+              onClick={
+                !selectedModules.includes("level")
+                  ? () => toggleModule("writing")
+                  : undefined
+              }
+              className={clsx(
+                "w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
+                selectedModules.includes("writing")
+                  ? "border-mti-purple-light"
+                  : "border-mti-gray-platinum"
+              )}
+            >
+              <div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-writing top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
+                <BsPen className="text-white w-7 h-7" />
+              </div>
+              <span className="ml-8 font-semibold">Writing</span>
+              {!selectedModules.includes("writing") &&
+                !selectedModules.includes("level") && (
+                  <div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
+                )}
+              {selectedModules.includes("level") && (
+                <BsXCircle className="text-mti-red-light w-8 h-8" />
+              )}
+              {selectedModules.includes("writing") && (
+                <BsCheckCircle className="text-mti-purple-light w-8 h-8" />
+              )}
+            </div>
+            <div
+              onClick={
+                !selectedModules.includes("level")
+                  ? () => toggleModule("speaking")
+                  : undefined
+              }
+              className={clsx(
+                "w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
+                selectedModules.includes("speaking")
+                  ? "border-mti-purple-light"
+                  : "border-mti-gray-platinum"
+              )}
+            >
+              <div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-speaking top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
+                <BsMegaphone className="text-white w-7 h-7" />
+              </div>
+              <span className="ml-8 font-semibold">Speaking</span>
+              {!selectedModules.includes("speaking") &&
+                !selectedModules.includes("level") && (
+                  <div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
+                )}
+              {selectedModules.includes("level") && (
+                <BsXCircle className="text-mti-red-light w-8 h-8" />
+              )}
+              {selectedModules.includes("speaking") && (
+                <BsCheckCircle className="text-mti-purple-light w-8 h-8" />
+              )}
+            </div>
+          </section>
 
-					<div className="w-full grid -md:grid-cols-1 md:grid-cols-2 gap-8">
-						<Input type="text" name="name" onChange={(e) => setName(e)} defaultValue={name} label="Assignment Name" required />
-						<Select
-							label="Entity"
-							options={entities.map((e) => ({ value: e.id, label: e.label }))}
-							onChange={(v) => setEntity(v ? v.value! : undefined)}
-							defaultValue={{ value: entities[0]?.id, label: entities[0]?.label }}
-						/>
-					</div>
+          <div className="w-full grid -md:grid-cols-1 md:grid-cols-2 gap-8">
+            <Input
+              type="text"
+              name="name"
+              onChange={(e) => setName(e)}
+              defaultValue={name}
+              label="Assignment Name"
+              required
+            />
+            <Select
+              label="Entity"
+              options={entities.map((e) => ({ value: e.id, label: e.label }))}
+              onChange={(v) => setEntity(v ? v.value! : undefined)}
+              defaultValue={{
+                value: entities[0]?.id,
+                label: entities[0]?.label,
+              }}
+            />
+          </div>
 
-					<div className="w-full grid -md:grid-cols-1 md:grid-cols-2 gap-8">
-						<div className="flex flex-col gap-2">
-							<label className="font-normal text-base text-mti-gray-dim">Limit Start Date *</label>
-							<ReactDatePicker
-								className={clsx(
-									"p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-									"hover:border-mti-purple tooltip z-10",
-									"transition duration-300 ease-in-out",
-								)}
-								popperClassName="!z-20"
-								filterTime={(date) => moment(date).isSameOrAfter(new Date())}
-								dateFormat="dd/MM/yyyy HH:mm"
-								selected={startDate}
-								showTimeSelect
-								onChange={(date) => setStartDate(date)}
-							/>
-						</div>
-						<div className="flex flex-col gap-2">
-							<label className="font-normal text-base text-mti-gray-dim">End Date *</label>
-							<ReactDatePicker
-								className={clsx(
-									"p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-									"hover:border-mti-purple tooltip z-10",
-									"transition duration-300 ease-in-out",
-								)}
-								popperClassName="!z-20"
-								filterTime={(date) => moment(date).isAfter(startDate)}
-								dateFormat="dd/MM/yyyy HH:mm"
-								selected={endDate}
-								showTimeSelect
-								onChange={(date) => setEndDate(date)}
-							/>
-						</div>
-					</div>
+          <div className="w-full grid -md:grid-cols-1 md:grid-cols-2 gap-8">
+            <div className="flex flex-col gap-2">
+              <label className="font-normal text-base text-mti-gray-dim">
+                Limit Start Date *
+              </label>
+              <ReactDatePicker
+                className={clsx(
+                  "p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+                  "hover:border-mti-purple tooltip z-10",
+                  "transition duration-300 ease-in-out"
+                )}
+                popperClassName="!z-20"
+                filterTime={(date) => moment(date).isSameOrAfter(new Date())}
+                dateFormat="dd/MM/yyyy HH:mm"
+                selected={startDate}
+                showTimeSelect
+                onChange={(date) => setStartDate(date)}
+              />
+            </div>
+            <div className="flex flex-col gap-2">
+              <label className="font-normal text-base text-mti-gray-dim">
+                End Date *
+              </label>
+              <ReactDatePicker
+                className={clsx(
+                  "p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+                  "hover:border-mti-purple tooltip z-10",
+                  "transition duration-300 ease-in-out"
+                )}
+                popperClassName="!z-20"
+                filterTime={(date) => moment(date).isAfter(startDate)}
+                dateFormat="dd/MM/yyyy HH:mm"
+                selected={endDate}
+                showTimeSelect
+                onChange={(date) => setEndDate(date)}
+              />
+            </div>
+          </div>
 
-					{selectedModules.includes("speaking") && (
-						<div className="flex flex-col gap-3 w-full">
-							<label className="font-normal text-base text-mti-gray-dim">Speaking Instructor&apos;s Gender</label>
-							<Select
-								value={{
-									value: instructorGender,
-									label: capitalize(instructorGender),
-								}}
-								onChange={(value) => (value ? setInstructorGender(value.value as InstructorGender) : null)}
-								disabled={!selectedModules.includes("speaking") || !!assignment}
-								options={[
-									{ value: "male", label: "Male" },
-									{ value: "female", label: "Female" },
-									{ value: "varied", label: "Varied" },
-								]}
-							/>
-						</div>
-					)}
+          {selectedModules.includes("speaking") && (
+            <div className="flex flex-col gap-3 w-full">
+              <label className="font-normal text-base text-mti-gray-dim">
+                Speaking Instructor&apos;s Gender
+              </label>
+              <Select
+                value={{
+                  value: instructorGender,
+                  label: capitalize(instructorGender),
+                }}
+                onChange={(value) =>
+                  value
+                    ? setInstructorGender(value.value as InstructorGender)
+                    : null
+                }
+                disabled={!selectedModules.includes("speaking") || !!assignment}
+                options={[
+                  { value: "male", label: "Male" },
+                  { value: "female", label: "Female" },
+                  { value: "varied", label: "Varied" },
+                ]}
+              />
+            </div>
+          )}
 
-					{selectedModules.length > 0 && (
-						<div className="flex flex-col gap-3 w-full">
-							<Checkbox isChecked={useRandomExams} onChange={setUseRandomExams}>
-								Random Exams
-							</Checkbox>
-							{!useRandomExams && (
-								<div className="grid md:grid-cols-2 w-full gap-4">
-									{selectedModules.map((module) => (
-										<div key={module} className="flex flex-col gap-3 w-full">
-											<label className="font-normal text-base text-mti-gray-dim">{capitalize(module)} Exam</label>
-											<Select
-												value={{
-													value: examIDs.find((e) => e.module === module)?.id || null,
-													label: examIDs.find((e) => e.module === module)?.id || "",
-												}}
-												onChange={(value) =>
-													value
-														? setExamIDs((prev) => [
-															...prev.filter((x) => x.module !== module),
-															{ id: value.value!, module },
-														])
-														: setExamIDs((prev) => prev.filter((x) => x.module !== module))
-												}
-												options={exams
-													.filter((x) => !x.isDiagnostic && x.module === module)
-													.map((x) => ({ value: x.id, label: x.id }))}
-											/>
-										</div>
-									))}
-								</div>
-							)}
-						</div>
-					)}
+          {selectedModules.length > 0 && (
+            <div className="flex flex-col gap-3 w-full">
+              <Checkbox isChecked={useRandomExams} onChange={setUseRandomExams}>
+                Random Exams
+              </Checkbox>
+              {!useRandomExams && (
+                <div className="grid md:grid-cols-2 w-full gap-4">
+                  {selectedModules.map((module) => (
+                    <div key={module} className="flex flex-col gap-3 w-full">
+                      <label className="font-normal text-base text-mti-gray-dim">
+                        {capitalize(module)} Exam
+                      </label>
+                      <Select
+                        value={{
+                          value:
+                            examIDs.find((e) => e.module === module)?.id ||
+                            null,
+                          label:
+                            examIDs.find((e) => e.module === module)?.id || "",
+                        }}
+                        onChange={(value) =>
+                          value
+                            ? setExamIDs((prev) => [
+                                ...prev.filter((x) => x.module !== module),
+                                { id: value.value!, module },
+                              ])
+                            : setExamIDs((prev) =>
+                                prev.filter((x) => x.module !== module)
+                              )
+                        }
+                        options={exams
+                          .filter((x) => !x.isDiagnostic && x.module === module)
+                          .map((x) => ({ value: x.id, label: x.id }))}
+                      />
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
 
-					<section className="w-full flex flex-col gap-4">
-						<span className="font-semibold">Assignees ({assignees.length} selected)</span>
-						<div className="grid grid-cols-5 gap-4">
-							{classrooms.map((g) => (
-								<button
-									key={g.id}
-									onClick={() => {
-										const groupStudentIds = users.filter((u) => g.participants.includes(u.id)).map((u) => u.id);
-										if (groupStudentIds.every((u) => assignees.includes(u))) {
-											setAssignees((prev) => prev.filter((a) => !groupStudentIds.includes(a)));
-										} else {
-											setAssignees((prev) => [...prev.filter((a) => !groupStudentIds.includes(a)), ...groupStudentIds]);
-										}
-									}}
-									className={clsx(
-										"bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
-										"transition duration-300 ease-in-out",
-										users.filter((u) => g.participants.includes(u.id)).every((u) => assignees.includes(u.id)) &&
-										"!bg-mti-purple-light !text-white",
-									)}>
-									{g.name}
-								</button>
-							))}
-						</div>
+          <section className="w-full flex flex-col gap-4">
+            <span className="font-semibold">
+              Assignees ({assignees.length} selected)
+            </span>
+            <div className="grid grid-cols-5 gap-4">
+              {classrooms.map((g) => (
+                <button
+                  key={g.id}
+                  onClick={() => {
+                    const groupStudentIds = users.reduce<string[]>((acc, u) => {
+                      if (g.participants.includes(u.id)) {
+                        acc.push(u.id);
+                      }
+                      return acc;
+                    }, []);
+                    if (groupStudentIds.every((u) => assignees.includes(u))) {
+                      setAssignees((prev) =>
+                        prev.filter((a) => !groupStudentIds.includes(a))
+                      );
+                    } else {
+                      setAssignees((prev) => [
+                        ...prev.filter((a) => !groupStudentIds.includes(a)),
+                        ...groupStudentIds,
+                      ]);
+                    }
+                  }}
+                  className={clsx(
+                    "bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
+                    "transition duration-300 ease-in-out",
+                    users
+                      .filter((u) => g.participants.includes(u.id))
+                      .every((u) => assignees.includes(u.id)) &&
+                      "!bg-mti-purple-light !text-white"
+                  )}
+                >
+                  {g.name}
+                </button>
+              ))}
+            </div>
 
-						<div className="w-full flex items-center gap-4">
-							{renderStudentSearch()}
-							{renderStudentPagination()}
-						</div>
+            <div className="w-full flex items-center gap-4">
+              {renderStudentSearch()}
+              {renderStudentPagination()}
+            </div>
 
-						<div className="flex flex-wrap -md:justify-center gap-4">
-							{studentRows.map((user) => (
-								<div
-									onClick={() => toggleAssignee(user)}
-									className={clsx(
-										"p-4 flex flex-col gap-2 rounded-xl border cursor-pointer w-72",
-										"transition ease-in-out duration-300",
-										assignees.includes(user.id) ? "border-mti-purple" : "border-mti-gray-platinum",
-									)}
-									key={user.id}>
-									<span className="flex flex-col gap-0 justify-center">
-										<span className="font-semibold">{user.name}</span>
-										<span className="text-sm opacity-80">{user.email}</span>
-									</span>
-									<ProgressBar
-										color="purple"
-										textClassName="!text-mti-black/80"
-										label={`Level ${calculateAverageLevel(user.levels)}`}
-										percentage={(calculateAverageLevel(user.levels) / 9) * 100}
-										className="h-6"
-									/>
-									<span className="text-mti-black/80 text-sm whitespace-pre-wrap mt-2">
-										Groups:{" "}
-										{groups
-											.filter((g) => g.participants.includes(user.id))
-											.map((g) => g.name)
-											.join(", ")}
-									</span>
-								</div>
-							))}
-						</div>
-					</section>
+            <div className="flex flex-wrap -md:justify-center gap-4">
+              {studentRows.map((user) => (
+                <div
+                  onClick={() => toggleAssignee(user)}
+                  className={clsx(
+                    "p-4 flex flex-col gap-2 rounded-xl border cursor-pointer w-72",
+                    "transition ease-in-out duration-300",
+                    assignees.includes(user.id)
+                      ? "border-mti-purple"
+                      : "border-mti-gray-platinum"
+                  )}
+                  key={user.id}
+                >
+                  <span className="flex flex-col gap-0 justify-center">
+                    <span className="font-semibold">{user.name}</span>
+                    <span className="text-sm opacity-80">{user.email}</span>
+                  </span>
+                  <ProgressBar
+                    color="purple"
+                    textClassName="!text-mti-black/80"
+                    label={`Level ${calculateAverageLevel(user.levels)}`}
+                    percentage={(calculateAverageLevel(user.levels) / 9) * 100}
+                    className="h-6"
+                  />
+                  <span className="text-mti-black/80 text-sm whitespace-pre-wrap mt-2">
+                    Groups:{" "}
+                    {groups
+                      .filter((g) => g.participants.includes(user.id))
+                      .map((g) => g.name)
+                      .join(", ")}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </section>
 
-					{user.type !== "teacher" && (
-						<section className="w-full flex flex-col gap-3">
-							<span className="font-semibold">Teachers ({teachers.length} selected)</span>
-							<div className="grid grid-cols-5 gap-4">
-								{classrooms.map((g) => (
-									<button
-										key={g.id}
-										onClick={() => {
-											const groupStudentIds = users.filter((u) => g.participants.includes(u.id)).map((u) => u.id);
-											if (groupStudentIds.every((u) => teachers.includes(u))) {
-												setTeachers((prev) => prev.filter((a) => !groupStudentIds.includes(a)));
-											} else {
-												setTeachers((prev) => [...prev.filter((a) => !groupStudentIds.includes(a)), ...groupStudentIds]);
-											}
-										}}
-										className={clsx(
-											"bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
-											"transition duration-300 ease-in-out",
-											users.filter((u) => g.participants.includes(u.id)).every((u) => teachers.includes(u.id)) &&
-											"!bg-mti-purple-light !text-white",
-										)}>
-										{g.name}
-									</button>
-								))}
-							</div>
+          {user.type !== "teacher" && (
+            <section className="w-full flex flex-col gap-3">
+              <span className="font-semibold">
+                Teachers ({teachers.length} selected)
+              </span>
+              <div className="grid grid-cols-5 gap-4">
+                {classrooms.map((g) => (
+                  <button
+                    key={g.id}
+                    onClick={() => {
+                      const groupStudentIds = users.reduce<string[]>(
+                        (acc, u) => {
+                          if (g.participants.includes(u.id)) {
+                            acc.push(u.id);
+                          }
+                          return acc;
+                        },
+                        []
+                      );
+                      if (groupStudentIds.every((u) => teachers.includes(u))) {
+                        setTeachers((prev) =>
+                          prev.filter((a) => !groupStudentIds.includes(a))
+                        );
+                      } else {
+                        setTeachers((prev) => [
+                          ...prev.filter((a) => !groupStudentIds.includes(a)),
+                          ...groupStudentIds,
+                        ]);
+                      }
+                    }}
+                    className={clsx(
+                      "bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
+                      "transition duration-300 ease-in-out",
+                      users
+                        .filter((u) => g.participants.includes(u.id))
+                        .every((u) => teachers.includes(u.id)) &&
+                        "!bg-mti-purple-light !text-white"
+                    )}
+                  >
+                    {g.name}
+                  </button>
+                ))}
+              </div>
 
-							<div className="w-full flex items-center gap-4">
-								{renderTeacherSearch()}
-								{renderTeacherPagination()}
-							</div>
+              <div className="w-full flex items-center gap-4">
+                {renderTeacherSearch()}
+                {renderTeacherPagination()}
+              </div>
 
-							<div className="flex flex-wrap -md:justify-center gap-4">
-								{teacherRows.map((user) => (
-									<div
-										onClick={() => toggleTeacher(user)}
-										className={clsx(
-											"p-4 flex flex-col gap-2 rounded-xl border cursor-pointer w-72",
-											"transition ease-in-out duration-300",
-											teachers.includes(user.id) ? "border-mti-purple" : "border-mti-gray-platinum",
-										)}
-										key={user.id}>
-										<span className="flex flex-col gap-0 justify-center">
-											<span className="font-semibold">{user.name}</span>
-											<span className="text-sm opacity-80">{user.email}</span>
-										</span>
-										<span className="text-mti-black/80 text-sm whitespace-pre-wrap mt-2">
-											Groups:{" "}
-											{groups
-												.filter((g) => g.participants.includes(user.id))
-												.map((g) => g.name)
-												.join(", ")}
-										</span>
-									</div>
-								))}
-							</div>
-						</section>
-					)}
+              <div className="flex flex-wrap -md:justify-center gap-4">
+                {teacherRows.map((user) => (
+                  <div
+                    onClick={() => toggleTeacher(user)}
+                    className={clsx(
+                      "p-4 flex flex-col gap-2 rounded-xl border cursor-pointer w-72",
+                      "transition ease-in-out duration-300",
+                      teachers.includes(user.id)
+                        ? "border-mti-purple"
+                        : "border-mti-gray-platinum"
+                    )}
+                    key={user.id}
+                  >
+                    <span className="flex flex-col gap-0 justify-center">
+                      <span className="font-semibold">{user.name}</span>
+                      <span className="text-sm opacity-80">{user.email}</span>
+                    </span>
+                    <span className="text-mti-black/80 text-sm whitespace-pre-wrap mt-2">
+                      Groups:{" "}
+                      {groups
+                        .filter((g) => g.participants.includes(user.id))
+                        .map((g) => g.name)
+                        .join(", ")}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </section>
+          )}
 
-					<div className="flex gap-4 w-full items-end">
-						<Checkbox isChecked={variant === "full"} onChange={() => setVariant((prev) => (prev === "full" ? "partial" : "full"))}>
-							Full length exams
-						</Checkbox>
-						<Checkbox isChecked={generateMultiple} onChange={() => setGenerateMultiple((d) => !d)}>
-							Generate different exams
-						</Checkbox>
-						<Checkbox isChecked={released} onChange={() => setReleased((d) => !d)}>
-							Auto release results
-						</Checkbox>
-						<Checkbox isChecked={autoStart} onChange={() => setAutostart((d) => !d)}>
-							Auto start exam
-						</Checkbox>
-					</div>
-					<div className="flex gap-4 w-full justify-end">
-						<Button variant="outline" color="purple" className="w-full max-w-[200px]" onClick={copyLink}>
-							Copy Link
-						</Button>
-						<Button
-							className="w-full max-w-[200px]"
-							variant="outline"
-							onClick={() => router.push("/assignments")}
-							disabled={isLoading}
-							isLoading={isLoading}>
-							Cancel
-						</Button>
-						<Button
-							className="w-full max-w-[200px]"
-							color="green"
-							variant="outline"
-							onClick={startAssignment}
-							disabled={isLoading || moment().isAfter(startDate)}
-							isLoading={isLoading}>
-							Start
-						</Button>
-						<Button
-							className="w-full max-w-[200px]"
-							color="red"
-							variant="outline"
-							onClick={deleteAssignment}
-							disabled={isLoading}
-							isLoading={isLoading}>
-							Delete
-						</Button>
-						<Button
-							disabled={
-								selectedModules.length === 0 ||
-								!name ||
-								!startDate ||
-								!endDate ||
-								assignees.length === 0 ||
-								(!useRandomExams && examIDs.length < selectedModules.length)
-							}
-							className="w-full max-w-[200px]"
-							onClick={createAssignment}
-							isLoading={isLoading}>
-							Update
-						</Button>
-					</div>
-				</div>
-			</>
-		</>
-	);
+          <div className="flex gap-4 w-full items-end">
+            <Checkbox
+              isChecked={variant === "full"}
+              onChange={() =>
+                setVariant((prev) => (prev === "full" ? "partial" : "full"))
+              }
+            >
+              Full length exams
+            </Checkbox>
+            <Checkbox
+              isChecked={generateMultiple}
+              onChange={() => setGenerateMultiple((d) => !d)}
+            >
+              Generate different exams
+            </Checkbox>
+            <Checkbox
+              isChecked={released}
+              onChange={() => setReleased((d) => !d)}
+            >
+              Auto release results
+            </Checkbox>
+            <Checkbox
+              isChecked={autoStart}
+              onChange={() => setAutostart((d) => !d)}
+            >
+              Auto start exam
+            </Checkbox>
+          </div>
+          <div className="flex gap-4 w-full justify-end">
+            <Button
+              variant="outline"
+              color="purple"
+              className="w-full max-w-[200px]"
+              onClick={copyLink}
+            >
+              Copy Link
+            </Button>
+            <Button
+              className="w-full max-w-[200px]"
+              variant="outline"
+              onClick={() => router.push("/assignments")}
+              disabled={isLoading}
+              isLoading={isLoading}
+            >
+              Cancel
+            </Button>
+            <Button
+              className="w-full max-w-[200px]"
+              color="green"
+              variant="outline"
+              onClick={startAssignment}
+              disabled={isLoading || moment().isAfter(startDate)}
+              isLoading={isLoading}
+            >
+              Start
+            </Button>
+            <Button
+              className="w-full max-w-[200px]"
+              color="red"
+              variant="outline"
+              onClick={deleteAssignment}
+              disabled={isLoading}
+              isLoading={isLoading}
+            >
+              Delete
+            </Button>
+            <Button
+              disabled={
+                selectedModules.length === 0 ||
+                !name ||
+                !startDate ||
+                !endDate ||
+                assignees.length === 0 ||
+                (!useRandomExams && examIDs.length < selectedModules.length)
+              }
+              className="w-full max-w-[200px]"
+              onClick={createAssignment}
+              isLoading={isLoading}
+            >
+              Update
+            </Button>
+          </div>
+        </div>
+      </>
+    </>
+  );
 }
diff --git a/src/pages/assignments/creator/index.tsx b/src/pages/assignments/creator/index.tsx
index c2771860..6b3af36d 100644
--- a/src/pages/assignments/creator/index.tsx
+++ b/src/pages/assignments/creator/index.tsx
@@ -32,502 +32,728 @@ import { useRouter } from "next/router";
 import { generate } from "random-words";
 import { useEffect, useMemo, useState } from "react";
 import ReactDatePicker from "react-datepicker";
-import { BsBook, BsCheckCircle, BsChevronLeft, BsClipboard, BsHeadphones, BsMegaphone, BsPen, BsXCircle } from "react-icons/bs";
+import {
+  BsBook,
+  BsCheckCircle,
+  BsChevronLeft,
+  BsClipboard,
+  BsHeadphones,
+  BsMegaphone,
+  BsPen,
+  BsXCircle,
+} from "react-icons/bs";
 import { toast } from "react-toastify";
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
-	const user = await requestUser(req, res)
-	if (!user) return redirect("/login")
+  const user = await requestUser(req, res);
+  if (!user) return redirect("/login");
 
-	const entityIDS = mapBy(user.entities, "id") || [];
-	const entities = await (checkAccess(user, ["developer", "admin"]) ? getEntitiesWithRoles() : getEntitiesWithRoles(entityIDS));
+  const entityIDS = mapBy(user.entities, "id") || [];
+  const entities = await (checkAccess(user, ["developer", "admin"])
+    ? getEntitiesWithRoles()
+    : getEntitiesWithRoles(entityIDS));
 
-	const allowedEntities = findAllowedEntities(user, entities, 'create_assignment')
-	if (allowedEntities.length === 0) return redirect("/assignments")
+  const allowedEntities = findAllowedEntities(
+    user,
+    entities,
+    "create_assignment"
+  );
+  if (allowedEntities.length === 0) return redirect("/assignments");
 
-	const users = await (isAdmin(user) ? getUsers() : getEntitiesUsers(mapBy(allowedEntities, 'id')));
-	const groups = await (isAdmin(user) ? getGroups() : getGroupsByEntities(mapBy(allowedEntities, 'id')));
+  const [users, groups] = await Promise.all([
+    isAdmin(user)
+      ? getUsers(
+          {},
+          0,
+          {},
+          {
+            _id: 0,
+            id: 1,
+            type: 1,
+            name: 1,
+            email: 1,
+            levels: 1,
+          }
+        )
+      : getEntitiesUsers(mapBy(allowedEntities, "id"), {}, 0, {
+          _id: 0,
+          id: 1,
+          type: 1,
+          name: 1,
+          email: 1,
+          levels: 1,
+        }),
+    isAdmin(user)
+      ? getGroups()
+      : getGroupsByEntities(mapBy(allowedEntities, "id")),
+  ]);
 
-	return { props: serialize({ user, users, entities, groups }) };
+  return { props: serialize({ user, users, entities, groups }) };
 }, sessionOptions);
 
 interface Props {
-	assignment: Assignment;
-	groups: WithEntity<Group>[];
-	user: User;
-	users: User[];
-	entities: EntityWithRoles[];
+  assignment: Assignment;
+  groups: WithEntity<Group>[];
+  user: User;
+  users: User[];
+  entities: EntityWithRoles[];
 }
 
 const SIZE = 9;
 
-export default function AssignmentsPage({ user, users, groups, entities }: Props) {
-	const [selectedModules, setSelectedModules] = useState<Module[]>([]);
-	const [assignees, setAssignees] = useState<string[]>([]);
-	const [teachers, setTeachers] = useState<string[]>([...(user.type === "teacher" ? [user.id] : [])]);
-	const [entity, setEntity] = useState<string | undefined>(entities[0]?.id);
-	const [name, setName] = useState(
-		generate({
-			minLength: 6,
-			maxLength: 8,
-			min: 2,
-			max: 3,
-			join: " ",
-			formatter: capitalize,
-		}),
-	);
-	const [isLoading, setIsLoading] = useState(false);
-	const [startDate, setStartDate] = useState<Date | null>(moment().add(1, "hour").toDate());
+export default function AssignmentsPage({
+  user,
+  users,
+  groups,
+  entities,
+}: Props) {
+  const [selectedModules, setSelectedModules] = useState<Module[]>([]);
+  const [assignees, setAssignees] = useState<string[]>([]);
+  const [teachers, setTeachers] = useState<string[]>([
+    ...(user.type === "teacher" ? [user.id] : []),
+  ]);
+  const [entity, setEntity] = useState<string | undefined>(entities[0]?.id);
+  const [name, setName] = useState(
+    generate({
+      minLength: 6,
+      maxLength: 8,
+      min: 2,
+      max: 3,
+      join: " ",
+      formatter: capitalize,
+    })
+  );
+  const [isLoading, setIsLoading] = useState(false);
+  const [startDate, setStartDate] = useState<Date | null>(
+    moment().add(1, "hour").toDate()
+  );
 
-	const [endDate, setEndDate] = useState<Date | null>(moment().hours(23).minutes(59).add(8, "day").toDate());
-	const [variant, setVariant] = useState<Variant>("full");
-	const [instructorGender, setInstructorGender] = useState<InstructorGender>("varied");
+  const [endDate, setEndDate] = useState<Date | null>(
+    moment().hours(23).minutes(59).add(8, "day").toDate()
+  );
+  const [variant, setVariant] = useState<Variant>("full");
+  const [instructorGender, setInstructorGender] =
+    useState<InstructorGender>("varied");
 
-	const [generateMultiple, setGenerateMultiple] = useState<boolean>(false);
-	const [released, setReleased] = useState<boolean>(false);
+  const [generateMultiple, setGenerateMultiple] = useState<boolean>(false);
+  const [released, setReleased] = useState<boolean>(false);
 
-	const [autoStart, setAutostart] = useState<boolean>(false);
+  const [autoStart, setAutostart] = useState<boolean>(false);
 
-	const [useRandomExams, setUseRandomExams] = useState(true);
-	const [examIDs, setExamIDs] = useState<{ id: string; module: Module }[]>([]);
+  const [useRandomExams, setUseRandomExams] = useState(true);
+  const [examIDs, setExamIDs] = useState<{ id: string; module: Module }[]>([]);
 
-	const { exams } = useExams();
-	const router = useRouter();
+  const { exams } = useExams();
+  const router = useRouter();
 
-	const classrooms = useMemo(() => groups.filter((e) => e.entity?.id === entity), [entity, groups]);
-	const allowedUsers = useMemo(() => users.filter((u) => mapBy(u.entities, 'id').includes(entity || "")), [users, entity])
+  const classrooms = useMemo(
+    () => groups.filter((e) => e.entity?.id === entity),
+    [entity, groups]
+  );
+  const allowedUsers = useMemo(
+    () => users.filter((u) => mapBy(u.entities, "id").includes(entity || "")),
+    [users, entity]
+  );
 
-	const userStudents = useMemo(() => allowedUsers.filter((x) => x.type === "student"), [allowedUsers]);
-	const userTeachers = useMemo(() => allowedUsers.filter((x) => x.type === "teacher"), [allowedUsers]);
+  const userStudents = useMemo(
+    () => allowedUsers.filter((x) => x.type === "student"),
+    [allowedUsers]
+  );
+  const userTeachers = useMemo(
+    () => allowedUsers.filter((x) => x.type === "teacher"),
+    [allowedUsers]
+  );
 
-	const { rows: filteredStudentsRows, renderSearch: renderStudentSearch } = useListSearch([["name"], ["email"]], userStudents);
-	const { rows: filteredTeachersRows, renderSearch: renderTeacherSearch } = useListSearch([["name"], ["email"]], userTeachers);
+  const { rows: filteredStudentsRows, renderSearch: renderStudentSearch } =
+    useListSearch([["name"], ["email"]], userStudents);
+  const { rows: filteredTeachersRows, renderSearch: renderTeacherSearch } =
+    useListSearch([["name"], ["email"]], userTeachers);
 
-	const { items: studentRows, renderMinimal: renderStudentPagination } = usePagination(filteredStudentsRows, SIZE);
-	const { items: teacherRows, renderMinimal: renderTeacherPagination } = usePagination(filteredTeachersRows, SIZE);
+  const { items: studentRows, renderMinimal: renderStudentPagination } =
+    usePagination(filteredStudentsRows, SIZE);
+  const { items: teacherRows, renderMinimal: renderTeacherPagination } =
+    usePagination(filteredTeachersRows, SIZE);
 
-	useEffect(() => {
-		setExamIDs((prev) => prev.filter((x) => selectedModules.includes(x.module)));
-	}, [selectedModules]);
+  useEffect(() => {
+    setExamIDs((prev) =>
+      prev.filter((x) => selectedModules.includes(x.module))
+    );
+  }, [selectedModules]);
 
-	useEffect(() => {
-		setAssignees([]);
-		setTeachers([]);
-	}, [entity]);
+  useEffect(() => {
+    setAssignees([]);
+    setTeachers([]);
+  }, [entity]);
 
-	const toggleModule = (module: Module) => {
-		const modules = selectedModules.filter((x) => x !== module);
-		setSelectedModules((prev) => (prev.includes(module) ? modules : [...modules, module]));
-	};
+  const toggleModule = (module: Module) => {
+    const modules = selectedModules.filter((x) => x !== module);
+    setSelectedModules((prev) =>
+      prev.includes(module) ? modules : [...modules, module]
+    );
+  };
 
-	const toggleAssignee = (user: User) => {
-		setAssignees((prev) => (prev.includes(user.id) ? prev.filter((a) => a !== user.id) : [...prev, user.id]));
-	};
+  const toggleAssignee = (user: User) => {
+    setAssignees((prev) =>
+      prev.includes(user.id)
+        ? prev.filter((a) => a !== user.id)
+        : [...prev, user.id]
+    );
+  };
 
-	const toggleTeacher = (user: User) => {
-		setTeachers((prev) => (prev.includes(user.id) ? prev.filter((a) => a !== user.id) : [...prev, user.id]));
-	};
+  const toggleTeacher = (user: User) => {
+    setTeachers((prev) =>
+      prev.includes(user.id)
+        ? prev.filter((a) => a !== user.id)
+        : [...prev, user.id]
+    );
+  };
 
-	const createAssignment = () => {
-		setIsLoading(true);
+  const createAssignment = () => {
+    setIsLoading(true);
 
-		axios
-			.post(`/api/assignments`, {
-				assignees,
-				name,
-				startDate,
-				examIDs: !useRandomExams ? examIDs : undefined,
-				endDate,
-				selectedModules,
-				generateMultiple,
-				entity,
-				teachers,
-				variant,
-				instructorGender,
-				released,
-				autoStart,
-			})
-			.then((result) => {
-				toast.success(`The assignment "${name}" has been created successfully!`);
-				router.push(`/assignments/${result.data.id}`);
-			})
-			.catch((e) => {
-				console.log(e);
-				toast.error("Something went wrong, please try again later!");
-			})
-			.finally(() => setIsLoading(false));
-	};
+    axios
+      .post(`/api/assignments`, {
+        assignees,
+        name,
+        startDate,
+        examIDs: !useRandomExams ? examIDs : undefined,
+        endDate,
+        selectedModules,
+        generateMultiple,
+        entity,
+        teachers,
+        variant,
+        instructorGender,
+        released,
+        autoStart,
+      })
+      .then((result) => {
+        toast.success(
+          `The assignment "${name}" has been created successfully!`
+        );
+        router.push(`/assignments/${result.data.id}`);
+      })
+      .catch((e) => {
+        console.log(e);
+        toast.error("Something went wrong, please try again later!");
+      })
+      .finally(() => setIsLoading(false));
+  };
 
-	return (
-		<>
-			<Head>
-				<title>Create Assignment | 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>
-			<>
-				<div className="flex flex-col gap-4">
-					<div className="flex items-center gap-2">
-						<Link href="/assignments" className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
-							<BsChevronLeft />
-						</Link>
-						<h2 className="font-bold text-2xl">Create Assignment</h2>
-					</div>
-					<Separator />
-				</div>
-				<div className="w-full flex flex-col gap-4">
-					<section className="w-full grid -md:grid-cols-1 md:grid-cols-3 place-items-center -md:flex-col -md:items-center -md:gap-12 justify-between gap-8 mt-8 px-8">
-						<div
-							onClick={!selectedModules.includes("level") ? () => toggleModule("reading") : undefined}
-							className={clsx(
-								"w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
-								selectedModules.includes("reading") ? "border-mti-purple-light" : "border-mti-gray-platinum",
-							)}>
-							<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-reading top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
-								<BsBook className="text-white w-7 h-7" />
-							</div>
-							<span className="ml-8 font-semibold">Reading</span>
-							{!selectedModules.includes("reading") && !selectedModules.includes("level") && (
-								<div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
-							)}
-							{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light w-8 h-8" />}
-							{selectedModules.includes("reading") && <BsCheckCircle className="text-mti-purple-light w-8 h-8" />}
-						</div>
-						<div
-							onClick={!selectedModules.includes("level") ? () => toggleModule("listening") : undefined}
-							className={clsx(
-								"w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
-								selectedModules.includes("listening") ? "border-mti-purple-light" : "border-mti-gray-platinum",
-							)}>
-							<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-listening top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
-								<BsHeadphones className="text-white w-7 h-7" />
-							</div>
-							<span className="ml-8 font-semibold">Listening</span>
-							{!selectedModules.includes("listening") && !selectedModules.includes("level") && (
-								<div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
-							)}
-							{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light w-8 h-8" />}
-							{selectedModules.includes("listening") && <BsCheckCircle className="text-mti-purple-light w-8 h-8" />}
-						</div>
-						<div
-							onClick={
-								(!selectedModules.includes("level") && selectedModules.length === 0) || selectedModules.includes("level")
-									? () => toggleModule("level")
-									: undefined
-							}
-							className={clsx(
-								"w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
-								selectedModules.includes("level") ? "border-mti-purple-light" : "border-mti-gray-platinum",
-							)}>
-							<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-level top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
-								<BsClipboard className="text-white w-7 h-7" />
-							</div>
-							<span className="ml-8 font-semibold">Level</span>
-							{!selectedModules.includes("level") && selectedModules.length === 0 && (
-								<div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
-							)}
-							{!selectedModules.includes("level") && selectedModules.length > 0 && <BsXCircle className="text-mti-red-light w-8 h-8" />}
-							{selectedModules.includes("level") && <BsCheckCircle className="text-mti-purple-light w-8 h-8" />}
-						</div>
-						<div
-							onClick={!selectedModules.includes("level") ? () => toggleModule("writing") : undefined}
-							className={clsx(
-								"w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
-								selectedModules.includes("writing") ? "border-mti-purple-light" : "border-mti-gray-platinum",
-							)}>
-							<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-writing top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
-								<BsPen className="text-white w-7 h-7" />
-							</div>
-							<span className="ml-8 font-semibold">Writing</span>
-							{!selectedModules.includes("writing") && !selectedModules.includes("level") && (
-								<div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
-							)}
-							{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light w-8 h-8" />}
-							{selectedModules.includes("writing") && <BsCheckCircle className="text-mti-purple-light w-8 h-8" />}
-						</div>
-						<div
-							onClick={!selectedModules.includes("level") ? () => toggleModule("speaking") : undefined}
-							className={clsx(
-								"w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
-								selectedModules.includes("speaking") ? "border-mti-purple-light" : "border-mti-gray-platinum",
-							)}>
-							<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-speaking top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
-								<BsMegaphone className="text-white w-7 h-7" />
-							</div>
-							<span className="ml-8 font-semibold">Speaking</span>
-							{!selectedModules.includes("speaking") && !selectedModules.includes("level") && (
-								<div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
-							)}
-							{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light w-8 h-8" />}
-							{selectedModules.includes("speaking") && <BsCheckCircle className="text-mti-purple-light w-8 h-8" />}
-						</div>
-					</section>
+  return (
+    <>
+      <Head>
+        <title>Create Assignment | 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>
+      <>
+        <div className="flex flex-col gap-4">
+          <div className="flex items-center gap-2">
+            <Link
+              href="/assignments"
+              className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl"
+            >
+              <BsChevronLeft />
+            </Link>
+            <h2 className="font-bold text-2xl">Create Assignment</h2>
+          </div>
+          <Separator />
+        </div>
+        <div className="w-full flex flex-col gap-4">
+          <section className="w-full grid -md:grid-cols-1 md:grid-cols-3 place-items-center -md:flex-col -md:items-center -md:gap-12 justify-between gap-8 mt-8 px-8">
+            <div
+              onClick={
+                !selectedModules.includes("level")
+                  ? () => toggleModule("reading")
+                  : undefined
+              }
+              className={clsx(
+                "w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
+                selectedModules.includes("reading")
+                  ? "border-mti-purple-light"
+                  : "border-mti-gray-platinum"
+              )}
+            >
+              <div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-reading top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
+                <BsBook className="text-white w-7 h-7" />
+              </div>
+              <span className="ml-8 font-semibold">Reading</span>
+              {!selectedModules.includes("reading") &&
+                !selectedModules.includes("level") && (
+                  <div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
+                )}
+              {selectedModules.includes("level") && (
+                <BsXCircle className="text-mti-red-light w-8 h-8" />
+              )}
+              {selectedModules.includes("reading") && (
+                <BsCheckCircle className="text-mti-purple-light w-8 h-8" />
+              )}
+            </div>
+            <div
+              onClick={
+                !selectedModules.includes("level")
+                  ? () => toggleModule("listening")
+                  : undefined
+              }
+              className={clsx(
+                "w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
+                selectedModules.includes("listening")
+                  ? "border-mti-purple-light"
+                  : "border-mti-gray-platinum"
+              )}
+            >
+              <div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-listening top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
+                <BsHeadphones className="text-white w-7 h-7" />
+              </div>
+              <span className="ml-8 font-semibold">Listening</span>
+              {!selectedModules.includes("listening") &&
+                !selectedModules.includes("level") && (
+                  <div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
+                )}
+              {selectedModules.includes("level") && (
+                <BsXCircle className="text-mti-red-light w-8 h-8" />
+              )}
+              {selectedModules.includes("listening") && (
+                <BsCheckCircle className="text-mti-purple-light w-8 h-8" />
+              )}
+            </div>
+            <div
+              onClick={
+                (!selectedModules.includes("level") &&
+                  selectedModules.length === 0) ||
+                selectedModules.includes("level")
+                  ? () => toggleModule("level")
+                  : undefined
+              }
+              className={clsx(
+                "w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
+                selectedModules.includes("level")
+                  ? "border-mti-purple-light"
+                  : "border-mti-gray-platinum"
+              )}
+            >
+              <div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-level top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
+                <BsClipboard className="text-white w-7 h-7" />
+              </div>
+              <span className="ml-8 font-semibold">Level</span>
+              {!selectedModules.includes("level") &&
+                selectedModules.length === 0 && (
+                  <div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
+                )}
+              {!selectedModules.includes("level") &&
+                selectedModules.length > 0 && (
+                  <BsXCircle className="text-mti-red-light w-8 h-8" />
+                )}
+              {selectedModules.includes("level") && (
+                <BsCheckCircle className="text-mti-purple-light w-8 h-8" />
+              )}
+            </div>
+            <div
+              onClick={
+                !selectedModules.includes("level")
+                  ? () => toggleModule("writing")
+                  : undefined
+              }
+              className={clsx(
+                "w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
+                selectedModules.includes("writing")
+                  ? "border-mti-purple-light"
+                  : "border-mti-gray-platinum"
+              )}
+            >
+              <div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-writing top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
+                <BsPen className="text-white w-7 h-7" />
+              </div>
+              <span className="ml-8 font-semibold">Writing</span>
+              {!selectedModules.includes("writing") &&
+                !selectedModules.includes("level") && (
+                  <div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
+                )}
+              {selectedModules.includes("level") && (
+                <BsXCircle className="text-mti-red-light w-8 h-8" />
+              )}
+              {selectedModules.includes("writing") && (
+                <BsCheckCircle className="text-mti-purple-light w-8 h-8" />
+              )}
+            </div>
+            <div
+              onClick={
+                !selectedModules.includes("level")
+                  ? () => toggleModule("speaking")
+                  : undefined
+              }
+              className={clsx(
+                "w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
+                selectedModules.includes("speaking")
+                  ? "border-mti-purple-light"
+                  : "border-mti-gray-platinum"
+              )}
+            >
+              <div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-speaking top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
+                <BsMegaphone className="text-white w-7 h-7" />
+              </div>
+              <span className="ml-8 font-semibold">Speaking</span>
+              {!selectedModules.includes("speaking") &&
+                !selectedModules.includes("level") && (
+                  <div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
+                )}
+              {selectedModules.includes("level") && (
+                <BsXCircle className="text-mti-red-light w-8 h-8" />
+              )}
+              {selectedModules.includes("speaking") && (
+                <BsCheckCircle className="text-mti-purple-light w-8 h-8" />
+              )}
+            </div>
+          </section>
 
-					<div className="w-full grid -md:grid-cols-1 md:grid-cols-2 gap-8">
-						<Input type="text" name="name" onChange={(e) => setName(e)} defaultValue={name} label="Assignment Name" required />
-						<Select
-							label="Entity"
-							options={entities.map((e) => ({ value: e.id, label: e.label }))}
-							onChange={(v) => setEntity(v ? v.value! : undefined)}
-							defaultValue={{ value: entities[0]?.id, label: entities[0]?.label }}
-						/>
-					</div>
+          <div className="w-full grid -md:grid-cols-1 md:grid-cols-2 gap-8">
+            <Input
+              type="text"
+              name="name"
+              onChange={(e) => setName(e)}
+              defaultValue={name}
+              label="Assignment Name"
+              required
+            />
+            <Select
+              label="Entity"
+              options={entities.map((e) => ({ value: e.id, label: e.label }))}
+              onChange={(v) => setEntity(v ? v.value! : undefined)}
+              defaultValue={{
+                value: entities[0]?.id,
+                label: entities[0]?.label,
+              }}
+            />
+          </div>
 
-					<div className="w-full grid -md:grid-cols-1 md:grid-cols-2 gap-8">
-						<div className="flex flex-col gap-2">
-							<label className="font-normal text-base text-mti-gray-dim">Limit Start Date *</label>
-							<ReactDatePicker
-								className={clsx(
-									"p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-									"hover:border-mti-purple tooltip z-10",
-									"transition duration-300 ease-in-out",
-								)}
-								popperClassName="!z-20"
-								filterTime={(date) => moment(date).isSameOrAfter(new Date())}
-								dateFormat="dd/MM/yyyy HH:mm"
-								selected={startDate}
-								showTimeSelect
-								onChange={(date) => setStartDate(date)}
-							/>
-						</div>
-						<div className="flex flex-col gap-2">
-							<label className="font-normal text-base text-mti-gray-dim">End Date *</label>
-							<ReactDatePicker
-								className={clsx(
-									"p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-									"hover:border-mti-purple tooltip z-10",
-									"transition duration-300 ease-in-out",
-								)}
-								popperClassName="!z-20"
-								filterTime={(date) => moment(date).isAfter(startDate)}
-								dateFormat="dd/MM/yyyy HH:mm"
-								selected={endDate}
-								showTimeSelect
-								onChange={(date) => setEndDate(date)}
-							/>
-						</div>
-					</div>
+          <div className="w-full grid -md:grid-cols-1 md:grid-cols-2 gap-8">
+            <div className="flex flex-col gap-2">
+              <label className="font-normal text-base text-mti-gray-dim">
+                Limit Start Date *
+              </label>
+              <ReactDatePicker
+                className={clsx(
+                  "p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+                  "hover:border-mti-purple tooltip z-10",
+                  "transition duration-300 ease-in-out"
+                )}
+                popperClassName="!z-20"
+                filterTime={(date) => moment(date).isSameOrAfter(new Date())}
+                dateFormat="dd/MM/yyyy HH:mm"
+                selected={startDate}
+                showTimeSelect
+                onChange={(date) => setStartDate(date)}
+              />
+            </div>
+            <div className="flex flex-col gap-2">
+              <label className="font-normal text-base text-mti-gray-dim">
+                End Date *
+              </label>
+              <ReactDatePicker
+                className={clsx(
+                  "p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+                  "hover:border-mti-purple tooltip z-10",
+                  "transition duration-300 ease-in-out"
+                )}
+                popperClassName="!z-20"
+                filterTime={(date) => moment(date).isAfter(startDate)}
+                dateFormat="dd/MM/yyyy HH:mm"
+                selected={endDate}
+                showTimeSelect
+                onChange={(date) => setEndDate(date)}
+              />
+            </div>
+          </div>
 
-					{selectedModules.includes("speaking") && (
-						<div className="flex flex-col gap-3 w-full">
-							<label className="font-normal text-base text-mti-gray-dim">Speaking Instructor&apos;s Gender</label>
-							<Select
-								value={{
-									value: instructorGender,
-									label: capitalize(instructorGender),
-								}}
-								onChange={(value) => (value ? setInstructorGender(value.value as InstructorGender) : null)}
-								disabled={!selectedModules.includes("speaking")}
-								options={[
-									{ value: "male", label: "Male" },
-									{ value: "female", label: "Female" },
-									{ value: "varied", label: "Varied" },
-								]}
-							/>
-						</div>
-					)}
+          {selectedModules.includes("speaking") && (
+            <div className="flex flex-col gap-3 w-full">
+              <label className="font-normal text-base text-mti-gray-dim">
+                Speaking Instructor&apos;s Gender
+              </label>
+              <Select
+                value={{
+                  value: instructorGender,
+                  label: capitalize(instructorGender),
+                }}
+                onChange={(value) =>
+                  value
+                    ? setInstructorGender(value.value as InstructorGender)
+                    : null
+                }
+                disabled={!selectedModules.includes("speaking")}
+                options={[
+                  { value: "male", label: "Male" },
+                  { value: "female", label: "Female" },
+                  { value: "varied", label: "Varied" },
+                ]}
+              />
+            </div>
+          )}
 
-					{selectedModules.length > 0 && (
-						<div className="flex flex-col gap-3 w-full">
-							<Checkbox isChecked={useRandomExams} onChange={setUseRandomExams}>
-								Random Exams
-							</Checkbox>
-							{!useRandomExams && (
-								<div className="grid md:grid-cols-2 w-full gap-4">
-									{selectedModules.map((module) => (
-										<div key={module} className="flex flex-col gap-3 w-full">
-											<label className="font-normal text-base text-mti-gray-dim">{capitalize(module)} Exam</label>
-											<Select
-												value={{
-													value: examIDs.find((e) => e.module === module)?.id || null,
-													label: examIDs.find((e) => e.module === module)?.id || "",
-												}}
-												onChange={(value) =>
-													value
-														? setExamIDs((prev) => [
-															...prev.filter((x) => x.module !== module),
-															{ id: value.value!, module },
-														])
-														: setExamIDs((prev) => prev.filter((x) => x.module !== module))
-												}
-												options={exams
-													.filter((x) => !x.isDiagnostic && x.module === module)
-													.map((x) => ({ value: x.id, label: x.id }))}
-											/>
-										</div>
-									))}
-								</div>
-							)}
-						</div>
-					)}
+          {selectedModules.length > 0 && (
+            <div className="flex flex-col gap-3 w-full">
+              <Checkbox isChecked={useRandomExams} onChange={setUseRandomExams}>
+                Random Exams
+              </Checkbox>
+              {!useRandomExams && (
+                <div className="grid md:grid-cols-2 w-full gap-4">
+                  {selectedModules.map((module) => (
+                    <div key={module} className="flex flex-col gap-3 w-full">
+                      <label className="font-normal text-base text-mti-gray-dim">
+                        {capitalize(module)} Exam
+                      </label>
+                      <Select
+                        value={{
+                          value:
+                            examIDs.find((e) => e.module === module)?.id ||
+                            null,
+                          label:
+                            examIDs.find((e) => e.module === module)?.id || "",
+                        }}
+                        onChange={(value) =>
+                          value
+                            ? setExamIDs((prev) => [
+                                ...prev.filter((x) => x.module !== module),
+                                { id: value.value!, module },
+                              ])
+                            : setExamIDs((prev) =>
+                                prev.filter((x) => x.module !== module)
+                              )
+                        }
+                        options={exams
+                          .filter((x) => !x.isDiagnostic && x.module === module)
+                          .map((x) => ({ value: x.id, label: x.id }))}
+                      />
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
 
-					<section className="w-full flex flex-col gap-4">
-						<span className="font-semibold">Assignees ({assignees.length} selected)</span>
-						<div className="grid grid-cols-5 gap-4">
-							{classrooms.map((g) => (
-								<button
-									key={g.id}
-									onClick={() => {
-										const groupStudentIds = users.filter((u) => g.participants.includes(u.id)).map((u) => u.id);
-										if (groupStudentIds.every((u) => assignees.includes(u))) {
-											setAssignees((prev) => prev.filter((a) => !groupStudentIds.includes(a)));
-										} else {
-											setAssignees((prev) => [...prev.filter((a) => !groupStudentIds.includes(a)), ...groupStudentIds]);
-										}
-									}}
-									className={clsx(
-										"bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
-										"transition duration-300 ease-in-out",
-										users.filter((u) => g.participants.includes(u.id)).every((u) => assignees.includes(u.id)) &&
-										"!bg-mti-purple-light !text-white",
-									)}>
-									{g.name}
-								</button>
-							))}
-						</div>
+          <section className="w-full flex flex-col gap-4">
+            <span className="font-semibold">
+              Assignees ({assignees.length} selected)
+            </span>
+            <div className="grid grid-cols-5 gap-4">
+              {classrooms.map((g) => (
+                <button
+                  key={g.id}
+                  onClick={() => {
+                    const groupStudentIds = users.reduce<string[]>((acc, u) => {
+                      if (g.participants.includes(u.id)) {
+                        acc.push(u.id);
+                      }
+                      return acc;
+                    }, []);
+                    if (groupStudentIds.every((u) => assignees.includes(u))) {
+                      setAssignees((prev) =>
+                        prev.filter((a) => !groupStudentIds.includes(a))
+                      );
+                    } else {
+                      setAssignees((prev) => [
+                        ...prev.filter((a) => !groupStudentIds.includes(a)),
+                        ...groupStudentIds,
+                      ]);
+                    }
+                  }}
+                  className={clsx(
+                    "bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
+                    "transition duration-300 ease-in-out",
+                    users
+                      .filter((u) => g.participants.includes(u.id))
+                      .every((u) => assignees.includes(u.id)) &&
+                      "!bg-mti-purple-light !text-white"
+                  )}
+                >
+                  {g.name}
+                </button>
+              ))}
+            </div>
 
-						<div className="w-full flex items-center gap-4">
-							{renderStudentSearch()}
-							{renderStudentPagination()}
-						</div>
+            <div className="w-full flex items-center gap-4">
+              {renderStudentSearch()}
+              {renderStudentPagination()}
+            </div>
 
-						<div className="flex flex-wrap -md:justify-center gap-4">
-							{studentRows.map((user) => (
-								<div
-									onClick={() => toggleAssignee(user)}
-									className={clsx(
-										"p-4 flex flex-col gap-2 rounded-xl border cursor-pointer w-72",
-										"transition ease-in-out duration-300",
-										assignees.includes(user.id) ? "border-mti-purple" : "border-mti-gray-platinum",
-									)}
-									key={user.id}>
-									<span className="flex flex-col gap-0 justify-center">
-										<span className="font-semibold">{user.name}</span>
-										<span className="text-sm opacity-80">{user.email}</span>
-									</span>
-									<ProgressBar
-										color="purple"
-										textClassName="!text-mti-black/80"
-										label={`Level ${calculateAverageLevel(user.levels)}`}
-										percentage={(calculateAverageLevel(user.levels) / 9) * 100}
-										className="h-6"
-									/>
-									<span className="text-mti-black/80 text-sm whitespace-pre-wrap mt-2">
-										Groups:{" "}
-										{groups
-											.filter((g) => g.participants.includes(user.id))
-											.map((g) => g.name)
-											.join(", ")}
-									</span>
-								</div>
-							))}
-						</div>
-					</section>
+            <div className="flex flex-wrap -md:justify-center gap-4">
+              {studentRows.map((user) => (
+                <div
+                  onClick={() => toggleAssignee(user)}
+                  className={clsx(
+                    "p-4 flex flex-col gap-2 rounded-xl border cursor-pointer w-72",
+                    "transition ease-in-out duration-300",
+                    assignees.includes(user.id)
+                      ? "border-mti-purple"
+                      : "border-mti-gray-platinum"
+                  )}
+                  key={user.id}
+                >
+                  <span className="flex flex-col gap-0 justify-center">
+                    <span className="font-semibold">{user.name}</span>
+                    <span className="text-sm opacity-80">{user.email}</span>
+                  </span>
+                  <ProgressBar
+                    color="purple"
+                    textClassName="!text-mti-black/80"
+                    label={`Level ${calculateAverageLevel(user.levels)}`}
+                    percentage={(calculateAverageLevel(user.levels) / 9) * 100}
+                    className="h-6"
+                  />
+                  <span className="text-mti-black/80 text-sm whitespace-pre-wrap mt-2">
+                    Groups:{" "}
+                    {groups
+                      .filter((g) => g.participants.includes(user.id))
+                      .map((g) => g.name)
+                      .join(", ")}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </section>
 
-					{user.type !== "teacher" && (
-						<section className="w-full flex flex-col gap-3">
-							<span className="font-semibold">Teachers ({teachers.length} selected)</span>
-							<div className="grid grid-cols-5 gap-4">
-								{classrooms.map((g) => (
-									<button
-										key={g.id}
-										onClick={() => {
-											const groupStudentIds = users.filter((u) => g.participants.includes(u.id)).map((u) => u.id);
-											if (groupStudentIds.every((u) => teachers.includes(u))) {
-												setTeachers((prev) => prev.filter((a) => !groupStudentIds.includes(a)));
-											} else {
-												setTeachers((prev) => [...prev.filter((a) => !groupStudentIds.includes(a)), ...groupStudentIds]);
-											}
-										}}
-										className={clsx(
-											"bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
-											"transition duration-300 ease-in-out",
-											users.filter((u) => g.participants.includes(u.id)).every((u) => teachers.includes(u.id)) &&
-											"!bg-mti-purple-light !text-white",
-										)}>
-										{g.name}
-									</button>
-								))}
-							</div>
+          {user.type !== "teacher" && (
+            <section className="w-full flex flex-col gap-3">
+              <span className="font-semibold">
+                Teachers ({teachers.length} selected)
+              </span>
+              <div className="grid grid-cols-5 gap-4">
+                {classrooms.map((g) => (
+                  <button
+                    key={g.id}
+                    onClick={() => {
+                      const groupStudentIds = users.reduce<string[]>(
+                        (acc, u) => {
+                          if (g.participants.includes(u.id)) {
+                            acc.push(u.id);
+                          }
+                          return acc;
+                        },
+                        []
+                      );
+                      if (groupStudentIds.every((u) => teachers.includes(u))) {
+                        setTeachers((prev) =>
+                          prev.filter((a) => !groupStudentIds.includes(a))
+                        );
+                      } else {
+                        setTeachers((prev) => [
+                          ...prev.filter((a) => !groupStudentIds.includes(a)),
+                          ...groupStudentIds,
+                        ]);
+                      }
+                    }}
+                    className={clsx(
+                      "bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
+                      "transition duration-300 ease-in-out",
+                      users
+                        .filter((u) => g.participants.includes(u.id))
+                        .every((u) => teachers.includes(u.id)) &&
+                        "!bg-mti-purple-light !text-white"
+                    )}
+                  >
+                    {g.name}
+                  </button>
+                ))}
+              </div>
 
-							<div className="w-full flex items-center gap-4">
-								{renderTeacherSearch()}
-								{renderTeacherPagination()}
-							</div>
+              <div className="w-full flex items-center gap-4">
+                {renderTeacherSearch()}
+                {renderTeacherPagination()}
+              </div>
 
-							<div className="flex flex-wrap -md:justify-center gap-4">
-								{teacherRows.map((user) => (
-									<div
-										onClick={() => toggleTeacher(user)}
-										className={clsx(
-											"p-4 flex flex-col gap-2 rounded-xl border cursor-pointer w-72",
-											"transition ease-in-out duration-300",
-											teachers.includes(user.id) ? "border-mti-purple" : "border-mti-gray-platinum",
-										)}
-										key={user.id}>
-										<span className="flex flex-col gap-0 justify-center">
-											<span className="font-semibold">{user.name}</span>
-											<span className="text-sm opacity-80">{user.email}</span>
-										</span>
-										<span className="text-mti-black/80 text-sm whitespace-pre-wrap mt-2">
-											Groups:{" "}
-											{groups
-												.filter((g) => g.participants.includes(user.id))
-												.map((g) => g.name)
-												.join(", ")}
-										</span>
-									</div>
-								))}
-							</div>
-						</section>
-					)}
+              <div className="flex flex-wrap -md:justify-center gap-4">
+                {teacherRows.map((user) => (
+                  <div
+                    onClick={() => toggleTeacher(user)}
+                    className={clsx(
+                      "p-4 flex flex-col gap-2 rounded-xl border cursor-pointer w-72",
+                      "transition ease-in-out duration-300",
+                      teachers.includes(user.id)
+                        ? "border-mti-purple"
+                        : "border-mti-gray-platinum"
+                    )}
+                    key={user.id}
+                  >
+                    <span className="flex flex-col gap-0 justify-center">
+                      <span className="font-semibold">{user.name}</span>
+                      <span className="text-sm opacity-80">{user.email}</span>
+                    </span>
+                    <span className="text-mti-black/80 text-sm whitespace-pre-wrap mt-2">
+                      Groups:{" "}
+                      {groups
+                        .filter((g) => g.participants.includes(user.id))
+                        .map((g) => g.name)
+                        .join(", ")}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </section>
+          )}
 
-					<div className="flex gap-4 w-full items-end">
-						<Checkbox isChecked={variant === "full"} onChange={() => setVariant((prev) => (prev === "full" ? "partial" : "full"))}>
-							Full length exams
-						</Checkbox>
-						<Checkbox isChecked={generateMultiple} onChange={() => setGenerateMultiple((d) => !d)}>
-							Generate different exams
-						</Checkbox>
-						<Checkbox isChecked={released} onChange={() => setReleased((d) => !d)}>
-							Auto release results
-						</Checkbox>
-						<Checkbox isChecked={autoStart} onChange={() => setAutostart((d) => !d)}>
-							Auto start exam
-						</Checkbox>
-					</div>
-					<div className="flex gap-4 w-full justify-end">
-						<Button
-							className="w-full max-w-[200px]"
-							variant="outline"
-							onClick={() => router.push("/assignments")}
-							disabled={isLoading}
-							isLoading={isLoading}>
-							Cancel
-						</Button>
+          <div className="flex gap-4 w-full items-end">
+            <Checkbox
+              isChecked={variant === "full"}
+              onChange={() =>
+                setVariant((prev) => (prev === "full" ? "partial" : "full"))
+              }
+            >
+              Full length exams
+            </Checkbox>
+            <Checkbox
+              isChecked={generateMultiple}
+              onChange={() => setGenerateMultiple((d) => !d)}
+            >
+              Generate different exams
+            </Checkbox>
+            <Checkbox
+              isChecked={released}
+              onChange={() => setReleased((d) => !d)}
+            >
+              Auto release results
+            </Checkbox>
+            <Checkbox
+              isChecked={autoStart}
+              onChange={() => setAutostart((d) => !d)}
+            >
+              Auto start exam
+            </Checkbox>
+          </div>
+          <div className="flex gap-4 w-full justify-end">
+            <Button
+              className="w-full max-w-[200px]"
+              variant="outline"
+              onClick={() => router.push("/assignments")}
+              disabled={isLoading}
+              isLoading={isLoading}
+            >
+              Cancel
+            </Button>
 
-						<Button
-							disabled={
-								selectedModules.length === 0 ||
-								!name ||
-								!startDate ||
-								!endDate ||
-								!entity ||
-								assignees.length === 0 ||
-								(!useRandomExams && examIDs.length < selectedModules.length)
-							}
-							className="w-full max-w-[200px]"
-							onClick={createAssignment}
-							isLoading={isLoading}>
-							Create
-						</Button>
-					</div>
-				</div>
-			</>
-		</>
-	);
+            <Button
+              disabled={
+                selectedModules.length === 0 ||
+                !name ||
+                !startDate ||
+                !endDate ||
+                !entity ||
+                assignees.length === 0 ||
+                (!useRandomExams && examIDs.length < selectedModules.length)
+              }
+              className="w-full max-w-[200px]"
+              onClick={createAssignment}
+              isLoading={isLoading}
+            >
+              Create
+            </Button>
+          </div>
+        </div>
+      </>
+    </>
+  );
 }
diff --git a/src/pages/assignments/index.tsx b/src/pages/assignments/index.tsx
index 113de22f..e404bfad 100644
--- a/src/pages/assignments/index.tsx
+++ b/src/pages/assignments/index.tsx
@@ -5,16 +5,16 @@ import { useListSearch } from "@/hooks/useListSearch";
 import usePagination from "@/hooks/usePagination";
 import { EntityWithRoles } from "@/interfaces/entity";
 import { Assignment } from "@/interfaces/results";
-import {  User } from "@/interfaces/user";
+import { User } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
 import { findBy, mapBy, redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
 import {
-	activeAssignmentFilter,
-	archivedAssignmentFilter,
-	futureAssignmentFilter,
-	pastAssignmentFilter,
-	startHasExpiredAssignmentFilter,
+  activeAssignmentFilter,
+  archivedAssignmentFilter,
+  futureAssignmentFilter,
+  pastAssignmentFilter,
+  startHasExpiredAssignmentFilter,
 } from "@/utils/assignments";
 import { getAssignments, getEntitiesAssignments } from "@/utils/assignments.be";
 import { getEntitiesWithRoles } from "@/utils/entities.be";
@@ -28,197 +28,309 @@ import { useMemo } from "react";
 import { BsChevronLeft, BsPlus } from "react-icons/bs";
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
-	const user = await requestUser(req, res)
-	if (!user) return redirect("/login")
+  const user = await requestUser(req, res);
+  if (!user) return redirect("/login");
 
-	if (!checkAccess(user, ["admin", "developer", "corporate", "teacher", "mastercorporate"]))
-		return redirect("/")
+  if (
+    !checkAccess(user, [
+      "admin",
+      "developer",
+      "corporate",
+      "teacher",
+      "mastercorporate",
+    ])
+  )
+    return redirect("/");
+  const isAdmin = checkAccess(user, ["developer", "admin"]);
+  const entityIDS = mapBy(user.entities, "id") || [];
+  const entities = await (isAdmin
+    ? getEntitiesWithRoles()
+    : getEntitiesWithRoles(entityIDS));
 
-	const entityIDS = mapBy(user.entities, "id") || [];
-	const entities = await (checkAccess(user, ["developer", "admin"]) ? getEntitiesWithRoles() : getEntitiesWithRoles(entityIDS));
+  const allowedEntities = findAllowedEntities(
+    user,
+    entities,
+    "view_assignments"
+  );
+  const [users, assignments] = await Promise.all([
+    await (isAdmin
+      ? getUsers({}, 0, {}, { _id: 0, id: 1, name: 1 })
+      : getEntitiesUsers(mapBy(allowedEntities, "id"), {}, 0, {
+          _id: 0,
+          id: 1,
+          name: 1,
+        })),
+    await (isAdmin
+      ? getAssignments()
+      : getEntitiesAssignments(mapBy(allowedEntities, "id"))),
+  ]);
 
-	const allowedEntities = findAllowedEntities(user, entities, "view_assignments")
-
-	const users =
-		await (checkAccess(user, ["developer", "admin"]) ? getUsers() : getEntitiesUsers(mapBy(allowedEntities, 'id')));
-
-	const assignments =
-		await (checkAccess(user, ["developer", "admin"]) ? getAssignments() : getEntitiesAssignments(mapBy(allowedEntities, 'id')));
-
-	return { props: serialize({ user, users, entities: allowedEntities, assignments }) };
+  return {
+    props: serialize({ user, users, entities: allowedEntities, assignments }),
+  };
 }, sessionOptions);
 
 const SEARCH_FIELDS = [["name"]];
 
 interface Props {
-	assignments: Assignment[];
-	entities: EntityWithRoles[]
-	user: User;
-	users: User[];
+  assignments: Assignment[];
+  entities: EntityWithRoles[];
+  user: User;
+  users: User[];
 }
 
-export default function AssignmentsPage({ assignments, entities, user, users }: Props) {
-	const entitiesAllowCreate = useAllowedEntities(user, entities, 'create_assignment')
-	const entitiesAllowEdit = useAllowedEntities(user, entities, 'edit_assignment')
-	const entitiesAllowArchive = useAllowedEntities(user, entities, 'archive_assignment')
+export default function AssignmentsPage({
+  assignments,
+  entities,
+  user,
+  users,
+}: Props) {
+  const entitiesAllowCreate = useAllowedEntities(
+    user,
+    entities,
+    "create_assignment"
+  );
+  const entitiesAllowEdit = useAllowedEntities(
+    user,
+    entities,
+    "edit_assignment"
+  );
+  const entitiesAllowArchive = useAllowedEntities(
+    user,
+    entities,
+    "archive_assignment"
+  );
 
-	const activeAssignments = useMemo(() => assignments.filter(activeAssignmentFilter), [assignments]);
-	const plannedAssignments = useMemo(() => assignments.filter(futureAssignmentFilter), [assignments]);
-	const pastAssignments = useMemo(() => assignments.filter(pastAssignmentFilter), [assignments]);
-	const startExpiredAssignments = useMemo(() => assignments.filter(startHasExpiredAssignmentFilter), [assignments]);
-	const archivedAssignments = useMemo(() => assignments.filter(archivedAssignmentFilter), [assignments]);
+  const activeAssignments = useMemo(
+    () => assignments.filter(activeAssignmentFilter),
+    [assignments]
+  );
+  const plannedAssignments = useMemo(
+    () => assignments.filter(futureAssignmentFilter),
+    [assignments]
+  );
+  const pastAssignments = useMemo(
+    () => assignments.filter(pastAssignmentFilter),
+    [assignments]
+  );
+  const startExpiredAssignments = useMemo(
+    () => assignments.filter(startHasExpiredAssignmentFilter),
+    [assignments]
+  );
+  const archivedAssignments = useMemo(
+    () => assignments.filter(archivedAssignmentFilter),
+    [assignments]
+  );
 
-	const router = useRouter();
+  const router = useRouter();
 
-	const { rows: activeRows, renderSearch: renderActive } = useListSearch(SEARCH_FIELDS, activeAssignments);
-	const { rows: plannedRows, renderSearch: renderPlanned } = useListSearch(SEARCH_FIELDS, plannedAssignments);
-	const { rows: pastRows, renderSearch: renderPast } = useListSearch(SEARCH_FIELDS, pastAssignments);
-	const { rows: expiredRows, renderSearch: renderExpired } = useListSearch(SEARCH_FIELDS, startExpiredAssignments);
-	const { rows: archivedRows, renderSearch: renderArchived } = useListSearch(SEARCH_FIELDS, archivedAssignments);
+  const { rows: activeRows, renderSearch: renderActive } = useListSearch(
+    SEARCH_FIELDS,
+    activeAssignments
+  );
+  const { rows: plannedRows, renderSearch: renderPlanned } = useListSearch(
+    SEARCH_FIELDS,
+    plannedAssignments
+  );
+  const { rows: pastRows, renderSearch: renderPast } = useListSearch(
+    SEARCH_FIELDS,
+    pastAssignments
+  );
+  const { rows: expiredRows, renderSearch: renderExpired } = useListSearch(
+    SEARCH_FIELDS,
+    startExpiredAssignments
+  );
+  const { rows: archivedRows, renderSearch: renderArchived } = useListSearch(
+    SEARCH_FIELDS,
+    archivedAssignments
+  );
 
-	const { items: activeItems, renderMinimal: paginationActive } = usePagination(activeRows, 16);
-	const { items: plannedItems, renderMinimal: paginationPlanned } = usePagination(plannedRows, 16);
-	const { items: pastItems, renderMinimal: paginationPast } = usePagination(pastRows, 16);
-	const { items: expiredItems, renderMinimal: paginationExpired } = usePagination(expiredRows, 16);
-	const { items: archivedItems, renderMinimal: paginationArchived } = usePagination(archivedRows, 16);
+  const { items: activeItems, renderMinimal: paginationActive } = usePagination(
+    activeRows,
+    16
+  );
+  const { items: plannedItems, renderMinimal: paginationPlanned } =
+    usePagination(plannedRows, 16);
+  const { items: pastItems, renderMinimal: paginationPast } = usePagination(
+    pastRows,
+    16
+  );
+  const { items: expiredItems, renderMinimal: paginationExpired } =
+    usePagination(expiredRows, 16);
+  const { items: archivedItems, renderMinimal: paginationArchived } =
+    usePagination(archivedRows, 16);
 
-	return (
-		<>
-			<Head>
-				<title>Assignments | 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>
-			<>
-				<div className="flex flex-col gap-4">
-					<div className="flex items-center gap-2">
-						<Link href="/dashboard" className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
-							<BsChevronLeft />
-						</Link>
-						<h2 className="font-bold text-2xl">Assignments</h2>
-					</div>
-					<Separator />
-				</div>
-				<div className="flex flex-col gap-2">
-					<span className="text-lg font-bold">Active Assignments Status</span>
-					<div className="flex items-center gap-4">
-						<span>
-							<b>Total:</b> {activeAssignments.reduce((acc, curr) => acc + curr.results.length, 0)}/
-							{activeAssignments.reduce((acc, curr) => curr.exams.length + acc, 0)}
-						</span>
-					</div>
-				</div>
+  return (
+    <>
+      <Head>
+        <title>Assignments | 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>
+      <>
+        <div className="flex flex-col gap-4">
+          <div className="flex items-center gap-2">
+            <Link
+              href="/dashboard"
+              className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl"
+            >
+              <BsChevronLeft />
+            </Link>
+            <h2 className="font-bold text-2xl">Assignments</h2>
+          </div>
+          <Separator />
+        </div>
+        <div className="flex flex-col gap-2">
+          <span className="text-lg font-bold">Active Assignments Status</span>
+          <div className="flex items-center gap-4">
+            <span>
+              <b>Total:</b>{" "}
+              {activeAssignments.reduce(
+                (acc, curr) => acc + curr.results.length,
+                0
+              )}
+              /
+              {activeAssignments.reduce(
+                (acc, curr) => curr.exams.length + acc,
+                0
+              )}
+            </span>
+          </div>
+        </div>
 
-				<section className="flex flex-col gap-4">
-					<h2 className="text-2xl font-semibold">Active Assignments ({activeAssignments.length})</h2>
-					<div className="w-full flex items-center gap-4">
-						{renderActive()}
-						{paginationActive()}
-					</div>
-					<div className="flex flex-wrap gap-2">
-						{activeItems.map((a) => (
-							<AssignmentCard {...a} entityObj={findBy(entities, 'id', a.entity)} users={users} onClick={() => router.push(`/assignments/${a.id}`)} key={a.id} />
-						))}
-					</div>
-				</section>
+        <section className="flex flex-col gap-4">
+          <h2 className="text-2xl font-semibold">
+            Active Assignments ({activeAssignments.length})
+          </h2>
+          <div className="w-full flex items-center gap-4">
+            {renderActive()}
+            {paginationActive()}
+          </div>
+          <div className="flex flex-wrap gap-2">
+            {activeItems.map((a) => (
+              <AssignmentCard
+                {...a}
+                entityObj={findBy(entities, "id", a.entity)}
+                users={users}
+                onClick={() => router.push(`/assignments/${a.id}`)}
+                key={a.id}
+              />
+            ))}
+          </div>
+        </section>
 
-				<section className="flex flex-col gap-4">
-					<h2 className="text-2xl font-semibold">Planned Assignments ({plannedAssignments.length})</h2>
-					<div className="w-full flex items-center gap-4">
-						{renderPlanned()}
-						{paginationPlanned()}
-					</div>
-					<div className="flex flex-wrap gap-2">
-						<Link
-							href={entitiesAllowCreate.length > 0 ? "/assignments/creator" : ""}
-							className="w-[250px] h-[200px] flex flex-col gap-2 items-center justify-center bg-white hover:bg-mti-purple-ultralight text-mti-purple-light hover:text-mti-purple-dark border border-mti-gray-platinum hover:drop-shadow p-4 cursor-pointer rounded-xl transition ease-in-out duration-300">
-							<BsPlus className="text-6xl" />
-							<span className="text-lg">New Assignment</span>
-						</Link>
-						{plannedItems.map((a) => (
-							<AssignmentCard
-								{...a}
-								users={users}
-								entityObj={findBy(entities, 'id', a.entity)}
-								onClick={
-									mapBy(entitiesAllowEdit, 'id').includes(a.entity || "")
-										? () => router.push(`/assignments/creator/${a.id}`)
-										: () => router.push(`/assignments/${a.id}`)
-								}
-								key={a.id}
-							/>
-						))}
-					</div>
-				</section>
+        <section className="flex flex-col gap-4">
+          <h2 className="text-2xl font-semibold">
+            Planned Assignments ({plannedAssignments.length})
+          </h2>
+          <div className="w-full flex items-center gap-4">
+            {renderPlanned()}
+            {paginationPlanned()}
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <Link
+              href={
+                entitiesAllowCreate.length > 0 ? "/assignments/creator" : ""
+              }
+              className="w-[250px] h-[200px] flex flex-col gap-2 items-center justify-center bg-white hover:bg-mti-purple-ultralight text-mti-purple-light hover:text-mti-purple-dark border border-mti-gray-platinum hover:drop-shadow p-4 cursor-pointer rounded-xl transition ease-in-out duration-300"
+            >
+              <BsPlus className="text-6xl" />
+              <span className="text-lg">New Assignment</span>
+            </Link>
+            {plannedItems.map((a) => (
+              <AssignmentCard
+                {...a}
+                users={users}
+                entityObj={findBy(entities, "id", a.entity)}
+                onClick={
+                  mapBy(entitiesAllowEdit, "id").includes(a.entity || "")
+                    ? () => router.push(`/assignments/creator/${a.id}`)
+                    : () => router.push(`/assignments/${a.id}`)
+                }
+                key={a.id}
+              />
+            ))}
+          </div>
+        </section>
 
-				<section className="flex flex-col gap-4">
-					<h2 className="text-2xl font-semibold">Past Assignments ({pastAssignments.length})</h2>
-					<div className="w-full flex items-center gap-4">
-						{renderPast()}
-						{paginationPast()}
-					</div>
-					<div className="flex flex-wrap gap-2">
-						{pastItems.map((a) => (
-							<AssignmentCard
-								{...a}
-								users={users}
-								entityObj={findBy(entities, 'id', a.entity)}
-								onClick={() => router.push(`/assignments/${a.id}`)}
-								key={a.id}
-								allowDownload
-								allowArchive={mapBy(entitiesAllowArchive, 'id').includes(a.entity || "")}
-								allowExcelDownload
-							/>
-						))}
-					</div>
-				</section>
-				<section className="flex flex-col gap-4">
-					<h2 className="text-2xl font-semibold">Assignments start expired ({startExpiredAssignments.length})</h2>
-					<div className="w-full flex items-center gap-4">
-						{renderExpired()}
-						{paginationExpired()}
-					</div>
-					<div className="flex flex-wrap gap-2">
-						{expiredItems.map((a) => (
-							<AssignmentCard
-								{...a}
-								users={users}
-								entityObj={findBy(entities, 'id', a.entity)}
-								onClick={() => router.push(`/assignments/${a.id}`)}
-								key={a.id}
-								allowDownload
-								allowArchive={mapBy(entitiesAllowArchive, 'id').includes(a.entity || "")}
-								allowExcelDownload
-							/>
-						))}
-					</div>
-				</section>
-				<section className="flex flex-col gap-4">
-					<h2 className="text-2xl font-semibold">Archived Assignments ({archivedAssignments.length})</h2>
-					<div className="w-full flex items-center gap-4">
-						{renderArchived()}
-						{paginationArchived()}
-					</div>
-					<div className="flex flex-wrap gap-2">
-						{archivedItems.map((a) => (
-							<AssignmentCard
-								{...a}
-								users={users}
-								onClick={() => router.push(`/assignments/${a.id}`)}
-								key={a.id}
-								entityObj={findBy(entities, 'id', a.entity)}
-								allowDownload
-								allowUnarchive
-								allowExcelDownload
-							/>
-						))}
-					</div>
-				</section>
-			</>
-		</>
-	);
+        <section className="flex flex-col gap-4">
+          <h2 className="text-2xl font-semibold">
+            Past Assignments ({pastAssignments.length})
+          </h2>
+          <div className="w-full flex items-center gap-4">
+            {renderPast()}
+            {paginationPast()}
+          </div>
+          <div className="flex flex-wrap gap-2">
+            {pastItems.map((a) => (
+              <AssignmentCard
+                {...a}
+                users={users}
+                entityObj={findBy(entities, "id", a.entity)}
+                onClick={() => router.push(`/assignments/${a.id}`)}
+                key={a.id}
+                allowDownload
+                allowArchive={mapBy(entitiesAllowArchive, "id").includes(
+                  a.entity || ""
+                )}
+                allowExcelDownload
+              />
+            ))}
+          </div>
+        </section>
+        <section className="flex flex-col gap-4">
+          <h2 className="text-2xl font-semibold">
+            Assignments start expired ({startExpiredAssignments.length})
+          </h2>
+          <div className="w-full flex items-center gap-4">
+            {renderExpired()}
+            {paginationExpired()}
+          </div>
+          <div className="flex flex-wrap gap-2">
+            {expiredItems.map((a) => (
+              <AssignmentCard
+                {...a}
+                users={users}
+                entityObj={findBy(entities, "id", a.entity)}
+                onClick={() => router.push(`/assignments/${a.id}`)}
+                key={a.id}
+                allowDownload
+                allowArchive={mapBy(entitiesAllowArchive, "id").includes(
+                  a.entity || ""
+                )}
+                allowExcelDownload
+              />
+            ))}
+          </div>
+        </section>
+        <section className="flex flex-col gap-4">
+          <h2 className="text-2xl font-semibold">
+            Archived Assignments ({archivedAssignments.length})
+          </h2>
+          <div className="w-full flex items-center gap-4">
+            {renderArchived()}
+            {paginationArchived()}
+          </div>
+          <div className="flex flex-wrap gap-2">
+            {archivedItems.map((a) => (
+              <AssignmentCard
+                {...a}
+                users={users}
+                onClick={() => router.push(`/assignments/${a.id}`)}
+                key={a.id}
+                entityObj={findBy(entities, "id", a.entity)}
+                allowDownload
+                allowUnarchive
+                allowExcelDownload
+              />
+            ))}
+          </div>
+        </section>
+      </>
+    </>
+  );
 }
diff --git a/src/pages/classrooms/[id].tsx b/src/pages/classrooms/[id].tsx
index c6eb70ce..9edbeaff 100644
--- a/src/pages/classrooms/[id].tsx
+++ b/src/pages/classrooms/[id].tsx
@@ -18,328 +18,476 @@ import { getEntityUsers, getSpecificUsers } from "@/utils/users.be";
 import axios from "axios";
 import clsx from "clsx";
 import { withIronSessionSsr } from "iron-session/next";
-import { capitalize } from "lodash";
+import { capitalize, last } from "lodash";
 import moment from "moment";
 import Head from "next/head";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { Divider } from "primereact/divider";
 import { useEffect, useMemo, useState } from "react";
-import { BsBuilding, BsChevronLeft, BsClockFill, BsEnvelopeFill, BsFillPersonVcardFill, BsPlus, BsStopwatchFill, BsTag, BsTrash, BsX } from "react-icons/bs";
+import {
+  BsBuilding,
+  BsChevronLeft,
+  BsClockFill,
+  BsEnvelopeFill,
+  BsFillPersonVcardFill,
+  BsPlus,
+  BsStopwatchFill,
+  BsTag,
+  BsTrash,
+  BsX,
+} from "react-icons/bs";
 import { toast, ToastContainer } from "react-toastify";
 
-export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => {
-	const user = await requestUser(req, res)
-	if (!user) return redirect("/login")
+export const getServerSideProps = withIronSessionSsr(
+  async ({ req, res, params }) => {
+    const user = await requestUser(req, res);
+    if (!user) return redirect("/login");
 
-	if (shouldRedirectHome(user)) return redirect("/")
+    if (shouldRedirectHome(user)) return redirect("/");
 
-	const { id } = params as { id: string };
+    const { id } = params as { id: string };
 
-	const group = await getGroup(id);
-	if (!group || !group.entity) return redirect("/classrooms")
+    const group = await getGroup(id);
+    if (!group || !group.entity) return redirect("/classrooms");
 
-	const entity = await getEntityWithRoles(group.entity)
-	if (!entity) return redirect("/classrooms")
+    const entity = await getEntityWithRoles(group.entity);
+    if (!entity) return redirect("/classrooms");
 
-	const canView = doesEntityAllow(user, entity, "view_classrooms")
-	if (!canView) return redirect("/")
+    const canView = doesEntityAllow(user, entity, "view_classrooms");
+    if (!canView) return redirect("/");
+    const [linkedUsers, users] = await Promise.all([
+      getEntityUsers(
+        entity.id,
+        0,
+        {},
+        {
+          _id: 0,
+          id: 1,
+          name: 1,
+          email: 1,
+          corporateInformation: 1,
+          type: 1,
+          profilePicture: 1,
+          subscriptionExpirationDate: 1,
+          lastLogin: 1,
+        }
+      ),
+      getSpecificUsers([...group.participants, group.admin], {
+        _id: 0,
+        id: 1,
+        name: 1,
+        email: 1,
+        corporateInformation: 1,
+        type: 1,
+        profilePicture: 1,
+        subscriptionExpirationDate: 1,
+        lastLogin: 1,
+      }),
+    ]);
 
-	const linkedUsers = await getEntityUsers(entity.id)
-	const users = await getSpecificUsers([...group.participants, group.admin]);
-	const groupWithUser = convertToUsers(group, users);
+    const groupWithUser = convertToUsers(group, users);
 
-	return {
-		props: serialize({ user, group: groupWithUser, users: linkedUsers.filter(x => isAdmin(user) ? true : !isAdmin(x)), entity }),
-	};
-}, sessionOptions);
+    return {
+      props: serialize({
+        user,
+        group: groupWithUser,
+        users: linkedUsers.filter((x) => (isAdmin(user) ? true : !isAdmin(x))),
+        entity,
+      }),
+    };
+  },
+  sessionOptions
+);
 
 interface Props {
-	user: User;
-	group: GroupWithUsers;
-	users: User[];
-	entity: EntityWithRoles
+  user: User;
+  group: GroupWithUsers;
+  users: User[];
+  entity: EntityWithRoles;
 }
 
 export default function Home({ user, group, users, entity }: Props) {
-	const [isAdding, setIsAdding] = useState(false);
-	const [isLoading, setIsLoading] = useState(false);
-	const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
+  const [isAdding, setIsAdding] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
 
-	const canAddParticipants = useEntityPermission(user, entity, "add_to_classroom")
-	const canRemoveParticipants = useEntityPermission(user, entity, "remove_from_classroom")
-	const canRenameClassroom = useEntityPermission(user, entity, "rename_classrooms")
-	const canDeleteClassroom = useEntityPermission(user, entity, "delete_classroom")
+  const canAddParticipants = useEntityPermission(
+    user,
+    entity,
+    "add_to_classroom"
+  );
+  const canRemoveParticipants = useEntityPermission(
+    user,
+    entity,
+    "remove_from_classroom"
+  );
+  const canRenameClassroom = useEntityPermission(
+    user,
+    entity,
+    "rename_classrooms"
+  );
+  const canDeleteClassroom = useEntityPermission(
+    user,
+    entity,
+    "delete_classroom"
+  );
 
-	const nonParticipantUsers = useMemo(
-		() => users.filter((x) => ![...group.participants.map((g) => g.id), group.admin.id, user.id].includes(x.id)),
-		[users, group.participants, group.admin.id, user.id],
-	);
+  const nonParticipantUsers = useMemo(
+    () =>
+      users.filter(
+        (x) =>
+          ![
+            ...group.participants.map((g) => g.id),
+            group.admin.id,
+            user.id,
+          ].includes(x.id)
+      ),
+    [users, group.participants, group.admin.id, user.id]
+  );
 
-	const { rows, renderSearch } = useListSearch<User>(
-		[["name"], ["corporateInformation", "companyInformation", "name"]],
-		isAdding ? nonParticipantUsers : group.participants,
-	);
-	const { items, renderMinimal } = usePagination<User>(rows, 20);
+  const { rows, renderSearch } = useListSearch<User>(
+    [["name"], ["corporateInformation", "companyInformation", "name"]],
+    isAdding ? nonParticipantUsers : group.participants
+  );
+  const { items, renderMinimal } = usePagination<User>(rows, 20);
 
-	const router = useRouter();
+  const router = useRouter();
 
-	const toggleUser = (u: User) => setSelectedUsers((prev) => (prev.includes(u.id) ? prev.filter((p) => p !== u.id) : [...prev, u.id]));
+  const toggleUser = (u: User) =>
+    setSelectedUsers((prev) =>
+      prev.includes(u.id) ? prev.filter((p) => p !== u.id) : [...prev, u.id]
+    );
 
-	const removeParticipants = () => {
-		if (selectedUsers.length === 0) return;
-		if (!canRemoveParticipants) return;
-		if (!confirm(`Are you sure you want to remove ${selectedUsers.length} participant${selectedUsers.length === 1 ? "" : "s"} from this group?`))
-			return;
+  const removeParticipants = () => {
+    if (selectedUsers.length === 0) return;
+    if (!canRemoveParticipants) return;
+    if (
+      !confirm(
+        `Are you sure you want to remove ${selectedUsers.length} participant${
+          selectedUsers.length === 1 ? "" : "s"
+        } from this group?`
+      )
+    )
+      return;
 
-		setIsLoading(true);
+    setIsLoading(true);
 
-		axios
-			.patch(`/api/groups/${group.id}`, { participants: group.participants.map((x) => x.id).filter((x) => !selectedUsers.includes(x)) })
-			.then(() => {
-				toast.success("The group has been updated successfully!");
-				router.replace(router.asPath);
-			})
-			.catch((e) => {
-				console.error(e);
-				toast.error("Something went wrong!");
-			})
-			.finally(() => setIsLoading(false));
-	};
+    axios
+      .patch(`/api/groups/${group.id}`, {
+        participants: group.participants
+          .map((x) => x.id)
+          .filter((x) => !selectedUsers.includes(x)),
+      })
+      .then(() => {
+        toast.success("The group has been updated successfully!");
+        router.replace(router.asPath);
+      })
+      .catch((e) => {
+        console.error(e);
+        toast.error("Something went wrong!");
+      })
+      .finally(() => setIsLoading(false));
+  };
 
-	const addParticipants = () => {
-		if (selectedUsers.length === 0) return;
-		if (!canAddParticipants || !isAdding) return;
-		if (!confirm(`Are you sure you want to add ${selectedUsers.length} participant${selectedUsers.length === 1 ? "" : "s"} to this group?`))
-			return;
+  const addParticipants = () => {
+    if (selectedUsers.length === 0) return;
+    if (!canAddParticipants || !isAdding) return;
+    if (
+      !confirm(
+        `Are you sure you want to add ${selectedUsers.length} participant${
+          selectedUsers.length === 1 ? "" : "s"
+        } to this group?`
+      )
+    )
+      return;
 
-		setIsLoading(true);
+    setIsLoading(true);
 
-		axios
-			.patch(`/api/groups/${group.id}`, { participants: [...group.participants.map((x) => x.id), ...selectedUsers] })
-			.then(() => {
-				toast.success("The group has been updated successfully!");
-				router.replace(router.asPath);
-			})
-			.catch((e) => {
-				console.error(e);
-				toast.error("Something went wrong!");
-			})
-			.finally(() => setIsLoading(false));
-	};
+    axios
+      .patch(`/api/groups/${group.id}`, {
+        participants: [
+          ...group.participants.map((x) => x.id),
+          ...selectedUsers,
+        ],
+      })
+      .then(() => {
+        toast.success("The group has been updated successfully!");
+        router.replace(router.asPath);
+      })
+      .catch((e) => {
+        console.error(e);
+        toast.error("Something went wrong!");
+      })
+      .finally(() => setIsLoading(false));
+  };
 
-	const renameGroup = () => {
-		if (!canRenameClassroom) return;
+  const renameGroup = () => {
+    if (!canRenameClassroom) return;
 
-		const name = prompt("Rename this classroom:", group.name);
-		if (!name) return;
+    const name = prompt("Rename this classroom:", group.name);
+    if (!name) return;
 
-		setIsLoading(true);
-		axios
-			.patch(`/api/groups/${group.id}`, { name })
-			.then(() => {
-				toast.success("The classroom has been updated successfully!");
-				router.replace(router.asPath);
-			})
-			.catch((e) => {
-				console.error(e);
-				toast.error("Something went wrong!");
-			})
-			.finally(() => setIsLoading(false));
-	};
+    setIsLoading(true);
+    axios
+      .patch(`/api/groups/${group.id}`, { name })
+      .then(() => {
+        toast.success("The classroom has been updated successfully!");
+        router.replace(router.asPath);
+      })
+      .catch((e) => {
+        console.error(e);
+        toast.error("Something went wrong!");
+      })
+      .finally(() => setIsLoading(false));
+  };
 
-	const deleteGroup = () => {
-		if (!canDeleteClassroom) return;
-		if (!confirm("Are you sure you want to delete this classroom?")) return;
+  const deleteGroup = () => {
+    if (!canDeleteClassroom) return;
+    if (!confirm("Are you sure you want to delete this classroom?")) return;
 
-		setIsLoading(true);
+    setIsLoading(true);
 
-		axios
-			.delete(`/api/groups/${group.id}`)
-			.then(() => {
-				toast.success("This classroom has been successfully deleted!");
-				router.replace("/classrooms");
-			})
-			.catch((e) => {
-				console.error(e);
-				toast.error("Something went wrong!");
-			})
-			.finally(() => setIsLoading(false));
-	};
+    axios
+      .delete(`/api/groups/${group.id}`)
+      .then(() => {
+        toast.success("This classroom has been successfully deleted!");
+        router.replace("/classrooms");
+      })
+      .catch((e) => {
+        console.error(e);
+        toast.error("Something went wrong!");
+      })
+      .finally(() => setIsLoading(false));
+  };
 
-	useEffect(() => setSelectedUsers([]), [isAdding]);
+  useEffect(() => setSelectedUsers([]), [isAdding]);
 
-	return (
-		<>
-			<Head>
-				<title>{group.name} | 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 />
-			{user && (
-				<>
-					<section className="flex flex-col gap-0">
-						<div className="flex items-center justify-between">
-							<div className="flex flex-col gap-3">
-								<div className="flex items-center gap-2">
-									<Link
-										href="/classrooms"
-										className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
-										<BsChevronLeft />
-									</Link>
-									<h2 className="font-bold text-2xl">{group.name}</h2>
-								</div>
+  return (
+    <>
+      <Head>
+        <title>{group.name} | 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 />
+      {user && (
+        <>
+          <section className="flex flex-col gap-0">
+            <div className="flex items-center justify-between">
+              <div className="flex flex-col gap-3">
+                <div className="flex items-center gap-2">
+                  <Link
+                    href="/classrooms"
+                    className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl"
+                  >
+                    <BsChevronLeft />
+                  </Link>
+                  <h2 className="font-bold text-2xl">{group.name}</h2>
+                </div>
 
-								{!isAdding && (
-									<div className="flex items-center gap-2">
-										<button
-											onClick={renameGroup}
-											disabled={isLoading || !canRenameClassroom}
-											className="flex items-center gap-1 px-2 py-2 border rounded-full hover:bg-neutral-100 disabled:hover:bg-transparent disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
-											<BsTag />
-											<span className="text-xs">Rename Classroom</span>
-										</button>
-										<button
-											onClick={deleteGroup}
-											disabled={isLoading || !canDeleteClassroom}
-											className="flex items-center gap-1 px-2 py-2 border border-mti-rose rounded-full bg-mti-rose-light text-white hover:bg-mti-rose-dark disabled:hover:bg-mti-rose-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
-											<BsTrash />
-											<span className="text-xs">Delete Classroom</span>
-										</button>
-									</div>
-								)}
-							</div>
-							<div className="flex flex-col gap-2">
-								<span className="flex items-center gap-2">
-									<BsBuilding className="text-xl" /> {entity.label}
-								</span>
-								<span className="flex items-center gap-2">
-									<BsFillPersonVcardFill className="text-xl" /> {getUserName(group.admin)}
-								</span>
-							</div>
-						</div>
-						<Divider />
-						<div className="flex items-center justify-between mb-4">
-							<span className="font-semibold text-xl">Participants</span>
-							{!isAdding && (
-								<div className="flex items-center gap-2">
-									<button
-										onClick={() => setIsAdding(true)}
-										disabled={isLoading || !canAddParticipants}
-										className="flex items-center gap-1 px-2 py-2 border rounded-full hover:bg-neutral-100 disabled:hover:bg-transparent disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
-										<BsPlus />
-										<span className="text-xs">Add Participants</span>
-									</button>
-									<button
-										onClick={removeParticipants}
-										disabled={selectedUsers.length === 0 || isLoading || !canRemoveParticipants}
-										className="flex items-center gap-1 px-2 py-2 border border-mti-rose rounded-full bg-mti-rose-light text-white hover:bg-mti-rose-dark disabled:hover:bg-mti-rose-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
-										<BsTrash />
-										<span className="text-xs">Remove Participants</span>
-									</button>
-								</div>
-							)}
-							{isAdding && (
-								<div className="flex items-center gap-2">
-									<button
-										onClick={() => setIsAdding(false)}
-										disabled={isLoading}
-										className="flex items-center gap-1 px-2 py-2 border rounded-full border-mti-rose bg-mti-rose-light text-white hover:bg-mti-rose-dark disabled:hover:bg-mti-rose-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
-										<BsX />
-										<span className="text-xs">Discard Selection</span>
-									</button>
-									<button
-										onClick={addParticipants}
-										disabled={selectedUsers.length === 0 || isLoading || !canAddParticipants}
-										className="flex items-center gap-1 px-2 py-2 border rounded-full border-mti-green bg-mti-green-light text-white hover:bg-mti-green-dark disabled:hover:bg-mti-green-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
-										<BsPlus />
-										<span className="text-xs">Add Participants</span>
-									</button>
-								</div>
-							)}
-						</div>
-						<div className="w-full flex items-center gap-4">
-							{renderSearch()}
-							{renderMinimal()}
-						</div>
-						<div className="flex items-center gap-2 mt-4">
-							{['student', 'teacher', 'corporate'].map((type) => (
-								<button
-									key={type}
-									onClick={() => {
-										const typeUsers = mapBy(filterBy(isAdding ? nonParticipantUsers : group.participants, 'type', type), 'id')
-										if (typeUsers.every((u) => selectedUsers.includes(u))) {
-											setSelectedUsers((prev) => prev.filter((a) => !typeUsers.includes(a)));
-										} else {
-											setSelectedUsers((prev) => [...prev.filter((a) => !typeUsers.includes(a)), ...typeUsers]);
-										}
-									}}
-									disabled={filterBy(isAdding ? nonParticipantUsers : group.participants, 'type', type).length === 0}
-									className={clsx(
-										"bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
-										"transition duration-300 ease-in-out",
-										"disabled:grayscale disabled:hover:bg-mti-purple-ultralight disabled:hover:text-mti-purple disabled:cursor-not-allowed",
-										filterBy(isAdding ? nonParticipantUsers : group.participants, 'type', type).length > 0 &&
-										filterBy(isAdding ? nonParticipantUsers : group.participants, 'type', type).every((u) => selectedUsers.includes(u.id)) &&
-										"!bg-mti-purple-light !text-white",
-									)}>
-									{capitalize(type)}
-								</button>
-							))}
-						</div>
-					</section>
+                {!isAdding && (
+                  <div className="flex items-center gap-2">
+                    <button
+                      onClick={renameGroup}
+                      disabled={isLoading || !canRenameClassroom}
+                      className="flex items-center gap-1 px-2 py-2 border rounded-full hover:bg-neutral-100 disabled:hover:bg-transparent disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300"
+                    >
+                      <BsTag />
+                      <span className="text-xs">Rename Classroom</span>
+                    </button>
+                    <button
+                      onClick={deleteGroup}
+                      disabled={isLoading || !canDeleteClassroom}
+                      className="flex items-center gap-1 px-2 py-2 border border-mti-rose rounded-full bg-mti-rose-light text-white hover:bg-mti-rose-dark disabled:hover:bg-mti-rose-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300"
+                    >
+                      <BsTrash />
+                      <span className="text-xs">Delete Classroom</span>
+                    </button>
+                  </div>
+                )}
+              </div>
+              <div className="flex flex-col gap-2">
+                <span className="flex items-center gap-2">
+                  <BsBuilding className="text-xl" /> {entity.label}
+                </span>
+                <span className="flex items-center gap-2">
+                  <BsFillPersonVcardFill className="text-xl" />{" "}
+                  {getUserName(group.admin)}
+                </span>
+              </div>
+            </div>
+            <Divider />
+            <div className="flex items-center justify-between mb-4">
+              <span className="font-semibold text-xl">Participants</span>
+              {!isAdding && (
+                <div className="flex items-center gap-2">
+                  <button
+                    onClick={() => setIsAdding(true)}
+                    disabled={isLoading || !canAddParticipants}
+                    className="flex items-center gap-1 px-2 py-2 border rounded-full hover:bg-neutral-100 disabled:hover:bg-transparent disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300"
+                  >
+                    <BsPlus />
+                    <span className="text-xs">Add Participants</span>
+                  </button>
+                  <button
+                    onClick={removeParticipants}
+                    disabled={
+                      selectedUsers.length === 0 ||
+                      isLoading ||
+                      !canRemoveParticipants
+                    }
+                    className="flex items-center gap-1 px-2 py-2 border border-mti-rose rounded-full bg-mti-rose-light text-white hover:bg-mti-rose-dark disabled:hover:bg-mti-rose-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300"
+                  >
+                    <BsTrash />
+                    <span className="text-xs">Remove Participants</span>
+                  </button>
+                </div>
+              )}
+              {isAdding && (
+                <div className="flex items-center gap-2">
+                  <button
+                    onClick={() => setIsAdding(false)}
+                    disabled={isLoading}
+                    className="flex items-center gap-1 px-2 py-2 border rounded-full border-mti-rose bg-mti-rose-light text-white hover:bg-mti-rose-dark disabled:hover:bg-mti-rose-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300"
+                  >
+                    <BsX />
+                    <span className="text-xs">Discard Selection</span>
+                  </button>
+                  <button
+                    onClick={addParticipants}
+                    disabled={
+                      selectedUsers.length === 0 ||
+                      isLoading ||
+                      !canAddParticipants
+                    }
+                    className="flex items-center gap-1 px-2 py-2 border rounded-full border-mti-green bg-mti-green-light text-white hover:bg-mti-green-dark disabled:hover:bg-mti-green-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300"
+                  >
+                    <BsPlus />
+                    <span className="text-xs">Add Participants</span>
+                  </button>
+                </div>
+              )}
+            </div>
+            <div className="w-full flex items-center gap-4">
+              {renderSearch()}
+              {renderMinimal()}
+            </div>
+            <div className="flex items-center gap-2 mt-4">
+              {["student", "teacher", "corporate"].map((type) => (
+                <button
+                  key={type}
+                  onClick={() => {
+                    const typeUsers = mapBy(
+                      filterBy(
+                        isAdding ? nonParticipantUsers : group.participants,
+                        "type",
+                        type
+                      ),
+                      "id"
+                    );
+                    if (typeUsers.every((u) => selectedUsers.includes(u))) {
+                      setSelectedUsers((prev) =>
+                        prev.filter((a) => !typeUsers.includes(a))
+                      );
+                    } else {
+                      setSelectedUsers((prev) => [
+                        ...prev.filter((a) => !typeUsers.includes(a)),
+                        ...typeUsers,
+                      ]);
+                    }
+                  }}
+                  disabled={
+                    filterBy(
+                      isAdding ? nonParticipantUsers : group.participants,
+                      "type",
+                      type
+                    ).length === 0
+                  }
+                  className={clsx(
+                    "bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
+                    "transition duration-300 ease-in-out",
+                    "disabled:grayscale disabled:hover:bg-mti-purple-ultralight disabled:hover:text-mti-purple disabled:cursor-not-allowed",
+                    filterBy(
+                      isAdding ? nonParticipantUsers : group.participants,
+                      "type",
+                      type
+                    ).length > 0 &&
+                      filterBy(
+                        isAdding ? nonParticipantUsers : group.participants,
+                        "type",
+                        type
+                      ).every((u) => selectedUsers.includes(u.id)) &&
+                      "!bg-mti-purple-light !text-white"
+                  )}
+                >
+                  {capitalize(type)}
+                </button>
+              ))}
+            </div>
+          </section>
 
-					<section className="w-full h-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-						{items.map((u) => (
-							<button
-								onClick={() => toggleUser(u)}
-								disabled={isAdding ? !canAddParticipants : !canRemoveParticipants}
-								key={u.id}
-								className={clsx(
-									"p-4 pr-6 h-48 relative border rounded-xl flex flex-col gap-3 justify-between text-left cursor-pointer",
-									"hover:border-mti-purple transition ease-in-out duration-300",
-									selectedUsers.includes(u.id) && "border-mti-purple",
-								)}>
-								<div className="flex items-center gap-2">
-									<div className="min-w-[3rem] min-h-[3rem] w-12 h-12 border flex items-center justify-center overflow-hidden rounded-full">
-										<img src={u.profilePicture} alt={u.name} />
-									</div>
-									<div className="flex flex-col">
-										<span className="font-semibold">{getUserName(u)}</span>
-										<span className="opacity-80 text-sm">{USER_TYPE_LABELS[u.type]}</span>
-									</div>
-								</div>
+          <section className="w-full h-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+            {items.map((u) => (
+              <button
+                onClick={() => toggleUser(u)}
+                disabled={
+                  isAdding ? !canAddParticipants : !canRemoveParticipants
+                }
+                key={u.id}
+                className={clsx(
+                  "p-4 pr-6 h-48 relative border rounded-xl flex flex-col gap-3 justify-between text-left cursor-pointer",
+                  "hover:border-mti-purple transition ease-in-out duration-300",
+                  selectedUsers.includes(u.id) && "border-mti-purple"
+                )}
+              >
+                <div className="flex items-center gap-2">
+                  <div className="min-w-[3rem] min-h-[3rem] w-12 h-12 border flex items-center justify-center overflow-hidden rounded-full">
+                    <img src={u.profilePicture} alt={u.name} />
+                  </div>
+                  <div className="flex flex-col">
+                    <span className="font-semibold">{getUserName(u)}</span>
+                    <span className="opacity-80 text-sm">
+                      {USER_TYPE_LABELS[u.type]}
+                    </span>
+                  </div>
+                </div>
 
-								<div className="flex flex-col gap-1">
-									<span className="flex items-center gap-2">
-										<Tooltip tooltip="E-mail address">
-											<BsEnvelopeFill />
-										</Tooltip>
-										{u.email}
-									</span>
-									<span className="flex items-center gap-2">
-										<Tooltip tooltip="Expiration Date">
-											<BsStopwatchFill />
-										</Tooltip>
-										{u.subscriptionExpirationDate ? moment(u.subscriptionExpirationDate).format("DD/MM/YYYY") : "Unlimited"}
-									</span>
-									<span className="flex items-center gap-2">
-										<Tooltip tooltip="Last Login">
-											<BsClockFill />
-										</Tooltip>
-										{u.lastLogin ? moment(u.lastLogin).format("DD/MM/YYYY - HH:mm") : "N/A"}
-									</span>
-								</div>
-							</button>
-						))}
-					</section>
-				</>
-			)}
-		</>
-	);
+                <div className="flex flex-col gap-1">
+                  <span className="flex items-center gap-2">
+                    <Tooltip tooltip="E-mail address">
+                      <BsEnvelopeFill />
+                    </Tooltip>
+                    {u.email}
+                  </span>
+                  <span className="flex items-center gap-2">
+                    <Tooltip tooltip="Expiration Date">
+                      <BsStopwatchFill />
+                    </Tooltip>
+                    {u.subscriptionExpirationDate
+                      ? moment(u.subscriptionExpirationDate).format(
+                          "DD/MM/YYYY"
+                        )
+                      : "Unlimited"}
+                  </span>
+                  <span className="flex items-center gap-2">
+                    <Tooltip tooltip="Last Login">
+                      <BsClockFill />
+                    </Tooltip>
+                    {u.lastLogin
+                      ? moment(u.lastLogin).format("DD/MM/YYYY - HH:mm")
+                      : "N/A"}
+                  </span>
+                </div>
+              </button>
+            ))}
+          </section>
+        </>
+      )}
+    </>
+  );
 }
diff --git a/src/pages/classrooms/create.tsx b/src/pages/classrooms/create.tsx
index be248ae7..a159f706 100644
--- a/src/pages/classrooms/create.tsx
+++ b/src/pages/classrooms/create.tsx
@@ -2,221 +2,308 @@
 import Input from "@/components/Low/Input";
 import Select from "@/components/Low/Select";
 import Tooltip from "@/components/Low/Tooltip";
-import {useListSearch} from "@/hooks/useListSearch";
+import { useListSearch } from "@/hooks/useListSearch";
 import usePagination from "@/hooks/usePagination";
-import {EntityWithRoles} from "@/interfaces/entity";
-import {User} from "@/interfaces/user";
-import {sessionOptions} from "@/lib/session";
-import {USER_TYPE_LABELS} from "@/resources/user";
-import {filterBy, mapBy, redirect, serialize} from "@/utils";
-import { getEntitiesWithRoles} from "@/utils/entities.be";
-import {shouldRedirectHome} from "@/utils/navigation.disabled";
-import {getUserName, isAdmin} from "@/utils/users";
-import {getEntitiesUsers} from "@/utils/users.be";
+import { EntityWithRoles } from "@/interfaces/entity";
+import { User } from "@/interfaces/user";
+import { sessionOptions } from "@/lib/session";
+import { USER_TYPE_LABELS } from "@/resources/user";
+import { filterBy, mapBy, redirect, serialize } from "@/utils";
+import { getEntitiesWithRoles } from "@/utils/entities.be";
+import { shouldRedirectHome } from "@/utils/navigation.disabled";
+import { getUserName, isAdmin } from "@/utils/users";
+import { getEntitiesUsers } from "@/utils/users.be";
 import axios from "axios";
 import clsx from "clsx";
-import {withIronSessionSsr} from "iron-session/next";
+import { withIronSessionSsr } from "iron-session/next";
 import moment from "moment";
 import Head from "next/head";
 import Link from "next/link";
-import {useRouter} from "next/router";
-import {Divider} from "primereact/divider";
-import {useEffect, useMemo, useState} from "react";
-import {BsCheck, BsChevronLeft, BsClockFill, BsEnvelopeFill, BsStopwatchFill} from "react-icons/bs";
-import {toast, ToastContainer} from "react-toastify";
+import { useRouter } from "next/router";
+import { Divider } from "primereact/divider";
+import { useEffect, useMemo, useState } from "react";
+import {
+  BsCheck,
+  BsChevronLeft,
+  BsClockFill,
+  BsEnvelopeFill,
+  BsStopwatchFill,
+} from "react-icons/bs";
+import { toast, ToastContainer } from "react-toastify";
 import { requestUser } from "@/utils/api";
 import { findAllowedEntities } from "@/utils/permissions";
 import { capitalize } from "lodash";
 
-export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
-	const user = await requestUser(req, res)
-	if (!user) return redirect("/login")
+export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
+  const user = await requestUser(req, res);
+  if (!user) return redirect("/login");
 
-	if (shouldRedirectHome(user)) return redirect("/")
+  if (shouldRedirectHome(user)) return redirect("/");
 
-	const entities = await getEntitiesWithRoles(isAdmin(user) ? undefined : mapBy(user.entities, "id"));
-	const users = await getEntitiesUsers(mapBy(entities, 'id'))
-	const allowedEntities = findAllowedEntities(user, entities, "create_classroom")
+  const entities = await getEntitiesWithRoles(
+    isAdmin(user) ? undefined : mapBy(user.entities, "id")
+  );
+  const users = await getEntitiesUsers(
+    mapBy(entities, "id"),
+    {
+      id: { $ne: user.id },
+    },
+    0,
+    {
+      _id: 0,
+      id: 1,
+      name: 1,
+      email: 1,
+      profilePicture: 1,
+      type: 1,
+      corporateInformation: 1,
+      lastLogin: 1,
+      subscriptionExpirationDate: 1,
+    }
+  );
+  const allowedEntities = findAllowedEntities(
+    user,
+    entities,
+    "create_classroom"
+  );
 
-	return {
-		props: serialize({user, entities: allowedEntities, users: users.filter((x) => x.id !== user.id)}),
-	};
+  return {
+    props: serialize({
+      user,
+      entities: allowedEntities,
+      users: users,
+    }),
+  };
 }, sessionOptions);
 
 interface Props {
-	user: User;
-	users: User[];
-	entities: EntityWithRoles[];
+  user: User;
+  users: User[];
+  entities: EntityWithRoles[];
 }
 
-export default function Home({user, users, entities}: Props) {
-	const [isLoading, setIsLoading] = useState(false);
-	const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
-	const [name, setName] = useState("");
-	const [entity, setEntity] = useState<string | undefined>(entities[0]?.id);
+export default function Home({ user, users, entities }: Props) {
+  const [isLoading, setIsLoading] = useState(false);
+  const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
+  const [name, setName] = useState("");
+  const [entity, setEntity] = useState<string | undefined>(entities[0]?.id);
 
-	const entityUsers = useMemo(() => !entity ? users : users.filter(u => mapBy(u.entities, 'id').includes(entity)), [entity, users])
+  const entityUsers = useMemo(
+    () =>
+      !entity
+        ? users
+        : users.filter((u) => mapBy(u.entities, "id").includes(entity)),
+    [entity, users]
+  );
 
-	const {rows, renderSearch} = useListSearch<User>(
-		[["name"], ["type"], ["corporateInformation", "companyInformation", "name"]], entityUsers
-	);
+  const { rows, renderSearch } = useListSearch<User>(
+    [
+      ["name"],
+      ["type"],
+      ["corporateInformation", "companyInformation", "name"],
+    ],
+    entityUsers
+  );
 
-	const {items, renderMinimal} = usePagination<User>(rows, 16);
+  const { items, renderMinimal } = usePagination<User>(rows, 16);
 
-	const router = useRouter();
+  const router = useRouter();
 
-	useEffect(() => setSelectedUsers([]), [entity])
+  useEffect(() => setSelectedUsers([]), [entity]);
 
-	const createGroup = () => {
-		if (!name.trim()) return;
-		if (!entity) return;
-		if (!confirm(`Are you sure you want to create this group with ${selectedUsers.length} participants?`)) return;
+  const createGroup = () => {
+    if (!name.trim()) return;
+    if (!entity) return;
+    if (
+      !confirm(
+        `Are you sure you want to create this group with ${selectedUsers.length} participants?`
+      )
+    )
+      return;
 
-		setIsLoading(true);
+    setIsLoading(true);
 
-		axios
-			.post<{id: string}>(`/api/groups`, {name, participants: selectedUsers, admin: user.id, entity})
-			.then((result) => {
-				toast.success("Your group has been created successfully!");
-				router.replace(`/classrooms/${result.data.id}`);
-			})
-			.catch((e) => {
-				console.error(e);
-				toast.error("Something went wrong!");
-			})
-			.finally(() => setIsLoading(false));
-	};
+    axios
+      .post<{ id: string }>(`/api/groups`, {
+        name,
+        participants: selectedUsers,
+        admin: user.id,
+        entity,
+      })
+      .then((result) => {
+        toast.success("Your group has been created successfully!");
+        router.replace(`/classrooms/${result.data.id}`);
+      })
+      .catch((e) => {
+        console.error(e);
+        toast.error("Something went wrong!");
+      })
+      .finally(() => setIsLoading(false));
+  };
 
-	const toggleUser = (u: User) => setSelectedUsers((prev) => (prev.includes(u.id) ? prev.filter((p) => p !== u.id) : [...prev, u.id]));
+  const toggleUser = (u: User) =>
+    setSelectedUsers((prev) =>
+      prev.includes(u.id) ? prev.filter((p) => p !== u.id) : [...prev, u.id]
+    );
 
-	return (
-		<>
-			<Head>
-				<title>Create Group | 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 />
-			<>
-				<section className="flex flex-col gap-0">
-					<div className="flex gap-3 justify-between">
-						<div className="flex items-center gap-2">
-							<Link
-								href="/classrooms"
-								className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
-								<BsChevronLeft />
-							</Link>
-							<h2 className="font-bold text-2xl">Create Classroom</h2>
-						</div>
-						<div className="flex items-center gap-4">
-							<button
-								onClick={createGroup}
-								disabled={!name.trim() || !entity || isLoading}
-								className="flex items-center gap-1 px-2 py-2 border rounded-full border-mti-green bg-mti-green-light text-white hover:bg-mti-green-dark disabled:hover:bg-mti-green-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
-								<BsCheck />
-								<span className="text-xs">Create Classroom</span>
-							</button>
-						</div>
-					</div>
-					<Divider />
-					<div className="grid grid-cols-2 gap-4 place-items-end">
-						<div className="flex flex-col gap-4 w-full">
-							<span className="font-semibold text-xl">Classroom Name:</span>
-							<Input name="name" onChange={setName} type="text" placeholder="Classroom A" />
-						</div>
-						<div className="flex flex-col gap-4 w-full">
-							<span className="font-semibold text-xl">Entity:</span>
-							<Select
-								options={entities.map((e) => ({value: e.id, label: e.label}))}
-								onChange={(v) => setEntity(v ? v.value! : undefined)}
-								defaultValue={{value: entities[0]?.id, label: entities[0]?.label}}
-							/>
-						</div>
-					</div>
-					<Divider />
-					<div className="flex items-center justify-between mb-4">
-						<span className="font-semibold text-xl">Participants ({selectedUsers.length} selected):</span>
-					</div>
-					<div className="w-full flex items-center gap-4">
-						{renderSearch()}
-						{renderMinimal()}
-					</div>
-					<div className="flex items-center gap-2 mt-4">
-						{['student', 'teacher', 'corporate'].map((type) => (
-							<button
-								key={type}
-								onClick={() => {
-									const typeUsers = mapBy(filterBy(entityUsers, 'type', type), 'id')
-									if (typeUsers.every((u) => selectedUsers.includes(u))) {
-										setSelectedUsers((prev) => prev.filter((a) => !typeUsers.includes(a)));
-									} else {
-										setSelectedUsers((prev) => [...prev.filter((a) => !typeUsers.includes(a)), ...typeUsers]);
-									}
-								}}
-								disabled={filterBy(entityUsers, 'type', type).length === 0}
-								className={clsx(
-									"bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
-									"transition duration-300 ease-in-out",
-									"disabled:grayscale disabled:hover:bg-mti-purple-ultralight disabled:hover:text-mti-purple disabled:cursor-not-allowed",
-									filterBy(entityUsers, 'type', type).length > 0 &&
-									filterBy(entityUsers, 'type', type).every((u) => selectedUsers.includes(u.id)) &&
-									"!bg-mti-purple-light !text-white",
-								)}>
-								{capitalize(type)}
-							</button>
-						))}
-					</div>
-				</section>
+  return (
+    <>
+      <Head>
+        <title>Create Group | 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 />
+      <>
+        <section className="flex flex-col gap-0">
+          <div className="flex gap-3 justify-between">
+            <div className="flex items-center gap-2">
+              <Link
+                href="/classrooms"
+                className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl"
+              >
+                <BsChevronLeft />
+              </Link>
+              <h2 className="font-bold text-2xl">Create Classroom</h2>
+            </div>
+            <div className="flex items-center gap-4">
+              <button
+                onClick={createGroup}
+                disabled={!name.trim() || !entity || isLoading}
+                className="flex items-center gap-1 px-2 py-2 border rounded-full border-mti-green bg-mti-green-light text-white hover:bg-mti-green-dark disabled:hover:bg-mti-green-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300"
+              >
+                <BsCheck />
+                <span className="text-xs">Create Classroom</span>
+              </button>
+            </div>
+          </div>
+          <Divider />
+          <div className="grid grid-cols-2 gap-4 place-items-end">
+            <div className="flex flex-col gap-4 w-full">
+              <span className="font-semibold text-xl">Classroom Name:</span>
+              <Input
+                name="name"
+                onChange={setName}
+                type="text"
+                placeholder="Classroom A"
+              />
+            </div>
+            <div className="flex flex-col gap-4 w-full">
+              <span className="font-semibold text-xl">Entity:</span>
+              <Select
+                options={entities.map((e) => ({ value: e.id, label: e.label }))}
+                onChange={(v) => setEntity(v ? v.value! : undefined)}
+                defaultValue={{
+                  value: entities[0]?.id,
+                  label: entities[0]?.label,
+                }}
+              />
+            </div>
+          </div>
+          <Divider />
+          <div className="flex items-center justify-between mb-4">
+            <span className="font-semibold text-xl">
+              Participants ({selectedUsers.length} selected):
+            </span>
+          </div>
+          <div className="w-full flex items-center gap-4">
+            {renderSearch()}
+            {renderMinimal()}
+          </div>
+          <div className="flex items-center gap-2 mt-4">
+            {["student", "teacher", "corporate"].map((type) => (
+              <button
+                key={type}
+                onClick={() => {
+                  const typeUsers = mapBy(
+                    filterBy(entityUsers, "type", type),
+                    "id"
+                  );
+                  if (typeUsers.every((u) => selectedUsers.includes(u))) {
+                    setSelectedUsers((prev) =>
+                      prev.filter((a) => !typeUsers.includes(a))
+                    );
+                  } else {
+                    setSelectedUsers((prev) => [
+                      ...prev.filter((a) => !typeUsers.includes(a)),
+                      ...typeUsers,
+                    ]);
+                  }
+                }}
+                disabled={filterBy(entityUsers, "type", type).length === 0}
+                className={clsx(
+                  "bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
+                  "transition duration-300 ease-in-out",
+                  "disabled:grayscale disabled:hover:bg-mti-purple-ultralight disabled:hover:text-mti-purple disabled:cursor-not-allowed",
+                  filterBy(entityUsers, "type", type).length > 0 &&
+                    filterBy(entityUsers, "type", type).every((u) =>
+                      selectedUsers.includes(u.id)
+                    ) &&
+                    "!bg-mti-purple-light !text-white"
+                )}
+              >
+                {capitalize(type)}
+              </button>
+            ))}
+          </div>
+        </section>
 
-				<section className="w-full h-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-					{items.map((u) => (
-						<button
-							onClick={() => toggleUser(u)}
-							disabled={isLoading}
-							key={u.id}
-							className={clsx(
-								"p-4 pr-6 h-48 relative border rounded-xl flex flex-col gap-3 justify-between text-left cursor-pointer",
-								"hover:border-mti-purple transition ease-in-out duration-300",
-								selectedUsers.includes(u.id) && "border-mti-purple",
-							)}>
-							<div className="flex items-center gap-2">
-								<div className="min-w-[3rem] min-h-[3rem] w-12 h-12 border flex items-center justify-center overflow-hidden rounded-full">
-									<img src={u.profilePicture} alt={u.name} />
-								</div>
-								<div className="flex flex-col">
-									<span className="font-semibold">{getUserName(u)}</span>
-									<span className="opacity-80 text-sm">{USER_TYPE_LABELS[u.type]}</span>
-								</div>
-							</div>
+        <section className="w-full h-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+          {items.map((u) => (
+            <button
+              onClick={() => toggleUser(u)}
+              disabled={isLoading}
+              key={u.id}
+              className={clsx(
+                "p-4 pr-6 h-48 relative border rounded-xl flex flex-col gap-3 justify-between text-left cursor-pointer",
+                "hover:border-mti-purple transition ease-in-out duration-300",
+                selectedUsers.includes(u.id) && "border-mti-purple"
+              )}
+            >
+              <div className="flex items-center gap-2">
+                <div className="min-w-[3rem] min-h-[3rem] w-12 h-12 border flex items-center justify-center overflow-hidden rounded-full">
+                  <img src={u.profilePicture} alt={u.name} />
+                </div>
+                <div className="flex flex-col">
+                  <span className="font-semibold">{getUserName(u)}</span>
+                  <span className="opacity-80 text-sm">
+                    {USER_TYPE_LABELS[u.type]}
+                  </span>
+                </div>
+              </div>
 
-							<div className="flex flex-col gap-1">
-								<span className="flex items-center gap-2">
-									<Tooltip tooltip="E-mail address">
-										<BsEnvelopeFill />
-									</Tooltip>
-									{u.email}
-								</span>
-								<span className="flex items-center gap-2">
-									<Tooltip tooltip="Expiration Date">
-										<BsStopwatchFill />
-									</Tooltip>
-									{u.subscriptionExpirationDate ? moment(u.subscriptionExpirationDate).format("DD/MM/YYYY") : "Unlimited"}
-								</span>
-								<span className="flex items-center gap-2">
-									<Tooltip tooltip="Last Login">
-										<BsClockFill />
-									</Tooltip>
-									{u.lastLogin ? moment(u.lastLogin).format("DD/MM/YYYY - HH:mm") : "N/A"}
-								</span>
-							</div>
-						</button>
-					))}
-				</section>
-			</>
-		</>
-	);
+              <div className="flex flex-col gap-1">
+                <span className="flex items-center gap-2">
+                  <Tooltip tooltip="E-mail address">
+                    <BsEnvelopeFill />
+                  </Tooltip>
+                  {u.email}
+                </span>
+                <span className="flex items-center gap-2">
+                  <Tooltip tooltip="Expiration Date">
+                    <BsStopwatchFill />
+                  </Tooltip>
+                  {u.subscriptionExpirationDate
+                    ? moment(u.subscriptionExpirationDate).format("DD/MM/YYYY")
+                    : "Unlimited"}
+                </span>
+                <span className="flex items-center gap-2">
+                  <Tooltip tooltip="Last Login">
+                    <BsClockFill />
+                  </Tooltip>
+                  {u.lastLogin
+                    ? moment(u.lastLogin).format("DD/MM/YYYY - HH:mm")
+                    : "N/A"}
+                </span>
+              </div>
+            </button>
+          ))}
+        </section>
+      </>
+    </>
+  );
 }
diff --git a/src/pages/classrooms/index.tsx b/src/pages/classrooms/index.tsx
index d18baac5..5c62a193 100644
--- a/src/pages/classrooms/index.tsx
+++ b/src/pages/classrooms/index.tsx
@@ -27,132 +27,182 @@ import StudentClassroomTransfer from "@/components/Imports/StudentClassroomTrans
 import Modal from "@/components/Modal";
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
-	const user = await requestUser(req, res)
-	if (!user) return redirect("/login")
+  const user = await requestUser(req, res);
+  if (!user) return redirect("/login");
 
-	if (shouldRedirectHome(user)) return redirect("/")
+  if (shouldRedirectHome(user)) return redirect("/");
 
-	const entityIDS = mapBy(user.entities, "id");
-	const entities = await getEntitiesWithRoles(isAdmin(user) ? undefined : entityIDS)
-	const allowedEntities = findAllowedEntities(user, entities, "view_classrooms")
+  const entityIDS = mapBy(user.entities, "id");
+  const entities = await getEntitiesWithRoles(
+    isAdmin(user) ? undefined : entityIDS
+  );
 
-	const groups = await getGroupsForEntities(mapBy(allowedEntities, 'id'));
+  const allowedEntities = findAllowedEntities(
+    user,
+    entities,
+    "view_classrooms"
+  );
 
-	const users = await getSpecificUsers(uniq(groups.flatMap((g) => [...g.participants, g.admin])));
-	const groupsWithUsers: GroupWithUsers[] = groups.map((g) => convertToUsers(g, users.filter(x => isAdmin(user) ? true : !isAdmin(x))));
+  const groups = await getGroupsForEntities(mapBy(allowedEntities, "id"));
 
-	return {
-		props: serialize({ user, groups: groupsWithUsers, entities: allowedEntities }),
-	};
+  const users = await getSpecificUsers(
+    uniq(groups.flatMap((g) => [...g.participants, g.admin])),
+    { _id: 0, id: 1, name: 1, email: 1, corporateInformation: 1, type: 1 }
+  );
+  const groupsWithUsers: GroupWithUsers[] = groups.map((g) =>
+    convertToUsers(
+      g,
+      users.filter((x) => (isAdmin(user) ? true : !isAdmin(x)))
+    )
+  );
+
+  return {
+    props: serialize({
+      user,
+      groups: groupsWithUsers,
+      entities: allowedEntities,
+    }),
+  };
 }, sessionOptions);
 
 const SEARCH_FIELDS = [
-	["name"],
-	["admin", "name"],
-	["admin", "email"],
-	["admin", "corporateInformation", "companyInformation", "name"],
-	["participants", "name"],
-	["participants", "email"],
-	["participants", "corporateInformation", "companyInformation", "name"],
+  ["name"],
+  ["admin", "name"],
+  ["admin", "email"],
+  ["admin", "corporateInformation", "companyInformation", "name"],
+  ["participants", "name"],
+  ["participants", "email"],
+  ["participants", "corporateInformation", "companyInformation", "name"],
 ];
 
 interface Props {
-	user: User;
-	groups: GroupWithUsers[];
-	entities: EntityWithRoles[]
+  user: User;
+  groups: GroupWithUsers[];
+  entities: EntityWithRoles[];
 }
 export default function Home({ user, groups, entities }: Props) {
-	const entitiesAllowCreate = useAllowedEntities(user, entities, 'create_classroom');
-	const [showImport, setShowImport] = useState(false);
+  const entitiesAllowCreate = useAllowedEntities(
+    user,
+    entities,
+    "create_classroom"
+  );
+  const [showImport, setShowImport] = useState(false);
 
-	const renderCard = (group: GroupWithUsers) => (
-		<Link
-			href={`/classrooms/${group.id}`}
-			key={group.id}
-			className="p-4 border-2 border-mti-purple-light/20 rounded-xl flex gap-2 justify-between hover:border-mti-purple group transition ease-in-out duration-300 text-left cursor-pointer">
-			<div className="flex flex-col gap-2 w-full">
-				<span className="flex items-center gap-1">
-					<span className="bg-mti-purple text-white font-semibold px-2">Classroom</span>
-					{group.name}
-				</span>
-				<span className="flex items-center gap-1">
-					<span className="bg-mti-purple text-white font-semibold px-2">Admin</span>
-					{getUserName(group.admin)}
-				</span>
-				{!!group.entity && (
-					<span className="flex items-center gap-1">
-						<span className="bg-mti-purple text-white font-semibold px-2">Entity</span>
-						{findBy(entities, 'id', group.entity)?.label}
-					</span>
-				)}
-				<span className="flex items-center gap-1">
-					<span className="bg-mti-purple text-white font-semibold px-2">Participants</span>
-					<span className="bg-mti-purple-light/50 px-2">{group.participants.length}</span>
-				</span>
-				<span>
-					{group.participants.slice(0, 3).map(getUserName).join(", ")}{' '}
-					{group.participants.length > 3 ? <span className="opacity-50 bg-mti-purple-light/50 px-1 text-sm">and {group.participants.length - 3} more</span> : ""}
-				</span>
-			</div>
-			<div className="w-fit">
-				<FaPersonChalkboard className="w-full h-20 -translate-y-[15%] group-hover:text-mti-purple transition ease-in-out duration-300" />
-			</div>
-		</Link>
-	);
+  const renderCard = (group: GroupWithUsers) => (
+    <Link
+      href={`/classrooms/${group.id}`}
+      key={group.id}
+      className="p-4 border-2 border-mti-purple-light/20 rounded-xl flex gap-2 justify-between hover:border-mti-purple group transition ease-in-out duration-300 text-left cursor-pointer"
+    >
+      <div className="flex flex-col gap-2 w-full">
+        <span className="flex items-center gap-1">
+          <span className="bg-mti-purple text-white font-semibold px-2">
+            Classroom
+          </span>
+          {group.name}
+        </span>
+        <span className="flex items-center gap-1">
+          <span className="bg-mti-purple text-white font-semibold px-2">
+            Admin
+          </span>
+          {getUserName(group.admin)}
+        </span>
+        {!!group.entity && (
+          <span className="flex items-center gap-1">
+            <span className="bg-mti-purple text-white font-semibold px-2">
+              Entity
+            </span>
+            {findBy(entities, "id", group.entity)?.label}
+          </span>
+        )}
+        <span className="flex items-center gap-1">
+          <span className="bg-mti-purple text-white font-semibold px-2">
+            Participants
+          </span>
+          <span className="bg-mti-purple-light/50 px-2">
+            {group.participants.length}
+          </span>
+        </span>
+        <span>
+          {group.participants.slice(0, 3).map(getUserName).join(", ")}{" "}
+          {group.participants.length > 3 ? (
+            <span className="opacity-50 bg-mti-purple-light/50 px-1 text-sm">
+              and {group.participants.length - 3} more
+            </span>
+          ) : (
+            ""
+          )}
+        </span>
+      </div>
+      <div className="w-fit">
+        <FaPersonChalkboard className="w-full h-20 -translate-y-[15%] group-hover:text-mti-purple transition ease-in-out duration-300" />
+      </div>
+    </Link>
+  );
 
-	const firstCard = () => (
-		<Link
-			href={`/classrooms/create`}
-			className="p-4 border-2 hover:text-mti-purple rounded-xl flex flex-col items-center justify-center gap-0 hover:border-mti-purple transition ease-in-out duration-300 text-left cursor-pointer">
-			<BsPlus size={40} />
-			<span className="font-semibold">Create Classroom</span>
-		</Link>
-	);
+  const firstCard = () => (
+    <Link
+      href={`/classrooms/create`}
+      className="p-4 border-2 hover:text-mti-purple rounded-xl flex flex-col items-center justify-center gap-0 hover:border-mti-purple transition ease-in-out duration-300 text-left cursor-pointer"
+    >
+      <BsPlus size={40} />
+      <span className="font-semibold">Create Classroom</span>
+    </Link>
+  );
 
-	return (
-		<>
-			<Head>
-				<title>Classrooms | 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 />
-			<>
-				<section className="flex flex-col gap-4 w-full h-full">
-					<Modal isOpen={showImport} onClose={() => setShowImport(false)} maxWidth="max-w-[85%]">
-						<StudentClassroomTransfer user={user} entities={entities} onFinish={() => setShowImport(false)} />
-					</Modal>
-					<div className="flex flex-col gap-4">
-						<div className="flex justify-between">
-							<h2 className="font-bold text-2xl">Classrooms</h2>
-							{entitiesAllowCreate.length !== 0 && <button
-								className={clsx(
-									"flex flex-row gap-3 items-center py-1.5 px-4 text-lg",
-									"bg-mti-purple-light border border-mti-purple-light rounded-xl text-white",
-									"hover:bg-white hover:text-mti-purple-light transition duration-300 ease-in-out",
-								)}
-								onClick={() => setShowImport(true)}
-							>
-								<FaFileUpload className="w-5 h-5" />
-								Transfer Students
-							</button>
-							}
-						</div>
-						<Separator />
-					</div>
+  return (
+    <>
+      <Head>
+        <title>Classrooms | 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 />
+      <>
+        <section className="flex flex-col gap-4 w-full h-full">
+          <Modal
+            isOpen={showImport}
+            onClose={() => setShowImport(false)}
+            maxWidth="max-w-[85%]"
+          >
+            <StudentClassroomTransfer
+              user={user}
+              entities={entities}
+              onFinish={() => setShowImport(false)}
+            />
+          </Modal>
+          <div className="flex flex-col gap-4">
+            <div className="flex justify-between">
+              <h2 className="font-bold text-2xl">Classrooms</h2>
+              {entitiesAllowCreate.length !== 0 && (
+                <button
+                  className={clsx(
+                    "flex flex-row gap-3 items-center py-1.5 px-4 text-lg",
+                    "bg-mti-purple-light border border-mti-purple-light rounded-xl text-white",
+                    "hover:bg-white hover:text-mti-purple-light transition duration-300 ease-in-out"
+                  )}
+                  onClick={() => setShowImport(true)}
+                >
+                  <FaFileUpload className="w-5 h-5" />
+                  Transfer Students
+                </button>
+              )}
+            </div>
+            <Separator />
+          </div>
 
-					<CardList<GroupWithUsers>
-						list={groups}
-						searchFields={SEARCH_FIELDS}
-						renderCard={renderCard}
-						firstCard={entitiesAllowCreate.length === 0 ? undefined : firstCard}
-					/>
-				</section>
-			</>
-		</>
-	);
+          <CardList<GroupWithUsers>
+            list={groups}
+            searchFields={SEARCH_FIELDS}
+            renderCard={renderCard}
+            firstCard={entitiesAllowCreate.length === 0 ? undefined : firstCard}
+          />
+        </section>
+      </>
+    </>
+  );
 }
diff --git a/src/pages/dashboard/admin.tsx b/src/pages/dashboard/admin.tsx
index 05783216..bd925183 100644
--- a/src/pages/dashboard/admin.tsx
+++ b/src/pages/dashboard/admin.tsx
@@ -4,20 +4,15 @@ import IconCard from "@/components/IconCard";
 import { EntityWithRoles } from "@/interfaces/entity";
 import { Stat, Type, User } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
-import {  filterBy, mapBy, redirect, serialize } from "@/utils";
+import { filterBy, mapBy, redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
-import {
-  countEntitiesAssignments,
-} from "@/utils/assignments.be";
+import { countEntitiesAssignments } from "@/utils/assignments.be";
 import { getEntities } from "@/utils/entities.be";
 import { countGroups } from "@/utils/groups.be";
 import { checkAccess } from "@/utils/permissions";
 import { groupByExam } from "@/utils/stats";
 import { getStatsByUsers } from "@/utils/stats.be";
-import {
-  countUsersByTypes,
-  getUsers,
-} from "@/utils/users.be";
+import { countUsersByTypes, getUsers } from "@/utils/users.be";
 import { withIronSessionSsr } from "iron-session/next";
 import Head from "next/head";
 import { useRouter } from "next/router";
@@ -49,49 +44,48 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
   if (!user || !user.isVerified) return redirect("/login");
 
   if (!checkAccess(user, ["admin", "developer"])) return redirect("/");
-
-  const students = await getUsers(
-    { type: "student" },
-    10,
-    {
-      averageLevel: -1,
-    },
-    { id: 1, name: 1, email: 1, profilePicture: 1 }
-  );
-
-  const usersCount = await countUsersByTypes([
-    "student",
-    "teacher",
-    "corporate",
-    "mastercorporate",
+  const [
+    entities,
+    usersCount,
+    groupsCount,
+    students,
+    latestStudents,
+    latestTeachers,
+  ] = await Promise.all([
+    getEntities(undefined, { _id: 0, id: 1, label: 1 }),
+    countUsersByTypes(["student", "teacher", "corporate", "mastercorporate"]),
+    countGroups(),
+    getUsers(
+      { type: "student" },
+      10,
+      {
+        averageLevel: -1,
+      },
+      { _id: 0, id: 1, name: 1, email: 1, profilePicture: 1 }
+    ),
+    getUsers(
+      { type: "student" },
+      10,
+      {
+        registrationDate: -1,
+      },
+      { _id: 0, id: 1, name: 1, email: 1, profilePicture: 1 }
+    ),
+    getUsers(
+      { type: "teacher" },
+      10,
+      {
+        registrationDate: -1,
+      },
+      { _id: 0, id: 1, name: 1, email: 1, profilePicture: 1 }
+    ),
   ]);
 
-  const latestStudents = await getUsers(
-    { type: "student" },
-    10,
-    {
-      registrationDate: -1,
-    },
-    { id: 1, name: 1, email: 1, profilePicture: 1 }
-  );
-  const latestTeachers = await getUsers(
-    { type: "teacher" },
-    10,
-    {
-      registrationDate: -1,
-    },
-    { id: 1, name: 1, email: 1, profilePicture: 1 }
-  );
-
-  const entities = await getEntities(undefined, { _id: 0, id: 1, label: 1 });
-
   const assignmentsCount = await countEntitiesAssignments(
     mapBy(entities, "id"),
     { archived: { $ne: true } }
   );
 
-  const groupsCount = await countGroups();
-
   const stats = await getStatsByUsers(mapBy(students, "id"));
 
   return {
diff --git a/src/pages/dashboard/corporate.tsx b/src/pages/dashboard/corporate.tsx
index 5abc3604..e4d2c0c8 100644
--- a/src/pages/dashboard/corporate.tsx
+++ b/src/pages/dashboard/corporate.tsx
@@ -14,10 +14,7 @@ import {
   groupAllowedEntitiesByPermissions,
 } from "@/utils/permissions";
 import { groupByExam } from "@/utils/stats";
-import {
-  countAllowedUsers,
-  getUsers,
-} from "@/utils/users.be";
+import { countAllowedUsers, getUsers } from "@/utils/users.be";
 import { withIronSessionSsr } from "iron-session/next";
 import moment from "moment";
 import Head from "next/head";
@@ -35,6 +32,7 @@ import {
 import { ToastContainer } from "react-toastify";
 import { useAllowedEntities } from "@/hooks/useEntityPermissions";
 import { isAdmin } from "@/utils/users";
+import { count } from "console";
 
 interface Props {
   user: User;
@@ -68,40 +66,44 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
     "view_teachers",
   ]);
 
-	const allowedStudentEntitiesIDS = mapBy(allowedStudentEntities, "id");
-	const entitiesIDS = mapBy(entities, "id") || [];
+  const allowedStudentEntitiesIDS = mapBy(allowedStudentEntities, "id");
+  const entitiesIDS = mapBy(entities, "id") || [];
 
-
-  const students = await getUsers(
-    { type: "student", "entities.id": { $in: allowedStudentEntitiesIDS } },
-    10,
-    { averageLevel: -1 },
-    { id: 1, name: 1, email: 1, profilePicture: 1 }
-  );
-  const latestStudents = await getUsers(
-    { type: "student", "entities.id": { $in: allowedStudentEntitiesIDS } },
-    10,
-    { registrationDate: -1 },
-    { id: 1, name: 1, email: 1, profilePicture: 1 }
-  );
-  const latestTeachers = await getUsers(
-    {
-      type: "teacher",
-      "entities.id": { $in: mapBy(allowedTeacherEntities, "id") },
-    },
-    10,
-    { registrationDate: -1 },
-    { id: 1, name: 1, email: 1, profilePicture: 1 }
-  );
-	
-	const userCounts = await countAllowedUsers(user, entities);
-	
-  const assignmentsCount = await countEntitiesAssignments(
-	entitiesIDS,
-    { archived: { $ne: true } }
-	);
-	
-  const groupsCount = await countGroupsByEntities(entitiesIDS);
+  const [
+    students,
+    latestStudents,
+    latestTeachers,
+    userCounts,
+    assignmentsCount,
+    groupsCount,
+  ] = await Promise.all([
+    getUsers(
+      { type: "student", "entities.id": { $in: allowedStudentEntitiesIDS } },
+      10,
+      { averageLevel: -1 },
+      { _id: 0, id: 1, name: 1, email: 1, profilePicture: 1 }
+    ),
+    getUsers(
+      { type: "student", "entities.id": { $in: allowedStudentEntitiesIDS } },
+      10,
+      { registrationDate: -1 },
+      { _id: 0, id: 1, name: 1, email: 1, profilePicture: 1 }
+    ),
+    getUsers(
+      {
+        type: "teacher",
+        "entities.id": { $in: mapBy(allowedTeacherEntities, "id") },
+      },
+      10,
+      { registrationDate: -1 },
+      { _id: 0, id: 1, name: 1, email: 1, profilePicture: 1 }
+    ),
+    countAllowedUsers(user, entities),
+    countEntitiesAssignments(entitiesIDS, {
+      archived: { $ne: true },
+    }),
+    countGroupsByEntities(entitiesIDS),
+  ]);
 
   return {
     props: serialize({
@@ -135,8 +137,8 @@ export default function Dashboard({
       userCounts.student +
       userCounts.teacher,
     [userCounts]
-	);
-	
+  );
+
   const totalLicenses = useMemo(
     () =>
       entities.reduce(
diff --git a/src/pages/dashboard/developer.tsx b/src/pages/dashboard/developer.tsx
index 03396bd2..339df010 100644
--- a/src/pages/dashboard/developer.tsx
+++ b/src/pages/dashboard/developer.tsx
@@ -2,21 +2,16 @@
 import UserDisplayList from "@/components/UserDisplayList";
 import IconCard from "@/components/IconCard";
 import { EntityWithRoles } from "@/interfaces/entity";
-import { Stat,  Type, User } from "@/interfaces/user";
+import { Stat, Type, User } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
 import { filterBy, mapBy, redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
-import {
-  countEntitiesAssignments,
-} from "@/utils/assignments.be";
+import { countEntitiesAssignments } from "@/utils/assignments.be";
 import { getEntities } from "@/utils/entities.be";
 import { countGroups } from "@/utils/groups.be";
 import { checkAccess } from "@/utils/permissions";
 import { groupByExam } from "@/utils/stats";
-import {
-  countUsersByTypes,
-  getUsers,
-} from "@/utils/users.be";
+import { countUsersByTypes, getUsers } from "@/utils/users.be";
 import { withIronSessionSsr } from "iron-session/next";
 import Head from "next/head";
 import { useRouter } from "next/router";
@@ -49,45 +44,41 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
 
   if (!checkAccess(user, ["admin", "developer"])) return redirect("/");
 
-  const students = await getUsers(
-    { type: "student" },
-    10,
-    {
-      averageLevel: -1,
-    },
-    { id: 1, name: 1, email: 1, profilePicture: 1 }
-  );
-
-  const usersCount = await countUsersByTypes([
-    "student",
-    "teacher",
-    "corporate",
-    "mastercorporate",
+  const [
+    students,
+    latestStudents,
+    latestTeachers,
+    usersCount,
+    entities,
+    groupsCount,
+  ] = await Promise.all([
+    getUsers(
+      { type: "student" },
+      10,
+      { averageLevel: -1 },
+      { _id: 0, id: 1, name: 1, email: 1, profilePicture: 1 }
+    ),
+    getUsers(
+      { type: "student" },
+      10,
+      { registrationDate: -1 },
+      { _id: 0, id: 1, name: 1, email: 1, profilePicture: 1 }
+    ),
+    getUsers(
+      { type: "teacher" },
+      10,
+      { registrationDate: -1 },
+      { _id: 0, id: 1, name: 1, email: 1, profilePicture: 1 }
+    ),
+    countUsersByTypes(["student", "teacher", "corporate", "mastercorporate"]),
+    getEntities(undefined, { _id: 0, id: 1, label: 1 }),
+    countGroups(),
   ]);
 
-  const latestStudents = await getUsers(
-    { type: "student" },
-    10,
-    {
-      registrationDate: -1,
-    },
-    {id:1, name: 1, email: 1, profilePicture: 1 }
-  );
-  const latestTeachers = await getUsers(
-    { type: "teacher" },
-    10,
-    {
-      registrationDate: -1,
-    },
-    { id:1,name: 1, email: 1, profilePicture: 1 }
-  );
-
-  const entities = await getEntities(undefined, { _id: 0, id: 1, label: 1 });
   const assignmentsCount = await countEntitiesAssignments(
     mapBy(entities, "id"),
     { archived: { $ne: true } }
   );
-  const groupsCount = await countGroups();
 
   return {
     props: serialize({
diff --git a/src/pages/dashboard/mastercorporate.tsx b/src/pages/dashboard/mastercorporate.tsx
index d8cc6432..f8350f2f 100644
--- a/src/pages/dashboard/mastercorporate.tsx
+++ b/src/pages/dashboard/mastercorporate.tsx
@@ -34,6 +34,7 @@ import {
 } from "react-icons/bs";
 import { ToastContainer } from "react-toastify";
 import { isAdmin } from "@/utils/users";
+import { count } from "console";
 
 interface Props {
   user: User;
@@ -70,37 +71,39 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
 
   const entitiesIDS = mapBy(entities, "id") || [];
 
-  const students = await getUsers(
-    { type: "student", "entities.id": { $in: allowedStudentEntitiesIDS } },
-    10,
-    { averageLevel: -1 },
-    { id: 1, name: 1, email: 1, profilePicture: 1 }
-  );
-
-  const latestStudents = await getUsers(
-    { type: "student", "entities.id": { $in: allowedStudentEntitiesIDS } },
-    10,
-    { registrationDate: -1 },
-    { id: 1, name: 1, email: 1, profilePicture: 1 }
-  );
-
-  const latestTeachers = await getUsers(
-    {
-      type: "teacher",
-      "entities.id": { $in: mapBy(allowedTeacherEntities, "id") },
-    },
-    10,
-    { registrationDate: -1 },
-    { id: 1, name: 1, email: 1, profilePicture: 1 }
-  );
-
-  const userCounts = await countAllowedUsers(user, entities);
-
-  const assignmentsCount = await countEntitiesAssignments(entitiesIDS, {
-    archived: { $ne: true },
-  });
-
-  const groupsCount = await countGroupsByEntities(entitiesIDS);
+  const [
+    students,
+    latestStudents,
+    latestTeachers,
+    userCounts,
+    assignmentsCount,
+    groupsCount,
+  ] = await Promise.all([
+    getUsers(
+      { type: "student", "entities.id": { $in: allowedStudentEntitiesIDS } },
+      10,
+      { averageLevel: -1 },
+      { _id: 0, id: 1, name: 1, email: 1, profilePicture: 1 }
+    ),
+    getUsers(
+      { type: "student", "entities.id": { $in: allowedStudentEntitiesIDS } },
+      10,
+      { registrationDate: -1 },
+      { _id: 0, id: 1, name: 1, email: 1, profilePicture: 1 }
+    ),
+    getUsers(
+      {
+        type: "teacher",
+        "entities.id": { $in: mapBy(allowedTeacherEntities, "id") },
+      },
+      10,
+      { registrationDate: -1 },
+      { _id: 0, id: 1, name: 1, email: 1, profilePicture: 1 }
+    ),
+    countAllowedUsers(user, entities),
+    countEntitiesAssignments(entitiesIDS, { archived: { $ne: true } }),
+    countGroupsByEntities(entitiesIDS),
+  ]);
 
   return {
     props: serialize({
@@ -127,6 +130,7 @@ export default function Dashboard({
   stats = [],
   groupsCount,
 }: Props) {
+  
   const totalCount = useMemo(
     () =>
       userCounts.corporate +
diff --git a/src/pages/dashboard/student.tsx b/src/pages/dashboard/student.tsx
index 90e4da8b..bb06b641 100644
--- a/src/pages/dashboard/student.tsx
+++ b/src/pages/dashboard/student.tsx
@@ -5,7 +5,7 @@ import InviteWithUserCard from "@/components/Medium/InviteWithUserCard";
 import ModuleBadge from "@/components/ModuleBadge";
 import ProfileSummary from "@/components/ProfileSummary";
 import { Session } from "@/hooks/useSessions";
-import { Grading } from "@/interfaces";
+import { Grading, Module } from "@/interfaces";
 import { EntityWithRoles } from "@/interfaces/entity";
 import { Exam } from "@/interfaces/exam";
 import { InviteWithEntity } from "@/interfaces/invite";
@@ -34,6 +34,7 @@ import { capitalize, uniqBy } from "lodash";
 import moment from "moment";
 import Head from "next/head";
 import { useRouter } from "next/router";
+import { useMemo } from "react";
 import {
   BsBook,
   BsClipboard,
@@ -65,42 +66,49 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
     return redirect("/");
 
   const entityIDS = mapBy(user.entities, "id") || [];
-
-  const entities = await getEntities(entityIDS, { _id: 0, label: 1 });
   const currentDate = moment().toISOString();
-  const assignments = await getAssignmentsForStudent(user.id, currentDate);
-  const stats = await getDetailedStatsByUser(user.id, "stats");
 
+  const [assignments, stats, invites, grading] = await Promise.all([
+    getAssignmentsForStudent(user.id, currentDate),
+    getDetailedStatsByUser(user.id, "stats"),
+    getInvitesByInvitee(user.id),
+    getGradingSystemByEntity(entityIDS[0] || "", {
+      _id: 0,
+      steps: 1,
+    }),
+  ]);
   const assignmentsIDs = mapBy(assignments, "id");
 
   const sessions = await getSessionsByUser(user.id, 10, {
     ["assignment.id"]: { $in: assignmentsIDs },
   });
-  const invites = await getInvitesByInvitee(user.id);
-  const grading = await getGradingSystemByEntity(entityIDS[0] || "", {
-    _id: 0,
-    steps: 1,
-  });
 
   const formattedInvites = await Promise.all(
     invites.map(convertInvitersToEntity)
   );
+
   const examIDs = uniqBy(
-    assignments.flatMap((a) =>
-      a.exams.map((e: { module: string; id: string }) => ({
-        module: e.module,
-        id: e.id,
-        key: `${e.module}_${e.id}`,
-      }))
+    assignments.reduce<{ module: Module; id: string; key: string }[]>(
+      (acc, a) => {
+        a.exams.forEach((e: { module: Module; id: string }) => {
+          acc.push({
+            module: e.module,
+            id: e.id,
+            key: `${e.module}_${e.id}`,
+          });
+        });
+        return acc;
+      },
+      []
     ),
     "key"
   );
+
   const exams = examIDs.length > 0 ? await getExamsByIds(examIDs) : [];
 
   return {
     props: serialize({
       user,
-      entities,
       assignments,
       stats,
       exams,
@@ -145,6 +153,11 @@ export default function Dashboard({
     }
   };
 
+  const entitiesLabels = useMemo(
+    () => (entities.length > 0 ? mapBy(entities, "label")?.join(", ") : ""),
+    [entities]
+  );
+
   return (
     <>
       <Head>
@@ -160,7 +173,7 @@ export default function Dashboard({
       <>
         {entities.length > 0 && (
           <div className="rounded-lg bg-neutral-200 px-2 py-1 ">
-            <b>{mapBy(entities, "label")?.join(", ")}</b>
+            <b>{entitiesLabels}</b>
           </div>
         )}
 
diff --git a/src/pages/dashboard/teacher.tsx b/src/pages/dashboard/teacher.tsx
index 675805ec..7d91fcf7 100644
--- a/src/pages/dashboard/teacher.tsx
+++ b/src/pages/dashboard/teacher.tsx
@@ -27,6 +27,7 @@ import { requestUser } from "@/utils/api";
 import { useAllowedEntities } from "@/hooks/useEntityPermissions";
 import { getEntitiesUsers } from "@/utils/users.be";
 import { isAdmin } from "@/utils/users";
+import { useMemo } from "react";
 
 interface Props {
   user: User;
@@ -52,29 +53,29 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
 
   const filteredEntities = findAllowedEntities(user, entities, "view_students");
 
-  const students = await getEntitiesUsers(
-    mapBy(filteredEntities, "id"),
-    {
-      type: "student",
-    },
-    0,
-    {
-      _id: 0,
-      id: 1,
-      name: 1,
-      email: 1,
-      profilePicture: 1,
-      levels: 1,
-      registrationDate: 1,
-    }
-  );
-
-  const assignments = await getEntitiesAssignments(entityIDS);
+  const [students, assignments, groups] = await Promise.all([
+    getEntitiesUsers(
+      mapBy(filteredEntities, "id"),
+      {
+        type: "student",
+      },
+      0,
+      {
+        _id: 0,
+        id: 1,
+        name: 1,
+        email: 1,
+        profilePicture: 1,
+        levels: 1,
+        registrationDate: 1,
+      }
+    ),
+    getEntitiesAssignments(entityIDS),
+    getGroupsByEntities(entityIDS),
+  ]);
 
   const stats = await getStatsByUsers(students.map((u) => u.id));
 
-  const groups = await getGroupsByEntities(entityIDS);
-
   return {
     props: serialize({ user, students, entities, assignments, stats, groups }),
   };
@@ -100,6 +101,10 @@ export default function Dashboard({
     entities,
     "view_student_performance"
   );
+  const entitiesLabels = useMemo(
+    () => mapBy(entities, "label")?.join(", "),
+    [entities]
+  );
 
   return (
     <>
@@ -117,7 +122,7 @@ export default function Dashboard({
         <div className="w-full flex flex-col gap-4">
           {entities.length > 0 && (
             <div className="w-fit self-end bg-neutral-200 px-2 rounded-lg py-1">
-              <b>{mapBy(entities, "label")?.join(", ")}</b>
+              <b>{entitiesLabels}</b>
             </div>
           )}
           <section className="grid grid-cols-5 -md:grid-cols-2 place-items-center gap-4 text-center">
diff --git a/src/pages/entities/[id]/index.tsx b/src/pages/entities/[id]/index.tsx
index 473f7a0b..33d412f8 100644
--- a/src/pages/entities/[id]/index.tsx
+++ b/src/pages/entities/[id]/index.tsx
@@ -6,15 +6,20 @@ import Checkbox from "@/components/Low/Checkbox";
 import Tooltip from "@/components/Low/Tooltip";
 import { useEntityPermission } from "@/hooks/useEntityPermissions";
 import { EntityWithRoles, Role } from "@/interfaces/entity";
-import {  User } from "@/interfaces/user";
+import { User } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
 import { USER_TYPE_LABELS } from "@/resources/user";
 import { findBy, mapBy, redirect, serialize } from "@/utils";
 import { getEntityWithRoles } from "@/utils/entities.be";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
-import { doesEntityAllow  } from "@/utils/permissions";
+import { doesEntityAllow } from "@/utils/permissions";
 import { getUserName, isAdmin } from "@/utils/users";
-import { filterAllowedUsers, getEntitiesUsers, getEntityUsers,  getUsers } from "@/utils/users.be";
+import {
+  filterAllowedUsers,
+  getEntitiesUsers,
+  getEntityUsers,
+  getUsers,
+} from "@/utils/users.be";
 import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
 import axios from "axios";
 import clsx from "clsx";
@@ -24,532 +29,672 @@ import Head from "next/head";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { Divider } from "primereact/divider";
-import { useEffect,  useState } from "react";
+import { useEffect, useState } from "react";
 import ReactDatePicker from "react-datepicker";
 import { CURRENCIES } from "@/resources/paypal";
 
 import {
-	BsCheck,
-	BsChevronLeft,
-	BsClockFill,
-	BsEnvelopeFill,
-	BsHash,
-	BsPerson,
-	BsPlus,
-	BsStopwatchFill,
-	BsTag,
-	BsTrash,
-	BsX,
+  BsCheck,
+  BsChevronLeft,
+  BsClockFill,
+  BsEnvelopeFill,
+  BsHash,
+  BsPerson,
+  BsPlus,
+  BsStopwatchFill,
+  BsTag,
+  BsTrash,
+  BsX,
 } from "react-icons/bs";
 import { toast } from "react-toastify";
+import entities from "../../api/entities";
 
 const expirationDateColor = (date: Date) => {
-	const momentDate = moment(date);
-	const today = moment(new Date());
+  const momentDate = moment(date);
+  const today = moment(new Date());
 
-	if (today.add(1, "days").isAfter(momentDate)) return "!bg-mti-red-ultralight border-mti-red-light";
-	if (today.add(3, "days").isAfter(momentDate)) return "!bg-mti-rose-ultralight border-mti-rose-light";
-	if (today.add(7, "days").isAfter(momentDate)) return "!bg-mti-orange-ultralight border-mti-orange-light";
+  if (today.add(1, "days").isAfter(momentDate))
+    return "!bg-mti-red-ultralight border-mti-red-light";
+  if (today.add(3, "days").isAfter(momentDate))
+    return "!bg-mti-rose-ultralight border-mti-rose-light";
+  if (today.add(7, "days").isAfter(momentDate))
+    return "!bg-mti-orange-ultralight border-mti-orange-light";
 };
 
 const CURRENCIES_OPTIONS = CURRENCIES.map(({ label, currency }) => ({
-	value: currency,
-	label,
+  value: currency,
+  label,
 }));
 
-export const getServerSideProps = withIronSessionSsr(async ({ req, params }) => {
-	const user = req.session.user as User;
+const USER_DATA_SCHEMA = {
+  _id: 0,
+  id: 1,
+  name: 1,
+  type: 1,
+  profilePicture: 1,
+  email: 1,
+  lastLogin: 1,
+  subscriptionExpirationDate: 1,
+  entities: 1,
+  corporateInformation: 1,
+};
 
-	if (!user) return redirect("/login")
-	if (shouldRedirectHome(user)) return redirect("/")
+export const getServerSideProps = withIronSessionSsr(
+  async ({ req, params }) => {
+    const user = req.session.user as User;
 
-	const { id } = params as { id: string };
+    if (!user) return redirect("/login");
+    if (shouldRedirectHome(user)) return redirect("/");
 
-	const entity = await getEntityWithRoles(id);
-	if (!entity) return redirect("/entities")
+    const { id } = params as { id: string };
 
-	if (!doesEntityAllow(user, entity, "view_entities")) return redirect(`/entities`)
+    const entity = await getEntityWithRoles(id);
+    if (!entity) return redirect("/entities");
 
-	const linkedUsers = await (isAdmin(user) ? getUsers() : getEntitiesUsers(mapBy(user.entities, 'id'),
-		{ $and: [{ type: { $ne: "developer" } }, { type: { $ne: "admin" } }] }))
-	const entityUsers = await (isAdmin(user) ? getEntityUsers(id) : filterAllowedUsers(user, [entity]));
+    if (!doesEntityAllow(user, entity, "view_entities"))
+      return redirect(`/entities`);
+    const [linkedUsers, entityUsers] = await Promise.all([
+      isAdmin(user)
+        ? getUsers({}, 0, {}, USER_DATA_SCHEMA)
+        : getEntitiesUsers(
+            mapBy(user.entities, "id"),
+            {
+              $and: [
+                { type: { $ne: "developer" } },
+                { type: { $ne: "admin" } },
+              ],
+            },
+            0,
+            USER_DATA_SCHEMA
+          ),
+      isAdmin(user)
+        ? getEntityUsers(
+            id,
+            0,
+            {
+              id: { $ne: user.id },
+            },
+            USER_DATA_SCHEMA
+          )
+        : filterAllowedUsers(user, [entity], USER_DATA_SCHEMA),
+    ]);
 
-	const usersWithRole = entityUsers.map((u) => {
-		const e = u.entities.find((e) => e.id === id);
-		return { ...u, role: findBy(entity.roles, 'id', e?.role) };
-	});
+    const usersWithRole = entityUsers.map((u) => {
+      const e = u?.entities?.find((e) => e.id === id);
+      return { ...u, role: findBy(entity.roles, "id", e?.role) };
+    });
 
-	return {
-		props: serialize({
-			user,
-			entity,
-			users: usersWithRole,
-			linkedUsers: linkedUsers.filter(x => x.id !== user.id && !mapBy(entityUsers, 'id').includes(x.id)),
-		}),
-	};
-}, sessionOptions);
+    return {
+      props: serialize({
+        user,
+        entity,
+        users: usersWithRole,
+        linkedUsers: linkedUsers.filter(
+          (x) => !mapBy(entityUsers, "id").includes(x.id)
+        ),
+      }),
+    };
+  },
+  sessionOptions
+);
 
 type UserWithRole = User & { role?: Role };
 
 interface Props {
-	user: User;
-	entity: EntityWithRoles;
-	users: UserWithRole[];
-	linkedUsers: User[];
+  user: User;
+  entity: EntityWithRoles;
+  users: UserWithRole[];
+  linkedUsers: User[];
 }
 
 export default function Home({ user, entity, users, linkedUsers }: Props) {
-	const [isAdding, setIsAdding] = useState(false);
-	const [isLoading, setIsLoading] = useState(false);
-	const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
-	const [expiryDate, setExpiryDate] = useState(entity?.expiryDate)
-	const [paymentPrice, setPaymentPrice] = useState(entity?.payment?.price)
-	const [paymentCurrency, setPaymentCurrency] = useState(entity?.payment?.currency)
+  const [isAdding, setIsAdding] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
+  const [expiryDate, setExpiryDate] = useState(entity?.expiryDate);
+  const [paymentPrice, setPaymentPrice] = useState(entity?.payment?.price);
+  const [paymentCurrency, setPaymentCurrency] = useState(
+    entity?.payment?.currency
+  );
 
-	const router = useRouter();
+  const router = useRouter();
 
-	const canRenameEntity = useEntityPermission(user, entity, "rename_entity")
-	const canViewRoles = useEntityPermission(user, entity, "view_entity_roles")
-	const canDeleteEntity = useEntityPermission(user, entity, "delete_entity")
+  const canRenameEntity = useEntityPermission(user, entity, "rename_entity");
+  const canViewRoles = useEntityPermission(user, entity, "view_entity_roles");
+  const canDeleteEntity = useEntityPermission(user, entity, "delete_entity");
 
-	const canAddMembers = useEntityPermission(user, entity, "add_to_entity")
-	const canRemoveMembers = useEntityPermission(user, entity, "remove_from_entity")
+  const canAddMembers = useEntityPermission(user, entity, "add_to_entity");
+  const canRemoveMembers = useEntityPermission(
+    user,
+    entity,
+    "remove_from_entity"
+  );
 
-	const canAssignRole = useEntityPermission(user, entity, "assign_to_role")
-	const canPay = useEntityPermission(user, entity, 'pay_entity')
+  const canAssignRole = useEntityPermission(user, entity, "assign_to_role");
+  const canPay = useEntityPermission(user, entity, "pay_entity");
 
-	const toggleUser = (u: User) => setSelectedUsers((prev) => (prev.includes(u.id) ? prev.filter((p) => p !== u.id) : [...prev, u.id]));
+  const toggleUser = (u: User) =>
+    setSelectedUsers((prev) =>
+      prev.includes(u.id) ? prev.filter((p) => p !== u.id) : [...prev, u.id]
+    );
 
-	const removeParticipants = () => {
-		if (selectedUsers.length === 0) return;
-		if (!canRemoveMembers) return;
-		if (!confirm(`Are you sure you want to remove ${selectedUsers.length} member${selectedUsers.length === 1 ? "" : "s"} from this entity?`))
-			return;
+  const removeParticipants = () => {
+    if (selectedUsers.length === 0) return;
+    if (!canRemoveMembers) return;
+    if (
+      !confirm(
+        `Are you sure you want to remove ${selectedUsers.length} member${
+          selectedUsers.length === 1 ? "" : "s"
+        } from this entity?`
+      )
+    )
+      return;
 
-		setIsLoading(true);
+    setIsLoading(true);
 
-		axios
-			.patch(`/api/entities/${entity.id}/users`, { add: false, members: selectedUsers })
-			.then(() => {
-				toast.success("The entity has been updated successfully!");
-				router.replace(router.asPath);
-				setSelectedUsers([]);
-			})
-			.catch((e) => {
-				console.error(e);
-				toast.error("Something went wrong!");
-			})
-			.finally(() => setIsLoading(false));
-	};
+    axios
+      .patch(`/api/entities/${entity.id}/users`, {
+        add: false,
+        members: selectedUsers,
+      })
+      .then(() => {
+        toast.success("The entity has been updated successfully!");
+        router.replace(router.asPath);
+        setSelectedUsers([]);
+      })
+      .catch((e) => {
+        console.error(e);
+        toast.error("Something went wrong!");
+      })
+      .finally(() => setIsLoading(false));
+  };
 
-	const addParticipants = () => {
-		if (selectedUsers.length === 0) return;
-		if (!canAddMembers || !isAdding) return;
-		if (!confirm(`Are you sure you want to add ${selectedUsers.length} member${selectedUsers.length === 1 ? "" : "s"} to this entity?`)) return;
+  const addParticipants = () => {
+    if (selectedUsers.length === 0) return;
+    if (!canAddMembers || !isAdding) return;
+    if (
+      !confirm(
+        `Are you sure you want to add ${selectedUsers.length} member${
+          selectedUsers.length === 1 ? "" : "s"
+        } to this entity?`
+      )
+    )
+      return;
 
-		setIsLoading(true);
-		const defaultRole = findBy(entity.roles, 'isDefault', true)!
+    setIsLoading(true);
+    const defaultRole = findBy(entity.roles, "isDefault", true)!;
 
-		axios
-			.patch(`/api/entities/${entity.id}/users`, { add: true, members: selectedUsers, role: defaultRole.id })
-			.then(() => {
-				toast.success("The entity has been updated successfully!");
-				router.replace(router.asPath);
-				setIsAdding(false);
-			})
-			.catch((e) => {
-				console.error(e);
-				toast.error("Something went wrong!");
-			})
-			.finally(() => setIsLoading(false));
-	};
+    axios
+      .patch(`/api/entities/${entity.id}/users`, {
+        add: true,
+        members: selectedUsers,
+        role: defaultRole.id,
+      })
+      .then(() => {
+        toast.success("The entity has been updated successfully!");
+        router.replace(router.asPath);
+        setIsAdding(false);
+      })
+      .catch((e) => {
+        console.error(e);
+        toast.error("Something went wrong!");
+      })
+      .finally(() => setIsLoading(false));
+  };
 
-	const renameGroup = () => {
-		if (!canRenameEntity) return;
+  const renameGroup = () => {
+    if (!canRenameEntity) return;
 
-		const label = prompt("Rename this entity:", entity.label);
-		if (!label) return;
+    const label = prompt("Rename this entity:", entity.label);
+    if (!label) return;
 
-		setIsLoading(true);
-		axios
-			.patch(`/api/entities/${entity.id}`, { label })
-			.then(() => {
-				toast.success("The entity has been updated successfully!");
-				router.replace(router.asPath);
-			})
-			.catch((e) => {
-				console.error(e);
-				toast.error("Something went wrong!");
-			})
-			.finally(() => setIsLoading(false));
-	};
+    setIsLoading(true);
+    axios
+      .patch(`/api/entities/${entity.id}`, { label })
+      .then(() => {
+        toast.success("The entity has been updated successfully!");
+        router.replace(router.asPath);
+      })
+      .catch((e) => {
+        console.error(e);
+        toast.error("Something went wrong!");
+      })
+      .finally(() => setIsLoading(false));
+  };
 
-	const updateExpiryDate = () => {
-		if (!isAdmin(user)) return;
+  const updateExpiryDate = () => {
+    if (!isAdmin(user)) return;
 
-		setIsLoading(true);
-		axios
-			.patch(`/api/entities/${entity.id}`, { expiryDate })
-			.then(() => {
-				toast.success("The entity has been updated successfully!");
-				router.replace(router.asPath);
-			})
-			.catch((e) => {
-				console.error(e);
-				toast.error("Something went wrong!");
-			})
-			.finally(() => setIsLoading(false));
-	};
+    setIsLoading(true);
+    axios
+      .patch(`/api/entities/${entity.id}`, { expiryDate })
+      .then(() => {
+        toast.success("The entity has been updated successfully!");
+        router.replace(router.asPath);
+      })
+      .catch((e) => {
+        console.error(e);
+        toast.error("Something went wrong!");
+      })
+      .finally(() => setIsLoading(false));
+  };
 
-	const updatePayment = () => {
-		if (!isAdmin(user)) return;
+  const updatePayment = () => {
+    if (!isAdmin(user)) return;
 
-		setIsLoading(true);
-		axios
-			.patch(`/api/entities/${entity.id}`, { payment: { price: paymentPrice, currency: paymentCurrency } })
-			.then(() => {
-				toast.success("The entity has been updated successfully!");
-				router.replace(router.asPath);
-			})
-			.catch((e) => {
-				console.error(e);
-				toast.error("Something went wrong!");
-			})
-			.finally(() => setIsLoading(false));
-	};
+    setIsLoading(true);
+    axios
+      .patch(`/api/entities/${entity.id}`, {
+        payment: { price: paymentPrice, currency: paymentCurrency },
+      })
+      .then(() => {
+        toast.success("The entity has been updated successfully!");
+        router.replace(router.asPath);
+      })
+      .catch((e) => {
+        console.error(e);
+        toast.error("Something went wrong!");
+      })
+      .finally(() => setIsLoading(false));
+  };
 
-	const editLicenses = () => {
-		if (!isAdmin(user)) return;
+  const editLicenses = () => {
+    if (!isAdmin(user)) return;
 
-		const licenses = prompt("Update the number of licenses:", (entity.licenses || 0).toString());
-		if (!licenses) return;
-		if (!parseInt(licenses) || parseInt(licenses) <= 0) return toast.error("Write a valid number of licenses!")
+    const licenses = prompt(
+      "Update the number of licenses:",
+      (entity.licenses || 0).toString()
+    );
+    if (!licenses) return;
+    if (!parseInt(licenses) || parseInt(licenses) <= 0)
+      return toast.error("Write a valid number of licenses!");
 
-		setIsLoading(true);
-		axios
-			.patch(`/api/entities/${entity.id}`, { licenses })
-			.then(() => {
-				toast.success("The entity has been updated successfully!");
-				router.replace(router.asPath);
-			})
-			.catch((e) => {
-				console.error(e);
-				toast.error("Something went wrong!");
-			})
-			.finally(() => setIsLoading(false));
-	};
+    setIsLoading(true);
+    axios
+      .patch(`/api/entities/${entity.id}`, { licenses })
+      .then(() => {
+        toast.success("The entity has been updated successfully!");
+        router.replace(router.asPath);
+      })
+      .catch((e) => {
+        console.error(e);
+        toast.error("Something went wrong!");
+      })
+      .finally(() => setIsLoading(false));
+  };
 
-	const deleteGroup = () => {
-		if (!canDeleteEntity) return;
-		if (!confirm("Are you sure you want to delete this entity?")) return;
+  const deleteGroup = () => {
+    if (!canDeleteEntity) return;
+    if (!confirm("Are you sure you want to delete this entity?")) return;
 
-		setIsLoading(true);
+    setIsLoading(true);
 
-		axios
-			.delete(`/api/entities/${entity.id}`)
-			.then(() => {
-				toast.success("This entity has been successfully deleted!");
-				router.replace("/entities");
-			})
-			.catch((e) => {
-				console.error(e);
-				toast.error("Something went wrong!");
-			})
-			.finally(() => setIsLoading(false));
-	};
+    axios
+      .delete(`/api/entities/${entity.id}`)
+      .then(() => {
+        toast.success("This entity has been successfully deleted!");
+        router.replace("/entities");
+      })
+      .catch((e) => {
+        console.error(e);
+        toast.error("Something went wrong!");
+      })
+      .finally(() => setIsLoading(false));
+  };
 
-	const assignUsersToRole = (role: string) => {
-		if (!canAssignRole) return
-		if (selectedUsers.length === 0) return
+  const assignUsersToRole = (role: string) => {
+    if (!canAssignRole) return;
+    if (selectedUsers.length === 0) return;
 
-		setIsLoading(true);
-		axios
-			.post(`/api/roles/${role}/users`, { users: selectedUsers })
-			.then(() => {
-				toast.success("The role has been assigned successfully!");
-				router.replace(router.asPath);
-			})
-			.catch((e) => {
-				console.error(e);
-				toast.error("Something went wrong!");
-			})
-			.finally(() => setIsLoading(false));
-	}
+    setIsLoading(true);
+    axios
+      .post(`/api/roles/${role}/users`, { users: selectedUsers })
+      .then(() => {
+        toast.success("The role has been assigned successfully!");
+        router.replace(router.asPath);
+      })
+      .catch((e) => {
+        console.error(e);
+        toast.error("Something went wrong!");
+      })
+      .finally(() => setIsLoading(false));
+  };
 
-	const renderCard = (u: UserWithRole) => {
-		return (
-			<button
-				onClick={() => toggleUser(u)}
-				disabled={isAdding ? !canAddMembers : !canRemoveMembers}
-				key={u.id}
-				className={clsx(
-					"p-4 pr-6 h-48 relative border rounded-xl flex flex-col gap-3 justify-between text-left cursor-pointer",
-					"hover:border-mti-purple transition ease-in-out duration-300",
-					selectedUsers.includes(u.id) && "border-mti-purple",
-				)}>
-				<div className="flex items-center gap-2">
-					<div className="min-w-[3rem] min-h-[3rem] w-12 h-12 border flex items-center justify-center overflow-hidden rounded-full">
-						<img src={u.profilePicture} alt={u.name} />
-					</div>
-					<div className="flex flex-col">
-						<span className="font-semibold">{getUserName(u)}</span>
+  const renderCard = (u: UserWithRole) => {
+    return (
+      <button
+        onClick={() => toggleUser(u)}
+        disabled={isAdding ? !canAddMembers : !canRemoveMembers}
+        key={u.id}
+        className={clsx(
+          "p-4 pr-6 h-48 relative border rounded-xl flex flex-col gap-3 justify-between text-left cursor-pointer",
+          "hover:border-mti-purple transition ease-in-out duration-300",
+          selectedUsers.includes(u.id) && "border-mti-purple"
+        )}
+      >
+        <div className="flex items-center gap-2">
+          <div className="min-w-[3rem] min-h-[3rem] w-12 h-12 border flex items-center justify-center overflow-hidden rounded-full">
+            <img src={u.profilePicture} alt={u.name} />
+          </div>
+          <div className="flex flex-col">
+            <span className="font-semibold">{getUserName(u)}</span>
 
-						<span className="opacity-80 text-sm">
-							{USER_TYPE_LABELS[u.type]} {u.role && `- ${u.role.label}`}
-						</span>
-					</div>
-				</div>
+            <span className="opacity-80 text-sm">
+              {USER_TYPE_LABELS[u.type]} {u.role && `- ${u.role.label}`}
+            </span>
+          </div>
+        </div>
 
-				<div className="flex flex-col gap-1">
-					<span className="flex items-center gap-2">
-						<Tooltip tooltip="E-mail address">
-							<BsEnvelopeFill />
-						</Tooltip>
-						{u.email}
-					</span>
-					<span className="flex items-center gap-2">
-						<Tooltip tooltip="Expiration Date">
-							<BsStopwatchFill />
-						</Tooltip>
-						{u.subscriptionExpirationDate ? moment(u.subscriptionExpirationDate).format("DD/MM/YYYY") : "Unlimited"}
-					</span>
-					<span className="flex items-center gap-2">
-						<Tooltip tooltip="Last Login">
-							<BsClockFill />
-						</Tooltip>
-						{u.lastLogin ? moment(u.lastLogin).format("DD/MM/YYYY - HH:mm") : "N/A"}
-					</span>
-				</div>
-			</button>
-		);
-	};
+        <div className="flex flex-col gap-1">
+          <span className="flex items-center gap-2">
+            <Tooltip tooltip="E-mail address">
+              <BsEnvelopeFill />
+            </Tooltip>
+            {u.email}
+          </span>
+          <span className="flex items-center gap-2">
+            <Tooltip tooltip="Expiration Date">
+              <BsStopwatchFill />
+            </Tooltip>
+            {u.subscriptionExpirationDate
+              ? moment(u.subscriptionExpirationDate).format("DD/MM/YYYY")
+              : "Unlimited"}
+          </span>
+          <span className="flex items-center gap-2">
+            <Tooltip tooltip="Last Login">
+              <BsClockFill />
+            </Tooltip>
+            {u.lastLogin
+              ? moment(u.lastLogin).format("DD/MM/YYYY - HH:mm")
+              : "N/A"}
+          </span>
+        </div>
+      </button>
+    );
+  };
 
-	useEffect(() => setSelectedUsers([]), [isAdding]);
+  useEffect(() => setSelectedUsers([]), [isAdding]);
 
-	return (
-		<>
-			<Head>
-				<title>{entity.label} | 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>
+  return (
+    <>
+      <Head>
+        <title>{entity.label} | 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>
 
-			<>
-				<section className="flex flex-col gap-0">
-					<div className="flex flex-col gap-3">
-						<div className="flex items-start justify-between">
-							<div className="flex items-center gap-2">
-								<Link
-									href="/entities"
-									className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
-									<BsChevronLeft />
-								</Link>
-								<h2 className="font-bold text-2xl">{entity.label} {isAdmin(user) && `- ${entity.licenses || 0} licenses`}</h2>
-							</div>
+      <>
+        <section className="flex flex-col gap-0">
+          <div className="flex flex-col gap-3">
+            <div className="flex items-start justify-between">
+              <div className="flex items-center gap-2">
+                <Link
+                  href="/entities"
+                  className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl"
+                >
+                  <BsChevronLeft />
+                </Link>
+                <h2 className="font-bold text-2xl">
+                  {entity.label}{" "}
+                  {isAdmin(user) && `- ${entity.licenses || 0} licenses`}
+                </h2>
+              </div>
 
-							{!isAdmin(user) && canPay && (
-								<Link
-									href="/payment"
-									className={clsx(
-										"p-2 w-full max-w-[200px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-										"transition duration-300 ease-in-out",
-										!entity.expiryDate ? "!bg-mti-green-ultralight !border-mti-green-light" : expirationDateColor(entity.expiryDate),
-										"bg-white border-mti-gray-platinum",
-									)}>
-									{!entity.expiryDate && "Unlimited"}
-									{entity.expiryDate && moment(entity.expiryDate).format("DD/MM/YYYY")}
-								</Link>
-							)}
-						</div>
-						<div className="flex items-center gap-2">
-							<button
-								onClick={renameGroup}
-								disabled={isLoading || !canRenameEntity}
-								className="flex items-center gap-1 px-2 py-2 border rounded-full hover:bg-neutral-100 disabled:hover:bg-transparent disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
-								<BsTag />
-								<span className="text-xs">Rename Entity</span>
-							</button>
-							{isAdmin(user) && (
-								<button
-									onClick={editLicenses}
-									disabled={isLoading || !isAdmin(user)}
-									className="flex items-center gap-1 px-2 py-2 border rounded-full hover:bg-neutral-100 disabled:hover:bg-transparent disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
-									<BsHash />
-									<span className="text-xs">Edit Licenses</span>
-								</button>
-							)}
-							<button
-								onClick={() => router.push(`/entities/${entity.id}/roles`)}
-								disabled={isLoading || !canViewRoles}
-								className="flex items-center gap-1 px-2 py-2 border rounded-full hover:bg-neutral-100 disabled:hover:bg-transparent disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
-								<BsPerson />
-								<span className="text-xs">Edit Roles</span>
-							</button>
-							<button
-								onClick={deleteGroup}
-								disabled={isLoading || !canDeleteEntity}
-								className="flex items-center gap-1 px-2 py-2 border border-mti-rose rounded-full bg-mti-rose-light text-white hover:bg-mti-rose-dark disabled:hover:bg-mti-rose-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
-								<BsTrash />
-								<span className="text-xs">Delete Entity</span>
-							</button>
-						</div>
-					</div>
+              {!isAdmin(user) && canPay && (
+                <Link
+                  href="/payment"
+                  className={clsx(
+                    "p-2 w-full max-w-[200px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+                    "transition duration-300 ease-in-out",
+                    !entity.expiryDate
+                      ? "!bg-mti-green-ultralight !border-mti-green-light"
+                      : expirationDateColor(entity.expiryDate),
+                    "bg-white border-mti-gray-platinum"
+                  )}
+                >
+                  {!entity.expiryDate && "Unlimited"}
+                  {entity.expiryDate &&
+                    moment(entity.expiryDate).format("DD/MM/YYYY")}
+                </Link>
+              )}
+            </div>
+            <div className="flex items-center gap-2">
+              <button
+                onClick={renameGroup}
+                disabled={isLoading || !canRenameEntity}
+                className="flex items-center gap-1 px-2 py-2 border rounded-full hover:bg-neutral-100 disabled:hover:bg-transparent disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300"
+              >
+                <BsTag />
+                <span className="text-xs">Rename Entity</span>
+              </button>
+              {isAdmin(user) && (
+                <button
+                  onClick={editLicenses}
+                  disabled={isLoading || !isAdmin(user)}
+                  className="flex items-center gap-1 px-2 py-2 border rounded-full hover:bg-neutral-100 disabled:hover:bg-transparent disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300"
+                >
+                  <BsHash />
+                  <span className="text-xs">Edit Licenses</span>
+                </button>
+              )}
+              <button
+                onClick={() => router.push(`/entities/${entity.id}/roles`)}
+                disabled={isLoading || !canViewRoles}
+                className="flex items-center gap-1 px-2 py-2 border rounded-full hover:bg-neutral-100 disabled:hover:bg-transparent disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300"
+              >
+                <BsPerson />
+                <span className="text-xs">Edit Roles</span>
+              </button>
+              <button
+                onClick={deleteGroup}
+                disabled={isLoading || !canDeleteEntity}
+                className="flex items-center gap-1 px-2 py-2 border border-mti-rose rounded-full bg-mti-rose-light text-white hover:bg-mti-rose-dark disabled:hover:bg-mti-rose-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300"
+              >
+                <BsTrash />
+                <span className="text-xs">Delete Entity</span>
+              </button>
+            </div>
+          </div>
 
-					{isAdmin(user) && (
-						<>
-							<Divider />
+          {isAdmin(user) && (
+            <>
+              <Divider />
 
-							<div className="w-full flex justify-between items-center">
-								<div className="flex items-center gap-4 w-full">
-									{!!expiryDate && (
-										<ReactDatePicker
-											className={clsx(
-												"p-2 w-full max-w-[200px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-												"hover:border-mti-purple tooltip",
-												!expiryDate ? "!bg-mti-green-ultralight !border-mti-green-light" : expirationDateColor(expiryDate),
-												"transition duration-300 ease-in-out",
-											)}
-											filterDate={(date) => moment(date).isAfter(new Date())}
-											dateFormat="dd/MM/yyyy"
-											selected={expiryDate ? moment(expiryDate).toDate() : null}
-											onChange={(date) => setExpiryDate(date)}
-										/>
-									)}
+              <div className="w-full flex justify-between items-center">
+                <div className="flex items-center gap-4 w-full">
+                  {!!expiryDate && (
+                    <ReactDatePicker
+                      className={clsx(
+                        "p-2 w-full max-w-[200px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+                        "hover:border-mti-purple tooltip",
+                        !expiryDate
+                          ? "!bg-mti-green-ultralight !border-mti-green-light"
+                          : expirationDateColor(expiryDate),
+                        "transition duration-300 ease-in-out"
+                      )}
+                      filterDate={(date) => moment(date).isAfter(new Date())}
+                      dateFormat="dd/MM/yyyy"
+                      selected={expiryDate ? moment(expiryDate).toDate() : null}
+                      onChange={(date) => setExpiryDate(date)}
+                    />
+                  )}
 
-									{!expiryDate && (
-										<div
-											className={clsx(
-												"p-2 w-full max-w-[200px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-												"transition duration-300 ease-in-out",
-												!expiryDate ? "!bg-mti-green-ultralight !border-mti-green-light" : expirationDateColor(expiryDate),
-												"bg-white border-mti-gray-platinum",
-											)}
-										>
-											Unlimited
-										</div>
-									)}
+                  {!expiryDate && (
+                    <div
+                      className={clsx(
+                        "p-2 w-full max-w-[200px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+                        "transition duration-300 ease-in-out",
+                        !expiryDate
+                          ? "!bg-mti-green-ultralight !border-mti-green-light"
+                          : expirationDateColor(expiryDate),
+                        "bg-white border-mti-gray-platinum"
+                      )}
+                    >
+                      Unlimited
+                    </div>
+                  )}
 
-									<Checkbox
-										isChecked={!!expiryDate}
-										onChange={(checked: boolean) => setExpiryDate(checked ? entity.expiryDate || new Date() : null)}
-									>
-										Enable expiry date
-									</Checkbox>
-								</div>
+                  <Checkbox
+                    isChecked={!!expiryDate}
+                    onChange={(checked: boolean) =>
+                      setExpiryDate(
+                        checked ? entity.expiryDate || new Date() : null
+                      )
+                    }
+                  >
+                    Enable expiry date
+                  </Checkbox>
+                </div>
 
+                <button
+                  onClick={updateExpiryDate}
+                  disabled={expiryDate === entity.expiryDate}
+                  className="flex w-fit text-nowrap items-center gap-1 px-2 py-2 border rounded-full border-mti-green bg-mti-green-light text-white hover:bg-mti-green-dark disabled:hover:bg-mti-green-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300"
+                >
+                  <BsCheck />
+                  <span className="text-xs">Apply Change</span>
+                </button>
+              </div>
 
-								<button
-									onClick={updateExpiryDate}
-									disabled={expiryDate === entity.expiryDate}
-									className="flex w-fit text-nowrap items-center gap-1 px-2 py-2 border rounded-full border-mti-green bg-mti-green-light text-white hover:bg-mti-green-dark disabled:hover:bg-mti-green-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
-									<BsCheck />
-									<span className="text-xs">Apply Change</span>
-								</button>
-							</div>
+              <Divider />
 
-							<Divider />
+              <div className="w-full flex items-center justify-between gap-8">
+                <div className="w-full max-w-xl flex items-center gap-4">
+                  <Input
+                    name="paymentValue"
+                    onChange={(e) =>
+                      setPaymentPrice(e ? parseInt(e) : undefined)
+                    }
+                    type="number"
+                    defaultValue={entity.payment?.price || 0}
+                    thin
+                  />
+                  <Select
+                    className={clsx(
+                      "px-4 !py-2 !w-full text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
+                    )}
+                    options={CURRENCIES_OPTIONS}
+                    value={CURRENCIES_OPTIONS.find(
+                      (c) => c.value === paymentCurrency
+                    )}
+                    onChange={(value) =>
+                      setPaymentCurrency(value?.value ?? undefined)
+                    }
+                  />
+                </div>
 
-							<div className="w-full flex items-center justify-between gap-8">
-								<div className="w-full max-w-xl flex items-center gap-4">
-									<Input
-										name="paymentValue"
-										onChange={(e) => setPaymentPrice(e ? parseInt(e) : undefined)}
-										type="number"
-										defaultValue={entity.payment?.price || 0}
-										thin
-									/>
-									<Select
-										className={clsx(
-											"px-4 !py-2 !w-full text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none",
-										)}
-										options={CURRENCIES_OPTIONS}
-										value={CURRENCIES_OPTIONS.find((c) => c.value === paymentCurrency)}
-										onChange={(value) => setPaymentCurrency(value?.value ?? undefined)}
-									/>
-								</div>
+                <button
+                  onClick={updatePayment}
+                  disabled={
+                    !paymentPrice || paymentPrice <= 0 || !paymentCurrency
+                  }
+                  className="flex w-fit text-nowrap items-center gap-1 px-2 py-2 border rounded-full border-mti-green bg-mti-green-light text-white hover:bg-mti-green-dark disabled:hover:bg-mti-green-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300"
+                >
+                  <BsCheck />
+                  <span className="text-xs">Apply Change</span>
+                </button>
+              </div>
+            </>
+          )}
 
-								<button
-									onClick={updatePayment}
-									disabled={!paymentPrice || paymentPrice <= 0 || !paymentCurrency}
-									className="flex w-fit text-nowrap items-center gap-1 px-2 py-2 border rounded-full border-mti-green bg-mti-green-light text-white hover:bg-mti-green-dark disabled:hover:bg-mti-green-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
-									<BsCheck />
-									<span className="text-xs">Apply Change</span>
-								</button>
-							</div>
-						</>
-					)}
+          <Divider />
+          <div className="flex items-center justify-between mb-4">
+            <span className="font-semibold text-xl">
+              Members ({users.length})
+            </span>
+            {!isAdding && (
+              <div className="flex items-center gap-2">
+                <button
+                  onClick={() => setIsAdding(true)}
+                  disabled={isLoading || !canAddMembers}
+                  className="flex items-center gap-1 px-2 py-2 border rounded-full hover:bg-neutral-100 disabled:hover:bg-transparent disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300"
+                >
+                  <BsPlus />
+                  <span className="text-xs">Add Members</span>
+                </button>
 
-					<Divider />
-					<div className="flex items-center justify-between mb-4">
-						<span className="font-semibold text-xl">Members ({users.length})</span>
-						{!isAdding && (
-							<div className="flex items-center gap-2">
-								<button
-									onClick={() => setIsAdding(true)}
-									disabled={isLoading || !canAddMembers}
-									className="flex items-center gap-1 px-2 py-2 border rounded-full hover:bg-neutral-100 disabled:hover:bg-transparent disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
-									<BsPlus />
-									<span className="text-xs">Add Members</span>
-								</button>
+                <Menu>
+                  <MenuButton
+                    disabled={
+                      isLoading || !canAssignRole || selectedUsers.length === 0
+                    }
+                    className="flex items-center gap-1 px-2 py-2 border rounded-full hover:bg-neutral-100 disabled:hover:bg-transparent disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300"
+                  >
+                    <BsPerson />
+                    <span className="text-xs">Assign Role</span>
+                  </MenuButton>
+                  <MenuItems
+                    anchor="bottom"
+                    className="bg-white rounded-xl shadow drop-shadow border mt-1 flex flex-col"
+                  >
+                    {entity.roles.map((role) => (
+                      <MenuItem key={role.id}>
+                        <button
+                          onClick={() => assignUsersToRole(role.id)}
+                          className="p-4 hover:bg-neutral-100 w-32"
+                        >
+                          {role.label}
+                        </button>
+                      </MenuItem>
+                    ))}
+                  </MenuItems>
+                </Menu>
 
-								<Menu>
-									<MenuButton
-										disabled={isLoading || !canAssignRole || selectedUsers.length === 0}
-										className="flex items-center gap-1 px-2 py-2 border rounded-full hover:bg-neutral-100 disabled:hover:bg-transparent disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
-										<BsPerson />
-										<span className="text-xs">Assign Role</span>
-									</MenuButton>
-									<MenuItems anchor="bottom" className="bg-white rounded-xl shadow drop-shadow border mt-1 flex flex-col">
-										{entity.roles.map((role) => (
-											<MenuItem key={role.id}>
-												<button onClick={() => assignUsersToRole(role.id)} className="p-4 hover:bg-neutral-100 w-32">
-													{role.label}
-												</button>
-											</MenuItem>
-										))}
-									</MenuItems>
-								</Menu>
+                <button
+                  onClick={removeParticipants}
+                  disabled={
+                    selectedUsers.length === 0 || isLoading || !canRemoveMembers
+                  }
+                  className="flex items-center gap-1 px-2 py-2 border border-mti-rose rounded-full bg-mti-rose-light text-white hover:bg-mti-rose-dark disabled:hover:bg-mti-rose-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300"
+                >
+                  <BsTrash />
+                  <span className="text-xs">Remove Members</span>
+                </button>
+              </div>
+            )}
+            {isAdding && (
+              <div className="flex items-center gap-2">
+                <button
+                  onClick={() => setIsAdding(false)}
+                  disabled={isLoading}
+                  className="flex items-center gap-1 px-2 py-2 border rounded-full border-mti-rose bg-mti-rose-light text-white hover:bg-mti-rose-dark disabled:hover:bg-mti-rose-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300"
+                >
+                  <BsX />
+                  <span className="text-xs">Discard Selection</span>
+                </button>
+                <button
+                  onClick={addParticipants}
+                  disabled={
+                    selectedUsers.length === 0 || isLoading || !canAddMembers
+                  }
+                  className="flex items-center gap-1 px-2 py-2 border rounded-full border-mti-green bg-mti-green-light text-white hover:bg-mti-green-dark disabled:hover:bg-mti-green-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300"
+                >
+                  <BsPlus />
+                  <span className="text-xs">
+                    Add Members ({selectedUsers.length})
+                  </span>
+                </button>
+              </div>
+            )}
+          </div>
 
-								<button
-									onClick={removeParticipants}
-									disabled={selectedUsers.length === 0 || isLoading || !canRemoveMembers}
-									className="flex items-center gap-1 px-2 py-2 border border-mti-rose rounded-full bg-mti-rose-light text-white hover:bg-mti-rose-dark disabled:hover:bg-mti-rose-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
-									<BsTrash />
-									<span className="text-xs">Remove Members</span>
-								</button>
-							</div>
-						)}
-						{isAdding && (
-							<div className="flex items-center gap-2">
-								<button
-									onClick={() => setIsAdding(false)}
-									disabled={isLoading}
-									className="flex items-center gap-1 px-2 py-2 border rounded-full border-mti-rose bg-mti-rose-light text-white hover:bg-mti-rose-dark disabled:hover:bg-mti-rose-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
-									<BsX />
-									<span className="text-xs">Discard Selection</span>
-								</button>
-								<button
-									onClick={addParticipants}
-									disabled={selectedUsers.length === 0 || isLoading || !canAddMembers}
-									className="flex items-center gap-1 px-2 py-2 border rounded-full border-mti-green bg-mti-green-light text-white hover:bg-mti-green-dark disabled:hover:bg-mti-green-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
-									<BsPlus />
-									<span className="text-xs">Add Members ({selectedUsers.length})</span>
-								</button>
-							</div>
-						)}
-					</div>
-
-					<CardList<User | UserWithRole>
-						list={isAdding ? linkedUsers : users}
-						renderCard={renderCard}
-						searchFields={[["name"], ["email"], ["corporateInformation", "companyInformation", "name"], ["role", "label"], ["type"]]}
-					/>
-				</section>
-			</>
-		</>
-	);
+          <CardList<User | UserWithRole>
+            list={isAdding ? linkedUsers : users}
+            renderCard={renderCard}
+            searchFields={[
+              ["name"],
+              ["email"],
+              ["corporateInformation", "companyInformation", "name"],
+              ["role", "label"],
+              ["type"],
+            ]}
+          />
+        </section>
+      </>
+    </>
+  );
 }
diff --git a/src/pages/entities/create.tsx b/src/pages/entities/create.tsx
index 0b974c8f..606f17ea 100644
--- a/src/pages/entities/create.tsx
+++ b/src/pages/entities/create.tsx
@@ -10,7 +10,7 @@ import { USER_TYPE_LABELS } from "@/resources/user";
 import { redirect, serialize } from "@/utils";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
 import { getUserName } from "@/utils/users";
-import {  getUsers } from "@/utils/users.be";
+import { getUsers } from "@/utils/users.be";
 import axios from "axios";
 import clsx from "clsx";
 import { withIronSessionSsr } from "iron-session/next";
@@ -20,161 +20,218 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { Divider } from "primereact/divider";
 import { useState } from "react";
-import { BsCheck, BsChevronLeft, BsClockFill, BsEnvelopeFill, BsStopwatchFill } from "react-icons/bs";
+import {
+  BsCheck,
+  BsChevronLeft,
+  BsClockFill,
+  BsEnvelopeFill,
+  BsStopwatchFill,
+} from "react-icons/bs";
 import { toast, ToastContainer } from "react-toastify";
 import { requestUser } from "@/utils/api";
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
-	const user = await requestUser(req, res)
-	if (!user) return redirect("/login")
+  const user = await requestUser(req, res);
+  if (!user) return redirect("/login");
 
-	if (shouldRedirectHome(user)) return redirect("/")
-	if (!["admin", "developer"].includes(user.type)) return redirect("/entities")
+  if (shouldRedirectHome(user)) return redirect("/");
+  if (!["admin", "developer"].includes(user.type)) return redirect("/entities");
 
-	const users = await getUsers()
+  const users = await getUsers(
+    { id: { $ne: user.id } },
+    0,
+    {},
+    {
+      _id: 0,
+      id: 1,
+      name: 1,
+      type: 1,
+      profilePicture: 1,
+      email: 1,
+      lastLogin: 1,
+      subscriptionExpirationDate: 1,
+    }
+  );
 
-	return {
-		props: serialize({ user, users: users.filter((x) => x.id !== user.id) }),
-	};
+  return {
+    props: serialize({ user, users }),
+  };
 }, sessionOptions);
 
 interface Props {
-	user: User;
-	users: User[];
+  user: User;
+  users: User[];
 }
 
 export default function Home({ user, users }: Props) {
-	const [isLoading, setIsLoading] = useState(false);
-	const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
-	const [label, setLabel] = useState("");
-	const [licenses, setLicenses] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
+  const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
+  const [label, setLabel] = useState("");
+  const [licenses, setLicenses] = useState(0);
 
-	const { rows, renderSearch } = useListSearch<User>([["name"], ["corporateInformation", "companyInformation", "name"]], users);
-	const { items, renderMinimal } = usePagination<User>(rows, 16);
+  const { rows, renderSearch } = useListSearch<User>(
+    [["name"], ["corporateInformation", "companyInformation", "name"]],
+    users
+  );
+  const { items, renderMinimal } = usePagination<User>(rows, 16);
 
-	const router = useRouter();
+  const router = useRouter();
 
-	const createGroup = () => {
-		if (!label.trim()) return;
-		if (!confirm(`Are you sure you want to create this entity with ${selectedUsers.length} members?`)) return;
+  const createGroup = () => {
+    if (!label.trim()) return;
+    if (
+      !confirm(
+        `Are you sure you want to create this entity with ${selectedUsers.length} members?`
+      )
+    )
+      return;
 
-		setIsLoading(true);
+    setIsLoading(true);
 
-		axios
-			.post<Entity>(`/api/entities`, { label, licenses, members: selectedUsers })
-			.then((result) => {
-				toast.success("Your entity has been created successfully!");
-				router.replace(`/entities/${result.data.id}`);
-			})
-			.catch((e) => {
-				console.error(e);
-				toast.error("Something went wrong!");
-			})
-			.finally(() => setIsLoading(false));
-	};
+    axios
+      .post<Entity>(`/api/entities`, {
+        label,
+        licenses,
+        members: selectedUsers,
+      })
+      .then((result) => {
+        toast.success("Your entity has been created successfully!");
+        router.replace(`/entities/${result.data.id}`);
+      })
+      .catch((e) => {
+        console.error(e);
+        toast.error("Something went wrong!");
+      })
+      .finally(() => setIsLoading(false));
+  };
 
-	const toggleUser = (u: User) => setSelectedUsers((prev) => (prev.includes(u.id) ? prev.filter((p) => p !== u.id) : [...prev, u.id]));
+  const toggleUser = (u: User) =>
+    setSelectedUsers((prev) =>
+      prev.includes(u.id) ? prev.filter((p) => p !== u.id) : [...prev, u.id]
+    );
 
-	return (
-		<>
-			<Head>
-				<title>Create Entity | 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 />
-			<>
-				<section className="flex flex-col gap-0">
-					<div className="flex gap-3 justify-between">
-						<div className="flex items-center gap-2">
-							<Link
-								href="/classrooms"
-								className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
-								<BsChevronLeft />
-							</Link>
-							<h2 className="font-bold text-2xl">Create Entity</h2>
-						</div>
-						<div className="flex items-center gap-4">
-							<button
-								onClick={createGroup}
-								disabled={!label.trim() || licenses <= 0 || isLoading}
-								className="flex items-center gap-1 px-2 py-2 border rounded-full border-mti-green bg-mti-green-light text-white hover:bg-mti-green-dark disabled:hover:bg-mti-green-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300">
-								<BsCheck />
-								<span className="text-xs">Create Entity</span>
-							</button>
-						</div>
-					</div>
-					<Divider />
-					<div className="w-full grid grid-cols-2 gap-4">
-						<div className="flex flex-col gap-4 w-full">
-							<span className="font-semibold text-xl">Entity Label:</span>
-							<Input name="name" onChange={setLabel} type="text" placeholder="Entity A" />
-						</div>
+  return (
+    <>
+      <Head>
+        <title>Create Entity | 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 />
+      <>
+        <section className="flex flex-col gap-0">
+          <div className="flex gap-3 justify-between">
+            <div className="flex items-center gap-2">
+              <Link
+                href="/classrooms"
+                className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl"
+              >
+                <BsChevronLeft />
+              </Link>
+              <h2 className="font-bold text-2xl">Create Entity</h2>
+            </div>
+            <div className="flex items-center gap-4">
+              <button
+                onClick={createGroup}
+                disabled={!label.trim() || licenses <= 0 || isLoading}
+                className="flex items-center gap-1 px-2 py-2 border rounded-full border-mti-green bg-mti-green-light text-white hover:bg-mti-green-dark disabled:hover:bg-mti-green-light disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition ease-in-out duration-300"
+              >
+                <BsCheck />
+                <span className="text-xs">Create Entity</span>
+              </button>
+            </div>
+          </div>
+          <Divider />
+          <div className="w-full grid grid-cols-2 gap-4">
+            <div className="flex flex-col gap-4 w-full">
+              <span className="font-semibold text-xl">Entity Label:</span>
+              <Input
+                name="name"
+                onChange={setLabel}
+                type="text"
+                placeholder="Entity A"
+              />
+            </div>
 
-						<div className="flex flex-col gap-4 w-full">
-							<span className="font-semibold text-xl">Licenses:</span>
-							<Input name="licenses" min={0} onChange={(v) => setLicenses(parseInt(v))} type="number" placeholder="12" />
-						</div>
-					</div>
-					<Divider />
-					<div className="flex items-center justify-between mb-4">
-						<span className="font-semibold text-xl">Members ({selectedUsers.length} selected):</span>
-					</div>
-					<div className="w-full flex items-center gap-4">
-						{renderSearch()}
-						{renderMinimal()}
-					</div>
-				</section>
+            <div className="flex flex-col gap-4 w-full">
+              <span className="font-semibold text-xl">Licenses:</span>
+              <Input
+                name="licenses"
+                min={0}
+                onChange={(v) => setLicenses(parseInt(v))}
+                type="number"
+                placeholder="12"
+              />
+            </div>
+          </div>
+          <Divider />
+          <div className="flex items-center justify-between mb-4">
+            <span className="font-semibold text-xl">
+              Members ({selectedUsers.length} selected):
+            </span>
+          </div>
+          <div className="w-full flex items-center gap-4">
+            {renderSearch()}
+            {renderMinimal()}
+          </div>
+        </section>
 
-				<section className="w-full h-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-					{items.map((u) => (
-						<button
-							onClick={() => toggleUser(u)}
-							disabled={isLoading}
-							key={u.id}
-							className={clsx(
-								"p-4 pr-6 h-48 relative border rounded-xl flex flex-col gap-3 justify-between text-left cursor-pointer",
-								"hover:border-mti-purple transition ease-in-out duration-300",
-								selectedUsers.includes(u.id) && "border-mti-purple",
-							)}>
-							<div className="flex items-center gap-2">
-								<div className="min-w-[3rem] min-h-[3rem] w-12 h-12 border flex items-center justify-center overflow-hidden rounded-full">
-									<img src={u.profilePicture} alt={u.name} />
-								</div>
-								<div className="flex flex-col">
-									<span className="font-semibold">{getUserName(u)}</span>
-									<span className="opacity-80 text-sm">{USER_TYPE_LABELS[u.type]}</span>
-								</div>
-							</div>
+        <section className="w-full h-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+          {items.map((u) => (
+            <button
+              onClick={() => toggleUser(u)}
+              disabled={isLoading}
+              key={u.id}
+              className={clsx(
+                "p-4 pr-6 h-48 relative border rounded-xl flex flex-col gap-3 justify-between text-left cursor-pointer",
+                "hover:border-mti-purple transition ease-in-out duration-300",
+                selectedUsers.includes(u.id) && "border-mti-purple"
+              )}
+            >
+              <div className="flex items-center gap-2">
+                <div className="min-w-[3rem] min-h-[3rem] w-12 h-12 border flex items-center justify-center overflow-hidden rounded-full">
+                  <img src={u.profilePicture} alt={u.name} />
+                </div>
+                <div className="flex flex-col">
+                  <span className="font-semibold">{getUserName(u)}</span>
+                  <span className="opacity-80 text-sm">
+                    {USER_TYPE_LABELS[u.type]}
+                  </span>
+                </div>
+              </div>
 
-							<div className="flex flex-col gap-1">
-								<span className="flex items-center gap-2">
-									<Tooltip tooltip="E-mail address">
-										<BsEnvelopeFill />
-									</Tooltip>
-									{u.email}
-								</span>
-								<span className="flex items-center gap-2">
-									<Tooltip tooltip="Expiration Date">
-										<BsStopwatchFill />
-									</Tooltip>
-									{u.subscriptionExpirationDate ? moment(u.subscriptionExpirationDate).format("DD/MM/YYYY") : "Unlimited"}
-								</span>
-								<span className="flex items-center gap-2">
-									<Tooltip tooltip="Last Login">
-										<BsClockFill />
-									</Tooltip>
-									{u.lastLogin ? moment(u.lastLogin).format("DD/MM/YYYY - HH:mm") : "N/A"}
-								</span>
-							</div>
-						</button>
-					))}
-				</section>
-			</>
-		</>
-	);
+              <div className="flex flex-col gap-1">
+                <span className="flex items-center gap-2">
+                  <Tooltip tooltip="E-mail address">
+                    <BsEnvelopeFill />
+                  </Tooltip>
+                  {u.email}
+                </span>
+                <span className="flex items-center gap-2">
+                  <Tooltip tooltip="Expiration Date">
+                    <BsStopwatchFill />
+                  </Tooltip>
+                  {u.subscriptionExpirationDate
+                    ? moment(u.subscriptionExpirationDate).format("DD/MM/YYYY")
+                    : "Unlimited"}
+                </span>
+                <span className="flex items-center gap-2">
+                  <Tooltip tooltip="Last Login">
+                    <BsClockFill />
+                  </Tooltip>
+                  {u.lastLogin
+                    ? moment(u.lastLogin).format("DD/MM/YYYY - HH:mm")
+                    : "N/A"}
+                </span>
+              </div>
+            </button>
+          ))}
+        </section>
+      </>
+    </>
+  );
 }
diff --git a/src/pages/entities/index.tsx b/src/pages/entities/index.tsx
index d9ef0924..95e18210 100644
--- a/src/pages/entities/index.tsx
+++ b/src/pages/entities/index.tsx
@@ -35,17 +35,35 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
   );
   const allowedEntities = findAllowedEntities(user, entities, "view_entities");
 
-  const entitiesWithCount = await Promise.all(
-    allowedEntities.map(async (e) => ({
-      entity: e,
-      count: await countEntityUsers(e.id, {
-        type: { $in: ["student", "teacher", "corporate", "mastercorporate"] },
-      }),
-      users: await getEntityUsers(e.id, 5, {
-        type: { $in: ["student", "teacher", "corporate", "mastercorporate"] },
-      }),
-    }))
-  );
+  const [counts, users] = await Promise.all([
+    await Promise.all(
+      allowedEntities.map(async (e) =>
+        countEntityUsers(e.id, {
+          type: { $in: ["student", "teacher", "corporate", "mastercorporate"] },
+        })
+      )
+    ),
+    await Promise.all(
+      allowedEntities.map(async (e) =>
+        getEntityUsers(
+          e.id,
+          5,
+          {
+            type: {
+              $in: ["student", "teacher", "corporate", "mastercorporate"],
+            },
+          },
+          { name: 1 }
+        )
+      )
+    ),
+  ]);
+
+  const entitiesWithCount = allowedEntities.map<{
+    entity: EntityWithRoles;
+    users: User[];
+    count: number;
+  }>((e, i) => ({ entity: e, users: users[i], count: counts[i] }));
 
   return {
     props: serialize({ user, entities: entitiesWithCount }),
diff --git a/src/pages/exam.tsx b/src/pages/exam.tsx
index 99f1e63c..6ddac55c 100644
--- a/src/pages/exam.tsx
+++ b/src/pages/exam.tsx
@@ -21,93 +21,124 @@ import { getSessionByAssignment } from "@/utils/sessions.be";
 import { Session } from "@/hooks/useSessions";
 import { activeAssignmentFilter } from "@/utils/assignments";
 
-export const getServerSideProps = withIronSessionSsr(async ({ req, res, query }) => {
-	const user = await requestUser(req, res)
-	const loginDestination = Buffer.from(req.url || "/").toString("base64")
-	if (!user) return redirect(`/login?destination=${loginDestination}`)
+export const getServerSideProps = withIronSessionSsr(
+  async ({ req, res, query }) => {
+    const user = await requestUser(req, res);
+    const loginDestination = Buffer.from(req.url || "/").toString("base64");
+    if (!user) return redirect(`/login?destination=${loginDestination}`);
 
-	if (shouldRedirectHome(user)) return redirect("/")
+    if (shouldRedirectHome(user)) return redirect("/");
 
-	const { assignment: assignmentID, destination } = query as { assignment?: string, destination?: string }
-	const destinationURL = !!destination ? Buffer.from(destination, 'base64').toString() : undefined
+    const { assignment: assignmentID, destination } = query as {
+      assignment?: string;
+      destination?: string;
+    };
+    const destinationURL = !!destination
+      ? Buffer.from(destination, "base64").toString()
+      : undefined;
 
-	if (!!assignmentID) {
-		const assignment = await getAssignment(assignmentID)
+    if (!!assignmentID) {
+      const assignment = await getAssignment(assignmentID);
 
-		if (!assignment) return redirect(destinationURL || "/exam")
-		if (!assignment.assignees.includes(user.id) && !["admin", "developer"].includes(user.type))
-			return redirect(destinationURL || "/exam")
+      if (!assignment) return redirect(destinationURL || "/exam");
+      if (
+        !assignment.assignees.includes(user.id) &&
+        !["admin", "developer"].includes(user.type)
+      )
+        return redirect(destinationURL || "/exam");
 
-		if (filterBy(assignment.results, 'user', user.id).length > 0)
-			return redirect(destinationURL || "/exam")
+      if (filterBy(assignment.results, "user", user.id).length > 0)
+			return redirect(destinationURL || "/exam");
+		
+      const [exams, session] = await Promise.all([
+        getExamsByIds(uniqBy(assignment.exams, "id")),
+        getSessionByAssignment(assignmentID),
+      ]);
 
-		const exams = await getExamsByIds(uniqBy(assignment.exams, "id"))
-		const session = await getSessionByAssignment(assignmentID)
+      return {
+        props: serialize({
+          user,
+          assignment,
+          exams,
+          destinationURL,
+          session: session ?? undefined,
+        }),
+      };
+    }
 
-		return {
-			props: serialize({ user, assignment, exams, destinationURL, session: session ?? undefined })
-		}
-	}
-
-	return {
-		props: serialize({ user, destinationURL }),
-	};
-}, sessionOptions);
+    return {
+      props: serialize({ user, destinationURL }),
+    };
+  },
+  sessionOptions
+);
 
 interface Props {
-	user: User;
-	assignment?: Assignment
-	exams?: Exam[]
-	session?: Session
-	destinationURL?: string
+  user: User;
+  assignment?: Assignment;
+  exams?: Exam[];
+  session?: Session;
+  destinationURL?: string;
 }
 
-const Page: React.FC<Props> = ({ user, assignment, exams = [], destinationURL = "/exam", session }) => {
-	const router = useRouter()
-	const { assignment: storeAssignment, dispatch } = useExamStore();
+const Page: React.FC<Props> = ({
+  user,
+  assignment,
+  exams = [],
+  destinationURL = "/exam",
+  session,
+}) => {
+  const router = useRouter();
+  const { assignment: storeAssignment, dispatch } = useExamStore();
 
-	useEffect(() => {
-		if (assignment && exams.length > 0 && !storeAssignment && !session) {
-			if (!activeAssignmentFilter(assignment)) return
-			dispatch({
-				type: "INIT_EXAM", payload: {
-					exams: exams.sort(sortByModule),
-					modules: exams
-						.map((x) => x!)
-						.sort(sortByModule)
-						.map((x) => x!.module),
-					assignment
-				}
-			});
+  useEffect(() => {
+    if (assignment && exams.length > 0 && !storeAssignment && !session) {
+      if (!activeAssignmentFilter(assignment)) return;
+      dispatch({
+        type: "INIT_EXAM",
+        payload: {
+          exams: exams.sort(sortByModule),
+          modules: exams
+            .map((x) => x!)
+            .sort(sortByModule)
+            .map((x) => x!.module),
+          assignment,
+        },
+      });
 
-			router.replace(router.asPath)
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [assignment, exams, session])
+      router.replace(router.asPath);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [assignment, exams, session]);
 
-	useEffect(() => {
-		if (assignment && exams.length > 0 && !storeAssignment && !!session) {
-			dispatch({ type: "SET_SESSION", payload: { session } })
-			router.replace(router.asPath)
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [assignment, exams, session])
+  useEffect(() => {
+    if (assignment && exams.length > 0 && !storeAssignment && !!session) {
+      dispatch({ type: "SET_SESSION", payload: { session } });
+      router.replace(router.asPath);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [assignment, exams, session]);
 
-	return (
-		<>
-			<Head>
-				<title>Exams | 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>
-			<ExamPage page="exams" destination={destinationURL} user={user} hideSidebar={!!assignment || !!storeAssignment} />
-		</>
-	);
-}
+  return (
+    <>
+      <Head>
+        <title>Exams | 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>
+      <ExamPage
+        page="exams"
+        destination={destinationURL}
+        user={user}
+        hideSidebar={!!assignment || !!storeAssignment}
+      />
+    </>
+  );
+};
 
 //Page.whyDidYouRender = true;
 export default Page;
diff --git a/src/pages/exercises.tsx b/src/pages/exercises.tsx
index b35ce2c2..6925587c 100644
--- a/src/pages/exercises.tsx
+++ b/src/pages/exercises.tsx
@@ -21,92 +21,100 @@ import { getSessionByAssignment } from "@/utils/sessions.be";
 import { Session } from "@/hooks/useSessions";
 import moment from "moment";
 
-export const getServerSideProps = withIronSessionSsr(async ({ req, res, query }) => {
-	const user = await requestUser(req, res)
-	const destination = Buffer.from(req.url || "/").toString("base64")
-	if (!user) return redirect(`/login?destination=${destination}`)
+export const getServerSideProps = withIronSessionSsr(
+  async ({ req, res, query }) => {
+    const user = await requestUser(req, res);
+    const destination = Buffer.from(req.url || "/").toString("base64");
+    if (!user) return redirect(`/login?destination=${destination}`);
 
-	if (shouldRedirectHome(user)) return redirect("/")
+    if (shouldRedirectHome(user)) return redirect("/");
 
-	const { assignment: assignmentID } = query as { assignment?: string }
+    const { assignment: assignmentID } = query as { assignment?: string };
 
-	if (assignmentID) {
-		const assignment = await getAssignment(assignmentID)
+    if (assignmentID) {
+      const assignment = await getAssignment(assignmentID);
 
-		if (!assignment) return redirect("/exam")
-		if (!["admin", "developer"].includes(user.type) && !assignment.assignees.includes(user.id)) return redirect("/exercises")
+      if (!assignment) return redirect("/exam");
+      if (
+        !["admin", "developer"].includes(user.type) &&
+        !assignment.assignees.includes(user.id)
+      )
+        return redirect("/exercises");
+      if (
+        filterBy(assignment.results, "user", user.id) ||
+        moment(assignment.startDate).isBefore(moment()) ||
+        moment(assignment.endDate).isAfter(moment())
+      )
+        return redirect("/exam");
+      const [exams, session] = await Promise.all([
+        getExamsByIds(uniqBy(assignment.exams, "id")),
+        getSessionByAssignment(assignmentID),
+      ]);
 
-		const exams = await getExamsByIds(uniqBy(assignment.exams, "id"))
-		const session = await getSessionByAssignment(assignmentID)
+      return {
+        props: serialize({ user, assignment, exams, session }),
+      };
+    }
 
-		if (
-			filterBy(assignment.results, 'user', user.id) ||
-			moment(assignment.startDate).isBefore(moment()) ||
-			moment(assignment.endDate).isAfter(moment())
-		)
-			return redirect("/exam")
-
-		return {
-			props: serialize({ user, assignment, exams, session })
-		}
-	}
-
-	return {
-		props: serialize({ user }),
-	};
-}, sessionOptions);
+    return {
+      props: serialize({ user }),
+    };
+  },
+  sessionOptions
+);
 
 interface Props {
-	user: User;
-	assignment?: Assignment
-	exams?: Exam[]
-	session?: Session
+  user: User;
+  assignment?: Assignment;
+  exams?: Exam[];
+  session?: Session;
 }
 
 export default function Page({ user, assignment, exams = [], session }: Props) {
-	const router = useRouter()
+  const router = useRouter();
 
-	const { assignment: storeAssignment, dispatch } = useExamStore()
+  const { assignment: storeAssignment, dispatch } = useExamStore();
 
-	useEffect(() => {
-		if (assignment && exams.length > 0 && !storeAssignment && !session) {
-			dispatch({
-				type: "INIT_EXAM", payload: {
-					exams: exams.sort(sortByModule),
-					modules: exams
-						.map((x) => x!)
-						.sort(sortByModule)
-						.map((x) => x!.module),
-					assignment
-				}
-			})
+  useEffect(() => {
+    if (assignment && exams.length > 0 && !storeAssignment && !session) {
+      dispatch({
+        type: "INIT_EXAM",
+        payload: {
+          exams: exams.sort(sortByModule),
+          modules: exams
+            .map((x) => x!)
+            .sort(sortByModule)
+            .map((x) => x!.module),
+          assignment,
+        },
+      });
 
-			router.replace(router.asPath)
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [assignment, exams, session])
+      router.replace(router.asPath);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [assignment, exams, session]);
 
-	useEffect(() => {
-		if (assignment && exams.length > 0 && !storeAssignment && !!session) {
-			dispatch({ type: "SET_SESSION", payload: { session } });
+  useEffect(() => {
+    if (assignment && exams.length > 0 && !storeAssignment && !!session) {
+      dispatch({ type: "SET_SESSION", payload: { session } });
 
-			router.replace(router.asPath)
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [assignment, exams, session])
+      router.replace(router.asPath);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [assignment, exams, session]);
 
-	return (
-		<>
-			<Head>
-				<title>Exams | 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>
-			<ExamPage page="exams" user={user} hideSidebar={!!assignment} />
-		</>
-	);
+  return (
+    <>
+      <Head>
+        <title>Exams | 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>
+      <ExamPage page="exams" user={user} hideSidebar={!!assignment} />
+    </>
+  );
 }
diff --git a/src/pages/official-exam.tsx b/src/pages/official-exam.tsx
index d472f9d9..b7b50638 100644
--- a/src/pages/official-exam.tsx
+++ b/src/pages/official-exam.tsx
@@ -4,7 +4,7 @@ import Button from "@/components/Low/Button";
 import Separator from "@/components/Low/Separator";
 import ProfileSummary from "@/components/ProfileSummary";
 import { Session } from "@/hooks/useSessions";
-import { Grading } from "@/interfaces";
+import { Grading, Module } from "@/interfaces";
 import { EntityWithRoles } from "@/interfaces/entity";
 import { Exam } from "@/interfaces/exam";
 import { InviteWithEntity } from "@/interfaces/invite";
@@ -12,14 +12,13 @@ import { Assignment } from "@/interfaces/results";
 import { Stat, User } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
 import useExamStore from "@/stores/exam";
-import { filterBy, findBy, mapBy, redirect, serialize } from "@/utils";
+import { findBy, mapBy, redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
 import {
   activeAssignmentFilter,
   futureAssignmentFilter,
 } from "@/utils/assignments";
 import { getAssignmentsByAssignee } from "@/utils/assignments.be";
-import { getEntitiesWithRoles } from "@/utils/entities.be";
 import { getExamsByIds } from "@/utils/exams.be";
 import { sortByModule } from "@/utils/moduleUtils";
 import { checkAccess } from "@/utils/permissions";
@@ -53,32 +52,59 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
 
   if (!checkAccess(user, ["admin", "developer", "student"]))
     return redirect("/");
+  const assignments = (await getAssignmentsByAssignee(
+    user.id,
+    {
+      archived: { $ne: true },
+    },
+    {
+      _id: 0,
+      id: 1,
+      name: 1,
+      startDate: 1,
+      endDate: 1,
+      exams: 1,
+      results: 1,
+    },
+    {
+      sort: { startDate: 1 },
+    }
+  )) as Assignment[];
 
-  const entityIDS = mapBy(user.entities, "id") || [];
-
-  const entities = await getEntitiesWithRoles(entityIDS);
-  const assignments = await getAssignmentsByAssignee(user.id, {
-    archived: { $ne: true },
-  });
-  const sessions = await getSessionsByUser(user.id, 0, {
-    "assignment.id": { $in: mapBy(assignments, "id") },
-  });
+  const sessions = await getSessionsByUser(
+    user.id,
+    0,
+    {
+      "assignment.id": { $in: mapBy(assignments, "id") },
+    },
+    {
+      _id: 0,
+      id: 1,
+      assignment: 1,
+    }
+  );
 
   const examIDs = uniqBy(
-    assignments.flatMap((a) =>
-      filterBy(a.exams, "assignee", user.id).map(
-        (e: any) => ({
-          module: e.module,
-          id: e.id,
-          key: `${e.module}_${e.id}`,
-        })
-      )
+    assignments.reduce<{ module: Module; id: string; key: string }[]>(
+      (acc, a) => {
+        a.exams.forEach((e) => {
+          if (e.assignee === user.id)
+            acc.push({
+              module: e.module,
+              id: e.id,
+              key: `${e.module}_${e.id}`,
+            });
+        });
+        return acc;
+      },
+      []
     ),
     "key"
   );
+
   const exams = await getExamsByIds(examIDs);
 
-  return { props: serialize({ user, entities, assignments, exams, sessions }) };
+  return { props: serialize({ user, assignments, exams, sessions }) };
 }, sessionOptions);
 
 const destination = Buffer.from("/official-exam").toString("base64");
@@ -109,11 +135,12 @@ export default function OfficialExam({
     });
 
     if (assignmentExams.every((x) => !!x)) {
+      const sortedAssignmentExams = assignmentExams.sort(sortByModule);
       dispatch({
         type: "INIT_EXAM",
         payload: {
-          exams: assignmentExams.sort(sortByModule),
-          modules: mapBy(assignmentExams.sort(sortByModule), "module"),
+          exams: sortedAssignmentExams,
+          modules: mapBy(sortedAssignmentExams, "module"),
           assignment,
         },
       });
@@ -144,12 +171,16 @@ export default function OfficialExam({
     [assignments]
   );
 
-  const assignmentSessions = useMemo(
-    () =>
-      sessions.filter((s) =>
-        mapBy(studentAssignments, "id").includes(s.assignment?.id || "")
-      ),
-    [sessions, studentAssignments]
+  const assignmentSessions = useMemo(() => {
+    const studentAssignmentsIDs = mapBy(studentAssignments, "id");
+    return sessions.filter((s) =>
+      studentAssignmentsIDs.includes(s.assignment?.id || "")
+    );
+  }, [sessions, studentAssignments]);
+
+  const entityLabels = useMemo(
+    () => mapBy(entities, "label")?.join(","),
+    [entities]
   );
 
   return (
@@ -167,7 +198,7 @@ export default function OfficialExam({
       <>
         {entities.length > 0 && (
           <div className="absolute right-4 top-4 rounded-lg bg-neutral-200 px-2 py-1">
-            <b>{mapBy(entities, "label")?.join(", ")}</b>
+            <b>{entityLabels}</b>
           </div>
         )}
 
@@ -191,20 +222,18 @@ export default function OfficialExam({
           <span className="text-mti-gray-taupe scrollbar-hide flex gap-8 overflow-x-scroll">
             {studentAssignments.length === 0 &&
               "Assignments will appear here. It seems that for now there are no assignments for you."}
-            {studentAssignments
-              .sort((a, b) => moment(a.startDate).diff(b.startDate))
-              .map((a) => (
-                <AssignmentCard
-                  key={a.id}
-                  assignment={a}
-                  user={user}
-                  session={assignmentSessions.find(
-                    (s) => s.assignment?.id === a.id
-                  )}
-                  startAssignment={startAssignment}
-                  resumeAssignment={loadSession}
-                />
-              ))}
+            {studentAssignments.map((a) => (
+              <AssignmentCard
+                key={a.id}
+                assignment={a}
+                user={user}
+                session={assignmentSessions.find(
+                  (s) => s.assignment?.id === a.id
+                )}
+                startAssignment={startAssignment}
+                resumeAssignment={loadSession}
+              />
+            ))}
           </span>
         </section>
 
diff --git a/src/pages/payment-record.tsx b/src/pages/payment-record.tsx
index 618d9621..edc8ed1b 100644
--- a/src/pages/payment-record.tsx
+++ b/src/pages/payment-record.tsx
@@ -31,7 +31,7 @@ import { useListSearch } from "@/hooks/useListSearch";
 import { checkAccess, findAllowedEntities, getTypesOfUser } from "@/utils/permissions";
 import { requestUser } from "@/utils/api";
 import { mapBy, redirect, serialize } from "@/utils";
-import { getEntities, getEntitiesWithRoles } from "@/utils/entities.be";
+import { getEntitiesWithRoles } from "@/utils/entities.be";
 import { isAdmin } from "@/utils/users";
 import { Entity, EntityWithRoles } from "@/interfaces/entity";
 
diff --git a/src/pages/payment.tsx b/src/pages/payment.tsx
index 7c253eed..0585aba4 100644
--- a/src/pages/payment.tsx
+++ b/src/pages/payment.tsx
@@ -21,11 +21,12 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
 	if (!user) return redirect("/login")
 
 	const entityIDs = mapBy(user.entities, 'id')
-	const entities = await getEntitiesWithRoles(isAdmin(user) ? undefined : entityIDs)
-
 	const domain = user.email.split("@").pop()
-	const discounts = await db.collection<Discount>("discounts").find({ domain }).toArray()
-	const packages = await db.collection<Package>("packages").find().toArray()
+	const [entities, discounts, packages] = await Promise.all([
+		getEntitiesWithRoles(isAdmin(user) ? undefined : entityIDs),
+		db.collection<Discount>("discounts").find({ domain }).toArray(),
+		db.collection<Package>("packages").find().toArray(),
+	])
 
 	return {
 		props: serialize({ user, entities, discounts, packages }),
diff --git a/src/pages/permissions/[id].tsx b/src/pages/permissions/[id].tsx
index 6e79b2d3..723cee7b 100644
--- a/src/pages/permissions/[id].tsx
+++ b/src/pages/permissions/[id].tsx
@@ -7,7 +7,7 @@ import { shouldRedirectHome } from "@/utils/navigation.disabled";
 import { Permission, PermissionType } from "@/interfaces/permissions";
 import { getPermissionDoc } from "@/utils/permissions.be";
 import { User } from "@/interfaces/user";
-import  { LayoutContext } from "@/components/High/Layout";
+import { LayoutContext } from "@/components/High/Layout";
 import { getUsers } from "@/utils/users.be";
 import { BsTrash } from "react-icons/bs";
 import Select from "@/components/Low/Select";
@@ -18,6 +18,7 @@ import { Type as UserType } from "@/interfaces/user";
 import { getGroups } from "@/utils/groups.be";
 import { requestUser } from "@/utils/api";
 import { redirect } from "@/utils";
+import { G } from "@react-pdf/renderer";
 interface BasicUser {
   id: string;
   name: string;
@@ -40,31 +41,25 @@ export const getServerSideProps = withIronSessionSsr(
     if (!params?.id) return redirect("/permissions");
 
     // Fetch data from external API
-    const permission: Permission = await getPermissionDoc(params.id as string);
-
-    const allUserData: User[] = await getUsers();
-    const groups = await getGroups();
+    const [permission, users, groups] = await Promise.all([
+      getPermissionDoc(params.id as string),
+      getUsers({}, 0, {}, { _id: 0, id: 1, name: 1, type: 1 }),
+      getGroups(),
+    ]);
 
     const userGroups = groups.filter((x) => x.admin === user.id);
+    const userGroupsParticipants = userGroups.flatMap((x) => x.participants);
     const filteredGroups =
       user.type === "corporate"
         ? userGroups
         : user.type === "mastercorporate"
-        ? groups.filter((x) =>
-            userGroups.flatMap((y) => y.participants).includes(x.admin)
-          )
+        ? groups.filter((x) => userGroupsParticipants.includes(x.admin))
         : groups;
-
-    const users = allUserData.map((u) => ({
-      id: u.id,
-      name: u.name,
-      type: u.type,
-    })) as BasicUser[];
-
+    const filteredGroupsParticipants = filteredGroups.flatMap(
+      (g) => g.participants
+    );
     const filteredUsers = ["mastercorporate", "corporate"].includes(user.type)
-      ? users.filter((u) =>
-          filteredGroups.flatMap((g) => g.participants).includes(u.id)
-        )
+      ? users.filter((u) => filteredGroupsParticipants.includes(u.id))
       : users;
 
     // const res = await fetch("api/permissions");
@@ -158,12 +153,14 @@ export default function Page(props: Props) {
           <div className="flex gap-3">
             <Select
               value={null}
-              options={users
-                .filter((u) => !selectedUsers.includes(u.id))
-                .map((u) => ({
-                  label: `${u?.type}-${u?.name}`,
-                  value: u.id,
-                }))}
+              options={users.reduce<{ label: string; value: string }[]>(
+                (acc, u) => {
+                  if (!selectedUsers.includes(u.id))
+                    acc.push({ label: `${u?.type}-${u?.name}`, value: u.id });
+                  return acc;
+                },
+                []
+              )}
               onChange={onChange}
             />
             <Button onClick={update}>Update</Button>
@@ -195,9 +192,8 @@ export default function Page(props: Props) {
             <div className="flex flex-col gap-3">
               <h2>Whitelisted Users</h2>
               <div className="flex flex-col gap-3 flex-wrap">
-                {users
-                  .filter((user) => !selectedUsers.includes(user.id))
-                  .map((user) => {
+                {users.map((user) => {
+                  if (!selectedUsers.includes(user.id))
                     return (
                       <div
                         className="flex p-4 rounded-xl w-auto bg-mti-purple-light text-white gap-4"
@@ -208,7 +204,8 @@ export default function Page(props: Props) {
                         </span>
                       </div>
                     );
-                  })}
+                  return null;
+                })}
               </div>
             </div>
           </div>
diff --git a/src/pages/profile.tsx b/src/pages/profile.tsx
index 9c1ec17a..2cf7d2b1 100644
--- a/src/pages/profile.tsx
+++ b/src/pages/profile.tsx
@@ -53,23 +53,23 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
   if (!user) return redirect("/login");
 
   if (shouldRedirectHome(user)) return redirect("/");
-  const linkedCorporate = (await getUserCorporate(user.id)) || null;
-  const groups = (
-    await getParticipantGroups(user.id, { _id: 0, admin: 1 })
-  ).map((group) => group.admin);
-  const referralAgent =
+  const [linkedCorporate, groups, referralAgent] = await Promise.all([
+    getUserCorporate(user.id) || null,
+    getParticipantGroups(user.id, { _id: 0, group: 1 }),
     user.type === "corporate" && user.corporateInformation.referralAgent
-      ? await getUser(user.corporateInformation.referralAgent, {
+      ? getUser(user.corporateInformation.referralAgent, {
           _id: 0,
           name: 1,
           email: 1,
           demographicInformation: 1,
         })
-      : null;
+      : null,
+  ]);
+  const groupsAdmin = groups.map((group) => group.admin);
 
   const hasBenefitsFromUniversity =
     (await countUsers({
-      id: { $in: groups },
+      id: { $in: groupsAdmin },
       type: "corporate",
     })) > 0;
 
diff --git a/src/pages/record.tsx b/src/pages/record.tsx
index a026c362..6dbcb230 100644
--- a/src/pages/record.tsx
+++ b/src/pages/record.tsx
@@ -23,7 +23,9 @@ import { getAssignments, getEntitiesAssignments } from "@/utils/assignments.be";
 import { findBy, mapBy, redirect, serialize } from "@/utils";
 import { getEntitiesWithRoles } from "@/utils/entities.be";
 import { checkAccess } from "@/utils/permissions";
-import { getGradingSystemByEntities, getGradingSystemByEntity } from "@/utils/grading.be";
+import {
+  getGradingSystemByEntities,
+} from "@/utils/grading.be";
 import { Grading } from "@/interfaces";
 import { EntityWithRoles } from "@/interfaces/entity";
 import CardList from "@/components/High/CardList";
@@ -33,208 +35,272 @@ import getPendingEvals from "@/utils/disabled.be";
 import useEvaluationPolling from "@/hooks/useEvaluationPolling";
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
-	const user = await requestUser(req, res)
-	if (!user) return redirect("/login")
+  const user = await requestUser(req, res);
+  if (!user) return redirect("/login");
 
-	if (shouldRedirectHome(user)) return redirect("/")
+  if (shouldRedirectHome(user)) return redirect("/");
 
-	const entityIDs = mapBy(user.entities, 'id')
-	const isAdmin = checkAccess(user, ["admin", "developer"])
+  const entityIDs = mapBy(user.entities, "id");
+  const isAdmin = checkAccess(user, ["admin", "developer"]);
 
-	const entities = await getEntitiesWithRoles(checkAccess(user, ["admin", "developer"]) ? undefined : entityIDs)
-	const entitiesIds = mapBy(entities, 'id')
-	const users = await (isAdmin ? getUsers() : getEntitiesUsers(entitiesIds))
-	const assignments = await (isAdmin ? getAssignments() : getEntitiesAssignments(entitiesIds))
-	const gradingSystems = await getGradingSystemByEntities(entitiesIds)
-	const pendingSessionIds = await getPendingEvals(user.id);
+  const entities = await getEntitiesWithRoles(isAdmin ? undefined : entityIDs);
+  const entitiesIds = mapBy(entities, "id");
+  const [users, assignments, gradingSystems, pendingSessionIds] =
+    await Promise.all([
+      isAdmin ? getUsers() : getEntitiesUsers(entitiesIds),
+      isAdmin ? getAssignments() : getEntitiesAssignments(entitiesIds),
+      getGradingSystemByEntities(entitiesIds),
+      getPendingEvals(user.id),
+    ]);
 
-	return {
-		props: serialize({ user, users, assignments, entities, gradingSystems, isAdmin, pendingSessionIds }),
-	};
+  return {
+    props: serialize({
+      user,
+      users,
+      assignments,
+      entities,
+      gradingSystems,
+      isAdmin,
+      pendingSessionIds,
+    }),
+  };
 }, sessionOptions);
 
 type Filter = "months" | "weeks" | "days" | "assignments" | undefined;
 
 interface Props {
-	user: User;
-	users: User[];
-	assignments: Assignment[];
-	entities: EntityWithRoles[]
-	gradingSystems: Grading[]
-	pendingSessionIds: string[];
-	isAdmin:boolean
+  user: User;
+  users: User[];
+  assignments: Assignment[];
+  entities: EntityWithRoles[];
+  gradingSystems: Grading[];
+  pendingSessionIds: string[];
+  isAdmin: boolean;
 }
 
 const MAX_TRAINING_EXAMS = 10;
 
-export default function History({ user, users, assignments, entities, gradingSystems, isAdmin, pendingSessionIds }: Props) {
-	const router = useRouter();
-	const [statsUserId, setStatsUserId, training, setTraining] = useRecordStore((state) => [
-		state.selectedUser,
-		state.setSelectedUser,
-		state.training,
-		state.setTraining,
-	]);
+export default function History({
+  user,
+  users,
+  assignments,
+  entities,
+  gradingSystems,
+  isAdmin,
+  pendingSessionIds,
+}: Props) {
+  const router = useRouter();
+  const [statsUserId, setStatsUserId, training, setTraining] = useRecordStore(
+    (state) => [
+      state.selectedUser,
+      state.setSelectedUser,
+      state.training,
+      state.setTraining,
+    ]
+  );
 
-	const [filter, setFilter] = useState<Filter>();
+  const [filter, setFilter] = useState<Filter>();
 
-	const { data: stats, isLoading: isStatsLoading } = useFilterRecordsByUser<Stat[]>(statsUserId || user?.id);
-	const allowedDownloadEntities = useAllowedEntities(user, entities, 'download_student_record')
+  const { data: stats, isLoading: isStatsLoading } = useFilterRecordsByUser<
+    Stat[]
+  >(statsUserId || user?.id);
+  const allowedDownloadEntities = useAllowedEntities(
+    user,
+    entities,
+    "download_student_record"
+  );
 
-	const renderPdfIcon = usePDFDownload("stats");
+  const renderPdfIcon = usePDFDownload("stats");
 
-	const [selectedTrainingExams, setSelectedTrainingExams] = useState<string[]>([]);
-	const setTrainingStats = useTrainingContentStore((state) => state.setStats);
+  const [selectedTrainingExams, setSelectedTrainingExams] = useState<string[]>(
+    []
+  );
+  const setTrainingStats = useTrainingContentStore((state) => state.setStats);
 
-	const groupedStats = useMemo(() => groupByDate(
-		stats.filter((x) => {
-			if (
-				(
-					x.module === "writing" || x.module === "speaking") &&
-					!x.isDisabled && Array.isArray(x.solutions) && 
-					!x.solutions.every((y) => Object.keys(y).includes("evaluation")
-				)
-			)
-				return false;
-			return true;
-		}),
-	), [stats])
+  const groupedStats = useMemo(
+    () =>
+      groupByDate(
+        stats.filter((x) => {
+          if (
+            (x.module === "writing" || x.module === "speaking") &&
+            !x.isDisabled &&
+            Array.isArray(x.solutions) &&
+            !x.solutions.every((y) => Object.keys(y).includes("evaluation"))
+          )
+            return false;
+          return true;
+        })
+      ),
+    [stats]
+  );
 
-	useEffect(() => setStatsUserId(user.id), [setStatsUserId, user]);
+  useEffect(() => setStatsUserId(user.id), [setStatsUserId, user]);
 
-	useEffect(() => {
-		const handleRouteChange = (url: string) => {
-			setTraining(false);
-		};
-		router.events.on("routeChangeStart", handleRouteChange);
-		return () => {
-			router.events.off("routeChangeStart", handleRouteChange);
-		};
-	}, [router.events, setTraining]);
+  useEffect(() => {
+    const handleRouteChange = (url: string) => {
+      setTraining(false);
+    };
+    router.events.on("routeChangeStart", handleRouteChange);
+    return () => {
+      router.events.off("routeChangeStart", handleRouteChange);
+    };
+  }, [router.events, setTraining]);
 
-	const filterStatsByDate = (stats: { [key: string]: Stat[] }) => {
-		if (filter && filter !== "assignments") {
-			const filterDate = moment()
-				.subtract({ [filter as string]: 1 })
-				.format("x");
-			const filteredStats: { [key: string]: Stat[] } = {};
+  const filterStatsByDate = (stats: { [key: string]: Stat[] }) => {
+    if (filter && filter !== "assignments") {
+      const filterDate = moment()
+        .subtract({ [filter as string]: 1 })
+        .format("x");
+      const filteredStats: { [key: string]: Stat[] } = {};
 
-			Object.keys(stats).forEach((timestamp) => {
-				if (timestamp >= filterDate) filteredStats[timestamp] = stats[timestamp];
-			});
-			return filteredStats;
-		}
+      Object.keys(stats).forEach((timestamp) => {
+        if (timestamp >= filterDate)
+          filteredStats[timestamp] = stats[timestamp];
+      });
+      return filteredStats;
+    }
 
-		if (filter && filter === "assignments") {
-			const filteredStats: { [key: string]: Stat[] } = {};
+    if (filter && filter === "assignments") {
+      const filteredStats: { [key: string]: Stat[] } = {};
 
-			Object.keys(stats).forEach((timestamp) => {
-				if (stats[timestamp].map((s) => s.assignment === undefined).includes(false))
-					filteredStats[timestamp] = [...stats[timestamp].filter((s) => !!s.assignment)];
-			});
+      Object.keys(stats).forEach((timestamp) => {
+        if (
+          stats[timestamp]
+            .map((s) => s.assignment === undefined)
+            .includes(false)
+        )
+          filteredStats[timestamp] = [
+            ...stats[timestamp].filter((s) => !!s.assignment),
+          ];
+      });
 
-			return filteredStats;
-		}
+      return filteredStats;
+    }
 
-		return stats;
-	};
+    return stats;
+  };
 
-	const handleTrainingContentSubmission = () => {
-		if (groupedStats) {
-			const groupedStatsByDate = filterStatsByDate(groupedStats);
-			const allStats = Object.keys(groupedStatsByDate);
-			const selectedStats = selectedTrainingExams.reduce<Record<string, Stat[]>>((accumulator, moduleAndTimestamp) => {
-				const timestamp = moduleAndTimestamp.split("-")[1];
-				if (allStats.includes(timestamp) && !accumulator.hasOwnProperty(timestamp)) {
-					accumulator[timestamp] = groupedStatsByDate[timestamp];
-				}
-				return accumulator;
-			}, {});
-			setTrainingStats(Object.values(selectedStats).flat());
-			router.push("/training");
-		}
-	};
+  const handleTrainingContentSubmission = () => {
+    if (groupedStats) {
+      const groupedStatsByDate = filterStatsByDate(groupedStats);
+      const allStats = Object.keys(groupedStatsByDate);
+      const selectedStats = selectedTrainingExams.reduce<
+        Record<string, Stat[]>
+      >((accumulator, moduleAndTimestamp) => {
+        const timestamp = moduleAndTimestamp.split("-")[1];
+        if (
+          allStats.includes(timestamp) &&
+          !accumulator.hasOwnProperty(timestamp)
+        ) {
+          accumulator[timestamp] = groupedStatsByDate[timestamp];
+        }
+        return accumulator;
+      }, {});
+      setTrainingStats(Object.values(selectedStats).flat());
+      router.push("/training");
+    }
+  };
 
-	const filteredStats = useMemo(() =>
-		Object.keys(filterStatsByDate(groupedStats))
-			.sort((a, b) => parseInt(b) - parseInt(a)),
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[groupedStats, filter])
+  const filteredStats = useMemo(
+    () =>
+      Object.keys(filterStatsByDate(groupedStats)).sort(
+        (a, b) => parseInt(b) - parseInt(a)
+      ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [groupedStats, filter]
+  );
 
-	const customContent = (timestamp: string) => {
-		const dateStats = groupedStats[timestamp];
-		const statUser = findBy(users, 'id', dateStats[0]?.user)
+  const customContent = (timestamp: string) => {
+    const dateStats = groupedStats[timestamp];
+    const statUser = findBy(users, "id", dateStats[0]?.user);
 
-		const canDownload = mapBy(statUser?.entities, 'id').some(e => mapBy(allowedDownloadEntities, 'id').includes(e))
+    const canDownload = mapBy(statUser?.entities, "id").some((e) =>
+      mapBy(allowedDownloadEntities, "id").includes(e)
+    );
 
-		return (
-			<StatsGridItem
-				key={uuidv4()}
-				stats={dateStats}
-				gradingSystems={gradingSystems}
-				timestamp={timestamp}
-				user={user}
-				assignments={assignments}
-				users={users}
-				training={training}
-				selectedTrainingExams={selectedTrainingExams}
-				setSelectedTrainingExams={setSelectedTrainingExams}
-				maxTrainingExams={MAX_TRAINING_EXAMS}
-				renderPdfIcon={canDownload ? renderPdfIcon : undefined}
-			/>
-		);
-	};
+    return (
+      <StatsGridItem
+        key={uuidv4()}
+        stats={dateStats}
+        gradingSystems={gradingSystems}
+        timestamp={timestamp}
+        user={user}
+        assignments={assignments}
+        users={users}
+        training={training}
+        selectedTrainingExams={selectedTrainingExams}
+        setSelectedTrainingExams={setSelectedTrainingExams}
+        maxTrainingExams={MAX_TRAINING_EXAMS}
+        renderPdfIcon={canDownload ? renderPdfIcon : undefined}
+      />
+    );
+  };
 
-	useEvaluationPolling(pendingSessionIds ? pendingSessionIds : [], "records", user.id);
+  useEvaluationPolling(
+    pendingSessionIds ? pendingSessionIds : [],
+    "records",
+    user.id
+  );
 
-	return (
-		<>
-			<Head>
-				<title>Record | 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 />
-			{user && (
-				<>
-					<RecordFilter user={user} isAdmin={isAdmin} entities={entities} filterState={{ filter: filter, setFilter: setFilter }}>
-						{training && (
-							<div className="flex flex-row">
-								<div className="font-semibold text-2xl mr-4">
-									Select up to 10 exercises
-									{`(${selectedTrainingExams.length}/${MAX_TRAINING_EXAMS})`}
-								</div>
-								<button
-									className={clsx(
-										"bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light ml-4 disabled:cursor-not-allowed",
-										"transition duration-300 ease-in-out",
-									)}
-									disabled={selectedTrainingExams.length == 0}
-									onClick={handleTrainingContentSubmission}>
-									Submit
-								</button>
-							</div>
-						)}
-					</RecordFilter>
+  return (
+    <>
+      <Head>
+        <title>Record | 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 />
+      {user && (
+        <>
+          <RecordFilter
+            user={user}
+            isAdmin={isAdmin}
+            entities={entities}
+            filterState={{ filter: filter, setFilter: setFilter }}
+          >
+            {training && (
+              <div className="flex flex-row">
+                <div className="font-semibold text-2xl mr-4">
+                  Select up to 10 exercises
+                  {`(${selectedTrainingExams.length}/${MAX_TRAINING_EXAMS})`}
+                </div>
+                <button
+                  className={clsx(
+                    "bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light ml-4 disabled:cursor-not-allowed",
+                    "transition duration-300 ease-in-out"
+                  )}
+                  disabled={selectedTrainingExams.length == 0}
+                  onClick={handleTrainingContentSubmission}
+                >
+                  Submit
+                </button>
+              </div>
+            )}
+          </RecordFilter>
 
-
-					{filteredStats.length > 0 && !isStatsLoading && (
-						<CardList list={filteredStats} renderCard={customContent} searchFields={[]} pageSize={30} className="lg:!grid-cols-3" />
-					)}
-					{filteredStats.length === 0 && !isStatsLoading && (
-						<span className="font-semibold ml-1">No record to display...</span>
-					)}
-					{isStatsLoading && (
-						<div className="absolute left-1/2 top-1/2 flex h-fit w-fit -translate-x-1/2 -translate-y-1/2 animate-pulse flex-col items-center gap-12">
-							<span className="loading loading-infinity w-32 bg-mti-green-light" />
-						</div>
-					)}
-				</>
-			)}
-		</>
-	);
+          {filteredStats.length > 0 && !isStatsLoading && (
+            <CardList
+              list={filteredStats}
+              renderCard={customContent}
+              searchFields={[]}
+              pageSize={30}
+              className="lg:!grid-cols-3"
+            />
+          )}
+          {filteredStats.length === 0 && !isStatsLoading && (
+            <span className="font-semibold ml-1">No record to display...</span>
+          )}
+          {isStatsLoading && (
+            <div className="absolute left-1/2 top-1/2 flex h-fit w-fit -translate-x-1/2 -translate-y-1/2 animate-pulse flex-col items-center gap-12">
+              <span className="loading loading-infinity w-32 bg-mti-green-light" />
+            </div>
+          )}
+        </>
+      )}
+    </>
+  );
 }
diff --git a/src/pages/settings.tsx b/src/pages/settings.tsx
index 29aa8e01..8f98d394 100644
--- a/src/pages/settings.tsx
+++ b/src/pages/settings.tsx
@@ -13,169 +13,256 @@ import { checkAccess, getTypesOfUser } from "@/utils/permissions";
 import { useState } from "react";
 import Modal from "@/components/Modal";
 import IconCard from "@/components/IconCard";
-import { BsCode, BsCodeSquare, BsGearFill, BsPeopleFill, BsPersonFill } from "react-icons/bs";
+import {
+  BsCode,
+  BsCodeSquare,
+  BsGearFill,
+  BsPeopleFill,
+  BsPersonFill,
+} from "react-icons/bs";
 import UserCreator from "./(admin)/UserCreator";
 import CorporateGradingSystem from "./(admin)/CorporateGradingSystem";
 import { CEFR_STEPS } from "@/resources/grading";
 import { User } from "@/interfaces/user";
 import { getUserPermissions } from "@/utils/permissions.be";
-import {  PermissionType } from "@/interfaces/permissions";
+import { PermissionType } from "@/interfaces/permissions";
 import { getUsers } from "@/utils/users.be";
 import { getEntitiesWithRoles } from "@/utils/entities.be";
 import { mapBy, serialize, redirect } from "@/utils";
 import { EntityWithRoles } from "@/interfaces/entity";
 import { requestUser } from "@/utils/api";
 import { isAdmin } from "@/utils/users";
-import { getGradingSystemByEntities, getGradingSystemByEntity } from "@/utils/grading.be";
+import {
+  getGradingSystemByEntities,
+  getGradingSystemByEntity,
+} from "@/utils/grading.be";
 import { Grading } from "@/interfaces";
 import { useRouter } from "next/router";
 import { useAllowedEntities } from "@/hooks/useEntityPermissions";
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
-	const user = await requestUser(req, res)
-	if (!user) return redirect("/login")
+  const user = await requestUser(req, res);
+  if (!user) return redirect("/login");
 
-	if (shouldRedirectHome(user) || !checkAccess(user, ["admin", "developer", "corporate", "teacher", "mastercorporate"]))
-		return redirect("/")
+  if (
+    shouldRedirectHome(user) ||
+    !checkAccess(user, [
+      "admin",
+      "developer",
+      "corporate",
+      "teacher",
+      "mastercorporate",
+    ])
+  )
+    return redirect("/");
+  const [permissions, entities, allUsers] = await Promise.all([
+    getUserPermissions(user.id),
+    isAdmin(user)
+      ? await getEntitiesWithRoles()
+      : await getEntitiesWithRoles(mapBy(user.entities, "id")),
+    getUsers(),
+  ]);
+  const gradingSystems = await getGradingSystemByEntities(
+    mapBy(entities, "id")
+  );
+  const entitiesGrading = entities.map(
+    (e) =>
+      gradingSystems.find((g) => g.entity === e.id) || {
+        entity: e.id,
+        steps: CEFR_STEPS,
+      }
+  );
 
-	const permissions = await getUserPermissions(user.id);
-	const entities = isAdmin(user) ? await getEntitiesWithRoles() : await getEntitiesWithRoles(mapBy(user.entities, 'id'))
-	const allUsers = await getUsers()
-	const gradingSystems = await getGradingSystemByEntities(mapBy(entities, 'id'))
-	const entitiesGrading = entities.map(e => gradingSystems.find(g => g.entity === e.id) || { entity: e.id, steps: CEFR_STEPS })
-
-	return {
-		props: serialize({ user, permissions, entities, allUsers, entitiesGrading }),
-	};
+  return {
+    props: serialize({
+      user,
+      permissions,
+      entities,
+      allUsers,
+      entitiesGrading,
+    }),
+  };
 }, sessionOptions);
 
 interface Props {
-	user: User;
-	permissions: PermissionType[];
-	entities: EntityWithRoles[];
-	allUsers: User[]
-	entitiesGrading: Grading[]
+  user: User;
+  permissions: PermissionType[];
+  entities: EntityWithRoles[];
+  allUsers: User[];
+  entitiesGrading: Grading[];
 }
 
-export default function Admin({ user, entities, permissions, allUsers, entitiesGrading }: Props) {
-	const [modalOpen, setModalOpen] = useState<string>();
-	const router = useRouter()
+export default function Admin({
+  user,
+  entities,
+  permissions,
+  allUsers,
+  entitiesGrading,
+}: Props) {
+  const [modalOpen, setModalOpen] = useState<string>();
+  const router = useRouter();
 
-	const entitiesAllowCreateUser = useAllowedEntities(user, entities, 'create_user')
-	const entitiesAllowCreateUsers = useAllowedEntities(user, entities, 'create_user_batch')
-	const entitiesAllowCreateCode = useAllowedEntities(user, entities, 'create_code')
-	const entitiesAllowCreateCodes = useAllowedEntities(user, entities, 'create_code_batch')
-	const entitiesAllowEditGrading = useAllowedEntities(user, entities, 'edit_grading_system')
+  const entitiesAllowCreateUser = useAllowedEntities(
+    user,
+    entities,
+    "create_user"
+  );
+  const entitiesAllowCreateUsers = useAllowedEntities(
+    user,
+    entities,
+    "create_user_batch"
+  );
+  const entitiesAllowCreateCode = useAllowedEntities(
+    user,
+    entities,
+    "create_code"
+  );
+  const entitiesAllowCreateCodes = useAllowedEntities(
+    user,
+    entities,
+    "create_code_batch"
+  );
+  const entitiesAllowEditGrading = useAllowedEntities(
+    user,
+    entities,
+    "edit_grading_system"
+  );
 
-	return (
-		<>
-			<Head>
-				<title>Settings Panel | 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 />
-			<>
-				<Modal isOpen={modalOpen === "batchCreateUser"} onClose={() => setModalOpen(undefined)} maxWidth="max-w-[85%]">
-					<BatchCreateUser
-						user={user}
-						entities={entitiesAllowCreateUser}
-						permissions={permissions}
-						onFinish={() => setModalOpen(undefined)}
-					/>
-				</Modal>
-				<Modal isOpen={modalOpen === "batchCreateCode"} onClose={() => setModalOpen(undefined)}>
-					<BatchCodeGenerator
-						entities={entitiesAllowCreateCodes}
-						user={user}
-						users={allUsers}
-						permissions={permissions}
-						onFinish={() => setModalOpen(undefined)}
-					/>
-				</Modal>
-				<Modal isOpen={modalOpen === "createCode"} onClose={() => setModalOpen(undefined)}>
-					<CodeGenerator
-						entities={entitiesAllowCreateCode}
-						user={user}
-						permissions={permissions}
-						onFinish={() => setModalOpen(undefined)}
-					/>
-				</Modal>
-				<Modal isOpen={modalOpen === "createUser"} onClose={() => setModalOpen(undefined)}>
-					<UserCreator
-						user={user}
-						entities={entitiesAllowCreateUsers}
-						users={allUsers}
-						permissions={permissions}
-						onFinish={() => setModalOpen(undefined)}
-					/>
-				</Modal>
-				<Modal isOpen={modalOpen === "gradingSystem"} onClose={() => setModalOpen(undefined)}>
-					<CorporateGradingSystem
-						user={user}
-						entitiesGrading={entitiesGrading}
-						entities={entitiesAllowEditGrading}
-						mutate={() => router.replace(router.asPath)}
-					/>
-				</Modal>
+  return (
+    <>
+      <Head>
+        <title>Settings Panel | 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 />
+      <>
+        <Modal
+          isOpen={modalOpen === "batchCreateUser"}
+          onClose={() => setModalOpen(undefined)}
+          maxWidth="max-w-[85%]"
+        >
+          <BatchCreateUser
+            user={user}
+            entities={entitiesAllowCreateUser}
+            permissions={permissions}
+            onFinish={() => setModalOpen(undefined)}
+          />
+        </Modal>
+        <Modal
+          isOpen={modalOpen === "batchCreateCode"}
+          onClose={() => setModalOpen(undefined)}
+        >
+          <BatchCodeGenerator
+            entities={entitiesAllowCreateCodes}
+            user={user}
+            users={allUsers}
+            permissions={permissions}
+            onFinish={() => setModalOpen(undefined)}
+          />
+        </Modal>
+        <Modal
+          isOpen={modalOpen === "createCode"}
+          onClose={() => setModalOpen(undefined)}
+        >
+          <CodeGenerator
+            entities={entitiesAllowCreateCode}
+            user={user}
+            permissions={permissions}
+            onFinish={() => setModalOpen(undefined)}
+          />
+        </Modal>
+        <Modal
+          isOpen={modalOpen === "createUser"}
+          onClose={() => setModalOpen(undefined)}
+        >
+          <UserCreator
+            user={user}
+            entities={entitiesAllowCreateUsers}
+            users={allUsers}
+            permissions={permissions}
+            onFinish={() => setModalOpen(undefined)}
+          />
+        </Modal>
+        <Modal
+          isOpen={modalOpen === "gradingSystem"}
+          onClose={() => setModalOpen(undefined)}
+        >
+          <CorporateGradingSystem
+            user={user}
+            entitiesGrading={entitiesGrading}
+            entities={entitiesAllowEditGrading}
+            mutate={() => router.replace(router.asPath)}
+          />
+        </Modal>
 
-				<section className="w-full grid grid-cols-2 -md:grid-cols-1 gap-8">
-					<ExamLoader />
-					{checkAccess(user, getTypesOfUser(["teacher"]), permissions, "viewCodes") && (
-						<div className="w-full grid grid-cols-2 gap-4">
-							<IconCard
-								Icon={BsCode}
-								label="Generate Single Code"
-								color="purple"
-								className="w-full h-full"
-								onClick={() => setModalOpen("createCode")}
-								disabled={entitiesAllowCreateCode.length === 0}
-							/>
-							<IconCard
-								Icon={BsCodeSquare}
-								label="Generate Codes in Batch"
-								color="purple"
-								className="w-full h-full"
-								onClick={() => setModalOpen("batchCreateCode")}
-								disabled={entitiesAllowCreateCodes.length === 0}
-							/>
-							<IconCard
-								Icon={BsPersonFill}
-								label="Create Single User"
-								color="purple"
-								className="w-full h-full"
-								onClick={() => setModalOpen("createUser")}
-								disabled={entitiesAllowCreateUser.length === 0}
-							/>
-							<IconCard
-								Icon={BsPeopleFill}
-								label="Create Users in Batch"
-								color="purple"
-								className="w-full h-full"
-								onClick={() => setModalOpen("batchCreateUser")}
-								disabled={entitiesAllowCreateUsers.length === 0}
-							/>
-							{checkAccess(user, ["admin", "corporate", "developer", "mastercorporate"]) && (
-								<IconCard
-									Icon={BsGearFill}
-									label="Grading System"
-									color="purple"
-									className="w-full h-full col-span-2"
-									onClick={() => setModalOpen("gradingSystem")}
-									disabled={entitiesAllowEditGrading.length === 0}
-								/>
-							)}
-						</div>
-					)}
-				</section>
-				<section className="w-full">
-					<Lists user={user} entities={entities} permissions={permissions} />
-				</section>
-			</>
-		</>
-	);
+        <section className="w-full grid grid-cols-2 -md:grid-cols-1 gap-8">
+          <ExamLoader />
+          {checkAccess(
+            user,
+            getTypesOfUser(["teacher"]),
+            permissions,
+            "viewCodes"
+          ) && (
+            <div className="w-full grid grid-cols-2 gap-4">
+              <IconCard
+                Icon={BsCode}
+                label="Generate Single Code"
+                color="purple"
+                className="w-full h-full"
+                onClick={() => setModalOpen("createCode")}
+                disabled={entitiesAllowCreateCode.length === 0}
+              />
+              <IconCard
+                Icon={BsCodeSquare}
+                label="Generate Codes in Batch"
+                color="purple"
+                className="w-full h-full"
+                onClick={() => setModalOpen("batchCreateCode")}
+                disabled={entitiesAllowCreateCodes.length === 0}
+              />
+              <IconCard
+                Icon={BsPersonFill}
+                label="Create Single User"
+                color="purple"
+                className="w-full h-full"
+                onClick={() => setModalOpen("createUser")}
+                disabled={entitiesAllowCreateUser.length === 0}
+              />
+              <IconCard
+                Icon={BsPeopleFill}
+                label="Create Users in Batch"
+                color="purple"
+                className="w-full h-full"
+                onClick={() => setModalOpen("batchCreateUser")}
+                disabled={entitiesAllowCreateUsers.length === 0}
+              />
+              {checkAccess(user, [
+                "admin",
+                "corporate",
+                "developer",
+                "mastercorporate",
+              ]) && (
+                <IconCard
+                  Icon={BsGearFill}
+                  label="Grading System"
+                  color="purple"
+                  className="w-full h-full col-span-2"
+                  onClick={() => setModalOpen("gradingSystem")}
+                  disabled={entitiesAllowEditGrading.length === 0}
+                />
+              )}
+            </div>
+          )}
+        </section>
+        <section className="w-full">
+          <Lists user={user} entities={entities} permissions={permissions} />
+        </section>
+      </>
+    </>
+  );
 }
diff --git a/src/pages/statistical.tsx b/src/pages/statistical.tsx
index 0795d0b2..319f0de1 100644
--- a/src/pages/statistical.tsx
+++ b/src/pages/statistical.tsx
@@ -7,14 +7,14 @@ import { Session } from "@/hooks/useSessions";
 import { Entity, EntityWithRoles } from "@/interfaces/entity";
 import { Exam } from "@/interfaces/exam";
 import { Assignment, AssignmentResult } from "@/interfaces/results";
-import {  StudentUser, User } from "@/interfaces/user";
+import { StudentUser, User } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
 import { filterBy, findBy, mapBy, redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
 import { getEntitiesAssignments } from "@/utils/assignments.be";
 import { getEntitiesWithRoles } from "@/utils/entities.be";
 import { getExamsByIds } from "@/utils/exams.be";
-import {  findAllowedEntities } from "@/utils/permissions";
+import { findAllowedEntities } from "@/utils/permissions";
 import { getSessionsByAssignments } from "@/utils/sessions.be";
 import { isAdmin } from "@/utils/users";
 import { getEntitiesUsers } from "@/utils/users.be";
@@ -28,278 +28,399 @@ import Head from "next/head";
 import Link from "next/link";
 import { useEffect, useMemo, useState } from "react";
 import ReactDatePicker from "react-datepicker";
-import {
-	BsBank,
-	BsChevronLeft,
-	BsX,
-} from "react-icons/bs";
+import { BsBank, BsChevronLeft, BsX } from "react-icons/bs";
 
 interface Props {
-	user: User;
-	students: StudentUser[];
-	entities: EntityWithRoles[];
-	assignments: Assignment[];
-	sessions: Session[]
-	exams: Exam[]
+  user: User;
+  students: StudentUser[];
+  entities: EntityWithRoles[];
+  assignments: Assignment[];
+  sessions: Session[];
+  exams: Exam[];
 }
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
-	const user = await requestUser(req, res)
-	if (!user) return redirect("/login")
+  const user = await requestUser(req, res);
+  if (!user) return redirect("/login");
 
-	const entityIDS = mapBy(user.entities, "id") || [];
-	const entities = await getEntitiesWithRoles(isAdmin(user) ? undefined : entityIDS);
-	const allowedEntities = findAllowedEntities(user, entities, 'view_entity_statistics')
+  const entityIDS = mapBy(user.entities, "id") || [];
+  const entities = await getEntitiesWithRoles(
+    isAdmin(user) ? undefined : entityIDS
+  );
+  const allowedEntities = findAllowedEntities(
+    user,
+    entities,
+    "view_entity_statistics"
+  );
 
-	if (allowedEntities.length === 0) return redirect("/")
+  if (allowedEntities.length === 0) return redirect("/");
 
-	const studentsAllowedEntities = findAllowedEntities(user, entities, 'view_students')
-	const students = await getEntitiesUsers(mapBy(studentsAllowedEntities, 'id'), { type: "student" })
+  const studentsAllowedEntities = findAllowedEntities(
+    user,
+    entities,
+    "view_students"
+	);
+	
+  const [students, assignments] = await Promise.all([
+    getEntitiesUsers(mapBy(studentsAllowedEntities, "id"), { type: "student" }),
+    getEntitiesAssignments(mapBy(entities, "id")),
+  ]);
+	
+  const [sessions, exams] = await Promise.all([
+    getSessionsByAssignments(mapBy(assignments, "id")),
+    getExamsByIds(assignments.flatMap((a) => a.exams)),
+  ]);
 
-	const assignments = await getEntitiesAssignments(mapBy(entities, "id"));
-	const sessions = await getSessionsByAssignments(mapBy(assignments, 'id'))
-	const exams = await getExamsByIds(assignments.flatMap(a => a.exams))
-
-	return { props: serialize({ user, students, entities: allowedEntities, assignments, sessions, exams }) };
+  return {
+    props: serialize({
+      user,
+      students,
+      entities: allowedEntities,
+      assignments,
+      sessions,
+      exams,
+    }),
+  };
 }, sessionOptions);
 
 interface Item {
-	student: StudentUser
-	result?: AssignmentResult
-	assignment: Assignment
-	exams: Exam[]
-	entity: Entity
-	session?: Session
+  student: StudentUser;
+  result?: AssignmentResult;
+  assignment: Assignment;
+  exams: Exam[];
+  entity: Entity;
+  session?: Session;
 }
 
 const columnHelper = createColumnHelper<Item>();
 
-export default function Statistical({ user, students, entities, assignments, sessions, exams }: Props) {
-	const [startDate, setStartDate] = useState<Date>(new Date());
-	const [endDate, setEndDate] = useState<Date | null>(moment().add(1, 'month').toDate());
-	const [selectedEntities, setSelectedEntities] = useState<string[]>([])
-	const [isDownloading, setIsDownloading] = useState(false)
+export default function Statistical({
+  user,
+  students,
+  entities,
+  assignments,
+  sessions,
+  exams,
+}: Props) {
+  const [startDate, setStartDate] = useState<Date>(new Date());
+  const [endDate, setEndDate] = useState<Date | null>(
+    moment().add(1, "month").toDate()
+  );
+  const [selectedEntities, setSelectedEntities] = useState<string[]>([]);
+  const [isDownloading, setIsDownloading] = useState(false);
 
-	const entitiesAllowDownload = useAllowedEntities(user, entities, 'download_statistics_report')
+  const entitiesAllowDownload = useAllowedEntities(
+    user,
+    entities,
+    "download_statistics_report"
+  );
 
-	const resetDateRange = () => {
-		const orderedAssignments = orderBy(assignments, ['startDate'], ['asc'])
-		setStartDate(moment(orderedAssignments.shift()?.startDate || "2024-01-01T00:00:01.986Z").toDate())
-		setEndDate(moment().add(1, 'month').toDate())
-	}
+  const resetDateRange = () => {
+    const orderedAssignments = orderBy(assignments, ["startDate"], ["asc"]);
+    setStartDate(
+      moment(
+        orderedAssignments.shift()?.startDate || "2024-01-01T00:00:01.986Z"
+      ).toDate()
+    );
+    setEndDate(moment().add(1, "month").toDate());
+  };
 
-	useEffect(resetDateRange, [assignments])
+  useEffect(resetDateRange, [assignments]);
 
-	const updateDateRange = (dates: [Date, Date | null]) => {
-		const [start, end] = dates;
-		setStartDate(start!);
-		setEndDate(end);
-	};
+  const updateDateRange = (dates: [Date, Date | null]) => {
+    const [start, end] = dates;
+    setStartDate(start!);
+    setEndDate(end);
+  };
 
-	const toggleEntity = (id: string) => setSelectedEntities(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id])
+  const toggleEntity = (id: string) =>
+    setSelectedEntities((prev) =>
+      prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
+    );
 
-	const renderAssignmentResolution = (entityID: string) => {
-		const entityAssignments = filterBy(assignments, 'entity', entityID)
-		const total = entityAssignments.reduce((acc, curr) => acc + curr.assignees.length, 0)
-		const results = entityAssignments.reduce((acc, curr) => acc + curr.results.length, 0)
+  const renderAssignmentResolution = (entityID: string) => {
+    const entityAssignments = filterBy(assignments, "entity", entityID);
+    const total = entityAssignments.reduce(
+      (acc, curr) => acc + curr.assignees.length,
+      0
+    );
+    const results = entityAssignments.reduce(
+      (acc, curr) => acc + curr.results.length,
+      0
+    );
 
-		return `${results}/${total}`
-	}
+    return `${results}/${total}`;
+  };
 
-	const totalAssignmentResolution = useMemo(() => {
-		const total = assignments.reduce((acc, curr) => acc + curr.assignees.length, 0)
-		const results = assignments.reduce((acc, curr) => acc + curr.results.length, 0)
+  const totalAssignmentResolution = useMemo(() => {
+    const total = assignments.reduce(
+      (acc, curr) => acc + curr.assignees.length,
+      0
+    );
+    const results = assignments.reduce(
+      (acc, curr) => acc + curr.results.length,
+      0
+    );
 
-		return { results, total }
-	}, [assignments])
+    return { results, total };
+  }, [assignments]);
 
-	const filteredAssignments = useMemo(() => {
-		if (!startDate && !endDate) return assignments
-		const startDateFiltered = startDate ? assignments.filter(a => moment(a.startDate).isSameOrAfter(moment(startDate))) : assignments
-		return endDate ? startDateFiltered.filter(a => moment(a.endDate).isSameOrBefore(moment(endDate))) : startDateFiltered
-	}, [startDate, endDate, assignments])
+  const filteredAssignments = useMemo(() => {
+    if (!startDate && !endDate) return assignments;
+    const startDateFiltered = startDate
+      ? assignments.filter((a) =>
+          moment(a.startDate).isSameOrAfter(moment(startDate))
+        )
+      : assignments;
+    return endDate
+      ? startDateFiltered.filter((a) =>
+          moment(a.endDate).isSameOrBefore(moment(endDate))
+        )
+      : startDateFiltered;
+  }, [startDate, endDate, assignments]);
 
-	const data: Item[] = useMemo(() =>
-		filteredAssignments.filter(a => selectedEntities.includes(a.entity || "")).flatMap(a => a.assignees.map(x => {
-			const result = findBy(a.results, 'user', x)
-			const student = findBy(students, 'id', x)
-			const entity = findBy(entities, 'id', a.entity)
-			const assignmentExams = exams.filter(e => a.exams.map(x => `${x.id}_${x.module}`).includes(`${e.id}_${e.module}`))
-			const session = sessions.find(s => s.assignment?.id === a.id && s.user === x)
+  const data: Item[] = useMemo(
+    () =>
+      filteredAssignments
+        .filter((a) => selectedEntities.includes(a.entity || ""))
+        .flatMap((a) =>
+          a.assignees.map((x) => {
+            const result = findBy(a.results, "user", x);
+            const student = findBy(students, "id", x);
+            const entity = findBy(entities, "id", a.entity);
+            const assignmentExams = exams.filter((e) =>
+              a.exams
+                .map((x) => `${x.id}_${x.module}`)
+                .includes(`${e.id}_${e.module}`)
+            );
+            const session = sessions.find(
+              (s) => s.assignment?.id === a.id && s.user === x
+            );
 
-			if (!student) return undefined
-			return { student, result, assignment: a, exams: assignmentExams, session, entity }
-		})).filter(x => !!x) as Item[],
-		[students, selectedEntities, filteredAssignments, exams, sessions, entities]
-	)
+            if (!student) return undefined;
+            return {
+              student,
+              result,
+              assignment: a,
+              exams: assignmentExams,
+              session,
+              entity,
+            };
+          })
+        )
+        .filter((x) => !!x) as Item[],
+    [students, selectedEntities, filteredAssignments, exams, sessions, entities]
+  );
 
-	const sortedData: Item[] = useMemo(() => data.sort((a, b) => {
-		const aTotalScore = a.result?.stats.filter(x => !x.isPractice).reduce((acc, curr) => acc + curr.score.correct, 0) || 0
-		const bTotalScore = b.result?.stats.filter(x => !x.isPractice).reduce((acc, curr) => acc + curr.score.correct, 0) || 0
+  const sortedData: Item[] = useMemo(
+    () =>
+      data.sort((a, b) => {
+        const aTotalScore =
+          a.result?.stats
+            .filter((x) => !x.isPractice)
+            .reduce((acc, curr) => acc + curr.score.correct, 0) || 0;
+        const bTotalScore =
+          b.result?.stats
+            .filter((x) => !x.isPractice)
+            .reduce((acc, curr) => acc + curr.score.correct, 0) || 0;
 
-		return bTotalScore - aTotalScore
-	}), [data])
+        return bTotalScore - aTotalScore;
+      }),
+    [data]
+  );
 
-	const downloadExcel = async () => {
-		setIsDownloading(true)
+  const downloadExcel = async () => {
+    setIsDownloading(true);
 
-		const request = await axios.post("/api/statistical", {
-			entities: entities.filter(e => selectedEntities.includes(e.id)),
-			items: data,
-			assignments: filteredAssignments,
-			startDate,
-			endDate
-		}, {
-			responseType: 'blob'
-		})
+    const request = await axios.post(
+      "/api/statistical",
+      {
+        entities: entities.filter((e) => selectedEntities.includes(e.id)),
+        items: data,
+        assignments: filteredAssignments,
+        startDate,
+        endDate,
+      },
+      {
+        responseType: "blob",
+      }
+    );
 
-		const href = URL.createObjectURL(request.data)
-		const link = document.createElement('a');
-		link.href = href;
-		link.setAttribute('download', `statistical_${new Date().toISOString()}.xlsx`);
-		document.body.appendChild(link);
-		link.click();
+    const href = URL.createObjectURL(request.data);
+    const link = document.createElement("a");
+    link.href = href;
+    link.setAttribute(
+      "download",
+      `statistical_${new Date().toISOString()}.xlsx`
+    );
+    document.body.appendChild(link);
+    link.click();
 
-		document.body.removeChild(link);
-		URL.revokeObjectURL(href);
+    document.body.removeChild(link);
+    URL.revokeObjectURL(href);
 
-		setIsDownloading(false)
-	}
+    setIsDownloading(false);
+  };
 
-	const columns = [
-		columnHelper.accessor("student.name", {
-			header: "Student",
-			cell: (info) => info.getValue(),
-		}),
-		columnHelper.accessor("student.studentID", {
-			header: "Student ID",
-			cell: (info) => info.getValue(),
-		}),
-		columnHelper.accessor("student.email", {
-			header: "E-mail",
-			cell: (info) => info.getValue(),
-		}),
-		columnHelper.accessor("entity.label", {
-			header: "Entity",
-			cell: (info) => info.getValue(),
-		}),
-		columnHelper.accessor("assignment.name", {
-			header: "Assignment",
-			cell: (info) => info.getValue(),
-		}),
-		columnHelper.accessor("assignment.startDate", {
-			header: "Date",
-			cell: (info) => moment(info.getValue()).format("DD/MM/YYYY"),
-		}),
-		columnHelper.accessor("result", {
-			header: "Progress",
-			cell: (info) => {
-				const student = info.row.original.student
-				const session = info.row.original.session
+  const columns = [
+    columnHelper.accessor("student.name", {
+      header: "Student",
+      cell: (info) => info.getValue(),
+    }),
+    columnHelper.accessor("student.studentID", {
+      header: "Student ID",
+      cell: (info) => info.getValue(),
+    }),
+    columnHelper.accessor("student.email", {
+      header: "E-mail",
+      cell: (info) => info.getValue(),
+    }),
+    columnHelper.accessor("entity.label", {
+      header: "Entity",
+      cell: (info) => info.getValue(),
+    }),
+    columnHelper.accessor("assignment.name", {
+      header: "Assignment",
+      cell: (info) => info.getValue(),
+    }),
+    columnHelper.accessor("assignment.startDate", {
+      header: "Date",
+      cell: (info) => moment(info.getValue()).format("DD/MM/YYYY"),
+    }),
+    columnHelper.accessor("result", {
+      header: "Progress",
+      cell: (info) => {
+        const student = info.row.original.student;
+        const session = info.row.original.session;
 
-				if (!student.lastLogin) return <span className="text-mti-red-dark">Never logged in</span>
-				if (info.getValue()) return <span className="text-mti-green font-semibold">Submitted</span>
-				if (!session) return <span className="text-mti-rose">Not started</span>
+        if (!student.lastLogin)
+          return <span className="text-mti-red-dark">Never logged in</span>;
+        if (info.getValue())
+          return (
+            <span className="text-mti-green font-semibold">Submitted</span>
+          );
+        if (!session) return <span className="text-mti-rose">Not started</span>;
 
-				return <span className="font-semibold">
-					{capitalize(session.exam?.module || "")} Module, Part {session.partIndex + 1}, Exercise {session.exerciseIndex + 1}
-				</span>
-			},
-		})
-	]
+        return (
+          <span className="font-semibold">
+            {capitalize(session.exam?.module || "")} Module, Part{" "}
+            {session.partIndex + 1}, Exercise {session.exerciseIndex + 1}
+          </span>
+        );
+      },
+    }),
+  ];
 
-	return (
-		<>
-			<Head>
-				<title>Statistical | 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>
+  return (
+    <>
+      <Head>
+        <title>Statistical | 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>
 
-			<>
-				<div className="flex flex-col gap-4">
-					<div className="flex items-center justify-between w-full">
-						<div className="flex items-center gap-2">
-							<Link href="/dashboard" className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
-								<BsChevronLeft />
-							</Link>
-							<h2 className="font-bold text-2xl">Statistical</h2>
-						</div>
-						<Checkbox
-							onChange={value => setSelectedEntities(value ? mapBy(entities, 'id') : [])}
-							isChecked={selectedEntities.length === entities.length}
-						>
-							Select All
-						</Checkbox>
-					</div>
-					<Separator />
-				</div>
+      <>
+        <div className="flex flex-col gap-4">
+          <div className="flex items-center justify-between w-full">
+            <div className="flex items-center gap-2">
+              <Link
+                href="/dashboard"
+                className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl"
+              >
+                <BsChevronLeft />
+              </Link>
+              <h2 className="font-bold text-2xl">Statistical</h2>
+            </div>
+            <Checkbox
+              onChange={(value) =>
+                setSelectedEntities(value ? mapBy(entities, "id") : [])
+              }
+              isChecked={selectedEntities.length === entities.length}
+            >
+              Select All
+            </Checkbox>
+          </div>
+          <Separator />
+        </div>
 
-				<section className="flex flex-col gap-3">
-					<div className="w-full flex items-center justify-between gap-4 flex-wrap">
-						{entities.map(entity => (
-							<button
-								onClick={() => toggleEntity(entity.id)}
-								className={clsx(
-									"flex flex-col items-center justify-between gap-3 border-2 drop-shadow rounded-xl bg-white p-8 px-2 w-48 h-52",
-									"transition ease-in-out duration-300 hover:shadow-xl hover:border-mti-purple",
-									selectedEntities.includes(entity.id) && "border-mti-purple text-mti-purple"
-								)}
-								key={entity.id}
-							>
-								<BsBank size={48} />
-								<div className="flex flex-col gap-1">
-									<span>{entity.label}</span>
-									<span className={clsx("font-semibold")}>
-										{renderAssignmentResolution(entity.id)}
-									</span>
-								</div>
-							</button>
-						))}
-					</div>
+        <section className="flex flex-col gap-3">
+          <div className="w-full flex items-center justify-between gap-4 flex-wrap">
+            {entities.map((entity) => (
+              <button
+                onClick={() => toggleEntity(entity.id)}
+                className={clsx(
+                  "flex flex-col items-center justify-between gap-3 border-2 drop-shadow rounded-xl bg-white p-8 px-2 w-48 h-52",
+                  "transition ease-in-out duration-300 hover:shadow-xl hover:border-mti-purple",
+                  selectedEntities.includes(entity.id) &&
+                    "border-mti-purple text-mti-purple"
+                )}
+                key={entity.id}
+              >
+                <BsBank size={48} />
+                <div className="flex flex-col gap-1">
+                  <span>{entity.label}</span>
+                  <span className={clsx("font-semibold")}>
+                    {renderAssignmentResolution(entity.id)}
+                  </span>
+                </div>
+              </button>
+            ))}
+          </div>
 
-					<div className="flex items-center justify-between">
-						<div className="flex items-center gap-2">
-							<ReactDatePicker
-								className={clsx(
-									"p-6 px-12 w-full flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-									"hover:border-mti-purple tooltip",
-									"transition duration-300 ease-in-out",
-								)}
-								dateFormat="dd/MM/yyyy"
-								selectsRange
-								selected={startDate}
-								onChange={updateDateRange}
-								startDate={startDate}
-								endDate={endDate}
-							/>
-							{startDate !== null && endDate !== null && (
-								<button onClick={resetDateRange} className="transition ease-in-out duration-300 rounded-full p-2 hover:bg-mti-gray-cool/10">
-									<BsX size={24} />
-								</button>
-							)}
-						</div>
-						<span className="font-semibold text-lg pr-1">
-							Total: {totalAssignmentResolution.results} / {totalAssignmentResolution.total}
-						</span>
-					</div>
-				</section>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <ReactDatePicker
+                className={clsx(
+                  "p-6 px-12 w-full flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+                  "hover:border-mti-purple tooltip",
+                  "transition duration-300 ease-in-out"
+                )}
+                dateFormat="dd/MM/yyyy"
+                selectsRange
+                selected={startDate}
+                onChange={updateDateRange}
+                startDate={startDate}
+                endDate={endDate}
+              />
+              {startDate !== null && endDate !== null && (
+                <button
+                  onClick={resetDateRange}
+                  className="transition ease-in-out duration-300 rounded-full p-2 hover:bg-mti-gray-cool/10"
+                >
+                  <BsX size={24} />
+                </button>
+              )}
+            </div>
+            <span className="font-semibold text-lg pr-1">
+              Total: {totalAssignmentResolution.results} /{" "}
+              {totalAssignmentResolution.total}
+            </span>
+          </div>
+        </section>
 
-				{selectedEntities.length > 0 && (
-					<Table
-						columns={columns}
-						data={sortedData}
-						searchFields={[["student", "name"], ["student", "email"], ["student", "studentID"], ["exams", "id"], ["assignment", "name"]]}
-						searchPlaceholder="Search by student, assignment or exam..."
-						onDownload={entitiesAllowDownload.length > 0 ? downloadExcel : undefined}
-						isDownloadLoading={isDownloading}
-					/>
-				)}
-			</>
-		</>
-	)
+        {selectedEntities.length > 0 && (
+          <Table
+            columns={columns}
+            data={sortedData}
+            searchFields={[
+              ["student", "name"],
+              ["student", "email"],
+              ["student", "studentID"],
+              ["exams", "id"],
+              ["assignment", "name"],
+            ]}
+            searchPlaceholder="Search by student, assignment or exam..."
+            onDownload={
+              entitiesAllowDownload.length > 0 ? downloadExcel : undefined
+            }
+            isDownloadLoading={isDownloading}
+          />
+        )}
+      </>
+    </>
+  );
 }
diff --git a/src/pages/stats.tsx b/src/pages/stats.tsx
index d3d61660..5e945626 100644
--- a/src/pages/stats.tsx
+++ b/src/pages/stats.tsx
@@ -32,10 +32,7 @@ import { capitalize } from "lodash";
 import { Module } from "@/interfaces";
 import ProgressBar from "@/components/Low/ProgressBar";
 import { calculateBandScore } from "@/utils/score";
-import {
-  MODULE_ARRAY,
-  sortByModule,
-} from "@/utils/moduleUtils";
+import { MODULE_ARRAY, sortByModule } from "@/utils/moduleUtils";
 import { Chart } from "react-chartjs-2";
 import DatePicker from "react-datepicker";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
@@ -45,7 +42,6 @@ import { Stat, User } from "@/interfaces/user";
 import { Divider } from "primereact/divider";
 import Badge from "@/components/Low/Badge";
 import { mapBy, redirect, serialize } from "@/utils";
-import { getEntities } from "@/utils/entities.be";
 import { checkAccess } from "@/utils/permissions";
 import { EntityWithRoles } from "@/interfaces/entity";
 import Select from "@/components/Low/Select";
@@ -69,19 +65,10 @@ const COLORS = ["#1EB3FF", "#FF790A", "#3D9F11", "#EF5DA8", "#414288"];
 export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
   const user = await requestUser(req, res);
   if (!user) return redirect("/login");
-
   if (shouldRedirectHome(user)) return redirect("/");
-
-  const entityIDs = mapBy(user.entities, "id");
   const isAdmin = checkAccess(user, ["admin", "developer"]);
-
-  const entities = await getEntities(isAdmin ? undefined : entityIDs, {
-    id: 1,
-    label: 1,
-  });
-
   return {
-    props: serialize({ user, entities, isAdmin }),
+    props: serialize({ user, isAdmin }),
   };
 }, sessionOptions);
 
diff --git a/src/pages/training/index.tsx b/src/pages/training/index.tsx
index 0cab1ff3..33143839 100644
--- a/src/pages/training/index.tsx
+++ b/src/pages/training/index.tsx
@@ -1,225 +1,269 @@
 /* eslint-disable @next/next/no-img-element */
 import Head from "next/head";
-import {withIronSessionSsr} from "iron-session/next";
-import {sessionOptions} from "@/lib/session";
-import {User} from "@/interfaces/user";
-import {ToastContainer} from "react-toastify";
-import {shouldRedirectHome} from "@/utils/navigation.disabled";
-import {useEffect, useState} from "react";
+import { withIronSessionSsr } from "iron-session/next";
+import { sessionOptions } from "@/lib/session";
+import { User } from "@/interfaces/user";
+import { ToastContainer } from "react-toastify";
+import { shouldRedirectHome } from "@/utils/navigation.disabled";
+import { useEffect, useState } from "react";
 import clsx from "clsx";
-import {FaPlus} from "react-icons/fa";
+import { FaPlus } from "react-icons/fa";
 import useRecordStore from "@/stores/recordStore";
 import router from "next/router";
 import useTrainingContentStore from "@/stores/trainingContentStore";
 import axios from "axios";
-import {ITrainingContent} from "@/training/TrainingInterfaces";
+import { ITrainingContent } from "@/training/TrainingInterfaces";
 import moment from "moment";
-import {uuidv4} from "@firebase/util";
+import { uuidv4 } from "@firebase/util";
 import TrainingScore from "@/training/TrainingScore";
 import ModuleBadge from "@/components/ModuleBadge";
 import RecordFilter from "@/components/Medium/RecordFilter";
 import useFilterRecordsByUser from "@/hooks/useFilterRecordsByUser";
 import { mapBy, redirect, serialize } from "@/utils";
-import { getEntitiesWithRoles } from "@/utils/entities.be";
 import { getEntitiesUsers } from "@/utils/users.be";
 import { EntityWithRoles } from "@/interfaces/entity";
 import { requestUser } from "@/utils/api";
+import { checkAccess } from "../../utils/permissions";
 
-export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
-	const user = await requestUser(req, res)
-	if (!user) return redirect("/login")
+export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
+  const user = await requestUser(req, res);
+  if (!user) return redirect("/login");
 
-	if (shouldRedirectHome(user)) return redirect("/")
+  if (shouldRedirectHome(user)) return redirect("/");
+  const isAdmin = checkAccess(user, ["admin", "developer"]);
+  const entityIDs = mapBy(user.entities, "id");
+  const users = await getEntitiesUsers(entityIDs);
 
-	const entityIDs = mapBy(user.entities, 'id')
-	const entities = await getEntitiesWithRoles(entityIDs)
-	const users = await getEntitiesUsers(entityIDs)
-
-	return {
-		props: serialize({user, users, entities}),
-	};
+  return {
+    props: serialize({ user, users, isAdmin }),
+  };
 }, sessionOptions);
 
-const Training: React.FC<{user: User, entities: EntityWithRoles[], users: User[] }> = ({user, entities, users}) => {
-	const [recordUserId, setRecordTraining] = useRecordStore((state) => [state.selectedUser, state.setTraining]);
-	const [filter, setFilter] = useState<"months" | "weeks" | "days" | "assignments">();
+const Training: React.FC<{
+  user: User;
+  entities: EntityWithRoles[];
+  users: User[];
+  isAdmin: boolean;
+}> = ({ user, entities, isAdmin }) => {
+  const [recordUserId, setRecordTraining] = useRecordStore((state) => [
+    state.selectedUser,
+    state.setTraining,
+  ]);
+  const [filter, setFilter] = useState<
+    "months" | "weeks" | "days" | "assignments"
+  >();
 
-	const [stats, setTrainingStats] = useTrainingContentStore((state) => [state.stats, state.setStats]);
-	const [isNewContentLoading, setIsNewContentLoading] = useState(stats.length != 0);
-	const [groupedByTrainingContent, setGroupedByTrainingContent] = useState<{[key: string]: ITrainingContent}>();
+  const [stats, setTrainingStats] = useTrainingContentStore((state) => [
+    state.stats,
+    state.setStats,
+  ]);
+  const [isNewContentLoading, setIsNewContentLoading] = useState(
+    stats.length != 0
+  );
+  const [groupedByTrainingContent, setGroupedByTrainingContent] = useState<{
+    [key: string]: ITrainingContent;
+  }>();
 
-	const {data: trainingContent, isLoading: areRecordsLoading} = useFilterRecordsByUser<ITrainingContent[]>(
-		recordUserId || user?.id,
-		undefined,
-		"training",
-	);
+  const { data: trainingContent, isLoading: areRecordsLoading } =
+    useFilterRecordsByUser<ITrainingContent[]>(
+      recordUserId || user?.id,
+      undefined,
+      "training"
+    );
 
-	useEffect(() => {
-		const handleRouteChange = (url: string) => {
-			setTrainingStats([]);
-		};
-		router.events.on("routeChangeStart", handleRouteChange);
-		return () => {
-			router.events.off("routeChangeStart", handleRouteChange);
-		};
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [router.events, setTrainingStats]);
+  useEffect(() => {
+    const handleRouteChange = (url: string) => {
+      setTrainingStats([]);
+    };
+    router.events.on("routeChangeStart", handleRouteChange);
+    return () => {
+      router.events.off("routeChangeStart", handleRouteChange);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [router.events, setTrainingStats]);
 
-	useEffect(() => {
-		const postStats = async () => {
-			try {
-				const response = await axios.post<{id: string}>(`/api/training`, {userID: user.id, stats: stats});
-				return response.data.id;
-			} catch (error) {
-				setIsNewContentLoading(false);
-			}
-		};
+  useEffect(() => {
+    const postStats = async () => {
+      try {
+        const response = await axios.post<{ id: string }>(`/api/training`, {
+          userID: user.id,
+          stats: stats,
+        });
+        return response.data.id;
+      } catch (error) {
+        setIsNewContentLoading(false);
+      }
+    };
 
-		if (isNewContentLoading) {
-			postStats().then((id) => {
-				setTrainingStats([]);
-				if (id) {
-					router.push(`/training/${id}`);
-				}
-			});
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [isNewContentLoading]);
+    if (isNewContentLoading) {
+      postStats().then((id) => {
+        setTrainingStats([]);
+        if (id) {
+          router.push(`/training/${id}`);
+        }
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isNewContentLoading]);
 
-	const handleNewTrainingContent = () => {
-		setRecordTraining(true);
-		router.push("/record");
-	};
+  const handleNewTrainingContent = () => {
+    setRecordTraining(true);
+    router.push("/record");
+  };
 
-	const filterTrainingContentByDate = (trainingContent: {[key: string]: ITrainingContent}) => {
-		if (filter) {
-			const filterDate = moment()
-				.subtract({[filter as string]: 1})
-				.format("x");
-			const filteredTrainingContent: {[key: string]: ITrainingContent} = {};
+  const filterTrainingContentByDate = (trainingContent: {
+    [key: string]: ITrainingContent;
+  }) => {
+    if (filter) {
+      const filterDate = moment()
+        .subtract({ [filter as string]: 1 })
+        .format("x");
+      const filteredTrainingContent: { [key: string]: ITrainingContent } = {};
 
-			Object.keys(trainingContent).forEach((timestamp) => {
-				if (timestamp >= filterDate) filteredTrainingContent[timestamp] = trainingContent[timestamp];
-			});
-			return filteredTrainingContent;
-		}
-		return trainingContent;
-	};
+      Object.keys(trainingContent).forEach((timestamp) => {
+        if (timestamp >= filterDate)
+          filteredTrainingContent[timestamp] = trainingContent[timestamp];
+      });
+      return filteredTrainingContent;
+    }
+    return trainingContent;
+  };
 
-	useEffect(() => {
-		if (trainingContent.length > 0) {
-			const grouped = trainingContent.reduce((acc, content) => {
-				acc[content.created_at] = content;
-				return acc;
-			}, {} as {[key: number]: ITrainingContent});
+  useEffect(() => {
+    if (trainingContent.length > 0) {
+      const grouped = trainingContent.reduce((acc, content) => {
+        acc[content.created_at] = content;
+        return acc;
+      }, {} as { [key: number]: ITrainingContent });
 
-			setGroupedByTrainingContent(grouped);
-		} else {
-			setGroupedByTrainingContent(undefined);
-		}
-	}, [trainingContent]);
+      setGroupedByTrainingContent(grouped);
+    } else {
+      setGroupedByTrainingContent(undefined);
+    }
+  }, [trainingContent]);
 
-	const formatTimestamp = (timestamp: string) => {
-		const date = moment(parseInt(timestamp));
-		const formatter = "YYYY/MM/DD - HH:mm";
+  const formatTimestamp = (timestamp: string) => {
+    const date = moment(parseInt(timestamp));
+    const formatter = "YYYY/MM/DD - HH:mm";
 
-		return date.format(formatter);
-	};
+    return date.format(formatter);
+  };
 
-	const selectTrainingContent = (trainingContent: ITrainingContent) => {
-		router.push(`/training/${trainingContent.id}`);
-	};
+  const selectTrainingContent = (trainingContent: ITrainingContent) => {
+    router.push(`/training/${trainingContent.id}`);
+  };
 
-	const trainingContentContainer = (timestamp: string) => {
-		if (!groupedByTrainingContent) return <></>;
+  const trainingContentContainer = (timestamp: string) => {
+    if (!groupedByTrainingContent) return <></>;
 
-		const trainingContent: ITrainingContent = groupedByTrainingContent[timestamp];
-		const uniqueModules = [...new Set(trainingContent.exams.map((exam) => exam.module))];
+    const trainingContent: ITrainingContent =
+      groupedByTrainingContent[timestamp];
+    const uniqueModules = [
+      ...new Set(trainingContent.exams.map((exam) => exam.module)),
+    ];
 
-		return (
-			<>
-				<div
-					key={uuidv4()}
-					className={clsx(
-						"flex flex-col justify-between gap-4 border border-mti-gray-platinum p-4 cursor-pointer rounded-xl transition ease-in-out duration-300 -md:hidden",
-					)}
-					onClick={() => selectTrainingContent(trainingContent)}
-					role="button">
-					<div className="w-full flex justify-between -md:items-center 2xl:items-center">
-						<div className="flex flex-col md:gap-1 -md:gap-2 2xl:gap-2">
-							<span className="font-medium">{formatTimestamp(timestamp)}</span>
-						</div>
-						<div className="flex flex-col gap-2">
-							<div className="w-full flex flex-row gap-1">
-								{uniqueModules.map((module) => (
-									<ModuleBadge key={module} module={module} />
-								))}
-							</div>
-						</div>
-					</div>
-					<TrainingScore trainingContent={trainingContent} gridView={true} />
-				</div>
-			</>
-		);
-	};
+    return (
+      <>
+        <div
+          key={uuidv4()}
+          className={clsx(
+            "flex flex-col justify-between gap-4 border border-mti-gray-platinum p-4 cursor-pointer rounded-xl transition ease-in-out duration-300 -md:hidden"
+          )}
+          onClick={() => selectTrainingContent(trainingContent)}
+          role="button"
+        >
+          <div className="w-full flex justify-between -md:items-center 2xl:items-center">
+            <div className="flex flex-col md:gap-1 -md:gap-2 2xl:gap-2">
+              <span className="font-medium">{formatTimestamp(timestamp)}</span>
+            </div>
+            <div className="flex flex-col gap-2">
+              <div className="w-full flex flex-row gap-1">
+                {uniqueModules.map((module) => (
+                  <ModuleBadge key={module} module={module} />
+                ))}
+              </div>
+            </div>
+          </div>
+          <TrainingScore trainingContent={trainingContent} gridView={true} />
+        </div>
+      </>
+    );
+  };
 
-	return (
-		<>
-			<Head>
-				<title>Training | 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 />
+  return (
+    <>
+      <Head>
+        <title>Training | 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 />
 
-			<>
-				{isNewContentLoading || areRecordsLoading ? (
-					<div className="absolute left-1/2 top-1/2 flex h-fit w-fit -translate-x-1/2 -translate-y-1/2 animate-pulse flex-col items-center gap-12">
-						<span className="loading loading-infinity w-32 bg-mti-green-light" />
-						{isNewContentLoading && (
-							<span className="text-center text-2xl font-bold text-mti-green-light">Assessing your exams, please be patient...</span>
-						)}
-					</div>
-				) : (
-					<>
-						<RecordFilter  entities={entities} user={user} filterState={{filter: filter, setFilter: setFilter}} assignments={false}>
-							{user.type === "student" && (
-								<>
-									<div className="flex items-center">
-										<div className="font-semibold text-2xl">Generate New Training Material</div>
-										<button
-											className={clsx(
-												"bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light ml-4",
-												"transition duration-300 ease-in-out",
-											)}
-											onClick={handleNewTrainingContent}>
-											<FaPlus />
-										</button>
-									</div>
-								</>
-							)}
-						</RecordFilter>
-						{trainingContent.length == 0 && (
-							<div className="flex flex-grow justify-center items-center">
-								<span className="font-semibold ml-1">No training content to display...</span>
-							</div>
-						)}
-						{!areRecordsLoading && groupedByTrainingContent && Object.keys(groupedByTrainingContent).length > 0 && (
-							<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-3 w-full gap-4 xl:gap-6">
-								{Object.keys(filterTrainingContentByDate(groupedByTrainingContent))
-									.sort((a, b) => parseInt(b) - parseInt(a))
-									.map(trainingContentContainer)}
-							</div>
-						)}
-					</>
-				)}
-			</>
-		</>
-	);
+      <>
+        {isNewContentLoading || areRecordsLoading ? (
+          <div className="absolute left-1/2 top-1/2 flex h-fit w-fit -translate-x-1/2 -translate-y-1/2 animate-pulse flex-col items-center gap-12">
+            <span className="loading loading-infinity w-32 bg-mti-green-light" />
+            {isNewContentLoading && (
+              <span className="text-center text-2xl font-bold text-mti-green-light">
+                Assessing your exams, please be patient...
+              </span>
+            )}
+          </div>
+        ) : (
+          <>
+            <RecordFilter
+              entities={entities}
+              user={user}
+              isAdmin={isAdmin}
+              filterState={{ filter: filter, setFilter: setFilter }}
+              assignments={false}
+            >
+              {user.type === "student" && (
+                <>
+                  <div className="flex items-center">
+                    <div className="font-semibold text-2xl">
+                      Generate New Training Material
+                    </div>
+                    <button
+                      className={clsx(
+                        "bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light ml-4",
+                        "transition duration-300 ease-in-out"
+                      )}
+                      onClick={handleNewTrainingContent}
+                    >
+                      <FaPlus />
+                    </button>
+                  </div>
+                </>
+              )}
+            </RecordFilter>
+            {trainingContent.length == 0 && (
+              <div className="flex flex-grow justify-center items-center">
+                <span className="font-semibold ml-1">
+                  No training content to display...
+                </span>
+              </div>
+            )}
+            {!areRecordsLoading &&
+              groupedByTrainingContent &&
+              Object.keys(groupedByTrainingContent).length > 0 && (
+                <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-3 w-full gap-4 xl:gap-6">
+                  {Object.keys(
+                    filterTrainingContentByDate(groupedByTrainingContent)
+                  )
+                    .sort((a, b) => parseInt(b) - parseInt(a))
+                    .map(trainingContentContainer)}
+                </div>
+              )}
+          </>
+        )}
+      </>
+    </>
+  );
 };
 
 export default Training;
diff --git a/src/pages/users/performance.tsx b/src/pages/users/performance.tsx
index d2816f96..3d99bcd8 100644
--- a/src/pages/users/performance.tsx
+++ b/src/pages/users/performance.tsx
@@ -1,15 +1,15 @@
 import useFilterRecordsByUser from "@/hooks/useFilterRecordsByUser";
 import { Group, Stat, StudentUser, User } from "@/interfaces/user";
 import { useRouter } from "next/router";
-import {  BsChevronLeft } from "react-icons/bs";
+import { 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, findAllowedEntities } from "@/utils/permissions";
-import {  getEntitiesWithRoles } from "@/utils/entities.be";
+import { getEntitiesWithRoles } from "@/utils/entities.be";
 import { Entity } from "@/interfaces/entity";
-import {  getParticipantsGroups } from "@/utils/groups.be";
+import { getParticipantsGroups } from "@/utils/groups.be";
 import StudentPerformanceList from "../(admin)/Lists/StudentPerformanceList";
 import Head from "next/head";
 import { ToastContainer } from "react-toastify";
@@ -17,73 +17,84 @@ import { requestUser } from "@/utils/api";
 import { redirect } from "@/utils";
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
-	const user = await requestUser(req, res)
-	if (!user) return redirect("/login")
+  const user = await requestUser(req, res);
+  if (!user) return redirect("/login");
 
-	const entityIDs = mapBy(user.entities, 'id')
+  const entityIDs = mapBy(user.entities, "id");
 
-	const entities = await getEntitiesWithRoles(checkAccess(user, ["admin", 'developer']) ? undefined : entityIDs)
-	const allowedEntities = findAllowedEntities(user, entities, "view_student_performance")
+  const entities = await getEntitiesWithRoles(
+    checkAccess(user, ["admin", "developer"]) ? undefined : entityIDs
+  );
+  const allowedEntities = findAllowedEntities(
+    user,
+    entities,
+    "view_student_performance"
+  );
 
-	if (allowedEntities.length === 0) return redirect("/")
+  if (allowedEntities.length === 0) return redirect("/");
 
-	const students = await (checkAccess(user, ["admin", 'developer'])
-		? getUsers({ type: 'student' })
-		: getEntitiesUsers(mapBy(allowedEntities, 'id'), { type: 'student' })
-	)
-	const groups = await getParticipantsGroups(mapBy(students, 'id'))
+  const students = await (checkAccess(user, ["admin", "developer"])
+    ? getUsers({ type: "student" })
+    : getEntitiesUsers(mapBy(allowedEntities, "id"), { type: "student" }));
+  const groups = await getParticipantsGroups(mapBy(students, "id"));
 
-	return {
-		props: serialize({ user, students, entities, groups }),
-	};
+  return {
+    props: serialize({ user, students, entities, groups }),
+  };
 }, sessionOptions);
 
 interface Props {
-	user: User;
-	students: StudentUser[]
-	entities: Entity[]
-	groups: Group[]
+  user: User;
+  students: StudentUser[];
+  entities: Entity[];
+  groups: Group[];
 }
 
 const StudentPerformance = ({ user, students, entities, groups }: Props) => {
-	const { data: stats } = useFilterRecordsByUser<Stat[]>();
+  const { data: stats } = useFilterRecordsByUser<Stat[]>();
 
-	const router = useRouter();
+  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(', '),
-	}));
+  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 />
+  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 />
 
-			<>
-				<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} />
-			</>
-		</>
-	);
+      <>
+        <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} />
+      </>
+    </>
+  );
 };
 
 export default StudentPerformance;
diff --git a/src/utils/assignments.be.ts b/src/utils/assignments.be.ts
index a61f3bb9..5a502527 100644
--- a/src/utils/assignments.be.ts
+++ b/src/utils/assignments.be.ts
@@ -19,8 +19,8 @@ export const getAssignmentsByAssigner = async (id: string, startDate?: Date, end
 	return await db.collection("assignments").find<Assignment>(query).toArray();
 };
 
-export const getAssignments = async () => {
-	return await db.collection("assignments").find<Assignment>({}).toArray();
+export const getAssignments = async (projection = {}) => {
+	return await db.collection("assignments").find<Assignment>({}, { projection }).toArray();
 };
 
 export const getAssignment = async (id: string) => {
diff --git a/src/utils/entities.be.ts b/src/utils/entities.be.ts
index 8612c09c..a75c4d13 100644
--- a/src/utils/entities.be.ts
+++ b/src/utils/entities.be.ts
@@ -9,7 +9,6 @@ const db = client.db(process.env.MONGODB_DB);
 export const getEntityWithRoles = async (id: string): Promise<EntityWithRoles | undefined> => {
 	const entity = await getEntity(id);
 	if (!entity) return undefined;
-
 	const roles = await getRolesByEntity(id);
 	return { ...entity, roles };
 };
diff --git a/src/utils/exams.be.ts b/src/utils/exams.be.ts
index 94edd0a2..09e420d3 100644
--- a/src/utils/exams.be.ts
+++ b/src/utils/exams.be.ts
@@ -1,11 +1,8 @@
-import { collection, getDocs, query, where, setDoc, doc, Firestore, getDoc, and } from "firebase/firestore";
 import { groupBy, shuffle } from "lodash";
-import { CEFRLevels, Difficulty, Exam, InstructorGender, SpeakingExam, Variant, WritingExam } from "@/interfaces/exam";
+import { CEFRLevels, Exam, InstructorGender, SpeakingExam, Variant, WritingExam } from "@/interfaces/exam";
 import { DeveloperUser, Stat, StudentUser, User } from "@/interfaces/user";
 import { Module } from "@/interfaces";
-import { getCorporateUser } from "@/resources/user";
-import { getUserCorporate } from "./groups.be";
-import { Db, ObjectId } from "mongodb";
+import { Db } from "mongodb";
 import client from "@/lib/mongodb";
 import { MODULE_ARRAY } from "./moduleUtils";
 import { mapBy } from ".";
diff --git a/src/utils/sessions.be.ts b/src/utils/sessions.be.ts
index 2d84dd74..bd906678 100644
--- a/src/utils/sessions.be.ts
+++ b/src/utils/sessions.be.ts
@@ -3,10 +3,10 @@ import client from "@/lib/mongodb";
 
 const db = client.db(process.env.MONGODB_DB);
 
-export const getSessionsByUser = async (id: string, limit = 0, filter = {}) =>
+export const getSessionsByUser = async (id: string, limit = 0, filter = {}, projection = {}) =>
 	await db
 		.collection("sessions")
-		.find<Session>({ user: id, ...filter })
+		.find<Session>({ user: id, ...filter }, { projection })
 		.limit(limit || 0)
 		.toArray();
 
diff --git a/src/utils/users.be.ts b/src/utils/users.be.ts
index 519d1edb..2fbf9404 100644
--- a/src/utils/users.be.ts
+++ b/src/utils/users.be.ts
@@ -129,19 +129,19 @@ export async function getUser(id: string, projection = {}): Promise<User | undef
 	return !!user ? user : undefined;
 }
 
-export async function getSpecificUsers(ids: string[]) {
+export async function getSpecificUsers(ids: string[], projection = {}) {
 	if (ids.length === 0) return [];
 
 	return await db
 		.collection("users")
-		.find<User>({ id: { $in: ids } }, { projection: { _id: 0 } })
+		.find<User>({ id: { $in: ids } }, { projection: { _id: 0, ...projection } })
 		.toArray();
 }
 
-export async function getEntityUsers(id: string, limit?: number, filter?: object) {
+export async function getEntityUsers(id: string, limit?: number, filter?: object, projection = {}) {
 	return await db
 		.collection("users")
-		.find<User>({ "entities.id": id, ...(filter || {}) })
+		.find<User>({ "entities.id": id, ...(filter || {}) }, { projection: { _id: 0, ...projection } })
 		.limit(limit || 0)
 		.toArray();
 }
@@ -231,8 +231,8 @@ export async function getUserBalance(user: User) {
 	);
 }
 
-export const filterAllowedUsers = async (user: User, entities: EntityWithRoles[]) => {
-	
+export const filterAllowedUsers = async (user: User, entities: EntityWithRoles[], projection = {}) => {
+
 	const {
 		["view_students"]: allowedStudentEntities,
 		["view_teachers"]: allowedTeacherEntities,
@@ -244,12 +244,12 @@ export const filterAllowedUsers = async (user: User, entities: EntityWithRoles[]
 		'view_corporates',
 		'view_mastercorporates',
 	]);
-
-
-	const students = await getEntitiesUsers(mapBy(allowedStudentEntities, 'id'), { type: "student" })
-	const teachers = await getEntitiesUsers(mapBy(allowedTeacherEntities, 'id'), { type: "teacher" })
-	const corporates = await getEntitiesUsers(mapBy(allowedCorporateEntities, 'id'), { type: "corporate" })
-	const masterCorporates = await getEntitiesUsers(mapBy(allowedMasterCorporateEntities, 'id'), { type: "mastercorporate" })
+	const [students, teachers, corporates, masterCorporates] = await Promise.all([
+		getEntitiesUsers(mapBy(allowedStudentEntities, 'id'), { type: "student" }, 0, projection),
+		getEntitiesUsers(mapBy(allowedTeacherEntities, 'id'), { type: "teacher" }, 0, projection),
+		getEntitiesUsers(mapBy(allowedCorporateEntities, 'id'), { type: "corporate" }, 0, projection),
+		getEntitiesUsers(mapBy(allowedMasterCorporateEntities, 'id'), { type: "mastercorporate" }, 0, projection),
+	])
 
 	return [...students, ...teachers, ...corporates, ...masterCorporates]
 }
@@ -266,11 +266,12 @@ export const countAllowedUsers = async (user: User, entities: EntityWithRoles[])
 		'view_corporates',
 		'view_mastercorporates',
 	]);
-
-	const student = await countEntitiesUsers(mapBy(allowedStudentEntities, 'id'), { type: "student" })
-	const teacher = await countEntitiesUsers(mapBy(allowedTeacherEntities, 'id'), { type: "teacher" })
-	const corporate = await countEntitiesUsers(mapBy(allowedCorporateEntities, 'id'), { type: "corporate" })
-	const mastercorporate = await countEntitiesUsers(mapBy(allowedMasterCorporateEntities, 'id'), { type: "mastercorporate" })
+	const [student, teacher, corporate, mastercorporate] = await Promise.all([
+		countEntitiesUsers(mapBy(allowedStudentEntities, 'id'), { type: "student" }),
+		countEntitiesUsers(mapBy(allowedTeacherEntities, 'id'), { type: "teacher" }),
+		countEntitiesUsers(mapBy(allowedCorporateEntities, 'id'), { type: "corporate" }),
+		countEntitiesUsers(mapBy(allowedMasterCorporateEntities, 'id'), { type: "mastercorporate" }),
+	])
 
 	return { student, teacher, corporate, mastercorporate }
 }

From 9de4cba8e8396019d7a41fdf80f3db4afdb92952 Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Fri, 31 Jan 2025 10:37:14 +0000
Subject: [PATCH 41/69] refactor fetched users into single array and replace
 Image tag with img

---
 .../ApprovalWorkflows/RequestedBy.tsx         |  4 +-
 .../ApprovalWorkflows/UserWithProfilePic.tsx  |  4 +-
 .../WorkflowEditableStepComponent.tsx         | 53 ++++++-------------
 .../ApprovalWorkflows/WorkflowForm.tsx        | 12 ++---
 .../ApprovalWorkflows/WorkflowStepSelects.tsx |  8 ++-
 src/pages/approval-workflows/[id]/clone.tsx   | 33 ++++--------
 src/pages/approval-workflows/[id]/edit.tsx    | 13 ++---
 src/pages/approval-workflows/[id]/index.tsx   | 38 ++++++++++---
 src/pages/approval-workflows/create.tsx       | 34 +++++-------
 9 files changed, 88 insertions(+), 111 deletions(-)

diff --git a/src/components/ApprovalWorkflows/RequestedBy.tsx b/src/components/ApprovalWorkflows/RequestedBy.tsx
index 536c0e63..036cc968 100644
--- a/src/components/ApprovalWorkflows/RequestedBy.tsx
+++ b/src/components/ApprovalWorkflows/RequestedBy.tsx
@@ -18,12 +18,12 @@ export default function RequestedBy({ prefix, name, profileImage }: Props) {
                 <p className="text-sm font-medium text-gray-800">Requested by</p>
                 <div className="flex items-center space-x-2">
                     <p className="text-xs font-medium text-gray-800">{prefix} {name}</p>
-                    <Image
+                    <img
                         src={profileImage ? profileImage : "/defaultAvatar.png"}
                         alt={name}
                         width={24}
                         height={24}
-                        className="w-6 h-6 rounded-full"
+                        className="w-6 h-6 rounded-full border-[1px] border-gray-400 border-opacity-50"
                     />
                 </div>
             </div>
diff --git a/src/components/ApprovalWorkflows/UserWithProfilePic.tsx b/src/components/ApprovalWorkflows/UserWithProfilePic.tsx
index 9659da3c..c7c1a207 100644
--- a/src/components/ApprovalWorkflows/UserWithProfilePic.tsx
+++ b/src/components/ApprovalWorkflows/UserWithProfilePic.tsx
@@ -12,12 +12,12 @@ export default function UserWithProfilePic({ prefix, name, profileImage, textSiz
     return (
         <div className="flex items-center space-x-2">
             <p className={textClassName}>{prefix} {name}</p>
-            <Image
+            <img
                 src={profileImage ? profileImage : "/defaultAvatar.png"}
                 alt={name}
                 width={24}
                 height={24}
-                className="rounded-full h-auto"
+                className="rounded-full h-auto border-[1px] border-gray-400 border-opacity-50"
             />
         </div>
     );
diff --git a/src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx b/src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx
index 263202a9..85fab5de 100644
--- a/src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx
@@ -1,6 +1,6 @@
 import { EditableWorkflowStep } from "@/interfaces/approval.workflow";
 import Option from "@/interfaces/option";
-import { CorporateUser, TeacherUser } from "@/interfaces/user";
+import { CorporateUser, DeveloperUser, MasterCorporateUser, TeacherUser } from "@/interfaces/user";
 import Image from "next/image";
 import { useEffect, useMemo, useState } from "react";
 import { AiOutlineUserAdd } from "react-icons/ai";
@@ -10,8 +10,7 @@ import WorkflowStepNumber from "./WorkflowStepNumber";
 import WorkflowStepSelects from "./WorkflowStepSelects";
 
 interface Props extends Pick<EditableWorkflowStep, 'stepNumber' | 'assignees' | 'finalStep' | 'onDelete'> {
-    entityTeachers: TeacherUser[];
-    entityCorporates: CorporateUser[];
+    entityApprovers: (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[];
     onSelectChange: (numberOfSelects: number, index: number, value: Option | null) => void;
 }
 
@@ -21,41 +20,27 @@ export default function WorkflowEditableStepComponent({
     finalStep,
     onDelete,
     onSelectChange,
-    entityTeachers,
-    entityCorporates,
+    entityApprovers,
 }: Props) {
 
     const [selects, setSelects] = useState<(Option | null | undefined)[]>([null]);
     const [isAdding, setIsAdding] = useState(false);
 
-    const teacherOptions: Option[] = useMemo(() => 
-        entityTeachers
-            .map((teacher) => ({
-                value: teacher.id,
-                label: teacher.name,
-                icon: () => <Image src={teacher.profilePicture} alt={teacher.name} />
+    const approverOptions: Option[] = useMemo(() => 
+        entityApprovers
+            .map((approver) => ({
+                value: approver.id,
+                label: approver.name,
+                icon: () => <img src={approver.profilePicture} alt={approver.name} />
             }))
             .sort((a, b) => a.label.localeCompare(b.label)),
-        [entityTeachers]
+        [entityApprovers]
     );
 
-    const corporateOptions: Option[] = useMemo(() => 
-        entityCorporates
-            .map((corporate) => ({
-                value: corporate.id,
-                label: corporate.name,
-                icon: () => <Image src={corporate.profilePicture} alt={corporate.name} />
-            }))
-            .sort((a, b) => a.label.localeCompare(b.label)),
-        [entityCorporates]
-    );
-
-    const allOptions = useMemo(() => [...teacherOptions, ...corporateOptions], [teacherOptions, corporateOptions]);
-
     useEffect(() => {
         if (assignees && assignees.length > 0) {
             const initialSelects = assignees.map((assignee) =>
-                typeof assignee === 'string' ? allOptions.find(opt => opt.value === assignee) || null : null
+                typeof assignee === 'string' ? approverOptions.find(option => option.value === assignee) || null : null
             );
     
             setSelects((prevSelects) => {
@@ -68,21 +53,16 @@ export default function WorkflowEditableStepComponent({
                 return prevSelects;
             });
         } 
-    }, [assignees, allOptions]);
+    }, [assignees, approverOptions]);
 
     const selectedValues = useMemo(() => 
         selects.filter((opt): opt is Option => !!opt).map(opt => opt.value),
         [selects]
     );
 
-    const availableTeacherOptions = useMemo(() => 
-        teacherOptions.filter(opt => !selectedValues.includes(opt.value)),
-        [teacherOptions, selectedValues]
-    );
-
-    const availableCorporateOptions = useMemo(() => 
-        corporateOptions.filter(opt => !selectedValues.includes(opt.value)),
-        [corporateOptions, selectedValues]
+    const availableApproverOptions = useMemo(() => 
+        approverOptions.filter(opt => !selectedValues.includes(opt.value)),
+        [approverOptions, selectedValues]
     );
 
     const handleAddSelectComponent = () => {
@@ -122,8 +102,7 @@ export default function WorkflowEditableStepComponent({
 
             <div className="ml-10 mb-12">
                 <WorkflowStepSelects
-                    teachers={availableTeacherOptions}
-                    corporates={availableCorporateOptions}
+                    approvers={availableApproverOptions}
                     selects={selects}
                     placeholder={stepNumber === 1 ? "Form Intake By:" : "Approval By:"}
                     onSelectChange={handleSelectChangeAt}
diff --git a/src/components/ApprovalWorkflows/WorkflowForm.tsx b/src/components/ApprovalWorkflows/WorkflowForm.tsx
index da1cdffa..ffa92404 100644
--- a/src/components/ApprovalWorkflows/WorkflowForm.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowForm.tsx
@@ -1,7 +1,7 @@
 import { EditableApprovalWorkflow, EditableWorkflowStep } from "@/interfaces/approval.workflow";
 import Option from "@/interfaces/option";
-import { CorporateUser, TeacherUser } from "@/interfaces/user";
-import { AnimatePresence, Reorder, motion } from "framer-motion";
+import { CorporateUser, DeveloperUser, MasterCorporateUser, TeacherUser } from "@/interfaces/user";
+import { AnimatePresence, Reorder } from "framer-motion";
 import { useState } from "react";
 import { FaRegCheckCircle, FaSpinner } from "react-icons/fa";
 import { IoIosAddCircleOutline } from "react-icons/io";
@@ -12,13 +12,12 @@ import WorkflowEditableStepComponent from "./WorkflowEditableStepComponent";
 interface Props {
     workflow: EditableApprovalWorkflow;
     onWorkflowChange: (workflow: EditableApprovalWorkflow) => void;
-    entityTeachers: TeacherUser[];
-    entityCorporates: CorporateUser[];
+    entityApprovers: (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[];
     isLoading: boolean;
     isRedirecting: boolean;
 }
 
-export default function WorkflowForm({ workflow, onWorkflowChange, entityTeachers, entityCorporates, isLoading, isRedirecting }: Props) {
+export default function WorkflowForm({ workflow, onWorkflowChange, entityApprovers, isLoading, isRedirecting }: Props) {
     const [stepCounter, setStepCounter] = useState<number>(3); // to guarantee unique keys used for animations
     const lastStep = workflow.steps[workflow.steps.length - 1];
 
@@ -138,8 +137,7 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityTeacher
                                         finalStep={step.finalStep}
                                         onDelete={() => handleDelete(step.key)}
                                         onSelectChange={(numberOfSelects, idx, option) => handleSelectChange(step.key, numberOfSelects, idx, option)}
-                                        entityTeachers={entityTeachers}
-                                        entityCorporates={entityCorporates}
+                                        entityApprovers={entityApprovers}
                                     />
 
                                     {step.finalStep &&
diff --git a/src/components/ApprovalWorkflows/WorkflowStepSelects.tsx b/src/components/ApprovalWorkflows/WorkflowStepSelects.tsx
index c0ebc585..a7c39f67 100644
--- a/src/components/ApprovalWorkflows/WorkflowStepSelects.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowStepSelects.tsx
@@ -2,16 +2,14 @@ import Option from "@/interfaces/option";
 import Select from "../Low/Select";
 
 interface Props {
-    teachers: Option[];
-    corporates: Option[];
+    approvers: Option[];
     selects: (Option | null | undefined)[];
     placeholder: string;
     onSelectChange: (numberOfSelects: number, index: number, value: Option | null) => void;
 }
 
 export default function WorkflowStepSelects({
-    teachers,
-    corporates,
+    approvers,
     selects,
     placeholder,
     onSelectChange,
@@ -34,7 +32,7 @@ export default function WorkflowStepSelects({
                 return (
                     <div key={index} className="w-[275px]">
                         <Select
-                            options={[...teachers, ...corporates]}
+                            options={approvers}
                             value={option}
                             onChange={(option) => onSelectChange(selects.length, index, option)}
                             placeholder={placeholder}
diff --git a/src/pages/approval-workflows/[id]/clone.tsx b/src/pages/approval-workflows/[id]/clone.tsx
index e62ee2d7..7246b695 100644
--- a/src/pages/approval-workflows/[id]/clone.tsx
+++ b/src/pages/approval-workflows/[id]/clone.tsx
@@ -6,7 +6,7 @@ import Input from "@/components/Low/Input";
 import Select from "@/components/Low/Select";
 import { ApprovalWorkflow, EditableApprovalWorkflow, EditableWorkflowStep } from "@/interfaces/approval.workflow";
 import { Entity } from "@/interfaces/entity";
-import { CorporateUser, TeacherUser, User } from "@/interfaces/user";
+import { CorporateUser, DeveloperUser, MasterCorporateUser, TeacherUser, User } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
 import { redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
@@ -22,7 +22,6 @@ import { useEffect, useState } from "react";
 import { BsChevronLeft } from "react-icons/bs";
 import { GrClearOption } from "react-icons/gr";
 import { toast, ToastContainer } from "react-toastify";
-import approvalWorkflowsData from '../../../demo/approval_workflows.json'; // to test locally
 import { getApprovalWorkflow } from "@/utils/approval.workflows.be";
 import { useRouter } from "next/router";
 import axios from "axios";
@@ -48,8 +47,7 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
             user,
             workflow,
             userEntitiesWithLabel,
-            userEntitiesTeachers: await getEntitiesUsers(userEntitiesWithLabel.map(entity => entity.id), { type: "teacher" }) as TeacherUser[],
-            userEntitiesCorporates: await getEntitiesUsers(userEntitiesWithLabel.map(entity => entity.id), { type: "corporate" }) as CorporateUser[],
+            userEntitiesApprovers: await getEntitiesUsers(userEntitiesWithLabel.map(entity => entity.id), { type: {$in: ["teacher", "corporate", "mastercorporate", "developer"]} }) as (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[],
         }),
     };
 }, sessionOptions);
@@ -58,15 +56,13 @@ interface Props {
     user: User,
     workflow: ApprovalWorkflow,
     userEntitiesWithLabel: Entity[],
-    userEntitiesTeachers: TeacherUser[],
-    userEntitiesCorporates: CorporateUser[],
+    userEntitiesApprovers: (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[],
 }
 
-export default function Home({ user, workflow, userEntitiesWithLabel, userEntitiesTeachers, userEntitiesCorporates }: Props) {
+export default function Home({ user, workflow, userEntitiesWithLabel, userEntitiesApprovers }: Props) {
     const [cloneWorkflow, setCloneWorkflow] = useState<EditableApprovalWorkflow | null>(null);
     const [entityId, setEntityId] = useState<string | null | undefined>(workflow.entityId);
-    const [entityTeachers, setEntityTeachers] = useState<TeacherUser[]>([]);
-    const [entityCorporates, setEntityCorporates] = useState<CorporateUser[]>([]);
+    const [entityApprovers, setEntityApprovers] = useState<(TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[]>([]);
     const [isLoading, setIsLoading] = useState<boolean>(false);
     const [isRedirecting, setIsRedirecting] = useState<boolean>(false);
 
@@ -74,21 +70,15 @@ export default function Home({ user, workflow, userEntitiesWithLabel, userEntiti
 
     useEffect(() => {
         if (entityId) {
-            setEntityTeachers(
-                userEntitiesTeachers.filter(teacher =>
-                    teacher.entities.some(entity => entity.id === entityId)
-                )
-            );
-            setEntityCorporates(
-                userEntitiesCorporates.filter(corporate =>
-                    corporate.entities.some(entity => entity.id === entityId)
+            setEntityApprovers(
+                userEntitiesApprovers.filter(approver =>
+                    approver.entities.some(entity => entity.id === entityId)
                 )
             );
         } else {
-            setEntityTeachers([]);
-            setEntityCorporates([]);
+            setEntityApprovers([]);
         }
-    }, [entityId, userEntitiesTeachers, userEntitiesCorporates]);
+    }, [entityId, userEntitiesApprovers]);
 
     const ENTITY_OPTIONS = userEntitiesWithLabel.map(entity => ({
         label: entity.label,
@@ -289,8 +279,7 @@ export default function Home({ user, workflow, userEntitiesWithLabel, userEntiti
                                             <WorkflowForm
                                                 workflow={cloneWorkflow}
                                                 onWorkflowChange={onWorkflowChange}
-                                                entityTeachers={entityTeachers}
-                                                entityCorporates={entityCorporates}
+                                                entityApprovers={entityApprovers}
                                                 isLoading={isLoading}
                                                 isRedirecting={isRedirecting}
                                             />
diff --git a/src/pages/approval-workflows/[id]/edit.tsx b/src/pages/approval-workflows/[id]/edit.tsx
index 7765e009..8bad8e91 100644
--- a/src/pages/approval-workflows/[id]/edit.tsx
+++ b/src/pages/approval-workflows/[id]/edit.tsx
@@ -4,7 +4,7 @@ import Status from "@/components/ApprovalWorkflows/Status";
 import WorkflowForm from "@/components/ApprovalWorkflows/WorkflowForm";
 import Layout from "@/components/High/Layout";
 import { ApprovalWorkflow, EditableApprovalWorkflow, EditableWorkflowStep, getUserTypeLabelShort } from "@/interfaces/approval.workflow";
-import { CorporateUser, TeacherUser, User } from "@/interfaces/user";
+import { CorporateUser, DeveloperUser, MasterCorporateUser, TeacherUser, User } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
 import { redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
@@ -39,8 +39,7 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
         props: serialize({
             user,
             workflow,
-            workflowEntityTeachers: await getEntityUsers(workflow.entityId, undefined, { type: "teacher" }),
-            workflowEntityCorporates: await getEntityUsers(workflow.entityId, undefined, { type: "corporate" }),
+            workflowEntityApprovers: await getEntityUsers(workflow.entityId, undefined, { type: {$in: ["teacher", "corporate", "mastercorporate", "developer"]} }) as (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[],
         }),
     };
 }, sessionOptions);
@@ -48,11 +47,10 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
 interface Props {
     user: User,
     workflow: ApprovalWorkflow,
-    workflowEntityTeachers: TeacherUser[],
-    workflowEntityCorporates: CorporateUser[],
+    workflowEntityApprovers: (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[],
 }
 
-export default function Home({ user, workflow, workflowEntityTeachers, workflowEntityCorporates }: Props) {
+export default function Home({ user, workflow, workflowEntityApprovers }: Props) {
     const [updatedWorkflow, setUpdatedWorkflow] = useState<EditableApprovalWorkflow | null>(null);
     const [isLoading, setIsLoading] = useState<boolean>(false);
     const [isRedirecting, setIsRedirecting] = useState<boolean>(false);
@@ -184,8 +182,7 @@ export default function Home({ user, workflow, workflowEntityTeachers, workflowE
                                 <WorkflowForm
                                     workflow={updatedWorkflow}
                                     onWorkflowChange={onWorkflowChange}
-                                    entityTeachers={workflowEntityTeachers}
-                                    entityCorporates={workflowEntityCorporates}
+                                    entityApprovers={workflowEntityApprovers}
                                     isLoading={isLoading}
                                     isRedirecting={isRedirecting}
                                 />
diff --git a/src/pages/approval-workflows/[id]/index.tsx b/src/pages/approval-workflows/[id]/index.tsx
index 0ffe56e2..2ef05ab6 100644
--- a/src/pages/approval-workflows/[id]/index.tsx
+++ b/src/pages/approval-workflows/[id]/index.tsx
@@ -5,6 +5,7 @@ import Tip from "@/components/ApprovalWorkflows/Tip";
 import UserWithProfilePic from "@/components/ApprovalWorkflows/UserWithProfilePic";
 import WorkflowStepComponent from "@/components/ApprovalWorkflows/WorkflowStepComponent";
 import Layout from "@/components/High/Layout";
+import Button from "@/components/Low/Button";
 import { ApprovalWorkflow, getUserTypeLabelShort, WorkflowStep } from "@/interfaces/approval.workflow";
 import { User } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
@@ -82,10 +83,14 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
         setIsPanelOpen(true);
     };
 
-    const saveComments = () => {
+    const handleSaveComments = () => {
 
     };
 
+    const handleApproveStep = () => {
+        
+    };
+
     return (
         <>
             <Head>
@@ -99,7 +104,7 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
             </Head>
             <ToastContainer />
             {user && (
-                <Layout user={user} className="gap-6">
+                <Layout user={user} className="gap-6 min-h-[900px]">
 
                     <section className="flex items-center gap-2">
                         <Link
@@ -224,7 +229,7 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
                                                 </div>
 
                                             ) : (
-                                                <div className={"text-base font-medium text-gray-500"}>
+                                                <div className={"text-base font-medium text-gray-500 mb-6"}>
                                                     One assignee is required to sign off to complete this step:
                                                     <div className="flex flex-col gap-2 mt-3">
                                                         {workflowAssignees.filter(user => selectedStep.assignees.includes(user.id)).map(user => (
@@ -240,6 +245,19 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
                                                     </div>
                                                 </div>
                                             )}
+                                            
+                                            {selectedStepIndex === currentStep &&
+                                                <Button
+                                                    color="purple"
+                                                    variant="solid"
+                                                    disabled={!selectedStep.assignees.includes(user.id)}
+                                                    onClick={handleApproveStep}
+                                                    padding="px-6 py-2"
+                                                    className="mb-3 w-full text-lg"
+                                                >
+                                                    Approve Step
+                                                </Button>
+                                            }
 
                                             <hr className="my-4 h-[4px] bg-mti-purple-ultralight rounded-full w-full" />
 
@@ -247,11 +265,19 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
                                                 value={comments}
                                                 onChange={(e) => setComments(e.target.value)}
                                                 placeholder="Input comments here"
-                                                className="w-full h-80 p-2 border-2 rounded-xl shadow-lg focus:border-mti-purple focus:outline-none mt-4"
+                                                className="w-full h-64 p-2 border-2 rounded-xl shadow-lg focus:border-mti-purple focus:outline-none mt-3 resize-none"
                                             />
-                                            <button onClick={saveComments} className="mt-4 px-6 py-2 bg-mti-purple-dark text-white rounded-full">
+                                            <Button
+                                                color="purple"
+                                                variant="solid"
+                                                onClick={handleSaveComments}
+                                                padding="px-6 py-2"
+                                                className="mt-6 mb-3 w-full text-lg"
+                                            >
                                                 Save Comments
-                                            </button>
+                                            </Button>
+
+                                            <hr className="my-4 h-[4px] bg-mti-purple-ultralight rounded-full w-full" />
 
                                         </div>
                                     </motion.div>
diff --git a/src/pages/approval-workflows/create.tsx b/src/pages/approval-workflows/create.tsx
index 5fafb405..d2299c4a 100644
--- a/src/pages/approval-workflows/create.tsx
+++ b/src/pages/approval-workflows/create.tsx
@@ -6,7 +6,7 @@ import Input from "@/components/Low/Input";
 import Select from "@/components/Low/Select";
 import { ApprovalWorkflow, EditableApprovalWorkflow } from "@/interfaces/approval.workflow";
 import { Entity } from "@/interfaces/entity";
-import { CorporateUser, TeacherUser, User } from "@/interfaces/user";
+import { CorporateUser, DeveloperUser, MasterCorporateUser, TeacherUser, User } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
 import { redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
@@ -38,8 +38,7 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
         props: serialize({
             user,
             userEntitiesWithLabel,
-            userEntitiesTeachers: await getEntitiesUsers(userEntitiesWithLabel.map(entity => entity.id), { type: "teacher" }) as TeacherUser[],
-            userEntitiesCorporates: await getEntitiesUsers(userEntitiesWithLabel.map(entity => entity.id), { type: "corporate" }) as CorporateUser[],
+            userEntitiesApprovers: await getEntitiesUsers(userEntitiesWithLabel.map(entity => entity.id), { type: {$in: ["teacher", "corporate", "mastercorporate", "developer"]} }) as (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[],
         }),
     };
 }, sessionOptions);
@@ -47,16 +46,14 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
 interface Props {
     user: User,
     userEntitiesWithLabel: Entity[],
-    userEntitiesTeachers: TeacherUser[],
-    userEntitiesCorporates: CorporateUser[],
+    userEntitiesApprovers: (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[],
 }
 
-export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers, userEntitiesCorporates }: Props) {
+export default function Home({ user, userEntitiesWithLabel, userEntitiesApprovers }: Props) {
     const [workflows, setWorkflows] = useState<EditableApprovalWorkflow[]>([]);
     const [selectedWorkflowId, setSelectedWorkflowId] = useState<string | undefined>(undefined);
     const [entityId, setEntityId] = useState<string | null | undefined>(null);
-    const [entityTeachers, setEntityTeachers] = useState<TeacherUser[]>([]);
-    const [entityCorporates, setEntityCorporates] = useState<CorporateUser[]>([]);
+    const [entityApprovers, setEntityApprovers] = useState<(TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[]>([]);
     const [isAdding, setIsAdding] = useState<boolean>(false); // used to temporary timeout new workflow button. With animations, clicking too fast might cause state inconsistencies between renders.
     const [isLoading, setIsLoading] = useState<boolean>(false);
     const [isRedirecting, setIsRedirecting] = useState<boolean>(false);
@@ -65,21 +62,15 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
 
     useEffect(() => {
         if (entityId) {
-            setEntityTeachers(
-                userEntitiesTeachers.filter(teacher =>
-                    teacher.entities.some(entity => entity.id === entityId)
-                )
-            );
-            setEntityCorporates(
-                userEntitiesCorporates.filter(corporate =>
-                    corporate.entities.some(entity => entity.id === entityId)
+            setEntityApprovers(
+                userEntitiesApprovers.filter(approver =>
+                    approver.entities.some(entity => entity.id === entityId)
                 )
             );
         } else {
-            setEntityTeachers([]);
-            setEntityCorporates([]);
+            setEntityApprovers([]);
         }
-    }, [entityId, userEntitiesTeachers, userEntitiesCorporates]);
+    }, [entityId, userEntitiesApprovers]);
 
     const currentWorkflow = workflows.find(wf => wf.id === selectedWorkflowId);
 
@@ -129,7 +120,7 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
                 setIsLoading(false);
                 return;
             })
-        
+
         console.log("Form submitted! Filtered Values:", filteredWorkflows);
     };
 
@@ -321,8 +312,7 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
                                             <WorkflowForm
                                                 workflow={currentWorkflow}
                                                 onWorkflowChange={onWorkflowChange}
-                                                entityTeachers={entityTeachers}
-                                                entityCorporates={entityCorporates}
+                                                entityApprovers={entityApprovers}
                                                 isLoading={isLoading}
                                                 isRedirecting={isRedirecting}
                                             />

From 54a9f6869ac7792dec75edae3616eb07c27e1595 Mon Sep 17 00:00:00 2001
From: Tiago Ribeiro <tiago.ribeiro@ecrop.dev>
Date: Fri, 31 Jan 2025 12:05:39 +0000
Subject: [PATCH 42/69] Reduced the maxPoolSize

---
 src/lib/mongodb.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/lib/mongodb.ts b/src/lib/mongodb.ts
index 4694b23b..38675649 100644
--- a/src/lib/mongodb.ts
+++ b/src/lib/mongodb.ts
@@ -5,7 +5,9 @@ if (!process.env.MONGODB_URI) {
 }
 
 const uri = process.env.MONGODB_URI || "";
-const options = {};
+const options = {
+	maxPoolSize: 10,
+};
 
 let client: MongoClient;
 

From 662e3b026683862f13938ab4903bfae7e52521ad Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Fri, 31 Jan 2025 17:01:20 +0000
Subject: [PATCH 43/69] - implement approval of steps - remove currentStep
 field from step - implement save comments on step - fix _id issue when saving
 to mongo

---
 src/pages/api/approval-workflows/[id]/edit.ts |   8 +-
 .../api/approval-workflows/[id]/index.ts      |  23 ++-
 src/pages/approval-workflows/[id]/clone.tsx   |  13 +-
 src/pages/approval-workflows/[id]/edit.tsx    |  18 +--
 src/pages/approval-workflows/[id]/index.tsx   | 134 ++++++++++++++++--
 src/pages/approval-workflows/create.tsx       |  15 +-
 src/pages/approval-workflows/index.tsx        |  17 ++-
 src/utils/approval.workflows.be.ts            |  15 +-
 8 files changed, 184 insertions(+), 59 deletions(-)

diff --git a/src/pages/api/approval-workflows/[id]/edit.ts b/src/pages/api/approval-workflows/[id]/edit.ts
index 2d517f0e..c61e200a 100644
--- a/src/pages/api/approval-workflows/[id]/edit.ts
+++ b/src/pages/api/approval-workflows/[id]/edit.ts
@@ -2,7 +2,7 @@
 import { ApprovalWorkflow } from "@/interfaces/approval.workflow";
 import { sessionOptions } from "@/lib/session";
 import { requestUser } from "@/utils/api";
-import { createApprovalWorkflows, updateApprovalWorkflow } from "@/utils/approval.workflows.be";
+import { updateApprovalWorkflow } from "@/utils/approval.workflows.be";
 import { withIronSessionApiRoute } from "iron-session/next";
 import type { NextApiRequest, NextApiResponse } from "next";
 
@@ -23,6 +23,8 @@ async function put(req: NextApiRequest, res: NextApiResponse) {
     const { id } = req.query as { id?: string };
     const approvalWorkflow: ApprovalWorkflow = req.body;
 
-    if (id && approvalWorkflow)
-        return res.status(204).json(await updateApprovalWorkflow(id, approvalWorkflow));
+    if (id && approvalWorkflow) {
+        await updateApprovalWorkflow(id, approvalWorkflow);
+        return res.status(204).end();
+    }
 }
diff --git a/src/pages/api/approval-workflows/[id]/index.ts b/src/pages/api/approval-workflows/[id]/index.ts
index 16efab91..e8de49a8 100644
--- a/src/pages/api/approval-workflows/[id]/index.ts
+++ b/src/pages/api/approval-workflows/[id]/index.ts
@@ -2,7 +2,7 @@
 import { ApprovalWorkflow } from "@/interfaces/approval.workflow";
 import { sessionOptions } from "@/lib/session";
 import { requestUser } from "@/utils/api";
-import { createApprovalWorkflows, deleteApprovalWorkflow, updateApprovalWorkflow } from "@/utils/approval.workflows.be";
+import { deleteApprovalWorkflow, updateApprovalWorkflow } from "@/utils/approval.workflows.be";
 import { withIronSessionApiRoute } from "iron-session/next";
 import type { NextApiRequest, NextApiResponse } from "next";
 
@@ -10,6 +10,7 @@ export default withIronSessionApiRoute(handler, sessionOptions);
 
 async function handler(req: NextApiRequest, res: NextApiResponse) {
     if (req.method === "DELETE") return await del(req, res);
+    if (req.method === "PUT") return await put(req, res);
 }
 
 async function del(req: NextApiRequest, res: NextApiResponse) {
@@ -22,6 +23,22 @@ async function del(req: NextApiRequest, res: NextApiResponse) {
 
     const { id } = req.query as { id?: string };
 
-    if (id)
-        return res.status(200).json(await deleteApprovalWorkflow(id));
+    if (id) return res.status(200).json(await deleteApprovalWorkflow(id));
+}
+
+async function put(req: NextApiRequest, res: NextApiResponse) {
+    const user = await requestUser(req, res);
+    if (!user) return res.status(401).json({ ok: false });
+
+    if (!["admin", "developer", "corporate", "mastercorporate"].includes(user.type)) {
+        return res.status(403).json({ ok: false });
+    }
+
+    const { id } = req.query as { id?: string };
+    const workflow = req.body;
+
+    if (id && workflow) {
+        await updateApprovalWorkflow(id, workflow);
+        return res.status(204).end();
+    }
 }
diff --git a/src/pages/approval-workflows/[id]/clone.tsx b/src/pages/approval-workflows/[id]/clone.tsx
index 7246b695..f91a83da 100644
--- a/src/pages/approval-workflows/[id]/clone.tsx
+++ b/src/pages/approval-workflows/[id]/clone.tsx
@@ -124,7 +124,6 @@ export default function Home({ user, workflow, userEntitiesWithLabel, userEntiti
             ...cloneWorkflow,
             steps: cloneWorkflow.steps.map(step => ({
                 ...step,
-                currentStep: step.stepNumber === 1 ? true : false,
                 completed: false,
                 assignees: step.assignees.filter((assignee): assignee is string => assignee !== null && assignee !== undefined)
             }))
@@ -137,23 +136,21 @@ export default function Home({ user, workflow, userEntitiesWithLabel, userEntiti
                 setIsRedirecting(true);
                 setTimeout(() => {
                     router.push("/approval-workflows");
-                }, 2000);
+                }, 1000);
             })
             .catch((reason) => {
                 if (reason.response.status === 401) {
                     toast.error("Not logged in!");
-                    return router.push("/login");
-                }
-                if (reason.response.status === 403) {
+                } else if (reason.response.status === 403) {
                     toast.error("You do not have permission to clone Approval Workflows!");
-                    return router.push("/approval-workflows");
+                } else {
+                    toast.error("Something went wrong, please try again later.");
                 }
-                toast.error("Something went wrong, please try again later.");
                 setIsLoading(false);
+                console.log("Submitted Values:", filteredWorkflow);
                 return;
             })
 
-        console.log("Form submitted! Filtered Values:", filteredWorkflow);
     };
 
     const onWorkflowChange = (wf: EditableApprovalWorkflow) => {
diff --git a/src/pages/approval-workflows/[id]/edit.tsx b/src/pages/approval-workflows/[id]/edit.tsx
index 8bad8e91..7c9a1d83 100644
--- a/src/pages/approval-workflows/[id]/edit.tsx
+++ b/src/pages/approval-workflows/[id]/edit.tsx
@@ -95,12 +95,11 @@ export default function Home({ user, workflow, workflowEntityApprovers }: Props)
             ...updatedWorkflow,
             steps: updatedWorkflow.steps.map(step => ({
                 ...step,
-                currentStep: step.stepNumber === 1 ? true : false,
                 completed: false,
                 assignees: step.assignees.filter((assignee): assignee is string => assignee !== null && assignee !== undefined)
             }))
         };
-
+        
         axios
             .put(`/api/approval-workflows/${updatedWorkflow.id}/edit`, filteredWorkflow)
             .then(() => {
@@ -108,23 +107,20 @@ export default function Home({ user, workflow, workflowEntityApprovers }: Props)
                 setIsRedirecting(true);
                 setTimeout(() => {
                     router.push("/approval-workflows");
-                }, 2000);
+                }, 1000);
             })
             .catch((reason) => {
                 if (reason.response.status === 401) {
                     toast.error("Not logged in!");
-                    return router.push("/login");
-                }
-                if (reason.response.status === 403) {
+                } else if (reason.response.status === 403) {
                     toast.error("You do not have permission to edit Approval Workflows!");
-                    return router.push("/approval-workflows");
+                } else {
+                    toast.error("Something went wrong, please try again later.");
                 }
-                toast.error("Something went wrong, please try again later.");
                 setIsLoading(false);
+                console.log("Submitted Values:", filteredWorkflow);
                 return;
             })
-
-        console.log("Form submitted! Filtered Values:", filteredWorkflow);
     };
 
     const onWorkflowChange = (updatedWorkflow: EditableApprovalWorkflow) => {
@@ -159,7 +155,7 @@ export default function Home({ user, workflow, workflowEntityApprovers }: Props)
                             <RequestedBy
                                 prefix={getUserTypeLabelShort(user.type)}
                                 name={user.name}
-                                profileImage="/blue-stock-photo.png" //{user.profilePicture}
+                                profileImage={user.profilePicture}
                             />
                             <StartedOn
                                 date={workflow.startDate}
diff --git a/src/pages/approval-workflows/[id]/index.tsx b/src/pages/approval-workflows/[id]/index.tsx
index 2ef05ab6..60be5360 100644
--- a/src/pages/approval-workflows/[id]/index.tsx
+++ b/src/pages/approval-workflows/[id]/index.tsx
@@ -14,16 +14,20 @@ import { requestUser } from "@/utils/api";
 import { getApprovalWorkflow } from "@/utils/approval.workflows.be";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
 import { getSpecificUsers, getUser } from "@/utils/users.be";
+import axios from "axios";
 import { AnimatePresence, LayoutGroup, motion } from "framer-motion";
 import { withIronSessionSsr } from "iron-session/next";
 import Head from "next/head";
 import Link from "next/link";
+import { useRouter } from "next/router";
 import { useState } from "react";
 import { BsChevronLeft } from "react-icons/bs";
-import { FaWpforms } from "react-icons/fa6";
+import { FaSpinner, FaWpforms } from "react-icons/fa6";
 import { MdOutlineDoubleArrow } from "react-icons/md";
 import { RiThumbUpLine } from "react-icons/ri";
-import { ToastContainer } from "react-toastify";
+import { toast, ToastContainer } from "react-toastify";
+import { IoMdCheckmarkCircleOutline } from "react-icons/io";
+import { FiSave } from "react-icons/fi";
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => {
     const user = await requestUser(req, res);
@@ -75,6 +79,9 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
     const [selectedStep, setSelectedStep] = useState<WorkflowStep>(steps[selectedStepIndex]);
     const [isPanelOpen, setIsPanelOpen] = useState(true);
     const [comments, setComments] = useState<string>(selectedStep.comments || "");
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+    const [isRedirecting, setIsRedirecting] = useState<boolean>(false);
+    const router = useRouter();
 
     const handleStepClick = (index: number, stepInfo: WorkflowStep) => {
         setSelectedStep(stepInfo);
@@ -84,11 +91,82 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
     };
 
     const handleSaveComments = () => {
+        setIsLoading(true);
 
+        const updatedWorkflow: ApprovalWorkflow = {
+            ...workflow,
+            steps: workflow.steps.map((step, index) =>
+                index === selectedStepIndex ?
+                    {
+                        ...step,
+                        comments: comments,
+                    }
+                    : step
+            )
+        };
+
+        axios
+            .put(`/api/approval-workflows/${workflow._id}`, updatedWorkflow)
+            .then(() => {
+                toast.success("Comments saved successfully.");
+                setIsRedirecting(true);
+                setTimeout(() => {
+                    router.reload();
+                }, 1000);
+            })
+            .catch((reason) => {
+                if (reason.response.status === 401) {
+                    toast.error("Not logged in!");
+                } else if (reason.response.status === 403) {
+                    toast.error("You do not have permission to approve this step!");
+                } else {
+                    toast.error("Something went wrong, please try again later.");
+                }
+                setIsLoading(false);
+                console.log("Submitted Values:", updatedWorkflow);
+                return;
+            })
     };
 
     const handleApproveStep = () => {
-        
+        if (!confirm(`Are you sure you want to approve this step?`)) return;
+        setIsLoading(true);
+
+        const updatedWorkflow: ApprovalWorkflow = {
+            ...workflow,
+            steps: workflow.steps.map((step, index) =>
+                index === selectedStepIndex ?
+                    {
+                        ...step,
+                        completed: true,
+                        completedBy: user.id,
+                        completedDate: Date.now(),
+                    }
+                    : step
+            )
+        };
+
+        axios
+            .put(`/api/approval-workflows/${workflow._id}`, updatedWorkflow)
+            .then(() => {
+                toast.success("Step approved successfully.");
+                setIsRedirecting(true);
+                setTimeout(() => {
+                    router.reload();
+                }, 1000);
+            })
+            .catch((reason) => {
+                if (reason.response.status === 401) {
+                    toast.error("Not logged in!");
+                } else if (reason.response.status === 403) {
+                    toast.error("You do not have permission to approve this step!");
+                } else {
+                    toast.error("Something went wrong, please try again later.");
+                }
+                setIsLoading(false);
+                console.log("Submitted Values:", updatedWorkflow);
+                return;
+            })
     };
 
     return (
@@ -120,7 +198,7 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
                             <RequestedBy
                                 prefix={getUserTypeLabelShort(workflowRequester.type)}
                                 name={workflowRequester.name}
-                                profileImage="/blue-stock-photo.png" //{workflowRequester.profilePicture}
+                                profileImage={workflowRequester.profilePicture}
                             />
                             <StartedOn
                                 date={workflow.startDate}
@@ -245,17 +323,33 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
                                                     </div>
                                                 </div>
                                             )}
-                                            
-                                            {selectedStepIndex === currentStep &&
+
+                                            {selectedStepIndex === currentStep && !selectedStep.completed &&
                                                 <Button
+                                                    type="submit"
                                                     color="purple"
                                                     variant="solid"
-                                                    disabled={!selectedStep.assignees.includes(user.id)}
+                                                    disabled={!selectedStep.assignees.includes(user.id) || isLoading}
                                                     onClick={handleApproveStep}
                                                     padding="px-6 py-2"
-                                                    className="mb-3 w-full text-lg"
+                                                    className="mb-3 w-full text-lg flex items-center justify-center gap-2 text-left"
                                                 >
-                                                    Approve Step
+                                                    {isRedirecting ? (
+                                                        <>
+                                                            <FaSpinner className="animate-spin size-5" />
+                                                            Reloading...
+                                                        </>
+                                                    ) : isLoading ? (
+                                                        <>
+                                                            <FaSpinner className="animate-spin size-5" />
+                                                            Loading...
+                                                        </>
+                                                    ) : (
+                                                        <>
+                                                            <IoMdCheckmarkCircleOutline size={20} />
+                                                            Approve Step
+                                                        </>
+                                                    )}
                                                 </Button>
                                             }
 
@@ -267,14 +361,32 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
                                                 placeholder="Input comments here"
                                                 className="w-full h-64 p-2 border-2 rounded-xl shadow-lg focus:border-mti-purple focus:outline-none mt-3 resize-none"
                                             />
+                                            
                                             <Button
+                                                type="submit"
                                                 color="purple"
                                                 variant="solid"
                                                 onClick={handleSaveComments}
+                                                disabled={isLoading}
                                                 padding="px-6 py-2"
-                                                className="mt-6 mb-3 w-full text-lg"
+                                                className="mt-6 mb-3 w-full text-lg flex items-center justify-center gap-2 text-left"
                                             >
-                                                Save Comments
+                                                {isRedirecting ? (
+                                                    <>
+                                                        <FaSpinner className="animate-spin size-5" />
+                                                        Reloading...
+                                                    </>
+                                                ) : isLoading ? (
+                                                    <>
+                                                        <FaSpinner className="animate-spin size-5" />
+                                                        Loading...
+                                                    </>
+                                                ) : (
+                                                    <>
+                                                        <FiSave size={20} />
+                                                        Save Comments
+                                                    </>
+                                                )}
                                             </Button>
 
                                             <hr className="my-4 h-[4px] bg-mti-purple-ultralight rounded-full w-full" />
diff --git a/src/pages/approval-workflows/create.tsx b/src/pages/approval-workflows/create.tsx
index d2299c4a..73d5a4c0 100644
--- a/src/pages/approval-workflows/create.tsx
+++ b/src/pages/approval-workflows/create.tsx
@@ -86,13 +86,13 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesApprover
 
         if (workflows.length === 0) {
             setIsLoading(false);
+            return;
         }
 
         const filteredWorkflows: ApprovalWorkflow[] = workflows.map(workflow => ({
             ...workflow,
             steps: workflow.steps.map(step => ({
                 ...step,
-                currentStep: step.stepNumber === 1 ? true : false,
                 completed: false,
                 assignees: step.assignees.filter((assignee): assignee is string => assignee !== null && assignee !== undefined)
             }))
@@ -105,23 +105,22 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesApprover
                 setIsRedirecting(true);
                 setTimeout(() => {
                     router.push("/approval-workflows");
-                }, 2000);
+                }, 1000);
             })
             .catch((reason) => {
                 if (reason.response.status === 401) {
                     toast.error("Not logged in!");
-                    return router.push("/login");
                 }
-                if (reason.response.status === 403) {
+                else if (reason.response.status === 403) {
                     toast.error("You do not have permission to create Approval Workflows!");
-                    return router.push("/approval-workflows");
                 }
-                toast.error("Something went wrong, please try again later.");
+                else {
+                    toast.error("Something went wrong, please try again later.");
+                }
                 setIsLoading(false);
+                console.log("Submitted Values:", filteredWorkflows);
                 return;
             })
-
-        console.log("Form submitted! Filtered Values:", filteredWorkflows);
     };
 
     const handleAddNewWorkflow = () => {
diff --git a/src/pages/approval-workflows/index.tsx b/src/pages/approval-workflows/index.tsx
index c7c71731..a8b59b26 100644
--- a/src/pages/approval-workflows/index.tsx
+++ b/src/pages/approval-workflows/index.tsx
@@ -27,6 +27,7 @@ import Input from "@/components/Low/Input";
 import { FaRegClone } from "react-icons/fa6";
 import useApprovalWorkflows from "@/hooks/useApprovalWorkflows";
 import { getApprovalWorkflows } from "@/utils/approval.workflows.be";
+import { useRouter } from "next/router";
 
 const columnHelper = createColumnHelper<ApprovalWorkflow>();
 
@@ -110,6 +111,7 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
     const [statusFilter, setStatusFilter] = useState<CustomStatus>(undefined);
     const [entityFilter, setEntityFilter] = useState<CustomEntity>(undefined);
     const [nameFilter, setNameFilter] = useState<string>("");
+    const router = useRouter();
 
     useEffect(() => {
         const filters: Array<(workflow: ApprovalWorkflow) => boolean> = [];
@@ -154,21 +156,18 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
             .then(() => {
                 toast.success(`Successfully deleted ${name} Approval Workflow.`);
                 setTimeout(() => {
-                    window.location.reload();
-                }, 2000);
+                    router.reload();
+                }, 1000);
             })
             .catch((reason) => {
                 if (reason.response.status === 404) {
                     toast.error("Approval Workflow not found!");
-                    return;
-                }
-
-                if (reason.response.status === 403) {
+                } else if (reason.response.status === 403) {
                     toast.error("You do not have permission to delete an Approval Workflow!");
-                    return;
+                } else {
+                    toast.error("Something went wrong, please try again later.");
                 }
-
-                toast.error("Something went wrong, please try again later.");
+                return;
             })
     };
 
diff --git a/src/utils/approval.workflows.be.ts b/src/utils/approval.workflows.be.ts
index e876a279..f82056dd 100644
--- a/src/utils/approval.workflows.be.ts
+++ b/src/utils/approval.workflows.be.ts
@@ -15,17 +15,20 @@ export const getApprovalWorkflow = async (id: string) => {
     return await db.collection<ApprovalWorkflow>("approval-workflows").findOne({ _id: new ObjectId(id) });
 };
 
-export const createApprovalWorkflow = async (workflow: Omit<ApprovalWorkflow, "_id">) => {
-    return await db.collection("approval-workflows").insertOne(workflow);
+export const createApprovalWorkflow = async (workflow: ApprovalWorkflow) => {
+	const { _id, ...workflowWithoutId } = workflow as ApprovalWorkflow;
+    return await db.collection("approval-workflows").insertOne(workflowWithoutId);
 };
 
-export const createApprovalWorkflows = async (workflows: Omit<ApprovalWorkflow, "_id">[]) => {
+export const createApprovalWorkflows = async (workflows: ApprovalWorkflow[]) => {
     if (workflows.length === 0) return;
-    return await db.collection("approval-workflows").insertMany(workflows);
+	const workflowsWithoutIds: ApprovalWorkflow[] = workflows.map(({_id, ...wfs}) => wfs)
+    return await db.collection("approval-workflows").insertMany(workflowsWithoutIds);
 };
 
-export const updateApprovalWorkflow = async (id: string, workflow: Omit<ApprovalWorkflow, "_id">) => {
-    return await db.collection("approval-workflows").replaceOne({ _id: new ObjectId(id) }, workflow);
+export const updateApprovalWorkflow = async (id: string, workflow: ApprovalWorkflow) => {
+	const { _id, ...workflowWithoutId } = workflow as ApprovalWorkflow;
+    return await db.collection("approval-workflows").replaceOne({ _id: new ObjectId(id) }, workflowWithoutId);
 };
 
 export const deleteApprovalWorkflow = async (id: string) => {

From a0229cd971c642e810e315cf27bc8dfe4567da33 Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Fri, 31 Jan 2025 20:56:40 +0000
Subject: [PATCH 44/69] implement rejection of steps

---
 .../WorkflowStepComponent.tsx                 | 104 +++++--------
 .../ApprovalWorkflows/WorkflowStepNumber.tsx  |  10 +-
 src/interfaces/approval.workflow.ts           |   1 +
 src/pages/approval-workflows/[id]/clone.tsx   |   6 +-
 src/pages/approval-workflows/[id]/edit.tsx    |  14 +-
 src/pages/approval-workflows/[id]/index.tsx   | 142 +++++++++++++-----
 src/pages/approval-workflows/create.tsx       |   6 +-
 src/pages/approval-workflows/index.tsx        |  13 +-
 8 files changed, 170 insertions(+), 126 deletions(-)

diff --git a/src/components/ApprovalWorkflows/WorkflowStepComponent.tsx b/src/components/ApprovalWorkflows/WorkflowStepComponent.tsx
index 8ae7d862..75681040 100644
--- a/src/components/ApprovalWorkflows/WorkflowStepComponent.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowStepComponent.tsx
@@ -17,6 +17,7 @@ export default function WorkflowStepComponent({
     stepType,
     stepNumber,
     completed,
+    rejected = false,
     completedBy,
     assignees,
     finalStep,
@@ -31,11 +32,12 @@ export default function WorkflowStepComponent({
         <div
             onClick={onClick}
             className={clsx("flex flex-row gap-5 w-[600px] p-6 mb-5 rounded-2xl transition ease-in-out duration-300 cursor-pointer", {
+                "bg-mti-red-ultralight": rejected && selected,
                 "bg-mti-purple-ultralight": selected,
             })}
         >
             <div className="relative flex flex-col items-center">
-                <WorkflowStepNumber stepNumber={stepNumber} selected={selected} completed={completed} finalStep={finalStep} />
+                <WorkflowStepNumber stepNumber={stepNumber} selected={selected} completed={completed} finalStep={finalStep} rejected={rejected} />
 
                 {/* Vertical Bar connecting steps */}
                 {!finalStep && (
@@ -53,71 +55,45 @@ export default function WorkflowStepComponent({
             </div>
 
             <div className="mt-1 flex flex-col gap-0">
-                {stepType === "form-intake" ? (
-                    <>
-                        <p className="text-sm font-medium text-gray-800">Form: Intake</p>
-                        {completed && completedBy && (
-                            <div className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
-                                <UserWithProfilePic
-                                    prefix={`Completed by: ${getUserTypeLabelShort(completedByUser!.type)}`}
-                                    name={completedByUser!.name}
-                                    profileImage={completedByUser!.profilePicture}
-                                />
-                            </div>
-                        )}
-                        {!completed && currentStep && (
-                            <div className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
-                                In Progress... Assignees:
-                                <div className="flex flex-row flex-wrap gap-3 items-center">
-                                    {assigneesUsers.map(user => (
-                                        <span key={user.id}>
-                                            <UserWithProfilePic
-                                                prefix={getUserTypeLabelShort(user.type)}
-                                                name={user.name}
-                                                profileImage={user.profilePicture}
-                                            />
-                                        </span>
-                                    ))}
-                                </div>
-                            </div>
-                        )}
-                    </>
-                ) : (
-                    stepType === "approval-by" && (
-                        <>
-                            {completed && completedBy ? (
-                                <div className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
-                                    <p className="text-sm font-medium text-gray-800">Approval: {getUserTypeLabel(completedByUser!.type)} Approval</p>
+                {completed && completedBy && rejected ? (
+                    <div className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
+                        <p className="text-sm font-medium text-gray-800">{stepType === "approval-by" ? `Approval: ${getUserTypeLabel(completedByUser!.type)} Approval` : `Form Intake: ${getUserTypeLabel(completedByUser!.type)} Intake`} </p>
+                        <UserWithProfilePic
+                            prefix={`Rejected by: ${getUserTypeLabelShort(completedByUser!.type)}`}
+                            name={completedByUser!.name}
+                            profileImage={completedByUser!.profilePicture}
+                        />
+                    </div>
+                ) : completed && completedBy && !rejected ? (
+                    <div className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
+                        <p className="text-sm font-medium text-gray-800">{stepType === "approval-by" ? `Approval: ${getUserTypeLabel(completedByUser!.type)} Approval` : `Form Intake: ${getUserTypeLabel(completedByUser!.type)} Intake`} </p>
+                        <UserWithProfilePic
+                            prefix={`Completed by: ${getUserTypeLabelShort(completedByUser!.type)}`}
+                            name={completedByUser!.name}
+                            profileImage={completedByUser!.profilePicture}
+                        />
+                    </div>
+                ) : !completed && currentStep ? (
+                    <div className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
+                        <p className="text-sm font-medium text-gray-800">{stepType === "approval-by" ? `Approval:` : `Form Intake:`} </p>
+                        In Progress... Assignees:
+                        <div className="flex flex-row flex-wrap gap-3 items-center">
+                            {assigneesUsers.map(user => (
+                                <span key={user.id}>
                                     <UserWithProfilePic
-                                        prefix={`Approved by: ${getUserTypeLabelShort(completedByUser!.type)}`}
-                                        name={completedByUser!.name}
-                                        profileImage={completedByUser!.profilePicture}
+                                        prefix={getUserTypeLabelShort(user.type)}
+                                        name={user.name}
+                                        profileImage={user.profilePicture}
                                     />
-                                </div>
-                            ) : !completed && currentStep ? (
-                                <div className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
-                                    <p className="text-sm font-medium text-gray-800">Approval: </p>
-                                    In Progress... Assignees:
-                                    <div className="flex flex-row flex-wrap gap-3 items-center">
-                                        {assigneesUsers.map(user => (
-                                            <span key={user.id}>
-                                                <UserWithProfilePic
-                                                    prefix={getUserTypeLabelShort(user.type)}
-                                                    name={user.name}
-                                                    profileImage={user.profilePicture}
-                                                />
-                                            </span>
-                                        ))}
-                                    </div>
-                                </div>
-                            ) : (
-                                <div className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
-                                    <p className="text-sm font-medium text-gray-800">Approval: </p>
-                                    Waiting for previous steps...
-                                </div>
-                            )}
-                        </>
-                    )
+                                </span>
+                            ))}
+                        </div>
+                    </div>
+                ) : (
+                    <div className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
+                        <p className="text-sm font-medium text-gray-800">{stepType === "approval-by" ? `Approval:` : `Form Intake:`} </p>
+                        Waiting for previous steps...
+                    </div>
                 )}
             </div>
         </div>
diff --git a/src/components/ApprovalWorkflows/WorkflowStepNumber.tsx b/src/components/ApprovalWorkflows/WorkflowStepNumber.tsx
index a1d6a900..842ecc6c 100644
--- a/src/components/ApprovalWorkflows/WorkflowStepNumber.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowStepNumber.tsx
@@ -1,21 +1,25 @@
 import { WorkflowStep } from "@/interfaces/approval.workflow";
 import clsx from "clsx";
 import { IoCheckmarkDoneSharp, IoCheckmarkSharp } from "react-icons/io5";
+import { RxCross2 } from "react-icons/rx";
 
-type Props = Pick<WorkflowStep, 'stepNumber' | 'completed' | 'finalStep' | 'selected'>
+type Props = Pick<WorkflowStep, 'stepNumber' | 'completed' | 'finalStep' | 'selected' | 'rejected'>
 
-export default function WorkflowStepNumber({ stepNumber, selected = false, completed, finalStep }: Props) {
+export default function WorkflowStepNumber({ stepNumber, selected = false, completed, rejected, finalStep }: Props) {
     return (
         <div
             className={clsx(
                 'flex items-center justify-center min-w-11 min-h-11 rounded-full',
                 {
+                    'bg-mti-red-dark text-mti-red-ultralight': rejected,
                     'bg-mti-purple-dark text-mti-purple-ultralight': selected,
                     'bg-mti-purple-ultralight text-gray-500': !selected,
                 }
             )}
         >
-            {completed && finalStep ? (
+            {rejected ? (
+                <RxCross2 className="text-xl font-bold" size={25}/>
+            ) : completed && finalStep ? (
                 <IoCheckmarkDoneSharp className="text-xl font-bold" size={25} />
             ) : completed && !finalStep ? (
                 <IoCheckmarkSharp className="text-xl font-bold" size={25} />
diff --git a/src/interfaces/approval.workflow.ts b/src/interfaces/approval.workflow.ts
index 5c7dacf2..f5563e58 100644
--- a/src/interfaces/approval.workflow.ts
+++ b/src/interfaces/approval.workflow.ts
@@ -28,6 +28,7 @@ export interface WorkflowStep {
     stepType: StepType,
     stepNumber: number,
     completed: boolean,
+    rejected?: boolean,
     completedBy?: User["id"],
     completedDate?: number,
     assignees: (User["id"])[];
diff --git a/src/pages/approval-workflows/[id]/clone.tsx b/src/pages/approval-workflows/[id]/clone.tsx
index f91a83da..8baaaf36 100644
--- a/src/pages/approval-workflows/[id]/clone.tsx
+++ b/src/pages/approval-workflows/[id]/clone.tsx
@@ -47,7 +47,7 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
             user,
             workflow,
             userEntitiesWithLabel,
-            userEntitiesApprovers: await getEntitiesUsers(userEntitiesWithLabel.map(entity => entity.id), { type: {$in: ["teacher", "corporate", "mastercorporate", "developer"]} }) as (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[],
+            userEntitiesApprovers: await getEntitiesUsers(userEntitiesWithLabel.map(entity => entity.id), { type: { $in: ["teacher", "corporate", "mastercorporate", "developer"] } }) as (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[],
         }),
     };
 }, sessionOptions);
@@ -134,9 +134,7 @@ export default function Home({ user, workflow, userEntitiesWithLabel, userEntiti
             .then(() => {
                 toast.success("Approval Workflow cloned successfully.");
                 setIsRedirecting(true);
-                setTimeout(() => {
-                    router.push("/approval-workflows");
-                }, 1000);
+                router.push("/approval-workflows");
             })
             .catch((reason) => {
                 if (reason.response.status === 401) {
diff --git a/src/pages/approval-workflows/[id]/edit.tsx b/src/pages/approval-workflows/[id]/edit.tsx
index 7c9a1d83..1677f3ca 100644
--- a/src/pages/approval-workflows/[id]/edit.tsx
+++ b/src/pages/approval-workflows/[id]/edit.tsx
@@ -39,7 +39,7 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
         props: serialize({
             user,
             workflow,
-            workflowEntityApprovers: await getEntityUsers(workflow.entityId, undefined, { type: {$in: ["teacher", "corporate", "mastercorporate", "developer"]} }) as (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[],
+            workflowEntityApprovers: await getEntityUsers(workflow.entityId, undefined, { type: { $in: ["teacher", "corporate", "mastercorporate", "developer"] } }) as (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[],
         }),
     };
 }, sessionOptions);
@@ -54,7 +54,7 @@ export default function Home({ user, workflow, workflowEntityApprovers }: Props)
     const [updatedWorkflow, setUpdatedWorkflow] = useState<EditableApprovalWorkflow | null>(null);
     const [isLoading, setIsLoading] = useState<boolean>(false);
     const [isRedirecting, setIsRedirecting] = useState<boolean>(false);
-    
+
     const router = useRouter();
 
     useEffect(() => {
@@ -86,10 +86,10 @@ export default function Home({ user, workflow, workflowEntityApprovers }: Props)
         e.preventDefault();
         setIsLoading(true);
 
-        if (!updatedWorkflow){
+        if (!updatedWorkflow) {
             setIsLoading(false);
             return;
-        } 
+        }
 
         const filteredWorkflow: ApprovalWorkflow = {
             ...updatedWorkflow,
@@ -99,15 +99,13 @@ export default function Home({ user, workflow, workflowEntityApprovers }: Props)
                 assignees: step.assignees.filter((assignee): assignee is string => assignee !== null && assignee !== undefined)
             }))
         };
-        
+
         axios
             .put(`/api/approval-workflows/${updatedWorkflow.id}/edit`, filteredWorkflow)
             .then(() => {
                 toast.success("Approval Workflow edited successfully.");
                 setIsRedirecting(true);
-                setTimeout(() => {
-                    router.push("/approval-workflows");
-                }, 1000);
+                router.push("/approval-workflows");
             })
             .catch((reason) => {
                 if (reason.response.status === 401) {
diff --git a/src/pages/approval-workflows/[id]/index.tsx b/src/pages/approval-workflows/[id]/index.tsx
index 60be5360..a510f033 100644
--- a/src/pages/approval-workflows/[id]/index.tsx
+++ b/src/pages/approval-workflows/[id]/index.tsx
@@ -28,6 +28,7 @@ import { RiThumbUpLine } from "react-icons/ri";
 import { toast, ToastContainer } from "react-toastify";
 import { IoMdCheckmarkCircleOutline } from "react-icons/io";
 import { FiSave } from "react-icons/fi";
+import { RxCrossCircled } from "react-icons/rx";
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => {
     const user = await requestUser(req, res);
@@ -71,7 +72,7 @@ interface Props {
 export default function Home({ user, workflow, workflowAssignees, workflowRequester }: Props) {
     const steps = workflow.steps;
 
-    let currentStep = steps.findIndex(step => !step.completed);
+    let currentStep = steps.findIndex(step => !step.completed || step.rejected);
     if (currentStep === -1)
         currentStep = steps.length - 1;
 
@@ -110,9 +111,7 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
             .then(() => {
                 toast.success("Comments saved successfully.");
                 setIsRedirecting(true);
-                setTimeout(() => {
-                    router.reload();
-                }, 1000);
+                router.reload();
             })
             .catch((reason) => {
                 if (reason.response.status === 401) {
@@ -129,7 +128,6 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
     };
 
     const handleApproveStep = () => {
-        if (!confirm(`Are you sure you want to approve this step?`)) return;
         setIsLoading(true);
 
         const updatedWorkflow: ApprovalWorkflow = {
@@ -151,9 +149,48 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
             .then(() => {
                 toast.success("Step approved successfully.");
                 setIsRedirecting(true);
-                setTimeout(() => {
-                    router.reload();
-                }, 1000);
+                router.reload();
+            })
+            .catch((reason) => {
+                if (reason.response.status === 401) {
+                    toast.error("Not logged in!");
+                } else if (reason.response.status === 403) {
+                    toast.error("You do not have permission to approve this step!");
+                } else {
+                    toast.error("Something went wrong, please try again later.");
+                }
+                setIsLoading(false);
+                console.log("Submitted Values:", updatedWorkflow);
+                return;
+            })
+    };
+
+    const handleRejectStep = () => {
+        if (!confirm(`Are you sure you want to reject this step?`)) return;
+        setIsLoading(true);
+
+        const updatedWorkflow: ApprovalWorkflow = {
+            ...workflow,
+            status: "rejected",
+            steps: workflow.steps.map((step, index) =>
+                index === selectedStepIndex ?
+                    {
+                        ...step,
+                        completed: true,
+                        completedBy: user.id,
+                        completedDate: Date.now(),
+                        rejected: true,
+                    }
+                    : step
+            )
+        };
+
+        axios
+            .put(`/api/approval-workflows/${workflow._id}`, updatedWorkflow)
+            .then(() => {
+                toast.success("Step rejected successfully.");
+                setIsRedirecting(true);
+                router.reload();
             })
             .catch((reason) => {
                 if (reason.response.status === 401) {
@@ -219,6 +256,7 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
                                 key={index}
                                 completed={step.completed}
                                 completedBy={step.completedBy}
+                                rejected={step.rejected}
                                 stepNumber={step.stepNumber}
                                 stepType={step.stepType}
                                 assignees={step.assignees}
@@ -276,7 +314,7 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
 
                                             {selectedStep.completed ? (
                                                 <div className={"text-base font-medium text-gray-500 flex flex-col gap-6"}>
-                                                    Approved on {new Date(selectedStep.completedDate!).toLocaleString("en-CA", {
+                                                    {selectedStep.rejected ? "Rejected" : "Approved"} on {new Date(selectedStep.completedDate!).toLocaleString("en-CA", {
                                                         year: "numeric",
                                                         month: "2-digit",
                                                         day: "2-digit",
@@ -286,7 +324,7 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
                                                         hour12: false,
                                                     }).replace(", ", " at ")}
                                                     <div className="flex flex-row gap-1 text-sm">
-                                                        <p className="text-base">Approved by:</p>
+                                                        <p className="text-base">{selectedStep.rejected ? "Rejected" : "Approved"} by:</p>
                                                         {(() => {
                                                             const assignee = workflowAssignees.find(
                                                                 (assignee) => assignee.id === selectedStep.completedBy
@@ -324,33 +362,61 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
                                                 </div>
                                             )}
 
-                                            {selectedStepIndex === currentStep && !selectedStep.completed &&
-                                                <Button
-                                                    type="submit"
-                                                    color="purple"
-                                                    variant="solid"
-                                                    disabled={!selectedStep.assignees.includes(user.id) || isLoading}
-                                                    onClick={handleApproveStep}
-                                                    padding="px-6 py-2"
-                                                    className="mb-3 w-full text-lg flex items-center justify-center gap-2 text-left"
-                                                >
-                                                    {isRedirecting ? (
-                                                        <>
-                                                            <FaSpinner className="animate-spin size-5" />
-                                                            Reloading...
-                                                        </>
-                                                    ) : isLoading ? (
-                                                        <>
-                                                            <FaSpinner className="animate-spin size-5" />
-                                                            Loading...
-                                                        </>
-                                                    ) : (
-                                                        <>
-                                                            <IoMdCheckmarkCircleOutline size={20} />
-                                                            Approve Step
-                                                        </>
-                                                    )}
-                                                </Button>
+                                            {selectedStepIndex === currentStep && !selectedStep.completed && !selectedStep.rejected &&
+                                                <div className="flex flex-row gap-2 ">
+                                                    <Button
+                                                        type="submit"
+                                                        color="purple"
+                                                        variant="solid"
+                                                        disabled={!selectedStep.assignees.includes(user.id) || isLoading}
+                                                        onClick={handleApproveStep}
+                                                        padding="px-6 py-2"
+                                                        className="mb-3 w-full text-lg flex items-center justify-center gap-2 text-left"
+                                                    >
+                                                        {isRedirecting ? (
+                                                            <>
+                                                                <FaSpinner className="animate-spin size-5" />
+                                                                Reloading...
+                                                            </>
+                                                        ) : isLoading ? (
+                                                            <>
+                                                                <FaSpinner className="animate-spin size-5" />
+                                                                Loading...
+                                                            </>
+                                                        ) : (
+                                                            <>
+                                                                <IoMdCheckmarkCircleOutline size={20} />
+                                                                Approve Step
+                                                            </>
+                                                        )}
+                                                    </Button>
+                                                    <Button
+                                                        type="submit"
+                                                        color="red"
+                                                        variant="solid"
+                                                        disabled={!selectedStep.assignees.includes(user.id) || isLoading}
+                                                        onClick={handleRejectStep}
+                                                        padding="px-6 py-2"
+                                                        className="mb-3 w-1/2 text-lg flex items-center justify-center gap-2 text-left"
+                                                    >
+                                                        {isRedirecting ? (
+                                                            <>
+                                                                <FaSpinner className="animate-spin size-5" />
+                                                                Reloading...
+                                                            </>
+                                                        ) : isLoading ? (
+                                                            <>
+                                                                <FaSpinner className="animate-spin size-5" />
+                                                                Loading...
+                                                            </>
+                                                        ) : (
+                                                            <>
+                                                                <RxCrossCircled size={20} />
+                                                                Reject Step
+                                                            </>
+                                                        )}
+                                                    </Button>
+                                                </div>
                                             }
 
                                             <hr className="my-4 h-[4px] bg-mti-purple-ultralight rounded-full w-full" />
@@ -361,7 +427,7 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
                                                 placeholder="Input comments here"
                                                 className="w-full h-64 p-2 border-2 rounded-xl shadow-lg focus:border-mti-purple focus:outline-none mt-3 resize-none"
                                             />
-                                            
+
                                             <Button
                                                 type="submit"
                                                 color="purple"
diff --git a/src/pages/approval-workflows/create.tsx b/src/pages/approval-workflows/create.tsx
index 73d5a4c0..bedc3014 100644
--- a/src/pages/approval-workflows/create.tsx
+++ b/src/pages/approval-workflows/create.tsx
@@ -38,7 +38,7 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
         props: serialize({
             user,
             userEntitiesWithLabel,
-            userEntitiesApprovers: await getEntitiesUsers(userEntitiesWithLabel.map(entity => entity.id), { type: {$in: ["teacher", "corporate", "mastercorporate", "developer"]} }) as (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[],
+            userEntitiesApprovers: await getEntitiesUsers(userEntitiesWithLabel.map(entity => entity.id), { type: { $in: ["teacher", "corporate", "mastercorporate", "developer"] } }) as (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[],
         }),
     };
 }, sessionOptions);
@@ -103,9 +103,7 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesApprover
             .then(() => {
                 toast.success("Approval Workflows created successfully.");
                 setIsRedirecting(true);
-                setTimeout(() => {
-                    router.push("/approval-workflows");
-                }, 1000);
+                router.push("/approval-workflows");
             })
             .catch((reason) => {
                 if (reason.response.status === 401) {
diff --git a/src/pages/approval-workflows/index.tsx b/src/pages/approval-workflows/index.tsx
index a8b59b26..144e3447 100644
--- a/src/pages/approval-workflows/index.tsx
+++ b/src/pages/approval-workflows/index.tsx
@@ -155,9 +155,7 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
             .delete(`/api/approval-workflows/${id}`)
             .then(() => {
                 toast.success(`Successfully deleted ${name} Approval Workflow.`);
-                setTimeout(() => {
-                    router.reload();
-                }, 1000);
+                router.reload();
             })
             .catch((reason) => {
                 if (reason.response.status === 404) {
@@ -217,6 +215,9 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
             cell: (info) => {
                 const steps = info.row.original.steps;
                 const currentStep = steps.find((step) => !step.completed);
+                const rejected = steps.find((step) => step.rejected);
+
+                if(rejected) return "";
 
                 const assignees = currentStep?.assignees.map((assigneeId) => {
                     const assignee = workflowsAssignees.find((user) => user.id === assigneeId);
@@ -243,10 +244,11 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
             cell: (info) => {
                 const steps = info.row.original.steps;
                 const currentStep = steps.find((step) => !step.completed);
+                const rejected = steps.find((step) => step.rejected);
 
                 return (
                     <span className="font-medium">
-                        {currentStep
+                        {currentStep && !rejected
                             ? `Step ${currentStep.stepNumber}: ${StepTypeLabel[currentStep.stepType]}`
                             : "Completed"}
                     </span>
@@ -259,6 +261,7 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
             cell: ({ row }) => {
                 const steps = row.original.steps;
                 const currentStep = steps.find((step) => !step.completed);
+                const rejected = steps.find((step) => step.rejected);
 
                 return (
                     <div className="flex gap-4">
@@ -282,7 +285,7 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
                             <FaRegClone className="hover:text-mti-purple-light transition ease-in-out duration-300" />
                         </Link>
 
-                        {currentStep && (
+                        {currentStep && !rejected && (
                             <Link
                                 onClick={(e) => e.stopPropagation()}
                                 data-tip="Edit"

From 1feef5c419f9a2383e60c60b7e609838287e5fb4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Marques=20Lima?= <francisco.lima@helppier.com>
Date: Fri, 31 Jan 2025 22:34:43 +0000
Subject: [PATCH 45/69] Fix Finish page

---
 src/pages/(exam)/ExamPage.tsx | 202 +++++++++++++++++-----------------
 1 file changed, 101 insertions(+), 101 deletions(-)

diff --git a/src/pages/(exam)/ExamPage.tsx b/src/pages/(exam)/ExamPage.tsx
index fb212a77..df4b5286 100644
--- a/src/pages/(exam)/ExamPage.tsx
+++ b/src/pages/(exam)/ExamPage.tsx
@@ -279,7 +279,7 @@ export default function ExamPage({
     };
 
     userSolutions.forEach((x) => {
-      if (x.isPractice === isPractice) {
+      if (isPractice ? x.isPractice : !x.isPractice) {
         const examModule =
           x.module ||
           (x.type === "writing"
@@ -329,7 +329,7 @@ export default function ExamPage({
 
   useEffect(() => {
     setOnFocusLayerMouseEnter(() => () => setShowAbandonPopup(true));
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {
@@ -355,107 +355,107 @@ export default function ExamPage({
     <>
       <ToastContainer />
       {user && (
-          <>
-            {/* Modules weren't yet set by an INIT_EXAM or INIT_SOLUTIONS dispatch, show Selection component*/}
-            {selectedModules.length === 0 && (
-              <Selection
-                page={page}
-                user={user!}
-                onStart={(
-                  modules: Module[],
-                  avoid: boolean,
-                  variant: Variant
-                ) => {
+        <>
+          {/* Modules weren't yet set by an INIT_EXAM or INIT_SOLUTIONS dispatch, show Selection component*/}
+          {selectedModules.length === 0 && (
+            <Selection
+              page={page}
+              user={user!}
+              onStart={(
+                modules: Module[],
+                avoid: boolean,
+                variant: Variant
+              ) => {
+                setModuleIndex(0);
+                setAvoidRepeated(avoid);
+                setSelectedModules(modules);
+                setVariant(variant);
+              }}
+            />
+          )}
+          {isFetchingExams && (
+            <div className="flex flex-grow flex-col items-center justify-center animate-pulse">
+              <span
+                className={`loading loading-infinity w-32 bg-ielts-${selectedModules[0]}`}
+              />
+              <span
+                className={`font-bold text-2xl text-ielts-${selectedModules[0]}`}
+              >
+                Loading Exam ...
+              </span>
+            </div>
+          )}
+          {moduleIndex === -1 && selectedModules.length !== 0 && (
+            <Finish
+              isLoading={userSolutions.some((s) => s.isDisabled)}
+              user={user!}
+              modules={selectedModules}
+              solutions={userSolutions}
+              assignment={assignment}
+              information={{
+                timeSpent,
+                inactivity,
+              }}
+              destination={destination}
+              onViewResults={(index?: number) => {
+                if (exams[0].module === "level") {
+                  const levelExam = exams[0] as LevelExam;
+                  const allExercises = levelExam.parts.flatMap(
+                    (part) => part.exercises
+                  );
+                  const exerciseOrderMap = new Map(
+                    allExercises.map((ex, index) => [ex.id, index])
+                  );
+                  const orderedSolutions = userSolutions
+                    .slice()
+                    .sort((a, b) => {
+                      const indexA =
+                        exerciseOrderMap.get(a.exercise) ?? Infinity;
+                      const indexB =
+                        exerciseOrderMap.get(b.exercise) ?? Infinity;
+                      return indexA - indexB;
+                    });
+                  setUserSolutions(orderedSolutions);
+                } else {
+                  setUserSolutions(userSolutions);
+                }
+                setShuffles([]);
+                if (index === undefined) {
+                  setFlags({ reviewAll: true });
                   setModuleIndex(0);
-                  setAvoidRepeated(avoid);
-                  setSelectedModules(modules);
-                  setVariant(variant);
-                }}
-              />
-            )}
-            {isFetchingExams && (
-              <div className="flex flex-grow flex-col items-center justify-center animate-pulse">
-                <span
-                  className={`loading loading-infinity w-32 bg-ielts-${selectedModules[0]}`}
+                  setExam(exams[0]);
+                } else {
+                  setModuleIndex(index);
+                  setExam(exams[index]);
+                }
+                setShowSolutions(true);
+                setQuestionIndex(0);
+                setExerciseIndex(0);
+                setPartIndex(0);
+              }}
+              scores={aggregateScoresByModule()}
+              practiceScores={aggregateScoresByModule(true)}
+            />
+          )}
+          {/* Exam is on going, display it and the abandon modal */}
+          {isExamLoaded && moduleIndex !== -1 && (
+            <>
+              {exam && CurrentExam && (
+                <CurrentExam exam={exam} showSolutions={showSolutions} />
+              )}
+              {!showSolutions && (
+                <AbandonPopup
+                  isOpen={showAbandonPopup}
+                  abandonPopupTitle="Leave Exercise"
+                  abandonPopupDescription="Are you sure you want to leave the exercise? Your progress will be saved and this exam can be resumed on the Dashboard."
+                  abandonConfirmButtonText="Confirm"
+                  onAbandon={onAbandon}
+                  onCancel={() => setShowAbandonPopup(false)}
                 />
-                <span
-                  className={`font-bold text-2xl text-ielts-${selectedModules[0]}`}
-                >
-                  Loading Exam ...
-                </span>
-              </div>
-            )}
-            {moduleIndex === -1 && selectedModules.length !== 0 && (
-              <Finish
-                isLoading={userSolutions.some((s) => s.isDisabled)}
-                user={user!}
-                modules={selectedModules}
-                solutions={userSolutions}
-                assignment={assignment}
-                information={{
-                  timeSpent,
-                  inactivity,
-                }}
-                destination={destination}
-                onViewResults={(index?: number) => {
-                  if (exams[0].module === "level") {
-                    const levelExam = exams[0] as LevelExam;
-                    const allExercises = levelExam.parts.flatMap(
-                      (part) => part.exercises
-                    );
-                    const exerciseOrderMap = new Map(
-                      allExercises.map((ex, index) => [ex.id, index])
-                    );
-                    const orderedSolutions = userSolutions
-                      .slice()
-                      .sort((a, b) => {
-                        const indexA =
-                          exerciseOrderMap.get(a.exercise) ?? Infinity;
-                        const indexB =
-                          exerciseOrderMap.get(b.exercise) ?? Infinity;
-                        return indexA - indexB;
-                      });
-                    setUserSolutions(orderedSolutions);
-                  } else {
-                    setUserSolutions(userSolutions);
-                  }
-                  setShuffles([]);
-                  if (index === undefined) {
-                    setFlags({ reviewAll: true });
-                    setModuleIndex(0);
-                    setExam(exams[0]);
-                  } else {
-                    setModuleIndex(index);
-                    setExam(exams[index]);
-                  }
-                  setShowSolutions(true);
-                  setQuestionIndex(0);
-                  setExerciseIndex(0);
-                  setPartIndex(0);
-                }}
-                scores={aggregateScoresByModule()}
-                practiceScores={aggregateScoresByModule(true)}
-              />
-            )}
-            {/* Exam is on going, display it and the abandon modal */}
-            {isExamLoaded && moduleIndex !== -1 && (
-              <>
-                {exam && CurrentExam && (
-                  <CurrentExam exam={exam} showSolutions={showSolutions} />
-                )}
-                {!showSolutions && (
-                  <AbandonPopup
-                    isOpen={showAbandonPopup}
-                    abandonPopupTitle="Leave Exercise"
-                    abandonPopupDescription="Are you sure you want to leave the exercise? Your progress will be saved and this exam can be resumed on the Dashboard."
-                    abandonConfirmButtonText="Confirm"
-                    onAbandon={onAbandon}
-                    onCancel={() => setShowAbandonPopup(false)}
-                  />
-                )}
-              </>
-            )}
-          </>
+              )}
+            </>
+          )}
+        </>
       )}
     </>
   );

From ac539332e60ed2eff6f0b7a2b5aeb561aeb061ce Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Sat, 1 Feb 2025 22:36:42 +0000
Subject: [PATCH 46/69] major change on how workflow builder works. It now
 fetches in edit mode all the currently configured workflows

---
 .../ApprovalWorkflows/WorkflowForm.tsx        |  1 +
 src/interfaces/approval.workflow.ts           |  4 +
 .../api/approval-workflows/[id]/clone.ts      |  4 +-
 src/pages/api/approval-workflows/[id]/edit.ts |  4 +-
 .../api/approval-workflows/[id]/index.ts      |  6 +-
 src/pages/api/approval-workflows/create.ts    | 17 +++-
 src/pages/approval-workflows/[id]/clone.tsx   |  9 ++-
 src/pages/approval-workflows/[id]/edit.tsx    | 11 ++-
 src/pages/approval-workflows/[id]/index.tsx   | 48 +++++++++--
 src/pages/approval-workflows/create.tsx       | 18 +++--
 src/pages/approval-workflows/index.tsx        | 14 ++--
 src/utils/approval.workflows.be.ts            | 79 +++++++++++++++----
 12 files changed, 159 insertions(+), 56 deletions(-)

diff --git a/src/components/ApprovalWorkflows/WorkflowForm.tsx b/src/components/ApprovalWorkflows/WorkflowForm.tsx
index ffa92404..8cc4686d 100644
--- a/src/components/ApprovalWorkflows/WorkflowForm.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowForm.tsx
@@ -33,6 +33,7 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityApprove
             key: stepCounter,
             stepType: "approval-by",
             stepNumber: workflow.steps.length,
+            completed: false,
             assignees: [null],
             firstStep: false,
             finalStep: false,
diff --git a/src/interfaces/approval.workflow.ts b/src/interfaces/approval.workflow.ts
index f5563e58..69cffa5e 100644
--- a/src/interfaces/approval.workflow.ts
+++ b/src/interfaces/approval.workflow.ts
@@ -43,6 +43,10 @@ export interface EditableWorkflowStep {
     key: number,
     stepType: StepType,
     stepNumber: number,
+    completed: boolean,
+    rejected?: boolean,
+    completedBy?: User["id"],
+    completedDate?: number,
     assignees: (User["id"] | null | undefined)[]; // bit of an hack, but allowing null or undefined values allows us to match one to one the select input components with the assignees array. And since select inputs allow undefined or null values, it is allowed here too, but must validate required input before form submission
     firstStep: boolean,
     finalStep?: boolean,
diff --git a/src/pages/api/approval-workflows/[id]/clone.ts b/src/pages/api/approval-workflows/[id]/clone.ts
index 6515d751..be0ee1b8 100644
--- a/src/pages/api/approval-workflows/[id]/clone.ts
+++ b/src/pages/api/approval-workflows/[id]/clone.ts
@@ -2,7 +2,7 @@
 import { ApprovalWorkflow } from "@/interfaces/approval.workflow";
 import { sessionOptions } from "@/lib/session";
 import { requestUser } from "@/utils/api";
-import { createApprovalWorkflow } from "@/utils/approval.workflows.be";
+import { createConfiguredWorkflow } from "@/utils/approval.workflows.be";
 import { withIronSessionApiRoute } from "iron-session/next";
 import type { NextApiRequest, NextApiResponse } from "next";
 
@@ -23,5 +23,5 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
     const approvalWorkflow: ApprovalWorkflow = req.body;
 
     if (approvalWorkflow)
-        return res.status(201).json(await createApprovalWorkflow(approvalWorkflow));
+        return res.status(201).json(await createConfiguredWorkflow(approvalWorkflow));
 }
diff --git a/src/pages/api/approval-workflows/[id]/edit.ts b/src/pages/api/approval-workflows/[id]/edit.ts
index c61e200a..39fc607f 100644
--- a/src/pages/api/approval-workflows/[id]/edit.ts
+++ b/src/pages/api/approval-workflows/[id]/edit.ts
@@ -2,7 +2,7 @@
 import { ApprovalWorkflow } from "@/interfaces/approval.workflow";
 import { sessionOptions } from "@/lib/session";
 import { requestUser } from "@/utils/api";
-import { updateApprovalWorkflow } from "@/utils/approval.workflows.be";
+import { updateConfiguredWorkflow } from "@/utils/approval.workflows.be";
 import { withIronSessionApiRoute } from "iron-session/next";
 import type { NextApiRequest, NextApiResponse } from "next";
 
@@ -24,7 +24,7 @@ async function put(req: NextApiRequest, res: NextApiResponse) {
     const approvalWorkflow: ApprovalWorkflow = req.body;
 
     if (id && approvalWorkflow) {
-        await updateApprovalWorkflow(id, approvalWorkflow);
+        await updateConfiguredWorkflow(approvalWorkflow);
         return res.status(204).end();
     }
 }
diff --git a/src/pages/api/approval-workflows/[id]/index.ts b/src/pages/api/approval-workflows/[id]/index.ts
index e8de49a8..53ce6f21 100644
--- a/src/pages/api/approval-workflows/[id]/index.ts
+++ b/src/pages/api/approval-workflows/[id]/index.ts
@@ -2,7 +2,7 @@
 import { ApprovalWorkflow } from "@/interfaces/approval.workflow";
 import { sessionOptions } from "@/lib/session";
 import { requestUser } from "@/utils/api";
-import { deleteApprovalWorkflow, updateApprovalWorkflow } from "@/utils/approval.workflows.be";
+import { deleteConfiguredWorkflow, updateConfiguredWorkflow } from "@/utils/approval.workflows.be";
 import { withIronSessionApiRoute } from "iron-session/next";
 import type { NextApiRequest, NextApiResponse } from "next";
 
@@ -23,7 +23,7 @@ async function del(req: NextApiRequest, res: NextApiResponse) {
 
     const { id } = req.query as { id?: string };
 
-    if (id) return res.status(200).json(await deleteApprovalWorkflow(id));
+    if (id) return res.status(200).json(await deleteConfiguredWorkflow(id));
 }
 
 async function put(req: NextApiRequest, res: NextApiResponse) {
@@ -38,7 +38,7 @@ async function put(req: NextApiRequest, res: NextApiResponse) {
     const workflow = req.body;
 
     if (id && workflow) {
-        await updateApprovalWorkflow(id, workflow);
+        await updateConfiguredWorkflow(workflow);
         return res.status(204).end();
     }
 }
diff --git a/src/pages/api/approval-workflows/create.ts b/src/pages/api/approval-workflows/create.ts
index dab8e80f..cbdddb02 100644
--- a/src/pages/api/approval-workflows/create.ts
+++ b/src/pages/api/approval-workflows/create.ts
@@ -1,13 +1,19 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 import { ApprovalWorkflow } from "@/interfaces/approval.workflow";
+import { Entity } from "@/interfaces/entity";
 import { sessionOptions } from "@/lib/session";
 import { requestUser } from "@/utils/api";
-import { createApprovalWorkflows } from "@/utils/approval.workflows.be";
+import { replaceConfiguredWorkflowsByEntities } from "@/utils/approval.workflows.be";
 import { withIronSessionApiRoute } from "iron-session/next";
 import type { NextApiRequest, NextApiResponse } from "next";
 
 export default withIronSessionApiRoute(handler, sessionOptions);
 
+interface ReplaceApprovalWorkflowsRequest {
+    filteredWorkflows: ApprovalWorkflow[];
+    userEntitiesWithLabel: Entity[];
+}
+
 async function handler(req: NextApiRequest, res: NextApiResponse) {
     if (req.method === "POST") return await post(req, res);
 }
@@ -20,9 +26,12 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
         return res.status(403).json({ ok: false });
     }
 
-    const approvalWorkflows: ApprovalWorkflow[] = req.body;
+    const { filteredWorkflows, userEntitiesWithLabel } = req.body as ReplaceApprovalWorkflowsRequest;
 
-    await createApprovalWorkflows(approvalWorkflows);
+    const configuredWorkflows: ApprovalWorkflow[] = filteredWorkflows;
+    const entitiesIds: string[] = userEntitiesWithLabel.map((e) => e.id);
 
-    return res.status(201).json(approvalWorkflows);
+    await replaceConfiguredWorkflowsByEntities(configuredWorkflows, entitiesIds);
+
+    return res.status(201).json({ ok: true });
 }
diff --git a/src/pages/approval-workflows/[id]/clone.tsx b/src/pages/approval-workflows/[id]/clone.tsx
index 8baaaf36..b42293a1 100644
--- a/src/pages/approval-workflows/[id]/clone.tsx
+++ b/src/pages/approval-workflows/[id]/clone.tsx
@@ -22,9 +22,9 @@ import { useEffect, useState } from "react";
 import { BsChevronLeft } from "react-icons/bs";
 import { GrClearOption } from "react-icons/gr";
 import { toast, ToastContainer } from "react-toastify";
-import { getApprovalWorkflow } from "@/utils/approval.workflows.be";
 import { useRouter } from "next/router";
 import axios from "axios";
+import { getConfiguredWorkflow } from "@/utils/approval.workflows.be";
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => {
     const user = await requestUser(req, res);
@@ -35,7 +35,7 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
 
     const { id } = params as { id: string };
 
-    const workflow: ApprovalWorkflow | null = await getApprovalWorkflow(id);
+    const workflow: ApprovalWorkflow | null = await getConfiguredWorkflow(id);
 
     if (!workflow)
         return redirect("/approval-workflows")
@@ -91,6 +91,7 @@ export default function Home({ user, workflow, userEntitiesWithLabel, userEntiti
             key: step.stepNumber + 999, // just making sure they are unique because new steps that users add will have key=3 key=4 etc
             stepType: step.stepType,
             stepNumber: step.stepNumber,
+            completed: false,
             assignees: step.assignees.map(id => id),
             firstStep: step.firstStep || false,
             finalStep: step.finalStep || false,
@@ -179,8 +180,8 @@ export default function Home({ user, workflow, userEntitiesWithLabel, userEntiti
             startDate: Date.now(),
             status: "pending",
             steps: [
-                { key: 9998, stepType: "form-intake", stepNumber: 1, firstStep: true, finalStep: false, assignees: [null] },
-                { key: 9999, stepType: "approval-by", stepNumber: 2, firstStep: false, finalStep: true, assignees: [null] },
+                { key: 9998, stepType: "form-intake", stepNumber: 1, completed: false, firstStep: true, finalStep: false, assignees: [null] },
+                { key: 9999, stepType: "approval-by", stepNumber: 2, completed: false, firstStep: false, finalStep: true, assignees: [null] },
             ],
         };
         setCloneWorkflow(newWorkflow);
diff --git a/src/pages/approval-workflows/[id]/edit.tsx b/src/pages/approval-workflows/[id]/edit.tsx
index 1677f3ca..185cc655 100644
--- a/src/pages/approval-workflows/[id]/edit.tsx
+++ b/src/pages/approval-workflows/[id]/edit.tsx
@@ -8,18 +8,18 @@ import { CorporateUser, DeveloperUser, MasterCorporateUser, TeacherUser, User }
 import { sessionOptions } from "@/lib/session";
 import { redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
+import { getConfiguredWorkflow } from "@/utils/approval.workflows.be";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
 import { getEntityUsers } from "@/utils/users.be";
+import axios from "axios";
 import { motion } from "framer-motion";
 import { withIronSessionSsr } from "iron-session/next";
 import Head from "next/head";
 import Link from "next/link";
+import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { BsChevronLeft } from "react-icons/bs";
 import { toast, ToastContainer } from "react-toastify";
-import axios from "axios";
-import { getApprovalWorkflow } from "@/utils/approval.workflows.be";
-import { useRouter } from "next/router";
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => {
     const user = await requestUser(req, res);
@@ -30,7 +30,7 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
 
     const { id } = params as { id: string };
 
-    const workflow: ApprovalWorkflow | null = await getApprovalWorkflow(id);
+    const workflow: ApprovalWorkflow | null = await getConfiguredWorkflow(id);
 
     if (!workflow)
         return redirect("/approval-workflows")
@@ -62,6 +62,9 @@ export default function Home({ user, workflow, workflowEntityApprovers }: Props)
             key: step.stepNumber + 999, // just making sure they are unique because new steps that users add will have key=3 key=4 etc
             stepType: step.stepType,
             stepNumber: step.stepNumber,
+            completed: step.completed,
+            completedBy: step.completedBy || undefined,
+            completedDate: step.completedDate || undefined,
             assignees: step.assignees.map(id => id),
             firstStep: step.firstStep || false,
             finalStep: step.finalStep || false,
diff --git a/src/pages/approval-workflows/[id]/index.tsx b/src/pages/approval-workflows/[id]/index.tsx
index a510f033..12d79a90 100644
--- a/src/pages/approval-workflows/[id]/index.tsx
+++ b/src/pages/approval-workflows/[id]/index.tsx
@@ -11,7 +11,7 @@ import { User } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
 import { redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
-import { getApprovalWorkflow } from "@/utils/approval.workflows.be";
+import { getConfiguredWorkflow } from "@/utils/approval.workflows.be";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
 import { getSpecificUsers, getUser } from "@/utils/users.be";
 import axios from "axios";
@@ -23,12 +23,14 @@ import { useRouter } from "next/router";
 import { useState } from "react";
 import { BsChevronLeft } from "react-icons/bs";
 import { FaSpinner, FaWpforms } from "react-icons/fa6";
+import { FiSave } from "react-icons/fi";
+import { IoMdCheckmarkCircleOutline } from "react-icons/io";
+import { IoDocumentTextOutline } from "react-icons/io5";
 import { MdOutlineDoubleArrow } from "react-icons/md";
 import { RiThumbUpLine } from "react-icons/ri";
-import { toast, ToastContainer } from "react-toastify";
-import { IoMdCheckmarkCircleOutline } from "react-icons/io";
-import { FiSave } from "react-icons/fi";
 import { RxCrossCircled } from "react-icons/rx";
+import { TiEdit } from "react-icons/ti";
+import { toast, ToastContainer } from "react-toastify";
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => {
     const user = await requestUser(req, res);
@@ -39,7 +41,7 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
 
     const { id } = params as { id: string };
 
-    const workflow: ApprovalWorkflow | null = await getApprovalWorkflow(id);
+    const workflow: ApprovalWorkflow | null = await getConfiguredWorkflow(id);
 
     if (!workflow)
         return redirect("/approval-workflows")
@@ -132,6 +134,7 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
 
         const updatedWorkflow: ApprovalWorkflow = {
             ...workflow,
+            status: selectedStepIndex === workflow.steps.length - 1 ? "approved" : "pending",
             steps: workflow.steps.map((step, index) =>
                 index === selectedStepIndex ?
                     {
@@ -206,6 +209,14 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
             })
     };
 
+    const handleViewExam = () => {
+        
+    }
+
+    const handleEditExam = () => {
+
+    }
+
     return (
         <>
             <Head>
@@ -244,6 +255,29 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
                                 status={workflow.status}
                             />
                         </div>
+                        <div className="flex flex-row gap-3">
+                            <Button
+                                color="purple"
+                                variant="solid"
+                                onClick={handleViewExam}
+                                padding="px-6 py-2"
+                                className="w-[240px] text-lg flex items-center justify-center gap-2 text-left"         
+                            >
+                                <IoDocumentTextOutline />
+                                View Exam
+                            </Button>
+                            <Button
+                                color="purple"
+                                variant="solid"
+                                onClick={handleEditExam}
+                                padding="px-6 py-2"
+                                className="w-[240px] text-lg flex items-center justify-center gap-2 text-left"         
+                            >
+                                <TiEdit size={20} />
+                                Edit Exam
+                            </Button>
+                            
+                        </div>
                         {steps.find((step) => !step.completed) === undefined &&
                             <Tip text="All steps in this instance have been completed." />
                         }
@@ -271,7 +305,7 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
                     {/* Side panel */}
                     <AnimatePresence mode="wait">
                         <LayoutGroup key="sidePanel">
-                            <section className={`absolute inset-y-0 right-0 h-full bg-mti-purple-ultralight bg-opacity-50 shadow-xl shadow-mti-purple transition-all duration-300 overflow-hidden ${isPanelOpen ? 'w-2/5' : 'w-0'}`}>
+                            <section className={`absolute inset-y-0 right-0 h-full bg-mti-purple-ultralight bg-opacity-50 shadow-xl shadow-mti-purple transition-all duration-300 overflow-hidden ${isPanelOpen ? 'w-[500px]' : 'w-0'}`}>
                                 {isPanelOpen && selectedStep && (
                                     <motion.div
                                         className="p-6"
@@ -412,7 +446,7 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
                                                         ) : (
                                                             <>
                                                                 <RxCrossCircled size={20} />
-                                                                Reject Step
+                                                                Reject
                                                             </>
                                                         )}
                                                     </Button>
diff --git a/src/pages/approval-workflows/create.tsx b/src/pages/approval-workflows/create.tsx
index bedc3014..999e971c 100644
--- a/src/pages/approval-workflows/create.tsx
+++ b/src/pages/approval-workflows/create.tsx
@@ -10,6 +10,7 @@ import { CorporateUser, DeveloperUser, MasterCorporateUser, TeacherUser, User }
 import { sessionOptions } from "@/lib/session";
 import { redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
+import { getConfiguredWorkflowsByEntities } from "@/utils/approval.workflows.be";
 import { getEntities } from "@/utils/entities.be";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
 import { getEntitiesUsers } from "@/utils/users.be";
@@ -33,10 +34,13 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
         return redirect("/")
 
     const userEntitiesWithLabel = await getEntities(user.entities.map(entity => entity.id));
+    
+    const allConfiguredWorkflows = await getConfiguredWorkflowsByEntities(userEntitiesWithLabel.map(entity => entity.id));
 
     return {
         props: serialize({
             user,
+            allConfiguredWorkflows,
             userEntitiesWithLabel,
             userEntitiesApprovers: await getEntitiesUsers(userEntitiesWithLabel.map(entity => entity.id), { type: { $in: ["teacher", "corporate", "mastercorporate", "developer"] } }) as (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[],
         }),
@@ -45,12 +49,13 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
 
 interface Props {
     user: User,
+    allConfiguredWorkflows: EditableApprovalWorkflow[],
     userEntitiesWithLabel: Entity[],
     userEntitiesApprovers: (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[],
 }
 
-export default function Home({ user, userEntitiesWithLabel, userEntitiesApprovers }: Props) {
-    const [workflows, setWorkflows] = useState<EditableApprovalWorkflow[]>([]);
+export default function Home({ user, allConfiguredWorkflows, userEntitiesWithLabel, userEntitiesApprovers }: Props) {
+    const [workflows, setWorkflows] = useState<EditableApprovalWorkflow[]>(allConfiguredWorkflows);
     const [selectedWorkflowId, setSelectedWorkflowId] = useState<string | undefined>(undefined);
     const [entityId, setEntityId] = useState<string | null | undefined>(null);
     const [entityApprovers, setEntityApprovers] = useState<(TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[]>([]);
@@ -93,13 +98,14 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesApprover
             ...workflow,
             steps: workflow.steps.map(step => ({
                 ...step,
-                completed: false,
                 assignees: step.assignees.filter((assignee): assignee is string => assignee !== null && assignee !== undefined)
             }))
         }));
 
+        const requestData = {filteredWorkflows, userEntitiesWithLabel};
+
         axios
-            .post(`/api/approval-workflows/create`, filteredWorkflows)
+            .post(`/api/approval-workflows/create`, requestData)
             .then(() => {
                 toast.success("Approval Workflows created successfully.");
                 setIsRedirecting(true);
@@ -135,8 +141,8 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesApprover
             startDate: Date.now(),
             status: "pending",
             steps: [
-                { key: 9998, stepType: "form-intake", stepNumber: 1, firstStep: true, finalStep: false, assignees: [null] },
-                { key: 9999, stepType: "approval-by", stepNumber: 2, firstStep: false, finalStep: true, assignees: [null] },
+                { key: 9998, stepType: "form-intake", stepNumber: 1, completed: false, firstStep: true, finalStep: false, assignees: [null] },
+                { key: 9999, stepType: "approval-by", stepNumber: 2, completed: false, firstStep: false, finalStep: true, assignees: [null] },
             ],
         };
         setWorkflows((prev) => [...prev, newWorkflow]);
diff --git a/src/pages/approval-workflows/index.tsx b/src/pages/approval-workflows/index.tsx
index 144e3447..b91ac6ef 100644
--- a/src/pages/approval-workflows/index.tsx
+++ b/src/pages/approval-workflows/index.tsx
@@ -1,5 +1,6 @@
 import Layout from "@/components/High/Layout";
 import Button from "@/components/Low/Button";
+import Input from "@/components/Low/Input";
 import Select from "@/components/Low/Select";
 import { Module, ModuleTypeLabels } from "@/interfaces";
 import { ApprovalWorkflow, ApprovalWorkflowStatus, ApprovalWorkflowStatusLabel, StepTypeLabel } from "@/interfaces/approval.workflow";
@@ -8,6 +9,7 @@ import { User } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
 import { redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
+import { getConfiguredWorkflows } from "@/utils/approval.workflows.be";
 import { getEntities } from "@/utils/entities.be";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
 import { getSpecificUsers } from "@/utils/users.be";
@@ -17,18 +19,14 @@ import clsx from "clsx";
 import { withIronSessionSsr } from "iron-session/next";
 import Head from "next/head";
 import Link from "next/link";
+import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { BsTrash } from "react-icons/bs";
 import { FaRegEdit } from "react-icons/fa";
+import { FaRegClone } from "react-icons/fa6";
 import { IoIosAddCircleOutline } from "react-icons/io";
 import { toast, ToastContainer } from "react-toastify";
 
-import Input from "@/components/Low/Input";
-import { FaRegClone } from "react-icons/fa6";
-import useApprovalWorkflows from "@/hooks/useApprovalWorkflows";
-import { getApprovalWorkflows } from "@/utils/approval.workflows.be";
-import { useRouter } from "next/router";
-
 const columnHelper = createColumnHelper<ApprovalWorkflow>();
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
@@ -38,7 +36,7 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
     if (shouldRedirectHome(user) || !["admin", "developer", "teacher", "corporate", "mastercorporate"].includes(user.type))
         return redirect("/")
 
-    const workflows = await getApprovalWorkflows();
+    const workflows = await getConfiguredWorkflows();
 
     const allAssigneeIds: string[] = [
         ...new Set(
@@ -331,7 +329,7 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
                                 className="min-w-fit text-lg font-medium flex items-center gap-2 text-left"
                             >
                                 <IoIosAddCircleOutline className="size-6" />
-                                Configure New Workflows
+                                Configure Workflows
                             </Button>
                         </Link>
                     </div>
diff --git a/src/utils/approval.workflows.be.ts b/src/utils/approval.workflows.be.ts
index f82056dd..6167385a 100644
--- a/src/utils/approval.workflows.be.ts
+++ b/src/utils/approval.workflows.be.ts
@@ -1,36 +1,83 @@
-import { ObjectId } from "mongodb";
 import { ApprovalWorkflow } from "@/interfaces/approval.workflow";
 import client from "@/lib/mongodb";
+import { ObjectId } from "mongodb";
 
 const db = client.db(process.env.MONGODB_DB);
 
-export const getApprovalWorkflows = async (ids?: string[]) => {
+export const getConfiguredWorkflows = async (ids?: string[]) => {
     return await db
-        .collection<ApprovalWorkflow>("approval-workflows")
+        .collection<ApprovalWorkflow>("configured-workflows")
         .find(ids ? { _id: { $in: ids.map((id) => new ObjectId(id)) } } : {})
         .toArray();
 };
 
-export const getApprovalWorkflow = async (id: string) => {
-    return await db.collection<ApprovalWorkflow>("approval-workflows").findOne({ _id: new ObjectId(id) });
+export const getConfiguredWorkflow = async (id: string) => {
+    return await db.collection<ApprovalWorkflow>("configured-workflows").findOne({ _id: new ObjectId(id) });
 };
 
-export const createApprovalWorkflow = async (workflow: ApprovalWorkflow) => {
-	const { _id, ...workflowWithoutId } = workflow as ApprovalWorkflow;
-    return await db.collection("approval-workflows").insertOne(workflowWithoutId);
+export const getConfiguredWorkflowsByEntities = async (ids: string[]) => {
+    return await db
+        .collection<ApprovalWorkflow>("configured-workflows")
+        .find({ entityId: { $in: ids } })
+        .toArray();
 };
 
-export const createApprovalWorkflows = async (workflows: ApprovalWorkflow[]) => {
+export const createConfiguredWorkflow = async (workflow: ApprovalWorkflow) => {
+    const { _id, ...workflowWithoutId } = workflow as ApprovalWorkflow;
+    return await db.collection("configured-workflows").insertOne(workflowWithoutId);
+};
+
+export const createConfiguredWorkflows = async (workflows: ApprovalWorkflow[]) => {
     if (workflows.length === 0) return;
-	const workflowsWithoutIds: ApprovalWorkflow[] = workflows.map(({_id, ...wfs}) => wfs)
-    return await db.collection("approval-workflows").insertMany(workflowsWithoutIds);
+    const workflowsWithoutIds: ApprovalWorkflow[] = workflows.map(({ _id, ...wfs }) => wfs);
+    return await db.collection("configured-workflows").insertMany(workflowsWithoutIds);
 };
 
-export const updateApprovalWorkflow = async (id: string, workflow: ApprovalWorkflow) => {
-	const { _id, ...workflowWithoutId } = workflow as ApprovalWorkflow;
-    return await db.collection("approval-workflows").replaceOne({ _id: new ObjectId(id) }, workflowWithoutId);
+export const updateConfiguredWorkflow = async (workflow: ApprovalWorkflow) => {
+    const { _id, ...workflowWithoutId } = workflow as ApprovalWorkflow;
+    return await db.collection("configured-workflows").replaceOne({ _id: new ObjectId(_id) }, workflowWithoutId);
 };
 
-export const deleteApprovalWorkflow = async (id: string) => {
-    return await db.collection("approval-workflows").deleteOne({ _id: new ObjectId(id) });
+export const updateConfiguredWorkflows = async (workflows: ApprovalWorkflow[]) => {
+    const bulkOperations = workflows.map((workflow) => {
+        const { _id, ...workflowWithoutId } = workflow;
+        return {
+            replaceOne: {
+                filter: { _id: new ObjectId(_id) },
+                replacement: workflowWithoutId,
+            },
+        };
+    });
+
+    return await db.collection("configured-workflows").bulkWrite(bulkOperations);
+};
+
+export const deleteConfiguredWorkflow = async (id: string) => {
+    return await db.collection("configured-workflows").deleteOne({ _id: new ObjectId(id) });
+};
+
+export const replaceConfiguredWorkflowsByEntities = async (workflows: ApprovalWorkflow[], entityIds: string[]) => {
+	// 1. Keep track of the _id values of all workflows we want to end up with
+	const finalIds = new Set<string>();
+	
+	// 2. Process incoming workflows
+	for (const workflow of workflows) {
+		if (workflow._id) {
+			// Replace the existing ones
+			await updateConfiguredWorkflow(workflow);
+			finalIds.add(workflow._id.toString());
+		} else {
+			// Insert if no _id
+			const insertResult = await createConfiguredWorkflow(workflow);
+			finalIds.add(insertResult.insertedId.toString());
+		}
+	}
+	
+    // 3. Delete any existing workflow (within these entityIds) that wasn't in the final list
+    await db.collection("configured-workflows").deleteMany({
+        _id: {
+            $nin: Array.from(finalIds).map((id) => new ObjectId(id)),
+        },
+        entityId: { $in: entityIds },
+    });
 };

From b6842627594d25f89b386ec8e586d18de019ac0d Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Sat, 1 Feb 2025 23:14:17 +0000
Subject: [PATCH 47/69] Fix id handling on update

---
 src/components/ApprovalWorkflows/WorkflowForm.tsx | 1 -
 src/pages/api/approval-workflows/[id]/edit.ts     | 2 ++
 src/pages/api/approval-workflows/[id]/index.ts    | 4 +++-
 src/pages/approval-workflows/[id]/edit.tsx        | 3 +--
 src/utils/approval.workflows.be.ts                | 2 +-
 5 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/ApprovalWorkflows/WorkflowForm.tsx b/src/components/ApprovalWorkflows/WorkflowForm.tsx
index 8cc4686d..39b0e2c5 100644
--- a/src/components/ApprovalWorkflows/WorkflowForm.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowForm.tsx
@@ -72,7 +72,6 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityApprove
 
             return { ...step, assignees: newAssignees };
         });
-
         onWorkflowChange({ ...workflow, steps: updatedSteps });
     };
 
diff --git a/src/pages/api/approval-workflows/[id]/edit.ts b/src/pages/api/approval-workflows/[id]/edit.ts
index 39fc607f..19902009 100644
--- a/src/pages/api/approval-workflows/[id]/edit.ts
+++ b/src/pages/api/approval-workflows/[id]/edit.ts
@@ -4,6 +4,7 @@ import { sessionOptions } from "@/lib/session";
 import { requestUser } from "@/utils/api";
 import { updateConfiguredWorkflow } from "@/utils/approval.workflows.be";
 import { withIronSessionApiRoute } from "iron-session/next";
+import { ObjectId } from "mongodb";
 import type { NextApiRequest, NextApiResponse } from "next";
 
 export default withIronSessionApiRoute(handler, sessionOptions);
@@ -24,6 +25,7 @@ async function put(req: NextApiRequest, res: NextApiResponse) {
     const approvalWorkflow: ApprovalWorkflow = req.body;
 
     if (id && approvalWorkflow) {
+        approvalWorkflow._id = new ObjectId(id);
         await updateConfiguredWorkflow(approvalWorkflow);
         return res.status(204).end();
     }
diff --git a/src/pages/api/approval-workflows/[id]/index.ts b/src/pages/api/approval-workflows/[id]/index.ts
index 53ce6f21..adc25819 100644
--- a/src/pages/api/approval-workflows/[id]/index.ts
+++ b/src/pages/api/approval-workflows/[id]/index.ts
@@ -4,6 +4,7 @@ import { sessionOptions } from "@/lib/session";
 import { requestUser } from "@/utils/api";
 import { deleteConfiguredWorkflow, updateConfiguredWorkflow } from "@/utils/approval.workflows.be";
 import { withIronSessionApiRoute } from "iron-session/next";
+import { ObjectId } from "mongodb";
 import type { NextApiRequest, NextApiResponse } from "next";
 
 export default withIronSessionApiRoute(handler, sessionOptions);
@@ -35,9 +36,10 @@ async function put(req: NextApiRequest, res: NextApiResponse) {
     }
 
     const { id } = req.query as { id?: string };
-    const workflow = req.body;
+    const workflow: ApprovalWorkflow = req.body;
 
     if (id && workflow) {
+        workflow._id = new ObjectId(id);
         await updateConfiguredWorkflow(workflow);
         return res.status(204).end();
     }
diff --git a/src/pages/approval-workflows/[id]/edit.tsx b/src/pages/approval-workflows/[id]/edit.tsx
index 185cc655..6a1082d8 100644
--- a/src/pages/approval-workflows/[id]/edit.tsx
+++ b/src/pages/approval-workflows/[id]/edit.tsx
@@ -65,7 +65,7 @@ export default function Home({ user, workflow, workflowEntityApprovers }: Props)
             completed: step.completed,
             completedBy: step.completedBy || undefined,
             completedDate: step.completedDate || undefined,
-            assignees: step.assignees.map(id => id),
+            assignees: step.assignees,
             firstStep: step.firstStep || false,
             finalStep: step.finalStep || false,
             onDelete: undefined,
@@ -98,7 +98,6 @@ export default function Home({ user, workflow, workflowEntityApprovers }: Props)
             ...updatedWorkflow,
             steps: updatedWorkflow.steps.map(step => ({
                 ...step,
-                completed: false,
                 assignees: step.assignees.filter((assignee): assignee is string => assignee !== null && assignee !== undefined)
             }))
         };
diff --git a/src/utils/approval.workflows.be.ts b/src/utils/approval.workflows.be.ts
index 6167385a..f3837a60 100644
--- a/src/utils/approval.workflows.be.ts
+++ b/src/utils/approval.workflows.be.ts
@@ -35,7 +35,7 @@ export const createConfiguredWorkflows = async (workflows: ApprovalWorkflow[]) =
 
 export const updateConfiguredWorkflow = async (workflow: ApprovalWorkflow) => {
     const { _id, ...workflowWithoutId } = workflow as ApprovalWorkflow;
-    return await db.collection("configured-workflows").replaceOne({ _id: new ObjectId(_id) }, workflowWithoutId);
+    return await db.collection("configured-workflows").replaceOne({ _id: _id }, workflowWithoutId);
 };
 
 export const updateConfiguredWorkflows = async (workflows: ApprovalWorkflow[]) => {

From 16545d2075a18e861af364a2cb29fb643668ab7f Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Sun, 2 Feb 2025 11:11:52 +0000
Subject: [PATCH 48/69] refactor workflows api

---
 .../api/approval-workflows/[id]/clone.ts      |  4 +-
 src/pages/api/approval-workflows/[id]/edit.ts |  4 +-
 .../api/approval-workflows/[id]/index.ts      |  6 +--
 src/pages/api/approval-workflows/create.ts    |  4 +-
 src/pages/approval-workflows/[id]/clone.tsx   |  4 +-
 src/pages/approval-workflows/[id]/edit.tsx    |  4 +-
 src/pages/approval-workflows/[id]/index.tsx   |  4 +-
 src/pages/approval-workflows/create.tsx       |  4 +-
 src/pages/approval-workflows/index.tsx        |  4 +-
 src/utils/approval.workflows.be.ts            | 40 +++++++++----------
 10 files changed, 39 insertions(+), 39 deletions(-)

diff --git a/src/pages/api/approval-workflows/[id]/clone.ts b/src/pages/api/approval-workflows/[id]/clone.ts
index be0ee1b8..73fd4153 100644
--- a/src/pages/api/approval-workflows/[id]/clone.ts
+++ b/src/pages/api/approval-workflows/[id]/clone.ts
@@ -2,7 +2,7 @@
 import { ApprovalWorkflow } from "@/interfaces/approval.workflow";
 import { sessionOptions } from "@/lib/session";
 import { requestUser } from "@/utils/api";
-import { createConfiguredWorkflow } from "@/utils/approval.workflows.be";
+import { createApprovalWorkflow } from "@/utils/approval.workflows.be";
 import { withIronSessionApiRoute } from "iron-session/next";
 import type { NextApiRequest, NextApiResponse } from "next";
 
@@ -23,5 +23,5 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
     const approvalWorkflow: ApprovalWorkflow = req.body;
 
     if (approvalWorkflow)
-        return res.status(201).json(await createConfiguredWorkflow(approvalWorkflow));
+        return res.status(201).json(await createApprovalWorkflow("configured-workflows", approvalWorkflow));
 }
diff --git a/src/pages/api/approval-workflows/[id]/edit.ts b/src/pages/api/approval-workflows/[id]/edit.ts
index 19902009..556d0e52 100644
--- a/src/pages/api/approval-workflows/[id]/edit.ts
+++ b/src/pages/api/approval-workflows/[id]/edit.ts
@@ -2,7 +2,7 @@
 import { ApprovalWorkflow } from "@/interfaces/approval.workflow";
 import { sessionOptions } from "@/lib/session";
 import { requestUser } from "@/utils/api";
-import { updateConfiguredWorkflow } from "@/utils/approval.workflows.be";
+import { updateApprovalWorkflow } from "@/utils/approval.workflows.be";
 import { withIronSessionApiRoute } from "iron-session/next";
 import { ObjectId } from "mongodb";
 import type { NextApiRequest, NextApiResponse } from "next";
@@ -26,7 +26,7 @@ async function put(req: NextApiRequest, res: NextApiResponse) {
 
     if (id && approvalWorkflow) {
         approvalWorkflow._id = new ObjectId(id);
-        await updateConfiguredWorkflow(approvalWorkflow);
+        await updateApprovalWorkflow("configured-workflows", approvalWorkflow);
         return res.status(204).end();
     }
 }
diff --git a/src/pages/api/approval-workflows/[id]/index.ts b/src/pages/api/approval-workflows/[id]/index.ts
index adc25819..6664ac9d 100644
--- a/src/pages/api/approval-workflows/[id]/index.ts
+++ b/src/pages/api/approval-workflows/[id]/index.ts
@@ -2,7 +2,7 @@
 import { ApprovalWorkflow } from "@/interfaces/approval.workflow";
 import { sessionOptions } from "@/lib/session";
 import { requestUser } from "@/utils/api";
-import { deleteConfiguredWorkflow, updateConfiguredWorkflow } from "@/utils/approval.workflows.be";
+import { deleteApprovalWorkflow, updateApprovalWorkflow } from "@/utils/approval.workflows.be";
 import { withIronSessionApiRoute } from "iron-session/next";
 import { ObjectId } from "mongodb";
 import type { NextApiRequest, NextApiResponse } from "next";
@@ -24,7 +24,7 @@ async function del(req: NextApiRequest, res: NextApiResponse) {
 
     const { id } = req.query as { id?: string };
 
-    if (id) return res.status(200).json(await deleteConfiguredWorkflow(id));
+    if (id) return res.status(200).json(await deleteApprovalWorkflow("configured-workflows", id));
 }
 
 async function put(req: NextApiRequest, res: NextApiResponse) {
@@ -40,7 +40,7 @@ async function put(req: NextApiRequest, res: NextApiResponse) {
 
     if (id && workflow) {
         workflow._id = new ObjectId(id);
-        await updateConfiguredWorkflow(workflow);
+        await updateApprovalWorkflow("configured-workflows", workflow);
         return res.status(204).end();
     }
 }
diff --git a/src/pages/api/approval-workflows/create.ts b/src/pages/api/approval-workflows/create.ts
index cbdddb02..0e292a00 100644
--- a/src/pages/api/approval-workflows/create.ts
+++ b/src/pages/api/approval-workflows/create.ts
@@ -3,7 +3,7 @@ import { ApprovalWorkflow } from "@/interfaces/approval.workflow";
 import { Entity } from "@/interfaces/entity";
 import { sessionOptions } from "@/lib/session";
 import { requestUser } from "@/utils/api";
-import { replaceConfiguredWorkflowsByEntities } from "@/utils/approval.workflows.be";
+import { replaceApprovalWorkflowsByEntities } from "@/utils/approval.workflows.be";
 import { withIronSessionApiRoute } from "iron-session/next";
 import type { NextApiRequest, NextApiResponse } from "next";
 
@@ -31,7 +31,7 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
     const configuredWorkflows: ApprovalWorkflow[] = filteredWorkflows;
     const entitiesIds: string[] = userEntitiesWithLabel.map((e) => e.id);
 
-    await replaceConfiguredWorkflowsByEntities(configuredWorkflows, entitiesIds);
+    await replaceApprovalWorkflowsByEntities("configured-workflows", configuredWorkflows, entitiesIds);
 
     return res.status(201).json({ ok: true });
 }
diff --git a/src/pages/approval-workflows/[id]/clone.tsx b/src/pages/approval-workflows/[id]/clone.tsx
index b42293a1..6862d53c 100644
--- a/src/pages/approval-workflows/[id]/clone.tsx
+++ b/src/pages/approval-workflows/[id]/clone.tsx
@@ -24,7 +24,7 @@ import { GrClearOption } from "react-icons/gr";
 import { toast, ToastContainer } from "react-toastify";
 import { useRouter } from "next/router";
 import axios from "axios";
-import { getConfiguredWorkflow } from "@/utils/approval.workflows.be";
+import { getApprovalWorkflow } from "@/utils/approval.workflows.be";
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => {
     const user = await requestUser(req, res);
@@ -35,7 +35,7 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
 
     const { id } = params as { id: string };
 
-    const workflow: ApprovalWorkflow | null = await getConfiguredWorkflow(id);
+    const workflow: ApprovalWorkflow | null = await getApprovalWorkflow("configured-workflows", id);
 
     if (!workflow)
         return redirect("/approval-workflows")
diff --git a/src/pages/approval-workflows/[id]/edit.tsx b/src/pages/approval-workflows/[id]/edit.tsx
index 6a1082d8..656c0326 100644
--- a/src/pages/approval-workflows/[id]/edit.tsx
+++ b/src/pages/approval-workflows/[id]/edit.tsx
@@ -8,7 +8,7 @@ import { CorporateUser, DeveloperUser, MasterCorporateUser, TeacherUser, User }
 import { sessionOptions } from "@/lib/session";
 import { redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
-import { getConfiguredWorkflow } from "@/utils/approval.workflows.be";
+import { getApprovalWorkflow } from "@/utils/approval.workflows.be";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
 import { getEntityUsers } from "@/utils/users.be";
 import axios from "axios";
@@ -30,7 +30,7 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
 
     const { id } = params as { id: string };
 
-    const workflow: ApprovalWorkflow | null = await getConfiguredWorkflow(id);
+    const workflow: ApprovalWorkflow | null = await getApprovalWorkflow("configured-workflows", id);
 
     if (!workflow)
         return redirect("/approval-workflows")
diff --git a/src/pages/approval-workflows/[id]/index.tsx b/src/pages/approval-workflows/[id]/index.tsx
index 12d79a90..44416384 100644
--- a/src/pages/approval-workflows/[id]/index.tsx
+++ b/src/pages/approval-workflows/[id]/index.tsx
@@ -11,7 +11,7 @@ import { User } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
 import { redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
-import { getConfiguredWorkflow } from "@/utils/approval.workflows.be";
+import { getApprovalWorkflow } from "@/utils/approval.workflows.be";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
 import { getSpecificUsers, getUser } from "@/utils/users.be";
 import axios from "axios";
@@ -41,7 +41,7 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
 
     const { id } = params as { id: string };
 
-    const workflow: ApprovalWorkflow | null = await getConfiguredWorkflow(id);
+    const workflow: ApprovalWorkflow | null = await getApprovalWorkflow("configured-workflows", id);
 
     if (!workflow)
         return redirect("/approval-workflows")
diff --git a/src/pages/approval-workflows/create.tsx b/src/pages/approval-workflows/create.tsx
index 999e971c..03c058e3 100644
--- a/src/pages/approval-workflows/create.tsx
+++ b/src/pages/approval-workflows/create.tsx
@@ -10,7 +10,7 @@ import { CorporateUser, DeveloperUser, MasterCorporateUser, TeacherUser, User }
 import { sessionOptions } from "@/lib/session";
 import { redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
-import { getConfiguredWorkflowsByEntities } from "@/utils/approval.workflows.be";
+import { getApprovalWorkflowsByEntities } from "@/utils/approval.workflows.be";
 import { getEntities } from "@/utils/entities.be";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
 import { getEntitiesUsers } from "@/utils/users.be";
@@ -35,7 +35,7 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
 
     const userEntitiesWithLabel = await getEntities(user.entities.map(entity => entity.id));
     
-    const allConfiguredWorkflows = await getConfiguredWorkflowsByEntities(userEntitiesWithLabel.map(entity => entity.id));
+    const allConfiguredWorkflows = await getApprovalWorkflowsByEntities("configured-workflows", userEntitiesWithLabel.map(entity => entity.id));
 
     return {
         props: serialize({
diff --git a/src/pages/approval-workflows/index.tsx b/src/pages/approval-workflows/index.tsx
index b91ac6ef..18bc8d8a 100644
--- a/src/pages/approval-workflows/index.tsx
+++ b/src/pages/approval-workflows/index.tsx
@@ -9,7 +9,7 @@ import { User } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
 import { redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
-import { getConfiguredWorkflows } from "@/utils/approval.workflows.be";
+import { getApprovalWorkflows } from "@/utils/approval.workflows.be";
 import { getEntities } from "@/utils/entities.be";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
 import { getSpecificUsers } from "@/utils/users.be";
@@ -36,7 +36,7 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
     if (shouldRedirectHome(user) || !["admin", "developer", "teacher", "corporate", "mastercorporate"].includes(user.type))
         return redirect("/")
 
-    const workflows = await getConfiguredWorkflows();
+    const workflows = await getApprovalWorkflows("configured-workflows");
 
     const allAssigneeIds: string[] = [
         ...new Set(
diff --git a/src/utils/approval.workflows.be.ts b/src/utils/approval.workflows.be.ts
index f3837a60..0d226a69 100644
--- a/src/utils/approval.workflows.be.ts
+++ b/src/utils/approval.workflows.be.ts
@@ -4,41 +4,41 @@ import { ObjectId } from "mongodb";
 
 const db = client.db(process.env.MONGODB_DB);
 
-export const getConfiguredWorkflows = async (ids?: string[]) => {
+export const getApprovalWorkflows = async (collection: string, ids?: string[]) => {
     return await db
-        .collection<ApprovalWorkflow>("configured-workflows")
+        .collection<ApprovalWorkflow>(collection)
         .find(ids ? { _id: { $in: ids.map((id) => new ObjectId(id)) } } : {})
         .toArray();
 };
 
-export const getConfiguredWorkflow = async (id: string) => {
-    return await db.collection<ApprovalWorkflow>("configured-workflows").findOne({ _id: new ObjectId(id) });
+export const getApprovalWorkflow = async (collection: string, id: string) => {
+    return await db.collection<ApprovalWorkflow>(collection).findOne({ _id: new ObjectId(id) });
 };
 
-export const getConfiguredWorkflowsByEntities = async (ids: string[]) => {
+export const getApprovalWorkflowsByEntities = async (collection: string, ids: string[]) => {
     return await db
-        .collection<ApprovalWorkflow>("configured-workflows")
+        .collection<ApprovalWorkflow>(collection)
         .find({ entityId: { $in: ids } })
         .toArray();
 };
 
-export const createConfiguredWorkflow = async (workflow: ApprovalWorkflow) => {
+export const createApprovalWorkflow = async (collection: string, workflow: ApprovalWorkflow) => {
     const { _id, ...workflowWithoutId } = workflow as ApprovalWorkflow;
-    return await db.collection("configured-workflows").insertOne(workflowWithoutId);
+    return await db.collection(collection).insertOne(workflowWithoutId);
 };
 
-export const createConfiguredWorkflows = async (workflows: ApprovalWorkflow[]) => {
+export const createApprovalWorkflows = async (collection: string, workflows: ApprovalWorkflow[]) => {
     if (workflows.length === 0) return;
     const workflowsWithoutIds: ApprovalWorkflow[] = workflows.map(({ _id, ...wfs }) => wfs);
-    return await db.collection("configured-workflows").insertMany(workflowsWithoutIds);
+    return await db.collection(collection).insertMany(workflowsWithoutIds);
 };
 
-export const updateConfiguredWorkflow = async (workflow: ApprovalWorkflow) => {
+export const updateApprovalWorkflow = async (collection: string, workflow: ApprovalWorkflow) => {
     const { _id, ...workflowWithoutId } = workflow as ApprovalWorkflow;
-    return await db.collection("configured-workflows").replaceOne({ _id: _id }, workflowWithoutId);
+    return await db.collection(collection).replaceOne({ _id: _id }, workflowWithoutId);
 };
 
-export const updateConfiguredWorkflows = async (workflows: ApprovalWorkflow[]) => {
+export const updateApprovalWorkflows = async (collection: string, workflows: ApprovalWorkflow[]) => {
     const bulkOperations = workflows.map((workflow) => {
         const { _id, ...workflowWithoutId } = workflow;
         return {
@@ -49,14 +49,14 @@ export const updateConfiguredWorkflows = async (workflows: ApprovalWorkflow[]) =
         };
     });
 
-    return await db.collection("configured-workflows").bulkWrite(bulkOperations);
+    return await db.collection(collection).bulkWrite(bulkOperations);
 };
 
-export const deleteConfiguredWorkflow = async (id: string) => {
-    return await db.collection("configured-workflows").deleteOne({ _id: new ObjectId(id) });
+export const deleteApprovalWorkflow = async (collection: string, id: string) => {
+    return await db.collection(collection).deleteOne({ _id: new ObjectId(id) });
 };
 
-export const replaceConfiguredWorkflowsByEntities = async (workflows: ApprovalWorkflow[], entityIds: string[]) => {
+export const replaceApprovalWorkflowsByEntities = async (collection: string, workflows: ApprovalWorkflow[], entityIds: string[]) => {
 	// 1. Keep track of the _id values of all workflows we want to end up with
 	const finalIds = new Set<string>();
 	
@@ -64,17 +64,17 @@ export const replaceConfiguredWorkflowsByEntities = async (workflows: ApprovalWo
 	for (const workflow of workflows) {
 		if (workflow._id) {
 			// Replace the existing ones
-			await updateConfiguredWorkflow(workflow);
+			await updateApprovalWorkflow(collection, workflow);
 			finalIds.add(workflow._id.toString());
 		} else {
 			// Insert if no _id
-			const insertResult = await createConfiguredWorkflow(workflow);
+			const insertResult = await createApprovalWorkflow(collection, workflow);
 			finalIds.add(insertResult.insertedId.toString());
 		}
 	}
 	
     // 3. Delete any existing workflow (within these entityIds) that wasn't in the final list
-    await db.collection("configured-workflows").deleteMany({
+    await db.collection(collection).deleteMany({
         _id: {
             $nin: Array.from(finalIds).map((id) => new ObjectId(id)),
         },

From 835a9bee0338b6cc558afbe29d692ceb17f4c1ca Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Sun, 2 Feb 2025 22:40:05 +0000
Subject: [PATCH 49/69] - Filter available form intakers so that no form
 intaker can be in two workflows at once. - add getApprovalWorkflowByIntaker
 to prepare workflow start after exam creation. - fix builder bug with step
 keys - ignore edit view for now because it will only be available for active
 workflows and not configured workflows.

---
 .../ApprovalWorkflows/WorkflowForm.tsx        |  9 ++-
 src/pages/api/approval-workflows/create.ts    |  2 +-
 src/pages/approval-workflows/[id]/clone.tsx   |  7 +-
 src/pages/approval-workflows/create.tsx       | 39 ++++++++--
 src/utils/approval.workflows.be.ts            | 71 ++++++++++++++-----
 5 files changed, 97 insertions(+), 31 deletions(-)

diff --git a/src/components/ApprovalWorkflows/WorkflowForm.tsx b/src/components/ApprovalWorkflows/WorkflowForm.tsx
index 39b0e2c5..4d27e150 100644
--- a/src/components/ApprovalWorkflows/WorkflowForm.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowForm.tsx
@@ -13,12 +13,12 @@ interface Props {
     workflow: EditableApprovalWorkflow;
     onWorkflowChange: (workflow: EditableApprovalWorkflow) => void;
     entityApprovers: (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[];
+    entityAvailableFormIntakers: (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[];
     isLoading: boolean;
     isRedirecting: boolean;
 }
 
-export default function WorkflowForm({ workflow, onWorkflowChange, entityApprovers, isLoading, isRedirecting }: Props) {
-    const [stepCounter, setStepCounter] = useState<number>(3); // to guarantee unique keys used for animations
+export default function WorkflowForm({ workflow, onWorkflowChange, entityApprovers, entityAvailableFormIntakers, isLoading, isRedirecting }: Props) {
     const lastStep = workflow.steps[workflow.steps.length - 1];
 
     const renumberSteps = (steps: EditableWorkflowStep[]): EditableWorkflowStep[] => {
@@ -30,7 +30,7 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityApprove
 
     const addStep = () => {
         const newStep: EditableWorkflowStep = {
-            key: stepCounter,
+            key: Date.now(),
             stepType: "approval-by",
             stepNumber: workflow.steps.length,
             completed: false,
@@ -38,7 +38,6 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityApprove
             firstStep: false,
             finalStep: false,
         };
-        setStepCounter((count) => count + 1);
 
         const updatedSteps = [
             ...workflow.steps.slice(0, -1),
@@ -137,7 +136,7 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityApprove
                                         finalStep={step.finalStep}
                                         onDelete={() => handleDelete(step.key)}
                                         onSelectChange={(numberOfSelects, idx, option) => handleSelectChange(step.key, numberOfSelects, idx, option)}
-                                        entityApprovers={entityApprovers}
+                                        entityApprovers={step.stepNumber === 1 ? entityAvailableFormIntakers : entityApprovers}
                                     />
 
                                     {step.finalStep &&
diff --git a/src/pages/api/approval-workflows/create.ts b/src/pages/api/approval-workflows/create.ts
index 0e292a00..ddd46da5 100644
--- a/src/pages/api/approval-workflows/create.ts
+++ b/src/pages/api/approval-workflows/create.ts
@@ -31,7 +31,7 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
     const configuredWorkflows: ApprovalWorkflow[] = filteredWorkflows;
     const entitiesIds: string[] = userEntitiesWithLabel.map((e) => e.id);
 
-    await replaceApprovalWorkflowsByEntities("configured-workflows", configuredWorkflows, entitiesIds);
+    await replaceApprovalWorkflowsByEntities(configuredWorkflows, entitiesIds);
 
     return res.status(201).json({ ok: true });
 }
diff --git a/src/pages/approval-workflows/[id]/clone.tsx b/src/pages/approval-workflows/[id]/clone.tsx
index 6862d53c..d8a363ef 100644
--- a/src/pages/approval-workflows/[id]/clone.tsx
+++ b/src/pages/approval-workflows/[id]/clone.tsx
@@ -24,7 +24,7 @@ import { GrClearOption } from "react-icons/gr";
 import { toast, ToastContainer } from "react-toastify";
 import { useRouter } from "next/router";
 import axios from "axios";
-import { getApprovalWorkflow } from "@/utils/approval.workflows.be";
+import { getApprovalWorkflow, getFormIntakersByEntity } from "@/utils/approval.workflows.be";
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => {
     const user = await requestUser(req, res);
@@ -47,6 +47,7 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
             user,
             workflow,
             userEntitiesWithLabel,
+            entityUnavailableFormIntakers: await getFormIntakersByEntity(workflow.entityId),
             userEntitiesApprovers: await getEntitiesUsers(userEntitiesWithLabel.map(entity => entity.id), { type: { $in: ["teacher", "corporate", "mastercorporate", "developer"] } }) as (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[],
         }),
     };
@@ -56,10 +57,11 @@ interface Props {
     user: User,
     workflow: ApprovalWorkflow,
     userEntitiesWithLabel: Entity[],
+    entityUnavailableFormIntakers: string[],
     userEntitiesApprovers: (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[],
 }
 
-export default function Home({ user, workflow, userEntitiesWithLabel, userEntitiesApprovers }: Props) {
+export default function Home({ user, workflow, userEntitiesWithLabel, entityUnavailableFormIntakers, userEntitiesApprovers }: Props) {
     const [cloneWorkflow, setCloneWorkflow] = useState<EditableApprovalWorkflow | null>(null);
     const [entityId, setEntityId] = useState<string | null | undefined>(workflow.entityId);
     const [entityApprovers, setEntityApprovers] = useState<(TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[]>([]);
@@ -276,6 +278,7 @@ export default function Home({ user, workflow, userEntitiesWithLabel, userEntiti
                                                 workflow={cloneWorkflow}
                                                 onWorkflowChange={onWorkflowChange}
                                                 entityApprovers={entityApprovers}
+                                                entityAvailableFormIntakers={entityApprovers.filter(approver => !entityUnavailableFormIntakers.includes(approver.id))}
                                                 isLoading={isLoading}
                                                 isRedirecting={isRedirecting}
                                             />
diff --git a/src/pages/approval-workflows/create.tsx b/src/pages/approval-workflows/create.tsx
index 03c058e3..0527b651 100644
--- a/src/pages/approval-workflows/create.tsx
+++ b/src/pages/approval-workflows/create.tsx
@@ -34,7 +34,7 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
         return redirect("/")
 
     const userEntitiesWithLabel = await getEntities(user.entities.map(entity => entity.id));
-    
+
     const allConfiguredWorkflows = await getApprovalWorkflowsByEntities("configured-workflows", userEntitiesWithLabel.map(entity => entity.id));
 
     return {
@@ -59,6 +59,7 @@ export default function Home({ user, allConfiguredWorkflows, userEntitiesWithLab
     const [selectedWorkflowId, setSelectedWorkflowId] = useState<string | undefined>(undefined);
     const [entityId, setEntityId] = useState<string | null | undefined>(null);
     const [entityApprovers, setEntityApprovers] = useState<(TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[]>([]);
+    const [entityAvailableFormIntakers, setEntityAvailableFormIntakers] = useState<(TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[]>([]);
     const [isAdding, setIsAdding] = useState<boolean>(false); // used to temporary timeout new workflow button. With animations, clicking too fast might cause state inconsistencies between renders.
     const [isLoading, setIsLoading] = useState<boolean>(false);
     const [isRedirecting, setIsRedirecting] = useState<boolean>(false);
@@ -72,11 +73,40 @@ export default function Home({ user, allConfiguredWorkflows, userEntitiesWithLab
                     approver.entities.some(entity => entity.id === entityId)
                 )
             );
-        } else {
-            setEntityApprovers([]);
         }
     }, [entityId, userEntitiesApprovers]);
 
+    useEffect(() => {
+        if (entityId) {
+            // Get all workflows for the selected entity
+            const workflowsForEntity = workflows.filter(wf => wf.entityId === entityId);
+
+            // For all workflows except the current one, collect the first step assignees
+            const assignedFormIntakers = workflowsForEntity.reduce<string[]>((acc, wf) => {
+                if (wf.id === selectedWorkflowId) return acc; // skip current workflow so its selection isn’t removed
+
+                const formIntakeStep = wf.steps.find(step => step.stepType === "form-intake");
+                if (formIntakeStep) {
+                    // Only consider non-null assignees
+                    const validAssignees = formIntakeStep.assignees.filter(
+                        (assignee): assignee is string => !!assignee
+                    );
+                    return acc.concat(validAssignees);
+                }
+                return acc;
+            }, []);
+
+            // Now filter out any user from entityApprovers whose id is in the assignedFormIntakers list.
+            // (The selected one in the current workflow is allowed even if it is in the list.)
+            const availableFormIntakers = entityApprovers.filter(assignee =>
+                !assignedFormIntakers.includes(assignee.id)
+            );
+
+            setEntityAvailableFormIntakers(availableFormIntakers);
+        }
+    }, [entityId, entityApprovers, workflows, selectedWorkflowId]);
+
+
     const currentWorkflow = workflows.find(wf => wf.id === selectedWorkflowId);
 
     const ENTITY_OPTIONS = userEntitiesWithLabel.map(entity => ({
@@ -102,7 +132,7 @@ export default function Home({ user, allConfiguredWorkflows, userEntitiesWithLab
             }))
         }));
 
-        const requestData = {filteredWorkflows, userEntitiesWithLabel};
+        const requestData = { filteredWorkflows, userEntitiesWithLabel };
 
         axios
             .post(`/api/approval-workflows/create`, requestData)
@@ -316,6 +346,7 @@ export default function Home({ user, allConfiguredWorkflows, userEntitiesWithLab
                                                 workflow={currentWorkflow}
                                                 onWorkflowChange={onWorkflowChange}
                                                 entityApprovers={entityApprovers}
+                                                entityAvailableFormIntakers={entityAvailableFormIntakers}
                                                 isLoading={isLoading}
                                                 isRedirecting={isRedirecting}
                                             />
diff --git a/src/utils/approval.workflows.be.ts b/src/utils/approval.workflows.be.ts
index 0d226a69..baf02bfd 100644
--- a/src/utils/approval.workflows.be.ts
+++ b/src/utils/approval.workflows.be.ts
@@ -22,6 +22,39 @@ export const getApprovalWorkflowsByEntities = async (collection: string, ids: st
         .toArray();
 };
 
+export const getApprovalWorkflowByFormIntaker = async (entityId: string, formIntakerId: string) => {
+    return await db.collection<ApprovalWorkflow>("configured-workflows").findOne({
+        entityId,
+        steps: {
+            $elemMatch: {
+                stepNumber: 1,
+                assignees: formIntakerId,
+            },
+        },
+    });
+};
+
+export const getFormIntakersByEntity = async (entityId: string) => {
+    const results = await db
+        .collection<ApprovalWorkflow>("configured-workflows")
+        .aggregate([
+            // 1. Match workflows with the provided entityId
+            { $match: { entityId } },
+            // 2. Unwind the steps array to process each step individually
+            { $unwind: "$steps" },
+            // 3. Filter for the first step (you could also check for a "firstStep" flag if you prefer)
+            { $match: { "steps.stepNumber": 1 } },
+            // 4. Unwind the assignees array so that each assignee is handled separately
+            { $unwind: "$steps.assignees" },
+            // 5. Group by null (i.e. all documents) and add each assignee to a set to remove duplicates
+            { $group: { _id: null, assignees: { $addToSet: "$steps.assignees" } } },
+        ])
+        .toArray();
+
+    // Return the assignees if the aggregation found any; otherwise return an empty array
+    return results.length > 0 ? results[0].assignees : [];
+};
+
 export const createApprovalWorkflow = async (collection: string, workflow: ApprovalWorkflow) => {
     const { _id, ...workflowWithoutId } = workflow as ApprovalWorkflow;
     return await db.collection(collection).insertOne(workflowWithoutId);
@@ -35,7 +68,7 @@ export const createApprovalWorkflows = async (collection: string, workflows: App
 
 export const updateApprovalWorkflow = async (collection: string, workflow: ApprovalWorkflow) => {
     const { _id, ...workflowWithoutId } = workflow as ApprovalWorkflow;
-    return await db.collection(collection).replaceOne({ _id: _id }, workflowWithoutId);
+    return await db.collection(collection).replaceOne({ _id: new ObjectId(_id) }, workflowWithoutId);
 };
 
 export const updateApprovalWorkflows = async (collection: string, workflows: ApprovalWorkflow[]) => {
@@ -56,25 +89,25 @@ export const deleteApprovalWorkflow = async (collection: string, id: string) =>
     return await db.collection(collection).deleteOne({ _id: new ObjectId(id) });
 };
 
-export const replaceApprovalWorkflowsByEntities = async (collection: string, workflows: ApprovalWorkflow[], entityIds: string[]) => {
-	// 1. Keep track of the _id values of all workflows we want to end up with
-	const finalIds = new Set<string>();
-	
-	// 2. Process incoming workflows
-	for (const workflow of workflows) {
-		if (workflow._id) {
-			// Replace the existing ones
-			await updateApprovalWorkflow(collection, workflow);
-			finalIds.add(workflow._id.toString());
-		} else {
-			// Insert if no _id
-			const insertResult = await createApprovalWorkflow(collection, workflow);
-			finalIds.add(insertResult.insertedId.toString());
-		}
-	}
-	
+export const replaceApprovalWorkflowsByEntities = async (workflows: ApprovalWorkflow[], entityIds: string[]) => {
+    // 1. Keep track of the _id values of all workflows we want to end up with
+    const finalIds = new Set<string>();
+
+    // 2. Process incoming workflows
+    for (const workflow of workflows) {
+        if (workflow._id) {
+            // Replace the existing ones
+            await updateApprovalWorkflow("configured-workflows", workflow);
+            finalIds.add(workflow._id.toString());
+        } else {
+            // Insert if no _id
+            const insertResult = await createApprovalWorkflow("configured-workflows", workflow);
+            finalIds.add(insertResult.insertedId.toString());
+        }
+    }
+
     // 3. Delete any existing workflow (within these entityIds) that wasn't in the final list
-    await db.collection(collection).deleteMany({
+    await db.collection("configured-workflows").deleteMany({
         _id: {
             $nin: Array.from(finalIds).map((id) => new ObjectId(id)),
         },

From 5a685ebe805a5e08a9a11e65c75c7e8eaa702bf1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Marques=20Lima?= <francisco.lima@helppier.com>
Date: Sun, 2 Feb 2025 23:58:23 +0000
Subject: [PATCH 50/69] Remove unused imports and changed and improved layout
 design and responsiveness in some components and fixed some bugs.

---
 .../ExamEditor/SettingsEditor/index.tsx       |   2 +-
 .../SettingsEditor/listening/components.tsx   |   2 +-
 .../SettingsEditor/reading/components.tsx     | 217 ++--
 .../ExamEditor/Shared/ExerciseLabel.tsx       |   4 +-
 src/components/ExamEditor/index.tsx           | 455 +++++----
 .../Exercises/MatchSentences/DragNDrop.tsx    |   2 +-
 src/components/High/CardList.tsx              |   2 -
 src/components/High/Table.tsx                 | 248 +++--
 src/components/Sidebar.tsx                    |   2 +-
 src/components/Solutions/MatchSentences.tsx   |   2 +-
 src/exams/Selection.tsx                       |  10 +-
 src/hooks/useEntitiesUsers.tsx                |   9 +-
 src/pages/(admin)/CorporateGradingSystem.tsx  | 459 ++++++---
 src/pages/(admin)/Lists/UserList.tsx          | 932 +++++++++++-------
 src/pages/_app.tsx                            |   2 -
 src/pages/api/tickets/assignedToUser/index.ts |   2 +-
 src/pages/dashboard/admin.tsx                 |  13 +-
 src/pages/dashboard/corporate.tsx             |   1 -
 src/pages/dashboard/index.tsx                 |   1 -
 src/pages/dashboard/mastercorporate.tsx       |   1 -
 src/pages/dashboard/student.tsx               |  21 +-
 src/pages/generation.tsx                      |   2 +-
 src/pages/official-exam.tsx                   |   1 -
 src/styles/globals.css                        | 136 ++-
 src/utils/users.ts                            |   9 +-
 25 files changed, 1504 insertions(+), 1031 deletions(-)

diff --git a/src/components/ExamEditor/SettingsEditor/index.tsx b/src/components/ExamEditor/SettingsEditor/index.tsx
index 306a578b..faf6bcbc 100644
--- a/src/components/ExamEditor/SettingsEditor/index.tsx
+++ b/src/components/ExamEditor/SettingsEditor/index.tsx
@@ -95,7 +95,7 @@ const SettingsEditor: React.FC<SettingsEditorProps> = ({
     }, [updateLocalAndScheduleGlobal]);
 
     return (
-        <div className={`flex flex-col gap-8 border bg-ielts-${module}/20 rounded-3xl p-8 w-1/3 h-fit`}>
+        <div className={`flex flex-col gap-8 border bg-ielts-${module}/20 rounded-3xl p-8 w-1/3 h-fit -2xl:w-full`}>
             <div className={`w-full flex justify-center text-ielts-${module} font-bold text-xl`}>{sectionLabel} Settings</div>
             <div className="flex flex-col gap-4">
                 <Dropdown
diff --git a/src/components/ExamEditor/SettingsEditor/listening/components.tsx b/src/components/ExamEditor/SettingsEditor/listening/components.tsx
index f1c846f6..08d076a5 100644
--- a/src/components/ExamEditor/SettingsEditor/listening/components.tsx
+++ b/src/components/ExamEditor/SettingsEditor/listening/components.tsx
@@ -233,7 +233,7 @@ const ListeningComponents: React.FC<Props> = ({ currentSection, localSettings, u
                 setIsOpen={(isOpen: boolean) => updateLocalAndScheduleGlobal({ isAudioContextOpen: isOpen }, false)}
                 contentWrapperClassName={level ? `border border-ielts-listening` : ''}
             >
-                <div className="flex flex-row gap-2 items-center px-2 pb-4">
+                <div className="flex flex-row flex-wrap gap-2 items-center px-2 pb-4">
                     <div className="flex flex-col flex-grow gap-4 px-2">
                         <label className="font-normal text-base text-mti-gray-dim">Topic (Optional)</label>
                         <Input
diff --git a/src/components/ExamEditor/SettingsEditor/reading/components.tsx b/src/components/ExamEditor/SettingsEditor/reading/components.tsx
index bef3bc56..6553d83e 100644
--- a/src/components/ExamEditor/SettingsEditor/reading/components.tsx
+++ b/src/components/ExamEditor/SettingsEditor/reading/components.tsx
@@ -5,103 +5,140 @@ import ExercisePicker from "../../ExercisePicker";
 import { generate } from "../Shared/Generate";
 import GenerateBtn from "../Shared/GenerateBtn";
 import { LevelPart, ReadingPart } from "@/interfaces/exam";
-import { LevelSectionSettings, ReadingSectionSettings } from "@/stores/examEditor/types";
+import {
+  LevelSectionSettings,
+  ReadingSectionSettings,
+} from "@/stores/examEditor/types";
 import useExamEditorStore from "@/stores/examEditor";
 
 interface Props {
-    localSettings: ReadingSectionSettings | LevelSectionSettings;
-    updateLocalAndScheduleGlobal: (updates: Partial<ReadingSectionSettings | LevelSectionSettings>, schedule?: boolean) => void;
-    currentSection: ReadingPart | LevelPart;
-    generatePassageDisabled?: boolean;
-    levelId?: number;
-    level?: boolean;
+  localSettings: ReadingSectionSettings | LevelSectionSettings;
+  updateLocalAndScheduleGlobal: (
+    updates: Partial<ReadingSectionSettings | LevelSectionSettings>,
+    schedule?: boolean
+  ) => void;
+  currentSection: ReadingPart | LevelPart;
+  generatePassageDisabled?: boolean;
+  levelId?: number;
+  level?: boolean;
 }
 
-const ReadingComponents: React.FC<Props> = ({localSettings, updateLocalAndScheduleGlobal, currentSection, levelId, level = false, generatePassageDisabled = false}) => {
-    const { currentModule } = useExamEditorStore();
-    const {
-        focusedSection,
-        difficulty,
-    } = useExamEditorStore(state => state.modules[currentModule]);
+const ReadingComponents: React.FC<Props> = ({
+  localSettings,
+  updateLocalAndScheduleGlobal,
+  currentSection,
+  levelId,
+  level = false,
+  generatePassageDisabled = false,
+}) => {
+  const { currentModule } = useExamEditorStore();
+  const { focusedSection, difficulty } = useExamEditorStore(
+    (state) => state.modules[currentModule]
+  );
 
-    const generatePassage = useCallback(() => {
-        generate(
-            levelId ? levelId : focusedSection,
-            "reading",
-            "passage",
-            {
-                method: 'GET',
-                queryParams: {
-                    difficulty,
-                    ...(localSettings.readingTopic && { topic: localSettings.readingTopic })
-                }
-            },
-            (data: any) => [{
-                title: data.title,
-                text: data.text
-            }],
-            level ? focusedSection : undefined,
-            level
-        );
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [localSettings.readingTopic, difficulty, focusedSection, levelId]);
-
-    const onTopicChange = useCallback((readingTopic: string) => {
-        updateLocalAndScheduleGlobal({ readingTopic });
-    }, [updateLocalAndScheduleGlobal]);
-
-    return (
-        <>
-            <Dropdown
-                title="Generate Passage"
-                module="reading"
-                open={localSettings.isPassageOpen}
-                setIsOpen={(isOpen: boolean) => updateLocalAndScheduleGlobal({ isPassageOpen: isOpen }, false)}
-                contentWrapperClassName={level ? `border border-ielts-reading`: ''}
-                disabled={generatePassageDisabled}
-            >
-                <div className="flex flex-row gap-2 items-center px-2 pb-4">
-                    <div className="flex flex-col flex-grow gap-4 px-2">
-                        <label className="font-normal text-base text-mti-gray-dim">Topic (Optional)</label>
-                        <Input
-                            key={`section-${focusedSection}`}
-                            type="text"
-                            placeholder="Topic"
-                            name="category"
-                            onChange={onTopicChange}
-                            roundness="full"
-                            value={localSettings.readingTopic}
-                        />
-                    </div>
-                    <div className="flex self-end h-16 mb-1">
-                        <GenerateBtn
-                            module="reading"
-                            genType="passage"
-                            sectionId={focusedSection}
-                            generateFnc={generatePassage}
-                            level={level}
-                        />
-                    </div>
-                </div>
-            </Dropdown>
-            <Dropdown
-                title="Add Exercises"
-                module="reading"
-                open={localSettings.isReadingTopicOpean}
-                setIsOpen={(isOpen: boolean) => updateLocalAndScheduleGlobal({ isReadingTopicOpean: isOpen })}
-                contentWrapperClassName={level ? `border border-ielts-reading`: ''}
-                disabled={currentSection === undefined || currentSection.text === undefined || currentSection.text.content === "" || currentSection.text.title === ""}
-            >
-                <ExercisePicker
-                    module="reading"
-                    sectionId={levelId !== undefined ? levelId : focusedSection}
-                    extraArgs={{ text: currentSection === undefined || currentSection.text === undefined ? "" : currentSection.text.content }}
-                    levelSectionId={focusedSection}
-                    level={level}
-                />
-            </Dropdown>
-        </>
+  const generatePassage = useCallback(() => {
+    generate(
+      levelId ? levelId : focusedSection,
+      "reading",
+      "passage",
+      {
+        method: "GET",
+        queryParams: {
+          difficulty,
+          ...(localSettings.readingTopic && {
+            topic: localSettings.readingTopic,
+          }),
+        },
+      },
+      (data: any) => [
+        {
+          title: data.title,
+          text: data.text,
+        },
+      ],
+      level ? focusedSection : undefined,
+      level
     );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [localSettings.readingTopic, difficulty, focusedSection, levelId]);
+
+  const onTopicChange = useCallback(
+    (readingTopic: string) => {
+      updateLocalAndScheduleGlobal({ readingTopic });
+    },
+    [updateLocalAndScheduleGlobal]
+  );
+
+  return (
+    <>
+      <Dropdown
+        title="Generate Passage"
+        module="reading"
+        open={localSettings.isPassageOpen}
+        setIsOpen={(isOpen: boolean) =>
+          updateLocalAndScheduleGlobal({ isPassageOpen: isOpen }, false)
+        }
+        contentWrapperClassName={level ? `border border-ielts-reading` : ""}
+        disabled={generatePassageDisabled}
+      >
+        <div
+          className="flex flex-row flex-wrap gap-2 items-center px-2 pb-4 "
+        >
+          <div className="flex flex-col flex-grow gap-4 px-2">
+            <label className="font-normal text-base text-mti-gray-dim">
+              Topic (Optional)
+            </label>
+            <Input
+              key={`section-${focusedSection}`}
+              type="text"
+              placeholder="Topic"
+              name="category"
+              onChange={onTopicChange}
+              roundness="full"
+              value={localSettings.readingTopic}
+            />
+          </div>
+          <div className="flex self-end h-16 mb-1">
+            <GenerateBtn
+              module="reading"
+              genType="passage"
+              sectionId={focusedSection}
+              generateFnc={generatePassage}
+              level={level}
+            />
+          </div>
+        </div>
+      </Dropdown>
+      <Dropdown
+        title="Add Exercises"
+        module="reading"
+        open={localSettings.isReadingTopicOpean}
+        setIsOpen={(isOpen: boolean) =>
+          updateLocalAndScheduleGlobal({ isReadingTopicOpean: isOpen })
+        }
+        contentWrapperClassName={level ? `border border-ielts-reading` : ""}
+        disabled={
+          currentSection === undefined ||
+          currentSection.text === undefined ||
+          currentSection.text.content === "" ||
+          currentSection.text.title === ""
+        }
+      >
+        <ExercisePicker
+          module="reading"
+          sectionId={levelId !== undefined ? levelId : focusedSection}
+          extraArgs={{
+            text:
+              currentSection === undefined || currentSection.text === undefined
+                ? ""
+                : currentSection.text.content,
+          }}
+          levelSectionId={focusedSection}
+          level={level}
+        />
+      </Dropdown>
+    </>
+  );
 };
 
 export default ReadingComponents;
diff --git a/src/components/ExamEditor/Shared/ExerciseLabel.tsx b/src/components/ExamEditor/Shared/ExerciseLabel.tsx
index 024d0b59..fab965c3 100644
--- a/src/components/ExamEditor/Shared/ExerciseLabel.tsx
+++ b/src/components/ExamEditor/Shared/ExerciseLabel.tsx
@@ -19,8 +19,8 @@ const label = (type: string, firstId: string, lastId: string) => {
 const ExerciseLabel: React.FC<Props> = ({type, firstId, lastId, prompt}) => {
     return (
         <div className="flex w-full justify-between items-center mr-4">
-            <span className="font-semibold">{label(type, firstId, lastId)}</span>
-            <div className="text-sm font-light italic">{previewLabel(prompt)}</div>
+            <span className="font-semibold ellipsis-2">{label(type, firstId, lastId)}</span>
+            <div className="text-sm font-light italic ellipsis-2">{previewLabel(prompt)}</div>
         </div>
     );
 }
diff --git a/src/components/ExamEditor/index.tsx b/src/components/ExamEditor/index.tsx
index 54e6b87d..a55ff259 100644
--- a/src/components/ExamEditor/index.tsx
+++ b/src/components/ExamEditor/index.tsx
@@ -24,216 +24,265 @@ import ListeningInstructions from "./Standalone/ListeningInstructions";
 const DIFFICULTIES: Difficulty[] = ["A1", "A2", "B1", "B2", "C1", "C2"];
 
 const ExamEditor: React.FC<{ levelParts?: number }> = ({ levelParts = 0 }) => {
-    const { currentModule, dispatch } = useExamEditorStore();
-    const {
-        sections,
-        minTimer,
-        expandedSections,
-        examLabel,
-        isPrivate,
-        difficulty,
-        sectionLabels,
-        importModule
-    } = useExamEditorStore(state => state.modules[currentModule]);
+  const { currentModule, dispatch } = useExamEditorStore();
+  const {
+    sections,
+    minTimer,
+    expandedSections,
+    examLabel,
+    isPrivate,
+    difficulty,
+    sectionLabels,
+    importModule,
+  } = useExamEditorStore((state) => state.modules[currentModule]);
 
-    const [numberOfLevelParts, setNumberOfLevelParts] = useState(levelParts !== 0 ? levelParts : 1);
-    const [isResetModuleOpen, setIsResetModuleOpen] = useState(false);
+  const [numberOfLevelParts, setNumberOfLevelParts] = useState(
+    levelParts !== 0 ? levelParts : 1
+  );
+  const [isResetModuleOpen, setIsResetModuleOpen] = useState(false);
 
-    // For exam edits
-    useEffect(() => {
-        if (levelParts !== 0) {
-            setNumberOfLevelParts(levelParts);
-            dispatch({
-                type: 'UPDATE_MODULE',
-                payload: {
-                    updates: {
-                        sectionLabels: Array.from({ length: levelParts }).map((_, i) => ({
-                            id: i + 1,
-                            label: `Part ${i + 1}`
-                        }))
-                    },
-                    module: "level"
-                }
-            })
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [levelParts])
+  // For exam edits
+  useEffect(() => {
+    if (levelParts !== 0) {
+      setNumberOfLevelParts(levelParts);
+      dispatch({
+        type: "UPDATE_MODULE",
+        payload: {
+          updates: {
+            sectionLabels: Array.from({ length: levelParts }).map((_, i) => ({
+              id: i + 1,
+              label: `Part ${i + 1}`,
+            })),
+          },
+          module: "level",
+        },
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [levelParts]);
 
-    useEffect(() => {
-        const currentSections = sections;
-        const currentLabels = sectionLabels;
-        let updatedSections: SectionState[];
-        let updatedLabels: any;
-        if (currentModule === "level" && currentSections.length !== currentLabels.length || numberOfLevelParts !== currentSections.length) {
-            const newSections = [...currentSections];
-            const newLabels = [...currentLabels];
-            for (let i = currentLabels.length; i < numberOfLevelParts; i++) {
-                if (currentSections.length !== numberOfLevelParts) newSections.push(defaultSectionSettings(currentModule, i + 1));
-                newLabels.push({
-                    id: i + 1,
-                    label: `Part ${i + 1}`
-                });
-            }
-            updatedSections = newSections;
-            updatedLabels = newLabels;
-        } else if (numberOfLevelParts < currentSections.length) {
-            updatedSections = currentSections.slice(0, numberOfLevelParts);
-            updatedLabels = currentLabels.slice(0, numberOfLevelParts);
-        } else {
-            return;
-        }
-
-        const updatedExpandedSections = expandedSections.filter(
-            sectionId => updatedSections.some(section => section.sectionId === sectionId)
-        );
-
-        dispatch({
-            type: 'UPDATE_MODULE',
-            payload: {
-                updates: {
-                    sections: updatedSections,
-                    sectionLabels: updatedLabels,
-                    expandedSections: updatedExpandedSections
-                }
-            }
+  useEffect(() => {
+    const currentSections = sections;
+    const currentLabels = sectionLabels;
+    let updatedSections: SectionState[];
+    let updatedLabels: any;
+    if (
+      (currentModule === "level" &&
+        currentSections.length !== currentLabels.length) ||
+      numberOfLevelParts !== currentSections.length
+    ) {
+      const newSections = [...currentSections];
+      const newLabels = [...currentLabels];
+      for (let i = currentLabels.length; i < numberOfLevelParts; i++) {
+        if (currentSections.length !== numberOfLevelParts)
+          newSections.push(defaultSectionSettings(currentModule, i + 1));
+        newLabels.push({
+          id: i + 1,
+          label: `Part ${i + 1}`,
         });
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [numberOfLevelParts]);
-
-    const sectionIds = sections.map((section) => section.sectionId)
-
-    const updateModule = useCallback((updates: Partial<ModuleState>) => {
-        dispatch({ type: 'UPDATE_MODULE', payload: { updates } });
-    }, [dispatch]);
-
-    const toggleSection = (sectionId: number) => {
-        if (expandedSections.length === 1 && sectionIds.includes(sectionId)) {
-            toast.error("Include at least one section!");
-            return;
-        }
-        dispatch({ type: 'TOGGLE_SECTION', payload: { sectionId } });
-    };
-
-    const ModuleSettings: Record<Module, React.ComponentType> = {
-        reading: ReadingSettings,
-        writing: WritingSettings,
-        speaking: SpeakingSettings,
-        listening: ListeningSettings,
-        level: LevelSettings
-    };
-
-    const Settings = ModuleSettings[currentModule];
-    const showImport = importModule && ["reading", "listening", "level"].includes(currentModule);
-
-    const updateLevelParts = (parts: number) => {
-        setNumberOfLevelParts(parts);
+      }
+      updatedSections = newSections;
+      updatedLabels = newLabels;
+    } else if (numberOfLevelParts < currentSections.length) {
+      updatedSections = currentSections.slice(0, numberOfLevelParts);
+      updatedLabels = currentLabels.slice(0, numberOfLevelParts);
+    } else {
+      return;
     }
 
-    return (
-        <>
-            {showImport ? <ImportOrStartFromScratch module={currentModule} setNumberOfLevelParts={updateLevelParts} /> : (
-                <>
-                    {isResetModuleOpen && <ResetModule module={currentModule} isOpen={isResetModuleOpen} setIsOpen={setIsResetModuleOpen} setNumberOfLevelParts={setNumberOfLevelParts}/>}
-                    <div className="flex gap-4 w-full items-center">
-                        <div className="flex flex-col gap-3">
-                            <label className="font-normal text-base text-mti-gray-dim">Timer</label>
-                            <Input
-                                type="number"
-                                name="minTimer"
-                                onChange={(e) => updateModule({ minTimer: parseInt(e) < 15 ? 15 : parseInt(e) })}
-                                value={minTimer}
-                                className="max-w-[300px]"
-                            />
-                        </div>
-                        <div className="flex flex-col gap-3 flex-grow">
-                            <label className="font-normal text-base text-mti-gray-dim">Difficulty</label>
-                            <Select
-                                isMulti={true}
-                                options={DIFFICULTIES.map((x) => ({ 
-                                    value: x,
-                                    label: capitalize(x)
-                                }))}
-                                onChange={(values) => {
-                                    const selectedDifficulties = values ? values.map(v => v.value as Difficulty) : [];
-                                    updateModule({ difficulty: selectedDifficulties });
-                                }}
-                                value={
-                                    difficulty 
-                                    ? difficulty.map(d => ({ 
-                                        value: d,
-                                        label: capitalize(d)
-                                        }))
-                                    : null
-                                }
-                            />
-                        </div>
-                        {(sectionLabels.length != 0 && currentModule !== "level") ? (
-                            <div className="flex flex-col gap-3">
-                                <label className="font-normal text-base text-mti-gray-dim">{sectionLabels[0].label.split(" ")[0]}</label>
-                                <div className="flex flex-row gap-8">
-                                    {sectionLabels.map(({ id, label }) => (
-                                        <span
-                                            key={id}
-                                            className={clsx(
-                                                "px-6 py-4 w-48 h-[72px] flex justify-center items-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-                                                "transition duration-300 ease-in-out",
-                                                sectionIds.includes(id)
-                                                    ? `bg-ielts-${currentModule}/70 border-ielts-${currentModule} text-white`
-                                                    : "bg-white border-mti-gray-platinum"
-                                            )}
-                                            onClick={() => toggleSection(id)}
-                                        >
-                                            {label}
-                                        </span>
-                                    ))}
-                                </div>
-                            </div>
-
-                        ) : (
-                            <div className="flex flex-col gap-3 w-1/3">
-                                <label className="font-normal text-base text-mti-gray-dim">Number of Parts</label>
-                                <Input type="number" name="Number of Parts" min={1} onChange={(v) => setNumberOfLevelParts(parseInt(v))} value={numberOfLevelParts} />
-                            </div>
-                        )}
-                        <div className="flex flex-col gap-3 w-fit h-fit">
-                            <div className="h-6" />
-                            <Checkbox isChecked={isPrivate} onChange={(checked) => updateModule({ isPrivate: checked })}>
-                                Privacy (Only available for Assignments)
-                            </Checkbox>
-                        </div>
-                    </div>
-                    <div className="flex flex-row gap-3 w-full">
-                        <div className="flex flex-col gap-3 flex-grow">
-                        <label className="font-normal text-base text-mti-gray-dim">Exam Label *</label>
-                        <Input
-                            type="text"
-                            placeholder="Exam Label"
-                            name="label"
-                            onChange={(text) => updateModule({ examLabel: text })}
-                            roundness="xl"
-                            value={examLabel}
-                            required
-                        />
-                        </div>
-                        {currentModule === "listening" && <ListeningInstructions />}
-                        <Button 
-                            onClick={() => setIsResetModuleOpen(true)} 
-                            customColor={`bg-ielts-${currentModule}/70 hover:bg-ielts-${currentModule} border-ielts-${currentModule}`} 
-                            className={`text-white self-end`}
-                        >
-                            Reset Module
-                        </Button>
-                    </div>
-                    <div className="flex flex-row gap-8">
-                        <Settings />
-                        <div className="flex-grow max-w-[66%]">
-                            <SectionRenderer />
-                        </div>
-                    </div>
-                </>
-            )}
-        </>
+    const updatedExpandedSections = expandedSections.filter((sectionId) =>
+      updatedSections.some((section) => section.sectionId === sectionId)
     );
+
+    dispatch({
+      type: "UPDATE_MODULE",
+      payload: {
+        updates: {
+          sections: updatedSections,
+          sectionLabels: updatedLabels,
+          expandedSections: updatedExpandedSections,
+        },
+      },
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [numberOfLevelParts]);
+
+  const sectionIds = sections.map((section) => section.sectionId);
+
+  const updateModule = useCallback(
+    (updates: Partial<ModuleState>) => {
+      dispatch({ type: "UPDATE_MODULE", payload: { updates } });
+    },
+    [dispatch]
+  );
+
+  const toggleSection = (sectionId: number) => {
+    if (expandedSections.length === 1 && sectionIds.includes(sectionId)) {
+      toast.error("Include at least one section!");
+      return;
+    }
+    dispatch({ type: "TOGGLE_SECTION", payload: { sectionId } });
+  };
+
+  const ModuleSettings: Record<Module, React.ComponentType> = {
+    reading: ReadingSettings,
+    writing: WritingSettings,
+    speaking: SpeakingSettings,
+    listening: ListeningSettings,
+    level: LevelSettings,
+  };
+
+  const Settings = ModuleSettings[currentModule];
+  const showImport =
+    importModule && ["reading", "listening", "level"].includes(currentModule);
+
+  const updateLevelParts = (parts: number) => {
+    setNumberOfLevelParts(parts);
+  };
+
+  return (
+    <>
+      {showImport ? (
+        <ImportOrStartFromScratch
+          module={currentModule}
+          setNumberOfLevelParts={updateLevelParts}
+        />
+      ) : (
+        <>
+          {isResetModuleOpen && (
+            <ResetModule
+              module={currentModule}
+              isOpen={isResetModuleOpen}
+              setIsOpen={setIsResetModuleOpen}
+              setNumberOfLevelParts={setNumberOfLevelParts}
+            />
+          )}
+          <div className="flex gap-4 w-full items-center -xl:flex-col">
+            <div className="flex flex-row gap-3 w-full">
+              <div className="flex flex-col gap-3">
+                <label className="font-normal text-base text-mti-gray-dim">
+                  Timer
+                </label>
+                <Input
+                  type="number"
+                  name="minTimer"
+                  onChange={(e) =>
+                    updateModule({
+                      minTimer: parseInt(e) < 15 ? 15 : parseInt(e),
+                    })
+                  }
+                  value={minTimer}
+                  className="max-w-[300px]"
+                />
+              </div>
+              <div className="flex flex-col gap-3 flex-grow">
+                <label className="font-normal text-base text-mti-gray-dim">
+                  Difficulty
+                </label>
+                <Select
+                  isMulti={true}
+                  options={DIFFICULTIES.map((x) => ({
+                    value: x,
+                    label: capitalize(x),
+                  }))}
+                  onChange={(values) => {
+                    const selectedDifficulties = values
+                      ? values.map((v) => v.value as Difficulty)
+                      : [];
+                    updateModule({ difficulty: selectedDifficulties });
+                  }}
+                  value={
+                    difficulty
+                      ? difficulty.map((d) => ({
+                          value: d,
+                          label: capitalize(d),
+                        }))
+                      : null
+                  }
+                />
+              </div>
+            </div>
+            {sectionLabels.length != 0 && currentModule !== "level" ? (
+              <div className="flex flex-col gap-3 -xl:w-full">
+                <label className="font-normal text-base text-mti-gray-dim">
+                  {sectionLabels[0].label.split(" ")[0]}
+                </label>
+                <div className="flex flex-row gap-8">
+                  {sectionLabels.map(({ id, label }) => (
+                    <span
+                      key={id}
+                      className={clsx(
+                        "px-6 py-4 w-48 h-[72px] flex justify-center items-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+                        "transition duration-300 ease-in-out",
+                        sectionIds.includes(id)
+                          ? `bg-ielts-${currentModule}/70 border-ielts-${currentModule} text-white`
+                          : "bg-white border-mti-gray-platinum"
+                      )}
+                      onClick={() => toggleSection(id)}
+                    >
+                      {label}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            ) : (
+              <div className="flex flex-col gap-3 w-1/3">
+                <label className="font-normal text-base text-mti-gray-dim">
+                  Number of Parts
+                </label>
+                <Input
+                  type="number"
+                  name="Number of Parts"
+                  min={1}
+                  onChange={(v) => setNumberOfLevelParts(parseInt(v))}
+                  value={numberOfLevelParts}
+                />
+              </div>
+            )}
+            <div className="flex flex-col gap-3 w-fit h-fit">
+              <div className="h-6" />
+              <Checkbox
+                isChecked={isPrivate}
+                onChange={(checked) => updateModule({ isPrivate: checked })}
+              >
+                Privacy (Only available for Assignments)
+              </Checkbox>
+            </div>
+          </div>
+          <div className="flex flex-row gap-3 w-full">
+            <div className="flex flex-col gap-3 flex-grow">
+              <label className="font-normal text-base text-mti-gray-dim">
+                Exam Label *
+              </label>
+              <Input
+                type="text"
+                placeholder="Exam Label"
+                name="label"
+                onChange={(text) => updateModule({ examLabel: text })}
+                roundness="xl"
+                value={examLabel}
+                required
+              />
+            </div>
+            {currentModule === "listening" && <ListeningInstructions />}
+            <Button
+              onClick={() => setIsResetModuleOpen(true)}
+              customColor={`bg-ielts-${currentModule}/70 hover:bg-ielts-${currentModule} border-ielts-${currentModule}`}
+              className={`text-white self-end`}
+            >
+              Reset Module
+            </Button>
+          </div>
+          <div className="flex flex-row gap-8 -2xl:flex-col">
+            <Settings />
+            <div className="flex-grow max-w-[66%] -2xl:max-w-full">
+              <SectionRenderer />
+            </div>
+          </div>
+        </>
+      )}
+    </>
+  );
 };
 
 export default ExamEditor;
diff --git a/src/components/Exercises/MatchSentences/DragNDrop.tsx b/src/components/Exercises/MatchSentences/DragNDrop.tsx
index 237e3d46..5adbc252 100644
--- a/src/components/Exercises/MatchSentences/DragNDrop.tsx
+++ b/src/components/Exercises/MatchSentences/DragNDrop.tsx
@@ -24,7 +24,7 @@ const DroppableQuestionArea: React.FC<DroppableQuestionAreaProps> = ({ question,
 			</div>
 			<div
 				key={`answer_${question.id}_${answer}`}
-				className={clsx("w-48 h-10 border rounded-xl flex items-center justify-center", isOver && "border-mti-purple-light")}>
+				className={clsx("w-48 h-10 border-2 border-mti-purple-light self-center rounded-xl flex items-center justify-center", isOver && "border-mti-purple-dark")}>
 				{answer && `Paragraph ${answer}`}
 			</div>
 		</div>
diff --git a/src/components/High/CardList.tsx b/src/components/High/CardList.tsx
index 31075dcd..24befffb 100644
--- a/src/components/High/CardList.tsx
+++ b/src/components/High/CardList.tsx
@@ -2,8 +2,6 @@ import {useListSearch} from "@/hooks/useListSearch";
 import usePagination from "@/hooks/usePagination";
 import { clsx } from "clsx";
 import {ReactNode} from "react";
-import Checkbox from "../Low/Checkbox";
-import Separator from "../Low/Separator";
 
 interface Props<T> {
 	list: T[];
diff --git a/src/components/High/Table.tsx b/src/components/High/Table.tsx
index 479e614c..2d588ffc 100644
--- a/src/components/High/Table.tsx
+++ b/src/components/High/Table.tsx
@@ -1,109 +1,159 @@
-import { useListSearch } from "@/hooks/useListSearch"
-import { ColumnDef, flexRender, getCoreRowModel, getPaginationRowModel, getSortedRowModel, PaginationState, useReactTable } from "@tanstack/react-table"
-import clsx from "clsx"
-import { useEffect, useState } from "react"
-import { BsArrowDown, BsArrowUp } from "react-icons/bs"
-import Button from "../Low/Button"
+import { useListSearch } from "@/hooks/useListSearch";
+import {
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  PaginationState,
+  useReactTable,
+} from "@tanstack/react-table";
+import clsx from "clsx";
+import { useEffect, useState } from "react";
+import { BsArrowDown, BsArrowUp } from "react-icons/bs";
+import Button from "../Low/Button";
 
 interface Props<T> {
-	data: T[]
-	columns: ColumnDef<any, any>[]
-	searchFields: string[][]
-	size?: number
-	onDownload?: (rows: T[]) => void
-	isDownloadLoading?: boolean
-	searchPlaceholder?: string
+  data: T[];
+  columns: ColumnDef<any, any>[];
+  searchFields: string[][];
+  size?: number;
+  onDownload?: (rows: T[]) => void;
+  isDownloadLoading?: boolean;
+  searchPlaceholder?: string;
+  isLoading?: boolean;
 }
 
-export default function Table<T>({ data, columns, searchFields, size = 16, onDownload, isDownloadLoading, searchPlaceholder }: Props<T>) {
-	const [pagination, setPagination] = useState<PaginationState>({
-		pageIndex: 0,
-		pageSize: size,
-	})
+export default function Table<T>({
+  data,
+  columns,
+  searchFields,
+  size = 16,
+  onDownload,
+  isDownloadLoading,
+  searchPlaceholder,
+  isLoading,
+}: Props<T>) {
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: size,
+  });
 
-	const { rows, renderSearch } = useListSearch<T>(searchFields, data, searchPlaceholder);
+  const { rows, renderSearch } = useListSearch<T>(
+    searchFields,
+    data,
+    searchPlaceholder
+  );
 
-	const table = useReactTable({
-		data: rows,
-		columns,
-		getCoreRowModel: getCoreRowModel(),
-		getSortedRowModel: getSortedRowModel(),
-		getPaginationRowModel: getPaginationRowModel(),
-		onPaginationChange: setPagination,
-		state: {
-			pagination
-		}
-	});
+  const table = useReactTable({
+    data: rows,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: setPagination,
+    state: {
+      pagination,
+    },
+  });
 
-	return (
-		<div className="w-full flex flex-col gap-2">
-			<div className="w-full flex gap-2 items-end">
-				{renderSearch()}
-				{onDownload && (
-					<Button isLoading={isDownloadLoading} className="w-full max-w-[200px] mb-1" variant="outline" onClick={() => onDownload(rows)}>
-						Download
-					</Button>
-				)
-				}
-			</div>
+  return (
+    <div className="w-full flex flex-col gap-2">
+      <div className="w-full flex gap-2 items-end">
+        {renderSearch()}
+        {onDownload && (
+          <Button
+            isLoading={isDownloadLoading}
+            className="w-full max-w-[200px] mb-1"
+            variant="outline"
+            onClick={() => onDownload(rows)}
+          >
+            Download
+          </Button>
+        )}
+      </div>
 
-			<div className="w-full flex gap-2 justify-between items-center">
-				<div className="flex items-center gap-4 w-fit">
-					<Button className="w-[200px] h-fit" disabled={!table.getCanPreviousPage()} onClick={() => table.previousPage()}>
-						Previous Page
-					</Button>
-				</div>
-				<div className="flex items-center gap-4 w-fit">
-					<span className="flex items-center gap-1">
-						<div>Page</div>
-						<strong>
-							{table.getState().pagination.pageIndex + 1} of{' '}
-							{table.getPageCount().toLocaleString()}
-						</strong>
-						<div>| Total: {table.getRowCount().toLocaleString()}</div>
-					</span>
-					<Button className="w-[200px]" disabled={!table.getCanNextPage()} onClick={() => table.nextPage()}>
-						Next Page
-					</Button>
-				</div>
-			</div>
+      <div className="w-full flex gap-2 justify-between items-center">
+        <div className="flex items-center gap-4 w-fit">
+          <Button
+            className="w-[200px] h-fit"
+            disabled={!table.getCanPreviousPage()}
+            onClick={() => table.previousPage()}
+          >
+            Previous Page
+          </Button>
+        </div>
+        <div className="flex items-center gap-4 w-fit">
+          <span className="flex items-center gap-1">
+            <div>Page</div>
+            <strong>
+              {table.getState().pagination.pageIndex + 1} of{" "}
+              {table.getPageCount().toLocaleString()}
+            </strong>
+            <div>| Total: {table.getRowCount().toLocaleString()}</div>
+          </span>
+          <Button
+            className="w-[200px]"
+            disabled={!table.getCanNextPage()}
+            onClick={() => table.nextPage()}
+          >
+            Next Page
+          </Button>
+        </div>
+      </div>
 
-			<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
-				<thead>
-					{table.getHeaderGroups().map((headerGroup) => (
-						<tr key={headerGroup.id}>
-							{headerGroup.headers.map((header) => (
-								<th className="py-4 px-4 text-left" key={header.id} colSpan={header.colSpan}>
-									<div
-										className={clsx(header.column.getCanSort() && 'cursor-pointer select-none', 'flex items-center gap-2')}
-										onClick={header.column.getToggleSortingHandler()}
-									>
-										{flexRender(
-											header.column.columnDef.header,
-											header.getContext()
-										)}
-										{{
-											asc: <BsArrowUp />,
-											desc: <BsArrowDown />,
-										}[header.column.getIsSorted() as string] ?? null}
-									</div>
-								</th>
-							))}
-						</tr>
-					))}
-				</thead>
-				<tbody className="px-2 w-full">
-					{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 items-center w-fit" key={cell.id}>
-									{flexRender(cell.column.columnDef.cell, cell.getContext())}
-								</td>
-							))}
-						</tr>
-					))}
-				</tbody>
-			</table>
-		</div>
-	)
+      <table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
+        <thead>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <tr key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <th
+                  className="py-4 px-4 text-left"
+                  key={header.id}
+                  colSpan={header.colSpan}
+                >
+                  <div
+                    className={clsx(
+                      header.column.getCanSort() &&
+                        "cursor-pointer select-none",
+                      "flex items-center gap-2"
+                    )}
+                    onClick={header.column.getToggleSortingHandler()}
+                  >
+                    {flexRender(
+                      header.column.columnDef.header,
+                      header.getContext()
+                    )}
+                    {{
+                      asc: <BsArrowUp />,
+                      desc: <BsArrowDown />,
+                    }[header.column.getIsSorted() as string] ?? null}
+                  </div>
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody className="px-2 w-full">
+          {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 items-center w-fit" key={cell.id}>
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      {isLoading && (
+        <div className="min-h-screen flex justify-center items-start">
+          <span className="loading loading-infinity w-32" />
+        </div>
+      )}
+    </div>
+  );
 }
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index a4b6f39e..2c25099b 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -260,7 +260,7 @@ export default function Sidebar({
     <section
       className={clsx(
         "relative flex h-full flex-col justify-between bg-transparent px-4 py-4 pb-8",
-        isMinimized ? "w-fit" : "-xl:w-fit w-1/6",
+        isMinimized ? "w-fit" : "-xl:w-20 w-1/6",
         className
       )}
     >
diff --git a/src/components/Solutions/MatchSentences.tsx b/src/components/Solutions/MatchSentences.tsx
index 3f177a46..47fd2792 100644
--- a/src/components/Solutions/MatchSentences.tsx
+++ b/src/components/Solutions/MatchSentences.tsx
@@ -29,7 +29,7 @@ function QuestionSolutionArea({
 			</div>
 			<div
 				className={clsx(
-					"w-56 h-10 border rounded-xl items-center justify-center flex gap-3 px-2",
+					"w-56 h-10 border self-center rounded-xl items-center justify-center flex gap-3 px-2",
 					!userSolution
 						? "border-mti-gray-davy"
 						: userSolution.option.toString() === question.solution.toString()
diff --git a/src/exams/Selection.tsx b/src/exams/Selection.tsx
index 848c66c3..e77ad76c 100644
--- a/src/exams/Selection.tsx
+++ b/src/exams/Selection.tsx
@@ -89,7 +89,7 @@ export default function Selection({ user, page, onStart }: Props) {
                   <BsBook className="text-ielts-reading h-6 w-6 md:h-8 md:w-8" />
                 ),
                 label: "Reading",
-                value: reading,
+                value: reading || 0,
                 tooltip: "The amount of reading exams performed.",
               },
               {
@@ -97,7 +97,7 @@ export default function Selection({ user, page, onStart }: Props) {
                   <BsHeadphones className="text-ielts-listening h-6 w-6 md:h-8 md:w-8" />
                 ),
                 label: "Listening",
-                value: listening,
+                value: listening || 0,
                 tooltip: "The amount of listening exams performed.",
               },
               {
@@ -105,7 +105,7 @@ export default function Selection({ user, page, onStart }: Props) {
                   <BsPen className="text-ielts-writing h-6 w-6 md:h-8 md:w-8" />
                 ),
                 label: "Writing",
-                value: writing,
+                value: writing || 0,
                 tooltip: "The amount of writing exams performed.",
               },
               {
@@ -113,7 +113,7 @@ export default function Selection({ user, page, onStart }: Props) {
                   <BsMegaphone className="text-ielts-speaking h-6 w-6 md:h-8 md:w-8" />
                 ),
                 label: "Speaking",
-                value: speaking,
+                value: speaking || 0,
                 tooltip: "The amount of speaking exams performed.",
               },
               {
@@ -121,7 +121,7 @@ export default function Selection({ user, page, onStart }: Props) {
                   <BsClipboard className="text-ielts-level h-6 w-6 md:h-8 md:w-8" />
                 ),
                 label: "Level",
-                value: level,
+                value: level || 0,
                 tooltip: "The amount of level exams performed.",
               },
             ]}
diff --git a/src/hooks/useEntitiesUsers.tsx b/src/hooks/useEntitiesUsers.tsx
index f1c7be6a..17385409 100644
--- a/src/hooks/useEntitiesUsers.tsx
+++ b/src/hooks/useEntitiesUsers.tsx
@@ -1,6 +1,5 @@
-import { EntityWithRoles, WithLabeledEntities } from "@/interfaces/entity";
-import { Discount } from "@/interfaces/paypal";
-import { Code, Group, Type, User } from "@/interfaces/user";
+import { WithLabeledEntities } from "@/interfaces/entity";
+import { Type, User } from "@/interfaces/user";
 import axios from "axios";
 import { useEffect, useState } from "react";
 
@@ -12,7 +11,9 @@ export default function useEntitiesUsers(type?: Type) {
   const getData = () => {
     setIsLoading(true);
     axios
-      .get<WithLabeledEntities<User>[]>(`/api/entities/users${type ? "?type=" + type : ""}`)
+      .get<WithLabeledEntities<User>[]>(
+        `/api/entities/users${type ? "?type=" + type : ""}`
+      )
       .then((response) => setUsers(response.data))
       .finally(() => setIsLoading(false));
   };
diff --git a/src/pages/(admin)/CorporateGradingSystem.tsx b/src/pages/(admin)/CorporateGradingSystem.tsx
index 28c006b6..9506108d 100644
--- a/src/pages/(admin)/CorporateGradingSystem.tsx
+++ b/src/pages/(admin)/CorporateGradingSystem.tsx
@@ -5,192 +5,329 @@ import Separator from "@/components/Low/Separator";
 import { Grading, Step } from "@/interfaces";
 import { Entity } from "@/interfaces/entity";
 import { User } from "@/interfaces/user";
-import { CEFR_STEPS, GENERAL_STEPS, IELTS_STEPS, TOFEL_STEPS } from "@/resources/grading";
-import { mapBy } from "@/utils";
+import {
+  CEFR_STEPS,
+  GENERAL_STEPS,
+  IELTS_STEPS,
+  TOFEL_STEPS,
+} from "@/resources/grading";
 import { checkAccess } from "@/utils/permissions";
 import axios from "axios";
 import clsx from "clsx";
-import { Divider } from "primereact/divider";
-import { useEffect, useState } from "react";
+import {
+  Dispatch,
+  memo,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
 import { BsPlusCircle, BsTrash } from "react-icons/bs";
 import { toast } from "react-toastify";
 
 const areStepsOverlapped = (steps: Step[]) => {
-	for (let i = 0; i < steps.length; i++) {
-		if (i === 0) continue;
+  for (let i = 0; i < steps.length; i++) {
+    if (i === 0) continue;
 
-		const step = steps[i];
-		const previous = steps[i - 1];
+    const step = steps[i];
+    const previous = steps[i - 1];
 
-		if (previous.max >= step.min) return true;
-	}
+    if (previous.max >= step.min) return true;
+  }
 
-	return false;
+  return false;
 };
+interface RowProps {
+  min: number;
+  max: number;
+  index: number;
+  label: string;
+  isLast: boolean;
+  isLoading: boolean;
+  setSteps: Dispatch<SetStateAction<Step[]>>;
+  addRow: (index: number) => void;
+}
 
+function GradingRow({
+  min,
+  max,
+  label,
+  index,
+  isLoading,
+  isLast,
+  setSteps,
+  addRow,
+}: RowProps) {
+  const onChangeMin = useCallback(
+    (e: string) => {
+      setSteps((prev) =>
+        prev.map((x, i) => (i === index ? { ...x, min: parseInt(e) } : x))
+      );
+    },
+    [index, setSteps]
+  );
+
+  const onChangeMax = useCallback(
+    (e: string) => {
+      setSteps((prev) =>
+        prev.map((x, i) => (i === index ? { ...x, max: parseInt(e) } : x))
+      );
+    },
+    [index, setSteps]
+  );
+
+  const onChangeLabel = useCallback(
+    (e: string) => {
+      setSteps((prev) =>
+        prev.map((x, i) => (i === index ? { ...x, label: e } : x))
+      );
+    },
+    [index, setSteps]
+  );
+
+  const onAddRow = useCallback(() => addRow(index), [addRow, index]);
+
+  const removeRow = useCallback(
+    () => setSteps((prev) => prev.filter((_, i) => i !== index)),
+    [index, setSteps]
+  );
+  return (
+    <>
+      <div className="flex items-center gap-4">
+        <div className="grid grid-cols-3 gap-4 w-full">
+          <Input
+            label="Min. Percentage"
+            value={min}
+            type="number"
+            disabled={index === 0 || isLoading}
+            onChange={onChangeMin}
+            name="min"
+          />
+          <Input
+            label="Grade"
+            value={label}
+            type="text"
+            disabled={isLoading}
+            onChange={onChangeLabel}
+            name="min"
+          />
+          <Input
+            label="Max. Percentage"
+            value={max}
+            type="number"
+            disabled={isLast || isLoading}
+            onChange={onChangeMax}
+            name="max"
+          />
+        </div>
+        {index !== 0 && !isLast && (
+          <button
+            disabled={isLoading}
+            className="pt-9 text-xl group"
+            onClick={removeRow}
+          >
+            <div className="w-full h-full flex items-center justify-center group-hover:bg-neutral-200 rounded-full p-3 transition ease-in-out duration-300">
+              <BsTrash />
+            </div>
+          </button>
+        )}
+      </div>
+
+      {!isLast && (
+        <Button
+          className="w-full flex items-center justify-center"
+          disabled={isLoading}
+          onClick={onAddRow}
+        >
+          <BsPlusCircle />
+        </Button>
+      )}
+    </>
+  );
+}
+const GradingRowMemo = memo(GradingRow);
 interface Props {
-	user: User;
-	entitiesGrading: Grading[];
-	entities: Entity[]
-	mutate: () => void
+  user: User;
+  entitiesGrading: Grading[];
+  entities: Entity[];
+  mutate: () => void;
 }
 
-export default function CorporateGradingSystem({ user, entitiesGrading = [], entities = [], mutate }: Props) {
-	const [entity, setEntity] = useState(entitiesGrading[0]?.entity || undefined)
-	const [isLoading, setIsLoading] = useState(false);
-	const [steps, setSteps] = useState<Step[]>([]);
-	const [otherEntities, setOtherEntities] = useState<string[]>([])
+export default function CorporateGradingSystem({
+  user,
+  entitiesGrading = [],
+  entities = [],
+  mutate,
+}: Props) {
+  const [entity, setEntity] = useState(entitiesGrading[0]?.entity || undefined);
+  const [isLoading, setIsLoading] = useState(false);
+  const [steps, setSteps] = useState<Step[]>([]);
+  const [otherEntities, setOtherEntities] = useState<string[]>([]);
 
-	useEffect(() => {
-		if (entity) {
-			const entitySteps = entitiesGrading.find(e => e.entity === entity)!.steps
-			setSteps(entitySteps || [])
-		}
-	}, [entitiesGrading, entity])
+  useEffect(() => {
+    if (entity) {
+      const entitySteps = entitiesGrading.find(
+        (e) => e.entity === entity
+      )!.steps;
+      setSteps(entitySteps || []);
+    }
+  }, [entitiesGrading, entity]);
 
-	const saveGradingSystem = () => {
-		if (!steps.every((x) => x.min < x.max)) return toast.error("One of your steps has a minimum threshold inferior to its superior threshold.");
-		if (areStepsOverlapped(steps)) return toast.error("There seems to be an overlap in one of your steps.");
-		if (
-			steps.reduce((acc, curr) => {
-				return acc - (curr.max - curr.min + 1);
-			}, 100) > 0
-		)
-			return toast.error("There seems to be an open interval in your steps.");
+  const saveGradingSystem = () => {
+    if (!steps.every((x) => x.min < x.max))
+      return toast.error(
+        "One of your steps has a minimum threshold inferior to its superior threshold."
+      );
+    if (areStepsOverlapped(steps))
+      return toast.error("There seems to be an overlap in one of your steps.");
+    if (
+      steps.reduce((acc, curr) => {
+        return acc - (curr.max - curr.min + 1);
+      }, 100) > 0
+    )
+      return toast.error("There seems to be an open interval in your steps.");
 
-		setIsLoading(true);
-		axios
-			.post("/api/grading", { user: user.id, entity, steps })
-			.then(() => toast.success("Your grading system has been saved!"))
-			.then(mutate)
-			.catch(() => toast.error("Something went wrong, please try again later"))
-			.finally(() => setIsLoading(false));
-	};
+    setIsLoading(true);
+    axios
+      .post("/api/grading", { user: user.id, entity, steps })
+      .then(() => toast.success("Your grading system has been saved!"))
+      .then(mutate)
+      .catch(() => toast.error("Something went wrong, please try again later"))
+      .finally(() => setIsLoading(false));
+  };
 
-	const applyToOtherEntities = () => {
-		if (!steps.every((x) => x.min < x.max)) return toast.error("One of your steps has a minimum threshold inferior to its superior threshold.");
-		if (areStepsOverlapped(steps)) return toast.error("There seems to be an overlap in one of your steps.");
-		if (
-			steps.reduce((acc, curr) => {
-				return acc - (curr.max - curr.min + 1);
-			}, 100) > 0
-		)
-			return toast.error("There seems to be an open interval in your steps.");
+  const applyToOtherEntities = () => {
+    if (!steps.every((x) => x.min < x.max))
+      return toast.error(
+        "One of your steps has a minimum threshold inferior to its superior threshold."
+      );
+    if (areStepsOverlapped(steps))
+      return toast.error("There seems to be an overlap in one of your steps.");
+    if (
+      steps.reduce((acc, curr) => {
+        return acc - (curr.max - curr.min + 1);
+      }, 100) > 0
+    )
+      return toast.error("There seems to be an open interval in your steps.");
 
-		if (otherEntities.length === 0) return toast.error("Select at least one entity")
+    if (otherEntities.length === 0)
+      return toast.error("Select at least one entity");
 
-		setIsLoading(true);
-		axios
-			.post("/api/grading/multiple", { user: user.id, entities: otherEntities, steps })
-			.then(() => toast.success("Your grading system has been saved!"))
-			.then(mutate)
-			.catch(() => toast.error("Something went wrong, please try again later"))
-			.finally(() => setIsLoading(false));
-	};
+    setIsLoading(true);
+    axios
+      .post("/api/grading/multiple", {
+        user: user.id,
+        entities: otherEntities,
+        steps,
+      })
+      .then(() => toast.success("Your grading system has been saved!"))
+      .then(mutate)
+      .catch(() => toast.error("Something went wrong, please try again later"))
+      .finally(() => setIsLoading(false));
+  };
 
-	return (
-		<div className="flex flex-col gap-4 border p-4 border-mti-gray-platinum rounded-xl">
-			<label className="font-normal text-base text-mti-gray-dim">Grading System</label>
-			<div className={clsx("flex flex-col gap-4")}>
-				<label className="font-normal text-base text-mti-gray-dim">Entity</label>
-				<Select
-					defaultValue={{ value: (entities || [])[0]?.id, label: (entities || [])[0]?.label }}
-					options={entities.map((e) => ({ value: e.id, label: e.label }))}
-					onChange={(e) => setEntity(e?.value || undefined)}
-					isClearable={checkAccess(user, ["admin", "developer"])}
-				/>
-			</div>
+  const addRow = useCallback((index: number) => {
+    setSteps((prev) => {
+      const item = {
+        min: prev[index === 0 ? 0 : index - 1].max + 1,
+        max: prev[index + 1].min - 1,
+        label: "",
+      };
+      return [
+        ...prev.slice(0, index + 1),
+        item,
+        ...prev.slice(index + 1, prev.length),
+      ];
+    });
+  }, []);
 
-			{entities.length > 1 && (
-				<>
-					<Separator />
-					<label className="font-normal text-base text-mti-gray-dim">Apply this grading system to other entities</label>
-					<Select
-						options={entities.map((e) => ({ value: e.id, label: e.label }))}
-						onChange={(e) => !e ? setOtherEntities([]) : setOtherEntities(e.map(o => o.value!))}
-						isMulti
-					/>
-					<Button onClick={applyToOtherEntities} isLoading={isLoading} disabled={isLoading || otherEntities.length === 0} variant="outline">
-						Apply to {otherEntities.length} other entities
-					</Button>
-					<Separator />
-				</>
-			)}
+  return (
+    <div className="flex flex-col gap-4 border p-4 border-mti-gray-platinum rounded-xl">
+      <label className="font-normal text-base text-mti-gray-dim">
+        Grading System
+      </label>
+      <div className={clsx("flex flex-col gap-4")}>
+        <label className="font-normal text-base text-mti-gray-dim">
+          Entity
+        </label>
+        <Select
+          defaultValue={{
+            value: (entities || [])[0]?.id,
+            label: (entities || [])[0]?.label,
+          }}
+          options={entities.map((e) => ({ value: e.id, label: e.label }))}
+          onChange={(e) => setEntity(e?.value || undefined)}
+          isClearable={checkAccess(user, ["admin", "developer"])}
+        />
+      </div>
 
-			<label className="font-normal text-base text-mti-gray-dim">Preset Systems</label>
-			<div className="grid grid-cols-4 gap-4">
-				<Button variant="outline" onClick={() => setSteps(CEFR_STEPS)}>
-					CEFR
-				</Button>
-				<Button variant="outline" onClick={() => setSteps(GENERAL_STEPS)}>
-					General English
-				</Button>
-				<Button variant="outline" onClick={() => setSteps(IELTS_STEPS)}>
-					IELTS
-				</Button>
-				<Button variant="outline" onClick={() => setSteps(TOFEL_STEPS)}>
-					TOFEL iBT
-				</Button>
-			</div>
+      {entities.length > 1 && (
+        <>
+          <Separator />
+          <label className="font-normal text-base text-mti-gray-dim">
+            Apply this grading system to other entities
+          </label>
+          <Select
+            options={entities.map((e) => ({ value: e.id, label: e.label }))}
+            onChange={(e) =>
+              !e
+                ? setOtherEntities([])
+                : setOtherEntities(e.map((o) => o.value!))
+            }
+            isMulti
+          />
+          <Button
+            onClick={applyToOtherEntities}
+            isLoading={isLoading}
+            disabled={isLoading || otherEntities.length === 0}
+            variant="outline"
+          >
+            Apply to {otherEntities.length} other entities
+          </Button>
+          <Separator />
+        </>
+      )}
 
-			{steps.map((step, index) => (
-				<>
-					<div className="flex items-center gap-4">
-						<div className="grid grid-cols-3 gap-4 w-full" key={step.min}>
-							<Input
-								label="Min. Percentage"
-								value={step.min}
-								type="number"
-								disabled={index === 0 || isLoading}
-								onChange={(e) => setSteps((prev) => prev.map((x, i) => (i === index ? { ...x, min: parseInt(e) } : x)))}
-								name="min"
-							/>
-							<Input
-								label="Grade"
-								value={step.label}
-								type="text"
-								disabled={isLoading}
-								onChange={(e) => setSteps((prev) => prev.map((x, i) => (i === index ? { ...x, label: e } : x)))}
-								name="min"
-							/>
-							<Input
-								label="Max. Percentage"
-								value={step.max}
-								type="number"
-								disabled={index === steps.length - 1 || isLoading}
-								onChange={(e) => setSteps((prev) => prev.map((x, i) => (i === index ? { ...x, max: parseInt(e) } : x)))}
-								name="max"
-							/>
-						</div>
-						{index !== 0 && index !== steps.length - 1 && (
-							<button
-								disabled={isLoading}
-								className="pt-9 text-xl group"
-								onClick={() => setSteps((prev) => prev.filter((_, i) => i !== index))}>
-								<div className="w-full h-full flex items-center justify-center group-hover:bg-neutral-200 rounded-full p-3 transition ease-in-out duration-300">
-									<BsTrash />
-								</div>
-							</button>
-						)}
-					</div>
+      <label className="font-normal text-base text-mti-gray-dim">
+        Preset Systems
+      </label>
+      <div className="grid grid-cols-4 gap-4">
+        <Button variant="outline" onClick={() => setSteps(CEFR_STEPS)}>
+          CEFR
+        </Button>
+        <Button variant="outline" onClick={() => setSteps(GENERAL_STEPS)}>
+          General English
+        </Button>
+        <Button variant="outline" onClick={() => setSteps(IELTS_STEPS)}>
+          IELTS
+        </Button>
+        <Button variant="outline" onClick={() => setSteps(TOFEL_STEPS)}>
+          TOFEL iBT
+        </Button>
+      </div>
 
-					{index < steps.length - 1 && (
-						<Button
-							className="w-full flex items-center justify-center"
-							disabled={isLoading}
-							onClick={() => {
-								const item = { min: steps[index === 0 ? 0 : index - 1].max + 1, max: steps[index + 1].min - 1, label: "" };
-								setSteps((prev) => [...prev.slice(0, index + 1), item, ...prev.slice(index + 1, steps.length)]);
-							}}>
-							<BsPlusCircle />
-						</Button>
-					)}
-				</>
-			))}
+      {steps.map((step, index) => (
+        <GradingRowMemo
+          key={index}
+          min={step.min}
+          max={step.max}
+          label={step.label}
+          index={index}
+          isLoading={isLoading}
+          isLast={index === steps.length - 1}
+          setSteps={setSteps}
+          addRow={addRow}
+        />
+      ))}
 
-			<Button onClick={saveGradingSystem} isLoading={isLoading} disabled={isLoading} className="mt-8">
-				Save Grading System
-			</Button>
-		</div>
-	);
+      <Button
+        onClick={saveGradingSystem}
+        isLoading={isLoading}
+        disabled={isLoading}
+        className="mt-8"
+      >
+        Save Grading System
+      </Button>
+    </div>
+  );
 }
diff --git a/src/pages/(admin)/Lists/UserList.tsx b/src/pages/(admin)/Lists/UserList.tsx
index 63ac86e9..e11524e8 100644
--- a/src/pages/(admin)/Lists/UserList.tsx
+++ b/src/pages/(admin)/Lists/UserList.tsx
@@ -6,7 +6,12 @@ import clsx from "clsx";
 import { capitalize } from "lodash";
 import moment from "moment";
 import { useEffect, useMemo, useState } from "react";
-import { BsCheck, BsCheckCircle, BsFillExclamationOctagonFill, BsTrash } from "react-icons/bs";
+import {
+  BsCheck,
+  BsCheckCircle,
+  BsFillExclamationOctagonFill,
+  BsTrash,
+} from "react-icons/bs";
 import { toast } from "react-toastify";
 import { countries, TCountries } from "countries-list";
 import countryCodes from "country-codes-list";
@@ -24,426 +29,597 @@ import { WithLabeledEntities } from "@/interfaces/entity";
 import Table from "@/components/High/Table";
 import useEntities from "@/hooks/useEntities";
 import { useAllowedEntities } from "@/hooks/useEntityPermissions";
-import { findAllowedEntities } from "@/utils/permissions";
 
 const columnHelper = createColumnHelper<WithLabeledEntities<User>>();
 const searchFields = [["name"], ["email"], ["entities", ""]];
 
 export default function UserList({
-	user,
-	filters = [],
-	type,
-	renderHeader,
+  user,
+  filters = [],
+  type,
+  renderHeader,
 }: {
-	user: User;
-	filters?: ((user: User) => boolean)[];
-	type?: Type;
-	renderHeader?: (total: number) => JSX.Element;
+  user: User;
+  filters?: ((user: User) => boolean)[];
+  type?: Type;
+  renderHeader?: (total: number) => JSX.Element;
 }) {
-	const [showDemographicInformation, setShowDemographicInformation] = useState(false);
-	const [selectedUser, setSelectedUser] = useState<User>();
+  const [showDemographicInformation, setShowDemographicInformation] =
+    useState(false);
+  const [selectedUser, setSelectedUser] = useState<User>();
 
-	const { users, reload } = useEntitiesUsers(type)
-	const { entities } = useEntities()
+  const { users, isLoading, reload } = useEntitiesUsers(type);
+  const { entities } = useEntities();
 
-	const isAdmin = useMemo(() => ["admin", "developer"].includes(user?.type), [user?.type])
+  const isAdmin = useMemo(
+    () => ["admin", "developer"].includes(user?.type),
+    [user?.type]
+  );
 
-	const entitiesViewStudents = useAllowedEntities(user, entities, "view_students")
-	const entitiesEditStudents = useAllowedEntities(user, entities, "edit_students")
-	const entitiesDeleteStudents = useAllowedEntities(user, entities, "delete_students")
+  const entitiesViewStudents = useAllowedEntities(
+    user,
+    entities,
+    "view_students"
+  );
+  const entitiesEditStudents = useAllowedEntities(
+    user,
+    entities,
+    "edit_students"
+  );
+  const entitiesDeleteStudents = useAllowedEntities(
+    user,
+    entities,
+    "delete_students"
+  );
 
-	const entitiesViewTeachers = useAllowedEntities(user, entities, "view_teachers")
-	const entitiesEditTeachers = useAllowedEntities(user, entities, "edit_teachers")
-	const entitiesDeleteTeachers = useAllowedEntities(user, entities, "delete_teachers")
+  const entitiesViewTeachers = useAllowedEntities(
+    user,
+    entities,
+    "view_teachers"
+  );
+  const entitiesEditTeachers = useAllowedEntities(
+    user,
+    entities,
+    "edit_teachers"
+  );
+  const entitiesDeleteTeachers = useAllowedEntities(
+    user,
+    entities,
+    "delete_teachers"
+  );
 
-	const entitiesViewCorporates = useAllowedEntities(user, entities, "view_corporates")
-	const entitiesEditCorporates = useAllowedEntities(user, entities, "edit_corporates")
-	const entitiesDeleteCorporates = useAllowedEntities(user, entities, "delete_corporates")
+  const entitiesViewCorporates = useAllowedEntities(
+    user,
+    entities,
+    "view_corporates"
+  );
+  const entitiesEditCorporates = useAllowedEntities(
+    user,
+    entities,
+    "edit_corporates"
+  );
+  const entitiesDeleteCorporates = useAllowedEntities(
+    user,
+    entities,
+    "delete_corporates"
+  );
 
-	const entitiesViewMasterCorporates = useAllowedEntities(user, entities, "view_mastercorporates")
-	const entitiesEditMasterCorporates = useAllowedEntities(user, entities, "edit_mastercorporates")
-	const entitiesDeleteMasterCorporates = useAllowedEntities(user, entities, "delete_mastercorporates")
+  const entitiesViewMasterCorporates = useAllowedEntities(
+    user,
+    entities,
+    "view_mastercorporates"
+  );
+  const entitiesEditMasterCorporates = useAllowedEntities(
+    user,
+    entities,
+    "edit_mastercorporates"
+  );
+  const entitiesDeleteMasterCorporates = useAllowedEntities(
+    user,
+    entities,
+    "delete_mastercorporates"
+  );
 
-	const entitiesDownloadUsers = useAllowedEntities(user, entities, "download_user_list")
+  const entitiesDownloadUsers = useAllowedEntities(
+    user,
+    entities,
+    "download_user_list"
+  );
 
-	const appendUserFilters = useFilterStore((state) => state.appendUserFilter);
-	const router = useRouter();
+  const appendUserFilters = useFilterStore((state) => state.appendUserFilter);
+  const router = useRouter();
 
-	const expirationDateColor = (date: Date) => {
-		const momentDate = moment(date);
-		const today = moment(new Date());
+  const expirationDateColor = (date: Date) => {
+    const momentDate = moment(date);
+    const today = moment(new Date());
 
-		if (today.isAfter(momentDate)) return "!text-mti-red-light  font-bold line-through";
-		if (today.add(1, "weeks").isAfter(momentDate)) return "!text-mti-red-light";
-		if (today.add(2, "weeks").isAfter(momentDate)) return "!text-mti-rose-light";
-		if (today.add(1, "months").isAfter(momentDate)) return "!text-mti-orange-light";
-	};
+    if (today.isAfter(momentDate))
+      return "!text-mti-red-light  font-bold line-through";
+    if (today.add(1, "weeks").isAfter(momentDate)) return "!text-mti-red-light";
+    if (today.add(2, "weeks").isAfter(momentDate))
+      return "!text-mti-rose-light";
+    if (today.add(1, "months").isAfter(momentDate))
+      return "!text-mti-orange-light";
+  };
 
-	const allowedUsers = useMemo(() => users.filter((u) => {
-		if (isAdmin) return true
-		if (u.id === user?.id) return false
+  const allowedUsers = useMemo(
+    () =>
+      users.filter((u) => {
+        if (isAdmin) return true;
+        if (u.id === user?.id) return false;
 
-		switch (u.type) {
-			case "student": return mapBy((u.entities || []), 'id').some((id) => mapBy(entitiesViewStudents, 'id').includes(id))
-			case "teacher": return mapBy((u.entities || []), 'id').some((id) => mapBy(entitiesViewTeachers, 'id').includes(id))
-			case 'corporate': return mapBy((u.entities || []), 'id').some((id) => mapBy(entitiesViewCorporates, 'id').includes(id))
-			case 'mastercorporate': return mapBy((u.entities || []), 'id').some((id) => mapBy(entitiesViewMasterCorporates, 'id').includes(id))
-			default: return false
-		}
-	})
-		, [entitiesViewCorporates, entitiesViewMasterCorporates, entitiesViewStudents, entitiesViewTeachers, isAdmin, user?.id, users])
+        switch (u.type) {
+          case "student":
+            return mapBy(u.entities || [], "id").some((id) =>
+              mapBy(entitiesViewStudents, "id").includes(id)
+            );
+          case "teacher":
+            return mapBy(u.entities || [], "id").some((id) =>
+              mapBy(entitiesViewTeachers, "id").includes(id)
+            );
+          case "corporate":
+            return mapBy(u.entities || [], "id").some((id) =>
+              mapBy(entitiesViewCorporates, "id").includes(id)
+            );
+          case "mastercorporate":
+            return mapBy(u.entities || [], "id").some((id) =>
+              mapBy(entitiesViewMasterCorporates, "id").includes(id)
+            );
+          default:
+            return false;
+        }
+      }),
+    [
+      entitiesViewCorporates,
+      entitiesViewMasterCorporates,
+      entitiesViewStudents,
+      entitiesViewTeachers,
+      isAdmin,
+      user?.id,
+      users,
+    ]
+  );
 
-	const displayUsers = useMemo(() =>
-		filters.length > 0 ? filters.reduce((d, f) => d.filter(f), allowedUsers) : allowedUsers,
-		[filters, allowedUsers])
+  const displayUsers = useMemo(
+    () =>
+      filters.length > 0
+        ? filters.reduce((d, f) => d.filter(f), allowedUsers)
+        : allowedUsers,
+    [filters, allowedUsers]
+  );
 
-	const deleteAccount = (user: User) => {
-		if (!confirm(`Are you sure you want to delete ${user.name}'s account?`)) return;
+  const deleteAccount = (user: User) => {
+    if (!confirm(`Are you sure you want to delete ${user.name}'s account?`))
+      return;
 
-		axios
-			.delete<{ ok: boolean }>(`/api/user?id=${user.id}`)
-			.then(() => {
-				toast.success("User deleted successfully!");
-				reload()
-			})
-			.catch(() => {
-				toast.error("Something went wrong!", { toastId: "delete-error" });
-			})
-			.finally(reload);
-	};
+    axios
+      .delete<{ ok: boolean }>(`/api/user?id=${user.id}`)
+      .then(() => {
+        toast.success("User deleted successfully!");
+        reload();
+      })
+      .catch(() => {
+        toast.error("Something went wrong!", { toastId: "delete-error" });
+      })
+      .finally(reload);
+  };
 
-	const verifyAccount = (user: User) => {
-		axios
-			.post<{ user?: User; ok?: boolean }>(`/api/users/update?id=${user.id}`, {
-				...user,
-				isVerified: true,
-			})
-			.then(() => {
-				toast.success("User verified successfully!");
-				reload();
-			})
-			.catch(() => {
-				toast.error("Something went wrong!", { toastId: "update-error" });
-			});
-	};
+  const verifyAccount = (user: User) => {
+    axios
+      .post<{ user?: User; ok?: boolean }>(`/api/users/update?id=${user.id}`, {
+        ...user,
+        isVerified: true,
+      })
+      .then(() => {
+        toast.success("User verified successfully!");
+        reload();
+      })
+      .catch(() => {
+        toast.error("Something went wrong!", { toastId: "update-error" });
+      });
+  };
 
-	const toggleDisableAccount = (user: User) => {
-		if (
-			!confirm(
-				`Are you sure you want to ${user.status === "disabled" ? "enable" : "disable"} ${user.name
-				}'s account? This change is usually related to their payment state.`,
-			)
-		)
-			return;
+  const toggleDisableAccount = (user: User) => {
+    if (
+      !confirm(
+        `Are you sure you want to ${
+          user.status === "disabled" ? "enable" : "disable"
+        } ${
+          user.name
+        }'s account? This change is usually related to their payment state.`
+      )
+    )
+      return;
 
-		axios
-			.post<{ user?: User; ok?: boolean }>(`/api/users/update?id=${user.id}`, {
-				...user,
-				status: user.status === "disabled" ? "active" : "disabled",
-			})
-			.then(() => {
-				toast.success(`User ${user.status === "disabled" ? "enabled" : "disabled"} successfully!`);
-				reload();
-			})
-			.catch(() => {
-				toast.error("Something went wrong!", { toastId: "update-error" });
-			});
-	};
+    axios
+      .post<{ user?: User; ok?: boolean }>(`/api/users/update?id=${user.id}`, {
+        ...user,
+        status: user.status === "disabled" ? "active" : "disabled",
+      })
+      .then(() => {
+        toast.success(
+          `User ${
+            user.status === "disabled" ? "enabled" : "disabled"
+          } successfully!`
+        );
+        reload();
+      })
+      .catch(() => {
+        toast.error("Something went wrong!", { toastId: "update-error" });
+      });
+  };
 
-	const getEditPermission = (type: Type) => {
-		if (type === "student") return entitiesEditStudents
-		if (type === "teacher") return entitiesEditTeachers
-		if (type === "corporate") return entitiesEditCorporates
-		if (type === "mastercorporate") return entitiesEditMasterCorporates
+  const getEditPermission = (type: Type) => {
+    if (type === "student") return entitiesEditStudents;
+    if (type === "teacher") return entitiesEditTeachers;
+    if (type === "corporate") return entitiesEditCorporates;
+    if (type === "mastercorporate") return entitiesEditMasterCorporates;
 
-		return []
-	}
+    return [];
+  };
 
-	const getDeletePermission = (type: Type) => {
-		if (type === "student") return entitiesDeleteStudents
-		if (type === "teacher") return entitiesDeleteTeachers
-		if (type === "corporate") return entitiesDeleteCorporates
-		if (type === "mastercorporate") return entitiesDeleteMasterCorporates
+  const getDeletePermission = (type: Type) => {
+    if (type === "student") return entitiesDeleteStudents;
+    if (type === "teacher") return entitiesDeleteTeachers;
+    if (type === "corporate") return entitiesDeleteCorporates;
+    if (type === "mastercorporate") return entitiesDeleteMasterCorporates;
 
-		return []
-	}
+    return [];
+  };
 
-	const canEditUser = (u: User) =>
-		isAdmin || u.entities.some(e => mapBy(getEditPermission(u.type), 'id').includes(e.id))
+  const canEditUser = (u: User) =>
+    isAdmin ||
+    u.entities.some((e) =>
+      mapBy(getEditPermission(u.type), "id").includes(e.id)
+    );
 
-	const canDeleteUser = (u: User) =>
-		isAdmin || u.entities.some(e => mapBy(getDeletePermission(u.type), 'id').includes(e.id))
+  const canDeleteUser = (u: User) =>
+    isAdmin ||
+    u.entities.some((e) =>
+      mapBy(getDeletePermission(u.type), "id").includes(e.id)
+    );
 
-	const actionColumn = ({ row }: { row: { original: User } }) => {
-		const canEdit = canEditUser(row.original)
-		const canDelete = canDeleteUser(row.original)
+  const actionColumn = ({ row }: { row: { original: User } }) => {
+    const canEdit = canEditUser(row.original);
+    const canDelete = canDeleteUser(row.original);
 
-		return (
-			<div className="flex gap-4">
-				{!row.original.isVerified && canEdit && (
-					<div data-tip="Verify User" className="cursor-pointer tooltip" onClick={() => verifyAccount(row.original)}>
-						<BsCheck className="hover:text-mti-purple-light transition ease-in-out duration-300" />
-					</div>
-				)}
-				{canEdit && (
-					<div
-						data-tip={row.original.status === "disabled" ? "Enable User" : "Disable User"}
-						className="cursor-pointer tooltip"
-						onClick={() => toggleDisableAccount(row.original)}>
-						{row.original.status === "disabled" ? (
-							<BsCheckCircle className="hover:text-mti-purple-light transition ease-in-out duration-300" />
-						) : (
-							<BsFillExclamationOctagonFill className="hover:text-mti-purple-light transition ease-in-out duration-300" />
-						)}
-					</div>
-				)}
-				{canDelete && (
-					<div data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deleteAccount(row.original)}>
-						<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
-					</div>
-				)}
-			</div>
-		);
-	};
+    return (
+      <div className="flex gap-4">
+        {!row.original.isVerified && canEdit && (
+          <div
+            data-tip="Verify User"
+            className="cursor-pointer tooltip"
+            onClick={() => verifyAccount(row.original)}
+          >
+            <BsCheck className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+          </div>
+        )}
+        {canEdit && (
+          <div
+            data-tip={
+              row.original.status === "disabled"
+                ? "Enable User"
+                : "Disable User"
+            }
+            className="cursor-pointer tooltip"
+            onClick={() => toggleDisableAccount(row.original)}
+          >
+            {row.original.status === "disabled" ? (
+              <BsCheckCircle className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+            ) : (
+              <BsFillExclamationOctagonFill className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+            )}
+          </div>
+        )}
+        {canDelete && (
+          <div
+            data-tip="Delete"
+            className="cursor-pointer tooltip"
+            onClick={() => deleteAccount(row.original)}
+          >
+            <BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+          </div>
+        )}
+      </div>
+    );
+  };
 
-	const demographicColumns = [
-		columnHelper.accessor("name", {
-			header: "Name",
-			cell: ({ row, getValue }) => (
-				<div
-					className={clsx(
-						canEditUser(row.original) &&
-						"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer",
-					)}
-					onClick={() =>
-						canEditUser(row.original) ? setSelectedUser(row.original) : null
-					}>
-					{getValue()}
-				</div>
-			),
-		}),
-		columnHelper.accessor("demographicInformation.country", {
-			header: "Country",
-			cell: (info) =>
-				info.getValue()
-					? `${countryCodes.findOne("countryCode" as any, info.getValue())?.flag} ${countries[info.getValue() as unknown as keyof TCountries]?.name
-					} (+${countryCodes.findOne("countryCode" as any, info.getValue())?.countryCallingCode})`
-					: "N/A",
-		}),
-		columnHelper.accessor("demographicInformation.phone", {
-			header: "Phone",
-			cell: (info) => info.getValue() || "N/A",
-			enableSorting: true,
-		}),
-		columnHelper.accessor(
-			(x) =>
-				x.type === "corporate" || x.type === "mastercorporate" ? x.demographicInformation?.position : x.demographicInformation?.employment,
-			{
-				id: "employment",
-				header: "Employment",
-				cell: (info) => (info.row.original.type === "corporate" ? info.getValue() : capitalize(info.getValue())) || "N/A",
-				enableSorting: true,
-			},
-		),
-		columnHelper.accessor("lastLogin", {
-			header: "Last Login",
-			cell: (info) => (!!info.getValue() ? moment(info.getValue()).format("YYYY-MM-DD HH:mm") : "N/A"),
-		}),
-		columnHelper.accessor("demographicInformation.gender", {
-			header: "Gender",
-			cell: (info) => capitalize(info.getValue()) || "N/A",
-			enableSorting: true,
-		}),
-		{
-			header: (
-				<span className="cursor-pointer" onClick={() => setShowDemographicInformation((prev) => !prev)}>
-					Switch
-				</span>
-			),
-			id: "actions",
-			cell: actionColumn,
-			sortable: false
-		},
-	];
+  const demographicColumns = [
+    columnHelper.accessor("name", {
+      header: "Name",
+      cell: ({ row, getValue }) => (
+        <div
+          className={clsx(
+            canEditUser(row.original) &&
+              "underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer"
+          )}
+          onClick={() =>
+            canEditUser(row.original) ? setSelectedUser(row.original) : null
+          }
+        >
+          {getValue()}
+        </div>
+      ),
+    }),
+    columnHelper.accessor("demographicInformation.country", {
+      header: "Country",
+      cell: (info) =>
+        info.getValue()
+          ? `${
+              countryCodes.findOne("countryCode" as any, info.getValue())?.flag
+            } ${
+              countries[info.getValue() as unknown as keyof TCountries]?.name
+            } (+${
+              countryCodes.findOne("countryCode" as any, info.getValue())
+                ?.countryCallingCode
+            })`
+          : "N/A",
+    }),
+    columnHelper.accessor("demographicInformation.phone", {
+      header: "Phone",
+      cell: (info) => info.getValue() || "N/A",
+      enableSorting: true,
+    }),
+    columnHelper.accessor(
+      (x) =>
+        x.type === "corporate" || x.type === "mastercorporate"
+          ? x.demographicInformation?.position
+          : x.demographicInformation?.employment,
+      {
+        id: "employment",
+        header: "Employment",
+        cell: (info) =>
+          (info.row.original.type === "corporate"
+            ? info.getValue()
+            : capitalize(info.getValue())) || "N/A",
+        enableSorting: true,
+      }
+    ),
+    columnHelper.accessor("lastLogin", {
+      header: "Last Login",
+      cell: (info) =>
+        !!info.getValue()
+          ? moment(info.getValue()).format("YYYY-MM-DD HH:mm")
+          : "N/A",
+    }),
+    columnHelper.accessor("demographicInformation.gender", {
+      header: "Gender",
+      cell: (info) => capitalize(info.getValue()) || "N/A",
+      enableSorting: true,
+    }),
+    {
+      header: (
+        <span
+          className="cursor-pointer"
+          onClick={() => setShowDemographicInformation((prev) => !prev)}
+        >
+          Switch
+        </span>
+      ),
+      id: "actions",
+      cell: actionColumn,
+      sortable: false,
+    },
+  ];
 
-	const defaultColumns = [
-		columnHelper.accessor("name", {
-			header: "Name",
-			cell: ({ row, getValue }) => (
-				<div
-					className={clsx(
-						canEditUser(row.original) &&
-						"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer",
-					)}
-					onClick={() =>
-						canEditUser(row.original) ? setSelectedUser(row.original) : null
-					}>
-					{getValue()}
-				</div>
-			),
-		}),
-		columnHelper.accessor("email", {
-			header: "E-mail",
-			cell: ({ row, getValue }) => (
-				<div
-					className={clsx(
-						canEditUser(row.original) &&
-						"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer",
-					)}
-					onClick={() => (canEditUser(row.original) ? setSelectedUser(row.original) : null)}>
-					{getValue()}
-				</div>
-			),
-		}),
-		columnHelper.accessor("type", {
-			header: "Type",
-			cell: (info) => USER_TYPE_LABELS[info.getValue()],
-		}),
-		columnHelper.accessor("studentID", {
-			header: "Student ID",
-			cell: (info) => info.getValue() || "N/A",
-		}),
-		columnHelper.accessor("entities", {
-			header: "Entities",
-			cell: ({ getValue }) => mapBy(getValue(), 'label').join(', '),
-		}),
-		columnHelper.accessor("subscriptionExpirationDate", {
-			header: "Expiration",
-			cell: (info) => (
-				<span className={clsx(info.getValue() ? expirationDateColor(moment(info.getValue()).toDate()) : "")}>
-					{!info.getValue() ? "No expiry date" : moment(info.getValue()).format("DD/MM/YYYY")}
-				</span>
-			),
-		}),
-		columnHelper.accessor("isVerified", {
-			header: "Verified",
-			cell: (info) => (
-				<div className="flex gap-3 items-center text-mti-gray-dim text-sm self-center">
-					<div
-						className={clsx(
-							"w-6 h-6 rounded-md flex items-center justify-center border border-mti-purple-light bg-white",
-							"transition duration-300 ease-in-out",
-							info.getValue() && "!bg-mti-purple-light ",
-						)}>
-						<BsCheck color="white" className="w-full h-full" />
-					</div>
-				</div>
-			),
-		}),
-		{
-			header: (
-				<span className="cursor-pointer" onClick={() => setShowDemographicInformation((prev) => !prev)}>
-					Switch
-				</span>
-			),
-			id: "actions",
-			cell: actionColumn,
-			sortable: false
-		},
-	];
+  const defaultColumns = [
+    columnHelper.accessor("name", {
+      header: "Name",
+      cell: ({ row, getValue }) => (
+        <div
+          className={clsx(
+            canEditUser(row.original) &&
+              "underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer"
+          )}
+          onClick={() =>
+            canEditUser(row.original) ? setSelectedUser(row.original) : null
+          }
+        >
+          {getValue()}
+        </div>
+      ),
+    }),
+    columnHelper.accessor("email", {
+      header: "E-mail",
+      cell: ({ row, getValue }) => (
+        <div
+          className={clsx(
+            canEditUser(row.original) &&
+              "underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer"
+          )}
+          onClick={() =>
+            canEditUser(row.original) ? setSelectedUser(row.original) : null
+          }
+        >
+          {getValue()}
+        </div>
+      ),
+    }),
+    columnHelper.accessor("type", {
+      header: "Type",
+      cell: (info) => USER_TYPE_LABELS[info.getValue()],
+    }),
+    columnHelper.accessor("studentID", {
+      header: "Student ID",
+      cell: (info) => info.getValue() || "N/A",
+    }),
+    columnHelper.accessor("entities", {
+      header: "Entities",
+      cell: ({ getValue }) => mapBy(getValue(), "label").join(", "),
+    }),
+    columnHelper.accessor("subscriptionExpirationDate", {
+      header: "Expiration",
+      cell: (info) => (
+        <span
+          className={clsx(
+            info.getValue()
+              ? expirationDateColor(moment(info.getValue()).toDate())
+              : ""
+          )}
+        >
+          {!info.getValue()
+            ? "No expiry date"
+            : moment(info.getValue()).format("DD/MM/YYYY")}
+        </span>
+      ),
+    }),
+    columnHelper.accessor("isVerified", {
+      header: "Verified",
+      cell: (info) => (
+        <div className="flex gap-3 items-center text-mti-gray-dim text-sm self-center">
+          <div
+            className={clsx(
+              "w-6 h-6 rounded-md flex items-center justify-center border border-mti-purple-light bg-white",
+              "transition duration-300 ease-in-out",
+              info.getValue() && "!bg-mti-purple-light "
+            )}
+          >
+            <BsCheck color="white" className="w-full h-full" />
+          </div>
+        </div>
+      ),
+    }),
+    {
+      header: (
+        <span
+          className="cursor-pointer"
+          onClick={() => setShowDemographicInformation((prev) => !prev)}
+        >
+          Switch
+        </span>
+      ),
+      id: "actions",
+      cell: actionColumn,
+      sortable: false,
+    },
+  ];
 
-	const downloadExcel = (rows: WithLabeledEntities<User>[]) => {
-		if (entitiesDownloadUsers.length === 0) return toast.error("You are not allowed to download the user list.")
+  const downloadExcel = (rows: WithLabeledEntities<User>[]) => {
+    if (entitiesDownloadUsers.length === 0)
+      return toast.error("You are not allowed to download the user list.");
 
-		const allowedRows = rows.filter(r => mapBy(r.entities, 'id').some(e => mapBy(entitiesDownloadUsers, 'id').includes(e)))
-		const csv = exportListToExcel(allowedRows);
+    const allowedRows = rows.filter((r) =>
+      mapBy(r.entities, "id").some((e) =>
+        mapBy(entitiesDownloadUsers, "id").includes(e)
+      )
+    );
+    const csv = exportListToExcel(allowedRows);
 
-		const element = document.createElement("a");
-		const file = new Blob([csv], { type: "text/csv" });
-		element.href = URL.createObjectURL(file);
-		element.download = "users.csv";
-		document.body.appendChild(element);
-		element.click();
-		document.body.removeChild(element);
-	};
+    const element = document.createElement("a");
+    const file = new Blob([csv], { type: "text/csv" });
+    element.href = URL.createObjectURL(file);
+    element.download = "users.csv";
+    document.body.appendChild(element);
+    element.click();
+    document.body.removeChild(element);
+  };
 
-	const viewStudentFilter = (x: User) => x.type === "student";
-	const viewTeacherFilter = (x: User) => x.type === "teacher";
-	const belongsToAdminFilter = (x: User) => x.entities.some(({ id }) => mapBy(selectedUser?.entities || [], 'id').includes(id));
+  const viewStudentFilter = (x: User) => x.type === "student";
+  const viewTeacherFilter = (x: User) => x.type === "teacher";
+  const belongsToAdminFilter = (x: User) =>
+    x.entities.some(({ id }) =>
+      mapBy(selectedUser?.entities || [], "id").includes(id)
+    );
 
-	const viewStudentFilterBelongsToAdmin = (x: User) => viewStudentFilter(x) && belongsToAdminFilter(x);
-	const viewTeacherFilterBelongsToAdmin = (x: User) => viewTeacherFilter(x) && belongsToAdminFilter(x);
+  const viewStudentFilterBelongsToAdmin = (x: User) =>
+    viewStudentFilter(x) && belongsToAdminFilter(x);
+  const viewTeacherFilterBelongsToAdmin = (x: User) =>
+    viewTeacherFilter(x) && belongsToAdminFilter(x);
 
-	const renderUserCard = (selectedUser: User) => {
-		const studentsFromAdmin = users.filter(viewStudentFilterBelongsToAdmin);
-		const teachersFromAdmin = users.filter(viewTeacherFilterBelongsToAdmin);
-		return (
-			<div className="w-full flex flex-col gap-8">
-				<UserCard
-					maxUserAmount={0}
-					loggedInUser={user}
-					onViewStudents={
-						(selectedUser.type === "corporate" || selectedUser.type === "teacher") && studentsFromAdmin.length > 0
-							? () => {
-								appendUserFilters({
-									id: "view-students",
-									filter: viewStudentFilter,
-								});
-								appendUserFilters({
-									id: "belongs-to-admin",
-									filter: belongsToAdminFilter,
-								});
+  const renderUserCard = (selectedUser: User) => {
+    const studentsFromAdmin = users.filter(viewStudentFilterBelongsToAdmin);
+    const teachersFromAdmin = users.filter(viewTeacherFilterBelongsToAdmin);
+    return (
+      <div className="w-full flex flex-col gap-8">
+        <UserCard
+          maxUserAmount={0}
+          loggedInUser={user}
+          onViewStudents={
+            (selectedUser.type === "corporate" ||
+              selectedUser.type === "teacher") &&
+            studentsFromAdmin.length > 0
+              ? () => {
+                  appendUserFilters({
+                    id: "view-students",
+                    filter: viewStudentFilter,
+                  });
+                  appendUserFilters({
+                    id: "belongs-to-admin",
+                    filter: belongsToAdminFilter,
+                  });
 
-								router.push("/users");
-							}
-							: undefined
-					}
-					onViewTeachers={
-						(selectedUser.type === "corporate" || selectedUser.type === "student") && teachersFromAdmin.length > 0
-							? () => {
-								appendUserFilters({
-									id: "view-teachers",
-									filter: viewTeacherFilter,
-								});
-								appendUserFilters({
-									id: "belongs-to-admin",
-									filter: belongsToAdminFilter,
-								});
+                  router.push("/users");
+                }
+              : undefined
+          }
+          onViewTeachers={
+            (selectedUser.type === "corporate" ||
+              selectedUser.type === "student") &&
+            teachersFromAdmin.length > 0
+              ? () => {
+                  appendUserFilters({
+                    id: "view-teachers",
+                    filter: viewTeacherFilter,
+                  });
+                  appendUserFilters({
+                    id: "belongs-to-admin",
+                    filter: belongsToAdminFilter,
+                  });
 
-								router.push("/users");
-							}
-							: undefined
-					}
-					onViewCorporate={
-						selectedUser.type === "teacher" || selectedUser.type === "student"
-							? () => {
-								appendUserFilters({
-									id: "view-corporate",
-									filter: (x: User) => x.type === "corporate",
-								});
-								appendUserFilters({
-									id: "belongs-to-admin",
-									filter: belongsToAdminFilter
-								});
+                  router.push("/users");
+                }
+              : undefined
+          }
+          onViewCorporate={
+            selectedUser.type === "teacher" || selectedUser.type === "student"
+              ? () => {
+                  appendUserFilters({
+                    id: "view-corporate",
+                    filter: (x: User) => x.type === "corporate",
+                  });
+                  appendUserFilters({
+                    id: "belongs-to-admin",
+                    filter: belongsToAdminFilter,
+                  });
 
-								router.push("/users");
-							}
-							: undefined
-					}
-					onClose={(shouldReload) => {
-						setSelectedUser(undefined);
-						if (shouldReload) reload();
-					}}
-					user={selectedUser}
-				/>
-			</div>
-		);
-	};
+                  router.push("/users");
+                }
+              : undefined
+          }
+          onClose={(shouldReload) => {
+            setSelectedUser(undefined);
+            if (shouldReload) reload();
+          }}
+          user={selectedUser}
+        />
+      </div>
+    );
+  };
 
-	return (
-		<>
-			{renderHeader && renderHeader(displayUsers.length)}
-			<div className="w-full">
-				<Modal isOpen={!!selectedUser} onClose={() => setSelectedUser(undefined)}>
-					{selectedUser && renderUserCard(selectedUser)}
-				</Modal>
-				<Table<WithLabeledEntities<User>>
-					data={displayUsers}
-					columns={(!showDemographicInformation ? defaultColumns : demographicColumns) as any}
-					searchFields={searchFields}
-					onDownload={entitiesDownloadUsers.length > 0 ? downloadExcel : undefined}
-				/>
-			</div>
-		</>
-	);
+  return (
+    <>
+      {renderHeader && renderHeader(displayUsers.length)}
+      <div className="w-full">
+        <Modal
+          isOpen={!!selectedUser}
+          onClose={() => setSelectedUser(undefined)}
+        >
+          {selectedUser && renderUserCard(selectedUser)}
+        </Modal>
+        <Table<WithLabeledEntities<User>>
+          data={displayUsers}
+          columns={
+            (!showDemographicInformation
+              ? defaultColumns
+              : demographicColumns) as any
+          }
+          searchFields={searchFields}
+          onDownload={
+            entitiesDownloadUsers.length > 0 ? downloadExcel : undefined
+          }
+          isLoading={isLoading}
+        />
+      </div>
+    </>
+  );
 }
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 6702ac02..b5cdc2c9 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -12,8 +12,6 @@ import useExamStore from "@/stores/exam";
 import usePreferencesStore from "@/stores/preferencesStore";
 import Layout from "../components/High/Layout";
 import useEntities from "../hooks/useEntities";
-import UserProfileSkeleton from "../components/Medium/UserProfileSkeleton";
-
 export default function App({ Component, pageProps }: AppProps) {
   const [loading, setLoading] = useState(false);
 
diff --git a/src/pages/api/tickets/assignedToUser/index.ts b/src/pages/api/tickets/assignedToUser/index.ts
index 8db00dbc..c362ba2a 100644
--- a/src/pages/api/tickets/assignedToUser/index.ts
+++ b/src/pages/api/tickets/assignedToUser/index.ts
@@ -33,7 +33,7 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
 		res.status(401).json({ ok: false });
 		return;
 	}
-	const docs = await db.collection("tickets").find<Ticket>({ assignedTo: req.session.user.id }).toArray();
+	const docs = await db.collection("tickets").find<Ticket>({ assignedTo: req.session.user.id, status: { $ne: "completed" } }).toArray();
 
 	res.status(200).json(docs);
 }
diff --git a/src/pages/dashboard/admin.tsx b/src/pages/dashboard/admin.tsx
index bd925183..edacde1f 100644
--- a/src/pages/dashboard/admin.tsx
+++ b/src/pages/dashboard/admin.tsx
@@ -80,13 +80,12 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
       { _id: 0, id: 1, name: 1, email: 1, profilePicture: 1 }
     ),
   ]);
-
-  const assignmentsCount = await countEntitiesAssignments(
-    mapBy(entities, "id"),
-    { archived: { $ne: true } }
-  );
-
-  const stats = await getStatsByUsers(mapBy(students, "id"));
+  const [assignmentsCount, stats] = await Promise.all([
+    countEntitiesAssignments(mapBy(entities, "id"), {
+      archived: { $ne: true },
+    }),
+    getStatsByUsers(mapBy(students, "id")),
+  ]);
 
   return {
     props: serialize({
diff --git a/src/pages/dashboard/corporate.tsx b/src/pages/dashboard/corporate.tsx
index e4d2c0c8..99f8562f 100644
--- a/src/pages/dashboard/corporate.tsx
+++ b/src/pages/dashboard/corporate.tsx
@@ -32,7 +32,6 @@ import {
 import { ToastContainer } from "react-toastify";
 import { useAllowedEntities } from "@/hooks/useEntityPermissions";
 import { isAdmin } from "@/utils/users";
-import { count } from "console";
 
 interface Props {
   user: User;
diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx
index d73c8f29..ea1076f7 100644
--- a/src/pages/dashboard/index.tsx
+++ b/src/pages/dashboard/index.tsx
@@ -1,4 +1,3 @@
-import { User } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
 import { redirect } from "@/utils";
 import { requestUser } from "@/utils/api";
diff --git a/src/pages/dashboard/mastercorporate.tsx b/src/pages/dashboard/mastercorporate.tsx
index f8350f2f..6559cce0 100644
--- a/src/pages/dashboard/mastercorporate.tsx
+++ b/src/pages/dashboard/mastercorporate.tsx
@@ -34,7 +34,6 @@ import {
 } from "react-icons/bs";
 import { ToastContainer } from "react-toastify";
 import { isAdmin } from "@/utils/users";
-import { count } from "console";
 
 interface Props {
   user: User;
diff --git a/src/pages/dashboard/student.tsx b/src/pages/dashboard/student.tsx
index bb06b641..e56fcf2b 100644
--- a/src/pages/dashboard/student.tsx
+++ b/src/pages/dashboard/student.tsx
@@ -16,7 +16,6 @@ import useExamStore from "@/stores/exam";
 import { findBy, mapBy, redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
 import { getAssignmentsForStudent } from "@/utils/assignments.be";
-import { getEntities } from "@/utils/entities.be";
 import { getExamsByIds } from "@/utils/exams.be";
 import { getGradingSystemByEntity } from "@/utils/grading.be";
 import {
@@ -78,14 +77,12 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
     }),
   ]);
   const assignmentsIDs = mapBy(assignments, "id");
-
-  const sessions = await getSessionsByUser(user.id, 10, {
-    ["assignment.id"]: { $in: assignmentsIDs },
-  });
-
-  const formattedInvites = await Promise.all(
-    invites.map(convertInvitersToEntity)
-  );
+  const [sessions, ...formattedInvites] = await Promise.all([
+    getSessionsByUser(user.id, 10, {
+      ["assignment.id"]: { $in: assignmentsIDs },
+    }),
+    ...invites.map(convertInvitersToEntity),
+  ]);
 
   const examIDs = uniqBy(
     assignments.reduce<{ module: Module; id: string; key: string }[]>(
@@ -110,7 +107,7 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
     props: serialize({
       user,
       assignments,
-      stats,
+      stats: stats ,
       exams,
       sessions,
       invites: formattedInvites,
@@ -184,7 +181,7 @@ export default function Dashboard({
               icon: (
                 <BsFileEarmarkText className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />
               ),
-              value: stats.fullExams,
+              value: stats?.fullExams || 0,
               label: "Exams",
               tooltip: "Number of all conducted completed exams",
             },
@@ -192,7 +189,7 @@ export default function Dashboard({
               icon: (
                 <BsPencil className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />
               ),
-              value: stats.uniqueModules,
+              value: stats?.uniqueModules || 0,
               label: "Modules",
               tooltip:
                 "Number of all exam modules performed including Level Test",
diff --git a/src/pages/generation.tsx b/src/pages/generation.tsx
index 94f9de64..65903172 100644
--- a/src/pages/generation.tsx
+++ b/src/pages/generation.tsx
@@ -173,7 +173,7 @@ export default function Generation({ id, user, exam, examModule, permissions }:
 						<RadioGroup
 							value={currentModule}
 							onChange={(currentModule) => updateRoot({ currentModule })}
-							className="flex flex-row -2xl:flex-wrap w-full gap-4 -md:justify-center justify-between">
+							className="flex flex-row flex-wrap w-full gap-4 -md:justify-center justify-between">
 							{[...MODULE_ARRAY].filter(m => permissions[m]).map((x) => (
 								<Radio value={x} key={x}>
 									{({ checked }) => (
diff --git a/src/pages/official-exam.tsx b/src/pages/official-exam.tsx
index b7b50638..b9aba7c1 100644
--- a/src/pages/official-exam.tsx
+++ b/src/pages/official-exam.tsx
@@ -27,7 +27,6 @@ import axios from "axios";
 import clsx from "clsx";
 import { withIronSessionSsr } from "iron-session/next";
 import { uniqBy } from "lodash";
-import moment from "moment";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import { useMemo, useState } from "react";
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 1db0b8a7..0cd22c97 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -3,88 +3,126 @@
 @tailwind utilities;
 
 @layer utilities {
-	.scrollbar-hide {
-		-ms-overflow-style: none;
-		/* IE and Edge */
-		scrollbar-width: none;
-		/* Firefox */
-	}
+  .scrollbar-hide {
+    -ms-overflow-style: none;
+    /* IE and Edge */
+    scrollbar-width: none;
+    /* Firefox */
+  }
 
-	.scrollbar-hide::-webkit-scrollbar {
-		display: none;
-		/* Chrome, Safari and Opera */
-	}
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none;
+    /* Chrome, Safari and Opera */
+  }
+}
+
+.ellipsis {
+  @apply line-clamp-1 max-h-20 overflow-hidden text-ellipsis whitespace-break-spaces leading-relaxed [-webkit-box-orient:vertical] [display:-webkit-box];
+}
+
+.ellipsis-2 {
+  @apply line-clamp-2 max-h-20 overflow-hidden text-ellipsis whitespace-break-spaces leading-relaxed [-webkit-box-orient:vertical] [display:-webkit-box];
+}
+
+.ellipsis-3 {
+  @apply line-clamp-3 max-h-20 overflow-hidden text-ellipsis whitespace-break-spaces leading-relaxed [-webkit-box-orient:vertical] [display:-webkit-box];
 }
 
 .training-scrollbar::-webkit-scrollbar {
-	@apply w-1.5;
+  @apply w-1.5;
 }
 
 .training-scrollbar::-webkit-scrollbar-track {
-	@apply bg-transparent;
+  @apply bg-transparent;
 }
 
 .training-scrollbar::-webkit-scrollbar-thumb {
-	@apply bg-gray-400 hover:bg-gray-500 rounded-full transition-colors opacity-50 hover:opacity-75;
+  @apply bg-gray-400 hover:bg-gray-500 rounded-full transition-colors opacity-50 hover:opacity-75;
 }
 
 .training-scrollbar {
-	scrollbar-width: thin;
-	scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
 }
 
 :root {
-	--max-width: 1100px;
-	--border-radius: 12px;
-	--font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
-		"Fira Mono", "Droid Sans Mono", "Courier New", monospace;
+  --max-width: 1100px;
+  --border-radius: 12px;
+  --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
+    "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
+    "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
 
-	--foreground-rgb: 53, 51, 56;
-	--background-start-rgb: 245, 245, 245;
-	--background-end-rgb: 245, 245, 245;
+  --foreground-rgb: 53, 51, 56;
+  --background-start-rgb: 245, 245, 245;
+  --background-end-rgb: 245, 245, 245;
 
-	--primary-glow: conic-gradient(from 180deg at 50% 50%, #16abff33 0deg, #0885ff33 55deg, #54d6ff33 120deg, #0071ff33 160deg, transparent 360deg);
-	--secondary-glow: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
+  --primary-glow: conic-gradient(
+    from 180deg at 50% 50%,
+    #16abff33 0deg,
+    #0885ff33 55deg,
+    #54d6ff33 120deg,
+    #0071ff33 160deg,
+    transparent 360deg
+  );
+  --secondary-glow: radial-gradient(
+    rgba(255, 255, 255, 1),
+    rgba(255, 255, 255, 0)
+  );
 
-	--tile-start-rgb: 239, 245, 249;
-	--tile-end-rgb: 228, 232, 233;
-	--tile-border: conic-gradient(#00000080, #00000040, #00000030, #00000020, #00000010, #00000010, #00000080);
+  --tile-start-rgb: 239, 245, 249;
+  --tile-end-rgb: 228, 232, 233;
+  --tile-border: conic-gradient(
+    #00000080,
+    #00000040,
+    #00000030,
+    #00000020,
+    #00000010,
+    #00000010,
+    #00000080
+  );
 
-	--callout-rgb: 238, 240, 241;
-	--callout-border-rgb: 172, 175, 176;
-	--card-rgb: 180, 185, 188;
-	--card-border-rgb: 131, 134, 135;
+  --callout-rgb: 238, 240, 241;
+  --callout-border-rgb: 172, 175, 176;
+  --card-rgb: 180, 185, 188;
+  --card-border-rgb: 131, 134, 135;
 }
 
 * {
-	box-sizing: border-box;
-	padding: 0;
-	margin: 0;
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
 }
 
 html {
-	min-height: 100vh !important;
-	height: 100%;
-	max-width: 100vw;
-	overflow-x: hidden;
-	overflow-y: auto;
-	font-family: "Open Sans", system-ui, -apple-system, "Helvetica Neue", sans-serif;
+  min-height: 100vh !important;
+  height: 100%;
+  max-width: 100vw;
+  overflow-x: hidden;
+  overflow-y: auto;
+  font-family: "Open Sans", system-ui, -apple-system, "Helvetica Neue",
+    sans-serif;
 }
 
 body {
-	min-height: 100vh !important;
-	height: 100%;
-	max-width: 100vw;
-	overflow-x: hidden;
-	font-family: "Open Sans", system-ui, -apple-system, "Helvetica Neue", sans-serif;
+  min-height: 100vh !important;
+  height: 100%;
+  max-width: 100vw;
+  overflow-x: hidden;
+  font-family: "Open Sans", system-ui, -apple-system, "Helvetica Neue",
+    sans-serif;
 }
 
 body {
-	color: rgb(var(--foreground-rgb));
-	background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
 }
 
 a {
-	color: inherit;
-	text-decoration: none;
+  color: inherit;
+  text-decoration: none;
 }
diff --git a/src/utils/users.ts b/src/utils/users.ts
index 75ec3e7d..319be4f1 100644
--- a/src/utils/users.ts
+++ b/src/utils/users.ts
@@ -1,11 +1,8 @@
-import { EntityWithRoles, WithLabeledEntities } from "@/interfaces/entity";
-import { Group, User } from "@/interfaces/user";
-import { getUserCompanyName, USER_TYPE_LABELS } from "@/resources/user";
+import {  WithLabeledEntities } from "@/interfaces/entity";
+import { User } from "@/interfaces/user";
+import {  USER_TYPE_LABELS } from "@/resources/user";
 import { capitalize } from "lodash";
 import moment from "moment";
-import { mapBy } from ".";
-import { findAllowedEntities } from "./permissions";
-import { getEntitiesUsers } from "./users.be";
 
 export interface UserListRow {
 	name: string;

From d59b654ac2ce58f90b9d9c3114ebe26c4bda9cc1 Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Mon, 3 Feb 2025 11:34:56 +0000
Subject: [PATCH 51/69] do not allow empty steps in workflows

---
 src/pages/approval-workflows/[id]/clone.tsx |  8 ++++++++
 src/pages/approval-workflows/[id]/edit.tsx  | 12 ++++++++++--
 src/pages/approval-workflows/create.tsx     | 10 ++++++++++
 3 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/pages/approval-workflows/[id]/clone.tsx b/src/pages/approval-workflows/[id]/clone.tsx
index d8a363ef..e580d50c 100644
--- a/src/pages/approval-workflows/[id]/clone.tsx
+++ b/src/pages/approval-workflows/[id]/clone.tsx
@@ -123,6 +123,14 @@ export default function Home({ user, workflow, userEntitiesWithLabel, entityUnav
             return;
         }
 
+        for (const step of cloneWorkflow.steps) {
+            if (step.assignees.every(x => !x)) {
+                toast.warning("There is at least one empty step in the workflow.");
+                setIsLoading(false);
+                return;
+            }
+        }
+
         const filteredWorkflow: ApprovalWorkflow = {
             ...cloneWorkflow,
             steps: cloneWorkflow.steps.map(step => ({
diff --git a/src/pages/approval-workflows/[id]/edit.tsx b/src/pages/approval-workflows/[id]/edit.tsx
index 656c0326..e256a0e8 100644
--- a/src/pages/approval-workflows/[id]/edit.tsx
+++ b/src/pages/approval-workflows/[id]/edit.tsx
@@ -94,6 +94,14 @@ export default function Home({ user, workflow, workflowEntityApprovers }: Props)
             return;
         }
 
+        for (const step of updatedWorkflow.steps) {
+            if (step.assignees.every(x => !x)) {
+                toast.warning("There is at least one empty step in the workflow.");
+                setIsLoading(false);
+                return;
+            }
+        }
+
         const filteredWorkflow: ApprovalWorkflow = {
             ...updatedWorkflow,
             steps: updatedWorkflow.steps.map(step => ({
@@ -174,7 +182,7 @@ export default function Home({ user, workflow, workflowEntityApprovers }: Props)
                             exit={{ opacity: 0, x: 60 }}
                             transition={{ duration: 0.20 }}
                         >
-                            {updatedWorkflow &&
+                            {/* {updatedWorkflow &&
                                 <WorkflowForm
                                     workflow={updatedWorkflow}
                                     onWorkflowChange={onWorkflowChange}
@@ -182,7 +190,7 @@ export default function Home({ user, workflow, workflowEntityApprovers }: Props)
                                     isLoading={isLoading}
                                     isRedirecting={isRedirecting}
                                 />
-                            }
+                            } */}
                         </motion.div>
                     </form>
                 </Layout>
diff --git a/src/pages/approval-workflows/create.tsx b/src/pages/approval-workflows/create.tsx
index 0527b651..cf12d216 100644
--- a/src/pages/approval-workflows/create.tsx
+++ b/src/pages/approval-workflows/create.tsx
@@ -124,6 +124,16 @@ export default function Home({ user, allConfiguredWorkflows, userEntitiesWithLab
             return;
         }
 
+        for (const workflow of workflows) {
+            for (const step of workflow.steps) {
+                if (step.assignees.every(x => !x)) {
+                    toast.warning("There are empty steps in at least one of the configured workflows.");
+                    setIsLoading(false); 
+                    return;
+                }
+            }
+        }
+
         const filteredWorkflows: ApprovalWorkflow[] = workflows.map(workflow => ({
             ...workflow,
             steps: workflow.steps.map(step => ({

From 19f2193414ca9c244b6e8e38f5916f0710be43ad Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Mon, 3 Feb 2025 12:31:21 +0000
Subject: [PATCH 52/69] use custom hook to rerender workflow instead of
 reloading full page.

---
 ...lWorkflows.tsx => useApprovalWorkflow.tsx} |  12 +-
 .../api/approval-workflows/[id]/index.ts      |  18 ++-
 src/pages/approval-workflows/[id]/index.tsx   | 106 +++++++-----------
 3 files changed, 65 insertions(+), 71 deletions(-)
 rename src/hooks/{useApprovalWorkflows.tsx => useApprovalWorkflow.tsx} (58%)

diff --git a/src/hooks/useApprovalWorkflows.tsx b/src/hooks/useApprovalWorkflow.tsx
similarity index 58%
rename from src/hooks/useApprovalWorkflows.tsx
rename to src/hooks/useApprovalWorkflow.tsx
index 884f1cb4..9908cfbe 100644
--- a/src/hooks/useApprovalWorkflows.tsx
+++ b/src/hooks/useApprovalWorkflow.tsx
@@ -2,23 +2,23 @@ import { ApprovalWorkflow } from "@/interfaces/approval.workflow";
 import axios from "axios";
 import { useCallback, useEffect, useState } from "react";
 
-export default function useApprovalWorkflows() {
-  const [workflows, setWorkflows] = useState<ApprovalWorkflow[]>([]);
+export default function useApprovalWorkflow(id: string) {
+  const [workflow, setWorkflow] = useState<ApprovalWorkflow>();
   const [isLoading, setIsLoading] = useState(false);
   const [isError, setIsError] = useState(false);
 
   const getData = useCallback(() => {
     setIsLoading(true);
     axios
-      .get<ApprovalWorkflow[]>(`/api/approval-workflows`)
-      .then((response) => setWorkflows(response.data))
+      .get<ApprovalWorkflow>(`/api/approval-workflows/${id}`)
+      .then((response) => setWorkflow(response.data))
       .catch((error) => {
-        setIsError(true); 
+        setIsError(true);
       })
       .finally(() => setIsLoading(false));
   }, []);
 
   useEffect(getData, [getData]);
 
-  return { workflows, isLoading, isError, reload: getData };
+  return { workflow, isLoading, isError, reload: getData };
 }
diff --git a/src/pages/api/approval-workflows/[id]/index.ts b/src/pages/api/approval-workflows/[id]/index.ts
index 6664ac9d..7bf8ecf3 100644
--- a/src/pages/api/approval-workflows/[id]/index.ts
+++ b/src/pages/api/approval-workflows/[id]/index.ts
@@ -2,7 +2,7 @@
 import { ApprovalWorkflow } from "@/interfaces/approval.workflow";
 import { sessionOptions } from "@/lib/session";
 import { requestUser } from "@/utils/api";
-import { deleteApprovalWorkflow, updateApprovalWorkflow } from "@/utils/approval.workflows.be";
+import { deleteApprovalWorkflow, getApprovalWorkflow, updateApprovalWorkflow } from "@/utils/approval.workflows.be";
 import { withIronSessionApiRoute } from "iron-session/next";
 import { ObjectId } from "mongodb";
 import type { NextApiRequest, NextApiResponse } from "next";
@@ -12,6 +12,7 @@ export default withIronSessionApiRoute(handler, sessionOptions);
 async function handler(req: NextApiRequest, res: NextApiResponse) {
     if (req.method === "DELETE") return await del(req, res);
     if (req.method === "PUT") return await put(req, res);
+    if (req.method === "GET") return await get(req, res);
 }
 
 async function del(req: NextApiRequest, res: NextApiResponse) {
@@ -44,3 +45,18 @@ async function put(req: NextApiRequest, res: NextApiResponse) {
         return res.status(204).end();
     }
 }
+
+async function get(req: NextApiRequest, res: NextApiResponse) {
+    const user = await requestUser(req, res);
+    if (!user) return res.status(401).json({ ok: false });
+
+    if (!["admin", "developer", "corporate", "mastercorporate"].includes(user.type)) {
+        return res.status(403).json({ ok: false });
+    }
+
+    const { id } = req.query as { id?: string };
+
+    if (id) {
+        return res.status(200).json(await getApprovalWorkflow("configured-workflows", id));
+    }
+}
diff --git a/src/pages/approval-workflows/[id]/index.tsx b/src/pages/approval-workflows/[id]/index.tsx
index 44416384..c3ae3cae 100644
--- a/src/pages/approval-workflows/[id]/index.tsx
+++ b/src/pages/approval-workflows/[id]/index.tsx
@@ -6,6 +6,7 @@ import UserWithProfilePic from "@/components/ApprovalWorkflows/UserWithProfilePi
 import WorkflowStepComponent from "@/components/ApprovalWorkflows/WorkflowStepComponent";
 import Layout from "@/components/High/Layout";
 import Button from "@/components/Low/Button";
+import useApprovalWorkflow from "@/hooks/useApprovalWorkflow";
 import { ApprovalWorkflow, getUserTypeLabelShort, WorkflowStep } from "@/interfaces/approval.workflow";
 import { User } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
@@ -19,7 +20,6 @@ import { AnimatePresence, LayoutGroup, motion } from "framer-motion";
 import { withIronSessionSsr } from "iron-session/next";
 import Head from "next/head";
 import Link from "next/link";
-import { useRouter } from "next/router";
 import { useState } from "react";
 import { BsChevronLeft } from "react-icons/bs";
 import { FaSpinner, FaWpforms } from "react-icons/fa6";
@@ -57,7 +57,8 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
     return {
         props: serialize({
             user,
-            workflow,
+            initialWorkflow: workflow,
+            id,
             workflowAssignees: await getSpecificUsers(allAssigneeIds),
             workflowRequester: await getUser(workflow.requester),
         }),
@@ -66,25 +67,26 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
 
 interface Props {
     user: User,
-    workflow: ApprovalWorkflow,
+    initialWorkflow: ApprovalWorkflow,
+    id: string,
     workflowAssignees: User[],
     workflowRequester: User,
 }
 
-export default function Home({ user, workflow, workflowAssignees, workflowRequester }: Props) {
-    const steps = workflow.steps;
+export default function Home({ user, initialWorkflow, id, workflowAssignees, workflowRequester }: Props) {
 
-    let currentStep = steps.findIndex(step => !step.completed || step.rejected);
+    const { workflow, reload, isLoading } = useApprovalWorkflow(id);
+
+    const currentWorkflow = workflow || initialWorkflow;
+
+    let currentStep = currentWorkflow.steps.findIndex(step => !step.completed || step.rejected);
     if (currentStep === -1)
-        currentStep = steps.length - 1;
+        currentStep = currentWorkflow.steps.length - 1;
 
     const [selectedStepIndex, setSelectedStepIndex] = useState<number>(currentStep);
-    const [selectedStep, setSelectedStep] = useState<WorkflowStep>(steps[selectedStepIndex]);
+    const [selectedStep, setSelectedStep] = useState<WorkflowStep>(currentWorkflow.steps[selectedStepIndex]);
     const [isPanelOpen, setIsPanelOpen] = useState(true);
     const [comments, setComments] = useState<string>(selectedStep.comments || "");
-    const [isLoading, setIsLoading] = useState<boolean>(false);
-    const [isRedirecting, setIsRedirecting] = useState<boolean>(false);
-    const router = useRouter();
 
     const handleStepClick = (index: number, stepInfo: WorkflowStep) => {
         setSelectedStep(stepInfo);
@@ -94,11 +96,9 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
     };
 
     const handleSaveComments = () => {
-        setIsLoading(true);
-
         const updatedWorkflow: ApprovalWorkflow = {
-            ...workflow,
-            steps: workflow.steps.map((step, index) =>
+            ...currentWorkflow,
+            steps: currentWorkflow.steps.map((step, index) =>
                 index === selectedStepIndex ?
                     {
                         ...step,
@@ -109,11 +109,10 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
         };
 
         axios
-            .put(`/api/approval-workflows/${workflow._id}`, updatedWorkflow)
+            .put(`/api/approval-workflows/${id}`, updatedWorkflow)
             .then(() => {
                 toast.success("Comments saved successfully.");
-                setIsRedirecting(true);
-                router.reload();
+                reload();
             })
             .catch((reason) => {
                 if (reason.response.status === 401) {
@@ -123,19 +122,16 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
                 } else {
                     toast.error("Something went wrong, please try again later.");
                 }
-                setIsLoading(false);
                 console.log("Submitted Values:", updatedWorkflow);
                 return;
             })
     };
 
     const handleApproveStep = () => {
-        setIsLoading(true);
-
         const updatedWorkflow: ApprovalWorkflow = {
-            ...workflow,
-            status: selectedStepIndex === workflow.steps.length - 1 ? "approved" : "pending",
-            steps: workflow.steps.map((step, index) =>
+            ...currentWorkflow,
+            status: selectedStepIndex === currentWorkflow.steps.length - 1 ? "approved" : "pending",
+            steps: currentWorkflow.steps.map((step, index) =>
                 index === selectedStepIndex ?
                     {
                         ...step,
@@ -148,11 +144,10 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
         };
 
         axios
-            .put(`/api/approval-workflows/${workflow._id}`, updatedWorkflow)
+            .put(`/api/approval-workflows/${id}`, updatedWorkflow)
             .then(() => {
                 toast.success("Step approved successfully.");
-                setIsRedirecting(true);
-                router.reload();
+                reload();
             })
             .catch((reason) => {
                 if (reason.response.status === 401) {
@@ -162,20 +157,20 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
                 } else {
                     toast.error("Something went wrong, please try again later.");
                 }
-                setIsLoading(false);
                 console.log("Submitted Values:", updatedWorkflow);
                 return;
             })
+
+        handleStepClick(selectedStepIndex + 1, currentWorkflow.steps[selectedStepIndex + 1]);
     };
 
     const handleRejectStep = () => {
         if (!confirm(`Are you sure you want to reject this step?`)) return;
-        setIsLoading(true);
 
         const updatedWorkflow: ApprovalWorkflow = {
-            ...workflow,
+            ...currentWorkflow,
             status: "rejected",
-            steps: workflow.steps.map((step, index) =>
+            steps: currentWorkflow.steps.map((step, index) =>
                 index === selectedStepIndex ?
                     {
                         ...step,
@@ -189,11 +184,10 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
         };
 
         axios
-            .put(`/api/approval-workflows/${workflow._id}`, updatedWorkflow)
+            .put(`/api/approval-workflows/${id}`, updatedWorkflow)
             .then(() => {
                 toast.success("Step rejected successfully.");
-                setIsRedirecting(true);
-                router.reload();
+                reload();
             })
             .catch((reason) => {
                 if (reason.response.status === 401) {
@@ -203,14 +197,13 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
                 } else {
                     toast.error("Something went wrong, please try again later.");
                 }
-                setIsLoading(false);
                 console.log("Submitted Values:", updatedWorkflow);
                 return;
             })
     };
 
     const handleViewExam = () => {
-        
+
     }
 
     const handleEditExam = () => {
@@ -220,7 +213,7 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
     return (
         <>
             <Head>
-                <title> {workflow.name} | EnCoach</title>
+                <title> Workflow | EnCoach</title>
                 <meta
                     name="description"
                     content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
@@ -238,7 +231,7 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
                             className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
                             <BsChevronLeft />
                         </Link>
-                        <h1 className="text-2xl font-semibold">{workflow.name}</h1>
+                        <h1 className="text-2xl font-semibold">{currentWorkflow.name}</h1>
                     </section>
 
                     <section className="flex flex-col gap-6">
@@ -249,10 +242,10 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
                                 profileImage={workflowRequester.profilePicture}
                             />
                             <StartedOn
-                                date={workflow.startDate}
+                                date={currentWorkflow.startDate}
                             />
                             <Status
-                                status={workflow.status}
+                                status={currentWorkflow.status}
                             />
                         </div>
                         <div className="flex flex-row gap-3">
@@ -261,7 +254,7 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
                                 variant="solid"
                                 onClick={handleViewExam}
                                 padding="px-6 py-2"
-                                className="w-[240px] text-lg flex items-center justify-center gap-2 text-left"         
+                                className="w-[240px] text-lg flex items-center justify-center gap-2 text-left"
                             >
                                 <IoDocumentTextOutline />
                                 View Exam
@@ -271,20 +264,20 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
                                 variant="solid"
                                 onClick={handleEditExam}
                                 padding="px-6 py-2"
-                                className="w-[240px] text-lg flex items-center justify-center gap-2 text-left"         
+                                className="w-[240px] text-lg flex items-center justify-center gap-2 text-left"
                             >
                                 <TiEdit size={20} />
                                 Edit Exam
                             </Button>
-                            
+
                         </div>
-                        {steps.find((step) => !step.completed) === undefined &&
+                        {currentWorkflow.steps.find((step) => !step.completed) === undefined &&
                             <Tip text="All steps in this instance have been completed." />
                         }
                     </section>
 
                     <section className="flex flex-col gap-0">
-                        {steps.map((step, index) => (
+                        {currentWorkflow.steps.map((step, index) => (
                             <WorkflowStepComponent
                                 workflowAssignees={workflowAssignees}
                                 key={index}
@@ -294,7 +287,7 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
                                 stepNumber={step.stepNumber}
                                 stepType={step.stepType}
                                 assignees={step.assignees}
-                                finalStep={index === steps.length - 1}
+                                finalStep={index === currentWorkflow.steps.length - 1}
                                 currentStep={index === currentStep}
                                 selected={index === selectedStepIndex}
                                 onClick={() => handleStepClick(index, step)}
@@ -407,12 +400,7 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
                                                         padding="px-6 py-2"
                                                         className="mb-3 w-full text-lg flex items-center justify-center gap-2 text-left"
                                                     >
-                                                        {isRedirecting ? (
-                                                            <>
-                                                                <FaSpinner className="animate-spin size-5" />
-                                                                Reloading...
-                                                            </>
-                                                        ) : isLoading ? (
+                                                        {isLoading ? (
                                                             <>
                                                                 <FaSpinner className="animate-spin size-5" />
                                                                 Loading...
@@ -433,12 +421,7 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
                                                         padding="px-6 py-2"
                                                         className="mb-3 w-1/2 text-lg flex items-center justify-center gap-2 text-left"
                                                     >
-                                                        {isRedirecting ? (
-                                                            <>
-                                                                <FaSpinner className="animate-spin size-5" />
-                                                                Reloading...
-                                                            </>
-                                                        ) : isLoading ? (
+                                                        {isLoading ? (
                                                             <>
                                                                 <FaSpinner className="animate-spin size-5" />
                                                                 Loading...
@@ -471,12 +454,7 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
                                                 padding="px-6 py-2"
                                                 className="mt-6 mb-3 w-full text-lg flex items-center justify-center gap-2 text-left"
                                             >
-                                                {isRedirecting ? (
-                                                    <>
-                                                        <FaSpinner className="animate-spin size-5" />
-                                                        Reloading...
-                                                    </>
-                                                ) : isLoading ? (
+                                                {isLoading ? (
                                                     <>
                                                         <FaSpinner className="animate-spin size-5" />
                                                         Loading...

From d3385caaf82d9d096f015e7c188defd642d3013d Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Mon, 3 Feb 2025 12:52:03 +0000
Subject: [PATCH 53/69] use custom hook to render approval workflows list
 instead of reloading full page.

---
 src/hooks/useApprovalWorkflows.tsx        | 24 ++++++++++++++++++
 src/pages/api/approval-workflows/index.ts | 23 +++++++++++++++++
 src/pages/approval-workflows/index.tsx    | 31 +++++++++++++----------
 3 files changed, 64 insertions(+), 14 deletions(-)
 create mode 100644 src/hooks/useApprovalWorkflows.tsx
 create mode 100644 src/pages/api/approval-workflows/index.ts

diff --git a/src/hooks/useApprovalWorkflows.tsx b/src/hooks/useApprovalWorkflows.tsx
new file mode 100644
index 00000000..1b950c2f
--- /dev/null
+++ b/src/hooks/useApprovalWorkflows.tsx
@@ -0,0 +1,24 @@
+import { ApprovalWorkflow } from "@/interfaces/approval.workflow";
+import axios from "axios";
+import { useCallback, useEffect, useState } from "react";
+
+export default function useApprovalWorkflows() {
+  const [workflows, setWorkflows] = useState<ApprovalWorkflow[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isError, setIsError] = useState(false);
+
+  const getData = useCallback(() => {
+    setIsLoading(true);
+    axios
+      .get<ApprovalWorkflow[]>(`/api/approval-workflows`)
+      .then((response) => setWorkflows(response.data))
+      .catch((error) => {
+        setIsError(true);
+      })
+      .finally(() => setIsLoading(false));
+  }, []);
+
+  useEffect(getData, [getData]);
+
+  return { workflows, isLoading, isError, reload: getData };
+}
diff --git a/src/pages/api/approval-workflows/index.ts b/src/pages/api/approval-workflows/index.ts
new file mode 100644
index 00000000..e9a5b075
--- /dev/null
+++ b/src/pages/api/approval-workflows/index.ts
@@ -0,0 +1,23 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { sessionOptions } from "@/lib/session";
+import { requestUser } from "@/utils/api";
+import { getApprovalWorkflows } from "@/utils/approval.workflows.be";
+import { withIronSessionApiRoute } from "iron-session/next";
+import type { NextApiRequest, NextApiResponse } from "next";
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+    if (req.method === "GET") return await get(req, res);
+}
+
+async function get(req: NextApiRequest, res: NextApiResponse) {
+    const user = await requestUser(req, res);
+    if (!user) return res.status(401).json({ ok: false });
+
+    if (!["admin", "developer", "corporate", "mastercorporate"].includes(user.type)) {
+        return res.status(403).json({ ok: false });
+    }
+
+    return res.status(200).json(await getApprovalWorkflows("configured-workflows"));
+}
diff --git a/src/pages/approval-workflows/index.tsx b/src/pages/approval-workflows/index.tsx
index 18bc8d8a..ab51ee4f 100644
--- a/src/pages/approval-workflows/index.tsx
+++ b/src/pages/approval-workflows/index.tsx
@@ -2,6 +2,7 @@ import Layout from "@/components/High/Layout";
 import Button from "@/components/Low/Button";
 import Input from "@/components/Low/Input";
 import Select from "@/components/Low/Select";
+import useApprovalWorkflows from "@/hooks/useApprovalWorkflows";
 import { Module, ModuleTypeLabels } from "@/interfaces";
 import { ApprovalWorkflow, ApprovalWorkflowStatus, ApprovalWorkflowStatusLabel, StepTypeLabel } from "@/interfaces/approval.workflow";
 import { Entity, EntityWithRoles } from "@/interfaces/entity";
@@ -51,7 +52,7 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
     return {
         props: serialize({
             user,
-            workflows,
+            initialWorkflows: workflows,
             workflowsAssignees: await getSpecificUsers(allAssigneeIds),
             userEntitiesWithLabel: await getEntities(user.entities.map(entity => entity.id)),
         }),
@@ -87,12 +88,21 @@ const STATUS_OPTIONS = [
 
 interface Props {
     user: User,
-    workflows: ApprovalWorkflow[],
+    initialWorkflows: ApprovalWorkflow[],
     workflowsAssignees: User[],
     userEntitiesWithLabel: Entity[],
 }
 
-export default function ApprovalWorkflows({ user, workflows, workflowsAssignees, userEntitiesWithLabel }: Props) {
+export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAssignees, userEntitiesWithLabel }: Props) {
+
+    const {workflows, reload} = useApprovalWorkflows();
+    const currentWorkflows = workflows || initialWorkflows;
+
+    const [filteredWorkflows, setFilteredWorkflows] = useState<ApprovalWorkflow[]>([]);
+
+    const [statusFilter, setStatusFilter] = useState<CustomStatus>(undefined);
+    const [entityFilter, setEntityFilter] = useState<CustomEntity>(undefined);
+    const [nameFilter, setNameFilter] = useState<string>("");
 
     const ENTITY_OPTIONS = [
         ...userEntitiesWithLabel
@@ -104,13 +114,6 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
             .sort((a, b) => a.label.localeCompare(b.label)),
     ];
 
-    const [filteredWorkflows, setFilteredWorkflows] = useState<ApprovalWorkflow[]>([]);
-
-    const [statusFilter, setStatusFilter] = useState<CustomStatus>(undefined);
-    const [entityFilter, setEntityFilter] = useState<CustomEntity>(undefined);
-    const [nameFilter, setNameFilter] = useState<string>("");
-    const router = useRouter();
-
     useEffect(() => {
         const filters: Array<(workflow: ApprovalWorkflow) => boolean> = [];
 
@@ -135,10 +138,10 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
         }
 
         // Apply all filters
-        const filtered = workflows.filter(workflow => filters.every(filterFn => filterFn(workflow)));
+        const filtered = currentWorkflows.filter(workflow => filters.every(filterFn => filterFn(workflow)));
         setFilteredWorkflows(filtered);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [workflows, statusFilter, entityFilter, nameFilter]);
+    }, [currentWorkflows, statusFilter, entityFilter, nameFilter]);
 
 
     const handleNameFilterChange = (name: ApprovalWorkflow["name"]) => {
@@ -153,7 +156,7 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
             .delete(`/api/approval-workflows/${id}`)
             .then(() => {
                 toast.success(`Successfully deleted ${name} Approval Workflow.`);
-                router.reload();
+                reload();
             })
             .catch((reason) => {
                 if (reason.response.status === 404) {
@@ -215,7 +218,7 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
                 const currentStep = steps.find((step) => !step.completed);
                 const rejected = steps.find((step) => step.rejected);
 
-                if(rejected) return "";
+                if (rejected) return "";
 
                 const assignees = currentStep?.assignees.map((assigneeId) => {
                     const assignee = workflowsAssignees.find((user) => user.id === assigneeId);

From de15eb5ee150f55d97dca3879331b5e958cab2b7 Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Tue, 4 Feb 2025 22:04:58 +0000
Subject: [PATCH 54/69] implement initialization of approval workflows on exam
 creation.

---
 .../ExamEditor/SettingsEditor/level.tsx       | 23 +++++++++++
 .../SettingsEditor/listening/index.tsx        | 23 +++++++++++
 .../SettingsEditor/reading/index.tsx          | 37 +++++++++++++----
 .../SettingsEditor/speaking/index.tsx         | 23 +++++++++++
 .../SettingsEditor/writing/index.tsx          | 24 +++++++++++
 src/interfaces/approval.workflow.ts           |  1 +
 .../api/approval-workflows/[id]/index.ts      |  6 +--
 src/pages/api/approval-workflows/create.ts    |  2 +-
 src/pages/api/approval-workflows/index.ts     | 41 ++++++++++++++++++-
 src/pages/approval-workflows/[id]/index.tsx   |  8 +++-
 src/pages/approval-workflows/index.tsx        |  3 +-
 src/utils/approval.workflows.be.ts            |  4 +-
 12 files changed, 175 insertions(+), 20 deletions(-)

diff --git a/src/components/ExamEditor/SettingsEditor/level.tsx b/src/components/ExamEditor/SettingsEditor/level.tsx
index c5fc97e1..913abb4b 100644
--- a/src/components/ExamEditor/SettingsEditor/level.tsx
+++ b/src/components/ExamEditor/SettingsEditor/level.tsx
@@ -17,6 +17,7 @@ import ListeningComponents from "./listening/components";
 import ReadingComponents from "./reading/components";
 import SpeakingComponents from "./speaking/components";
 import SectionPicker from "./Shared/SectionPicker";
+import { getExamById } from "@/utils/exams";
 
 
 const LevelSettings: React.FC = () => {
@@ -213,6 +214,28 @@ const LevelSettings: React.FC = () => {
                 URL.revokeObjectURL(url);
             });
 
+            const requestBody = await (async () => {
+                const handledExam = await getExamById("level", result.data.id);
+
+                return {
+                    examAuthor: handledExam?.createdBy ?? "Unknown Author",
+                    examId: handledExam?.id ?? "Unknown ID",
+                    examModule: "level"
+                };
+            })();
+            await axios.post(`/api/approval-workflows`, requestBody)
+                .then(() => {
+                    toast.success(`Approval Workflow for exam has been created`);
+                })
+                .catch((reason) => {
+                    if (reason.response.status === 404) {
+                        toast.error("No configured workflow found for examAuthor.");
+                    }
+                    else {
+                        toast.error("Something went wrong while creating approval workflow, please try again later.");
+                    }
+                });
+
         } catch (error: any) {
             console.error('Error submitting exam:', error);
             toast.error(
diff --git a/src/components/ExamEditor/SettingsEditor/listening/index.tsx b/src/components/ExamEditor/SettingsEditor/listening/index.tsx
index e3c4d416..0c9ae1f6 100644
--- a/src/components/ExamEditor/SettingsEditor/listening/index.tsx
+++ b/src/components/ExamEditor/SettingsEditor/listening/index.tsx
@@ -17,6 +17,7 @@ import { usePersistentExamStore } from "@/stores/exam";
 import { playSound } from "@/utils/sound";
 import { toast } from "react-toastify";
 import ListeningComponents from "./components";
+import { getExamById } from "@/utils/exams";
 
 const ListeningSettings: React.FC = () => {
     const router = useRouter();
@@ -151,6 +152,28 @@ const ListeningSettings: React.FC = () => {
                 playSound("sent");
                 toast.success(`Submitted Exam ID: ${result.data.id}`);
 
+                const requestBody = await (async () => {
+                    const handledExam = await getExamById("listening", result.data.id);
+
+                    return {
+                        examAuthor: handledExam?.createdBy ?? "Unknown Author",
+                        examId: handledExam?.id ?? "Unknown ID",
+                        examModule: "listening"
+                    };
+                })();
+                await axios.post(`/api/approval-workflows`, requestBody)
+                    .then(() => {
+                        toast.success(`Approval Workflow for exam has been created`);
+                    })
+                    .catch((reason) => {
+                        if (reason.response.status === 404) {
+                            toast.error("No configured workflow found for examAuthor.");
+                        }
+                        else {
+                            toast.error("Something went wrong while creating approval workflow, please try again later.");
+                        }
+                    });
+
             } else {
                 toast.error('No audio sections found in the exam! Please either import them or generate them.');
             }
diff --git a/src/components/ExamEditor/SettingsEditor/reading/index.tsx b/src/components/ExamEditor/SettingsEditor/reading/index.tsx
index 590a246d..2d4abe67 100644
--- a/src/components/ExamEditor/SettingsEditor/reading/index.tsx
+++ b/src/components/ExamEditor/SettingsEditor/reading/index.tsx
@@ -12,6 +12,7 @@ import axios from "axios";
 import { playSound } from "@/utils/sound";
 import { toast } from "react-toastify";
 import ReadingComponents from "./components";
+import { getExamById } from "@/utils/exams";
 
 const ReadingSettings: React.FC = () => {
     const router = useRouter();
@@ -46,15 +47,15 @@ const ReadingSettings: React.FC = () => {
         {
             label: "Preset: Reading Passage 1",
             value: "Welcome to {part} of the {label}. You will read texts relating to everyday topics and situations. These may include advertisements, brochures, manuals, or official documents. Answer questions that test your ability to locate specific information and understand main ideas."
-          },
-          {
-            label: "Preset: Reading Passage 2", 
+        },
+        {
+            label: "Preset: Reading Passage 2",
             value: "Welcome to {part} of the {label}. You will read texts dealing with general interest topics that may include news articles, company policies, or workplace documents. Answer questions testing your understanding of main ideas, specific details, and the author's views."
-          },
-          {
+        },
+        {
             label: "Preset: Reading Passage 3",
             value: "Welcome to {part} of the {label}. You will read longer academic texts that may include journal articles, academic essays, or research papers. Answer questions testing your ability to understand complex arguments, identify key points, and follow the development of ideas."
-          }
+        }
     ];
 
     const canPreviewOrSubmit = sections.some(
@@ -89,11 +90,29 @@ const ReadingSettings: React.FC = () => {
             .then((result) => {
                 playSound("sent");
                 toast.success(`Submitted Exam ID: ${result.data.id}`);
+
+                return getExamById("reading", result.data.id);
+            })
+            .then((handledExam) => {
+                const requestBody = {
+                    examAuthor: handledExam?.createdBy ?? "Unknown Author",
+                    examId: handledExam?.id ?? "Unknown ID",
+                    examModule: "reading"
+                };
+
+                return axios.post(`/api/approval-workflows`, requestBody);
+            })
+            .then(() => {
+                toast.success(`Approval Workflow for exam has been created`);
             })
             .catch((error) => {
-                console.log(error);
-                toast.error(error.response.data.error || "Something went wrong while submitting, please try again later.");
-            })
+                if (error.response && error.response.status === 404) {
+                    toast.error("No configured workflow found for examAuthor.");
+                } else {
+                    // This error could come from either of the requests
+                    toast.error(error.response?.data?.error || "Something went wrong, please try again later.");
+                }
+            });
     }
 
     const preview = () => {
diff --git a/src/components/ExamEditor/SettingsEditor/speaking/index.tsx b/src/components/ExamEditor/SettingsEditor/speaking/index.tsx
index 8fccbc97..ba86d02d 100644
--- a/src/components/ExamEditor/SettingsEditor/speaking/index.tsx
+++ b/src/components/ExamEditor/SettingsEditor/speaking/index.tsx
@@ -11,6 +11,7 @@ import openDetachedTab from "@/utils/popout";
 import axios from "axios";
 import { playSound } from "@/utils/sound";
 import SpeakingComponents from "./components";
+import { getExamById } from "@/utils/exams";
 
 export interface Avatar {
     name: string;
@@ -194,6 +195,28 @@ const SpeakingSettings: React.FC = () => {
           Array.from(urlMap.values()).forEach(url => {
             URL.revokeObjectURL(url);
           });
+
+          const requestBody = await (async () => {
+            const handledExam = await getExamById("speaking", result.data.id);
+
+            return {
+              examAuthor: handledExam?.createdBy ?? "Unknown Author",
+              examId: handledExam?.id ?? "Unknown ID",
+              examModule: "speaking"
+            };
+          })();
+          await axios.post(`/api/approval-workflows`, requestBody)
+            .then(() => {
+              toast.success(`Approval Workflow for exam has been created`);
+            })
+            .catch((reason) => {
+              if (reason.response.status === 404) {
+                toast.error("No configured workflow found for examAuthor.");
+              }
+              else {
+                toast.error("Something went wrong while creating approval workflow, please try again later.");
+              }
+            });
       
         } catch (error: any) {
           toast.error(
diff --git a/src/components/ExamEditor/SettingsEditor/writing/index.tsx b/src/components/ExamEditor/SettingsEditor/writing/index.tsx
index 6ed9aebe..7799ca07 100644
--- a/src/components/ExamEditor/SettingsEditor/writing/index.tsx
+++ b/src/components/ExamEditor/SettingsEditor/writing/index.tsx
@@ -12,6 +12,8 @@ import axios from "axios";
 import { playSound } from "@/utils/sound";
 import { toast } from "react-toastify";
 import WritingComponents from "./components";
+import { getExamById } from "@/utils/exams";
+import { ApprovalWorkflow } from "@/interfaces/approval.workflow";
 
 const WritingSettings: React.FC = () => {
     const router = useRouter();
@@ -140,6 +142,28 @@ const WritingSettings: React.FC = () => {
             playSound("sent");
             toast.success(`Submitted Exam ID: ${result.data.id}`);
 
+            const requestBody = await (async () => {
+                const handledExam = await getExamById("writing", result.data.id);
+
+                return {
+                    examAuthor: handledExam?.createdBy ?? "Unknown Author",
+                    examId: handledExam?.id ?? "Unknown ID",
+                    examModule: "writing"
+                };
+            })();
+            await axios.post(`/api/approval-workflows`, requestBody)
+                .then(() => {
+                    toast.success(`Approval Workflow for exam has been created`);
+                })
+                .catch((reason) => {
+                    if (reason.response.status === 404) {
+                        toast.error("No configured workflow found for examAuthor.");
+                    }
+                    else {
+                        toast.error("Something went wrong while creating approval workflow, please try again later.");
+                    }
+                });
+
         } catch (error: any) {
             console.error('Error submitting exam:', error);
             toast.error(
diff --git a/src/interfaces/approval.workflow.ts b/src/interfaces/approval.workflow.ts
index 69cffa5e..84a6567d 100644
--- a/src/interfaces/approval.workflow.ts
+++ b/src/interfaces/approval.workflow.ts
@@ -9,6 +9,7 @@ export interface ApprovalWorkflow {
     requester: User["id"],
     startDate: number,
     modules: Module[],
+    examId?: string,
     status: ApprovalWorkflowStatus,
     steps: WorkflowStep[],
 }
diff --git a/src/pages/api/approval-workflows/[id]/index.ts b/src/pages/api/approval-workflows/[id]/index.ts
index 7bf8ecf3..c50026c0 100644
--- a/src/pages/api/approval-workflows/[id]/index.ts
+++ b/src/pages/api/approval-workflows/[id]/index.ts
@@ -25,7 +25,7 @@ async function del(req: NextApiRequest, res: NextApiResponse) {
 
     const { id } = req.query as { id?: string };
 
-    if (id) return res.status(200).json(await deleteApprovalWorkflow("configured-workflows", id));
+    if (id) return res.status(200).json(await deleteApprovalWorkflow("active-workflows", id));
 }
 
 async function put(req: NextApiRequest, res: NextApiResponse) {
@@ -41,7 +41,7 @@ async function put(req: NextApiRequest, res: NextApiResponse) {
 
     if (id && workflow) {
         workflow._id = new ObjectId(id);
-        await updateApprovalWorkflow("configured-workflows", workflow);
+        await updateApprovalWorkflow("active-workflows", workflow);
         return res.status(204).end();
     }
 }
@@ -57,6 +57,6 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
     const { id } = req.query as { id?: string };
 
     if (id) {
-        return res.status(200).json(await getApprovalWorkflow("configured-workflows", id));
+        return res.status(200).json(await getApprovalWorkflow("active-workflows", id));
     }
 }
diff --git a/src/pages/api/approval-workflows/create.ts b/src/pages/api/approval-workflows/create.ts
index ddd46da5..96889899 100644
--- a/src/pages/api/approval-workflows/create.ts
+++ b/src/pages/api/approval-workflows/create.ts
@@ -33,5 +33,5 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
 
     await replaceApprovalWorkflowsByEntities(configuredWorkflows, entitiesIds);
 
-    return res.status(201).json({ ok: true });
+    return res.status(204).end();
 }
diff --git a/src/pages/api/approval-workflows/index.ts b/src/pages/api/approval-workflows/index.ts
index e9a5b075..9cffb13d 100644
--- a/src/pages/api/approval-workflows/index.ts
+++ b/src/pages/api/approval-workflows/index.ts
@@ -1,14 +1,23 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { Module } from "@/interfaces";
 import { sessionOptions } from "@/lib/session";
 import { requestUser } from "@/utils/api";
-import { getApprovalWorkflows } from "@/utils/approval.workflows.be";
+import { createApprovalWorkflow, getApprovalWorkflowByFormIntaker, getApprovalWorkflows } from "@/utils/approval.workflows.be";
 import { withIronSessionApiRoute } from "iron-session/next";
 import type { NextApiRequest, NextApiResponse } from "next";
 
 export default withIronSessionApiRoute(handler, sessionOptions);
 
+interface PostRequestBody {
+    examAuthor: string,
+    examId: string,
+    examName: string,
+    examModule: Module,
+}
+
 async function handler(req: NextApiRequest, res: NextApiResponse) {
     if (req.method === "GET") return await get(req, res);
+    if (req.method === "POST") return await post(req, res);
 }
 
 async function get(req: NextApiRequest, res: NextApiResponse) {
@@ -19,5 +28,33 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
         return res.status(403).json({ ok: false });
     }
 
-    return res.status(200).json(await getApprovalWorkflows("configured-workflows"));
+    return res.status(200).json(await getApprovalWorkflows("active-workflows"));
+}
+
+async function post(req: NextApiRequest, res: NextApiResponse) {
+    const user = await requestUser(req, res);
+    if (!user) return res.status(401).json({ ok: false });
+
+    if (!["admin", "developer", "corporate", "mastercorporate"].includes(user.type)) {
+        return res.status(403).json({ ok: false });
+    }
+
+    const { examAuthor, examId, examModule } = req.body as PostRequestBody;
+
+    if (examAuthor) {
+        const configuredWorkflow = await getApprovalWorkflowByFormIntaker(examAuthor);
+        if(configuredWorkflow) {
+            configuredWorkflow.modules.push(examModule);
+            configuredWorkflow.name = `${examId}`;
+            configuredWorkflow.examId = examId;
+            configuredWorkflow.startDate = Date.now();
+    
+            return res.status(201).json(await createApprovalWorkflow("active-workflows", configuredWorkflow));
+        } else {
+            return res.status(404).json("No configured workflow found for examAuthor.");
+        }
+
+    }
+
+
 }
diff --git a/src/pages/approval-workflows/[id]/index.tsx b/src/pages/approval-workflows/[id]/index.tsx
index c3ae3cae..64d16bd5 100644
--- a/src/pages/approval-workflows/[id]/index.tsx
+++ b/src/pages/approval-workflows/[id]/index.tsx
@@ -41,7 +41,7 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
 
     const { id } = params as { id: string };
 
-    const workflow: ApprovalWorkflow | null = await getApprovalWorkflow("configured-workflows", id);
+    const workflow: ApprovalWorkflow | null = await getApprovalWorkflow("active-workflows", id);
 
     if (!workflow)
         return redirect("/approval-workflows")
@@ -161,7 +161,11 @@ export default function Home({ user, initialWorkflow, id, workflowAssignees, wor
                 return;
             })
 
-        handleStepClick(selectedStepIndex + 1, currentWorkflow.steps[selectedStepIndex + 1]);
+        if (selectedStepIndex + 1 < currentWorkflow.steps.length){
+            handleStepClick(selectedStepIndex + 1, currentWorkflow.steps[selectedStepIndex + 1]);
+        } else {
+            setIsPanelOpen(false);
+        }
     };
 
     const handleRejectStep = () => {
diff --git a/src/pages/approval-workflows/index.tsx b/src/pages/approval-workflows/index.tsx
index ab51ee4f..516f543a 100644
--- a/src/pages/approval-workflows/index.tsx
+++ b/src/pages/approval-workflows/index.tsx
@@ -20,7 +20,6 @@ import clsx from "clsx";
 import { withIronSessionSsr } from "iron-session/next";
 import Head from "next/head";
 import Link from "next/link";
-import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { BsTrash } from "react-icons/bs";
 import { FaRegEdit } from "react-icons/fa";
@@ -98,6 +97,8 @@ export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAss
     const {workflows, reload} = useApprovalWorkflows();
     const currentWorkflows = workflows || initialWorkflows;
 
+    console.log(currentWorkflows);
+
     const [filteredWorkflows, setFilteredWorkflows] = useState<ApprovalWorkflow[]>([]);
 
     const [statusFilter, setStatusFilter] = useState<CustomStatus>(undefined);
diff --git a/src/utils/approval.workflows.be.ts b/src/utils/approval.workflows.be.ts
index baf02bfd..200a3d89 100644
--- a/src/utils/approval.workflows.be.ts
+++ b/src/utils/approval.workflows.be.ts
@@ -22,9 +22,9 @@ export const getApprovalWorkflowsByEntities = async (collection: string, ids: st
         .toArray();
 };
 
-export const getApprovalWorkflowByFormIntaker = async (entityId: string, formIntakerId: string) => {
+export const getApprovalWorkflowByFormIntaker = async (/* entityId: string, */ formIntakerId: string) => {
     return await db.collection<ApprovalWorkflow>("configured-workflows").findOne({
-        entityId,
+        /* entityId, */
         steps: {
             $elemMatch: {
                 stepNumber: 1,

From b215885dc668f26f7bbc97c3e5009927ffa39248 Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Tue, 4 Feb 2025 23:22:56 +0000
Subject: [PATCH 55/69] - Make isDiagnostic false when all steps of the exam
 workflow have been approved. - Implement Load Exam and Edit Exam buttons

---
 .../ExamEditor/SettingsEditor/level.tsx       |   2 +-
 .../SettingsEditor/listening/index.tsx        |   2 +-
 .../SettingsEditor/reading/index.tsx          |   2 +-
 .../SettingsEditor/speaking/index.tsx         |   2 +-
 .../SettingsEditor/writing/index.tsx          |   2 +-
 src/pages/approval-workflows/[id]/index.tsx   | 106 +++++++++++++++---
 6 files changed, 96 insertions(+), 20 deletions(-)

diff --git a/src/components/ExamEditor/SettingsEditor/level.tsx b/src/components/ExamEditor/SettingsEditor/level.tsx
index 913abb4b..e55e6c15 100644
--- a/src/components/ExamEditor/SettingsEditor/level.tsx
+++ b/src/components/ExamEditor/SettingsEditor/level.tsx
@@ -195,7 +195,7 @@ const LevelSettings: React.FC = () => {
                         category: s.settings.category
                     };
                 }).filter(part => part.exercises.length > 0),
-                isDiagnostic: false,
+                isDiagnostic: true, // using isDiagnostic to keep exam hidden until the respective approval workflow is completed.
                 minTimer,
                 module: "level",
                 id: title,
diff --git a/src/components/ExamEditor/SettingsEditor/listening/index.tsx b/src/components/ExamEditor/SettingsEditor/listening/index.tsx
index 0c9ae1f6..489d9c3d 100644
--- a/src/components/ExamEditor/SettingsEditor/listening/index.tsx
+++ b/src/components/ExamEditor/SettingsEditor/listening/index.tsx
@@ -138,7 +138,7 @@ const ListeningSettings: React.FC = () => {
                             category: s.settings.category
                         };
                     }),
-                    isDiagnostic: false,
+                    isDiagnostic: true, // using isDiagnostic to keep exam hidden until the respective approval workflow is completed.
                     minTimer,
                     module: "listening",
                     id: title,
diff --git a/src/components/ExamEditor/SettingsEditor/reading/index.tsx b/src/components/ExamEditor/SettingsEditor/reading/index.tsx
index 2d4abe67..0597dea3 100644
--- a/src/components/ExamEditor/SettingsEditor/reading/index.tsx
+++ b/src/components/ExamEditor/SettingsEditor/reading/index.tsx
@@ -76,7 +76,7 @@ const ReadingSettings: React.FC = () => {
                     category: localSettings.category
                 };
             }),
-            isDiagnostic: false,
+            isDiagnostic: true, // using isDiagnostic to keep exam hidden until the respective approval workflow is completed.
             minTimer,
             module: "reading",
             id: title,
diff --git a/src/components/ExamEditor/SettingsEditor/speaking/index.tsx b/src/components/ExamEditor/SettingsEditor/speaking/index.tsx
index ba86d02d..d187e2e4 100644
--- a/src/components/ExamEditor/SettingsEditor/speaking/index.tsx
+++ b/src/components/ExamEditor/SettingsEditor/speaking/index.tsx
@@ -181,7 +181,7 @@ const SpeakingSettings: React.FC = () => {
             minTimer,
             module: "speaking",
             id: title,
-            isDiagnostic: false,
+            isDiagnostic: true, // using isDiagnostic to keep exam hidden until the respective approval workflow is completed.
             variant: undefined,
             difficulty,
             instructorGender: "varied",
diff --git a/src/components/ExamEditor/SettingsEditor/writing/index.tsx b/src/components/ExamEditor/SettingsEditor/writing/index.tsx
index 7799ca07..2147f8ec 100644
--- a/src/components/ExamEditor/SettingsEditor/writing/index.tsx
+++ b/src/components/ExamEditor/SettingsEditor/writing/index.tsx
@@ -131,7 +131,7 @@ const WritingSettings: React.FC = () => {
                 minTimer,
                 module: "writing",
                 id: title,
-                isDiagnostic: false,
+                isDiagnostic: true, // using isDiagnostic to keep exam hidden until the respective approval workflow is completed.
                 variant: undefined,
                 difficulty,
                 private: isPrivate,
diff --git a/src/pages/approval-workflows/[id]/index.tsx b/src/pages/approval-workflows/[id]/index.tsx
index 64d16bd5..c4a6bb3e 100644
--- a/src/pages/approval-workflows/[id]/index.tsx
+++ b/src/pages/approval-workflows/[id]/index.tsx
@@ -10,9 +10,11 @@ import useApprovalWorkflow from "@/hooks/useApprovalWorkflow";
 import { ApprovalWorkflow, getUserTypeLabelShort, WorkflowStep } from "@/interfaces/approval.workflow";
 import { User } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
+import useExamStore from "@/stores/exam";
 import { redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
 import { getApprovalWorkflow } from "@/utils/approval.workflows.be";
+import { getExamById } from "@/utils/exams";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
 import { getSpecificUsers, getUser } from "@/utils/users.be";
 import axios from "axios";
@@ -20,6 +22,7 @@ import { AnimatePresence, LayoutGroup, motion } from "framer-motion";
 import { withIronSessionSsr } from "iron-session/next";
 import Head from "next/head";
 import Link from "next/link";
+import { useRouter } from "next/router";
 import { useState } from "react";
 import { BsChevronLeft } from "react-icons/bs";
 import { FaSpinner, FaWpforms } from "react-icons/fa6";
@@ -79,14 +82,18 @@ export default function Home({ user, initialWorkflow, id, workflowAssignees, wor
 
     const currentWorkflow = workflow || initialWorkflow;
 
-    let currentStep = currentWorkflow.steps.findIndex(step => !step.completed || step.rejected);
-    if (currentStep === -1)
-        currentStep = currentWorkflow.steps.length - 1;
+    let currentStepIndex = currentWorkflow.steps.findIndex(step => !step.completed || step.rejected);
+    if (currentStepIndex === -1)
+        currentStepIndex = currentWorkflow.steps.length - 1;
 
-    const [selectedStepIndex, setSelectedStepIndex] = useState<number>(currentStep);
+    const [selectedStepIndex, setSelectedStepIndex] = useState<number>(currentStepIndex);
     const [selectedStep, setSelectedStep] = useState<WorkflowStep>(currentWorkflow.steps[selectedStepIndex]);
     const [isPanelOpen, setIsPanelOpen] = useState(true);
     const [comments, setComments] = useState<string>(selectedStep.comments || "");
+    const [viewExamIsLoading, setViewExamIsLoading] = useState<boolean>(false);
+    const [editExamIsLoading, setEditExamIsLoading] = useState<boolean>(false);
+
+    const router = useRouter();
 
     const handleStepClick = (index: number, stepInfo: WorkflowStep) => {
         setSelectedStep(stepInfo);
@@ -128,6 +135,11 @@ export default function Home({ user, initialWorkflow, id, workflowAssignees, wor
     };
 
     const handleApproveStep = () => {
+        const isLastStep = (selectedStepIndex + 1 === currentWorkflow.steps.length);
+        if (isLastStep) {
+            if (!confirm(`Are you sure you want to approve the last step? Doing so will approve the exam.`)) return;
+        }
+
         const updatedWorkflow: ApprovalWorkflow = {
             ...currentWorkflow,
             status: selectedStepIndex === currentWorkflow.steps.length - 1 ? "approved" : "pending",
@@ -161,15 +173,35 @@ export default function Home({ user, initialWorkflow, id, workflowAssignees, wor
                 return;
             })
 
-        if (selectedStepIndex + 1 < currentWorkflow.steps.length){
-            handleStepClick(selectedStepIndex + 1, currentWorkflow.steps[selectedStepIndex + 1]);
-        } else {
+        if (isLastStep) {
             setIsPanelOpen(false);
+            const examModule = currentWorkflow.modules[0];
+            const examId = currentWorkflow.examId;
+
+            axios
+                .patch(`/api/exam/${examModule}/${examId}`, { isDiagnostic: false })
+                .then(() => toast.success(`The exam was successfuly approved and this workflow has been completed.`))
+                .catch((reason) => {
+                    if (reason.response.status === 404) {
+                        toast.error("Exam not found!");
+                        return;
+                    }
+
+                    if (reason.response.status === 403) {
+                        toast.error("You do not have permission to update this exam!");
+                        return;
+                    }
+
+                    toast.error("Something went wrong, please try again later.");
+                })
+                .finally(reload);
+        } else {
+            handleStepClick(selectedStepIndex + 1, currentWorkflow.steps[selectedStepIndex + 1]);
         }
     };
 
     const handleRejectStep = () => {
-        if (!confirm(`Are you sure you want to reject this step?`)) return;
+        if (!confirm(`Are you sure you want to reject this step? Doing so will terminate this approval workflow.`)) return;
 
         const updatedWorkflow: ApprovalWorkflow = {
             ...currentWorkflow,
@@ -206,12 +238,36 @@ export default function Home({ user, initialWorkflow, id, workflowAssignees, wor
             })
     };
 
-    const handleViewExam = () => {
+    const dispatch = useExamStore((store) => store.dispatch);
+    const handleViewExam = async () => {
+        setViewExamIsLoading(true);
+        const examModule = currentWorkflow.modules[0];
+        const examId = currentWorkflow.examId;
 
+        if (examModule && examId) {
+            const exam = await getExamById(examModule, examId.trim());
+            if (!exam) {
+                toast.error(
+                    "Unknown Exam ID! Please make sure you selected the right module and entered the right exam ID",
+                    { toastId: "invalid-exam-id" }
+                );
+                setViewExamIsLoading(false);
+                return;
+            }
+            dispatch({
+                type: "INIT_EXAM",
+                payload: { exams: [exam], modules: [examModule] },
+            });
+            router.push("/exam");
+        }
     }
 
     const handleEditExam = () => {
+        setEditExamIsLoading(true);
+        const examModule = currentWorkflow.modules[0];
+        const examId = currentWorkflow.examId;
 
+        router.push(`/generation?id=${examId}&module=${examModule}`);
     }
 
     return (
@@ -257,21 +313,41 @@ export default function Home({ user, initialWorkflow, id, workflowAssignees, wor
                                 color="purple"
                                 variant="solid"
                                 onClick={handleViewExam}
+                                disabled={viewExamIsLoading}
                                 padding="px-6 py-2"
                                 className="w-[240px] text-lg flex items-center justify-center gap-2 text-left"
                             >
-                                <IoDocumentTextOutline />
-                                View Exam
+                                {viewExamIsLoading ? (
+                                    <>
+                                        <FaSpinner className="animate-spin size-5" />
+                                        Loading...
+                                    </>
+                                ) : (
+                                    <>
+                                        <IoDocumentTextOutline />
+                                        Load Exam
+                                    </>
+                                )}
                             </Button>
                             <Button
                                 color="purple"
                                 variant="solid"
                                 onClick={handleEditExam}
                                 padding="px-6 py-2"
+                                disabled={!currentWorkflow.steps[currentStepIndex].assignees.includes(user.id) || editExamIsLoading}
                                 className="w-[240px] text-lg flex items-center justify-center gap-2 text-left"
                             >
-                                <TiEdit size={20} />
-                                Edit Exam
+                                {editExamIsLoading ? (
+                                    <>
+                                        <FaSpinner className="animate-spin size-5" />
+                                        Loading...
+                                    </>
+                                ) : (
+                                    <>
+                                        <TiEdit size={20} />
+                                        Edit Exam
+                                    </>
+                                )}
                             </Button>
 
                         </div>
@@ -292,7 +368,7 @@ export default function Home({ user, initialWorkflow, id, workflowAssignees, wor
                                 stepType={step.stepType}
                                 assignees={step.assignees}
                                 finalStep={index === currentWorkflow.steps.length - 1}
-                                currentStep={index === currentStep}
+                                currentStep={index === currentStepIndex}
                                 selected={index === selectedStepIndex}
                                 onClick={() => handleStepClick(index, step)}
                             />
@@ -393,7 +469,7 @@ export default function Home({ user, initialWorkflow, id, workflowAssignees, wor
                                                 </div>
                                             )}
 
-                                            {selectedStepIndex === currentStep && !selectedStep.completed && !selectedStep.rejected &&
+                                            {selectedStepIndex === currentStepIndex && !selectedStep.completed && !selectedStep.rejected &&
                                                 <div className="flex flex-row gap-2 ">
                                                     <Button
                                                         type="submit"

From f4c7961caa7d81967d3e013353782bd693f87eb9 Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Wed, 5 Feb 2025 00:43:49 +0000
Subject: [PATCH 56/69] implement edit active workflow and do not allow editing
 on already completed steps

---
 .../WorkflowEditableStepComponent.tsx         |   5 +-
 .../ApprovalWorkflows/WorkflowForm.tsx        | 159 ++++++++++--------
 .../ApprovalWorkflows/WorkflowStepSelects.tsx |   3 +
 src/pages/api/approval-workflows/[id]/edit.ts |   2 +-
 src/pages/approval-workflows/[id]/edit.tsx    |  46 +++--
 5 files changed, 122 insertions(+), 93 deletions(-)

diff --git a/src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx b/src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx
index 85fab5de..9936842f 100644
--- a/src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx
@@ -12,6 +12,7 @@ import WorkflowStepSelects from "./WorkflowStepSelects";
 interface Props extends Pick<EditableWorkflowStep, 'stepNumber' | 'assignees' | 'finalStep' | 'onDelete'> {
     entityApprovers: (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[];
     onSelectChange: (numberOfSelects: number, index: number, value: Option | null) => void;
+    isCompleted: boolean,
 }
 
 export default function WorkflowEditableStepComponent({
@@ -21,6 +22,7 @@ export default function WorkflowEditableStepComponent({
     onDelete,
     onSelectChange,
     entityApprovers,
+    isCompleted,
 }: Props) {
 
     const [selects, setSelects] = useState<(Option | null | undefined)[]>([null]);
@@ -95,7 +97,7 @@ export default function WorkflowEditableStepComponent({
                 )}
             </div>
 
-            {stepNumber !== 1 && !finalStep
+            {stepNumber !== 1 && !finalStep && !isCompleted
                 ? <LuGripHorizontal className="ml-3 mt-2 cursor-grab active:cursor-grabbing min-w-[25px] min-h-[25px]" />
                 : <div className="ml-3 mt-2" style={{ width: 25, height: 25 }}></div>
             }
@@ -106,6 +108,7 @@ export default function WorkflowEditableStepComponent({
                     selects={selects}
                     placeholder={stepNumber === 1 ? "Form Intake By:" : "Approval By:"}
                     onSelectChange={handleSelectChangeAt}
+                    isCompleted={isCompleted}
                 />
             </div>
 
diff --git a/src/components/ApprovalWorkflows/WorkflowForm.tsx b/src/components/ApprovalWorkflows/WorkflowForm.tsx
index 4d27e150..c7065d7c 100644
--- a/src/components/ApprovalWorkflows/WorkflowForm.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowForm.tsx
@@ -1,8 +1,7 @@
 import { EditableApprovalWorkflow, EditableWorkflowStep } from "@/interfaces/approval.workflow";
 import Option from "@/interfaces/option";
 import { CorporateUser, DeveloperUser, MasterCorporateUser, TeacherUser } from "@/interfaces/user";
-import { AnimatePresence, Reorder } from "framer-motion";
-import { useState } from "react";
+import { AnimatePresence, Reorder, motion } from "framer-motion";
 import { FaRegCheckCircle, FaSpinner } from "react-icons/fa";
 import { IoIosAddCircleOutline } from "react-icons/io";
 import Button from "../Low/Button";
@@ -13,9 +12,9 @@ interface Props {
     workflow: EditableApprovalWorkflow;
     onWorkflowChange: (workflow: EditableApprovalWorkflow) => void;
     entityApprovers: (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[];
-    entityAvailableFormIntakers: (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[];
+    entityAvailableFormIntakers?: (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[];
     isLoading: boolean;
-    isRedirecting: boolean;
+    isRedirecting?: boolean;
 }
 
 export default function WorkflowForm({ workflow, onWorkflowChange, entityApprovers, entityAvailableFormIntakers, isLoading, isRedirecting }: Props) {
@@ -75,19 +74,15 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityApprove
     };
 
     const handleReorder = (newOrder: EditableWorkflowStep[]) => {
-        const firstIndex = newOrder.findIndex((s) => s.firstStep);
-        if (firstIndex !== -1 && firstIndex !== 0) {
-            const [first] = newOrder.splice(firstIndex, 1);
-            newOrder.unshift(first);
-        }
-
-        const finalIndex = newOrder.findIndex((s) => s.finalStep);
-        if (finalIndex !== -1 && finalIndex !== newOrder.length - 1) {
-            const [final] = newOrder.splice(finalIndex, 1);
-            newOrder.push(final);
-        }
-
-        onWorkflowChange({ ...workflow, steps: renumberSteps(newOrder) });
+        let draggableIndex = 0;
+        const updatedSteps = workflow.steps.map((step) => {
+            if (!step.firstStep && !step.finalStep && !step.completed) {
+                return newOrder[draggableIndex++];
+            }
+            // Keep static steps as-is
+            return step;
+        });
+        onWorkflowChange({ ...workflow, steps: renumberSteps(updatedSteps) });
     };
 
 
@@ -118,55 +113,87 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityApprove
                         className="flex flex-col gap-0"
                     >
                         <AnimatePresence>
-                            {workflow.steps.map((step, index) => (
-                                <Reorder.Item
-                                    key={step.key}
-                                    value={step}
-                                    initial={{ opacity: 0, y: -30 }}
-                                    animate={{ opacity: 1, y: 0 }}
-                                    exit={{ opacity: 0, x: 30 }}
-                                    transition={{ duration: 0.20 }}
-                                    layout
-                                    drag={!(step.firstStep || step.finalStep)}
-                                >
-
-                                    <WorkflowEditableStepComponent
-                                        stepNumber={index + 1}
-                                        assignees={step.assignees}
-                                        finalStep={step.finalStep}
-                                        onDelete={() => handleDelete(step.key)}
-                                        onSelectChange={(numberOfSelects, idx, option) => handleSelectChange(step.key, numberOfSelects, idx, option)}
-                                        entityApprovers={step.stepNumber === 1 ? entityAvailableFormIntakers : entityApprovers}
-                                    />
-
-                                    {step.finalStep &&
-                                        <Button
-                                            type="submit"
-                                            color="purple"
-                                            variant="solid"
-                                            disabled={isLoading}
-                                            className="max-w-fit text-lg font-medium flex items-center gap-2 text-left -mt-4"
-                                        >
-                                            {isRedirecting ? (
-                                                <>
-                                                    <FaSpinner className="animate-spin size-5" />
-                                                    Redirecting...
-                                                </>
-                                            ) : isLoading ? (
-                                                <>
-                                                    <FaSpinner className="animate-spin size-5" />
-                                                    Loading...
-                                                </>
-                                            ) : (
-                                                <>
-                                                    <FaRegCheckCircle className="size-5" />
-                                                    Confirm Exam Workflow Pipeline
-                                                </>
-                                            )}
-                                        </Button>
-                                    }
-                                </Reorder.Item>
-                            ))}
+                            {workflow.steps.map((step, index) =>
+                                step.completed || step.firstStep || step.finalStep ? (
+                                    <motion.div
+                                        key={step.key}
+                                        layout
+                                        initial={{ opacity: 0, y: -30 }}
+                                        animate={{ opacity: 1, y: 0 }}
+                                        exit={{ opacity: 0, x: 30 }}
+                                        transition={{ duration: 0.20 }}
+                                    >
+                                        <WorkflowEditableStepComponent
+                                            stepNumber={index + 1}
+                                            assignees={step.assignees}
+                                            finalStep={step.finalStep}
+                                            onDelete={() => handleDelete(step.key)}
+                                            onSelectChange={(numberOfSelects, idx, option) =>
+                                                handleSelectChange(step.key, numberOfSelects, idx, option)
+                                            }
+                                            entityApprovers={
+                                                step.stepNumber === 1 && entityAvailableFormIntakers
+                                                    ? entityAvailableFormIntakers
+                                                    : entityApprovers
+                                            }
+                                            isCompleted={step.completed}
+                                        />
+                                    </motion.div>
+                                ) : (
+                                    // Render non-completed steps as draggable items
+                                    <Reorder.Item
+                                        key={step.key}
+                                        value={step}
+                                        initial={{ opacity: 0, y: -30 }}
+                                        animate={{ opacity: 1, y: 0 }}
+                                        exit={{ opacity: 0, x: 30 }}
+                                        transition={{ duration: 0.20 }}
+                                        layout
+                                        drag={!step.firstStep && !step.finalStep}
+                                        dragListener={!step.firstStep && !step.finalStep}
+                                    >
+                                        <WorkflowEditableStepComponent
+                                            stepNumber={index + 1}
+                                            assignees={step.assignees}
+                                            finalStep={step.finalStep}
+                                            onDelete={() => handleDelete(step.key)}
+                                            onSelectChange={(numberOfSelects, idx, option) =>
+                                                handleSelectChange(step.key, numberOfSelects, idx, option)
+                                            }
+                                            entityApprovers={
+                                                step.stepNumber === 1 && entityAvailableFormIntakers
+                                                    ? entityAvailableFormIntakers
+                                                    : entityApprovers
+                                            }
+                                            isCompleted={step.completed}
+                                        />
+                                    </Reorder.Item>
+                                )
+                            )}
+                            <Button
+                                type="submit"
+                                color="purple"
+                                variant="solid"
+                                disabled={isLoading}
+                                className="max-w-fit text-lg font-medium flex items-center gap-2 text-left -mt-4"
+                            >
+                                {isRedirecting ? (
+                                    <>
+                                        <FaSpinner className="animate-spin size-5" />
+                                        Redirecting...
+                                    </>
+                                ) : isLoading ? (
+                                    <>
+                                        <FaSpinner className="animate-spin size-5" />
+                                        Loading...
+                                    </>
+                                ) : (
+                                    <>
+                                        <FaRegCheckCircle className="size-5" />
+                                        Confirm Exam Workflow Pipeline
+                                    </>
+                                )}
+                            </Button>
                         </AnimatePresence>
                     </Reorder.Group>
                 </div>
diff --git a/src/components/ApprovalWorkflows/WorkflowStepSelects.tsx b/src/components/ApprovalWorkflows/WorkflowStepSelects.tsx
index a7c39f67..878b650c 100644
--- a/src/components/ApprovalWorkflows/WorkflowStepSelects.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowStepSelects.tsx
@@ -6,6 +6,7 @@ interface Props {
     selects: (Option | null | undefined)[];
     placeholder: string;
     onSelectChange: (numberOfSelects: number, index: number, value: Option | null) => void;
+    isCompleted: boolean;
 }
 
 export default function WorkflowStepSelects({
@@ -13,6 +14,7 @@ export default function WorkflowStepSelects({
     selects,
     placeholder,
     onSelectChange,
+    isCompleted,
 }: Props) {
 
     return (
@@ -39,6 +41,7 @@ export default function WorkflowStepSelects({
                             flat
                             isClearable
                             className={classes}
+                            disabled={isCompleted}
                         />
                     </div>
                 );
diff --git a/src/pages/api/approval-workflows/[id]/edit.ts b/src/pages/api/approval-workflows/[id]/edit.ts
index 556d0e52..a547f0cf 100644
--- a/src/pages/api/approval-workflows/[id]/edit.ts
+++ b/src/pages/api/approval-workflows/[id]/edit.ts
@@ -26,7 +26,7 @@ async function put(req: NextApiRequest, res: NextApiResponse) {
 
     if (id && approvalWorkflow) {
         approvalWorkflow._id = new ObjectId(id);
-        await updateApprovalWorkflow("configured-workflows", approvalWorkflow);
+        await updateApprovalWorkflow("active-workflows", approvalWorkflow);
         return res.status(204).end();
     }
 }
diff --git a/src/pages/approval-workflows/[id]/edit.tsx b/src/pages/approval-workflows/[id]/edit.tsx
index e256a0e8..84955016 100644
--- a/src/pages/approval-workflows/[id]/edit.tsx
+++ b/src/pages/approval-workflows/[id]/edit.tsx
@@ -12,11 +12,10 @@ import { getApprovalWorkflow } from "@/utils/approval.workflows.be";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
 import { getEntityUsers } from "@/utils/users.be";
 import axios from "axios";
-import { motion } from "framer-motion";
+import { LayoutGroup, motion } from "framer-motion";
 import { withIronSessionSsr } from "iron-session/next";
 import Head from "next/head";
 import Link from "next/link";
-import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { BsChevronLeft } from "react-icons/bs";
 import { toast, ToastContainer } from "react-toastify";
@@ -30,7 +29,7 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
 
     const { id } = params as { id: string };
 
-    const workflow: ApprovalWorkflow | null = await getApprovalWorkflow("configured-workflows", id);
+    const workflow: ApprovalWorkflow | null = await getApprovalWorkflow("active-workflows", id);
 
     if (!workflow)
         return redirect("/approval-workflows")
@@ -53,9 +52,6 @@ interface Props {
 export default function Home({ user, workflow, workflowEntityApprovers }: Props) {
     const [updatedWorkflow, setUpdatedWorkflow] = useState<EditableApprovalWorkflow | null>(null);
     const [isLoading, setIsLoading] = useState<boolean>(false);
-    const [isRedirecting, setIsRedirecting] = useState<boolean>(false);
-
-    const router = useRouter();
 
     useEffect(() => {
         const editableSteps: EditableWorkflowStep[] = workflow.steps.map(step => ({
@@ -114,8 +110,7 @@ export default function Home({ user, workflow, workflowEntityApprovers }: Props)
             .put(`/api/approval-workflows/${updatedWorkflow.id}/edit`, filteredWorkflow)
             .then(() => {
                 toast.success("Approval Workflow edited successfully.");
-                setIsRedirecting(true);
-                router.push("/approval-workflows");
+                setIsLoading(false);
             })
             .catch((reason) => {
                 if (reason.response.status === 401) {
@@ -175,23 +170,24 @@ export default function Home({ user, workflow, workflowEntityApprovers }: Props)
                     </section>
 
                     <form onSubmit={handleSubmit}>
-                        <motion.div
-                            key="form"
-                            initial={{ opacity: 0, y: -30 }}
-                            animate={{ opacity: 1, y: 0 }}
-                            exit={{ opacity: 0, x: 60 }}
-                            transition={{ duration: 0.20 }}
-                        >
-                            {/* {updatedWorkflow &&
-                                <WorkflowForm
-                                    workflow={updatedWorkflow}
-                                    onWorkflowChange={onWorkflowChange}
-                                    entityApprovers={workflowEntityApprovers}
-                                    isLoading={isLoading}
-                                    isRedirecting={isRedirecting}
-                                />
-                            } */}
-                        </motion.div>
+                        <LayoutGroup key={workflow.name}>
+                            <motion.div
+                                key="form"
+                                initial={{ opacity: 0, y: -30 }}
+                                animate={{ opacity: 1, y: 0 }}
+                                exit={{ opacity: 0, x: 60 }}
+                                transition={{ duration: 0.20 }}
+                            >
+                                {updatedWorkflow &&
+                                    <WorkflowForm
+                                        workflow={updatedWorkflow}
+                                        onWorkflowChange={onWorkflowChange}
+                                        entityApprovers={workflowEntityApprovers}
+                                        isLoading={isLoading}
+                                    />
+                                }
+                            </motion.div>
+                        </LayoutGroup>
                     </form>
                 </Layout>
             )}

From 6692c201e427e68a937128a8674a8bc3efb7ff52 Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Wed, 5 Feb 2025 12:37:53 +0000
Subject: [PATCH 57/69] instanciate all workflows configured for an exam author
 based on different entities.

---
 .../ExamEditor/SettingsEditor/level.tsx       | 30 +++++++-----
 .../SettingsEditor/listening/index.tsx        | 30 +++++++-----
 .../SettingsEditor/reading/index.tsx          | 20 +++++---
 .../SettingsEditor/speaking/index.tsx         | 30 +++++++-----
 .../SettingsEditor/writing/index.tsx          | 26 ++++++----
 src/pages/api/approval-workflows/index.ts     | 48 +++++++++++++------
 src/pages/approval-workflows/create.tsx       |  3 +-
 src/pages/approval-workflows/index.tsx        |  5 +-
 src/utils/approval.workflows.be.ts            |  4 +-
 9 files changed, 129 insertions(+), 67 deletions(-)

diff --git a/src/components/ExamEditor/SettingsEditor/level.tsx b/src/components/ExamEditor/SettingsEditor/level.tsx
index e55e6c15..20c8fd81 100644
--- a/src/components/ExamEditor/SettingsEditor/level.tsx
+++ b/src/components/ExamEditor/SettingsEditor/level.tsx
@@ -215,24 +215,32 @@ const LevelSettings: React.FC = () => {
             });
 
             const requestBody = await (async () => {
-                const handledExam = await getExamById("level", result.data.id);
-
+                const handledExam = await getExamById("writing", result.data.id);
                 return {
                     examAuthor: handledExam?.createdBy ?? "Unknown Author",
+                    examEntities: handledExam?.entities ?? [],
                     examId: handledExam?.id ?? "Unknown ID",
-                    examModule: "level"
+                    examModule: "writing"
                 };
             })();
-            await axios.post(`/api/approval-workflows`, requestBody)
-                .then(() => {
-                    toast.success(`Approval Workflow for exam has been created`);
+            await axios
+                .post(`/api/approval-workflows`, requestBody)
+                .then((response) => {
+                    if (response.status === 200) {
+                        toast.success(`Approval Workflows for exam have been successfully created`);
+                    } else if (response.status === 207) {
+                        toast.warning(
+                            `Approval Workflows were partially created. Exam author might not have a configured workflow for all its entities.`
+                        );
+                    }
                 })
                 .catch((reason) => {
-                    if (reason.response.status === 404) {
-                        toast.error("No configured workflow found for examAuthor.");
-                    }
-                    else {
-                        toast.error("Something went wrong while creating approval workflow, please try again later.");
+                    if (reason.response?.status === 404) {
+                        toast.error("No configured workflow found for examAuthor for any of its entities.");
+                    } else {
+                        toast.error(
+                            "Something went wrong while creating approval workflow, please try again later."
+                        );
                     }
                 });
 
diff --git a/src/components/ExamEditor/SettingsEditor/listening/index.tsx b/src/components/ExamEditor/SettingsEditor/listening/index.tsx
index 489d9c3d..efbdfb6d 100644
--- a/src/components/ExamEditor/SettingsEditor/listening/index.tsx
+++ b/src/components/ExamEditor/SettingsEditor/listening/index.tsx
@@ -153,24 +153,32 @@ const ListeningSettings: React.FC = () => {
                 toast.success(`Submitted Exam ID: ${result.data.id}`);
 
                 const requestBody = await (async () => {
-                    const handledExam = await getExamById("listening", result.data.id);
-
+                    const handledExam = await getExamById("writing", result.data.id);
                     return {
                         examAuthor: handledExam?.createdBy ?? "Unknown Author",
+                        examEntities: handledExam?.entities ?? [],
                         examId: handledExam?.id ?? "Unknown ID",
-                        examModule: "listening"
+                        examModule: "writing"
                     };
                 })();
-                await axios.post(`/api/approval-workflows`, requestBody)
-                    .then(() => {
-                        toast.success(`Approval Workflow for exam has been created`);
+                await axios
+                    .post(`/api/approval-workflows`, requestBody)
+                    .then((response) => {
+                        if (response.status === 200) {
+                            toast.success(`Approval Workflows for exam have been successfully created`);
+                        } else if (response.status === 207) {
+                            toast.warning(
+                                `Approval Workflows were partially created. Exam author might not have a configured workflow for all its entities.`
+                            );
+                        }
                     })
                     .catch((reason) => {
-                        if (reason.response.status === 404) {
-                            toast.error("No configured workflow found for examAuthor.");
-                        }
-                        else {
-                            toast.error("Something went wrong while creating approval workflow, please try again later.");
+                        if (reason.response?.status === 404) {
+                            toast.error("No configured workflow found for examAuthor for any of its entities.");
+                        } else {
+                            toast.error(
+                                "Something went wrong while creating approval workflow, please try again later."
+                            );
                         }
                     });
 
diff --git a/src/components/ExamEditor/SettingsEditor/reading/index.tsx b/src/components/ExamEditor/SettingsEditor/reading/index.tsx
index 0597dea3..4a16ff12 100644
--- a/src/components/ExamEditor/SettingsEditor/reading/index.tsx
+++ b/src/components/ExamEditor/SettingsEditor/reading/index.tsx
@@ -90,27 +90,35 @@ const ReadingSettings: React.FC = () => {
             .then((result) => {
                 playSound("sent");
                 toast.success(`Submitted Exam ID: ${result.data.id}`);
-
                 return getExamById("reading", result.data.id);
             })
             .then((handledExam) => {
                 const requestBody = {
                     examAuthor: handledExam?.createdBy ?? "Unknown Author",
+                    examEntities: handledExam?.entities ?? [],
                     examId: handledExam?.id ?? "Unknown ID",
                     examModule: "reading"
                 };
 
                 return axios.post(`/api/approval-workflows`, requestBody);
             })
-            .then(() => {
-                toast.success(`Approval Workflow for exam has been created`);
+            .then((response) => {
+                if (response.status === 200) {
+                    toast.success(`Approval Workflows for exam have been successfully created`);
+                } else if (response.status === 207) {
+                    toast.warning(
+                        `Approval Workflows were partially created. Exam author might not have a configured workflow for all its entities.`
+                    );
+                }
             })
             .catch((error) => {
                 if (error.response && error.response.status === 404) {
-                    toast.error("No configured workflow found for examAuthor.");
+                    toast.error("No configured workflow found for examAuthor for any of its entities.");
                 } else {
-                    // This error could come from either of the requests
-                    toast.error(error.response?.data?.error || "Something went wrong, please try again later.");
+                    toast.error(
+                        error.response?.data?.error ||
+                        "Something went wrong, please try again later."
+                    );
                 }
             });
     }
diff --git a/src/components/ExamEditor/SettingsEditor/speaking/index.tsx b/src/components/ExamEditor/SettingsEditor/speaking/index.tsx
index d187e2e4..0b9570b8 100644
--- a/src/components/ExamEditor/SettingsEditor/speaking/index.tsx
+++ b/src/components/ExamEditor/SettingsEditor/speaking/index.tsx
@@ -197,24 +197,32 @@ const SpeakingSettings: React.FC = () => {
           });
 
           const requestBody = await (async () => {
-            const handledExam = await getExamById("speaking", result.data.id);
-
+            const handledExam = await getExamById("writing", result.data.id);
             return {
               examAuthor: handledExam?.createdBy ?? "Unknown Author",
+              examEntities: handledExam?.entities ?? [],
               examId: handledExam?.id ?? "Unknown ID",
-              examModule: "speaking"
+              examModule: "writing"
             };
           })();
-          await axios.post(`/api/approval-workflows`, requestBody)
-            .then(() => {
-              toast.success(`Approval Workflow for exam has been created`);
+          await axios
+            .post(`/api/approval-workflows`, requestBody)
+            .then((response) => {
+              if (response.status === 200) {
+                toast.success(`Approval Workflows for exam have been successfully created`);
+              } else if (response.status === 207) {
+                toast.warning(
+                  `Approval Workflows were partially created. Exam author might not have a configured workflow for all its entities.`
+                );
+              }
             })
             .catch((reason) => {
-              if (reason.response.status === 404) {
-                toast.error("No configured workflow found for examAuthor.");
-              }
-              else {
-                toast.error("Something went wrong while creating approval workflow, please try again later.");
+              if (reason.response?.status === 404) {
+                toast.error("No configured workflow found for examAuthor for any of its entities.");
+              } else {
+                toast.error(
+                  "Something went wrong while creating approval workflow, please try again later."
+                );
               }
             });
       
diff --git a/src/components/ExamEditor/SettingsEditor/writing/index.tsx b/src/components/ExamEditor/SettingsEditor/writing/index.tsx
index 2147f8ec..d0fd0bbf 100644
--- a/src/components/ExamEditor/SettingsEditor/writing/index.tsx
+++ b/src/components/ExamEditor/SettingsEditor/writing/index.tsx
@@ -144,23 +144,31 @@ const WritingSettings: React.FC = () => {
 
             const requestBody = await (async () => {
                 const handledExam = await getExamById("writing", result.data.id);
-
                 return {
                     examAuthor: handledExam?.createdBy ?? "Unknown Author",
+                    examEntities: handledExam?.entities ?? [],
                     examId: handledExam?.id ?? "Unknown ID",
                     examModule: "writing"
                 };
             })();
-            await axios.post(`/api/approval-workflows`, requestBody)
-                .then(() => {
-                    toast.success(`Approval Workflow for exam has been created`);
+            await axios
+                .post(`/api/approval-workflows`, requestBody)
+                .then((response) => {
+                    if (response.status === 200) {
+                        toast.success(`Approval Workflows for exam have been successfully created`);
+                    } else if (response.status === 207) {
+                        toast.warning(
+                            `Approval Workflows were partially created. Exam author might not have a configured workflow for all its entities.`
+                        );
+                    } 
                 })
                 .catch((reason) => {
-                    if (reason.response.status === 404) {
-                        toast.error("No configured workflow found for examAuthor.");
-                    }
-                    else {
-                        toast.error("Something went wrong while creating approval workflow, please try again later.");
+                    if (reason.response?.status === 404) {
+                        toast.error("No configured workflow found for examAuthor for any of its entities.");
+                    } else {
+                        toast.error(
+                            "Something went wrong while creating approval workflow, please try again later."
+                        );
                     }
                 });
 
diff --git a/src/pages/api/approval-workflows/index.ts b/src/pages/api/approval-workflows/index.ts
index 9cffb13d..26636186 100644
--- a/src/pages/api/approval-workflows/index.ts
+++ b/src/pages/api/approval-workflows/index.ts
@@ -9,10 +9,11 @@ import type { NextApiRequest, NextApiResponse } from "next";
 export default withIronSessionApiRoute(handler, sessionOptions);
 
 interface PostRequestBody {
-    examAuthor: string,
-    examId: string,
-    examName: string,
-    examModule: Module,
+    examAuthor: string;
+    examEntities: string[];
+    examId: string;
+    examName: string;
+    examModule: Module;
 }
 
 async function handler(req: NextApiRequest, res: NextApiResponse) {
@@ -39,22 +40,39 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
         return res.status(403).json({ ok: false });
     }
 
-    const { examAuthor, examId, examModule } = req.body as PostRequestBody;
+    const { examAuthor, examEntities, examId, examModule } = req.body as PostRequestBody;
+
+    const results = await Promise.all(
+        examEntities.map(async (entity) => {
+            const configuredWorkflow = await getApprovalWorkflowByFormIntaker(entity, examAuthor);
+            if (!configuredWorkflow) {
+                return { entity, created: false, error: "No configured workflow found for examAuthor." };
+            }
 
-    if (examAuthor) {
-        const configuredWorkflow = await getApprovalWorkflowByFormIntaker(examAuthor);
-        if(configuredWorkflow) {
             configuredWorkflow.modules.push(examModule);
             configuredWorkflow.name = `${examId}`;
             configuredWorkflow.examId = examId;
+            configuredWorkflow.entityId = entity;
             configuredWorkflow.startDate = Date.now();
-    
-            return res.status(201).json(await createApprovalWorkflow("active-workflows", configuredWorkflow));
-        } else {
-            return res.status(404).json("No configured workflow found for examAuthor.");
-        }
 
+            try {
+                const creationResponse = await createApprovalWorkflow("active-workflows", configuredWorkflow);
+                return { entity, created: true, creationResponse };
+            } catch (error) {
+                const err = error as Error;
+                return { entity, created: false, error: err.message };
+            }
+        })
+    );
+
+    const successCount = results.filter((r) => r.created).length;
+    const totalCount = examEntities.length;
+
+    if (successCount === totalCount) {
+        return res.status(200).json({ ok: true, results });
+    } else if (successCount > 0) {
+        return res.status(207).json({ ok: true, results });
+    } else {
+        return res.status(404).json({ ok: false, message: "No workflows were created", results });
     }
-
-
 }
diff --git a/src/pages/approval-workflows/create.tsx b/src/pages/approval-workflows/create.tsx
index cf12d216..49bdae1b 100644
--- a/src/pages/approval-workflows/create.tsx
+++ b/src/pages/approval-workflows/create.tsx
@@ -256,8 +256,9 @@ export default function Home({ user, allConfiguredWorkflows, userEntitiesWithLab
                         </div>
                     </section>
 
-                    <section className="flex flex-row gap-6">
+                    <Tip text="Setting a teacher as a Form Intaker means the configured workflow will be instanciated when said teacher publishes an exam. Only one Form Intake per teacher per entity is allowed."/>
 
+                    <section className="flex flex-row gap-6">
                         <Button
                             color="purple"
                             variant="solid"
diff --git a/src/pages/approval-workflows/index.tsx b/src/pages/approval-workflows/index.tsx
index 516f543a..116e2625 100644
--- a/src/pages/approval-workflows/index.tsx
+++ b/src/pages/approval-workflows/index.tsx
@@ -1,3 +1,4 @@
+import Tip from "@/components/ApprovalWorkflows/Tip";
 import Layout from "@/components/High/Layout";
 import Button from "@/components/Low/Button";
 import Input from "@/components/Low/Input";
@@ -173,7 +174,7 @@ export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAss
 
     const columns = [
         columnHelper.accessor("name", {
-            header: "NAME",
+            header: "EXAM NAME",
             cell: (info) => (
                 <span className="font-medium">
                     {info.getValue()}
@@ -371,6 +372,8 @@ export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAss
                         </div>
                     </div>
 
+                    <Tip text="An exam submission will instanciate the approval workflow configured for the exam author. The exam will be valid only when all the steps of the workflow have been approved."></Tip>
+
                     <div className="px-6 pb-4 bg-mti-purple-ultralight rounded-2xl border-2 border-mti-purple-light border-opacity-40">
                         <table
                             className="w-full table-auto border-separate border-spacing-y-2"
diff --git a/src/utils/approval.workflows.be.ts b/src/utils/approval.workflows.be.ts
index 200a3d89..baf02bfd 100644
--- a/src/utils/approval.workflows.be.ts
+++ b/src/utils/approval.workflows.be.ts
@@ -22,9 +22,9 @@ export const getApprovalWorkflowsByEntities = async (collection: string, ids: st
         .toArray();
 };
 
-export const getApprovalWorkflowByFormIntaker = async (/* entityId: string, */ formIntakerId: string) => {
+export const getApprovalWorkflowByFormIntaker = async (entityId: string, formIntakerId: string) => {
     return await db.collection<ApprovalWorkflow>("configured-workflows").findOne({
-        /* entityId, */
+        entityId,
         steps: {
             $elemMatch: {
                 stepNumber: 1,

From d48c7b0d03b636e2c8c6154a9b4a0d8c0494cbd1 Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Wed, 5 Feb 2025 13:03:42 +0000
Subject: [PATCH 58/69] implement clone in new builder and fix typo

---
 .../api/approval-workflows/[id]/clone.ts      |  27 --
 src/pages/approval-workflows/[id]/clone.tsx   | 303 ------------------
 src/pages/approval-workflows/create.tsx       |  33 +-
 src/pages/approval-workflows/index.tsx        |  12 +-
 4 files changed, 33 insertions(+), 342 deletions(-)
 delete mode 100644 src/pages/api/approval-workflows/[id]/clone.ts
 delete mode 100644 src/pages/approval-workflows/[id]/clone.tsx

diff --git a/src/pages/api/approval-workflows/[id]/clone.ts b/src/pages/api/approval-workflows/[id]/clone.ts
deleted file mode 100644
index 73fd4153..00000000
--- a/src/pages/api/approval-workflows/[id]/clone.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import { ApprovalWorkflow } from "@/interfaces/approval.workflow";
-import { sessionOptions } from "@/lib/session";
-import { requestUser } from "@/utils/api";
-import { createApprovalWorkflow } from "@/utils/approval.workflows.be";
-import { withIronSessionApiRoute } from "iron-session/next";
-import type { NextApiRequest, NextApiResponse } from "next";
-
-export default withIronSessionApiRoute(handler, sessionOptions);
-
-async function handler(req: NextApiRequest, res: NextApiResponse) {
-    if (req.method === "POST") return await post(req, res);
-}
-
-async function post(req: NextApiRequest, res: NextApiResponse) {
-    const user = await requestUser(req, res);
-    if (!user) return res.status(401).json({ ok: false });
-
-    if (!["admin", "developer", "corporate", "mastercorporate"].includes(user.type)) {
-        return res.status(403).json({ ok: false });
-    }
-
-    const approvalWorkflow: ApprovalWorkflow = req.body;
-
-    if (approvalWorkflow)
-        return res.status(201).json(await createApprovalWorkflow("configured-workflows", approvalWorkflow));
-}
diff --git a/src/pages/approval-workflows/[id]/clone.tsx b/src/pages/approval-workflows/[id]/clone.tsx
deleted file mode 100644
index e580d50c..00000000
--- a/src/pages/approval-workflows/[id]/clone.tsx
+++ /dev/null
@@ -1,303 +0,0 @@
-import Tip from "@/components/ApprovalWorkflows/Tip";
-import WorkflowForm from "@/components/ApprovalWorkflows/WorkflowForm";
-import Layout from "@/components/High/Layout";
-import Button from "@/components/Low/Button";
-import Input from "@/components/Low/Input";
-import Select from "@/components/Low/Select";
-import { ApprovalWorkflow, EditableApprovalWorkflow, EditableWorkflowStep } from "@/interfaces/approval.workflow";
-import { Entity } from "@/interfaces/entity";
-import { CorporateUser, DeveloperUser, MasterCorporateUser, TeacherUser, User } from "@/interfaces/user";
-import { sessionOptions } from "@/lib/session";
-import { redirect, serialize } from "@/utils";
-import { requestUser } from "@/utils/api";
-import { getEntities } from "@/utils/entities.be";
-import { shouldRedirectHome } from "@/utils/navigation.disabled";
-import { getEntitiesUsers } from "@/utils/users.be";
-import { uuidv4 } from "@firebase/util";
-import { AnimatePresence, LayoutGroup, motion } from "framer-motion";
-import { withIronSessionSsr } from "iron-session/next";
-import Head from "next/head";
-import Link from "next/link";
-import { useEffect, useState } from "react";
-import { BsChevronLeft } from "react-icons/bs";
-import { GrClearOption } from "react-icons/gr";
-import { toast, ToastContainer } from "react-toastify";
-import { useRouter } from "next/router";
-import axios from "axios";
-import { getApprovalWorkflow, getFormIntakersByEntity } from "@/utils/approval.workflows.be";
-
-export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => {
-    const user = await requestUser(req, res);
-    if (!user) return redirect("/login")
-
-    if (shouldRedirectHome(user) || !["admin", "developer", "teacher", "corporate", "mastercorporate"].includes(user.type))
-        return redirect("/")
-
-    const { id } = params as { id: string };
-
-    const workflow: ApprovalWorkflow | null = await getApprovalWorkflow("configured-workflows", id);
-
-    if (!workflow)
-        return redirect("/approval-workflows")
-
-    const userEntitiesWithLabel = await getEntities(user.entities.map(entity => entity.id));
-
-    return {
-        props: serialize({
-            user,
-            workflow,
-            userEntitiesWithLabel,
-            entityUnavailableFormIntakers: await getFormIntakersByEntity(workflow.entityId),
-            userEntitiesApprovers: await getEntitiesUsers(userEntitiesWithLabel.map(entity => entity.id), { type: { $in: ["teacher", "corporate", "mastercorporate", "developer"] } }) as (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[],
-        }),
-    };
-}, sessionOptions);
-
-interface Props {
-    user: User,
-    workflow: ApprovalWorkflow,
-    userEntitiesWithLabel: Entity[],
-    entityUnavailableFormIntakers: string[],
-    userEntitiesApprovers: (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[],
-}
-
-export default function Home({ user, workflow, userEntitiesWithLabel, entityUnavailableFormIntakers, userEntitiesApprovers }: Props) {
-    const [cloneWorkflow, setCloneWorkflow] = useState<EditableApprovalWorkflow | null>(null);
-    const [entityId, setEntityId] = useState<string | null | undefined>(workflow.entityId);
-    const [entityApprovers, setEntityApprovers] = useState<(TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[]>([]);
-    const [isLoading, setIsLoading] = useState<boolean>(false);
-    const [isRedirecting, setIsRedirecting] = useState<boolean>(false);
-
-    const router = useRouter();
-
-    useEffect(() => {
-        if (entityId) {
-            setEntityApprovers(
-                userEntitiesApprovers.filter(approver =>
-                    approver.entities.some(entity => entity.id === entityId)
-                )
-            );
-        } else {
-            setEntityApprovers([]);
-        }
-    }, [entityId, userEntitiesApprovers]);
-
-    const ENTITY_OPTIONS = userEntitiesWithLabel.map(entity => ({
-        label: entity.label,
-        value: entity.id,
-        filter: (x: EditableApprovalWorkflow) => x.entityId === entity.id,
-    }));
-
-    useEffect(() => {
-        const editableSteps: EditableWorkflowStep[] = workflow.steps.map(step => ({
-            key: step.stepNumber + 999, // just making sure they are unique because new steps that users add will have key=3 key=4 etc
-            stepType: step.stepType,
-            stepNumber: step.stepNumber,
-            completed: false,
-            assignees: step.assignees.map(id => id),
-            firstStep: step.firstStep || false,
-            finalStep: step.finalStep || false,
-            onDelete: undefined,
-        }));
-
-        const editableWorkflow: EditableApprovalWorkflow = {
-            id: uuidv4(), // this id is only used in UI. it is ommited on submission to DB and lets mongo handle unique id.
-            name: workflow.name,
-            entityId: workflow.entityId,
-            requester: user.id,
-            startDate: Date.now(),
-            modules: workflow.modules,
-            status: "pending",
-            steps: editableSteps,
-        };
-
-        setCloneWorkflow(editableWorkflow);
-    }, []);
-
-    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-        e.preventDefault();
-        setIsLoading(true);
-
-        if (!cloneWorkflow) {
-            setIsLoading(false);
-            return;
-        }
-
-        for (const step of cloneWorkflow.steps) {
-            if (step.assignees.every(x => !x)) {
-                toast.warning("There is at least one empty step in the workflow.");
-                setIsLoading(false);
-                return;
-            }
-        }
-
-        const filteredWorkflow: ApprovalWorkflow = {
-            ...cloneWorkflow,
-            steps: cloneWorkflow.steps.map(step => ({
-                ...step,
-                completed: false,
-                assignees: step.assignees.filter((assignee): assignee is string => assignee !== null && assignee !== undefined)
-            }))
-        };
-
-        axios
-            .post(`/api/approval-workflows/${workflow._id}/clone`, filteredWorkflow)
-            .then(() => {
-                toast.success("Approval Workflow cloned successfully.");
-                setIsRedirecting(true);
-                router.push("/approval-workflows");
-            })
-            .catch((reason) => {
-                if (reason.response.status === 401) {
-                    toast.error("Not logged in!");
-                } else if (reason.response.status === 403) {
-                    toast.error("You do not have permission to clone Approval Workflows!");
-                } else {
-                    toast.error("Something went wrong, please try again later.");
-                }
-                setIsLoading(false);
-                console.log("Submitted Values:", filteredWorkflow);
-                return;
-            })
-
-    };
-
-    const onWorkflowChange = (wf: EditableApprovalWorkflow) => {
-        setCloneWorkflow(wf);
-    }
-
-    const handleEntityChange = (wf: EditableApprovalWorkflow, entityId: string) => {
-        const updatedWorkflow = {
-            ...wf,
-            entityId: entityId,
-            steps: wf.steps.map(step => ({
-                ...step,
-                assignees: step.assignees.map(() => null)
-            }))
-        }
-        onWorkflowChange(updatedWorkflow);
-    }
-
-    const handleResetWorkflow = () => {
-        if (!confirm("This action will reset all the fields in this workflow. Are you sure you want to proceed?")) return;
-        const newId = uuidv4();
-        const newWorkflow: EditableApprovalWorkflow = {
-            id: newId,
-            name: "",
-            entityId: "",
-            modules: [],
-            requester: user.id,
-            startDate: Date.now(),
-            status: "pending",
-            steps: [
-                { key: 9998, stepType: "form-intake", stepNumber: 1, completed: false, firstStep: true, finalStep: false, assignees: [null] },
-                { key: 9999, stepType: "approval-by", stepNumber: 2, completed: false, firstStep: false, finalStep: true, assignees: [null] },
-            ],
-        };
-        setCloneWorkflow(newWorkflow);
-    }
-
-    return (
-        <>
-            <Head>
-                <title> Clone Workflow | 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 />
-            {user && (
-                <Layout user={user} className="gap-6">
-                    <section className="flex items-center gap-2">
-                        <Link
-                            href="/approval-workflows"
-                            className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
-                            <BsChevronLeft />
-                        </Link>
-                        <h1 className="text-2xl font-semibold">Clone Workflow</h1>
-                    </section>
-
-                    <form onSubmit={handleSubmit}>
-                        {cloneWorkflow && (
-                            <>
-                                <div className="mb-8 flex flex-row gap-6 items-end">
-                                    <Input
-                                        label="Name:"
-                                        type="text"
-                                        name={cloneWorkflow.name}
-                                        placeholder="Enter workflow name"
-                                        value={cloneWorkflow.name}
-                                        onChange={(updatedName) => {
-                                            const updatedWorkflow = {
-                                                ...cloneWorkflow,
-                                                name: updatedName,
-                                            };
-                                            onWorkflowChange(updatedWorkflow);
-                                        }}
-                                    />
-                                    <Select
-                                        label="Entity:"
-                                        options={ENTITY_OPTIONS}
-                                        value={
-                                            cloneWorkflow.entityId === ""
-                                                ? null
-                                                : ENTITY_OPTIONS.find(option => option.value === cloneWorkflow.entityId)
-                                        }
-                                        onChange={(selectedEntity) => {
-                                            if (cloneWorkflow.entityId) {
-                                                if (!confirm("Clearing or changing entity will clear all the assignees for all steps in this workflow. Are you sure you want to proceed?")) return;
-                                            }
-                                            if (selectedEntity?.value) {
-                                                setEntityId(selectedEntity.value);
-                                                handleEntityChange(cloneWorkflow, selectedEntity.value);
-                                            }
-                                        }}
-                                        isClearable
-                                        placeholder="Enter workflow entity"
-                                    />
-                                    <Button
-                                        color="red"
-                                        variant="solid"
-                                        onClick={handleResetWorkflow}
-                                        type="button"
-                                        className="min-w-fit h-[72px] text-lg font-medium flex items-center gap-2 text-left"
-                                    >
-                                        Clear Workflow
-                                        <GrClearOption className="size-6" />
-                                    </Button>
-                                </div>
-
-                                <AnimatePresence mode="wait">
-                                    <LayoutGroup key="workflow">
-                                        <motion.div
-                                            key="form"
-                                            initial={{ opacity: 0, y: -30 }}
-                                            animate={{ opacity: 1, y: 0 }}
-                                            exit={{ opacity: 0, x: 60 }}
-                                            transition={{ duration: 0.20 }}
-                                        >
-                                            {(!cloneWorkflow.name || !cloneWorkflow.entityId) && (
-                                                <Tip text="Please fill in workflow name and associated entity to start configuring workflow." />
-                                            )}
-                                            <WorkflowForm
-                                                workflow={cloneWorkflow}
-                                                onWorkflowChange={onWorkflowChange}
-                                                entityApprovers={entityApprovers}
-                                                entityAvailableFormIntakers={entityApprovers.filter(approver => !entityUnavailableFormIntakers.includes(approver.id))}
-                                                isLoading={isLoading}
-                                                isRedirecting={isRedirecting}
-                                            />
-                                        </motion.div>
-                                    </LayoutGroup>
-                                </AnimatePresence>
-                            </>
-                        )}
-                    </form>
-                </Layout>
-            )}
-        </>
-    );
-}
diff --git a/src/pages/approval-workflows/create.tsx b/src/pages/approval-workflows/create.tsx
index 49bdae1b..571dacf3 100644
--- a/src/pages/approval-workflows/create.tsx
+++ b/src/pages/approval-workflows/create.tsx
@@ -22,6 +22,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { BsChevronLeft, BsTrash } from "react-icons/bs";
+import { FaRegClone } from "react-icons/fa6";
 import { MdFormatListBulletedAdd } from "react-icons/md";
 import { toast, ToastContainer } from "react-toastify";
 import { v4 as uuidv4 } from 'uuid';
@@ -207,6 +208,26 @@ export default function Home({ user, allConfiguredWorkflows, userEntitiesWithLab
         }
     };
 
+    const handleCloneWorkflow = (id: string) => {
+        const workflowToClone = workflows.find(wf => wf.id === id);
+        if (!workflowToClone) return;
+    
+        const newId = uuidv4();
+    
+        const clonedWorkflow: EditableApprovalWorkflow = {
+            ...workflowToClone,
+            id: newId,
+            steps: workflowToClone.steps.map(step => ({
+                ...step,
+                assignees: step.firstStep ? [] : [...step.assignees], // we can't have more than one form intaker per teacher per entity
+            })),
+        };
+    
+        setWorkflows(prev => [...prev, clonedWorkflow]);
+    
+        handleSelectWorkflow(newId);
+    };
+
     const handleDeleteWorkflow = (id: string) => {
         if (!confirm(`Are you sure you want to delete this Approval Workflow?`)) return;
 
@@ -256,7 +277,7 @@ export default function Home({ user, allConfiguredWorkflows, userEntitiesWithLab
                         </div>
                     </section>
 
-                    <Tip text="Setting a teacher as a Form Intaker means the configured workflow will be instanciated when said teacher publishes an exam. Only one Form Intake per teacher per entity is allowed."/>
+                    <Tip text="Setting a teacher as a Form Intaker means the configured workflow will be instantiated when said teacher publishes an exam. Only one Form Intake per teacher per entity is allowed."/>
 
                     <section className="flex flex-row gap-6">
                         <Button
@@ -329,6 +350,16 @@ export default function Home({ user, allConfiguredWorkflows, userEntitiesWithLab
                                         isClearable
                                         placeholder="Enter workflow entity"
                                     />
+                                    <Button
+                                        color="gray"
+                                        variant="solid"
+                                        onClick={() => handleCloneWorkflow(currentWorkflow.id)}
+                                        type="button"
+                                        className="min-w-fit h-[72px] text-lg font-medium flex items-center gap-2 text-left"
+                                    >
+                                        Clone Workflow
+                                        <FaRegClone className="size-6" />
+                                    </Button>
                                     <Button
                                         color="red"
                                         variant="solid"
diff --git a/src/pages/approval-workflows/index.tsx b/src/pages/approval-workflows/index.tsx
index 116e2625..5d957530 100644
--- a/src/pages/approval-workflows/index.tsx
+++ b/src/pages/approval-workflows/index.tsx
@@ -24,7 +24,6 @@ import Link from "next/link";
 import { useEffect, useState } from "react";
 import { BsTrash } from "react-icons/bs";
 import { FaRegEdit } from "react-icons/fa";
-import { FaRegClone } from "react-icons/fa6";
 import { IoIosAddCircleOutline } from "react-icons/io";
 import { toast, ToastContainer } from "react-toastify";
 
@@ -279,15 +278,6 @@ export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAss
                             <BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
                         </button>
 
-                        <Link
-                            onClick={(e) => e.stopPropagation()}
-                            data-tip="Clone"
-                            href={`/approval-workflows/${row.original._id?.toString()}/clone`}
-                            className="cursor-pointer tooltip"
-                        >
-                            <FaRegClone className="hover:text-mti-purple-light transition ease-in-out duration-300" />
-                        </Link>
-
                         {currentStep && !rejected && (
                             <Link
                                 onClick={(e) => e.stopPropagation()}
@@ -372,7 +362,7 @@ export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAss
                         </div>
                     </div>
 
-                    <Tip text="An exam submission will instanciate the approval workflow configured for the exam author. The exam will be valid only when all the steps of the workflow have been approved."></Tip>
+                    <Tip text="An exam submission will instantiate the approval workflow configured for the exam author. The exam will be valid only when all the steps of the workflow have been approved."></Tip>
 
                     <div className="px-6 pb-4 bg-mti-purple-ultralight rounded-2xl border-2 border-mti-purple-light border-opacity-40">
                         <table

From 845a5aa9dc521a51aa7eda96dad3abdf2d30a7b1 Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Wed, 5 Feb 2025 13:34:47 +0000
Subject: [PATCH 59/69] fix stale state behaviour

---
 src/pages/approval-workflows/create.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/pages/approval-workflows/create.tsx b/src/pages/approval-workflows/create.tsx
index 571dacf3..1e939d0b 100644
--- a/src/pages/approval-workflows/create.tsx
+++ b/src/pages/approval-workflows/create.tsx
@@ -219,13 +219,16 @@ export default function Home({ user, allConfiguredWorkflows, userEntitiesWithLab
             id: newId,
             steps: workflowToClone.steps.map(step => ({
                 ...step,
-                assignees: step.firstStep ? [] : [...step.assignees], // we can't have more than one form intaker per teacher per entity
+                assignees: step.firstStep ? [null] : [...step.assignees], // we can't have more than one form intaker per teacher per entity
             })),
         };
     
-        setWorkflows(prev => [...prev, clonedWorkflow]);
-    
-        handleSelectWorkflow(newId);
+        setWorkflows(prev => {
+            const updatedWorkflows = [...prev, clonedWorkflow];
+            setSelectedWorkflowId(newId);
+            setEntityId(clonedWorkflow.entityId || null);
+            return updatedWorkflows;
+        });
     };
 
     const handleDeleteWorkflow = (id: string) => {

From f0849b9b42c72740d45ac012027bab863cf07773 Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Wed, 5 Feb 2025 16:50:09 +0000
Subject: [PATCH 60/69] - fix assignees bug after editing active workflow -
 only allow corporate+ to configure workflows - give admins and devs
 permissions to approve and reject steps even when they are not assigned to
 them. - small fixes

---
 .../ExamEditor/SettingsEditor/level.tsx       |  4 ++--
 .../SettingsEditor/listening/index.tsx        |  4 ++--
 .../SettingsEditor/speaking/index.tsx         |  4 ++--
 src/pages/approval-workflows/[id]/index.tsx   |  6 ++---
 src/pages/approval-workflows/create.tsx       | 22 +++++++++++++------
 src/pages/approval-workflows/index.tsx        |  4 +---
 6 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/src/components/ExamEditor/SettingsEditor/level.tsx b/src/components/ExamEditor/SettingsEditor/level.tsx
index 20c8fd81..376113d3 100644
--- a/src/components/ExamEditor/SettingsEditor/level.tsx
+++ b/src/components/ExamEditor/SettingsEditor/level.tsx
@@ -215,12 +215,12 @@ const LevelSettings: React.FC = () => {
             });
 
             const requestBody = await (async () => {
-                const handledExam = await getExamById("writing", result.data.id);
+                const handledExam = await getExamById("level", result.data.id);
                 return {
                     examAuthor: handledExam?.createdBy ?? "Unknown Author",
                     examEntities: handledExam?.entities ?? [],
                     examId: handledExam?.id ?? "Unknown ID",
-                    examModule: "writing"
+                    examModule: "level"
                 };
             })();
             await axios
diff --git a/src/components/ExamEditor/SettingsEditor/listening/index.tsx b/src/components/ExamEditor/SettingsEditor/listening/index.tsx
index efbdfb6d..182f1d3f 100644
--- a/src/components/ExamEditor/SettingsEditor/listening/index.tsx
+++ b/src/components/ExamEditor/SettingsEditor/listening/index.tsx
@@ -153,12 +153,12 @@ const ListeningSettings: React.FC = () => {
                 toast.success(`Submitted Exam ID: ${result.data.id}`);
 
                 const requestBody = await (async () => {
-                    const handledExam = await getExamById("writing", result.data.id);
+                    const handledExam = await getExamById("listening", result.data.id);
                     return {
                         examAuthor: handledExam?.createdBy ?? "Unknown Author",
                         examEntities: handledExam?.entities ?? [],
                         examId: handledExam?.id ?? "Unknown ID",
-                        examModule: "writing"
+                        examModule: "listening"
                     };
                 })();
                 await axios
diff --git a/src/components/ExamEditor/SettingsEditor/speaking/index.tsx b/src/components/ExamEditor/SettingsEditor/speaking/index.tsx
index 0b9570b8..bdd86048 100644
--- a/src/components/ExamEditor/SettingsEditor/speaking/index.tsx
+++ b/src/components/ExamEditor/SettingsEditor/speaking/index.tsx
@@ -197,12 +197,12 @@ const SpeakingSettings: React.FC = () => {
           });
 
           const requestBody = await (async () => {
-            const handledExam = await getExamById("writing", result.data.id);
+            const handledExam = await getExamById("speaking", result.data.id);
             return {
               examAuthor: handledExam?.createdBy ?? "Unknown Author",
               examEntities: handledExam?.entities ?? [],
               examId: handledExam?.id ?? "Unknown ID",
-              examModule: "writing"
+              examModule: "speaking"
             };
           })();
           await axios
diff --git a/src/pages/approval-workflows/[id]/index.tsx b/src/pages/approval-workflows/[id]/index.tsx
index c4a6bb3e..995c51b3 100644
--- a/src/pages/approval-workflows/[id]/index.tsx
+++ b/src/pages/approval-workflows/[id]/index.tsx
@@ -334,7 +334,7 @@ export default function Home({ user, initialWorkflow, id, workflowAssignees, wor
                                 variant="solid"
                                 onClick={handleEditExam}
                                 padding="px-6 py-2"
-                                disabled={!currentWorkflow.steps[currentStepIndex].assignees.includes(user.id) || editExamIsLoading}
+                                disabled={(!currentWorkflow.steps[currentStepIndex].assignees.includes(user.id) && user.type !== "admin" && user.type !== "developer") || editExamIsLoading}
                                 className="w-[240px] text-lg flex items-center justify-center gap-2 text-left"
                             >
                                 {editExamIsLoading ? (
@@ -475,7 +475,7 @@ export default function Home({ user, initialWorkflow, id, workflowAssignees, wor
                                                         type="submit"
                                                         color="purple"
                                                         variant="solid"
-                                                        disabled={!selectedStep.assignees.includes(user.id) || isLoading}
+                                                        disabled={(!selectedStep.assignees.includes(user.id) && user.type !== "admin" && user.type !== "developer") || isLoading}
                                                         onClick={handleApproveStep}
                                                         padding="px-6 py-2"
                                                         className="mb-3 w-full text-lg flex items-center justify-center gap-2 text-left"
@@ -496,7 +496,7 @@ export default function Home({ user, initialWorkflow, id, workflowAssignees, wor
                                                         type="submit"
                                                         color="red"
                                                         variant="solid"
-                                                        disabled={!selectedStep.assignees.includes(user.id) || isLoading}
+                                                        disabled={(!selectedStep.assignees.includes(user.id) && user.type !== "admin" && user.type !== "developer") || isLoading}
                                                         onClick={handleRejectStep}
                                                         padding="px-6 py-2"
                                                         className="mb-3 w-1/2 text-lg flex items-center justify-center gap-2 text-left"
diff --git a/src/pages/approval-workflows/create.tsx b/src/pages/approval-workflows/create.tsx
index 1e939d0b..afb60b98 100644
--- a/src/pages/approval-workflows/create.tsx
+++ b/src/pages/approval-workflows/create.tsx
@@ -31,19 +31,27 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
     const user = await requestUser(req, res)
     if (!user) return redirect("/login")
 
-    if (shouldRedirectHome(user) || !["admin", "developer", "teacher", "corporate", "mastercorporate"].includes(user.type))
+    if (shouldRedirectHome(user) || !["admin", "developer", "corporate", "mastercorporate"].includes(user.type))
         return redirect("/")
 
     const userEntitiesWithLabel = await getEntities(user.entities.map(entity => entity.id));
 
     const allConfiguredWorkflows = await getApprovalWorkflowsByEntities("configured-workflows", userEntitiesWithLabel.map(entity => entity.id));
 
+    const approverTypes = ["teacher", "corporate", "mastercorporate"];
+
+    if (user.type === "developer") {
+        approverTypes.push("developer");
+    }
+
+    const userEntitiesApprovers = await getEntitiesUsers(userEntitiesWithLabel.map(entity => entity.id), { type: { $in: approverTypes } }) as (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[];
+
     return {
         props: serialize({
             user,
             allConfiguredWorkflows,
             userEntitiesWithLabel,
-            userEntitiesApprovers: await getEntitiesUsers(userEntitiesWithLabel.map(entity => entity.id), { type: { $in: ["teacher", "corporate", "mastercorporate", "developer"] } }) as (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[],
+            userEntitiesApprovers,
         }),
     };
 }, sessionOptions);
@@ -129,7 +137,7 @@ export default function Home({ user, allConfiguredWorkflows, userEntitiesWithLab
             for (const step of workflow.steps) {
                 if (step.assignees.every(x => !x)) {
                     toast.warning("There are empty steps in at least one of the configured workflows.");
-                    setIsLoading(false); 
+                    setIsLoading(false);
                     return;
                 }
             }
@@ -211,9 +219,9 @@ export default function Home({ user, allConfiguredWorkflows, userEntitiesWithLab
     const handleCloneWorkflow = (id: string) => {
         const workflowToClone = workflows.find(wf => wf.id === id);
         if (!workflowToClone) return;
-    
+
         const newId = uuidv4();
-    
+
         const clonedWorkflow: EditableApprovalWorkflow = {
             ...workflowToClone,
             id: newId,
@@ -222,7 +230,7 @@ export default function Home({ user, allConfiguredWorkflows, userEntitiesWithLab
                 assignees: step.firstStep ? [null] : [...step.assignees], // we can't have more than one form intaker per teacher per entity
             })),
         };
-    
+
         setWorkflows(prev => {
             const updatedWorkflows = [...prev, clonedWorkflow];
             setSelectedWorkflowId(newId);
@@ -280,7 +288,7 @@ export default function Home({ user, allConfiguredWorkflows, userEntitiesWithLab
                         </div>
                     </section>
 
-                    <Tip text="Setting a teacher as a Form Intaker means the configured workflow will be instantiated when said teacher publishes an exam. Only one Form Intake per teacher per entity is allowed."/>
+                    <Tip text="Setting a teacher as a Form Intaker means the configured workflow will be instantiated when said teacher publishes an exam. Only one Form Intake per teacher per entity is allowed." />
 
                     <section className="flex flex-row gap-6">
                         <Button
diff --git a/src/pages/approval-workflows/index.tsx b/src/pages/approval-workflows/index.tsx
index 5d957530..073473d6 100644
--- a/src/pages/approval-workflows/index.tsx
+++ b/src/pages/approval-workflows/index.tsx
@@ -36,7 +36,7 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
     if (shouldRedirectHome(user) || !["admin", "developer", "teacher", "corporate", "mastercorporate"].includes(user.type))
         return redirect("/")
 
-    const workflows = await getApprovalWorkflows("configured-workflows");
+    const workflows = await getApprovalWorkflows("active-workflows");
 
     const allAssigneeIds: string[] = [
         ...new Set(
@@ -97,8 +97,6 @@ export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAss
     const {workflows, reload} = useApprovalWorkflows();
     const currentWorkflows = workflows || initialWorkflows;
 
-    console.log(currentWorkflows);
-
     const [filteredWorkflows, setFilteredWorkflows] = useState<ApprovalWorkflow[]>([]);
 
     const [statusFilter, setStatusFilter] = useState<CustomStatus>(undefined);

From 7fb5e1a62b44b6090d3d165b11c494f3582c4c6d Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Wed, 5 Feb 2025 18:55:31 +0000
Subject: [PATCH 61/69] fix typo and bug on exam edit. It was throwing an
 exception if it found an id with the same owners, but should throw when the
 owners are different. It was also throwing an error if owners was not set in
 exam.

---
 src/pages/api/exam/[module]/index.ts | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/pages/api/exam/[module]/index.ts b/src/pages/api/exam/[module]/index.ts
index 563b953b..af9a7783 100644
--- a/src/pages/api/exam/[module]/index.ts
+++ b/src/pages/api/exam/[module]/index.ts
@@ -40,13 +40,13 @@ async function GET(req: NextApiRequest, res: NextApiResponse) {
 }
 
 async function POST(req: NextApiRequest, res: NextApiResponse) {
-	const user = await requestUser(req, res)
+	const user = await requestUser(req, res);
 	if (!user) return res.status(401).json({ ok: false });
 
 	const { module } = req.query as { module: string };
 
 	const session = client.startSession();
-	const entities = isAdmin(user) ? [] : mapBy(user.entities, 'id')
+	const entities = isAdmin(user) ? [] : mapBy(user.entities, "id");
 
 	try {
 		const exam = {
@@ -64,8 +64,16 @@ async function POST(req: NextApiRequest, res: NextApiResponse) {
 			// owners, throw exception if there is, else allow editing
 			const ownersSet = new Set(docSnap?.owners || []);
 
-			if (docSnap !== null && docSnap?.owners?.length === exam.owners.lenght && exam.owners.every((e: string) => ownersSet.has(e))) {
-				throw new Error("Name already exists");
+			if (docSnap !== null) {
+				if (docSnap.owners === undefined) {
+					docSnap.owners = [];
+				}
+				if (exam.owners === undefined) {
+					exam.owners = [];
+				}
+				if (docSnap.owners?.length !== exam.owners?.length || !exam.owners?.every((e: string) => ownersSet.has(e))) {
+					throw new Error("Name already exists");
+				}
 			}
 
 			await db.collection(module).updateOne(
@@ -73,13 +81,12 @@ async function POST(req: NextApiRequest, res: NextApiResponse) {
 				{ $set: { id: req.body.id, ...exam } },
 				{
 					upsert: true,
-					session
+					session,
 				}
 			);
 		});
 
 		res.status(200).json(exam);
-
 	} catch (error) {
 		console.error("Transaction failed: ", error);
 		res.status(500).json({ ok: false, error: (error as any).message });

From c3849518fb1dc75af6faeb21524cf3075633af7d Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Wed, 5 Feb 2025 19:14:18 +0000
Subject: [PATCH 62/69] amend last commit

---
 src/pages/api/exam/[module]/index.ts | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/src/pages/api/exam/[module]/index.ts b/src/pages/api/exam/[module]/index.ts
index af9a7783..86e2e7d6 100644
--- a/src/pages/api/exam/[module]/index.ts
+++ b/src/pages/api/exam/[module]/index.ts
@@ -62,18 +62,13 @@ async function POST(req: NextApiRequest, res: NextApiResponse) {
 
 			// Check whether the id of the exam matches another exam with different
 			// owners, throw exception if there is, else allow editing
-			const ownersSet = new Set(docSnap?.owners || []);
+			const existingExamOwners = docSnap?.owners ?? [];
+			const newExamOwners = exam.owners ?? [];
 
-			if (docSnap !== null) {
-				if (docSnap.owners === undefined) {
-					docSnap.owners = [];
-				}
-				if (exam.owners === undefined) {
-					exam.owners = [];
-				}
-				if (docSnap.owners?.length !== exam.owners?.length || !exam.owners?.every((e: string) => ownersSet.has(e))) {
-					throw new Error("Name already exists");
-				}
+			const ownersSet = new Set(existingExamOwners);
+
+			if (docSnap !== null && (existingExamOwners.length !== newExamOwners.length || !newExamOwners.every((e: string) => ownersSet.has(e)))) {
+				throw new Error("Name already exists");
 			}
 
 			await db.collection(module).updateOne(

From 63604b68e2e69ee8c0e599ed5451ef4d0112e9fc Mon Sep 17 00:00:00 2001
From: Tiago Ribeiro <tiago.ribeiro@ecrop.dev>
Date: Thu, 6 Feb 2025 12:12:34 +0000
Subject: [PATCH 63/69] Added the permission to update the privacy of an exam

---
 src/components/ExamEditor/index.tsx      | 480 +++++++++++------------
 src/pages/(admin)/Lists/ExamList.tsx     | 142 ++-----
 src/pages/entities/[id]/roles/[role].tsx | 318 ++++++++-------
 src/pages/generation.tsx                 | 223 ++++++-----
 src/resources/entityPermissions.ts       | 146 +++----
 src/stores/examEditor/index.ts           |  38 +-
 src/utils/users.ts                       |  13 +-
 7 files changed, 658 insertions(+), 702 deletions(-)

diff --git a/src/components/ExamEditor/index.tsx b/src/components/ExamEditor/index.tsx
index a55ff259..599f804b 100644
--- a/src/components/ExamEditor/index.tsx
+++ b/src/components/ExamEditor/index.tsx
@@ -3,12 +3,12 @@ import SectionRenderer from "./SectionRenderer";
 import Checkbox from "../Low/Checkbox";
 import Input from "../Low/Input";
 import Select from "../Low/Select";
-import { capitalize } from "lodash";
-import { Difficulty } from "@/interfaces/exam";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { toast } from "react-toastify";
-import { ModuleState, SectionState } from "@/stores/examEditor/types";
-import { Module } from "@/interfaces";
+import {capitalize} from "lodash";
+import {Difficulty} from "@/interfaces/exam";
+import {useCallback, useEffect, useMemo, useState} from "react";
+import {toast} from "react-toastify";
+import {ModuleState, SectionState} from "@/stores/examEditor/types";
+import {Module} from "@/interfaces";
 import useExamEditorStore from "@/stores/examEditor";
 import WritingSettings from "./SettingsEditor/writing";
 import ReadingSettings from "./SettingsEditor/reading";
@@ -16,273 +16,243 @@ import LevelSettings from "./SettingsEditor/level";
 import ListeningSettings from "./SettingsEditor/listening";
 import SpeakingSettings from "./SettingsEditor/speaking";
 import ImportOrStartFromScratch from "./ImportExam/ImportOrFromScratch";
-import { defaultSectionSettings } from "@/stores/examEditor/defaults";
+import {defaultSectionSettings} from "@/stores/examEditor/defaults";
 import Button from "../Low/Button";
 import ResetModule from "./Standalone/ResetModule";
 import ListeningInstructions from "./Standalone/ListeningInstructions";
+import {EntityWithRoles} from "@/interfaces/entity";
 
 const DIFFICULTIES: Difficulty[] = ["A1", "A2", "B1", "B2", "C1", "C2"];
 
-const ExamEditor: React.FC<{ levelParts?: number }> = ({ levelParts = 0 }) => {
-  const { currentModule, dispatch } = useExamEditorStore();
-  const {
-    sections,
-    minTimer,
-    expandedSections,
-    examLabel,
-    isPrivate,
-    difficulty,
-    sectionLabels,
-    importModule,
-  } = useExamEditorStore((state) => state.modules[currentModule]);
+const ExamEditor: React.FC<{levelParts?: number; entitiesAllowEditPrivacy: EntityWithRoles[]}> = ({
+	levelParts = 0,
+	entitiesAllowEditPrivacy = [],
+}) => {
+	const {currentModule, dispatch} = useExamEditorStore();
+	const {sections, minTimer, expandedSections, examLabel, isPrivate, difficulty, sectionLabels, importModule} = useExamEditorStore(
+		(state) => state.modules[currentModule],
+	);
 
-  const [numberOfLevelParts, setNumberOfLevelParts] = useState(
-    levelParts !== 0 ? levelParts : 1
-  );
-  const [isResetModuleOpen, setIsResetModuleOpen] = useState(false);
+	const [numberOfLevelParts, setNumberOfLevelParts] = useState(levelParts !== 0 ? levelParts : 1);
+	const [isResetModuleOpen, setIsResetModuleOpen] = useState(false);
 
-  // For exam edits
-  useEffect(() => {
-    if (levelParts !== 0) {
-      setNumberOfLevelParts(levelParts);
-      dispatch({
-        type: "UPDATE_MODULE",
-        payload: {
-          updates: {
-            sectionLabels: Array.from({ length: levelParts }).map((_, i) => ({
-              id: i + 1,
-              label: `Part ${i + 1}`,
-            })),
-          },
-          module: "level",
-        },
-      });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [levelParts]);
+	// For exam edits
+	useEffect(() => {
+		if (levelParts !== 0) {
+			setNumberOfLevelParts(levelParts);
+			dispatch({
+				type: "UPDATE_MODULE",
+				payload: {
+					updates: {
+						sectionLabels: Array.from({length: levelParts}).map((_, i) => ({
+							id: i + 1,
+							label: `Part ${i + 1}`,
+						})),
+					},
+					module: "level",
+				},
+			});
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [levelParts]);
 
-  useEffect(() => {
-    const currentSections = sections;
-    const currentLabels = sectionLabels;
-    let updatedSections: SectionState[];
-    let updatedLabels: any;
-    if (
-      (currentModule === "level" &&
-        currentSections.length !== currentLabels.length) ||
-      numberOfLevelParts !== currentSections.length
-    ) {
-      const newSections = [...currentSections];
-      const newLabels = [...currentLabels];
-      for (let i = currentLabels.length; i < numberOfLevelParts; i++) {
-        if (currentSections.length !== numberOfLevelParts)
-          newSections.push(defaultSectionSettings(currentModule, i + 1));
-        newLabels.push({
-          id: i + 1,
-          label: `Part ${i + 1}`,
-        });
-      }
-      updatedSections = newSections;
-      updatedLabels = newLabels;
-    } else if (numberOfLevelParts < currentSections.length) {
-      updatedSections = currentSections.slice(0, numberOfLevelParts);
-      updatedLabels = currentLabels.slice(0, numberOfLevelParts);
-    } else {
-      return;
-    }
+	useEffect(() => {
+		const currentSections = sections;
+		const currentLabels = sectionLabels;
+		let updatedSections: SectionState[];
+		let updatedLabels: any;
+		if ((currentModule === "level" && currentSections.length !== currentLabels.length) || numberOfLevelParts !== currentSections.length) {
+			const newSections = [...currentSections];
+			const newLabels = [...currentLabels];
+			for (let i = currentLabels.length; i < numberOfLevelParts; i++) {
+				if (currentSections.length !== numberOfLevelParts) newSections.push(defaultSectionSettings(currentModule, i + 1));
+				newLabels.push({
+					id: i + 1,
+					label: `Part ${i + 1}`,
+				});
+			}
+			updatedSections = newSections;
+			updatedLabels = newLabels;
+		} else if (numberOfLevelParts < currentSections.length) {
+			updatedSections = currentSections.slice(0, numberOfLevelParts);
+			updatedLabels = currentLabels.slice(0, numberOfLevelParts);
+		} else {
+			return;
+		}
 
-    const updatedExpandedSections = expandedSections.filter((sectionId) =>
-      updatedSections.some((section) => section.sectionId === sectionId)
-    );
+		const updatedExpandedSections = expandedSections.filter((sectionId) => updatedSections.some((section) => section.sectionId === sectionId));
 
-    dispatch({
-      type: "UPDATE_MODULE",
-      payload: {
-        updates: {
-          sections: updatedSections,
-          sectionLabels: updatedLabels,
-          expandedSections: updatedExpandedSections,
-        },
-      },
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [numberOfLevelParts]);
+		dispatch({
+			type: "UPDATE_MODULE",
+			payload: {
+				updates: {
+					sections: updatedSections,
+					sectionLabels: updatedLabels,
+					expandedSections: updatedExpandedSections,
+				},
+			},
+		});
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [numberOfLevelParts]);
 
-  const sectionIds = sections.map((section) => section.sectionId);
+	const sectionIds = sections.map((section) => section.sectionId);
 
-  const updateModule = useCallback(
-    (updates: Partial<ModuleState>) => {
-      dispatch({ type: "UPDATE_MODULE", payload: { updates } });
-    },
-    [dispatch]
-  );
+	const updateModule = useCallback(
+		(updates: Partial<ModuleState>) => {
+			dispatch({type: "UPDATE_MODULE", payload: {updates}});
+		},
+		[dispatch],
+	);
 
-  const toggleSection = (sectionId: number) => {
-    if (expandedSections.length === 1 && sectionIds.includes(sectionId)) {
-      toast.error("Include at least one section!");
-      return;
-    }
-    dispatch({ type: "TOGGLE_SECTION", payload: { sectionId } });
-  };
+	const toggleSection = (sectionId: number) => {
+		if (expandedSections.length === 1 && sectionIds.includes(sectionId)) {
+			toast.error("Include at least one section!");
+			return;
+		}
+		dispatch({type: "TOGGLE_SECTION", payload: {sectionId}});
+	};
 
-  const ModuleSettings: Record<Module, React.ComponentType> = {
-    reading: ReadingSettings,
-    writing: WritingSettings,
-    speaking: SpeakingSettings,
-    listening: ListeningSettings,
-    level: LevelSettings,
-  };
+	const ModuleSettings: Record<Module, React.ComponentType> = {
+		reading: ReadingSettings,
+		writing: WritingSettings,
+		speaking: SpeakingSettings,
+		listening: ListeningSettings,
+		level: LevelSettings,
+	};
 
-  const Settings = ModuleSettings[currentModule];
-  const showImport =
-    importModule && ["reading", "listening", "level"].includes(currentModule);
+	const Settings = ModuleSettings[currentModule];
+	const showImport = importModule && ["reading", "listening", "level"].includes(currentModule);
 
-  const updateLevelParts = (parts: number) => {
-    setNumberOfLevelParts(parts);
-  };
+	const updateLevelParts = (parts: number) => {
+		setNumberOfLevelParts(parts);
+	};
 
-  return (
-    <>
-      {showImport ? (
-        <ImportOrStartFromScratch
-          module={currentModule}
-          setNumberOfLevelParts={updateLevelParts}
-        />
-      ) : (
-        <>
-          {isResetModuleOpen && (
-            <ResetModule
-              module={currentModule}
-              isOpen={isResetModuleOpen}
-              setIsOpen={setIsResetModuleOpen}
-              setNumberOfLevelParts={setNumberOfLevelParts}
-            />
-          )}
-          <div className="flex gap-4 w-full items-center -xl:flex-col">
-            <div className="flex flex-row gap-3 w-full">
-              <div className="flex flex-col gap-3">
-                <label className="font-normal text-base text-mti-gray-dim">
-                  Timer
-                </label>
-                <Input
-                  type="number"
-                  name="minTimer"
-                  onChange={(e) =>
-                    updateModule({
-                      minTimer: parseInt(e) < 15 ? 15 : parseInt(e),
-                    })
-                  }
-                  value={minTimer}
-                  className="max-w-[300px]"
-                />
-              </div>
-              <div className="flex flex-col gap-3 flex-grow">
-                <label className="font-normal text-base text-mti-gray-dim">
-                  Difficulty
-                </label>
-                <Select
-                  isMulti={true}
-                  options={DIFFICULTIES.map((x) => ({
-                    value: x,
-                    label: capitalize(x),
-                  }))}
-                  onChange={(values) => {
-                    const selectedDifficulties = values
-                      ? values.map((v) => v.value as Difficulty)
-                      : [];
-                    updateModule({ difficulty: selectedDifficulties });
-                  }}
-                  value={
-                    difficulty
-                      ? difficulty.map((d) => ({
-                          value: d,
-                          label: capitalize(d),
-                        }))
-                      : null
-                  }
-                />
-              </div>
-            </div>
-            {sectionLabels.length != 0 && currentModule !== "level" ? (
-              <div className="flex flex-col gap-3 -xl:w-full">
-                <label className="font-normal text-base text-mti-gray-dim">
-                  {sectionLabels[0].label.split(" ")[0]}
-                </label>
-                <div className="flex flex-row gap-8">
-                  {sectionLabels.map(({ id, label }) => (
-                    <span
-                      key={id}
-                      className={clsx(
-                        "px-6 py-4 w-48 h-[72px] flex justify-center items-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-                        "transition duration-300 ease-in-out",
-                        sectionIds.includes(id)
-                          ? `bg-ielts-${currentModule}/70 border-ielts-${currentModule} text-white`
-                          : "bg-white border-mti-gray-platinum"
-                      )}
-                      onClick={() => toggleSection(id)}
-                    >
-                      {label}
-                    </span>
-                  ))}
-                </div>
-              </div>
-            ) : (
-              <div className="flex flex-col gap-3 w-1/3">
-                <label className="font-normal text-base text-mti-gray-dim">
-                  Number of Parts
-                </label>
-                <Input
-                  type="number"
-                  name="Number of Parts"
-                  min={1}
-                  onChange={(v) => setNumberOfLevelParts(parseInt(v))}
-                  value={numberOfLevelParts}
-                />
-              </div>
-            )}
-            <div className="flex flex-col gap-3 w-fit h-fit">
-              <div className="h-6" />
-              <Checkbox
-                isChecked={isPrivate}
-                onChange={(checked) => updateModule({ isPrivate: checked })}
-              >
-                Privacy (Only available for Assignments)
-              </Checkbox>
-            </div>
-          </div>
-          <div className="flex flex-row gap-3 w-full">
-            <div className="flex flex-col gap-3 flex-grow">
-              <label className="font-normal text-base text-mti-gray-dim">
-                Exam Label *
-              </label>
-              <Input
-                type="text"
-                placeholder="Exam Label"
-                name="label"
-                onChange={(text) => updateModule({ examLabel: text })}
-                roundness="xl"
-                value={examLabel}
-                required
-              />
-            </div>
-            {currentModule === "listening" && <ListeningInstructions />}
-            <Button
-              onClick={() => setIsResetModuleOpen(true)}
-              customColor={`bg-ielts-${currentModule}/70 hover:bg-ielts-${currentModule} border-ielts-${currentModule}`}
-              className={`text-white self-end`}
-            >
-              Reset Module
-            </Button>
-          </div>
-          <div className="flex flex-row gap-8 -2xl:flex-col">
-            <Settings />
-            <div className="flex-grow max-w-[66%] -2xl:max-w-full">
-              <SectionRenderer />
-            </div>
-          </div>
-        </>
-      )}
-    </>
-  );
+	return (
+		<>
+			{showImport ? (
+				<ImportOrStartFromScratch module={currentModule} setNumberOfLevelParts={updateLevelParts} />
+			) : (
+				<>
+					{isResetModuleOpen && (
+						<ResetModule
+							module={currentModule}
+							isOpen={isResetModuleOpen}
+							setIsOpen={setIsResetModuleOpen}
+							setNumberOfLevelParts={setNumberOfLevelParts}
+						/>
+					)}
+					<div className="flex gap-4 w-full items-center -xl:flex-col">
+						<div className="flex flex-row gap-3 w-full">
+							<div className="flex flex-col gap-3">
+								<label className="font-normal text-base text-mti-gray-dim">Timer</label>
+								<Input
+									type="number"
+									name="minTimer"
+									onChange={(e) =>
+										updateModule({
+											minTimer: parseInt(e) < 15 ? 15 : parseInt(e),
+										})
+									}
+									value={minTimer}
+									className="max-w-[300px]"
+								/>
+							</div>
+							<div className="flex flex-col gap-3 flex-grow">
+								<label className="font-normal text-base text-mti-gray-dim">Difficulty</label>
+								<Select
+									isMulti={true}
+									options={DIFFICULTIES.map((x) => ({
+										value: x,
+										label: capitalize(x),
+									}))}
+									onChange={(values) => {
+										const selectedDifficulties = values ? values.map((v) => v.value as Difficulty) : [];
+										updateModule({difficulty: selectedDifficulties});
+									}}
+									value={
+										difficulty
+											? difficulty.map((d) => ({
+													value: d,
+													label: capitalize(d),
+											  }))
+											: null
+									}
+								/>
+							</div>
+						</div>
+						{sectionLabels.length != 0 && currentModule !== "level" ? (
+							<div className="flex flex-col gap-3 -xl:w-full">
+								<label className="font-normal text-base text-mti-gray-dim">{sectionLabels[0].label.split(" ")[0]}</label>
+								<div className="flex flex-row gap-8">
+									{sectionLabels.map(({id, label}) => (
+										<span
+											key={id}
+											className={clsx(
+												"px-6 py-4 w-48 h-[72px] flex justify-center items-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+												"transition duration-300 ease-in-out",
+												sectionIds.includes(id)
+													? `bg-ielts-${currentModule}/70 border-ielts-${currentModule} text-white`
+													: "bg-white border-mti-gray-platinum",
+											)}
+											onClick={() => toggleSection(id)}>
+											{label}
+										</span>
+									))}
+								</div>
+							</div>
+						) : (
+							<div className="flex flex-col gap-3 w-1/3">
+								<label className="font-normal text-base text-mti-gray-dim">Number of Parts</label>
+								<Input
+									type="number"
+									name="Number of Parts"
+									min={1}
+									onChange={(v) => setNumberOfLevelParts(parseInt(v))}
+									value={numberOfLevelParts}
+								/>
+							</div>
+						)}
+						<div className="flex flex-col gap-3 w-fit h-fit">
+							<div className="h-6" />
+							<Checkbox
+								isChecked={isPrivate}
+								onChange={(checked) => updateModule({isPrivate: checked})}
+								disabled={entitiesAllowEditPrivacy.length === 0}>
+								Privacy (Only available for Assignments)
+							</Checkbox>
+						</div>
+					</div>
+					<div className="flex flex-row gap-3 w-full">
+						<div className="flex flex-col gap-3 flex-grow">
+							<label className="font-normal text-base text-mti-gray-dim">Exam Label *</label>
+							<Input
+								type="text"
+								placeholder="Exam Label"
+								name="label"
+								onChange={(text) => updateModule({examLabel: text})}
+								roundness="xl"
+								value={examLabel}
+								required
+							/>
+						</div>
+						{currentModule === "listening" && <ListeningInstructions />}
+						<Button
+							onClick={() => setIsResetModuleOpen(true)}
+							customColor={`bg-ielts-${currentModule}/70 hover:bg-ielts-${currentModule} border-ielts-${currentModule}`}
+							className={`text-white self-end`}>
+							Reset Module
+						</Button>
+					</div>
+					<div className="flex flex-row gap-8 -2xl:flex-col">
+						<Settings />
+						<div className="flex-grow max-w-[66%] -2xl:max-w-full">
+							<SectionRenderer />
+						</div>
+					</div>
+				</>
+			)}
+		</>
+	);
 };
 
 export default ExamEditor;
diff --git a/src/pages/(admin)/Lists/ExamList.tsx b/src/pages/(admin)/Lists/ExamList.tsx
index 5b1fb789..5e090ee7 100644
--- a/src/pages/(admin)/Lists/ExamList.tsx
+++ b/src/pages/(admin)/Lists/ExamList.tsx
@@ -1,33 +1,32 @@
-import { useMemo, useState } from "react";
-import { PERMISSIONS } from "@/constants/userPermissions";
+import {useMemo, useState} from "react";
+import {PERMISSIONS} from "@/constants/userPermissions";
 import useExams from "@/hooks/useExams";
 import useUsers from "@/hooks/useUsers";
-import { Module } from "@/interfaces";
-import { Exam } from "@/interfaces/exam";
-import { Type, User } from "@/interfaces/user";
+import {Module} from "@/interfaces";
+import {Exam} from "@/interfaces/exam";
+import {User} from "@/interfaces/user";
 import useExamStore from "@/stores/exam";
-import { getExamById } from "@/utils/exams";
-import { countExercises } from "@/utils/moduleUtils";
-import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import {getExamById} from "@/utils/exams";
+import {countExercises} from "@/utils/moduleUtils";
+import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
 import axios from "axios";
-import clsx from "clsx";
-import { capitalize, uniq } from "lodash";
-import { useRouter } from "next/router";
-import { BsBan, BsBanFill, BsCheck, BsCircle, BsPencil, BsStop, BsTrash, BsUpload, BsX } from "react-icons/bs";
-import { toast } from "react-toastify";
-import { useListSearch } from "@/hooks/useListSearch";
+import {capitalize, uniq} from "lodash";
+import {useRouter} from "next/router";
+import {BsBan, BsCheck, BsCircle, BsPencil, BsTrash, BsUpload, BsX} from "react-icons/bs";
+import {toast} from "react-toastify";
+import {useListSearch} from "@/hooks/useListSearch";
 import Modal from "@/components/Modal";
-import { checkAccess } from "@/utils/permissions";
+import {checkAccess} from "@/utils/permissions";
 import useGroups from "@/hooks/useGroups";
 import Button from "@/components/Low/Button";
-import { EntityWithRoles } from "@/interfaces/entity";
-import { FiEdit, FiArrowRight } from 'react-icons/fi';
-import { HiArrowRight } from "react-icons/hi";
-import { BiEdit } from "react-icons/bi";
+import {EntityWithRoles} from "@/interfaces/entity";
+import {BiEdit} from "react-icons/bi";
+import {findBy, mapBy} from "@/utils";
+import {getUserName} from "@/utils/users";
 
 const searchFields = [["module"], ["id"], ["createdBy"]];
 
-const CLASSES: { [key in Module]: string } = {
+const CLASSES: {[key in Module]: string} = {
 	reading: "text-ielts-reading",
 	listening: "text-ielts-listening",
 	speaking: "text-ielts-speaking",
@@ -37,45 +36,20 @@ const CLASSES: { [key in Module]: string } = {
 
 const columnHelper = createColumnHelper<Exam>();
 
-const ExamOwnerSelector = ({ options, exam, onSave }: { options: User[]; exam: Exam; onSave: (owners: string[]) => void }) => {
-	const [owners, setOwners] = useState(exam.owners || []);
-
-	return (
-		<div className="w-full flex flex-col gap-4">
-			<div className="grid grid-cols-4 mt-4">
-				{options.map((c) => (
-					<Button
-						variant={owners.includes(c.id) ? "solid" : "outline"}
-						onClick={() => setOwners((prev) => (prev.includes(c.id) ? prev.filter((x) => x !== c.id) : [...prev, c.id]))}
-						className="max-w-[200px] w-full"
-						key={c.id}>
-						{c.name}
-					</Button>
-				))}
-			</div>
-			<Button onClick={() => onSave(owners)} className="w-full max-w-[200px] self-end">
-				Save
-			</Button>
-		</div>
-	);
-};
-
-export default function ExamList({ user, entities }: { user: User; entities: EntityWithRoles[]; }) {
+export default function ExamList({user, entities}: {user: User; entities: EntityWithRoles[]}) {
 	const [selectedExam, setSelectedExam] = useState<Exam>();
 
-	const { exams, reload } = useExams();
-	const { users } = useUsers();
-	const { groups } = useGroups({ admin: user?.id, userType: user?.type });
+	const {exams, reload} = useExams();
+	const {users} = useUsers();
 
-	const filteredExams = useMemo(() => exams.filter((e) => {
-		if (!e.private) return true
-		return (e.owners || []).includes(user?.id || "")
-	}), [exams, user?.id])
-
-	const filteredCorporates = useMemo(() => {
-		const participantsAndAdmins = uniq(groups.flatMap((x) => [...x.participants, x.admin])).filter((x) => x !== user?.id);
-		return users.filter((x) => participantsAndAdmins.includes(x.id) && x.type === "corporate");
-	}, [users, groups, user]);
+	const filteredExams = useMemo(
+		() =>
+			exams.filter((e) => {
+				if (!e.private) return true;
+				return (e.entities || []).some((ent) => mapBy(user.entities, "id").includes(ent));
+			}),
+		[exams, user?.entities],
+	);
 
 	const parsedExams = useMemo(() => {
 		return filteredExams.map((exam) => {
@@ -93,7 +67,7 @@ export default function ExamList({ user, entities }: { user: User; entities: Ent
 		});
 	}, [filteredExams, users]);
 
-	const { rows: filteredRows, renderSearch } = useListSearch<Exam>(searchFields, parsedExams);
+	const {rows: filteredRows, renderSearch} = useListSearch<Exam>(searchFields, parsedExams);
 
 	const dispatch = useExamStore((state) => state.dispatch);
 
@@ -108,7 +82,7 @@ export default function ExamList({ user, entities }: { user: User; entities: Ent
 
 			return;
 		}
-		dispatch({ type: "INIT_EXAM", payload: { exams: [exam], modules: [module] } })
+		dispatch({type: "INIT_EXAM", payload: {exams: [exam], modules: [module]}});
 
 		router.push("/exam");
 	};
@@ -117,7 +91,7 @@ export default function ExamList({ user, entities }: { user: User; entities: Ent
 		if (!confirm(`Are you sure you want to make this ${capitalize(exam.module)} exam ${exam.private ? "public" : "private"}?`)) return;
 
 		axios
-			.patch(`/api/exam/${exam.module}/${exam.id}`, { private: !exam.private })
+			.patch(`/api/exam/${exam.module}/${exam.id}`, {private: !exam.private})
 			.then(() => toast.success(`Updated the "${exam.id}" exam`))
 			.catch((reason) => {
 				if (reason.response.status === 404) {
@@ -135,29 +109,6 @@ export default function ExamList({ user, entities }: { user: User; entities: Ent
 			.finally(reload);
 	};
 
-	const updateExam = async (exam: Exam, body: object) => {
-		if (!confirm(`Are you sure you want to update this ${capitalize(exam.module)} exam?`)) return;
-
-		axios
-			.patch(`/api/exam/${exam.module}/${exam.id}`, body)
-			.then(() => toast.success(`Updated the "${exam.id}" exam`))
-			.catch((reason) => {
-				if (reason.response.status === 404) {
-					toast.error("Exam not found!");
-					return;
-				}
-
-				if (reason.response.status === 403) {
-					toast.error("You do not have permission to update this exam!");
-					return;
-				}
-
-				toast.error("Something went wrong, please try again later.");
-			})
-			.finally(reload)
-			.finally(() => setSelectedExam(undefined));
-	};
-
 	const deleteExam = async (exam: Exam) => {
 		if (!confirm(`Are you sure you want to delete this ${capitalize(exam.module)} exam?`)) return;
 
@@ -222,12 +173,12 @@ export default function ExamList({ user, entities }: { user: User; entities: Ent
 		}),
 		columnHelper.accessor("createdBy", {
 			header: "Created By",
-			cell: (info) => info.getValue(),
+			cell: (info) => (!info.getValue() ? "System" : findBy(users, "id", info.getValue())?.name || "N/A"),
 		}),
 		{
 			header: "",
 			id: "actions",
-			cell: ({ row }: { row: { original: Exam } }) => {
+			cell: ({row}: {row: {original: Exam}}) => {
 				return (
 					<div className="flex gap-4">
 						{(row.original.owners?.includes(user.id) || checkAccess(user, ["admin", "developer"])) && (
@@ -270,7 +221,7 @@ export default function ExamList({ user, entities }: { user: User; entities: Ent
 
 	const handleExamEdit = () => {
 		router.push(`/generation?id=${selectedExam!.id}&module=${selectedExam!.module}`);
-	}
+	};
 
 	return (
 		<div className="flex flex-col gap-4 w-full h-full">
@@ -286,30 +237,17 @@ export default function ExamList({ user, entities }: { user: User; entities: Ent
 								</div>
 
 								<div className="bg-gray-50 rounded-lg p-4 mb-3">
-									<p className="font-medium mb-1">
-										Exam ID: {selectedExam.id}
-									</p>
+									<p className="font-medium mb-1">Exam ID: {selectedExam.id}</p>
 								</div>
 
-								<p className="text-gray-500 text-sm">
-									Click &apos;Next&apos; to proceed to the exam editor.
-								</p>
+								<p className="text-gray-500 text-sm">Click &apos;Next&apos; to proceed to the exam editor.</p>
 							</div>
 
 							<div className="flex justify-between gap-4 mt-8">
-								<Button
-									color="purple"
-									variant="outline"
-									onClick={() => setSelectedExam(undefined)}
-									className="w-32"
-								>
+								<Button color="purple" variant="outline" onClick={() => setSelectedExam(undefined)} className="w-32">
 									Cancel
 								</Button>
-								<Button
-									color="purple"
-									onClick={handleExamEdit}
-									className="w-32 text-white flex items-center justify-center gap-2"
-								>
+								<Button color="purple" onClick={handleExamEdit} className="w-32 text-white flex items-center justify-center gap-2">
 									Proceed
 								</Button>
 							</div>
diff --git a/src/pages/entities/[id]/roles/[role].tsx b/src/pages/entities/[id]/roles/[role].tsx
index 907c157b..693b4370 100644
--- a/src/pages/entities/[id]/roles/[role].tsx
+++ b/src/pages/entities/[id]/roles/[role].tsx
@@ -1,136 +1,132 @@
 import Checkbox from "@/components/Low/Checkbox";
 import Separator from "@/components/Low/Separator";
-import { useEntityPermission } from "@/hooks/useEntityPermissions";
-import { EntityWithRoles, Role } from "@/interfaces/entity";
-import { User } from "@/interfaces/user";
-import { sessionOptions } from "@/lib/session";
-import { RolePermission } from "@/resources/entityPermissions";
-import { findBy, mapBy, redirect, serialize } from "@/utils";
-import { requestUser } from "@/utils/api";
-import { getEntityWithRoles } from "@/utils/entities.be";
-import { shouldRedirectHome } from "@/utils/navigation.disabled";
-import { doesEntityAllow } from "@/utils/permissions";
-import { isAdmin } from "@/utils/users";
-import { countEntityUsers } from "@/utils/users.be";
+import {useEntityPermission} from "@/hooks/useEntityPermissions";
+import {EntityWithRoles, Role} from "@/interfaces/entity";
+import {User} from "@/interfaces/user";
+import {sessionOptions} from "@/lib/session";
+import {RolePermission} from "@/resources/entityPermissions";
+import {findBy, mapBy, redirect, serialize} from "@/utils";
+import {requestUser} from "@/utils/api";
+import {getEntityWithRoles} from "@/utils/entities.be";
+import {shouldRedirectHome} from "@/utils/navigation.disabled";
+import {doesEntityAllow} from "@/utils/permissions";
+import {isAdmin} from "@/utils/users";
+import {countEntityUsers} from "@/utils/users.be";
 import axios from "axios";
-import { withIronSessionSsr } from "iron-session/next";
+import {withIronSessionSsr} from "iron-session/next";
 import Head from "next/head";
 import Link from "next/link";
-import { useRouter } from "next/router";
-import { Divider } from "primereact/divider";
-import { useState } from "react";
-import {
-	BsCheck,
-	BsChevronLeft,
-	BsTag,
-	BsTrash,
-} from "react-icons/bs";
-import { toast } from "react-toastify";
+import {useRouter} from "next/router";
+import {Divider} from "primereact/divider";
+import {useState} from "react";
+import {BsCheck, BsChevronLeft, BsTag, BsTrash} from "react-icons/bs";
+import {toast} from "react-toastify";
 
-type PermissionLayout = { label: string, key: RolePermission }
+type PermissionLayout = {label: string; key: RolePermission};
 
 const USER_MANAGEMENT: PermissionLayout[] = [
-	{ label: "View Students", key: "view_students" },
-	{ label: "View Teachers", key: "view_teachers" },
-	{ label: "View Corporate Accounts", key: "view_corporates" },
-	{ label: "View Master Corporate Accounts", key: "view_mastercorporates" },
-	{ label: "Edit Students", key: "edit_students" },
-	{ label: "Edit Teachers", key: "edit_teachers" },
-	{ label: "Edit Corporate Accounts", key: "edit_corporates" },
-	{ label: "Edit Master Corporate Accounts", key: "edit_mastercorporates" },
-	{ label: "Delete Students", key: "delete_students" },
-	{ label: "Delete Teachers", key: "delete_teachers" },
-	{ label: "Delete Corporate Accounts", key: "delete_corporates" },
-	{ label: "Delete Master Corporate Accounts", key: "delete_mastercorporates" },
-	{ label: "Create a Single User", key: "create_user" },
-	{ label: "Create Users in Batch", key: "create_user_batch" },
-	{ label: "Create a Single Code", key: "create_code" },
-	{ label: "Create Codes in Batch", key: "create_code_batch" },
-	{ label: "Download User List", key: "download_user_list" },
-	{ label: "View Code List", key: "view_code_list" },
-	{ label: "Delete Code", key: "delete_code" },
-]
+	{label: "View Students", key: "view_students"},
+	{label: "View Teachers", key: "view_teachers"},
+	{label: "View Corporate Accounts", key: "view_corporates"},
+	{label: "View Master Corporate Accounts", key: "view_mastercorporates"},
+	{label: "Edit Students", key: "edit_students"},
+	{label: "Edit Teachers", key: "edit_teachers"},
+	{label: "Edit Corporate Accounts", key: "edit_corporates"},
+	{label: "Edit Master Corporate Accounts", key: "edit_mastercorporates"},
+	{label: "Delete Students", key: "delete_students"},
+	{label: "Delete Teachers", key: "delete_teachers"},
+	{label: "Delete Corporate Accounts", key: "delete_corporates"},
+	{label: "Delete Master Corporate Accounts", key: "delete_mastercorporates"},
+	{label: "Create a Single User", key: "create_user"},
+	{label: "Create Users in Batch", key: "create_user_batch"},
+	{label: "Create a Single Code", key: "create_code"},
+	{label: "Create Codes in Batch", key: "create_code_batch"},
+	{label: "Download User List", key: "download_user_list"},
+	{label: "View Code List", key: "view_code_list"},
+	{label: "Delete Code", key: "delete_code"},
+];
 
 const EXAM_MANAGEMENT: PermissionLayout[] = [
-	{ label: "View Reading", key: "view_reading" },
-	{ label: "Generate Reading", key: "generate_reading" },
-	{ label: "Delete Reading", key: "delete_reading" },
-	{ label: "View Listening", key: "view_listening" },
-	{ label: "Generate Listening", key: "generate_listening" },
-	{ label: "Delete Listening", key: "delete_listening" },
-	{ label: "View Writing", key: "view_writing" },
-	{ label: "Generate Writing", key: "generate_writing" },
-	{ label: "Delete Writing", key: "delete_writing" },
-	{ label: "View Speaking", key: "view_speaking" },
-	{ label: "Generate Speaking", key: "generate_speaking" },
-	{ label: "Delete Speaking", key: "delete_speaking" },
-	{ label: "View Level", key: "view_level" },
-	{ label: "Generate Level", key: "generate_level" },
-	{ label: "Delete Level", key: "delete_level" },
-	{ label: "View Statistics", key: "view_statistics" },
-]
+	{label: "View Reading", key: "view_reading"},
+	{label: "Generate Reading", key: "generate_reading"},
+	{label: "Delete Reading", key: "delete_reading"},
+	{label: "View Listening", key: "view_listening"},
+	{label: "Generate Listening", key: "generate_listening"},
+	{label: "Delete Listening", key: "delete_listening"},
+	{label: "View Writing", key: "view_writing"},
+	{label: "Generate Writing", key: "generate_writing"},
+	{label: "Delete Writing", key: "delete_writing"},
+	{label: "View Speaking", key: "view_speaking"},
+	{label: "Generate Speaking", key: "generate_speaking"},
+	{label: "Delete Speaking", key: "delete_speaking"},
+	{label: "View Level", key: "view_level"},
+	{label: "Generate Level", key: "generate_level"},
+	{label: "Delete Level", key: "delete_level"},
+	{label: "Set as Private/Public", key: "update_exam_privacy"},
+	{label: "View Statistics", key: "view_statistics"},
+];
 
 const CLASSROOM_MANAGEMENT: PermissionLayout[] = [
-	{ label: "View Classrooms", key: "view_classrooms" },
-	{ label: "Create Classrooms", key: "create_classroom" },
-	{ label: "Rename Classrooms", key: "rename_classrooms" },
-	{ label: "Add to Classroom", key: "add_to_classroom" },
-	{ label: "Upload to Classroom", key: "upload_classroom" },
-	{ label: "Remove from Classroom", key: "remove_from_classroom" },
-	{ label: "Delete Classroom", key: "delete_classroom" },
-	{ label: "View Student Record", key: "view_student_record" },
-	{ label: "Download Student Report", key: "download_student_record" },
-]
+	{label: "View Classrooms", key: "view_classrooms"},
+	{label: "Create Classrooms", key: "create_classroom"},
+	{label: "Rename Classrooms", key: "rename_classrooms"},
+	{label: "Add to Classroom", key: "add_to_classroom"},
+	{label: "Upload to Classroom", key: "upload_classroom"},
+	{label: "Remove from Classroom", key: "remove_from_classroom"},
+	{label: "Delete Classroom", key: "delete_classroom"},
+	{label: "View Student Record", key: "view_student_record"},
+	{label: "Download Student Report", key: "download_student_record"},
+];
 
 const ENTITY_MANAGEMENT: PermissionLayout[] = [
-	{ label: "View Entities", key: "view_entities" },
-	{ label: "View Entity Statistics", key: "view_entity_statistics" },
-	{ label: "Rename Entity", key: "rename_entity" },
-	{ label: "Add to Entity", key: "add_to_entity" },
-	{ label: "Remove from Entity", key: "remove_from_entity" },
-	{ label: "Delete Entity", key: "delete_entity" },
-	{ label: "View Entity Roles", key: "view_entity_roles" },
-	{ label: "Create Entity Role", key: "create_entity_role" },
-	{ label: "Rename Entity Role", key: "rename_entity_role" },
-	{ label: "Edit Role Permissions", key: "edit_role_permissions" },
-	{ label: "Assign Role to User", key: "assign_to_role" },
-	{ label: "Delete Entity Role", key: "delete_entity_role" },
-	{ label: "Download Statistics Report", key: "download_statistics_report" },
-	{ label: "Edit Grading System", key: "edit_grading_system" },
-	{ label: "View Student Performance", key: "view_student_performance" },
-	{ label: "Pay for Entity", key: "pay_entity" },
-	{ label: "View Payment Record", key: "view_payment_record" }
-]
+	{label: "View Entities", key: "view_entities"},
+	{label: "View Entity Statistics", key: "view_entity_statistics"},
+	{label: "Rename Entity", key: "rename_entity"},
+	{label: "Add to Entity", key: "add_to_entity"},
+	{label: "Remove from Entity", key: "remove_from_entity"},
+	{label: "Delete Entity", key: "delete_entity"},
+	{label: "View Entity Roles", key: "view_entity_roles"},
+	{label: "Create Entity Role", key: "create_entity_role"},
+	{label: "Rename Entity Role", key: "rename_entity_role"},
+	{label: "Edit Role Permissions", key: "edit_role_permissions"},
+	{label: "Assign Role to User", key: "assign_to_role"},
+	{label: "Delete Entity Role", key: "delete_entity_role"},
+	{label: "Download Statistics Report", key: "download_statistics_report"},
+	{label: "Edit Grading System", key: "edit_grading_system"},
+	{label: "View Student Performance", key: "view_student_performance"},
+	{label: "Pay for Entity", key: "pay_entity"},
+	{label: "View Payment Record", key: "view_payment_record"},
+];
 
 const ASSIGNMENT_MANAGEMENT: PermissionLayout[] = [
-	{ label: "View Assignments", key: "view_assignments" },
-	{ label: "Create Assignments", key: "create_assignment" },
-	{ label: "Start Assignments", key: "start_assignment" },
-	{ label: "Edit Assignments", key: "edit_assignment" },
-	{ label: "Delete Assignments", key: "delete_assignment" },
-	{ label: "Archive Assignments", key: "archive_assignment" },
-]
+	{label: "View Assignments", key: "view_assignments"},
+	{label: "Create Assignments", key: "create_assignment"},
+	{label: "Start Assignments", key: "start_assignment"},
+	{label: "Edit Assignments", key: "edit_assignment"},
+	{label: "Delete Assignments", key: "delete_assignment"},
+	{label: "Archive Assignments", key: "archive_assignment"},
+];
 
-export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => {
-	const user = await requestUser(req, res)
-	if (!user) return redirect("/login")
+export const getServerSideProps = withIronSessionSsr(async ({req, res, params}) => {
+	const user = await requestUser(req, res);
+	if (!user) return redirect("/login");
 
-	if (shouldRedirectHome(user)) return redirect("/")
+	if (shouldRedirectHome(user)) return redirect("/");
 
-	const { id, role } = params as { id: string, role: string };
+	const {id, role} = params as {id: string; role: string};
 
-	if (!mapBy(user.entities, 'id').includes(id) && !["admin", "developer"].includes(user.type)) return redirect("/entities")
+	if (!mapBy(user.entities, "id").includes(id) && !["admin", "developer"].includes(user.type)) return redirect("/entities");
 
 	const entity = await getEntityWithRoles(id);
-	if (!entity) return redirect("/entities")
+	if (!entity) return redirect("/entities");
 
-	const entityRole = findBy(entity.roles, 'id', role)
-	if (!entityRole) return redirect(`/entities/${id}/roles`)
+	const entityRole = findBy(entity.roles, "id", role);
+	if (!entityRole) return redirect(`/entities/${id}/roles`);
 
-	if (!doesEntityAllow(user, entity, "view_entity_roles")) return redirect(`/entities/${id}`)
-	const disableEdit = !isAdmin(user) && findBy(user.entities, 'id', entity.id)?.role === entityRole.id
+	if (!doesEntityAllow(user, entity, "view_entity_roles")) return redirect(`/entities/${id}`);
+	const disableEdit = !isAdmin(user) && findBy(user.entities, "id", entity.id)?.role === entityRole.id;
 
-	const userCount = await countEntityUsers(id, { "entities.role": role });
+	const userCount = await countEntityUsers(id, {"entities.role": role});
 
 	return {
 		props: serialize({
@@ -138,7 +134,7 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
 			entity,
 			role: entityRole,
 			userCount,
-			disableEdit
+			disableEdit,
 		}),
 	};
 }, sessionOptions);
@@ -148,19 +144,18 @@ interface Props {
 	entity: EntityWithRoles;
 	role: Role;
 	userCount: number;
-	disableEdit?: boolean
+	disableEdit?: boolean;
 }
 
-export default function EntityRole({ user, entity, role, userCount, disableEdit }: Props) {
-	const [permissions, setPermissions] = useState(role.permissions)
+export default function EntityRole({user, entity, role, userCount, disableEdit}: Props) {
+	const [permissions, setPermissions] = useState(role.permissions);
 	const [isLoading, setIsLoading] = useState(false);
 
 	const router = useRouter();
 
-	const canEditPermissions = useEntityPermission(user, entity, "edit_role_permissions")
-	const canRenameRole = useEntityPermission(user, entity, "rename_entity_role")
-	const canDeleteRole = useEntityPermission(user, entity, "delete_entity_role")
-
+	const canEditPermissions = useEntityPermission(user, entity, "edit_role_permissions");
+	const canRenameRole = useEntityPermission(user, entity, "rename_entity_role");
+	const canDeleteRole = useEntityPermission(user, entity, "delete_entity_role");
 
 	const renameRole = () => {
 		if (!canRenameRole || disableEdit) return;
@@ -170,7 +165,7 @@ export default function EntityRole({ user, entity, role, userCount, disableEdit
 
 		setIsLoading(true);
 		axios
-			.patch(`/api/roles/${role.id}`, { label })
+			.patch(`/api/roles/${role.id}`, {label})
 			.then(() => {
 				toast.success("The role has been updated successfully!");
 				router.replace(router.asPath);
@@ -202,12 +197,12 @@ export default function EntityRole({ user, entity, role, userCount, disableEdit
 	};
 
 	const editPermissions = () => {
-		if (!canEditPermissions || disableEdit) return
+		if (!canEditPermissions || disableEdit) return;
 
 		setIsLoading(true);
 
 		axios
-			.patch(`/api/roles/${role.id}`, { permissions })
+			.patch(`/api/roles/${role.id}`, {permissions})
 			.then(() => {
 				toast.success("This role has been successfully updated!");
 				router.replace(router.asPath);
@@ -217,21 +212,23 @@ export default function EntityRole({ user, entity, role, userCount, disableEdit
 				toast.error("Something went wrong!");
 			})
 			.finally(() => setIsLoading(false));
-	}
+	};
 
 	const enableCheckbox = (permission: RolePermission) => {
-		if (!canEditPermissions || disableEdit) return false
-		return doesEntityAllow(user, entity, permission)
-	}
+		if (!canEditPermissions || disableEdit) return false;
+		return doesEntityAllow(user, entity, permission);
+	};
 
-	const togglePermissions = (p: RolePermission) => setPermissions(prev => prev.includes(p) ? prev.filter(x => x !== p) : [...prev, p])
+	const togglePermissions = (p: RolePermission) => setPermissions((prev) => (prev.includes(p) ? prev.filter((x) => x !== p) : [...prev, p]));
 	const toggleMultiplePermissions = (p: RolePermission[]) =>
-		setPermissions(prev => [...prev.filter(x => !p.includes(x)), ...(p.every(x => prev.includes(x)) ? [] : p)])
+		setPermissions((prev) => [...prev.filter((x) => !p.includes(x)), ...(p.every((x) => prev.includes(x)) ? [] : p)]);
 
 	return (
 		<>
 			<Head>
-				<title>{role.label} | {entity.label} | EnCoach</title>
+				<title>
+					{role.label} | {entity.label} | EnCoach
+				</title>
 				<meta
 					name="description"
 					content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
@@ -249,7 +246,9 @@ export default function EntityRole({ user, entity, role, userCount, disableEdit
 									className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
 									<BsChevronLeft />
 								</Link>
-								<h2 className="font-bold text-2xl">{role.label} Role ({userCount} users)</h2>
+								<h2 className="font-bold text-2xl">
+									{role.label} Role ({userCount} users)
+								</h2>
 							</div>
 						</div>
 						<div className="flex items-center justify-between w-full">
@@ -286,16 +285,19 @@ export default function EntityRole({ user, entity, role, userCount, disableEdit
 								<b>User Management</b>
 								<Checkbox
 									disabled={!canEditPermissions || disableEdit}
-									isChecked={mapBy(USER_MANAGEMENT, 'key').every(k => permissions.includes(k))}
-									onChange={() => toggleMultiplePermissions(mapBy(USER_MANAGEMENT, 'key').filter(enableCheckbox))}
-								>
+									isChecked={mapBy(USER_MANAGEMENT, "key").every((k) => permissions.includes(k))}
+									onChange={() => toggleMultiplePermissions(mapBy(USER_MANAGEMENT, "key").filter(enableCheckbox))}>
 									Select all
 								</Checkbox>
 							</div>
 							<Separator />
 							<div className="grid grid-cols-2 gap-4">
-								{USER_MANAGEMENT.map(({ label, key }) => (
-									<Checkbox disabled={!enableCheckbox(key)} key={key} isChecked={permissions.includes(key)} onChange={() => togglePermissions(key)}>
+								{USER_MANAGEMENT.map(({label, key}) => (
+									<Checkbox
+										disabled={!enableCheckbox(key)}
+										key={key}
+										isChecked={permissions.includes(key)}
+										onChange={() => togglePermissions(key)}>
 										{label}
 									</Checkbox>
 								))}
@@ -307,16 +309,19 @@ export default function EntityRole({ user, entity, role, userCount, disableEdit
 								<b>Exam Management</b>
 								<Checkbox
 									disabled={!canEditPermissions || disableEdit}
-									isChecked={mapBy(EXAM_MANAGEMENT, 'key').every(k => permissions.includes(k))}
-									onChange={() => toggleMultiplePermissions(mapBy(EXAM_MANAGEMENT, 'key').filter(enableCheckbox))}
-								>
+									isChecked={mapBy(EXAM_MANAGEMENT, "key").every((k) => permissions.includes(k))}
+									onChange={() => toggleMultiplePermissions(mapBy(EXAM_MANAGEMENT, "key").filter(enableCheckbox))}>
 									Select all
 								</Checkbox>
 							</div>
 							<Separator />
 							<div className="grid grid-cols-3 gap-4">
-								{EXAM_MANAGEMENT.map(({ label, key }) => (
-									<Checkbox disabled={!enableCheckbox(key)} key={key} isChecked={permissions.includes(key)} onChange={() => togglePermissions(key)}>
+								{EXAM_MANAGEMENT.map(({label, key}) => (
+									<Checkbox
+										disabled={!enableCheckbox(key)}
+										key={key}
+										isChecked={permissions.includes(key)}
+										onChange={() => togglePermissions(key)}>
 										{label}
 									</Checkbox>
 								))}
@@ -328,16 +333,19 @@ export default function EntityRole({ user, entity, role, userCount, disableEdit
 								<b>Clasroom Management</b>
 								<Checkbox
 									disabled={!canEditPermissions || disableEdit}
-									isChecked={mapBy(CLASSROOM_MANAGEMENT, 'key').every(k => permissions.includes(k))}
-									onChange={() => toggleMultiplePermissions(mapBy(CLASSROOM_MANAGEMENT, 'key').filter(enableCheckbox))}
-								>
+									isChecked={mapBy(CLASSROOM_MANAGEMENT, "key").every((k) => permissions.includes(k))}
+									onChange={() => toggleMultiplePermissions(mapBy(CLASSROOM_MANAGEMENT, "key").filter(enableCheckbox))}>
 									Select all
 								</Checkbox>
 							</div>
 							<Separator />
 							<div className="grid grid-cols-2 gap-4">
-								{CLASSROOM_MANAGEMENT.map(({ label, key }) => (
-									<Checkbox disabled={!enableCheckbox(key)} key={key} isChecked={permissions.includes(key)} onChange={() => togglePermissions(key)}>
+								{CLASSROOM_MANAGEMENT.map(({label, key}) => (
+									<Checkbox
+										disabled={!enableCheckbox(key)}
+										key={key}
+										isChecked={permissions.includes(key)}
+										onChange={() => togglePermissions(key)}>
 										{label}
 									</Checkbox>
 								))}
@@ -349,16 +357,19 @@ export default function EntityRole({ user, entity, role, userCount, disableEdit
 								<b>Entity Management</b>
 								<Checkbox
 									disabled={!canEditPermissions || disableEdit}
-									isChecked={mapBy(ENTITY_MANAGEMENT, 'key').every(k => permissions.includes(k))}
-									onChange={() => toggleMultiplePermissions(mapBy(ENTITY_MANAGEMENT, 'key').filter(enableCheckbox))}
-								>
+									isChecked={mapBy(ENTITY_MANAGEMENT, "key").every((k) => permissions.includes(k))}
+									onChange={() => toggleMultiplePermissions(mapBy(ENTITY_MANAGEMENT, "key").filter(enableCheckbox))}>
 									Select all
 								</Checkbox>
 							</div>
 							<Separator />
 							<div className="grid grid-cols-2 gap-4">
-								{ENTITY_MANAGEMENT.map(({ label, key }) => (
-									<Checkbox disabled={!enableCheckbox(key)} key={key} isChecked={permissions.includes(key)} onChange={() => togglePermissions(key)}>
+								{ENTITY_MANAGEMENT.map(({label, key}) => (
+									<Checkbox
+										disabled={!enableCheckbox(key)}
+										key={key}
+										isChecked={permissions.includes(key)}
+										onChange={() => togglePermissions(key)}>
 										{label}
 									</Checkbox>
 								))}
@@ -370,16 +381,19 @@ export default function EntityRole({ user, entity, role, userCount, disableEdit
 								<b>Assignment Management</b>
 								<Checkbox
 									disabled={!canEditPermissions || disableEdit}
-									isChecked={mapBy(ASSIGNMENT_MANAGEMENT, 'key').every(k => permissions.includes(k))}
-									onChange={() => toggleMultiplePermissions(mapBy(ASSIGNMENT_MANAGEMENT, 'key').filter(enableCheckbox))}
-								>
+									isChecked={mapBy(ASSIGNMENT_MANAGEMENT, "key").every((k) => permissions.includes(k))}
+									onChange={() => toggleMultiplePermissions(mapBy(ASSIGNMENT_MANAGEMENT, "key").filter(enableCheckbox))}>
 									Select all
 								</Checkbox>
 							</div>
 							<Separator />
 							<div className="grid grid-cols-2 gap-4">
-								{ASSIGNMENT_MANAGEMENT.map(({ label, key }) => (
-									<Checkbox disabled={!enableCheckbox(key)} key={key} isChecked={permissions.includes(key)} onChange={() => togglePermissions(key)}>
+								{ASSIGNMENT_MANAGEMENT.map(({label, key}) => (
+									<Checkbox
+										disabled={!enableCheckbox(key)}
+										key={key}
+										isChecked={permissions.includes(key)}
+										onChange={() => togglePermissions(key)}>
 										{label}
 									</Checkbox>
 								))}
diff --git a/src/pages/generation.tsx b/src/pages/generation.tsx
index 65903172..17172374 100644
--- a/src/pages/generation.tsx
+++ b/src/pages/generation.tsx
@@ -1,39 +1,40 @@
 /* eslint-disable @next/next/no-img-element */
 import Head from "next/head";
-import { withIronSessionSsr } from "iron-session/next";
-import { sessionOptions } from "@/lib/session";
-import { ToastContainer } from "react-toastify";
-import { shouldRedirectHome } from "@/utils/navigation.disabled";
-import { Radio, RadioGroup } from "@headlessui/react";
+import {withIronSessionSsr} from "iron-session/next";
+import {sessionOptions} from "@/lib/session";
+import {ToastContainer} from "react-toastify";
+import {shouldRedirectHome} from "@/utils/navigation.disabled";
+import {Radio, RadioGroup} from "@headlessui/react";
 import clsx from "clsx";
-import { MODULE_ARRAY } from "@/utils/moduleUtils";
-import { capitalize } from "lodash";
+import {MODULE_ARRAY} from "@/utils/moduleUtils";
+import {capitalize} from "lodash";
 import Input from "@/components/Low/Input";
-import {  findAllowedEntities } from "@/utils/permissions";
-import { User } from "@/interfaces/user";
+import {findAllowedEntities} from "@/utils/permissions";
+import {User} from "@/interfaces/user";
 import useExamEditorStore from "@/stores/examEditor";
 import ExamEditorStore from "@/stores/examEditor/types";
 import ExamEditor from "@/components/ExamEditor";
-import { mapBy, redirect, serialize } from "@/utils";
-import { requestUser } from "@/utils/api";
-import { Module } from "@/interfaces";
-import { getExam, } from "@/utils/exams.be";
-import { Exam, Exercise, InteractiveSpeakingExercise, ListeningPart, SpeakingExercise } from "@/interfaces/exam";
-import { useEffect, useState } from "react";
-import { getEntitiesWithRoles } from "@/utils/entities.be";
-import { isAdmin } from "@/utils/users";
+import {mapBy, redirect, serialize} from "@/utils";
+import {requestUser} from "@/utils/api";
+import {Module} from "@/interfaces";
+import {getExam} from "@/utils/exams.be";
+import {Exam, Exercise, InteractiveSpeakingExercise, ListeningPart, SpeakingExercise} from "@/interfaces/exam";
+import {useEffect, useState} from "react";
+import {getEntitiesWithRoles} from "@/utils/entities.be";
+import {isAdmin} from "@/utils/users";
 import axios from "axios";
+import {EntityWithRoles} from "@/interfaces/entity";
 
-type Permission = { [key in Module]: boolean }
+type Permission = {[key in Module]: boolean};
 
-export const getServerSideProps = withIronSessionSsr(async ({ req, res, query }) => {
-	const user = await requestUser(req, res)
-	if (!user) return redirect("/login")
+export const getServerSideProps = withIronSessionSsr(async ({req, res, query}) => {
+	const user = await requestUser(req, res);
+	if (!user) return redirect("/login");
 
-	if (shouldRedirectHome(user)) return redirect("/")
+	if (shouldRedirectHome(user)) return redirect("/");
 
-	const entityIDs = mapBy(user.entities, 'id')
-	const entities = await getEntitiesWithRoles(isAdmin(user) ? undefined : entityIDs)
+	const entityIDs = mapBy(user.entities, "id");
+	const entities = await getEntitiesWithRoles(isAdmin(user) ? undefined : entityIDs);
 
 	const permissions: Permission = {
 		reading: findAllowedEntities(user, entities, `generate_reading`).length > 0,
@@ -41,29 +42,46 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, query })
 		writing: findAllowedEntities(user, entities, `generate_writing`).length > 0,
 		speaking: findAllowedEntities(user, entities, `generate_speaking`).length > 0,
 		level: findAllowedEntities(user, entities, `generate_level`).length > 0,
-	}
+	};
 
-	if (Object.keys(permissions).every(p => !permissions[p as Module])) return redirect("/")
+	const entitiesAllowEditPrivacy = findAllowedEntities(user, entities, "update_exam_privacy");
+	console.log(entitiesAllowEditPrivacy);
 
-	const { id, module: examModule } = query as { id?: string, module?: Module }
-	if (!id || !examModule) return { props: serialize({ user, permissions }) };
+	if (Object.keys(permissions).every((p) => !permissions[p as Module])) return redirect("/");
+
+	const {id, module: examModule} = query as {id?: string; module?: Module};
+	if (!id || !examModule) return {props: serialize({user, permissions})};
 
 	//if (!permissions[module]) return redirect("/generation")
 
-	const exam = await getExam(examModule, id)
-	if (!exam) return redirect("/generation")
+	const exam = await getExam(examModule, id);
+	if (!exam) return redirect("/generation");
 
 	return {
-		props: serialize({ id, user, exam, examModule, permissions }),
+		props: serialize({id, user, exam, examModule, permissions, entitiesAllowEditPrivacy}),
 	};
 }, sessionOptions);
 
-export default function Generation({ id, user, exam, examModule, permissions }: { id: string, user: User; exam?: Exam, examModule?: Module, permissions: Permission }) {
-	const { title, currentModule, modules, dispatch } = useExamEditorStore();
+export default function Generation({
+	id,
+	user,
+	exam,
+	examModule,
+	permissions,
+	entitiesAllowEditPrivacy,
+}: {
+	id: string;
+	user: User;
+	exam?: Exam;
+	examModule?: Module;
+	permissions: Permission;
+	entitiesAllowEditPrivacy: EntityWithRoles[];
+}) {
+	const {title, currentModule, modules, dispatch} = useExamEditorStore();
 	const [examLevelParts, setExamLevelParts] = useState<number | undefined>(undefined);
 
 	const updateRoot = (updates: Partial<ExamEditorStore>) => {
-		dispatch({ type: 'UPDATE_ROOT', payload: { updates } });
+		dispatch({type: "UPDATE_ROOT", payload: {updates}});
 	};
 
 	useEffect(() => {
@@ -71,16 +89,16 @@ export default function Generation({ id, user, exam, examModule, permissions }:
 			if (examModule === "level" && exam.module === "level") {
 				setExamLevelParts(exam.parts.length);
 			}
-			updateRoot({currentModule: examModule})
-			dispatch({ type: "INIT_EXAM_EDIT", payload: { exam, id, examModule } })
+			updateRoot({currentModule: examModule});
+			dispatch({type: "INIT_EXAM_EDIT", payload: {exam, id, examModule}});
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [id, exam, module])
+	}, [id, exam, module]);
 
 	useEffect(() => {
 		const fetchAvatars = async () => {
 			const response = await axios.get("/api/exam/avatars");
-			updateRoot({ speakingAvatars: response.data });
+			updateRoot({speakingAvatars: response.data});
 		};
 
 		fetchAvatars();
@@ -96,48 +114,61 @@ export default function Generation({ id, user, exam, examModule, permissions }:
 				URL.revokeObjectURL(state.writing.academic_url);
 			}
 
-			state.listening.sections.forEach(section => {
+			state.listening.sections.forEach((section) => {
 				const listeningPart = section.state as ListeningPart;
 				if (listeningPart.audio?.source) {
 					URL.revokeObjectURL(listeningPart.audio.source);
 					dispatch({
-						type: "UPDATE_SECTION_SINGLE_FIELD", payload: {
-							sectionId: section.sectionId, module: "listening", field: "state", value: { ...listeningPart, audio: undefined }
-						}
-					})
+						type: "UPDATE_SECTION_SINGLE_FIELD",
+						payload: {
+							sectionId: section.sectionId,
+							module: "listening",
+							field: "state",
+							value: {...listeningPart, audio: undefined},
+						},
+					});
 				}
 			});
 
-			if (state.listening.instructionsState.customInstructionsURL.startsWith('blob:')) {
+			if (state.listening.instructionsState.customInstructionsURL.startsWith("blob:")) {
 				URL.revokeObjectURL(state.listening.instructionsState.customInstructionsURL);
 			}
 
-			state.speaking.sections.forEach(section => {
+			state.speaking.sections.forEach((section) => {
 				const sectionState = section.state as Exercise;
-				if (sectionState.type === 'speaking') {
+				if (sectionState.type === "speaking") {
 					const speakingExercise = sectionState as SpeakingExercise;
 					URL.revokeObjectURL(speakingExercise.video_url);
 					dispatch({
-						type: "UPDATE_SECTION_SINGLE_FIELD", payload: {
-							sectionId: section.sectionId, module: "listening", field: "state", value: { ...speakingExercise, video_url: undefined }
-						}
-					})
+						type: "UPDATE_SECTION_SINGLE_FIELD",
+						payload: {
+							sectionId: section.sectionId,
+							module: "listening",
+							field: "state",
+							value: {...speakingExercise, video_url: undefined},
+						},
+					});
 				}
-				if (sectionState.type === 'interactiveSpeaking') {
+				if (sectionState.type === "interactiveSpeaking") {
 					const interactiveSpeaking = sectionState as InteractiveSpeakingExercise;
-					interactiveSpeaking.prompts.forEach(prompt => {
+					interactiveSpeaking.prompts.forEach((prompt) => {
 						URL.revokeObjectURL(prompt.video_url);
 					});
 					dispatch({
-						type: "UPDATE_SECTION_SINGLE_FIELD", payload: {
-							sectionId: section.sectionId, module: "listening", field: "state", value: {
-								...interactiveSpeaking, prompts: interactiveSpeaking.prompts.map((p) => ({ ...p, video_url: undefined }))
-							}
-						}
-					})
+						type: "UPDATE_SECTION_SINGLE_FIELD",
+						payload: {
+							sectionId: section.sectionId,
+							module: "listening",
+							field: "state",
+							value: {
+								...interactiveSpeaking,
+								prompts: interactiveSpeaking.prompts.map((p) => ({...p, video_url: undefined})),
+							},
+						},
+					});
 				}
 			});
-			dispatch({ type: 'FULL_RESET' });
+			dispatch({type: "FULL_RESET"});
 		};
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
@@ -163,7 +194,7 @@ export default function Generation({ id, user, exam, examModule, permissions }:
 							placeholder="Insert a title here"
 							name="title"
 							label="Title"
-							onChange={(title) => updateRoot({ title })}
+							onChange={(title) => updateRoot({title})}
 							roundness="xl"
 							value={title}
 							defaultValue={title}
@@ -172,44 +203,46 @@ export default function Generation({ id, user, exam, examModule, permissions }:
 						<label className="font-normal text-base text-mti-gray-dim">Module</label>
 						<RadioGroup
 							value={currentModule}
-							onChange={(currentModule) => updateRoot({ currentModule })}
+							onChange={(currentModule) => updateRoot({currentModule})}
 							className="flex flex-row flex-wrap w-full gap-4 -md:justify-center justify-between">
-							{[...MODULE_ARRAY].filter(m => permissions[m]).map((x) => (
-								<Radio value={x} key={x}>
-									{({ checked }) => (
-										<span
-											className={clsx(
-												"px-6 py-4 w-64 h-[72px] flex justify-center items-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-												"transition duration-300 ease-in-out",
-												x === "reading" &&
-												(!checked
-													? "bg-white border-mti-gray-platinum"
-													: "bg-ielts-reading/70 border-ielts-reading text-white"),
-												x === "listening" &&
-												(!checked
-													? "bg-white border-mti-gray-platinum"
-													: "bg-ielts-listening/70 border-ielts-listening text-white"),
-												x === "writing" &&
-												(!checked
-													? "bg-white border-mti-gray-platinum"
-													: "bg-ielts-writing/70 border-ielts-writing text-white"),
-												x === "speaking" &&
-												(!checked
-													? "bg-white border-mti-gray-platinum"
-													: "bg-ielts-speaking/70 border-ielts-speaking text-white"),
-												x === "level" &&
-												(!checked
-													? "bg-white border-mti-gray-platinum"
-													: "bg-ielts-level/70 border-ielts-level text-white"),
-											)}>
-											{capitalize(x)}
-										</span>
-									)}
-								</Radio>
-							))}
+							{[...MODULE_ARRAY]
+								.filter((m) => permissions[m])
+								.map((x) => (
+									<Radio value={x} key={x}>
+										{({checked}) => (
+											<span
+												className={clsx(
+													"px-6 py-4 w-64 h-[72px] flex justify-center items-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+													"transition duration-300 ease-in-out",
+													x === "reading" &&
+														(!checked
+															? "bg-white border-mti-gray-platinum"
+															: "bg-ielts-reading/70 border-ielts-reading text-white"),
+													x === "listening" &&
+														(!checked
+															? "bg-white border-mti-gray-platinum"
+															: "bg-ielts-listening/70 border-ielts-listening text-white"),
+													x === "writing" &&
+														(!checked
+															? "bg-white border-mti-gray-platinum"
+															: "bg-ielts-writing/70 border-ielts-writing text-white"),
+													x === "speaking" &&
+														(!checked
+															? "bg-white border-mti-gray-platinum"
+															: "bg-ielts-speaking/70 border-ielts-speaking text-white"),
+													x === "level" &&
+														(!checked
+															? "bg-white border-mti-gray-platinum"
+															: "bg-ielts-level/70 border-ielts-level text-white"),
+												)}>
+												{capitalize(x)}
+											</span>
+										)}
+									</Radio>
+								))}
 						</RadioGroup>
 					</div>
-					<ExamEditor levelParts={examLevelParts} />
+					<ExamEditor levelParts={examLevelParts} entitiesAllowEditPrivacy={entitiesAllowEditPrivacy} />
 				</>
 			)}
 		</>
diff --git a/src/resources/entityPermissions.ts b/src/resources/entityPermissions.ts
index 76e1b169..cb4212cc 100644
--- a/src/resources/entityPermissions.ts
+++ b/src/resources/entityPermissions.ts
@@ -1,72 +1,73 @@
 export type RolePermission =
-	"view_students" |
-	"view_teachers" |
-	"view_corporates" |
-	"view_mastercorporates" |
-	"edit_students" |
-	"edit_teachers" |
-	"edit_corporates" |
-	"edit_mastercorporates" |
-	"delete_students" |
-	"delete_teachers" |
-	"delete_corporates" |
-	"delete_mastercorporates" |
-	"generate_reading" |
-	"view_reading" |
-	"delete_reading" |
-	"generate_listening" |
-	"view_listening" |
-	"delete_listening" |
-	"generate_writing" |
-	"view_writing" |
-	"delete_writing" |
-	"generate_speaking" |
-	"view_speaking" |
-	"delete_speaking" |
-	"generate_level" |
-	"view_level" |
-	"delete_level" |
-	"view_classrooms" |
-	"create_classroom" |
-	"rename_classrooms" |
-	"add_to_classroom" |
-	"remove_from_classroom" |
-	"delete_classroom" |
-	"view_entities" |
-	"rename_entity" |
-	"add_to_entity" |
-	"remove_from_entity" |
-	"delete_entity" |
-	"view_entity_roles" |
-	"create_entity_role" |
-	"rename_entity_role" |
-	"edit_role_permissions" |
-	"assign_to_role" |
-	"delete_entity_role" |
-	"view_assignments" |
-	"create_assignment" |
-	"edit_assignment" |
-	"delete_assignment" |
-	"start_assignment" |
-	"archive_assignment" |
-	"view_entity_statistics" |
-	"create_user" |
-	"create_user_batch" |
-	"create_code" |
-	"create_code_batch" |
-	"view_code_list" |
-	"delete_code" |
-	"view_statistics" |
-	"download_statistics_report" |
-	"edit_grading_system" |
-	"view_student_performance" |
-	"upload_classroom" |
-	"download_user_list" |
-	"view_student_record" |
-	"download_student_record" |
-	"pay_entity" |
-	"view_payment_record" |
-	"view_approval_workflows"
+	| "view_students"
+	| "view_teachers"
+	| "view_corporates"
+	| "view_mastercorporates"
+	| "edit_students"
+	| "edit_teachers"
+	| "edit_corporates"
+	| "edit_mastercorporates"
+	| "delete_students"
+	| "delete_teachers"
+	| "delete_corporates"
+	| "delete_mastercorporates"
+	| "generate_reading"
+	| "view_reading"
+	| "delete_reading"
+	| "generate_listening"
+	| "view_listening"
+	| "delete_listening"
+	| "generate_writing"
+	| "view_writing"
+	| "delete_writing"
+	| "generate_speaking"
+	| "view_speaking"
+	| "delete_speaking"
+	| "generate_level"
+	| "view_level"
+	| "delete_level"
+	| "view_classrooms"
+	| "create_classroom"
+	| "rename_classrooms"
+	| "add_to_classroom"
+	| "remove_from_classroom"
+	| "delete_classroom"
+	| "view_entities"
+	| "rename_entity"
+	| "add_to_entity"
+	| "remove_from_entity"
+	| "delete_entity"
+	| "view_entity_roles"
+	| "create_entity_role"
+	| "rename_entity_role"
+	| "edit_role_permissions"
+	| "assign_to_role"
+	| "delete_entity_role"
+	| "view_assignments"
+	| "create_assignment"
+	| "edit_assignment"
+	| "delete_assignment"
+	| "start_assignment"
+	| "archive_assignment"
+	| "view_entity_statistics"
+	| "create_user"
+	| "create_user_batch"
+	| "create_code"
+	| "create_code_batch"
+	| "view_code_list"
+	| "delete_code"
+	| "view_statistics"
+	| "download_statistics_report"
+	| "edit_grading_system"
+	| "view_student_performance"
+	| "upload_classroom"
+	| "download_user_list"
+	| "view_student_record"
+	| "download_student_record"
+	| "pay_entity"
+	| "view_payment_record"
+	| "view_approval_workflows"
+	| "update_exam_privacy";
 
 export const DEFAULT_PERMISSIONS: RolePermission[] = [
 	"view_students",
@@ -76,8 +77,8 @@ export const DEFAULT_PERMISSIONS: RolePermission[] = [
 	"view_entity_roles",
 	"view_statistics",
 	"download_statistics_report",
-	"view_approval_workflows"
-]
+	"view_approval_workflows",
+];
 
 export const ADMIN_PERMISSIONS: RolePermission[] = [
 	"view_students",
@@ -146,5 +147,6 @@ export const ADMIN_PERMISSIONS: RolePermission[] = [
 	"view_student_record",
 	"download_student_record",
 	"pay_entity",
-	"view_payment_record"
-]
+	"view_payment_record",
+	"update_exam_privacy",
+];
diff --git a/src/stores/examEditor/index.ts b/src/stores/examEditor/index.ts
index 7db76092..ceb957ed 100644
--- a/src/stores/examEditor/index.ts
+++ b/src/stores/examEditor/index.ts
@@ -1,25 +1,25 @@
 import defaultModuleSettings from "./defaults";
-import { Action, rootReducer } from "./reducers";
+import {Action, rootReducer} from "./reducers";
 import ExamEditorStore from "./types";
-import { create } from "zustand";
-
+import {create} from "zustand";
 
 const useExamEditorStore = create<
-  ExamEditorStore & {
-    dispatch: (action: Action) => void;
-  }>((set) => ({
-    title: "",
-    globalEdit: [],
-    currentModule: "reading",
-    speakingAvatars: [],
-    modules: {
-      reading: defaultModuleSettings("reading", 60),
-      writing: defaultModuleSettings("writing", 60),
-      speaking: defaultModuleSettings("speaking", 14),
-      listening: defaultModuleSettings("listening", 30),
-      level: defaultModuleSettings("level", 60)
-    },
-    dispatch: (action) => set((state) => rootReducer(state, action))
-  }));
+	ExamEditorStore & {
+		dispatch: (action: Action) => void;
+	}
+>((set) => ({
+	title: "",
+	globalEdit: [],
+	currentModule: "reading",
+	speakingAvatars: [],
+	modules: {
+		reading: defaultModuleSettings("reading", 60),
+		writing: defaultModuleSettings("writing", 60),
+		speaking: defaultModuleSettings("speaking", 14),
+		listening: defaultModuleSettings("listening", 30),
+		level: defaultModuleSettings("level", 60),
+	},
+	dispatch: (action) => set((state) => rootReducer(state, action)),
+}));
 
 export default useExamEditorStore;
diff --git a/src/utils/users.ts b/src/utils/users.ts
index 319be4f1..c30ed239 100644
--- a/src/utils/users.ts
+++ b/src/utils/users.ts
@@ -1,7 +1,7 @@
-import {  WithLabeledEntities } from "@/interfaces/entity";
-import { User } from "@/interfaces/user";
-import {  USER_TYPE_LABELS } from "@/resources/user";
-import { capitalize } from "lodash";
+import {WithLabeledEntities} from "@/interfaces/entity";
+import {User} from "@/interfaces/user";
+import {USER_TYPE_LABELS} from "@/resources/user";
+import {capitalize} from "lodash";
 import moment from "moment";
 
 export interface UserListRow {
@@ -22,7 +22,7 @@ export const exportListToExcel = (rowUsers: WithLabeledEntities<User>[]) => {
 		name: user.name,
 		email: user.email,
 		type: USER_TYPE_LABELS[user.type],
-		entities: user.entities.map((e) => e.label).join(', '),
+		entities: user.entities.map((e) => e.label).join(", "),
 		expiryDate: user.subscriptionExpirationDate ? moment(user.subscriptionExpirationDate).format("DD/MM/YYYY") : "Unlimited",
 		country: user.demographicInformation?.country || "N/A",
 		phone: user.demographicInformation?.phone || "N/A",
@@ -41,8 +41,7 @@ export const exportListToExcel = (rowUsers: WithLabeledEntities<User>[]) => {
 
 export const getUserName = (user?: User) => {
 	if (!user) return "N/A";
-	if (user.type === "corporate" || user.type === "mastercorporate") return user.name;
 	return user.name;
 };
 
-export const isAdmin = (user: User) => ["admin", "developer"].includes(user?.type)
+export const isAdmin = (user: User) => ["admin", "developer"].includes(user?.type);

From 752881df4128fc4b743397ef223f84067fbba81f Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Thu, 6 Feb 2025 13:16:32 +0000
Subject: [PATCH 64/69] - Fix bug where workflows were being created again
 after exam update - Moved createWorkflows function into an helper file
 instead of a post request. - Moved the workflow creation logic into the post
 of exam creation instead of a seperate post in each exam module

---
 .../ExamEditor/SettingsEditor/level.tsx       | 37 ++----------
 .../SettingsEditor/listening/index.tsx        | 37 ++----------
 .../SettingsEditor/reading/index.tsx          | 37 +++---------
 .../SettingsEditor/speaking/index.tsx         | 37 ++----------
 .../SettingsEditor/writing/index.tsx          | 37 ++----------
 src/lib/createWorkflowsOnExamCreation.ts      | 34 +++++++++++
 src/pages/api/approval-workflows/index.ts     | 59 +------------------
 src/pages/api/exam/[module]/index.ts          | 56 ++++++++++++++----
 8 files changed, 112 insertions(+), 222 deletions(-)
 create mode 100644 src/lib/createWorkflowsOnExamCreation.ts

diff --git a/src/components/ExamEditor/SettingsEditor/level.tsx b/src/components/ExamEditor/SettingsEditor/level.tsx
index 376113d3..d192c629 100644
--- a/src/components/ExamEditor/SettingsEditor/level.tsx
+++ b/src/components/ExamEditor/SettingsEditor/level.tsx
@@ -205,7 +205,12 @@ const LevelSettings: React.FC = () => {
 
             const result = await axios.post('/api/exam/level', exam);
             playSound("sent");
-            toast.success(`Submitted Exam ID: ${result.data.id}`);
+            // Successfully submitted exam
+            if (result.status === 200) {
+                toast.success(result.data.message);
+            } else if (result.status === 207) {
+                toast.warning(result.data.message);
+            }
 
             Array.from(audioMap.values()).forEach(url => {
                 URL.revokeObjectURL(url);
@@ -214,36 +219,6 @@ const LevelSettings: React.FC = () => {
                 URL.revokeObjectURL(url);
             });
 
-            const requestBody = await (async () => {
-                const handledExam = await getExamById("level", result.data.id);
-                return {
-                    examAuthor: handledExam?.createdBy ?? "Unknown Author",
-                    examEntities: handledExam?.entities ?? [],
-                    examId: handledExam?.id ?? "Unknown ID",
-                    examModule: "level"
-                };
-            })();
-            await axios
-                .post(`/api/approval-workflows`, requestBody)
-                .then((response) => {
-                    if (response.status === 200) {
-                        toast.success(`Approval Workflows for exam have been successfully created`);
-                    } else if (response.status === 207) {
-                        toast.warning(
-                            `Approval Workflows were partially created. Exam author might not have a configured workflow for all its entities.`
-                        );
-                    }
-                })
-                .catch((reason) => {
-                    if (reason.response?.status === 404) {
-                        toast.error("No configured workflow found for examAuthor for any of its entities.");
-                    } else {
-                        toast.error(
-                            "Something went wrong while creating approval workflow, please try again later."
-                        );
-                    }
-                });
-
         } catch (error: any) {
             console.error('Error submitting exam:', error);
             toast.error(
diff --git a/src/components/ExamEditor/SettingsEditor/listening/index.tsx b/src/components/ExamEditor/SettingsEditor/listening/index.tsx
index 182f1d3f..0e1e733e 100644
--- a/src/components/ExamEditor/SettingsEditor/listening/index.tsx
+++ b/src/components/ExamEditor/SettingsEditor/listening/index.tsx
@@ -150,37 +150,12 @@ const ListeningSettings: React.FC = () => {
 
                 const result = await axios.post('/api/exam/listening', exam);
                 playSound("sent");
-                toast.success(`Submitted Exam ID: ${result.data.id}`);
-
-                const requestBody = await (async () => {
-                    const handledExam = await getExamById("listening", result.data.id);
-                    return {
-                        examAuthor: handledExam?.createdBy ?? "Unknown Author",
-                        examEntities: handledExam?.entities ?? [],
-                        examId: handledExam?.id ?? "Unknown ID",
-                        examModule: "listening"
-                    };
-                })();
-                await axios
-                    .post(`/api/approval-workflows`, requestBody)
-                    .then((response) => {
-                        if (response.status === 200) {
-                            toast.success(`Approval Workflows for exam have been successfully created`);
-                        } else if (response.status === 207) {
-                            toast.warning(
-                                `Approval Workflows were partially created. Exam author might not have a configured workflow for all its entities.`
-                            );
-                        }
-                    })
-                    .catch((reason) => {
-                        if (reason.response?.status === 404) {
-                            toast.error("No configured workflow found for examAuthor for any of its entities.");
-                        } else {
-                            toast.error(
-                                "Something went wrong while creating approval workflow, please try again later."
-                            );
-                        }
-                    });
+                // Successfully submitted exam
+                if (result.status === 200) {
+                    toast.success(result.data.message);
+                } else if (result.status === 207) {
+                    toast.warning(result.data.message);
+                }
 
             } else {
                 toast.error('No audio sections found in the exam! Please either import them or generate them.');
diff --git a/src/components/ExamEditor/SettingsEditor/reading/index.tsx b/src/components/ExamEditor/SettingsEditor/reading/index.tsx
index 4a16ff12..45b00931 100644
--- a/src/components/ExamEditor/SettingsEditor/reading/index.tsx
+++ b/src/components/ExamEditor/SettingsEditor/reading/index.tsx
@@ -89,38 +89,17 @@ const ReadingSettings: React.FC = () => {
         axios.post(`/api/exam/reading`, exam)
             .then((result) => {
                 playSound("sent");
-                toast.success(`Submitted Exam ID: ${result.data.id}`);
-                return getExamById("reading", result.data.id);
-            })
-            .then((handledExam) => {
-                const requestBody = {
-                    examAuthor: handledExam?.createdBy ?? "Unknown Author",
-                    examEntities: handledExam?.entities ?? [],
-                    examId: handledExam?.id ?? "Unknown ID",
-                    examModule: "reading"
-                };
-
-                return axios.post(`/api/approval-workflows`, requestBody);
-            })
-            .then((response) => {
-                if (response.status === 200) {
-                    toast.success(`Approval Workflows for exam have been successfully created`);
-                } else if (response.status === 207) {
-                    toast.warning(
-                        `Approval Workflows were partially created. Exam author might not have a configured workflow for all its entities.`
-                    );
+                // Successfully submitted exam
+                if (result.status === 200) {
+                    toast.success(result.data.message);
+                } else if (result.status === 207) {
+                    toast.warning(result.data.message);
                 }
             })
             .catch((error) => {
-                if (error.response && error.response.status === 404) {
-                    toast.error("No configured workflow found for examAuthor for any of its entities.");
-                } else {
-                    toast.error(
-                        error.response?.data?.error ||
-                        "Something went wrong, please try again later."
-                    );
-                }
-            });
+                console.log(error);
+                toast.error(error.response.data.error || "Something went wrong while submitting, please try again later.");
+            })
     }
 
     const preview = () => {
diff --git a/src/components/ExamEditor/SettingsEditor/speaking/index.tsx b/src/components/ExamEditor/SettingsEditor/speaking/index.tsx
index bdd86048..513b30b1 100644
--- a/src/components/ExamEditor/SettingsEditor/speaking/index.tsx
+++ b/src/components/ExamEditor/SettingsEditor/speaking/index.tsx
@@ -190,41 +190,16 @@ const SpeakingSettings: React.FC = () => {
       
           const result = await axios.post('/api/exam/speaking', exam);
           playSound("sent");
-          toast.success(`Submitted Exam ID: ${result.data.id}`);
+          // Successfully submitted exam
+          if (result.status === 200) {
+            toast.success(result.data.message);
+          } else if (result.status === 207) {
+            toast.warning(result.data.message);
+          }
       
           Array.from(urlMap.values()).forEach(url => {
             URL.revokeObjectURL(url);
           });
-
-          const requestBody = await (async () => {
-            const handledExam = await getExamById("speaking", result.data.id);
-            return {
-              examAuthor: handledExam?.createdBy ?? "Unknown Author",
-              examEntities: handledExam?.entities ?? [],
-              examId: handledExam?.id ?? "Unknown ID",
-              examModule: "speaking"
-            };
-          })();
-          await axios
-            .post(`/api/approval-workflows`, requestBody)
-            .then((response) => {
-              if (response.status === 200) {
-                toast.success(`Approval Workflows for exam have been successfully created`);
-              } else if (response.status === 207) {
-                toast.warning(
-                  `Approval Workflows were partially created. Exam author might not have a configured workflow for all its entities.`
-                );
-              }
-            })
-            .catch((reason) => {
-              if (reason.response?.status === 404) {
-                toast.error("No configured workflow found for examAuthor for any of its entities.");
-              } else {
-                toast.error(
-                  "Something went wrong while creating approval workflow, please try again later."
-                );
-              }
-            });
       
         } catch (error: any) {
           toast.error(
diff --git a/src/components/ExamEditor/SettingsEditor/writing/index.tsx b/src/components/ExamEditor/SettingsEditor/writing/index.tsx
index d0fd0bbf..911d1817 100644
--- a/src/components/ExamEditor/SettingsEditor/writing/index.tsx
+++ b/src/components/ExamEditor/SettingsEditor/writing/index.tsx
@@ -140,37 +140,12 @@ const WritingSettings: React.FC = () => {
 
             const result = await axios.post(`/api/exam/writing`, exam)
             playSound("sent");
-            toast.success(`Submitted Exam ID: ${result.data.id}`);
-
-            const requestBody = await (async () => {
-                const handledExam = await getExamById("writing", result.data.id);
-                return {
-                    examAuthor: handledExam?.createdBy ?? "Unknown Author",
-                    examEntities: handledExam?.entities ?? [],
-                    examId: handledExam?.id ?? "Unknown ID",
-                    examModule: "writing"
-                };
-            })();
-            await axios
-                .post(`/api/approval-workflows`, requestBody)
-                .then((response) => {
-                    if (response.status === 200) {
-                        toast.success(`Approval Workflows for exam have been successfully created`);
-                    } else if (response.status === 207) {
-                        toast.warning(
-                            `Approval Workflows were partially created. Exam author might not have a configured workflow for all its entities.`
-                        );
-                    } 
-                })
-                .catch((reason) => {
-                    if (reason.response?.status === 404) {
-                        toast.error("No configured workflow found for examAuthor for any of its entities.");
-                    } else {
-                        toast.error(
-                            "Something went wrong while creating approval workflow, please try again later."
-                        );
-                    }
-                });
+            // Successfully submitted exam
+            if (result.status === 200) {
+                toast.success(result.data.message);
+            } else if (result.status === 207) {
+                toast.warning(result.data.message);
+            }
 
         } catch (error: any) {
             console.error('Error submitting exam:', error);
diff --git a/src/lib/createWorkflowsOnExamCreation.ts b/src/lib/createWorkflowsOnExamCreation.ts
new file mode 100644
index 00000000..732a1f18
--- /dev/null
+++ b/src/lib/createWorkflowsOnExamCreation.ts
@@ -0,0 +1,34 @@
+import { Module } from "@/interfaces";
+import { getApprovalWorkflowByFormIntaker, createApprovalWorkflow } from "@/utils/approval.workflows.be";
+
+export async function createApprovalWorkflowsOnExamCreation(examAuthor: string, examEntities: string[], examId: string, examModule: string) {
+    const results = await Promise.all(
+        examEntities.map(async (entity) => {
+            const configuredWorkflow = await getApprovalWorkflowByFormIntaker(entity, examAuthor);
+            if (!configuredWorkflow) {
+                return { entity, created: false };
+            }
+
+            configuredWorkflow.modules.push(examModule as Module);
+            configuredWorkflow.name = examId;
+            configuredWorkflow.examId = examId;
+            configuredWorkflow.entityId = entity;
+            configuredWorkflow.startDate = Date.now();
+
+            try {
+                await createApprovalWorkflow("active-workflows", configuredWorkflow);
+                return { entity, created: true };
+            } catch (error: any) {
+                return { entity, created: false };
+            }
+        })
+    );
+
+    const successCount = results.filter((r) => r.created).length;
+    const totalCount = examEntities.length;
+
+    return {
+        successCount,
+        totalCount,
+    };
+}
diff --git a/src/pages/api/approval-workflows/index.ts b/src/pages/api/approval-workflows/index.ts
index 26636186..bf859471 100644
--- a/src/pages/api/approval-workflows/index.ts
+++ b/src/pages/api/approval-workflows/index.ts
@@ -1,24 +1,14 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import { Module } from "@/interfaces";
 import { sessionOptions } from "@/lib/session";
 import { requestUser } from "@/utils/api";
-import { createApprovalWorkflow, getApprovalWorkflowByFormIntaker, getApprovalWorkflows } from "@/utils/approval.workflows.be";
+import { getApprovalWorkflows } from "@/utils/approval.workflows.be";
 import { withIronSessionApiRoute } from "iron-session/next";
 import type { NextApiRequest, NextApiResponse } from "next";
 
 export default withIronSessionApiRoute(handler, sessionOptions);
 
-interface PostRequestBody {
-    examAuthor: string;
-    examEntities: string[];
-    examId: string;
-    examName: string;
-    examModule: Module;
-}
-
 async function handler(req: NextApiRequest, res: NextApiResponse) {
     if (req.method === "GET") return await get(req, res);
-    if (req.method === "POST") return await post(req, res);
 }
 
 async function get(req: NextApiRequest, res: NextApiResponse) {
@@ -30,49 +20,4 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
     }
 
     return res.status(200).json(await getApprovalWorkflows("active-workflows"));
-}
-
-async function post(req: NextApiRequest, res: NextApiResponse) {
-    const user = await requestUser(req, res);
-    if (!user) return res.status(401).json({ ok: false });
-
-    if (!["admin", "developer", "corporate", "mastercorporate"].includes(user.type)) {
-        return res.status(403).json({ ok: false });
-    }
-
-    const { examAuthor, examEntities, examId, examModule } = req.body as PostRequestBody;
-
-    const results = await Promise.all(
-        examEntities.map(async (entity) => {
-            const configuredWorkflow = await getApprovalWorkflowByFormIntaker(entity, examAuthor);
-            if (!configuredWorkflow) {
-                return { entity, created: false, error: "No configured workflow found for examAuthor." };
-            }
-
-            configuredWorkflow.modules.push(examModule);
-            configuredWorkflow.name = `${examId}`;
-            configuredWorkflow.examId = examId;
-            configuredWorkflow.entityId = entity;
-            configuredWorkflow.startDate = Date.now();
-
-            try {
-                const creationResponse = await createApprovalWorkflow("active-workflows", configuredWorkflow);
-                return { entity, created: true, creationResponse };
-            } catch (error) {
-                const err = error as Error;
-                return { entity, created: false, error: err.message };
-            }
-        })
-    );
-
-    const successCount = results.filter((r) => r.created).length;
-    const totalCount = examEntities.length;
-
-    if (successCount === totalCount) {
-        return res.status(200).json({ ok: true, results });
-    } else if (successCount > 0) {
-        return res.status(207).json({ ok: true, results });
-    } else {
-        return res.status(404).json({ ok: false, message: "No workflows were created", results });
-    }
-}
+}
\ No newline at end of file
diff --git a/src/pages/api/exam/[module]/index.ts b/src/pages/api/exam/[module]/index.ts
index 86e2e7d6..8c114e14 100644
--- a/src/pages/api/exam/[module]/index.ts
+++ b/src/pages/api/exam/[module]/index.ts
@@ -1,15 +1,15 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from "next";
-import client from "@/lib/mongodb";
-import { withIronSessionApiRoute } from "iron-session/next";
-import { sessionOptions } from "@/lib/session";
-import { Exam, ExamBase, InstructorGender, Variant } from "@/interfaces/exam";
-import { getExams } from "@/utils/exams.be";
 import { Module } from "@/interfaces";
-import { getUserCorporate } from "@/utils/groups.be";
-import { requestUser } from "@/utils/api";
-import { isAdmin } from "@/utils/users";
+import { Exam, ExamBase, InstructorGender, Variant } from "@/interfaces/exam";
+import { createApprovalWorkflowsOnExamCreation } from "@/lib/createWorkflowsOnExamCreation";
+import client from "@/lib/mongodb";
+import { sessionOptions } from "@/lib/session";
 import { mapBy } from "@/utils";
+import { requestUser } from "@/utils/api";
+import { getExams } from "@/utils/exams.be";
+import { isAdmin } from "@/utils/users";
+import { withIronSessionApiRoute } from "iron-session/next";
+import type { NextApiRequest, NextApiResponse } from "next";
 
 const db = client.db(process.env.MONGODB_DB);
 
@@ -46,7 +46,7 @@ async function POST(req: NextApiRequest, res: NextApiResponse) {
 	const { module } = req.query as { module: string };
 
 	const session = client.startSession();
-	const entities = isAdmin(user) ? [] : mapBy(user.entities, "id");
+	const entities = isAdmin(user) ? [] : mapBy(user.entities, "id"); // might need to change this with new approval workflows logic.. if an admin creates an exam no workflow is started because workflows must have entities configured.
 
 	try {
 		const exam = {
@@ -57,6 +57,9 @@ async function POST(req: NextApiRequest, res: NextApiResponse) {
 			createdAt: new Date().toISOString(),
 		};
 
+		let responseStatus: number;
+		let responseMessage: string;
+
 		await session.withTransaction(async () => {
 			const docSnap = await db.collection(module).findOne<ExamBase>({ id: req.body.id }, { session });
 
@@ -79,9 +82,38 @@ async function POST(req: NextApiRequest, res: NextApiResponse) {
 					session,
 				}
 			);
-		});
 
-		res.status(200).json(exam);
+			// if it doesn't enter the next if condition it means the exam was updated and not created, so we can send this response.
+			responseStatus = 200;
+			responseMessage = `Successfully updated exam with ID: "${exam.id}"`;
+			// TODO maybe find a way to start missing approval workflows in case they were only configured after exam creation.
+
+			// create workflow only if exam is being created for the first time
+			if (docSnap === null) {
+				try {
+					const { successCount, totalCount } = await createApprovalWorkflowsOnExamCreation(exam.createdBy, exam.entities, exam.id, module);
+
+					if (successCount === totalCount) {
+						responseStatus = 200;
+						responseMessage = `Successfully created exam "${exam.id}" and started its Approval Workflow(s)`;
+					} else if (successCount > 0) {
+						responseStatus = 207;
+						responseMessage = `Successfully created exam with ID: "${exam.id}" but was not able to start/find an Approval Workflow for all the author's entities`;
+					} else {
+						responseStatus = 207;
+						responseMessage = `Successfully created exam with ID: "${exam.id}" but was not able to find any configured Approval Workflow for the author.`;
+					}
+				} catch (error) {
+					console.error("Workflow creation error:", error);
+					responseStatus = 207;
+					responseMessage = `Successfully created exam with ID: "${exam.id}" but something went wrong while creating the Approval Workflow(s).`;
+				}
+			}
+
+			res.status(responseStatus).json({
+				message: responseMessage,
+			});
+		});
 	} catch (error) {
 		console.error("Transaction failed: ", error);
 		res.status(500).json({ ok: false, error: (error as any).message });

From 36afde8aa49f4d7f985c4e9fe1d0838757a3fda7 Mon Sep 17 00:00:00 2001
From: Tiago Ribeiro <tiago.ribeiro@ecrop.dev>
Date: Thu, 6 Feb 2025 18:48:31 +0000
Subject: [PATCH 65/69] Created the new permissions as an example

---
 src/pages/approval-workflows/index.tsx   | 687 +++++++++++------------
 src/pages/entities/[id]/roles/[role].tsx |  31 +
 src/resources/entityPermissions.ts       |  10 +-
 3 files changed, 368 insertions(+), 360 deletions(-)

diff --git a/src/pages/approval-workflows/index.tsx b/src/pages/approval-workflows/index.tsx
index fbd84ed6..84b65c1c 100644
--- a/src/pages/approval-workflows/index.tsx
+++ b/src/pages/approval-workflows/index.tsx
@@ -4,414 +4,383 @@ import Button from "@/components/Low/Button";
 import Input from "@/components/Low/Input";
 import Select from "@/components/Low/Select";
 import useApprovalWorkflows from "@/hooks/useApprovalWorkflows";
-import { Module, ModuleTypeLabels } from "@/interfaces";
-import { ApprovalWorkflow, ApprovalWorkflowStatus, ApprovalWorkflowStatusLabel, StepTypeLabel } from "@/interfaces/approval.workflow";
-import { Entity, EntityWithRoles } from "@/interfaces/entity";
-import { User } from "@/interfaces/user";
-import { sessionOptions } from "@/lib/session";
-import { redirect, serialize } from "@/utils";
-import { requestUser } from "@/utils/api";
-import { getApprovalWorkflows } from "@/utils/approval.workflows.be";
-import { getEntities } from "@/utils/entities.be";
-import { shouldRedirectHome } from "@/utils/navigation.disabled";
-import { getSpecificUsers } from "@/utils/users.be";
-import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import {useAllowedEntities, useAllowedEntitiesSomePermissions, useEntityPermission} from "@/hooks/useEntityPermissions";
+import {Module, ModuleTypeLabels} from "@/interfaces";
+import {ApprovalWorkflow, ApprovalWorkflowStatus, ApprovalWorkflowStatusLabel, StepTypeLabel} from "@/interfaces/approval.workflow";
+import {Entity, EntityWithRoles} from "@/interfaces/entity";
+import {User} from "@/interfaces/user";
+import {sessionOptions} from "@/lib/session";
+import {redirect, serialize} from "@/utils";
+import {requestUser} from "@/utils/api";
+import {getApprovalWorkflows} from "@/utils/approval.workflows.be";
+import {getEntities, getEntitiesWithRoles} from "@/utils/entities.be";
+import {shouldRedirectHome} from "@/utils/navigation.disabled";
+import {findAllowedEntities} from "@/utils/permissions";
+import {getSpecificUsers} from "@/utils/users.be";
+import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
 import axios from "axios";
 import clsx from "clsx";
-import { withIronSessionSsr } from "iron-session/next";
+import {withIronSessionSsr} from "iron-session/next";
 import Head from "next/head";
 import Link from "next/link";
-import { useEffect, useState } from "react";
-import { BsTrash } from "react-icons/bs";
-import { FaRegEdit } from "react-icons/fa";
-import { IoIosAddCircleOutline } from "react-icons/io";
-import { toast, ToastContainer } from "react-toastify";
+import {useEffect, useState} from "react";
+import {BsTrash} from "react-icons/bs";
+import {FaRegEdit} from "react-icons/fa";
+import {IoIosAddCircleOutline} from "react-icons/io";
+import {toast, ToastContainer} from "react-toastify";
 
 const columnHelper = createColumnHelper<ApprovalWorkflow>();
 
-export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
-    const user = await requestUser(req, res)
-    if (!user) return redirect("/login")
+export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
+	const user = await requestUser(req, res);
+	if (!user) return redirect("/login");
 
-    if (shouldRedirectHome(user) || !["admin", "developer", "teacher", "corporate", "mastercorporate"].includes(user.type))
-        return redirect("/")
+	if (shouldRedirectHome(user) || !["admin", "developer", "teacher", "corporate", "mastercorporate"].includes(user.type)) return redirect("/");
 
-    const workflows = await getApprovalWorkflows("active-workflows");
+	const workflows = await getApprovalWorkflows("active-workflows");
 
-    const allAssigneeIds: string[] = [
-        ...new Set(
-            workflows
-                .map(workflow => workflow.steps
-                    .map(step => step.assignees)
-                    .flat()
-                ).flat()
-        )
-    ];
+	const allAssigneeIds: string[] = [...new Set(workflows.map((workflow) => workflow.steps.map((step) => step.assignees).flat()).flat())];
 
-    return {
-        props: serialize({
-            user,
-            initialWorkflows: workflows,
-            workflowsAssignees: await getSpecificUsers(allAssigneeIds),
-            userEntitiesWithLabel: await getEntities(user.entities.map(entity => entity.id)),
-        }),
-    };
+	const entities = await getEntitiesWithRoles(user.entities.map((entity) => entity.id));
+	const allowedEntities = findAllowedEntities(user, entities, "view_workflows");
+
+	return {
+		props: serialize({
+			user,
+			initialWorkflows: workflows,
+			workflowsAssignees: await getSpecificUsers(allAssigneeIds),
+			userEntitiesWithLabel: entities,
+		}),
+	};
 }, sessionOptions);
 
-const StatusClassNames: { [key in ApprovalWorkflowStatus]: string } = {
-    approved: "bg-green-100 text-green-800 border border-green-300 before:content-[''] before:w-2 before:h-2 before:bg-green-500 before:rounded-full before:inline-block before:mr-2",
-    pending: "bg-orange-100 text-orange-800 border border-orange-300 before:content-[''] before:w-2 before:h-2 before:bg-orange-500 before:rounded-full before:inline-block before:mr-2",
-    rejected: "bg-red-100 text-red-800 border border-red-300 before:content-[''] before:w-2 before:h-2 before:bg-red-500 before:rounded-full before:inline-block before:mr-2",
+const StatusClassNames: {[key in ApprovalWorkflowStatus]: string} = {
+	approved:
+		"bg-green-100 text-green-800 border border-green-300 before:content-[''] before:w-2 before:h-2 before:bg-green-500 before:rounded-full before:inline-block before:mr-2",
+	pending:
+		"bg-orange-100 text-orange-800 border border-orange-300 before:content-[''] before:w-2 before:h-2 before:bg-orange-500 before:rounded-full before:inline-block before:mr-2",
+	rejected:
+		"bg-red-100 text-red-800 border border-red-300 before:content-[''] before:w-2 before:h-2 before:bg-red-500 before:rounded-full before:inline-block before:mr-2",
 };
 
 type CustomStatus = ApprovalWorkflowStatus | undefined;
 type CustomEntity = EntityWithRoles["id"] | undefined;
 
 const STATUS_OPTIONS = [
-    {
-        label: "Approved",
-        value: "approved",
-        filter: (x: ApprovalWorkflow) => x.status === "approved",
-    },
-    {
-        label: "Pending",
-        value: "pending",
-        filter: (x: ApprovalWorkflow) => x.status === "pending",
-    },
-    {
-        label: "Rejected",
-        value: "rejected",
-        filter: (x: ApprovalWorkflow) => x.status === "rejected",
-    },
+	{
+		label: "Approved",
+		value: "approved",
+		filter: (x: ApprovalWorkflow) => x.status === "approved",
+	},
+	{
+		label: "Pending",
+		value: "pending",
+		filter: (x: ApprovalWorkflow) => x.status === "pending",
+	},
+	{
+		label: "Rejected",
+		value: "rejected",
+		filter: (x: ApprovalWorkflow) => x.status === "rejected",
+	},
 ];
 
 interface Props {
-    user: User,
-    initialWorkflows: ApprovalWorkflow[],
-    workflowsAssignees: User[],
-    userEntitiesWithLabel: Entity[],
+	user: User;
+	initialWorkflows: ApprovalWorkflow[];
+	workflowsAssignees: User[];
+	userEntitiesWithLabel: EntityWithRoles[];
 }
 
-export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAssignees, userEntitiesWithLabel }: Props) {
+export default function ApprovalWorkflows({user, initialWorkflows, workflowsAssignees, userEntitiesWithLabel}: Props) {
+	const {workflows, reload} = useApprovalWorkflows();
+	const currentWorkflows = workflows || initialWorkflows;
 
-    const { workflows, reload } = useApprovalWorkflows();
-    const currentWorkflows = workflows || initialWorkflows;
+	const [filteredWorkflows, setFilteredWorkflows] = useState<ApprovalWorkflow[]>([]);
 
-    const [filteredWorkflows, setFilteredWorkflows] = useState<ApprovalWorkflow[]>([]);
+	const [statusFilter, setStatusFilter] = useState<CustomStatus>(undefined);
+	const [entityFilter, setEntityFilter] = useState<CustomEntity>(undefined);
+	const [nameFilter, setNameFilter] = useState<string>("");
 
-    const [statusFilter, setStatusFilter] = useState<CustomStatus>(undefined);
-    const [entityFilter, setEntityFilter] = useState<CustomEntity>(undefined);
-    const [nameFilter, setNameFilter] = useState<string>("");
+	const allowedEntities = useAllowedEntities(user, userEntitiesWithLabel, "view_workflows");
+	const allowedSomeEntities = useAllowedEntitiesSomePermissions(user, userEntitiesWithLabel, ["view_workflows", "create_workflow"]);
 
-    const ENTITY_OPTIONS = [
-        ...userEntitiesWithLabel
-            .map(entity => ({
-                label: entity.label,
-                value: entity.id,
-                filter: (x: ApprovalWorkflow) => x.entityId === entity.id,
-            }))
-            .sort((a, b) => a.label.localeCompare(b.label)),
-    ];
+	const ENTITY_OPTIONS = [
+		...userEntitiesWithLabel
+			.map((entity) => ({
+				label: entity.label,
+				value: entity.id,
+				filter: (x: ApprovalWorkflow) => x.entityId === entity.id,
+			}))
+			.sort((a, b) => a.label.localeCompare(b.label)),
+	];
 
-    useEffect(() => {
-        const filters: Array<(workflow: ApprovalWorkflow) => boolean> = [];
+	useEffect(() => {
+		const filters: Array<(workflow: ApprovalWorkflow) => boolean> = [];
 
-        if (statusFilter && statusFilter !== undefined) {
-            const statusOption = STATUS_OPTIONS.find((x) => x.value === statusFilter);
-            if (statusOption && statusOption.filter) {
-                filters.push(statusOption.filter);
-            }
-        }
+		if (statusFilter && statusFilter !== undefined) {
+			const statusOption = STATUS_OPTIONS.find((x) => x.value === statusFilter);
+			if (statusOption && statusOption.filter) {
+				filters.push(statusOption.filter);
+			}
+		}
 
-        if (entityFilter && entityFilter !== undefined) {
-            const entityOption = ENTITY_OPTIONS.find((x) => x.value === entityFilter);
-            if (entityOption && entityOption.filter) {
-                filters.push(entityOption.filter);
-            }
-        }
+		if (entityFilter && entityFilter !== undefined) {
+			const entityOption = ENTITY_OPTIONS.find((x) => x.value === entityFilter);
+			if (entityOption && entityOption.filter) {
+				filters.push(entityOption.filter);
+			}
+		}
 
-        if (nameFilter.trim() !== "") {
-            const nameFilterFunction = (workflow: ApprovalWorkflow) =>
-                workflow.name.toLowerCase().includes(nameFilter.toLowerCase());
-            filters.push(nameFilterFunction);
-        }
+		if (nameFilter.trim() !== "") {
+			const nameFilterFunction = (workflow: ApprovalWorkflow) => workflow.name.toLowerCase().includes(nameFilter.toLowerCase());
+			filters.push(nameFilterFunction);
+		}
 
-        // Apply all filters
-        const filtered = currentWorkflows.filter(workflow => filters.every(filterFn => filterFn(workflow)));
-        setFilteredWorkflows(filtered);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [currentWorkflows, statusFilter, entityFilter, nameFilter]);
+		// Apply all filters
+		const filtered = currentWorkflows.filter((workflow) => filters.every((filterFn) => filterFn(workflow)));
+		setFilteredWorkflows(filtered);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [currentWorkflows, statusFilter, entityFilter, nameFilter]);
 
+	const handleNameFilterChange = (name: ApprovalWorkflow["name"]) => {
+		setNameFilter(name);
+	};
 
-    const handleNameFilterChange = (name: ApprovalWorkflow["name"]) => {
-        setNameFilter(name);
-    };
+	const deleteApprovalWorkflow = (id: string | undefined, name: string) => {
+		if (id === undefined) return;
+		if (!confirm(`Are you sure you want to delete this Approval Workflow?`)) return;
 
-    const deleteApprovalWorkflow = (id: string | undefined, name: string) => {
-        if (id === undefined) return;
-        if (!confirm(`Are you sure you want to delete this Approval Workflow?`)) return;
+		axios
+			.delete(`/api/approval-workflows/${id}`)
+			.then(() => {
+				toast.success(`Successfully deleted ${name} Approval Workflow.`);
+				reload();
+			})
+			.catch((reason) => {
+				if (reason.response.status === 404) {
+					toast.error("Approval Workflow not found!");
+				} else if (reason.response.status === 403) {
+					toast.error("You do not have permission to delete an Approval Workflow!");
+				} else {
+					toast.error("Something went wrong, please try again later.");
+				}
+				return;
+			});
+	};
 
-        axios
-            .delete(`/api/approval-workflows/${id}`)
-            .then(() => {
-                toast.success(`Successfully deleted ${name} Approval Workflow.`);
-                reload();
-            })
-            .catch((reason) => {
-                if (reason.response.status === 404) {
-                    toast.error("Approval Workflow not found!");
-                } else if (reason.response.status === 403) {
-                    toast.error("You do not have permission to delete an Approval Workflow!");
-                } else {
-                    toast.error("Something went wrong, please try again later.");
-                }
-                return;
-            })
-    };
+	const columns = [
+		columnHelper.accessor("name", {
+			header: "EXAM NAME",
+			cell: (info) => <span className="font-medium">{info.getValue()}</span>,
+		}),
+		columnHelper.accessor("modules", {
+			header: "MODULES",
+			cell: (info) => (
+				<div className="flex flex-wrap gap-2">
+					{info.getValue().map((module: Module, index: number) => (
+						<span
+							key={index}
+							className="inline-block rounded-full px-3 py-1 text-sm font-medium bg-indigo-100 border border-indigo-300 text-indigo-900">
+							{ModuleTypeLabels[module]}
+						</span>
+					))}
+				</div>
+			),
+		}),
+		columnHelper.accessor("status", {
+			header: "STATUS",
+			cell: (info) => (
+				<span
+					className={clsx(
+						"inline-block rounded-full px-3 py-1 text-sm font-medium text-left w-[110px]",
+						StatusClassNames[info.getValue()],
+					)}>
+					{ApprovalWorkflowStatusLabel[info.getValue()]}
+				</span>
+			),
+		}),
+		columnHelper.accessor("entityId", {
+			header: "ENTITY",
+			cell: (info) => <span className="font-medium">{userEntitiesWithLabel.find((entity) => entity.id === info.getValue())?.label}</span>,
+		}),
+		columnHelper.accessor("steps", {
+			id: "currentAssignees",
+			header: "CURRENT ASSIGNEES",
+			cell: (info) => {
+				const steps = info.row.original.steps;
+				const currentStep = steps.find((step) => !step.completed);
+				const rejected = steps.find((step) => step.rejected);
 
-    const columns = [
-        columnHelper.accessor("name", {
-            header: "EXAM NAME",
-            cell: (info) => (
-                <span className="font-medium">
-                    {info.getValue()}
-                </span>
-            ),
-        }),
-        columnHelper.accessor("modules", {
-            header: "MODULES",
-            cell: (info) => (
-                <div className="flex flex-wrap gap-2">
-                    {info.getValue().map((module: Module, index: number) => (
-                        <span
-                            key={index}
-                            className="inline-block rounded-full px-3 py-1 text-sm font-medium bg-indigo-100 border border-indigo-300 text-indigo-900"
-                        >
-                            {ModuleTypeLabels[module]}
-                        </span>
-                    ))}
-                </div>
-            ),
-        }),
-        columnHelper.accessor("status", {
-            header: "STATUS",
-            cell: (info) => (
-                <span className={clsx("inline-block rounded-full px-3 py-1 text-sm font-medium text-left w-[110px]", StatusClassNames[info.getValue()])}>
-                    {ApprovalWorkflowStatusLabel[info.getValue()]}
-                </span>
-            ),
-        }),
-        columnHelper.accessor("entityId", {
-            header: "ENTITY",
-            cell: (info) => (
-                <span className="font-medium">
-                    {userEntitiesWithLabel.find((entity) => entity.id === info.getValue())?.label}
-                </span>
-            ),
-        }),
-        columnHelper.accessor("steps", {
-            id: "currentAssignees",
-            header: "CURRENT ASSIGNEES",
-            cell: (info) => {
-                const steps = info.row.original.steps;
-                const currentStep = steps.find((step) => !step.completed);
-                const rejected = steps.find((step) => step.rejected);
+				if (rejected) return "";
 
-                if (rejected) return "";
+				const assignees = currentStep?.assignees.map((assigneeId) => {
+					const assignee = workflowsAssignees.find((user) => user.id === assigneeId);
+					return assignee?.name || "Unknown Assignee";
+				});
 
-                const assignees = currentStep?.assignees.map((assigneeId) => {
-                    const assignee = workflowsAssignees.find((user) => user.id === assigneeId);
-                    return assignee?.name || "Unknown Assignee";
-                });
+				return (
+					<div className="flex flex-wrap gap-2">
+						{assignees?.map((assigneeName: string, index: number) => (
+							<span
+								key={index}
+								className="inline-block rounded-full px-3 py-1 text-sm font-medium bg-gray-100 border border-gray-300 text-gray-900">
+								{assigneeName}
+							</span>
+						))}
+					</div>
+				);
+			},
+		}),
+		columnHelper.accessor("steps", {
+			id: "currentStep",
+			header: "CURRENT STEP",
+			cell: (info) => {
+				const steps = info.row.original.steps;
+				const currentStep = steps.find((step) => !step.completed);
+				const rejected = steps.find((step) => step.rejected);
 
-                return (
-                    <div className="flex flex-wrap gap-2">
-                        {assignees?.map((assigneeName: string, index: number) => (
-                            <span
-                                key={index}
-                                className="inline-block rounded-full px-3 py-1 text-sm font-medium bg-gray-100 border border-gray-300 text-gray-900"
-                            >
-                                {assigneeName}
-                            </span>
-                        ))}
-                    </div>
-                );
-            },
-        }),
-        columnHelper.accessor("steps", {
-            id: "currentStep",
-            header: "CURRENT STEP",
-            cell: (info) => {
-                const steps = info.row.original.steps;
-                const currentStep = steps.find((step) => !step.completed);
-                const rejected = steps.find((step) => step.rejected);
+				return (
+					<span className="font-medium">
+						{currentStep && !rejected ? `Step ${currentStep.stepNumber}: ${StepTypeLabel[currentStep.stepType]}` : "Completed"}
+					</span>
+				);
+			},
+		}),
+		columnHelper.accessor("steps", {
+			header: "ACTIONS",
+			id: "actions",
+			cell: ({row}) => {
+				const steps = row.original.steps;
+				const currentStep = steps.find((step) => !step.completed);
+				const rejected = steps.find((step) => step.rejected);
 
-                return (
-                    <span className="font-medium">
-                        {currentStep && !rejected
-                            ? `Step ${currentStep.stepNumber}: ${StepTypeLabel[currentStep.stepType]}`
-                            : "Completed"}
-                    </span>
-                );
-            },
-        }),
-        columnHelper.accessor("steps", {
-            header: "ACTIONS",
-            id: "actions",
-            cell: ({ row }) => {
-                const steps = row.original.steps;
-                const currentStep = steps.find((step) => !step.completed);
-                const rejected = steps.find((step) => step.rejected);
+				return (
+					<div className="flex gap-4">
+						<button
+							data-tip="Delete"
+							className="cursor-pointer tooltip"
+							onClick={(e) => {
+								e.stopPropagation();
+								deleteApprovalWorkflow(row.original._id?.toString(), row.original.name);
+							}}>
+							<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+						</button>
 
-                return (
-                    <div className="flex gap-4">
-                        <button
-                            data-tip="Delete"
-                            className="cursor-pointer tooltip"
-                            onClick={(e) => {
-                                e.stopPropagation();
-                                deleteApprovalWorkflow(row.original._id?.toString(), row.original.name);
-                            }}
-                        >
-                            <BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
-                        </button>
+						{currentStep && !rejected && (
+							<Link
+								onClick={(e) => e.stopPropagation()}
+								data-tip="Edit"
+								href={`/approval-workflows/${row.original._id?.toString()}/edit`}
+								className="cursor-pointer tooltip">
+								<FaRegEdit className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+							</Link>
+						)}
+					</div>
+				);
+			},
+		}),
+	];
 
-                        {currentStep && !rejected && (
-                            <Link
-                                onClick={(e) => e.stopPropagation()}
-                                data-tip="Edit"
-                                href={`/approval-workflows/${row.original._id?.toString()}/edit`}
-                                className="cursor-pointer tooltip"
-                            >
-                                <FaRegEdit className="hover:text-mti-purple-light transition ease-in-out duration-300" />
-                            </Link>
-                        )}
-                    </div>
-                );
-            },
-        })
-    ];
+	const table = useReactTable({
+		data: filteredWorkflows,
+		columns: columns,
+		getCoreRowModel: getCoreRowModel(),
+	});
 
-    const table = useReactTable({
-        data: filteredWorkflows,
-        columns: columns,
-        getCoreRowModel: getCoreRowModel(),
-    });
+	return (
+		<>
+			<Head>
+				<title>Approval Workflows Panel | 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 />
+			<h1 className="text-2xl font-semibold">Approval Workflows</h1>
 
-    return (
-        <>
-            <Head>
-                <title>Approval Workflows Panel | 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 />
-            <h1 className="text-2xl font-semibold">Approval Workflows</h1>
+			<div className="flex flex-row">
+				<Link href={"/approval-workflows/create"}>
+					<Button color="purple" variant="solid" className="min-w-fit text-lg font-medium flex items-center gap-2 text-left">
+						<IoIosAddCircleOutline className="size-6" />
+						Configure Workflows
+					</Button>
+				</Link>
+			</div>
 
-            <div className="flex flex-row">
-                <Link href={"/approval-workflows/create"}>
-                    <Button
-                        color="purple"
-                        variant="solid"
-                        className="min-w-fit text-lg font-medium flex items-center gap-2 text-left"
-                    >
-                        <IoIosAddCircleOutline className="size-6" />
-                        Configure Workflows
-                    </Button>
-                </Link>
-            </div>
+			<div className="flex w-full items-center gap-4">
+				<div className="flex w-full flex-col gap-3">
+					<label className="text-mti-gray-dim text-base font-normal">Name</label>
+					<Input name="nameFilter" type="text" value={nameFilter} onChange={handleNameFilterChange} placeholder="Filter by name..." />
+				</div>
+				<div className="flex w-full flex-col gap-3">
+					<label className="text-mti-gray-dim text-base font-normal">Status</label>
+					<Select
+						options={STATUS_OPTIONS}
+						value={STATUS_OPTIONS.find((x) => x.value === statusFilter)}
+						onChange={(value) => setStatusFilter((value?.value as ApprovalWorkflowStatus) ?? undefined)}
+						isClearable
+						placeholder="Filter by status..."
+					/>
+				</div>
+				<div className="flex w-full flex-col gap-3">
+					<label className="text-mti-gray-dim text-base font-normal">Entity</label>
+					<Select
+						options={ENTITY_OPTIONS}
+						value={ENTITY_OPTIONS.find((x) => x.value === entityFilter)}
+						onChange={(value) => setEntityFilter((value?.value as CustomEntity) ?? undefined)}
+						isClearable
+						placeholder="Filter by entity..."
+					/>
+				</div>
+			</div>
 
-            <div className="flex w-full items-center gap-4">
-                <div className="flex w-full flex-col gap-3">
-                    <label className="text-mti-gray-dim text-base font-normal">Name</label>
-                    <Input
-                        name="nameFilter"
-                        type="text"
-                        value={nameFilter}
-                        onChange={handleNameFilterChange}
-                        placeholder="Filter by name..."
-                    />
-                </div>
-                <div className="flex w-full flex-col gap-3">
-                    <label className="text-mti-gray-dim text-base font-normal">Status</label>
-                    <Select
-                        options={STATUS_OPTIONS}
-                        value={STATUS_OPTIONS.find((x) => x.value === statusFilter)}
-                        onChange={(value) => setStatusFilter((value?.value as ApprovalWorkflowStatus) ?? undefined)}
-                        isClearable
-                        placeholder="Filter by status..."
-                    />
-                </div>
-                <div className="flex w-full flex-col gap-3">
-                    <label className="text-mti-gray-dim text-base font-normal">Entity</label>
-                    <Select
-                        options={ENTITY_OPTIONS}
-                        value={ENTITY_OPTIONS.find((x) => x.value === entityFilter)}
-                        onChange={(value) => setEntityFilter((value?.value as CustomEntity) ?? undefined)}
-                        isClearable
-                        placeholder="Filter by entity..."
-                    />
-                </div>
-            </div>
+			<Tip text="An exam submission will instantiate the approval workflow configured for the exam author. The exam will be valid only when all the steps of the workflow have been approved."></Tip>
 
-            <Tip text="An exam submission will instantiate the approval workflow configured for the exam author. The exam will be valid only when all the steps of the workflow have been approved."></Tip>
+			<div className="px-6 pb-4 bg-mti-purple-ultralight rounded-2xl border-2 border-mti-purple-light border-opacity-40">
+				<table className="w-full table-auto border-separate border-spacing-y-2" style={{tableLayout: "auto"}}>
+					<thead>
+						{table.getHeaderGroups().map((headerGroup) => (
+							<tr key={headerGroup.id}>
+								{headerGroup.headers.map((header) => (
+									<th key={header.id} className="px-3 py-2 text-left text-mti-purple-ultradark">
+										{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+									</th>
+								))}
+							</tr>
+						))}
+					</thead>
+					<tbody>
+						{table.getRowModel().rows.map((row) => (
+							<tr
+								key={row.id}
+								onClick={() => (window.location.href = `/approval-workflows/${row.original._id?.toString()}`)}
+								style={{cursor: "pointer"}}
+								className="bg-purple-50">
+								{row.getVisibleCells().map((cell, cellIndex) => {
+									const lastCellIndex = row.getVisibleCells().length - 1;
 
-            <div className="px-6 pb-4 bg-mti-purple-ultralight rounded-2xl border-2 border-mti-purple-light border-opacity-40">
-                <table
-                    className="w-full table-auto border-separate border-spacing-y-2"
-                    style={{ tableLayout: "auto" }}
-                >
-                    <thead>
-                        {table.getHeaderGroups().map((headerGroup) => (
-                            <tr key={headerGroup.id}>
-                                {headerGroup.headers.map((header) => (
-                                    <th key={header.id} className="px-3 py-2 text-left text-mti-purple-ultradark">
-                                        {header.isPlaceholder
-                                            ? null
-                                            : flexRender(
-                                                header.column.columnDef.header,
-                                                header.getContext()
-                                            )}
-                                    </th>
-                                ))}
-                            </tr>
-                        ))}
-                    </thead>
-                    <tbody>
-                        {table.getRowModel().rows.map((row) => (
-                            <tr
-                                key={row.id}
-                                onClick={() => window.location.href = `/approval-workflows/${row.original._id?.toString()}`}
-                                style={{ cursor: "pointer" }}
-                                className="bg-purple-50"
-                            >
-                                {row.getVisibleCells().map((cell, cellIndex) => {
-                                    const lastCellIndex = row.getVisibleCells().length - 1;
+									let cellClasses = "pl-3 pr-4 py-2 border-y-2 border-mti-purple-light border-opacity-60";
+									if (cellIndex === 0) {
+										cellClasses += " border-l-2 rounded-l-2xl";
+									}
+									if (cellIndex === lastCellIndex) {
+										cellClasses += " border-r-2 rounded-r-2xl";
+									}
 
-                                    let cellClasses = "pl-3 pr-4 py-2 border-y-2 border-mti-purple-light border-opacity-60";
-                                    if (cellIndex === 0) {
-                                        cellClasses += " border-l-2 rounded-l-2xl";
-                                    }
-                                    if (cellIndex === lastCellIndex) {
-                                        cellClasses += " border-r-2 rounded-r-2xl";
-                                    }
-
-                                    return (
-                                        <td key={cellIndex} className={cellClasses}>
-                                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                                        </td>
-                                    );
-                                })}
-                            </tr>
-                        ))}
-                    </tbody>
-
-                </table>
-            </div>
-        </>
-    );
+									return (
+										<td key={cellIndex} className={cellClasses}>
+											{flexRender(cell.column.columnDef.cell, cell.getContext())}
+										</td>
+									);
+								})}
+							</tr>
+						))}
+					</tbody>
+				</table>
+			</div>
+		</>
+	);
 }
diff --git a/src/pages/entities/[id]/roles/[role].tsx b/src/pages/entities/[id]/roles/[role].tsx
index 693b4370..2c90f9b9 100644
--- a/src/pages/entities/[id]/roles/[role].tsx
+++ b/src/pages/entities/[id]/roles/[role].tsx
@@ -107,6 +107,13 @@ const ASSIGNMENT_MANAGEMENT: PermissionLayout[] = [
 	{label: "Archive Assignments", key: "archive_assignment"},
 ];
 
+const WORKFLOW_MANAGEMENT: PermissionLayout[] = [
+	{label: "View Workflows", key: "view_workflows"},
+	{label: "Create Workflow", key: "create_workflow"},
+	{label: "Edit Workflow", key: "edit_workflow"},
+	{label: "Delete Workflow", key: "delete_workflow"},
+];
+
 export const getServerSideProps = withIronSessionSsr(async ({req, res, params}) => {
 	const user = await requestUser(req, res);
 	if (!user) return redirect("/login");
@@ -399,6 +406,30 @@ export default function EntityRole({user, entity, role, userCount, disableEdit}:
 								))}
 							</div>
 						</div>
+
+						<div className="flex flex-col gap-4">
+							<div className="w-full flex items-center justify-between">
+								<b>Workflow Management</b>
+								<Checkbox
+									disabled={!canEditPermissions || disableEdit}
+									isChecked={mapBy(WORKFLOW_MANAGEMENT, "key").every((k) => permissions.includes(k))}
+									onChange={() => toggleMultiplePermissions(mapBy(WORKFLOW_MANAGEMENT, "key").filter(enableCheckbox))}>
+									Select all
+								</Checkbox>
+							</div>
+							<Separator />
+							<div className="grid grid-cols-2 gap-4">
+								{WORKFLOW_MANAGEMENT.map(({label, key}) => (
+									<Checkbox
+										disabled={!enableCheckbox(key)}
+										key={key}
+										isChecked={permissions.includes(key)}
+										onChange={() => togglePermissions(key)}>
+										{label}
+									</Checkbox>
+								))}
+							</div>
+						</div>
 					</section>
 				</section>
 			</>
diff --git a/src/resources/entityPermissions.ts b/src/resources/entityPermissions.ts
index cb4212cc..b46ed0d0 100644
--- a/src/resources/entityPermissions.ts
+++ b/src/resources/entityPermissions.ts
@@ -67,7 +67,11 @@ export type RolePermission =
 	| "pay_entity"
 	| "view_payment_record"
 	| "view_approval_workflows"
-	| "update_exam_privacy";
+	| "update_exam_privacy"
+	| "view_workflows"
+	| "create_workflow"
+	| "edit_workflow"
+	| "delete_workflow";
 
 export const DEFAULT_PERMISSIONS: RolePermission[] = [
 	"view_students",
@@ -149,4 +153,8 @@ export const ADMIN_PERMISSIONS: RolePermission[] = [
 	"pay_entity",
 	"view_payment_record",
 	"update_exam_privacy",
+	"create_workflow",
+	"view_workflows",
+	"edit_workflow",
+	"delete_workflow",
 ];

From cf12a4ed4fab5bebe04941af4c4493813f3652cd Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Thu, 6 Feb 2025 19:12:18 +0000
Subject: [PATCH 66/69] implement logging of exam edits on workflow's current
 step

---
 package.json                                |  2 +
 src/interfaces/approval.workflow.ts         |  1 +
 src/pages/api/exam/[module]/index.ts        | 22 +++++-
 src/pages/approval-workflows/[id]/index.tsx | 47 +++++++++++-
 src/utils/approval.workflows.be.ts          | 10 +++
 src/utils/exam.differences.ts               | 84 +++++++++++++++++++++
 yarn.lock                                   | 41 +++++++++-
 7 files changed, 201 insertions(+), 6 deletions(-)
 create mode 100644 src/utils/exam.differences.ts

diff --git a/package.json b/package.json
index b0f35e4c..43102b99 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
 		"country-codes-list": "^1.6.11",
 		"currency-symbol-map": "^5.1.0",
 		"daisyui": "^3.1.5",
+		"deep-diff": "^1.0.2",
 		"eslint": "8.33.0",
 		"eslint-config-next": "13.1.6",
 		"exceljs": "^4.4.0",
@@ -97,6 +98,7 @@
 	"devDependencies": {
 		"@simbathesailor/use-what-changed": "^2.0.0",
 		"@types/blob-stream": "^0.1.33",
+		"@types/deep-diff": "^1.0.5",
 		"@types/formidable": "^3.4.0",
 		"@types/howler": "^2.2.11",
 		"@types/lodash": "^4.14.191",
diff --git a/src/interfaces/approval.workflow.ts b/src/interfaces/approval.workflow.ts
index 84a6567d..38d4c7f5 100644
--- a/src/interfaces/approval.workflow.ts
+++ b/src/interfaces/approval.workflow.ts
@@ -37,6 +37,7 @@ export interface WorkflowStep {
     finalStep?: boolean,
     selected?: boolean,
     comments?: string,
+    examChanges?: string[],
     onClick?: React.MouseEventHandler<HTMLDivElement>
 }
 
diff --git a/src/pages/api/exam/[module]/index.ts b/src/pages/api/exam/[module]/index.ts
index 8c114e14..e78986e9 100644
--- a/src/pages/api/exam/[module]/index.ts
+++ b/src/pages/api/exam/[module]/index.ts
@@ -6,6 +6,8 @@ import client from "@/lib/mongodb";
 import { sessionOptions } from "@/lib/session";
 import { mapBy } from "@/utils";
 import { requestUser } from "@/utils/api";
+import { getApprovalWorkflowsByExamId, updateApprovalWorkflows } from "@/utils/approval.workflows.be";
+import { generateExamDifferences } from "@/utils/exam.differences";
 import { getExams } from "@/utils/exams.be";
 import { isAdmin } from "@/utils/users";
 import { withIronSessionApiRoute } from "iron-session/next";
@@ -108,8 +110,26 @@ async function POST(req: NextApiRequest, res: NextApiResponse) {
 					responseStatus = 207;
 					responseMessage = `Successfully created exam with ID: "${exam.id}" but something went wrong while creating the Approval Workflow(s).`;
 				}
+			} else { // if exam was updated, log the updates
+				const approvalWorkflows = await getApprovalWorkflowsByExamId(exam.id);
+				
+				if (approvalWorkflows) {
+					const differences = generateExamDifferences(docSnap as Exam, exam as Exam);
+					if (differences) {
+						approvalWorkflows.forEach((workflow) => {
+							const currentStepIndex = workflow.steps.findIndex(step => !step.completed || step.rejected);
+		
+							if (workflow.steps[currentStepIndex].examChanges === undefined) {
+								workflow.steps[currentStepIndex].examChanges = [...differences];
+							} else {
+								workflow.steps[currentStepIndex].examChanges!.push(...differences);
+							}
+						});
+						await updateApprovalWorkflows("active-workflows", approvalWorkflows);
+					}
+				}
 			}
-
+			
 			res.status(responseStatus).json({
 				message: responseMessage,
 			});
diff --git a/src/pages/approval-workflows/[id]/index.tsx b/src/pages/approval-workflows/[id]/index.tsx
index b9087217..2e7f6402 100644
--- a/src/pages/approval-workflows/[id]/index.tsx
+++ b/src/pages/approval-workflows/[id]/index.tsx
@@ -29,7 +29,7 @@ import { FaSpinner, FaWpforms } from "react-icons/fa6";
 import { FiSave } from "react-icons/fi";
 import { IoMdCheckmarkCircleOutline } from "react-icons/io";
 import { IoDocumentTextOutline } from "react-icons/io5";
-import { MdOutlineDoubleArrow } from "react-icons/md";
+import { MdKeyboardArrowDown, MdKeyboardArrowUp, MdOutlineDoubleArrow } from "react-icons/md";
 import { RiThumbUpLine } from "react-icons/ri";
 import { RxCrossCircled } from "react-icons/rx";
 import { TiEdit } from "react-icons/ti";
@@ -89,6 +89,7 @@ export default function Home({ user, initialWorkflow, id, workflowAssignees, wor
     const [selectedStepIndex, setSelectedStepIndex] = useState<number>(currentStepIndex);
     const [selectedStep, setSelectedStep] = useState<WorkflowStep>(currentWorkflow.steps[selectedStepIndex]);
     const [isPanelOpen, setIsPanelOpen] = useState(true);
+    const [isAccordionOpen, setIsAccordionOpen] = useState(false);
     const [comments, setComments] = useState<string>(selectedStep.comments || "");
     const [viewExamIsLoading, setViewExamIsLoading] = useState<boolean>(false);
     const [editExamIsLoading, setEditExamIsLoading] = useState<boolean>(false);
@@ -517,11 +518,53 @@ export default function Home({ user, initialWorkflow, id, workflowAssignees, wor
 
                                     <hr className="my-4 h-[4px] bg-mti-purple-ultralight rounded-full w-full" />
 
+                                    {/* Accordion for Exam Changes */}
+                                    <div className="mb-4">
+                                        <div
+                                            className="flex items-center justify-between cursor-pointer p-2 rounded-lg"
+                                            onClick={() => setIsAccordionOpen((prev) => !prev)}
+                                        >
+                                            <h2 className="font-medium text-gray-500">
+                                                Changes ({currentWorkflow.steps[selectedStepIndex].examChanges?.length || "0"})
+                                            </h2>
+                                            {isAccordionOpen ? (
+                                                <MdKeyboardArrowUp size={24} />
+                                            ) : (
+                                                <MdKeyboardArrowDown size={24} />
+                                            )}
+                                        </div>
+                                        <AnimatePresence>
+                                            {isAccordionOpen && (
+                                                <motion.div
+                                                    initial={{ height: 0, opacity: 0 }}
+                                                    animate={{ height: "auto", opacity: 1 }}
+                                                    exit={{ height: 0, opacity: 0 }}
+                                                    transition={{ duration: 0.3 }}
+                                                    className="overflow-hidden mt-2"
+                                                >
+                                                    <div className="p-3 border border-gray-300 rounded-xl bg-white bg-opacity-80 overflow-y-auto max-h-40">
+                                                        {currentWorkflow.steps[selectedStepIndex].examChanges?.length ? (
+                                                            currentWorkflow.steps[selectedStepIndex].examChanges!.map((change, index) => (
+                                                                <p key={index} className="text-sm text-gray-500 mb-2">
+                                                                    {change}
+                                                                </p>
+                                                            ))
+                                                        ) : (
+                                                            <p className="text-normal text-opacity-70 text-gray-500">No changes made so far.</p>
+                                                        )}
+                                                    </div>
+                                                </motion.div>
+                                            )}
+                                        </AnimatePresence>
+                                    </div>
+
+                                    <hr className="my-4 h-[4px] bg-mti-purple-ultralight rounded-full w-full" />
+
                                     <textarea
                                         value={comments}
                                         onChange={(e) => setComments(e.target.value)}
                                         placeholder="Input comments here"
-                                        className="w-full h-64 p-2 border-2 rounded-xl shadow-lg focus:border-mti-purple focus:outline-none mt-3 resize-none"
+                                        className="w-full h-40 p-2 border-2 rounded-xl shadow-lg focus:border-mti-purple focus:outline-none mt-3 resize-none"
                                     />
 
                                     <Button
diff --git a/src/utils/approval.workflows.be.ts b/src/utils/approval.workflows.be.ts
index baf02bfd..8b610b54 100644
--- a/src/utils/approval.workflows.be.ts
+++ b/src/utils/approval.workflows.be.ts
@@ -34,6 +34,16 @@ export const getApprovalWorkflowByFormIntaker = async (entityId: string, formInt
     });
 };
 
+export const getApprovalWorkflowsByExamId = async (examId: string) => {
+    return await db
+        .collection<ApprovalWorkflow>("active-workflows")
+        .find({ 
+            examId, 
+            status: { $in: ["pending"] }
+        })
+        .toArray();
+};
+
 export const getFormIntakersByEntity = async (entityId: string) => {
     const results = await db
         .collection<ApprovalWorkflow>("configured-workflows")
diff --git a/src/utils/exam.differences.ts b/src/utils/exam.differences.ts
new file mode 100644
index 00000000..ed78bac4
--- /dev/null
+++ b/src/utils/exam.differences.ts
@@ -0,0 +1,84 @@
+import { Exam } from "@/interfaces/exam";
+import { diff, Diff } from "deep-diff";
+
+const EXCLUDED_FIELDS = new Set(["_id", "id", "createdAt", "createdBy", "entities", "isDiagnostic", "private"]);
+
+export function generateExamDifferences(oldExam: Exam, newExam: Exam): string[] {
+    const differences = diff(oldExam, newExam) || [];
+    return differences.map((change) => formatDifference(change)).filter(Boolean) as string[];
+}
+
+function formatDifference(change: Diff<any, any>): string | undefined {
+    if (!change.path) {
+        return;
+    }
+
+    if (change.path.some((segment) => EXCLUDED_FIELDS.has(segment))) {
+        return;
+    }
+
+    // Convert path array to something human-readable
+    const pathString = change.path.join(" \u2192 "); // e.g. "parts → 0 → exercises → 1 → prompt"
+
+    switch (change.kind) {
+        case "N":
+            // A new property/element was added
+            return `\u{2022} Added \`${pathString}\` with value: ${formatValue(change.rhs)}`;
+
+        case "D":
+            // A property/element was deleted
+            return `\u{2022} Removed \`${pathString}\` which had value: ${formatValue(change.lhs)}`;
+
+        case "E":
+            // A property/element was edited
+            return `\u{2022} Changed \`${pathString}\` from ${formatValue(change.lhs)} to ${formatValue(change.rhs)}`;
+
+        case "A":
+            // An array change; change.item describes what happened at array index change.index
+            return formatArrayChange(change);
+
+        default:
+            return;
+    }
+}
+
+function formatArrayChange(change: Diff<any, any>): string | undefined {
+    if (!change.path) return;
+    if (change.path.some((segment) => EXCLUDED_FIELDS.has(segment))) {
+        return;
+    }
+    
+    const pathString = change.path.join(" \u2192 ");
+
+    const arrayChange = (change as any).item;
+    const idx = (change as any).index;
+
+    if (!arrayChange) return;
+
+    switch (arrayChange.kind) {
+        case "N":
+            return `\u{2022} Added an item at index [${idx}] in \`${pathString}\`: ${formatValue(arrayChange.rhs)}`;
+        case "D":
+            return `\u{2022} Removed an item at index [${idx}] in \`${pathString}\`: ${formatValue(arrayChange.lhs)}`;
+        case "E":
+            return `\u{2022} Edited an item at index [${idx}] in \`${pathString}\` from ${formatValue(arrayChange.lhs)} to ${formatValue(arrayChange.rhs)}`;
+        case "A":
+            // Nested array changes could happen theoretically; handle or ignore similarly
+            return `\u{2022} Complex array change at index [${idx}] in \`${pathString}\`: ${JSON.stringify(arrayChange)}`;
+        default:
+            return;
+    }
+}
+
+function formatValue(value: any): string {
+    if (value === null) return "null";
+    if (value === undefined) return "undefined";
+    if (typeof value === "object") {
+        try {
+            return JSON.stringify(value);
+        } catch {
+            return String(value);
+        }
+    }
+    return JSON.stringify(value);
+}
diff --git a/yarn.lock b/yarn.lock
index 3ecc6e43..61e1bc16 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1683,6 +1683,11 @@
   resolved "https://registry.yarnpkg.com/@types/debounce/-/debounce-1.2.4.tgz#cb7e85d9ad5ababfac2f27183e8ac8b576b2abb3"
   integrity sha512-jBqiORIzKDOToaF63Fm//haOCHuwQuLa2202RK4MozpA6lh93eCBc+/8+wZn5OzjJt3ySdc+74SXWXB55Ewtyw==
 
+"@types/deep-diff@^1.0.5":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@types/deep-diff/-/deep-diff-1.0.5.tgz#95c08a57f097ffadd28bc98a45a8025f53c581e4"
+  integrity sha512-PQyNSy1YMZU1hgZA5tTYfHPpUAo9Dorn1PZho2/budQLfqLu3JIP37JAavnwYpR1S2yFZTXa3hxaE4ifGW5jaA==
+
 "@types/express-handlebars@^5":
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/@types/express-handlebars/-/express-handlebars-5.3.1.tgz#30447330fa4b7d19bb953834c7c26077a906e25e"
@@ -3035,6 +3040,11 @@ decamelize@^1.2.0:
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
   integrity sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==
 
+deep-diff@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/deep-diff/-/deep-diff-1.0.2.tgz#afd3d1f749115be965e89c63edc7abb1506b9c26"
+  integrity sha512-aWS3UIVH+NPGCD1kki+DCU9Dua032iSsO43LqQpcs4R3+dVv7tX0qBGjiVHJHjplsoUM2XRO/KB92glqc68awg==
+
 deep-is@^0.1.3, deep-is@~0.1.3:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
@@ -6563,7 +6573,16 @@ streamsearch@^1.1.0:
   resolved "https://registry.yarnpkg.com/streamsearch/-/streamsearch-1.1.0.tgz#404dd1e2247ca94af554e841a8ef0eaa238da764"
   integrity sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==
 
-"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -6658,7 +6677,14 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -7295,7 +7321,7 @@ wordwrap@^1.0.0:
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -7313,6 +7339,15 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"

From bf2aa29b983a38377cd3682880bd644f4e59c407 Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Thu, 6 Feb 2025 23:26:21 +0000
Subject: [PATCH 67/69] implement workflow permissions

---
 src/pages/api/approval-workflows/[id]/edit.ts |   2 +-
 .../api/approval-workflows/[id]/index.ts      |  22 ++-
 src/pages/api/approval-workflows/create.ts    |   2 +-
 src/pages/api/approval-workflows/index.ts     |   4 +-
 src/pages/approval-workflows/[id]/edit.tsx    |  11 +-
 src/pages/approval-workflows/create.tsx       |  13 +-
 src/pages/approval-workflows/index.tsx        | 139 ++++++++++--------
 src/pages/entities/[id]/roles/[role].tsx      |   2 +-
 src/resources/entityPermissions.ts            |   5 +-
 9 files changed, 117 insertions(+), 83 deletions(-)

diff --git a/src/pages/api/approval-workflows/[id]/edit.ts b/src/pages/api/approval-workflows/[id]/edit.ts
index a547f0cf..e675addb 100644
--- a/src/pages/api/approval-workflows/[id]/edit.ts
+++ b/src/pages/api/approval-workflows/[id]/edit.ts
@@ -17,7 +17,7 @@ async function put(req: NextApiRequest, res: NextApiResponse) {
     const user = await requestUser(req, res);
     if (!user) return res.status(401).json({ ok: false });
 
-    if (!["admin", "developer", "corporate", "mastercorporate"].includes(user.type)) {
+    if (!["admin", "developer", "teacher", "corporate", "mastercorporate"].includes(user.type)) {
         return res.status(403).json({ ok: false });
     }
 
diff --git a/src/pages/api/approval-workflows/[id]/index.ts b/src/pages/api/approval-workflows/[id]/index.ts
index c50026c0..d6832587 100644
--- a/src/pages/api/approval-workflows/[id]/index.ts
+++ b/src/pages/api/approval-workflows/[id]/index.ts
@@ -3,6 +3,8 @@ import { ApprovalWorkflow } from "@/interfaces/approval.workflow";
 import { sessionOptions } from "@/lib/session";
 import { requestUser } from "@/utils/api";
 import { deleteApprovalWorkflow, getApprovalWorkflow, updateApprovalWorkflow } from "@/utils/approval.workflows.be";
+import { getEntityWithRoles } from "@/utils/entities.be";
+import { doesEntityAllow } from "@/utils/permissions";
 import { withIronSessionApiRoute } from "iron-session/next";
 import { ObjectId } from "mongodb";
 import type { NextApiRequest, NextApiResponse } from "next";
@@ -19,20 +21,30 @@ async function del(req: NextApiRequest, res: NextApiResponse) {
     const user = await requestUser(req, res);
     if (!user) return res.status(401).json({ ok: false });
 
-    if (!["admin", "developer", "corporate", "mastercorporate"].includes(user.type)) {
+    if (!["admin", "developer", "teacher", "corporate", "mastercorporate"].includes(user.type)) {
         return res.status(403).json({ ok: false });
     }
 
-    const { id } = req.query as { id?: string };
+    const { id } = req.query as { id: string };
+    const workflow = await getApprovalWorkflow("active-workflows", id);
 
-    if (id) return res.status(200).json(await deleteApprovalWorkflow("active-workflows", id));
+    if (!workflow) return res.status(404).json({ ok: false });
+
+    const entity = await getEntityWithRoles(workflow.entityId);
+    if (!entity) return res.status(404).json({ ok: false });
+
+    if (!doesEntityAllow(user, entity, "delete_workflow") && !["admin", "developer"].includes(user.type)) {
+        return res.status(403).json({ ok: false });
+    }
+
+    return res.status(200).json(await deleteApprovalWorkflow("active-workflows", id));
 }
 
 async function put(req: NextApiRequest, res: NextApiResponse) {
     const user = await requestUser(req, res);
     if (!user) return res.status(401).json({ ok: false });
 
-    if (!["admin", "developer", "corporate", "mastercorporate"].includes(user.type)) {
+    if (!["admin", "developer", "teacher", "corporate", "mastercorporate"].includes(user.type)) {
         return res.status(403).json({ ok: false });
     }
 
@@ -50,7 +62,7 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
     const user = await requestUser(req, res);
     if (!user) return res.status(401).json({ ok: false });
 
-    if (!["admin", "developer", "corporate", "mastercorporate"].includes(user.type)) {
+    if (!["admin", "developer", "teacher", "corporate", "mastercorporate"].includes(user.type)) {
         return res.status(403).json({ ok: false });
     }
 
diff --git a/src/pages/api/approval-workflows/create.ts b/src/pages/api/approval-workflows/create.ts
index 96889899..aa88f9348 100644
--- a/src/pages/api/approval-workflows/create.ts
+++ b/src/pages/api/approval-workflows/create.ts
@@ -22,7 +22,7 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
     const user = await requestUser(req, res);
     if (!user) return res.status(401).json({ ok: false });
 
-    if (!["admin", "developer", "corporate", "mastercorporate"].includes(user.type)) {
+    if (!["admin", "developer", "teacher", "corporate", "mastercorporate"].includes(user.type)) {
         return res.status(403).json({ ok: false });
     }
 
diff --git a/src/pages/api/approval-workflows/index.ts b/src/pages/api/approval-workflows/index.ts
index 26636186..874f0ab0 100644
--- a/src/pages/api/approval-workflows/index.ts
+++ b/src/pages/api/approval-workflows/index.ts
@@ -25,7 +25,7 @@ async function get(req: NextApiRequest, res: NextApiResponse) {
     const user = await requestUser(req, res);
     if (!user) return res.status(401).json({ ok: false });
 
-    if (!["admin", "developer", "corporate", "mastercorporate"].includes(user.type)) {
+    if (!["admin", "developer", "teacher", "corporate", "mastercorporate"].includes(user.type)) {
         return res.status(403).json({ ok: false });
     }
 
@@ -36,7 +36,7 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
     const user = await requestUser(req, res);
     if (!user) return res.status(401).json({ ok: false });
 
-    if (!["admin", "developer", "corporate", "mastercorporate"].includes(user.type)) {
+    if (!["admin", "developer", "teacher", "corporate", "mastercorporate"].includes(user.type)) {
         return res.status(403).json({ ok: false });
     }
 
diff --git a/src/pages/approval-workflows/[id]/edit.tsx b/src/pages/approval-workflows/[id]/edit.tsx
index 7a026bff..aec4fd1f 100644
--- a/src/pages/approval-workflows/[id]/edit.tsx
+++ b/src/pages/approval-workflows/[id]/edit.tsx
@@ -6,10 +6,12 @@ import Layout from "@/components/High/Layout";
 import { ApprovalWorkflow, EditableApprovalWorkflow, EditableWorkflowStep, getUserTypeLabelShort } from "@/interfaces/approval.workflow";
 import { CorporateUser, DeveloperUser, MasterCorporateUser, TeacherUser, User } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
-import { redirect, serialize } from "@/utils";
+import { findBy, redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
 import { getApprovalWorkflow } from "@/utils/approval.workflows.be";
+import { getEntityWithRoles } from "@/utils/entities.be";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
+import { doesEntityAllow } from "@/utils/permissions";
 import { getEntityUsers } from "@/utils/users.be";
 import axios from "axios";
 import { LayoutGroup, motion } from "framer-motion";
@@ -30,9 +32,12 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
     const { id } = params as { id: string };
 
     const workflow: ApprovalWorkflow | null = await getApprovalWorkflow("active-workflows", id);
+    if (!workflow) return redirect("/approval-workflows");
 
-    if (!workflow)
-        return redirect("/approval-workflows")
+    const entityWithRole = await getEntityWithRoles(workflow.entityId);
+    if (!entityWithRole) return redirect("/approval-workflows");
+
+    if (!doesEntityAllow(user, entityWithRole, "edit_workflow")) return redirect("/approval-workflows");
 
     return {
         props: serialize({
diff --git a/src/pages/approval-workflows/create.tsx b/src/pages/approval-workflows/create.tsx
index b61d6e24..41a9d7dd 100644
--- a/src/pages/approval-workflows/create.tsx
+++ b/src/pages/approval-workflows/create.tsx
@@ -1,6 +1,5 @@
 import Tip from "@/components/ApprovalWorkflows/Tip";
 import WorkflowForm from "@/components/ApprovalWorkflows/WorkflowForm";
-import Layout from "@/components/High/Layout";
 import Button from "@/components/Low/Button";
 import Input from "@/components/Low/Input";
 import Select from "@/components/Low/Select";
@@ -8,11 +7,13 @@ import { ApprovalWorkflow, EditableApprovalWorkflow } from "@/interfaces/approva
 import { Entity } from "@/interfaces/entity";
 import { CorporateUser, DeveloperUser, MasterCorporateUser, TeacherUser, User } from "@/interfaces/user";
 import { sessionOptions } from "@/lib/session";
-import { redirect, serialize } from "@/utils";
+import { mapBy, redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
 import { getApprovalWorkflowsByEntities } from "@/utils/approval.workflows.be";
-import { getEntities } from "@/utils/entities.be";
+import { getEntitiesWithRoles } from "@/utils/entities.be";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
+import { findAllowedEntities } from "@/utils/permissions";
+import { isAdmin } from "@/utils/users";
 import { getEntitiesUsers } from "@/utils/users.be";
 import axios from "axios";
 import { AnimatePresence, LayoutGroup, motion } from "framer-motion";
@@ -31,10 +32,12 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
     const user = await requestUser(req, res)
     if (!user) return redirect("/login")
 
-    if (shouldRedirectHome(user) || !["admin", "developer", "corporate", "mastercorporate"].includes(user.type))
+    if (shouldRedirectHome(user) || !["admin", "developer", "teacher", "corporate", "mastercorporate"].includes(user.type))
         return redirect("/")
 
-    const userEntitiesWithLabel = await getEntities(user.entities.map(entity => entity.id));
+    const entityIDS = mapBy(user.entities, "id");
+    const entities = await getEntitiesWithRoles(isAdmin(user) ? undefined : entityIDS);
+    const userEntitiesWithLabel = findAllowedEntities(user, entities, "configure_workflows");
 
     const allConfiguredWorkflows = await getApprovalWorkflowsByEntities("configured-workflows", userEntitiesWithLabel.map(entity => entity.id));
 
diff --git a/src/pages/approval-workflows/index.tsx b/src/pages/approval-workflows/index.tsx
index 84b65c1c..a33d2967 100644
--- a/src/pages/approval-workflows/index.tsx
+++ b/src/pages/approval-workflows/index.tsx
@@ -4,57 +4,34 @@ import Button from "@/components/Low/Button";
 import Input from "@/components/Low/Input";
 import Select from "@/components/Low/Select";
 import useApprovalWorkflows from "@/hooks/useApprovalWorkflows";
-import {useAllowedEntities, useAllowedEntitiesSomePermissions, useEntityPermission} from "@/hooks/useEntityPermissions";
-import {Module, ModuleTypeLabels} from "@/interfaces";
-import {ApprovalWorkflow, ApprovalWorkflowStatus, ApprovalWorkflowStatusLabel, StepTypeLabel} from "@/interfaces/approval.workflow";
-import {Entity, EntityWithRoles} from "@/interfaces/entity";
-import {User} from "@/interfaces/user";
-import {sessionOptions} from "@/lib/session";
-import {redirect, serialize} from "@/utils";
-import {requestUser} from "@/utils/api";
-import {getApprovalWorkflows} from "@/utils/approval.workflows.be";
-import {getEntities, getEntitiesWithRoles} from "@/utils/entities.be";
-import {shouldRedirectHome} from "@/utils/navigation.disabled";
-import {findAllowedEntities} from "@/utils/permissions";
-import {getSpecificUsers} from "@/utils/users.be";
-import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
+import { useAllowedEntities, useAllowedEntitiesSomePermissions, useEntityPermission } from "@/hooks/useEntityPermissions";
+import { Module, ModuleTypeLabels } from "@/interfaces";
+import { ApprovalWorkflow, ApprovalWorkflowStatus, ApprovalWorkflowStatusLabel, StepTypeLabel } from "@/interfaces/approval.workflow";
+import { Entity, EntityWithRoles } from "@/interfaces/entity";
+import { User } from "@/interfaces/user";
+import { sessionOptions } from "@/lib/session";
+import { mapBy, redirect, serialize } from "@/utils";
+import { requestUser } from "@/utils/api";
+import { getApprovalWorkflows } from "@/utils/approval.workflows.be";
+import { getEntities, getEntitiesWithRoles } from "@/utils/entities.be";
+import { shouldRedirectHome } from "@/utils/navigation.disabled";
+import { doesEntityAllow, findAllowedEntities } from "@/utils/permissions";
+import { isAdmin } from "@/utils/users";
+import { getSpecificUsers } from "@/utils/users.be";
+import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
 import axios from "axios";
 import clsx from "clsx";
-import {withIronSessionSsr} from "iron-session/next";
+import { withIronSessionSsr } from "iron-session/next";
 import Head from "next/head";
 import Link from "next/link";
-import {useEffect, useState} from "react";
-import {BsTrash} from "react-icons/bs";
-import {FaRegEdit} from "react-icons/fa";
-import {IoIosAddCircleOutline} from "react-icons/io";
-import {toast, ToastContainer} from "react-toastify";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import { BsTrash } from "react-icons/bs";
+import { FaRegEdit } from "react-icons/fa";
+import { IoIosAddCircleOutline } from "react-icons/io";
+import { toast, ToastContainer } from "react-toastify";
 
-const columnHelper = createColumnHelper<ApprovalWorkflow>();
-
-export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
-	const user = await requestUser(req, res);
-	if (!user) return redirect("/login");
-
-	if (shouldRedirectHome(user) || !["admin", "developer", "teacher", "corporate", "mastercorporate"].includes(user.type)) return redirect("/");
-
-	const workflows = await getApprovalWorkflows("active-workflows");
-
-	const allAssigneeIds: string[] = [...new Set(workflows.map((workflow) => workflow.steps.map((step) => step.assignees).flat()).flat())];
-
-	const entities = await getEntitiesWithRoles(user.entities.map((entity) => entity.id));
-	const allowedEntities = findAllowedEntities(user, entities, "view_workflows");
-
-	return {
-		props: serialize({
-			user,
-			initialWorkflows: workflows,
-			workflowsAssignees: await getSpecificUsers(allAssigneeIds),
-			userEntitiesWithLabel: entities,
-		}),
-	};
-}, sessionOptions);
-
-const StatusClassNames: {[key in ApprovalWorkflowStatus]: string} = {
+const StatusClassNames: { [key in ApprovalWorkflowStatus]: string } = {
 	approved:
 		"bg-green-100 text-green-800 border border-green-300 before:content-[''] before:w-2 before:h-2 before:bg-green-500 before:rounded-full before:inline-block before:mr-2",
 	pending:
@@ -84,6 +61,40 @@ const STATUS_OPTIONS = [
 	},
 ];
 
+const columnHelper = createColumnHelper<ApprovalWorkflow>();
+
+export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
+	const user = await requestUser(req, res);
+	if (!user) return redirect("/login");
+
+	if (shouldRedirectHome(user) || !["admin", "developer", "teacher", "corporate", "mastercorporate"].includes(user.type)) return redirect("/");
+
+	const workflows = await getApprovalWorkflows("active-workflows");
+
+	const allAssigneeIds: string[] = [
+		...new Set(
+			workflows
+				.map(workflow => workflow.steps
+					.map(step => step.assignees)
+					.flat()
+				).flat()
+		)
+	];
+
+	const entityIDS = mapBy(user.entities, "id");
+	const entities = await getEntitiesWithRoles(isAdmin(user) ? undefined : entityIDS);
+	const allowedEntities = findAllowedEntities(user, entities, "view_workflows");
+
+	return {
+		props: serialize({
+			user,
+			initialWorkflows: workflows,
+			workflowsAssignees: await getSpecificUsers(allAssigneeIds),
+			userEntitiesWithLabel: allowedEntities,
+		}),
+	};
+}, sessionOptions);
+
 interface Props {
 	user: User;
 	initialWorkflows: ApprovalWorkflow[];
@@ -91,8 +102,8 @@ interface Props {
 	userEntitiesWithLabel: EntityWithRoles[];
 }
 
-export default function ApprovalWorkflows({user, initialWorkflows, workflowsAssignees, userEntitiesWithLabel}: Props) {
-	const {workflows, reload} = useApprovalWorkflows();
+export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAssignees, userEntitiesWithLabel }: Props) {
+	const { workflows, reload } = useApprovalWorkflows();
 	const currentWorkflows = workflows || initialWorkflows;
 
 	const [filteredWorkflows, setFilteredWorkflows] = useState<ApprovalWorkflow[]>([]);
@@ -101,8 +112,10 @@ export default function ApprovalWorkflows({user, initialWorkflows, workflowsAssi
 	const [entityFilter, setEntityFilter] = useState<CustomEntity>(undefined);
 	const [nameFilter, setNameFilter] = useState<string>("");
 
-	const allowedEntities = useAllowedEntities(user, userEntitiesWithLabel, "view_workflows");
-	const allowedSomeEntities = useAllowedEntitiesSomePermissions(user, userEntitiesWithLabel, ["view_workflows", "create_workflow"]);
+	const router = useRouter();
+
+	/* const allowedEntities = useAllowedEntities(user, userEntitiesWithLabel, "view_workflows");
+	const allowedSomeEntities = useAllowedEntitiesSomePermissions(user, userEntitiesWithLabel, ["view_workflows", "create_workflow"]); */
 
 	const ENTITY_OPTIONS = [
 		...userEntitiesWithLabel
@@ -157,10 +170,8 @@ export default function ApprovalWorkflows({user, initialWorkflows, workflowsAssi
 				reload();
 			})
 			.catch((reason) => {
-				if (reason.response.status === 404) {
-					toast.error("Approval Workflow not found!");
-				} else if (reason.response.status === 403) {
-					toast.error("You do not have permission to delete an Approval Workflow!");
+				if (reason.response.status === 403) {
+					toast.error("You do not have permission to delete this Approval Workflow!");
 				} else {
 					toast.error("Something went wrong, please try again later.");
 				}
@@ -249,7 +260,7 @@ export default function ApprovalWorkflows({user, initialWorkflows, workflowsAssi
 		columnHelper.accessor("steps", {
 			header: "ACTIONS",
 			id: "actions",
-			cell: ({row}) => {
+			cell: ({ row }) => {
 				const steps = row.original.steps;
 				const currentStep = steps.find((step) => !step.completed);
 				const rejected = steps.find((step) => step.rejected);
@@ -259,6 +270,7 @@ export default function ApprovalWorkflows({user, initialWorkflows, workflowsAssi
 						<button
 							data-tip="Delete"
 							className="cursor-pointer tooltip"
+							disabled={!doesEntityAllow(user, userEntitiesWithLabel.find(entity => entity.id === row.original.entityId)!, "delete_workflow")}
 							onClick={(e) => {
 								e.stopPropagation();
 								deleteApprovalWorkflow(row.original._id?.toString(), row.original.name);
@@ -267,13 +279,16 @@ export default function ApprovalWorkflows({user, initialWorkflows, workflowsAssi
 						</button>
 
 						{currentStep && !rejected && (
-							<Link
-								onClick={(e) => e.stopPropagation()}
+							<button
 								data-tip="Edit"
-								href={`/approval-workflows/${row.original._id?.toString()}/edit`}
-								className="cursor-pointer tooltip">
+								className="cursor-pointer tooltip"
+								disabled={!doesEntityAllow(user, userEntitiesWithLabel.find(entity => entity.id === row.original.entityId)!, "edit_workflow")}
+								onClick={(e) => {
+									e.stopPropagation();
+									router.push(`/approval-workflows/${row.original._id?.toString()}/edit`);
+								}}>
 								<FaRegEdit className="hover:text-mti-purple-light transition ease-in-out duration-300" />
-							</Link>
+							</button>
 						)}
 					</div>
 				);
@@ -340,7 +355,7 @@ export default function ApprovalWorkflows({user, initialWorkflows, workflowsAssi
 			<Tip text="An exam submission will instantiate the approval workflow configured for the exam author. The exam will be valid only when all the steps of the workflow have been approved."></Tip>
 
 			<div className="px-6 pb-4 bg-mti-purple-ultralight rounded-2xl border-2 border-mti-purple-light border-opacity-40">
-				<table className="w-full table-auto border-separate border-spacing-y-2" style={{tableLayout: "auto"}}>
+				<table className="w-full table-auto border-separate border-spacing-y-2" style={{ tableLayout: "auto" }}>
 					<thead>
 						{table.getHeaderGroups().map((headerGroup) => (
 							<tr key={headerGroup.id}>
@@ -357,7 +372,7 @@ export default function ApprovalWorkflows({user, initialWorkflows, workflowsAssi
 							<tr
 								key={row.id}
 								onClick={() => (window.location.href = `/approval-workflows/${row.original._id?.toString()}`)}
-								style={{cursor: "pointer"}}
+								style={{ cursor: "pointer" }}
 								className="bg-purple-50">
 								{row.getVisibleCells().map((cell, cellIndex) => {
 									const lastCellIndex = row.getVisibleCells().length - 1;
diff --git a/src/pages/entities/[id]/roles/[role].tsx b/src/pages/entities/[id]/roles/[role].tsx
index 2c90f9b9..2d344e18 100644
--- a/src/pages/entities/[id]/roles/[role].tsx
+++ b/src/pages/entities/[id]/roles/[role].tsx
@@ -109,7 +109,7 @@ const ASSIGNMENT_MANAGEMENT: PermissionLayout[] = [
 
 const WORKFLOW_MANAGEMENT: PermissionLayout[] = [
 	{label: "View Workflows", key: "view_workflows"},
-	{label: "Create Workflow", key: "create_workflow"},
+	{label: "Configure Workflows", key: "configure_workflows"},
 	{label: "Edit Workflow", key: "edit_workflow"},
 	{label: "Delete Workflow", key: "delete_workflow"},
 ];
diff --git a/src/resources/entityPermissions.ts b/src/resources/entityPermissions.ts
index b46ed0d0..5691967a 100644
--- a/src/resources/entityPermissions.ts
+++ b/src/resources/entityPermissions.ts
@@ -69,7 +69,7 @@ export type RolePermission =
 	| "view_approval_workflows"
 	| "update_exam_privacy"
 	| "view_workflows"
-	| "create_workflow"
+	| "configure_workflows"
 	| "edit_workflow"
 	| "delete_workflow";
 
@@ -81,7 +81,6 @@ export const DEFAULT_PERMISSIONS: RolePermission[] = [
 	"view_entity_roles",
 	"view_statistics",
 	"download_statistics_report",
-	"view_approval_workflows",
 ];
 
 export const ADMIN_PERMISSIONS: RolePermission[] = [
@@ -153,7 +152,7 @@ export const ADMIN_PERMISSIONS: RolePermission[] = [
 	"pay_entity",
 	"view_payment_record",
 	"update_exam_privacy",
-	"create_workflow",
+	"configure_workflows",
 	"view_workflows",
 	"edit_workflow",
 	"delete_workflow",

From 00d2a7c2ad305bf2ac5aba60939a6890c693705b Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Fri, 7 Feb 2025 12:57:26 +0000
Subject: [PATCH 68/69] forgot permissions on [id] view

---
 src/pages/approval-workflows/[id]/index.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/pages/approval-workflows/[id]/index.tsx b/src/pages/approval-workflows/[id]/index.tsx
index b9087217..cd051cbe 100644
--- a/src/pages/approval-workflows/[id]/index.tsx
+++ b/src/pages/approval-workflows/[id]/index.tsx
@@ -14,8 +14,10 @@ import useExamStore from "@/stores/exam";
 import { redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
 import { getApprovalWorkflow } from "@/utils/approval.workflows.be";
+import { getEntityWithRoles } from "@/utils/entities.be";
 import { getExamById } from "@/utils/exams";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
+import { doesEntityAllow } from "@/utils/permissions";
 import { getSpecificUsers, getUser } from "@/utils/users.be";
 import axios from "axios";
 import { AnimatePresence, LayoutGroup, motion } from "framer-motion";
@@ -46,8 +48,12 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
 
     const workflow: ApprovalWorkflow | null = await getApprovalWorkflow("active-workflows", id);
 
-    if (!workflow)
-        return redirect("/approval-workflows")
+    if (!workflow) return redirect("/approval-workflows")
+
+    const entityWithRole = await getEntityWithRoles(workflow.entityId);
+    if (!entityWithRole) return redirect("/approval-workflows");
+
+    if (!doesEntityAllow(user, entityWithRole, "view_workflows")) return redirect("/approval-workflows");
 
     const allAssigneeIds: string[] = [
         ...new Set(

From f95bce6fa2bed4229f43fa4571b014b356a0b47b Mon Sep 17 00:00:00 2001
From: Tiago Ribeiro <tiago.ribeiro@ecrop.dev>
Date: Fri, 7 Feb 2025 16:19:47 +0000
Subject: [PATCH 69/69] Did some fixes related to master corporates

---
 src/pages/(admin)/UserCreator.tsx       | 463 ++++++++++++------------
 src/pages/dashboard/mastercorporate.tsx | 435 ++++++++++------------
 src/pages/settings.tsx                  | 423 +++++++++-------------
 3 files changed, 600 insertions(+), 721 deletions(-)

diff --git a/src/pages/(admin)/UserCreator.tsx b/src/pages/(admin)/UserCreator.tsx
index 7d758a0d..41c23d2c 100644
--- a/src/pages/(admin)/UserCreator.tsx
+++ b/src/pages/(admin)/UserCreator.tsx
@@ -1,273 +1,272 @@
 import Button from "@/components/Low/Button";
 import Checkbox from "@/components/Low/Checkbox";
-import { PERMISSIONS } from "@/constants/userPermissions";
-import { CorporateUser, TeacherUser, Type, User } from "@/interfaces/user";
-import { USER_TYPE_LABELS } from "@/resources/user";
+import {PERMISSIONS} from "@/constants/userPermissions";
+import {CorporateUser, TeacherUser, Type, User} from "@/interfaces/user";
+import {USER_TYPE_LABELS} from "@/resources/user";
 import axios from "axios";
 import clsx from "clsx";
-import { capitalize, uniqBy } from "lodash";
+import {capitalize, uniqBy} from "lodash";
 import moment from "moment";
-import { useEffect, useState } from "react";
+import {useEffect, useState} from "react";
 import ReactDatePicker from "react-datepicker";
-import { toast } from "react-toastify";
+import {toast} from "react-toastify";
 import ShortUniqueId from "short-unique-id";
-import { checkAccess, getTypesOfUser } from "@/utils/permissions";
-import { PermissionType } from "@/interfaces/permissions";
+import {checkAccess, getTypesOfUser} from "@/utils/permissions";
+import {PermissionType} from "@/interfaces/permissions";
 import usePermissions from "@/hooks/usePermissions";
 import Input from "@/components/Low/Input";
 import CountrySelect from "@/components/Low/CountrySelect";
 import useGroups from "@/hooks/useGroups";
 import useUsers from "@/hooks/useUsers";
-import { getUserName } from "@/utils/users";
+import {getUserName} from "@/utils/users";
 import Select from "@/components/Low/Select";
-import { EntityWithRoles } from "@/interfaces/entity";
+import {EntityWithRoles} from "@/interfaces/entity";
 import useEntitiesGroups from "@/hooks/useEntitiesGroups";
+import {mapBy} from "@/utils";
 
 const USER_TYPE_PERMISSIONS: {
-  [key in Type]: { perm: PermissionType | undefined; list: Type[] };
+	[key in Type]: {perm: PermissionType | undefined; list: Type[]};
 } = {
-  student: {
-    perm: "createCodeStudent",
-    list: [],
-  },
-  teacher: {
-    perm: "createCodeTeacher",
-    list: [],
-  },
-  agent: {
-    perm: "createCodeCountryManager",
-    list: ["student", "teacher", "corporate", "mastercorporate"],
-  },
-  corporate: {
-    perm: "createCodeCorporate",
-    list: ["student", "teacher"],
-  },
-  mastercorporate: {
-    perm: undefined,
-    list: ["student", "teacher", "corporate"],
-  },
-  admin: {
-    perm: "createCodeAdmin",
-    list: ["student", "teacher", "agent", "corporate", "admin", "mastercorporate"],
-  },
-  developer: {
-    perm: undefined,
-    list: ["student", "teacher", "agent", "corporate", "admin", "developer", "mastercorporate"],
-  },
+	student: {
+		perm: "createCodeStudent",
+		list: [],
+	},
+	teacher: {
+		perm: "createCodeTeacher",
+		list: [],
+	},
+	agent: {
+		perm: "createCodeCountryManager",
+		list: ["student", "teacher", "corporate", "mastercorporate"],
+	},
+	corporate: {
+		perm: "createCodeCorporate",
+		list: ["student", "teacher"],
+	},
+	mastercorporate: {
+		perm: undefined,
+		list: ["student", "teacher", "corporate"],
+	},
+	admin: {
+		perm: "createCodeAdmin",
+		list: ["student", "teacher", "agent", "corporate", "admin", "mastercorporate"],
+	},
+	developer: {
+		perm: undefined,
+		list: ["student", "teacher", "agent", "corporate", "admin", "developer", "mastercorporate"],
+	},
 };
 
 interface Props {
-  user: User;
-  users: User[];
-  entities: EntityWithRoles[]
-  permissions: PermissionType[];
-  onFinish: () => void;
+	user: User;
+	users: User[];
+	entities: EntityWithRoles[];
+	permissions: PermissionType[];
+	onFinish: () => void;
 }
 
-export default function UserCreator({ user, users, entities = [], permissions, onFinish }: Props) {
-  const [name, setName] = useState<string>();
-  const [email, setEmail] = useState<string>();
-  const [phone, setPhone] = useState<string>();
-  const [passportID, setPassportID] = useState<string>();
-  const [studentID, setStudentID] = useState<string>();
-  const [country, setCountry] = useState(user?.demographicInformation?.country);
-  const [group, setGroup] = useState<string | null>();
-  const [password, setPassword] = useState<string>();
-  const [confirmPassword, setConfirmPassword] = useState<string>();
-  const [expiryDate, setExpiryDate] = useState<Date | null>(
-    user?.subscriptionExpirationDate ? moment(user?.subscriptionExpirationDate).toDate() : null,
-  );
-  const [isExpiryDateEnabled, setIsExpiryDateEnabled] = useState(true);
-  const [isLoading, setIsLoading] = useState(false);
-  const [type, setType] = useState<Type>("student");
-  const [position, setPosition] = useState<string>();
-  const [entity, setEntity] = useState((entities || [])[0]?.id || undefined)
+export default function UserCreator({user, users, entities = [], permissions, onFinish}: Props) {
+	const [name, setName] = useState<string>();
+	const [email, setEmail] = useState<string>();
+	const [phone, setPhone] = useState<string>();
+	const [passportID, setPassportID] = useState<string>();
+	const [studentID, setStudentID] = useState<string>();
+	const [country, setCountry] = useState(user?.demographicInformation?.country);
+	const [group, setGroup] = useState<string | null>();
+	const [password, setPassword] = useState<string>();
+	const [confirmPassword, setConfirmPassword] = useState<string>();
+	const [expiryDate, setExpiryDate] = useState<Date | null>(
+		user?.subscriptionExpirationDate ? moment(user?.subscriptionExpirationDate).toDate() : null,
+	);
+	const [isExpiryDateEnabled, setIsExpiryDateEnabled] = useState(true);
+	const [isLoading, setIsLoading] = useState(false);
+	const [type, setType] = useState<Type>("student");
+	const [position, setPosition] = useState<string>();
+	const [entity, setEntity] = useState((entities || [])[0]?.id || undefined);
 
-  const { groups } = useEntitiesGroups();
+	const {groups} = useEntitiesGroups();
 
-  useEffect(() => {
-    if (!isExpiryDateEnabled) setExpiryDate(null);
-  }, [isExpiryDateEnabled]);
+	useEffect(() => {
+		if (!isExpiryDateEnabled) setExpiryDate(null);
+	}, [isExpiryDateEnabled]);
 
-  const createUser = () => {
-    if (!name || name.trim().length === 0) return toast.error("Please enter a valid name!");
-    if (!email || email.trim().length === 0) return toast.error("Please enter a valid e-mail address!");
-    if (users.map((x) => x.email).includes(email.trim())) return toast.error("That e-mail is already in use!");
-    if (!password || password.trim().length < 6) return toast.error("Please enter a valid password!");
-    if (password !== confirmPassword) return toast.error("The passwords do not match!");
+	const createUser = () => {
+		if (!name || name.trim().length === 0) return toast.error("Please enter a valid name!");
+		if (!email || email.trim().length === 0) return toast.error("Please enter a valid e-mail address!");
+		if (users.map((x) => x.email).includes(email.trim())) return toast.error("That e-mail is already in use!");
+		if (!password || password.trim().length < 6) return toast.error("Please enter a valid password!");
+		if (password !== confirmPassword) return toast.error("The passwords do not match!");
 
-    setIsLoading(true);
+		setIsLoading(true);
 
-    const body = {
-      name,
-      email,
-      password,
-      groupID: group,
-      entity,
-      type,
-      studentID: type === "student" ? studentID : undefined,
-      expiryDate,
-      demographicInformation: {
-        passport_id: type === "student" ? passportID : undefined,
-        phone,
-        country,
-        position,
-      },
-    };
+		const body = {
+			name,
+			email,
+			password,
+			groupID: group,
+			entity,
+			type,
+			studentID: type === "student" ? studentID : undefined,
+			expiryDate,
+			demographicInformation: {
+				passport_id: type === "student" ? passportID : undefined,
+				phone,
+				country,
+				position,
+			},
+		};
 
-    axios
-      .post("/api/make_user", body)
-      .then(() => {
-        toast.success("That user has been created!");
-        onFinish();
+		axios
+			.post("/api/make_user", body)
+			.then(() => {
+				toast.success("That user has been created!");
+				onFinish();
 
-        setName("");
-        setEmail("");
-        setPhone("");
-        setPassportID("");
-        setStudentID("");
-        setCountry(user?.demographicInformation?.country);
-        setGroup(null);
-        setEntity((entities || [])[0]?.id || undefined)
-        setExpiryDate(user?.subscriptionExpirationDate ? moment(user?.subscriptionExpirationDate).toDate() : null);
-        setIsExpiryDateEnabled(true);
-        setType("student");
-        setPosition(undefined);
-      })
-      .catch((error) => {
-        const data = error?.response?.data;
-        if (!!data?.message) return toast.error(data.message);
-        toast.error("Something went wrong! Please try again later!");
-      })
-      .finally(() => setIsLoading(false));
-  };
+				setName("");
+				setEmail("");
+				setPhone("");
+				setPassportID("");
+				setStudentID("");
+				setCountry(user?.demographicInformation?.country);
+				setGroup(null);
+				setEntity((entities || [])[0]?.id || undefined);
+				setExpiryDate(user?.subscriptionExpirationDate ? moment(user?.subscriptionExpirationDate).toDate() : null);
+				setIsExpiryDateEnabled(true);
+				setType("student");
+				setPosition(undefined);
+			})
+			.catch((error) => {
+				const data = error?.response?.data;
+				if (!!data?.message) return toast.error(data.message);
+				toast.error("Something went wrong! Please try again later!");
+			})
+			.finally(() => setIsLoading(false));
+	};
 
-  return (
-    <div className="flex flex-col gap-4 border p-4 border-mti-gray-platinum rounded-xl">
-      <div className="grid grid-cols-2 gap-4">
-        <Input required label="Name" value={name} onChange={setName} type="text" name="name" placeholder="Name" />
-        <Input label="E-mail" required value={email} onChange={setEmail} type="email" name="email" placeholder="E-mail" />
+	return (
+		<div className="flex flex-col gap-4 border p-4 border-mti-gray-platinum rounded-xl">
+			<div className="grid grid-cols-2 gap-4">
+				<Input required label="Name" value={name} onChange={setName} type="text" name="name" placeholder="Name" />
+				<Input label="E-mail" required value={email} onChange={setEmail} type="email" name="email" placeholder="E-mail" />
 
-        <Input type="password" name="password" label="Password" value={password} onChange={setPassword} placeholder="Password" required />
-        <Input
-          type="password"
-          name="confirmPassword"
-          label="Confirm Password"
-          value={confirmPassword}
-          onChange={setConfirmPassword}
-          placeholder="ConfirmPassword"
-          required
-        />
+				<Input type="password" name="password" label="Password" value={password} onChange={setPassword} placeholder="Password" required />
+				<Input
+					type="password"
+					name="confirmPassword"
+					label="Confirm Password"
+					value={confirmPassword}
+					onChange={setConfirmPassword}
+					placeholder="ConfirmPassword"
+					required
+				/>
 
-        <div className="flex flex-col gap-4">
-          <label className="font-normal text-base text-mti-gray-dim">Country *</label>
-          <CountrySelect value={country} onChange={setCountry} />
-        </div>
+				<div className="flex flex-col gap-4">
+					<label className="font-normal text-base text-mti-gray-dim">Country *</label>
+					<CountrySelect value={country} onChange={setCountry} />
+				</div>
 
-        <Input type="tel" name="phone" label="Phone number" value={phone} onChange={setPhone} placeholder="Phone number" required />
+				<Input type="tel" name="phone" label="Phone number" value={phone} onChange={setPhone} placeholder="Phone number" required />
 
-        {type === "student" && (
-          <>
-            <Input
-              type="text"
-              name="passport_id"
-              label="Passport/National ID"
-              onChange={setPassportID}
-              value={passportID}
-              placeholder="National ID or Passport number"
-              required
-            />
-            <Input type="text" name="studentID" label="Student ID" onChange={setStudentID} value={studentID} placeholder="Student ID" />
-          </>
-        )}
+				{type === "student" && (
+					<>
+						<Input
+							type="text"
+							name="passport_id"
+							label="Passport/National ID"
+							onChange={setPassportID}
+							value={passportID}
+							placeholder="National ID or Passport number"
+							required
+						/>
+						<Input type="text" name="studentID" label="Student ID" onChange={setStudentID} value={studentID} placeholder="Student ID" />
+					</>
+				)}
 
-        <div className={clsx("flex flex-col gap-4")}>
-          <label className="font-normal text-base text-mti-gray-dim">Entity</label>
-          <Select
-            defaultValue={{ value: (entities || [])[0]?.id, label: (entities || [])[0]?.label }}
-            options={entities.map((e) => ({ value: e.id, label: e.label }))}
-            onChange={(e) => setEntity(e?.value || undefined)}
-            isClearable={checkAccess(user, ["admin", "developer"])}
-          />
-        </div>
+				<div className={clsx("flex flex-col gap-4")}>
+					<label className="font-normal text-base text-mti-gray-dim">Entity</label>
+					<Select
+						defaultValue={{value: (entities || [])[0]?.id, label: (entities || [])[0]?.label}}
+						options={entities.map((e) => ({value: e.id, label: e.label}))}
+						onChange={(e) => setEntity(e?.value || undefined)}
+						isClearable={checkAccess(user, ["admin", "developer"])}
+					/>
+				</div>
 
-        {["corporate", "mastercorporate"].includes(type) && (
-          <Input type="text" name="department" label="Department" onChange={setPosition} value={position} placeholder="Department" />
-        )}
+				{["corporate", "mastercorporate"].includes(type) && (
+					<Input type="text" name="department" label="Department" onChange={setPosition} value={position} placeholder="Department" />
+				)}
 
-        <div className={clsx("flex flex-col gap-4")}>
-          <label className="font-normal text-base text-mti-gray-dim">Classroom</label>
-          <Select
-            options={groups
-              .filter((x) => x.entity?.id === entity)
-              .map((g) => ({ value: g.id, label: g.name }))}
-            onChange={(e) => setGroup(e?.value || undefined)}
-            isClearable
-          />
-        </div>
+				<div className={clsx("flex flex-col gap-4")}>
+					<label className="font-normal text-base text-mti-gray-dim">Classroom</label>
+					<Select
+						options={groups.filter((x) => x.entity?.id === entity).map((g) => ({value: g.id, label: g.name}))}
+						onChange={(e) => setGroup(e?.value || undefined)}
+						isClearable
+					/>
+				</div>
 
-        <div
-          className={clsx(
-            "flex flex-col gap-4",
-            !checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"]) && "col-span-2",
-          )}>
-          <label className="font-normal text-base text-mti-gray-dim">Type</label>
-          {user && (
-            <select
-              defaultValue="student"
-              value={type}
-              onChange={(e) => setType(e.target.value as Type)}
-              className="p-6 w-full min-w-[350px] min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer bg-white">
-              {Object.keys(USER_TYPE_LABELS)
-                .filter((x) => {
-                  const { list, perm } = USER_TYPE_PERMISSIONS[x as Type];
-                  return checkAccess(user, getTypesOfUser(list), permissions, perm);
-                })
-                .map((type) => (
-                  <option key={type} value={type}>
-                    {USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS]}
-                  </option>
-                ))}
-            </select>
-          )}
-        </div>
+				<div
+					className={clsx(
+						"flex flex-col gap-4",
+						!checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"]) && "col-span-2",
+					)}>
+					<label className="font-normal text-base text-mti-gray-dim">Type</label>
+					{user && (
+						<select
+							defaultValue="student"
+							value={type}
+							onChange={(e) => setType(e.target.value as Type)}
+							className="p-6 w-full min-w-[350px] min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer bg-white">
+							{Object.keys(USER_TYPE_LABELS)
+								.filter((x) => {
+									const {list, perm} = USER_TYPE_PERMISSIONS[x as Type];
+									return checkAccess(user, getTypesOfUser(list), permissions, perm);
+								})
+								.map((type) => (
+									<option key={type} value={type}>
+										{USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS]}
+									</option>
+								))}
+						</select>
+					)}
+				</div>
 
-        <div className="flex flex-col gap-4">
-          {user && checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"]) && (
-            <>
-              <div className="-md:flex-row -md:items-center flex justify-between gap-2 md:flex-col 2xl:flex-row 2xl:items-center">
-                <label className="text-mti-gray-dim text-base font-normal">Expiry Date</label>
-                <Checkbox
-                  isChecked={isExpiryDateEnabled}
-                  onChange={setIsExpiryDateEnabled}
-                  disabled={!!user?.subscriptionExpirationDate}>
-                  Enabled
-                </Checkbox>
-              </div>
-              {isExpiryDateEnabled && (
-                <ReactDatePicker
-                  className={clsx(
-                    "flex min-h-[70px] w-full cursor-pointer justify-center rounded-full border p-6 text-sm font-normal focus:outline-none",
-                    "hover:border-mti-purple tooltip",
-                    "transition duration-300 ease-in-out",
-                  )}
-                  filterDate={(date) =>
-                    moment(date).isAfter(new Date()) &&
-                    (user?.subscriptionExpirationDate ? moment(date).isBefore(user?.subscriptionExpirationDate) : true)
-                  }
-                  dateFormat="dd/MM/yyyy"
-                  selected={expiryDate}
-                  onChange={(date) => setExpiryDate(date)}
-                />
-              )}
-            </>
-          )}
-        </div>
-      </div>
+				<div className="flex flex-col gap-4">
+					{user && checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"]) && (
+						<>
+							<div className="-md:flex-row -md:items-center flex justify-between gap-2 md:flex-col 2xl:flex-row 2xl:items-center">
+								<label className="text-mti-gray-dim text-base font-normal">Expiry Date</label>
+								<Checkbox
+									isChecked={isExpiryDateEnabled}
+									onChange={setIsExpiryDateEnabled}
+									disabled={!!user?.subscriptionExpirationDate}>
+									Enabled
+								</Checkbox>
+							</div>
+							{isExpiryDateEnabled && (
+								<ReactDatePicker
+									className={clsx(
+										"flex min-h-[70px] w-full cursor-pointer justify-center rounded-full border p-6 text-sm font-normal focus:outline-none",
+										"hover:border-mti-purple tooltip",
+										"transition duration-300 ease-in-out",
+									)}
+									filterDate={(date) =>
+										moment(date).isAfter(new Date()) &&
+										(user?.subscriptionExpirationDate ? moment(date).isBefore(user?.subscriptionExpirationDate) : true)
+									}
+									dateFormat="dd/MM/yyyy"
+									selected={expiryDate}
+									onChange={(date) => setExpiryDate(date)}
+								/>
+							)}
+						</>
+					)}
+				</div>
+			</div>
 
-      <Button onClick={createUser} isLoading={isLoading} disabled={(isExpiryDateEnabled ? !expiryDate : false) || isLoading}>
-        Create User
-      </Button>
-    </div>
-  );
+			<Button onClick={createUser} isLoading={isLoading} disabled={(isExpiryDateEnabled ? !expiryDate : false) || isLoading}>
+				Create User
+			</Button>
+		</div>
+	);
 }
diff --git a/src/pages/dashboard/mastercorporate.tsx b/src/pages/dashboard/mastercorporate.tsx
index 6559cce0..de3232ff 100644
--- a/src/pages/dashboard/mastercorporate.tsx
+++ b/src/pages/dashboard/mastercorporate.tsx
@@ -1,269 +1,216 @@
 /* eslint-disable @next/next/no-img-element */
 import UserDisplayList from "@/components/UserDisplayList";
 import IconCard from "@/components/IconCard";
-import { useAllowedEntities } from "@/hooks/useEntityPermissions";
-import { EntityWithRoles } from "@/interfaces/entity";
-import { Stat, StudentUser, Type, User } from "@/interfaces/user";
-import { sessionOptions } from "@/lib/session";
-import { filterBy, mapBy, redirect, serialize } from "@/utils";
-import { requestUser } from "@/utils/api";
-import { countEntitiesAssignments } from "@/utils/assignments.be";
-import { getEntitiesWithRoles } from "@/utils/entities.be";
-import { countGroupsByEntities } from "@/utils/groups.be";
-import {
-  checkAccess,
-  groupAllowedEntitiesByPermissions,
-} from "@/utils/permissions";
-import { groupByExam } from "@/utils/stats";
-import { countAllowedUsers, getUsers } from "@/utils/users.be";
-import { clsx } from "clsx";
-import { withIronSessionSsr } from "iron-session/next";
+import {useAllowedEntities} from "@/hooks/useEntityPermissions";
+import {EntityWithRoles} from "@/interfaces/entity";
+import {Stat, StudentUser, Type, User} from "@/interfaces/user";
+import {sessionOptions} from "@/lib/session";
+import {filterBy, mapBy, redirect, serialize} from "@/utils";
+import {requestUser} from "@/utils/api";
+import {countEntitiesAssignments} from "@/utils/assignments.be";
+import {getEntitiesWithRoles} from "@/utils/entities.be";
+import {countGroupsByEntities} from "@/utils/groups.be";
+import {checkAccess, groupAllowedEntitiesByPermissions} from "@/utils/permissions";
+import {groupByExam} from "@/utils/stats";
+import {countAllowedUsers, getUsers} from "@/utils/users.be";
+import {clsx} from "clsx";
+import {withIronSessionSsr} from "iron-session/next";
 import moment from "moment";
 import Head from "next/head";
-import { useRouter } from "next/router";
-import { useMemo } from "react";
-import {
-  BsBank,
-  BsClock,
-  BsEnvelopePaper,
-  BsPencilSquare,
-  BsPeople,
-  BsPeopleFill,
-  BsPersonFill,
-  BsPersonFillGear,
-} from "react-icons/bs";
-import { ToastContainer } from "react-toastify";
-import { isAdmin } from "@/utils/users";
+import {useRouter} from "next/router";
+import {useMemo} from "react";
+import {BsBank, BsClock, BsEnvelopePaper, BsPencilSquare, BsPeople, BsPeopleFill, BsPersonFill, BsPersonFillGear} from "react-icons/bs";
+import {ToastContainer} from "react-toastify";
+import {isAdmin} from "@/utils/users";
 
 interface Props {
-  user: User;
-  students: StudentUser[];
-  latestStudents: User[];
-  latestTeachers: User[];
-  userCounts: { [key in Type]: number };
-  entities: EntityWithRoles[];
-  assignmentsCount: number;
-  stats: Stat[];
-  groupsCount: number;
+	user: User;
+	students: StudentUser[];
+	latestStudents: User[];
+	latestTeachers: User[];
+	userCounts: {[key in Type]: number};
+	entities: EntityWithRoles[];
+	assignmentsCount: number;
+	stats: Stat[];
+	groupsCount: number;
 }
 
-export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
-  const user = await requestUser(req, res);
-  if (!user || !user.isVerified) return redirect("/login");
+export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
+	const user = await requestUser(req, res);
+	if (!user || !user.isVerified) return redirect("/login");
 
-  if (!checkAccess(user, ["admin", "developer", "mastercorporate"]))
-    return redirect("/");
+	if (!checkAccess(user, ["admin", "developer", "mastercorporate"])) return redirect("/");
 
-  const entityIDS = mapBy(user.entities, "id") || [];
-  const entities = await getEntitiesWithRoles(
-    isAdmin(user) ? undefined : entityIDS
-  );
-  const {
-    ["view_students"]: allowedStudentEntities,
-    ["view_teachers"]: allowedTeacherEntities,
-  } = groupAllowedEntitiesByPermissions(user, entities, [
-    "view_students",
-    "view_teachers",
-  ]);
+	const entityIDS = mapBy(user.entities, "id") || [];
+	const entities = await getEntitiesWithRoles(isAdmin(user) ? undefined : entityIDS);
+	const {["view_students"]: allowedStudentEntities, ["view_teachers"]: allowedTeacherEntities} = groupAllowedEntitiesByPermissions(user, entities, [
+		"view_students",
+		"view_teachers",
+	]);
 
-  const allowedStudentEntitiesIDS = mapBy(allowedStudentEntities, "id");
+	const allowedStudentEntitiesIDS = mapBy(allowedStudentEntities, "id");
 
-  const entitiesIDS = mapBy(entities, "id") || [];
+	const entitiesIDS = mapBy(entities, "id") || [];
 
-  const [
-    students,
-    latestStudents,
-    latestTeachers,
-    userCounts,
-    assignmentsCount,
-    groupsCount,
-  ] = await Promise.all([
-    getUsers(
-      { type: "student", "entities.id": { $in: allowedStudentEntitiesIDS } },
-      10,
-      { averageLevel: -1 },
-      { _id: 0, id: 1, name: 1, email: 1, profilePicture: 1 }
-    ),
-    getUsers(
-      { type: "student", "entities.id": { $in: allowedStudentEntitiesIDS } },
-      10,
-      { registrationDate: -1 },
-      { _id: 0, id: 1, name: 1, email: 1, profilePicture: 1 }
-    ),
-    getUsers(
-      {
-        type: "teacher",
-        "entities.id": { $in: mapBy(allowedTeacherEntities, "id") },
-      },
-      10,
-      { registrationDate: -1 },
-      { _id: 0, id: 1, name: 1, email: 1, profilePicture: 1 }
-    ),
-    countAllowedUsers(user, entities),
-    countEntitiesAssignments(entitiesIDS, { archived: { $ne: true } }),
-    countGroupsByEntities(entitiesIDS),
-  ]);
+	const [students, latestStudents, latestTeachers, userCounts, assignmentsCount, groupsCount] = await Promise.all([
+		getUsers(
+			{type: "student", "entities.id": {$in: allowedStudentEntitiesIDS}},
+			10,
+			{averageLevel: -1},
+			{_id: 0, id: 1, name: 1, email: 1, profilePicture: 1},
+		),
+		getUsers(
+			{type: "student", "entities.id": {$in: allowedStudentEntitiesIDS}},
+			10,
+			{registrationDate: -1},
+			{_id: 0, id: 1, name: 1, email: 1, profilePicture: 1},
+		),
+		getUsers(
+			{
+				type: "teacher",
+				"entities.id": {$in: mapBy(allowedTeacherEntities, "id")},
+			},
+			10,
+			{registrationDate: -1},
+			{_id: 0, id: 1, name: 1, email: 1, profilePicture: 1},
+		),
+		countAllowedUsers(user, entities),
+		countEntitiesAssignments(entitiesIDS, {archived: {$ne: true}}),
+		countGroupsByEntities(entitiesIDS),
+	]);
 
-  return {
-    props: serialize({
-      user,
-      students,
-      latestStudents,
-      latestTeachers,
-      userCounts,
-      entities,
-      assignmentsCount,
-      groupsCount,
-    }),
-  };
+	return {
+		props: serialize({
+			user,
+			students,
+			latestStudents,
+			latestTeachers,
+			userCounts,
+			entities,
+			assignmentsCount,
+			groupsCount,
+		}),
+	};
 }, sessionOptions);
 
 export default function Dashboard({
-  user,
-  students,
-  latestStudents,
-  latestTeachers,
-  userCounts,
-  entities,
-  assignmentsCount,
-  stats = [],
-  groupsCount,
+	user,
+	students,
+	latestStudents,
+	latestTeachers,
+	userCounts,
+	entities,
+	assignmentsCount,
+	stats = [],
+	groupsCount,
 }: Props) {
-  
-  const totalCount = useMemo(
-    () =>
-      userCounts.corporate +
-      userCounts.mastercorporate +
-      userCounts.student +
-      userCounts.teacher,
-    [userCounts]
-  );
+	const totalCount = useMemo(() => userCounts.corporate + userCounts.mastercorporate + userCounts.student + userCounts.teacher, [userCounts]);
 
-  const totalLicenses = useMemo(
-    () =>
-      entities.reduce(
-        (acc, curr) => acc + parseInt(curr.licenses.toString()),
-        0
-      ),
-    [entities]
-  );
+	const totalLicenses = useMemo(() => entities.reduce((acc, curr) => acc + parseInt(curr.licenses.toString()), 0), [entities]);
 
-  const router = useRouter();
+	const router = useRouter();
 
-  const allowedEntityStatistics = useAllowedEntities(
-    user,
-    entities,
-    "view_entity_statistics"
-  );
-  const allowedStudentPerformance = useAllowedEntities(
-    user,
-    entities,
-    "view_student_performance"
-  );
+	const allowedEntityStatistics = useAllowedEntities(user, entities, "view_entity_statistics");
+	const allowedStudentPerformance = useAllowedEntities(user, entities, "view_student_performance");
 
-  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 />
-      <>
-        <section className="grid grid-cols-5 place-items-center -md:grid-cols-2 gap-4 text-center">
-          <IconCard
-            onClick={() => router.push("/users?type=student")}
-            Icon={BsPersonFill}
-            label="Students"
-            value={userCounts.student}
-            color="purple"
-          />
-          <IconCard
-            onClick={() => router.push("/users?type=teacher")}
-            Icon={BsPencilSquare}
-            label="Teachers"
-            value={userCounts.teacher}
-            color="purple"
-          />
-          <IconCard
-            onClick={() => router.push("/users?type=corporate")}
-            Icon={BsBank}
-            label="Corporate Accounts"
-            value={userCounts.corporate}
-            color="purple"
-          />
-          <IconCard
-            Icon={BsPeople}
-            onClick={() => router.push("/classrooms")}
-            label="Classrooms"
-            value={groupsCount}
-            color="purple"
-          />
-          <IconCard
-            Icon={BsPeopleFill}
-            onClick={() => router.push("/entities")}
-            label="Entities"
-            value={`${entities.length} - ${totalCount}/${totalLicenses}`}
-            color="purple"
-          />
-          {allowedStudentPerformance.length > 0 && (
-            <IconCard
-              Icon={BsPersonFillGear}
-              onClick={() => router.push("/users/performance")}
-              label="Student Performance"
-              value={userCounts.student}
-              color="purple"
-            />
-          )}
-          {allowedEntityStatistics.length > 0 && (
-            <IconCard
-              Icon={BsPersonFillGear}
-              onClick={() => router.push("/statistical")}
-              label="Entity Statistics"
-              value={allowedEntityStatistics.length}
-              color="purple"
-            />
-          )}
-          <IconCard
-            Icon={BsEnvelopePaper}
-            onClick={() => router.push("/assignments")}
-            label="Assignments"
-            value={assignmentsCount}
-            className={clsx(
-              allowedEntityStatistics.length === 0 && "col-span-2"
-            )}
-            color="purple"
-          />
-          <IconCard
-            Icon={BsClock}
-            label="Expiration Date"
-            value={
-              user.subscriptionExpirationDate
-                ? moment(user.subscriptionExpirationDate).format("DD/MM/yyyy")
-                : "Unlimited"
-            }
-            color="rose"
-          />
-        </section>
+	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 />
+			<>
+				<section className="grid grid-cols-5 place-items-center -md:grid-cols-2 gap-4 text-center">
+					<IconCard
+						onClick={() => router.push("/users?type=student")}
+						Icon={BsPersonFill}
+						label="Students"
+						value={userCounts.student}
+						color="purple"
+					/>
+					<IconCard
+						onClick={() => router.push("/users?type=teacher")}
+						Icon={BsPencilSquare}
+						label="Teachers"
+						value={userCounts.teacher}
+						color="purple"
+					/>
+					<IconCard
+						onClick={() => router.push("/users?type=corporate")}
+						Icon={BsBank}
+						label="Corporate Accounts"
+						value={userCounts.corporate}
+						color="purple"
+					/>
+					<IconCard
+						Icon={BsBank}
+						onClick={() => router.push("/users?type=mastercorporate")}
+						label="Master Corporates"
+						value={userCounts.mastercorporate}
+						color="purple"
+					/>
+					<IconCard Icon={BsPeople} onClick={() => router.push("/classrooms")} label="Classrooms" value={groupsCount} color="purple" />
+					<IconCard
+						Icon={BsPeopleFill}
+						onClick={() => router.push("/entities")}
+						label="Entities"
+						value={`${entities.length} - ${totalCount}/${totalLicenses}`}
+						color="purple"
+					/>
+					{allowedStudentPerformance.length > 0 && (
+						<IconCard
+							Icon={BsPersonFillGear}
+							onClick={() => router.push("/users/performance")}
+							label="Student Performance"
+							value={userCounts.student}
+							color="purple"
+						/>
+					)}
+					{allowedEntityStatistics.length > 0 && (
+						<IconCard
+							Icon={BsPersonFillGear}
+							onClick={() => router.push("/statistical")}
+							label="Entity Statistics"
+							value={allowedEntityStatistics.length}
+							color="purple"
+						/>
+					)}
+					<IconCard
+						Icon={BsEnvelopePaper}
+						onClick={() => router.push("/assignments")}
+						label="Assignments"
+						value={assignmentsCount}
+						className={clsx(allowedEntityStatistics.length === 0 && "col-span-2")}
+						color="purple"
+					/>
+					<IconCard
+						Icon={BsClock}
+						label="Expiration Date"
+						value={user.subscriptionExpirationDate ? moment(user.subscriptionExpirationDate).format("DD/MM/yyyy") : "Unlimited"}
+						color="rose"
+					/>
+				</section>
 
-        <section className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full justify-between">
-          <UserDisplayList users={latestStudents} title="Latest Students" />
-          <UserDisplayList users={latestTeachers} title="Latest Teachers" />
-          <UserDisplayList users={students} title="Highest level students" />
-          <UserDisplayList
-            users={students.sort(
-              (a, b) =>
-                Object.keys(groupByExam(filterBy(stats, "user", b))).length -
-                Object.keys(groupByExam(filterBy(stats, "user", a))).length
-            )}
-            title="Highest exam count students"
-          />
-        </section>
-      </>
-    </>
-  );
+				<section className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full justify-between">
+					<UserDisplayList users={latestStudents} title="Latest Students" />
+					<UserDisplayList users={latestTeachers} title="Latest Teachers" />
+					<UserDisplayList users={students} title="Highest level students" />
+					<UserDisplayList
+						users={students.sort(
+							(a, b) =>
+								Object.keys(groupByExam(filterBy(stats, "user", b))).length -
+								Object.keys(groupByExam(filterBy(stats, "user", a))).length,
+						)}
+						title="Highest exam count students"
+					/>
+				</section>
+			</>
+		</>
+	);
 }
diff --git a/src/pages/settings.tsx b/src/pages/settings.tsx
index 8f98d394..64194125 100644
--- a/src/pages/settings.tsx
+++ b/src/pages/settings.tsx
@@ -1,268 +1,201 @@
 /* eslint-disable @next/next/no-img-element */
 import Head from "next/head";
-import { withIronSessionSsr } from "iron-session/next";
-import { sessionOptions } from "@/lib/session";
-import { ToastContainer } from "react-toastify";
+import {withIronSessionSsr} from "iron-session/next";
+import {sessionOptions} from "@/lib/session";
+import {ToastContainer} from "react-toastify";
 import CodeGenerator from "./(admin)/CodeGenerator";
 import ExamLoader from "./(admin)/ExamLoader";
 import Lists from "./(admin)/Lists";
 import BatchCodeGenerator from "./(admin)/BatchCodeGenerator";
-import { shouldRedirectHome } from "@/utils/navigation.disabled";
+import {shouldRedirectHome} from "@/utils/navigation.disabled";
 import BatchCreateUser from "./(admin)/Lists/BatchCreateUser";
-import { checkAccess, getTypesOfUser } from "@/utils/permissions";
-import { useState } from "react";
+import {checkAccess, getTypesOfUser} from "@/utils/permissions";
+import {useEffect, useState} from "react";
 import Modal from "@/components/Modal";
 import IconCard from "@/components/IconCard";
-import {
-  BsCode,
-  BsCodeSquare,
-  BsGearFill,
-  BsPeopleFill,
-  BsPersonFill,
-} from "react-icons/bs";
+import {BsCode, BsCodeSquare, BsGearFill, BsPeopleFill, BsPersonFill} from "react-icons/bs";
 import UserCreator from "./(admin)/UserCreator";
 import CorporateGradingSystem from "./(admin)/CorporateGradingSystem";
-import { CEFR_STEPS } from "@/resources/grading";
-import { User } from "@/interfaces/user";
-import { getUserPermissions } from "@/utils/permissions.be";
-import { PermissionType } from "@/interfaces/permissions";
-import { getUsers } from "@/utils/users.be";
-import { getEntitiesWithRoles } from "@/utils/entities.be";
-import { mapBy, serialize, redirect } from "@/utils";
-import { EntityWithRoles } from "@/interfaces/entity";
-import { requestUser } from "@/utils/api";
-import { isAdmin } from "@/utils/users";
-import {
-  getGradingSystemByEntities,
-  getGradingSystemByEntity,
-} from "@/utils/grading.be";
-import { Grading } from "@/interfaces";
-import { useRouter } from "next/router";
-import { useAllowedEntities } from "@/hooks/useEntityPermissions";
+import {CEFR_STEPS} from "@/resources/grading";
+import {User} from "@/interfaces/user";
+import {getUserPermissions} from "@/utils/permissions.be";
+import {PermissionType} from "@/interfaces/permissions";
+import {getUsers} from "@/utils/users.be";
+import {getEntitiesWithRoles} from "@/utils/entities.be";
+import {mapBy, serialize, redirect, filterBy} from "@/utils";
+import {EntityWithRoles} from "@/interfaces/entity";
+import {requestUser} from "@/utils/api";
+import {isAdmin} from "@/utils/users";
+import {getGradingSystemByEntities, getGradingSystemByEntity} from "@/utils/grading.be";
+import {Grading} from "@/interfaces";
+import {useRouter} from "next/router";
+import {useAllowedEntities} from "@/hooks/useEntityPermissions";
 
-export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
-  const user = await requestUser(req, res);
-  if (!user) return redirect("/login");
+export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
+	const user = await requestUser(req, res);
+	if (!user) return redirect("/login");
 
-  if (
-    shouldRedirectHome(user) ||
-    !checkAccess(user, [
-      "admin",
-      "developer",
-      "corporate",
-      "teacher",
-      "mastercorporate",
-    ])
-  )
-    return redirect("/");
-  const [permissions, entities, allUsers] = await Promise.all([
-    getUserPermissions(user.id),
-    isAdmin(user)
-      ? await getEntitiesWithRoles()
-      : await getEntitiesWithRoles(mapBy(user.entities, "id")),
-    getUsers(),
-  ]);
-  const gradingSystems = await getGradingSystemByEntities(
-    mapBy(entities, "id")
-  );
-  const entitiesGrading = entities.map(
-    (e) =>
-      gradingSystems.find((g) => g.entity === e.id) || {
-        entity: e.id,
-        steps: CEFR_STEPS,
-      }
-  );
+	if (shouldRedirectHome(user) || !checkAccess(user, ["admin", "developer", "corporate", "teacher", "mastercorporate"])) return redirect("/");
+	const [permissions, entities, allUsers] = await Promise.all([
+		getUserPermissions(user.id),
+		isAdmin(user) ? await getEntitiesWithRoles() : await getEntitiesWithRoles(mapBy(user.entities, "id")),
+		getUsers(),
+	]);
+	const gradingSystems = await getGradingSystemByEntities(mapBy(entities, "id"));
+	const entitiesGrading = entities.map(
+		(e) =>
+			gradingSystems.find((g) => g.entity === e.id) || {
+				entity: e.id,
+				steps: CEFR_STEPS,
+			},
+	);
 
-  return {
-    props: serialize({
-      user,
-      permissions,
-      entities,
-      allUsers,
-      entitiesGrading,
-    }),
-  };
+	return {
+		props: serialize({
+			user,
+			permissions,
+			entities,
+			allUsers,
+			entitiesGrading,
+		}),
+	};
 }, sessionOptions);
 
 interface Props {
-  user: User;
-  permissions: PermissionType[];
-  entities: EntityWithRoles[];
-  allUsers: User[];
-  entitiesGrading: Grading[];
+	user: User;
+	permissions: PermissionType[];
+	entities: EntityWithRoles[];
+	allUsers: User[];
+	entitiesGrading: Grading[];
 }
 
-export default function Admin({
-  user,
-  entities,
-  permissions,
-  allUsers,
-  entitiesGrading,
-}: Props) {
-  const [modalOpen, setModalOpen] = useState<string>();
-  const router = useRouter();
+export default function Admin({user, entities, permissions, allUsers, entitiesGrading}: Props) {
+	const [modalOpen, setModalOpen] = useState<string>();
+	const router = useRouter();
 
-  const entitiesAllowCreateUser = useAllowedEntities(
-    user,
-    entities,
-    "create_user"
-  );
-  const entitiesAllowCreateUsers = useAllowedEntities(
-    user,
-    entities,
-    "create_user_batch"
-  );
-  const entitiesAllowCreateCode = useAllowedEntities(
-    user,
-    entities,
-    "create_code"
-  );
-  const entitiesAllowCreateCodes = useAllowedEntities(
-    user,
-    entities,
-    "create_code_batch"
-  );
-  const entitiesAllowEditGrading = useAllowedEntities(
-    user,
-    entities,
-    "edit_grading_system"
-  );
+	const entitiesAllowCreateUser = useAllowedEntities(user, entities, "create_user");
+	const entitiesAllowCreateUsers = useAllowedEntities(user, entities, "create_user_batch");
+	const entitiesAllowCreateCode = useAllowedEntities(user, entities, "create_code");
+	const entitiesAllowCreateCodes = useAllowedEntities(user, entities, "create_code_batch");
+	const entitiesAllowEditGrading = useAllowedEntities(user, entities, "edit_grading_system");
 
-  return (
-    <>
-      <Head>
-        <title>Settings Panel | 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 />
-      <>
-        <Modal
-          isOpen={modalOpen === "batchCreateUser"}
-          onClose={() => setModalOpen(undefined)}
-          maxWidth="max-w-[85%]"
-        >
-          <BatchCreateUser
-            user={user}
-            entities={entitiesAllowCreateUser}
-            permissions={permissions}
-            onFinish={() => setModalOpen(undefined)}
-          />
-        </Modal>
-        <Modal
-          isOpen={modalOpen === "batchCreateCode"}
-          onClose={() => setModalOpen(undefined)}
-        >
-          <BatchCodeGenerator
-            entities={entitiesAllowCreateCodes}
-            user={user}
-            users={allUsers}
-            permissions={permissions}
-            onFinish={() => setModalOpen(undefined)}
-          />
-        </Modal>
-        <Modal
-          isOpen={modalOpen === "createCode"}
-          onClose={() => setModalOpen(undefined)}
-        >
-          <CodeGenerator
-            entities={entitiesAllowCreateCode}
-            user={user}
-            permissions={permissions}
-            onFinish={() => setModalOpen(undefined)}
-          />
-        </Modal>
-        <Modal
-          isOpen={modalOpen === "createUser"}
-          onClose={() => setModalOpen(undefined)}
-        >
-          <UserCreator
-            user={user}
-            entities={entitiesAllowCreateUsers}
-            users={allUsers}
-            permissions={permissions}
-            onFinish={() => setModalOpen(undefined)}
-          />
-        </Modal>
-        <Modal
-          isOpen={modalOpen === "gradingSystem"}
-          onClose={() => setModalOpen(undefined)}
-        >
-          <CorporateGradingSystem
-            user={user}
-            entitiesGrading={entitiesGrading}
-            entities={entitiesAllowEditGrading}
-            mutate={() => router.replace(router.asPath)}
-          />
-        </Modal>
+	return (
+		<>
+			<Head>
+				<title>Settings Panel | 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 />
+			<>
+				<Modal isOpen={modalOpen === "batchCreateUser"} onClose={() => setModalOpen(undefined)} maxWidth="max-w-[85%]">
+					<BatchCreateUser
+						user={user}
+						entities={entitiesAllowCreateUsers.filter(
+							(e) =>
+								e.licenses > 0 &&
+								e.licenses > allUsers.filter((u) => !isAdmin(u) && (u.entities || []).some((ent) => ent.id === e.id)).length,
+						)}
+						permissions={permissions}
+						onFinish={() => setModalOpen(undefined)}
+					/>
+				</Modal>
+				<Modal isOpen={modalOpen === "batchCreateCode"} onClose={() => setModalOpen(undefined)}>
+					<BatchCodeGenerator
+						entities={entitiesAllowCreateCodes}
+						user={user}
+						users={allUsers}
+						permissions={permissions}
+						onFinish={() => setModalOpen(undefined)}
+					/>
+				</Modal>
+				<Modal isOpen={modalOpen === "createCode"} onClose={() => setModalOpen(undefined)}>
+					<CodeGenerator
+						entities={entitiesAllowCreateCode}
+						user={user}
+						permissions={permissions}
+						onFinish={() => setModalOpen(undefined)}
+					/>
+				</Modal>
+				<Modal isOpen={modalOpen === "createUser"} onClose={() => setModalOpen(undefined)}>
+					<UserCreator
+						user={user}
+						entities={entitiesAllowCreateUser.filter(
+							(e) =>
+								e.licenses > 0 &&
+								e.licenses > allUsers.filter((u) => !isAdmin(u) && (u.entities || []).some((ent) => ent.id === e.id)).length,
+						)}
+						users={allUsers}
+						permissions={permissions}
+						onFinish={() => setModalOpen(undefined)}
+					/>
+				</Modal>
+				<Modal isOpen={modalOpen === "gradingSystem"} onClose={() => setModalOpen(undefined)}>
+					<CorporateGradingSystem
+						user={user}
+						entitiesGrading={entitiesGrading}
+						entities={entitiesAllowEditGrading}
+						mutate={() => router.replace(router.asPath)}
+					/>
+				</Modal>
 
-        <section className="w-full grid grid-cols-2 -md:grid-cols-1 gap-8">
-          <ExamLoader />
-          {checkAccess(
-            user,
-            getTypesOfUser(["teacher"]),
-            permissions,
-            "viewCodes"
-          ) && (
-            <div className="w-full grid grid-cols-2 gap-4">
-              <IconCard
-                Icon={BsCode}
-                label="Generate Single Code"
-                color="purple"
-                className="w-full h-full"
-                onClick={() => setModalOpen("createCode")}
-                disabled={entitiesAllowCreateCode.length === 0}
-              />
-              <IconCard
-                Icon={BsCodeSquare}
-                label="Generate Codes in Batch"
-                color="purple"
-                className="w-full h-full"
-                onClick={() => setModalOpen("batchCreateCode")}
-                disabled={entitiesAllowCreateCodes.length === 0}
-              />
-              <IconCard
-                Icon={BsPersonFill}
-                label="Create Single User"
-                color="purple"
-                className="w-full h-full"
-                onClick={() => setModalOpen("createUser")}
-                disabled={entitiesAllowCreateUser.length === 0}
-              />
-              <IconCard
-                Icon={BsPeopleFill}
-                label="Create Users in Batch"
-                color="purple"
-                className="w-full h-full"
-                onClick={() => setModalOpen("batchCreateUser")}
-                disabled={entitiesAllowCreateUsers.length === 0}
-              />
-              {checkAccess(user, [
-                "admin",
-                "corporate",
-                "developer",
-                "mastercorporate",
-              ]) && (
-                <IconCard
-                  Icon={BsGearFill}
-                  label="Grading System"
-                  color="purple"
-                  className="w-full h-full col-span-2"
-                  onClick={() => setModalOpen("gradingSystem")}
-                  disabled={entitiesAllowEditGrading.length === 0}
-                />
-              )}
-            </div>
-          )}
-        </section>
-        <section className="w-full">
-          <Lists user={user} entities={entities} permissions={permissions} />
-        </section>
-      </>
-    </>
-  );
+				<section className="w-full grid grid-cols-2 -md:grid-cols-1 gap-8">
+					<ExamLoader />
+					{checkAccess(user, getTypesOfUser(["teacher"]), permissions, "viewCodes") && (
+						<div className="w-full grid grid-cols-2 gap-4">
+							<IconCard
+								Icon={BsCode}
+								label="Generate Single Code"
+								color="purple"
+								className="w-full h-full"
+								onClick={() => setModalOpen("createCode")}
+								disabled={entitiesAllowCreateCode.length === 0}
+							/>
+							<IconCard
+								Icon={BsCodeSquare}
+								label="Generate Codes in Batch"
+								color="purple"
+								className="w-full h-full"
+								onClick={() => setModalOpen("batchCreateCode")}
+								disabled={entitiesAllowCreateCodes.length === 0}
+							/>
+							<IconCard
+								Icon={BsPersonFill}
+								label="Create Single User"
+								color="purple"
+								className="w-full h-full"
+								onClick={() => setModalOpen("createUser")}
+								disabled={entitiesAllowCreateUser.length === 0}
+							/>
+							<IconCard
+								Icon={BsPeopleFill}
+								label="Create Users in Batch"
+								color="purple"
+								className="w-full h-full"
+								onClick={() => setModalOpen("batchCreateUser")}
+								disabled={entitiesAllowCreateUsers.length === 0}
+							/>
+							{checkAccess(user, ["admin", "corporate", "developer", "mastercorporate"]) && (
+								<IconCard
+									Icon={BsGearFill}
+									label="Grading System"
+									color="purple"
+									className="w-full h-full col-span-2"
+									onClick={() => setModalOpen("gradingSystem")}
+									disabled={entitiesAllowEditGrading.length === 0}
+								/>
+							)}
+						</div>
+					)}
+				</section>
+				<section className="w-full">
+					<Lists user={user} entities={entities} permissions={permissions} />
+				</section>
+			</>
+		</>
+	);
 }