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/pages/approval-workflows/create.tsx

@@ -1,7 +1,7 @@
 import Layout from "@/components/High/Layout";
 import useUser from "@/hooks/useUser";
 import { sessionOptions } from "@/lib/session";
-import { redirect, serialize } from "@/utils";
+import { mapBy, redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
 import { withIronSessionSsr } from "iron-session/next";
@@ -15,11 +15,11 @@ import WorkflowForm from "@/components/ApprovalWorkflows/WorkflowForm";
 import Button from "@/components/Low/Button";
 import Input from "@/components/Low/Input";
 import { ApprovalWorkflow } from "@/interfaces/approval.workflow";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { MdFormatListBulletedAdd } from "react-icons/md";
-import { User } from "@/interfaces/user";
+import { CorporateUser, TeacherUser, User } from "@/interfaces/user";
 import Select from "@/components/Low/Select";
-import { getUserWithEntity } from "@/utils/users.be";
+import { getEntitiesUsers, getUsers, getUserWithEntity } from "@/utils/users.be";
 import { getEntities } from "@/utils/entities.be";
 import { Entity } from "@/interfaces/entity";
 
@@ -30,10 +30,14 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
     if (shouldRedirectHome(user) || !["admin", "developer", "teacher", "corporate", "mastercorporate"].includes(user.type))
         return redirect("/")
 
+    const userEntitiesWithLabel = await getEntities(user.entities.map(entity => entity.id));
+
     return {
         props: serialize({
             user,
-            userEntitiesWithLabel: await getEntities(user.entities.map(entity => entity.id)),
+            userEntitiesWithLabel,
+            userEntitiesTeachers: await getEntitiesUsers(userEntitiesWithLabel.map(entity => entity.id), { type: "teacher" }) as TeacherUser[],
+            userEntitiesCorporates: await getEntitiesUsers(userEntitiesWithLabel.map(entity => entity.id), { type: "corporate" }) as CorporateUser[],
         }),
     };
 }, sessionOptions);
@@ -41,12 +45,34 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
 interface Props {
     user: User,
     userEntitiesWithLabel: Entity[],
+    userEntitiesTeachers: TeacherUser[],
+    userEntitiesCorporates: CorporateUser[],
 }
 
-export default function Home({ user, userEntitiesWithLabel }: Props) {
+export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers, userEntitiesCorporates }: Props) {
     const [workflows, setWorkflows] = useState<ApprovalWorkflow[]>([]);
     const [selectedWorkflowId, setSelectedWorkflowId] = useState<string | undefined>(undefined);
     const [entityId, setEntityId] = useState<string | undefined>(undefined);
+    const [entityTeachers, setEntityTeachers] = useState<TeacherUser[]>([]);
+    const [entityCorporates, setEntityCorporates] = useState<CorporateUser[]>([]);
+
+    useEffect(() => {
+        if (entityId) {
+            setEntityTeachers(
+                userEntitiesTeachers.filter(teacher =>
+                    teacher.entities.some(entity => entity.id === entityId)
+                )
+            );
+            setEntityCorporates(
+                userEntitiesCorporates.filter(corporate =>
+                    corporate.entities.some(entity => entity.id === entityId)
+                )
+            );
+        } else {
+            setEntityTeachers([]);
+            setEntityCorporates([]);
+        }
+    }, [entityId, userEntitiesTeachers, userEntitiesCorporates]);
 
     const currentWorkflow = workflows.find(wf => wf.id === selectedWorkflowId);
 
@@ -58,7 +84,6 @@ export default function Home({ user, userEntitiesWithLabel }: Props) {
 
     const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();
-        // Handle form submission logic
         console.log("Form submitted! Values:", workflows);
     };
 
@@ -80,6 +105,7 @@ export default function Home({ user, userEntitiesWithLabel }: Props) {
     };
 
     const onWorkflowChange = (updatedWorkflow: ApprovalWorkflow) => {
+        console.log(updatedWorkflow);
         setWorkflows(prev =>
             prev.map(wf => (wf.id === updatedWorkflow.id ? updatedWorkflow : wf))
         );
@@ -177,6 +203,7 @@ export default function Home({ user, userEntitiesWithLabel }: Props) {
                                         options={ENTITY_OPTIONS}
                                         onChange={(selectedEntity) => {
                                             if (selectedEntity?.value) {
+                                                setEntityId(selectedEntity.value);
                                                 const updatedWorkflow = {
                                                     ...currentWorkflow,
                                                     entityId: selectedEntity.value,
@@ -202,6 +229,8 @@ export default function Home({ user, userEntitiesWithLabel }: Props) {
                                 <WorkflowForm
                                     workflow={currentWorkflow}
                                     onWorkflowChange={onWorkflowChange}
+                                    entityTeachers={entityTeachers}
+                                    entityCorporates={entityCorporates}
                                 />
                             </>
                         )}