- Implement cloning of workflow

- Entity change will now only clear the assignees instead of the whole workflow
- Fix bug where side panel was showing all workflow assignees instead of just selected step assignees

src/demo/approval_workflows.json

@@ -17,6 +17,7 @@
                 "completed": true,
                 "completedBy": "231c84b2-a65a-49a9-803c-c664d84b13e0",
                 "completedDate": 1737712243906,
+                "firstStep": true,
                 "assignees": [
                     "fd5fce42-4bcc-4150-a143-b484e750b265",
                     "231c84b2-a65a-49a9-803c-c664d84b13e0",
@@ -28,11 +29,11 @@
                 "stepType": "approval-by",
                 "stepNumber": 2,
                 "completed": true,
-                "completedBy": "c5fc1514-1a94-4f8c-a046-a62099097a50",
+                "completedBy": "rTh9yz6Z1WOidHlVOSGInlpoxrk1",
                 "completedDate": 1737712243906,
                 "assignees": [
                     "fd5fce42-4bcc-4150-a143-b484e750b265",
-                    "231c84b2-a65a-49a9-803c-c664d84b13e0",
+                    "rTh9yz6Z1WOidHlVOSGInlpoxrk1",
                     "c5fc1514-1a94-4f8c-a046-a62099097a50"
                 ],
                 "comments": "This is a random comment"
@@ -53,9 +54,7 @@
                 "stepNumber": 4,
                 "completed": false,
                 "assignees": [
-                    "fd5fce42-4bcc-4150-a143-b484e750b265",
+                    "fd5fce42-4bcc-4150-a143-b484e750b265"
-                    "231c84b2-a65a-49a9-803c-c664d84b13e0",
-                    "c5fc1514-1a94-4f8c-a046-a62099097a50"
                 ],
                 "comments": "This is a random comment"
             },
@@ -65,8 +64,7 @@
                 "completed": false,
                 "finalStep": true,
                 "assignees": [
-                    "fd5fce42-4bcc-4150-a143-b484e750b265",
+                    "rTh9yz6Z1WOidHlVOSGInlpoxrk1",
-                    "231c84b2-a65a-49a9-803c-c664d84b13e0",
                     "c5fc1514-1a94-4f8c-a046-a62099097a50"
                 ],
                 "comments": "This is a random comment"
@@ -94,6 +92,7 @@
                 "completed": true,
                 "completedBy": "fd5fce42-4bcc-4150-a143-b484e750b265",
                 "completedDate": 1737712243906,
+                "firstStep": true,
                 "assignees": [
                     "fd5fce42-4bcc-4150-a143-b484e750b265",
                     "231c84b2-a65a-49a9-803c-c664d84b13e0",
@@ -105,11 +104,11 @@
                 "stepType": "approval-by",
                 "stepNumber": 2,
                 "completed": true,
-                "completedBy": "231c84b2-a65a-49a9-803c-c664d84b13e0",
+                "completedBy": "rTh9yz6Z1WOidHlVOSGInlpoxrk1",
                 "completedDate": 1737712243906,
                 "assignees": [
                     "fd5fce42-4bcc-4150-a143-b484e750b265",
-                    "231c84b2-a65a-49a9-803c-c664d84b13e0",
+                    "rTh9yz6Z1WOidHlVOSGInlpoxrk1",
                     "c5fc1514-1a94-4f8c-a046-a62099097a50"
                 ],
                 "comments": "This is a random comment"
@@ -134,9 +133,7 @@
                 "completedBy": "231c84b2-a65a-49a9-803c-c664d84b13e0",
                 "completedDate": 1737712243906,
                 "assignees": [
-                    "fd5fce42-4bcc-4150-a143-b484e750b265",
+                    "fd5fce42-4bcc-4150-a143-b484e750b265"
-                    "231c84b2-a65a-49a9-803c-c664d84b13e0",
-                    "c5fc1514-1a94-4f8c-a046-a62099097a50"
                 ],
                 "comments": "This is a random comment"
             },
