@fleetbase/fleetops-engine 0.6.50 → 0.6.52

package/addon/components/telematic/hub.hbs

@@ -0,0 +1,149 @@
+<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">Connectivity Hub</h1>
+                        <Badge @status={{if this.healthWarningCount "warning" "success"}} @hideStatusDot={{true}}>
+                            {{this.healthWarningCount}} warnings
+                        </Badge>
+                    </div>
+                    <p class="mt-1 max-w-3xl text-sm leading-5 text-gray-500 dark:text-gray-300">
+                        Connect telematics providers, sync devices, attach them to vehicles, and monitor telemetry health from one workflow.
+                    </p>
+                </div>
+                <div class="flex flex-shrink-0 items-center gap-2 whitespace-nowrap">
+                    <Button @icon="refresh" @size="sm" @helpText={{t "common.reload"}} @onClick={{this.refresh}} />
+                    <Button @icon="plus" @text="Connect Provider" @type="primary" @size="sm" @onClick={{this.telematicActions.transition.create}} />
+                </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.55rem] 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.hasProviderConnections}}
+                <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">Provider Connections</h2>
+                            <p class="mt-1 text-xs leading-5 text-gray-500 dark:text-gray-300">Manage connected provider accounts, review sync status, and open a connection to sync devices or update settings.</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="Provider Connections"
+                                @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="telematic"
+                        @title=""
+                        @withoutHeader={{true}}
+                        @searchQuery={{@searchQuery}}
+                        @onSearch={{@onSearch}}
+                        @data={{@integrations}}
+                        @columns={{this.columns}}
+                        @page={{@page}}
+                        @onPageChange={{@onPageChange}}
+                        @bulkActions={{@bulkActions}}
+                        @controller={{@controller}}
+                        @setupTable={{this.setupTable}}
+                        @emptyStateComponent={{component
+                            "table/empty-state"
+                            variant="compact"
+                            icon="satellite-dish"
+                            title="No provider connections"
+                            description="Connect a telematics provider to sync devices, events, and vehicle attachments."
+                            primaryText="Connect provider"
+                            primaryIcon="plus"
+                            primaryAction=this.telematicActions.transition.create
+                            docsSlug="fleet-ops/connectivity/telematics/overview"
+                            docsTitle="Telematics guide"
+                            docsText="Telematics guide"
+                        }}
+                    />
+                </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">Native Providers</h2>
+                        <p class="text-xs leading-5 text-gray-500 dark:text-gray-300">Start with a provider connection, then sync devices and attach them to vehicles.</p>
+                    </div>
+                    {{#if @providersLoading}}
+                        <div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-300"><Spinner /> Loading providers</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-[132px] 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">
+                                    <Image src={{provider.icon}} class="h-7 w-7 flex-shrink-0 rounded" />
+                                    <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.type}}</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-auto flex items-center justify-between pt-3 text-xs font-semibold text-blue-600 dark:text-blue-300">
+                                <span>{{if provider.connected "Manage connection" "Connect provider"}}</span>
+                                <FaIcon @icon="arrow-right" class="transition group-hover:translate-x-0.5" />
+                            </div>
+                        </button>
+                    {{/each}}
+                </div>
+            </section>
+        </div>
+    </div>
+</div>

package/addon/components/telematic/hub.js

