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/WorkflowStepSelects.tsx

@@ -1,53 +1,60 @@
 import Option from "@/interfaces/option";
 import Select from "../Low/Select";
+import { CorporateUser, TeacherUser } from "@/interfaces/user";
 
 interface Props {
-    leftOptions: Option[];
-    rightOptions: Option[];
-    leftValue?: Option | null;
-    rightValue?: Option | null;
-    onLeftChange: (value: Option | null) => void;
-    onRightChange: (value: Option | null) => void;
-    leftPlaceholder?: string;
-    rightPlaceholder?: string;
+    teachers: TeacherUser[];
+    corporates: CorporateUser[];
+    selects: (Option | null | undefined)[];
+    onSelectChange: (numberOfSelects: number, index: number, value: Option | null) => void;
 }
 
 export default function WorkflowStepSelects({
-    leftOptions,
-    rightOptions,
-    leftValue,
-    rightValue,
-    onLeftChange,
-    onRightChange,
-    leftPlaceholder = "Select",
-    rightPlaceholder = "Select",
+    teachers,
+    corporates,
+    selects,
+    onSelectChange,
 }: Props) {
+
+    const teacherOptions: Option[] = teachers.map((teacher) => ({
+        value: teacher.id,
+        label: teacher.name,
+        icon: () => <img src={teacher.profilePicture} alt={teacher.name} />
+    }));
+    const corporateOptions: Option[] = corporates.map((corporate) => ({
+        value: corporate.id,
+        label: corporate.name,
+        icon: () => <img src={corporate.profilePicture} alt={corporate.name} />
+    }));
+
     return (
         <div
-            className={"flex flex-row gap-0"}
+            className={"flex flex-wrap gap-0"}
         >
-            {/* Left Select */}
-            <div className="flex-1 w-[275px]">
-                <Select
-                    options={leftOptions}
-                    value={leftValue}
-                    onChange={onLeftChange}
-                    placeholder={leftPlaceholder}
-                    flat
-                    className={"px-2 rounded-none rounded-l-2xl"}
-                />
-            </div>
-            {/* Right Select */}
-            <div className="flex-1 w-[275px]">
-                <Select
-                    options={rightOptions}
-                    value={rightValue}
-                    onChange={onRightChange}
-                    placeholder={rightPlaceholder}
-                    flat
-                    className="px-2 rounded-none rounded-r-2xl"
-                />
-            </div>
+            {selects.map((option, index) => {
+                let classes = "px-2 rounded-none";
+                if (index === 0 && selects.length === 1) {
+                    classes += " rounded-l-2xl rounded-r-2xl";
+                } else if (index === 0) {
+                    classes += " rounded-l-2xl";
+                } else if (index === selects.length - 1) {
+                    classes += " rounded-r-2xl";
+                }
+
+                return (
+                    <div key={index} className="min-w-fit">
+                        <Select
+                            options={[...teacherOptions, ...corporateOptions]}
+                            value={option}
+                            onChange={(option) => onSelectChange(selects.length, index, option)}
+                            placeholder={"Approval By:"}
+                            flat
+                            isClearable
+                            className={classes}
+                        />
+                    </div>
+                );
+            })}
         </div>
     );
 }