@fleetbase/fleetops-engine 0.6.50 → 0.6.52

package/addon/components/customer/form.js

@@ -11,12 +11,17 @@ export default class CustomerFormComponent extends Component {
     @service currentUser;
     @service notifications;
     @service modalsManager;
+    @service('universe/extension-manager') extensionManager;
+
     @tracked userAccountActionButtons = [
         {
             icon: 'user-plus',
             size: 'xs',
             permission: 'iam create user',
-            onClick: () => {
+            onClick: async () => {
+                // Load IAM engine for user-form modal component
+                await this.extensionManager.ensureEngineLoaded('@fleetbase/iam-engine');
+
                 const user = this.store.createRecord('user', {
                     status: 'pending',
                     type: 'user',
@@ -61,6 +66,27 @@ export default class CustomerFormComponent extends Component {
         },
     ];
 
+    get showWelcomeEmailOption() {
+        return this.args.resource?.isNew && this.extensionManager.isInstalled('@fleetbase/customer-portal-engine');
+    }
+
+    get sendWelcomeEmail() {
+        return Boolean(this.args.resource?.meta?.customer_portal?.send_welcome_email);
+    }
+
+    @action toggleWelcomeEmail(value = !this.sendWelcomeEmail) {
+        const meta = this.args.resource.meta ?? {};
+        const customerPortal = meta.customer_portal ?? {};
+
+        this.args.resource.set('meta', {
+            ...meta,
+            customer_portal: {
+                ...customerPortal,
+                send_welcome_email: value,
+            },
+        });
+    }
+
     @action selectPlace(place) {
         if (!place) return;
         this.args.resource.setProperties({

package/addon/components/customer/orders.hbs

@@ -121,6 +121,7 @@
                                                         <Button @helpText="View Label" @icon="print" @onClick={{this.viewOrderLabel}} />
                                                         <Button @helpText="View Route" @icon="route" @onClick={{this.locateOrderRoute}} />
                                                         <Button @helpText="Locate Driver" @icon="truck" @onClick={{this.locateDriver}} @disabled={{not order.has_driver_assigned}} />
+                                                        <Button @helpText="Cancel Order" @icon="ban" @onClick={{this.cancelOrder}} @disabled={{or order.isCompleted order.isCanceled}} />
                                                     </div>
                                                 </div>
                                             </div>
@@ -161,6 +162,53 @@
                                                 </div>
                                             </div>
                                             <div class="customer-order-details-seperator"></div>
+                                            <div>
+                                                <div class="mb-2 ml-1">
+                                                    <h1 class="font-bold text-sm">Delivery Options:</h1>
+                                                </div>
+                                                <div class="grid grid-cols-1 lg:grid-cols-2 gap-2">
+                                                    <InputGroup @name="Scheduled At" @type="datetime-local" @value={{this.scheduledAt}} />
+                                                    <div class="flex items-end">
+                                                        <Button @type="primary" @icon="calendar" @text="Reschedule" @onClick={{this.rescheduleOrder}} @disabled={{or order.isCompleted order.isCanceled}} />
+                                                    </div>
+                                                    <InputGroup @name="Access Notes">
+                                                        <Input
+                                                            @value={{this.deliveryInstructions.access_notes}}
+                                                            class="form-input w-full"
+                                                            placeholder="Gate code, loading dock, reception notes"
+                                                            {{on "input" (fn this.updateDeliveryInstruction "access_notes")}}
+                                                        />
+                                                    </InputGroup>
+                                                    <InputGroup @name="Safe Place">
+                                                        <Input
+                                                            @value={{this.deliveryInstructions.safe_place}}
+                                                            class="form-input w-full"
+                                                            placeholder="Leave-at-door or safe-place instructions"
+                                                            {{on "input" (fn this.updateDeliveryInstruction "safe_place")}}
+                                                        />
+                                                    </InputGroup>
+                                                    <InputGroup @name="Contact Phone">
+                                                        <Input
+                                                            @value={{this.deliveryInstructions.contact_phone}}
+                                                            class="form-input w-full"
+                                                            placeholder="Delivery contact phone"
+                                                            {{on "input" (fn this.updateDeliveryInstruction "contact_phone")}}
+                                                        />
+                                                    </InputGroup>
+                                                    <InputGroup @name="Special Handling">
+                                                        <Input
+                                                            @value={{this.deliveryInstructions.special_handling}}
+                                                            class="form-input w-full"
+                                                            placeholder="Fragile, temperature, access, or handling notes"
+                                                            {{on "input" (fn this.updateDeliveryInstruction "special_handling")}}
+                                                        />
+                                                    </InputGroup>
+                                                </div>
+                                                <div class="mt-2">
+                                                    <Button @icon="save" @text="Save Delivery Instructions" @onClick={{this.saveDeliveryInstructions}} @disabled={{or order.isCompleted order.isCanceled}} />
+                                                </div>
+                                            </div>
+                                            <div class="customer-order-details-seperator"></div>
                                             <div>
                                                 <div class="mb-2 ml-1">
                                                     <h1 class="font-bold text-sm">Items:</h1>

package/addon/components/customer/orders.js

@@ -39,6 +39,8 @@ export default class CustomerOrdersComponent extends Component {
     @tracked route;
     @tracked query;
     @tracked tileSourceUrl = 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png';
+    @tracked scheduledAt;
+    @tracked deliveryInstructions = {};
 
     get modalsManager() {
         const owner = getOwner(this);
@@ -71,7 +73,7 @@ export default class CustomerOrdersComponent extends Component {
         this.query = query;
 
         try {
-            this.orders = yield this.store.query('order', { customer: this.customerSession.get('id'), ...params, query });
+            this.orders = yield this.store.query('order', { customer: this.customerAccountId, customer_type: this.customerTypeParam, ...params, query });
             this.orders = this.orders.toArray().filter((_) => !_.isNew);
             this.restoreSelectedOrder();
         } catch (error) {
@@ -87,7 +89,7 @@ export default class CustomerOrdersComponent extends Component {
         yield timeout(300);
 
         try {
-            this.orders = yield this.store.query('order', { query, with_tracker_data: true });
+            this.orders = yield this.store.query('order', { query, customer: this.customerAccountId, customer_type: this.customerTypeParam, with_tracker_data: true });
         } catch (error) {
             this.notifications.serverError(error);
         }
@@ -97,9 +99,9 @@ export default class CustomerOrdersComponent extends Component {
         this.unselectOrder();
         this.newOrder = this.store.createRecord('order', {
             type: 'transport',
-            customer_uuid: this.customerSession.get('id'),
-            customer_type: 'fleet-ops:contact',
-            customer: this.customerSession.getCustomer(),
+            customer_uuid: this.customerAccountId,
+            customer_type: this.customerTypeParam,
+            customer: this.customerSession.getAccount(),
             meta: [],
         });
         this.urlSearchParams.addParamToCurrentUrl('creating', 1);
@@ -135,6 +137,8 @@ export default class CustomerOrdersComponent extends Component {
 
     @action viewOrder(order, options = { resetOrderRoute: false }) {
         this.selectedOrder = order;
+        this.scheduledAt = order.scheduled_at;
+        this.deliveryInstructions = order.meta?.customer_portal?.delivery_instructions ?? {};
         // start loading order tracking activity
         order.loadTrackingActivity();
         this.urlSearchParams.addParamToCurrentUrl('order', order.public_id);
@@ -340,11 +344,69 @@ export default class CustomerOrdersComponent extends Component {
         }
     }
 
+    @action async cancelOrder() {
+        if (!this.selectedOrder) {
+            return;
+        }
+
+        try {
+            const response = await this.fetch.post(`customer-portal/orders/${this.selectedOrder.public_id}/cancel`, {}, { namespace: 'fleet-ops/int/v1' });
+            this.selectedOrder.set('status', response.order?.status ?? 'canceled');
+            this.notifications.success('Order canceled.');
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    @action async rescheduleOrder() {
+        if (!this.selectedOrder || !this.scheduledAt) {
+            return;
+        }
+
+        try {
+            const response = await this.fetch.post(
+                `customer-portal/orders/${this.selectedOrder.public_id}/reschedule`,
+                { scheduled_at: this.scheduledAt },
+                { namespace: 'fleet-ops/int/v1' }
+            );
+            this.selectedOrder.set('scheduled_at', response.order?.scheduled_at ?? this.scheduledAt);
+            this.notifications.success('Order rescheduled.');
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    @action updateDeliveryInstruction(key, event) {
+        this.deliveryInstructions = { ...this.deliveryInstructions, [key]: event.target.value };
+    }
+
+    @action async saveDeliveryInstructions() {
+        if (!this.selectedOrder) {
+            return;
+        }
+
+        try {
+            await this.fetch.post(`customer-portal/orders/${this.selectedOrder.public_id}/delivery-instructions`, this.deliveryInstructions, { namespace: 'fleet-ops/int/v1' });
+            this.notifications.success('Delivery instructions saved.');
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
     isCreatingOrder() {
         const isCreating = this.urlSearchParams.get('creating');
         return isCreating === '1' || isCreating === 1;
     }
 
+    get customerAccountId() {
+        return this.customerSession.get('uuid') || this.customerSession.get('id');
+    }
+
+    get customerTypeParam() {
+        const customerType = this.customerSession.get('customer_type', 'contact');
+        return customerType === 'vendor' ? 'fleet-ops:vendor' : 'fleet-ops:contact';
+    }
+
     cannotRouteWaypoints(waypoints = []) {
         return !this.map || !isArray(waypoints) || waypoints.length < 2;
     }

package/addon/components/device/manager.hbs

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

package/addon/components/device/manager.js

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

package/addon/components/driver/details.hbs

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

package/addon/components/driver/form.hbs

@@ -6,7 +6,7 @@
                     @modelName="user"
                     @selectedModel={{@resource.user}}
                     @placeholder={{t "driver.fields.select-user"}}
-                    @query={{hash doesnt_have_driver=true}}
+                    @query={{hash doesnt_have_driver=true can_be_driver=true}}
                     @triggerClass="form-select form-input"
                     @infiniteScroll={{false}}
                     @renderInPlace={{true}}

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

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

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

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