@fleetbase/fleetops-engine 0.6.24 → 0.6.26

package/addon/components/vehicle/form.hbs

@@ -1,8 +1,16 @@
 <div class="form-wrapper" ...attributes>
+    {{! DETAILS / IDENTIFICATION }}
     <ContentPanel @title={{t "common.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={{@resource.photo_url}} @fallbackSrc={{config "defaultValues.vehicleImage"}} alt={{@resource.name}} height="48" width="48" class="h-14 w-14 rounded-full shadow-sm" />
+                <Image
+                    src={{@resource.photo_url}}
+                    @fallbackSrc={{config "defaultValues.vehicleImage"}}
+                    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 "vehicle.fields.upload-new-photo"}} />
                 </Attach::Tooltip>
@@ -22,61 +30,51 @@
                 </div>
             </div>
         </div>
+
         <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 lg:gap-2 no-input-group-padding text-xs">
+            {{! Vehicle Identification }}
+            <div class="col-span-1 lg:col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-1">
+                Vehicle Identification
+            </div>
+
+            <InputGroup @name={{t "common.name"}}>
+                <Input @value={{@resource.name}} @type="text" class="w-full form-input" placeholder={{t "common.name"}} disabled={{cannot-write @resource}} />
+            </InputGroup>
+
             <InputGroup @name={{t "common.internal-id"}}>
                 <Input @value={{@resource.internal_id}} @type="text" class="w-full form-input" placeholder={{t "common.internal-id"}} disabled={{cannot-write @resource}} />
             </InputGroup>
 
             <InputGroup @name={{t "vehicle.fields.plate-number"}}>
-                <Input
-                    @value={{@resource.plate_number}}
-                    @type="text"
-                    class="w-full form-input"
-                    placeholder={{t "vehicle.fields.plate-number"}}
-                    disabled={{cannot-write @resource}}
-                />
+                <Input @value={{@resource.plate_number}} @type="text" class="w-full form-input" placeholder={{t "vehicle.fields.plate-number"}} disabled={{cannot-write @resource}} />
             </InputGroup>
 
             <InputGroup @name={{t "vehicle.fields.vin-number"}}>
-                <Input
-                    @value={{@resource.vin}}
-                    @type="text"
-                    class="w-full form-input"
-                    placeholder={{t "vehicle.fields.vin-number"}}
-                    disabled={{cannot-write @resource}}
-                />
+                <Input @value={{@resource.vin}} @type="text" class="w-full form-input" placeholder={{t "vehicle.fields.vin-number"}} disabled={{cannot-write @resource}} />
             </InputGroup>
 
             <InputGroup @name={{t "vehicle.fields.make"}}>
-                <Input
-                    @value={{@resource.make}}
-                    @type="text"
-                    class="w-full form-input"
-                    placeholder={{t "vehicle.fields.vehicle-make"}}
-                    disabled={{cannot-write @resource}}
-                />
+                <Input @value={{@resource.make}} @type="text" class="w-full form-input" placeholder={{t "vehicle.fields.vehicle-make"}} disabled={{cannot-write @resource}} />
             </InputGroup>
 
             <InputGroup @name={{t "vehicle.fields.model"}}>
-                <Input
-                    @value={{@resource.model}}
-                    @type="text"
-                    class="w-full form-input"
-                    placeholder={{t "vehicle.fields.vehicle-model"}}
-                    disabled={{cannot-write @resource}}
-                />
+                <Input @value={{@resource.model}} @type="text" class="w-full form-input" placeholder={{t "vehicle.fields.vehicle-model"}} disabled={{cannot-write @resource}} />
             </InputGroup>
 
             <InputGroup @name={{t "vehicle.fields.year"}}>
-                <Input
-                    @value={{@resource.year}}
-                    @type="text"
-                    class="w-full form-input"
-                    placeholder={{t "vehicle.fields.vehicle-year"}}
-                    disabled={{cannot-write @resource}}
-                />
+                <Input @value={{@resource.year}} @type="text" class="w-full form-input" placeholder={{t "vehicle.fields.vehicle-year"}} disabled={{cannot-write @resource}} />
             </InputGroup>
 
