- Refactor of workflow and steps types to differentiate between editView and normalView.

- Added side panel with steps details

src/components/ApprovalWorkflows/WorkflowForm.tsx

@@ -1,17 +1,17 @@
-import { ApprovalWorkflow, WorkflowStep } from "@/interfaces/approval.workflow";
+import { EditableApprovalWorkflow, EditableWorkflowStep } from "@/interfaces/approval.workflow";
 import Option from "@/interfaces/option";
 import { CorporateUser, TeacherUser } from "@/interfaces/user";
-import { AnimatePresence, AnimateSharedLayout, Reorder, motion } from "framer-motion";
+import { AnimatePresence, Reorder, motion } from "framer-motion";
 import { useState } from "react";
 import { FaRegCheckCircle } from "react-icons/fa";
 import { IoIosAddCircleOutline } from "react-icons/io";
 import Button from "../Low/Button";
-import WorkflowEditableStepComponent from "./WorkflowEditableStepComponent";
 import Tip from "./Tip";
+import WorkflowEditableStepComponent from "./WorkflowEditableStepComponent";
 
 interface Props {
-    workflow: ApprovalWorkflow;
-    onWorkflowChange: (workflow: ApprovalWorkflow) => void;
+    workflow: EditableApprovalWorkflow;
+    onWorkflowChange: (workflow: EditableApprovalWorkflow) => void;
     entityTeachers: TeacherUser[];
     entityCorporates: CorporateUser[];
 }
@@ -20,7 +20,7 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityTeacher
     const [stepCounter, setStepCounter] = useState<number>(3); // to guarantee unique keys used for animations
     const lastStep = workflow.steps[workflow.steps.length - 1];
 
-    const renumberSteps = (steps: WorkflowStep[]): WorkflowStep[] => {
+    const renumberSteps = (steps: EditableWorkflowStep[]): EditableWorkflowStep[] => {
         return steps.map((step, index) => ({
             ...step,
             stepNumber: index + 1,
@@ -28,12 +28,13 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityTeacher
     };
 
     const addStep = () => {
-        const newStep: WorkflowStep = {
+        const newStep: EditableWorkflowStep = {
             key: stepCounter,
             stepType: "approval-by",
             stepNumber: workflow.steps.length,
-            completed: false,
             assignees: [null],
+            firstStep: false,
+            finalStep: false,
         };
         setStepCounter((count) => count + 1);
 
@@ -73,7 +74,7 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityTeacher
         onWorkflowChange({ ...workflow, steps: updatedSteps });
     };
 
-    const handleReorder = (newOrder: WorkflowStep[]) => {
+    const handleReorder = (newOrder: EditableWorkflowStep[]) => {
         const firstIndex = newOrder.findIndex((s) => s.firstStep);
         if (firstIndex !== -1 && firstIndex !== 0) {
             const [first] = newOrder.splice(firstIndex, 1);