Merge branch 'approval-workflows' into develop

src/components/ApprovalWorkflows/RequestedBy.tsx

@@ -0,0 +1,32 @@
+import Image from "next/image";
+import React from "react";
+import { FaRegUser } from "react-icons/fa";
+
+interface Props {
+    prefix: string;
+    name: string;
+    profileImage: string;
+}
+
+export default function RequestedBy({ prefix, name, profileImage }: Props) {
+    return (
+        <div className="flex items-center space-x-3">
+            <div className="flex items-center justify-center w-12 h-12 bg-gray-100 rounded-lg border border-gray-300">
+                <FaRegUser className="text-mti-purple-dark size-5"/>
+            </div>
+            <div>
+                <p className="text-sm font-medium text-gray-800">Requested by</p>
+                <div className="flex items-center space-x-2">
+                    <p className="text-xs font-medium text-gray-800">{prefix} {name}</p>
+                    <img
+                        src={profileImage ? profileImage : "/defaultAvatar.png"}
+                        alt={name}
+                        width={24}
+                        height={24}
+                        className="w-6 h-6 rounded-full border-[1px] border-gray-400 border-opacity-50"
+                    />
+                </div>
+            </div>
+        </div>
+    );
+};

src/components/ApprovalWorkflows/StartedOn.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { PiCalendarDots } from "react-icons/pi";
+
+interface Props {
+    date: number;
+}
+
+export default function StartedOn({ date }: Props) {
+    const formattedDate = new Date(date);
+
+    const yearMonthDay = formattedDate.toISOString().split("T")[0];
+
+    const fullDateTime = formattedDate.toLocaleString("en-US", {
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+        hour12: false,
+    });
+
+    return (
+        <div className="flex items-center space-x-3">
+            <div className="flex items-center justify-center w-12 h-12 bg-gray-100 rounded-lg border border-gray-300">
+                <PiCalendarDots className="text-mti-purple-dark size-7" />
+            </div>
+            <div>
+                <p className="pb-1 text-sm font-medium text-gray-800">Started on</p>
+                <div className="flex items-center">
+                    <p
+                        className="text-xs font-medium text-gray-800"
+                        title={fullDateTime}
+                    >
+                        {yearMonthDay}
+                    </p>
+                </div>
+            </div>
+        </div>
+    );
+};

src/components/ApprovalWorkflows/Status.tsx

@@ -0,0 +1,23 @@
+import { ApprovalWorkflowStatus, ApprovalWorkflowStatusLabel } from "@/interfaces/approval.workflow";
+import React from "react";
+import { RiProgress5Line } from "react-icons/ri";
+
+interface Props {
+    status: ApprovalWorkflowStatus;
+}
+
+export default function Status({ status }: Props) {
+    return (
+        <div className="flex items-center space-x-3">
+            <div className="flex items-center justify-center w-12 h-12 bg-gray-100 rounded-lg border border-gray-300">
+                <RiProgress5Line className="text-mti-purple-dark size-7"/>
+            </div>
+            <div>
+                <p className="pb-1 text-sm font-medium text-gray-800">Status</p>
+                <div className="flex items-center">
+                    <p className="text-xs font-medium text-gray-800">{ApprovalWorkflowStatusLabel[status]}</p>
+                </div>
+            </div>
+        </div>
+    );
+};

src/components/ApprovalWorkflows/Tip.tsx

@@ -0,0 +1,14 @@
+import { MdTipsAndUpdates } from "react-icons/md";
+
+interface Props {
+    text: string;
+}
+
+export default function Tip({ text }: Props) {
+    return (
+        <div className="flex flex-row gap-3 text-gray-500 font-medium">
+            <MdTipsAndUpdates size={25} />
+            <p>{text}</p>
+        </div>
+    );
+};

src/components/ApprovalWorkflows/UserWithProfilePic.tsx

@@ -0,0 +1,24 @@
+import Image from "next/image";
+
+interface Props {
+    prefix: string;
+    name: string;
+    profileImage: string;
+    textSize?: string;
+}
+
+export default function UserWithProfilePic({ prefix, name, profileImage, textSize }: Props) {
+    const textClassName = `${textSize ? textSize : "text-xs"} font-medium`
+    return (
+        <div className="flex items-center space-x-2">
+            <p className={textClassName}>{prefix} {name}</p>
+            <img
+                src={profileImage ? profileImage : "/defaultAvatar.png"}
+                alt={name}
+                width={24}
+                height={24}
+                className="rounded-full h-auto border-[1px] border-gray-400 border-opacity-50"
+            />
+        </div>
+    );
+};

src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx

