@fleetbase/fleetops-engine 0.6.51 → 0.6.53

package/addon/components/order/form/service-rate.hbs

@@ -18,6 +18,8 @@
                                     @options={{this.serviceRates}}
                                     @selected={{this.selectedRate}}
                                     @onChange={{perform this.getServiceQuotes}}
+                                    @searchEnabled={{true}}
+                                    @searchField="service_name"
                                     @placeholder={{t "order.fields.select-service-rate"}}
                                     @triggerClass="form-select form-input"
                                     @disabled={{cannot-write @resource}}

package/addon/components/service-rate/form.hbs

@@ -379,6 +379,7 @@
                         <li class="leading-5"><code>&#123;stops&#125;</code>: total service stops including pickup, dropoff, and intermediate waypoints.</li>
                         <li class="leading-5"><code>&#123;waypoints&#125;</code>: intermediate waypoint count only.</li>
                         <li class="leading-5"><code>&#123;parcels&#125;</code>, <code>&#123;entities&#125;</code>: parcel count and total payload entity count.</li>
+                        <li class="leading-5"><code>&#123;weight&#125;</code>, <code>&#123;weight_kg&#125;</code>, <code>&#123;weight_g&#125;</code>, <code>&#123;weight_lb&#125;</code>, <code>&#123;weight_oz&#125;</code>, <code>&#123;weight_tonne&#125;</code>, <code>&#123;weight_t&#125;</code>: total entity weight converted across supported units.</li>
                         <li class="leading-5"><code>&#123;base_fee&#125;</code>: the configured base fee for this service rate.</li>
                         <li class="leading-5">Supported functions: <code>max(a,b)</code>, <code>min(a,b)</code>, <code>ceil(x)</code>, <code>floor(x)</code>, <code>round(x)</code>.</li>
                     </ul>
@@ -399,8 +400,8 @@
 
                     <div>
                         <h4 class="mb-1 text-sm font-semibold">{{t "service-rate.fields.example"}} 3</h4>