@@ -147,11 +144,59 @@
                 "completedBy": "c5fc1514-1a94-4f8c-a046-a62099097a50",
                 "completedDate": 1737712243906,
                 "finalStep": true,
+                "assignees": [
+                    "rTh9yz6Z1WOidHlVOSGInlpoxrk1",
+                    "c5fc1514-1a94-4f8c-a046-a62099097a50"
+                ],
+                "comments": "This is a random comment"
+            }
+        ]
+    },
+    {
+        "id": "bbbbkscbka-asacaca-acawesae",
+        "name": "English Exam 3rd Quarter 2025",
+        "entityId": "49ed2f0c-7d0d-46e4-9576-7cf19edc4980",
+        "modules": [
+            "reading"
+        ],
+        "requester": "rTh9yz6Z1WOidHlVOSGInlpoxrk1",
+        "startDate": 1737712243906,
+        "status": "rejected",
+        "steps": [
+            {
+                "stepType": "form-intake",
+                "stepNumber": 1,
+                "completed": true,
+                "completedBy": "231c84b2-a65a-49a9-803c-c664d84b13e0",
+                "completedDate": 1737712243906,
+                "firstStep": true,
                 "assignees": [
                     "fd5fce42-4bcc-4150-a143-b484e750b265",
                     "231c84b2-a65a-49a9-803c-c664d84b13e0",
                     "c5fc1514-1a94-4f8c-a046-a62099097a50"
                 ],
+                "comments": "This is a random comment\nThis is a random comment\nThis is a random comment\nThis is a random comment\nThis is a random comment\n"
+            },
+            {
+                "stepType": "approval-by",
+                "stepNumber": 2,
+                "completed": true,
+                "completedBy": "rTh9yz6Z1WOidHlVOSGInlpoxrk1",
+                "completedDate": 1737712243906,
+                "assignees": [
+                    "rTh9yz6Z1WOidHlVOSGInlpoxrk1",
+                    "c5fc1514-1a94-4f8c-a046-a62099097a50"
+                ],
+                "comments": "This is a random comment"
+            },
+            {
+                "stepType": "approval-by",
+                "stepNumber": 3,
+                "completed": false,
+                "finalStep": true,
+                "assignees": [
+                    "rTh9yz6Z1WOidHlVOSGInlpoxrk1"
+                ],
                 "comments": "This is a random comment"
             }
         ]

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

@@ -0,0 +1,260 @@
+import Tip from "@/components/ApprovalWorkflows/Tip";
+import WorkflowForm from "@/components/ApprovalWorkflows/WorkflowForm";
+import Layout from "@/components/High/Layout";
+import Button from "@/components/Low/Button";
+import Input from "@/components/Low/Input";
+import Select from "@/components/Low/Select";
+import { ApprovalWorkflow, EditableApprovalWorkflow, EditableWorkflowStep } from "@/interfaces/approval.workflow";
+import { Entity } from "@/interfaces/entity";
+import { CorporateUser, TeacherUser, User } from "@/interfaces/user";
+import { sessionOptions } from "@/lib/session";
+import { redirect, serialize } from "@/utils";
+import { requestUser } from "@/utils/api";
+import { getEntities } from "@/utils/entities.be";
+import { shouldRedirectHome } from "@/utils/navigation.disabled";
+import { getEntitiesUsers } from "@/utils/users.be";
+import { uuidv4 } from "@firebase/util";
+import { AnimatePresence, 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 { GrClearOption } from "react-icons/gr";
+import { ToastContainer } from "react-toastify";
+import approvalWorkflowsData from '../../../demo/approval_workflows.json'; // to test locally
+
+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 };
+
+    // replace later with await getApprovalWorkflow(id).
+    const approvalWorkflowsDataAsWorkflows = approvalWorkflowsData as ApprovalWorkflow[];
+    const workflow: ApprovalWorkflow | undefined = approvalWorkflowsDataAsWorkflows.find(workflow => workflow.id === id);
+
+    if (!workflow)
+        return redirect("/approval-workflows")
+
+    const userEntitiesWithLabel = await getEntities(user.entities.map(entity => entity.id));
+
+    return {
+        props: serialize({
+            user,
+            workflow,
+            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);
+
+interface Props {
+    user: User,
+    workflow: ApprovalWorkflow,
+    userEntitiesWithLabel: Entity[],
+    userEntitiesTeachers: TeacherUser[],
+    userEntitiesCorporates: CorporateUser[],
+}
+
+export default function Home({ user, workflow, userEntitiesWithLabel, userEntitiesTeachers, userEntitiesCorporates }: Props) {
+    const [cloneWorkflow, setCloneWorkflow] = useState<EditableApprovalWorkflow | null>(null);
+    const [entityId, setEntityId] = useState<string | null | undefined>(workflow.entityId);
+    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 ENTITY_OPTIONS = userEntitiesWithLabel.map(entity => ({
+        label: entity.label,
+        value: entity.id,
+        filter: (x: EditableApprovalWorkflow) => x.entityId === entity.id,
+    }));
+
+    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,
+            assignees: step.assignees.map(id => id),
+            firstStep: step.firstStep || false,
+            finalStep: step.finalStep || false,
+            onDelete: undefined,
+        }));
+
+        const editableWorkflow: EditableApprovalWorkflow = {
+            id: uuidv4(),
+            name: workflow.name,
+            entityId: workflow.entityId,
+            requester: user.id,
+            startDate: Date.now(),
+            modules: workflow.modules,
+            status: "pending",
+            steps: editableSteps,
+        };
+
+        setCloneWorkflow(editableWorkflow);
+    }, []);
+
+    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        console.log("Form submitted! Values:", cloneWorkflow);
+    };
+
+    const onWorkflowChange = (wf: EditableApprovalWorkflow) => {
+        setCloneWorkflow(wf);
+    }
+
+    const handleEntityChange = (wf: EditableApprovalWorkflow, entityId: string) => {
+        const updatedWorkflow = {
+            ...wf,
+            entityId: entityId,
+            steps: wf.steps.map(step => ({
+                ...step,
+                assignees: step.assignees.map(() => null)
+            }))
+        }
+        onWorkflowChange(updatedWorkflow);
+    }
+
+    const handleResetWorkflow = () => {
+        if (!confirm("This action will reset all the fields in this workflow. Are you sure you want to proceed?")) return;
+        const newId = uuidv4();
+        const newWorkflow: EditableApprovalWorkflow = {
+            id: newId,
+            name: "",
+            entityId: "",
+            modules: [],
+            requester: user.id,
+            startDate: Date.now(),
+            status: "pending",
+            steps: [
+                { key: 9998, stepType: "form-intake", stepNumber: 1, firstStep: true, finalStep: false, assignees: [null] },
+                { key: 9999, stepType: "approval-by", stepNumber: 2, firstStep: false, finalStep: true, assignees: [null] },
+            ],
+        };
+        setCloneWorkflow(newWorkflow);
+    }
+
+    return (
+        <>
+            <Head>
+                <title> Clone 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 />
+            {user && (
+                <Layout user={user} className="gap-6">
+                    <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">Clone Workflow</h1>
+                    </section>
+
+                    <form onSubmit={handleSubmit}>
+                        {cloneWorkflow && (
+                            <>
+                                <div className="mb-8 flex flex-row gap-6 items-end">
+                                    <Input
+                                        label="Name:"
+                                        type="text"
+                                        name={cloneWorkflow.name}
+                                        placeholder="Enter workflow name"
+                                        value={cloneWorkflow.name}
+                                        onChange={(updatedName) => {
+                                            const updatedWorkflow = {
+                                                ...cloneWorkflow,
+                                                name: updatedName,
+                                            };
+                                            onWorkflowChange(updatedWorkflow);
+                                        }}
+                                    />
+                                    <Select
+                                        label="Entity:"
+                                        options={ENTITY_OPTIONS}
+                                        value={
+                                            cloneWorkflow.entityId === ""
+                                                ? null
+                                                : ENTITY_OPTIONS.find(option => option.value === cloneWorkflow.entityId)
+                                        }
+                                        onChange={(selectedEntity) => {
+                                            if (cloneWorkflow.entityId) {
+                                                if (!confirm("Clearing or changing entity will clear all the assignees for all steps in this workflow. Are you sure you want to proceed?")) return;
+                                            }
+                                            if (selectedEntity?.value) {
+                                                setEntityId(selectedEntity.value);
+                                                handleEntityChange(cloneWorkflow, selectedEntity.value);
+                                            }
+                                        }}
+                                        isClearable
+                                        placeholder="Enter workflow entity"
+                                    />
+                                    <Button
+                                        color="red"
+                                        variant="solid"
+                                        onClick={handleResetWorkflow}
+                                        type="button"
+                                        className="min-w-fit h-[72px] text-lg font-medium flex items-center gap-2 text-left"
+                                    >
+                                        Clear Workflow
+                                        <GrClearOption className="size-6" />
+                                    </Button>
+                                </div>
+
+                                <AnimatePresence mode="wait">
+                                    <LayoutGroup key="workflow">
+                                        <motion.div
+                                            key="form"
+                                            initial={{ opacity: 0, y: -30 }}
+                                            animate={{ opacity: 1, y: 0 }}
+                                            exit={{ opacity: 0, x: 60 }}
+                                            transition={{ duration: 0.20 }}
+                                        >
+                                            {(!cloneWorkflow.name || !cloneWorkflow.entityId) && (
+                                                <Tip text="Please fill in workflow name and associated entity to start configuring workflow." />
+                                            )}
+                                            <WorkflowForm
+                                                workflow={cloneWorkflow}
+                                                onWorkflowChange={onWorkflowChange}
+                                                entityTeachers={entityTeachers}
+                                                entityCorporates={entityCorporates}
+                                            />
+                                        </motion.div>
+                                    </LayoutGroup>
+                                </AnimatePresence>
+                            </>
+                        )}
+                    </form>
+                </Layout>
+            )}
+        </>
+    );
+}

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

