@fleetbase/fleetops-engine 0.6.48 → 0.6.50

package/addon/components/widget/maintenance-overview.hbs

@@ -0,0 +1,45 @@
+<div class="fleet-ops-widget fleet-ops-maintenance-overview 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.maintenance-overview.title"}}</span>
+        <FaIcon @icon="wrench" 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-3 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">Overdue</div>
+                    <div class="text-lg font-bold leading-tight mt-0.5 {{if this.data.overdue 'text-red-500' 'text-gray-400'}}">{{this.data.overdue}}</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">Next 7d</div>
+                    <div class="text-lg font-bold text-amber-500 leading-tight mt-0.5">{{this.data.scheduled_next_7d}}</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">MTD</div>
+                    <div class="text-sm font-bold text-black dark:text-gray-100 leading-tight mt-0.5 truncate">{{format-currency this.data.cost_this_month this.data.currency}}</div>
+                </div>
+            </div>
+
+            <div class="flex-1 min-h-0 overflow-auto divide-y dark:divide-gray-700 border-t dark:border-gray-700 pt-1">
+                {{#each this.data.upcoming as |item|}}
+                    <div class="flex items-center justify-between py-1 hover:bg-gray-50 dark:hover:bg-gray-800 px-1">
+                        <div class="min-w-0 flex-1">
+                            <div class="text-[11px] font-medium text-black dark:text-gray-100 truncate">{{or item.type "Maintenance"}}</div>
+                            <div class="text-[10px] text-gray-500 dark:text-gray-400">{{format-date-fns item.scheduled_at "MMM d"}}</div>
+                        </div>
+                        {{#if item.priority}}
+                            <Badge @status={{this.priorityStatus item.priority}} @text={{item.priority}} @hideIcon={{true}} @wrapperClass="text-[9px] px-1 py-0 ml-2" />
+                        {{/if}}
+                    </div>
+                {{else}}
+                    <div class="text-[10px] text-gray-500 text-center py-3">No upcoming maintenance.</div>
+                {{/each}}
+            </div>
+        {{/if}}
+    </div>
+</div>

package/addon/components/widget/maintenance-overview.js

@@ -0,0 +1,40 @@
+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 WidgetMaintenanceOverviewComponent extends Component {
+    static widgetId = 'fleet-ops-maintenance-overview-widget';
+
+    @service fetch;
+
+    @tracked data = null;
+    @tracked error = null;
+
+    constructor() {
+        super(...arguments);
+        this.load.perform();
+    }
+
+    priorityStatus(priority) {
+        switch (priority) {
+            case 'high':
+            case 'urgent':
+                return 'danger';
+            case 'medium':
+            case 'normal':
+                return 'warning';
+            default:
+                return 'info';
+        }
+    }
+
+    @task *load() {
+        try {
+            this.data = yield this.fetch.get('fleet-ops/analytics/maintenance-overview');
+            this.error = null;
+        } catch (e) {
+            this.error = e?.message ?? 'Failed to load maintenance overview';
+        }
+    }
+}

package/addon/components/widget/on-time-delivery.hbs

@@ -0,0 +1,27 @@
+<div class="fleet-ops-widget fleet-ops-on-time-delivery flex flex-col h-full rounded-md border dark:border-gray-700 border-gray-200 dark:bg-gray-800 bg-white shadow-sm {{@class}}" ...attributes>
+    <div class="flex items-center justify-between px-2.5 pt-2">
+        <span class="text-[10px] uppercase tracking-wide text-gray-500 dark:text-gray-400 font-semibold">
+            {{t "widget.on-time-delivery.title"}}
+        </span>
+        <FaIcon @icon="clock" class="text-gray-400 text-[11px]" />
+    </div>
+
+    <div class="flex-1 flex flex-col items-center justify-center px-2.5 pb-2 min-h-0">
+        {{#if this.load.isRunning}}
+            <Spinner />
+        {{else if this.error}}
+            <div class="text-[10px] text-red-500">{{this.error}}</div>
+        {{else if this.data}}
+            <div class="relative w-full max-w-24 aspect-square">
+                <Chart @type="doughnut" @labels={{this.chartLabels}} @datasets={{this.chartDatasets}} @options={{this.chartOptions}} />
+                <div class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
+                    <span class="text-base font-bold text-black dark:text-gray-100 leading-none">{{this.data.on_time_pct}}%</span>
+                    <span class="text-[9px] text-gray-500 dark:text-gray-400 mt-0.5">{{this.data.on_time}}/{{this.data.total}}</span>
+                </div>
+            </div>
+            {{#if this.deltaStatus}}
+                <Badge @status={{this.deltaStatus}} @text={{this.deltaText}} @hideIcon={{true}} @disableHumanize={{true}} @wrapperClass="mt-1 text-[9px] px-1 py-0" />
+            {{/if}}
+        {{/if}}
+    </div>
+</div>

package/addon/components/widget/on-time-delivery.js

@@ -0,0 +1,73 @@
+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 WidgetOnTimeDeliveryComponent extends Component {
+    static widgetId = 'fleet-ops-on-time-delivery-widget';
+
+    @service fetch;
+
+    @tracked data = null;
+    @tracked error = null;
+
+    constructor() {
+        super(...arguments);
+        this.load.perform();
+    }
+
+    get gaugeColor() {
+        const pct = this.data?.on_time_pct ?? 0;
+        if (pct >= 95) return '#22c55e';
+        if (pct >= 85) return '#84cc16';
+        if (pct >= 70) return '#f59e0b';
+        return '#ef4444';
+    }
+
+    get chartLabels() {
+        return ['On Time', 'Late'];
+    }
+
+    get chartDatasets() {
+        return [
+            {
+                data: [this.data?.on_time ?? 0, this.data?.late ?? 0],
+                backgroundColor: [this.gaugeColor, 'rgba(148,163,184,0.25)'],
+                borderWidth: 0,
+            },
+        ];
+    }
+
+    get chartOptions() {
+        return {
+            responsive: true,
+            maintainAspectRatio: false,
+            cutout: '75%',
+            plugins: {
+                legend: { display: false },
+                tooltip: { enabled: true },
+            },
+        };
+    }
+
+    get deltaStatus() {
+        const d = this.data?.delta_pct;
+        if (typeof d !== 'number' || d === 0) return null;
+        return d > 0 ? 'success' : 'danger';
+    }
+
+    get deltaText() {
+        const d = this.data?.delta_pct;
+        if (typeof d !== 'number') return null;
+        return `${d > 0 ? '+' : ''}${d} pp`;
+    }
+
+    @task *load() {
+        try {
+            this.data = yield this.fetch.get('fleet-ops/analytics/on-time-delivery', { period: '30d' });
+            this.error = null;
+        } catch (e) {
+            this.error = e?.message ?? 'Failed to load on-time delivery';
+        }
+    }
+}

package/addon/components/widget/operations-pulse.hbs

@@ -0,0 +1,51 @@
+<div class="fleet-ops-widget fleet-ops-operations-pulse 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.operations-pulse.title"}}
+        </span>
+        <button type="button" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 text-[10px]" {{on "click" this.refresh}} title={{t "widget.refresh"}}>
+            <FaIcon @icon="rotate" class={{if this.load.isRunning "animate-spin"}} />
+        </button>
+    </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">
+        {{#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}}
+            <div class="grid grid-cols-2 lg:grid-cols-5 gap-2 h-full">
+                {{#each this.tiles as |tile|}}
+                    <div class="fleet-ops-pulse-tile {{tile.meta.accent}} relative rounded-md border p-2 flex flex-col justify-between min-h-0 overflow-hidden">
+                        {{!-- Accent stripe along the left edge for instant status read --}}
+                        <span class="fleet-ops-pulse-stripe absolute inset-y-0 left-0"></span>
+
+                        <div class="flex items-center justify-between relative z-10">
+                            <span class="text-[9px] uppercase tracking-wider text-gray-600 dark:text-gray-300 font-bold truncate">{{tile.title}}</span>
+                            {{#if tile.meta.icon}}
+                                <div class="fleet-ops-pulse-icon flex-shrink-0">
+                                    <FaIcon @icon={{tile.meta.icon}} class="text-[10px]" />
+                                </div>
+                            {{/if}}
+                        </div>
+
+                        <div class="flex items-baseline gap-1 mt-1 relative z-10 fleet-ops-pulse-value-row">
+                            <span class="fleet-ops-pulse-value text-2xl font-bold leading-none tabular-nums">{{tile.value}}</span>
+                            {{#if tile.of}}
+                                <span class="text-[10px] text-gray-500 dark:text-gray-400">/ {{tile.of}}</span>
+                            {{/if}}
+                        </div>
+
+                        {{#let (this.deltaStatus tile) as |status|}}
+                            {{#if status}}
+                                <Badge @status={{status}} @text={{this.deltaText tile}} @hideIcon={{true}} @disableHumanize={{true}} @wrapperClass="text-[9px] py-0 px-1 leading-tight mt-1 self-start font-bold relative z-10" />
+                            {{/if}}
+                        {{/let}}
+                    </div>
+                {{/each}}
+            </div>
+        {{/if}}
+    </div>
+</div>

package/addon/components/widget/operations-pulse.js

@@ -0,0 +1,173 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { debug } from '@ember/debug';
+import { task } from 'ember-concurrency';
+
+const TILE_ORDER = ['active_orders', 'completed_today', 'drivers_online', 'vehicles_deployed', 'issues_open'];
+
+/**
+ * Each tile gets:
+ *  - icon: FA icon name + colored chip
+ *  - accent: CSS class on the tile root for the gradient + accent stripe palette
+ *  - deltaInverse: flip success/danger semantics (for "lower-is-better" metrics)
+ */
+const TILE_META = {
+    active_orders: { icon: 'bolt', accent: 'pulse-accent-blue' },
+    completed_today: { icon: 'circle-check', accent: 'pulse-accent-green' },
+    drivers_online: { icon: 'id-card', accent: 'pulse-accent-sky' },
+    vehicles_deployed: { icon: 'truck', accent: 'pulse-accent-indigo' },
+    issues_open: { icon: 'triangle-exclamation', accent: 'pulse-accent-amber', deltaInverse: true },
+};
+
+/** Refetch the full snapshot this often as a reconciliation guard against
+ * drift between incrementally-applied socket deltas and authoritative state. */
+const RECONCILE_INTERVAL_MS = 60_000;
+
+/**
+ * Live operational snapshot. Initial GET seeds the tiles, then subscribes to
+ * `company.{uuid}` and increments/decrements counters on order.* events
+ * without polling. Reconciles via a full refetch every 60s.
+ */
+export default class WidgetOperationsPulseComponent extends Component {
+    static widgetId = 'fleet-ops-operations-pulse-widget';
+
+    @service fetch;
+    @service socket;
+    @service currentUser;
+
+    @tracked data = null;
+    @tracked error = null;
+
+    socketChannel = null;
+    socketActive = false;
+    reconcileTimer = null;
+
+    constructor() {
+        super(...arguments);
+        this.load.perform();
+        this.subscribe();
+        this.reconcileTimer = setInterval(() => this.load.perform(), RECONCILE_INTERVAL_MS);
+    }
+
+    willDestroy() {
+        super.willDestroy(...arguments);
+        this.unsubscribe();
+        if (this.reconcileTimer) clearInterval(this.reconcileTimer);
+    }
+
+    get tiles() {
+        if (!this.data) return [];
+        return TILE_ORDER.filter((key) => this.data[key]).map((key) => ({
+            key,
+            title: this.titleFor(key),
+            ...this.data[key],
+            meta: TILE_META[key] ?? {},
+        }));
+    }
+
+    titleFor(key) {
+        return key
+            .split('_')
+            .map((p) => p.charAt(0).toUpperCase() + p.slice(1))
+            .join(' ');
+    }
+
+    deltaStatus(tile) {
+        if (typeof tile.delta_pct !== 'number' || tile.delta_pct === 0) return null;
+        const positive = tile.delta_pct > 0;
+        const isGood = tile.meta?.deltaInverse ? !positive : positive;
+        return isGood ? 'success' : 'danger';
+    }
+
+    deltaText(tile) {
+        if (typeof tile.delta_pct !== 'number') return null;
+        const sign = tile.delta_pct > 0 ? '+' : '';
+        return `${sign}${tile.delta_pct}%`;
+    }
+
+    @task *load() {
+        try {
+            this.data = yield this.fetch.get('fleet-ops/analytics/operations-pulse');
+            this.error = null;
+        } catch (e) {
+            this.error = e?.message ?? 'Failed to load operations pulse';
+        }
+    }
+
+    @action
+    refresh() {
+        this.load.perform();
+    }
+
+    async subscribe() {
+        const companyId = this.currentUser?.companyId;
+        if (!companyId) return;
+
+        try {
+            const sc = this.socket.instance();
+            const channel = sc.subscribe(`company.${companyId}`);
+            this.socketChannel = channel;
+            this.socketActive = true;
+
+            if (channel.state !== 'subscribed') {
+                await channel.subscribe();
+            }
+
+            for await (const msg of channel) {
+                if (!this.socketActive) break;
+                this.applyEvent(msg);
+            }
+        } catch (e) {
+            debug(`[operations-pulse] socket error: ${e?.message ?? e}`);
+        }
+    }
+
+    async unsubscribe() {
+        this.socketActive = false;
+        try {
+            await this.socketChannel?.unsubscribe();
+        } catch (e) {
+            debug(`[operations-pulse] unsubscribe error: ${e?.message ?? e}`);
+        }
+        this.socketChannel = null;
+    }
+
+    applyEvent(msg) {
+        if (!this.data || !msg) return;
+        const event = msg.event;
+        const next = { ...this.data };
+
+        const adjust = (key, delta) => {
+            if (!next[key]) return;
+            next[key] = { ...next[key], value: Math.max(0, (next[key].value ?? 0) + delta) };
+        };
+
+        switch (event) {
+            case 'order.created':
+            case 'order.dispatched':
+            case 'order.driver_assigned':
+                adjust('active_orders', +1);
+                break;
+            case 'order.completed':
+                adjust('active_orders', -1);
+                adjust('completed_today', +1);
+                break;
+            case 'order.canceled':
+            case 'order.failed':
+                adjust('active_orders', -1);
+                break;
+            case 'issue.created':
+                adjust('issues_open', +1);
+                break;
+            case 'issue.resolved':
+                adjust('issues_open', -1);
+                break;
+            default:
+                return;
+        }
+
+        this.data = next;
+    }
+}

package/addon/components/widget/orders-by-status.hbs

@@ -0,0 +1,26 @@
+<div class="fleet-ops-widget fleet-ops-orders-by-status 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.orders-by-status.title"}}</span>
+        <div class="flex gap-0.5">
+            {{#each this.periods as |p|}}
+                <button type="button"
+                        class="text-[10px] px-1.5 py-0.5 rounded {{if (eq this.period p) 'bg-sky-600 text-white' 'text-gray-500 hover:text-gray-700 dark:hover:text-gray-200'}}"
+                        {{on "click" (fn this.setPeriod p)}}>
+                    {{p}}
+                </button>
+            {{/each}}
+        </div>
+    </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="h-full">
+                <Chart @type="bar" @labels={{this.data.labels}} @datasets={{this.data.datasets}} @options={{this.chartOptions}} />
+            </div>
+        {{/if}}
+    </div>
+</div>

package/addon/components/widget/orders-by-status.js

@@ -0,0 +1,54 @@
+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';
+
+const PERIODS = ['7d', '14d', '30d'];
+
+export default class WidgetOrdersByStatusComponent extends Component {
+    static widgetId = 'fleet-ops-orders-by-status-widget';
+
+    @service fetch;
+
+    @tracked period = '14d';
+    @tracked data = null;
+    @tracked error = null;
+
+    periods = PERIODS;
+
+    constructor() {
+        super(...arguments);
+        this.load.perform();
+    }
+
+    get chartOptions() {
+        return {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: { position: 'bottom', labels: { boxWidth: 12, padding: 8 } },
+                tooltip: { mode: 'index', intersect: false },
+            },
+            scales: {
+                x: { stacked: true, grid: { display: false } },
+                y: { stacked: true, beginAtZero: true, ticks: { precision: 0 } },
+            },
+        };
+    }
+
+    @task *load() {
+        try {
+            this.data = yield this.fetch.get('fleet-ops/analytics/orders-by-status', { period: this.period });
+            this.error = null;
+        } catch (e) {
+            this.error = e?.message ?? 'Failed to load orders breakdown';
+        }
+    }
+
+    @action
+    setPeriod(period) {
+        this.period = period;
+        this.load.perform();
+    }
+}

package/addon/components/widget/revenue-trend.hbs

@@ -0,0 +1,34 @@
+<div class="fleet-ops-widget fleet-ops-revenue-trend 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.revenue-trend.title"}}</span>
+        <div class="flex gap-0.5">
+            {{#each this.periods as |p|}}
+                <button type="button"
+                        class="text-[10px] px-1.5 py-0.5 rounded {{if (eq this.period p) 'bg-sky-600 text-white' 'text-gray-500 hover:text-gray-700 dark:hover:text-gray-200'}}"
+                        {{on "click" (fn this.setPeriod p)}}>
+                    {{p}}
+                </button>
+            {{/each}}
+        </div>
+    </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">
+        {{#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="flex items-baseline gap-2 mb-1.5">
+                <span class="text-base font-bold text-black dark:text-gray-100 leading-none">
+                    {{format-currency this.data.summary.total this.data.summary.currency}}
+                </span>
+                {{#if this.deltaStatus}}
+                    <Badge @status={{this.deltaStatus}} @text={{this.deltaText}} @hideIcon={{true}} @disableHumanize={{true}} @wrapperClass="text-[9px] px-1 py-0" />
+                {{/if}}
+            </div>
+            <div class="flex-1 min-h-0">
+                <Chart @type="line" @labels={{this.data.labels}} @datasets={{this.data.datasets}} @options={{this.chartOptions}} />
+            </div>
+        {{/if}}
+    </div>
+</div>

package/addon/components/widget/revenue-trend.js

@@ -0,0 +1,67 @@
+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';
+
+const PERIODS = ['7d', '30d', '90d'];
+
+export default class WidgetRevenueTrendComponent extends Component {
+    static widgetId = 'fleet-ops-revenue-trend-widget';
+
+    @service fetch;
+
+    @tracked period = '30d';
+    @tracked data = null;
+    @tracked error = null;
+
+    periods = PERIODS;
+
+    constructor() {
+        super(...arguments);
+        this.load.perform();
+    }
+
+    get chartOptions() {
+        return {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: { display: false },
+                tooltip: { mode: 'index', intersect: false },
+            },
+            scales: {
+                x: { grid: { display: false } },
+                y: { beginAtZero: true, ticks: { precision: 0 } },
+            },
+            elements: { point: { radius: 0, hoverRadius: 4 } },
+        };
+    }
+
+    get deltaStatus() {
+        const pct = this.data?.summary?.delta_pct;
+        if (typeof pct !== 'number' || pct === 0) return null;
+        return pct > 0 ? 'success' : 'danger';
+    }
+
+    get deltaText() {
+        const pct = this.data?.summary?.delta_pct;
+        if (typeof pct !== 'number') return null;
+        return `${pct > 0 ? '+' : ''}${pct}%`;
+    }
+
+    @task *load() {
+        try {
+            this.data = yield this.fetch.get('fleet-ops/analytics/revenue-trend', { period: this.period });
+            this.error = null;
+        } catch (e) {
+            this.error = e?.message ?? 'Failed to load revenue trend';
+        }
+    }
+
+    @action
+    setPeriod(period) {
+        this.period = period;
+        this.load.perform();
+    }
+}

package/addon/components/widget/top-drivers.hbs

@@ -0,0 +1,44 @@
+<div class="fleet-ops-widget fleet-ops-top-drivers 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.top-drivers.title"}}</span>
+        <div class="flex gap-0.5">
+            {{#each this.sorts as |s|}}
+                <button type="button"
+                        class="text-[10px] px-1.5 py-0.5 rounded {{if (eq this.sortBy s.key) 'bg-sky-600 text-white' 'text-gray-500 hover:text-gray-700 dark:hover:text-gray-200'}}"
+                        {{on "click" (fn this.setSort s.key)}}>
+                    {{s.label}}
+                </button>
+            {{/each}}
+        </div>
+    </div>
+
+    <div class="flex-1 border border-t-0 dark:border-gray-700 border-gray-200 rounded-b-md bg-white dark:bg-gray-900 overflow-auto">
+        {{#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.rows.length}}
+            <div class="divide-y dark:divide-gray-700">
+                {{#each this.data.rows as |row index|}}
+                    <div class="flex items-center gap-2 px-2 py-1.5 hover:bg-gray-50 dark:hover:bg-gray-800">
+                        <span class="text-[11px] font-bold text-gray-400 w-3 text-right">{{add index 1}}</span>
+                        <div class="w-5 h-5 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-[9px] font-semibold text-gray-600 dark:text-gray-300 flex-shrink-0">
+                            {{first-char row.name}}
+                        </div>
+                        <div class="flex-1 min-w-0">
+                            <div class="text-[11px] font-medium text-black dark:text-gray-100 truncate leading-tight">{{row.name}}</div>
+                            <div class="text-[10px] text-gray-500 dark:text-gray-400 truncate leading-tight">
+                                {{row.orders_completed}} orders &middot; {{format-meters row.distance_m}}
+                            </div>
+                        </div>
+                        {{#if row.on_time_pct}}
+                            <Badge @status={{this.onTimeStatus row.on_time_pct}} @text={{concat row.on_time_pct "%"}} @hideIcon={{true}} @disableHumanize={{true}} @wrapperClass="text-[9px] px-1 py-0" />
+                        {{/if}}
+                    </div>
+                {{/each}}
+            </div>
+        {{else}}
+            <div class="flex items-center justify-center h-full text-[10px] text-gray-500">No driver activity in this period.</div>
+        {{/if}}
+    </div>
+</div>