@fleetbase/fleetops-engine 0.6.65 → 0.6.66

package/addon/templates/management/fuel-transactions/index/details.hbs

@@ -1,73 +1,75 @@
 <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 md:px-6">
-        <div class="flex 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 transaction review</div>
-                <h1 class="truncate text-lg font-bold text-gray-900 dark:text-gray-100">{{@model.provider_transaction_id}}</h1>
-                <div class="mt-2 flex flex-wrap gap-2 text-xs text-gray-500 dark:text-gray-300">
-                    <Badge @status={{@model.sync_status}}>{{@model.sync_status}}</Badge>
-                    <span>{{@model.provider}}</span>
-                    <span>{{n-a (format-date-fns @model.transaction_at "dd MMM yyyy HH:mm")}}</span>
-                    <span>{{n-a @model.station_name}}</span>
-                </div>
-            </div>
+    <header class="flex flex-wrap items-center justify-between gap-3 border-b border-gray-200 bg-white px-4 py-3 dark:border-gray-700 dark:bg-gray-900">
+        <div class="min-w-0">
             <div class="flex flex-wrap items-center gap-2">
-                <Button @icon="arrow-left" @text="Back" @size="sm" @onClick={{transition-to "management.fuel-transactions.index"}} />
-                <Button @icon="rotate" @text="Reprocess" @type="primary" @size="sm" @isLoading={{this.reprocess.isRunning}} @onClick={{perform this.reprocess}} />
+                <h1 class="text-lg font-bold text-gray-900 dark:text-gray-100">Fuel purchase {{@model.provider_transaction_id}}</h1>
+                <FuelTransactionStatus @status={{@model.sync_status}} />
             </div>
+            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{@model.provider}} · {{n-a @model.station_name}}</p>
         </div>
