@fleetbase/fleetops-engine 0.6.51 → 0.6.53

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

@@ -0,0 +1,242 @@
+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';
+
+export default class FuelIntegrationFormComponent extends Component {
+    @service fetch;
+    @service notifications;
+
+    @tracked providers = [];
+    @tracked activeStep = 0;
+    @tracked connectionTestResult;
+    @tracked showDiagnostics = false;
+
+    constructor() {
+        super(...arguments);
+        this.loadProviders.perform();
+    }
+
+    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,
+        }));
+    }
+
+    get selectedProvider() {
+        return this.providers.find((provider) => provider.key === this.args.resource?.provider);
+    }
+
+    get providerCards() {
+        return this.providers.map((provider) => ({
+            ...provider,
+            selected: provider.key === this.args.resource?.provider,
+            categoryLabel: provider.category ?? provider.metadata?.category ?? 'Fuel card integration',
+        }));
+    }
+
+    get credentials() {
+        return this.args.resource?.credentials ?? {};
+    }
+
+    get syncSettings() {
+        return this.args.resource?.sync_settings ?? {};
+    }
+
+    get matchingOrder() {
+        return this.syncSettings.matching_order;
+    }
+
+    get hasRequiredCredentials() {
+        const requiredFields = this.selectedProvider?.required_fields?.filter((field) => field.required) ?? [];
+
+        return requiredFields.every((field) => {
+            const value = this.credentials[field.name];
+            return value !== null && value !== undefined && String(value).trim() !== '';
+        });
+    }
+
+    get connectionState() {
+        if (this.testConnection.isRunning) {
+            return 'testing';
+        }
+
+        if (!this.connectionTestResult) {
+            return 'idle';
+        }
+
+        return this.connectionTestResult.success ? 'success' : 'failed';
+    }
+
+    get connectionStateTitle() {
+        switch (this.connectionState) {
+            case 'testing':
+                return 'Testing provider credentials...';
+            case 'success':
+                return 'Connection verified';
+            case 'failed':
+                return 'Connection failed';
+            default:
+                return 'Ready to test';
+        }
+    }
+
+    get connectionStateMessage() {
+        if (this.connectionState === 'idle') {
+            return 'Run a live credential test before saving so operators know the integration can import fuel data.';
+        }
+
+        if (this.connectionState === 'testing') {
+            return 'The configured credentials are being checked with the fuel integration provider.';
+        }
+
+        return this.connectionTestResult?.message;
+    }
+
+    get connectionMetadataEntries() {
+        return Object.entries(this.connectionTestResult?.metadata ?? {}).map(([key, value]) => ({
+            label: key.replaceAll('_', ' '),
+            value,
+        }));
+    }
+
+    get diagnosticEntries() {
+        const entries = [
+            {
+                time: new Date().toLocaleTimeString(),
+                tone: 'info',
+                text: this.selectedProvider ? `Provider selected: ${this.selectedProvider.label}` : 'No provider selected',
+            },
+        ];
+
+        if (this.connectionTestResult) {
+            entries.push({
+                time: new Date().toLocaleTimeString(),
+                tone: this.connectionTestResult.success ? 'success' : 'danger',
+                text: this.connectionTestResult.message ?? 'Connection test returned without a message',
+            });
+        }
+
+        return entries;
+    }
+
+    get diagnosticsText() {
+        return this.diagnosticEntries.map((entry) => `[${entry.time}] ${entry.text}`).join('\n');
+    }
+
+    @task *loadProviders() {
+        try {
+            const providers = yield this.fetch.get('fuel-provider-connections/providers');
+            this.providers = providers;
+
+            if (!this.args.resource?.provider) {
+                const initialProvider = this.args.initialProviderKey ? providers.find((provider) => provider.key === this.args.initialProviderKey) : providers[0];
+                if (initialProvider) {
+                    this.selectProvider(initialProvider);
+                }
+            }
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    @task *testConnection() {
+        if (!this.selectedProvider) {
+            this.notifications.warning('Choose a fuel integration provider first.');
+            return;
+        }
+
+        if (!this.hasRequiredCredentials) {
+            this.notifications.warning('Enter the required credentials before testing.');
+            return;
+        }
+
+        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,
+            });
+        } catch (error) {
+            this.connectionTestResult = {
+                success: false,
+                message: error.message ?? 'Connection test failed.',
+                metadata: {},
+            };
+            this.notifications.serverError(error);
+        }
+    }
+
+    @action selectProvider(provider) {
+        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;
+                return credentials;
+            }, {}),
+        });
+        this.connectionTestResult = null;
+    }
+
+    @action setCredential(field, event) {
+        this.args.resource?.set('credentials', {
+            ...this.credentials,
+            [field.name]: event.target.value,
+        });
+        this.connectionTestResult = null;
+    }
+
+    @action setSyncSetting(key, eventOrValue) {
+        const value = eventOrValue?.target ? (eventOrValue.target.type === 'checkbox' ? eventOrValue.target.checked : eventOrValue.target.value) : eventOrValue;
+        this.args.resource?.set('sync_settings', {
+            ...this.syncSettings,
+            [key]: value,
+        });
+    }
+
+    @action setName(event) {
+        this.args.resource?.set('name', event.target.value);
+    }
+
+    @action toggleMatchingField(field) {
+        const current = this.matchingOrder;
+        const next = current.includes(field) ? current.filter((item) => item !== field) : [...current, field];
+
+        this.setMatchingOrder(next);
+    }
+
+    @action setMatchingOrder(next) {
+        this.args.resource?.set('sync_settings', {
+            ...this.syncSettings,
+            matching_order: next,
+        });
+    }
+
+    @action goToStep(index) {
+        this.activeStep = index;
+    }
+
+    @action nextStep() {
+        this.activeStep = Math.min(this.activeStep + 1, this.setupSteps.length - 1);
+    }
+
+    @action previousStep() {
+        this.activeStep = Math.max(this.activeStep - 1, 0);
+    }
+
+    @action copyDiagnostics() {
+        copyToClipboard(this.diagnosticsText)
+            .then(() => this.notifications.success('Connection diagnostics copied.'))
+            .catch(() => this.notifications.error('Unable to copy diagnostics.'));
+    }
+}

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