@@ -230,7 +230,7 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
                                                 <div className={"text-base font-medium text-gray-500"}>
                                                     One assignee is required to sign off to complete this step:
                                                     <div className="flex flex-col gap-2 mt-3">
-                                                        {workflowAssignees.map(user => (
+                                                        {workflowAssignees.filter(user => selectedStep.assignees.includes(user.id)).map(user => (
                                                             <span key={user.id}>
                                                                 <UserWithProfilePic
                                                                     textSize="text-sm"

src/pages/approval-workflows/create.tsx

@@ -140,9 +140,16 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
         }
     };
 
-    const handleResetWorkflow = (id: string) => {
+    const handleEntityChange = (wf: EditableApprovalWorkflow, entityId: string) => {
-        setWorkflows(prev => prev.filter(wf => wf.id !== id));
+        const updatedWorkflow = {
-        handleAddNewWorkflow();
+            ...wf,
+            entityId: entityId,
+            steps: wf.steps.map(step => ({
+                ...step,
+                assignees: step.assignees.map(() => null)
+            }))
+        }
+        onWorkflowChange(updatedWorkflow);
     }
 
     return (
@@ -207,11 +214,11 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
                     <form onSubmit={handleSubmit}>
                         {currentWorkflow && (
                             <>
-                                <div className="mb-8 flex flex-row gap-6">
+                                <div className="mb-8 flex flex-row gap-6 items-end">
                                     <Input
+                                        label="Name:"
                                         type="text"
                                         name={currentWorkflow.name}
-                                        required={true}
                                         placeholder="Enter workflow name"
                                         value={currentWorkflow.name}
                                         onChange={(updatedName) => {
@@ -223,6 +230,7 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
                                         }}
                                     />
                                     <Select
+                                        label="Entity:"
                                         options={ENTITY_OPTIONS}
                                         value={
                                             currentWorkflow.entityId === ""
@@ -230,27 +238,23 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
                                                 : ENTITY_OPTIONS.find(option => option.value === currentWorkflow.entityId)
                                         }
                                         onChange={(selectedEntity) => {
-                                            if (!currentWorkflow.entityId && selectedEntity?.value) {
+                                            if (currentWorkflow.entityId) {
+                                                if (!confirm("Clearing or changing entity will clear all the assignees for all steps in this workflow. Are you sure you want to proceed?")) return;
+                                            }
+                                            if (selectedEntity?.value) {
                                                 setEntityId(selectedEntity.value);
-                                                const updatedWorkflow = {
+                                                handleEntityChange(currentWorkflow, selectedEntity.value);
-                                                    ...currentWorkflow,
-                                                    entityId: selectedEntity.value,
-                                                };
-                                                onWorkflowChange(updatedWorkflow);
-                                            } else {
-                                                if (!confirm("Clearing or changing entity will reset this workflow. Are you sure you want to proceed?")) return;
-                                                handleResetWorkflow(currentWorkflow.id);
                                             }
                                         }}
                                         isClearable
-                                        placeholder="Entity..."
+                                        placeholder="Enter workflow entity"
                                     />
                                     <Button
                                         color="red"
                                         variant="solid"
                                         onClick={() => handleDeleteWorkflow(currentWorkflow.id)}
                                         type="button"
-                                        className="min-w-fit text-lg font-medium flex items-center gap-2 text-left"
+                                        className="min-w-fit h-[72px] text-lg font-medium flex items-center gap-2 text-left"
                                     >
                                         Delete Workflow
                                         <BsTrash className="size-6" />

src/pages/approval-workflows/index.tsx

@@ -24,6 +24,7 @@ import { IoIosAddCircleOutline } from "react-icons/io";
 import { toast, ToastContainer } from "react-toastify";
 
 import approvalWorkflowsData from '../../demo/approval_workflows.json'; // to test locally
+import { FaRegClone } from "react-icons/fa6";
 
 const columnHelper = createColumnHelper<ApprovalWorkflow>();
 
@@ -156,10 +157,6 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
         /* .finally(reload); */
     };
 
-    const editApprovalWorkflow = (id: string) => {
-
-    };
-
     const columns = [
         columnHelper.accessor("name", {
             header: "NAME",
@@ -262,6 +259,15 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
                             <BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
                         </button>
 
+                        <Link
+                            onClick={(e) => e.stopPropagation()}
+                            data-tip="Clone"
+                            href={`/approval-workflows/${row.original.id}/clone`}
+                            className="cursor-pointer tooltip"
+                        >
+                            <FaRegClone className="hover:text-mti-purple-light transition ease-in-out duration-300" />
+                        </Link>
+
                         {currentStep && (
                             <Link
                                 onClick={(e) => e.stopPropagation()}
@@ -368,7 +374,7 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
                                         {row.getVisibleCells().map((cell, cellIndex) => {
                                             const lastCellIndex = row.getVisibleCells().length - 1;
 
-                                            let cellClasses = "px-3 py-2 bg-purple-50 border-y-2 border-purple-300";
+                                            let cellClasses = "pl-3 pr-4 py-2 bg-purple-50 border-y-2 border-purple-300";
                                             if (cellIndex === 0) {
                                                 cellClasses += " border-l-2 rounded-l-2xl";
                                             }