@fleetbase/fleetops-engine 0.6.20 → 0.6.22

package/addon/components/sensor/form.hbs

@@ -1,75 +1,141 @@
 <div class="form-wrapper" ...attributes>
-    <ContentPanel @title="Sensor Details" @open={{true}} @wrapperClass="bordered-top">
+    <ContentPanel @title="Integration" @open={{true}} @wrapperClass="bordered-top">
         <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 lg:gap-2 no-input-group-padding text-xs">
-            <InputGroup @name="Name" @wrapperClass="col-span-2">
-                <Input @value={{@resource.name}} @type="text" class="w-full form-input" placeholder="Name" disabled={{cannot-write @resource}} />
+            <InputGroup @name={{t "device.fields.telematic"}}>
+                <ModelSelect
+                    @modelName="telematic"
+                    @selectedModel={{@resource.telematic}}
+                    @placeholder="Select Telematic"
+                    @triggerClass="form-select form-input"
+                    @infiniteScroll={{false}}
+                    @renderInPlace={{true}}
+                    @onChange={{this.selectTelematic}}
+                    @disabled={{cannot-write @resource}}
+                    as |model|
+                >
+                    <div class="space-x-2 text-sm">
+                        <div class="inline-block align-top">
+                            <div class="hide-from-trigger h-1.5 w-full" />
+                            <Image src={{model.provider_descriptor.icon}} class="w-5 h-5" />
+                        </div>
+                        <div class="inline-block">
+                            <div class="font-semibold normalize-in-trigger">{{or model.name model.public_id}}</div>
+                            <div class="hide-from-trigger">{{n-a model.provider_descriptor.label (titleize model.provider)}}</div>
+                        </div>
+                    </div>
+                </ModelSelect>
             </InputGroup>
 
-            <InputGroup @name="Sensor Type">
+            <InputGroup @name="Device">
+                <ModelSelect
+                    @modelName="device"
+                    @selectedModel={{@resource.device}}
+                    @placeholder="Select Device"
+                    @triggerClass="form-select form-input"
+                    @infiniteScroll={{false}}
+                    @renderInPlace={{true}}
+                    @onChange={{fn (mut @resource.device)}}
+                    @onChangeId={{fn (mut @resource.device_uuid)}}
+                    @disabled={{cannot-write @resource}}
+                    as |model|
+                >
+                    <div class="text-sm">
+                        <div class="font-semibold normalize-in-trigger">{{model.name}}</div>
+                        <div class="hide-from-trigger">{{n-a model.serial_number}}</div>
+                    </div>
+                </ModelSelect>
+            </InputGroup>
+
+            <InputGroup @name="Report Frequency (Seconds)" @type="number">
+                <Input
+                    @value={{@resource.report_frequency_sec}}
+                    @type="number"
+                    class="w-full form-input"
+                    placeholder="Frequency of sensor reporting in seconds"
+                    disabled={{cannot-write @resource}}
+                />
+            </InputGroup>
+        </div>
+    </ContentPanel>
+
+    <ContentPanel @title="Identity" @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 lg:gap-2 no-input-group-padding text-xs">
+            <InputGroup @name="Name" @value={{@resource.name}} @wrapperClass="col-span-2" disabled={{cannot-write @resource}} />
+            <InputGroup @name="Serial Number" @value={{@resource.serial_number}} @wrapperClass="col-span-2" disabled={{cannot-write @resource}} />
+            <InputGroup @name="Internal ID" @value={{@resource.internal_id}} disabled={{cannot-write @resource}} />
+            <InputGroup @name="Unit" @value={{@resource.unit}} disabled={{cannot-write @resource}} />
+            <InputGroup @name="Type" @wrapperClass="col-span-2"> 
                 <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                     <PowerSelect
-                        @options={{this.sensorTypeOptions}}
-                        @selected={{@resource.sensor_type}}
-                        @onChange={{fn (mut @resource.sensor_type)}}
-                        @placeholder="Select Sensor Type"
+                        @options={{get-fleet-ops-options "sensorTypes"}}
+                        @selected={{find-by "value" @resource.type (get-fleet-ops-options "sensorTypes")}}
+                        @onChange={{set-model-attr @resource "type"}}
+                        @placeholder={{t "common.select-field" field=(t "common.type")}}
                         @triggerClass="form-select form-input"
                         @disabled={{cannot-write @resource}}
-                        as |type|
+                        as |option|
                     >
