feat(fusion_repairs): OWL dashboard - quick actions, KPIs, portal share
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>
This commit is contained in:
gsinghpal
320
fusion_repairs/static/src/scss/dashboard.scss
Normal file
320
fusion_repairs/static/src/scss/dashboard.scss
Normal file
@@ -0,0 +1,320 @@
|
||||
// Fusion Repairs dashboard.
|
||||
// Uses tokens from _fr_tokens.scss (registered first in the bundle).
|
||||
// Three-layer contrast: page (grayest) -> section -> card (brightest).
|
||||
|
||||
.o_fusion_repairs_dashboard {
|
||||
background-color: $fr-page;
|
||||
color: $fr-text;
|
||||
min-height: calc(100vh - 46px);
|
||||
padding: 24px;
|
||||
overflow-y: auto;
|
||||
|
||||
.fr-hero {
|
||||
background: linear-gradient(135deg, $fr-accent 0%, color-mix(in srgb, $fr-accent 60%, $fr-success) 100%);
|
||||
color: #ffffff;
|
||||
border-radius: 12px;
|
||||
padding: 28px 32px;
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
|
||||
h1 {
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
color: #ffffff;
|
||||
}
|
||||
p {
|
||||
opacity: 0.9;
|
||||
margin: 0;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.fr-section-title {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.6px;
|
||||
color: $fr-muted;
|
||||
margin: 24px 0 12px 0;
|
||||
}
|
||||
|
||||
.fr-grid {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
&.fr-grid-stats {
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
}
|
||||
&.fr-grid-actions {
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
}
|
||||
&.fr-grid-portals {
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
}
|
||||
&.fr-grid-config {
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
}
|
||||
&.fr-grid-lists {
|
||||
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
.fr-stat {
|
||||
background-color: $fr-card;
|
||||
border: 1px solid $fr-border;
|
||||
border-radius: 10px;
|
||||
padding: 18px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.fr-stat-label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.4px;
|
||||
color: $fr-muted;
|
||||
}
|
||||
.fr-stat-value {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
color: $fr-text;
|
||||
}
|
||||
.fr-stat-sub {
|
||||
font-size: 12px;
|
||||
color: $fr-muted;
|
||||
}
|
||||
|
||||
&.fr-stat-accent .fr-stat-value { color: $fr-accent; }
|
||||
&.fr-stat-warning .fr-stat-value { color: $fr-warning; }
|
||||
&.fr-stat-danger .fr-stat-value { color: $fr-danger; }
|
||||
&.fr-stat-success .fr-stat-value { color: $fr-success; }
|
||||
}
|
||||
|
||||
.fr-action {
|
||||
background-color: $fr-card;
|
||||
border: 1px solid $fr-border;
|
||||
border-radius: 10px;
|
||||
padding: 18px 20px;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
color: $fr-text;
|
||||
font: inherit;
|
||||
transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: $fr-accent;
|
||||
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.fr-action-icon {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
min-width: 44px;
|
||||
border-radius: 8px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: $fr-info-bg;
|
||||
color: $fr-accent;
|
||||
font-size: 18px;
|
||||
}
|
||||
.fr-action-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
}
|
||||
.fr-action-title {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: $fr-text;
|
||||
}
|
||||
.fr-action-sub {
|
||||
font-size: 12px;
|
||||
color: $fr-muted;
|
||||
}
|
||||
|
||||
&.fr-action-primary {
|
||||
background: linear-gradient(135deg, $fr-accent 0%, color-mix(in srgb, $fr-accent 65%, $fr-success) 100%);
|
||||
border-color: transparent;
|
||||
color: #ffffff;
|
||||
|
||||
.fr-action-icon {
|
||||
background-color: rgba(255, 255, 255, 0.18);
|
||||
color: #ffffff;
|
||||
}
|
||||
.fr-action-title,
|
||||
.fr-action-sub {
|
||||
color: #ffffff;
|
||||
}
|
||||
.fr-action-sub { opacity: 0.85; }
|
||||
|
||||
&:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); }
|
||||
}
|
||||
}
|
||||
|
||||
.fr-portal {
|
||||
background-color: $fr-card;
|
||||
border: 1px solid $fr-border;
|
||||
border-radius: 10px;
|
||||
padding: 18px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
|
||||
.fr-portal-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
|
||||
i {
|
||||
color: $fr-accent;
|
||||
}
|
||||
}
|
||||
.fr-portal-sub {
|
||||
font-size: 12px;
|
||||
color: $fr-muted;
|
||||
}
|
||||
.fr-portal-url {
|
||||
background-color: $fr-info-bg;
|
||||
color: $fr-text;
|
||||
padding: 6px 10px;
|
||||
border-radius: 6px;
|
||||
font-family: ui-monospace, "SF Mono", Menlo, monospace;
|
||||
font-size: 12px;
|
||||
word-break: break-all;
|
||||
}
|
||||
.fr-portal-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 4px;
|
||||
|
||||
.btn {
|
||||
font-size: 12px;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fr-list {
|
||||
background-color: $fr-card;
|
||||
border: 1px solid $fr-border;
|
||||
border-radius: 10px;
|
||||
padding: 18px 20px;
|
||||
|
||||
h3 {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 12px 0;
|
||||
color: $fr-text;
|
||||
}
|
||||
.fr-list-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
border-top: 1px solid $fr-border-soft;
|
||||
cursor: pointer;
|
||||
gap: 12px;
|
||||
|
||||
&:first-of-type {
|
||||
border-top: none;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $fr-info-bg;
|
||||
margin: 0 -8px;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.fr-list-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
.fr-list-title {
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
color: $fr-text;
|
||||
}
|
||||
.fr-list-sub {
|
||||
font-size: 12px;
|
||||
color: $fr-muted;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.fr-list-meta {
|
||||
font-size: 11px;
|
||||
color: $fr-muted;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.fr-list-empty {
|
||||
text-align: center;
|
||||
color: $fr-muted;
|
||||
font-size: 13px;
|
||||
padding: 24px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.fr-pill {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.4px;
|
||||
|
||||
&.fr-pill-normal {
|
||||
background-color: $fr-border-soft;
|
||||
color: $fr-text;
|
||||
}
|
||||
&.fr-pill-urgent {
|
||||
background-color: $fr-warning-bg;
|
||||
color: $fr-warning;
|
||||
}
|
||||
&.fr-pill-safety {
|
||||
background-color: $fr-danger-bg;
|
||||
color: $fr-danger;
|
||||
}
|
||||
&.fr-pill-state {
|
||||
background-color: $fr-info-bg;
|
||||
color: $fr-accent;
|
||||
}
|
||||
}
|
||||
|
||||
.fr-loading {
|
||||
text-align: center;
|
||||
padding: 60px 0;
|
||||
color: $fr-muted;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
padding: 16px;
|
||||
|
||||
.fr-hero { padding: 20px 22px; }
|
||||
.fr-hero h1 { font-size: 22px; }
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user