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

- Added side panel with steps details

src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx

@@ -1,15 +1,15 @@
-import { WorkflowStep } from "@/interfaces/approval.workflow";
+import { EditableWorkflowStep } from "@/interfaces/approval.workflow";
 import Option from "@/interfaces/option";
 import { CorporateUser, TeacherUser } from "@/interfaces/user";
+import Image from "next/image";
 import { useEffect, useMemo, useState } from "react";
 import { AiOutlineUserAdd } from "react-icons/ai";
 import { BsTrash } from "react-icons/bs";
 import { LuGripHorizontal } from "react-icons/lu";
 import WorkflowStepNumber from "./WorkflowStepNumber";
 import WorkflowStepSelects from "./WorkflowStepSelects";
-import Image from "next/image";
 
-interface Props extends WorkflowStep {
+interface Props extends Pick<EditableWorkflowStep, 'stepNumber' | 'assignees' | 'finalStep' | 'onDelete'> {
     entityTeachers: TeacherUser[];
     entityCorporates: CorporateUser[];
     onSelectChange: (numberOfSelects: number, index: number, value: Option | null) => void;
@@ -102,7 +102,7 @@ export default function WorkflowEditableStepComponent({
     return (
         <div className="flex w-full">
             <div className="flex flex-col items-center">
-                <WorkflowStepNumber stepNumber={stepNumber} />
+                <WorkflowStepNumber stepNumber={stepNumber} completed={false} selected={false}  />
 
                 {/* Vertical Bar connecting steps */}
                 {!finalStep && (