-                        {{smart-humanize type}}
+                        <div class="text-sm">
+                            <div class="font-semibold normalize-in-trigger">{{option.label}}</div>
+                            <div class="hide-from-trigger">{{option.description}}</div>
+                        </div>
                     </PowerSelect>
                 </div>
             </InputGroup>
+        </div>
+    </ContentPanel>
 
-            <InputGroup @name="Unit">
-                <Input @value={{@resource.unit}} @type="text" class="w-full form-input" placeholder="Unit (e.g., °C, PSI, %)" disabled={{cannot-write @resource}} />
-            </InputGroup>
-
-            <InputGroup @name="Minimum Threshold" @type="number">
-                <Input @value={{@resource.min_threshold}} @type="number" class="w-full form-input" placeholder="Minimum Threshold" disabled={{cannot-write @resource}} />
+    <ContentPanel @title="Threshold" @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 lg:gap-2 no-input-group-padding text-xs">
+            <InputGroup @name="Min Threshold" @type="number">
+                <Input
+                    @value={{@resource.min_threshold}}
+                    @type="number"
+                    class="w-full form-input"
+                    placeholder={{t "sensor.fields.min-threshold-placeholder"}}
+                    disabled={{cannot-write @resource}}
+                />
             </InputGroup>
 
-            <InputGroup @name="Maximum Threshold" @type="number">
-                <Input @value={{@resource.max_threshold}} @type="number" class="w-full form-input" placeholder="Maximum Threshold" disabled={{cannot-write @resource}} />
+            <InputGroup @name="Max Threshold" @type="number">
+                <Input
+                    @value={{@resource.max_threshold}}
+                    @type="number"
+                    class="w-full form-input"
+                    placeholder={{t "sensor.fields.max-threshold-placeholder"}}
+                    disabled={{cannot-write @resource}}
+                />
             </InputGroup>
 
-            <InputGroup @name="Report Frequency (seconds)" @type="number">
-                <Input @value={{@resource.report_frequency_sec}} @type="number" class="w-full form-input" placeholder="Report Frequency" disabled={{cannot-write @resource}} />
-            </InputGroup>
+            <div class="col-span-2">
+                <div class="mt-2">
+                    <Checkbox @value={{@resource.threshold_inclusive}} @onChange={{fn (mut @resource.threshold_inclusive)}}>Threshold Inclusive</Checkbox>
+                </div>
+            </div>
+        </div>
+    </ContentPanel>
 
-            <InputGroup @name="Status">
+    <ContentPanel @title="Warranty & Status" @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 lg:gap-2 no-input-group-padding text-xs">
+            <InputGroup @name={{t "common.status"}}>
                 <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                     <PowerSelect
-                        @options={{this.statusOptions}}
-                        @selected={{@resource.status}}
-                        @onChange={{fn (mut @resource.status)}}
-                        @placeholder="Select Status"
+                        @options={{get-fleet-ops-options "sensorStatuses"}}
+                        @selected={{find-by "value" @resource.status (get-fleet-ops-options "sensorStatuses")}}
+                        @onChange={{set-model-attr @resource "status"}}
+                        @placeholder={{t "common.select-field" field=(t "common.status")}}
                         @triggerClass="form-select form-input"
                         @disabled={{cannot-write @resource}}
-                        as |status|
+                        as |option|
                     >
-                        {{smart-humanize status}}
+                        <div class="text-sm">
+                            <div class="font-semibold normalize-in-trigger">{{option.label}}</div>
+                            <div class="hide-from-trigger">{{option.description}}</div>
+                        </div>
                     </PowerSelect>
                 </div>
             </InputGroup>
 
-            <InputGroup @name="Device">
-                <ModelSelect
-                    @modelName="device"
-                    @selectedModel={{@resource.device}}
-                    @placeholder="Select Device"
-                    @triggerClass="form-select form-input"
-                    @infiniteScroll={{false}}
-                    @renderInPlace={{true}}
-                    @onChange={{fn (mut @resource.device)}}
-                    @onChangeId={{fn (mut @resource.device_uuid)}}
-                    @disabled={{cannot-write @resource}}
-                    as |model|
-                >
-                    {{model.device_name}}
-                </ModelSelect>
-            </InputGroup>
-
             <InputGroup @name="Warranty">
                 <ModelSelect
                     @modelName="warranty"
@@ -86,23 +152,6 @@
                     {{model.policy_number}} - {{model.provider}}
                 </ModelSelect>
             </InputGroup>
