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
129
fusion_repairs/static/src/components/dashboard/dashboard.js
Normal file
129
fusion_repairs/static/src/components/dashboard/dashboard.js
Normal file
@@ -0,0 +1,129 @@
|
||||
/** @odoo-module **/
|
||||
// Fusion Repairs dashboard - OWL client action.
|
||||
// Uses standalone rpc() from @web/core/network/rpc per project rule #3
|
||||
// and useService("action") to navigate to backend act_window actions.
|
||||
|
||||
import { Component, useState, onWillStart } from "@odoo/owl";
|
||||
import { registry } from "@web/core/registry";
|
||||
import { rpc } from "@web/core/network/rpc";
|
||||
import { useService } from "@web/core/utils/hooks";
|
||||
import { _t } from "@web/core/l10n/translation";
|
||||
|
||||
export class FusionRepairsDashboard extends Component {
|
||||
static template = "fusion_repairs.Dashboard";
|
||||
static props = ["*"];
|
||||
|
||||
setup() {
|
||||
this.action = useService("action");
|
||||
this.notification = useService("notification");
|
||||
this.state = useState({
|
||||
loading: true,
|
||||
stats: {},
|
||||
urgency_breakdown: [],
|
||||
source_breakdown: [],
|
||||
recent: [],
|
||||
upcoming: [],
|
||||
portals: {},
|
||||
});
|
||||
|
||||
onWillStart(async () => {
|
||||
await this._loadData();
|
||||
});
|
||||
}
|
||||
|
||||
async _loadData() {
|
||||
try {
|
||||
const data = await rpc("/web/dataset/call_kw", {
|
||||
model: "fusion.repair.dashboard",
|
||||
method: "get_dashboard_data",
|
||||
args: [],
|
||||
kwargs: {},
|
||||
});
|
||||
this.state.stats = data.stats || {};
|
||||
this.state.urgency_breakdown = data.urgency_breakdown || [];
|
||||
this.state.source_breakdown = data.source_breakdown || [];
|
||||
this.state.recent = data.recent || [];
|
||||
this.state.upcoming = data.upcoming || [];
|
||||
this.state.portals = data.portals || {};
|
||||
} catch (e) {
|
||||
this.notification.add(_t("Could not load dashboard data."), {
|
||||
type: "danger",
|
||||
});
|
||||
} finally {
|
||||
this.state.loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async refresh() {
|
||||
this.state.loading = true;
|
||||
await this._loadData();
|
||||
}
|
||||
|
||||
openAction(xmlId, extraContext) {
|
||||
return this.action.doAction(xmlId, {
|
||||
additionalContext: extraContext || {},
|
||||
});
|
||||
}
|
||||
|
||||
openWizard() {
|
||||
return this.action.doAction("fusion_repairs.action_open_repair_intake_wizard");
|
||||
}
|
||||
|
||||
openRepair(repairId) {
|
||||
return this.action.doAction({
|
||||
type: "ir.actions.act_window",
|
||||
res_model: "repair.order",
|
||||
res_id: repairId,
|
||||
views: [[false, "form"]],
|
||||
target: "current",
|
||||
});
|
||||
}
|
||||
|
||||
openContract(contractId) {
|
||||
return this.action.doAction({
|
||||
type: "ir.actions.act_window",
|
||||
res_model: "fusion.repair.maintenance.contract",
|
||||
res_id: contractId,
|
||||
views: [[false, "form"]],
|
||||
target: "current",
|
||||
});
|
||||
}
|
||||
|
||||
openUrl(url) {
|
||||
if (url) {
|
||||
window.open(url, "_blank", "noopener");
|
||||
}
|
||||
}
|
||||
|
||||
async copyUrl(url) {
|
||||
if (!url) return;
|
||||
try {
|
||||
await navigator.clipboard.writeText(url);
|
||||
this.notification.add(_t("Copied to clipboard."), { type: "success" });
|
||||
} catch (e) {
|
||||
this.notification.add(_t("Could not copy URL. Select and copy manually."), {
|
||||
type: "warning",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
formatDate(value) {
|
||||
if (!value) return "";
|
||||
return value.slice(0, 10);
|
||||
}
|
||||
|
||||
urgencyPillClass(urgency) {
|
||||
if (urgency === "safety") return "fr-pill fr-pill-safety";
|
||||
if (urgency === "urgent") return "fr-pill fr-pill-urgent";
|
||||
return "fr-pill fr-pill-normal";
|
||||
}
|
||||
|
||||
urgencyLabel(urgency) {
|
||||
const map = { safety: "Safety", urgent: "Urgent", normal: "Normal" };
|
||||
return map[urgency] || "Normal";
|
||||
}
|
||||
}
|
||||
|
||||
registry
|
||||
.category("actions")
|
||||
.add("fusion_repairs.dashboard", FusionRepairsDashboard);
|
||||
253
fusion_repairs/static/src/components/dashboard/dashboard.xml
Normal file
253
fusion_repairs/static/src/components/dashboard/dashboard.xml
Normal file
@@ -0,0 +1,253 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<templates xml:space="preserve">
|
||||
|
||||
<t t-name="fusion_repairs.Dashboard">
|
||||
<div class="o_fusion_repairs_dashboard">
|
||||
|
||||
<!-- Loading state -->
|
||||
<div t-if="state.loading" class="fr-loading">
|
||||
<i class="fa fa-spinner fa-spin fa-2x"/>
|
||||
<div class="mt-3">Loading dashboard...</div>
|
||||
</div>
|
||||
|
||||
<!-- Loaded -->
|
||||
<t t-if="!state.loading">
|
||||
|
||||
<!-- Hero header -->
|
||||
<div class="fr-hero">
|
||||
<h1>Fusion Repairs</h1>
|
||||
<p>Service calls, technician dispatch, maintenance and self-service in one place.</p>
|
||||
</div>
|
||||
|
||||
<!-- Quick actions -->
|
||||
<div class="fr-section-title">Quick Actions</div>
|
||||
<div class="fr-grid fr-grid-actions">
|
||||
<button class="fr-action fr-action-primary"
|
||||
t-on-click="() => this.openWizard()">
|
||||
<span class="fr-action-icon"><i class="fa fa-plus-circle"/></span>
|
||||
<span class="fr-action-text">
|
||||
<span class="fr-action-title">New Service Call</span>
|
||||
<span class="fr-action-sub">Open the guided intake wizard</span>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button class="fr-action"
|
||||
t-on-click="() => this.openAction('fusion_repairs.action_fusion_repair_dashboard')">
|
||||
<span class="fr-action-icon"><i class="fa fa-th-large"/></span>
|
||||
<span class="fr-action-text">
|
||||
<span class="fr-action-title">Service Calls</span>
|
||||
<span class="fr-action-sub">Kanban of every repair</span>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button class="fr-action"
|
||||
t-on-click="() => this.openAction('fusion_repairs.action_maintenance_contract')">
|
||||
<span class="fr-action-icon"><i class="fa fa-calendar-check-o"/></span>
|
||||
<span class="fr-action-text">
|
||||
<span class="fr-action-title">Maintenance Contracts</span>
|
||||
<span class="fr-action-sub">
|
||||
<t t-out="state.stats.maintenance_active_total"/> active
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button class="fr-action"
|
||||
t-on-click="() => this.openAction('fusion_repairs.action_repair_warranty_coverage')">
|
||||
<span class="fr-action-icon"><i class="fa fa-shield"/></span>
|
||||
<span class="fr-action-text">
|
||||
<span class="fr-action-title">Repair Warranties</span>
|
||||
<span class="fr-action-sub">Our 30 / 90-day coverage</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- KPI tiles -->
|
||||
<div class="fr-section-title">Right Now</div>
|
||||
<div class="fr-grid fr-grid-stats">
|
||||
<div class="fr-stat fr-stat-accent"
|
||||
t-on-click="() => this.openAction('fusion_repairs.action_fusion_repair_dashboard', {search_default_open: 1})"
|
||||
style="cursor:pointer;">
|
||||
<span class="fr-stat-label">Open Service Calls</span>
|
||||
<span class="fr-stat-value"><t t-out="state.stats.open_count or 0"/></span>
|
||||
<span class="fr-stat-sub">Not yet closed</span>
|
||||
</div>
|
||||
<div class="fr-stat fr-stat-danger"
|
||||
t-on-click="() => this.openAction('fusion_repairs.action_fusion_repair_dashboard', {search_default_safety: 1, search_default_urgent: 1, search_default_open: 1})"
|
||||
style="cursor:pointer;">
|
||||
<span class="fr-stat-label">Urgent + Safety</span>
|
||||
<span class="fr-stat-value"><t t-out="state.stats.urgent_count or 0"/></span>
|
||||
<span class="fr-stat-sub">High-priority queue</span>
|
||||
</div>
|
||||
<div class="fr-stat fr-stat-warning"
|
||||
t-on-click="() => this.openAction('fusion_repairs.action_fusion_repair_dashboard', {search_default_open: 1})"
|
||||
style="cursor:pointer;">
|
||||
<span class="fr-stat-label">Awaiting Dispatch</span>
|
||||
<span class="fr-stat-value"><t t-out="state.stats.awaiting_dispatch or 0"/></span>
|
||||
<span class="fr-stat-sub">No technician task yet</span>
|
||||
</div>
|
||||
<div class="fr-stat fr-stat-warning"
|
||||
t-on-click="() => this.openAction('fusion_repairs.action_fusion_repair_dashboard', {search_default_open: 1})"
|
||||
style="cursor:pointer;">
|
||||
<span class="fr-stat-label">Needs Re-Quote</span>
|
||||
<span class="fr-stat-value"><t t-out="state.stats.requires_requote or 0"/></span>
|
||||
<span class="fr-stat-sub">Over variance threshold</span>
|
||||
</div>
|
||||
<div class="fr-stat fr-stat-accent"
|
||||
t-on-click="() => this.openAction('fusion_repairs.action_fusion_repair_dashboard', {search_default_week: 1})"
|
||||
style="cursor:pointer;">
|
||||
<span class="fr-stat-label">New This Month</span>
|
||||
<span class="fr-stat-value"><t t-out="state.stats.new_this_month or 0"/></span>
|
||||
<span class="fr-stat-sub">Across all intake surfaces</span>
|
||||
</div>
|
||||
<div class="fr-stat fr-stat-success"
|
||||
t-on-click="() => this.openAction('fusion_repairs.action_maintenance_contract')"
|
||||
style="cursor:pointer;">
|
||||
<span class="fr-stat-label">Maintenance Due (30d)</span>
|
||||
<span class="fr-stat-value"><t t-out="state.stats.maintenance_due_30d or 0"/></span>
|
||||
<span class="fr-stat-sub">Contracts to ring this month</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Self-service portals to share -->
|
||||
<div class="fr-section-title">Self-Service Portals</div>
|
||||
<div class="fr-grid fr-grid-portals">
|
||||
<div class="fr-portal">
|
||||
<div class="fr-portal-head">
|
||||
<i class="fa fa-globe"/> Public Client Portal
|
||||
</div>
|
||||
<div class="fr-portal-sub">
|
||||
Share this link in your voicemail or on equipment QR stickers.
|
||||
Clients can submit a service request 24/7 without logging in.
|
||||
</div>
|
||||
<div class="fr-portal-url" t-out="state.portals.client_portal_url"/>
|
||||
<div class="fr-portal-actions">
|
||||
<button class="btn btn-primary btn-sm"
|
||||
t-on-click="() => this.openUrl(state.portals.client_portal_url)">
|
||||
<i class="fa fa-external-link me-1"/> Open
|
||||
</button>
|
||||
<button class="btn btn-light btn-sm"
|
||||
t-on-click="() => this.copyUrl(state.portals.client_portal_url)">
|
||||
<i class="fa fa-clipboard me-1"/> Copy
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fr-portal">
|
||||
<div class="fr-portal-head">
|
||||
<i class="fa fa-mobile"/> Sales Rep Portal
|
||||
</div>
|
||||
<div class="fr-portal-sub">
|
||||
Mobile-friendly intake form for sales reps in the field.
|
||||
Sales reps with portal access only see repairs they submitted.
|
||||
</div>
|
||||
<div class="fr-portal-url" t-out="state.portals.sales_rep_portal_url"/>
|
||||
<div class="fr-portal-actions">
|
||||
<button class="btn btn-primary btn-sm"
|
||||
t-on-click="() => this.openUrl(state.portals.sales_rep_portal_url)">
|
||||
<i class="fa fa-external-link me-1"/> Open
|
||||
</button>
|
||||
<button class="btn btn-light btn-sm"
|
||||
t-on-click="() => this.copyUrl(state.portals.sales_rep_portal_url)">
|
||||
<i class="fa fa-clipboard me-1"/> Copy
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent + Upcoming -->
|
||||
<div class="fr-section-title">Activity</div>
|
||||
<div class="fr-grid fr-grid-lists">
|
||||
<div class="fr-list">
|
||||
<h3><i class="fa fa-clock-o me-2"/>Recent Service Calls</h3>
|
||||
<t t-if="state.recent.length === 0">
|
||||
<div class="fr-list-empty">No service calls yet</div>
|
||||
</t>
|
||||
<t t-foreach="state.recent" t-as="r" t-key="r.id">
|
||||
<div class="fr-list-row" t-on-click="() => this.openRepair(r.id)">
|
||||
<div class="fr-list-main">
|
||||
<span class="fr-list-title">
|
||||
<t t-out="r.name"/>
|
||||
<span t-att-class="urgencyPillClass(r.urgency)" class="ms-2">
|
||||
<t t-out="urgencyLabel(r.urgency)"/>
|
||||
</span>
|
||||
</span>
|
||||
<span class="fr-list-sub">
|
||||
<t t-out="r.partner_name"/>
|
||||
<t t-if="r.category"> · <t t-out="r.category"/></t>
|
||||
</span>
|
||||
</div>
|
||||
<span class="fr-list-meta">
|
||||
<span class="fr-pill fr-pill-state"><t t-out="r.state_label"/></span>
|
||||
</span>
|
||||
</div>
|
||||
</t>
|
||||
</div>
|
||||
|
||||
<div class="fr-list">
|
||||
<h3><i class="fa fa-calendar me-2"/>Upcoming Maintenance</h3>
|
||||
<t t-if="state.upcoming.length === 0">
|
||||
<div class="fr-list-empty">No upcoming maintenance</div>
|
||||
</t>
|
||||
<t t-foreach="state.upcoming" t-as="c" t-key="c.id">
|
||||
<div class="fr-list-row" t-on-click="() => this.openContract(c.id)">
|
||||
<div class="fr-list-main">
|
||||
<span class="fr-list-title">
|
||||
<t t-out="c.name"/>
|
||||
<t t-if="c.days_until !== undefined and c.days_until <= 7">
|
||||
<span class="fr-pill fr-pill-urgent ms-2">
|
||||
<t t-out="c.days_until"/>d
|
||||
</span>
|
||||
</t>
|
||||
</span>
|
||||
<span class="fr-list-sub">
|
||||
<t t-out="c.partner_name"/> · <t t-out="c.product_name"/>
|
||||
</span>
|
||||
</div>
|
||||
<span class="fr-list-meta">
|
||||
<t t-out="formatDate(c.next_due_date)"/>
|
||||
</span>
|
||||
</div>
|
||||
</t>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Configuration -->
|
||||
<div class="fr-section-title">Configuration</div>
|
||||
<div class="fr-grid fr-grid-config">
|
||||
<button class="fr-action"
|
||||
t-on-click="() => this.openAction('fusion_repairs.action_repair_product_category')">
|
||||
<span class="fr-action-icon"><i class="fa fa-tags"/></span>
|
||||
<span class="fr-action-text">
|
||||
<span class="fr-action-title">Equipment Categories</span>
|
||||
<span class="fr-action-sub">Hospital beds, stairlifts...</span>
|
||||
</span>
|
||||
</button>
|
||||
<button class="fr-action"
|
||||
t-on-click="() => this.openAction('fusion_repairs.action_repair_intake_template')">
|
||||
<span class="fr-action-icon"><i class="fa fa-question-circle"/></span>
|
||||
<span class="fr-action-text">
|
||||
<span class="fr-action-title">Intake Templates</span>
|
||||
<span class="fr-action-sub">Question banks per category</span>
|
||||
</span>
|
||||
</button>
|
||||
<button class="fr-action"
|
||||
t-on-click="() => this.openAction('fusion_repairs.action_repair_service_catalog')">
|
||||
<span class="fr-action-icon"><i class="fa fa-wrench"/></span>
|
||||
<span class="fr-action-text">
|
||||
<span class="fr-action-title">Service Catalogue</span>
|
||||
<span class="fr-action-sub">Auto-match + estimated cost</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 text-end">
|
||||
<button class="btn btn-sm btn-light" t-on-click="() => this.refresh()">
|
||||
<i class="fa fa-refresh me-1"/> Refresh
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</t>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
</templates>
|
||||
Reference in New Issue
Block a user