@@ -0,0 +1,136 @@
+import { EditableWorkflowStep } from "@/interfaces/approval.workflow";
+import Option from "@/interfaces/option";
+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";
+import { BsTrash } from "react-icons/bs";
+import { LuGripHorizontal } from "react-icons/lu";
+import WorkflowStepNumber from "./WorkflowStepNumber";
+import WorkflowStepSelects from "./WorkflowStepSelects";
+
+interface Props extends Pick<EditableWorkflowStep, 'stepNumber' | 'assignees' | 'finalStep' | 'onDelete'> {
+    entityApprovers: (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[];
+    onSelectChange: (numberOfSelects: number, index: number, value: Option | null) => void;
+    isCompleted: boolean,
+}
+
+export default function WorkflowEditableStepComponent({
+    stepNumber,
+    assignees = [null],
+    finalStep,
+    onDelete,
+    onSelectChange,
+    entityApprovers,
+    isCompleted,
+}: Props) {
+
+    const [selects, setSelects] = useState<(Option | null | undefined)[]>([null]);
+    const [isAdding, setIsAdding] = useState(false);
+
+    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)),
+        [entityApprovers]
+    );
+
+    useEffect(() => {
+        if (assignees && assignees.length > 0) {
+            const initialSelects = assignees.map((assignee) =>
+                typeof assignee === 'string' ? approverOptions.find(option => option.value === assignee) || null : null
+            );
+    
+            setSelects((prevSelects) => {
+                // This is needed to avoid unnecessary re-renders which can cause warning of a child component being re-rendered while parent is in the midle of also re-rendering.
+                const areEqual = initialSelects.length === prevSelects.length && initialSelects.every((option, idx) => option?.value === prevSelects[idx]?.value);
+                
+                if (!areEqual) {
+                    return initialSelects;
+                }
+                return prevSelects;
+            });
+        } 
+    }, [assignees, approverOptions]);
+
+    const selectedValues = useMemo(() => 
+        selects.filter((opt): opt is Option => !!opt).map(opt => opt.value),
+        [selects]
+    );
+
+    const availableApproverOptions = useMemo(() => 
+        approverOptions.filter(opt => !selectedValues.includes(opt.value)),
+        [approverOptions, selectedValues]
+    );
+
+    const handleAddSelectComponent = () => {
+        setIsAdding(true); // I hate to use flags... but it was the only way i was able to prevent onSelectChange to cause parent component from re-rendering in the midle of EditableWorkflowStep rerender.
+        setSelects(prev => [...prev, null]);
+    };
+
+    useEffect(() => {
+        if (isAdding) {
+            onSelectChange(selects.length, selects.length - 1, null);
+            setIsAdding(false); 
+        }
+    }, [selects.length, isAdding, onSelectChange]);
+
+    const handleSelectChangeAt = (numberOfSelects: number, index: number, option: Option | null) => {
+        const updated = [...selects];
+        updated[index] = option;
+        setSelects(updated);
+        onSelectChange(numberOfSelects, index, option);
+    };
+
+    return (
+        <div className="flex w-full">
+            <div className="flex flex-col items-center">
+                <WorkflowStepNumber stepNumber={stepNumber} completed={false} selected={false}  />
+
+                {/* Vertical Bar connecting steps */}
+                {!finalStep && (
+                    <div className="w-1 h-full min-h-10 bg-mti-purple-dark"></div>
+                )}
+            </div>
+
+            {stepNumber !== 1 && !finalStep && !isCompleted
+                ? <LuGripHorizontal className="ml-3 mt-2 cursor-grab active:cursor-grabbing min-w-[25px] min-h-[25px]" />
+                : <div className="ml-3 mt-2" style={{ width: 25, height: 25 }}></div>
+            }
+
+            <div className="ml-10 mb-12">
+                <WorkflowStepSelects
+                    approvers={availableApproverOptions}
+                    selects={selects}
+                    placeholder={stepNumber === 1 ? "Form Intake By:" : "Approval By:"}
+                    onSelectChange={handleSelectChangeAt}
+                    isCompleted={isCompleted}
+                />
+            </div>
+
+            <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
+                        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>
+
+    );
+};

src/components/ApprovalWorkflows/WorkflowForm.tsx

