@fleetbase/fleetops-engine 0.6.63 → 0.6.65

package/addon/components/trailer/form.hbs

@@ -0,0 +1,447 @@
+<div class="form-wrapper trailer-form" ...attributes>
+    <RegistryYield @registry="fleet-ops:component:trailer:form:start" as |RegistryComponent|>
+        <RegistryComponent @resource={{@resource}} @controller={{@controller}} @permission={{get-write-permission @resource}} />
+    </RegistryYield>
+
+    {{! DETAILS / IDENTIFICATION }}
+    <ContentPanel @title={{t "trailer.sections.details"}} @open={{true}} @wrapperClass="bordered-top">
+        <div class="flex flex-row space-x-3 mb-3">
+            <div class="flex items-center justify-start rounded-full">
+                <Image
+                    src={{or @resource.photo_url (trailer-placeholder-image)}}
+                    @fallbackSrc={{(trailer-placeholder-image)}}
+                    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={{t "trailer.help.photo"}} />
+                </Attach::Tooltip>
+            </div>
+            <div>
+                <UploadButton
+                    @name={{t "trailer.fields.photo"}}
+                    @accept="image/*"
+                    @onFileAdded={{perform this.handlePhotoUpload}}
+                    @icon="upload"
+                    @size="xs"
+                    @buttonText={{t "common.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>
+                </div>
+            </div>
+        </div>
+
+        <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">
+                {{t "trailer.sections.identification"}}
+            </div>
+
+            <InputGroup @name={{t "trailer.fields.name"}} @helpText={{t "trailer.help.name"}}>
+                <Input @value={{@resource.name}} @type="text" class="w-full form-input" placeholder={{t "trailer.placeholders.name"}} disabled={{cannot-write @resource}} required />
+            </InputGroup>
+
+            <InputGroup @name={{t "trailer.fields.code"}} @helpText={{t "trailer.help.code"}}>
+                <Input @value={{@resource.code}} @type="text" class="w-full form-input" placeholder={{t "trailer.placeholders.code"}} disabled={{cannot-write @resource}} />
+            </InputGroup>
+
+            <InputGroup @name={{t "trailer.fields.description"}} @wrapperClass="col-span-1 lg:col-span-2">
+                <Textarea @value={{@resource.description}} class="w-full form-input" rows="2" placeholder={{t "trailer.placeholders.description"}} disabled={{cannot-write @resource}} />
+            </InputGroup>
+
+            <div class="col-span-1 lg:col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-3">
+                {{t "trailer.sections.classification"}}
+            </div>
+
+            <InputGroup @name={{t "trailer.fields.type"}} @helpText={{t "trailer.help.type"}}>
+                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                    <PowerSelect
+                        @options={{this.typeOptions}}
+                        @selected={{find-by "value" @resource.type this.typeOptions}}
+                        @onChange={{this.setType}}
+                        @placeholder={{t "trailer.placeholders.type"}}
+                        @triggerClass="form-select form-input"
+                        @disabled={{cannot-write @resource}}
+                        @searchEnabled={{true}}
+                        @searchField="label"
+                        as |option|
+                    >
+                        {{option.label}}
+                    </PowerSelect>
+                </div>
+            </InputGroup>
+
+            <InputGroup @name={{t "trailer.fields.status"}} @helpText={{t "trailer.help.status"}}>
+                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                    <PowerSelect
+                        @options={{this.statusOptions}}
+                        @selected={{find-by "value" @resource.status this.statusOptions}}
+                        @onChange={{set-model-attr @resource "status"}}
+                        @placeholder={{t "trailer.placeholders.status"}}
+                        @triggerClass="form-select form-input"
+                        @disabled={{cannot-write @resource}}
+                        as |option|
+                    >
+                        <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={{t "trailer.fields.body-type"}} @helpText={{t "trailer.help.body-type"}}>
+                <Input @value={{@resource.body_type}} @type="text" class="w-full form-input" placeholder={{t "trailer.placeholders.body-type"}} disabled={{cannot-write @resource}} />
+            </InputGroup>
+
+            <InputGroup @name={{t "trailer.fields.color"}}>
+                <Input @value={{@resource.color}} @type="text" class="w-full form-input" placeholder={{t "trailer.placeholders.color"}} disabled={{cannot-write @resource}} />
+            </InputGroup>
+
+            <InputGroup @name={{t "trailer.fields.category"}} @helpText={{t "trailer.help.category"}}>
+                <ModelSelect
+                    @modelName="category"
+                    @selectedModel={{@resource.category}}
+                    @query={{hash for="trailer"}}
+                    @placeholder={{t "trailer.placeholders.category"}}
+                    @triggerClass="form-select form-input"
+                    @infiniteScroll={{false}}
+                    @renderInPlace={{true}}
+                    @allowClear={{true}}
+                    @onChange={{this.setCategory}}
+                    @disabled={{cannot-write @resource}}
+                    as |model|
+                >
+                    {{model.name}}
+                </ModelSelect>
+            </InputGroup>
+
+            <div class="col-span-1 lg:col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-3">
+                {{t "trailer.sections.registration"}}
+            </div>
+
+            <InputGroup @name={{t "trailer.fields.vin"}} @helpText={{t "trailer.help.vin"}}>
+                <Input @value={{@resource.vin}} @type="text" class="w-full form-input" placeholder={{t "trailer.placeholders.vin"}} disabled={{cannot-write @resource}} />
+            </InputGroup>
+
+            <InputGroup @name={{t "trailer.fields.plate-number"}}>
+                <Input @value={{@resource.plate_number}} @type="text" class="w-full form-input" placeholder={{t "trailer.placeholders.plate-number"}} disabled={{cannot-write @resource}} />
+            </InputGroup>
+
+            <InputGroup @name={{t "trailer.fields.serial-number"}}>
+                <Input @value={{@resource.serial_number}} @type="text" class="w-full form-input" placeholder={{t "trailer.placeholders.serial-number"}} disabled={{cannot-write @resource}} />
+            </InputGroup>
+
+            <InputGroup @name={{t "trailer.fields.make"}}>
+                <Input @value={{@resource.make}} @type="text" class="w-full form-input" placeholder={{t "trailer.placeholders.make"}} disabled={{cannot-write @resource}} />
+            </InputGroup>
+
+            <InputGroup @name={{t "trailer.fields.model"}}>
+                <Input @value={{@resource.model}} @type="text" class="w-full form-input" placeholder={{t "trailer.placeholders.model"}} disabled={{cannot-write @resource}} />
+            </InputGroup>
+
+            <InputGroup @name={{t "trailer.fields.year"}}>
+                <Input @value={{@resource.year}} @type="number" min="1880" step="1" class="w-full form-input" placeholder={{t "trailer.placeholders.year"}} disabled={{cannot-write @resource}} />
+            </InputGroup>
+
+            <div class="col-span-1 lg:col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-3">
+                {{t "trailer.sections.location"}}
+            </div>
+
+            <InputGroup @name={{t "trailer.fields.coordinates"}} @wrapperClass="col-span-1 lg:col-span-2" @helpText={{t "trailer.help.coordinates"}}>
+                <ModelCoordinatesInput @model={{@resource}} @disabled={{cannot-write @resource}} @autocomplete="location" />
+            </InputGroup>
+        </div>
+
+        <RegistryYield @registry="fleet-ops:component:trailer:form:details" as |RegistryComponent|>
+            <RegistryComponent @resource={{@resource}} @controller={{@controller}} @permission={{get-write-permission @resource}} />
+        </RegistryYield>
+    </ContentPanel>
+
+    {{! DIMENSIONS & CAPACITY }}
+    <ContentPanel @title={{t "trailer.sections.dimensions"}} @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">
+                {{t "trailer.sections.measurement"}}
+            </div>
+
+            <InputGroup @name={{t "trailer.fields.measurement-system"}} @helpText={{t "trailer.help.measurement-system"}}>
+                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                    <PowerSelect
+                        @options={{this.measurementOptions}}
+                        @selected={{find-by "value" @resource.measurement_system this.measurementOptions}}
+                        @onChange={{set-model-attr @resource "measurement_system"}}
+                        @placeholder={{t "trailer.placeholders.measurement-system"}}
+                        @triggerClass="form-select form-input"
+                        @disabled={{cannot-write @resource}}
+                        as |option|
+                    >
+                        <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={{t "trailer.fields.odometer-unit"}}>
+                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                    <PowerSelect
+                        @options={{this.odometerUnitOptions}}
+                        @selected={{find-by "value" @resource.odometer_unit this.odometerUnitOptions}}
+                        @onChange={{set-model-attr @resource "odometer_unit"}}
+                        @placeholder={{t "trailer.placeholders.odometer-unit"}}
+                        @triggerClass="form-select form-input"
+                        @disabled={{cannot-write @resource}}
+                        as |option|
+                    >
+                        {{option.label}}
+                    </PowerSelect>
+                </div>
+            </InputGroup>
+
+            <InputGroup @name={{t "trailer.fields.odometer" unit=(or @resource.odometer_unit "")}} @helpText={{t "trailer.help.odometer"}}>
+                <Input @value={{@resource.odometer}} @type="number" min="0" step="1" class="w-full form-input" placeholder={{t "trailer.placeholders.odometer"}} disabled={{cannot-write @resource}} />
+            </InputGroup>
+
+            <div class="col-span-1 lg:col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-3">
+                {{t "trailer.sections.dimensions-fields" unit=this.units.length}}
+            </div>
+
+            <InputGroup @name={{t "trailer.fields.length" unit=this.units.length}}>
+                <Input @value={{@resource.length}} @type="number" min="0" step="0.001" class="w-full form-input" placeholder={{t "trailer.placeholders.length"}} disabled={{cannot-write @resource}} />
+            </InputGroup>
+
+            <InputGroup @name={{t "trailer.fields.width" unit=this.units.length}}>
+                <Input @value={{@resource.width}} @type="number" min="0" step="0.001" class="w-full form-input" placeholder={{t "trailer.placeholders.width"}} disabled={{cannot-write @resource}} />
+            </InputGroup>
+
+            <InputGroup @name={{t "trailer.fields.height" unit=this.units.length}}>
+                <Input @value={{@resource.height}} @type="number" min="0" step="0.001" class="w-full form-input" placeholder={{t "trailer.placeholders.height"}} disabled={{cannot-write @resource}} />
+            </InputGroup>
+
+            <InputGroup @name={{t "trailer.fields.cargo-volume" unit=this.units.volume}} @helpText={{t "trailer.help.cargo-volume"}}>
+                <Input @value={{@resource.cargo_volume}} @type="number" min="0" step="0.001" class="w-full form-input" placeholder={{t "trailer.placeholders.cargo-volume"}} disabled={{cannot-write @resource}} />
+            </InputGroup>
+
+            <div class="col-span-1 lg:col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-3">
+                {{t "trailer.sections.weight" unit=this.units.weight}}
+            </div>
+
+            <InputGroup @name={{t "trailer.fields.tare-weight" unit=this.units.weight}} @helpText={{t "trailer.help.tare-weight"}}>
+                <Input @value={{@resource.tare_weight}} @type="number" min="0" step="0.001" class="w-full form-input" placeholder={{t "trailer.placeholders.tare-weight"}} disabled={{cannot-write @resource}} />
+            </InputGroup>
+
+            <InputGroup @name={{t "trailer.fields.gvwr" unit=this.units.weight}} @helpText={{t "trailer.help.gvwr"}}>
+                <Input @value={{@resource.gvwr}} @type="number" min="0" step="0.001" class="w-full form-input" placeholder={{t "trailer.placeholders.gvwr"}} disabled={{cannot-write @resource}} />
+            </InputGroup>
+
+            <InputGroup @name={{t "trailer.fields.payload-capacity" unit=this.units.weight}} @helpText={{t "trailer.help.payload-capacity"}}>
+                <Input @value={{@resource.payload_capacity}} @type="number" min="0" step="0.001" class="w-full form-input" placeholder={{t "trailer.placeholders.payload-capacity"}} disabled={{cannot-write @resource}} />
+            </InputGroup>
+        </div>
+    </ContentPanel>
+
+    {{! RUNNING GEAR }}
+    <ContentPanel @title={{t "trailer.sections.running-gear"}} @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 "trailer.fields.axle-count"}}>
+                <Input @value={{@resource.axle_count}} @type="number" min="0" step="1" class="w-full form-input" placeholder={{t "trailer.placeholders.axle-count"}} disabled={{cannot-write @resource}} />
+            </InputGroup>
+
+            <InputGroup @name={{t "trailer.fields.tire-count"}}>
+                <Input @value={{@resource.tire_count}} @type="number" min="0" step="1" class="w-full form-input" placeholder={{t "trailer.placeholders.tire-count"}} disabled={{cannot-write @resource}} />
+            </InputGroup>
+
+            <InputGroup @name={{t "trailer.fields.door-count"}}>
+                <Input @value={{@resource.door_count}} @type="number" min="0" step="1" class="w-full form-input" placeholder={{t "trailer.placeholders.door-count"}} disabled={{cannot-write @resource}} />
+            </InputGroup>
+
+            <InputGroup @name={{t "trailer.fields.coupling-type"}} @helpText={{t "trailer.help.coupling-type"}}>
+                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                    <PowerSelect
+                        @options={{this.couplingOptions}}
+                        @selected={{find-by "value" @resource.coupling_type this.couplingOptions}}
+                        @onChange={{set-model-attr @resource "coupling_type"}}
+                        @placeholder={{t "trailer.placeholders.coupling-type"}}
+                        @triggerClass="form-select form-input"
+                        @disabled={{cannot-write @resource}}
+                        as |option|
+                    >
+                        {{option.label}}
+                    </PowerSelect>
+                </div>
+            </InputGroup>
+
+            <InputGroup @name={{t "trailer.fields.brake-type"}}>
+                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                    <PowerSelect
+                        @options={{this.brakeOptions}}
+                        @selected={{find-by "value" @resource.brake_type this.brakeOptions}}
+                        @onChange={{set-model-attr @resource "brake_type"}}
+                        @placeholder={{t "trailer.placeholders.brake-type"}}
+                        @triggerClass="form-select form-input"
+                        @disabled={{cannot-write @resource}}
+                        as |option|
+                    >
+                        {{option.label}}
+                    </PowerSelect>
+                </div>
+            </InputGroup>
+
+            <div class="grid grid-cols-2 gap-2">
+                <InputGroup @name={{t "trailer.fields.abs"}} @helpText={{t "trailer.help.abs"}}>
+                    <Toggle @isToggled={{@resource.abs_equipped}} @onToggle={{set-model-attr @resource "abs_equipped"}} @disabled={{cannot-write @resource}} />
+                </InputGroup>
+
+                <InputGroup @name={{t "trailer.fields.ebs"}} @helpText={{t "trailer.help.ebs"}}>
+                    <Toggle @isToggled={{@resource.ebs_equipped}} @onToggle={{set-model-attr @resource "ebs_equipped"}} @disabled={{cannot-write @resource}} />
+                </InputGroup>
+            </div>
+        </div>
+    </ContentPanel>
+
+    {{! REFRIGERATION }}
+    <ContentPanel @title={{t "trailer.sections.refrigeration"}} @open={{this.showRefrigeration}} @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 "trailer.fields.refrigerated"}} @helpText={{t "trailer.help.refrigerated"}} @wrapperClass="col-span-1 lg:col-span-2">
+                <Toggle @isToggled={{@resource.refrigerated}} @onToggle={{this.toggleRefrigerated}} @disabled={{cannot-write @resource}} />
+            </InputGroup>
+
+            {{#if this.showRefrigeration}}
+                <InputGroup @name={{t "trailer.fields.temperature-min" unit=this.units.temperature}} @helpText={{t "trailer.help.temperature"}}>
+                    <Input @value={{@resource.temperature_min}} @type="number" step="0.1" class="w-full form-input" placeholder={{t "trailer.placeholders.temperature-min"}} disabled={{cannot-write @resource}} />
+                </InputGroup>
+
+                <InputGroup @name={{t "trailer.fields.temperature-max" unit=this.units.temperature}}>
+                    <Input @value={{@resource.temperature_max}} @type="number" step="0.1" class="w-full form-input" placeholder={{t "trailer.placeholders.temperature-max"}} disabled={{cannot-write @resource}} />
+                </InputGroup>
+
+                <InputGroup @name={{t "trailer.fields.reefer-hours"}} @helpText={{t "trailer.help.reefer-hours"}}>
+                    <Input @value={{@resource.reefer_engine_hours}} @type="number" min="0" step="0.1" class="w-full form-input" placeholder={{t "trailer.placeholders.reefer-hours"}} disabled={{cannot-write @resource}} />
+                </InputGroup>
+            {{/if}}
+        </div>
+    </ContentPanel>
+
+    {{! OWNERSHIP & FINANCE }}
+    <ContentPanel @title={{t "trailer.sections.ownership"}} @open={{false}} @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 "trailer.fields.ownership-type"}} @helpText={{t "trailer.help.ownership-type"}}>
+                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                    <PowerSelect
+                        @options={{this.ownershipOptions}}
+                        @selected={{find-by "value" @resource.ownership_type this.ownershipOptions}}
+                        @onChange={{set-model-attr @resource "ownership_type"}}
+                        @placeholder={{t "trailer.placeholders.ownership-type"}}
+                        @triggerClass="form-select form-input"
+                        @disabled={{cannot-write @resource}}
+                        as |option|
+                    >
+                        {{option.label}}
+                    </PowerSelect>
+                </div>
+            </InputGroup>
+
+            <InputGroup @name={{t "trailer.fields.financing-status"}}>
+                <Input @value={{@resource.financing_status}} @type="text" class="w-full form-input" placeholder={{t "trailer.placeholders.financing-status"}} disabled={{cannot-write @resource}} />
+            </InputGroup>
+
+            <InputGroup @name={{t "trailer.fields.vendor"}} @helpText={{t "trailer.help.vendor"}}>
+                <ModelSelect
+                    @modelName="vendor"
+                    @selectedModel={{@resource.vendor}}
+                    @placeholder={{t "trailer.placeholders.vendor"}}
+                    @triggerClass="form-select form-input"
+                    @infiniteScroll={{false}}
+                    @renderInPlace={{true}}
+                    @allowClear={{true}}
+                    @onChange={{this.setVendor}}
+                    @disabled={{cannot-write @resource}}
+                    as |model|
+                >
+                    {{model.name}}
+                </ModelSelect>
+            </InputGroup>
+
+            <InputGroup @name={{t "trailer.fields.warranty"}} @helpText={{t "trailer.help.warranty"}}>
+                <ModelSelect
+                    @modelName="warranty"
+                    @selectedModel={{@resource.warranty}}
+                    @placeholder={{t "trailer.placeholders.warranty"}}
+                    @triggerClass="form-select form-input"
+                    @infiniteScroll={{false}}
+                    @renderInPlace={{true}}
+                    @allowClear={{true}}
+                    @onChange={{this.setWarranty}}
+                    @disabled={{cannot-write @resource}}
+                    as |model|
+                >
+                    {{or model.name (concat model.policy_number " - " model.provider)}}
+                </ModelSelect>
+            </InputGroup>
+
+            <InputGroup @name={{t "trailer.fields.purchased-at"}}>
+                <DatePicker
+                    @value={{or (format-date-fns @resource.purchased_at "dd-MM-yyyy") null}}
+                    @onChange={{fn (mut @resource.purchased_at)}}
+                    @placeholder={{t "trailer.placeholders.date"}}
+                    @disabled={{cannot-write @resource}}
+                    class="filter-date-input w-full flex-1"
+                />
+            </InputGroup>
+
+            {{#if this.showLeaseExpiry}}
+                <InputGroup @name={{t "trailer.fields.lease-expires-at"}} @helpText={{t "trailer.help.lease-expires-at"}}>
+                    <DatePicker
+                        @value={{or (format-date-fns @resource.lease_expires_at "dd-MM-yyyy") null}}
+                        @onChange={{fn (mut @resource.lease_expires_at)}}
+                        @placeholder={{t "trailer.placeholders.date"}}
+                        @disabled={{cannot-write @resource}}
+                        class="filter-date-input w-full flex-1"
+                    />
+                </InputGroup>
+            {{/if}}
+
+            <div class="col-span-1 lg:col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-3">
+                {{t "trailer.sections.finance"}}
+            </div>
+
+            <InputGroup @name={{t "trailer.fields.currency"}}>
+                <CurrencySelect @currency={{this.currency}} @onCurrencyChange={{fn (mut @resource.currency)}} @triggerClass="w-full form-select" @disabled={{cannot-write @resource}} />
+            </InputGroup>
+
+            <InputGroup @name={{t "trailer.fields.acquisition-cost"}} @helpText={{t "trailer.help.acquisition-cost"}}>
+                <MoneyInput class="w-full" @value={{@resource.acquisition_cost}} @currency={{this.currency}} @onChange={{fn (mut @resource.acquisition_cost)}} @disabled={{cannot-write @resource}} />
+            </InputGroup>
+
+            <InputGroup @name={{t "trailer.fields.current-value"}}>
+                <MoneyInput class="w-full" @value={{@resource.current_value}} @currency={{this.currency}} @onChange={{fn (mut @resource.current_value)}} @disabled={{cannot-write @resource}} />
+            </InputGroup>
+
+            <InputGroup @name={{t "trailer.fields.insurance-value"}}>
+                <MoneyInput class="w-full" @value={{@resource.insurance_value}} @currency={{this.currency}} @onChange={{fn (mut @resource.insurance_value)}} @disabled={{cannot-write @resource}} />
+            </InputGroup>
+
+            <InputGroup @name={{t "trailer.fields.depreciation-rate"}} @helpText={{t "trailer.help.depreciation-rate"}}>
+                <Input @value={{@resource.depreciation_rate}} @type="number" min="0" max="100" step="0.01" class="w-full form-input" placeholder={{t "trailer.placeholders.depreciation-rate"}} disabled={{cannot-write @resource}} />
+            </InputGroup>
+        </div>
+    </ContentPanel>
+
+    {{! NOTES }}
+    <ContentPanel @title={{t "trailer.sections.notes"}} @open={{false}} @wrapperClass="bordered-top">
+        <InputGroup @name={{t "trailer.fields.notes"}} @wrapperClass="no-input-group-padding">
+            <Textarea @value={{@resource.notes}} class="w-full form-input" rows="4" placeholder={{t "trailer.placeholders.notes"}} disabled={{cannot-write @resource}} />
+        </InputGroup>
+    </ContentPanel>
+
+    <CustomField::Yield @subject={{@resource}} @wrapperClass="bordered-top" />
+
+    <RegistryYield @registry="fleet-ops:component:trailer:form:end" as |RegistryComponent|>
+        <RegistryComponent @resource={{@resource}} @controller={{@controller}} @permission={{get-write-permission @resource}} />
+    </RegistryYield>
+</div>

package/addon/components/trailer/form.js

@@ -0,0 +1,165 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { task } from 'ember-concurrency';
+
+/**
+ * Stable trailer classification values. Mirrors `Trailer::TYPES` on the server.
+ */
+export const TRAILER_TYPES = [
+    'dry_van',
+    'reefer',
+    'flatbed',
+    'step_deck',
+    'lowboy',
+    'tanker',
+    'bulk',
+    'dump',
+    'chassis',
+    'curtain_side',
+    'car_carrier',
+    'livestock',
+    'logging',
+    'dolly',
+    'specialty',
+    'other',
+];
+
+/**
+ * Lifecycle statuses. Mirrors `Trailer::STATUSES` on the server.
+ */
+export const TRAILER_STATUSES = ['available', 'in_use', 'maintenance', 'out_of_service', 'retired'];
+
+/**
+ * Ownership arrangements. Mirrors `Trailer::OWNERSHIP_TYPES` on the server.
+ */
+export const TRAILER_OWNERSHIP_TYPES = ['owned', 'leased', 'financed', 'rented'];
+
+export const TRAILER_COUPLING_TYPES = ['fifth_wheel', 'pintle_hook', 'ball_hitch', 'gooseneck', 'drawbar', 'other'];
+export const TRAILER_BRAKE_TYPES = ['air', 'electric', 'hydraulic_surge', 'none', 'other'];
+export const TRAILER_MEASUREMENT_SYSTEMS = ['metric', 'imperial'];
+export const TRAILER_ODOMETER_UNITS = ['km', 'mi'];
+
+export default class TrailerFormComponent extends Component {
+    @service fetch;
+    @service currentUser;
+    @service notifications;
+    @service intl;
+
+    get typeOptions() {
+        return TRAILER_TYPES.map((value) => ({ value, label: this.intl.t(`trailer.types.${value}`) }));
+    }
+
+    get statusOptions() {
+        return TRAILER_STATUSES.map((value) => ({ value, label: this.intl.t(`trailer.statuses.${value}`), description: this.intl.t(`trailer.status-descriptions.${value}`) }));
+    }
+
+    get measurementOptions() {
+        return TRAILER_MEASUREMENT_SYSTEMS.map((value) => ({
+            value,
+            label: this.intl.t(`trailer.measurement.${value}`),
+            description: this.intl.t(`trailer.measurement-descriptions.${value}`),
+        }));
+    }
+
+    get odometerUnitOptions() {
+        return TRAILER_ODOMETER_UNITS.map((value) => ({ value, label: this.intl.t(`trailer.odometer-units.${value}`) }));
+    }
+
+    get couplingOptions() {
+        return TRAILER_COUPLING_TYPES.map((value) => ({ value, label: this.intl.t(`trailer.coupling-types.${value}`) }));
+    }
+
+    get brakeOptions() {
+        return TRAILER_BRAKE_TYPES.map((value) => ({ value, label: this.intl.t(`trailer.brake-types.${value}`) }));
+    }
+
+    get ownershipOptions() {
+        return TRAILER_OWNERSHIP_TYPES.map((value) => ({ value, label: this.intl.t(`trailer.ownership-types.${value}`) }));
+    }
+
+    /**
+     * Unit suffixes shown next to dimensional inputs, derived from the selected
+     * measurement system so operators always know which unit a value is stored in.
+     */
+    get units() {
+        const system = this.args.resource?.measurement_system === 'imperial' ? 'imperial' : 'metric';
+
+        return {
+            length: this.intl.t(`trailer.units.length-${system}`),
+            weight: this.intl.t(`trailer.units.weight-${system}`),
+            volume: this.intl.t(`trailer.units.volume-${system}`),
+            temperature: this.intl.t(`trailer.units.temperature-${system}`),
+        };
+    }
+
+    /**
+     * Reefer settings only make sense for temperature-controlled trailers.
+     */
+    get showRefrigeration() {
+        const resource = this.args.resource;
+
+        return Boolean(resource?.refrigerated) || resource?.type === 'reefer';
+    }
+
+    /**
+     * Lease expiry is only meaningful when the trailer is not owned outright.
+     */
+    get showLeaseExpiry() {
+        return ['leased', 'rented', 'financed'].includes(this.args.resource?.ownership_type);
+    }
+
+    get currency() {
+        return this.args.resource?.currency || this.currentUser?.company?.currency || this.currentUser?.currency || 'USD';
+    }
+
+    @action setType(option) {
+        this.args.resource.type = option?.value ?? null;
+
+        if (option?.value === 'reefer' && this.args.resource.refrigerated !== true) {
+            this.args.resource.refrigerated = true;
+        }
+    }
+
+    @action toggleRefrigerated(value) {
+        this.args.resource.refrigerated = Boolean(value);
+    }
+
+    @action setVendor(vendor) {
+        this.args.resource.vendor = vendor;
+        this.args.resource.vendor_uuid = vendor?.id ?? null;
+    }
+
+    @action setWarranty(warranty) {
+        this.args.resource.warranty = warranty;
+        this.args.resource.warranty_uuid = warranty?.id ?? null;
+    }
+
+    @action setCategory(category) {
+        this.args.resource.category = category;
+        this.args.resource.category_uuid = category?.id ?? null;
+    }
+
+    @task *handlePhotoUpload(file) {
+        try {
+            yield this.fetch.uploadFile.perform(
+                file,
+                {
+                    path: `uploads/${this.currentUser.companyId}/trailers/${this.args.resource.id}`,
+                    subject_uuid: this.args.resource.id,
+                    subject_type: 'fleet-ops:trailer',
+                    type: 'trailer_photo',
+                },
+                (uploadedFile) => {
+                    this.args.resource.setProperties({
+                        photo_uuid: uploadedFile.id,
+                        photo_url: uploadedFile.url,
+                        photo: uploadedFile,
+                    });
+                }
+            );
+        } catch (error) {
+            this.notifications.error(this.intl.t('trailer.prompts.photo-upload-error', { message: error.message }));
+        }
+    }
+}

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

@@ -0,0 +1,45 @@
+<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-image @resource.photo_url "trailer"}}
+                    @fallbackSrc={{(placeholder-image "trailer")}}
+                    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-2xl">{{@resource.displayName}}</h1>
+                <div class="-mt-1 text-sm text-gray-700 dark:text-gray-400">
+                    {{#if @resource.type}}{{t (concat "trailer.types." @resource.type)}}{{/if}}
+                    {{#if (or @resource.plate_number @resource.code)}}<span class="mx-1">·</span>{{or @resource.plate_number @resource.code}}{{/if}}
+                </div>
+                <div class="mt-1 flex flex-row items-center space-x-2">
+                    <Badge @status={{@resource.status}} @text={{t (concat "trailer.statuses." (or @resource.status "available"))}} />
+                    <Badge @status={{if @resource.isAttached "attached" "detached"}} @icon={{if @resource.isAttached "link" "link-slash"}} @text={{t (concat "trailer.attachment." (if @resource.isAttached "attached" "detached"))}} />
+                    <Badge @status={{or @resource.connectivity_status "never_connected"}} @text={{t (concat "trailer.connectivity." (or @resource.connectivity_status "never_connected"))}} />
+                </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}}
+            >
+                {{yield}}
+            </Layout::Resource::Panel::HeaderActions>
+        </div>
+    </div>
+</div>

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

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