@fleetbase/fleetops-engine 0.6.51 → 0.6.53

package/addon/templates/analytics/index.hbs

@@ -0,0 +1,14 @@
+<Layout::Section::Body class="overflow-y-scroll h-full" data-test-fleet-ops-analytics-hub>
+    <Dashboard
+        @defaultDashboardId="fleet-ops"
+        @defaultDashboardName="Fleet-Ops Dashboard"
+        @extension="fleet-ops"
+        @leftHeaderWrapperClass="fleet-ops-dashboard-title"
+        @rightHeaderWrapperClass="fleet-ops-dashboard-actions"
+        @createWrapperClass="fleet-ops-dashboard-create-wrapper"
+        @stickyHeader={{true}}
+        class="fleet-ops-dashboard-page"
+    />
+    <Spacer @height="300px" />
+    {{outlet}}
+</Layout::Section::Body>

package/addon/templates/analytics/reports/index.hbs

@@ -11,5 +11,23 @@
     @actionButtons={{this.actionButtons}}
     @bulkActions={{this.bulkActions}}
     @controller={{this}}
+    @emptyStateComponent={{component
+        "table/empty-state"
+        icon="chart-line"
+        title="No reports yet"
+        description="Create a Fleet-Ops report to start tracking operational trends, utilization, and performance over time."
+        filteredTitle="No reports match your search"
+        filteredDescription="Adjust the search or filters to find an existing report."
+        primaryText="New report"
+        primaryIcon="plus"
+        primaryAction=this.reportActions.transition.create
+        secondaryText="Refresh"
+        secondaryIcon="refresh"
+        secondaryAction=this.reportActions.refresh
+        docsSlug="fleet-ops/analytics/reports/overview"
+        docsTitle="Reports guide"
+        docsText="Reports guide"
+        docsSource="fleet-ops-empty-reports"
+    }}
 />
-{{outlet}}
+{{outlet}}

package/addon/templates/connectivity/devices/index.hbs

@@ -10,5 +10,23 @@
     @actionButtons={{this.actionButtons}}
     @bulkActions={{this.bulkActions}}
     @controller={{this}}
+    @emptyStateComponent={{component
+        "table/empty-state"
+        icon="tablet-screen-button"
+        title="Add your first device"
+        description="Devices connect vehicles and assets to telemetry, events, tracking, and provider syncs."
+        filteredTitle="No devices match your filters"
+        filteredDescription="Adjust the search or filters to find another device."
+        primaryText="New device"
+        primaryIcon="plus"
+        primaryAction=this.deviceActions.transition.create
+        secondaryText="Import"
+        secondaryIcon="upload"
+        secondaryAction=this.deviceActions.import
+        docsSlug="fleet-ops/connectivity/devices/overview"
+        docsTitle="Devices guide"
+        docsText="Device guide"
+        docsSource="fleet-ops-empty-devices"
+    }}
 />
-{{outlet}}
+{{outlet}}

package/addon/templates/connectivity/events/index.hbs

@@ -10,5 +10,20 @@
     @actionButtons={{this.actionButtons}}
     @bulkActions={{this.bulkActions}}
     @controller={{this}}
+    @emptyStateComponent={{component
+        "table/empty-state"
+        icon="bolt"
+        title="No connectivity events yet"
+        description="Events appear here after connected devices or providers begin sending telemetry signals."
+        filteredTitle="No events match your filters"
+        filteredDescription="Adjust the search, provider, device, or date filters to review other events."
+        primaryText="Refresh"
+        primaryIcon="refresh"
+        primaryAction=this.deviceEventActions.refresh
+        docsSlug="fleet-ops/connectivity/events/overview"
+        docsTitle="Events guide"
+        docsText="Events guide"
+        docsSource="fleet-ops-empty-events"
+    }}
 />
-{{outlet}}
+{{outlet}}

package/addon/templates/connectivity/fuel-providers/details/index.hbs