@@ -0,0 +1,203 @@
+import { EditableApprovalWorkflow, EditableWorkflowStep } from "@/interfaces/approval.workflow";
+import Option from "@/interfaces/option";
+import { CorporateUser, DeveloperUser, MasterCorporateUser, TeacherUser } from "@/interfaces/user";
+import { AnimatePresence, Reorder, motion } from "framer-motion";
+import { FaRegCheckCircle, FaSpinner } from "react-icons/fa";
+import { IoIosAddCircleOutline } from "react-icons/io";
+import Button from "../Low/Button";
+import Tip from "./Tip";
+import WorkflowEditableStepComponent from "./WorkflowEditableStepComponent";
+
+interface Props {
+    workflow: EditableApprovalWorkflow;
+    onWorkflowChange: (workflow: EditableApprovalWorkflow) => void;
+    entityApprovers: (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[];
+    entityAvailableFormIntakers?: (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[];
+    isLoading: boolean;
+    isRedirecting?: boolean;
+}
+
+export default function WorkflowForm({ workflow, onWorkflowChange, entityApprovers, entityAvailableFormIntakers, isLoading, isRedirecting }: Props) {
+    const lastStep = workflow.steps[workflow.steps.length - 1];
+
+    const renumberSteps = (steps: EditableWorkflowStep[]): EditableWorkflowStep[] => {
+        return steps.map((step, index) => ({
+            ...step,
+            stepNumber: index + 1,
+        }));
+    };
+
+    const addStep = () => {
+        const newStep: EditableWorkflowStep = {
+            key: Date.now(),
+            stepType: "approval-by",
+            stepNumber: workflow.steps.length,
+            completed: false,
+            assignees: [null],
+            firstStep: false,
+            finalStep: false,
+        };
+
+        const updatedSteps = [
+            ...workflow.steps.slice(0, -1),
+            newStep,
+            lastStep
+        ];
+        onWorkflowChange({ ...workflow, steps: renumberSteps(updatedSteps) });
+    };
+
+    const handleDelete = (key: number | undefined) => {
+        if (!key) return;
+
+        const updatedSteps = workflow.steps.filter((step) => step.key !== key);
+        onWorkflowChange({ ...workflow, steps: renumberSteps(updatedSteps) });
+    };
+
+    const handleSelectChange = (key: number | undefined, numberOfSelects: number, index: number, selectedOption: Option | null) => {
+        if (!key) return;
+
+        const updatedSteps = workflow.steps.map((step) => {
+            if (step.key !== key) return step;
+
+            const assignees = step.assignees ?? [];
+            let newAssignees = [...assignees];
+
+            if (numberOfSelects === assignees.length) { // means no new select was added and instead one was changed
+                newAssignees[index] = selectedOption?.value;
+            } else if (numberOfSelects === assignees.length + 1) { // means a new select was added
+                newAssignees.push(selectedOption?.value || null);
+            }
+
+            return { ...step, assignees: newAssignees };
+        });
+        onWorkflowChange({ ...workflow, steps: updatedSteps });
+    };
+
+    const handleReorder = (newOrder: EditableWorkflowStep[]) => {
+        let draggableIndex = 0;
+        const updatedSteps = workflow.steps.map((step) => {
+            if (!step.firstStep && !step.finalStep && !step.completed) {
+                return newOrder[draggableIndex++];
+            }
+            // Keep static steps as-is
+            return step;
+        });
+        onWorkflowChange({ ...workflow, steps: renumberSteps(updatedSteps) });
+    };
+
+
+    return (
+        <>
+            {workflow.entityId && workflow.name &&
+                <div>
+                    <div
+                        className="flex flex-col gap-6"
+                    >
+                        <Tip text="Introduce here all the steps associated with this instance." />
+                        <Button
+                            color="purple"
+                            variant="solid"
+                            onClick={addStep}
+                            type="button"
+                            className="max-w-fit text-lg font-medium flex items-center gap-2 text-left mb-7"
+                        >
+                            <IoIosAddCircleOutline className="size-6" />
+                            Add Step
+                        </Button>
+                    </div>
+
+                    <Reorder.Group
+                        axis="y"
+                        values={workflow.steps}
+                        onReorder={handleReorder}
+                        className="flex flex-col gap-0"
+                    >
+                        <AnimatePresence>
+                            {workflow.steps.map((step, index) =>
+                                step.completed || step.firstStep || step.finalStep ? (
+                                    <motion.div
+                                        key={step.key}
+                                        layout
+                                        initial={{ opacity: 0, y: -30 }}
+                                        animate={{ opacity: 1, y: 0 }}
+                                        exit={{ opacity: 0, x: 30 }}
+                                        transition={{ duration: 0.20 }}
+                                    >
+                                        <WorkflowEditableStepComponent
+                                            stepNumber={index + 1}
+                                            assignees={step.assignees}
+                                            finalStep={step.finalStep}
+                                            onDelete={() => handleDelete(step.key)}
+                                            onSelectChange={(numberOfSelects, idx, option) =>
+                                                handleSelectChange(step.key, numberOfSelects, idx, option)
+                                            }
+                                            entityApprovers={
+                                                step.stepNumber === 1 && entityAvailableFormIntakers
+                                                    ? entityAvailableFormIntakers
+                                                    : entityApprovers
+                                            }
+                                            isCompleted={step.completed}
+                                        />
+                                    </motion.div>
+                                ) : (
+                                    // Render non-completed steps as draggable items
+                                    <Reorder.Item
+                                        key={step.key}
+                                        value={step}
+                                        initial={{ opacity: 0, y: -30 }}
+                                        animate={{ opacity: 1, y: 0 }}
+                                        exit={{ opacity: 0, x: 30 }}
+                                        transition={{ duration: 0.20 }}
+                                        layout
+                                        drag={!step.firstStep && !step.finalStep}
+                                        dragListener={!step.firstStep && !step.finalStep}
+                                    >
+                                        <WorkflowEditableStepComponent
+                                            stepNumber={index + 1}
+                                            assignees={step.assignees}
+                                            finalStep={step.finalStep}
+                                            onDelete={() => handleDelete(step.key)}
+                                            onSelectChange={(numberOfSelects, idx, option) =>
+                                                handleSelectChange(step.key, numberOfSelects, idx, option)
+                                            }
+                                            entityApprovers={
+                                                step.stepNumber === 1 && entityAvailableFormIntakers
+                                                    ? entityAvailableFormIntakers
+                                                    : entityApprovers
+                                            }
+                                            isCompleted={step.completed}
+                                        />
+                                    </Reorder.Item>
+                                )
+                            )}
+                            <Button
+                                type="submit"
+                                color="purple"
+                                variant="solid"
+                                disabled={isLoading}
+                                className="max-w-fit text-lg font-medium flex items-center gap-2 text-left -mt-4"
+                            >
+                                {isRedirecting ? (
+                                    <>
+                                        <FaSpinner className="animate-spin size-5" />
+                                        Redirecting...
+                                    </>
+                                ) : isLoading ? (
+                                    <>
+                                        <FaSpinner className="animate-spin size-5" />
+                                        Loading...
+                                    </>
+                                ) : (
+                                    <>
+                                        <FaRegCheckCircle className="size-5" />
+                                        Confirm Exam Workflow Pipeline
+                                    </>
+                                )}
+                            </Button>
+                        </AnimatePresence>
+                    </Reorder.Group>
+                </div>
+            }
+        </>
+    );
+};

src/components/ApprovalWorkflows/WorkflowStepComponent.tsx

@@ -0,0 +1,101 @@
+import { getUserTypeLabel, getUserTypeLabelShort, WorkflowStep } from "@/interfaces/approval.workflow";
+import WorkflowStepNumber from "./WorkflowStepNumber";
+import clsx from "clsx";
+import { RiThumbUpLine } from "react-icons/ri";
+import { FaWpforms } from "react-icons/fa6";
+import { User } from "@/interfaces/user";
+import UserWithProfilePic from "./UserWithProfilePic";
+
+interface Props extends WorkflowStep {
+    workflowAssignees: User[],
+    currentStep: boolean,
+}
+
+export default function WorkflowStepComponent({
+    workflowAssignees,
+    currentStep,
+    stepType,
+    stepNumber,
+    completed,
+    rejected = false,
+    completedBy,
+    assignees,
+    finalStep,
+    selected = false,
+    onClick,
+}: Props) {
+
+    const completedByUser = workflowAssignees.find((assignee) => assignee.id === completedBy);
+    const assigneesUsers = workflowAssignees.filter(user => assignees.includes(user.id));
+
+    return (
+        <div
+            onClick={onClick}
+            className={clsx("flex flex-row gap-5 w-[600px] p-6 mb-5 rounded-2xl transition ease-in-out duration-300 cursor-pointer", {
+                "bg-mti-red-ultralight": rejected && selected,
+                "bg-mti-purple-ultralight": selected,
+            })}
+        >
+            <div className="relative flex flex-col items-center">
+                <WorkflowStepNumber stepNumber={stepNumber} selected={selected} completed={completed} finalStep={finalStep} rejected={rejected} />
+
+                {/* Vertical Bar connecting steps */}
+                {!finalStep && (
+                    <div className="absolute w-1 bg-mti-purple-dark -bottom-20 top-11"></div>
+                )}
+            </div>
+
+            <div className="mt-1.5">
+                {stepType === "approval-by" ? (
+                    <RiThumbUpLine size={25} />
+                ) : (
+                    <FaWpforms size={25} />
+                )
+                }
+            </div>
+
+            <div className="mt-1 flex flex-col gap-0">
+                {completed && completedBy && rejected ? (
+                    <div className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
+                        <p className="text-sm font-medium text-gray-800">{stepType === "approval-by" ? `Approval: ${getUserTypeLabel(completedByUser!.type)} Approval` : `Form Intake: ${getUserTypeLabel(completedByUser!.type)} Intake`} </p>
+                        <UserWithProfilePic
+                            prefix={`Rejected by: ${getUserTypeLabelShort(completedByUser!.type)}`}
+                            name={completedByUser!.name}
+                            profileImage={completedByUser!.profilePicture}
+                        />
+                    </div>
+                ) : completed && completedBy && !rejected ? (
+                    <div className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
+                        <p className="text-sm font-medium text-gray-800">{stepType === "approval-by" ? `Approval: ${getUserTypeLabel(completedByUser!.type)} Approval` : `Form Intake: ${getUserTypeLabel(completedByUser!.type)} Intake`} </p>
+                        <UserWithProfilePic
+                            prefix={`Completed by: ${getUserTypeLabelShort(completedByUser!.type)}`}
+                            name={completedByUser!.name}
+                            profileImage={completedByUser!.profilePicture}
+                        />
+                    </div>
+                ) : !completed && currentStep ? (
+                    <div className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
+                        <p className="text-sm font-medium text-gray-800">{stepType === "approval-by" ? `Approval:` : `Form Intake:`} </p>
+                        In Progress... Assignees:
+                        <div className="flex flex-row flex-wrap gap-3 items-center">
+                            {assigneesUsers.map(user => (
+                                <span key={user.id}>
+                                    <UserWithProfilePic
+                                        prefix={getUserTypeLabelShort(user.type)}
+                                        name={user.name}
+                                        profileImage={user.profilePicture}
+                                    />
+                                </span>
+                            ))}
+                        </div>
+                    </div>
+                ) : (
+                    <div className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
+                        <p className="text-sm font-medium text-gray-800">{stepType === "approval-by" ? `Approval:` : `Form Intake:`} </p>
+                        Waiting for previous steps...
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};

src/components/ApprovalWorkflows/WorkflowStepNumber.tsx

@@ -0,0 +1,31 @@
+import { WorkflowStep } from "@/interfaces/approval.workflow";
+import clsx from "clsx";
+import { IoCheckmarkDoneSharp, IoCheckmarkSharp } from "react-icons/io5";
+import { RxCross2 } from "react-icons/rx";
+
+type Props = Pick<WorkflowStep, 'stepNumber' | 'completed' | 'finalStep' | 'selected' | 'rejected'>
+
+export default function WorkflowStepNumber({ stepNumber, selected = false, completed, rejected, finalStep }: Props) {
+    return (
+        <div
+            className={clsx(
+                'flex items-center justify-center min-w-11 min-h-11 rounded-full',
+                {
+                    'bg-mti-red-dark text-mti-red-ultralight': rejected,
+                    'bg-mti-purple-dark text-mti-purple-ultralight': selected,
+                    'bg-mti-purple-ultralight text-gray-500': !selected,
+                }
+            )}
+        >
+            {rejected ? (
+                <RxCross2 className="text-xl font-bold" size={25}/>
+            ) : completed && finalStep ? (
+                <IoCheckmarkDoneSharp className="text-xl font-bold" size={25} />
+            ) : completed && !finalStep ? (
+                <IoCheckmarkSharp className="text-xl font-bold" size={25} />
+            ) : (
+                <span className="text-lg font-semibold">{stepNumber}</span>
+            )}
+        </div>
+    );
+};

src/components/ApprovalWorkflows/WorkflowStepSelects.tsx

@@ -0,0 +1,51 @@
+import Option from "@/interfaces/option";
+import Select from "../Low/Select";
+
+interface Props {
+    approvers: Option[];
+    selects: (Option | null | undefined)[];
+    placeholder: string;
+    onSelectChange: (numberOfSelects: number, index: number, value: Option | null) => void;
+    isCompleted: boolean;
+}
+
+export default function WorkflowStepSelects({
+    approvers,
+    selects,
+    placeholder,
+    onSelectChange,
+    isCompleted,
+}: Props) {
+
+    return (
+        <div
+            className={"flex flex-wrap gap-0"}
+        >
+            {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="w-[275px]">
+                        <Select
+                            options={approvers}
+                            value={option}
+                            onChange={(option) => onSelectChange(selects.length, index, option)}
+                            placeholder={placeholder}
+                            flat
+                            isClearable
+                            className={classes}
+                            disabled={isCompleted}
+                        />
+                    </div>
+                );
+            })}
+        </div>
+    );
+}

src/components/ExamEditor/SettingsEditor/level.tsx

@@ -17,6 +17,7 @@ import ListeningComponents from "./listening/components";
 import ReadingComponents from "./reading/components";
 import SpeakingComponents from "./speaking/components";
 import SectionPicker from "./Shared/SectionPicker";
+import { getExamById } from "@/utils/exams";
 
 
 const LevelSettings: React.FC = () => {
@@ -194,7 +195,7 @@ const LevelSettings: React.FC = () => {
                         category: s.settings.category
                     };
                 }).filter(part => part.exercises.length > 0),
-                isDiagnostic: false,
+                isDiagnostic: true, // using isDiagnostic to keep exam hidden until the respective approval workflow is completed.
                 minTimer,
                 module: "level",
                 id: title,
@@ -213,6 +214,36 @@ const LevelSettings: React.FC = () => {
                 URL.revokeObjectURL(url);
             });
 
