@fleetbase/fleetops-engine 0.6.48 → 0.6.49

package/addon/components/widget/fuel-efficiency.js

@@ -0,0 +1,43 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { task } from 'ember-concurrency';
+
+export default class WidgetFuelEfficiencyComponent extends Component {
+    static widgetId = 'fleet-ops-fuel-efficiency-widget';
+
+    @service fetch;
+
+    @tracked data = null;
+    @tracked error = null;
+
+    constructor() {
+        super(...arguments);
+        this.load.perform();
+    }
+
+    get chartOptions() {
+        return {
+            responsive: true,
+            maintainAspectRatio: false,
+            interaction: { mode: 'index', intersect: false },
+            plugins: {
+                legend: { position: 'bottom', labels: { boxWidth: 12, padding: 8 } },
+            },
+            scales: {
+                x: { grid: { display: false } },
+                y1: { position: 'left', beginAtZero: true, title: { display: false } },
+                y2: { position: 'right', beginAtZero: true, grid: { drawOnChartArea: false } },
+            },
+        };
+    }
+
+    @task *load() {
+        try {
+            this.data = yield this.fetch.get('fleet-ops/analytics/fuel-efficiency', { period: '90d' });
+            this.error = null;
+        } catch (e) {
+            this.error = e?.message ?? 'Failed to load fuel data';
+        }
+    }
+}

package/addon/components/widget/geofence-violations.hbs

