refactor fetched users into single array and replace Image tag with img

src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx

@@ -1,6 +1,6 @@
 import { EditableWorkflowStep } from "@/interfaces/approval.workflow";
 import Option from "@/interfaces/option";
-import { CorporateUser, TeacherUser } from "@/interfaces/user";
+import { CorporateUser, DeveloperUser, MasterCorporateUser, TeacherUser } from "@/interfaces/user";
 import Image from "next/image";
 import { useEffect, useMemo, useState } from "react";
 import { AiOutlineUserAdd } from "react-icons/ai";
@@ -10,8 +10,7 @@ import WorkflowStepNumber from "./WorkflowStepNumber";
 import WorkflowStepSelects from "./WorkflowStepSelects";
 
 interface Props extends Pick<EditableWorkflowStep, 'stepNumber' | 'assignees' | 'finalStep' | 'onDelete'> {
-    entityTeachers: TeacherUser[];
-    entityCorporates: CorporateUser[];
+    entityApprovers: (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[];
     onSelectChange: (numberOfSelects: number, index: number, value: Option | null) => void;
 }
 
@@ -21,41 +20,27 @@ export default function WorkflowEditableStepComponent({
     finalStep,
     onDelete,
     onSelectChange,
-    entityTeachers,
-    entityCorporates,
+    entityApprovers,
 }: Props) {
 
     const [selects, setSelects] = useState<(Option | null | undefined)[]>([null]);
     const [isAdding, setIsAdding] = useState(false);
 
-    const teacherOptions: Option[] = useMemo(() => 
-        entityTeachers
-            .map((teacher) => ({
-                value: teacher.id,
-                label: teacher.name,
-                icon: () => <Image src={teacher.profilePicture} alt={teacher.name} />
+    const approverOptions: Option[] = useMemo(() => 
+        entityApprovers
+            .map((approver) => ({
+                value: approver.id,
+                label: approver.name,
+                icon: () => <img src={approver.profilePicture} alt={approver.name} />
             }))
             .sort((a, b) => a.label.localeCompare(b.label)),
-        [entityTeachers]
+        [entityApprovers]
     );
 
-    const corporateOptions: Option[] = useMemo(() => 
-        entityCorporates
-            .map((corporate) => ({
-                value: corporate.id,
-                label: corporate.name,
-                icon: () => <Image src={corporate.profilePicture} alt={corporate.name} />
-            }))
-            .sort((a, b) => a.label.localeCompare(b.label)),
-        [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
+                typeof assignee === 'string' ? approverOptions.find(option => option.value === assignee) || null : null
             );
     
             setSelects((prevSelects) => {
@@ -68,21 +53,16 @@ export default function WorkflowEditableStepComponent({
                 return prevSelects;
             });
         } 
-    }, [assignees, allOptions]);
+    }, [assignees, approverOptions]);
 
     const selectedValues = useMemo(() => 
         selects.filter((opt): opt is Option => !!opt).map(opt => opt.value),
         [selects]
     );
 
-    const availableTeacherOptions = useMemo(() => 
-        teacherOptions.filter(opt => !selectedValues.includes(opt.value)),
-        [teacherOptions, selectedValues]
-    );
-
-    const availableCorporateOptions = useMemo(() => 
-        corporateOptions.filter(opt => !selectedValues.includes(opt.value)),
-        [corporateOptions, selectedValues]
+    const availableApproverOptions = useMemo(() => 
+        approverOptions.filter(opt => !selectedValues.includes(opt.value)),
+        [approverOptions, selectedValues]
     );
 
     const handleAddSelectComponent = () => {
@@ -122,8 +102,7 @@ export default function WorkflowEditableStepComponent({
 
             <div className="ml-10 mb-12">
                 <WorkflowStepSelects
-                    teachers={availableTeacherOptions}
-                    corporates={availableCorporateOptions}
+                    approvers={availableApproverOptions}
                     selects={selects}
                     placeholder={stepNumber === 1 ? "Form Intake By:" : "Approval By:"}
                     onSelectChange={handleSelectChangeAt}