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