@fleetbase/fleetops-engine 0.6.64 → 0.6.66

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

@@ -2,11 +2,31 @@
     <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">
+                <div class="grid grid-cols-1 gap-2 {{if this.isEditing 'md:grid-cols-4' '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)}}>
+                        <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')}}">
+                                <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">
@@ -19,11 +39,12 @@
                 </div>
             </section>
 
-            {{#if (eq this.activeStep 0)}}
+            {{#if (eq this.activeStepKey "provider")}}
                 <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>
+                        <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}}
@@ -31,7 +52,16 @@
                     {{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)}}>
+                                <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">
@@ -57,7 +87,7 @@
                         </div>
                     {{/if}}
                 </section>
-            {{else if (eq this.activeStep 1)}}
+            {{else if (eq this.activeStepKey "credentials")}}
                 <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">
@@ -67,10 +97,36 @@
 
                         {{#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)}} />
+                                <InputGroup @name="Environment">
+                                    <select class="form-select w-full" data-test-fuel-environment {{on "change" this.setEnvironment}}>
+                                        <option value="sandbox" selected={{eq this.environment "sandbox"}}>Sandbox (PetroApp staging)</option>
+                                        <option value="production" selected={{eq this.environment "production"}}>Production</option>
+                                    </select>
+                                </InputGroup>
+                                {{#each this.credentialFields as |field|}}
+                                    {{#if (eq field.type "select")}}
+                                        <InputGroup @name={{field.label}} @helpText={{field.help_text}}>
+                                            <select class="form-select w-full" data-test-fuel-credential={{field.name}} {{on "change" (fn this.setCredential field)}}>
+                                                {{#each field.options as |choice|}}
+                                                    <option value={{choice.value}} selected={{choice.selected}}>{{choice.label}}</option>
+                                                {{/each}}
+                                            </select>
+                                        </InputGroup>
+                                    {{else}}
+                                        <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)}}
+                                        />
+                                    {{/if}}
                                 {{/each}}
                             </div>
+                            {{#if this.baseUrl}}
+                                <p class="mt-3 break-all text-xs text-gray-500 dark:text-gray-300" data-test-fuel-base-url>Web Service URL: {{this.baseUrl}}</p>
+                            {{/if}}
                         {{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.
@@ -97,26 +153,42 @@
                         </aside>
                     {{/if}}
                 </section>
-            {{else if (eq this.activeStep 2)}}
+            {{else if (eq this.activeStepKey "test")}}
                 <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="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
+                                    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>
+                                    <div data-test-fuel-state 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="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>
@@ -126,12 +198,25 @@
                                 </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}} />
+                            <Button
+                                data-test-fuel-test
+                                @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))}}>
+                                <button
+                                    data-test-fuel-diagnostics-toggle
+                                    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>
@@ -142,10 +227,17 @@
                             </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">
+                                <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>
+                                        <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 data-test-fuel-log-time dir="ltr" class="flex-shrink-0 text-gray-500">[{{entry.time}}]</span>
                                             <span class="min-w-0 break-words">{{entry.text}}</span>
                                         </div>
                                     {{/each}}
@@ -154,7 +246,7 @@
                         </div>
                     </div>
                 </section>
-            {{else if (eq this.activeStep 3)}}
+            {{else if (eq this.activeStepKey "sync")}}
                 <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>
@@ -167,8 +259,15 @@
                             <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>
+                            <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>
@@ -176,7 +275,8 @@
                 <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>
+                        <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}} />
@@ -189,7 +289,7 @@
         <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)}}
+            {{#if this.isLastStep}}
                 <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}} />

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

