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 {
-    editView?: boolean,
-    finalStep?: boolean,
-    isSelected?: boolean,
-    stepNumber: number,
-    stepType: StepType,
-    requestedBy: string,
-    //requestedBy: TeacherUser | CorporateUser | MasterCorporateUser,
-    onDelete?: () => void;
-}
-
-export default function WorkflowStep({
+export default function WorkflowStepComponent({
+    stepType,
+    stepNumber,
+    completed = false,
     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="px-3 text-sm font-normal focus:outline-none">Form Intake</span>
+                            <span className="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>