fix step numbering bug from previous commit and prepare non editable workflow view

src/components/ApprovalWorkflows/WorkflowForm.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState } from "react";
 import { FaRegCheckCircle } from "react-icons/fa";
 import { IoIosAddCircleOutline } from "react-icons/io";
 import Button from "../Low/Button";
-import WorkflowStepComponent from "./WorkflowStep";
+import WorkflowEditableStepComponent from "./WorkflowEditableStepComponent";
 import { ApprovalWorkflow, WorkflowStep } from "@/interfaces/approval.workflow";
 
 const teacherOptions: Option[] = [
@@ -41,23 +41,34 @@ export default function WorkflowForm({ workflow, onWorkflowChange }: Props) {
         onWorkflowChange(updatedWorkflow);
     }, [steps]);
 
+    const renumberSteps = (steps: WorkflowStep[]): WorkflowStep[] => {
+        return steps.map((step, index) => ({
+            ...step,
+            stepNumber: index + 1,
+        }));
+    };
+
     const addStep = () => {
         setSteps((prev) => {
             const newStep: WorkflowStep = {
                 key: stepCounter,
                 stepType: "approval-by",
-                stepNumber: steps.length - 1,
+                stepNumber: steps.length,
                 completed: false,
             };
             setStepCounter((count) => count + 1);
 
-            return [...prev.slice(0, -1), newStep, lastStep];
+            const updatedSteps = [...prev.slice(0, -1), newStep, lastStep];
+            return renumberSteps(updatedSteps);
         });
     };
 
     const handleDelete = (key: number | undefined) => {
-        if (key){
-            setSteps((prev) => prev.filter((step) => step.key !== key));
+        if (key) {
+            setSteps((prev) => {
+                const updatedSteps = prev.filter((step) => step.key !== key);
+                return renumberSteps(updatedSteps);
+            });
         }
     };
 
@@ -73,8 +84,7 @@ export default function WorkflowForm({ workflow, onWorkflowChange }: Props) {
             const [final] = newOrder.splice(finalIndex, 1);
             newOrder.push(final);
         }
-
-        setSteps(newOrder);
+        setSteps(renumberSteps(newOrder));
     };
 
     return (
@@ -110,7 +120,7 @@ export default function WorkflowForm({ workflow, onWorkflowChange }: Props) {
                             layout
                             drag={!(step.firstStep || step.finalStep)}
                         >
-                            <WorkflowStepComponent
+                            <WorkflowEditableStepComponent
                                 key={step.key}
                                 completed={false}
                                 editView