Render previous select input options when switching between workflows in builder

src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx

@@ -1,7 +1,7 @@
 import { WorkflowStep } from "@/interfaces/approval.workflow";
 import Option from "@/interfaces/option";
 import { CorporateUser, TeacherUser } from "@/interfaces/user";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { AiOutlineUserAdd } from "react-icons/ai";
 import { BsTrash } from "react-icons/bs";
 import { LuGripHorizontal } from "react-icons/lu";
@@ -16,6 +16,7 @@ interface Props extends WorkflowStep {
 
 export default function WorkflowEditableStepComponent({
     stepNumber,
+    assignees = [null],
     finalStep,
     onDelete,
     onSelectChange,
@@ -47,6 +48,19 @@ export default function WorkflowEditableStepComponent({
         [entityCorporates]
     );
 
+    const allOptions = useMemo(() => [...teacherOptions, ...corporateOptions], [teacherOptions, corporateOptions]);
+
+    useEffect(() => {
+        if (assignees && assignees.length > 0) {
+            const initialSelects = assignees.map((assignee) =>
+                typeof assignee === 'string' ? allOptions.find(opt => opt.value === assignee) || null : null
+            );
+            if (JSON.stringify(initialSelects) !== JSON.stringify(selects)) {
+                setSelects(initialSelects);
+            }
+        } 
+    }, [assignees, allOptions]);
+
     const selectedValues = useMemo(() => 
         selects.filter((opt): opt is Option => !!opt).map(opt => opt.value),
         [selects]

src/components/ApprovalWorkflows/WorkflowForm.tsx

@@ -111,7 +111,7 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityTeacher
                 variant="solid"
                 onClick={addStep}
                 type="button"
-                className="max-w-fit text-lg font-medium flex items-center gap-2 text-left mb-8"
+                className="max-w-fit text-lg font-medium flex items-center gap-2 text-left mb-9"
             >
                 <IoIosAddCircleOutline className="size-6" />
                 Add Step
@@ -138,11 +138,8 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityTeacher
                             drag={!(step.firstStep || step.finalStep)}
                         >
                             <WorkflowEditableStepComponent
-                                key={step.key}
-                                completed={false}
-                                editView
                                 stepNumber={index + 1}
-                                stepType={step.stepType}
+                                assignees={step.assignees}
                                 finalStep={step.finalStep}
                                 onDelete={() => handleDelete(step.key)}
                                 onSelectChange={(numberOfSelects, idx, option) => handleSelectChange(step.key, numberOfSelects, idx, option)}

src/pages/approval-workflows/create.tsx

@@ -95,8 +95,8 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
             modules: [],
             status: "pending",
             steps: [
-                { key: Date.now(), completed: false, editView: true, stepType: "form-intake", stepNumber: 1, firstStep: true },
+                { key: Date.now(), completed: false, editView: true, stepType: "form-intake", stepNumber: 1, firstStep: true, assignees: [null] },
-                { key: Date.now() + 1, completed: false, editView: true, stepType: "approval-by", stepNumber: 2, finalStep: true },
+                { key: Date.now() + 1, completed: false, editView: true, stepType: "approval-by", stepNumber: 2, finalStep: true, assignees: [null] },
             ],
         };
         setWorkflows((prev) => [...prev, newWorkflow]);
@@ -104,7 +104,6 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
     };
 
     const onWorkflowChange = (updatedWorkflow: ApprovalWorkflow) => {
-        console.log(updatedWorkflow);
         setWorkflows(prev =>
             prev.map(wf => (wf.id === updatedWorkflow.id ? updatedWorkflow : wf))
         );
@@ -136,8 +135,8 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
             </Head>
             <ToastContainer />
             {user && (
-                <Layout user={user}>
+                <Layout user={user} className="flex flex-col gap-6">
-                    <section className="flex flex-col gap-0">
+                    <section className="flex flex-col">
                         <div className="flex items-center gap-2">
                             <Link
                                 href="/approval-workflows"

src/pages/approval-workflows/index.tsx

@@ -271,16 +271,18 @@ export default function ApprovalWorkflows({ user, teachers, userEntitiesWithLabe
                 <Layout user={user} className="gap-6">
                     <h1 className="text-2xl font-semibold">Approval Workflows</h1>
 
-                    <Link href={"/approval-workflows/create"}>
+                    <div className="flex flex-row">
-                        <Button
+                        <Link href={"/approval-workflows/create"}>
-                            color="purple"
+                            <Button
-                            variant="solid"
+                                color="purple"
-                            className="max-w-fit text-lg font-medium flex items-center gap-2 text-left"
+                                variant="solid"
-                        >
+                                className="min-w-fit text-lg font-medium flex items-center gap-2 text-left"
-                            <IoIosAddCircleOutline className="size-6" />
+                            >
-                            Configure New Workflows
+                                <IoIosAddCircleOutline className="size-6" />
-                        </Button>
+                                Configure New Workflows
-                    </Link>
+                            </Button>
+                        </Link>
+                    </div>
 
                     <div className="flex w-full items-center gap-4">
                         <div className="flex w-full flex-col gap-3">