@fleetbase/fleetops-engine 0.6.51 → 0.6.52

package/addon/components/modals/driver-assign-order.hbs

@@ -14,65 +14,14 @@
                     @onChange={{@options.selectOrder}}
                     as |order|
                 >
-                    <div class="mb-3 flex items-center justify-between">
-                        <div>{{order.public_id}} - {{order.createdAt}}</div>
-                        <Badge @hideStatusDot={{true}} @status={{order.status}} />
-                    </div>
-                    <div class="-ml-2">
-                        {{#if @order.payload.hasWaypoints}}
-                            <div class="order-route-list storefront flex-1">
-                                <div class="order-route-stop">
-                                    <div class="order-route-stop-index">
-                                        <div class="index-count">
-                                            <FaIcon @prefix="fas" @icon="map-marker-alt" />
-                                        </div>
-                                    </div>
-                                    <div class="order-route-location dark:text-gray-100">
-                                        <div>{{or (get order.payload.waypoints "0.name") (get order.payload.waypoints "0.street1")}}</div>
-                                        <div>{{or (get order.payload.waypoints "0.city") (get order.payload.waypoints "0.postal_code")}}</div>
-                                    </div>
-                                </div>
-                                <div class="order-route-stop">
-                                    <div class="order-route-stop-index">
-                                        <div class="index-count">
-                                            <FaIcon @prefix="fas" @icon="map-marker-alt" />
-                                        </div>
-                                    </div>
-                                    <div class="order-route-location dark:text-gray-100">
-                                        <div>{{or order.payload.waypoints.lastObject.name order.payload.waypoints.lastObject.street1}}</div>
-                                        <div>{{or order.payload.waypoints.lastObject.city order.payload.waypoints.lastObject.postal_code}}</div>
-                                    </div>
-                                </div>
-                            </div>
-                        {{else}}
-                            <div class="order-route-list storefront flex-1">
-                                <div class="order-route-stop">
-                                    <div class="order-route-stop-index">
-                                        <div class="index-count">
-                                            <FaIcon @prefix="fas" @icon="map-marker-alt" />
-                                        </div>
-                                    </div>
-                                    <div class="order-route-location dark:text-gray-100">
-                                        <div>{{or order.payload.pickup.name order.payload.pickup.street1}}</div>
-                                        <div>{{or order.payload.pickup.city order.payload.pickup.postal_code}}</div>
-                                    </div>
-                                </div>
-                                <div class="order-route-stop">
-                                    <div class="order-route-stop-index">
-                                        <div class="index-count">
-                                            <FaIcon @prefix="fas" @icon="map-marker-alt" />
-                                        </div>
-                                    </div>
-                                    <div class="order-route-location dark:text-gray-100">
-                                        <div>{{or order.payload.dropoff.name order.payload.dropoff.street1}}</div>
-                                        <div>{{or order.payload.dropoff.city order.payload.dropoff.postal_code}}</div>
-                                    </div>
-                                </div>
-                            </div>
-                        {{/if}}
-                    </div>
+                    <Order::Card
+                        @order={{order}}
+                        @variant="selection"
+                        @showMeta={{true}}
+                        @interactive={{false}}
+                    />
                 </ModelSelect>
             </InputGroup>
         </div>
     </div>
-</Modal::Default>
+</Modal::Default>

package/addon/components/modals/driver-assign-vehicle.hbs

@@ -13,9 +13,17 @@
                     @onChangeId={{fn (mut @options.driver.vehicle_uuid)}}
                     as |model|
                 >
-                    {{model.display_name}}
+                    <Vehicle::Pill
+                        @vehicle={{model}}
+                        @anchorClass="w-full"
+                        @imageWrapperClass="w-8 h-8"
+                        @imageClass="w-8 h-8"
+                        @contentWrapperClass="min-w-0"
+                        @titleClass="truncate"
+                        @subtitleClass="truncate"
+                    />
                 </ModelSelect>
             </InputGroup>
         </div>
     </div>
-</Modal::Default>
+</Modal::Default>

package/addon/components/modals/fleet-assign-driver.hbs

@@ -0,0 +1,18 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <InputGroup @name={{t "common.select-field" field=(t "resource.driver")}} @value={{@options.selectedDriver}}>
+            <ModelSelect
+                @modelName="driver"
+                @selectedModel={{@options.selectedDriver}}
+                @placeholder={{t "common.select-field" field=(t "resource.driver")}}
+                @triggerClass="form-select form-input"
+                @infiniteScroll={{true}}
+                @renderInPlace={{true}}
+                @onChange={{fn (mut @options.selectedDriver)}}
+                as |driver|
+            >
+                <Driver::Pill @driver={{driver}} />
+            </ModelSelect>
+        </InputGroup>
+    </div>
+</Modal::Default>

package/addon/components/modals/fleet-assign-driver.js

@@ -0,0 +1,3 @@
+import Component from '@glimmer/component';
+
+export default class ModalsFleetAssignDriverComponent extends Component {}

package/addon/components/modals/fleet-assign-vehicle.hbs

@@ -0,0 +1,18 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <InputGroup @name={{t "common.select-field" field=(t "resource.vehicle")}} @value={{@options.selectedVehicle}}>
+            <ModelSelect
+                @modelName="vehicle"
+                @selectedModel={{@options.selectedVehicle}}
+                @placeholder={{t "common.select-field" field=(t "resource.vehicle")}}
+                @triggerClass="form-select form-input"
+                @infiniteScroll={{true}}
+                @renderInPlace={{true}}
+                @onChange={{fn (mut @options.selectedVehicle)}}
+                as |vehicle|
+            >
+                <Vehicle::Pill @resource={{vehicle}} />
+            </ModelSelect>
+        </InputGroup>
+    </div>
+</Modal::Default>

package/addon/components/modals/fleet-assign-vehicle.js

@@ -0,0 +1,3 @@
+import Component from '@glimmer/component';
+
+export default class ModalsFleetAssignVehicleComponent extends Component {}

package/addon/components/modals/telematic-connection-diagnostics.hbs

@@ -0,0 +1,75 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container space-y-4">
+        <div
+            class="rounded-md border p-4
+                {{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-gray-200 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 gap-3">
+                    <div
+                        class="flex h-10 w-10 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'}}
+                            {{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 class="h-4 w-4" />
+                        {{else if (eq this.connectionState "success")}}
+                            <FaIcon @icon="circle-check" />
+                        {{else if (eq this.connectionState "failed")}}
+                            <FaIcon @icon="circle-exclamation" />
+                        {{else}}
+                            <FaIcon @icon="plug" />
+                        {{/if}}
+                    </div>
+                    <div class="min-w-0">
+                        <h3 class="text-sm font-bold text-gray-900 dark:text-gray-100">{{this.connectionStateTitle}}</h3>
+                        {{#if this.connectionStateMessage}}
+                            <p class="mt-1 text-xs leading-5 text-gray-600 dark:text-gray-300">{{this.connectionStateMessage}}</p>
+                        {{/if}}
+
+                        {{#if this.hasConnectionMetadata}}
+                            <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>
+            </div>
+        </div>
+
+        <div class="rounded-md border border-gray-200 dark:border-gray-700">
+            <div class="flex items-center justify-between border-b border-gray-200 px-3 py-2 dark:border-gray-700">
+                <div class="flex items-center gap-2 text-xs font-semibold uppercase text-gray-500 dark:text-gray-400">
+                    <FaIcon @icon="terminal" />
+                    <span>Diagnostics</span>
+                </div>
+                <Button @icon="copy" @text="Copy diagnostics" @size="xs" @disabled={{this.runTest.isRunning}} @onClick={{this.copyConnectionDiagnostics}} />
+            </div>
+            <div class="max-h-64 overflow-y-auto rounded-b-md border border-gray-900 bg-gray-900 p-3 font-mono text-[11px] leading-5 shadow-inner dark:border-gray-700 dark:bg-gray-900">
+                {{#each this.connectionDiagnosticEntries 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'}}
+                            {{if (eq entry.tone 'warning') 'text-yellow-300'}}
+                            {{if (eq entry.tone 'muted') 'text-gray-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>
+        </div>
+    </div>
+</Modal::Default>

package/addon/components/modals/telematic-connection-diagnostics.js

@@ -0,0 +1,287 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { task } from 'ember-concurrency';
+import copyToClipboard from '@fleetbase/ember-core/utils/copy-to-clipboard';
+
+const SENSITIVE_METADATA_KEYS = ['password', 'secret', 'session', 'token'];
+
+export default class ModalsTelematicConnectionDiagnosticsComponent extends Component {
+    @service fetch;
+    @service modalsManager;
+    @service notifications;
+
+    @tracked result;
+    @tracked startedAt;
+    @tracked completedAt;
+
+    constructor(owner, { options = {} }) {
+        super(...arguments);
+        this.options = options;
+        this.setupOptions();
+        this.runTest.perform();
+    }
+
+    get telematic() {
+        return this.options.telematic;
+    }
+
+    get providerLabel() {
+        return this.telematic?.provider_descriptor?.label ?? this.telematic?.provider ?? 'Provider';
+    }
+
+    get providerKey() {
+        return this.telematic?.provider;
+    }
+
+    get connectionState() {
+        if (this.runTest.isRunning) {
+            return 'testing';
+        }
+
+        if (!this.result) {
+            return 'idle';
+        }
+
+        return this.result.success ? 'success' : 'failed';
+    }
+
+    get connectionStateTitle() {
+        if (this.connectionState === 'testing') {
+            return 'Testing provider connection...';
+        }
+
+        if (this.connectionState === 'success') {
+            return 'Connection verified';
+        }
+
+        if (this.connectionState === 'failed') {
+            return 'Connection failed';
+        }
+
+        return 'Ready to test';
+    }
+
+    get connectionStateMessage() {
+        if (this.connectionState === 'testing') {
+            return 'Waiting for the provider to accept the saved credentials.';
+        }
+
+        if (this.connectionState === 'idle') {
+            return 'Run a connection test to verify the saved provider credentials.';
+        }
+
+        if (this.isDuplicateConnectionMessage) {
+            return null;
+        }
+
+        return this.result?.message;
+    }
+
+    get isDuplicateConnectionMessage() {
+        const message = this.result?.message;
+
+        if (!message) {
+            return false;
+        }
+
+        return ['connection successful', 'connection verified'].includes(message.trim().toLowerCase());
+    }
+
+    get connectionMetadataEntries() {
+        const metadata = this.result?.metadata ?? {};
+
+        return Object.entries(metadata)
+            .filter(([key, value]) => {
+                if (value === null || value === undefined || value === '') {
+                    return false;
+                }
+
+                return !this.isSensitiveMetadataKey(key);
+            })
+            .map(([key, value]) => ({
+                label: this.formatMetadataLabel(key),
+                value: this.formatDiagnosticValue(value),
+            }));
+    }
+
+    get hasConnectionMetadata() {
+        return this.connectionMetadataEntries.length > 0;
+    }
+
+    get connectionDiagnosticEntries() {
+        const entries = [];
+        const startedAt = this.startedAt;
+        const completedAt = this.completedAt;
+
+        entries.push({
+            time: this.formatDiagnosticTime(startedAt),
+            tone: 'muted',
+            text: `Provider selected: ${this.providerLabel}${this.providerKey ? ` (${this.providerKey})` : ''}`,
+        });
+
+        entries.push({
+            time: this.formatDiagnosticTime(startedAt),
+            tone: 'info',
+            text: 'Sending saved provider connection test request',
+        });
+
+        if (this.connectionState === 'testing') {
+            entries.push({
+                time: this.formatDiagnosticTime(),
+                tone: 'info',
+                text: 'Awaiting provider response',
+            });
+            return entries;
+        }
+
+        if (this.connectionState === 'idle') {
+            entries.push({
+                time: this.formatDiagnosticTime(),
+                tone: 'muted',
+                text: 'Connection test has not been run yet',
+            });
+            return entries;
+        }
+
+        entries.push({
+            time: this.formatDiagnosticTime(completedAt),
+            tone: 'info',
+            text: 'Provider response received',
+        });
+
+        if (this.hasConnectionMetadata) {
+            entries.push({
+                time: this.formatDiagnosticTime(completedAt),
+                tone: 'muted',
+                text: `Provider metadata: ${this.connectionMetadataEntries.map((entry) => `${entry.label}=${entry.value}`).join(', ')}`,
+            });
+        }
+
+        if (this.connectionState === 'success') {
+            entries.push({
+                time: this.formatDiagnosticTime(completedAt),
+                tone: 'success',
+                text: 'Connection verified',
+            });
+            return entries;
+        }
+
+        entries.push({
+            time: this.formatDiagnosticTime(completedAt),
+            tone: 'danger',
+            text: `Connection failed${this.result?.message ? `: ${this.formatDiagnosticValue(this.result.message)}` : ''}`,
+        });
+
+        return entries;
+    }
+
+    get connectionDiagnosticText() {
+        return this.connectionDiagnosticEntries.map((entry) => `[${entry.time}] ${entry.text}`).join('\n');
+    }
+
+    setupOptions() {
+        this.options.title = this.options.title ?? 'Test Connection';
+        this.options.acceptButtonText = 'Run Test';
+        this.options.acceptButtonIcon = 'plug';
+        this.options.declineButtonText = this.options.declineButtonText ?? 'Close';
+        this.options.confirm = async (modal) => {
+            modal.startLoading();
+
+            try {
+                await this.runTest.perform();
+            } finally {
+                modal.stopLoading();
+            }
+        };
+    }
+
+    @task *runTest() {
+        if (!this.telematic?.id) {
+            return;
+        }
+
+        this.startedAt = new Date();
+        this.completedAt = null;
+        this.modalsManager.setOption('acceptButtonDisabled', true);
+        this.modalsManager.setOption('acceptButtonText', 'Testing...');
+
+        try {
+            const result = yield this.fetch.post(`telematics/${this.telematic.id}/test-connection`);
+            this.result = result;
+            this.completedAt = new Date();
+            yield this.options.onTested?.(result);
+        } catch (error) {
+            this.completedAt = new Date();
+            this.result = {
+                success: false,
+                message: error.message || 'Connection test failed',
+            };
+        } finally {
+            this.modalsManager.setOption('acceptButtonDisabled', false);
+            this.modalsManager.setOption('acceptButtonText', this.result ? 'Test Again' : 'Run Test');
+        }
+    }
+
+    @action
+    copyConnectionDiagnostics() {
+        copyToClipboard(this.connectionDiagnosticText)
+            .then(() => {
+                this.notifications.success('Connection diagnostics copied.');
+            })
+            .catch(() => {
+                this.notifications.error('Unable to copy connection diagnostics.');
+            });
+    }
+
+    formatMetadataLabel(key) {
+        return key.replace(/_/g, ' ').replace(/\b\w/g, (char) => char.toUpperCase());
+    }
+
+    formatDiagnosticValue(value) {
+        const sanitizedValue = this.sanitizeDiagnosticValue(value);
+
+        if (typeof sanitizedValue === 'object') {
+            return JSON.stringify(sanitizedValue);
+        }
+
+        return String(sanitizedValue);
+    }
+
+    sanitizeDiagnosticValue(value, seen = new WeakSet()) {
+        if (!value || typeof value !== 'object') {
+            return value;
+        }
+
+        if (seen.has(value)) {
+            return '[circular]';
+        }
+
+        seen.add(value);
+
+        if (Array.isArray(value)) {
+            return value.map((item) => this.sanitizeDiagnosticValue(item, seen));
+        }
+
+        return Object.entries(value).reduce((acc, [key, item]) => {
+            if (!this.isSensitiveMetadataKey(key)) {
+                acc[key] = this.sanitizeDiagnosticValue(item, seen);
+            }
+
+            return acc;
+        }, {});
+    }
+
+    formatDiagnosticTime(date = new Date()) {
+        if (!(date instanceof Date)) {
+            return '--:--:--';
+        }
+
+        return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false });
+    }
+
+    isSensitiveMetadataKey(key) {
+        return SENSITIVE_METADATA_KEYS.some((sensitiveKey) => key.toLowerCase().includes(sensitiveKey));
+    }
+}

package/addon/components/modals/vehicle-details.hbs

@@ -29,6 +29,11 @@
                             <div class="field-value">{{n-a @options.vehicle.vin}}</div>
                         </div>
 
+                        <div class="field-info-container">
+                            <div class="field-name">Fuel Card Number</div>
+                            <div class="field-value">{{n-a @options.vehicle.fuel_card_number}}</div>
+                        </div>
+
                         <div class="field-info-container">
                             <div class="field-name">{{t "modals.vehicle-details.make"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.name}}</div>
@@ -224,4 +229,4 @@
         </div>
     </div>
     {{yield}}
-</Modal::Default>
+</Modal::Default>

package/addon/components/modals/vehicle-form.hbs

@@ -36,6 +36,13 @@
                             <Input @value={{@options.vehicle.vin}} @type="text" class="w-full form-input" placeholder={{t "common.vin-number"}} />
                         </div>
 
+                        <div class="input-group mb-2">
+                            <label>
+                                Fuel Card Number
+                            </label>
+                            <Input @value={{@options.vehicle.fuel_card_number}} @type="text" class="w-full form-input" placeholder="Fuel Card Number" />
+                        </div>
+
                         <div class="input-group mb-2">
                             <label>
                                 {{t "modals.vehicle-details.make"}}
@@ -303,4 +310,4 @@
             </div>
         </div>
     </div>
-</Modal::Default>
+</Modal::Default>

package/addon/components/order/card.hbs

@@ -0,0 +1,106 @@
+{{! template-lint-disable no-positive-tabindex }}
+<div
+    class={{this.classNames}}
+    role={{this.role}}
+    tabindex={{this.tabIndex}}
+    {{on "click" this.handleClick}}
+    {{on "keydown" this.handleKeyDown}}
+    ...attributes
+>
+    <div class="order-card-topline">
+        {{#if @selectable}}
+            <Input
+                @type="checkbox"
+                class="order-card-checkbox form-checkbox"
+                @checked={{@selected}}
+                disabled={{@disabled}}
+                {{on "click" this.handleSelect}}
+            />
+        {{/if}}
+        <div class="order-card-title-block">
+            <div class="order-card-title">{{n-a this.orderLabel (t "order.card.unknown-order")}}</div>
+            {{#if this.showType}}
+                <div class="order-card-subtitle">{{n-a (smart-humanize this.orderTypeLabel) (t "order.card.no-type")}}</div>
+            {{/if}}
+        </div>
+        {{#if (has-block "headerActions")}}
+            <div class="order-card-header-actions">
+                {{yield this.order to="headerActions"}}
+            </div>
+        {{/if}}
+        {{#if this.showStatus}}
+            <Badge @status={{this.order.status}} />
+        {{/if}}
+    </div>
+
+    {{#if this.showProgress}}
+        <div class="order-card-progress {{this.orderProgressClass}}">
+            <span></span>
+        </div>
+    {{/if}}
+
+    {{#if this.showRoute}}
+        {{#if this.hasOrderStops}}
+            <div class="order-card-route">
+                <div class="order-card-stop">
+                    <div class="order-card-stop-marker pickup">1</div>
+                    <div class="min-w-0">
+                        <div class="order-card-stop-label">{{t "order.card.pickup"}}</div>
+                        <div class="order-card-stop-address">{{n-a this.orderOriginAddress (t "order.card.no-pickup-address")}}</div>
+                    </div>
+                </div>
+                {{#if this.isMultiStopOrder}}
+                    <div class="order-card-stop compact">
+                        <div class="order-card-stop-marker middle">+</div>
+                        <div class="min-w-0">
+                            <div class="order-card-stop-label">{{t "order.card.waypoints"}}</div>
+                            <div class="order-card-stop-address">
+                                {{this.middleStopCount}}
+                                {{if (eq this.middleStopCount 1) (t "order.card.additional-stop") (t "order.card.additional-stops")}}
+                            </div>
+                        </div>
+                    </div>
+                {{/if}}
+                <div class="order-card-stop">
+                    <div class="order-card-stop-marker dropoff">{{this.orderStopCount}}</div>
+                    <div class="min-w-0">
+                        <div class="order-card-stop-label">{{t this.destinationLabelKey}}</div>
+                        <div class="order-card-stop-address">{{n-a this.orderDestinationAddress (t "order.card.no-dropoff-address")}}</div>
+                    </div>
+                </div>
+            </div>
+        {{else}}
+            {{#if (has-block "emptyRoute")}}
+                {{yield this.order to="emptyRoute"}}
+            {{else}}
+                <div class="order-card-empty-route">
+                    <FaIcon @icon="route" />
+                    <span>{{t "order.card.no-route-details"}}</span>
+                </div>
+            {{/if}}
+        {{/if}}
+    {{/if}}
+
+    {{#if this.showMeta}}
+        {{#if (has-block "meta")}}
+            {{yield this.order to="meta"}}
+        {{else if this.hasMeta}}
+            <div class="order-card-meta">
+                {{#each this.metaItems as |item|}}
+                    <span>
+                        <FaIcon @icon={{item.icon}} />
+                        {{#if item.isDate}}
+                            {{format-date-fns item.value "MMM d, HH:mm"}}
+                        {{else}}
+                            {{item.value}}
+                        {{/if}}
+                    </span>
+                {{/each}}
+            </div>
+        {{/if}}
+    {{/if}}
+
+    {{#if (has-block "footer")}}
+        {{yield this.order to="footer"}}
+    {{/if}}
+</div>