@fleetbase/fleetops-engine 0.6.50 → 0.6.52

package/addon/components/modals/issue-close.js

@@ -0,0 +1,73 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+
+export default class ModalsIssueCloseComponent extends Component {
+    @service currentUser;
+    @service notifications;
+
+    @tracked options = {};
+    @tracked issue;
+    @tracked note;
+
+    constructor(owner, { options }) {
+        super(...arguments);
+        this.options = options;
+        this.issue = options.issue;
+        this.setupOptions();
+    }
+
+    get orderLabel() {
+        return this.issue?.order?.tracking || this.issue?.order?.public_id;
+    }
+
+    get vehicleLabel() {
+        return this.issue?.vehicle?.displayName || this.issue?.vehicle_name;
+    }
+
+    setupOptions() {
+        this.options.title = `Close ${this.issue?.public_id || 'Issue'}`;
+        this.options.acceptButtonText = 'Close Issue';
+        this.options.acceptButtonIcon = 'circle-check';
+        this.options.acceptButtonScheme = 'success';
+        this.options.confirm = async (modal) => {
+            if (!this.note) {
+                this.notifications.warning('Add a close note before closing the issue.');
+                return;
+            }
+
+            modal.startLoading();
+
+            try {
+                const closedAt = new Date().toISOString();
+                const user = this.currentUser.user;
+                const meta = this.issue.meta ?? {};
+
+                this.issue.status = 'closed';
+                this.issue.resolved_at = new Date();
+                this.issue.meta = {
+                    ...meta,
+                    resolution: {
+                        ...(meta.resolution ?? {}),
+                        note: this.note,
+                        closed_at: closedAt,
+                        closed_by_uuid: user?.id,
+                        closed_by_name: user?.name,
+                    },
+                };
+
+                await this.issue.save();
+                this.notifications.success('Issue closed.');
+
+                if (typeof this.options.onSaved === 'function') {
+                    await this.options.onSaved(this.issue);
+                }
+
+                modal.done();
+            } catch (error) {
+                this.notifications.serverError(error);
+                modal.stopLoading();
+            }
+        };
+    }
+}

package/addon/components/modals/issue-status.hbs

@@ -0,0 +1,20 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <InputGroup @name="Status" @helpText="Choose the current workflow state for this issue.">
+            <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                <PowerSelect
+                    @options={{@options.statusOptions}}
+                    @selected={{this.selectedStatus}}
+                    @onChange={{fn (mut this.selectedStatus)}}
+                    @placeholder="Select status"
+                    @triggerClass="form-select form-input"
+                    @renderInPlace={{true}}
+                    as |status|
+                >
+                    <div class="font-semibold normalize-in-trigger">{{status.label}}</div>
+                    <div class="hide-from-trigger text-xs text-gray-500 dark:text-gray-400">{{status.description}}</div>
+                </PowerSelect>
+            </div>
+        </InputGroup>
+    </div>
+</Modal::Default>

package/addon/components/modals/issue-status.js

@@ -0,0 +1,43 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+
+export default class ModalsIssueStatusComponent extends Component {
+    @service notifications;
+
+    @tracked options = {};
+    @tracked issue;
+    @tracked selectedStatus;
+
+    constructor(owner, { options }) {
+        super(...arguments);
+        this.options = options;
+        this.issue = options.issue;
+        this.selectedStatus = options.statusOptions?.find((status) => status.value === this.issue?.status);
+        this.setupOptions();
+    }
+
+    setupOptions() {
+        this.options.title = 'Change Issue Status';
+        this.options.acceptButtonText = 'Update Status';
+        this.options.acceptButtonIcon = 'save';
+        this.options.confirm = async (modal) => {
+            modal.startLoading();
+
+            try {
+                this.issue.status = this.selectedStatus?.value ?? this.issue.status;
+                await this.issue.save();
+                this.notifications.success('Issue status updated.');
+
+                if (typeof this.options.onSaved === 'function') {
+                    await this.options.onSaved(this.issue);
+                }
+
+                modal.done();
+            } catch (error) {
+                this.notifications.serverError(error);
+                modal.stopLoading();
+            }
+        };
+    }
+}

package/addon/components/modals/reset-customer-credentials.js