-
-            <div class="col-span-2">
-                <label class="flex items-center space-x-2">
-                    <input
-                        type="checkbox"
-                        checked={{@resource.threshold_inclusive}}
-                        {{on "change" (fn (mut @resource.threshold_inclusive) (not @resource.threshold_inclusive))}}
-                        disabled={{cannot-write @resource}}
-                        class="form-checkbox"
-                    />
-                    <span class="text-xs">Threshold Inclusive</span>
-                </label>
-            </div>
-
-            <RegistryYield @registry="fleet-ops:component:sensor:form:details" as |RegistryComponent|>
-                <RegistryComponent @resource={{@resource}} @controller={{@controller}} @permission={{get-write-permission @resource}} />
-            </RegistryYield>
         </div>
     </ContentPanel>
 
@@ -111,4 +160,4 @@
     <RegistryYield @registry="fleet-ops:component:sensor:form" as |RegistryComponent|>
         <RegistryComponent @resource={{@resource}} @controller={{@controller}} @permission={{get-write-permission @resource}} />
     </RegistryYield>
-</div>
+</div>

package/addon/components/sensor/form.js

@@ -1,29 +1,41 @@
 import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { task } from 'ember-concurrency';
 
 export default class SensorFormComponent extends Component {
-    /**
-     * Sensor type options
-     */
-    sensorTypeOptions = [
-        'temperature',
-        'door_status',
-        'fuel_level',
-        'tire_pressure',
-        'humidity',
-        'speed',
-        'acceleration',
-        'gyroscope',
-        'gps',
-        'battery',
-        'voltage',
-        'current',
-        'pressure',
-        'weight',
-        'proximity',
-    ];
+    @service fetch;
+    @service currentUser;
+    @service notifications;
 
-    /**
-     * Status options for sensors
-     */
-    statusOptions = ['active', 'inactive', 'calibrating', 'maintenance', 'error'];
+    @action selectTelematic(telematic) {
+        this.args.resource.setProperties({
+            telematic,
+            telematic_uuid: telematic.id,
+            provider: telematic.provider,
+        });
+    }
+
+    @task *handlePhotoUpload(file) {
+        try {
+            yield this.fetch.uploadFile.perform(
+                file,
+                {
+                    path: `uploads/${this.currentUser.companyId}/sensors/${this.args.resource.id}`,
+                    subject_uuid: this.args.resource.id,
+                    subject_type: 'fleet-ops:sensor',
+                    type: 'sensor_photo',
+                },
+                (uploadedFile) => {
+                    this.args.resource.setProperties({
+                        photo_uuid: uploadedFile.id,
+                        photo_url: uploadedFile.url,
+                        photo: uploadedFile,
+                    });
+                }
+            );
+        } catch (err) {
+            this.notifications.error('Unable to upload photo: ' + err.message);
+        }
+    }
 }

package/addon/components/sensor/panel-header.hbs

@@ -0,0 +1,32 @@
+<div class="px-4 py-2">
+    <div class="flex flex-1 flex-row items-start justify-between">
+        <div class="flex flex-row space-x-3">
+            <div class="flex items-start justify-start rounded-full">
+                <Image src={{@resource.photo_url}} @fallbackSrc={{config "defaultValues.placeholderImage"}} alt={{@resource.displayName}} height="48" width="48" class="h-14 w-14 rounded-full shadow-sm" />
+                <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
+                    <InputInfo @text={{@resource.displayName}} />
+                </Attach::Tooltip>
+            </div>
+            <div class="flex flex-col">
+                <h1 class="text-gray-900 dark:text-white font-semibold text-lg">{{@resource.displayName}}</h1>
+                <div>
+                    <div class="text-xs text-gray-400 dark:text-gray-500">{{n-a (get-fleet-ops-option-label "sensorTypes" @resource.type)}}</div>
+                    <div class="text-xs text-gray-400 dark:text-gray-500">{{n-a @resource.serial_number}}</div>
+                </div>
+                <Badge @status={{if @resource.online "online" "offline"}}>{{if @resource.online (t "common.online") (t "common.offline")}}</Badge>
+            </div>
+        </div>
+        <div class="next-view-header-right">
+            <Layout::Resource::Panel::HeaderActions
+                @resource={{@resource}}
+                @saveTask={{@saveTask}}
+                @saveOptions={{@saveOptions}}
+                @saveDisabled={{@saveDisabled}}
+                @pojoResource={{@pojoResource}}
+                @authSchema={{@authSchema}}
+                @actionButtons={{@actionButtons}}
+                @onPressCancel={{@onPressCancel}}
+            />
+        </div>
+    </div>
+</div>

