@fleetbase/fleetops-engine 0.6.51 → 0.6.53

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>

package/addon/components/order/card.js

@@ -0,0 +1,257 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+const COMPLETE_ORDER_STATUSES = ['completed', 'delivered'];
+const ACTIVE_ORDER_STATUSES = ['dispatched', 'started', 'in_progress', 'driver_enroute', 'driver_nearby'];
+
+export default class OrderCardComponent extends Component {
+    get order() {
+        return this.args.order ?? this.args.resource;
+    }
+
+    get variant() {
+        return this.args.variant ?? 'default';
+    }
+
+    get isCompact() {
+        return this.variant === 'compact';
+    }
+
+    get isSelection() {
+        return this.variant === 'selection';
+    }
+
+    get isInteractive() {
+        return Boolean(this.args.interactive && !this.args.disabled);
+    }
+
+    get classNames() {
+        return [
+            'order-card',
+            `order-card-${this.variant}`,
+            this.args.selected ? 'is-selected' : null,
+            this.args.disabled ? 'is-disabled' : null,
+            this.args.selectable ? 'is-selectable' : null,
+            this.isInteractive ? 'is-interactive' : null,
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+
+    get orderLabel() {
+        const trackingNumber = this.order?.tracking_number;
+
+        return trackingNumber?.tracking_number ?? trackingNumber ?? this.order?.tracking ?? this.order?.public_id ?? this.order?.id;
+    }
+
+    get orderTypeLabel() {
+        return this.order?.type;
+    }
+
+    get orderStops() {
+        const payload = this.order?.payload ?? {};
+        const stops = [];
+
+        if (payload.pickup) {
+            stops.push({ type: 'pickup', place: payload.pickup });
+        }
+
+        (payload.waypoints ?? []).forEach((waypoint, index) => {
+            stops.push({
+                type: waypoint.type ?? 'waypoint',
+                place: waypoint.place ?? waypoint,
+                index: index + 1,
+            });
+        });
+
+        if (payload.dropoff) {
+            stops.push({ type: 'dropoff', place: payload.dropoff });
+        }
+
+        if (payload.return) {
+            stops.push({ type: 'return', place: payload.return });
+        }
+
+        return stops.filter((stop) => this.addressForPlace(stop.place));
+    }
+
+    get orderOrigin() {
+        return this.orderStops[0];
+    }
+
+    get orderDestination() {
+        return this.orderStops[this.orderStops.length - 1];
+    }
+
+    get orderOriginAddress() {
+        return this.addressForPlace(this.orderOrigin?.place);
+    }
+
+    get orderDestinationAddress() {
+        return this.addressForPlace(this.orderDestination?.place);
+    }
+
+    get orderStopCount() {
+        return this.orderStops.length;
+    }
+
+    get middleStopCount() {
+        return Math.max(this.orderStopCount - 2, 0);
+    }
+
+    get isMultiStopOrder() {
+        return this.orderStopCount > 2;
+    }
+
+    get hasOrderStops() {
+        return this.orderStopCount > 0;
+    }
+
+    get destinationLabelKey() {
+        return this.orderDestination?.type === 'return' ? 'order.card.return' : 'order.card.dropoff';
+    }
+
+    get orderProgressClass() {
+        const status = this.order?.status;
+
+        if (COMPLETE_ORDER_STATUSES.includes(status)) {
+            return 'is-complete';
+        }
+
+        if (ACTIVE_ORDER_STATUSES.includes(status)) {
+            return 'is-active';
+        }
+
+        return 'is-pending';
+    }
+
+    get scheduledAt() {
+        return this.order?.scheduled_at ?? this.order?.scheduledAt;
+    }
+
+    get createdAt() {
+        return this.order?.created_at ?? this.order?.createdAt;
+    }
+
+    get orderDriverLabel() {
+        return this.order?.driver_assigned?.name ?? this.order?.driver_name ?? this.order?.driver?.name;
+    }
+
+    get orderVehicleLabel() {
+        return this.order?.vehicle_assigned?.displayName ?? this.order?.vehicle_assigned?.display_name ?? this.order?.vehicle_name ?? this.order?.vehicle?.displayName;
+    }
+
+    get orderCustomerLabel() {
+        return this.order?.customer?.name ?? this.order?.customer_name;
+    }
+
+    get showStatus() {
+        return this.argOrDefault('showStatus', true);
+    }
+
+    get showType() {
+        return this.argOrDefault('showType', !this.isCompact);
+    }
+
+    get showRoute() {
+        return this.argOrDefault('showRoute', !this.isCompact);
+    }
+
+    get showProgress() {
+        return this.argOrDefault('showProgress', !this.isCompact && !this.isSelection);
+    }
+
+    get showMeta() {
+        return this.argOrDefault('showMeta', true);
+    }
+
+    get showDriver() {
+        return this.argOrDefault('showDriver', true);
+    }
+
+    get showVehicle() {
+        return this.argOrDefault('showVehicle', true);
+    }
+
+    get showCustomer() {
+        return this.argOrDefault('showCustomer', false);
+    }
+
+    get showScheduledAt() {
+        return this.argOrDefault('showScheduledAt', true);
+    }
+
+    get metaItems() {
+        const items = [];
+
+        if (this.showScheduledAt && (this.scheduledAt || this.createdAt)) {
+            items.push({
+                key: 'scheduled',
+                icon: 'calendar',
+                value: this.scheduledAt ?? this.createdAt,
+                isDate: true,
+            });
+        }
+
+        if (this.showDriver && this.orderDriverLabel) {
+            items.push({ key: 'driver', icon: 'id-card', value: this.orderDriverLabel });
+        }
+
+        if (this.showVehicle && this.orderVehicleLabel) {
+            items.push({ key: 'vehicle', icon: 'truck', value: this.orderVehicleLabel });
+        }
+
+        if (this.showCustomer && this.orderCustomerLabel) {
+            items.push({ key: 'customer', icon: 'user', value: this.orderCustomerLabel });
+        }
+
+        return items;
+    }
+
+    get hasMeta() {
+        return this.metaItems.length > 0;
+    }
+
+    get tabIndex() {
+        return this.isInteractive ? '0' : null;
+    }
+
+    get role() {
+        return this.isInteractive ? 'button' : null;
+    }
+
+    argOrDefault(argName, defaultValue) {
+        return typeof this.args[argName] === 'boolean' ? this.args[argName] : defaultValue;
+    }
+
+    addressForPlace(place) {
+        return place?.address ?? place?.address_html ?? place?.street1 ?? place?.name;
+    }
+
+    @action handleClick() {
+        if (!this.isInteractive || typeof this.args.onClick !== 'function') {
+            return;
+        }
+
+        this.args.onClick(this.order);
+    }
+
+    @action handleKeyDown(event) {
+        if (!this.isInteractive || !['Enter', ' '].includes(event.key)) {
+            return;
+        }
+
+        event.preventDefault();
+        this.handleClick();
+    }
+
+    @action handleSelect(event) {
+        event?.stopPropagation();
+
+        if (this.args.disabled || typeof this.args.onSelect !== 'function') {
+            return;
+        }
+
+        this.args.onSelect(this.order);
+    }
+}

package/addon/components/order/form/payload.js

@@ -69,6 +69,8 @@ export default class OrderFormPayloadComponent extends Component {
     }
 
     @action editEntity(entity) {
-        this.entityActions.modal.edit(entity);
+        this.entityActions.modal.edit(entity, {
+            confirm: (modal) => modal.done(),
+        });
     }
 }