@fleetbase/fleetops-engine 0.6.37 → 0.6.39

package/addon/components/equipment/card.hbs

@@ -0,0 +1,49 @@
+<Layout::Resource::Card ...attributes as |Card|>
+    <Card.header class="{{@headerClass}} truncate">
+        <div class="font-semibold truncate">{{or @resource.name @resource.public_id}}</div>
+        <div class="text-gray-300 dark:text-gray-500 text-sm truncate">{{or @resource.serial_number @resource.code @resource.public_id}}</div>
+        {{#if (has-block "header")}}
+            {{yield to="header"}}
+        {{/if}}
+    </Card.header>
+    <Card.body class={{@bodyClass}}>
+        <Image src={{@resource.photo_url}} @fallbackSrc={{config "defaultValues.equipmentImage"}} class="card-img-lg" />
+        <div class="mt-2 space-y-1 text-xs text-gray-500 dark:text-gray-400">
+            {{#if @resource.type}}
+                <div class="flex items-center space-x-1">
+                    <FaIcon @icon="tag" @size="xs" class="text-gray-400" />
+                    <span>{{humanize @resource.type}}</span>
+                </div>
+            {{/if}}
+            {{#if @resource.status}}
+                <div class="flex items-center space-x-1">
+                    <FaIcon @icon="circle" @size="xs" class="text-gray-400" />
+                    <span>{{humanize @resource.status}}</span>
+                </div>
+            {{/if}}
+            {{#if @resource.year}}
+                <div class="flex items-center space-x-1">
+                    <FaIcon @icon="calendar" @size="xs" class="text-gray-400" />
+                    <span>{{@resource.year}}</span>
+                </div>
+            {{/if}}
+        </div>
+        {{#if (has-block "body")}}
+            {{yield to="body"}}
+        {{/if}}
+    </Card.body>
+    <Card.footer class={{@footerClass}}>
+        <div class="flex flex-row items-center space-x-1">
+            <Button @icon="eye" @size="xs" @onClick={{fn this.equipmentActions.transition.view @resource}} />
+            <Button @icon="pencil" @size="xs" @onClick={{fn this.equipmentActions.transition.edit @resource}} />
+            <Button @icon="trash" @size="xs" @type="danger" @onClick={{fn this.equipmentActions.delete @resource}} />
+        </div>
+        {{#if (has-block "footer")}}
+            {{yield to="footer"}}
+        {{/if}}
+        <div class="mt-1">
+            <div class="text-gray-300 dark:text-gray-500 text-xs">Last Modified: {{@resource.updatedAt}}</div>
+        </div>
+    </Card.footer>
+</Layout::Resource::Card>
+{{yield}}

package/addon/components/equipment/card.js

@@ -0,0 +1,6 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+
+export default class EquipmentCardComponent extends Component {
+    @service equipmentActions;
+}

package/addon/components/equipment/details.hbs

@@ -1,63 +1,75 @@
-<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="next-content-panel-wrapper" ...attributes>
+
+    {{! ===== OVERVIEW ===== }}
+    <ContentPanel @title="Overview" @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 text-xs dark:text-gray-100">
+
+            {{! — Photo — }}
+            {{#if (or @resource.photo_url (config "defaultValues.placeholderImage"))}}
+                <div class="col-span-2 flex items-start gap-3 pb-2">
+                    <div class="border border-dashed border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-600 rounded-lg flex items-center justify-center w-16 h-16 flex-shrink-0">
+                        <Image
+                            alt={{@resource.name}}
+                            src={{or @resource.photo_url (config "defaultValues.placeholderImage")}}
+                            @fallbackSrc={{config "defaultValues.placeholderImage"}}
+                            class="w-12 h-12 object-contain"
+                        />
+                    </div>
+                    <div>
+                        <p class="font-semibold text-sm text-gray-800 dark:text-gray-100">{{n-a @resource.name}}</p>
+                        <p class="text-[11px] text-gray-400 dark:text-gray-500 font-mono">{{n-a @resource.public_id}}</p>
+                    </div>
+                </div>
+            {{/if}}
+
+            {{! — Identity & Classification — }}
+            <div class="col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-1">
+                Identity & Classification
+            </div>
             <div class="field-info-container">
-                <div class="field-name">Name</div>
-                <div class="field-value">{{n-a @resource.name}}</div>
+                <div class="field-name">ID</div>
+                <ClickToCopy @value={{@resource.public_id}} class="field-value font-mono">{{n-a @resource.public_id}}</ClickToCopy>
             </div>
-
             <div class="field-info-container">
                 <div class="field-name">Code</div>
-                <div class="field-value">{{n-a @resource.code}}</div>
+                <ClickToCopy @value={{@resource.code}} class="field-value font-mono">{{n-a @resource.code}}</ClickToCopy>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Name</div>
+                <div class="field-value">{{n-a @resource.name}}</div>
             </div>
-
             <div class="field-info-container">
                 <div class="field-name">Type</div>
-                <div class="field-value">{{smart-humanize @resource.type}}</div>
+                <div class="field-value">{{n-a (smart-humanize @resource.type)}}</div>
             </div>
-
             <div class="field-info-container">
                 <div class="field-name">Status</div>
                 <div class="field-value">
                     <Badge @status={{@resource.status}}>{{smart-humanize @resource.status}}</Badge>
                 </div>
             </div>
-
             <div class="field-info-container">
                 <div class="field-name">Serial Number</div>
-                <div class="field-value">{{n-a @resource.serial_number}}</div>
+                <div class="field-value font-mono">{{n-a @resource.serial_number}}</div>
             </div>
 
+            {{! — Make & Model — }}
+            <div class="col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-3">
+                Make & Model
+            </div>
             <div class="field-info-container">
                 <div class="field-name">Manufacturer</div>
                 <div class="field-value">{{n-a @resource.manufacturer}}</div>
             </div>
-
             <div class="field-info-container">
                 <div class="field-name">Model</div>
                 <div class="field-value">{{n-a @resource.model}}</div>
             </div>
 
-            <div class="field-info-container">
-                <div class="field-name">Purchased At</div>
-                <div class="field-value">{{format-date @resource.purchased_at}}</div>
-            </div>
-
-            <div class="field-info-container">
-                <div class="field-name">Purchase Price</div>
-                <div class="field-value">{{format-currency @resource.purchase_price}}</div>
+            {{! — Assignment — }}
+            <div class="col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-3">
+                Assignment
             </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">Equipped To</div>
-                <div class="field-value">{{n-a @resource.equipped_to_name}}</div>
-            </div>
-
             <div class="field-info-container">
                 <div class="field-name">Equipped Status</div>
                 <div class="field-value">
@@ -68,28 +80,55 @@
                     {{/if}}
                 </div>
             </div>
+            {{#if @resource.is_equipped}}
+                <div class="field-info-container">
+                    <div class="field-name">Equipped To</div>
+                    <div class="field-value">{{n-a @resource.equipped_to_name}}</div>
+                </div>
+            {{/if}}
+        </div>
+    </ContentPanel>
 
+    {{! ===== FINANCIALS ===== }}
+    <ContentPanel @title="Financials" @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 text-xs dark:text-gray-100">
+            <div class="field-info-container">
+                <div class="field-name">Purchase Price</div>
+                <div class="field-value">{{format-currency @resource.purchase_price @resource.currency}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Purchased At</div>
+                <div class="field-value">{{n-a (format-date-fns @resource.purchased_at "dd MMM yyyy")}}</div>
+            </div>
             <div class="field-info-container">
                 <div class="field-name">Age</div>
                 <div class="field-value">{{n-a @resource.age_in_days}} days</div>
             </div>
-
             <div class="field-info-container">
                 <div class="field-name">Depreciated Value</div>
-                <div class="field-value">{{format-currency @resource.depreciated_value}}</div>
+                <div class="field-value">{{format-currency @resource.depreciated_value @resource.currency}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Currency</div>
+                <div class="field-value">{{n-a @resource.currency}}</div>
             </div>
         </div>
     </ContentPanel>
 
-    <CustomField::Yield @subject={{@resource}} @viewMode={{true}} @wrapperClass="bordered-top" />
-
-    <ContentPanel @title="Photo" @open={{true}} @wrapperClass="bordered-top">
-        <div class="flex px-1">
-            <div class="border border-dashed border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-600 rounded-lg flex items-center justify-center">
-                <div class="flex items-center justify-center h-20 w-24">
-                    <Image alt={{@resource.name}} src={{or @resource.photo_url (config "defaultValues.equipmentImage")}} @fallbackSrc={{config "defaultValues.equipmentImage"}} class="w-12 h-12" />
+    {{! ===== WARRANTY ===== }}
+    {{#if @resource.warranty_name}}
+        <ContentPanel @title="Warranty" @open={{true}} @wrapperClass="bordered-top">
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 text-xs dark:text-gray-100">
+                <div class="field-info-container">
+                    <div class="field-name">Warranty</div>
+                    <div class="field-value">{{n-a @resource.warranty_name}}</div>
                 </div>
             </div>
-        </div>
-    </ContentPanel>
-</div>
+        </ContentPanel>
+    {{/if}}
+
+    {{! ===== CUSTOM FIELDS ===== }}
+    <CustomField::Yield @subject={{@resource}} @viewMode={{true}} @wrapperClass="bordered-top" />
+
+    <Spacer @height="200px" />
+</div>

package/addon/components/equipment/form.hbs

@@ -1,10 +1,20 @@
-<div class="form-wrapper" ...attributes>
-    <ContentPanel @title="Equipment Details" @open={{true}} @wrapperClass="bordered-top">
+<div class="equipment-form" ...attributes>
+
+    {{! ===== IDENTIFICATION (includes photo, matching vehicle/form convention) ===== }}
+    <ContentPanel @title="Identification" @open={{true}} @wrapperClass="bordered-top">
+        {{! Photo row — identical structure to vehicle/form UploadButton pattern }}
         <div class="flex flex-row space-x-3 mb-3">
             <div class="flex items-center justify-start rounded-full">
-                <Image src={{@resource.photo_url}} @fallbackSrc={{config "defaultValues.equipmentImage"}} alt={{@resource.name}} height="48" width="48" class="h-14 w-14 rounded-full shadow-sm" />
+                <Image
+                    src={{@resource.photo_url}}
+                    @fallbackSrc={{config "defaultValues.placeholderImage"}}
+                    alt={{@resource.name}}
+                    height="48"
+                    width="48"
+                    class="h-14 w-14 rounded-full shadow-sm"
+                />
                 <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
-                    <InputInfo @text="Upload new photo" />
+                    <InputInfo @text="Upload a new photo" />
                 </Attach::Tooltip>
             </div>
             <div>
@@ -14,23 +24,40 @@
                     @onFileAdded={{perform this.handlePhotoUpload}}
                     @icon="upload"
                     @size="xs"
-                    @buttonText={{t "common.upload-image"}}
+                    @buttonText="Upload Image"
                     @disabled={{cannot-write @resource}}
                 />
                 <div class="px-1">
-                    <span class="text-gray-300 dark:text-gray-600 text-xs">{{t "common.upload-image-supported"}}</span>
+                    <span class="text-gray-300 dark:text-gray-600 text-xs">Supports JPG, PNG, GIF up to 10 MB</span>
                 </div>
             </div>
         </div>
+
         <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}} />
+            {{! Equipment Identification }}
+            <div class="col-span-1 lg:col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-1">
+                Equipment Details
+            </div>
+            <InputGroup @name="Name">
+                <Input @value={{@resource.name}} @type="text" class="w-full form-input" placeholder="Equipment name" disabled={{cannot-write @resource}} />
             </InputGroup>
-
             <InputGroup @name="Code">
-                <Input @value={{@resource.code}} @type="text" class="w-full form-input" placeholder="Equipment Code" disabled={{cannot-write @resource}} />
+                <Input @value={{@resource.code}} @type="text" class="w-full form-input" placeholder="Internal code or reference" disabled={{cannot-write @resource}} />
+            </InputGroup>
+            <InputGroup @name="Serial Number">
+                <Input @value={{@resource.serial_number}} @type="text" class="w-full form-input" placeholder="Manufacturer serial number" disabled={{cannot-write @resource}} />
+            </InputGroup>
+            <InputGroup @name="Manufacturer">
+                <Input @value={{@resource.manufacturer}} @type="text" class="w-full form-input" placeholder="Manufacturer name" disabled={{cannot-write @resource}} />
+            </InputGroup>
+            <InputGroup @name="Model">
+                <Input @value={{@resource.model}} @type="text" class="w-full form-input" placeholder="Model designation" disabled={{cannot-write @resource}} />
             </InputGroup>
 
+            {{! Type & Status }}
+            <div class="col-span-1 lg:col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-3">
+                Type & Status
+            </div>
             <InputGroup @name="Type">
                 <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                     <PowerSelect
@@ -46,7 +73,6 @@
                     </PowerSelect>
                 </div>
             </InputGroup>
-
             <InputGroup @name="Status">
                 <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                     <PowerSelect
@@ -62,45 +88,85 @@
                     </PowerSelect>
                 </div>
             </InputGroup>
+        </div>
+    </ContentPanel>
 
-            <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="Manufacturer">
-                <Input @value={{@resource.manufacturer}} @type="text" class="w-full form-input" placeholder="Manufacturer" 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}} />
+    {{! ===== ASSIGNMENT ===== }}
+    <ContentPanel @title="Assignment" @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="col-span-1 lg:col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-1">
+                Equipped To
+            </div>
+            <InputGroup @name="Asset Type">
+                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                    <PowerSelect
+                        @options={{this.equipableTypeOptions}}
+                        @selected={{this.selectedEquipableType}}
+                        @onChange={{this.onEquipableTypeChange}}
+                        @placeholder="Select asset type"
+                        @triggerClass="form-select form-input"
+                        @disabled={{cannot-write @resource}}
+                        as |option|
+                    >
+                        {{option.label}}
+                    </PowerSelect>
+                </div>
             </InputGroup>
+            {{#if this.equipableModelName}}
+                <InputGroup @name="Asset">
+                    <ModelSelect
+                        @modelName={{this.equipableModelName}}
+                        @selectedModel={{@resource.equipable}}
+                        @placeholder="Select asset to equip on"
+                        @triggerClass="form-select form-input"
+                        @infiniteScroll={{false}}
+                        @renderInPlace={{true}}
+                        @onChange={{this.assignEquipable}}
+                        @disabled={{cannot-write @resource}}
+                        as |model|
+                    >
+                        {{or model.name model.public_id}}
+                    </ModelSelect>
+                </InputGroup>
+            {{/if}}
+        </div>
+    </ContentPanel>
 
-            <InputGroup @name="Purchased At">
-                <DatePicker
-                    @value={{@resource.purchased_at}}
-                    @onChange={{fn (mut @resource.purchased_at)}}
-                    @placeholder="Select Purchase Date"
-                    @disabled={{cannot-write @resource}}
-                    class="w-full form-input"
-                />
+    {{! ===== PURCHASE & WARRANTY ===== }}
+    <ContentPanel @title="Purchase & Warranty" @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="col-span-1 lg:col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-1">
+                Purchase Information
+            </div>
+            <InputGroup @name="Currency">
+                <CurrencySelect @currency={{@resource.currency}} @onCurrencyChange={{fn (mut @resource.currency)}} @triggerClass="w-full form-select" @disabled={{cannot-write @resource}} />
             </InputGroup>
-
             <InputGroup @name="Purchase Price">
                 <MoneyInput
                     class="w-full"
                     @value={{@resource.purchase_price}}
                     @currency={{or @resource.currency "USD"}}
-                    @canSelectCurrency={{true}}
-                    @onCurrencyChange={{fn (mut @resource.currency)}}
+                    @onChange={{fn (mut @resource.purchase_price)}}
                     @disabled={{cannot-write @resource}}
                 />
             </InputGroup>
+            <InputGroup @name="Purchase Date">
+                <DatePicker
+                    @value={{or (format-date-fns @resource.purchased_at "dd-MM-yyyy") null}}
+                    @onChange={{fn (mut @resource.purchased_at)}}
+                    @placeholder="DD-MM-YYYY"
+                    class="filter-date-input w-full flex-1"
+                />
+            </InputGroup>
 
-            <InputGroup @name="Warranty">
+            <div class="col-span-1 lg:col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-3">
+                Warranty
+            </div>
+            <InputGroup @name="Warranty" @wrapperClass="col-span-2">
                 <ModelSelect
                     @modelName="warranty"
                     @selectedModel={{@resource.warranty}}
-                    @placeholder="Select Warranty"
+                    @placeholder="Select Warranty (optional)"
                     @triggerClass="form-select form-input"
                     @infiniteScroll={{false}}
                     @renderInPlace={{true}}
@@ -109,19 +175,23 @@
                     @disabled={{cannot-write @resource}}
                     as |model|
                 >
-                    {{model.policy_number}} - {{model.provider}}
+                    {{model.policy_number}}
+                    -
+                    {{model.provider}}
                 </ModelSelect>
             </InputGroup>
-
-            <RegistryYield @registry="fleet-ops:component:equipment:form:details" as |RegistryComponent|>
-                <RegistryComponent @resource={{@resource}} @controller={{@controller}} @permission={{get-write-permission @resource}} />
-            </RegistryYield>
         </div>
     </ContentPanel>
 
+    {{! ===== REGISTRY & METADATA ===== }}
+    <RegistryYield @registry="fleet-ops:component:equipment:form:details" as |RegistryComponent|>
+        <RegistryComponent @resource={{@resource}} @controller={{@controller}} @permission={{get-write-permission @resource}} />
+    </RegistryYield>
     <CustomField::Yield @subject={{@resource}} @wrapperClass="bordered-top" />
-
     <RegistryYield @registry="fleet-ops:component:equipment:form" as |RegistryComponent|>
         <RegistryComponent @resource={{@resource}} @controller={{@controller}} @permission={{get-write-permission @resource}} />
     </RegistryYield>
-</div>
+    <ContentPanel @title="Metadata" @open={{false}} @wrapperClass="bordered-top">
+        <MetadataEditor @value={{@resource.meta}} @onChange={{fn (mut @resource.meta)}} />
+    </ContentPanel>
+</div>

package/addon/components/equipment/form.js

@@ -1,27 +1,95 @@
 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';
 
+/**
+ * Maps a user-facing polymorphic type string to the Ember Data model name
+ * used by ModelSelect.
+ */
+const TYPE_TO_MODEL = {
+    'fleet-ops:vehicle': 'vehicle',
+    'fleet-ops:driver': 'driver',
+    'fleet-ops:equipment': 'equipment',
+};
+
 export default class EquipmentFormComponent extends Component {
+    @service fetch;
+    @service currentUser;
+    @service notifications;
+
+    /** Equipment type options. */
+    equipmentTypeOptions = ['ppe', 'refrigeration_unit', 'tool', 'liftgate', 'ramp', 'container', 'pallet_jack', 'forklift', 'safety_equipment', 'communication_device', 'other'];
+
+    /** Status options for equipment. */
+    statusOptions = ['available', 'in_use', 'maintenance', 'retired', 'lost', 'damaged'];
+
     /**
-     * Equipment type options
+     * Polymorphic equipable type options — the asset this equipment is attached to.
+     * Each entry has a `value` (stored on the model) and a `label` (displayed in the UI).
      */
-    equipmentTypeOptions = ['ppe', 'refrigeration_unit', 'tool', 'liftgate', 'ramp', 'container', 'pallet_jack', 'forklift', 'safety_equipment', 'communication_device', 'other'];
+    equipableTypeOptions = [
+        { value: 'fleet-ops:vehicle', label: 'Vehicle' },
+        { value: 'fleet-ops:driver', label: 'Driver' },
+    ];
+
+    /** Derived Ember Data model name for the currently selected equipable type. */
+    @tracked equipableModelName = null;
+
+    /** The currently selected equipable type option object (drives the PowerSelect trigger label). */
+    @tracked selectedEquipableType = null;
+
+    constructor(owner, args) {
+        super(owner, args);
+        const { resource } = args;
+        if (resource?.equipable_type) {
+            this.equipableModelName = TYPE_TO_MODEL[resource.equipable_type] ?? null;
+            this.selectedEquipableType = this.equipableTypeOptions.find((o) => o.value === resource.equipable_type) ?? null;
+        }
+    }
 
     /**
-     * Status options for equipment
+     * Handles a change to the equipable type selector. Resets the equipable
+     * relationship so a stale association is not persisted.
      */
-    statusOptions = ['available', 'in_use', 'maintenance', 'retired', 'lost', 'damaged'];
+    @action onEquipableTypeChange(option) {
+        this.selectedEquipableType = option;
+        this.args.resource.equipable_type = option.value;
+        this.args.resource.equipable_uuid = null;
+        this.args.resource.equipable = null;
+        this.equipableModelName = TYPE_TO_MODEL[option.value] ?? null;
+    }
+
+    /** Assigns the selected equipable model to the resource. */
+    @action assignEquipable(model) {
+        this.args.resource.equipable = model;
+        this.args.resource.equipable_uuid = model?.id ?? null;
+    }
 
     /**
-     * Task to handle photo upload
+     * Handles photo upload using the Fleetbase fetch service upload pattern.
      */
     @task *handlePhotoUpload(file) {
         try {
-            const response = yield file.upload(this.args.resource);
-            this.args.resource.photo_uuid = response.uuid;
-            this.args.resource.photo_url = response.url;
-        } catch (error) {
-            console.error('Photo upload failed:', error);
+            yield this.fetch.uploadFile.perform(
+                file,
+                {
+                    path: `uploads/${this.currentUser.companyId}/equipment/${this.args.resource.id}`,
+                    subject_uuid: this.args.resource.id,
+                    subject_type: 'fleet-ops:equipment',
+                    type: 'equipment_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/equipment/panel-header.hbs

@@ -0,0 +1,36 @@
+<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.name}}
+                    height="48"
+                    width="48"
+                    class="h-14 w-14 rounded-full shadow-sm"
+                />
+            </div>
+            <div class="flex flex-col">
+                <div class="flex flex-row items-center space-x-2">
+                    <h1 class="text-gray-900 dark:text-white font-semibold text-lg">{{@resource.name}}</h1>
+                    <Badge @status={{@resource.status}}>{{smart-humanize @resource.status}}</Badge>
+                </div>
+                <div class="text-xs text-gray-400 dark:text-gray-500">{{smart-humanize @resource.type}}</div>
+                <div class="text-xs text-gray-400 dark:text-gray-500">{{n-a @resource.serial_number}}</div>
+            </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/equipment/panel-header.js

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

package/addon/components/fleet/driver-listing.hbs

@@ -46,7 +46,9 @@
                     </div>
                 {{/if}}
                 {{#each this.drivers as |driver|}}
-                    <div class="flex flex-row items-center justify-between text-xs py-2 px-3 text-gray-800 border-b border-gray-200 dark:border-gray-700 dark:text-gray-100 bg-gray-50 dark:bg-gray-800">
+                    <div
+                        class="flex flex-row items-center justify-between text-xs py-2 px-3 text-gray-800 border-b border-gray-200 dark:border-gray-700 dark:text-gray-100 bg-gray-50 dark:bg-gray-800"
+                    >
                         <div class="flex flex-row items-center">
                             {{#if this.selectable}}
                                 <div class="flex items-center mr-2">

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

@@ -3,12 +3,7 @@
         <div class="mb-3 flex items-center justify-between">
             <div class="flex items-center">
                 <div class="fleet-vehicle-listing-search">
-                    <Input
-                        @type="text"
-                        {{on "input" this.onInput}}
-                        placeholder={{t "fleet.vehicle-listing.search-vehicle"}}
-                        class="w-64 form-input form-input-sm"
-                    />
+                    <Input @type="text" {{on "input" this.onInput}} placeholder={{t "fleet.vehicle-listing.search-vehicle"}} class="w-64 form-input form-input-sm" />
                 </div>
                 {{#if this.search.isRunning}}
                     <div class="mx-2">
@@ -51,7 +46,9 @@
                     </div>
                 {{/if}}
                 {{#each this.vehicles as |vehicle|}}
-                    <div class="flex flex-row items-center justify-between text-xs py-2 px-3 text-gray-800 border-b border-gray-200 dark:border-gray-700 dark:text-gray-100 bg-gray-50 dark:bg-gray-800">
+                    <div
+                        class="flex flex-row items-center justify-between text-xs py-2 px-3 text-gray-800 border-b border-gray-200 dark:border-gray-700 dark:text-gray-100 bg-gray-50 dark:bg-gray-800"
+                    >
                         <div class="flex flex-row items-center">
                             {{#if this.selectable}}
                                 <div class="flex items-center mr-2">