@fleetbase/fleetops-engine 0.6.51 → 0.6.52

package/README.md

@@ -2,8 +2,6 @@
     <img src="https://flb-assets.s3.ap-southeast-1.amazonaws.com/static/fleetbase-logo-svg.svg" alt="Fleetbase" width="380" height="100">
 </p>
 
-<h1 align="center">Fleet-Ops</h1>
-
 <p align="center">
     Open-source fleet, dispatch, transport management, and real-time logistics operations for Fleetbase.
 </p>

package/addon/components/cell/telematic-provider.hbs

@@ -0,0 +1,16 @@
+<div ...attributes>
+    <button
+        type="button"
+        disabled={{and @column.permission (cannot @column.permission)}}
+        {{on "click" this.onClick}}
+        class="flex min-w-0 max-w-md items-start gap-2 py-1 text-left"
+    >
+        <div class="pt-0.5">
+            <Image src={{this.icon}} class="mr-3 h-8 w-8 flex-shrink-0 rounded-md" />
+        </div>
+        <div class="min-w-0 text-left">
+            <div class="truncate text-sm font-semibold text-gray-900 hover:text-blue-600 dark:text-gray-100 dark:hover:text-blue-300">{{n-a this.name}}</div>
+            <div class="mt-0.5 line-clamp-2 whitespace-normal text-left text-xs leading-4 text-gray-500 dark:text-gray-400">{{n-a this.description}}</div>
+        </div>
+    </button>
+</div>

package/addon/components/cell/telematic-provider.js

@@ -0,0 +1,36 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+export default class CellTelematicProviderComponent extends Component {
+    get descriptor() {
+        return this.args.row?.provider_descriptor ?? {};
+    }
+
+    get name() {
+        return this.args.row?.name ?? this.descriptor.label ?? this.args.row?.provider;
+    }
+
+    get description() {
+        return this.descriptor.description ?? this.args.row?.provider;
+    }
+
+    get icon() {
+        return this.descriptor.icon;
+    }
+
+    @action onClick(event) {
+        const { row, column, onClick } = this.args;
+
+        if (typeof onClick === 'function') {
+            onClick(row, event);
+        }
+
+        if (typeof column?.action === 'function') {
+            column.action(row, event);
+        }
+
+        if (typeof column?.onClick === 'function') {
+            column.onClick(row, event);
+        }
+    }
+}

package/addon/components/cell/telematic-status.hbs

@@ -0,0 +1 @@
+<Badge @status={{this.badgeStatus}} @hideStatusDot={{true}}>{{this.label}}</Badge>

package/addon/components/cell/telematic-status.js

@@ -0,0 +1,39 @@
+import Component from '@glimmer/component';
+
+export default class CellTelematicStatusComponent extends Component {
+    get status() {
+        return this.args.row?.status;
+    }
+
+    get badgeStatus() {
+        switch (this.status) {
+            case 'active':
+            case 'connected':
+                return 'success';
+            case 'synchronizing':
+                return 'info';
+            case 'error':
+            case 'degraded':
+            case 'disconnected':
+                return 'warning';
+            default:
+                return this.status ?? 'default';
+        }
+    }
+
+    get label() {
+        switch (this.status) {
+            case 'active':
+            case 'connected':
+                return 'Connected';
+            case 'synchronizing':
+                return 'Syncing';
+            case 'initialized':
+                return 'Not tested';
+            case 'error':
+                return 'Needs attention';
+            default:
+                return this.status ?? 'Unknown';
+        }
+    }
+}

package/addon/components/device/manager.hbs

@@ -2,7 +2,7 @@
     <div class="flex flex-row items-center justify-between mb-4 px-3 pt-2">
         <div></div>
         <div>
-            <Button @icon="plus" @text="Attach device" @onClick={{this.addDevice}} @disabled={{not @resource}} />
+            <Button @icon="plus" @text={{t "device.actions.attach-device"}} @onClick={{this.addDevice}} @disabled={{not @resource}} />
         </div>
     </div>
     <div>