package/addon/components/sensor/panel-header.js

@@ -0,0 +1,3 @@
+import Component from '@glimmer/component';
+
+export default class SensorPanelHeaderComponent extends Component {}

package/addon/components/telematic/details.hbs

@@ -1,16 +1,45 @@
 <div class="details-wrapper" ...attributes>
-    <ContentPanel @title="Details" @open={{true}} @wrapperClass="bordered-top">
-        <div class="grid grid-cols-1 lg:grid-cols-3 gap-2">
-            <div class="field-info-container">
-                <div class="field-name">Name</div>
-                <div class="field-value">{{n-a @resource.name}}</div>
+    <ContentPanel @title="Telematics Provider" @open={{true}} @wrapperClass="bordered-top">
+        <div class="field-info-container">
+            <div class="field-name">Provider</div>
+            <div class="field-value">
+                <div class="flex flew-row space-x-2 text-sm">
+                    <div class="pt-1.5">
+                        <Image src={{@resource.provider_descriptor.icon}} class="w-5 h-5" />
+                    </div>
+                    <div>
+                        <div class="font-semibold">{{@resource.provider_descriptor.label}}</div>
+                        <div class="text-xs text-gray-400 dark:text-gray-500">{{n-a @resource.provider_descriptor.description}}</div>
+                    </div>
+                </div>
             </div>
+        </div>
+    </ContentPanel>
 
+    <ContentPanel @title="Integration Details" @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 lg:gap-2 no-input-group-padding text-xs">
             <div class="field-info-container">
-                <div class="field-name">Provider</div>
-                <div class="field-value">{{n-a @resource.provider}}</div>
+                <div class="field-name">Integration Name</div>
+                <div class="field-value">{{n-a @resource.name}}</div>
             </div>
 
