From 1420a5c4451c7e19c18e1e14b99b25be0dfd97e4 Mon Sep 17 00:00:00 2001 From: gsinghpal Date: Thu, 21 May 2026 03:52:57 -0400 Subject: [PATCH] feat(fusion_claims): add dashboard SCSS with dual-bundle theming Co-Authored-By: Claude Opus 4.7 (1M context) --- fusion_claims/__manifest__.py | 9 + .../static/src/scss/_fc_dashboard_tokens.scss | 81 +++++++ .../static/src/scss/fc_dashboard.scss | 212 ++++++++++++++++++ 3 files changed, 302 insertions(+) create mode 100644 fusion_claims/static/src/scss/_fc_dashboard_tokens.scss create mode 100644 fusion_claims/static/src/scss/fc_dashboard.scss diff --git a/fusion_claims/__manifest__.py b/fusion_claims/__manifest__.py index 2ae7dc53..cd5a9da1 100644 --- a/fusion_claims/__manifest__.py +++ b/fusion_claims/__manifest__.py @@ -175,6 +175,15 @@ 'fusion_claims/static/src/js/attachment_image_compress.js', 'fusion_claims/static/src/js/debug_required_fields.js', 'fusion_claims/static/src/xml/document_preview.xml', + # Dashboard: tokens MUST load before dashboard layout + 'fusion_claims/static/src/scss/_fc_dashboard_tokens.scss', + 'fusion_claims/static/src/scss/fc_dashboard.scss', + ], + 'web.assets_web_dark': [ + # Dark bundle recompiles the same SCSS with the dark + # $o-webclient-color-scheme default so tokens branch correctly. + 'fusion_claims/static/src/scss/_fc_dashboard_tokens.scss', + 'fusion_claims/static/src/scss/fc_dashboard.scss', ], }, 'images': ['static/description/icon.png'], diff --git a/fusion_claims/static/src/scss/_fc_dashboard_tokens.scss b/fusion_claims/static/src/scss/_fc_dashboard_tokens.scss new file mode 100644 index 00000000..f1f68d4f --- /dev/null +++ b/fusion_claims/static/src/scss/_fc_dashboard_tokens.scss @@ -0,0 +1,81 @@ +// ============================================================================= +// Fusion Claims Dashboard — Palette Tokens +// Compile-time branch on $o-webclient-color-scheme so the same SCSS file +// produces different palettes in web.assets_backend (light) and +// web.assets_web_dark (dark). Tokens load FIRST in each bundle. +// ============================================================================= + +$o-webclient-color-scheme: bright !default; + +// ---------- LIGHT (defaults) ---------- +$_fc-page-bg: #f7f7f8 !default; +$_fc-card-bg: #ffffff !default; +$_fc-card-border: #d8dadd !default; +$_fc-text: #2b2b2b !default; +$_fc-text-muted: #6c7480 !default; + +$_fc-banner-from: #eef2ff !default; +$_fc-banner-to: #fce7f3 !default; +$_fc-banner-border: #c7d2fe !default; +$_fc-banner-text: #3730a3 !default; +$_fc-deadline-text: #b91c1c !default; + +$_fc-kpi-bg: #f0f4ff !default; +$_fc-kpi-border: #c7d2fe !default; +$_fc-kpi-num: #1e3a8a !default; + +$_fc-action-bg: #ecfdf5 !default; +$_fc-action-border: #6ee7b7 !default; +$_fc-action-text: #047857 !default; + +$_fc-tile-bg: #f3f4f6 !default; +$_fc-tile-border: #e5e7eb !default; +$_fc-tile-num: #111827 !default; + +$_fc-urgent-bg: #fee2e2 !default; +$_fc-urgent-border: #fca5a5 !default; +$_fc-urgent-num: #991b1b !default; +$_fc-urgent-text: #7f1d1d !default; + +$_fc-activity-bg: #fefce8 !default; +$_fc-activity-border: #fde047 !default; +$_fc-bottleneck-bg: #fef2f2 !default; +$_fc-bottleneck-border: #fecaca !default; + +// ---------- DARK overrides ---------- +@if $o-webclient-color-scheme == dark { + $_fc-page-bg: #1a1d21 !global; + $_fc-card-bg: #22262d !global; + $_fc-card-border: #3a3f47 !global; + $_fc-text: #e5e7eb !global; + $_fc-text-muted: #9ca3af !global; + + // Cool blue monochrome banner (selected option A from brainstorm) + $_fc-banner-from: #1e293b !global; + $_fc-banner-to: #1e3a5f !global; + $_fc-banner-border: #3b82f6 !global; + $_fc-banner-text: #93c5fd !global; + $_fc-deadline-text: #fca5a5 !global; + + $_fc-kpi-bg: #1e293b !global; + $_fc-kpi-border: #334155 !global; + $_fc-kpi-num: #93c5fd !global; + + $_fc-action-bg: #064e3b !global; + $_fc-action-border: #047857 !global; + $_fc-action-text: #6ee7b7 !global; + + $_fc-tile-bg: #2d3138 !global; + $_fc-tile-border: #3a3f47 !global; + $_fc-tile-num: #f3f4f6 !global; + + $_fc-urgent-bg: #4a1414 !global; + $_fc-urgent-border: #7f1d1d !global; + $_fc-urgent-num: #fca5a5 !global; + $_fc-urgent-text: #fecaca !global; + + $_fc-activity-bg: #3a2e0a !global; + $_fc-activity-border: #854d0e !global; + $_fc-bottleneck-bg: #3a1414 !global; + $_fc-bottleneck-border: #7f1d1d !global; +} diff --git a/fusion_claims/static/src/scss/fc_dashboard.scss b/fusion_claims/static/src/scss/fc_dashboard.scss new file mode 100644 index 00000000..bf3568cc --- /dev/null +++ b/fusion_claims/static/src/scss/fc_dashboard.scss @@ -0,0 +1,212 @@ +// ============================================================================= +// Fusion Claims Dashboard — Layout & Section Styles +// Consumes tokens from _fc_dashboard_tokens.scss (must load FIRST in bundle). +// ============================================================================= + +.o_fc_dashboard { + // Re-export tokens as CSS custom properties for devtools inspection + --fc-page-bg: #{$_fc-page-bg}; + --fc-card-bg: #{$_fc-card-bg}; + --fc-card-border: #{$_fc-card-border}; + --fc-text: #{$_fc-text}; + --fc-text-muted: #{$_fc-text-muted}; + --fc-banner-from: #{$_fc-banner-from}; + --fc-banner-to: #{$_fc-banner-to}; + --fc-banner-border: #{$_fc-banner-border}; + --fc-banner-text: #{$_fc-banner-text}; + --fc-deadline-text: #{$_fc-deadline-text}; + --fc-kpi-bg: #{$_fc-kpi-bg}; + --fc-kpi-border: #{$_fc-kpi-border}; + --fc-kpi-num: #{$_fc-kpi-num}; + --fc-action-bg: #{$_fc-action-bg}; + --fc-action-border: #{$_fc-action-border}; + --fc-action-text: #{$_fc-action-text}; + --fc-tile-bg: #{$_fc-tile-bg}; + --fc-tile-border: #{$_fc-tile-border}; + --fc-tile-num: #{$_fc-tile-num}; + --fc-urgent-bg: #{$_fc-urgent-bg}; + --fc-urgent-border: #{$_fc-urgent-border}; + --fc-urgent-num: #{$_fc-urgent-num}; + --fc-urgent-text: #{$_fc-urgent-text}; + --fc-activity-bg: #{$_fc-activity-bg}; + --fc-activity-border: #{$_fc-activity-border}; + --fc-bottleneck-bg: #{$_fc-bottleneck-bg}; + --fc-bottleneck-border: #{$_fc-bottleneck-border}; + + background: var(--fc-page-bg); + color: $_fc-text; + + .o_fc_banner { + display: flex; + justify-content: space-between; + align-items: center; + background: linear-gradient(90deg, var(--fc-banner-from), var(--fc-banner-to)); + border: 1px solid var(--fc-banner-border); + border-radius: 8px; + padding: 10px 14px; + font-weight: 600; + color: var(--fc-banner-text); + } + .o_fc_banner__deadline { font-weight: 700; } + + .o_fc_kpi { + background: var(--fc-kpi-bg); + border: 1px solid var(--fc-kpi-border); + border-radius: 8px; + padding: 14px 10px; + text-align: center; + transition: transform 0.15s ease; + + &:hover { transform: translateY(-2px); } + } + .o_fc_kpi__num { + display: block; + font-size: 1.6rem; + font-weight: 700; + color: var(--fc-kpi-num); + } + .o_fc_kpi__lbl { + display: block; + font-size: 0.75rem; + text-transform: uppercase; + letter-spacing: 0.5px; + color: var(--fc-text-muted); + margin-top: 2px; + } + + .o_fc_actions { + display: flex; + flex-wrap: wrap; + gap: 6px; + } + .o_fc_pill { + background: var(--fc-action-bg); + border: 1px solid var(--fc-action-border); + color: var(--fc-action-text); + border-radius: 16px; + padding: 5px 12px; + font-size: 0.85rem; + font-weight: 600; + cursor: pointer; + transition: background 0.15s ease; + + &:hover { background: var(--fc-action-border); } + } + + .o_fc_section { + background: var(--fc-card-bg); + border: 1px solid var(--fc-card-border); + border-radius: 8px; + padding: 10px 12px; + } + + .o_fc_h6 { + display: flex; + align-items: center; + font-size: 0.9rem; + font-weight: 700; + margin-bottom: 8px; + color: var(--fc-text); + } + .o_fc_tag { + display: inline-block; + font-size: 0.65rem; + padding: 2px 7px; + border-radius: 4px; + background: var(--fc-banner-border); + color: var(--fc-banner-text); + margin-left: 8px; + text-transform: uppercase; + letter-spacing: 0.5px; + font-weight: 600; + } + + .o_fc_tile { + background: var(--fc-tile-bg); + border: 1px solid var(--fc-tile-border); + border-radius: 6px; + padding: 8px 6px; + text-align: center; + font-size: 0.75rem; + line-height: 1.3; + cursor: pointer; + transition: transform 0.15s ease, box-shadow 0.15s ease; + + &:hover { + transform: translateY(-1px); + box-shadow: 0 2px 4px rgba(0,0,0,0.1); + } + } + .o_fc_tile__num { + display: block; + font-size: 1.3rem; + font-weight: 700; + color: var(--fc-tile-num); + margin-bottom: 2px; + } + .o_fc_tile--urgent { + background: var(--fc-urgent-bg); + border-color: var(--fc-urgent-border); + color: var(--fc-urgent-text); + + .o_fc_tile__num { color: var(--fc-urgent-num); } + } + + .o_fc_activities { + background: var(--fc-activity-bg); + border: 1px solid var(--fc-activity-border); + border-radius: 8px; + padding: 10px 12px; + } + .o_fc_activity_row { + display: flex; + justify-content: space-between; + padding: 4px 0; + border-bottom: 1px dashed var(--fc-card-border); + font-size: 0.85rem; + + &:last-child { border-bottom: none; } + } + .o_fc_activity_overdue { + color: var(--fc-urgent-text); + font-weight: 600; + } + .o_fc_activity_deadline { color: var(--fc-text-muted); } + .o_fc_empty { + color: var(--fc-text-muted); + font-style: italic; + text-align: center; + padding: 12px; + margin: 0; + } + + .o_fc_bottleneck { + background: var(--fc-bottleneck-bg); + border: 1px solid var(--fc-bottleneck-border); + border-radius: 8px; + padding: 10px 12px; + } + .o_fc_bottleneck_row { + display: block; + width: 100%; + text-align: left; + padding: 4px 0; + color: var(--fc-text); + text-decoration: none; + + &:hover { color: var(--fc-urgent-num); text-decoration: underline; } + } + + // Countdown widget colour levels (driven by OWL state) + .o_fc_countdown { + display: inline-block; + padding: 2px 8px; + border-radius: 12px; + font-weight: 700; + font-size: 0.85rem; + } + .o_fc_countdown--info { color: var(--fc-banner-text); } + .o_fc_countdown--warning { color: #d97706; } // amber (intentional fixed hex) + .o_fc_countdown--danger { color: var(--fc-urgent-num); } + .o_fc_countdown--muted { color: var(--fc-text-muted); font-style: italic; } +}