@@ -0,0 +1,154 @@
+<div class="h-full overflow-y-auto bg-gray-50 dark:bg-gray-900" ...attributes>
+    <div class="flex w-full flex-col">
+        <section class="sticky top-0 z-50 border-b border-gray-200 bg-white px-4 py-4 shadow-sm dark:border-gray-700 dark:bg-gray-900 md:px-6">
+            <div class="mx-auto flex w-full max-w-7xl flex-col gap-3 md:flex-row md:items-start md:justify-between">
+                <div class="min-w-0">
+                    <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
+                        </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.
+                    </p>
+                </div>
+                <div class="flex flex-shrink-0 items-center gap-2 whitespace-nowrap">
+                    <Button @icon="refresh" @size="sm" @helpText={{t "common.reload"}} @onClick={{@onRefresh}} />
+                    <Button @icon="plus" @text="Connect Integration" @type="primary" @size="sm" @onClick={{this.createIntegration}} />
+                </div>
+            </div>
+        </section>
+
+        <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="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>
+                                <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}} />
+                                </div>
+                            </div>
+
+                            <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)}}>
+                                    <span>{{widget.action}}</span>
+                                    <FaIcon @icon="arrow-right" class="text-[9px]" />
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                {{/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>
+                    </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>
+                    <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}}
+
+            <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>
+                    </div>
+                    {{#if @providersLoading}}
+                        <div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-300"><Spinner /> Loading integrations</div>
+                    {{/if}}
+                </div>
+
+                <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)}}>
+                            <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">
+                                        <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-[10px] uppercase text-gray-400 dark:text-gray-500">{{provider.categoryLabel}}</div>
+                                    </div>
+                                </div>
+                                <Badge @status={{if provider.connected "success" "info"}} @hideStatusDot={{true}}>
+                                    {{if provider.connected "Connected" "Available"}}
+                                </Badge>
+                            </div>
+                            <p class="mt-3 line-clamp-2 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>
+                            <div class="mt-auto flex items-center justify-between pt-3 text-xs font-semibold text-blue-600 dark:text-blue-300">
+                                <span>{{if provider.connected "Manage integration" "Connect integration"}}</span>
+                                <FaIcon @icon="arrow-right" class="transition group-hover:translate-x-0.5" />
+                            </div>
+                        </button>
+                    {{/each}}
+                </div>
+            </section>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,165 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+
+const WARNING_STATUSES = ['error', 'disabled'];
+
+export default class FuelIntegrationHubComponent extends Component {
+    @service fuelIntegrationActions;
+    @service currentUser;
+    @tracked table;
+    @tracked columns = this.args.columns ?? [];
+
+    get connections() {
+        return Array.from(this.args.connections ?? []);
+    }
+
+    get providers() {
+        return Array.from(this.args.providers ?? []);
+    }
+
+    get hasConnections() {
+        return this.connections.length > 0;
+    }
+
+    get connectedProviderKeys() {
+        return new Set(this.connections.map((connection) => connection.provider).filter(Boolean));
+    }
+
+    get providerCards() {
+        return this.providers.map((provider) => {
+            const connection = this.connections.find((record) => record.provider === provider.key);
+
+            return {
+                ...provider,
+                connection,
+                connected: Boolean(connection),
+                status: connection?.status ?? 'available',
+                categoryLabel: provider.category ?? provider.metadata?.category ?? 'Fuel card integration',
+            };
+        });
+    }
+
+    get activeConnectionCount() {
+        return this.connections.filter((connection) => !['disabled', 'archived'].includes(connection.status)).length;
+    }
+
+    get unmatchedTransactionsCount() {
+        return this.connections.reduce((total, connection) => total + Number(connection.last_sync_state?.summary?.unmatched ?? 0), 0);
+    }
+
+    get syncErrorCount() {
+        return this.connections.filter((connection) => WARNING_STATUSES.includes(connection.status) || connection.last_error).length;
+    }
+
+    get totalLiters() {
+        return this.connections.reduce((total, connection) => total + Number(connection.last_sync_state?.summary?.liters ?? 0), 0);
+    }
+
+    get totalSpend() {
+        return this.connections.reduce((total, connection) => total + Number(connection.last_sync_state?.summary?.amount ?? 0), 0);
+    }
+
+    get lastSyncLabel() {
+        const syncedAt = this.connections
+            .map((connection) => connection.last_synced_at)
+            .filter(Boolean)
+            .sort()
+            .pop();
+
+        return syncedAt ? new Date(syncedAt).toLocaleString() : 'Not synced';
+    }
+
+    get kpiWidgets() {
+        return [
+            {
+                icon: 'gas-pump',
+                label: 'Connected integrations',
+                value: this.activeConnectionCount,
+                help: 'Fuel card and fuel management accounts',
+                action: 'Connect integration',
+                actionType: 'create',
+                accentClass: 'fleetops-connectivity-kpi-accent-blue',
+            },
+            {
+                icon: 'clock-rotate-left',
+                label: 'Last sync',
+                value: this.lastSyncLabel,
+                help: 'Most recent completed import',
+                action: 'Review sync',
+                actionType: 'review',
+                accentClass: 'fleetops-connectivity-kpi-accent-green',
+            },
+            {
+                icon: 'triangle-exclamation',
+                label: 'Unmatched transactions',
+                value: this.unmatchedTransactionsCount,
+                help: this.unmatchedTransactionsCount > 0 ? 'Need vehicle or trip matching' : 'No unmatched count',
+                action: 'Review matches',
+                actionType: 'transactions',
+                accentClass: 'fleetops-connectivity-kpi-accent-amber',
+            },
+            {
+                icon: 'receipt',
+                label: 'Imported spend',
+                value: this.formatSpend,
+                help: `${this.formatLiters} imported`,
+                action: 'Open ledger',
+                actionType: 'transactions',
+                accentClass: 'fleetops-connectivity-kpi-accent-rose',
+            },
+        ];
+    }
+
+    get formatSpend() {
+        const currency = this.currentUser?.company?.currency || this.currentUser?.currency || 'USD';
+
+        if (!this.totalSpend) {
+            return `${currency} 0`;
+        }
+
+        return `${currency} ${(this.totalSpend / 100).toLocaleString(undefined, { maximumFractionDigits: 2 })}`;
+    }
+
+    get formatLiters() {
+        if (!this.totalLiters) {
+            return '0 L';
+        }
+
+        return `${Number(this.totalLiters).toLocaleString(undefined, { maximumFractionDigits: 1 })} L`;
+    }
+
+    @action openProvider(provider) {
+        if (provider.connection) {
+            return this.fuelIntegrationActions.transition.view(provider.connection);
+        }
+
+        return this.fuelIntegrationActions.transition.create(provider.key);
+    }
+
+    @action createIntegration() {
+        return this.fuelIntegrationActions.transition.create();
+    }
+
+    @action runKpiAction(widget) {
+        if (widget.actionType === 'create') {
+            return this.fuelIntegrationActions.transition.create();
+        }
+
+        if (widget.actionType === 'transactions') {
+            return this.fuelIntegrationActions.transitionTo('management.fuel-transactions.index');
+        }
+
+        const connection = this.connections[0];
+        if (connection) {
+            return this.fuelIntegrationActions.transition.view(connection);
+        }
+
+        return this.fuelIntegrationActions.transition.create();
+    }
+
+    @action setupTable(table) {
+        this.table = table;
+    }
+}