+            const requestBody = await (async () => {
+                const handledExam = await getExamById("level", result.data.id);
+                return {
+                    examAuthor: handledExam?.createdBy ?? "Unknown Author",
+                    examEntities: handledExam?.entities ?? [],
+                    examId: handledExam?.id ?? "Unknown ID",
+                    examModule: "level"
+                };
+            })();
+            await axios
+                .post(`/api/approval-workflows`, requestBody)
+                .then((response) => {
+                    if (response.status === 200) {
+                        toast.success(`Approval Workflows for exam have been successfully created`);
+                    } else if (response.status === 207) {
+                        toast.warning(
+                            `Approval Workflows were partially created. Exam author might not have a configured workflow for all its entities.`
+                        );
+                    }
+                })
+                .catch((reason) => {
+                    if (reason.response?.status === 404) {
+                        toast.error("No configured workflow found for examAuthor for any of its entities.");
+                    } else {
+                        toast.error(
+                            "Something went wrong while creating approval workflow, please try again later."
+                        );
+                    }
+                });
+
         } catch (error: any) {
             console.error('Error submitting exam:', error);
             toast.error(

src/components/ExamEditor/SettingsEditor/listening/index.tsx

@@ -17,6 +17,7 @@ import { usePersistentExamStore } from "@/stores/exam";
 import { playSound } from "@/utils/sound";
 import { toast } from "react-toastify";
 import ListeningComponents from "./components";
+import { getExamById } from "@/utils/exams";
 
 const ListeningSettings: React.FC = () => {
     const router = useRouter();
@@ -137,7 +138,7 @@ const ListeningSettings: React.FC = () => {
                             category: s.settings.category
                         };
                     }),
-                    isDiagnostic: false,
+                    isDiagnostic: true, // using isDiagnostic to keep exam hidden until the respective approval workflow is completed.
                     minTimer,
                     module: "listening",
                     id: title,
@@ -151,6 +152,36 @@ const ListeningSettings: React.FC = () => {
                 playSound("sent");
                 toast.success(`Submitted Exam ID: ${result.data.id}`);
 
+                const requestBody = await (async () => {
+                    const handledExam = await getExamById("listening", result.data.id);
+                    return {
+                        examAuthor: handledExam?.createdBy ?? "Unknown Author",
+                        examEntities: handledExam?.entities ?? [],
+                        examId: handledExam?.id ?? "Unknown ID",
+                        examModule: "listening"
+                    };
+                })();
+                await axios
+                    .post(`/api/approval-workflows`, requestBody)
+                    .then((response) => {
+                        if (response.status === 200) {
+                            toast.success(`Approval Workflows for exam have been successfully created`);
+                        } else if (response.status === 207) {
+                            toast.warning(
+                                `Approval Workflows were partially created. Exam author might not have a configured workflow for all its entities.`
+                            );
+                        }
+                    })
+                    .catch((reason) => {
+                        if (reason.response?.status === 404) {
+                            toast.error("No configured workflow found for examAuthor for any of its entities.");
+                        } else {
+                            toast.error(
+                                "Something went wrong while creating approval workflow, please try again later."
+                            );
+                        }
+                    });
+
             } else {
                 toast.error('No audio sections found in the exam! Please either import them or generate them.');
             }

src/components/ExamEditor/SettingsEditor/reading/index.tsx

@@ -12,6 +12,7 @@ import axios from "axios";
 import { playSound } from "@/utils/sound";
 import { toast } from "react-toastify";
 import ReadingComponents from "./components";
+import { getExamById } from "@/utils/exams";
 
 const ReadingSettings: React.FC = () => {
     const router = useRouter();
@@ -46,15 +47,15 @@ const ReadingSettings: React.FC = () => {
         {
             label: "Preset: Reading Passage 1",
             value: "Welcome to {part} of the {label}. You will read texts relating to everyday topics and situations. These may include advertisements, brochures, manuals, or official documents. Answer questions that test your ability to locate specific information and understand main ideas."
-          },
-          {
-            label: "Preset: Reading Passage 2", 
+        },
+        {
+            label: "Preset: Reading Passage 2",
             value: "Welcome to {part} of the {label}. You will read texts dealing with general interest topics that may include news articles, company policies, or workplace documents. Answer questions testing your understanding of main ideas, specific details, and the author's views."
-          },
-          {
+        },
+        {
             label: "Preset: Reading Passage 3",
             value: "Welcome to {part} of the {label}. You will read longer academic texts that may include journal articles, academic essays, or research papers. Answer questions testing your ability to understand complex arguments, identify key points, and follow the development of ideas."
-          }
+        }
     ];
 
     const canPreviewOrSubmit = sections.some(
@@ -75,7 +76,7 @@ const ReadingSettings: React.FC = () => {
                     category: localSettings.category
                 };
             }),