-                        <div class="mb-2 text-inherit">Combine waypoint, parcel, and distance surcharges in one formula.</div>
-                        <code class="text-xs font-mono">max(&#123;waypoints&#125;, 0) * 15 + max(&#123;parcels&#125; - 3, 0) * 2 + max(&#123;distance_km&#125; - 25, 0) * 0.5 + &#123;base_fee&#125;</code>
+                        <div class="mb-2 text-inherit">Combine waypoint, payload weight, and distance surcharges in one formula.</div>
+                        <code class="text-xs font-mono">max(&#123;waypoints&#125;, 0) * 15 + max(&#123;weight_kg&#125; - 100, 0) * 0.25 + max(&#123;distance_km&#125; - 25, 0) * 0.5 + &#123;base_fee&#125;</code>
                     </div>
                 </div>
             </InfoBlock>

package/addon/components/telematic/details.hbs

@@ -1,95 +1,111 @@
-<div class="details-wrapper" ...attributes>
-    <ContentPanel @title="Telematics Provider" @open={{true}} @wrapperClass="bordered-top">
-        <div class="field-info-container">
-            <div class="field-name">Provider</div>
-            <div class="field-value">
-                <div class="flex flew-row space-x-2 text-sm">
-                    <div class="pt-1.5">
-                        <Image src={{@resource.provider_descriptor.icon}} class="w-5 h-5" />
+<div class="flex flex-col gap-4 p-4 md:p-6" ...attributes>
+    <section class="grid grid-cols-1 gap-3 lg:grid-cols-3">
+        {{#each this.healthCards as |card|}}
+            <div class="fleet-ops-widget fleet-ops-kpi-tile fleetops-connectivity-kpi-tile {{card.accentClass}} relative min-h-[118px] overflow-hidden rounded-md border bg-white shadow-sm transition hover:-translate-y-px hover:shadow-lg dark:bg-gray-800">
+                <div class="flex h-full flex-col justify-between p-3">
+                    <div class="flex items-start justify-between gap-3">
+                        <div class="min-w-0">
+                            <div class="truncate text-[10px] font-bold uppercase text-gray-500 dark:text-gray-400">{{card.label}}</div>
+                            <div class="mt-2 truncate text-xl font-extrabold leading-none text-gray-900 dark:text-gray-50">{{n-a card.value}}</div>
+                            <div class="mt-2 truncate text-[11px] text-gray-500 dark:text-gray-400">{{card.help}}</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={{card.icon}} />
+                        </div>
                     </div>
-                    <div>
-                        <div class="font-semibold">{{@resource.provider_descriptor.label}}</div>
-                        <div class="text-xs text-gray-400 dark:text-gray-500">{{n-a @resource.provider_descriptor.description}}</div>
+
+                    <div class="mt-3 flex items-center justify-between gap-2 text-[11px]">
+                        <span class="flex-shrink-0 font-semibold text-gray-500 dark:text-gray-400">{{card.detailLabel}}</span>
+                        <span class="min-w-0 truncate text-right text-gray-500 dark:text-gray-400">
+                            {{#if card.detailIsDate}}
+                                {{n-a (format-date-fns card.detail "dd MMM yyyy, HH:mm")}}
+                            {{else}}
+                                {{n-a card.detail}}
+                            {{/if}}
+                        </span>
                     </div>
                 </div>
             </div>
-        </div>
-    </ContentPanel>
-
-    <ContentPanel @title="Integration Details" @open={{true}} @wrapperClass="bordered-top">
-        <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 lg:gap-2 no-input-group-padding text-xs">
-            <div class="field-info-container">
-                <div class="field-name">Integration Name</div>
-                <div class="field-value">{{n-a @resource.name}}</div>
-            </div>
-
-            {{#if @resource.provider_descriptor.supportsWebhooks}}
-                <InputGroup @name="Webhook URL" @helpText={{concat "Configure the URL in your " @resource.provider_descriptor.label " dashboard to receive real-time updates."}}>
-                    <ClickToCopy @value={{@resource.provider_descriptor.webhook_url}}>
-                        <Input @value={{@resource.provider_descriptor.webhook_url}} class="form-input" readonly />
-                    </ClickToCopy>
-                    <small class="form-text text-muted">
-                        Configure this URL in your
-                        {{@resource.provider_descriptor.label}}
-                        dashboard to receive real-time updates.
-                    </small>
-                </InputGroup>
-            {{/if}}
-        </div>
-    </ContentPanel>
-
-    <ContentPanel @title="Telematic Blackbox" @open={{true}} @wrapperClass="bordered-top">
-        <div class="grid grid-cols-1 lg:grid-cols-3 gap-2">
-            <div class="field-info-container">
-                <div class="field-name">Model</div>
-                <div class="field-value">{{n-a @resource.model}}</div>
-            </div>
-
-            <div class="field-info-container">
-                <div class="field-name">Serial Number</div>
-                <div class="field-value">{{n-a @resource.serial_number}}</div>
-            </div>
-
-            <div class="field-info-container">
-                <div class="field-name">Firmware Version</div>
-                <div class="field-value">{{n-a @resource.firmware_version}}</div>
-            </div>
+        {{/each}}
+    </section>
 
-            <div class="field-info-container">
-                <div class="field-name">Status</div>
-                <div class="field-value">
-                    <Badge @status={{@resource.status}}>{{smart-humanize @resource.status}}</Badge>
+    {{#if this.attentionItems.length}}
+        <section class="flex flex-col gap-3">
+            {{#each this.attentionItems as |item|}}
+                <div class="w-full rounded-md border border-yellow-200 bg-yellow-50 p-3 dark:border-yellow-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-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300">
+                            <FaIcon @icon={{item.icon}} />
+                        </div>
+                        <div class="min-w-0">
+                            <div class="text-sm font-bold text-gray-900 dark:text-gray-100">{{item.title}}</div>
+                            <p class="mt-1 text-xs leading-5 text-yellow-800 dark:text-yellow-300">{{item.description}}</p>
+                        </div>
+                    </div>
+                </div>
+            {{/each}}
+        </section>
+    {{else}}
+        <section class="rounded-md border border-green-200 bg-green-50 p-3 dark:border-green-700 dark:bg-green-900/20">
+            <div class="flex items-center gap-3">
+                <div class="flex h-9 w-9 items-center justify-center rounded-md bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300">
+                    <FaIcon @icon="check" />
+                </div>
+                <div>
+                    <div class="text-sm font-bold text-gray-900 dark:text-gray-100">No immediate attention needed</div>
+                    <div class="text-xs text-green-800 dark:text-green-300">Connection, sync, and telemetry status are ready for review.</div>
                 </div>
             </div>
+        </section>
+    {{/if}}
 
-            <div class="field-info-container">
-                <div class="field-name">IMEI</div>
-                <div class="field-value">{{n-a @resource.imei}}</div>
-            </div>
-
-            <div class="field-info-container">
-                <div class="field-name">ICCID</div>
-                <div class="field-value">{{n-a @resource.iccid}}</div>
-            </div>
-
-            <div class="field-info-container">
-                <div class="field-name">IMSI</div>
-                <div class="field-value">{{n-a @resource.imsi}}</div>
+    <section class="grid grid-cols-1 gap-4 lg:grid-cols-3">
+        <div class="rounded-md border border-gray-200 bg-white p-4 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">Provider Connection</h2>
+                <p class="text-xs text-gray-500 dark:text-gray-300">External provider identity and public webhook configuration.</p>
             </div>
-
-            <div class="field-info-container">
-                <div class="field-name">MSISDN</div>
-                <div class="field-value">{{n-a @resource.msisdn}}</div>
+            <div class="grid grid-cols-1 gap-3 text-xs md:grid-cols-2">
+                <div class="rounded-md border border-gray-200 p-3 dark:border-gray-700">
+                    <div class="text-gray-400 dark:text-gray-500">Provider</div>
+                    <div class="mt-1 flex items-center gap-2 font-bold text-gray-900 dark:text-gray-100">
+                        <Image src={{@resource.provider_descriptor.icon}} class="h-5 w-5 rounded" />
+                        {{@resource.provider_descriptor.label}}
+                    </div>
+                </div>
+                <div class="rounded-md border border-gray-200 p-3 dark:border-gray-700">
+                    <div class="text-gray-400 dark:text-gray-500">Integration ID</div>
+                    <div class="mt-1 font-mono font-bold text-gray-900 dark:text-gray-100">{{n-a @resource.public_id}}</div>
+                </div>
+                {{#if @resource.provider_descriptor.supports_webhooks}}
+                    <div class="rounded-md border border-gray-200 p-3 dark:border-gray-700 md:col-span-2">
+                        <div class="mb-2 text-gray-400 dark:text-gray-500">Webhook URL</div>
+                        {{#if this.hasWebhookUrl}}
+                            <ClickToCopy @value={{this.webhookUrl}}>
+                                <Input @value={{this.webhookUrl}} class="form-input w-full" readonly />
+                            </ClickToCopy>
+                        {{else}}
+                            <div class="text-yellow-700 dark:text-yellow-300">Webhook URL unavailable until this integration has a public ID.</div>
+                        {{/if}}
+                    </div>
+                {{/if}}
             </div>
+        </div>
 
-            <div class="field-info-container">
-                <div class="field-name">Last Seen</div>
-                <div class="field-value">{{n-a (format-date @resource.last_seen_at)}}</div>
+        <div class="rounded-md border border-gray-200 bg-white p-4 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">Hardware Identity</h2>
+                <p class="text-xs text-gray-500 dark:text-gray-300">Provider blackbox metadata stored on the integration.</p>
             </div>
-
-            <div class="field-info-container">
-                <div class="field-name">Online Status</div>
-                <div class="field-value">
+            <div class="grid gap-2 text-xs">
+                {{#each this.hardwareFields as |field|}}
+                    <div class="flex items-center justify-between gap-3 border-b border-gray-100 py-1.5 last:border-b-0 dark:border-gray-700">
+                        <span class="text-gray-400 dark:text-gray-500">{{field.label}}</span>
+                        <span class="truncate font-semibold text-gray-900 dark:text-gray-100">{{n-a field.value}}</span>
+                    </div>
+                {{/each}}
+                <div class="flex items-center justify-between gap-3 border-b border-gray-100 py-1.5 last:border-b-0 dark:border-gray-700">
+                    <span class="text-gray-400 dark:text-gray-500">Online</span>
                     {{#if @resource.is_online}}
                         <Badge @status="online">Online</Badge>
                     {{else}}
@@ -97,13 +113,8 @@
                     {{/if}}
                 </div>
             </div>
-
-            <div class="field-info-container">
-                <div class="field-name">Signal Strength</div>
-                <div class="field-value">{{n-a @resource.signal_strength}}</div>
-            </div>
         </div>
-    </ContentPanel>
+    </section>
 
     <CustomField::Yield @subject={{@resource}} @viewMode={{true}} @wrapperClass="bordered-top" />
-</div>
+</div>

package/addon/components/telematic/details.js

@@ -1,3 +1,232 @@
 import Component from '@glimmer/component';
 
-export default class TelematicDetailsComponent extends Component {}
+export default class TelematicDetailsComponent extends Component {
+    get webhookUrl() {
+        const url = this.args.resource?.provider_descriptor?.webhook_url;
+        const id = this.args.resource?.public_id;
+
+        if (!url || !id) {
+            return null;
+        }
+
+        const separator = url.includes('?') ? '&' : '?';
+        return `${url}${separator}telematic=${id}`;
+    }
+
+    get hasWebhookUrl() {
+        return Boolean(this.webhookUrl);
+    }
+
+    get lastTestStatus() {
+        const result = this.args.resource?.meta?.last_test_result;
+
+        if (result === 'success') {
+            return {
+                status: 'success',
+                label: 'Verified',
+            };
+        }
+
+        if (result === 'failed') {
+            return {
+                status: 'danger',
+                label: 'Failed',
+            };
+        }
+
+        return null;
+    }
+
+    get lastSyncStatus() {
+        if (this.args.resource?.status === 'synchronizing') {
+            return {
+                status: 'info',
+                label: 'Syncing',
+            };
+        }
+
+        const result = this.args.resource?.meta?.last_sync_result;
+
+        if (result === 'success') {
+            return {
+                status: 'success',
+                label: 'Synced',
+            };
+        }
+
+        if (result === 'failed') {
+            return {
+                status: 'danger',
+                label: 'Failed',
+            };
+        }
+
+        return null;
+    }
+
+    get connectionTestValue() {
+        return this.lastTestStatus?.label ?? 'Not tested';
+    }
+
+    get deviceSyncValue() {
+        if (this.args.resource?.status === 'synchronizing') {
+            return 'Syncing provider devices';
+        }
+
+        if (this.args.resource?.meta?.last_sync_result === 'success') {
+            return 'Synced';
+        }
+
+        if (this.args.resource?.meta?.last_sync_result === 'failed') {
+            return 'Failed';
+        }
+
+        return 'Not synced';
+    }
+
+    get deviceSyncDetail() {
+        if (this.args.resource?.status === 'synchronizing') {
+            return this.args.resource?.meta?.last_sync_started_at;
+        }
+
+        return this.args.resource?.meta?.last_sync_completed_at;
+    }
+
+    get connectionTestAccentClass() {
+        if (this.lastTestStatus?.status === 'danger') {
+            return 'fleetops-connectivity-kpi-accent-rose';
+        }
+
+        if (this.lastTestStatus?.status === 'success') {
+            return 'fleetops-connectivity-kpi-accent-green';
+        }
+
+        return 'fleetops-connectivity-kpi-accent-blue';
+    }
+
+    get deviceSyncAccentClass() {
+        if (this.lastSyncStatus?.status === 'danger') {
+            return 'fleetops-connectivity-kpi-accent-rose';
+        }
+
+        if (this.lastSyncStatus?.status === 'success') {
+            return 'fleetops-connectivity-kpi-accent-green';
+        }
+
+        if (this.args.resource?.status === 'synchronizing') {
+            return 'fleetops-connectivity-kpi-accent-blue';
+        }
+
+        return 'fleetops-connectivity-kpi-accent-amber';
+    }
+
+    get devicesSyncedAccentClass() {
+        return this.args.resource?.meta?.last_sync_total ? 'fleetops-connectivity-kpi-accent-green' : 'fleetops-connectivity-kpi-accent-blue';
+    }
+
+    get healthCards() {
+        const resource = this.args.resource;
+
+        return [
+            {
+                icon: 'plug',
+                label: 'Connection test',
+                value: this.connectionTestValue,
+                help: 'Provider credentials',
+                detailLabel: 'Last test',
+                detail: resource?.meta?.last_connection_test,
+                detailIsDate: true,
+                status: this.lastTestStatus?.status,
+                statusLabel: this.lastTestStatus?.label,
+                accentClass: this.connectionTestAccentClass,
+            },
+            {
+                icon: 'satellite-dish',
+                label: 'Device sync',
+                value: this.deviceSyncValue,
+                help: 'Provider device discovery',
+                detailLabel: this.args.resource?.status === 'synchronizing' ? 'Started' : 'Last sync',
+                detail: this.deviceSyncDetail,
+                detailIsDate: true,
+                status: this.lastSyncStatus?.status,
+                statusLabel: this.lastSyncStatus?.label,
+                accentClass: this.deviceSyncAccentClass,
+            },
+            {
+                icon: 'microchip',
+                label: 'Devices synced',
+                value: resource?.meta?.last_sync_total ?? 0,
+                help: 'Devices from provider',
+                detailLabel: 'Sync job',
+                detail: resource?.meta?.last_sync_job_id,
+                detailIsDate: false,
+                status: resource?.meta?.last_sync_total ? 'success' : null,
+                statusLabel: resource?.meta?.last_sync_total ? 'Available' : null,
+                accentClass: this.devicesSyncedAccentClass,
+            },
+        ];
+    }
+
+    get attentionItems() {
+        const resource = this.args.resource;
+        const items = [];
+
+        if (resource?.meta?.last_error) {
+            items.push({
+                icon: 'triangle-exclamation',
+                title: 'Connection issue',
+                description: this.userFacingIssueMessage(resource.meta.last_error, 'Connection test failed. Review the provider credentials and try again.'),
+                status: 'warning',
+            });
+        }
+
+        if (resource?.meta?.last_sync_error) {
+            items.push({
+                icon: 'circle-exclamation',
+                title: 'Sync issue',
+                description: this.userFacingIssueMessage(resource.meta.last_sync_error, 'Device sync failed. Review the provider connection and server logs, then try again.'),
+                status: 'warning',
+            });
+        }
+
+        if (resource?.meta?.unattached_devices_count > 0) {
+            items.push({
+                icon: 'truck',
+                title: 'Devices need vehicles',
+                description: `${resource.meta.unattached_devices_count} synced devices are waiting to be attached.`,
+                status: 'warning',
+            });
+        }
+
+        return items;
+    }
+
+    userFacingIssueMessage(message, fallback) {
+        if (!message || this.isSensitiveIssueMessage(message)) {
+            return fallback;
+        }
+
+        return String(message);
+    }
+
+    isSensitiveIssueMessage(message) {
+        const value = String(message).toLowerCase();
+
+        return ['sqlstate', 'insert into', 'update `', 'select ', 'schema', 'stack trace', 'connection:', 'pdoexception'].some((fragment) => value.includes(fragment));
+    }
+
+    get hardwareFields() {
+        const resource = this.args.resource;
+
+        return [
+            { label: 'Model', value: resource?.model },
+            { label: 'Serial Number', value: resource?.serial_number },
+            { label: 'Firmware Version', value: resource?.firmware_version },
+            { label: 'IMEI', value: resource?.imei },
+            { label: 'ICCID', value: resource?.iccid },
+            { label: 'IMSI', value: resource?.imsi },
+            { label: 'MSISDN', value: resource?.msisdn },
+            { label: 'Signal Strength', value: resource?.signal_strength },
+        ];
+    }
+}