From a6ff3054bc13539b43abb2199e4074255b360acd Mon Sep 17 00:00:00 2001
From: gsinghpal <gur_preet.singh@outlook.com>
Date: Sun, 17 May 2026 02:40:04 -0400
Subject: [PATCH] feat(portal): numbered horizontal stepper with state classes

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../static/src/scss/fp_portal_stepper.scss    | 88 +++++++++++++++++++
 1 file changed, 88 insertions(+)
 create mode 100644 fusion_plating/fusion_plating_portal/static/src/scss/fp_portal_stepper.scss

diff --git a/fusion_plating/fusion_plating_portal/static/src/scss/fp_portal_stepper.scss b/fusion_plating/fusion_plating_portal/static/src/scss/fp_portal_stepper.scss
new file mode 100644
index 00000000..ff2d0f1c
--- /dev/null
+++ b/fusion_plating/fusion_plating_portal/static/src/scss/fp_portal_stepper.scss
@@ -0,0 +1,88 @@
+// ============================================================================
+// Fusion Plating — Portal · Numbered stepper
+// Horizontal circle+line stepper for job progress on dashboard cards.
+// 5 steps fixed (Received / Inspected / Plating / QC / Ship) by default;
+// macro accepts variable step count.
+// ============================================================================
+
+.o_fp_stepper {
+    display: flex;
+    align-items: center;
+    margin-bottom: .35rem;
+
+    .o_fp_step_circle {
+        width: 24px;
+        height: 24px;
+        border-radius: $fp-radius-pill;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: $fp-font;
+        font-size: .65rem;
+        font-weight: 700;
+        flex-shrink: 0;
+        background: $fp-card-bg;
+        border: 1.5px solid $fp-card-border;
+        color: $fp-muted-light;
+    }
+    .o_fp_step_done {
+        background: $fp-gradient-primary;
+        color: #fff;
+        border: none;
+        box-shadow: 0 1px 2px rgba(26, 107, 89, .25);
+    }
+    .o_fp_step_active {
+        background: $fp-card-bg;
+        color: $fp-teal;
+        border: 2.5px solid $fp-teal;
+        box-shadow: $fp-glow-ring-teal;
+    }
+    .o_fp_step_active_warn {
+        // Used when the active step is in QC (amber)
+        background: $fp-card-bg;
+        color: $fp-amber-text;
+        border: 2.5px solid $fp-amber;
+        box-shadow: $fp-glow-ring-amber;
+    }
+
+    .o_fp_step_line {
+        flex: 1;
+        height: 2px;
+        margin: 0 3px;
+        background: $fp-card-border;
+        &.o_fp_step_line_done { background: $fp-teal; }
+        &.o_fp_step_line_warn { background: $fp-amber; }
+    }
+}
+
+// Step labels row below the stepper
+.o_fp_step_labels {
+    display: flex;
+    justify-content: space-between;
+    font-size: .68rem;
+
+    .o_fp_step_label {
+        text-align: center;
+        flex: 1;
+        .o_fp_step_label_title {
+            color: $fp-muted-light;
+            font-weight: 500;
+        }
+        .o_fp_step_label_time {
+            color: $fp-disabled;
+            font-size: .6rem;
+        }
+        &.o_fp_step_label_done {
+            .o_fp_step_label_title { color: $fp-text-body; }
+            .o_fp_step_label_time { color: $fp-muted-light; }
+        }
+        &.o_fp_step_label_active {
+            .o_fp_step_label_title { color: $fp-teal; font-weight: 700; }
+            .o_fp_step_label_time { color: $fp-teal; }
+        }
+        &.o_fp_step_label_active_warn {
+            .o_fp_step_label_title { color: $fp-amber-text; font-weight: 700; }
+            .o_fp_step_label_time { color: $fp-amber-text; }
+        }
+    }
+}