@fleetbase/fleetops-engine 0.6.65 → 0.6.66

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

@@ -52,7 +52,7 @@
                         </div>
                         <div>
                             <div class="font-semibold uppercase text-gray-400 dark:text-gray-500">Driver</div>
-                            <div class="truncate text-gray-800 dark:text-gray-100">{{n-a this.vehicleDriverName}}</div>
+                            <div class="truncate text-gray-800 dark:text-gray-100"><Driver::Pill @driver={{resource-relation this.vehicle "driver"}} @titleFallback={{n-a this.vehicleDriverName}} @imageSize="20" @imageClass="w-5 h-5" @titleClass="text-xs" @subtitle={{null}} /></div>
                         </div>
                     </div>
 
@@ -63,7 +63,7 @@
                         </div>
                         <div>
                             <div class="font-semibold uppercase text-gray-400 dark:text-gray-500">{{t "device.attachment.attached-device"}}</div>
-                            <div class="truncate text-gray-800 dark:text-gray-100">{{n-a this.device.displayName}}</div>
+                            <div class="truncate text-gray-800 dark:text-gray-100"><Device::Pill @device={{this.device}} @imageSize="20" @imageClass="w-5 h-5" @titleClass="text-xs" @subtitle={{null}} /></div>
                         </div>
                         <div>
                             <div class="font-semibold uppercase text-gray-400 dark:text-gray-500">{{t "device.attachment.last-seen"}}</div>

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

@@ -9,8 +9,8 @@
                 </div>
                 <div class="mt-1 flex flex-wrap gap-2 text-xs text-gray-500 dark:text-gray-300">
                     <span>{{n-a this.event.public_id}}</span>
-                    <span>Device: {{n-a (or this.event.device_name this.event.device_id this.event.ident)}}</span>
-                    <span>Provider: {{n-a (or this.event.telematic_name this.event.provider)}}</span>
+                    <span class="inline-flex items-center gap-1">Device: <Device::Pill @device={{resource-relation this.event "device"}} @titleFallback={{n-a (or this.event.device_name this.event.device_id this.event.ident)}} @imageSize="16" @imageClass="w-4 h-4" @titleClass="text-xs" @subtitle={{null}} /></span>
+                    <span class="inline-flex items-center gap-1">Provider: <Telematic::Pill @telematic={{resource-relation this.event "telematic"}} @titleFallback={{n-a (or this.event.telematic_name this.event.provider)}} @imageSize="16" @imageClass="w-4 h-4" @titleClass="text-xs" @subtitle={{null}} /></span>
                     <span>Occurred: {{n-a (format-date-fns this.event.occurred_at "dd MMM yyyy, HH:mm")}}</span>
                 </div>
             </div>

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

