Merged in workflow-permissions (pull request #146)

Workflow permissions

Approved-by: Tiago Ribeiro

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 });
     }
 

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 });
     }
 

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 });
     }
 

src/pages/api/approval-workflows/index.ts

@@ -15,7 +15,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 });
     }
 

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)
+    const entityWithRole = await getEntityWithRoles(workflow.entityId);
-        return redirect("/approval-workflows")
+    if (!entityWithRole) return redirect("/approval-workflows");
+
+    if (!doesEntityAllow(user, entityWithRole, "edit_workflow")) return redirect("/approval-workflows");
 
     return {
         props: serialize({

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)
+    if (!workflow) return redirect("/approval-workflows")
-        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(

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));
 

src/pages/approval-workflows/index.tsx

@@ -4,16 +4,19 @@ 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 { mapBy, redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
 import { getApprovalWorkflows } from "@/utils/approval.workflows.be";
-import { getEntities } from "@/utils/entities.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";
@@ -21,47 +24,20 @@ 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 { 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()
-        )
-    ];
-
-    return {
-        props: serialize({
-            user,
-            initialWorkflows: workflows,
-            workflowsAssignees: await getSpecificUsers(allAssigneeIds),
-            userEntitiesWithLabel: await getEntities(user.entities.map(entity => entity.id)),
-        }),
-    };
-}, 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",
+	approved:
-    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",
+		"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",
-    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",
+	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;
@@ -85,15 +61,48 @@ 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,
+	user: User;
-    initialWorkflows: ApprovalWorkflow[],
+	initialWorkflows: ApprovalWorkflow[];
-    workflowsAssignees: User[],
+	workflowsAssignees: User[];
-    userEntitiesWithLabel: Entity[],
+	userEntitiesWithLabel: EntityWithRoles[];
 }
 
 export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAssignees, userEntitiesWithLabel }: Props) {
-
 	const { workflows, reload } = useApprovalWorkflows();
 	const currentWorkflows = workflows || initialWorkflows;
 
@@ -103,9 +112,14 @@ export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAss
 	const [entityFilter, setEntityFilter] = useState<CustomEntity>(undefined);
 	const [nameFilter, setNameFilter] = useState<string>("");
 
+	const router = useRouter();
+
+	/* const allowedEntities = useAllowedEntities(user, userEntitiesWithLabel, "view_workflows");
+	const allowedSomeEntities = useAllowedEntitiesSomePermissions(user, userEntitiesWithLabel, ["view_workflows", "create_workflow"]); */
+
 	const ENTITY_OPTIONS = [
 		...userEntitiesWithLabel
-            .map(entity => ({
+			.map((entity) => ({
 				label: entity.label,
 				value: entity.id,
 				filter: (x: ApprovalWorkflow) => x.entityId === entity.id,
@@ -131,18 +145,16 @@ export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAss
 		}
 
 		if (nameFilter.trim() !== "") {
-            const nameFilterFunction = (workflow: ApprovalWorkflow) =>
+			const nameFilterFunction = (workflow: ApprovalWorkflow) => workflow.name.toLowerCase().includes(nameFilter.toLowerCase());
-                workflow.name.toLowerCase().includes(nameFilter.toLowerCase());
 			filters.push(nameFilterFunction);
 		}
 
 		// Apply all filters
-        const filtered = currentWorkflows.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
 	}, [currentWorkflows, statusFilter, entityFilter, nameFilter]);
 
-
 	const handleNameFilterChange = (name: ApprovalWorkflow["name"]) => {
 		setNameFilter(name);
 	};
@@ -158,25 +170,19 @@ export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAss
 				reload();
 			})
 			.catch((reason) => {
-                if (reason.response.status === 404) {
+				if (reason.response.status === 403) {
-                    toast.error("Approval Workflow not found!");
+					toast.error("You do not have permission to delete this Approval Workflow!");
-                } 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) => (
+			cell: (info) => <span className="font-medium">{info.getValue()}</span>,
-                <span className="font-medium">
-                    {info.getValue()}
-                </span>
-            ),
 		}),
 		columnHelper.accessor("modules", {
 			header: "MODULES",
@@ -185,8 +191,7 @@ 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">
-                        >
 							{ModuleTypeLabels[module]}
 						</span>
 					))}
@@ -196,18 +201,18 @@ export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAss
 		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()])}>