@@ -0,0 +1,44 @@
+<div class="fleet-ops-widget fleet-ops-geofence-violations flex flex-col h-full {{@class}}" ...attributes>
+    <div class="flex items-center justify-between px-3 py-1.5 border dark:border-gray-700 border-gray-200 dark:bg-gray-800 bg-gray-50 rounded-t-md shadow-sm">
+        <span class="text-xs font-bold text-black dark:text-gray-100">{{t "widget.geofence-violations.title"}}</span>
+        <FaIcon @icon="location-crosshairs" class="text-gray-400" />
+    </div>
+
+    <div class="flex-1 flex flex-col p-2.5 border border-t-0 dark:border-gray-700 border-gray-200 rounded-b-md bg-white dark:bg-gray-900 min-h-0">
+        {{#if this.load.isRunning}}
+            <div class="flex items-center justify-center h-full"><Spinner /></div>
+        {{else if this.error}}
+            <div class="flex items-center justify-center h-full text-xs text-red-500">{{this.error}}</div>
+        {{else if this.data}}
+            <div class="grid grid-cols-2 gap-1.5 mb-2">
+                <div class="rounded-md border dark:border-gray-700 border-gray-200 p-1.5 text-center">
+                    <div class="text-[9px] uppercase text-gray-500 dark:text-gray-400 leading-none">Today</div>
+                    <div class="text-lg font-bold leading-tight mt-0.5 {{if this.data.violations_today 'text-amber-500' 'text-gray-400'}}">{{this.data.violations_today}}</div>
+                </div>
+                <div class="rounded-md border dark:border-gray-700 border-gray-200 p-1.5 text-center">
+                    <div class="text-[9px] uppercase text-gray-500 dark:text-gray-400 leading-none">Last 7d</div>
+                    <div class="text-lg font-bold text-black dark:text-gray-100 leading-tight mt-0.5">{{this.data.violations_period}}</div>
+                </div>
+            </div>
+            <div class="grid grid-cols-2 gap-2 flex-1 min-h-0">
+                <div class="min-h-0">
+                    {{#if this.zoneDatasets}}
+                        <Chart @type="bar" @labels={{this.zoneLabels}} @datasets={{this.zoneDatasets}} @options={{this.zoneOptions}} />
+                    {{else}}
+                        <div class="flex items-center justify-center h-full text-[10px] text-gray-500">No zone activity.</div>
+                    {{/if}}
+                </div>
+                <div class="min-h-0 overflow-auto divide-y dark:divide-gray-700">
+                    {{#each this.data.top_dwells as |dwell|}}
+                        <div class="py-1">
+                            <div class="text-[11px] font-medium text-black dark:text-gray-100 truncate">{{or dwell.driver_name "Driver"}}</div>
+                            <div class="text-[10px] text-gray-500 dark:text-gray-400 truncate">{{or dwell.zone_name "Zone"}} &middot; {{dwell.duration_minutes}}m</div>
+                        </div>
+                    {{else}}
+                        <div class="text-center text-[10px] text-gray-500 py-3">No dwell outliers.</div>
+                    {{/each}}
+                </div>
+            </div>
+        {{/if}}
+    </div>
+</div>

package/addon/components/widget/geofence-violations.js

@@ -0,0 +1,55 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { task } from 'ember-concurrency';
+
+export default class WidgetGeofenceViolationsComponent extends Component {
+    static widgetId = 'fleet-ops-geofence-violations-widget';
+
+    @service fetch;
+
+    @tracked data = null;
+    @tracked error = null;
+
+    constructor() {
+        super(...arguments);
+        this.load.perform();
+    }
+
+    get zoneDatasets() {
+        if (!this.data?.by_zone?.data?.length) return null;
+        return [
+            {
+                label: 'Events',
+                data: this.data.by_zone.data,
+                backgroundColor: '#f59e0b',
+            },
+        ];
+    }
+
+    get zoneLabels() {
+        return this.data?.by_zone?.labels ?? [];
+    }
+
+    get zoneOptions() {
+        return {
+            responsive: true,
+            maintainAspectRatio: false,
+            indexAxis: 'y',
+            plugins: { legend: { display: false } },
+            scales: {
+                x: { beginAtZero: true, ticks: { precision: 0 } },
+                y: { grid: { display: false } },
+            },
+        };
+    }
+
+    @task *load() {
+        try {
+            this.data = yield this.fetch.get('fleet-ops/analytics/geofence-violations', { period: '7d' });
+            this.error = null;
+        } catch (e) {
+            this.error = e?.message ?? 'Failed to load geofence data';
+        }
+    }
+}

package/addon/components/widget/issues-insights.hbs

@@ -0,0 +1,43 @@
+<div class="fleet-ops-widget fleet-ops-issues-insights flex flex-col h-full {{@class}}" ...attributes>
+    <div class="flex items-center justify-between px-3 py-1.5 border dark:border-gray-700 border-gray-200 dark:bg-gray-800 bg-gray-50 rounded-t-md shadow-sm">
+        <span class="text-xs font-bold text-black dark:text-gray-100">{{t "widget.issues-insights.title"}}</span>
+        <FaIcon @icon="triangle-exclamation" class="text-gray-400" />
+    </div>
+
+    <div class="flex-1 p-2.5 border border-t-0 dark:border-gray-700 border-gray-200 rounded-b-md bg-white dark:bg-gray-900 min-h-0">
+        {{#if this.load.isRunning}}
+            <div class="flex items-center justify-center h-full"><Spinner /></div>
+        {{else if this.error}}
+            <div class="flex items-center justify-center h-full text-xs text-red-500">{{this.error}}</div>
+        {{else if this.data}}
+            <div class="grid grid-cols-2 gap-2 h-full">
+                <div class="min-h-0">
+                    {{#if this.categoryDatasets}}
+                        <Chart @type="doughnut" @labels={{this.categoryLabels}} @datasets={{this.categoryDatasets}} @options={{this.categoryOptions}} />
+                    {{else}}
+                        <div class="flex items-center justify-center h-full text-[10px] text-gray-500">No issues yet.</div>
+                    {{/if}}
+                </div>
+                <div class="flex flex-col justify-around gap-1.5">
+                    <div>
+                        <div class="text-[9px] uppercase text-gray-500 dark:text-gray-400 leading-none">Open</div>
+                        <div class="text-lg font-bold text-amber-500 leading-tight">{{this.data.open}}</div>
+                    </div>
+                    <div>
+                        <div class="text-[9px] uppercase text-gray-500 dark:text-gray-400 leading-none">Resolved (30d)</div>
+                        <div class="text-lg font-bold text-green-500 leading-tight">{{this.data.resolved_this_period}}</div>
+                    </div>
+                    <div>
+                        <div class="text-[9px] uppercase text-gray-500 dark:text-gray-400 leading-none">Avg Resolve</div>
+                        <div class="text-sm font-bold text-black dark:text-gray-100 leading-tight">{{this.resolutionDisplay}}</div>
+                    </div>
+                    <div class="flex flex-wrap gap-1">
+                        <Badge @status="danger" @text={{concat "H " this.data.by_priority.high}} @hideIcon={{true}} @disableHumanize={{true}} @wrapperClass="text-[9px] px-1 py-0" />
+                        <Badge @status="warning" @text={{concat "M " this.data.by_priority.medium}} @hideIcon={{true}} @disableHumanize={{true}} @wrapperClass="text-[9px] px-1 py-0" />
+                        <Badge @status="info" @text={{concat "L " this.data.by_priority.low}} @hideIcon={{true}} @disableHumanize={{true}} @wrapperClass="text-[9px] px-1 py-0" />
+                    </div>
+                </div>
+            </div>
+        {{/if}}
+    </div>
+</div>

package/addon/components/widget/issues-insights.js

@@ -0,0 +1,62 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { task } from 'ember-concurrency';
+
+const CATEGORY_PALETTE = ['#3485e2', '#f59e0b', '#22c55e', '#ef4444', '#8b5cf6', '#a3a3a3', '#0ea5e9', '#ec4899'];
+
+export default class WidgetIssuesInsightsComponent extends Component {
+    static widgetId = 'fleet-ops-issues-insights-widget';
+
+    @service fetch;
+
+    @tracked data = null;
+    @tracked error = null;
+
+    constructor() {
+        super(...arguments);
+        this.load.perform();
+    }
+
+    get categoryDatasets() {
+        if (!this.data?.by_category?.data?.length) return null;
+        return [
+            {
+                data: this.data.by_category.data,
+                backgroundColor: this.data.by_category.data.map((_, i) => CATEGORY_PALETTE[i % CATEGORY_PALETTE.length]),
+                borderWidth: 0,
+            },
+        ];
+    }
+
+    get categoryLabels() {
+        return this.data?.by_category?.labels ?? [];
+    }
+
+    get categoryOptions() {
+        return {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: { position: 'bottom', labels: { boxWidth: 10, padding: 6, font: { size: 10 } } },
+            },
+        };
+    }
+
+    get resolutionDisplay() {
+        const hours = this.data?.avg_resolution_hours;
+        if (typeof hours !== 'number') return '—';
+        if (hours < 1) return `${Math.round(hours * 60)}m`;
+        if (hours < 48) return `${hours}h`;
+        return `${(hours / 24).toFixed(1)}d`;
+    }
+
+    @task *load() {
+        try {
+            this.data = yield this.fetch.get('fleet-ops/analytics/issues-insights', { period: '30d' });
+            this.error = null;
+        } catch (e) {
+            this.error = e?.message ?? 'Failed to load issues';
+        }
+    }
+}

package/addon/components/widget/kpi-active-orders.hbs

@@ -0,0 +1,10 @@
+<Widget::KpiTile
+    @slug="active_live_orders"
+    @title={{t "widget.kpi-active-orders.title"}}
+    @icon="bolt"
+    @format="count"
+    @period="30d"
+    @showDelta={{false}}
+    @showSparkline={{false}}
+    ...attributes
+/>

package/addon/components/widget/kpi-active-orders.js

@@ -0,0 +1,5 @@
+import Component from '@glimmer/component';
+
+export default class WidgetKpiActiveOrdersComponent extends Component {
+    static widgetId = 'fleet-ops-kpi-active-orders-widget';
+}

package/addon/components/widget/kpi-aov.hbs

@@ -0,0 +1,10 @@
+<Widget::KpiTile
+    @slug="avg_order_value"
+    @title={{t "widget.kpi-aov.title"}}
+    @icon="receipt"
+    @format="money"
+    @period="30d"
+    @showDelta={{true}}
+    @showSparkline={{true}}
+    ...attributes
+/>

package/addon/components/widget/kpi-aov.js

@@ -0,0 +1,5 @@
+import Component from '@glimmer/component';
+
+export default class WidgetKpiAovComponent extends Component {
+    static widgetId = 'fleet-ops-kpi-aov-widget';
+}

package/addon/components/widget/kpi-distance.hbs

@@ -0,0 +1,10 @@
+<Widget::KpiTile
+    @slug="total_distance_traveled"
+    @title={{t "widget.kpi-distance.title"}}
+    @icon="route"
+    @format="meters"
+    @period="30d"
+    @showDelta={{true}}
+    @showSparkline={{true}}
+    ...attributes
+/>

package/addon/components/widget/kpi-distance.js

@@ -0,0 +1,5 @@
+import Component from '@glimmer/component';
+
+export default class WidgetKpiDistanceComponent extends Component {
+    static widgetId = 'fleet-ops-kpi-distance-widget';
+}

package/addon/components/widget/kpi-drivers-online.hbs

@@ -0,0 +1,10 @@
+<Widget::KpiTile
+    @slug="drivers_online"
+    @title={{t "widget.kpi-drivers-online.title"}}
+    @icon="id-card"
+    @format="count"
+    @period="30d"
+    @showDelta={{false}}
+    @showSparkline={{false}}
+    ...attributes
+/>

package/addon/components/widget/kpi-drivers-online.js

@@ -0,0 +1,5 @@
+import Component from '@glimmer/component';
+
+export default class WidgetKpiDriversOnlineComponent extends Component {
+    static widgetId = 'fleet-ops-kpi-drivers-online-widget';
+}

package/addon/components/widget/kpi-earnings.hbs

@@ -0,0 +1,10 @@
+<Widget::KpiTile
+    @slug="earnings"
+    @title={{t "widget.kpi-earnings.title"}}
+    @icon="sack-dollar"
+    @format="money"
+    @period="30d"
+    @showDelta={{true}}
+    @showSparkline={{true}}
+    ...attributes
+/>

package/addon/components/widget/kpi-earnings.js

@@ -0,0 +1,5 @@
+import Component from '@glimmer/component';
+
+export default class WidgetKpiEarningsComponent extends Component {
+    static widgetId = 'fleet-ops-kpi-earnings-widget';
+}

package/addon/components/widget/kpi-open-issues.hbs

@@ -0,0 +1,11 @@
+<Widget::KpiTile
+    @slug="open_issues"
+    @title={{t "widget.kpi-open-issues.title"}}
+    @icon="triangle-exclamation"
+    @format="count"
+    @period="30d"
+    @showDelta={{true}}
+    @deltaInverse={{true}}
+    @showSparkline={{true}}
+    ...attributes
+/>

package/addon/components/widget/kpi-open-issues.js

@@ -0,0 +1,5 @@
+import Component from '@glimmer/component';
+
+export default class WidgetKpiOpenIssuesComponent extends Component {
+    static widgetId = 'fleet-ops-kpi-open-issues-widget';
+}

package/addon/components/widget/kpi-tile.hbs

@@ -0,0 +1,59 @@
+{{!--
+    KPI tile. Layout strategy:
+    - Title + icon at the top.
+    - Value + delta directly under the title.
+    - Sparkline absolutely positioned at the bottom edge of the card so every
+      tile lines up regardless of value-string length, and a flat-zero
+      sparkline (all-zero data, fill:'origin', y.min=0) sits flush along the
+      bottom rather than floating in the middle.
+--}}
+<div class="fleet-ops-widget fleet-ops-kpi-tile fleet-ops-kpi-tile-pop {{this.cardAccentClass}} relative flex flex-col h-full rounded-md border shadow-sm overflow-hidden {{@class}}" ...attributes>
+    <div class="flex items-center justify-between px-2.5 pt-2 relative z-10">
+        <span class="text-[10px] uppercase tracking-wider text-gray-500 dark:text-gray-400 font-bold truncate">
+            {{@title}}
+        </span>
+        {{#if @icon}}
+            <FaIcon @icon={{@icon}} @prefix={{or @iconPrefix "fas"}} class="kpi-tile-icon text-gray-400 dark:text-gray-500 text-[11px]" />
+        {{/if}}
+    </div>
+
+    <div class="flex-1 flex flex-col px-2.5 pt-1 min-h-0 relative z-10">
+        {{#if this.load.isRunning}}
+            <div class="flex-1 flex items-center justify-center">
+                <Spinner />
+            </div>
+        {{else if this.error}}
+            <div class="flex-1 flex items-center justify-center text-[10px] text-red-500 dark:text-red-400">
+                {{this.error}}
+            </div>
+        {{else if this.data}}
+            <div class="flex items-baseline gap-1.5 kpi-tile-value-row">
+                <span class="text-2xl font-bold leading-none truncate {{this.valueTextClass}}">
+                    {{#if (eq this.format "money")}}
+                        {{format-currency this.data.value this.currency}}
+                    {{else if (eq this.format "meters")}}
+                        {{format-meters this.data.value}}
+                    {{else if (eq this.format "duration")}}
+                        {{format-duration this.data.value}}
+                    {{else}}
+                        {{this.data.value}}
+                    {{/if}}
+                </span>
+                {{#if this.hasDelta}}
+                    <Badge @status={{this.deltaStatus}} @text={{this.deltaText}} @hideIcon={{true}} @disableHumanize={{true}} @wrapperClass="text-[9px] px-1 py-0 font-bold" />
+                {{/if}}
+            </div>
+        {{/if}}
+    </div>
+
+    {{#if this.sparklineDatasets}}
+        <div class="kpi-tile-sparkline absolute inset-x-0 bottom-0">
+            <Chart
+                @type="line"
+                @labels={{this.sparklineLabels}}
+                @datasets={{this.sparklineDatasets}}
+                @options={{this.sparklineOptions}}
+            />
+        </div>
+    {{/if}}
+</div>

package/addon/components/widget/kpi-tile.js

@@ -0,0 +1,168 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { task } from 'ember-concurrency';
+
+/**
+ * <Widget::KpiTile @slug="earnings" @title="..." @format="money" @showDelta={{true}}
+ *                  @showSparkline={{true}} @deltaInverse={{false}} @period="30d" />
+ *
+ * Renders a single KPI tile backed by `/fleet-ops/metrics/{slug}`. Hosts the
+ * format-specific value rendering, the optional period-over-period delta
+ * badge (with `deltaInverse` to flip semantics for inverse-good metrics like
+ * open_issues), and the optional sparkline line chart.
+ */
+export default class WidgetKpiTileComponent extends Component {
+    @service fetch;
+    @tracked data = null;
+    @tracked error = null;
+
+    get period() {
+        return this.args.period ?? '30d';
+    }
+
+    get showDelta() {
+        return this.args.showDelta ?? true;
+    }
+
+    get showSparkline() {
+        return this.args.showSparkline ?? true;
+    }
+
+    get deltaInverse() {
+        return this.args.deltaInverse ?? false;
+    }
+
+    get format() {
+        return this.args.format ?? this.data?.format ?? 'count';
+    }
+
+    get currency() {
+        return this.data?.currency ?? 'USD';
+    }
+
+    get deltaPct() {
+        return this.data?.delta_pct;
+    }
+
+    get hasDelta() {
+        return this.showDelta && typeof this.deltaPct === 'number';
+    }
+
+    get deltaStatus() {
+        const pct = this.deltaPct;
+        if (typeof pct !== 'number' || pct === 0) return 'info';
+        const positive = pct > 0;
+        const isGood = this.deltaInverse ? !positive : positive;
+        return isGood ? 'success' : 'danger';
+    }
+
+    get deltaText() {
+        const pct = this.deltaPct;
+        const sign = pct > 0 ? '+' : '';
+        return `${sign}${pct}%`;
+    }
+
+    /** Tints the card subtly based on trend direction so the dashboard pops. */
+    get cardAccentClass() {
+        const pct = this.deltaPct;
+        if (typeof pct !== 'number' || pct === 0) {
+            return 'kpi-accent-neutral';
+        }
+        const positive = pct > 0;
+        const isGood = this.deltaInverse ? !positive : positive;
+        return isGood ? 'kpi-accent-good' : 'kpi-accent-bad';
+    }
+
+    get valueTextClass() {
+        const pct = this.deltaPct;
+        if (typeof pct !== 'number' || pct === 0) {
+            return 'text-black dark:text-gray-100';
+        }
+        const positive = pct > 0;
+        const isGood = this.deltaInverse ? !positive : positive;
+        return isGood ? 'text-emerald-600 dark:text-emerald-400' : 'text-rose-600 dark:text-rose-400';
+    }
+
+    /** Neon palette per delta direction. Drives line + fill + value highlight. */
+    get accentColors() {
+        // Bright neon-ish trio that pops on the dark theme without being garish in light.
+        const good = { line: '#22c55e', fill: 'rgba(34, 197, 94, 0.22)', glow: 'rgba(34, 197, 94, 0.35)' };
+        const bad = { line: '#ef4444', fill: 'rgba(239, 68, 68, 0.22)', glow: 'rgba(239, 68, 68, 0.35)' };
+        const neutral = { line: '#3485e2', fill: 'rgba(52, 133, 226, 0.18)', glow: 'rgba(52, 133, 226, 0.30)' };
+
+        const pct = this.deltaPct;
+        if (typeof pct !== 'number' || pct === 0) return neutral;
+        const positive = pct > 0;
+        const isGood = this.deltaInverse ? !positive : positive;
+        return isGood ? good : bad;
+    }
+
+    get sparklineDatasets() {
+        const points = this.data?.sparkline?.data;
+        if (!points || points.length === 0) return null;
+
+        const { line, fill } = this.accentColors;
+
+        return [
+            {
+                data: points,
+                borderColor: line,
+                backgroundColor: fill,
+                pointRadius: 0,
+                borderWidth: 1.75,
+                tension: 0.4,
+                // Anchor the area fill to the chart's y=0 axis so the sparkline
+                // visually sits at the BOTTOM of the card regardless of the data range.
+                fill: 'origin',
+            },
+        ];
+    }
+
+    get sparklineLabels() {
+        return this.data?.sparkline?.labels ?? [];
+    }
+
+    get sparklineOptions() {
+        return {
+            responsive: true,
+            maintainAspectRatio: false,
+            animation: { duration: 600, easing: 'easeOutQuart' },
+            plugins: {
+                legend: { display: false },
+                tooltip: { enabled: false },
+            },
+            scales: {
+                x: { display: false },
+                // Lock min to 0 so flat-zero data sits flush along the bottom edge.
+                // suggestedMin/Max keep the line off the very top/bottom for non-zero data.
+                y: { display: false, min: 0, beginAtZero: true, grace: '5%' },
+            },
+            elements: { line: { borderJoinStyle: 'round' } },
+        };
+    }
+
+    constructor() {
+        super(...arguments);
+        this.load.perform();
+    }
+
+    @task *load() {
+        try {
+            this.data = yield this.fetch.get(`fleet-ops/metrics/${this.args.slug}`, {
+                period: this.period,
+                sparkline: this.showSparkline,
+                compare: this.showDelta,
+            });
+            this.error = null;
+        } catch (e) {
+            this.error = e?.message ?? 'Failed to load metric';
+        }
+    }
+
+    @action
+    refresh() {
+        this.load.perform();
+    }
+}