Start implementing workflow step form behaviour

src/components/ApprovalWorkflows/WorkflowStep.tsx

@@ -0,0 +1,98 @@
+import Option from "@/interfaces/option";
+import clsx from "clsx";
+import { useState } from "react";
+import { BsTrash } from "react-icons/bs";
+import WorkflowStepNumber from "./WorkflowStepNumber";
+import WorkflowStepSelects from "./WorkflowStepSelects";
+
+export type StepType = "form-intake" | "approval-by";
+
+const teacherOptions: Option[] = [
+    // fetch from database?
+]
+
+const directorOptions: Option[] = [
+    // fetch from database?
+]
+
+interface Props {
+    editView?: boolean,
+    finalStep?: boolean,
+    isSelected?: boolean,
+    stepNumber: number,
+    stepType: StepType,
+    requestedBy: string,
+    //requestedBy: TeacherUser | CorporateUser | MasterCorporateUser,
+    onDelete?: () => void;
+}
+
+export default function WorkflowStep({
+    editView = false,
+    finalStep = false,
+    isSelected = false,
+    stepNumber,
+    stepType,
+    requestedBy,
+    onDelete,
+}: Props) {
+    // disable selectability of step if in editView
+    const effectiveIsSelected = editView ? false : isSelected;
+
+    const [leftValue, setLeftValue] = useState<Option | null>(null);
+    const [rightValue, setRightValue] = useState<Option | null>(null);
+
+    let showSelects = false;
+    let leftPlaceholder = "";
+    let rightPlaceholder = "";
+
+    if (editView) {
+        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={clsx(
+                'flex items-center space-x-3 w-[600px] p-5 rounded-2xl border-2 border-mti-purple-ultralight',
+                { 'bg-mti-purple-ultralight': isSelected }
+            )}
+        >
+            <div className="flex w-full items-center">
+                <div className="flex-shrink-0">
+                    <WorkflowStepNumber number={stepNumber} isSelected={isSelected} />
+                </div>
+
+                {/* Only show selects if editView === true and stepType === 'approval-by' */}
+                {showSelects && (
+                    <div className="ml-auto">
+                        <WorkflowStepSelects
+                            // Provide any relevant options:
+                            leftOptions={teacherOptions}
+                            rightOptions={teacherOptions}
+                            leftValue={leftValue}
+                            rightValue={rightValue}
+                            onLeftChange={setLeftValue}
+                            onRightChange={setRightValue}
+                            leftPlaceholder={leftPlaceholder}
+                            rightPlaceholder={rightPlaceholder}
+                        />
+                    </div>
+                )}
+
+                {editView && stepNumber !== 1 && !finalStep && (
+                    <button
+                        data-tip="Delete"
+                        className="ml-4 cursor-pointer tooltip"
+                        onClick={onDelete}
+                    >
+                        <BsTrash className="size-6 hover:text-mti-purple-light transition ease-in-out duration-300" />
+                    </button>
+                )}
+            </div>
+        </div>
+    );
+};

src/components/ApprovalWorkflows/WorkflowStepNumber.tsx

@@ -0,0 +1,25 @@
+import { ApprovalWorkflowStatus, ApprovalWorkflowStatusLabel } from "@/interfaces/approval.workflow";
+import clsx from "clsx";
+import React from "react";
+import { RiProgress5Line } from "react-icons/ri";
+
+interface Props {
+    number: number;
+    isSelected?: boolean;
+}
+
+export default function WorkflowStepNumber({ number, isSelected = false }: Props) {
+    return (
+        <div
+            className={clsx(
+                'flex items-center justify-center w-10 h-10 rounded-full',
+                {
+                    'bg-mti-purple text-mti-purple-ultralight': isSelected,
+                    'bg-mti-purple-ultralight text-gray-500': !isSelected,
+                }
+            )}
+        >
+            <span className="text-lg font-semibold">{number}</span>
+        </div>
+    );
+};

src/components/ApprovalWorkflows/WorkflowStepSelects.tsx

@@ -0,0 +1,53 @@
+import Option from "@/interfaces/option";
+import Select from "../Low/Select";
+
+interface Props {
+    leftOptions: Option[];
+    rightOptions: Option[];
+    leftValue?: Option | null;
+    rightValue?: Option | null;
+    onLeftChange: (value: Option | null) => void;
+    onRightChange: (value: Option | null) => void;
+    leftPlaceholder?: string;
+    rightPlaceholder?: string;
+}
+
+export default function WorkflowStepSelects({
+    leftOptions,
+    rightOptions,
+    leftValue,
+    rightValue,
+    onLeftChange,
+    onRightChange,
+    leftPlaceholder = "Select",
+    rightPlaceholder = "Select",
+}: Props) {
+    return (
+        <div
+            className={"flex flex-row gap-0"}
+        >
+            {/* Left Select */}
+            <div className="flex-1 w-[175px]">
+                <Select
+                    options={leftOptions}
+                    value={leftValue}
+                    onChange={onLeftChange}
+                    placeholder={leftPlaceholder}
+                    flat
+                    className={"px-2 py-1 rounded-none rounded-l-2xl"}
+                />
+            </div>
+            {/* Right Select */}
+            <div className="flex-1 w-[175px]">
+                <Select
+                    options={rightOptions}
+                    value={rightValue}
+                    onChange={onRightChange}
+                    placeholder={rightPlaceholder}
+                    flat
+                    className="px-2 py-1 rounded-none rounded-r-2xl"
+                />
+            </div>
+        </div>
+    );
+}