@@ -0,0 +1,142 @@
+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', 'degraded', 'disconnected'];
+
+export default class TelematicHubComponent extends Component {
+    @service telematicActions;
+    @service hostRouter;
+    @tracked table;
+    @tracked columns = this.args.columns ?? [];
+
+    get integrations() {
+        return Array.from(this.args.integrations ?? []);
+    }
+
+    get providers() {
+        return Array.from(this.args.providers ?? []);
+    }
+
+    get connectedProviderKeys() {
+        return new Set(this.integrations.map((integration) => integration.provider).filter(Boolean));
+    }
+
+    get hasProviderConnections() {
+        return this.integrations.length > 0;
+    }
+
+    get providerCards() {
+        const connected = this.connectedProviderKeys;
+
+        return this.providers.map((provider) => {
+            const integration = this.integrations.find((record) => record.provider === provider.key);
+
+            return {
+                ...provider,
+                connected: connected.has(provider.key),
+                integration,
+            };
+        });
+    }
+
+    get activeProviderCount() {
+        return this.integrations.filter((integration) => !['disabled', 'archived'].includes(integration.status)).length;
+    }
+
+    get syncedDeviceCount() {
+        return this.integrations.reduce((total, integration) => total + Number(integration.meta?.last_sync_total ?? 0), 0);
+    }
+
+    get unattachedDeviceCount() {
+        return this.integrations.reduce((total, integration) => total + Number(integration.meta?.unattached_devices_count ?? 0), 0);
+    }
+
+    get healthWarningCount() {
+        return this.integrations.filter((integration) => WARNING_STATUSES.includes(integration.status) || integration.meta?.last_error || integration.meta?.last_sync_error).length;
+    }
+
+    get kpiWidgets() {
+        return [
+            {
+                icon: 'plug',
+                label: 'Provider count',
+                value: this.activeProviderCount,
+                help: 'Connected provider accounts',
+                action: 'Connect a provider',
+                routeAction: 'create',
+                accent: 'blue',
+                accentClass: 'fleetops-connectivity-kpi-accent-blue',
+            },
+            {
+                icon: 'satellite-dish',
+                label: 'Synced Devices',
+                value: this.syncedDeviceCount,
+                help: 'Discovered from providers',
+                action: 'Review synced devices',
+                routeAction: 'devices',
+                accent: 'green',
+                accentClass: 'fleetops-connectivity-kpi-accent-green',
+            },
+            {
+                icon: 'truck',
+                label: 'Unattached devices',
+                value: this.unattachedDeviceCount,
+                help: this.unattachedDeviceCount > 0 ? 'Devices need vehicles' : 'No open attachment count',
+                action: 'Attach to vehicles',
+                routeAction: 'attachments',
+                accent: 'amber',
+                accentClass: 'fleetops-connectivity-kpi-accent-amber',
+            },
+            {
+                icon: 'wave-square',
+                label: 'Health warnings',
+                value: this.healthWarningCount,
+                help: this.healthWarningCount > 0 ? 'Warnings need review' : 'No warnings',
+                action: 'Review health',
+                routeAction: 'health',
+                accent: 'rose',
+                accentClass: 'fleetops-connectivity-kpi-accent-rose',
+            },
+        ];
+    }
+
+    statusForProvider(provider) {
+        if (provider.connected) {
+            return provider.integration?.status ?? 'connected';
+        }
+
+        return 'not-connected';
+    }
+
+    @action openProvider(provider) {
+        if (provider.integration) {
+            return this.telematicActions.transition.view(provider.integration);
+        }
+
+        return this.telematicActions.transition.create(provider.key);
+    }
+
+    @action refresh() {
+        return this.telematicActions.refresh();
+    }
+
+    @action setupTable(table) {
+        this.table = table;
+    }
+
+    @action runKpiAction(widget) {
+        if (widget.routeAction === 'create') {
+            return this.telematicActions.transition.create();
+        }
+
+        const integration = this.integrations[0];
+
+        if (!integration) {
+            return this.telematicActions.transition.create();
+        }
+
+        return this.telematicActions.transition.view(integration);
+    }
+}

package/addon/components/telematic/settings.hbs