+            <InputGroup @value={{@resource.trim}} @name="Trim" @placeholder="Trim" />
+            <InputGroup @value={{@resource.color}} @name="Color" @placeholder="Vehicle Color" />
+            <InputGroup @value={{@resource.serial_number}} @name="Serial Number" @placeholder="Serial Number" />
+            <InputGroup @value={{@resource.class}} @name="Class" @placeholder="Class" />
+
+            {{! Assignment & Status }}
+            <div class="col-span-1 lg:col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-3">
+                Assignment & Status
+            </div>
+
             <InputGroup @name={{t "vehicle.fields.driver-assigned"}}>
                 <ModelSelect
                     @modelName="driver"
@@ -96,27 +94,455 @@
             <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)}}
+                        @options={{get-fleet-ops-options "vehicleStatuses"}}
+                        @selected={{find-by "value" @resource.status (get-fleet-ops-options "vehicleStatuses")}}
+                        @onChange={{set-model-attr @resource "status"}}
                         @placeholder={{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 @value={{@resource.call_sign}} @name="Call Sign" @placeholder="Call Sign" />
+
+            {{! Location }}
+            <div class="col-span-1 lg:col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-3">
+                Location
+            </div>
+
             <InputGroup @name={{t "common.coordinates"}} @wrapperClass="col-span-2">
                 <ModelCoordinatesInput @model={{@resource}} @disabled={{cannot-write @resource}} @autocomplete="location" />
             </InputGroup>
         </div>
+
         <RegistryYield @registry="fleet-ops:component:vehicle:form:details" as |RegistryComponent|>
             <RegistryComponent @resource={{@resource}} @controller={{this.controller}} @permission={{get-write-permission @resource}} />
         </RegistryYield>
     </ContentPanel>
 
+    {{! MEASUREMENT & UNITS / ODOMETER }}
+    <ContentPanel @title="Measurement & Units" @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">
+                Measurement & Units
+            </div>
+
+            <InputGroup @name="System of Measurement">
+                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                    <PowerSelect
+                        @options={{get-fleet-ops-options "measurementSystems"}}
+                        @selected={{find-by "value" @resource.measurement_system (get-fleet-ops-options "measurementSystems")}}
+                        @onChange={{set-model-attr @resource "measurement_system"}}
+                        @placeholder="Select System of Measurement"
+                        @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="Fuel Volume Unit">
+                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                    <PowerSelect
+                        @options={{get-fleet-ops-options "fuelVolumeUnits"}}
+                        @selected={{find-by "value" @resource.fuel_volume_unit (get-fleet-ops-options "fuelVolumeUnits")}}
+                        @onChange={{set-model-attr @resource "fuel_volume_unit"}}
+                        @placeholder="Select Fuel Volume Unit"
+                        @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>
+
+            <div class="col-span-1 lg:col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-3">
+                Odometer & Usage
+            </div>
+
+            <InputGroup @value={{@resource.odometer}} @name={{concat "Current Odometer (" @resource.odometer_unit ")"}} @type="number" @placeholder="Current Odometer Reading" />
+
+            <InputGroup @name="Odometer Unit">
+                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                    <PowerSelect
+                        @options={{get-fleet-ops-options "odometerUnits"}}
+                        @selected={{find-by "value" @resource.odometer_unit (get-fleet-ops-options "odometerUnits")}}
+                        @onChange={{set-model-attr @resource "odometer_unit"}}
+                        @placeholder="Select unit"
+                        @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 @value={{@resource.odometer_at_purchase}} @name="Odometer at Purchase" @type="number" @placeholder="Odometer reading at purchase" />
+        </div>
+    </ContentPanel>
+
+    {{! BODY & USAGE }}
+    <ContentPanel @title="Body & Usage" @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">
+                Body & Usage
+            </div>
+
+            <InputGroup @name="Body Type">
+                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                    <PowerSelect
+                        @options={{get-fleet-ops-options "vehicleBodyTypes"}}
+                        @selected={{find-by "value" @resource.body_type (get-fleet-ops-options "vehicleBodyTypes")}}
+                        @onChange={{set-model-attr @resource "body_type"}}
+                        @placeholder="Select body type"
+                        @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="Body Subtype">
+                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                    <PowerSelect
+                        @options={{get-fleet-ops-options "vehicleBodySubTypes"}}
+                        @selected={{find-by "value" @resource.body_sub_type (get-fleet-ops-options "vehicleBodySubTypes")}}
+                        @onChange={{set-model-attr @resource "body_sub_type"}}
+                        @placeholder="Select body sub-type"
+                        @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="Usage Type">
+                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                    <PowerSelect
+                        @options={{get-fleet-ops-options "vehicleUsageTypes"}}
+                        @selected={{find-by "value" @resource.usage_type (get-fleet-ops-options "vehicleUsageTypes")}}
+                        @onChange={{set-model-attr @resource "usage_type"}}
+                        @placeholder="Select usage type"
+                        @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="Ownership Type">
+                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                    <PowerSelect
+                        @options={{get-fleet-ops-options "vehicleOwnershipTypes"}}
+                        @selected={{find-by "value" @resource.ownership_type (get-fleet-ops-options "vehicleOwnershipTypes")}}
+                        @onChange={{set-model-attr @resource "ownership_type"}}
+                        @placeholder="Select ownership type"
+                        @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="Fuel Type">
+                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                    <PowerSelect
+                        @options={{get-fleet-ops-options "fuelTypes"}}
+                        @selected={{find-by "value" @resource.fuel_type (get-fleet-ops-options "fuelTypes")}}
+                        @onChange={{set-model-attr @resource "fuel_type"}}
+                        @placeholder="Select fuel type"
+                        @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="Transmission">
+                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                    <PowerSelect
+                        @options={{get-fleet-ops-options "transmissionTypes"}}
+                        @selected={{find-by "value" @resource.transmission (get-fleet-ops-options "transmissionTypes")}}
+                        @onChange={{set-model-attr @resource "transmission"}}
+                        @placeholder="Select transmission"
+                        @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>
+        </div>
+    </ContentPanel>
+
+    {{! TECHNICAL SPECIFICATIONS (ENGINE, CAPACITY, REGULATORY) }}
+    <ContentPanel @title="Technical Specifications" @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 no-input-group-padding text-xs">
+
+            {{! Powertrain & Engine }}
+            <div class="col-span-1 lg:col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-1">
+                Powertrain & Engine
+            </div>
+
+            <InputGroup @value={{@resource.engine_number}} @name="Engine Number" @placeholder="Engine Number" />
+            <InputGroup @value={{@resource.engine_make}} @name="Engine Make" @placeholder="Engine Manufacturer" />
+            <InputGroup @value={{@resource.engine_model}} @name="Engine Model" @placeholder="Engine Model" />
+            <InputGroup @value={{@resource.engine_family}} @name="Engine Family" @placeholder="Engine Family" />
+            <InputGroup @value={{@resource.engine_configuration}} @name="Engine Configuration" @placeholder="e.g., Inline-4, V6" />
+            <InputGroup @value={{@resource.cylinder_arrangement}} @name="Cylinder Arrangement" @placeholder="e.g., I, V, H" />
+            <InputGroup @value={{@resource.number_of_cylinders}} @name="Number of Cylinders" @type="number" @placeholder="e.g., 4, 6" />
+
+            <InputGroup @name="Engine Size">
+                <UnitInput class="w-full" @value={{@resource.engine_size}} @unit="L" @type="number" @step="0.1" @placeholder="Engine Size" />
+            </InputGroup>
+
+            <InputGroup @name="Engine Displacement">
+                <UnitInput class="w-full" @value={{@resource.engine_displacement}} @unit="cc" @type="number" @placeholder="Engine Displacement" />
+            </InputGroup>
+
+            <InputGroup @name="Horsepower">
+                <UnitInput class="w-full" @value={{@resource.horsepower}} @unit="hp" @type="number" @placeholder="Horsepower" />
+            </InputGroup>
+
+            <InputGroup @value={{@resource.horsepower_rpm}} @name="Horsepower RPM" @type="number" @placeholder="RPM at Max Horsepower" />
+
+            <InputGroup @name="Torque">
+                <UnitInput class="w-full" @value={{@resource.torque}} @unit="Nm" @type="number" @placeholder="Torque" />
+            </InputGroup>
+
+            <InputGroup @value={{@resource.torque_rpm}} @name="Torque RPM" @type="number" @placeholder="RPM at Max Torque" />
+
+            {{! Capacity & Dimensions }}
+            <div class="col-span-1 lg:col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-3">
+                Capacity & Dimensions
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-3 col-span-1 lg:col-span-2 gap-2">
+                <InputGroup @name="Fuel Capacity">
+                    <UnitInput class="w-full" @value={{@resource.fuel_capacity}} @unit="L" @placeholder="Fuel Tank Capacity" />
+                </InputGroup>
+
+                <InputGroup @name="Payload Capacity">
+                    <UnitInput class="w-full" @value={{@resource.payload_capacity}} @unit="kg" @placeholder="Maximum Payload" />
+                </InputGroup>
+
+                <InputGroup @name="Towing Capacity">
+                    <UnitInput class="w-full" @value={{@resource.towing_capacity}} @unit="kg" @placeholder="Towing Capacity" />
+                </InputGroup>
+
+                <InputGroup @name="Seating Capacity">
+                    <Input @value={{@resource.seating_capacity}} @type="number" class="form-input w-full" placeholder="Number of Seats" />
+                </InputGroup>
+
+                <InputGroup @name="Vehicle Weight">
+                    <UnitInput class="w-full" @value={{@resource.weight}} @unit="kg" @placeholder="Vehicle Weight" />
+                </InputGroup>
+
+                <InputGroup @name="Length">
+                    <UnitInput class="w-full" @value={{@resource.length}} @unit="cm" @placeholder="Length" />
+                </InputGroup>
+
+                <InputGroup @name="Width">
+                    <UnitInput class="w-full" @value={{@resource.width}} @unit="cm" @placeholder="Width" />
+                </InputGroup>
+
+                <InputGroup @name="Height">
+                    <UnitInput class="w-full" @value={{@resource.height}} @unit="cm" @placeholder="Height" />
+                </InputGroup>
+
+                <InputGroup @name="Cargo Volume">
+                    <UnitInput class="w-full" @value={{@resource.cargo_volume}} @unit="L" @placeholder="Cargo Volume" />
+                </InputGroup>
+
+                <InputGroup @name="Passenger Volume">
+                    <UnitInput class="w-full" @value={{@resource.passenger_volume}} @unit="L" @placeholder="Passenger Volume" />
+                </InputGroup>
+
+                <InputGroup @name="Interior Volume">
+                    <UnitInput class="w-full" @value={{@resource.interior_volume}} @unit="L" @placeholder="Interior Volume" />
+                </InputGroup>
+
+                <InputGroup @name="Ground Clearance">
+                    <UnitInput class="w-full" @value={{@resource.ground_clearance}} @unit="cm" @placeholder="Ground Clearance" />
+                </InputGroup>
+
+                <InputGroup @name="Bed Length">
+                    <UnitInput class="w-full" @value={{@resource.bed_length}} @unit="cm" @placeholder="Bed Length" />
+                </InputGroup>
+            </div>
+
+            {{! Regulatory & Compliance }}
+            <div class="col-span-1 lg:col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-3">
+                Regulatory & Compliance
+            </div>
+
+            <InputGroup @value={{@resource.emission_standard}} @name="Emission Standard" @placeholder="e.g., Euro 6, EPA Tier 3" />
+
+            <div></div>
+
+            <InputGroup @name="GVWR (Gross Vehicle Weight Rating)">
+                <UnitInput class="w-full" @value={{@resource.gvwr}} @unit="kg" @placeholder="GVWR" />
+            </InputGroup>
+
+            <InputGroup @name="GCWR (Gross Combined Weight Rating)">
+                <UnitInput class="w-full" @value={{@resource.gcwr}} @unit="kg" @placeholder="GCWR" />
+            </InputGroup>
+
+            <InputGroup @wrapperClass="mt-1 space-y-2">
+                <Checkbox @value={{@resource.dpf_equipped}} @label="DPF Equipped" @onToggle={{fn (mut @resource.dpf_equipped)}} />
+                <Checkbox @value={{@resource.scr_equipped}} @label="SCR Equipped" @onToggle={{fn (mut @resource.scr_equipped)}} />
+            </InputGroup>
+        </div>
+    </ContentPanel>
+
+    {{! FINANCIAL & LIFECYCLE }}
+    <ContentPanel @title="Financial & Lifecycle" @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">
+                Asset Values
+            </div>
+
+            <InputGroup @name="Currency" @value={{@resource.currency}}>
+                <CurrencySelect @currency={{@resource.currency}} @onCurrencyChange={{fn (mut @resource.currency)}} @triggerClass="w-full form-select" />
+            </InputGroup>
+            <div></div>
+
+            <InputGroup @name="Acquisition Cost">
+                <MoneyInput @value={{@resource.acquisition_cost}} @currency={{@resource.currency}} />
+            </InputGroup>
+
+            <InputGroup @name="Current Value">
+                <MoneyInput @value={{@resource.current_value}} @currency={{@resource.currency}} />
+            </InputGroup>
+
+            <InputGroup @name="Insurance Value">
+                <MoneyInput @value={{@resource.insurance_value}} @currency={{@resource.currency}} />
+            </InputGroup>
+
+            <InputGroup @name="Depreciation Rate (%)">
+                <Input @value={{@resource.depreciation_rate}} @type="number" step="0.01" class="form-input w-full" />
+            </InputGroup>
+
+            <div class="col-span-1 lg:col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-3">
+                Lifecycle & Service Life
+            </div>
+
+            <InputGroup @name="Estimated Service Life (Distance)">
+                <Input @value={{@resource.estimated_service_life_distance}} @type="number" class="form-input w-full" placeholder="Total distance" />
+            </InputGroup>
+
+            <InputGroup @name="Service Life Distance Unit">
+                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                    <PowerSelect
+                        @options={{get-fleet-ops-options "odometerUnits"}}
+                        @selected={{find-by "value" @resource.estimated_service_life_distance_unit (get-fleet-ops-options "odometerUnits")}}
+                        @onChange={{set-model-attr @resource "estimated_service_life_distance_unit"}}
+                        @placeholder="Select unit"
+                        @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="Estimated Service Life (Months)">
+                <Input @value={{@resource.estimated_service_life_months}} @type="number" class="form-input w-full" />
+            </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="Lease Expiry Date">
+                <DatePicker
+                    @value={{or (format-date-fns @resource.lease_expires_at "dd-MM-yyyy") null}}
+                    @onChange={{fn (mut @resource.lease_expires_at)}}
+                    @placeholder="DD-MM-YYYY"
+                    class="filter-date-input w-full flex-1"
+                />
+            </InputGroup>
+
+            <div class="col-span-1 lg:col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-3">
+                Financing (Loan)
+            </div>
+
+            <InputGroup @name="Loan Amount">
+                <MoneyInput @value={{@resource.loan_amount}} @currency={{@resource.currency}} />
+            </InputGroup>
+
+            <InputGroup @value={{@resource.loan_number_of_payments}} @name="Number of Payments" @type="number" @placeholder="Number of payments" />
+
+            <InputGroup @name="First Payment Date">
+                <DatePicker
+                    @value={{or (format-date-fns @resource.loan_first_payment "dd-MM-yyyy") null}}
+                    @onChange={{fn (mut @resource.loan_first_payment)}}
+                    @placeholder="DD-MM-YYYY"
+                    class="filter-date-input w-full flex-1"
+                />
+            </InputGroup>
+        </div>
+    </ContentPanel>
+
+    {{! CUSTOM FIELDS, REGISTRY, AVATAR, METADATA }}
     <CustomField::Yield @subject={{@resource}} @wrapperClass="bordered-top" />
 
     <RegistryYield @registry="fleet-ops:component:vehicle:form" as |RegistryComponent|>

package/addon/controllers/analytics/reports/index.js

@@ -46,6 +46,7 @@ export default class AnalyticsReportsIndexController extends Controller {
     get columns() {
         return [
             {
+                sticky: true,
                 label: 'Title',
                 valuePath: 'title',
                 cellComponent: 'table/cell/anchor',
@@ -58,7 +59,6 @@ export default class AnalyticsReportsIndexController extends Controller {
             {
                 label: 'ID',
                 valuePath: 'public_id',
-                width: '130px',
                 cellComponent: 'click-to-copy',
                 resizable: true,
                 sortable: true,
@@ -75,7 +75,8 @@ export default class AnalyticsReportsIndexController extends Controller {
                 ddMenuLabel: this.intl.t('common.resource-actions', { resource: this.intl.t('resource.Driver') }),
                 cellClassNames: 'overflow-visible',
                 wrapperClass: 'flex items-center justify-end mx-2',
-                width: '10%',
+                sticky: 'right',
+                width: 60,
                 actions: [
                     {
                         label: 'View report...',

package/addon/controllers/connectivity/devices/index.js

@@ -56,6 +56,7 @@ export default class ConnectivityDevicesIndexController extends Controller {
     /** columns */
     @tracked columns = [
         {
+            sticky: true,
             label: this.intl.t('column.name'),
             valuePath: 'displayName',
             cellComponent: 'table/cell/anchor',
@@ -104,7 +105,6 @@ export default class ConnectivityDevicesIndexController extends Controller {
             label: this.intl.t('column.status'),
             valuePath: 'status',
             cellComponent: 'table/cell/status',
-            width: '10%',
             resizable: true,
             sortable: true,
             filterable: true,
@@ -124,7 +124,6 @@ export default class ConnectivityDevicesIndexController extends Controller {
             label: this.intl.t('column.updated-at'),
             valuePath: 'updatedAt',
             sortParam: 'updated_at',
-            width: '10%',
             resizable: true,
             sortable: true,
             hidden: true,
@@ -141,7 +140,8 @@ export default class ConnectivityDevicesIndexController extends Controller {
             ddMenuLabel: this.intl.t('common.resource-actions', { resource: this.intl.t('resource.device') }),
             cellClassNames: 'overflow-visible',
             wrapperClass: 'flex items-center justify-end mx-2',
-            width: '10%',
+            sticky: 'right',
+            width: 60,
             actions: [
                 {
                     label: this.intl.t('common.view-resource', { resource: this.intl.t('resource.device') }),

package/addon/controllers/connectivity/events/index.js

@@ -30,6 +30,7 @@ export default class ConnectivityEventsIndexController extends Controller {
     /** columns */
     @tracked columns = [
         {
+            sticky: true,
             label: 'Event',
             valuePath: 'event_type',
             cellComponent: 'table/cell/anchor',
@@ -107,7 +108,6 @@ export default class ConnectivityEventsIndexController extends Controller {
             label: this.intl.t('column.created-at'),
             valuePath: 'createdAt',
             sortParam: 'created_at',
-            width: '10%',
             resizable: true,
             sortable: true,
             filterable: true,
@@ -122,7 +122,8 @@ export default class ConnectivityEventsIndexController extends Controller {
             ddMenuLabel: this.intl.t('common.resource-actions', { resource: this.intl.t('resource.device-event') }),
             cellClassNames: 'overflow-visible',
             wrapperClass: 'flex items-center justify-end mx-2',
-            width: '10%',
+            sticky: 'right',
+            width: 60,
             actions: [
                 {
                     label: this.intl.t('common.view-resource', { resource: this.intl.t('resource.device-event') }),