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

@@ -40,7 +40,6 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
     return {
         props: serialize({
             user,
-            teachers: await getUsers({ type: "teacher" }) as TeacherUser[],
             userEntitiesWithLabel: await getEntities(user.entities.map(entity => entity.id)),
         }),
     };
@@ -85,10 +84,6 @@ interface Props {
 }
 
 export default function ApprovalWorkflows({ user, teachers, userEntitiesWithLabel }: Props) {
-    console.log(user);
-    console.log(teachers);
-    console.log(userEntitiesWithLabel);
-
 
     const ENTITY_OPTIONS = [
         {
@@ -208,7 +203,7 @@ export default function ApprovalWorkflows({ user, teachers, userEntitiesWithLabe
 
                 return (
                     <div className="flex flex-wrap gap-2">
-                        {approvers.map((approver: string, index: number) => (
+                        {approvers.map((approver: string | null | undefined, index: number) => (
                             <span
                                 key={index}
                                 className="inline-block rounded-full px-3 py-1 text-sm font-medium bg-gray-100 border border-gray-300 text-gray-900"