@@ -0,0 +1,152 @@
+<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-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">Provider</h2>
+                    <p class="text-xs text-gray-500 dark:text-gray-300">Provider identity is locked after the connection is created.</p>
+                </div>
+
+                <div class="flex flex-col gap-3 rounded-md border border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-900/40 md:flex-row md:items-start md:justify-between">
+                    <div class="flex min-w-0 items-start gap-3">
+                        <Image src={{this.provider.icon}} class="h-10 w-10 flex-shrink-0 rounded" />
+                        <div class="min-w-0">
+                            <div class="truncate text-sm font-bold text-gray-900 dark:text-gray-100">{{or this.provider.label @resource.provider}}</div>
+                            <p class="mt-1 max-w-3xl text-xs leading-5 text-gray-500 dark:text-gray-300">{{this.provider.description}}</p>
+                        </div>
+                    </div>
+                    <div class="flex flex-shrink-0 flex-wrap items-center gap-2">
+                        <Badge @status="info" @hideStatusDot={{true}}>{{@resource.provider}}</Badge>
+                        {{#if @resource.public_id}}
+                            <Badge @status="default" @hideStatusDot={{true}}>{{@resource.public_id}}</Badge>
+                        {{/if}}
+                    </div>
+                </div>
+            </section>
+
+            <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">Connection</h2>
+                        <p class="text-xs text-gray-500 dark:text-gray-300">Update connection naming and saved provider credentials.</p>
+                    </div>
+
+                    <div class="grid grid-cols-1 gap-2 no-input-group-padding text-xs">
+                        <InputGroup @value={{@resource.name}} @name="Connection Name" />
+
+                        {{#if (or this.credentialFields.length this.hasAdvancedCredentialFields)}}
+                            <div class="mt-2 grid grid-cols-1 gap-2 lg:grid-cols-2">
+                                {{#each this.credentialFields as |field|}}
+                                    <InputGroup
+                                        @name={{field.label}}
+                                        @value={{get @resource.credentials field.name}}
+                                        @required={{field.required}}
+                                        @type={{field.type}}
+                                        @placeholder={{field.placeholder}}
+                                        @helpText={{field.help_text}}
+                                        {{on "input" (fn this.setCredential field)}}
+                                    />
+                                {{/each}}
+                            </div>
+                            {{#if this.hasAdvancedCredentialFields}}
+                                <details class="mt-4 rounded-md border border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-900/40">
+                                    <summary class="flex cursor-pointer list-none items-center justify-between gap-3 px-3 py-2 text-xs font-semibold text-gray-700 dark:text-gray-200">
+                                        <span class="inline-flex items-center gap-2">
+                                            <FaIcon @icon="sliders" />
+                                            Advanced connection settings
+                                        </span>
+                                        <span class="text-[11px] font-normal text-gray-400 dark:text-gray-500">Endpoint overrides</span>
+                                    </summary>
+                                    <div class="border-t border-gray-200 p-3 dark:border-gray-700">
+                                        <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 no-input-group-padding text-xs">
+                                            {{#each this.advancedCredentialFields as |field|}}
+                                                <InputGroup
+                                                    @name={{field.label}}
+                                                    @value={{or (get @resource.credentials field.name) field.default_value}}
+                                                    @required={{field.required}}
+                                                    @type={{field.type}}
+                                                    @placeholder={{field.placeholder}}
+                                                    @helpText={{field.help_text}}
+                                                    {{on "input" (fn this.setCredential field)}}
+                                                />
+                                            {{/each}}
+                                        </div>
+                                    </div>
+                                </details>
+                            {{/if}}
+                        {{else}}
+                            <div class="rounded-md border border-dashed border-gray-300 p-3 text-xs text-gray-500 dark:border-gray-700 dark:text-gray-300">
+                                This provider does not define editable credential fields.
+                            </div>
+                        {{/if}}
+                    </div>
+                </div>
+
+                <aside 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">Capabilities</h2>
+                        <p class="text-xs text-gray-500 dark:text-gray-300">Provider-supported connectivity features.</p>
+                    </div>
+                    <div class="flex flex-wrap gap-2">
+                        <Badge @status={{if this.provider.supports_discovery "success" "default"}} @hideStatusDot={{true}}>Discovery</Badge>
+                        <Badge @status={{if this.provider.supports_webhooks "success" "default"}} @hideStatusDot={{true}}>Webhooks</Badge>
+                    </div>
+                </aside>
+            </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">
+                    <h2 class="text-sm font-bold text-gray-900 dark:text-gray-100">Webhook</h2>
+                    <p class="text-xs text-gray-500 dark:text-gray-300">Provider-facing URL used for inbound telemetry when supported.</p>
+                </div>
+
+                {{#if this.provider.supports_webhooks}}
+                    {{#if this.hasWebhookUrl}}
+                        <ClickToCopy @value={{this.webhookUrl}} class="block w-full">
+                            <Input @value={{this.webhookUrl}} class="form-input w-full" readonly />
+                        </ClickToCopy>
+                    {{else}}
+                        <div class="rounded-md border border-yellow-200 bg-yellow-50 p-3 text-xs text-yellow-800 dark:border-yellow-700 dark:bg-gray-800 dark:text-yellow-300">
+                            Webhook URL unavailable until this connection has a public ID.
+                        </div>
+                    {{/if}}
+                {{else}}
+                    <div class="rounded-md border border-dashed border-gray-300 p-3 text-xs text-gray-500 dark:border-gray-700 dark:text-gray-300">
+                        This provider does not require FleetOps webhook configuration.
+                    </div>
+                {{/if}}
+            </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">
+                    <h2 class="text-sm font-bold text-gray-900 dark:text-gray-100">Hardware Identity</h2>
+                    <p class="text-xs text-gray-500 dark:text-gray-300">Optional blackbox metadata for provider hardware installed in the fleet.</p>
+                </div>
+                <div class="grid grid-cols-1 gap-2 no-input-group-padding text-xs lg:grid-cols-3">
+                    <InputGroup @value={{@resource.model}} @name="Model" />
+                    <InputGroup @value={{@resource.serial_number}} @name="Serial Number" />
+                    <InputGroup @value={{@resource.firmware_version}} @name="Firmware Version" />
+                    <InputGroup @value={{@resource.imei}} @name="IMEI" />
+                    <InputGroup @value={{@resource.imsi}} @name="IMSI" />
+                    <InputGroup @value={{@resource.iccid}} @name="ICCID" />
+                </div>
+            </section>
+
+            <CustomField::Yield @subject={{@resource}} @wrapperClass="bordered-top" />
+
+            <RegistryYield @registry="fleet-ops:component:telematic:form" as |RegistryComponent|>
+                <RegistryComponent @resource={{@resource}} @controller={{@controller}} @permission={{get-write-permission @resource}} />
+            </RegistryYield>
+        </div>
+    </div>
+
+    <footer class="flex-shrink-0 border-t border-gray-200 bg-white px-4 py-3 shadow-sm dark:border-gray-700 dark:bg-gray-900 dark:shadow-sm dark:shadow-black/30 md:px-6">
+        <div class="mx-auto flex w-full max-w-6xl flex-col gap-2 md:flex-row md:items-center md:justify-between">
+            <div class="text-xs text-gray-500 dark:text-gray-300">{{@footerHelp}}</div>
+            <div class="flex items-center justify-end gap-2">
+                <Button @icon="times" @text="Cancel" @size="sm" @onClick={{@onCancel}} />
+                <Button @icon="save" @text={{if @isSaving @savingLabel @saveLabel}} @type="primary" @size="sm" @isLoading={{@isSaving}} @onClick={{@onSave}} />
+            </div>
+        </div>
+    </footer>
+</div>

package/addon/components/telematic/settings.js

@@ -0,0 +1,45 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+export default class TelematicSettingsComponent extends Component {
+    get provider() {
+        return this.args.resource?.provider_descriptor ?? {};
+    }
+
+    get credentialFields() {
+        return (this.provider.required_fields ?? []).filter((field) => !field.advanced && !field.is_endpoint);
+    }
+
+    get advancedCredentialFields() {
+        return (this.provider.required_fields ?? []).filter((field) => field.advanced || field.is_endpoint);
+    }
+
+    get hasAdvancedCredentialFields() {
+        return this.advancedCredentialFields.length > 0;
+    }
+
+    get webhookUrl() {
+        const url = this.provider.webhook_url;
+        const id = this.args.resource?.public_id;
+
+        if (!url || !id) {
+            return null;
+        }
+
+        const separator = url.includes('?') ? '&' : '?';
+        return `${url}${separator}telematic=${id}`;
+    }
+
+    get hasWebhookUrl() {
+        return Boolean(this.webhookUrl);
+    }
+
+    @action setCredential(field, { target: { value } }) {
+        const credentials = this.args.resource?.credentials ?? {};
+
+        this.args.resource?.set('credentials', {
+            ...credentials,
+            [field.name]: value,
+        });
+    }
+}

package/addon/components/telematic/tab-empty-state.hbs

@@ -0,0 +1,29 @@
+<div class="rounded-md border p-4 shadow-sm {{this.toneClass}}" ...attributes>
+    <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 {{this.iconClass}}">
+                <FaIcon @icon={{or @icon "circle-info"}} />
+            </div>
+            <div class="min-w-0">
+                <h4 class="text-sm font-bold">{{@title}}</h4>
+                {{#if @message}}
+                    <p class="mt-1 text-sm leading-5 opacity-80">{{@message}}</p>
+                {{/if}}
+                {{#if @note}}
+                    <p class="mt-2 text-xs leading-5 opacity-70">{{@note}}</p>
+                {{/if}}
+            </div>
+        </div>
+
+        {{#if (or @primaryAction @secondaryAction)}}
+            <div class="flex flex-shrink-0 flex-wrap items-center gap-2 md:justify-end">
+                {{#if @secondaryAction}}
+                    <Button @type="default" @size="xs" @icon={{@secondaryIcon}} @text={{@secondaryText}} @onClick={{@secondaryAction}} />
+                {{/if}}
+                {{#if @primaryAction}}
+                    <Button @type="primary" @size="xs" @icon={{@primaryIcon}} @text={{@primaryText}} @onClick={{@primaryAction}} />
+                {{/if}}
+            </div>
+        {{/if}}
+    </div>
+</div>

package/addon/components/telematic/tab-empty-state.js

@@ -0,0 +1,33 @@
+import Component from '@glimmer/component';
+
+export default class TelematicTabEmptyStateComponent extends Component {
+    get toneClass() {
+        switch (this.args.tone) {
+            case 'success':
+                return 'border-green-200 bg-green-50 text-green-900 dark:border-green-700 dark:bg-green-900/20 dark:text-green-100';
+            case 'warning':
+                return 'border-yellow-200 bg-yellow-50 text-yellow-900 dark:border-yellow-700 dark:bg-yellow-900/20 dark:text-yellow-100';
+            case 'danger':
+                return 'border-red-200 bg-red-50 text-red-900 dark:border-red-700 dark:bg-red-900/20 dark:text-red-100';
+            case 'info':
+                return 'border-blue-200 bg-blue-50 text-blue-900 dark:border-blue-700 dark:bg-blue-900/20 dark:text-blue-100';
+            default:
+                return 'border-gray-200 bg-white text-gray-900 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100';
+        }
+    }
+
+    get iconClass() {
+        switch (this.args.tone) {
+            case 'success':
+                return 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300';
+            case 'warning':
+                return 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-300';
+            case 'danger':
+                return 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300';
+            case 'info':
+                return 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300';
+            default:
+                return 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300';
+        }
+    }
+}

package/addon/components/vehicle/details.hbs

@@ -57,6 +57,11 @@
                 <div class="field-value">{{n-a @resource.serial_number}}</div>
             </div>
 
+            <div class="field-info-container">
+                <div class="field-name">Fuel Card Number</div>
+                <div class="field-value">{{n-a @resource.fuel_card_number}}</div>
+            </div>
+
             <div class="field-info-container">
                 <div class="field-name">Class</div>
                 <div class="field-value">{{n-a @resource.class}}</div>
@@ -697,4 +702,4 @@
     </ContentPanel>
 
     <Spacer @height="300px" />
-</div>
+</div>

package/addon/components/vehicle/form.hbs

@@ -68,6 +68,7 @@
             <InputGroup @value={{@resource.trim}} @name="Trim" @placeholder="Trim" />
             <InputGroup @value={{@resource.color}} @name="Color" @placeholder="Vehicle Color" />
             <InputGroup @value={{@resource.serial_number}} @name="Serial Number" @placeholder="Serial Number" />
+            <InputGroup @value={{@resource.fuel_card_number}} @name="Fuel Card Number" @placeholder="Fuel Card Number" />
             <InputGroup @value={{@resource.class}} @name="Class" @placeholder="Class" />
 
             {{! Assignment & Status }}
@@ -607,4 +608,4 @@
     <ContentPanel @title={{t "common.metadata"}} @open={{true}} @wrapperClass="bordered-top">
         <MetadataEditor @value={{@resource.meta}} @onChange={{fn (mut @resource.meta)}} />
     </ContentPanel>
-</div>
+</div>