implement clone in new builder and fix typo

src/pages/approval-workflows/create.tsx

@@ -22,6 +22,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { BsChevronLeft, BsTrash } from "react-icons/bs";
+import { FaRegClone } from "react-icons/fa6";
 import { MdFormatListBulletedAdd } from "react-icons/md";
 import { toast, ToastContainer } from "react-toastify";
 import { v4 as uuidv4 } from 'uuid';
@@ -207,6 +208,26 @@ export default function Home({ user, allConfiguredWorkflows, userEntitiesWithLab
         }
     };
 
+    const handleCloneWorkflow = (id: string) => {
+        const workflowToClone = workflows.find(wf => wf.id === id);
+        if (!workflowToClone) return;
+    
+        const newId = uuidv4();
+    
+        const clonedWorkflow: EditableApprovalWorkflow = {
+            ...workflowToClone,
+            id: newId,
+            steps: workflowToClone.steps.map(step => ({
+                ...step,
+                assignees: step.firstStep ? [] : [...step.assignees], // we can't have more than one form intaker per teacher per entity
+            })),
+        };
+    
+        setWorkflows(prev => [...prev, clonedWorkflow]);
+    
+        handleSelectWorkflow(newId);
+    };
+
     const handleDeleteWorkflow = (id: string) => {
         if (!confirm(`Are you sure you want to delete this Approval Workflow?`)) return;
 
@@ -256,7 +277,7 @@ export default function Home({ user, allConfiguredWorkflows, userEntitiesWithLab
                         </div>
                     </section>
 
-                    <Tip text="Setting a teacher as a Form Intaker means the configured workflow will be instanciated when said teacher publishes an exam. Only one Form Intake per teacher per entity is allowed."/>
+                    <Tip text="Setting a teacher as a Form Intaker means the configured workflow will be instantiated when said teacher publishes an exam. Only one Form Intake per teacher per entity is allowed."/>
 
                     <section className="flex flex-row gap-6">
                         <Button
@@ -329,6 +350,16 @@ export default function Home({ user, allConfiguredWorkflows, userEntitiesWithLab
                                         isClearable
                                         placeholder="Enter workflow entity"
                                     />
+                                    <Button
+                                        color="gray"
+                                        variant="solid"
+                                        onClick={() => handleCloneWorkflow(currentWorkflow.id)}
+                                        type="button"
+                                        className="min-w-fit h-[72px] text-lg font-medium flex items-center gap-2 text-left"
+                                    >
+                                        Clone Workflow
+                                        <FaRegClone className="size-6" />
+                                    </Button>
                                     <Button
                                         color="red"
                                         variant="solid"