@@ -13,24 +13,40 @@ export default class FuelIntegrationFormComponent extends Component {
     @tracked activeStep = 0;
     @tracked connectionTestResult;
     @tracked showDiagnostics = false;
+    @tracked selectedAt = new Date().toISOString();
+    @tracked testedAt;
 
     constructor() {
         super(...arguments);
         this.loadProviders.perform();
     }
 
+    get isEditing() {
+        return this.args.isEditing === true || this.args.resource?.isNew === false;
+    }
+
     get setupSteps() {
         return [
-            { icon: 'gas-pump', label: 'Provider', complete: Boolean(this.selectedProvider) },
-            { icon: 'key', label: 'Credentials', complete: this.hasRequiredCredentials },
-            { icon: 'plug', label: 'Test', complete: this.connectionTestResult?.success === true },
-            { icon: 'clock-rotate-left', label: 'Sync', complete: Boolean(this.syncSettings.window_days) },
-            { icon: 'route', label: 'Matching', complete: this.matchingOrder.length > 0 },
-        ].map((step, index) => ({
-            ...step,
-            active: this.activeStep === index,
-            complete: index < this.activeStep && step.complete,
-        }));
+            { key: 'provider', icon: 'gas-pump', label: 'Provider', complete: Boolean(this.selectedProvider) },
+            { key: 'credentials', icon: 'key', label: 'Credentials', complete: this.hasRequiredCredentials },
+            { key: 'test', icon: 'plug', label: 'Test', complete: this.connectionTestResult?.success === true },
+            { key: 'sync', icon: 'clock-rotate-left', label: 'Sync', complete: Boolean(this.syncSettings.window_days) },
+            { key: 'matching', icon: 'route', label: 'Matching', complete: this.matchingOrder.length > 0 },
+        ]
+            .filter((step) => !this.isEditing || step.key !== 'provider')
+            .map((step, index) => ({
+                ...step,
+                active: this.activeStep === index,
+                complete: index < this.activeStep && step.complete,
+            }));
+    }
+
+    get activeStepKey() {
+        return this.setupSteps[this.activeStep]?.key;
+    }
+
+    get isLastStep() {
+        return this.activeStep === this.setupSteps.length - 1;
     }
 
     get selectedProvider() {
@@ -49,6 +65,24 @@ export default class FuelIntegrationFormComponent extends Component {
         return this.args.resource?.credentials ?? {};
     }
 
+    get environment() {
+        return this.args.resource?.environment ?? 'production';
+    }
+
+    get baseUrl() {
+        return this.credentials.base_url?.trim() || this.selectedProvider?.metadata?.base_urls?.[this.environment];
+    }
+
+    get credentialFields() {
+        return (this.selectedProvider?.required_fields ?? []).map((field) => ({
+            ...field,
+            options: field.options?.map((option) => ({
+                ...option,
+                selected: option.value === (this.credentials[field.name] ?? (field.name === 'auth_type' ? 'bearer_token' : field.default)),
+            })),
+        }));
+    }
+
     get syncSettings() {
         return this.args.resource?.sync_settings ?? {};
     }
@@ -113,7 +147,7 @@ export default class FuelIntegrationFormComponent extends Component {
     get diagnosticEntries() {
         const entries = [
             {
-                time: new Date().toLocaleTimeString(),
+                time: this.selectedAt,
                 tone: 'info',
                 text: this.selectedProvider ? `Provider selected: ${this.selectedProvider.label}` : 'No provider selected',
             },
@@ -121,7 +155,7 @@ export default class FuelIntegrationFormComponent extends Component {
 
         if (this.connectionTestResult) {
             entries.push({
-                time: new Date().toLocaleTimeString(),
+                time: this.testedAt,
                 tone: this.connectionTestResult.success ? 'success' : 'danger',
                 text: this.connectionTestResult.message ?? 'Connection test returned without a message',
             });
@@ -139,7 +173,7 @@ export default class FuelIntegrationFormComponent extends Component {
             const providers = yield this.fetch.get('fuel-provider-connections/providers');
             this.providers = providers;
 
-            if (!this.args.resource?.provider) {
+            if (!this.isEditing && !this.args.resource?.provider) {
                 const initialProvider = this.args.initialProviderKey ? providers.find((provider) => provider.key === this.args.initialProviderKey) : providers[0];
                 if (initialProvider) {
                     this.selectProvider(initialProvider);
@@ -161,34 +195,55 @@ export default class FuelIntegrationFormComponent extends Component {
             return;
         }
 
+        this.connectionTestResult = null;
         try {
-            this.connectionTestResult = yield this.fetch.post(`fuel-provider-connections/providers/${this.selectedProvider.key}/test-credentials`, {
-                credentials: this.credentials,
-                connection_id: this.args.resource?.id,
-            });
+            this.connectionTestResult = yield this.fetch.post(
+                `fuel-provider-connections/providers/${this.selectedProvider.key}/test-credentials`,
+                {
+                    credentials: this.credentials,
+                    connection_id: this.args.resource?.id,
+                    environment: this.environment,
+                },
+                { rawError: true }
+            );
         } catch (error) {
             this.connectionTestResult = {
                 success: false,
                 message: error.message ?? 'Connection test failed.',
-                metadata: {},
+                metadata: error.metadata ?? {},
             };
             this.notifications.serverError(error);
+        } finally {
+            this.testedAt = new Date().toISOString();
         }
     }
 
     @action selectProvider(provider) {
+        if (this.isEditing) {
+            return;
+        }
+
+        this.testConnection.cancelAll();
         this.args.resource?.setProperties?.({
             provider: provider.key,
             name: this.args.resource?.name || provider.label,
             credentials: (provider.required_fields ?? []).reduce((credentials, field) => {
-                credentials[field.name] = this.credentials[field.name] ?? field.default ?? null;
+                credentials[field.name] = this.credentials[field.name] ?? (field.name === 'auth_type' && this.args.resource?.provider ? 'bearer_token' : field.default) ?? null;
                 return credentials;
             }, {}),
         });
+        this.selectedAt = new Date().toISOString();
+        this.connectionTestResult = null;
+    }
+
+    @action setEnvironment(event) {
+        this.testConnection.cancelAll();
+        this.args.resource?.set('environment', event.target.value);
         this.connectionTestResult = null;
     }
 
     @action setCredential(field, event) {
+        this.testConnection.cancelAll();
         this.args.resource?.set('credentials', {
             ...this.credentials,
             [field.name]: event.target.value,

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

@@ -6,11 +6,13 @@
                     <div class="flex flex-wrap items-center gap-2">
                         <h1 class="text-lg font-bold text-gray-900 dark:text-gray-100">Fuel Integrations</h1>
                         <Badge @status={{if this.syncErrorCount "warning" "success"}} @hideStatusDot={{true}}>
-                            {{this.syncErrorCount}} sync issues
+                            {{this.syncErrorCount}}
+                            sync issues
                         </Badge>
                     </div>
                     <p class="mt-1 max-w-3xl text-sm leading-5 text-gray-500 dark:text-gray-300">
-                        Connect fuel card providers or fuel management systems, import provider bills as fuel transactions, match them to vehicles and trips, then create linked fuel reports for operations.
+                        Connect fuel card providers or fuel management systems, import provider bills as fuel transactions, match them to vehicles and trips, then create linked fuel reports
+                        for operations.
                     </p>
                 </div>
                 <div class="flex flex-shrink-0 items-center gap-2 whitespace-nowrap">
@@ -23,12 +25,16 @@
         <div class="mx-auto flex w-full max-w-7xl flex-col gap-4 px-4 py-4 md:px-6">
             <section class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
                 {{#each this.kpiWidgets as |widget|}}
-                    <div class="fleet-ops-widget fleet-ops-kpi-tile fleetops-connectivity-kpi-tile {{widget.accentClass}} relative flex min-h-[118px] flex-col overflow-hidden rounded-md border bg-white shadow-sm transition hover:-translate-y-px hover:shadow-lg dark:bg-gray-800">
+                    <div
+                        class="fleet-ops-widget fleet-ops-kpi-tile fleetops-connectivity-kpi-tile
+                            {{widget.accentClass}}
+                            relative flex min-h-[118px] flex-col overflow-hidden rounded-md border bg-white shadow-sm transition hover:-translate-y-px hover:shadow-lg dark:bg-gray-800"
+                    >
                         <div class="flex h-full flex-col justify-between p-3">
                             <div class="flex items-start justify-between gap-2">
                                 <div class="min-w-0">
                                     <div class="truncate text-[10px] font-bold uppercase text-gray-500 dark:text-gray-400">{{widget.label}}</div>
-                                    <div class="mt-2 truncate text-[1.35rem] font-extrabold leading-none text-gray-900 dark:text-gray-50">{{widget.value}}</div>
+                                    <div class="mt-2 break-words text-lg font-extrabold leading-none text-gray-900 dark:text-gray-50">{{widget.value}}</div>
                                 </div>
                                 <div class="fleetops-connectivity-kpi-icon flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md text-[13px]">
                                     <FaIcon @icon={{widget.icon}} />
@@ -37,7 +43,11 @@
 
                             <div class="mt-3 flex items-center justify-between gap-2 text-[11px]">
                                 <span class="min-w-0 truncate text-gray-500 dark:text-gray-400">{{widget.help}}</span>
-                                <button type="button" class="inline-flex flex-shrink-0 items-center gap-1 font-semibold text-blue-600 hover:text-blue-700 dark:text-blue-300 dark:hover:text-blue-200" {{on "click" (fn this.runKpiAction widget)}}>
+                                <button
+                                    type="button"
+                                    class="inline-flex flex-shrink-0 items-center gap-1 font-semibold text-blue-600 hover:text-blue-700 dark:text-blue-300 dark:hover:text-blue-200"
+                                    {{on "click" (fn this.runKpiAction widget)}}
+                                >
                                     <span>{{widget.action}}</span>
                                     <FaIcon @icon="arrow-right" class="text-[9px]" />
                                 </button>
@@ -47,71 +57,60 @@
                 {{/each}}
             </section>
 
-            {{#if this.hasConnections}}
-                <section class="fleetops-provider-connections-panel min-w-0 overflow-hidden rounded-md border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
-                    <div class="fleetops-provider-connections-header border-b border-gray-200 px-4 py-3 dark:border-gray-700">
-                        <div class="min-w-0 max-w-md">
-                            <h2 class="text-sm font-bold text-gray-900 dark:text-gray-100">Connected Fuel Systems</h2>
-                            <p class="mt-1 text-xs leading-5 text-gray-500 dark:text-gray-300">Manage credentials, connection health, sync windows, and imported transaction status for each fuel integration.</p>
-                        </div>
-                        <div class="fleetops-provider-connections-actions flex min-w-0 flex-wrap items-center gap-2 lg:ml-auto lg:flex-nowrap lg:justify-end">
-                            <Layout::Resource::TabularActions
-                                @title="Connected Fuel Systems"
-                                @searchQuery={{@searchQuery}}
-                                @onSearch={{@onSearch}}
-                                @columns={{this.columns}}
-                                @bulkActions={{@bulkActions}}
-                                @controller={{@controller}}
-                                @table={{this.table}}
-                                @searchInputClass="fleetops-provider-connections-search"
-                                @filterPickerButtonClass="fleetops-provider-connections-action-button"
-                                @columnPickerButtonClass="fleetops-provider-connections-action-button"
-                            />
-                        </div>
+            <section class="fleetops-provider-connections-panel min-w-0 overflow-hidden rounded-md border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
+                <div class="fleetops-provider-connections-header border-b border-gray-200 px-4 py-3 dark:border-gray-700">
+                    <div class="min-w-0 max-w-md">
+                        <h2 class="text-sm font-bold text-gray-900 dark:text-gray-100">Connected Fuel Systems</h2>
+                        <p class="mt-1 text-xs leading-5 text-gray-500 dark:text-gray-300">Manage credentials, connection health, sync windows, and imported transaction status for each fuel
+                            integration.</p>
                     </div>
-                    <Layout::Resource::Tabular
-                        @resource="fuel-provider-connection"
-                        @title=""
-                        @withoutHeader={{true}}
-                        @searchQuery={{@searchQuery}}
-                        @onSearch={{@onSearch}}
-                        @data={{@connections}}
-                        @columns={{this.columns}}
-                        @page={{@page}}
-                        @onPageChange={{@onPageChange}}
-                        @bulkActions={{@bulkActions}}
-                        @controller={{@controller}}
-                        @setupTable={{this.setupTable}}
-                        @emptyStateComponent={{component
-                            "table/empty-state"
-                            variant="compact"
-                            icon="gas-pump"
-                            title="No fuel connections"
-                            description="Connect a fuel provider to import transactions and match them to reports."
-                            primaryText="Connect provider"
-                            primaryIcon="plus"
-                            primaryAction=this.createIntegration
-                        }}
-                    />
-                </section>
-            {{else}}
-                <section class="rounded-md border border-dashed border-gray-300 bg-white p-6 text-center shadow-sm dark:border-gray-700 dark:bg-gray-800">
-                    <div class="mx-auto flex h-11 w-11 items-center justify-center rounded-md bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-300">
-                        <FaIcon @icon="gas-pump" />
+                    <div class="fleetops-provider-connections-actions flex min-w-0 flex-wrap items-center gap-2 lg:ml-auto lg:flex-nowrap lg:justify-end">
+                        <Layout::Resource::TabularActions
+                            @title="Connected Fuel Systems"
+                            @searchQuery={{@searchQuery}}
+                            @onSearch={{@onSearch}}
+                            @columns={{this.columns}}
+                            @bulkActions={{@bulkActions}}
+                            @controller={{@controller}}
+                            @table={{this.table}}
+                            @searchInputClass="fleetops-provider-connections-search"
+                            @filterPickerButtonClass="fleetops-provider-connections-action-button"
+                            @columnPickerButtonClass="fleetops-provider-connections-action-button"
+                        />
                     </div>
-                    <h2 class="mt-3 text-sm font-bold text-gray-900 dark:text-gray-100">No fuel integrations connected yet</h2>
-                    <p class="mx-auto mt-1 max-w-2xl text-xs leading-5 text-gray-500 dark:text-gray-300">
-                        Start by connecting PetroApp or another fuel card/fuel management system. Provider bills import into Fuel Transactions, match to vehicles and trips, and create linked Fuel Reports once matched.
-                    </p>
-                    <Button class="mt-4" @icon="plus" @text="Connect Integration" @type="primary" @size="sm" @onClick={{this.createIntegration}} />
-                </section>
-            {{/if}}
+                </div>
+                <Layout::Resource::Tabular
+                    @resource="fuel-provider-connection"
+                    @title=""
+                    @withoutHeader={{true}}
+                    @searchQuery={{@searchQuery}}
+                    @onSearch={{@onSearch}}
+                    @data={{@connections}}
+                    @columns={{this.columns}}
+                    @page={{@page}}
+                    @onPageChange={{@onPageChange}}
+                    @bulkActions={{@bulkActions}}
+                    @controller={{@controller}}
+                    @setupTable={{this.setupTable}}
+                    @emptyStateComponent={{component
+                        "table/empty-state"
+                        variant="compact"
+                        icon="gas-pump"
+                        title="No fuel connections found"
+                        description="Adjust your filters or connect a fuel provider to import transactions."
+                        primaryText="Connect provider"
+                        primaryIcon="plus"
+                        primaryAction=this.createIntegration
+                    }}
+                />
+            </section>
 
             <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 flex flex-col gap-1 md:flex-row md:items-end md:justify-between">
                     <div>
                         <h2 class="text-sm font-bold text-gray-900 dark:text-gray-100">Available Fuel Integrations</h2>
-                        <p class="text-xs leading-5 text-gray-500 dark:text-gray-300">Connect providers that supply fuel card bills, purchase transactions, vehicle identifiers, station locations, or trip references.</p>
+                        <p class="text-xs leading-5 text-gray-500 dark:text-gray-300">Connect providers that supply fuel card bills, purchase transactions, vehicle identifiers, station
+                            locations, or trip references.</p>
                     </div>
                     {{#if @providersLoading}}
                         <div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-300"><Spinner /> Loading integrations</div>
@@ -120,7 +119,11 @@
 
                 <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="group flex min-h-[166px] flex-col rounded-md border border-gray-200 bg-white p-3 text-left transition hover:border-blue-300 hover:shadow-sm dark:border-gray-700 dark:bg-gray-800 dark:hover:border-blue-400" {{on "click" (fn this.openProvider provider)}}>
+                        <button
+                            type="button"
+                            class="group flex min-h-[166px] flex-col rounded-md border border-gray-200 bg-white p-3 text-left transition hover:border-blue-300 hover:shadow-sm dark:border-gray-700 dark:bg-gray-800 dark:hover:border-blue-400"
+                            {{on "click" (fn this.openProvider provider)}}
+                        >
                             <div class="flex items-start justify-between gap-3">
                                 <div class="flex min-w-0 items-start gap-3">
                                     <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">
@@ -151,4 +154,4 @@
             </section>
         </div>
     </div>
-</div>
+</div>