+				<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) => (
+			cell: (info) => <span className="font-medium">{userEntitiesWithLabel.find((entity) => entity.id === info.getValue())?.label}</span>,
-                <span className="font-medium">
-                    {userEntitiesWithLabel.find((entity) => entity.id === info.getValue())?.label}
-                </span>
-            ),
 		}),
 		columnHelper.accessor("steps", {
 			id: "currentAssignees",
@@ -229,8 +234,7 @@ export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAss
 						{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"
+								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>
 						))}
@@ -248,9 +252,7 @@ export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAss
 
 				return (
 					<span className="font-medium">
-                        {currentStep && !rejected
+						{currentStep && !rejected ? `Step ${currentStep.stepNumber}: ${StepTypeLabel[currentStep.stepType]}` : "Completed"}
-                            ? `Step ${currentStep.stepNumber}: ${StepTypeLabel[currentStep.stepType]}`
-                            : "Completed"}
 					</span>
 				);
 			},
@@ -268,28 +270,30 @@ export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAss
 						<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);
-                            }}
+							}}>
-                        >
 							<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
 						</button>
 
 						{currentStep && !rejected && (
-                            <Link
+							<button
-                                onClick={(e) => e.stopPropagation()}
 								data-tip="Edit"
-                                href={`/approval-workflows/${row.original._id?.toString()}/edit`}
 								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>
 				);
 			},
-        })
+		}),
 	];
 
 	const table = useReactTable({
@@ -314,11 +318,7 @@ export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAss
 
 			<div className="flex flex-row">
 				<Link href={"/approval-workflows/create"}>
-                    <Button
+					<Button color="purple" variant="solid" className="min-w-fit text-lg font-medium flex items-center gap-2 text-left">
-                        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>
@@ -328,13 +328,7 @@ export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAss
 			<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
+					<Input name="nameFilter" type="text" value={nameFilter} onChange={handleNameFilterChange} placeholder="Filter by name..." />
-                        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>
@@ -361,21 +355,13 @@ export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAss
 			<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
+				<table className="w-full table-auto border-separate border-spacing-y-2" style={{ tableLayout: "auto" }}>
-                    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
+										{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
-                                            ? null
-                                            : flexRender(
-                                                header.column.columnDef.header,
-                                                header.getContext()
-                                            )}
 									</th>
 								))}
 							</tr>
@@ -385,10 +371,9 @@ export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAss
 						{table.getRowModel().rows.map((row) => (
 							<tr
 								key={row.id}
-                                onClick={() => window.location.href = `/approval-workflows/${row.original._id?.toString()}`}
+								onClick={() => (window.location.href = `/approval-workflows/${row.original._id?.toString()}`)}
 								style={{ cursor: "pointer" }}
-                                className="bg-purple-50"
+								className="bg-purple-50">
-                            >
 								{row.getVisibleCells().map((cell, cellIndex) => {
 									const lastCellIndex = row.getVisibleCells().length - 1;
 
@@ -409,7 +394,6 @@ export default function ApprovalWorkflows({ user, initialWorkflows, workflowsAss
 							</tr>
 						))}
 					</tbody>
-
 				</table>
 			</div>
 		</>

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: "Configure Workflows", key: "configure_workflows"},
+	{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>
 			</>

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"
+	| "configure_workflows"
+	| "edit_workflow"
+	| "delete_workflow";
 
 export const DEFAULT_PERMISSIONS: RolePermission[] = [
 	"view_students",
@@ -77,7 +81,6 @@ export const DEFAULT_PERMISSIONS: RolePermission[] = [
 	"view_entity_roles",
 	"view_statistics",
 	"download_statistics_report",
-	"view_approval_workflows",
 ];
 
 export const ADMIN_PERMISSIONS: RolePermission[] = [
@@ -149,4 +152,8 @@ export const ADMIN_PERMISSIONS: RolePermission[] = [
 	"pay_entity",
 	"view_payment_record",
 	"update_exam_privacy",
+	"configure_workflows",
+	"view_workflows",
+	"edit_workflow",
+	"delete_workflow",
 ];