38a79a4b04
A real landing dashboard for the Fusion Repairs app so users see at a glance what is open, what is urgent, and where to click. Built as an OWL client action, theme-aware (light AND dark) at SCSS compile time, zero hardcoded user-facing colours. What's on it - Hero banner with gradient accent - 4 quick-action tiles (New Service Call, Service Calls, Maintenance Contracts, Repair Warranties) - 6 KPI stat tiles (Open / Urgent+Safety / Awaiting Dispatch / Needs Re-Quote / New This Month / Maintenance Due 30d) - each is clickable and lands in the right filtered list - Self-service portal cards with copy-to-clipboard for the public client portal URL and the sales rep portal URL (so office can share them on voicemail / printed materials / training) - Recent Service Calls list (last 5) - click jumps to repair form - Upcoming Maintenance list (next 5 due) - red pill when <=7 days out - Configuration tiles (Equipment Categories / Intake Templates / Service Catalogue) - Refresh button Architecture - fusion.repair.dashboard AbstractModel exposes get_dashboard_data(): returns stats + urgency_breakdown + source_breakdown + recent[5] + upcoming[5] + portals (URLs resolved via web.base.url + fusion_repairs.client_portal_url) - FusionRepairsDashboard OWL component (registry actions 'fusion_repairs.dashboard') uses standalone rpc() per project rule #3, useService('action') for navigation, useService('notification') for copy feedback. static props = ['*'] to accept the client-action props envelope. - _fr_tokens.scss registered FIRST in web.assets_backend so its variables are in scope when dashboard.scss compiles. NO @import (per project rule). Branches on $o-webclient-color-scheme at compile time so the dark bundle (web.assets_web_dark) gets dark hex values automatically - per project CLAUDE.md rule on dark mode. - All visible colours come from CSS-variable-wrapped SCSS tokens (--fr-page-bg, --fr-card-bg, --fr-border, --fr-accent, ...) which fall back to the SCSS hex value. Three-layer contrast: page (grayest) -> card (mid) -> elevated (brightest). - New ir.actions.client action_fusion_repairs_home_dashboard with tag='fusion_repairs.dashboard'. - Top-level menu now lands on this dashboard. 'Dashboard' added as the first sub-menu; 'Service Calls' (the kanban) is still right below it. Verified on local westin-v19: STATS: open=15, urgent=4, new_this_month=13, awaiting_dispatch=9, requires_requote=1, maintenance_due_30d=1, active_total=2 PORTALS: client=http://192.168.139.165:8069/repair sales_rep=http://192.168.139.165:8069/my/repair/new RECENT count: 5 UPCOMING count: 2 SOURCE breakdown: backend_wizard 9, client_portal 3, manual 2, sales_rep_portal 1 Web /web/login: 200, no SCSS compile errors in logs. Bumped to 19.0.1.0.5 so the asset bundle hash refreshes. Co-authored-by: Cursor <cursoragent@cursor.com>
64 lines
2.5 KiB
SCSS
64 lines
2.5 KiB
SCSS
// Fusion Repairs design tokens.
|
|
// Compile-time branching on $o-webclient-color-scheme makes the SAME SCSS file
|
|
// produce different values for the light bundle (web.assets_backend) and the
|
|
// dark bundle (web.assets_web_dark). Each token is wrapped in a CSS custom
|
|
// property so runtime overrides are still possible if ever needed.
|
|
//
|
|
// IMPORTANT: do NOT @import this file - per project Odoo 19 rule, register
|
|
// it as a separate entry in web.assets_backend BEFORE dashboard.scss so the
|
|
// variables are in scope when the dashboard file is compiled.
|
|
|
|
$o-webclient-color-scheme: bright !default;
|
|
|
|
// Default (light) palette.
|
|
$_fr-page-hex: #f3f4f6;
|
|
$_fr-card-hex: #ffffff;
|
|
$_fr-card-elevated-hex: #ffffff;
|
|
$_fr-border-hex: #d8dadd;
|
|
$_fr-border-soft-hex: #e5e7eb;
|
|
$_fr-text-hex: #1f2937;
|
|
$_fr-muted-hex: #6b7280;
|
|
$_fr-accent-hex: #2b6cb0;
|
|
$_fr-success-hex: #16a34a;
|
|
$_fr-warning-hex: #d97706;
|
|
$_fr-danger-hex: #dc2626;
|
|
$_fr-info-bg-hex: #eff6ff;
|
|
$_fr-success-bg-hex: #ecfdf5;
|
|
$_fr-warning-bg-hex: #fffbeb;
|
|
$_fr-danger-bg-hex: #fef2f2;
|
|
|
|
@if $o-webclient-color-scheme == dark {
|
|
$_fr-page-hex: #14181d !global;
|
|
$_fr-card-hex: #1f242b !global;
|
|
$_fr-card-elevated-hex: #262c34 !global;
|
|
$_fr-border-hex: #2d333b !global;
|
|
$_fr-border-soft-hex: #242a31 !global;
|
|
$_fr-text-hex: #e6e8eb !global;
|
|
$_fr-muted-hex: #9aa3ad !global;
|
|
$_fr-accent-hex: #60a5fa !global;
|
|
$_fr-success-hex: #34d399 !global;
|
|
$_fr-warning-hex: #fbbf24 !global;
|
|
$_fr-danger-hex: #f87171 !global;
|
|
$_fr-info-bg-hex: #1e3a5f !global;
|
|
$_fr-success-bg-hex: #14342a !global;
|
|
$_fr-warning-bg-hex: #3b2f15 !global;
|
|
$_fr-danger-bg-hex: #3c1d1d !global;
|
|
}
|
|
|
|
// CSS-variable-wrapped tokens. Use these everywhere in dashboard.scss.
|
|
$fr-page: var(--fr-page-bg, #{$_fr-page-hex});
|
|
$fr-card: var(--fr-card-bg, #{$_fr-card-hex});
|
|
$fr-card-elevated: var(--fr-card-elevated-bg, #{$_fr-card-elevated-hex});
|
|
$fr-border: var(--fr-border, #{$_fr-border-hex});
|
|
$fr-border-soft: var(--fr-border-soft, #{$_fr-border-soft-hex});
|
|
$fr-text: var(--fr-text, #{$_fr-text-hex});
|
|
$fr-muted: var(--fr-muted, #{$_fr-muted-hex});
|
|
$fr-accent: var(--fr-accent, #{$_fr-accent-hex});
|
|
$fr-success: var(--fr-success, #{$_fr-success-hex});
|
|
$fr-warning: var(--fr-warning, #{$_fr-warning-hex});
|
|
$fr-danger: var(--fr-danger, #{$_fr-danger-hex});
|
|
$fr-info-bg: var(--fr-info-bg, #{$_fr-info-bg-hex});
|
|
$fr-success-bg: var(--fr-success-bg, #{$_fr-success-bg-hex});
|
|
$fr-warning-bg: var(--fr-warning-bg, #{$_fr-warning-bg-hex});
|
|
$fr-danger-bg: var(--fr-danger-bg, #{$_fr-danger-bg-hex});
|