@@ -1,38 +1,68 @@
-<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 class="space-y-4 p-4">
+    {{#if this.details.totals}}
+        <div class="grid grid-cols-4 gap-2">
+            {{#each this.details.metrics as |metric|}}
+                <section class="min-w-0 rounded-md border border-gray-200 bg-white p-3 dark:border-gray-700 dark:bg-gray-800">
+                    <div class="flex items-center justify-between gap-2">
+                        <h2 class="text-xs font-semibold text-gray-500 dark:text-gray-400">{{metric.label}}</h2>
+                        <FaIcon @icon={{metric.icon}} class="text-blue-500" />
+                    </div>
+                    <div class="mt-1 text-xl font-semibold text-gray-900 dark:text-gray-100">{{metric.value}}</div>
+                </section>
+            {{/each}}
+        </div>
+    {{else}}{{#unless this.details.activityError}}
+            <div class="p-4 text-sm text-gray-500" role="status">Loading integration activity…</div>
+        {{/unless}}{{/if}}
+    <div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
+        <section class="overflow-hidden rounded-md border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800 lg:col-span-2">
+            <div class="flex items-center justify-between gap-3 border-b border-gray-200 p-4 dark:border-gray-700">
+                <h2 class="text-sm font-bold text-gray-900 dark:text-gray-100">Latest sync</h2>
+                <Button @icon="history" @text="View history" @size="xs" @onClick={{transition-to "connectivity.fuel-providers.details.sync"}} />
             </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 class="p-4">
+                {{#if this.details.latestRun}}
+                    <div class="flex flex-wrap items-center gap-3">
+                        <Badge @status={{this.details.latestRun.tone}}>{{this.details.latestRun.label}}</Badge>
+                        <time class="text-xs text-gray-500 dark:text-gray-400" dir="ltr">{{this.details.latestRun.date}}</time>
+                    </div>
+                    <p class="mt-3 text-sm text-gray-900 dark:text-gray-100" role="status">{{this.details.latestRun.result}}</p>
+                    <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">Requested dates: {{this.details.latestRun.window}}</p>
+                    {{#unless this.details.latestRun.received}}
+                        <p class="mt-3 text-xs leading-5 text-gray-500 dark:text-gray-400">If you expected purchases, choose their dates on the Sync tab and confirm that they belong to this
+                            PetroApp account.</p>
+                    {{/unless}}
+                {{else}}
+                    <p class="text-sm text-gray-900 dark:text-gray-100">No syncs yet</p>
+                    <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">Choose a purchase date range on the Sync tab to import your first transactions.</p>
+                {{/if}}
             </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>
+            {{#if this.details.totals.unmatched}}
+                <div class="flex flex-wrap items-center justify-between gap-3 border-t border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900">
+                    <span class="text-sm text-yellow-800 dark:text-yellow-300">Needs vehicle matching: {{this.details.totals.unmatched}}</span>
+                    <Button @text="Review matching" @size="xs" @onClick={{transition-to "connectivity.fuel-providers.details.matching"}} />
+                </div>
+            {{/if}}
+        </section>
+        <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">Account &amp; import settings</h2>
+            <dl class="mt-4 space-y-4 text-sm">
+                <div><dt class="text-xs text-gray-500 dark:text-gray-400">Environment</dt><dd class="mt-1 text-gray-900 dark:text-gray-100">{{this.details.environmentLabel}}</dd></div>
+                <div><dt class="text-xs text-gray-500 dark:text-gray-400">Default date range</dt><dd class="mt-1 text-gray-900 dark:text-gray-100">Last
+                        {{@model.sync_settings.window_days}}
+                        days</dd></div>
+                <div><dt class="text-xs text-gray-500 dark:text-gray-400">Fuel report creation</dt><dd class="mt-1 text-gray-900 dark:text-gray-100">{{if
+                            @model.sync_settings.auto_create_fuel_reports
+                            "Automatic after vehicle matching"
+                            "Manual"
+                        }}</dd></div>
+                <div><dt class="text-xs text-gray-500 dark:text-gray-400">Total imported spend</dt><dd class="mt-1 text-gray-900 dark:text-gray-100">{{this.details.spend}}</dd></div>
+            </dl>
+            <Button class="mt-4" @icon="cog" @text="Edit settings" @size="xs" @onClick={{transition-to "connectivity.fuel-providers.edit" @model}} />
+        </section>
+    </div>
+    {{#if @model.last_error}}<div
+            role="alert"
+            class="rounded-md border border-red-300 bg-red-50 p-4 text-sm text-red-700 dark:border-red-800 dark:bg-red-900/20 dark:text-red-300"
+        >{{@model.last_error}}</div>{{/if}}
 </div>

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

@@ -6,8 +6,8 @@
             <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="receipt" @text="Review Unmatched Transactions" @size="sm" @onClick={{this.reviewUnmatchedTransactions}} />
             <Button @icon="cog" @text="Edit Matching Rules" @size="sm" @onClick={{transition-to "connectivity.fuel-providers.edit" @model}} />
         </div>
     </section>
-</div>
+</div>

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

@@ -1,48 +1,59 @@
-<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 class="space-y-4 p-4">
+    <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">Import transactions</h2>
+        <p class="mt-1 text-xs leading-5 text-gray-500 dark:text-gray-400">Choose the purchase dates to import. Existing transactions are updated without creating duplicate fuel reports.</p>
+        <div class="mt-4 flex flex-wrap items-end gap-4">
+            <InputGroup @name="Start date" @wrapperClass="mb-0">
+                <input type="date" aria-label="Start date" class="form-input" value={{this.from}} {{on "change" (fn this.setDate "from")}} />
+            </InputGroup>
+            <InputGroup @name="End date" @wrapperClass="mb-0">
+                <input type="date" aria-label="End date" class="form-input" value={{this.to}} {{on "change" (fn this.setDate "to")}} />
+            </InputGroup>
+            <Button
+                @icon="rotate"
+                @text="Sync Transactions"
+                @type="primary"
+                @size="sm"
+                @wrapperClass="flex-shrink-0"
+                @textClass="whitespace-nowrap"
+                @disabled={{this.syncDisabled}}
+                @isLoading={{this.details.syncTransactions.isRunning}}
+                @onClick={{this.sync}}
+            />
+        </div>
+        {{#if this.dateError}}<p class="mt-3 text-xs text-red-600 dark:text-red-300" role="alert">{{this.dateError}}</p>{{/if}}
+        {{#if this.details.hasPendingSync}}<p class="mt-3 text-xs text-blue-600 dark:text-blue-300" role="status">A sync is in progress. Results update automatically.</p>{{/if}}
+    </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 items-center justify-between gap-3 border-b border-gray-200 p-4 dark:border-gray-700">
             <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>
+                <h2 class="text-sm font-bold text-gray-900 dark:text-gray-100">Sync history</h2>
+                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Latest 20 runs · Times shown in your local timezone</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>
+            <Button @icon="refresh" @text="Refresh" @size="xs" @onClick={{this.details.refreshActivity}} />
         </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 class="divide-y divide-gray-200 dark:divide-gray-700">
+            {{#each this.details.runs as |run|}}
+                <article class="p-4" data-test-sync-run={{run.uuid}}>
+                    <div class="flex flex-wrap items-center justify-between gap-3">
+                        <div class="flex flex-wrap items-center gap-3">
+                            <Badge @status={{run.tone}}>{{run.label}}</Badge>
+                            <span class="text-sm font-medium text-gray-900 dark:text-gray-100" dir="ltr">{{run.window}}</span>
+                        </div>
+                        <time class="text-xs text-gray-500 dark:text-gray-400" dir="ltr">{{run.date}}</time>
+                    </div>
+                    <p class="mt-3 text-sm text-gray-700 dark:text-gray-300" role="status">{{run.result}}</p>
+                    {{#if run.received}}
+                        <div class="mt-3 flex flex-wrap gap-x-6 gap-y-2 text-xs text-gray-500 dark:text-gray-400">
+                            <span>Read: {{run.received}}</span><span>Vehicle matched: {{run.matched}}</span><span>Fuel reports created: {{run.fuel_reports_created}}</span>
+                        </div>
+                    {{/if}}
+                </article>
+            {{else}}
+                <div class="p-8 text-center"><FaIcon @icon="history" class="text-gray-400" /><h3 class="mt-3 text-sm font-semibold text-gray-900 dark:text-gray-100">No sync history yet</h3><p
+                        class="mt-1 text-xs text-gray-500 dark:text-gray-400"
+                    >Choose a date range above to start an import.</p></div>
+            {{/each}}
         </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>
+</div>

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

@@ -1,16 +1,21 @@
-<div class="mx-auto w-full max-w-7xl px-4 py-4 md:px-6">
+<div class="w-full">
     <Layout::Resource::Tabular
         @resource="fuel-provider-transaction"
         @title="Imported Transactions"
         @data={{@model}}
         @columns={{this.columns}}
-        @page={{1}}
+        @page={{this.page}}
+        @searchQuery={{this.query}}
+        @onSearch={{fn (mut this.query)}}
+        @onPageChange={{fn (mut this.page)}}
+        @setupTable={{fn (mut this.table)}}
+        @onReload={{this.refresh}}
         @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."
+            title=(if this.hasFilters "No transactions match your filters" "No imported transactions")
+            description=(if this.hasFilters "Adjust or clear the filters to see other transactions." "Fuel transactions appear here after this provider syncs bills.")
             filteredTitle="No transactions match your filters"
             filteredDescription="Adjust filters or sync the provider again to review imported transactions."
             primaryText="Refresh"
@@ -18,4 +23,4 @@
             primaryAction=this.refresh
         }}
     />
-</div>
+</div>

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

@@ -2,7 +2,7 @@
     <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="flex min-w-0 flex-1 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>
@@ -13,37 +13,62 @@
                         </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}}
+                            ·
+                            {{this.environmentLabel}}
+
                         </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>
+                            {{#if this.totals}}
+                                <span>Transactions: {{this.totals.transactions}}</span>
+                                <span>Needs matching: {{this.totals.unmatched}}</span>
+                            {{/if}}
                         </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 class="flex max-w-full flex-shrink-0 flex-nowrap items-center gap-2 overflow-x-auto">
+                    <Button @icon="arrow-left" @text="Back" @size="xs" @wrapperClass="flex-shrink-0" @onClick={{transition-to "connectivity.fuel-providers.index"}} />
+                    <Button @icon="plug" @text="Test" @size="xs" @wrapperClass="flex-shrink-0" @onClick={{this.openConnectionTestDialog}} />
+                    <Button
+                        @icon="rotate"
+                        @text="Sync Transactions"
+                        @type="primary"
+                        @size="xs"
+                        @wrapperClass="flex-shrink-0"
+                        @disabled={{this.syncDisabled}}
+                        @textClass="whitespace-nowrap"
+                        @isLoading={{this.syncTransactions.isRunning}}
+                        @onClick={{perform this.syncTransactions}}
+                    />
+                    <Button @icon="cog" @text="Settings" @size="xs" @wrapperClass="flex-shrink-0" @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'}}">
+                    <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>
 
+        {{#if this.activityError}}
+            <div role="alert" class="m-4 rounded-md border border-red-300 bg-red-50 p-3 text-sm text-red-700 dark:border-red-800 dark:bg-red-900/20 dark:text-red-300">
+                {{this.activityError}}
+                <Button @text="Refresh" @size="xs" @onClick={{this.refreshActivity}} />
+            </div>
+        {{/if}}
         <section class="min-w-0">
             {{outlet}}
         </section>

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

@@ -15,6 +15,7 @@
 
     <FuelIntegration::Form
         @resource={{@model}}
+        @isEditing={{true}}
         @saveLabel="Save Changes"
         @footerHelp="Changes affect credential tests, transaction sync, matching, and Fuel Report creation."
         @isSaving={{this.save.isRunning}}

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

@@ -8,5 +8,6 @@
     @bulkActions={{this.bulkActions}}
     @controller={{this}}
     @searchQuery={{this.query}}
+    @onSearch={{fn (mut this.query)}}
     @onRefresh={{this.refresh}}
-/>
+/>

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

@@ -19,4 +19,4 @@
         @onCancel={{this.cancel}}
         @onSave={{perform this.save this.connection}}
     />
-</div>
+</div>

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

@@ -34,6 +34,7 @@
                         <div class="min-w-0">
                             <ModelSelect
                                 @modelName="vehicle"
+                                @selectedItemComponent={{component "select-option/vehicle" compact=true}}
                                 @query={{hash telematic_uuid=this.telematic.id}}
                                 @selectedModel={{this.selectedVehicle}}
                                 @placeholder="Any vehicle"
@@ -44,7 +45,7 @@
                                 @onChange={{this.updateSelectedVehicle}}
                                 as |vehicle|
                             >
-                                {{vehicle.displayName}}
+                                <SelectOption::Vehicle @option={{vehicle}} />
                             </ModelSelect>
                         </div>
                     </div>

package/addon/templates/maintenance/inspection-forms/index/details/index.hbs

@@ -0,0 +1 @@
+<InspectionForm::Details @resource={{@model}} />

package/addon/templates/maintenance/inspection-forms/index/details/submissions.hbs

@@ -0,0 +1,2 @@
+<InspectionForm::Details::Submissions @resource={{@model}} @form={{@model}} />
+{{outlet}}

package/addon/templates/maintenance/inspection-forms/index/details.hbs

@@ -0,0 +1,14 @@
+<Layout::Resource::Panel
+    @resource={{@model}}
+    @controller={{this}}
+    @headerTitle={{@model.name}}
+    @actionButtons={{this.actionButtons}}
+    @onPressCancel={{transition-to "maintenance.inspection-forms.index"}}
+    @onOverlayReady={{fn (mut this.overlay)}}
+    @headerClass="no-bottom-border"
+    @bodyClass="no-scroll"
+>
+    <TabNavigation @tabs={{this.tabs}} @contentClass="scrollable" @tablistClass="pl-2">
+        {{outlet}}
+    </TabNavigation>
+</Layout::Resource::Panel>

package/addon/templates/maintenance/inspection-forms/index/edit.hbs

@@ -0,0 +1,11 @@
+<Layout::Resource::Panel
+    @resource={{@model}}
+    @controller={{this}}
+    @headerTitle={{t "common.edit-resource-name" resourceName=@model.name}}
+    @saveTask={{this.save}}
+    @onPressCancel={{this.cancel}}
+    @onOverlayReady={{fn (mut this.overlay)}}
+>
+    <InspectionForm::Form @resource={{@model}} @controller={{this}} @structure={{this.structure}} @onStructureChange={{this.setStructure}} />
+    <Spacer @height="200px" />
+</Layout::Resource::Panel>

package/addon/templates/maintenance/inspection-forms/index/new.hbs

@@ -0,0 +1,11 @@
+<Layout::Resource::Panel
+    @resource={{this.inspectionForm}}
+    @controller={{this}}
+    @headerTitle={{t "inspection.form.create"}}
+    @saveTask={{this.save}}
+    @onPressCancel={{transition-to "maintenance.inspection-forms.index"}}
+    @onOverlayReady={{fn (mut this.overlay)}}
+>
+    <InspectionForm::Form @resource={{this.inspectionForm}} @controller={{this}} @structure={{this.structure}} @onStructureChange={{this.setStructure}} />
+    <Spacer @height="200px" />
+</Layout::Resource::Panel>

package/addon/templates/maintenance/inspection-forms/index.hbs

@@ -0,0 +1,28 @@
+<Layout::Resource::Tabular
+    @resource="inspection-form"
+    @title="Inspection Forms"
+    @searchQuery={{this.query}}
+    @onSearch={{perform this.inspectionFormActions.controllerSearchTask this}}
+    @data={{@model}}
+    @columns={{this.columns}}
+    @page={{this.page}}
+    @onPageChange={{fn (mut this.page)}}
+    @actionButtons={{this.actionButtons}}
+    @bulkActions={{this.bulkActions}}
+    @controller={{this}}
+    @emptyStateComponent={{component
+        "table/empty-state"
+        icon="clipboard-check"
+        title="Create your first inspection form"
+        description="Build DVIR and safety checklists drivers can submit before defects become downtime."
+        filteredTitle="No inspection forms match your filters"
+        filteredDescription="Adjust search or filters to find another form."
+        primaryText="New form"
+        primaryIcon="plus"
+        primaryAction=this.inspectionFormActions.transition.create
+        docsSlug="fleet-ops/maintenance/inspections/overview"
+        docsTitle="Inspections guide"
+        docsText="Inspections guide"
+    }}
+/>
+{{outlet}}

package/addon/templates/maintenance/inspection-forms.hbs

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

package/addon/templates/maintenance/inspection-submissions/index/details/audit.hbs

@@ -0,0 +1 @@
+<ActivityLog @subjectId={{@model.id}} class="p-3" />

package/addon/templates/maintenance/inspection-submissions/index/details/index.hbs

@@ -0,0 +1 @@
+<InspectionSubmission::Details @resource={{@model}} />

package/addon/templates/maintenance/inspection-submissions/index/details/photos.hbs

@@ -0,0 +1 @@
+<InspectionSubmission::Photos @resource={{@model}} />

package/addon/templates/maintenance/inspection-submissions/index/details.hbs

@@ -0,0 +1,14 @@
+<Layout::Resource::Panel
+    @resource={{@model}}
+    @controller={{this}}
+    @headerTitle={{if (or @model.form.name @model.form_name) (t "inspection.record.submission-title" form=(or @model.form.name @model.form_name)) (or @model.public_id (t "inspection.record.inspection"))}}
+    @actionButtons={{this.actionButtons}}
+    @onPressCancel={{transition-to "maintenance.inspection-submissions.index"}}
+    @onOverlayReady={{fn (mut this.overlay)}}
+    @headerClass="no-bottom-border"
+    @bodyClass="no-scroll"
+>
+    <TabNavigation @tabs={{this.tabs}} @contentClass="scrollable" @tablistClass="pl-2">
+        {{outlet}}
+    </TabNavigation>
+</Layout::Resource::Panel>

package/addon/templates/maintenance/inspection-submissions/index/edit.hbs

@@ -0,0 +1,11 @@
+<Layout::Resource::Panel
+    @resource={{@model}}
+    @controller={{this}}
+    @headerTitle={{t "common.edit-resource-name" resourceName=@model.public_id}}
+    @saveTask={{this.save}}
+    @onPressCancel={{this.cancel}}
+    @onOverlayReady={{fn (mut this.overlay)}}
+>
+    <InspectionSubmission::Form @resource={{@model}} @controller={{this}} @onAnswersChange={{this.setAnswers}} />
+    <Spacer @height="200px" />
+</Layout::Resource::Panel>

package/addon/templates/maintenance/inspection-submissions/index/new.hbs

@@ -0,0 +1,11 @@
+<Layout::Resource::Panel
+    @resource={{this.inspectionSubmission}}
+    @controller={{this}}
+    @headerTitle={{t "inspection.record.create"}}
+    @saveTask={{this.save}}
+    @onPressCancel={{transition-to "maintenance.inspection-submissions.index"}}
+    @onOverlayReady={{fn (mut this.overlay)}}
+>
+    <InspectionSubmission::Form @resource={{this.inspectionSubmission}} @controller={{this}} @onAnswersChange={{this.setAnswers}} />
+    <Spacer @height="200px" />
+</Layout::Resource::Panel>

package/addon/templates/maintenance/inspection-submissions/index.hbs

@@ -0,0 +1,28 @@
+<Layout::Resource::Tabular
+    @resource="inspection-submission"
+    @title="Inspections"
+    @searchQuery={{this.query}}
+    @onSearch={{perform this.inspectionSubmissionActions.controllerSearchTask this}}
+    @data={{@model}}
+    @columns={{this.columns}}
+    @page={{this.page}}
+    @onPageChange={{fn (mut this.page)}}
+    @actionButtons={{this.actionButtons}}
+    @bulkActions={{this.bulkActions}}
+    @controller={{this}}
+    @emptyStateComponent={{component
+        "table/empty-state"
+        icon="list-check"
+        title="No inspections yet"
+        description="Capture DVIR submissions and turn failed items into issues or work orders."
+        filteredTitle="No inspections match your filters"
+        filteredDescription="Adjust search or filters to find another inspection."
+        primaryText="New inspection"
+        primaryIcon="plus"
+        primaryAction=this.inspectionSubmissionActions.transition.create
+        docsSlug="fleet-ops/maintenance/inspections/overview"
+        docsTitle="Inspections guide"
+        docsText="Inspections guide"
+    }}
+/>
+{{outlet}}

package/addon/templates/maintenance/inspection-submissions.hbs

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