@fleetbase/fleetops-engine 0.6.51 → 0.6.53

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

@@ -0,0 +1,101 @@
+<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">Event Review + Triage</h2>
+        <p class="text-sm text-gray-500 dark:text-gray-300">Review provider events, warning signals, and unprocessed telemetry for 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">Telemetry Events</h3>
+                <p class="mt-1 text-xs leading-5 text-gray-500 dark:text-gray-300">Filter events by severity, device, type, and processed state before opening details.</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="Telemetry Events"
+                    @searchQuery={{this.query}}
+                    @onSearch={{perform this.deviceEventActions.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}}
+            {{#if this.hasHealthyEventState}}
+                <div class="p-4 pb-0">
+                    <Telematic::TabEmptyState
+                        @tone="success"
+                        @icon="check"
+                        @title="No warning or unprocessed events"
+                        @message="Recent telemetry is reviewed and no warning-level events are currently visible in this connection."
+                        @primaryText="Refresh"
+                        @primaryIcon="refresh"
+                        @primaryAction={{this.refresh}}
+                    />
+                </div>
+            {{/if}}
+            <Layout::Resource::Tabular
+                @resource="device-event"
+                @title="Telemetry Events"
+                @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="bolt"
+                    title="No telemetry events"
+                    description="Events appear after synced devices report provider activity."
+                    filteredTitle="No events match your filters"
+                    filteredDescription="Adjust the search, severity, or date filters to review other events."
+                    primaryText="Refresh"
+                    primaryIcon="refresh"
+                    primaryAction=this.refresh
+                }}
+            />
+        {{/if}}
+    </section>
+</div>

package/addon/templates/connectivity/telematics/{index/details → details}/index.hbs

@@ -1,2 +1 @@
 <Telematic::Details @resource={{@model}} />
-<Spacer @height="200px" />

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