+            {{#if @resource.provider_descriptor.supportsWebhooks}}
+                <InputGroup @name="Webhook URL" @helpText={{concat "Configure the URL in your " @resource.provider_descriptor.label " dashboard to receive real-time updates."}}>
+                    <ClickToCopy @value={{@resource.provider_descriptor.webhook_url}}>
+                        <Input @value={{@resource.provider_descriptor.webhook_url}} class="form-input" readonly />
+                    </ClickToCopy>
+                    <small class="form-text text-muted">
+                        Configure this URL in your
+                        {{@resource.provider_descriptor.label}}
+                        dashboard to receive real-time updates.
+                    </small>
+                </InputGroup>
+            {{/if}}
+        </div>
+    </ContentPanel>
+
+    <ContentPanel @title="Telematic Blackbox" @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-2">
             <div class="field-info-container">
                 <div class="field-name">Model</div>
                 <div class="field-value">{{n-a @resource.model}}</div>
@@ -53,23 +82,18 @@
                 <div class="field-value">{{n-a @resource.msisdn}}</div>
             </div>
 
-            <div class="field-info-container">
-                <div class="field-name">Warranty</div>
-                <div class="field-value">{{n-a @resource.warranty_name}}</div>
-            </div>
-
             <div class="field-info-container">
                 <div class="field-name">Last Seen</div>
-                <div class="field-value">{{format-date @resource.last_seen_at}}</div>
+                <div class="field-value">{{n-a (format-date @resource.last_seen_at)}}</div>
             </div>
 
             <div class="field-info-container">
                 <div class="field-name">Online Status</div>
                 <div class="field-value">
                     {{#if @resource.is_online}}
-                        <Badge @status="success">Online</Badge>
+                        <Badge @status="online">Online</Badge>
                     {{else}}
-                        <Badge @status="danger">Offline</Badge>
+                        <Badge @status="offline">Offline</Badge>
                     {{/if}}
                 </div>
             </div>
@@ -82,4 +106,4 @@
     </ContentPanel>
 
     <CustomField::Yield @subject={{@resource}} @viewMode={{true}} @wrapperClass="bordered-top" />
-</div>
+</div>

package/addon/components/telematic/form.hbs

@@ -1,78 +1,77 @@
 <div class="form-wrapper" ...attributes>
-    <ContentPanel @title="Telematic Details" @open={{true}} @wrapperClass="bordered-top">
+    <ContentPanel @title="Telematics Provider" @open={{true}} @wrapperClass="bordered-top">
         <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 lg:gap-2 no-input-group-padding text-xs">
-            <InputGroup @name="Name" @wrapperClass="col-span-2">
-                <Input @value={{@resource.name}} @type="text" class="w-full form-input" placeholder="Name" disabled={{cannot-write @resource}} />
-            </InputGroup>
-
-            <InputGroup @name="Provider">
-                <Input @value={{@resource.provider}} @type="text" class="w-full form-input" placeholder="Provider" disabled={{cannot-write @resource}} />
-            </InputGroup>
-
-            <InputGroup @name="Model">
-                <Input @value={{@resource.model}} @type="text" class="w-full form-input" placeholder="Model" disabled={{cannot-write @resource}} />
-            </InputGroup>
-
-            <InputGroup @name="Serial Number">
-                <Input @value={{@resource.serial_number}} @type="text" class="w-full form-input" placeholder="Serial Number" disabled={{cannot-write @resource}} />
-            </InputGroup>
-
-            <InputGroup @name="Firmware Version">
-                <Input @value={{@resource.firmware_version}} @type="text" class="w-full form-input" placeholder="Firmware Version" disabled={{cannot-write @resource}} />
-            </InputGroup>
-
-            <InputGroup @name="IMEI">
-                <Input @value={{@resource.imei}} @type="text" class="w-full form-input" placeholder="IMEI" disabled={{cannot-write @resource}} />
-            </InputGroup>
-
-            <InputGroup @name="ICCID">
-                <Input @value={{@resource.iccid}} @type="text" class="w-full form-input" placeholder="ICCID" disabled={{cannot-write @resource}} />
-            </InputGroup>
-
-            <InputGroup @name="IMSI">
-                <Input @value={{@resource.imsi}} @type="text" class="w-full form-input" placeholder="IMSI" disabled={{cannot-write @resource}} />
-            </InputGroup>
-
-            <InputGroup @name="MSISDN">
-                <Input @value={{@resource.msisdn}} @type="text" class="w-full form-input" placeholder="MSISDN" disabled={{cannot-write @resource}} />
-            </InputGroup>
-
-            <InputGroup @name="Status">
+            <InputGroup @name="Provider" @wrapperClass="col-span-2">
                 <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                     <PowerSelect
-                        @options={{this.statusOptions}}
-                        @selected={{@resource.status}}
-                        @onChange={{fn (mut @resource.status)}}
-                        @placeholder="Select Status"
+                        @options={{this.providers}}
+                        @selected={{this.selectedProvider}}
+                        @onChange={{this.selectProvider}}
+                        @placeholder="Select Provider"
                         @triggerClass="form-select form-input"
                         @disabled={{cannot-write @resource}}
-                        as |status|
+                        as |provider|
                     >
-                        {{smart-humanize status}}
+                        <div class="space-x-2 text-sm">
+                            <div class="inline-block align-top">
+                                <div class="hide-from-trigger h-1.5 w-full" />
+                                <Image src={{provider.icon}} class="w-5 h-5" />
+                            </div>
+                            <div class="inline-block">
+                                <div class="font-semibold normalize-in-trigger">{{provider.label}}</div>
+                                <div class="hide-from-trigger">{{n-a provider.description}}</div>
+                            </div>
+                        </div>
                     </PowerSelect>
                 </div>
             </InputGroup>
+        </div>
+    </ContentPanel>
 
-            <InputGroup @name="Warranty">
-                <ModelSelect
-                    @modelName="warranty"
-                    @selectedModel={{@resource.warranty}}
-                    @placeholder="Select Warranty"
-                    @triggerClass="form-select form-input"
-                    @infiniteScroll={{false}}
-                    @renderInPlace={{true}}
-                    @onChange={{fn (mut @resource.warranty)}}
-                    @onChangeId={{fn (mut @resource.warranty_uuid)}}
-                    @disabled={{cannot-write @resource}}
-                    as |model|
-                >
-                    {{model.policy_number}} - {{model.provider}}
-                </ModelSelect>
-            </InputGroup>
+    {{#if this.selectedProvider}}
+        <ContentPanel @title="Credentials" @open={{true}} @actionButtons={{this.credentialsActionButtons}} @wrapperClass="bordered-top">
+            <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 lg:gap-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={{if (eq field.type "password") "text" field.type}}
+                        @helpText={{field.help_text}}
+                        {{on "input" (fn this.setCredential field)}}
+                    />
+                {{/each}}
+            </div>
+        </ContentPanel>
+
+        <ContentPanel @title="Configure Integration" @open={{true}} @wrapperClass="bordered-top">
+            <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 lg:gap-2 no-input-group-padding text-xs">
+                <InputGroup @value={{@resource.name}} @name="Integration Name" />
+
+                {{#if this.selectedProvider.supports_webhooks}}
+                    <InputGroup @name="Webhook URL" @helpText={{concat "Configure the URL in your " this.selectedProvider.label " dashboard to receive real-time updates."}} @wrapperClass="col-span-2">
+                        <ClickToCopy @value={{this.selectedProvider.webhook_url}} class="w-full">
+                            <Input @value={{this.selectedProvider.webhook_url}} class="form-input w-full" readonly />
+                        </ClickToCopy>
+                        <small class="form-text text-muted mt-1">
+                            Configure this URL in your
+                            {{this.selectedProvider.label}}
+                            dashboard to receive real-time updates.
+                        </small>
+                    </InputGroup>
+                {{/if}}
+            </div>
+        </ContentPanel>
+    {{/if}}
 
-            <RegistryYield @registry="fleet-ops:component:telematic:form:details" as |RegistryComponent|>
-                <RegistryComponent @resource={{@resource}} @controller={{@controller}} @permission={{get-write-permission @resource}} />
-            </RegistryYield>
+    <ContentPanel @title="Telematic Blackbox" @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 gap-2 lg:grid-cols-3 gap-2 no-input-group-padding text-xs">
+            <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>
     </ContentPanel>
 
@@ -81,4 +80,4 @@
     <RegistryYield @registry="fleet-ops:component:telematic:form" as |RegistryComponent|>
         <RegistryComponent @resource={{@resource}} @controller={{@controller}} @permission={{get-write-permission @resource}} />
     </RegistryYield>
-</div>
+</div>

package/addon/components/telematic/form.js

@@ -1,8 +1,77 @@
 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';
 
 export default class TelematicFormComponent extends Component {
-    /**
-     * Status options for telematic devices
-     */
-    statusOptions = ['active', 'inactive', 'maintenance', 'retired'];
+    @service fetch;
+    @service notifications;
+    @tracked providers = [];
+    @tracked selectedProvider = this.args.resource?.provider_descriptor ?? null;
+    @tracked connectionTestResult;
+
+    get credentialsActionButtons() {
+        return [
+            {
+                size: 'xs',
+                icon: 'plug',
+                text: 'Test Connection',
+                onClick: () => this.testConnection.perform(),
+                isLoading: this.testConnection.isRunning,
+            },
+        ];
+    }
+
+    constructor() {
+        super(...arguments);
+        this.loadProviders.perform();
+    }
+
+    @action setCredential(field, { target: { value } }) {
+        const credentials = this.args.resource.credentials ?? {};
+        this.args.resource.set('credentials', {
+            ...credentials,
+            [field.name]: value,
+        });
+    }
+
+    @action selectProvider(provider) {
+        this.selectedProvider = provider;
+        this.args.resource.setProperties({
+            provider: provider.key,
+            credentials: (provider.required_fields ?? {}).reduce((acc, item) => {
+                acc[item.name] = null;
+                return acc;
+            }, {}),
+        });
+    }
+
+    @task *loadProviders() {
+        try {
+            const providers = yield this.fetch.get('telematics/providers');
+            this.providers = providers;
+        } catch (err) {
+            this.notifications.serverError(err);
+        }
+    }
+
+    @task *testConnection() {
+        try {
+            const result = yield this.fetch.post(`telematics/${this.selectedProvider.key}/test-credentials`, { credentials: this.args.resource.credentials });
+            this.connectionTestResult = result;
+
+            if (result.success) {
+                this.notifications.success('Connection successful!');
+            } else {
+                this.notifications.error(result.message);
+            }
+        } catch (error) {
+            this.connectionTestResult = {
+                success: false,
+                message: error.message || 'Connection test failed',
+            };
+            this.notifications.error('Connection test failed');
+        }
+    }
 }

package/addon/components/vehicle/card.hbs

@@ -1,7 +1,7 @@
 <Layout::Resource::Card ...attributes as |Card|>
-    <Card.header class={{@headerClass}}>
+    <Card.header class="{{@headerClass}} truncate">
         <div class="font-semibold">{{or @resource.name @resource.yearMakeModel}}</div>
-        <div class="text-gray-300 dark:text-gray-500 text-sm">{{or @resource.plate_number @resource.vin @resource.serial_number @resource.call_sign}}</div>
+        <div class="text-gray-300 dark:text-gray-500 text-sm">{{or @resource.plate_number @resource.vin @resource.serial_number @resource.call_sign @resource.public_id}}</div>
         {{#if (has-block "header")}}
             {{yield to="header"}}
         {{/if}}