@fleetbase/fleetops-engine 0.6.51 → 0.6.53

package/addon/templates/management/contacts/customers.hbs

@@ -11,6 +11,20 @@
     @actionButtons={{this.actionButtons}}
     @bulkActions={{this.bulkActions}}
     @controller={{this}}
+    @emptyStateComponent={{component
+        "table/empty-state"
+        icon="user-group"
+        title="Add your first customer"
+        description="Customers give orders an owner, contact details, and account context for service history."
+        filteredTitle="No customers match your filters"
+        filteredDescription="Adjust the search or filters to find another customer."
+        primaryText="New customer"
+        primaryIcon="plus"
+        primaryAction=this.customerActions.transition.create
+        secondaryText="Import"
+        secondaryIcon="upload"
+        secondaryAction=this.customerActions.import
+    }}
     @withoutHeader={{true}}
 />
-{{outlet}}
+{{outlet}}

package/addon/templates/management/contacts/index.hbs

@@ -11,6 +11,24 @@
     @actionButtons={{this.actionButtons}}
     @bulkActions={{this.bulkActions}}
     @controller={{this}}
+    @emptyStateComponent={{component
+        "table/empty-state"
+        icon="address-book"
+        title="Add your first contact"
+        description="Contacts keep customer, vendor, and internal stakeholder details ready for orders and communication."
+        filteredTitle="No contacts match your filters"
+        filteredDescription="Adjust the search or filters to find another contact."
+        primaryText="New contact"
+        primaryIcon="plus"
+        primaryAction=this.contactActions.transition.create
+        secondaryText="Import"
+        secondaryIcon="upload"
+        secondaryAction=this.contactActions.import
+        docsSlug="fleet-ops/resources/contacts/overview"
+        docsTitle="Contacts guide"
+        docsText="Contacts guide"
+        docsSource="fleet-ops-empty-contacts"
+    }}
     @withoutHeader={{true}}
 />
-{{outlet}}
+{{outlet}}

package/addon/templates/management/drivers/index/details/activity.hbs

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

package/addon/templates/management/drivers/index.hbs

@@ -11,5 +11,23 @@
     @actionButtons={{this.actionButtons}}
     @bulkActions={{this.bulkActions}}
     @controller={{this}}
+    @emptyStateComponent={{component
+        "table/empty-state"
+        icon="id-card"
+        title="Add your first driver"
+        description="Drivers power dispatching, live fleet visibility, assignments, and delivery activity."
+        filteredTitle="No drivers match your search"
+        filteredDescription="Adjust the search or filters to find another driver."
+        primaryText="New driver"
+        primaryIcon="plus"
+        primaryAction=this.driverActions.transition.create
+        secondaryText="Import"
+        secondaryIcon="upload"
+        secondaryAction=this.driverActions.import
+        docsSlug="fleet-ops/resources/drivers/overview"
+        docsTitle="Drivers guide"
+        docsText="Driver guide"
+        docsSource="fleet-ops-empty-drivers"
+    }}
 />
-{{outlet}}
+{{outlet}}

package/addon/templates/management/fleets/index.hbs

@@ -11,5 +11,23 @@
     @actionButtons={{this.actionButtons}}
     @bulkActions={{this.bulkActions}}
     @controller={{this}}
+    @emptyStateComponent={{component
+        "table/empty-state"
+        icon="layer-group"
+        title="Create your first fleet"
+        description="Fleets help group vehicles and drivers for dispatching, reporting, and operational coverage."
+        filteredTitle="No fleets match your filters"
+        filteredDescription="Adjust the search or filters to find another fleet."
+        primaryText="New fleet"
+        primaryIcon="plus"
+        primaryAction=this.fleetActions.transition.create
+        secondaryText="Import"
+        secondaryIcon="upload"
+        secondaryAction=this.fleetActions.import
+        docsSlug="fleet-ops/resources/fleets/overview"
+        docsTitle="Fleets guide"
+        docsText="Fleet guide"
+        docsSource="fleet-ops-empty-fleets"
+    }}
 />
-{{outlet}}
+{{outlet}}

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

@@ -11,5 +11,23 @@
     @actionButtons={{this.actionButtons}}
     @bulkActions={{this.bulkActions}}
     @controller={{this}}
+    @emptyStateComponent={{component
+        "table/empty-state"
+        icon="gas-pump"
+        title="No fuel reports yet"
+        description="Create fuel reports to track vehicle fuel usage, cost, and supporting transaction records."
+        filteredTitle="No fuel reports match your filters"
+        filteredDescription="Adjust the search or filters to find another fuel report."
+        primaryText="New fuel report"
+        primaryIcon="plus"
+        primaryAction=this.fuelReportActions.transition.create
+        secondaryText="Import"
+        secondaryIcon="upload"
+        secondaryAction=this.fuelReportActions.import
+        docsSlug="fleet-ops/resources/fuel-reports/overview"
+        docsTitle="Fuel reports guide"
+        docsText="Fuel reports guide"
+        docsSource="fleet-ops-empty-fuel-reports"
+    }}
 />