@@ -0,0 +1,69 @@
+<div class="flex flex-col gap-4 p-4 md:p-6">
+    <div class="flex flex-col gap-1 md:flex-row md:items-start md:justify-between">
+        <div>
+            <h2 class="text-base font-bold text-gray-900 dark:text-gray-100">Connection Logs</h2>
+            <p class="text-sm text-gray-500 dark:text-gray-300">Review connection tests, device sync outcomes, and saved audit activity for this provider connection.</p>
+        </div>
+        <Button @icon="refresh" @text="Refresh" @size="xs" @onClick={{this.refresh}} />
+    </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="border-b border-gray-200 px-4 py-3 dark:border-gray-700">
+            <h3 class="text-sm font-bold text-gray-900 dark:text-gray-100">Saved Activity</h3>
+            <p class="mt-1 text-xs leading-5 text-gray-500 dark:text-gray-300">Operational server logs are not shown here; this view only includes persisted audit and sync/test summary data.</p>
+        </div>
+
+        {{#if this.hasLogs}}
+            <div class="divide-y divide-gray-100 dark:divide-gray-700">
+                {{#each this.logs as |log|}}
+                    <article class="flex flex-col gap-3 px-4 py-3 md:flex-row md:items-start md:justify-between">
+                        <div class="flex min-w-0 items-start gap-3">
+                            <div class="mt-0.5 flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-md bg-gray-100 text-gray-600 dark:bg-gray-900 dark:text-gray-300">
+                                <FaIcon @icon={{or log.icon "circle-info"}} />
+                            </div>
+                            <div class="min-w-0">
+                                <div class="flex flex-wrap items-center gap-2">
+                                    <h4 class="text-sm font-bold text-gray-900 dark:text-gray-100">{{log.label}}</h4>
+                                    <Badge @status={{or log.status "default"}} @hideStatusDot={{true}}>{{or log.status "log"}}</Badge>
+                                </div>
+                                <p class="mt-1 text-sm leading-5 text-gray-500 dark:text-gray-300">{{log.description}}</p>
+                                {{#if log.metadata.job_id}}
+                                    <div class="mt-2 font-mono text-[11px] text-gray-400 dark:text-gray-500">Job {{log.metadata.job_id}}</div>
+                                {{/if}}
+                            </div>
+                        </div>
+                        <time class="flex-shrink-0 text-xs text-gray-400 dark:text-gray-500">{{n-a (format-date-fns log.created_at "dd MMM yyyy, HH:mm")}}</time>
+                    </article>
+                {{/each}}
+            </div>
+        {{else}}
+            <div class="p-4">
+                <Telematic::TabEmptyState
+                    @tone="info"
+                    @icon="list"
+                    @title="No saved logs yet"
+                    @message="Run a connection test or sync devices to create persisted log entries for this provider connection."
+                    @primaryText="Refresh"
+                    @primaryIcon="refresh"
+                    @primaryAction={{this.refresh}}
+                />
+            </div>
+        {{/if}}
+    </section>
+</div>

package/addon/templates/connectivity/telematics/details/sensors.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">Sensor Inventory + Health</h2>
+        <p class="text-sm text-gray-500 dark:text-gray-300">Review sensor readings discovered from synced devices and identify sensors that are not reporting.</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">Sensor Readings</h3>
+                <p class="mt-1 text-xs leading-5 text-gray-500 dark:text-gray-300">Filter by type, device, and reporting status to understand what telemetry this connection is producing.</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="Sensor Readings"
+                    @searchQuery={{this.query}}
+                    @onSearch={{perform this.sensorActions.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="sensor"
+                @title="Sensor Readings"
+                @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="satellite-dish"
+                    title="No sensor readings"
+                    description="Sensor readings appear after devices sync telemetry from this provider."
+                    filteredTitle="No readings match your filters"
+                    filteredDescription="Adjust the search or filters to find other sensor readings."
+                    primaryText="Refresh"
+                    primaryIcon="refresh"
+                    primaryAction=this.refresh
+                }}
+            />
+        {{/if}}
+    </section>
+</div>

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

@@ -0,0 +1,53 @@
+<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">
+                    <Image src={{@model.provider_descriptor.icon}} class="mt-1 h-10 w-10 rounded" />
+                    <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_descriptor.label @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_descriptor.label}}
+                            {{#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>Connection test: {{this.connectionTestLabel}}</span>
+                            <span>Last test: {{n-a (format-date-fns @model.meta.last_connection_test "dd MMM HH:mm")}}</span>
+                            <span>Last sync: {{n-a (format-date-fns this.lastSyncAt "dd MMM HH:mm")}}</span>
+                            <span>Devices: {{n-a @model.meta.last_sync_total}}</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="flex flex-shrink-0 flex-nowrap items-center gap-2 whitespace-nowrap">
+                    <Button @icon="arrow-left" @text="Back" @size="xs" @onClick={{transition-to "connectivity.telematics.index"}} />
+                    <Button @icon="plug" @text="Test" @size="xs" @onClick={{this.openConnectionTestDialog}} />
+                    <Button @icon="satellite-dish" @text="Sync Devices" @type="primary" @size="xs" @isLoading={{this.discoverDevices.isRunning}} @onClick={{perform this.discoverDevices}} />
+                    <Button @icon="cog" @text="Settings" @size="xs" @onClick={{transition-to "connectivity.telematics.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="Telematic connection 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/telematics/edit.hbs

@@ -0,0 +1,27 @@
+<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">Connection 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, webhook configuration, and hardware identity for this provider connection.</p>
+            </div>
+            <div class="flex items-center gap-2">
+                <Button @icon="plug" @text="Test" @size="sm" @onClick={{this.openConnectionTestDialog}} />
+                <Button @icon="eye" @text="View" @size="sm" @onClick={{this.view}} />
+                <Button @icon="times" @text="Cancel" @size="sm" @onClick={{this.cancel}} />
+            </div>
+        </div>
+    </section>
+
+    <Telematic::Settings
+        @resource={{@model}}
+        @controller={{this}}
+        @saveLabel="Save Changes"
+        @savingLabel="Saving changes"
+        @footerHelp="Changes affect provider sync, webhook ingestion, and device discovery."
+        @isSaving={{this.save.isRunning}}
+        @onCancel={{this.cancel}}
+        @onSave={{perform this.save @model}}
+    />
+</div>

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

@@ -1,14 +1,12 @@
-<Layout::Resource::Tabular
-    @resource="telematic"
-    @title={{t "resource.telematics"}}
-    @searchQuery={{this.query}}
-    @onSearch={{perform this.telematicActions.controllerSearchTask this}}
-    @data={{@model}}
+<Telematic::Hub
+    @integrations={{@model}}
+    @providers={{this.providers}}
+    @providersLoading={{this.loadProviders.isRunning}}
     @columns={{this.columns}}
     @page={{this.page}}
     @onPageChange={{fn (mut this.page)}}
-    @actionButtons={{this.actionButtons}}
     @bulkActions={{this.bulkActions}}
     @controller={{this}}
+    @searchQuery={{this.query}}
+    @onSearch={{perform this.telematicActions.controllerSearchTask this}}
 />
-{{outlet}}

package/addon/templates/connectivity/telematics/new.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>
+                <div class="text-xs font-semibold uppercase text-gray-400 dark:text-gray-500">Connectivity setup</div>
+                <h1 class="text-lg font-bold text-gray-900 dark:text-gray-100">Connect Provider</h1>
+                <p class="mt-1 text-sm text-gray-500 dark:text-gray-300">Create a provider connection, test credentials, and prepare device sync.</p>
+            </div>
+            <Button @icon="times" @text="Cancel" @size="sm" @onClick={{transition-to "connectivity.telematics.index"}} />
+        </div>
+    </section>
+
+    <Telematic::Form
+        @resource={{this.telematic}}
+        @controller={{this}}
+        @initialProviderKey={{this.setupProvider}}
+        @saveLabel="Create Connection"
+        @savingLabel="Creating connection"
+        @footerHelp="Save the connection, then open it to sync devices and attach them to vehicles."
+        @isSaving={{this.save.isRunning}}
+        @onCancel={{this.cancel}}
+        @onSave={{perform this.save this.telematic}}
+    />
+</div>

package/addon/templates/maintenance/equipment/index.hbs

@@ -12,6 +12,24 @@
         @actionButtons={{this.actionButtons}}
         @bulkActions={{this.bulkActions}}
         @controller={{this}}
+        @emptyStateComponent={{component
+            "table/empty-state"
+            icon="toolbox"
+            title="Add your first equipment item"
+            description="Equipment records help track assigned assets, condition, service history, and operational readiness."
+            filteredTitle="No equipment matches your filters"
+            filteredDescription="Adjust the search or filters to find another equipment item."
+            primaryText="New equipment"
+            primaryIcon="plus"
+            primaryAction=this.equipmentActions.transition.create
+            secondaryText="Import"
+            secondaryIcon="upload"
+            secondaryAction=this.equipmentActions.import
+            docsSlug="fleet-ops/maintenance/equipment/overview"
+            docsTitle="Equipment guide"
+            docsText="Equipment guide"
+            docsSource="fleet-ops-empty-equipment"
+        }}
     />
 {{else}}
     <Layout::Section::Header @title={{t "resource.equipment"}} @actionsWrapperClass="space-x-1">
@@ -46,4 +64,4 @@
         </Layout::Resource::CardsGrid>
     </Layout::Section::Body>
 {{/if}}
-{{outlet}}
+{{outlet}}

package/addon/templates/maintenance/index.hbs

@@ -0,0 +1,113 @@
+<div class="fleet-ops-control-hub" data-test-fleet-ops-maintenance-hub>
+    <section class="fleet-ops-control-hub-header">
+        <div class="fleet-ops-control-hub-header-copy">
+            <div class="fleet-ops-control-hub-eyebrow">Maintenance</div>
+            <h1 class="fleet-ops-control-hub-title">Maintenance Hub</h1>
+            <p class="fleet-ops-control-hub-subtitle">Plan recurring service, coordinate work orders, and keep assets ready for daily operations.</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-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-maintenance-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>Open {{kpi.label}}</span>
+                            <FaIcon @icon="arrow-right" />
+                        </div>
+                    </div>
+                    <div class="fleet-ops-control-hub-kpi-icon"><FaIcon @icon={{kpi.icon}} /></div>
+                </LinkTo>
+            {{/each}}
+        </section>
+
+        <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-maintenance-section={{section.key}}>
+                        <div class="fleet-ops-control-hub-panel-header">
+                            <div>
+                                <h2>{{section.title}}</h2>
+                                <p>{{section.description}}</p>
+                            </div>
+                        </div>
+
+                        <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}}
+            </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>Signals from schedules, work orders, parts, and equipment.</p>
+                        </div>
+                    </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}}
+                    </div>
+                </div>
+
+                <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 maintenance workflows.</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>
+</div>
+
+{{outlet}}

package/addon/templates/maintenance/maintenances/index.hbs

@@ -10,5 +10,19 @@
     @actionButtons={{this.actionButtons}}
     @bulkActions={{this.bulkActions}}
     @controller={{this}}
+    @emptyStateComponent={{component
+        "table/empty-state"
+        icon="screwdriver-wrench"
+        title="No maintenance records yet"
+        description="Log maintenance events to keep service history, costs, and asset readiness visible."
+        filteredTitle="No maintenance records match your filters"
+        filteredDescription="Adjust the search or filters to find another maintenance record."
+        primaryText="New maintenance"
+        primaryIcon="plus"
+        primaryAction=this.maintenanceActions.transition.create
+        secondaryText="Import"
+        secondaryIcon="upload"
+        secondaryAction=this.maintenanceActions.import
+    }}
 />
-{{outlet}}
+{{outlet}}

package/addon/templates/maintenance/parts/index.hbs

@@ -12,6 +12,24 @@
         @actionButtons={{this.actionButtons}}
         @bulkActions={{this.bulkActions}}
         @controller={{this}}
+        @emptyStateComponent={{component
+            "table/empty-state"
+            icon="gears"
+            title="Add your first part"
+            description="Parts keep replacement inventory and compatibility details ready for maintenance work."
+            filteredTitle="No parts match your filters"
+            filteredDescription="Adjust the search or filters to find another part."
+            primaryText="New part"
+            primaryIcon="plus"
+            primaryAction=this.partActions.transition.create
+            secondaryText="Import"
+            secondaryIcon="upload"
+            secondaryAction=this.partActions.import
+            docsSlug="fleet-ops/maintenance/parts/overview"
+            docsTitle="Parts guide"
+            docsText="Parts guide"
+            docsSource="fleet-ops-empty-parts"
+        }}
     />
 {{else}}
     <Layout::Section::Header @title={{t "resource.parts"}} @actionsWrapperClass="space-x-1">
@@ -46,4 +64,4 @@
         </Layout::Resource::CardsGrid>
     </Layout::Section::Body>
 {{/if}}
-{{outlet}}
+{{outlet}}

package/addon/templates/maintenance/schedules/index.hbs

@@ -35,6 +35,24 @@
         @actionButtons={{this.actionButtons}}
         @bulkActions={{this.bulkActions}}
         @controller={{this}}
+        @emptyStateComponent={{component
+            "table/empty-state"
+            icon="calendar-check"
+            title="Create your first maintenance schedule"
+            description="Schedules help automate preventive work and keep service intervals visible before assets fall behind."
+            filteredTitle="No maintenance schedules match your filters"
+            filteredDescription="Adjust the search or filters to find another schedule."
+            primaryText="New schedule"
+            primaryIcon="plus"
+            primaryAction=this.maintenanceScheduleActions.transition.create
+            secondaryText="Import"
+            secondaryIcon="upload"
+            secondaryAction=this.maintenanceScheduleActions.import
+            docsSlug="fleet-ops/maintenance/schedules/overview"
+            docsTitle="Schedules guide"
+            docsText="Schedules guide"
+            docsSource="fleet-ops-empty-maintenance-schedules"
+        }}
     />
 {{/if}}
-{{outlet}}
+{{outlet}}

package/addon/templates/maintenance/work-orders/index.hbs

@@ -10,5 +10,23 @@
     @actionButtons={{this.actionButtons}}
     @bulkActions={{this.bulkActions}}
     @controller={{this}}
+    @emptyStateComponent={{component
+        "table/empty-state"
+        icon="clipboard-list"
+        title="No work orders yet"
+        description="Create work orders to assign maintenance tasks, track progress, and close out repairs."
+        filteredTitle="No work orders match your filters"
+        filteredDescription="Adjust the search or filters to find another work order."
+        primaryText="New work order"
+        primaryIcon="plus"
+        primaryAction=this.workOrderActions.transition.create
+        secondaryText="Import"
+        secondaryIcon="upload"
+        secondaryAction=this.workOrderActions.import
+        docsSlug="fleet-ops/maintenance/work-orders/overview"
+        docsTitle="Work orders guide"
+        docsText="Work orders guide"
+        docsSource="fleet-ops-empty-work-orders"
+    }}
 />
-{{outlet}}
+{{outlet}}