From 1780b383b9712db2d7e22d82b7790728ec7fadb2 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): jobs-forward dashboard layout SCSS

Welcome strip + 4-tile KPI row + jobs hero + secondary 3-panel strip.
Responsive at 768px (KPI grid -> 2x2, secondary -> stacked).

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

diff --git a/fusion_plating/fusion_plating_portal/static/src/scss/fp_portal_dashboard.scss b/fusion_plating/fusion_plating_portal/static/src/scss/fp_portal_dashboard.scss
new file mode 100644
index 00000000..eae0163b
--- /dev/null
+++ b/fusion_plating/fusion_plating_portal/static/src/scss/fp_portal_dashboard.scss
@@ -0,0 +1,169 @@
+// ============================================================================
+// Fusion Plating — Portal · Dashboard layout
+// Jobs-forward grid: welcome strip → KPI tile row → hero jobs section →
+// secondary panel strip.
+// ============================================================================
+
+.o_fp_dashboard {
+    background: $fp-page-bg;
+    padding: $fp-space-6;
+    border-radius: $fp-radius-card;
+    border: 1px solid $fp-card-border;
+    font-family: $fp-font;
+}
+
+.o_fp_welcome {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    margin-bottom: $fp-space-4;
+    flex-wrap: wrap;
+    gap: $fp-space-3;
+
+    .o_fp_welcome_title {
+        font-size: 1.15rem;
+        font-weight: 600;
+        color: $fp-text;
+        margin-bottom: .18rem;
+    }
+    .o_fp_welcome_sub {
+        font-size: .82rem;
+        color: $fp-muted;
+    }
+}
+
+.o_fp_kpi_row {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: $fp-space-3;
+    margin-bottom: $fp-space-5;
+
+    @media (max-width: 768px) {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+.o_fp_jobs_hero {
+    margin-bottom: $fp-space-5;
+
+    .o_fp_section_header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: $fp-space-3;
+
+        .o_fp_section_title {
+            font-weight: 600;
+            font-size: 1rem;
+            color: $fp-text;
+        }
+    }
+
+    // Status filter tabs on the jobs hero
+    .o_fp_status_tabs {
+        display: flex;
+        gap: .35rem;
+        font-size: .74rem;
+        align-items: center;
+        background: $fp-card-bg;
+        border: 1px solid $fp-card-border;
+        border-radius: $fp-radius-button;
+        padding: .2rem;
+
+        .o_fp_status_tab {
+            padding: .25rem .6rem;
+            border-radius: 6px;
+            color: $fp-muted;
+            cursor: pointer;
+            text-decoration: none;
+            &.active {
+                background: $fp-gradient-tab;
+                color: $fp-teal-dark;
+                font-weight: 600;
+            }
+        }
+    }
+
+    .o_fp_view_all {
+        text-align: center;
+        padding: .45rem;
+        a { @extend .o_fp_btn_mint; }
+    }
+}
+
+.o_fp_job_card {
+    @extend .o_fp_card;
+    padding: $fp-space-4;
+    border-radius: $fp-radius-tile;
+    margin-bottom: $fp-space-3;
+    box-shadow: $fp-shadow-card;
+
+    .o_fp_job_header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: $fp-space-3;
+
+        .o_fp_job_ref {
+            font-weight: 600;
+            color: $fp-text;
+            font-size: .98rem;
+        }
+        .o_fp_job_meta {
+            color: $fp-muted;
+            font-size: .8rem;
+            margin-left: .65rem;
+        }
+    }
+
+    .o_fp_job_docs {
+        display: flex;
+        flex-wrap: wrap;
+        gap: .35rem;
+        margin-top: $fp-space-3;
+        padding-top: .6rem;
+        border-top: 1px solid $fp-section-bg;
+    }
+}
+
+.o_fp_secondary_panels {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: $fp-space-3;
+
+    @media (max-width: 768px) {
+        grid-template-columns: 1fr;
+    }
+
+    .o_fp_panel {
+        @extend .o_fp_card_compact;
+
+        .o_fp_panel_title {
+            font-weight: 600;
+            font-size: .82rem;
+            color: $fp-text;
+            margin-bottom: .5rem;
+            display: flex;
+            align-items: center;
+            gap: .4rem;
+
+            .o_fp_panel_icon {
+                background: $fp-gradient-icon;
+                color: $fp-teal-dark;
+                width: 24px;
+                height: 24px;
+                border-radius: $fp-radius-icon;
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                font-size: .78rem;
+            }
+        }
+        .o_fp_panel_row {
+            font-size: .72rem;
+            color: $fp-muted;
+            margin-top: .2rem;
+            &:first-of-type { margin-top: 0; }
+        }
+    }
+}