@fleetbase/fleetops-engine 0.6.55 → 0.6.57

package/addon/utils/leaflet-plugin-loader.js

@@ -79,7 +79,7 @@ function waitForLeafletGlobal({ timeoutMs = 8000 } = {}) {
 
             if (timeoutMs != null && Date.now() - startedAt >= timeoutMs) {
                 clearInterval(interval);
-                reject(new Error('[FleetOps Leaflet] Leaflet global is not available'));
+                reject(new Error('[Fleet-Ops Leaflet] Leaflet global is not available'));
             }
         }, 50);
     });
@@ -105,7 +105,7 @@ function appendStylesheet(href) {
 
 function loadScript(src, { timeoutMs = 8000, isReady = null } = {}) {
     if (typeof document === 'undefined') {
-        return Promise.reject(new Error('[FleetOps Leaflet] document is not available'));
+        return Promise.reject(new Error('[Fleet-Ops Leaflet] document is not available'));
     }
 
     const existing = findAssetElement('script', 'src', src);
@@ -137,7 +137,7 @@ function loadScript(src, { timeoutMs = 8000, isReady = null } = {}) {
 
         const onError = () => {
             cleanup();
-            reject(new Error(`[FleetOps Leaflet] Failed to load ${src}`));
+            reject(new Error(`[Fleet-Ops Leaflet] Failed to load ${src}`));
         };
 
         script.addEventListener('load', onLoad);
@@ -146,7 +146,7 @@ function loadScript(src, { timeoutMs = 8000, isReady = null } = {}) {
         if (timeoutMs != null) {
             timeoutId = setTimeout(() => {
                 cleanup();
-                reject(new Error(`[FleetOps Leaflet] Timed out loading ${src}`));
+                reject(new Error(`[Fleet-Ops Leaflet] Timed out loading ${src}`));
             }, timeoutMs);
         }
 
@@ -202,7 +202,7 @@ export default function ensureLeafletPluginsReady(options = {}) {
         .then(() => {
             const readyLeaflet = normalizeLeafletGlobal();
             if (!hasLeafletPluginsReady()) {
-                throw new Error('[FleetOps Leaflet] Leaflet plugins loaded but required Draw/contextmenu APIs are missing');
+                throw new Error('[Fleet-Ops Leaflet] Leaflet plugins loaded but required Draw/contextmenu APIs are missing');
             }
 
             window.fleetopsLeafletPluginsLoaded = true;

package/addon/utils/map-drawer-dropdown-position.js

@@ -1,17 +1,15 @@
 export default function calculateMapDrawerDropdownPosition(trigger, content) {
-    const dropdownRoot = trigger?.closest?.('.ember-basic-dropdown');
     const drawerPanel = trigger?.closest?.('.next-drawer-panel');
 
-    if (!trigger || !dropdownRoot) {
+    if (!trigger) {
         return { style: {} };
     }
 
     const triggerRect = trigger.getBoundingClientRect();
-    const rootRect = dropdownRoot.getBoundingClientRect();
     const drawerRect = drawerPanel?.getBoundingClientRect?.();
     const contentRect = content?.getBoundingClientRect?.();
     const contentWidth = contentRect?.width || 224;
-    // const contentHeight = contentRect?.height || 240;
+    const contentHeight = contentRect?.height || 240;
     const gap = 6;
 
     const viewportRect = {
@@ -21,21 +19,21 @@ export default function calculateMapDrawerDropdownPosition(trigger, content) {
         left: 0,
     };
     const boundaryRect = drawerRect ?? viewportRect;
-    const minLeft = boundaryRect.left - rootRect.left + gap;
-    const maxLeft = boundaryRect.right - rootRect.left - contentWidth - gap;
-    // const minTop = boundaryRect.top - rootRect.top + gap;
-    // const maxTop = boundaryRect.bottom - rootRect.top - contentHeight - gap;
+    const minLeft = boundaryRect.left + gap;
+    const maxLeft = boundaryRect.right - contentWidth - gap;
+    const minTop = boundaryRect.top;
+    const maxTop = boundaryRect.bottom - contentHeight + 8;
 
-    const preferredLeft = triggerRect.left - rootRect.left - contentWidth - gap;
-    // const preferredTop = triggerRect.top - rootRect.top;
+    const preferredLeft = triggerRect.left - contentWidth - gap;
+    const preferredTop = triggerRect.top;
     const left = clamp(preferredLeft, minLeft, Math.max(minLeft, maxLeft));
-    const top = 0; //clamp(preferredTop, minTop, Math.max(minTop, maxTop));
+    const top = clamp(preferredTop, minTop, Math.max(minTop, maxTop));
 
     return {
         style: {
             position: 'absolute',
-            left: `${left}px`,
-            top: `${top}px`,
+            left,
+            top,
             marginTop: '0px',
             zIndex: '10000',
         },

package/addon/utils/route-colors.js

@@ -2,7 +2,7 @@
  * Route Colors Utility
  *
  * Provides deterministic color assignment, color manipulation helpers,
- * and status-based route line styling for the FleetOps map visualization.
+ * and status-based route line styling for the Fleet-Ops map visualization.
  */
 
 /**

package/app/components/ai/create-order-preview.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/fleetops-engine/components/ai/create-order-preview';

package/app/components/ai/route-preview-map.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/fleetops-engine/components/ai/route-preview-map';

package/app/components/device-event/details.hbs

@@ -0,0 +1,192 @@
+<div class="flex flex-col gap-3 p-3" ...attributes>
+    <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 flex-col gap-3 p-3 lg:flex-row lg:items-start lg:justify-between">
+            <div class="min-w-0">
+                <div class="flex flex-wrap items-center gap-2">
+                    <h2 class="truncate text-base font-bold text-gray-900 dark:text-gray-100">{{smart-humanize this.eventType}}</h2>
+                    <Badge @status={{this.severity}} @hideStatusDot={{true}}>{{smart-humanize this.severity}}</Badge>
+                    <Badge @status={{this.processedStatus}} @hideStatusDot={{true}}>{{this.processedLabel}}</Badge>
+                </div>
+
+                <p class="mt-2 max-w-4xl text-sm leading-5 text-gray-700 dark:text-gray-200">{{n-a this.message}}</p>
+
+                <div class="mt-2 flex flex-wrap gap-2 text-xs text-gray-500 dark:text-gray-300">
+                    <span>Occurred: {{n-a (format-date-fns this.occurredAt "dd MMM yyyy, HH:mm")}}</span>
+                    <span>Processed: {{n-a (format-date-fns this.processedAt "dd MMM yyyy, HH:mm")}}</span>
+                    <span>Public ID: {{n-a @resource.public_id}}</span>
+                    <span>UUID: {{n-a @resource.id}}</span>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <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 truncate text-lg font-extrabold leading-none text-gray-900 dark:text-gray-50">{{n-a metric.value}}</div>
+                        {{#if metric.meta}}
+                            <div class="mt-1 truncate text-xs text-gray-500 dark:text-gray-300">{{metric.meta}}</div>
+                        {{/if}}
+                    </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="grid grid-cols-1 gap-3 xl:grid-cols-2">
+        <div 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-3 py-2 dark:border-gray-700">
+                <h3 class="text-sm font-bold text-gray-900 dark:text-gray-100">Event Details</h3>
+            </div>
+            <div class="grid grid-cols-1 gap-2 p-3 sm:grid-cols-2 lg:grid-cols-3">
+                <div class="field-info-container">
+                    <div class="field-name">Event Type</div>
+                    <div class="field-value">{{n-a (smart-humanize this.eventType)}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Severity</div>
+                    <div class="field-value"><Badge @status={{this.severity}}>{{smart-humanize this.severity}}</Badge></div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">State</div>
+                    <div class="field-value">{{n-a (smart-humanize @resource.state)}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Code</div>
+                    <div class="field-value">{{n-a @resource.code}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Reason</div>
+                    <div class="field-value">{{n-a @resource.reason}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Mileage</div>
+                    <div class="field-value">{{n-a @resource.mileage}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Age</div>
+                    <div class="field-value">{{#if this.ageMinutes}}{{this.ageMinutes}} minutes{{else}}{{n-a null}}{{/if}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Processing Delay</div>
+                    <div class="field-value">{{#if this.processingDelay}}{{this.processingDelay}} minutes{{else}}{{n-a null}}{{/if}}</div>
+                </div>
+                <div class="field-info-container sm:col-span-2 lg:col-span-3">
+                    <div class="field-name">Comment</div>
+                    <div class="field-value whitespace-pre-line">{{n-a @resource.comment}}</div>
+                </div>
+            </div>
+        </div>
+
+        <div 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-3 py-2 dark:border-gray-700">
+                <h3 class="text-sm font-bold text-gray-900 dark:text-gray-100">Device & Provider</h3>
+            </div>
+            <div class="grid grid-cols-1 gap-2 p-3 sm:grid-cols-2 lg:grid-cols-3">
+                <div class="field-info-container">
+                    <div class="field-name">Device</div>
+                    <div class="field-value">
+                        {{#if this.deviceRouteModel}}
+                            <button
+                                type="button"
+                                class="text-blue-600 hover:text-blue-700 hover:underline dark:text-blue-300 dark:hover:text-blue-200"
+                                data-test-device-event-device-link
+                                {{on "click" this.openDevice}}
+                            >
+                                {{n-a this.deviceName}}
+                            </button>
+                        {{else}}
+                            {{n-a this.deviceName}}
+                        {{/if}}
+                    </div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Device UUID</div>
+                    <div class="field-value">{{n-a @resource.device_uuid}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Device ID</div>
+                    <div class="field-value">{{n-a @resource.device_id}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">IMEI</div>
+                    <div class="field-value">{{n-a @resource.device_imei}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Serial Number</div>
+                    <div class="field-value">{{n-a @resource.device_serial_number}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">IDENT</div>
+                    <div class="field-value">{{n-a @resource.ident}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Provider</div>
+                    <div class="field-value">
+                        {{#if this.telematicRouteModel}}
+                            <button
+                                type="button"
+                                class="text-blue-600 hover:text-blue-700 hover:underline dark:text-blue-300 dark:hover:text-blue-200"
+                                data-test-device-event-telematic-link
+                                {{on "click" this.openTelematic}}
+                            >
+                                {{n-a this.providerLabel}}
+                            </button>
+                        {{else}}
+                            {{n-a this.providerLabel}}
+                        {{/if}}
+                    </div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Protocol</div>
+                    <div class="field-value">{{n-a @resource.protocol}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Telematic UUID</div>
+                    <div class="field-value">{{n-a @resource.telematic_uuid}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Device Status</div>
+                    <div class="field-value" data-test-device-event-device-status>
+                        {{#if this.deviceStatus}}
+                            <Badge @status={{this.deviceStatus}}>{{smart-humanize this.deviceStatus}}</Badge>
+                        {{else}}
+                            {{n-a null}}
+                        {{/if}}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="grid grid-cols-1 gap-3 xl:grid-cols-3">
+        <div 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-3 py-2 dark:border-gray-700">
+                <h3 class="text-sm font-bold text-gray-900 dark:text-gray-100">Payload</h3>
+            </div>
+            <pre class="max-h-80 overflow-auto bg-gray-900 p-3 text-[11px] leading-5 text-gray-100">{{n-a this.payloadJson}}</pre>
+        </div>
+
+        <div 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-3 py-2 dark:border-gray-700">
+                <h3 class="text-sm font-bold text-gray-900 dark:text-gray-100">Data</h3>
+            </div>
+            <pre class="max-h-80 overflow-auto bg-gray-900 p-3 text-[11px] leading-5 text-gray-100">{{n-a this.dataJson}}</pre>
+        </div>
+
+        <div 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-3 py-2 dark:border-gray-700">
+                <h3 class="text-sm font-bold text-gray-900 dark:text-gray-100">Meta</h3>
+            </div>
+            <pre class="max-h-80 overflow-auto bg-gray-900 p-3 text-[11px] leading-5 text-gray-100">{{n-a this.metaJson}}</pre>
+        </div>
+    </section>
+
+    <CustomField::Yield @subject={{@resource}} @viewMode={{true}} @wrapperClass="bordered-top" />
+</div>

package/app/components/device-event/details.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/fleetops-engine/components/device-event/details';

package/app/components/fleet/hierarchy-tree.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/fleetops-engine/components/fleet/hierarchy-tree';

package/app/services/route-engine.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/fleetops-engine/services/route-engine';

package/composer.json

@@ -1,6 +1,6 @@
 {
     "name": "fleetbase/fleetops-api",
-    "version": "0.6.55",
+    "version": "0.6.57",
     "description": "Fleet & Transport Management Extension for Fleetbase",
     "keywords": [
         "fleetbase-extension",

package/extension.json

@@ -1,6 +1,6 @@
 {
     "name": "Fleet-Ops",
-    "version": "0.6.55",
+    "version": "0.6.57",
     "description": "Fleet & Transport Management Extension for Fleetbase",
     "repository": "https://github.com/fleetbase/fleetops",
     "license": "AGPL-3.0-or-later",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fleetbase/fleetops-engine",
-    "version": "0.6.55",
+    "version": "0.6.57",
     "description": "Fleet & Transport Management Extension for Fleetbase",
     "fleetbase": {
         "route": "fleet-ops"
@@ -25,7 +25,9 @@
     "scripts": {
         "build": "ember build --environment=production",
         "lint": "concurrently \"npm:lint:*(!fix)\" --names \"lint:\"",
-        "lint:css": "stylelint \"**/*.css\"",
+        "check:css-alpha": "node scripts/normalize-rgba-alpha.js --check",
+        "fix:css-alpha": "node scripts/normalize-rgba-alpha.js",
+        "lint:css": "npm run check:css-alpha && stylelint \"**/*.css\"",
         "lint:css:fix": "concurrently \"npm:lint:css -- --fix\"",
         "lint:fix": "concurrently \"npm:lint:*:fix\" --names \"fix:\"",
         "lint:hbs": "ember-template-lint .",
@@ -42,8 +44,8 @@
     },
     "dependencies": {
         "@babel/core": "^7.23.2",
-        "@fleetbase/ember-core": "^0.3.23",
-        "@fleetbase/ember-ui": "^0.3.37",
+        "@fleetbase/ember-core": "^0.3.24",
+        "@fleetbase/ember-ui": "^0.3.39",
         "@fleetbase/fleetops-data": "^0.1.40",
         "@fleetbase/leaflet-routing-machine": "^3.2.17",
         "@fortawesome/ember-fontawesome": "^2.0.0",

package/scripts/normalize-rgba-alpha.js

@@ -0,0 +1,90 @@
+#!/usr/bin/env node
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+
+const root = process.cwd();
+const checkOnly = process.argv.includes('--check');
+const cssRoot = path.join(root, 'addon');
+const rgbaPercentAlphaPattern = /rgba\(\s*([+-]?(?:\d*\.)?\d+)\s*,\s*([+-]?(?:\d*\.)?\d+)\s*,\s*([+-]?(?:\d*\.)?\d+)\s*,\s*([+-]?(?:\d*\.)?\d+)%\s*\)/g;
+
+function collectCssFiles(dir, files = []) {
+    if (!fs.existsSync(dir)) {
+        return files;
+    }
+
+    for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+        const fullPath = path.join(dir, entry.name);
+
+        if (entry.isDirectory()) {
+            collectCssFiles(fullPath, files);
+            continue;
+        }
+
+        if (entry.isFile() && entry.name.endsWith('.css')) {
+            files.push(fullPath);
+        }
+    }
+
+    return files;
+}
+
+function formatAlpha(percent) {
+    const alpha = Number(percent) / 100;
+    return Number.isInteger(alpha) ? String(alpha) : String(Number(alpha.toFixed(4)));
+}
+
+function lineForIndex(source, index) {
+    return source.slice(0, index).split('\n').length;
+}
+
+const changes = [];
+
+for (const filePath of collectCssFiles(cssRoot)) {
+    const source = fs.readFileSync(filePath, 'utf8');
+    const matches = [];
+
+    const next = source.replace(rgbaPercentAlphaPattern, (match, red, green, blue, alphaPercent, offset) => {
+        const replacement = `rgba(${red}, ${green}, ${blue}, ${formatAlpha(alphaPercent)})`;
+        matches.push({
+            line: lineForIndex(source, offset),
+            before: match,
+            after: replacement,
+        });
+        return replacement;
+    });
+
+    if (matches.length === 0) {
+        continue;
+    }
+
+    changes.push({
+        filePath,
+        matches,
+    });
+
+    if (!checkOnly) {
+        fs.writeFileSync(filePath, next);
+    }
+}
+
+if (changes.length === 0) {
+    console.log('No comma-form rgba() percent-alpha values found.');
+    process.exit(0);
+}
+
+for (const change of changes) {
+    const relativePath = path.relative(root, change.filePath);
+
+    for (const match of change.matches) {
+        console.log(`${relativePath}:${match.line} ${match.before} -> ${match.after}`);
+    }
+}
+
+if (checkOnly) {
+    console.error('\nRun `npm run fix:css-alpha` to normalize these values before production builds.');
+    process.exit(1);
+}
+
+console.log(`\nNormalized ${changes.reduce((total, change) => total + change.matches.length, 0)} rgba() alpha value(s).`);

package/server/migrations/2026_06_23_000001_delete_bad_afaqy_telematics_sensors.php

@@ -0,0 +1,34 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Support\Facades\DB;
+
+return new class extends Migration {
+    /**
+     * Delete malformed AFAQY telematics sensor rows created before sensor identities
+     * were normalized. AFAQY remains the source of truth and the next sync recreates
+     * one clean latest-state row per real provider sensor.
+     */
+    public function up(): void
+    {
+        DB::table('sensors')
+            ->whereIn('telematic_uuid', function ($query) {
+                $query->select('uuid')
+                    ->from('telematics')
+                    ->where('provider', 'afaqy');
+            })
+            ->delete();
+
+        DB::table('sensors')
+            ->whereRaw("LOWER(JSON_UNQUOTE(JSON_EXTRACT(meta, '$.provider'))) = ?", ['afaqy'])
+            ->delete();
+    }
+
+    /**
+     * This cleanup cannot restore deleted rows. Run an AFAQY sync to recreate
+     * current sensor state from the provider.
+     */
+    public function down(): void
+    {
+    }
+};

package/server/src/Exports/ContactExport.php

@@ -25,10 +25,13 @@ class ContactExport implements FromCollection, WithHeadings, WithMapping, WithCo
             $contact->public_id,
             $contact->internal_id,
             $contact->name,
-            $contact->address ? $contact->address->address : null,
+            $contact->title,
+            $contact->type,
+            $contact->address,
             $contact->email,
             $contact->phone,
             $contact->created_at,
+            $contact->updated_at,
         ];
     }
 
@@ -38,18 +41,22 @@ class ContactExport implements FromCollection, WithHeadings, WithMapping, WithCo
             'ID',
             'Internal ID',
             'Name',
+            'Title',
+            'Type',
             'Address',
             'Email',
             'Phone',
             'Date Created',
+            'Date Updated',
         ];
     }
 
     public function columnFormats(): array
     {
         return [
-            'F' => '+#',
-            'G' => NumberFormat::FORMAT_DATE_DDMMYYYY,
+            'H' => '+#',
+            'I' => NumberFormat::FORMAT_DATE_DDMMYYYY,
+            'J' => NumberFormat::FORMAT_DATE_DDMMYYYY,
         ];
     }
 
@@ -59,9 +66,9 @@ class ContactExport implements FromCollection, WithHeadings, WithMapping, WithCo
     public function collection()
     {
         if ($this->selections) {
-            return Contact::where('company_uuid', session('company'))->whereIn('uuid', $this->selections)->get();
+            return Contact::where('company_uuid', session('company'))->whereIn('uuid', $this->selections)->with(['place'])->get();
         }
 
-        return Contact::where('company_uuid', session('company'))->get();
+        return Contact::where('company_uuid', session('company'))->with(['place'])->get();
     }
 }

package/server/src/Exports/DeviceExport.php

@@ -0,0 +1,92 @@
+<?php
+
+namespace Fleetbase\FleetOps\Exports;
+
+use Fleetbase\FleetOps\Models\Device;
+use Maatwebsite\Excel\Concerns\FromCollection;
+use Maatwebsite\Excel\Concerns\ShouldAutoSize;
+use Maatwebsite\Excel\Concerns\WithColumnFormatting;
+use Maatwebsite\Excel\Concerns\WithHeadings;
+use Maatwebsite\Excel\Concerns\WithMapping;
+use PhpOffice\PhpSpreadsheet\Style\NumberFormat;
+
+class DeviceExport implements FromCollection, WithHeadings, WithMapping, WithColumnFormatting, ShouldAutoSize
+{
+    protected array $selections = [];
+
+    public function __construct(array $selections = [])
+    {
+        $this->selections = $selections;
+    }
+
+    public function map($device): array
+    {
+        return [
+            $device->public_id,
+            $device->name,
+            $device->device_id,
+            $device->connection_status,
+            $device->attached_to_name,
+            $device->telematic_name,
+            $device->sensors_count,
+            $device->last_online_at,
+            $device->provider,
+            $device->type,
+            $device->serial_number,
+            $device->imei,
+            $device->status,
+            $device->attachable_uuid ? 'Attached' : 'Unattached',
+            $this->yesNo($device->online),
+            $device->created_at,
+            $device->updated_at,
+        ];
+    }
+
+    public function headings(): array
+    {
+        return [
+            'ID',
+            'Name',
+            'Provider ID / IMEI',
+            'Connection Status',
+            'Attached To',
+            'Telematic Provider',
+            'Sensors Count',
+            'Last Seen',
+            'Provider',
+            'Type',
+            'Serial Number',
+            'IMEI',
+            'Status',
+            'Attachment State',
+            'Online',
+            'Date Created',
+            'Date Updated',
+        ];
+    }
+
+    public function columnFormats(): array
+    {
+        return [
+            'H' => NumberFormat::FORMAT_DATE_DDMMYYYY,
+            'P' => NumberFormat::FORMAT_DATE_DDMMYYYY,
+            'Q' => NumberFormat::FORMAT_DATE_DDMMYYYY,
+        ];
+    }
+
+    public function collection()
+    {
+        $query = Device::where('company_uuid', session('company'))->with(['telematic', 'attachable'])->withCount('sensors');
+
+        if ($this->selections) {
+            $query->whereIn('uuid', $this->selections);
+        }
+
+        return $query->get();
+    }
+
+    protected function yesNo($value): string
+    {
+        return $value ? 'Yes' : 'No';
+    }
+}