-            isDiagnostic: false,
+            isDiagnostic: true, // using isDiagnostic to keep exam hidden until the respective approval workflow is completed.
             minTimer,
             module: "reading",
             id: title,
@@ -89,11 +90,37 @@ const ReadingSettings: React.FC = () => {
             .then((result) => {
                 playSound("sent");
                 toast.success(`Submitted Exam ID: ${result.data.id}`);
+                return getExamById("reading", result.data.id);
+            })
+            .then((handledExam) => {
+                const requestBody = {
+                    examAuthor: handledExam?.createdBy ?? "Unknown Author",
+                    examEntities: handledExam?.entities ?? [],
+                    examId: handledExam?.id ?? "Unknown ID",
+                    examModule: "reading"
+                };
+
+                return axios.post(`/api/approval-workflows`, requestBody);
+            })
+            .then((response) => {
+                if (response.status === 200) {
+                    toast.success(`Approval Workflows for exam have been successfully created`);
+                } else if (response.status === 207) {
+                    toast.warning(
+                        `Approval Workflows were partially created. Exam author might not have a configured workflow for all its entities.`
+                    );
+                }
             })
             .catch((error) => {
-                console.log(error);
-                toast.error(error.response.data.error || "Something went wrong while submitting, please try again later.");
-            })
+                if (error.response && error.response.status === 404) {
+                    toast.error("No configured workflow found for examAuthor for any of its entities.");
+                } else {
+                    toast.error(
+                        error.response?.data?.error ||
+                        "Something went wrong, please try again later."
+                    );
+                }
+            });
     }
 
     const preview = () => {

src/components/ExamEditor/SettingsEditor/speaking/index.tsx

@@ -11,6 +11,7 @@ import openDetachedTab from "@/utils/popout";
 import axios from "axios";
 import { playSound } from "@/utils/sound";
 import SpeakingComponents from "./components";
+import { getExamById } from "@/utils/exams";
 
 export interface Avatar {
     name: string;
@@ -180,7 +181,7 @@ const SpeakingSettings: React.FC = () => {
             minTimer,
             module: "speaking",
             id: title,
-            isDiagnostic: false,
+            isDiagnostic: true, // using isDiagnostic to keep exam hidden until the respective approval workflow is completed.
             variant: undefined,
             difficulty,
             instructorGender: "varied",
@@ -194,6 +195,36 @@ const SpeakingSettings: React.FC = () => {
           Array.from(urlMap.values()).forEach(url => {
             URL.revokeObjectURL(url);
           });
+
+          const requestBody = await (async () => {
+            const handledExam = await getExamById("speaking", result.data.id);
+            return {
+              examAuthor: handledExam?.createdBy ?? "Unknown Author",
+              examEntities: handledExam?.entities ?? [],
+              examId: handledExam?.id ?? "Unknown ID",
+              examModule: "speaking"
+            };
+          })();
+          await axios
+            .post(`/api/approval-workflows`, requestBody)
+            .then((response) => {
+              if (response.status === 200) {
+                toast.success(`Approval Workflows for exam have been successfully created`);
+              } else if (response.status === 207) {
+                toast.warning(
+                  `Approval Workflows were partially created. Exam author might not have a configured workflow for all its entities.`
+                );
+              }
+            })
+            .catch((reason) => {
+              if (reason.response?.status === 404) {
+                toast.error("No configured workflow found for examAuthor for any of its entities.");
+              } else {
+                toast.error(
+                  "Something went wrong while creating approval workflow, please try again later."
+                );
+              }
+            });
       
         } catch (error: any) {
           toast.error(

src/components/ExamEditor/SettingsEditor/writing/index.tsx

@@ -12,6 +12,8 @@ import axios from "axios";
 import { playSound } from "@/utils/sound";
 import { toast } from "react-toastify";
 import WritingComponents from "./components";
+import { getExamById } from "@/utils/exams";
+import { ApprovalWorkflow } from "@/interfaces/approval.workflow";
 
 const WritingSettings: React.FC = () => {
     const router = useRouter();
@@ -129,7 +131,7 @@ const WritingSettings: React.FC = () => {
                 minTimer,
                 module: "writing",
                 id: title,
-                isDiagnostic: false,
+                isDiagnostic: true, // using isDiagnostic to keep exam hidden until the respective approval workflow is completed.
                 variant: undefined,
                 difficulty,
                 private: isPrivate,
@@ -140,6 +142,36 @@ const WritingSettings: React.FC = () => {
             playSound("sent");
             toast.success(`Submitted Exam ID: ${result.data.id}`);
 
+            const requestBody = await (async () => {
+                const handledExam = await getExamById("writing", result.data.id);
+                return {
+                    examAuthor: handledExam?.createdBy ?? "Unknown Author",
+                    examEntities: handledExam?.entities ?? [],
+                    examId: handledExam?.id ?? "Unknown ID",
+                    examModule: "writing"
+                };
+            })();
+            await axios
+                .post(`/api/approval-workflows`, requestBody)
+                .then((response) => {
+                    if (response.status === 200) {
+                        toast.success(`Approval Workflows for exam have been successfully created`);
+                    } else if (response.status === 207) {
+                        toast.warning(
+                            `Approval Workflows were partially created. Exam author might not have a configured workflow for all its entities.`
+                        );
+                    } 
+                })
+                .catch((reason) => {
+                    if (reason.response?.status === 404) {
+                        toast.error("No configured workflow found for examAuthor for any of its entities.");
+                    } else {
+                        toast.error(
+                            "Something went wrong while creating approval workflow, please try again later."
+                        );
+                    }
+                });
+
         } catch (error: any) {
             console.error('Error submitting exam:', error);
             toast.error(

src/components/Sidebar.tsx

@@ -13,6 +13,7 @@ import {
   BsClipboardData,
   BsPeople,
 } from "react-icons/bs";
+import { GoWorkflow } from "react-icons/go";
 import { CiDumbbell } from "react-icons/ci";
 import { RiLogoutBoxFill } from "react-icons/ri";
 import Link from "next/link";
@@ -149,6 +150,7 @@ export default function Sidebar({
         viewSettings: true,
         viewPaymentRecord: true,
         viewGeneration: true,
+        viewApprovalWorkflows: true,
       };
     }
     const sidebarPermissions: { [key: string]: boolean } = {
@@ -160,6 +162,7 @@ export default function Sidebar({
       viewSettings: false,
       viewPaymentRecord: false,
       viewGeneration: false,
+      viewApprovalWorkflows: false,
     };
 
     if (!user || !user?.type) return sidebarPermissions;
@@ -197,6 +200,7 @@ export default function Sidebar({
       (entitiesAllowGeneration.length > 0 || isAdmin)
     ) {
       sidebarPermissions["viewGeneration"] = true;
+      sidebarPermissions["viewApprovalWorkflows"] = true;
     }
     if (
       getTypesOfUser(["agent"]).includes(user.type) &&
@@ -364,6 +368,17 @@ export default function Sidebar({
             isMinimized={isMinimized}
           />
         )}
+        {sidebarPermissions["viewApprovalWorkflows"] && (
+          <Nav
+            disabled={disableNavigation}
+            Icon={GoWorkflow}
+            label="Approval Workflows"
+            path={path}
+            keyPath="/approval-workflows"
+            isMinimized={isMinimized}
+          />
+        )}
+
       </div>
       <div className="-xl:flex flex-col gap-3 xl:hidden">
         <Nav
@@ -432,6 +447,16 @@ export default function Sidebar({
             isMinimized
           />
         )}
+        {sidebarPermissions["viewApprovalWorkflows"] && (
+          <Nav
+            disabled={disableNavigation}
+            Icon={GoWorkflow}
+            label="Approval Workflows"
+            path={path}
+            keyPath="/approval-workflows"
+            isMinimized
+          />
+        )}
       </div>
 
       <div className="2xl:fixed bottom-12 flex flex-col gap-0 -2xl:mt-8">