package/addon/components/fuel-integration/matching-priority.hbs

@@ -0,0 +1,76 @@
+<div class="space-y-4" ...attributes>
+    <div class="rounded-md border border-blue-100 bg-blue-50 p-3 text-xs leading-5 text-blue-800 dark:border-blue-900/60 dark:bg-blue-900/10 dark:text-blue-200">
+        <div class="font-semibold text-blue-900 dark:text-blue-100">How matching works</div>
+        <p class="mt-1">
+            Fuel transactions arrive with vehicle identifiers from the provider. Matching checks this list from top to bottom and links the transaction to the first vehicle or order found.
+        </p>
+    </div>
+
+    <div>
+        <div class="mb-2 flex items-center justify-between gap-3">
+            <h3 class="text-xs font-bold uppercase text-gray-500 dark:text-gray-400">Priority list</h3>
+            {{#if this.hasSelectedFields}}
+                <span class="text-[11px] text-gray-400 dark:text-gray-500">{{this.selectedFields.length}} active</span>
+            {{/if}}
+        </div>
+
+        {{#if this.hasSelectedFields}}
+            <div class="space-y-2">
+                {{#each this.selectedFields as |field|}}
+                    <div class="rounded-md border border-gray-200 bg-white p-3 text-xs dark:border-gray-700 dark:bg-gray-800" data-test-matching-priority-row={{field.key}}>
+                        <div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
+                            <div class="min-w-0">
+                                <div class="flex flex-wrap items-center gap-2">
+                                    <span class="rounded bg-blue-100 px-2 py-0.5 text-[10px] font-bold uppercase text-blue-700 dark:bg-blue-900/40 dark:text-blue-200" data-test-matching-priority-rank>
+                                        Priority
+                                        {{field.priority}}
+                                    </span>
+                                    <span class="font-semibold text-gray-900 dark:text-gray-100">{{field.label}}</span>
+                                </div>
+                                <div class="mt-2 text-gray-700 dark:text-gray-200" data-test-matching-priority-map>{{field.source}} -&gt; {{field.target}}</div>
+                                <p class="mt-1 text-gray-500 dark:text-gray-300">{{field.description}}</p>
+                            </div>
+
+                            {{#if @editable}}
+                                <div class="flex flex-shrink-0 items-center gap-1">
+                                    <Button data-test-matching-move-up={{field.key}} @icon="arrow-up" @size="xs" @helpText="Move earlier" @disabled={{not field.canMoveUp}} @onClick={{fn this.moveField field -1}} />
+                                    <Button data-test-matching-move-down={{field.key}} @icon="arrow-down" @size="xs" @helpText="Move later" @disabled={{not field.canMoveDown}} @onClick={{fn this.moveField field 1}} />
+                                    <Button data-test-matching-remove={{field.key}} @icon="times" @size="xs" @helpText="Remove from matching" @onClick={{fn this.removeField field}} />
+                                </div>
+                            {{/if}}
+                        </div>
+                    </div>
+                {{/each}}
+            </div>
+        {{else}}
+            <div class="rounded-md border border-dashed border-gray-300 bg-white p-5 text-center text-xs leading-5 text-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300" data-test-matching-empty-state>
+                No automatic identifiers are selected. Imported transactions will stay unmatched until reviewed manually.
+            </div>
+        {{/if}}
+    </div>
+
+    {{#if @editable}}
+        <div>
+            <div class="mb-2 flex items-center justify-between gap-3">
+                <h3 class="text-xs font-bold uppercase text-gray-500 dark:text-gray-400">Available identifiers</h3>
+                {{#unless this.availableFields.length}}
+                    <span class="text-[11px] text-gray-400 dark:text-gray-500">All identifiers are active</span>
+                {{/unless}}
+            </div>
+
+            {{#if this.availableFields.length}}
+                <div class="grid grid-cols-1 gap-2 md:grid-cols-2">
+                    {{#each this.availableFields as |field|}}
+                        <button type="button" class="rounded-md border border-gray-200 bg-white p-3 text-left text-xs transition hover:border-blue-300 hover:bg-blue-50 dark:border-gray-700 dark:bg-gray-800 dark:hover:border-blue-400 dark:hover:bg-blue-900/10" data-test-matching-available={{field.key}} {{on "click" (fn this.addField field)}}>
+                            <div class="flex items-center justify-between gap-2">
+                                <span class="font-semibold text-gray-900 dark:text-gray-100">{{field.label}}</span>
+                                <FaIcon @icon="plus" class="text-blue-600 dark:text-blue-300" />
+                            </div>
+                            <div class="mt-2 text-gray-600 dark:text-gray-300">{{field.source}} -&gt; {{field.target}}</div>
+                        </button>
+                    {{/each}}
+                </div>
+            {{/if}}
+        </div>
+    {{/if}}
+</div>