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

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