@@ -10,20 +10,19 @@
             <div class="flex flex-row justify-between px-3 py-4 border-t border-gray-200 dark:border-gray-700">
                 <Device::Pill @device={{device}} />
                 <div>
-                    <Button @type="danger" @icon="times" @text="Detach" @size="xs" @onClick={{fn this.removeDevice device}} />
+                    <Button @type="danger" @icon="times" @text={{t "device.actions.detach-from-vehicle"}} @size="xs" @onClick={{fn this.removeDevice device}} />
                 </div>
             </div>
         {{else}}
             <div class="empty-state bg-white dark:bg-gray-800 rounded-lg shadow-sm p-12 text-center">
                 <FaIcon @icon="hard-drive" @size="2x" class="text-gray-400 mb-2" />
                 <h3 class="text-base font-semibold text-gray-700 dark:text-gray-300">
-                    No Devices Attached
+                    {{t "device.prompts.no-devices-attached-title"}}
                 </h3>
                 <p class="text-sm text-gray-500 dark:text-gray-400">
-                    Click Attach device above to start receiving telematic data for this
-                    {{get-model-name @resource}}
+                    {{t "device.prompts.no-devices-attached-body" resourceType=(get-model-name @resource)}}
                 </p>
             </div>
         {{/each}}
     </div>
-</div>
+</div>

package/addon/components/device/manager.js

