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

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>