Start implementing with back-end. Create workflows completed and fetching workflows on server side as well, to show them in the table.

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

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 = () => {

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(