admin/Odoo-Modules
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(fusion_repairs): OWL dashboard - quick actions, KPIs, portal share

Browse Source 
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
2026-05-20 22:58:06 -04:00
parent 5a5e310a83
commit 38a79a4b04
9 changed files with 922 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
fusion_repairs/static/src/scss/_fr_tokens.scss Normal file
View File

@@ -0,0 +1,63 @@
// 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});

320
fusion_repairs/static/src/scss/dashboard.scss Normal file
View 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; }
}
}