From 23ac3284cb3bda0bf5def85c1db861631b7724d9 Mon Sep 17 00:00:00 2001
From: gsinghpal <gur_preet.singh@outlook.com>
Date: Sun, 17 May 2026 02:40:03 -0400
Subject: [PATCH] feat(portal): status badge pills with dot + glow halo

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

diff --git a/fusion_plating/fusion_plating_portal/static/src/scss/fp_portal_badges.scss b/fusion_plating/fusion_plating_portal/static/src/scss/fp_portal_badges.scss
new file mode 100644
index 00000000..b68ceac0
--- /dev/null
+++ b/fusion_plating/fusion_plating_portal/static/src/scss/fp_portal_badges.scss
@@ -0,0 +1,65 @@
+// ============================================================================
+// Fusion Plating — Portal · Status badges
+// Pill with coloured dot + soft glow halo. Maps directly to fp.portal.job.state
+// (and similar enum fields on quote / invoice / delivery).
+// ============================================================================
+
+.o_fp_badge {
+    display: inline-flex;
+    align-items: center;
+    gap: .4rem;
+    padding: .25rem .7rem;
+    border-radius: $fp-radius-pill;
+    font-family: $fp-font;
+    font-size: .7rem;
+    font-weight: 600;
+    line-height: 1.1;
+    white-space: nowrap;
+
+    .o_fp_badge_dot {
+        width: 7px;
+        height: 7px;
+        border-radius: $fp-radius-pill;
+        flex-shrink: 0;
+    }
+}
+
+// State mapping — extend with `class="o_fp_badge o_fp_badge_<state>"`.
+.o_fp_badge_received,
+.o_fp_badge_new {
+    background: $fp-section-bg;
+    color: $fp-text-body;
+    .o_fp_badge_dot { background: $fp-muted; }
+}
+.o_fp_badge_in_progress,
+.o_fp_badge_quoted {
+    background: $fp-mint;
+    color: $fp-teal-dark;
+    .o_fp_badge_dot { background: $fp-teal; box-shadow: 0 0 0 3px rgba(26, 107, 89, .18); }
+}
+.o_fp_badge_quality_check,
+.o_fp_badge_under_review {
+    background: $fp-amber-bg;
+    color: $fp-amber-text;
+    .o_fp_badge_dot { background: $fp-amber; box-shadow: 0 0 0 3px rgba(245, 158, 11, .18); }
+}
+.o_fp_badge_ready_to_ship,
+.o_fp_badge_accepted,
+.o_fp_badge_paid {
+    background: $fp-success-bg;
+    color: $fp-success-text;
+    .o_fp_badge_dot { background: $fp-success; }
+}
+.o_fp_badge_shipped,
+.o_fp_badge_complete {
+    background: $fp-success-bg;
+    color: $fp-success-text;
+    .o_fp_badge_dot { background: $fp-success; }
+}
+.o_fp_badge_declined,
+.o_fp_badge_overdue,
+.o_fp_badge_hold {
+    background: $fp-danger-bg;
+    color: $fp-danger-dark;
+    .o_fp_badge_dot { background: $fp-danger; }
+}