@@ -8,8 +8,10 @@ import getModelName from '@fleetbase/ember-core/utils/get-model-name';
 
 export default class DeviceManagerComponent extends Component {
     @service store;
+    @service fetch;
     @service modalsManager;
     @service notifications;
+    @service intl;
     @tracked devices = [];
 
     get resourceName() {
@@ -33,24 +35,19 @@ export default class DeviceManagerComponent extends Component {
 
     @action addDevice() {
         this.modalsManager.show('modals/attach-device', {
-            title: 'Select device to attach',
-            acceptButtonText: 'Confirm & Attach Device',
+            title: this.intl.t('device.prompts.select-device-to-attach-title', { resourceName: this.resourceName }),
+            acceptButtonText: this.intl.t('device.prompts.confirm-attach-device'),
             selectedDevice: null,
             confirm: async (modal) => {
                 const selectedDevice = modal.getOption('selectedDevice');
                 if (!selectedDevice) return;
 
-                selectedDevice.setProperties({
-                    attachable_uuid: this.args.resource.id,
-                    attachable_type: `fleet-ops:${getModelName(this.args.resource)}`,
-                });
-
                 modal.startLoading();
 
                 try {
-                    await selectedDevice.save();
+                    await this.fetch.post(`vehicles/${this.args.resource.id}/attach-device`, { device: selectedDevice.id });
                     await this.loadDevices.perform();
-                    this.notifications.success('Device attached successfully.');
+                    this.notifications.success(this.intl.t('device.prompts.attach-device-success'));
                     modal.done();
                 } catch (err) {
                     this.notifications.serverError(err);
@@ -61,18 +58,18 @@ export default class DeviceManagerComponent extends Component {
     }
 
     @action removeDevice(device) {
+        const deviceName = device.displayName ?? device.name ?? device.device_id ?? this.intl.t('resource.device');
+
         this.modalsManager.confirm({
-            title: `Are you sure you want to detach this device (${device.name}) from (${this.resourceName})?`,
-            body: `Removing this device will stop all telematic updates and events for this ${getModelName(this.args.resource)}.`,
+            title: this.intl.t('device.prompts.detach-from-resource-title', { deviceName, resourceName: this.resourceName }),
+            body: this.intl.t('device.prompts.detach-from-resource-body', { deviceName, resourceName: this.resourceName, resourceType: getModelName(this.args.resource) }),
             confirm: async (modal) => {
                 modal.startLoading();
 
-                device.setProperties({ attachable_uuid: null, attachable_type: null });
-
                 try {
-                    await device.save();
+                    await this.fetch.post(`vehicles/${this.args.resource.id}/detach-device`, { device: device.id });
                     await this.loadDevices.perform();
-                    this.notifications.success('Device removed.');
+                    this.notifications.success(this.intl.t('device.prompts.detach-from-resource-success', { deviceName, resourceName: this.resourceName }));
                     modal.done();
                 } catch (error) {
                     this.notifications.serverError(error);

package/addon/components/driver/details.hbs

@@ -32,7 +32,7 @@
             </div>
             <div class="field-info-container">
                 <div class="field-name">{{t "driver.fields.license-expiry"}}</div>
-                <div class="field-value">{{n-a @resource.license_expiry}}</div>
+                <div class="field-value">{{n-a (format-date-fns @resource.license_expiry)}}</div>
             </div>
             <div class="field-info-container">
                 <div class="field-name">{{t "resource.vendor"}}</div>

package/addon/components/fleet/vehicle-listing.js

@@ -11,6 +11,7 @@ export default class FleetVehicleListingComponent extends Component {
     @service fetch;
     @service intl;
     @service universe;
+    @service notifications;
     @tracked vehicles = [];
     @tracked selected = [];
     @tracked selectable = false;

package/addon/components/fuel-integration/form.hbs

@@ -0,0 +1,200 @@
+<div class="flex min-h-0 flex-1 flex-col" ...attributes>
+    <div class="min-h-0 flex-1 overflow-y-auto px-4 py-4 md:px-6">
+        <div class="mx-auto flex w-full max-w-6xl flex-col gap-4">
+            <section class="rounded-md border border-gray-200 bg-white p-3 shadow-sm dark:border-gray-700 dark:bg-gray-800">
+                <div class="grid grid-cols-1 gap-2 md:grid-cols-5">
+                    {{#each this.setupSteps as |step index|}}
+                        <button type="button" class="rounded-md border p-2 text-left transition {{if step.active 'border-blue-500 bg-blue-50 dark:border-blue-400 dark:bg-blue-500/10' 'border-gray-200 bg-white hover:border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:hover:border-gray-600'}}" {{on "click" (fn this.goToStep index)}}>
+                            <div class="flex items-center gap-2">
+                                <div class="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md text-xs {{if step.active 'bg-blue-600 text-white dark:bg-blue-500' (if step.complete 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300' 'bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-300')}}">
+                                    <FaIcon @icon={{if step.complete "check" step.icon}} />
+                                </div>
+                                <div class="min-w-0">
+                                    <div class="text-[10px] font-semibold uppercase text-gray-400 dark:text-gray-500">{{add index 1}}</div>
+                                    <div class="truncate text-xs font-bold text-gray-900 dark:text-gray-100">{{step.label}}</div>
+                                </div>
+                            </div>
+                        </button>
+                    {{/each}}
+                </div>
+            </section>
+
+            {{#if (eq this.activeStep 0)}}
+                <section class="rounded-md border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
+                    <div class="mb-3">
+                        <h2 class="text-sm font-bold text-gray-900 dark:text-gray-100">Choose Fuel Integration</h2>
+                        <p class="text-xs text-gray-500 dark:text-gray-300">Select the system to connect for fuel card bills, purchase transactions, station locations, or vehicle fuel identifiers.</p>
+                    </div>
+
+                    {{#if this.loadProviders.isRunning}}
+                        <div class="flex min-h-[140px] items-center justify-center"><Spinner /></div>
+                    {{else}}
+                        <div class="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-4">
+                            {{#each this.providerCards as |provider|}}
+                                <button type="button" class="flex min-h-[148px] flex-col rounded-md border p-3 text-left transition {{if provider.selected 'border-blue-500 bg-blue-50 dark:border-blue-400 dark:bg-gray-800' 'border-gray-200 bg-white hover:border-blue-300 dark:border-gray-700 dark:bg-gray-800 dark:hover:border-blue-400'}}" {{on "click" (fn this.selectProvider provider)}}>
+                                    <div class="flex items-start justify-between gap-3">
+                                        <div class="flex min-w-0 items-center gap-2">
+                                            <div class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-300">
+                                                <FaIcon @icon={{or provider.icon "gas-pump"}} />
+                                            </div>
+                                            <div class="min-w-0">
+                                                <div class="truncate text-sm font-bold text-gray-900 dark:text-gray-100">{{provider.label}}</div>
+                                                <div class="truncate text-[11px] uppercase text-gray-400 dark:text-gray-500">{{provider.categoryLabel}}</div>
+                                            </div>
+                                        </div>
+                                        {{#if provider.selected}}
+                                            <Badge @status="success" @hideStatusDot={{true}}>Selected</Badge>
+                                        {{/if}}
+                                    </div>
+                                    <p class="mt-3 line-clamp-2 flex-1 text-xs leading-5 text-gray-500 dark:text-gray-300">{{provider.description}}</p>
+                                    <div class="mt-3 flex flex-wrap gap-1">
+                                        {{#each provider.capabilities as |capability|}}
+                                            <span class="rounded bg-gray-100 px-2 py-0.5 text-[11px] text-gray-600 dark:bg-gray-700 dark:text-gray-300">{{capability}}</span>
+                                        {{/each}}
+                                    </div>
+                                </button>
+                            {{/each}}
+                        </div>
+                    {{/if}}
+                </section>
+            {{else if (eq this.activeStep 1)}}
+                <section class="grid grid-cols-1 gap-4 lg:grid-cols-3">
+                    <div 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">
+                        <div class="mb-3">
+                            <h2 class="text-sm font-bold text-gray-900 dark:text-gray-100">Credentials</h2>
+                            <p class="text-xs text-gray-500 dark:text-gray-300">These credentials are stored on the connection and used to test and import provider transactions.</p>
+                        </div>
+
+                        {{#if this.selectedProvider}}
+                            <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 no-input-group-padding text-xs">
+                                {{#each this.selectedProvider.required_fields as |field|}}
+                                    <InputGroup @name={{field.label}} @value={{get @resource.credentials field.name}} @required={{field.required}} @type={{field.type}} @helpText={{field.help_text}} {{on "input" (fn this.setCredential field)}} />
+                                {{/each}}
+                            </div>
+                        {{else}}
+                            <div class="rounded-md border border-dashed border-gray-300 p-6 text-center text-xs text-gray-500 dark:border-gray-700 dark:text-gray-300">
+                                Choose a fuel integration before entering credentials.
+                            </div>
+                        {{/if}}
+                    </div>
+
+                    {{#if this.selectedProvider}}
+                        <aside class="rounded-md border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
+                            <div class="flex items-start gap-3">
+                                <div class="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-md bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-300">
+                                    <FaIcon @icon={{or this.selectedProvider.icon "gas-pump"}} />
+                                </div>
+                                <div class="min-w-0">
+                                    <div class="truncate text-sm font-bold text-gray-900 dark:text-gray-100">{{this.selectedProvider.label}}</div>
+                                    <p class="mt-1 text-xs leading-5 text-gray-500 dark:text-gray-300">{{this.selectedProvider.description}}</p>
+                                </div>
+                            </div>
+                            <div class="mt-3 flex flex-wrap gap-2">
+                                {{#each this.selectedProvider.capabilities as |capability|}}
+                                    <Badge @status="info" @hideStatusDot={{true}}>{{capability}}</Badge>
+                                {{/each}}
+                            </div>
+                        </aside>
+                    {{/if}}
+                </section>
+            {{else if (eq this.activeStep 2)}}
+                <section class="rounded-md border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
+                    <div class="mb-3">
+                        <h2 class="text-sm font-bold text-gray-900 dark:text-gray-100">Test Connection</h2>
+                        <p class="text-xs text-gray-500 dark:text-gray-300">Confirm the provider accepts the credentials before saving this fuel integration.</p>
+                    </div>
+
+                    <div class="rounded-md border p-4 text-xs transition {{if (eq this.connectionState 'success') 'border-green-200 bg-green-50 dark:border-green-800 dark:bg-green-900/10'}} {{if (eq this.connectionState 'failed') 'border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-900/10'}} {{if (eq this.connectionState 'testing') 'border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-900/10'}} {{if (eq this.connectionState 'idle') 'border-dashed border-gray-300 bg-white dark:border-gray-700 dark:bg-gray-800'}}">
+                        <div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
+                            <div class="flex min-w-0 items-start gap-3">
+                                <div class="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-md {{if (eq this.connectionState 'success') 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300'}} {{if (eq this.connectionState 'failed') 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300'}} {{if (eq this.connectionState 'testing') 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300 animate-pulse'}} {{if (eq this.connectionState 'idle') 'bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-300'}}">
+                                    {{#if (eq this.connectionState "testing")}}<Spinner />{{else if (eq this.connectionState "success")}}<FaIcon @icon="check" />{{else if (eq this.connectionState "failed")}}<FaIcon @icon="triangle-exclamation" />{{else}}<FaIcon @icon="plug" />{{/if}}
+                                </div>
+                                <div class="min-w-0">
+                                    <div class="text-sm font-bold text-gray-900 dark:text-gray-100">{{this.connectionStateTitle}}</div>
+                                    <p class="mt-1 max-w-3xl text-xs leading-5 text-gray-600 dark:text-gray-300">{{this.connectionStateMessage}}</p>
+                                    {{#if this.connectionMetadataEntries.length}}
+                                        <div class="mt-3 flex flex-wrap gap-2">
+                                            {{#each this.connectionMetadataEntries as |item|}}
+                                                <span class="inline-flex items-center rounded-md border border-gray-200 bg-white px-2 py-1 text-[11px] text-gray-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
+                                                    <span class="mr-1 font-semibold text-gray-900 dark:text-gray-100">{{item.label}}</span>
+                                                    {{item.value}}
+                                                </span>
+                                            {{/each}}
+                                        </div>
+                                    {{/if}}
+                                </div>
+                            </div>
+
+                            <Button @icon="plug" @text={{if (eq this.connectionState "success") "Test Again" "Test Connection"}} @size="xs" @isLoading={{this.testConnection.isRunning}} @disabled={{this.testConnection.isRunning}} @onClick={{perform this.testConnection}} />
+                        </div>
+
+                        <div class="mt-4 border-t border-gray-200 pt-3 dark:border-gray-700">
+                            <div class="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
+                                <button type="button" class="inline-flex items-center gap-2 text-xs font-semibold text-blue-600 hover:text-blue-700 dark:text-blue-300 dark:hover:text-blue-200" {{on "click" (fn (mut this.showDiagnostics) (not this.showDiagnostics))}}>
+                                    <FaIcon @icon={{if this.showDiagnostics "chevron-up" "chevron-down"}} class="text-[10px]" />
+                                    <span>{{if this.showDiagnostics "Hide diagnostics" "Show diagnostics"}}</span>
+                                </button>
+
+                                {{#if this.showDiagnostics}}
+                                    <Button @icon="copy" @text="Copy diagnostics" @size="xs" @onClick={{this.copyDiagnostics}} />
+                                {{/if}}
+                            </div>
+
+                            {{#if this.showDiagnostics}}
+                                <div class="mt-3 max-h-56 overflow-y-auto rounded-md border border-gray-800 bg-gray-900 p-3 font-mono text-[11px] leading-5 shadow-inner dark:border-gray-700 dark:bg-gray-900">
+                                    {{#each this.diagnosticEntries as |entry|}}
+                                        <div class="flex gap-3 {{if (eq entry.tone 'success') 'text-green-300'}} {{if (eq entry.tone 'danger') 'text-red-300'}} {{if (eq entry.tone 'info') 'text-blue-300'}}">
+                                            <span class="flex-shrink-0 text-gray-500">[{{entry.time}}]</span>
+                                            <span class="min-w-0 break-words">{{entry.text}}</span>
+                                        </div>
+                                    {{/each}}
+                                </div>
+                            {{/if}}
+                        </div>
+                    </div>
+                </section>
+            {{else if (eq this.activeStep 3)}}
+                <section class="rounded-md border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
+                    <div class="mb-3">
+                        <h2 class="text-sm font-bold text-gray-900 dark:text-gray-100">Sync Settings</h2>
+                        <p class="text-xs text-gray-500 dark:text-gray-300">Choose how fuel transactions are imported from this system.</p>
+                    </div>
+
+                    <div class="grid grid-cols-1 gap-3 lg:grid-cols-2 no-input-group-padding text-xs">
+                        <InputGroup @name="Integration name" @value={{@resource.name}} {{on "input" this.setName}} />
+                        <InputGroup @name="Default sync window" @helpText="Number of days to import when no explicit date range is provided.">
+                            <Input @type="number" min="1" max="90" class="form-input w-full" @value={{this.syncSettings.window_days}} {{on "input" (fn this.setSyncSetting "window_days")}} />
+                        </InputGroup>
+                        <div class="rounded-md border border-gray-200 p-3 dark:border-gray-700 lg:col-span-2">
+                            <Checkbox @value={{this.syncSettings.auto_create_fuel_reports}} @label="Create Fuel Reports after vehicle match" @onToggle={{fn this.setSyncSetting "auto_create_fuel_reports"}} @alignItems="center" @labelClass="mb-0i" />
+                            <p class="mt-2 text-xs leading-5 text-gray-500 dark:text-gray-300">Provider bills remain in Fuel Transactions. Fuel Reports are created only when a transaction is matched to a vehicle.</p>
+                        </div>
+                    </div>
+                </section>
+            {{else}}
+                <section class="rounded-md border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
+                    <div class="mb-3">
+                        <h2 class="text-sm font-bold text-gray-900 dark:text-gray-100">Vehicle Matching Priority</h2>
+                        <p class="text-xs leading-5 text-gray-500 dark:text-gray-300">Choose which provider identifiers should be used for automatic matching and put the most reliable identifier first.</p>
+                    </div>
+
+                    <FuelIntegration::MatchingPriority @order={{this.matchingOrder}} @onChange={{this.setMatchingOrder}} @editable={{true}} />
+                </section>
+            {{/if}}
+        </div>
+    </div>
+
+    <div class="flex flex-shrink-0 items-center justify-between border-t border-gray-200 bg-white px-4 py-3 dark:border-gray-700 dark:bg-gray-900 md:px-6">
+        <div class="text-xs text-gray-500 dark:text-gray-300">{{@footerHelp}}</div>
+        <div class="flex items-center gap-2">
+            <Button @icon="arrow-left" @text="Back" @size="sm" @disabled={{eq this.activeStep 0}} @onClick={{this.previousStep}} />
+            {{#if (eq this.activeStep 4)}}
+                <Button @icon="save" @text={{@saveLabel}} @type="primary" @size="sm" @isLoading={{@isSaving}} @disabled={{@isSaving}} @onClick={{@onSave}} />
+            {{else}}
+                <Button @icon="arrow-right" @text="Next" @type="primary" @size="sm" @onClick={{this.nextStep}} />
+            {{/if}}
+            <Button @icon="times" @text="Cancel" @size="sm" @onClick={{@onCancel}} />
+        </div>
+    </div>
+</div>