@fleetbase/fleetops-engine 0.6.52 → 0.6.54

package/addon/templates/analytics/index.hbs

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

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

@@ -15,7 +15,7 @@
         "table/empty-state"
         icon="chart-line"
         title="No reports yet"
-        description="Create a FleetOps report to start tracking operational trends, utilization, and performance over time."
+        description="Create a Fleet-Ops report to start tracking operational trends, utilization, and performance over time."
         filteredTitle="No reports match your search"
         filteredDescription="Adjust the search or filters to find an existing report."
         primaryText="New report"
@@ -24,9 +24,9 @@
         secondaryText="Refresh"
         secondaryIcon="refresh"
         secondaryAction=this.reportActions.refresh
-        docsSlug="fleet-ops/analytics/overview"
-        docsTitle="Analytics guide"
-        docsText="Analytics guide"
+        docsSlug="fleet-ops/analytics/reports/overview"
+        docsTitle="Reports guide"
+        docsText="Reports guide"
         docsSource="fleet-ops-empty-reports"
     }}
 />

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

@@ -1 +1,85 @@
-{{outlet}}
+<div class="flex flex-col gap-3 p-3">
+    <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-xs text-gray-500 dark:text-gray-300">Warning signals, diagnostics, and unprocessed telemetry.</p>
+    </div>
+
+    <section class="grid grid-cols-1 gap-2 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-[82px] overflow-hidden rounded-md border bg-white shadow-sm dark:bg-gray-800">
+                <div class="flex h-full items-start justify-between gap-2 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-1 text-xl 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>
+
+    {{#if this.hasHealthyEventState}}
+        <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 for this device."
+            @primaryText="Refresh"
+            @primaryIcon="refresh"
+            @primaryAction={{this.refresh}}
+        />
+    {{/if}}
+
+    <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-3 py-2 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 text-gray-500 dark:text-gray-300">Filter by type, severity, processed state, and date.</p>
+            </div>
+            <div class="fleetops-provider-connections-actions flex min-w-0 flex-wrap items-center gap-1 lg:ml-auto lg:flex-nowrap lg:justify-end">
+                <Layout::Resource::TabularActions
+                    @title="Telemetry Events"
+                    @searchQuery={{this.events_query}}
+                    @onSearch={{perform this.searchTask}}
+                    @columns={{this.columns}}
+                    @page={{this.events_page}}
+                    @onPageChange={{fn (mut this.events_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"
+                    @filterPickerSize="sm"
+                    @columnPickerSize="sm"
+                />
+            </div>
+        </div>
+
+        <Layout::Resource::Tabular
+            @resource="device-event"
+            @title="Telemetry Events"
+            @data={{@model}}
+            @columns={{this.columns}}
+            @page={{this.events_page}}
+            @onPageChange={{fn (mut this.events_page)}}
+            @controller={{this}}
+            @withoutHeader={{true}}
+            @tableWrapperClass="no-table-extra-spacing"
+            @emptyStateComponent={{component
+                "table/empty-state"
+                variant="compact"
+                icon="bolt"
+                title="No telemetry events"
+                description="Events appear after this device reports 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
+            }}
+        />
+    </section>
+</div>

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

@@ -0,0 +1,73 @@
+<div class="flex flex-col gap-3 p-3">
+    <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-xs text-gray-500 dark:text-gray-300">Readings, thresholds, and reporting health for this device.</p>
+    </div>
+
+    <section class="grid grid-cols-1 gap-2 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-[82px] overflow-hidden rounded-md border bg-white shadow-sm dark:bg-gray-800">
+                <div class="flex h-full items-start justify-between gap-2 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-1 text-xl 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-3 py-2 dark:border-gray-700">
+            <div>
+                <h3 class="text-sm font-bold text-gray-900 dark:text-gray-100">Device Sensors</h3>
+                <p class="mt-1 text-xs text-gray-500 dark:text-gray-300">Filter by type, status, and last reading.</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="Device Sensors"
+                    @searchQuery={{this.sensors_query}}
+                    @onSearch={{perform this.searchTask}}
+                    @columns={{this.columns}}
+                    @page={{this.sensors_page}}
+                    @onPageChange={{fn (mut this.sensors_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"
+                    @filterPickerSize="sm"
+                    @columnPickerSize="sm"
+                />
+            </div>
+        </div>
+
+        <Layout::Resource::Tabular
+            @resource="sensor"
+            @title="Device Sensors"
+            @data={{@model}}
+            @columns={{this.columns}}
+            @page={{this.sensors_page}}
+            @onPageChange={{fn (mut this.sensors_page)}}
+            @controller={{this}}
+            @withoutHeader={{true}}
+            @tableWrapperClass="no-table-extra-spacing"
+            @emptyStateComponent={{component
+                "table/empty-state"
+                variant="compact"
+                icon="gauge-high"
+                title="No sensors connected"
+                description="Sensors appear here after provider telemetry links them to this device."
+                filteredTitle="No sensors match your filters"
+                filteredDescription="Adjust the search or filters to find another sensor."
+                primaryText="Refresh"
+                primaryIcon="refresh"
+                primaryAction=this.refresh
+            }}
+        />
+    </section>
+</div>

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

@@ -0,0 +1,84 @@
+<div class="flex flex-col gap-3 p-3">
+    <div class="flex items-start justify-between gap-3">
+        <div class="min-w-0">
+            <h2 class="text-base font-bold text-gray-900 dark:text-gray-100">Vehicle Attachment</h2>
+            <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-300">Fleet context for telemetry from this device.</p>
+        </div>
+
+        {{#if this.hasVehicle}}
+            <div class="flex flex-nowrap items-center gap-2 whitespace-nowrap">
+                {{#if this.vehicle.id}}
+                    <Button @icon="eye" @text="Open Vehicle" @size="xs" @onClick={{this.openVehicle}} />
+                {{/if}}
+                <Button @icon="shuffle" @text="Change Vehicle" @size="xs" @onClick={{this.attachToVehicle}} />
+                <Button @icon="unlink" @text="Detach" @size="xs" @type="danger" @onClick={{this.detachFromVehicle}} />
+            </div>
+        {{/if}}
+    </div>
+
+    {{#if this.hasVehicle}}
+        <section class="overflow-hidden rounded-md border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
+            <div class="flex gap-3 p-3">
+                <Image
+                    src={{this.vehiclePhotoUrl}}
+                    @fallbackSrc={{config "defaultValues.placeholderImage"}}
+                    alt={{this.vehicleName}}
+                    class="h-20 w-20 flex-shrink-0 rounded-md object-cover shadow-sm"
+                />
+
+                <div class="min-w-0 flex-1">
+                    <div class="flex flex-wrap items-center gap-2">
+                        <h3 class="truncate text-base font-bold text-gray-900 dark:text-gray-100">{{this.vehicleName}}</h3>
+                        {{#if this.vehicleStatus}}
+                            <Badge @status={{this.vehicleStatus}}>{{smart-humanize this.vehicleStatus}}</Badge>
+                        {{/if}}
+                    </div>
+
+                    <div class="mt-1 grid grid-cols-1 gap-2 text-xs text-gray-500 dark:text-gray-300 sm:grid-cols-2 lg:grid-cols-4">
+                        <div>
+                            <div class="font-semibold uppercase text-gray-400 dark:text-gray-500">Plate</div>
+                            <div class="truncate text-gray-800 dark:text-gray-100">{{n-a this.plateNumber}}</div>
+                        </div>
+                        <div>
+                            <div class="font-semibold uppercase text-gray-400 dark:text-gray-500">VIN</div>
+                            <div class="truncate text-gray-800 dark:text-gray-100">{{n-a this.vin}}</div>
+                        </div>
+                        <div>
+                            <div class="font-semibold uppercase text-gray-400 dark:text-gray-500">Call Sign</div>
+                            <div class="truncate text-gray-800 dark:text-gray-100">{{n-a this.callSign}}</div>
+                        </div>
+                        <div>
+                            <div class="font-semibold uppercase text-gray-400 dark:text-gray-500">Driver</div>
+                            <div class="truncate text-gray-800 dark:text-gray-100">{{n-a this.vehicleDriverName}}</div>
+                        </div>
+                    </div>
+
+                    <div class="mt-3 grid grid-cols-1 gap-2 text-xs text-gray-500 dark:text-gray-300 sm:grid-cols-3">
+                        <div>
+                            <div class="font-semibold uppercase text-gray-400 dark:text-gray-500">Vehicle</div>
+                            <div class="truncate text-gray-800 dark:text-gray-100">{{n-a this.yearMakeModel}}</div>
+                        </div>
+                        <div>
+                            <div class="font-semibold uppercase text-gray-400 dark:text-gray-500">Attached Device</div>
+                            <div class="truncate text-gray-800 dark:text-gray-100">{{n-a this.device.displayName}}</div>
+                        </div>
+                        <div>
+                            <div class="font-semibold uppercase text-gray-400 dark:text-gray-500">Device Last Seen</div>
+                            <div class="truncate text-gray-800 dark:text-gray-100">{{n-a (format-date-fns this.device.last_online_at "dd MMM yyyy, HH:mm")}}</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    {{else}}
+        <Telematic::TabEmptyState
+            @tone="warning"
+            @icon="link-slash"
+            @title="No vehicle attached"
+            @message="Attach this device to a vehicle so telemetry has fleet context."
+            @primaryText="Attach Vehicle"
+            @primaryIcon="link"
+            @primaryAction={{this.attachToVehicle}}
+        />
+    {{/if}}
+</div>