@@ -2,6 +2,8 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 
+const INTERNAL_NAMESPACE = 'int/v1';
+
 export default class ModalsResetCustomerCredentialsComponent extends Component {
     @service fetch;
     @service notifications;
@@ -26,12 +28,16 @@ export default class ModalsResetCustomerCredentialsComponent extends Component {
             modal.startLoading();
 
             try {
-                await this.fetch.post('customers/reset-credentials', {
-                    customer: this.customer.id,
-                    password: this.password,
-                    password_confirmation: this.confirmPassword,
-                    send_credentials: this.sendCredentials,
-                });
+                await this.fetch.post(
+                    'customers/reset-credentials',
+                    {
+                        customer: this.customer.id,
+                        password: this.password,
+                        password_confirmation: this.confirmPassword,
+                        send_credentials: this.sendCredentials,
+                    },
+                    { namespace: INTERNAL_NAMESPACE }
+                );
 
                 this.notifications.success('Customer password reset.');
 

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/update-order-activity.hbs

@@ -21,7 +21,7 @@
                 <div class="text-xs font-semibold uppercase">Updating activity for</div>
                 <div class="mt-1 flex items-start justify-between gap-3">
                     <div class="min-w-0">
-                        <div class="truncate text-sm font-semibold">{{or this.currentWaypoint.name this.currentWaypoint.id}}</div>
+                        <div class="truncate text-sm font-semibold">{{or this.currentWaypoint.name this.currentWaypoint.public_id}}</div>
                         <div class="truncate text-xs">{{or (place-address-html this.currentWaypoint showTitle=false) this.currentWaypoint.address this.currentWaypoint.street1}}</div>
                     </div>
                     {{#if this.currentWaypoint.status_code}}
@@ -111,24 +111,58 @@
         </fieldset>
 
         {{#if this.selectedActivityRequiresPod}}
-            <div class="mb-5 rounded-md border border-yellow-300 bg-yellow-50 p-4 dark:border-yellow-700 dark:bg-yellow-900">
-                <div class="mb-2 text-sm font-semibold text-yellow-900 dark:text-yellow-50">Photo proof of delivery required</div>
-                <p class="mb-3 text-xs text-yellow-800 dark:text-yellow-100">Upload a delivery photo before submitting this activity update.</p>
-                <FileUpload @name="photos[]" @accept={{join "," this.acceptedProofFileTypes}} @multiple={{false}} @onFileAdded={{this.setProofFile}}>
-                    <a tabindex={{0}} class="btn btn-magic cursor-pointer">
-                        <FaIcon @icon="camera" class="mr-1" />
-                        Select photo
-                    </a>
-                </FileUpload>
+            <div class="mb-4 rounded-md border border-yellow-300 bg-yellow-50 py-2 text-yellow-900 dark:border-yellow-700 dark:bg-yellow-900 dark:text-yellow-50">
+                <div class="flex flex-wrap items-center justify-between gap-2 px-3">
+                    <div class="min-w-0">
+                        <div class="text-xs font-semibold uppercase">Photo proof required</div>
+                        {{#if this.bypassProof}}
+                            <div class="text-xs text-yellow-800 dark:text-yellow-100">Proof bypass enabled.</div>
+                        {{else if this.hasUploadedProof}}
+                            <div class="text-xs text-yellow-800 dark:text-yellow-100">Proof uploaded.</div>
+                        {{else if this.uploadProofFile.isRunning}}
+                            <div class="text-xs text-yellow-800 dark:text-yellow-100">Uploading proof...</div>
+                        {{else}}
+                            <div class="text-xs text-yellow-800 dark:text-yellow-100">Upload proof before submitting.</div>
+                        {{/if}}
+                    </div>
+                    {{#unless this.bypassProof}}
+                        <FileUpload @name="photos" @accept={{join "," this.acceptedProofFileTypes}} @multiple={{false}} @onFileAdded={{perform this.uploadProofFile}}>
+                            <a tabindex={{0}} class="btn btn-magic btn-sm cursor-pointer">
+                                {{#if this.uploadProofFile.isRunning}}
+                                    <Spinner class="mr-1" />
+                                    Uploading
+                                {{else}}
+                                    <FaIcon @icon="camera" class="mr-1" />
+                                    Select photo
+                                {{/if}}
+                            </a>
+                        </FileUpload>
+                    {{/unless}}
+                </div>
+                <div class="px-3 mt-3 flex flex-wrap items-center justify-between gap-2 border-t border-yellow-50 pt-2 dark:border-yellow-700">
+                    <Toggle @isToggled={{this.bypassProof}} @onToggle={{this.toggleBypassProof}} @label="Bypass proof of delivery" @labelClass="text-xs" />
+                    <span class="text-xs text-yellow-800 dark:text-yellow-100">Use only when proof cannot be provided from the console.</span>
+                </div>
                 {{#if this.proofFiles}}
-                    {{#each this.proofFiles as |file|}}
-                        <div class="mt-3 flex items-center justify-between rounded-md border border-yellow-400 bg-white px-3 py-2 text-xs text-yellow-900 dark:bg-yellow-950 dark:text-yellow-50">
-                            <span class="truncate">{{file.name}}</span>
-                            <span class="font-semibold">{{round file.progress}}%</span>
-                        </div>
-                    {{/each}}
+                    <div class="mt-4 mb-1 px-3 space-x-2">
+                        {{#each this.proofFiles as |file|}}
+                            <div class="flex items-center justify-between gap-2 text-xs text-yellow-900 dark:text-yellow-50 border border-yellow-50 dark:border-yellow-700 shadow-sm px-2 py-1.5 rounded-md">
+                                <div class="text-xs flex items-center space-x-2">
+                                    <FaIcon @icon="file" />
+                                    <span class="truncate">{{file.name}}</span>
+                                </div>
+                                <span class="flex-shrink-0 font-semibold">
+                                    {{#if this.hasUploadedProof}}
+                                        Uploaded
+                                    {{else}}
+                                        {{round file.progress}}%
+                                    {{/if}}
+                                </span>
+                            </div>
+                        {{/each}}
+                    </div>
                 {{/if}}
             </div>
         {{/if}}
     </div>
-</Modal::Default>
+</Modal::Default>