Prevent same input on selects from the same step.

Change behaviour of initial step to allow multiple assignees

src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx

@@ -1,12 +1,12 @@
 import { WorkflowStep } from "@/interfaces/approval.workflow";
 import Option from "@/interfaces/option";
-import { useEffect, useState } from "react";
+import { CorporateUser, TeacherUser } from "@/interfaces/user";
+import { useMemo, useState } from "react";
+import { AiOutlineUserAdd } from "react-icons/ai";
 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";
 
 interface Props extends WorkflowStep {
     entityTeachers: TeacherUser[];
@@ -15,7 +15,6 @@ interface Props extends WorkflowStep {
 }
 
 export default function WorkflowEditableStepComponent({
-    stepType,
     stepNumber,
     finalStep,
     onDelete,
@@ -26,7 +25,42 @@ export default function WorkflowEditableStepComponent({
 
     const [selects, setSelects] = useState<(Option | null | undefined)[]>([null]);
 
-    const showSelects = stepType === "approval-by";
+    const teacherOptions: Option[] = useMemo(() => 
+        entityTeachers
+            .map((teacher) => ({
+                value: teacher.id,
+                label: teacher.name,
+                icon: () => <img src={teacher.profilePicture} alt={teacher.name} />
+            }))
+            .sort((a, b) => a.label.localeCompare(b.label)),
+        [entityTeachers]
+    );
+
+    const corporateOptions: Option[] = useMemo(() => 
+        entityCorporates
+            .map((corporate) => ({
+                value: corporate.id,
+                label: corporate.name,
+                icon: () => <img src={corporate.profilePicture} alt={corporate.name} />
+            }))
+            .sort((a, b) => a.label.localeCompare(b.label)),
+        [entityCorporates]
+    );
+
+    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 handleAddSelectComponent = () => {
         setSelects((prev) => {
@@ -59,52 +93,34 @@ export default function WorkflowEditableStepComponent({
                 : <div className="ml-3 mt-2" style={{ width: 25, height: 25 }}></div>
             }
 
-            {showSelects && (
-                <div className="ml-10 mb-12">
-                    <WorkflowStepSelects
-                        teachers={entityTeachers}
-                        corporates={entityCorporates}
-                        selects={selects}
-                        onSelectChange={handleSelectChangeAt}
-                    />
-                </div>
-            )}
+            <div className="ml-10 mb-12">
+                <WorkflowStepSelects
+                    teachers={availableTeacherOptions}
+                    corporates={availableCorporateOptions}
+                    selects={selects}
+                    placeholder={stepNumber === 1 ? "Form Intake By:" : "Approval By:"}
+                    onSelectChange={handleSelectChangeAt}
+                />
+            </div>
 
-            {stepNumber === 1 && (
-                <div className="ml-10">
-                    <div className={"flex flex-row gap-0"}>
-                        {/* h-[40px] probably is not the best way to match the height with the select component, but for now should be ok */}
-                        <div className="flex items-center text-mti-gray-dim w-[275px] px-5 h-[40px] border rounded-l-2xl border-mti-gray-platinum">
-                            <span className="text-sm font-normal focus:outline-none">Form Intake</span>
-                        </div>
-                        <div className="flex items-center text-mti-gray-dim w-[275px] px-5 h-[40px] border rounded-r-2xl border-mti-gray-platinum">
-                            <span className="text-sm font-normal focus:outline-none">Prof. X</span>
-                        </div>
-                    </div>
-                </div>
-            )}
-
-            {stepNumber !== 1 && (
-                <div className="flex flex-row items-start mt-1.5 ml-3">
+            <div className="flex flex-row items-start mt-1.5 ml-3">
+                <button
+                    type="button"
+                    onClick={handleAddSelectComponent}
+                    className="cursor-pointer"
+                >
+                    <AiOutlineUserAdd className="size-7 hover:text-mti-purple-light transition ease-in-out duration-300" />
+                </button>
+                {stepNumber !== 1 && !finalStep && (
                     <button
-                        type="button"
-                        onClick={handleAddSelectComponent}
                         className="cursor-pointer"
+                        onClick={onDelete}
+                        type="button"
                     >
-                        <AiOutlineUserAdd className="size-7 hover:text-mti-purple-light transition ease-in-out duration-300" />
+                        <BsTrash className="size-6 mt-0.5 ml-3 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>
         </div>
 
     );

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"
+                className="max-w-fit text-lg font-medium flex items-center gap-2 text-left mb-8"
             >
                 <IoIosAddCircleOutline className="size-6" />
                 Add Step

src/components/ApprovalWorkflows/WorkflowStepSelects.tsx

@@ -1,11 +1,11 @@
 import Option from "@/interfaces/option";
 import Select from "../Low/Select";
-import { CorporateUser, TeacherUser } from "@/interfaces/user";
 
 interface Props {
-    teachers: TeacherUser[];
-    corporates: CorporateUser[];
+    teachers: Option[];
+    corporates: Option[];
     selects: (Option | null | undefined)[];
+    placeholder: string;
     onSelectChange: (numberOfSelects: number, index: number, value: Option | null) => void;
 }
 
@@ -13,20 +13,10 @@ export default function WorkflowStepSelects({
     teachers,
     corporates,
     selects,
+    placeholder,
     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-wrap gap-0"}
@@ -42,12 +32,12 @@ export default function WorkflowStepSelects({
                 }
 
                 return (
-                    <div key={index} className="min-w-fit">
+                    <div key={index} className="w-[275px]">
                         <Select
-                            options={[...teacherOptions, ...corporateOptions]}
+                            options={[...teachers, ...corporates]}
                             value={option}
                             onChange={(option) => onSelectChange(selects.length, index, option)}
-                            placeholder={"Approval By:"}
+                            placeholder={placeholder}
                             flat
                             isClearable
                             className={classes}

src/pages/approval-workflows/create.tsx

@@ -1,7 +1,6 @@
 import Layout from "@/components/High/Layout";
-import useUser from "@/hooks/useUser";
 import { sessionOptions } from "@/lib/session";
-import { mapBy, redirect, serialize } from "@/utils";
+import { redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
 import { withIronSessionSsr } from "iron-session/next";
@@ -14,14 +13,14 @@ import { v4 as uuidv4 } from 'uuid';
 import WorkflowForm from "@/components/ApprovalWorkflows/WorkflowForm";
 import Button from "@/components/Low/Button";
 import Input from "@/components/Low/Input";
+import Select from "@/components/Low/Select";
 import { ApprovalWorkflow } from "@/interfaces/approval.workflow";
+import { Entity } from "@/interfaces/entity";
+import { CorporateUser, TeacherUser, User } from "@/interfaces/user";
+import { getEntities } from "@/utils/entities.be";
+import { getEntitiesUsers } from "@/utils/users.be";
 import { useEffect, useState } from "react";
 import { MdFormatListBulletedAdd } from "react-icons/md";
-import { CorporateUser, TeacherUser, User } from "@/interfaces/user";
-import Select from "@/components/Low/Select";
-import { getEntitiesUsers, getUsers, getUserWithEntity } from "@/utils/users.be";
-import { getEntities } from "@/utils/entities.be";
-import { Entity } from "@/interfaces/entity";
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
     const user = await requestUser(req, res)