-    </section>
-
-    <div class="min-h-0 flex-1 overflow-y-auto p-4 md:p-6">
-        <div class="mx-auto grid w-full max-w-7xl grid-cols-1 gap-4 lg:grid-cols-3">
-            <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">Provider Bill Data</h2>
-                <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 text-gray-500">Vehicle/Card</div><div class="mt-1 font-semibold text-gray-900 dark:text-gray-100">{{n-a @model.vehicle_card_id}}</div></div>
-                    <div class="rounded-md border border-gray-200 p-3 dark:border-gray-700"><div class="text-xs text-gray-500">Liters</div><div class="mt-1 font-semibold text-gray-900 dark:text-gray-100">{{n-a @model.volume}}</div></div>
-                    <div class="rounded-md border border-gray-200 p-3 dark:border-gray-700"><div class="text-xs text-gray-500">Amount</div><div class="mt-1 font-semibold text-gray-900 dark:text-gray-100">{{n-a @model.amount}} {{@model.currency}}</div></div>
-                    <div class="rounded-md border border-gray-200 p-3 dark:border-gray-700"><div class="text-xs text-gray-500">Vehicle</div><div class="mt-1 font-semibold text-gray-900 dark:text-gray-100">{{n-a @model.vehicle_name}}</div></div>
-                    <div class="rounded-md border border-gray-200 p-3 dark:border-gray-700"><div class="text-xs text-gray-500">Trip</div><div class="mt-1 font-semibold text-gray-900 dark:text-gray-100">{{n-a @model.trip_number}}</div></div>
-                    <div class="rounded-md border border-gray-200 p-3 dark:border-gray-700"><div class="text-xs text-gray-500">Fuel Report</div><div class="mt-1 font-semibold text-gray-900 dark:text-gray-100">{{n-a @model.fuel_report_id}}</div></div>
-                </div>
-
-                <div class="mt-4 grid grid-cols-1 gap-4 lg:grid-cols-2">
-                    <div>
-                        <h3 class="text-xs font-bold uppercase text-gray-400">Normalized Payload</h3>
-                        <pre class="mt-2 max-h-80 overflow-auto rounded-md bg-gray-900 p-3 text-[11px] leading-5 text-gray-100">{{this.normalizedPayloadJson}}</pre>
+        <div class="flex items-center gap-2">
+            <Button @icon="arrow-left" @text="Back" @size="sm" @onClick={{transition-to "management.fuel-transactions.index"}} />
+            <Button @icon="rotate" @text="Reprocess" @size="sm" @onClick={{fn this.confirmAction "reprocess"}} />
+        </div>
+    </header>
+    <div class="min-h-0 flex-1 overflow-y-auto p-4">
+        <div class="grid grid-cols-1 items-start gap-4 md:grid-cols-5">
+            <div class="min-w-0 space-y-3 md:col-span-3">
+                {{#each this.purchaseGroups as |group|}}
+                    <section class="overflow-hidden rounded-md border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
+                        <h2 class="border-b border-gray-200 px-3 py-2 text-sm font-semibold text-gray-900 dark:border-gray-700 dark:text-gray-100">{{group.title}}</h2>
+                        <dl class="grid grid-cols-1 gap-x-6 gap-y-3 p-3 text-sm sm:grid-cols-2 lg:grid-cols-3">
+                            {{#each group.rows as |row|}}
+                                <div class="min-w-0"><dt class="text-xs text-gray-500 dark:text-gray-400">{{row.label}}</dt><dd
+                                        class="break-words text-gray-900 dark:text-gray-100"
+                                    >{{row.value}}</dd></div>
+                            {{/each}}
+                        </dl>
+                    </section>
+                {{/each}}
+            </div>
+            <section class="min-w-0 overflow-hidden rounded-md border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800 md:col-span-2">
+                <h2 class="border-b border-gray-200 px-3 py-2 text-sm font-semibold text-gray-900 dark:border-gray-700 dark:text-gray-100">Matching & review</h2>
+                <div class="space-y-3 p-3">
+                    <div class="flex flex-wrap items-center justify-between gap-2">
+                        <div class="min-w-0"><div class="text-xs text-gray-500 dark:text-gray-400">Vehicle</div><div class="mt-1 break-words text-sm text-gray-900 dark:text-gray-100">
+                                {{#if this.vehicleResource}}
+                                    <Vehicle::Pill @vehicle={{this.vehicleResource}} />
+                                {{else}}
+                                    Not matched
+                                {{/if}}
+                            </div></div>
+                        <Button @text={{if @model.vehicle_uuid "Change" "Match"}} @size="xs" @onClick={{fn this.confirmAction "vehicle"}} />
                     </div>
-                    <div>
-                        <h3 class="text-xs font-bold uppercase text-gray-400">Raw Payload</h3>
-                        <pre class="mt-2 max-h-80 overflow-auto rounded-md bg-gray-900 p-3 text-[11px] leading-5 text-gray-100">{{this.rawPayloadJson}}</pre>
+                    <div class="flex flex-wrap items-center justify-between gap-2">
+                        <div class="min-w-0"><div class="text-xs text-gray-500 dark:text-gray-400">Order / Trip</div><div class="mt-1 break-words text-sm text-gray-900 dark:text-gray-100">
+                                {{#if this.orderResource}}
+                                    <Order::Pill @order={{this.orderResource}} />
+                                {{else}}
+                                    Not matched
+                                {{/if}}
+                            </div></div>
+                        <Button @text={{if @model.order_uuid "Change" "Match"}} @size="xs" @onClick={{fn this.confirmAction "order"}} />
                     </div>
-                </div>
-            </section>
-
-            <aside class="space-y-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">Manual Match</h2>
-                    <p class="mt-1 text-xs leading-5 text-gray-500 dark:text-gray-300">Use a Fleet-Ops UUID or public ID when automatic matching cannot identify the vehicle or order.</p>
-                    <div class="mt-3 space-y-3 no-input-group-padding">
-                        <InputGroup @name="Vehicle ID">
-                            <Input class="form-input w-full" @value={{this.vehicleId}} {{on "input" this.setVehicleId}} />
-                        </InputGroup>
-                        <Button @icon="truck" @text="Match Vehicle" @type="primary" @size="sm" @isLoading={{this.matchVehicle.isRunning}} @disabled={{not this.vehicleId}} @onClick={{perform this.matchVehicle}} />
-                        <InputGroup @name="Order / Trip ID">
-                            <Input class="form-input w-full" @value={{this.orderId}} {{on "input" this.setOrderId}} />
-                        </InputGroup>
-                        <Button @icon="route" @text="Match Order" @size="sm" @isLoading={{this.matchOrder.isRunning}} @disabled={{not this.orderId}} @onClick={{perform this.matchOrder}} />
+                    <div class="flex flex-wrap items-center justify-between gap-2">
+                        <div class="min-w-0"><div class="text-xs text-gray-500 dark:text-gray-400">Fuel Report</div><div class="mt-1 break-words text-sm text-gray-900 dark:text-gray-100">
+                                {{#if this.fuelReportResource}}
+                                    <FuelReport::Pill @fuelReport={{this.fuelReportResource}} />
+                                {{else}}
+                                    Not created
+                                {{/if}}
+                            </div></div>
+                        {{#if @model.fuel_report_id}}<Button @text="Open" @size="xs" @onClick={{this.openFuelReport}} />{{/if}}
                     </div>
-                </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">Review State</h2>
-                    <p class="mt-1 text-xs leading-5 text-gray-500 dark:text-gray-300">Mark noisy provider records as reviewed or ignored without deleting the audit ledger.</p>
-                    <div class="mt-3 flex flex-wrap gap-2">
-                        <Button @icon="check" @text="Mark Reviewed" @size="sm" @isLoading={{this.review.isRunning}} @onClick={{perform this.review "reviewed"}} />
-                        <Button @icon="ban" @text="Ignore" @type="danger" @size="sm" @isLoading={{this.review.isRunning}} @onClick={{perform this.review "ignored"}} />
+                    <div class="border-t border-gray-200 pt-3 dark:border-gray-700">
+                        <p class="mb-2 text-xs text-gray-500 dark:text-gray-400">Review this purchase or exclude it from automatic matching.</p>
+                        <div class="flex flex-wrap gap-2">
+                            <Button @icon="check" @text="Mark Reviewed" @type="success" @size="xs" @disabled={{eq @model.sync_status "reviewed"}} @onClick={{fn this.confirmAction "reviewed"}} />
+                            <Button @icon="ban" @text="Ignore" @type="danger" @size="xs" @disabled={{eq @model.sync_status "ignored"}} @onClick={{fn this.confirmAction "ignored"}} />
+                        </div>
                     </div>
-                </section>
-            </aside>
+                </div>
+            </section>
         </div>
     </div>
 </div>

package/addon/templates/management/fuel-transactions/index.hbs

@@ -1,22 +1,11 @@
-<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 md:px-6">
-        <div class="flex flex-col gap-2 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 transaction ledger</div>
-                <h1 class="text-lg font-bold text-gray-900 dark:text-gray-100">{{t "menu.fuel-transactions"}}</h1>
-                <p class="mt-1 max-w-4xl text-sm leading-5 text-gray-500 dark:text-gray-300">
-                    Imported fuel card bills and provider purchase records are reviewed here before, during, and after they match to vehicles, trips, and linked Fuel Reports.
-                </p>
-            </div>
-        </div>
-    </section>
-
-    <div class="min-h-0 flex-1 overflow-y-auto p-4 md:p-6">
-        {{#if this.hasRecords}}
+{{#unless this.viewingDetails}}
+    <div class="flex h-full flex-col bg-white dark:bg-gray-900">
+        <div class="min-h-0 flex-1 overflow-y-auto">
             <Layout::Resource::Tabular
                 @resource="fuel-provider-transaction"
                 @title={{t "menu.fuel-transactions"}}
                 @searchQuery={{this.query}}
+                @onSearch={{fn (mut this.query)}}
                 @data={{@model}}
                 @columns={{this.columns}}
                 @page={{this.page}}
@@ -28,7 +17,7 @@
                 @emptyStateComponent={{component
                     "table/empty-state"
                     icon="receipt"
-                    title="No fuel transactions"
+                    title=(if this.hasFilters "No transactions match your filters" "No fuel transactions")
                     description="Imported fuel card bills and provider purchase records appear here after provider syncs complete."
                     filteredTitle="No transactions match your filters"
                     filteredDescription="Adjust the search or filters to review other imported transactions."
@@ -40,19 +29,8 @@
                     docsText="Fuel reports guide"
                 }}
             />
-        {{else}}
-            <section class="rounded-md border border-dashed border-gray-300 bg-white p-8 text-center shadow-sm dark:border-gray-700 dark:bg-gray-800">
-                <div class="mx-auto flex h-11 w-11 items-center justify-center rounded-md bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-300">
-                    <FaIcon @icon="receipt" />
-                </div>
-                <h2 class="mt-3 text-sm font-bold text-gray-900 dark:text-gray-100">{{this.emptyStateTitle}}</h2>
-                <p class="mx-auto mt-1 max-w-2xl text-xs leading-5 text-gray-500 dark:text-gray-300">{{this.emptyStateMessage}}</p>
-                <div class="mt-4 flex flex-wrap items-center justify-center gap-2">
-                    <Button @icon="gas-pump" @text="Open Fuel Integrations" @type="primary" @size="sm" @onClick={{transition-to "connectivity.fuel-providers.index"}} />
-                    <Button @icon="refresh" @text="Refresh" @size="sm" @onClick={{this.refresh}} />
-                </div>
-            </section>
-        {{/if}}
+
+        </div>
     </div>
-</div>
-{{outlet}}
+{{/unless}}
+{{outlet}}

package/addon/templates/management/index.hbs

@@ -1,113 +1,121 @@
-<div class="fleet-ops-control-hub" data-test-fleet-ops-resources-hub>
-    <section class="fleet-ops-control-hub-header">
-        <div class="fleet-ops-control-hub-header-copy">
-            <div class="fleet-ops-control-hub-eyebrow">Resources</div>
-            <h1 class="fleet-ops-control-hub-title">Resources Hub</h1>
-            <p class="fleet-ops-control-hub-subtitle">Manage the people, vehicles, places, partners, and operating records that keep dispatch grounded.</p>
-        </div>
-        <div class="fleet-ops-control-hub-header-actions">
-            <Button @icon="refresh" @size="sm" @helpText={{t "common.reload"}} @onClick={{perform this.loadHub}} />
-        </div>
-    </section>
+<div class="fleet-ops-control-hub fleet-ops-radar" data-test-fleet-ops-radar {{radar-keyboard this.keyboardHandlers enabled=(eq this.view "list")}}>
+    <Radar::Header
+        @stats={{this.stats}}
+        @lastLoadedAt={{this.lastLoadedAt}}
+        @query={{this.q}}
+        @view={{this.view}}
+        @isLoading={{this.reload.isRunning}}
+        @onSearch={{this.search}}
+        @onReload={{perform this.reload}}
+        @onNewNotice={{this.newNotice}}
+        @onChangeView={{this.setView}}
+    />
 
-    <div class="fleet-ops-control-hub-body">
-        <section class="fleet-ops-control-hub-kpis">
-            {{#each this.kpis as |kpi|}}
-                <LinkTo @route={{kpi.route}} class="fleet-ops-control-hub-kpi fleet-ops-control-hub-tone-{{kpi.tone}}" data-test-fleet-ops-resources-kpi={{kpi.key}}>
-                    <div class="fleet-ops-control-hub-kpi-copy">
-                        <div class="fleet-ops-control-hub-kpi-label">{{kpi.label}}</div>
-                        <div class="fleet-ops-control-hub-kpi-value">{{kpi.value}}</div>
-                        <div class="fleet-ops-control-hub-kpi-caption">{{kpi.caption}}</div>
-                        <div class="fleet-ops-control-hub-kpi-action">
-                            <span>{{kpi.actionLabel}}</span>
-                            <FaIcon @icon="arrow-right" />
-                        </div>
-                    </div>
-                    <div class="fleet-ops-control-hub-kpi-icon"><FaIcon @icon={{kpi.icon}} /></div>
-                </LinkTo>
-            {{/each}}
-        </section>
+    <div class="fleet-ops-control-hub-body fleet-ops-radar-body">
+        {{#if this.sourceErrors.length}}
+            <div class="fleet-ops-radar-sources-warning" data-test-radar-sources-warning>
+                <FaIcon @icon="triangle-exclamation" />
+                <span>{{t "radar.sources-warning" sources=this.sourceErrorsText}}</span>
+            </div>
+        {{/if}}
 
-        <section class="fleet-ops-control-hub-grid">
-            <div class="fleet-ops-control-hub-main">
-                {{#each this.sections as |section|}}
-                    <div class="fleet-ops-control-hub-panel" data-test-fleet-ops-resources-section={{section.key}}>
-                        <div class="fleet-ops-control-hub-panel-header">
-                            <div>
-                                <h2>{{section.title}}</h2>
-                                <p>{{section.description}}</p>
-                            </div>
-                        </div>
+        <Radar::Briefing
+            @briefing={{this.briefing}}
+            @strips={{this.strips}}
+            @isLoading={{this.loadBriefing.isRunning}}
+            @collapsed={{this.briefingCollapsed}}
+            @busyKey={{this.busyDecisionKey}}
+            @onToggle={{this.toggleBriefing}}
+            @onFilterCategory={{this.filterCategory}}
+            @onConfirm={{perform this.confirmDecision}}
+            @onAlternative={{perform this.decisionAlternative}}
+            @onDismiss={{perform this.dismissDecision}}
+            @onUndo={{perform this.undoStrip}}
+            @onWake={{perform this.wakeStrip}}
+            @onOpenRecord={{this.openRecord}}
+        />
 
-                        <div class="fleet-ops-control-hub-link-grid">
-                            {{#each section.links as |link|}}
-                                <LinkTo @route={{link.route}} class="fleet-ops-control-hub-link" data-test-fleet-ops-hub-card={{link.label}}>
-                                    <span class="fleet-ops-control-hub-link-icon"><FaIcon @icon={{link.icon}} /></span>
-                                    <span class="fleet-ops-control-hub-link-copy">
-                                        <span class="fleet-ops-control-hub-link-title">{{link.label}}</span>
-                                        <span class="fleet-ops-control-hub-link-description">{{link.description}}</span>
-                                    </span>
-                                    <span class="fleet-ops-control-hub-link-count">{{link.count}}</span>
-                                </LinkTo>
-                            {{/each}}
-                        </div>
-                    </div>
-                {{/each}}
+        {{#if (eq this.view "agenda")}}
+            <Radar::Agenda
+                @agenda={{this.agenda}}
+                @window={{this.window}}
+                @isLoading={{this.loadAgenda.isRunning}}
+                @onChangeWindow={{this.setWindow}}
+                @onOpen={{this.openAgendaEntry}}
+                @onPlan={{perform this.planItem}}
+                @onHandover={{perform this.openHandover}}
+                @onSeeAll={{this.showAnytimeInList}}
+            />
+        {{else}}
+            <Radar::FilterPills @pills={{this.pills}} @isFiltered={{this.isFiltered}} @onToggle={{this.togglePill}} @onClear={{this.clearFilters}} />
+
+            <Radar::ViewBar
+                @status={{this.status}}
+                @stats={{this.stats}}
+                @views={{this.allViews}}
+                @activeView={{this.activeView}}
+                @onSetStatus={{this.setStatus}}
+                @onApplyView={{this.applyView}}
+                @onSaveView={{this.saveCurrentView}}
+                @onDeleteView={{this.deleteView}}
+            />
+
+            {{#if this.hasSelection}}
+                <Radar::BulkBar @items={{this.selectedItems}} @snoozePresets={{this.snoozePresets}} @isBusy={{this.bulkAct.isRunning}} @onAct={{perform this.bulkAct}} @onClear={{this.clearSelection}} />
+            {{/if}}
+
+            <div class="fleet-ops-radar-list" data-test-radar-list>
+                {{#if this.isLoading}}
+                    <div class="fleet-ops-radar-empty"><Spinner @size="lg" /></div>
+                {{else if this.isEmpty}}
+                    <Radar::EmptyState @status={{this.status}} @isFiltered={{this.isFiltered}} @snoozeSchedule={{this.snoozeSchedule}} @onClear={{this.clearFilters}} />
+                {{else}}
+                    <Radar::ItemList
+                        @groups={{this.groups}}
+                        @selection={{this.selection}}
+                        @focusedKey={{this.focusedKey}}
+                        @snoozePresets={{this.snoozePresets}}
+                        @onSelect={{this.toggleSelect}}
+                        @onFocus={{this.focusItem}}
+                        @onOpen={{this.openDrawer}}
+                        @onAct={{perform this.act}}
+                        @onOpenRecord={{this.openRecord}}
+                    />
+                {{/if}}
             </div>
 
-            <aside class="fleet-ops-control-hub-side">
-                <div class="fleet-ops-control-hub-panel">
-                    <div class="fleet-ops-control-hub-panel-header">
-                        <div>
-                            <h2>Action Queue</h2>
-                            <p>Prioritized from current resource readiness.</p>
-                        </div>
-                    </div>
+        {{/if}}
+    </div>
 
-                    <div class="fleet-ops-control-hub-action-list">
-                        {{#each this.actions as |action|}}
-                            {{#if action.route}}
-                                <LinkTo @route={{action.route}} @query={{action.query}} class="fleet-ops-control-hub-action fleet-ops-control-hub-tone-{{action.tone}}">
-                                    <FaIcon @icon={{action.icon}} />
-                                    <span>
-                                        <strong>{{action.label}}</strong>
-                                        <small>{{action.description}}</small>
-                                    </span>
-                                </LinkTo>
-                            {{else}}
-                                <div class="fleet-ops-control-hub-action fleet-ops-control-hub-tone-{{action.tone}}">
-                                    <FaIcon @icon={{action.icon}} />
-                                    <span>
-                                        <strong>{{action.label}}</strong>
-                                        <small>{{action.description}}</small>
-                                    </span>
-                                </div>
-                            {{/if}}
-                        {{/each}}
+    {{#unless (eq this.view "agenda")}}
+        <div class="fleet-ops-radar-footer" data-test-radar-footer>
+            <Radar::KeyboardHints />
+            <div class="fleet-ops-radar-footer-meta">
+                {{#if this.items.length}}
+                    <span data-test-radar-showing>{{t "radar.showing" count=this.items.length total=this.meta.total}}</span>
+                {{/if}}
+                {{#if (gt this.meta.pages 1)}}
+                    <div class="fleet-ops-radar-paging">
+                        <Button @size="xs" @icon="chevron-left" @disabled={{eq this.meta.page 1}} @onClick={{fn this.setPage this.previousPage}} />
+                        <span>{{this.meta.page}} / {{this.meta.pages}}</span>
+                        <Button @size="xs" @icon="chevron-right" @disabled={{eq this.meta.page this.meta.pages}} @onClick={{fn this.setPage this.nextPage}} />
                     </div>
-                </div>
+                {{/if}}
+            </div>
+        </div>
+    {{/unless}}
 
-                <div class="fleet-ops-control-hub-doc-note">
-                    <div class="fleet-ops-control-hub-doc-note-heading">
-                        <FaIcon @icon="lightbulb" />
-                        <span>Guides</span>
-                    </div>
-                    <p class="fleet-ops-control-hub-doc-note-copy">Read the guide before changing resource setup.</p>
-                    <div class="fleet-ops-control-hub-doc-grid">
-                        {{#each this.docs as |doc|}}
-                            <button type="button" class="fleet-ops-control-hub-doc-link" {{on "click" (fn this.openDocs doc)}}>
-                                <FaIcon @icon={{doc.icon}} />
-                                <span class="fleet-ops-control-hub-doc-copy">
-                                    <strong>Read the guide on {{doc.label}}</strong>
-                                    <small>{{doc.description}}</small>
-                                </span>
-                            </button>
-                        {{/each}}
-                    </div>
-                </div>
-            </aside>
-        </section>
-    </div>
+    <Radar::ItemDrawer @item={{this.drawerItem}} @snoozePresets={{this.snoozePresets}} @onClose={{this.closeDrawer}} @onAct={{perform this.act}} @onOpenRecord={{this.openRecord}} />
+    <Radar::HandoverCard
+        @handover={{this.handover}}
+        @isLoading={{this.openHandover.isRunning}}
+        @isBusy={{this.reassignOrders.isRunning}}
+        @onClose={{this.closeHandover}}
+        @onReassign={{perform this.reassignOrders}}
+        @onExtend={{perform this.extendShift}}
+        @onSnooze={{perform this.snoozeHandover}}
+        @onOpenRecord={{this.openRecord}}
+    />
 </div>
 
 {{outlet}}

package/addon/templates/management/vehicles/index/details/inspections.hbs

@@ -0,0 +1,2 @@
+<Vehicle::Details::Inspections @resource={{@model}} @vehicle={{@model}} />
+{{outlet}}

package/addon/templates/operations/orders/index.hbs

@@ -82,6 +82,7 @@
                 <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                     <ModelSelect
                         @modelName="order-config"
+                        @selectedItemComponent={{component "select-option/order-config" compact=true}}
                         @selectedModel={{or this.orderConfig this.type}}
                         @placeholder={{t "order.fields.order-type-placeholder"}}
                         @triggerClass="form-select form-input order-board-type-filter"
@@ -92,10 +93,7 @@
                         @onChangeId={{fn (mut this.type)}}
                         as |orderConfig|
                     >
-                        <div class="text-sm">
-                            <div class="font-semibold normalize-in-trigger">{{orderConfig.name}}</div>
-                            <div class="hide-from-trigger">{{n-a orderConfig.description}}</div>
-                        </div>
+                        <SelectOption::OrderConfig @option={{orderConfig}} />
                     </ModelSelect>
                 </div>
             </div>

package/addon/utils/context-panel.js

@@ -0,0 +1,34 @@
+import { isArray } from '@ember/array';
+import { dasherize } from '@ember/string';
+
+/**
+ * Options every record context panel shares with its details route: the
+ * details route's 600px width, a header that sits flush on the tab list (the
+ * tab list draws the only rule), and tabs lined up with the header padding.
+ */
+export const PANEL_DEFAULTS = Object.freeze({
+    size: 'md',
+    headerClass: 'no-bottom-border',
+    tablistClass: 'pl-2',
+});
+
+/**
+ * The tabs other extensions registered for a details view that can render
+ * inside a context panel. Route-only tabs have nothing to render there, so
+ * they are left out, and every tab gets the key the panel switches tabs by.
+ */
+export function registeredPanelTabs(menuService, registry) {
+    const tabs = menuService?.getMenuItems?.(registry);
+
+    return (isArray(tabs) ? tabs : []).filter((tab) => tab && (tab.component || tab.render)).map((tab) => ({ ...tab, key: tab.key ?? tab.id ?? dasherize(tab.label ?? tab.title ?? 'tab') }));
+}
+
+/**
+ * Close every open context panel, then run the next step — how a panel's
+ * edit button swaps the details panel for the form panel.
+ */
+export async function closePanelsThen(resourceContextPanel, next) {
+    await resourceContextPanel?.closeAll?.();
+
+    return next();
+}

package/addon/utils/device-table-columns.js

@@ -1,3 +1,6 @@
+import { buildIdentityStub } from './identity-cell-resource';
+import relationValue from './relation-value';
+
 const connectionStatusOptions = [
     { label: 'Online', value: 'online' },
     { label: 'Recently Offline', value: 'recently_offline' },
@@ -31,14 +34,13 @@ export default function buildDeviceTableColumns(controller, options = {}) {
             valuePath: 'displayName',
             cellComponent: 'cell/device-identity',
             action: viewDevice,
-            compact: true,
             permission: 'fleet-ops view device',
             resizable: true,
             sortable: true,
             filterable: true,
             filterParam: 'query',
             filterComponent: 'filter/string',
-            showStatus: showDeviceStatus,
+            showStatusDot: showDeviceStatus,
         },
         {
             label: 'Connection',
@@ -66,21 +68,8 @@ export default function buildDeviceTableColumns(controller, options = {}) {
     const vehicleColumn = {
         label: controller.intl?.t('device.attachment.asset') ?? 'Attached asset',
         valuePath: 'attached_to_name',
-        cellComponent: 'cell/vehicle-identity',
-        action: async (vehicle) => {
-            const resolvedVehicle = vehicle?.loadResource ? ((await vehicle.loadResource()) ?? vehicle) : vehicle;
-
-            const type = `${vehicle?.attachable_type ?? resolvedVehicle?.constructor?.modelName ?? ''}`.toLowerCase();
-            if (type.includes('trailer') && resolvedVehicle?.id && controller.trailerActions?.transition?.view) {
-                return controller.trailerActions.transition.view(resolvedVehicle);
-            }
-            if (resolvedVehicle?.id && controller.vehicleActions?.panel?.view) {
-                return controller.vehicleActions.panel.view(resolvedVehicle);
-            }
-        },
-        compact: true,
+        cellComponent: 'cell/attachable-identity',
         permission: 'fleet-ops view vehicle',
-        showStatusBadge: true,
         emptyText: '-',
         resourcePath: (device) => {
             const attachableType = `${device?.attachable_type ?? ''}`.toLowerCase();
@@ -90,15 +79,13 @@ export default function buildDeviceTableColumns(controller, options = {}) {
             }
 
             return (
-                device.attachable ?? {
-                    id: device.attachable_uuid,
-                    displayName: device.attached_to_name,
-                    display_name: device.attached_to_name,
-                    name: device.attached_to_name,
-                    public_id: device.attachable_uuid,
-                    vehicle_number: device.plate_number ?? device.call_sign ?? device.vehicle_number ?? device.attachable_uuid,
-                    loadResource: () => controller.resolveAttachedVehicle?.(device),
-                }
+                relationValue(device, 'attachable') ??
+                buildIdentityStub(device, {
+                    type: attachableType.includes('trailer') ? 'trailer' : 'vehicle',
+                    nameKey: 'attached_to_name',
+                    load: () => controller.resolveAttachedVehicle?.(device),
+                    extra: { plate_number: device.plate_number ?? device.call_sign ?? null },
+                })
             );
         },
         resizable: true,
@@ -115,8 +102,8 @@ export default function buildDeviceTableColumns(controller, options = {}) {
         columns.push({
             label: 'Telematic Provider',
             valuePath: 'telematic_name',
-            cellComponent: 'cell/telematic-provider',
-            compact: true,
+            cellComponent: 'cell/telematic-identity',
+            resourcePath: (device) => relationValue(device, 'telematic') ?? buildIdentityStub(device, { type: 'telematic', load: () => device.get('telematic') }),
             action: controller.openTelematic,
             permission: 'fleet-ops view telematic',
             resizable: true,
@@ -170,6 +157,8 @@ export default function buildDeviceTableColumns(controller, options = {}) {
             filterParam: 'type',
             filterComponent: 'filter/multi-option',
             filterOptions: controller.deviceTypeOptions,
+            filterOptionLabel: 'label',
+            filterOptionValue: 'value',
         },
         {
             label: 'Serial Number',
@@ -192,6 +181,8 @@ export default function buildDeviceTableColumns(controller, options = {}) {
             filterParam: 'status',
             filterComponent: 'filter/multi-option',
             filterOptions: controller.deviceStatusOptions,
+            filterOptionLabel: 'label',
+            filterOptionValue: 'value',
         },
         {
             label: 'Attachment',