-{{outlet}}
+{{outlet}}

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

@@ -0,0 +1,73 @@
+<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>
+            <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}} />
+            </div>
+        </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>
+                    <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>
+                </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>
+                </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>
+                </section>
+            </aside>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,58 @@
+<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}}
+            <Layout::Resource::Tabular
+                @resource="fuel-provider-transaction"
+                @title={{t "menu.fuel-transactions"}}
+                @searchQuery={{this.query}}
+                @data={{@model}}
+                @columns={{this.columns}}
+                @page={{this.page}}
+                @onPageChange={{fn (mut this.page)}}
+                @setupTable={{fn (mut this.table)}}
+                @actionButtons={{this.actionButtons}}
+                @bulkActions={{this.bulkActions}}
+                @controller={{this}}
+                @emptyStateComponent={{component
+                    "table/empty-state"
+                    icon="receipt"
+                    title="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."
+                    primaryText="Refresh"
+                    primaryIcon="refresh"
+                    primaryAction=this.refresh
+                    docsSlug="fleet-ops/resources/fuel-reports/overview"
+                    docsTitle="Fuel reports guide"
+                    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>
+{{outlet}}

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

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

package/addon/templates/management/index.hbs

@@ -1,77 +1,113 @@
-<div class="content">
-    <div class="row">
-        <div class="col-12 col-lg-3 col-xl-3">
-            <LinkTo
-                @route="dashboard.fleet-ops.management.vendors"
-                class="group hover:bg-flb-blue p-4 cursor-pointer bg-white rounded max-w-xs w-full shadow-lg select-none overflow-hidden mx-auto mb-6"
-            >
-                <p class="font-semibold text-lg mb-1 text-black group-hover:text-white">{{t "fleet-ops.management.vendors.index.title"}}</p>
-                <p class="text-grey-darker group-hover:text-white mb-2">{{t "fleet-ops.common.manage-message"}}</p>
-            </LinkTo>
+<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="col-12 col-lg-3 col-xl-3">
-            <LinkTo
-                @route="dashboard.fleet-ops.management.fleets"
-                class="group hover:bg-flb-blue p-4 cursor-pointer bg-white rounded max-w-xs w-full shadow-lg select-none overflow-hidden mx-auto mb-6"
-            >
-                <p class="font-semibold text-lg mb-1 text-black group-hover:text-white">{{t "fleet-ops.management.fleets.index.title"}}</p>
-                <p class="text-grey-darker group-hover:text-white mb-2">{{t "fleet-ops.common.manage-message"}}</p>
-            </LinkTo>
-        </div>
-        <div class="col-12 col-lg-3 col-xl-3">
-            <LinkTo
-                @route="dashboard.fleet-ops.management.drivers"
-                class="group hover:bg-flb-blue p-4 cursor-pointer bg-white rounded max-w-xs w-full shadow-lg select-none overflow-hidden mx-auto mb-6"
-            >
-                <p class="font-semibold text-lg mb-1 text-black group-hover:text-white">{{t "fleet-ops.management.drivers.index.title"}}</p>
-                <p class="text-grey-darker group-hover:text-white mb-2">{{t "fleet-ops.common.manage-message"}}</p>
-            </LinkTo>
-        </div>
-        <div class="col-12 col-lg-3 col-xl-3">
-            <LinkTo
-                @route="dashboard.fleet-ops.management.vehicles"
-                class="group hover:bg-flb-blue p-4 cursor-pointer bg-white rounded max-w-xs w-full shadow-lg select-none overflow-hidden mx-auto mb-6"
-            >
-                <p class="font-semibold text-lg mb-1 text-black group-hover:text-white">{{t "fleet-ops.management.vehicles.index.title"}}</p>
-                <p class="text-grey-darker group-hover:text-white mb-2">{{t "fleet-ops.common.manage-message"}}</p>
-            </LinkTo>
-        </div>
-        <div class="col-12 col-lg-3 col-xl-3">
-            <LinkTo
-                @route="dashboard.fleet-ops.management.places"
-                class="group hover:bg-flb-blue p-4 cursor-pointer bg-white rounded max-w-xs w-full shadow-lg select-none overflow-hidden mx-auto mb-6"
-            >
-                <p class="font-semibold text-lg mb-1 text-black group-hover:text-white">{{t "fleet-ops.management.places.index.title"}}</p>
-                <p class="text-grey-darker group-hover:text-white mb-2">{{t "fleet-ops.common.manage-message"}}</p>
-            </LinkTo>
-        </div>
-        <div class="col-12 col-lg-3 col-xl-3">
-            <LinkTo
-                @route="dashboard.fleet-ops.management.contacts."
-                class="group hover:bg-flb-blue p-4 cursor-pointer bg-white rounded max-w-xs w-full shadow-lg select-none overflow-hidden mx-auto mb-6"
-            >
-                <p class="font-semibold text-lg mb-1 text-black group-hover:text-white">{{t "fleet-ops.management.contacts.index.title"}}</p>
-                <p class="text-grey-darker group-hover:text-white mb-2">{{t "fleet-ops.common.manage-message"}}</p>
-            </LinkTo>
-        </div>
-        <div class="col-12 col-lg-3 col-xl-3">
-            <LinkTo
-                @route="dashboard.fleet-ops.management.issues"
-                class="group hover:bg-flb-blue p-4 cursor-pointer bg-white rounded max-w-xs w-full shadow-lg select-none overflow-hidden mx-auto mb-6"
-            >
-                <p class="font-semibold text-lg mb-1 text-black group-hover:text-white">{{t "fleet-ops.management.issues.index.title"}}</p>
-                <p class="text-grey-darker group-hover:text-white mb-2">{{t "fleet-ops.common.manage-message"}}</p>
-            </LinkTo>
-        </div>
-        <div class="col-12 col-lg-3 col-xl-3">
-            <LinkTo
-                @route="dashboard.fleet-ops.management.fuel-reports"
-                class="group hover:bg-flb-blue p-4 cursor-pointer bg-white rounded max-w-xs w-full shadow-lg select-none overflow-hidden mx-auto mb-6"
-            >
-                <p class="font-semibold text-lg mb-1 text-black group-hover:text-white">{{t "fleet-ops.management.fuel-reports.index.title"}}</p>
-                <p class="text-grey-darker group-hover:text-white mb-2">{{t "fleet-ops.common.manage-message"}}</p>
-            </LinkTo>
+        <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-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>
+
+        <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>
+
+                        <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>Prioritized from current resource readiness.</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 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>
 </div>
-{{outlet}}
+
+{{outlet}}

package/addon/templates/management/issues/index.hbs

@@ -11,5 +11,23 @@
     @actionButtons={{this.actionButtons}}
     @bulkActions={{this.bulkActions}}
     @controller={{this}}
+    @emptyStateComponent={{component
+        "table/empty-state"
+        icon="triangle-exclamation"
+        title="No issues reported"
+        description="Track vehicle, driver, facility, and service issues here so follow-up work stays visible."
+        filteredTitle="No issues match your filters"
+        filteredDescription="Clear the search or filters to review other reported issues."
+        primaryText="New issue"
+        primaryIcon="plus"
+        primaryAction=this.issueActions.transition.create
+        secondaryText="Import"
+        secondaryIcon="upload"
+        secondaryAction=this.issueActions.import
+        docsSlug="fleet-ops/resources/issues/overview"
+        docsTitle="Issues guide"
+        docsText="Issues guide"
+        docsSource="fleet-ops-empty-issues"
+    }}
 />
-{{outlet}}
+{{outlet}}

package/addon/templates/management/places/index.hbs

@@ -10,5 +10,23 @@
     @actionButtons={{this.actionButtons}}
     @bulkActions={{this.bulkActions}}
     @controller={{this}}
+    @emptyStateComponent={{component
+        "table/empty-state"
+        icon="location-dot"
+        title="Add your first place"
+        description="Places keep frequent pickup, dropoff, facility, and service locations ready for orders and routing."
+        filteredTitle="No places match your filters"
+        filteredDescription="Adjust the search or filters to find another saved location."
+        primaryText="New place"
+        primaryIcon="plus"
+        primaryAction=this.placeActions.transition.create
+        secondaryText="Import"
+        secondaryIcon="upload"
+        secondaryAction=this.placeActions.import
+        docsSlug="fleet-ops/resources/places/overview"
+        docsTitle="Places guide"
+        docsText="Places guide"
+        docsSource="fleet-ops-empty-places"
+    }}
 />
-{{outlet}}
+{{outlet}}

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

@@ -12,6 +12,24 @@
         @actionButtons={{this.actionButtons}}
         @bulkActions={{this.bulkActions}}
         @controller={{this}}
+        @emptyStateComponent={{component
+            "table/empty-state"
+            icon="truck"
+            title="Add your first vehicle"
+            description="Vehicles connect assignments, live tracking, fleet capacity, maintenance, and compliance history."
+            filteredTitle="No vehicles match your filters"
+            filteredDescription="Adjust the search or filters to find another vehicle."
+            primaryText="New vehicle"
+            primaryIcon="plus"
+            primaryAction=this.vehicleActions.transition.create
+            secondaryText="Import"
+            secondaryIcon="upload"
+            secondaryAction=this.vehicleActions.import
+            docsSlug="fleet-ops/resources/vehicles/overview"
+            docsTitle="Vehicles guide"
+            docsText="Vehicle guide"
+            docsSource="fleet-ops-empty-vehicles"
+        }}
     />
 {{else}}
     <Layout::Section::Header @title={{t "resource.vehicles"}} @actionsWrapperClass="space-x-1">
@@ -46,4 +64,4 @@
         </Layout::Resource::CardsGrid>
     </Layout::Section::Body>
 {{/if}}
-{{outlet}}
+{{outlet}}

package/addon/templates/management/vendors/index.hbs

@@ -11,5 +11,23 @@
     @actionButtons={{this.actionButtons}}
     @bulkActions={{this.bulkActions}}
     @controller={{this}}
+    @emptyStateComponent={{component
+        "table/empty-state"
+        icon="building"
+        title="Add your first vendor"
+        description="Vendors let your team manage external carriers, service providers, and operational partners."
+        filteredTitle="No vendors match your filters"
+        filteredDescription="Adjust the search or filters to find another vendor."
+        primaryText="New vendor"
+        primaryIcon="plus"
+        primaryAction=this.vendorActions.transition.create
+        secondaryText="Import"
+        secondaryIcon="upload"
+        secondaryAction=this.vendorActions.import
+        docsSlug="fleet-ops/resources/vendors/overview"
+        docsTitle="Vendors guide"
+        docsText="Vendor guide"
+        docsSource="fleet-ops-empty-vendors"
+    }}
 />
-{{outlet}}
+{{outlet}}

package/addon/templates/management/vendors/integrated.hbs

@@ -11,5 +11,17 @@
     @actionButtons={{this.actionButtons}}
     @bulkActions={{this.bulkActions}}
     @controller={{this}}
+    @emptyStateComponent={{component
+        "table/empty-state"
+        icon="plug"
+        title="No integrated vendors yet"
+        description="Integrated vendor records appear here after vendor integrations are connected and synchronized."
+        filteredTitle="No integrated vendors match your filters"
+        filteredDescription="Adjust the search or filters to find another integrated vendor."
+        docsSlug="fleet-ops/resources/vendors/integrated-vendors"
+        docsTitle="Integrated vendors guide"
+        docsText="Integrated vendors guide"
+        docsSource="fleet-ops-empty-integrated-vendors"
+    }}
 />
-{{outlet}}
+{{outlet}}

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

@@ -47,6 +47,24 @@
         @filterPickerGridCols="3"
         @filterPickerWidth="700px"
         @controller={{this}}
+        @emptyStateComponent={{component
+            "table/empty-state"
+            icon="paper-plane"
+            title="Create your first order"
+            description="Orders are the center of Fleet-Ops: plan routes, assign drivers and vehicles, track progress, and collect proof."
+            filteredTitle="No orders match your filters"
+            filteredDescription="Adjust the search, bulk search, or filters to find another order."
+            primaryText="New order"
+            primaryIcon="plus"
+            primaryAction=this.orderActions.transition.create
+            secondaryText="Import"
+            secondaryIcon="upload"
+            secondaryAction=this.importOrders
+            docsSlug="fleet-ops/operations/orders/overview"
+            docsTitle="Orders guide"
+            docsText="Order guide"
+            docsSource="fleet-ops-empty-orders"
+        }}
         @tfootVerticalOffset="7"
         @tfootVerticalOffsetElements="#next-view-section-subheader,.next-table-wrapper > table > thead,.next-map-container-topbar"
     />
@@ -88,4 +106,4 @@
     </Layout::Section::Body>
 {{/if}}
 
-{{outlet}}
+{{outlet}}

package/addon/templates/operations/service-rates/index.hbs

@@ -10,5 +10,23 @@
     @actionButtons={{this.actionButtons}}
     @bulkActions={{this.bulkActions}}
     @controller={{this}}
+    @emptyStateComponent={{component
+        "table/empty-state"
+        icon="route"
+        title="Set up your first service rate"
+        description="Service rates define how Fleet-Ops prices routes, zones, distance, and other service rules."
+        filteredTitle="No service rates match your filters"
+        filteredDescription="Adjust the search or filters to find another service rate."
+        primaryText="New service rate"
+        primaryIcon="plus"
+        primaryAction=this.serviceRateActions.transition.create
+        secondaryText="Refresh"
+        secondaryIcon="refresh"
+        secondaryAction=this.serviceRateActions.refresh
+        docsSlug="fleet-ops/operations/service-rates/overview"
+        docsTitle="Service rates guide"
+        docsText="Service rates guide"
+        docsSource="fleet-ops-empty-service-rates"
+    }}
 />
-{{outlet}}
+{{outlet}}