@@ -0,0 +1,38 @@
+<div class="mx-auto grid w-full max-w-7xl grid-cols-1 gap-4 px-4 py-4 lg:grid-cols-3 md:px-6">
+    <section class="rounded-md border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800 lg:col-span-2">
+        <h2 class="text-sm font-bold text-gray-900 dark:text-gray-100">How This Integration Works</h2>
+        <p class="mt-2 text-sm leading-6 text-gray-600 dark:text-gray-300">
+            {{or @model.name @model.provider}} imports provider bills as Fuel Transactions, matches each transaction to vehicles and trips, then creates linked Fuel Reports for operational reporting after a vehicle match.
+        </p>
+        <div class="mt-4 grid grid-cols-1 gap-3 md:grid-cols-3">
+            <div class="rounded-md border border-gray-200 p-3 dark:border-gray-700">
+                <div class="text-xs font-bold uppercase text-gray-400">1. Import</div>
+                <div class="mt-1 text-sm font-semibold text-gray-900 dark:text-gray-100">Provider bills</div>
+                <p class="mt-1 text-xs leading-5 text-gray-500 dark:text-gray-300">Sync pulls fuel purchase data from the provider API.</p>
+            </div>
+            <div class="rounded-md border border-gray-200 p-3 dark:border-gray-700">
+                <div class="text-xs font-bold uppercase text-gray-400">2. Match</div>
+                <div class="mt-1 text-sm font-semibold text-gray-900 dark:text-gray-100">Vehicles and trips</div>
+                <p class="mt-1 text-xs leading-5 text-gray-500 dark:text-gray-300">Identifiers are matched against vehicles, orders, and trip numbers.</p>
+            </div>
+            <div class="rounded-md border border-gray-200 p-3 dark:border-gray-700">
+                <div class="text-xs font-bold uppercase text-gray-400">3. Report</div>
+                <div class="mt-1 text-sm font-semibold text-gray-900 dark:text-gray-100">Fuel Reports</div>
+                <p class="mt-1 text-xs leading-5 text-gray-500 dark:text-gray-300">Matched transactions create visible fuel reports for operations and analytics.</p>
+            </div>
+        </div>
+    </section>
+
+    <aside class="rounded-md border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
+        <h2 class="text-sm font-bold text-gray-900 dark:text-gray-100">Latest Sync Summary</h2>
+        <div class="mt-3 space-y-2 text-sm">
+            <div class="flex justify-between gap-3"><span class="text-gray-500 dark:text-gray-300">Imported</span><span class="font-semibold text-gray-900 dark:text-gray-100">{{n-a @model.last_sync_state.summary.imported}}</span></div>
+            <div class="flex justify-between gap-3"><span class="text-gray-500 dark:text-gray-300">Matched</span><span class="font-semibold text-gray-900 dark:text-gray-100">{{n-a @model.last_sync_state.summary.matched}}</span></div>
+            <div class="flex justify-between gap-3"><span class="text-gray-500 dark:text-gray-300">Unmatched</span><span class="font-semibold text-gray-900 dark:text-gray-100">{{n-a @model.last_sync_state.summary.unmatched}}</span></div>
+            <div class="flex justify-between gap-3"><span class="text-gray-500 dark:text-gray-300">Fuel Reports</span><span class="font-semibold text-gray-900 dark:text-gray-100">{{n-a @model.last_sync_state.summary.fuel_reports_created}}</span></div>
+        </div>
+        {{#if @model.last_error}}
+            <div class="mt-4 rounded-md border border-red-200 bg-red-50 p-3 text-xs leading-5 text-red-700 dark:border-red-800 dark:bg-red-900/10 dark:text-red-300">{{@model.last_error}}</div>
+        {{/if}}
+    </aside>
+</div>

package/addon/templates/connectivity/fuel-providers/details/matching.hbs

@@ -0,0 +1,13 @@
+<div class="mx-auto w-full max-w-7xl px-4 py-4 md:px-6">
+    <section class="rounded-md border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
+        <h2 class="text-sm font-bold text-gray-900 dark:text-gray-100">Transaction Matching</h2>
+        <p class="mt-1 text-xs leading-5 text-gray-500 dark:text-gray-300">This is the order used when imported fuel transactions are matched to vehicles or orders.</p>
+        <div class="mt-4">
+            <FuelIntegration::MatchingPriority @order={{@model.sync_settings.matching_order}} />
+        </div>
+        <div class="mt-4 flex flex-wrap items-center gap-2">
+            <Button @icon="receipt" @text="Review Unmatched Transactions" @size="sm" @onClick={{transition-to "management.fuel-transactions.index" (query-params sync_status="unmatched" connection=@model.uuid)}} />
+            <Button @icon="cog" @text="Edit Matching Rules" @size="sm" @onClick={{transition-to "connectivity.fuel-providers.edit" @model}} />
+        </div>
+    </section>
+</div>

package/addon/templates/connectivity/fuel-providers/details/settings.hbs

@@ -0,0 +1,11 @@
+<div class="mx-auto w-full max-w-7xl px-4 py-4 md:px-6">
+    <section class="rounded-md border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
+        <div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
+            <div>
+                <h2 class="text-sm font-bold text-gray-900 dark:text-gray-100">Connection Settings</h2>
+                <p class="mt-1 text-xs leading-5 text-gray-500 dark:text-gray-300">Update credentials, sync behavior, matching rules, and status for this fuel integration.</p>
+            </div>
+            <Button @icon="cog" @text="Edit Settings" @type="primary" @size="sm" @onClick={{transition-to "connectivity.fuel-providers.edit" @model}} />
+        </div>
+    </section>
+</div>

package/addon/templates/connectivity/fuel-providers/details/sync.hbs

@@ -0,0 +1,48 @@
+<div class="mx-auto grid w-full max-w-7xl grid-cols-1 gap-4 px-4 py-4 lg:grid-cols-3 md:px-6">
+    <section class="rounded-md border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800 lg:col-span-2">
+        <div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
+            <div>
+                <h2 class="text-sm font-bold text-gray-900 dark:text-gray-100">Manual Sync</h2>
+                <p class="mt-1 text-xs leading-5 text-gray-500 dark:text-gray-300">Queue a provider import for the configured sync window. Imported records appear in Management > Fuel Transactions.</p>
+            </div>
+            <Button @icon="rotate" @text="Sync Transactions" @type="primary" @size="sm" @isLoading={{this.syncTransactions.isRunning}} @onClick={{perform this.syncTransactions}} />
+        </div>
+        <div class="mt-4 rounded-md border border-gray-200 p-3 text-xs leading-5 dark:border-gray-700">
+            <div class="font-semibold text-gray-900 dark:text-gray-100">Configured window</div>
+            <div class="mt-1 text-gray-500 dark:text-gray-300">{{n-a @model.connection.sync_settings.window_days}} days</div>
+        </div>
+        <div class="mt-4 overflow-hidden rounded-md border border-gray-200 dark:border-gray-700">
+            <table class="min-w-full divide-y divide-gray-200 text-xs dark:divide-gray-700">
+                <thead class="bg-gray-50 dark:bg-gray-900">
+                    <tr>
+                        <th class="px-3 py-2 text-left font-semibold text-gray-500">Status</th>
+                        <th class="px-3 py-2 text-left font-semibold text-gray-500">Window</th>
+                        <th class="px-3 py-2 text-left font-semibold text-gray-500">Imported</th>
+                        <th class="px-3 py-2 text-left font-semibold text-gray-500">Matched</th>
+                        <th class="px-3 py-2 text-left font-semibold text-gray-500">Finished</th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
+                    {{#each this.syncRuns as |run|}}
+                        <tr>
+                            <td class="px-3 py-2"><Badge @status={{run.status}}>{{run.status}}</Badge></td>
+                            <td class="px-3 py-2 text-gray-600 dark:text-gray-300">{{n-a (format-date-fns run.from "dd MMM")}} - {{n-a (format-date-fns run.to "dd MMM")}}</td>
+                            <td class="px-3 py-2 text-gray-600 dark:text-gray-300">{{run.imported}}</td>
+                            <td class="px-3 py-2 text-gray-600 dark:text-gray-300">{{run.matched}}</td>
+                            <td class="px-3 py-2 text-gray-600 dark:text-gray-300">{{n-a (format-date-fns run.finished_at "dd MMM HH:mm")}}</td>
+                        </tr>
+                    {{else}}
+                        <tr>
+                            <td colspan="5" class="px-3 py-6 text-center text-gray-500 dark:text-gray-300">No sync runs have been recorded yet.</td>
+                        </tr>
+                    {{/each}}
+                </tbody>
+            </table>
+        </div>
+    </section>
+
+    <aside class="rounded-md border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
+        <h2 class="text-sm font-bold text-gray-900 dark:text-gray-100">Last Sync State</h2>
+        <pre class="mt-3 max-h-80 overflow-auto rounded-md bg-gray-900 p-3 text-[11px] leading-5 text-gray-100">{{this.lastSyncStateJson}}</pre>
+    </aside>
+</div>

package/addon/templates/connectivity/fuel-providers/details/transactions.hbs

@@ -0,0 +1,21 @@
+<div class="mx-auto w-full max-w-7xl px-4 py-4 md:px-6">
+    <Layout::Resource::Tabular
+        @resource="fuel-provider-transaction"
+        @title="Imported Transactions"
+        @data={{@model}}
+        @columns={{this.columns}}
+        @page={{1}}
+        @controller={{this}}
+        @emptyStateComponent={{component
+            "table/empty-state"
+            icon="receipt"
+            title="No imported transactions"
+            description="Fuel transactions will appear here after this provider syncs bills or purchase records."
+            filteredTitle="No transactions match your filters"
+            filteredDescription="Adjust filters or sync the provider again to review imported transactions."
+            primaryText="Refresh"
+            primaryIcon="refresh"
+            primaryAction=this.refresh
+        }}
+    />
+</div>

package/addon/templates/connectivity/fuel-providers/details.hbs

@@ -0,0 +1,51 @@
+<div class="h-full overflow-y-auto bg-gray-50 dark:bg-gray-900">
+    <div class="flex w-full flex-col">
+        <section class="sticky top-0 z-50 bg-white pt-4 shadow-sm dark:bg-gray-900">
+            <div class="mx-auto flex w-full max-w-7xl flex-col gap-4 px-4 lg:flex-row lg:items-start lg:justify-between md:px-6">
+                <div class="flex min-w-0 items-start gap-3">
+                    <div class="mt-1 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-300">
+                        <FaIcon @icon="gas-pump" />
+                    </div>
+                    <div class="min-w-0">
+                        <div class="flex flex-wrap items-center gap-2">
+                            <h1 class="truncate text-lg font-bold text-gray-900 dark:text-gray-100">{{or @model.name @model.provider}}</h1>
+                            <Badge @status={{this.healthStatus}} @hideStatusDot={{true}}>{{this.statusLabel}}</Badge>
+                        </div>
+                        <div class="mt-1 text-sm text-gray-500 dark:text-gray-300">
+                            {{@model.provider}}
+                            {{#if @model.public_id}}
+                                <span class="mx-1 text-gray-300 dark:text-gray-600">/</span>
+                                <span class="font-mono text-xs">{{@model.public_id}}</span>
+                            {{/if}}
+                        </div>
+                        <div class="mt-2 flex flex-wrap gap-2 text-xs text-gray-500 dark:text-gray-300">
+                            <span>Last test: {{n-a (format-date-fns @model.last_tested_at "dd MMM HH:mm")}}</span>
+                            <span>Last sync: {{n-a (format-date-fns @model.last_synced_at "dd MMM HH:mm")}}</span>
+                            <span>Imported: {{n-a this.lastSummary.imported}}</span>
+                            <span>Unmatched: {{n-a this.lastSummary.unmatched}}</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="flex flex-wrap items-center gap-2">
+                    <Button @icon="arrow-left" @text="Back" @size="xs" @onClick={{transition-to "connectivity.fuel-providers.index"}} />
+                    <Button @icon="plug" @text="Test" @size="xs" @isLoading={{this.testConnection.isRunning}} @onClick={{perform this.testConnection}} />
+                    <Button @icon="rotate" @text="Sync Transactions" @type="primary" @size="xs" @isLoading={{this.syncTransactions.isRunning}} @onClick={{perform this.syncTransactions}} />
+                    <Button @icon="cog" @text="Settings" @size="xs" @onClick={{transition-to "connectivity.fuel-providers.edit" @model}} />
+                </div>
+            </div>
+
+            <nav class="mt-4 flex w-full gap-1 overflow-x-auto border-b border-gray-200 text-sm dark:border-gray-700" aria-label="Fuel integration sections">
+                {{#each this.tabs as |tab|}}
+                    <LinkTo @route={{tab.route}} class="inline-flex flex-shrink-0 items-center border-b-2 px-3 py-3 font-medium {{if tab.active 'border-blue-500 text-gray-900 dark:text-white' 'border-transparent text-gray-500 hover:border-blue-400 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white'}}">
+                        {{tab.label}}
+                    </LinkTo>
+                {{/each}}
+            </nav>
+        </section>
+
+        <section class="min-w-0">
+            {{outlet}}
+        </section>
+    </div>
+</div>

package/addon/templates/connectivity/fuel-providers/edit.hbs

@@ -0,0 +1,24 @@
+<div class="flex h-full flex-col bg-gray-50 dark:bg-gray-900">
+    <section class="flex-shrink-0 border-b border-gray-200 bg-white px-4 py-4 shadow-sm dark:border-gray-700 dark:bg-gray-900 dark:shadow-sm dark:shadow-black/30 md:px-6">
+        <div class="mx-auto flex w-full max-w-6xl flex-col gap-3 md:flex-row md:items-start md:justify-between">
+            <div class="min-w-0">
+                <div class="text-xs font-semibold uppercase text-gray-400 dark:text-gray-500">Fuel integration settings</div>
+                <h1 class="truncate text-lg font-bold text-gray-900 dark:text-gray-100">Edit {{or @model.name @model.provider}}</h1>
+                <p class="mt-1 text-sm text-gray-500 dark:text-gray-300">Update credentials, sync behavior, and matching rules for this fuel integration.</p>
+            </div>
+            <div class="flex items-center gap-2">
+                <Button @icon="eye" @text="View" @size="sm" @onClick={{transition-to "connectivity.fuel-providers.details" @model}} />
+                <Button @icon="times" @text="Cancel" @size="sm" @onClick={{this.cancel}} />
+            </div>
+        </div>
+    </section>
+
+    <FuelIntegration::Form
+        @resource={{@model}}
+        @saveLabel="Save Changes"
+        @footerHelp="Changes affect credential tests, transaction sync, matching, and Fuel Report creation."
+        @isSaving={{this.save.isRunning}}
+        @onCancel={{this.cancel}}
+        @onSave={{perform this.save @model}}
+    />
+</div>

package/addon/templates/connectivity/fuel-providers/index.hbs

@@ -0,0 +1,12 @@
+<FuelIntegration::Hub
+    @connections={{@model}}
+    @providers={{this.providers}}
+    @providersLoading={{this.loadProviders.isRunning}}
+    @columns={{this.columns}}
+    @page={{this.page}}
+    @onPageChange={{fn (mut this.page)}}
+    @bulkActions={{this.bulkActions}}
+    @controller={{this}}
+    @searchQuery={{this.query}}
+    @onRefresh={{this.refresh}}
+/>

package/addon/templates/connectivity/fuel-providers/new.hbs

@@ -0,0 +1,22 @@
+<div class="flex h-full flex-col bg-gray-50 dark:bg-gray-900">
+    <section class="flex-shrink-0 border-b border-gray-200 bg-white px-4 py-4 shadow-sm dark:border-gray-700 dark:bg-gray-900 dark:shadow-sm dark:shadow-black/30 md:px-6">
+        <div class="mx-auto flex w-full max-w-6xl flex-col gap-3 md:flex-row md:items-start md:justify-between">
+            <div>
+                <div class="text-xs font-semibold uppercase text-gray-400 dark:text-gray-500">Fuel integration setup</div>
+                <h1 class="text-lg font-bold text-gray-900 dark:text-gray-100">Connect Fuel Integration</h1>
+                <p class="mt-1 text-sm text-gray-500 dark:text-gray-300">Connect PetroApp or another fuel card/fuel management system, test credentials, and configure transaction imports.</p>
+            </div>
+            <Button @icon="times" @text="Cancel" @size="sm" @onClick={{this.cancel}} />
+        </div>
+    </section>
+
+    <FuelIntegration::Form
+        @resource={{this.connection}}
+        @initialProviderKey={{this.setupProvider}}
+        @saveLabel="Create Integration"
+        @footerHelp="After saving, run a sync to import provider bills into Fuel Transactions."
+        @isSaving={{this.save.isRunning}}
+        @onCancel={{this.cancel}}
+        @onSave={{perform this.save this.connection}}
+    />
+</div>

package/addon/templates/connectivity/fuel-providers.hbs

@@ -0,0 +1 @@
+{{outlet}}

package/addon/templates/connectivity/sensors/index.hbs

@@ -10,5 +10,23 @@
     @actionButtons={{this.actionButtons}}
     @bulkActions={{this.bulkActions}}
     @controller={{this}}
+    @emptyStateComponent={{component
+        "table/empty-state"
+        icon="satellite-dish"
+        title="Add your first sensor"
+        description="Sensors capture telemetry signals that can power events, conditions, and operational visibility."
+        filteredTitle="No sensors match your filters"
+        filteredDescription="Adjust the search or filters to find another sensor."
+        primaryText="New sensor"
+        primaryIcon="plus"
+        primaryAction=this.sensorActions.transition.create
+        secondaryText="Import"
+        secondaryIcon="upload"
+        secondaryAction=this.sensorActions.import
+        docsSlug="fleet-ops/connectivity/sensors/overview"
+        docsTitle="Sensors guide"
+        docsText="Sensors guide"
+        docsSource="fleet-ops-empty-sensors"
+    }}
 />
-{{outlet}}
+{{outlet}}

package/addon/templates/connectivity/telematics/details/attachments.hbs

@@ -0,0 +1,163 @@
+<div class="flex flex-col gap-4 p-4 md:p-6">
+    <div class="flex flex-col gap-1">
+        <h2 class="text-base font-bold text-gray-900 dark:text-gray-100">Vehicle Attachment Mapping</h2>
+        <p class="text-sm text-gray-500 dark:text-gray-300">Map synced provider devices to vehicles so telemetry can power vehicle state, maintenance, and operations workflows.</p>
+    </div>
+
+    <section class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
+        {{#each this.metrics as |metric|}}
+            <div class="fleet-ops-widget fleet-ops-kpi-tile fleetops-connectivity-kpi-tile {{metric.accentClass}} relative min-h-[102px] overflow-hidden rounded-md border bg-white shadow-sm dark:bg-gray-800">
+                <div class="flex h-full items-start justify-between gap-3 p-3">
+                    <div class="min-w-0">
+                        <div class="truncate text-[10px] font-bold uppercase text-gray-500 dark:text-gray-400">{{metric.label}}</div>
+                        <div class="mt-2 text-2xl font-extrabold leading-none text-gray-900 dark:text-gray-50">{{metric.value}}</div>
+                    </div>
+                    <div class="fleetops-connectivity-kpi-icon flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md text-[13px]">
+                        <FaIcon @icon={{metric.icon}} />
+                    </div>
+                </div>
+            </div>
+        {{/each}}
+    </section>
+
+    <section class="overflow-hidden rounded-md border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
+        <div class="flex flex-col gap-3 border-b border-gray-200 px-4 py-3 dark:border-gray-700 lg:flex-row lg:items-start lg:justify-between">
+            <div class="max-w-xl">
+                <h3 class="text-sm font-bold text-gray-900 dark:text-gray-100">Vehicle Groups</h3>
+                <p class="mt-1 text-xs leading-5 text-gray-500 dark:text-gray-300">Find a vehicle to review its attached devices, or resolve the unattached queue first.</p>
+            </div>
+            <div class="flex w-full min-w-0 flex-nowrap items-center justify-end gap-2 overflow-x-auto lg:w-auto lg:flex-shrink-0">
+                <Input
+                    @value={{this.query}}
+                    @type="text"
+                    class="form-input h-9 min-w-[16rem] flex-shrink-0"
+                    placeholder="Search vehicles or devices"
+                    {{on "input" this.updateQuery}}
+                />
+                <select class="form-select h-9 flex-shrink-0" {{on "change" this.updateAttachmentState}}>
+                    <option value="" selected={{not this.attachment_state}}>All mappings</option>
+                    <option value="unattached" selected={{eq this.attachment_state "unattached"}}>Unattached</option>
+                    <option value="attached" selected={{eq this.attachment_state "attached"}}>Attached</option>
+                </select>
+                <select class="form-select h-9 flex-shrink-0" {{on "change" this.updateStatus}}>
+                    <option value="" selected={{not this.status}}>Any status</option>
+                    <option value="active" selected={{eq this.status "active"}}>Active</option>
+                    <option value="online" selected={{eq this.status "online"}}>Online</option>
+                    <option value="offline" selected={{eq this.status "offline"}}>Offline</option>
+                    <option value="inactive" selected={{eq this.status "inactive"}}>Inactive</option>
+                </select>
+            </div>
+        </div>
+
+        {{#if (or (eq this.emptyStateVariant "not_synced") (eq this.emptyStateVariant "filtered_empty"))}}
+            <div class="p-4">
+                <Telematic::TabEmptyState
+                    @tone={{this.emptyStateContent.tone}}
+                    @icon={{this.emptyStateContent.icon}}
+                    @title={{this.emptyStateContent.title}}
+                    @message={{this.emptyStateContent.message}}
+                    @note={{this.emptyStateContent.note}}
+                    @primaryText={{this.emptyStateContent.primaryText}}
+                    @primaryIcon={{this.emptyStateContent.primaryIcon}}
+                    @primaryAction={{this.emptyStateContent.primaryAction}}
+                    @secondaryText={{this.emptyStateContent.secondaryText}}
+                    @secondaryIcon={{this.emptyStateContent.secondaryIcon}}
+                    @secondaryAction={{this.emptyStateContent.secondaryAction}}
+                />
+            </div>
+        {{else}}
+            <div class="divide-y divide-gray-200 dark:divide-gray-700">
+                {{#if (eq this.emptyStateVariant "empty")}}
+                    <div class="p-4">
+                        <Telematic::TabEmptyState
+                            @tone={{this.emptyStateContent.tone}}
+                            @icon={{this.emptyStateContent.icon}}
+                            @title={{this.emptyStateContent.title}}
+                            @message={{this.emptyStateContent.message}}
+                            @note={{this.emptyStateContent.note}}
+                        />
+                    </div>
+                {{/if}}
+
+                {{#if (eq this.emptyStateVariant "unattached_only")}}
+                    <div class="p-4">
+                        <Telematic::TabEmptyState
+                            @tone={{this.emptyStateContent.tone}}
+                            @icon={{this.emptyStateContent.icon}}
+                            @title={{this.emptyStateContent.title}}
+                            @message={{this.emptyStateContent.message}}
+                            @note={{this.emptyStateContent.note}}
+                        />
+                    </div>
+                {{/if}}
+
+                <div class="bg-yellow-50/70 px-4 py-3 dark:bg-yellow-900/10">
+                <div class="mb-3 flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
+                    <div>
+                        <h4 class="text-sm font-bold text-gray-900 dark:text-gray-100">Unattached Devices</h4>
+                        <p class="text-xs text-yellow-800 dark:text-yellow-300">These devices are synced, but not yet mapped to a vehicle. Attach devices deliberately one at a time.</p>
+                    </div>
+                    <Badge @status={{if this.unattachedDevices.length "warning" "success"}} @hideStatusDot={{true}}>
+                        {{this.unattachedDevices.length}} devices
+                    </Badge>
+                </div>
+
+                {{#if this.unattachedDevices.length}}
+                    <div class="grid grid-cols-1 gap-2 xl:grid-cols-2">
+                        {{#each this.unattachedDevices as |device|}}
+                            <div class="flex flex-col gap-3 rounded-md border border-yellow-200 bg-white p-3 dark:border-yellow-700 dark:bg-gray-800 md:flex-row md:items-center md:justify-between">
+                                <div class="min-w-0">
+                                    <Device::Pill @device={{device}} />
+                                </div>
+                                <div class="flex flex-shrink-0 items-center gap-2">
+                                    <Button @icon="eye" @text="Open" @size="xs" @onClick={{fn this.deviceActions.transition.view device}} />
+                                    <Button @icon="link" @text="Attach" @size="xs" @type="primary" @onClick={{fn this.openAttachDeviceModal device}} />
+                                </div>
+                            </div>
+                        {{/each}}
+                    </div>
+                {{else}}
+                    <div class="rounded-md border border-green-200 bg-green-50 p-3 text-sm text-green-800 dark:border-green-700 dark:bg-green-900/20 dark:text-green-300">
+                        All synced devices in this view are mapped to vehicles.
+                    </div>
+                {{/if}}
+                </div>
+
+                {{#each this.vehicleGroups as |group|}}
+                    <div class="px-4 py-3">
+                        <div class="mb-3 flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
+                            <div class="min-w-0">
+                                <h4 class="truncate text-sm font-bold text-gray-900 dark:text-gray-100">{{group.name}}</h4>
+                                <p class="text-xs text-gray-500 dark:text-gray-300">{{group.devices.length}} attached provider devices</p>
+                            </div>
+                            <Badge @status="info" @hideStatusDot={{true}}>Vehicle mapped</Badge>
+                        </div>
+
+                        <div class="overflow-hidden rounded-md border border-gray-200 dark:border-gray-700">
+                            {{#each group.devices as |device|}}
+                                <div class="grid grid-cols-1 gap-3 border-b border-gray-200 p-3 last:border-b-0 dark:border-gray-700 lg:grid-cols-[minmax(0,1.5fr)_minmax(0,1fr)_auto] lg:items-center">
+                                    <Device::Pill @device={{device}} />
+                                    <div class="grid grid-cols-2 gap-2 text-xs">
+                                        <div>
+                                            <div class="text-gray-400 dark:text-gray-500">Provider ID</div>
+                                            <div class="truncate font-semibold text-gray-900 dark:text-gray-100">{{n-a device.device_id}}</div>
+                                        </div>
+                                        <div>
+                                            <div class="text-gray-400 dark:text-gray-500">Last seen</div>
+                                            <div class="truncate font-semibold text-gray-900 dark:text-gray-100">{{n-a (format-date-fns device.last_online_at "dd MMM HH:mm")}}</div>
+                                        </div>
+                                    </div>
+                                    <div class="flex items-center gap-2 lg:justify-end">
+                                        <Button @icon="eye" @text="Open" @size="xs" @onClick={{fn this.deviceActions.transition.view device}} />
+                                        <Button @icon="shuffle" @text="Change" @size="xs" @onClick={{fn this.openAttachDeviceModal device}} />
+                                        <Button @icon="unlink" @text="Detach" @size="xs" @type="danger" @onClick={{fn this.detachDevice device}} />
+                                    </div>
+                                </div>
+                            {{/each}}
+                        </div>
+                    </div>
+                {{/each}}
+            </div>
+        {{/if}}
+    </section>
+</div>

package/addon/templates/connectivity/telematics/details/devices.hbs

@@ -0,0 +1,88 @@
+<div class="flex flex-col gap-4 p-4 md:p-6">
+    <div class="flex flex-col gap-1">
+        <h2 class="text-base font-bold text-gray-900 dark:text-gray-100">Device Inventory</h2>
+        <p class="text-sm text-gray-500 dark:text-gray-300">Review synced provider devices, connection state, and vehicle mapping from this connection.</p>
+    </div>
+
+    <section class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
+        {{#each this.metrics as |metric|}}
+            <div class="fleet-ops-widget fleet-ops-kpi-tile fleetops-connectivity-kpi-tile {{metric.accentClass}} relative min-h-[102px] overflow-hidden rounded-md border bg-white shadow-sm dark:bg-gray-800">
+                <div class="flex h-full items-start justify-between gap-3 p-3">
+                    <div class="min-w-0">
+                        <div class="truncate text-[10px] font-bold uppercase text-gray-500 dark:text-gray-400">{{metric.label}}</div>
+                        <div class="mt-2 text-2xl font-extrabold leading-none text-gray-900 dark:text-gray-50">{{metric.value}}</div>
+                    </div>
+                    <div class="fleetops-connectivity-kpi-icon flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md text-[13px]">
+                        <FaIcon @icon={{metric.icon}} />
+                    </div>
+                </div>
+            </div>
+        {{/each}}
+    </section>
+
+    <section class="overflow-hidden rounded-md border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
+        <div class="fleetops-provider-connections-header border-b border-gray-200 px-4 py-3 dark:border-gray-700">
+            <div>
+                <h3 class="text-sm font-bold text-gray-900 dark:text-gray-100">Synced Devices</h3>
+                <p class="mt-1 text-xs leading-5 text-gray-500 dark:text-gray-300">Search provider identifiers, filter attachment state, and open devices for troubleshooting.</p>
+            </div>
+            <div class="fleetops-provider-connections-actions flex min-w-0 flex-wrap items-center gap-2 lg:ml-auto lg:flex-nowrap lg:justify-end">
+                <Layout::Resource::TabularActions
+                    @title="Synced Devices"
+                    @searchQuery={{this.query}}
+                    @onSearch={{perform this.deviceActions.controllerSearchTask this}}
+                    @columns={{this.columns}}
+                    @page={{this.page}}
+                    @onPageChange={{fn (mut this.page)}}
+                    @actionButtons={{this.actionButtons}}
+                    @bulkActions={{this.bulkActions}}
+                    @controller={{this}}
+                    @searchInputClass="fleetops-provider-connections-search"
+                    @filterPickerButtonClass="fleetops-provider-connections-action-button"
+                    @columnPickerButtonClass="fleetops-provider-connections-action-button"
+                />
+            </div>
+        </div>
+
+        {{#if this.emptyStateContent}}
+            <div class="p-4">
+                <Telematic::TabEmptyState
+                    @tone={{this.emptyStateContent.tone}}
+                    @icon={{this.emptyStateContent.icon}}
+                    @title={{this.emptyStateContent.title}}
+                    @message={{this.emptyStateContent.message}}
+                    @note={{this.emptyStateContent.note}}
+                    @primaryText={{this.emptyStateContent.primaryText}}
+                    @primaryIcon={{this.emptyStateContent.primaryIcon}}
+                    @primaryAction={{this.emptyStateContent.primaryAction}}
+                    @secondaryText={{this.emptyStateContent.secondaryText}}
+                    @secondaryIcon={{this.emptyStateContent.secondaryIcon}}
+                    @secondaryAction={{this.emptyStateContent.secondaryAction}}
+                />
+            </div>
+        {{else}}
+            <Layout::Resource::Tabular
+                @resource="device"
+                @title="Synced Devices"
+                @data={{@model}}
+                @columns={{this.columns}}
+                @page={{this.page}}
+                @onPageChange={{fn (mut this.page)}}
+                @controller={{this}}
+                @withoutHeader={{true}}
+                @emptyStateComponent={{component
+                    "table/empty-state"
+                    variant="compact"
+                    icon="tablet-screen-button"
+                    title="No synced devices"
+                    description="Run a provider sync or adjust filters to review devices from this connection."
+                    filteredTitle="No devices match your filters"
+                    filteredDescription="Adjust the search or filters to find another synced device."
+                    primaryText="Refresh"
+                    primaryIcon="refresh"
+                    primaryAction=this.refresh
+                }}
+            />
+        {{/if}}
+    </section>
+</div>