Work on workflow builder:

- Made number of approvers dynamic with many select inputs as needed
- Tracking approval select input changes with step.assignees
- Fetching teachers and corporates from backend
- Responsive styling when rendering several select inputs

src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx

@@ -1,40 +1,47 @@
 import { WorkflowStep } from "@/interfaces/approval.workflow";
 import Option from "@/interfaces/option";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { BsTrash } from "react-icons/bs";
 import { LuGripHorizontal } from "react-icons/lu";
 import WorkflowStepNumber from "./WorkflowStepNumber";
 import WorkflowStepSelects from "./WorkflowStepSelects";
+import { CorporateUser, TeacherUser } from "@/interfaces/user";
+import { AiOutlineUserAdd } from "react-icons/ai";
 
-const teacherOptions: Option[] = [
-    // fetch from database?
-]
-
-const directorOptions: Option[] = [
-    // fetch from database?
-]
+interface Props extends WorkflowStep {
+    entityTeachers: TeacherUser[];
+    entityCorporates: CorporateUser[];
+    onSelectChange: (numberOfSelects: number, index: number, value: Option | null) => void;
+}
 
 export default function WorkflowEditableStepComponent({
     stepType,
     stepNumber,
-    completed = false,
     finalStep,
     onDelete,
-}: WorkflowStep) {
+    onSelectChange,
+    entityTeachers,
+    entityCorporates,
+}: Props) {
 
-    const [leftValue, setLeftValue] = useState<Option | null>(null);
-    const [rightValue, setRightValue] = useState<Option | null>(null);
+    const [selects, setSelects] = useState<(Option | null | undefined)[]>([null]);
 
-    let showSelects = false;
-    let leftPlaceholder = "";
-    let rightPlaceholder = "";
+    const showSelects = stepType === "approval-by";
 
-    if (stepType === "approval-by") {
-        // Show the selects only if it's an 'approval-by' step and in edit mode
-        showSelects = true;
-        leftPlaceholder = "Approval by";
-        rightPlaceholder = finalStep ? "2nd Director" : "2nd Teacher";
-    }
+    const handleAddSelectComponent = () => {
+        setSelects((prev) => {
+            const updated = [...prev, null];
+            onSelectChange(updated.length, updated.length - 1, null);
+            return updated;
+        });
+    };
+
+    const handleSelectChangeAt = (numberOfSelects: number, index: number, option: Option | null) => {
+        const updated = [...selects];
+        updated[index] = option;
+        setSelects(updated);
+        onSelectChange(numberOfSelects, index, option);
+    };
 
     return (
         <div className="flex w-full">
@@ -43,26 +50,22 @@ export default function WorkflowEditableStepComponent({
 
                 {/* Vertical Bar connecting steps */}
                 {!finalStep && (
-                    <div className="w-1 h-10 bg-mti-purple-dark"></div>
+                    <div className="w-1 h-full min-h-10 bg-mti-purple-dark"></div>
                 )}
             </div>
 
             {stepNumber !== 1 && !finalStep
-                ? <LuGripHorizontal className="ml-3 mt-2 cursor-grab active:cursor-grabbing" size={25} />
+                ? <LuGripHorizontal className="ml-3 mt-2 cursor-grab active:cursor-grabbing min-w-[25px] min-h-[25px]" />
                 : <div className="ml-3 mt-2" style={{ width: 25, height: 25 }}></div>
             }
 
             {showSelects && (
-                <div className="ml-10">
+                <div className="ml-10 mb-12">
                     <WorkflowStepSelects
-                        leftOptions={teacherOptions}
-                        rightOptions={teacherOptions}
-                        leftValue={leftValue}
-                        rightValue={rightValue}
-                        onLeftChange={setLeftValue}
-                        onRightChange={setRightValue}
-                        leftPlaceholder={leftPlaceholder}
-                        rightPlaceholder={rightPlaceholder}
+                        teachers={entityTeachers}
+                        corporates={entityCorporates}
+                        selects={selects}
+                        onSelectChange={handleSelectChangeAt}
                     />
                 </div>
             )}
@@ -81,18 +84,27 @@ export default function WorkflowEditableStepComponent({
                 </div>
             )}
 
-            {stepNumber !== 1 && !finalStep && (
-                <div className="ml-4 mt-2">
+            {stepNumber !== 1 && (
+                <div className="flex flex-row items-start mt-1.5 ml-3">
                     <button
-                        data-tip="Delete"
-                        className="cursor-pointer tooltip"
-                        onClick={onDelete}
                         type="button"
+                        onClick={handleAddSelectComponent}
+                        className="cursor-pointer"
                     >
-                        <BsTrash className="size-6 hover:text-mti-purple-light transition ease-in-out duration-300" />
+                        <AiOutlineUserAdd className="size-7 hover:text-mti-purple-light transition ease-in-out duration-300" />
                     </button>
+                    {!finalStep && (
+                        <button
+                            className="cursor-pointer"
+                            onClick={onDelete}
+                            type="button"
+                        >
+                            <BsTrash className="size-6 mt-0.5 ml-3 hover:text-mti-purple-light transition ease-in-out duration-300" />
+                        </button>
+                    )}
                 </div>
             )}
+
         </div>
 
     );