Merge branch 'approval-workflows' into develop

src/pages/approval-workflows/[id]/edit.tsx

@@ -0,0 +1,192 @@
+import RequestedBy from "@/components/ApprovalWorkflows/RequestedBy";
+import StartedOn from "@/components/ApprovalWorkflows/StartedOn";
+import Status from "@/components/ApprovalWorkflows/Status";
+import WorkflowForm from "@/components/ApprovalWorkflows/WorkflowForm";
+import Layout from "@/components/High/Layout";
+import { ApprovalWorkflow, EditableApprovalWorkflow, EditableWorkflowStep, getUserTypeLabelShort } from "@/interfaces/approval.workflow";
+import { CorporateUser, DeveloperUser, MasterCorporateUser, TeacherUser, User } from "@/interfaces/user";
+import { sessionOptions } from "@/lib/session";
+import { redirect, serialize } from "@/utils";
+import { requestUser } from "@/utils/api";
+import { getApprovalWorkflow } from "@/utils/approval.workflows.be";
+import { shouldRedirectHome } from "@/utils/navigation.disabled";
+import { getEntityUsers } from "@/utils/users.be";
+import axios from "axios";
+import { LayoutGroup, motion } from "framer-motion";
+import { withIronSessionSsr } from "iron-session/next";
+import Head from "next/head";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { BsChevronLeft } from "react-icons/bs";
+import { toast, ToastContainer } from "react-toastify";
+
+export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => {
+    const user = await requestUser(req, res);
+    if (!user) return redirect("/login")
+
+    if (shouldRedirectHome(user) || !["admin", "developer", "teacher", "corporate", "mastercorporate"].includes(user.type))
+        return redirect("/")
+
+    const { id } = params as { id: string };
+
+    const workflow: ApprovalWorkflow | null = await getApprovalWorkflow("active-workflows", id);
+
+    if (!workflow)
+        return redirect("/approval-workflows")
+
+    return {
+        props: serialize({
+            user,
+            workflow,
+            workflowEntityApprovers: await getEntityUsers(workflow.entityId, undefined, { type: { $in: ["teacher", "corporate", "mastercorporate", "developer"] } }) as (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[],
+        }),
+    };
+}, sessionOptions);
+
+interface Props {
+    user: User,
+    workflow: ApprovalWorkflow,
+    workflowEntityApprovers: (TeacherUser | CorporateUser | MasterCorporateUser | DeveloperUser)[],
+}
+
+export default function Home({ user, workflow, workflowEntityApprovers }: Props) {
+    const [updatedWorkflow, setUpdatedWorkflow] = useState<EditableApprovalWorkflow | null>(null);
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+
+    useEffect(() => {
+        const editableSteps: EditableWorkflowStep[] = workflow.steps.map(step => ({
+            key: step.stepNumber + 999, // just making sure they are unique because new steps that users add will have key=3 key=4 etc
+            stepType: step.stepType,
+            stepNumber: step.stepNumber,
+            completed: step.completed,
+            completedBy: step.completedBy || undefined,
+            completedDate: step.completedDate || undefined,
+            assignees: step.assignees,
+            firstStep: step.firstStep || false,
+            finalStep: step.finalStep || false,
+            onDelete: undefined,
+        }));
+
+        const editableWorkflow: EditableApprovalWorkflow = {
+            id: workflow._id?.toString() ?? "",
+            name: workflow.name,
+            entityId: workflow.entityId,
+            requester: user.id, // should it change to the editor?
+            startDate: workflow.startDate,
+            modules: workflow.modules,
+            status: workflow.status,
+            steps: editableSteps,
+        };
+
+        setUpdatedWorkflow(editableWorkflow);
+    }, []);
+
+    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        setIsLoading(true);
+
+        if (!updatedWorkflow) {
+            setIsLoading(false);
+            return;
+        }
+
+        for (const step of updatedWorkflow.steps) {
+            if (step.assignees.every(x => !x)) {
+                toast.warning("There is at least one empty step in the workflow.");
+                setIsLoading(false);
+                return;
+            }
+        }
+
+        const filteredWorkflow: ApprovalWorkflow = {
+            ...updatedWorkflow,
+            steps: updatedWorkflow.steps.map(step => ({
+                ...step,
+                assignees: step.assignees.filter((assignee): assignee is string => assignee !== null && assignee !== undefined)
+            }))
+        };
+
+        axios
+            .put(`/api/approval-workflows/${updatedWorkflow.id}/edit`, filteredWorkflow)
+            .then(() => {
+                toast.success("Approval Workflow edited successfully.");
+                setIsLoading(false);
+            })
+            .catch((reason) => {
+                if (reason.response.status === 401) {
+                    toast.error("Not logged in!");
+                } else if (reason.response.status === 403) {
+                    toast.error("You do not have permission to edit Approval Workflows!");
+                } else {
+                    toast.error("Something went wrong, please try again later.");
+                }
+                setIsLoading(false);
+                console.log("Submitted Values:", filteredWorkflow);
+                return;
+            })
+    };
+
+    const onWorkflowChange = (updatedWorkflow: EditableApprovalWorkflow) => {
+        setUpdatedWorkflow(updatedWorkflow);
+    };
+
+    return (
+        <>
+            <Head>
+                <title> Edit Workflow | EnCoach</title>
+                <meta
+                    name="description"
+                    content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
+                />
+                <meta name="viewport" content="width=device-width, initial-scale=1" />
+                <link rel="icon" href="/favicon.ico" />
+            </Head>
+            <ToastContainer />
+            <section className="flex items-center gap-2">
+                <Link
+                    href="/approval-workflows"
+                    className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
+                    <BsChevronLeft />
+                </Link>
+                <h1 className="text-2xl font-semibold">{workflow.name}</h1>
+            </section>
+
+            <section className="flex flex-col gap-6">
+                <div className="flex flex-row gap-6">
+                    <RequestedBy
+                        prefix={getUserTypeLabelShort(user.type)}
+                        name={user.name}
+                        profileImage={user.profilePicture}
+                    />
+                    <StartedOn
+                        date={workflow.startDate}
+                    />
+                    <Status
+                        status={workflow.status}
+                    />
+                </div>
+            </section>
+
+            <form onSubmit={handleSubmit}>
+                <LayoutGroup key={workflow.name}>
+                    <motion.div
+                        key="form"
+                        initial={{ opacity: 0, y: -30 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        exit={{ opacity: 0, x: 60 }}
+                        transition={{ duration: 0.20 }}
+                    >
+                        {updatedWorkflow &&
+                            <WorkflowForm
+                                workflow={updatedWorkflow}
+                                onWorkflowChange={onWorkflowChange}
+                                entityApprovers={workflowEntityApprovers}
+                                isLoading={isLoading}
+                            />
+                        }
+                    </motion.div>
+                </LayoutGroup>
+            </form>
+        </>
+    );
+}

src/pages/approval-workflows/[id]/index.tsx

@@ -0,0 +1,559 @@
+import RequestedBy from "@/components/ApprovalWorkflows/RequestedBy";
+import StartedOn from "@/components/ApprovalWorkflows/StartedOn";
+import Status from "@/components/ApprovalWorkflows/Status";
+import Tip from "@/components/ApprovalWorkflows/Tip";
+import UserWithProfilePic from "@/components/ApprovalWorkflows/UserWithProfilePic";
+import WorkflowStepComponent from "@/components/ApprovalWorkflows/WorkflowStepComponent";
+import Layout from "@/components/High/Layout";
+import Button from "@/components/Low/Button";
+import useApprovalWorkflow from "@/hooks/useApprovalWorkflow";
+import { ApprovalWorkflow, getUserTypeLabelShort, WorkflowStep } from "@/interfaces/approval.workflow";
+import { User } from "@/interfaces/user";
+import { sessionOptions } from "@/lib/session";
+import useExamStore from "@/stores/exam";
+import { redirect, serialize } from "@/utils";
+import { requestUser } from "@/utils/api";
+import { getApprovalWorkflow } from "@/utils/approval.workflows.be";
+import { getExamById } from "@/utils/exams";
+import { shouldRedirectHome } from "@/utils/navigation.disabled";
+import { getSpecificUsers, getUser } from "@/utils/users.be";
+import axios from "axios";
+import { AnimatePresence, LayoutGroup, motion } from "framer-motion";
+import { withIronSessionSsr } from "iron-session/next";
+import Head from "next/head";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useState } from "react";
+import { BsChevronLeft } from "react-icons/bs";
+import { FaSpinner, FaWpforms } from "react-icons/fa6";
+import { FiSave } from "react-icons/fi";
+import { IoMdCheckmarkCircleOutline } from "react-icons/io";
+import { IoDocumentTextOutline } from "react-icons/io5";
+import { MdOutlineDoubleArrow } from "react-icons/md";
+import { RiThumbUpLine } from "react-icons/ri";
+import { RxCrossCircled } from "react-icons/rx";
+import { TiEdit } from "react-icons/ti";
+import { toast, ToastContainer } from "react-toastify";
+
+export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => {
+    const user = await requestUser(req, res);
+    if (!user) return redirect("/login")
+
+    if (shouldRedirectHome(user) || !["admin", "developer", "teacher", "corporate", "mastercorporate"].includes(user.type))
+        return redirect("/")
+
+    const { id } = params as { id: string };
+
+    const workflow: ApprovalWorkflow | null = await getApprovalWorkflow("active-workflows", id);
+
+    if (!workflow)
+        return redirect("/approval-workflows")
+
+    const allAssigneeIds: string[] = [
+        ...new Set(
+            workflow.steps
+                .map(step => step.assignees)
+                .flat()
+        )
+    ];
+
+    return {
+        props: serialize({
+            user,
+            initialWorkflow: workflow,
+            id,
+            workflowAssignees: await getSpecificUsers(allAssigneeIds),
+            workflowRequester: await getUser(workflow.requester),
+        }),
+    };
+}, sessionOptions);
+
+interface Props {
+    user: User,
+    initialWorkflow: ApprovalWorkflow,
+    id: string,
+    workflowAssignees: User[],
+    workflowRequester: User,
+}
+
+export default function Home({ user, initialWorkflow, id, workflowAssignees, workflowRequester }: Props) {
+
+    const { workflow, reload, isLoading } = useApprovalWorkflow(id);
+
+    const currentWorkflow = workflow || initialWorkflow;
+
+    let currentStepIndex = currentWorkflow.steps.findIndex(step => !step.completed || step.rejected);
+    if (currentStepIndex === -1)
+        currentStepIndex = currentWorkflow.steps.length - 1;
+
+    const [selectedStepIndex, setSelectedStepIndex] = useState<number>(currentStepIndex);
+    const [selectedStep, setSelectedStep] = useState<WorkflowStep>(currentWorkflow.steps[selectedStepIndex]);
+    const [isPanelOpen, setIsPanelOpen] = useState(true);
+    const [comments, setComments] = useState<string>(selectedStep.comments || "");
+    const [viewExamIsLoading, setViewExamIsLoading] = useState<boolean>(false);
+    const [editExamIsLoading, setEditExamIsLoading] = useState<boolean>(false);
+
+    const router = useRouter();
+
+    const handleStepClick = (index: number, stepInfo: WorkflowStep) => {
+        setSelectedStep(stepInfo);
+        setSelectedStepIndex(index);
+        setComments(stepInfo.comments || "");
+        setIsPanelOpen(true);
+    };
+
+    const handleSaveComments = () => {
+        const updatedWorkflow: ApprovalWorkflow = {
+            ...currentWorkflow,
+            steps: currentWorkflow.steps.map((step, index) =>
+                index === selectedStepIndex ?
+                    {
+                        ...step,
+                        comments: comments,
+                    }
+                    : step
+            )
+        };
+
+        axios
+            .put(`/api/approval-workflows/${id}`, updatedWorkflow)
+            .then(() => {
+                toast.success("Comments saved successfully.");
+                reload();
+            })
+            .catch((reason) => {
+                if (reason.response.status === 401) {
+                    toast.error("Not logged in!");
+                } else if (reason.response.status === 403) {
+                    toast.error("You do not have permission to approve this step!");
+                } else {
+                    toast.error("Something went wrong, please try again later.");
+                }
+                console.log("Submitted Values:", updatedWorkflow);
+                return;
+            })
+    };
+
+    const handleApproveStep = () => {
+        const isLastStep = (selectedStepIndex + 1 === currentWorkflow.steps.length);
+        if (isLastStep) {
+            if (!confirm(`Are you sure you want to approve the last step? Doing so will approve the exam.`)) return;
+        }
+
+        const updatedWorkflow: ApprovalWorkflow = {
+            ...currentWorkflow,
+            status: selectedStepIndex === currentWorkflow.steps.length - 1 ? "approved" : "pending",
+            steps: currentWorkflow.steps.map((step, index) =>
+                index === selectedStepIndex ?
+                    {
+                        ...step,
+                        completed: true,
+                        completedBy: user.id,
+                        completedDate: Date.now(),
+                    }
+                    : step
+            )
+        };
+
+        axios
+            .put(`/api/approval-workflows/${id}`, updatedWorkflow)
+            .then(() => {
+                toast.success("Step approved successfully.");
+                reload();
+            })
+            .catch((reason) => {
+                if (reason.response.status === 401) {
+                    toast.error("Not logged in!");
+                } else if (reason.response.status === 403) {
+                    toast.error("You do not have permission to approve this step!");
+                } else {
+                    toast.error("Something went wrong, please try again later.");
+                }
+                console.log("Submitted Values:", updatedWorkflow);
+                return;
+            })
+
+        if (isLastStep) {
+            setIsPanelOpen(false);
+            const examModule = currentWorkflow.modules[0];
+            const examId = currentWorkflow.examId;
+
+            axios
+                .patch(`/api/exam/${examModule}/${examId}`, { isDiagnostic: false })
+                .then(() => toast.success(`The exam was successfuly approved and this workflow has been completed.`))
+                .catch((reason) => {
+                    if (reason.response.status === 404) {
+                        toast.error("Exam not found!");
+                        return;
+                    }
+
+                    if (reason.response.status === 403) {
+                        toast.error("You do not have permission to update this exam!");
+                        return;
+                    }
+
+                    toast.error("Something went wrong, please try again later.");
+                })
+                .finally(reload);
+        } else {
+            handleStepClick(selectedStepIndex + 1, currentWorkflow.steps[selectedStepIndex + 1]);
+        }
+    };
+
+    const handleRejectStep = () => {
+        if (!confirm(`Are you sure you want to reject this step? Doing so will terminate this approval workflow.`)) return;
+
+        const updatedWorkflow: ApprovalWorkflow = {
+            ...currentWorkflow,
+            status: "rejected",
+            steps: currentWorkflow.steps.map((step, index) =>
+                index === selectedStepIndex ?
+                    {
+                        ...step,
+                        completed: true,
+                        completedBy: user.id,
+                        completedDate: Date.now(),
+                        rejected: true,
+                    }
+                    : step
+            )
+        };
+
+        axios
+            .put(`/api/approval-workflows/${id}`, updatedWorkflow)
+            .then(() => {
+                toast.success("Step rejected successfully.");
+                reload();
+            })
+            .catch((reason) => {
+                if (reason.response.status === 401) {
+                    toast.error("Not logged in!");
+                } else if (reason.response.status === 403) {
+                    toast.error("You do not have permission to approve this step!");
+                } else {
+                    toast.error("Something went wrong, please try again later.");
+                }
+                console.log("Submitted Values:", updatedWorkflow);
+                return;
+            })
+    };
+
+    const dispatch = useExamStore((store) => store.dispatch);
+    const handleViewExam = async () => {
+        setViewExamIsLoading(true);
+        const examModule = currentWorkflow.modules[0];
+        const examId = currentWorkflow.examId;
+
+        if (examModule && examId) {
+            const exam = await getExamById(examModule, examId.trim());
+            if (!exam) {
+                toast.error(
+                    "Unknown Exam ID! Please make sure you selected the right module and entered the right exam ID",
+                    { toastId: "invalid-exam-id" }
+                );
+                setViewExamIsLoading(false);
+                return;
+            }
+            dispatch({
+                type: "INIT_EXAM",
+                payload: { exams: [exam], modules: [examModule] },
+            });
+            router.push("/exam");
+        }
+    }
+
+    const handleEditExam = () => {
+        setEditExamIsLoading(true);
+        const examModule = currentWorkflow.modules[0];
+        const examId = currentWorkflow.examId;
+
+        router.push(`/generation?id=${examId}&module=${examModule}`);
+    }
+
+    return (
+        <>
+            <Head>
+                <title> Workflow | EnCoach</title>
+                <meta
+                    name="description"
+                    content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
+                />
+                <meta name="viewport" content="width=device-width, initial-scale=1" />
+                <link rel="icon" href="/favicon.ico" />
+            </Head>
+            <ToastContainer />
+
+            <section className="flex items-center gap-2">
+                <Link
+                    href="/approval-workflows"
+                    className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
+                    <BsChevronLeft />
+                </Link>
+                <h1 className="text-2xl font-semibold">{currentWorkflow.name}</h1>
+            </section>
+
+            <section className="flex flex-col gap-6">
+                <div className="flex flex-row gap-6">
+                    <RequestedBy
+                        prefix={getUserTypeLabelShort(workflowRequester.type)}
+                        name={workflowRequester.name}
+                        profileImage={workflowRequester.profilePicture}
+                    />
+                    <StartedOn
+                        date={currentWorkflow.startDate}
+                    />
+                    <Status
+                        status={currentWorkflow.status}
+                    />
+                </div>
+                <div className="flex flex-row gap-3">
+                    <Button
+                        color="purple"
+                        variant="solid"
+                        onClick={handleViewExam}
+                        disabled={viewExamIsLoading}
+                        padding="px-6 py-2"
+                        className="w-[240px] text-lg flex items-center justify-center gap-2 text-left"
+                    >
+                        {viewExamIsLoading ? (
+                            <>
+                                <FaSpinner className="animate-spin size-5" />
+                                Loading...
+                            </>
+                        ) : (
+                            <>
+                                <IoDocumentTextOutline />
+                                Load Exam
+                            </>
+                        )}
+                    </Button>
+                    <Button
+                        color="purple"
+                        variant="solid"
+                        onClick={handleEditExam}
+                        padding="px-6 py-2"
+                        disabled={(!currentWorkflow.steps[currentStepIndex].assignees.includes(user.id) && user.type !== "admin" && user.type !== "developer") || editExamIsLoading}
+                        className="w-[240px] text-lg flex items-center justify-center gap-2 text-left"
+                    >
+                        {editExamIsLoading ? (
+                            <>
+                                <FaSpinner className="animate-spin size-5" />
+                                Loading...
+                            </>
+                        ) : (
+                            <>
+                                <TiEdit size={20} />
+                                Edit Exam
+                            </>
+                        )}
+                    </Button>
+
+                </div>
+                {currentWorkflow.steps.find((step) => !step.completed) === undefined &&
+                    <Tip text="All steps in this instance have been completed." />
+                }
+            </section>
+
+            <section className="flex flex-col gap-0">
+                {currentWorkflow.steps.map((step, index) => (
+                    <WorkflowStepComponent
+                        workflowAssignees={workflowAssignees}
+                        key={index}
+                        completed={step.completed}
+                        completedBy={step.completedBy}
+                        rejected={step.rejected}
+                        stepNumber={step.stepNumber}
+                        stepType={step.stepType}
+                        assignees={step.assignees}
+                        finalStep={index === currentWorkflow.steps.length - 1}
+                        currentStep={index === currentStepIndex}
+                        selected={index === selectedStepIndex}
+                        onClick={() => handleStepClick(index, step)}
+                    />
+                ))}
+            </section>
+
+            {/* Side panel */}
+            <AnimatePresence mode="wait">
+                <LayoutGroup key="sidePanel">
+                    <section className={`absolute inset-y-0 right-0 h-full bg-mti-purple-ultralight bg-opacity-50 shadow-xl shadow-mti-purple transition-all duration-300 overflow-hidden ${isPanelOpen ? 'w-[500px]' : 'w-0'}`}>
+                        {isPanelOpen && selectedStep && (
+                            <motion.div
+                                className="p-6"
+                                key={selectedStep.stepNumber}
+                                initial={{ opacity: 0, x: 30 }}
+                                animate={{ opacity: 1, x: 0 }}
+                                exit={{ opacity: 0, x: 30 }}
+                                transition={{ duration: 0.2 }}
+                            >
+                                <hr className="my-4 h-[4px] bg-mti-purple-ultralight rounded-full w-full" />
+                                <div className="flex flex-row gap-2">
+                                    <p className="text-2xl font-medium text-left align-middle">Step {selectedStepIndex + 1}</p>
+                                    <div className="ml-auto flex flex-row">
+                                        <button
+                                            className="min-w-fit max-h-fit text-lg font-medium flex items-center gap-2 text-left"
+                                            onClick={() => setIsPanelOpen(false)}
+                                        >
+                                            Collapse
+                                            <MdOutlineDoubleArrow size={20} />
+                                        </button>
+                                    </div>
+                                </div>
+
+                                <hr className="my-4 h-[4px] bg-mti-purple-ultralight rounded-full w-full" />
+
+                                <div>
+                                    <div className="my-8 flex flex-row gap-4 items-center text-lg font-medium">
+                                        {selectedStep.stepType === "approval-by" ? (
+                                            <>
+                                                <RiThumbUpLine size={30} />
+                                                Approval Step
+                                            </>
+                                        ) : (
+                                            <>
+                                                <FaWpforms size={30} />
+                                                Form Intake Step
+                                            </>
+                                        )
+                                        }
+                                    </div>
+
+                                    {selectedStep.completed ? (
+                                        <div className={"text-base font-medium text-gray-500 flex flex-col gap-6"}>
+                                            {selectedStep.rejected ? "Rejected" : "Approved"} on {new Date(selectedStep.completedDate!).toLocaleString("en-CA", {
+                                                year: "numeric",
+                                                month: "2-digit",
+                                                day: "2-digit",
+                                                hour: "2-digit",
+                                                minute: "2-digit",
+                                                second: "2-digit",
+                                                hour12: false,
+                                            }).replace(", ", " at ")}
+                                            <div className="flex flex-row gap-1 text-sm">
+                                                <p className="text-base">{selectedStep.rejected ? "Rejected" : "Approved"} by:</p>
+                                                {(() => {
+                                                    const assignee = workflowAssignees.find(
+                                                        (assignee) => assignee.id === selectedStep.completedBy
+                                                    );
+                                                    return assignee ? (
+                                                        <UserWithProfilePic
+                                                            textSize="text-base"
+                                                            prefix={getUserTypeLabelShort(assignee.type)}
+                                                            name={assignee.name}
+                                                            profileImage={assignee.profilePicture}
+                                                        />
+                                                    ) : (
+                                                        "Unknown"
+                                                    );
+                                                })()}
+                                            </div>
+                                            <p className="text-sm">No additional actions are required.</p>
+                                        </div>
+
+                                    ) : (
+                                        <div className={"text-base font-medium text-gray-500 mb-6"}>
+                                            One assignee is required to sign off to complete this step:
+                                            <div className="flex flex-col gap-2 mt-3">
+                                                {workflowAssignees.filter(user => selectedStep.assignees.includes(user.id)).map(user => (
+                                                    <span key={user.id}>
+                                                        <UserWithProfilePic
+                                                            textSize="text-sm"
+                                                            prefix={`- ${getUserTypeLabelShort(user.type)}`}
+                                                            name={user.name}
+                                                            profileImage={user.profilePicture}
+                                                        />
+                                                    </span>
+                                                ))}
+                                            </div>
+                                        </div>
+                                    )}
+
+                                    {selectedStepIndex === currentStepIndex && !selectedStep.completed && !selectedStep.rejected &&
+                                        <div className="flex flex-row gap-2 ">
+                                            <Button
+                                                type="submit"
+                                                color="purple"
+                                                variant="solid"
+                                                disabled={(!selectedStep.assignees.includes(user.id) && user.type !== "admin" && user.type !== "developer") || isLoading}
+                                                onClick={handleApproveStep}
+                                                padding="px-6 py-2"
+                                                className="mb-3 w-full text-lg flex items-center justify-center gap-2 text-left"
+                                            >
+                                                {isLoading ? (
+                                                    <>
+                                                        <FaSpinner className="animate-spin size-5" />
+                                                        Loading...
+                                                    </>
+                                                ) : (
+                                                    <>
+                                                        <IoMdCheckmarkCircleOutline size={20} />
+                                                        Approve Step
+                                                    </>
+                                                )}
+                                            </Button>
+                                            <Button
+                                                type="submit"
+                                                color="red"
+                                                variant="solid"
+                                                disabled={(!selectedStep.assignees.includes(user.id) && user.type !== "admin" && user.type !== "developer") || isLoading}
+                                                onClick={handleRejectStep}
+                                                padding="px-6 py-2"
+                                                className="mb-3 w-1/2 text-lg flex items-center justify-center gap-2 text-left"
+                                            >
+                                                {isLoading ? (
+                                                    <>
+                                                        <FaSpinner className="animate-spin size-5" />
+                                                        Loading...
+                                                    </>
+                                                ) : (
+                                                    <>
+                                                        <RxCrossCircled size={20} />
+                                                        Reject
+                                                    </>
+                                                )}
+                                            </Button>
+                                        </div>
+                                    }
+
+                                    <hr className="my-4 h-[4px] bg-mti-purple-ultralight rounded-full w-full" />
+
+                                    <textarea
+                                        value={comments}
+                                        onChange={(e) => setComments(e.target.value)}
+                                        placeholder="Input comments here"
+                                        className="w-full h-64 p-2 border-2 rounded-xl shadow-lg focus:border-mti-purple focus:outline-none mt-3 resize-none"
+                                    />
+
+                                    <Button
+                                        type="submit"
+                                        color="purple"
+                                        variant="solid"
+                                        onClick={handleSaveComments}
+                                        disabled={isLoading}
+                                        padding="px-6 py-2"
+                                        className="mt-6 mb-3 w-full text-lg flex items-center justify-center gap-2 text-left"
+                                    >
+                                        {isLoading ? (
+                                            <>
+                                                <FaSpinner className="animate-spin size-5" />
+                                                Loading...
+                                            </>
+                                        ) : (
+                                            <>
+                                                <FiSave size={20} />
+                                                Save Comments
+                                            </>
+                                        )}
+                                    </Button>
+
+                                    <hr className="my-4 h-[4px] bg-mti-purple-ultralight rounded-full w-full" />
+
+                                </div>
+                            </motion.div>
+                        )}
+                    </section>
+                </LayoutGroup>
+            </AnimatePresence>
+        </>
+    );
+}