dynamic list of new workflows in workflow builder and some code refactoring

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

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 {
+export default function WorkflowStepComponent({
-    editView?: boolean,
+    stepType,
-    finalStep?: boolean,
+    stepNumber,
-    isSelected?: boolean,
+    completed = false,
-    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) {
+}: 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="text-sm font-normal focus:outline-none">Form Intake</span>
-                            <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>
@@ -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>

src/demo/approval_workflows.json

@@ -1,42 +1,66 @@
 [
     {
-        "id": "local-test-id-1",
+        "id": "kajhfakscbka-asacaca-acawesae",
         "name": "name-1",
-        "module": "reading",
+        "modules": [
-        "status": "approved",
+            "reading",
-        "approvers": "prof-1",
+            "writing"
-        "step": "Concluded"
+        ],
-    },
-    {
-        "id": "local-test-id-2",
-        "name": "name-2",
-        "module": "reading",
         "status": "pending",
-        "approvers": "prof-2",
+        "approvers": "prof-1",
-        "step": "Concluded"
+        "steps": [
+            {
+                "stepType": "form-intake",
+                "stepNumber": 1,
+                "completed": true,
+                "completedBy": "Prof. X",
+                "assignees": [
+                    "Prof. X",
+                    "Prof. Y",
+                    "Prof. Z"
+                ]
             },
             {
-        "id": "local-test-id-3",
+                "stepType": "approval-by",
-        "name": "name-3",
+                "stepNumber": 2,
-        "module": "listening",
+                "completed": true,
-        "status": "rejected",
+                "completedBy": "Prof. Y",
-        "approvers": "prof-3",
+                "assignees": [
-        "step": "Concluded"
+                    "Prof. X",
+                    "Prof. Y",
+                    "Prof. Z"
+                ]
             },
             {
-        "id": "local-test-id-4",
+                "stepType": "approval-by",
-        "name": "name-4",
+                "stepNumber": 3,
-        "module": "writing",
+                "completed": false,
-        "status": "approved",
+                "assignees": [
-        "approvers": "prof-4",
+                    "Prof. X",
-        "step": "Concluded"
+                    "Prof. Y",
+                    "Prof. Z"
+                ]
             },
             {
-        "id": "local-test-id-5",
+                "stepType": "approval-by",
-        "name": "name-5",
+                "stepNumber": 4,
-        "module": "reading",
+                "completed": false,
-        "status": "approved",
+                "assignees": [
-        "approvers": "prof-5",
+                    "Prof. X",
-        "step": "Concluded"
+                    "Prof. Y",
+                    "Prof. Z"
+                ]
+            },
+            {
+                "stepType": "approval-by",
+                "stepNumber": 5,
+                "completed": false,
+                "assignees": [
+                    "Prof. X",
+                    "Prof. Y",
+                    "Prof. Z"
+                ]
+            }
+        ]
     }
 ]

src/interfaces/approval.workflow.ts

@@ -1,12 +1,29 @@
 import {Module} from ".";
 
 export interface ApprovalWorkflow {
-    id: string;
+    id: string,
-    name: string;
+    name: string,
-    module: Module;
+    modules: Module[],
-    status: ApprovalWorkflowStatus;
+    status: ApprovalWorkflowStatus,
-    approvers: string;
+    steps: WorkflowStep[],
-    step: string;
+}
+
+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";

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

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

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>