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

src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx

@@ -0,0 +1,99 @@
+import { WorkflowStep } from "@/interfaces/approval.workflow";
+import Option from "@/interfaces/option";
+import { useState } from "react";
+import { BsTrash } from "react-icons/bs";
+import { LuGripHorizontal } from "react-icons/lu";
+import WorkflowStepNumber from "./WorkflowStepNumber";
+import WorkflowStepSelects from "./WorkflowStepSelects";
+
+const teacherOptions: Option[] = [
+    // fetch from database?
+]
+
+const directorOptions: Option[] = [
+    // fetch from database?
+]
+
+export default function WorkflowEditableStepComponent({
+    stepType,
+    stepNumber,
+    completed = false,
+    finalStep,
+    onDelete,
+}: WorkflowStep) {
+
+    const [leftValue, setLeftValue] = useState<Option | null>(null);
+    const [rightValue, setRightValue] = useState<Option | null>(null);
+
+    let showSelects = false;
+    let leftPlaceholder = "";
+    let rightPlaceholder = "";
+
+    if (stepType === "approval-by") {
+        // Show the selects only if it's an 'approval-by' step and in edit mode
+        showSelects = true;
+        leftPlaceholder = "Approval by";
+        rightPlaceholder = finalStep ? "2nd Director" : "2nd Teacher";
+    }
+
+    return (
+        <div className="flex w-full">
+            <div className="flex flex-col items-center">
+                <WorkflowStepNumber number={stepNumber} />
+
+                {/* Vertical Bar connecting steps */}
+                {!finalStep && (
+                    <div className="w-1 h-10 bg-mti-purple-dark"></div>
+                )}
+            </div>
+
+            {stepNumber !== 1 && !finalStep
+                ? <LuGripHorizontal className="ml-3 mt-2 cursor-grab active:cursor-grabbing" size={25} />
+                : <div className="ml-3 mt-2" style={{ width: 25, height: 25 }}></div>
+            }
+
+            {showSelects && (
+                <div className="ml-10">
+                    <WorkflowStepSelects
+                        leftOptions={teacherOptions}
+                        rightOptions={teacherOptions}
+                        leftValue={leftValue}
+                        rightValue={rightValue}
+                        onLeftChange={setLeftValue}
+                        onRightChange={setRightValue}
+                        leftPlaceholder={leftPlaceholder}
+                        rightPlaceholder={rightPlaceholder}
+                    />
+                </div>
+            )}
+
+            {stepNumber === 1 && (
+                <div className="ml-10">
+                    <div className={"flex flex-row gap-0"}>
+                        {/* h-[40px] probably is not the best way to match the height with the select component, but for now should be ok */}
+                        <div className="flex items-center text-mti-gray-dim w-[275px] px-5 h-[40px] border rounded-l-2xl border-mti-gray-platinum">
+                            <span className="text-sm font-normal focus:outline-none">Form Intake</span>
+                        </div>
+                        <div className="flex items-center text-mti-gray-dim w-[275px] px-5 h-[40px] border rounded-r-2xl border-mti-gray-platinum">
+                            <span className="text-sm font-normal focus:outline-none">Prof. X</span>
+                        </div>
+                    </div>
+                </div>
+            )}
+
+            {stepNumber !== 1 && !finalStep && (
+                <div className="ml-4 mt-2">
+                    <button
+                        data-tip="Delete"
+                        className="cursor-pointer tooltip"
+                        onClick={onDelete}
+                        type="button"
+                    >
+                        <BsTrash className="size-6 hover:text-mti-purple-light transition ease-in-out duration-300" />
+                    </button>
+                </div>
+            )}
+        </div>
+
+    );
+};