Add pagination to approval workflows table and change module styling to match project colors.

src/pages/approval-workflows/index.tsx

@@ -1,24 +1,22 @@
 import Tip from "@/components/ApprovalWorkflows/Tip";
-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 { 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 { 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 { 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 { createColumnHelper, flexRender, getCoreRowModel, useReactTable, getPaginationRowModel } from "@tanstack/react-table";
 import axios from "axios";
 import clsx from "clsx";
 import { withIronSessionSsr } from "iron-session/next";
@@ -192,7 +190,15 @@ export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAss
 					{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">
+							/* className="inline-block rounded-full px-3 py-1 text-sm font-medium bg-indigo-100 border border-indigo-300 text-indigo-900"> */
+							className={clsx("inline-block rounded-full px-3 py-1 text-sm font-medium text-white",
+								module === "speaking" ? "bg-ielts-speaking" :
+									module === "reading" ? "bg-ielts-reading" :
+										module === "writing" ? "bg-ielts-writing" :
+											module === "listening" ? "bg-ielts-listening" :
+												module === "level" ? "bg-ielts-level" :
+													"bg-slate-700"
+							)}>
 							{ModuleTypeLabels[module]}
 						</span>
 					))}
@@ -297,10 +303,20 @@ export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAss
 		}),
 	];
 
+	const [pagination, setPagination] = useState({
+		pageIndex: 0,
+		pageSize: 10,
+	});
+
 	const table = useReactTable({
 		data: filteredWorkflows,
 		columns: columns,
+		state: {
+			pagination,
+		},
+		onPaginationChange: setPagination,
 		getCoreRowModel: getCoreRowModel(),
+		getPaginationRowModel: getPaginationRowModel(),
 	});
 
 	return (
@@ -396,6 +412,43 @@ export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAss
 						))}
 					</tbody>
 				</table>
+				<div className="mt-2 flex flex-row gap-2 w-full justify-end items-center">
+					<button
+						onClick={() => table.setPageIndex(0)}
+						disabled={!table.getCanPreviousPage()}
+						className="px-3 py-2 rounded-md text-sm font-semibold text-mti-purple-ultradark border border-mti-purple-light 
+        bg-white hover:bg-mti-purple-light hover:text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+					>
+						{"<<"}
+					</button>
+					<button
+						onClick={() => table.previousPage()}
+						disabled={!table.getCanPreviousPage()}
+						className="px-3 py-2 rounded-md text-sm font-semibold text-mti-purple-ultradark border border-mti-purple-light 
+        bg-white hover:bg-mti-purple-light hover:text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+					>
+						{"<"}
+					</button>
+					<span className="px-4 text-sm font-medium">
+						Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
+					</span>
+					<button
+						onClick={() => table.nextPage()}
+						disabled={!table.getCanNextPage()}
+						className="px-3 py-2 rounded-md text-sm font-semibold text-mti-purple-ultradark border border-mti-purple-light 
+        bg-white hover:bg-mti-purple-light hover:text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+					>
+						{">"}
+					</button>
+					<button
+						onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+						disabled={!table.getCanNextPage()}
+						className="px-3 py-2 rounded-md text-sm font-semibold text-mti-purple-ultradark border border-mti-purple-light 
+        bg-white hover:bg-mti-purple-light hover:text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+					>
+						{">>"}
+					</button>
+				</div>
 			</div>
 		</>
 	);