@fleetbase/fleetops-engine 0.4.0 → 0.4.2

package/addon/components/modals/vehicle-details.hbs

@@ -10,42 +10,42 @@
                 <ContentPanel @title="Details" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
                     <div class="grid grid-cols-2 gap-2 text-xs md:mb-6 dark:text-gray-100">
                         <div class="field-info-container">
-                            <div class="field-name">Name</div>
+                            <div class="field-name">{{t "fleet-ops.common.name"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.name}}</div>
                         </div>
 
                         <div class="field-info-container">
-                            <div class="field-name">Vehicle</div>
+                            <div class="field-name">{{t "fleet-ops.common.vehicle"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.internal_id}}</div>
                         </div>
 
                         <div class="field-info-container">
-                            <div class="field-name">Plate Number</div>
+                            <div class="field-name">{{t "fleet-ops.common.plate-number"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.plate_number}}</div>
                         </div>
 
                         <div class="field-info-container">
-                            <div class="field-name">VIN Number</div>
+                            <div class="field-name">{{t "fleet-ops.common.vin-number"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.vin}}</div>
                         </div>
 
                         <div class="field-info-container">
-                            <div class="field-name">Make</div>
+                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.make"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.name}}</div>
                         </div>
 
                         <div class="field-info-container">
-                            <div class="field-name">Model</div>
+                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.model"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model}}</div>
                         </div>
 
                         <div class="field-info-container">
-                            <div class="field-name">Year</div>
+                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.year"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.year}}</div>
                         </div>
 
                         <div class="field-info-container">
-                            <div class="field-name">Status</div>
+                            <div class="field-name">{{t "fleet-ops.common.status"}}</div>
                             <Badge @status={{@options.vehicle.status}} />
                         </div>
                     </div>
@@ -53,12 +53,12 @@
                     <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2 mb-2 mt-2">
                         <div class="col-span-2">
                             <div class="field-info-container">
-                                <div class="field-name">Driver Assigned</div>
+                                <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.driver-assigned"}}</div>
                                 <div class="field-value">
                                     {{#if @options.vehicle.driver}}
                                         <DriverCard class="dark:bg-gray-800 rounded-md px-3 py-2" @driver={{@options.vehicle.driver}} @onClick={{@options.viewDriver}} />
                                     {{else}}
-                                        <span>No driver assigned</span>
+                                        <span>{{t "fleet-ops.component.modals.vehicle-details.no-driver-assigned"}}</span>
                                     {{/if}}
                                 </div>
                             </div>
@@ -66,7 +66,7 @@
                     </div>
                 </ContentPanel>
 
-                <ContentPanel @title="Avatar" @open={{false}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                <ContentPanel @title={{t "fleet-ops.component.modals.vehicle-details.avatar"}} @open={{false}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
                     <div class="grid grid-cols-1 gap-2 text-xs dark:text-gray-100">
                         <div>
                             <Image alt={{@options.vehicle.public_id}} src={{@options.vehicle.avatar_url}} class="w-24 h-24" />
@@ -74,148 +74,148 @@
                     </div>
                 </ContentPanel>
 
-                <ContentPanel @title="Model Information" @open={{false}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                <ContentPanel @title={{t "fleet-ops.component.modals.vehicle-details.model-information"}} @open={{false}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
                     <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2">
                         <div class="field-info-container">
-                            <div class="field-name">0 to 100 Kph</div>
+                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.acceleration"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_0_to_100_kph}}</div>
                         </div>
 
                         <div class="field-info-container">
-                            <div class="field-name">Body</div>
+                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.body"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_body}}</div>
                         </div>
 
                         <div class="field-info-container">
-                            <div class="field-name">Doors</div>
+                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.doors"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_doors}}</div>
                         </div>
 
                         <div class="field-info-container">
-                            <div class="field-name">Drive</div>
+                            <div class="field-name">{{t "fleet-ops.common.driver"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_drive}}</div>
                         </div>
 
                         <div class="field-info-container">
-                            <div class="field-name">Length (mm)</div>
+                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.length"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_length_mm}}</div>
                         </div>
 
                         <div class="field-info-container">
-                            <div class="field-name">Seats</div>
+                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.seats"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_seats}}</div>
                         </div>
 
                         <div class="field-info-container">
-                            <div class="field-name">Top Speed (kph)</div>
+                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.top-speed"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_top_speed_kph}}</div>
                         </div>
 
                         <div class="field-info-container">
-                            <div class="field-name">Transmission Type</div>
+                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.transmission"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_transmission_type}}</div>
                         </div>
 
                         <div class="field-info-container">
-                            <div class="field-name">Weight (kg)</div>
+                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.weight"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_weight_kg}}</div>
                         </div>
 
                         <div class="field-info-container">
-                            <div class="field-name">Wheelbase (mm)</div>
+                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.wheelbase"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_wheelbase_mm}}</div>
                         </div>
 
                         <div class="field-info-container">
-                            <div class="field-name">Width (mm)</div>
+                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.width"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_width_mm}}</div>
                         </div>
                     </div>
                 </ContentPanel>
 
-                <ContentPanel @title="Engine Information" @open={{false}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                <ContentPanel @title={{t "fleet-ops.component.modals.vehicle-details.engine-information"}} @open={{false}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
                     <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2">
                         <div class="field-info-container">
-                            <div class="field-name">Engine Bore (mm)</div>
+                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.engine-bore"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_engine_bore_mm}}</div>
                         </div>
 
                         <div class="field-info-container">
-                            <div class="field-name">CC</div>
+                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.cc"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_engine_cc}}</div>
                         </div>
 
                         <div class="field-info-container">
-                            <div class="field-name">Compression</div>
+                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.compression"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_engine_compression}}</div>
                         </div>
 
                         <div class="field-info-container">
-                            <div class="field-name">Cylinders</div>
+                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.cylinder"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_engine_cyl}}</div>
                         </div>
 
                         <div class="field-info-container">
-                            <div class="field-name">Position</div>
+                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.position"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_engine_position}}</div>
                         </div>
 
                         <div class="field-info-container">
-                            <div class="field-name">Power (ps)</div>
+                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.power-ps"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_engine_power_ps}}</div>
                         </div>
 
                         <div class="field-info-container">
-                            <div class="field-name">Power (rpm)</div>
+                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.power-rpm"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_engine_power_rpm}}</div>
                         </div>
 
                         <div class="field-info-container">
-                            <div class="field-name">Stroke (mm))</div>
+                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.stroke"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_engine_stroke_mm}}</div>
                         </div>
 
                         <div class="field-info-container">
-                            <div class="field-name">Torque (nm)</div>
+                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.torque-nm"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_engine_torque_nm}}</div>
                         </div>
 
                         <div class="field-info-container">
-                            <div class="field-name">Torque (rpm)</div>
+                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.torque-rpm"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_engine_torque_rpm}}</div>
                         </div>
 
                         <div class="field-info-container">
-                            <div class="field-name">Valves Per Cylinder</div>
+                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.valves"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_valves_per_cyl}}</div>
                         </div>
                     </div>
                 </ContentPanel>
 
-                <ContentPanel @title="Fuel Information" @open={{false}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                <ContentPanel @title={{t "fleet-ops.component.modals.vehicle-details.fuel-information"}} @open={{false}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
                     <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2">
                         <div class="field-info-container">
-                            <div class="field-name">Fuel</div>
+                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.fuel"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_engine_fuel}}</div>
                         </div>
 
                         <div class="field-info-container">
-                            <div class="field-name">Fuel Cap (l)</div>
+                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.fuel-cap"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_fuel_cap_l}}</div>
                         </div>
 
                         <div class="field-info-container">
-                            <div class="field-name">Liters Per km City</div>
+                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.liters-city"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_lkm_city}}</div>
                         </div>
 
                         <div class="field-info-container">
-                            <div class="field-name">Liters Per km Highway)</div>
+                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.liters-highway"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_lkm_hwy}}</div>
                         </div>
 
                         <div class="field-info-container">
-                            <div class="field-name">Liters Per km Mixed</div>
+                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.liters-mixed"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_lkm_mixed}}</div>
                         </div>
                     </div>

package/addon/components/modals/vehicle-form.hbs

@@ -10,49 +10,49 @@
                     <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2">
                         <div class="input-group mb-2">
                             <label>
-                                Internal ID
+                                {{t "fleet-ops.common.internal-id"}}
                             </label>
-                            <Input @value={{@options.vehicle.internal_id}} @type="text" class="w-full form-input" placeholder="Internal ID" />
+                            <Input @value={{@options.vehicle.internal_id}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.common.internal-id"}} />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
-                                Plate Number
+                                {{t "fleet-ops.common.plate-number"}}
                             </label>
-                            <Input @value={{@options.vehicle.plate_number}} @type="text" class="w-full form-input" placeholder="Plate Number" />
+                            <Input @value={{@options.vehicle.plate_number}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.common.plate-number"}} />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
-                                VIN Number
+                                {{t "fleet-ops.common.vin-number"}}
                             </label>
-                            <Input @value={{@options.vehicle.vin}} @type="text" class="w-full form-input" placeholder="VIN Number" />
+                            <Input @value={{@options.vehicle.vin}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.common.vin-number"}} />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
-                                Make
+                                {{t "fleet-ops.component.modals.vehicle-details.make"}}
                             </label>
-                            <Input @value={{@options.vehicle.make}} @type="text" class="w-full form-input" placeholder="Vehicle Make" />
+                            <Input @value={{@options.vehicle.make}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.make"}} />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
-                                Model
+                                {{t "fleet-ops.component.modals.vehicle-details.model"}}
                             </label>
-                            <Input @value={{@options.vehicle.model}} @type="text" class="w-full form-input" placeholder="Vehicle Model" />
+                            <Input @value={{@options.vehicle.model}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.model"}} />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
-                                Year
+                                {{t "fleet-ops.component.modals.vehicle-details.year"}}
                             </label>
-                            <Input @value={{@options.vehicle.year}} @type="text" class="w-full form-input" placeholder="Vehicle Year" />
+                            <Input @value={{@options.vehicle.year}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.year"}} />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
-                                Driver Assigned
+                                {{t "fleet-ops.component.modals.vehicle-details.driver-assigned"}}
                             </label>
                             <ModelSelect @modelName="driver" @selectedModel={{@options.vehicle.driver}} @placeholder="Select Driver" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut @options.vehicle.driver)}} as |model|>
                                 {{model.name}}
@@ -61,11 +61,11 @@
                     </div>
                 </ContentPanel>
 
-                <ContentPanel @title="Avatar" @open={{false}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                <ContentPanel @title={{t "fleet-ops.component.modals.vehicle-details.avatar"}} @open={{false}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
                     <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2">
                         <div class="input-group mb-2">
-                            <InputLabel @labelText="Select map avatar" @helpText="Select an avatar to be used for rendering on maps when using geolocation tracking features." />
-                            <FetchSelect @wrapperClass="w-60" @placeholder="Select avatar" @endpoint="vehicles/avatars" @selected={{this.vehicle.avatar_url}} @optionValue="value" @onChange={{fn (mut this.vehicle.avatar_url)}} as |option|>
+                            <InputLabel @labelText={{t "fleet-ops.component.modals.vehicle-form.map-avatar"}} @helpText={{t "fleet-ops.component.modals.vehicle-form.map-avatar-text"}} />
+                            <FetchSelect @wrapperClass="w-60" @placeholder={{t "fleet-ops.component.modals.vehicle-form.select-avatar"}} @endpoint="vehicles/avatars" @selected={{this.vehicle.avatar_url}} @optionValue="value" @onChange={{fn (mut this.vehicle.avatar_url)}} as |option|>
                                 {{titleize (humanize option.key)}}
                             </FetchSelect>
                         </div>
@@ -75,203 +75,203 @@
                     </div>
                 </ContentPanel>
 
-                <ContentPanel @title="Model Information" @open={{false}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                <ContentPanel @title={{t "fleet-ops.component.modals.vehicle-details.model-information"}} @open={{false}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
                     <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2">
                         <div class="input-group mb-2">
                             <label>
-                                0 To 100 kph
+                                {{t "fleet-ops.component.modals.vehicle-details.acceleration"}}
                             </label>
-                            <Input @value={{@options.vehicle.model_0_to_100_kph}} @type="text" class="w-full form-input" placeholder="0 To 100 kph" />
+                            <Input @value={{@options.vehicle.model_0_to_100_kph}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-details.acceleration"}} />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
-                                Body
+                                {{t "fleet-ops.component.modals.vehicle-details.body"}}
                             </label>
-                            <Input @value={{@options.vehicle.model_body}} @type="text" class="w-full form-input" placeholder="Vehicle Body Type" />
+                            <Input @value={{@options.vehicle.model_body}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.body"}} />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
-                                Doors
+                                {{t "fleet-ops.component.modals.vehicle-details.doors"}}
                             </label>
-                            <Input @value={{@options.vehicle.model_doors}} @type="text" class="w-full form-input" placeholder="Number of Doors" />
+                            <Input @value={{@options.vehicle.model_doors}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.doors"}} />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
-                                Drive
+                                {{t "fleet-ops.common.driver"}}
                             </label>
-                            <Input @value={{@options.vehicle.model_drive}} @type="text" class="w-full form-input" placeholder="Vehicle Drive Type" />
+                            <Input @value={{@options.vehicle.model_drive}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.type"}} />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
-                                Length (mm)
+                                {{t "fleet-ops.component.modals.vehicle-details.length"}}
                             </label>
-                            <Input @value={{@options.vehicle.model_length_mm}} @type="text" class="w-full form-input" placeholder="Vehicle Length (mm)" />
+                            <Input @value={{@options.vehicle.model_length_mm}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.length"}} />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
-                                Seats
+                                {{t "fleet-ops.component.modals.vehicle-details.seats"}}
                             </label>
-                            <Input @value={{@options.vehicle.model_seats}} @type="text" class="w-full form-input" placeholder="Number of Seats" />
+                            <Input @value={{@options.vehicle.model_seats}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.seats"}} />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
-                                Top Speed (kph)
+                                {{t "fleet-ops.component.modals.vehicle-details.top-speed"}}
                             </label>
-                            <Input @value={{@options.vehicle.model_top_speed_kph}} @type="text" class="w-full form-input" placeholder="Vehicle Top Speed (kph)" />
+                            <Input @value={{@options.vehicle.model_top_speed_kph}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.top-speed"}} />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
-                                Transmission Type
+                                {{t "fleet-ops.component.modals.vehicle-details.transmission"}}
                             </label>
-                            <Input @value={{@options.vehicle.model_transmission_type}} @type="text" class="w-full form-input" placeholder=" Vehicle Transmission Type" />
+                            <Input @value={{@options.vehicle.model_transmission_type}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.transmission"}} />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
-                                Weight (kg)
+                                {{t "fleet-ops.component.modals.vehicle-details.weight"}}
                             </label>
-                            <Input @value={{@options.vehicle.model_weight_kg}} @type="text" class="w-full form-input" placeholder="Vehicle Weight (kg)" />
+                            <Input @value={{@options.vehicle.model_weight_kg}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.weight"}} />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
-                                Wheelbase (mm)
+                                {{t "fleet-ops.component.modals.vehicle-details.wheelbase"}}
                             </label>
-                            <Input @value={{@options.vehicle.model_wheelbase_mm}} @type="text" class="w-full form-input" placeholder="Vehicle Wheelbase Length (mm)" />
+                            <Input @value={{@options.vehicle.model_wheelbase_mm}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.wheelbase"}} />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
-                                Width (mm)
+                                {{t "fleet-ops.component.modals.vehicle-details.width"}}
                             </label>
-                            <Input @value={{@options.vehicle.model_width_mm}} @type="text" class="w-full form-input" placeholder="Vehicle Width (mm)" />
+                            <Input @value={{@options.vehicle.model_width_mm}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.width"}} />
                         </div>
                     </div>
                 </ContentPanel>
 
-                <ContentPanel @title="Engine Information" @open={{false}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                <ContentPanel @title={{t "fleet-ops.component.modals.vehicle-details.engine-information"}} @open={{false}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
                     <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2">
                         <div class="input-group mb-2">
                             <label>
-                                Engine Bore (mm)
+                                {{t "fleet-ops.component.modals.vehicle-details.engine-bore"}}
                             </label>
-                            <Input @value={{@options.vehicle.model_engine_bore_mm}} @type="text" class="w-full form-input" placeholder="Engine Bore (mm)" />
+                            <Input @value={{@options.vehicle.model_engine_bore_mm}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.engine-bore"}} />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
-                                CC
+                                {{t "fleet-ops.component.modals.vehicle-details.cc"}}
                             </label>
-                            <Input @value={{@options.vehicle.model_engine_cc}} @type="text" class="w-full form-input" placeholder="Engine CC" />
+                            <Input @value={{@options.vehicle.model_engine_cc}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.cc"}} />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
-                                Compression
+                                {{t "fleet-ops.component.modals.vehicle-details.compression"}}
                             </label>
-                            <Input @value={{@options.vehicle.model_engine_compression}} @type="text" class="w-full form-input" placeholder=" Engine Compression" />
+                            <Input @value={{@options.vehicle.model_engine_compression}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.compression"}} />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
-                                Cylinders
+                                {{t "fleet-ops.component.modals.vehicle-details.cylinder"}}
                             </label>
-                            <Input @value={{@options.vehicle.model_engine_cyl}} @type="text" class="w-full form-input" placeholder="Number of Cylinders" />
+                            <Input @value={{@options.vehicle.model_engine_cyl}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.cylinder"}} />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
-                                Position
+                                {{t "fleet-ops.component.modals.vehicle-details.position"}}
                             </label>
-                            <Input @value={{@options.vehicle.model_engine_position}} @type="text" class="w-full form-input" placeholder="Engine Position" />
+                            <Input @value={{@options.vehicle.model_engine_position}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.position"}} />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
-                                Power (ps)
+                                {{t "fleet-ops.component.modals.vehicle-details.power-ps"}}
                             </label>
-                            <Input @value={{@options.vehicle.model_engine_power_ps}} @type="text" class="w-full form-input" placeholder="Engine Power (ps)" />
+                            <Input @value={{@options.vehicle.model_engine_power_ps}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.power-ps"}} />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
-                                Power (rpm)
+                                {{t "fleet-ops.component.modals.vehicle-details.power-rpm"}}
                             </label>
-                            <Input @value={{@options.vehicle.model_engine_power_rpm}} @type="text" class="w-full form-input" placeholder="Engine Power (rpm)" />
+                            <Input @value={{@options.vehicle.model_engine_power_rpm}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.power-rpm"}} />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
-                                Stroke (mm)
+                                {{t "fleet-ops.component.modals.vehicle-details.stroke"}}
                             </label>
-                            <Input @value={{@options.vehicle.model_engine_stroke_mm}} @type="text" class="w-full form-input" placeholder="Stroke Length (mm)" />
+                            <Input @value={{@options.vehicle.model_engine_stroke_mm}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.stroke"}} />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
-                                Torque (nm)
+                                {{t "fleet-ops.component.modals.vehicle-details.torque-nm"}}
                             </label>
-                            <Input @value={{@options.vehicle.model_engine_torque_nm}} @type="text" class="w-full form-input" placeholder="Engine Torque (nm)" />
+                            <Input @value={{@options.vehicle.model_engine_torque_nm}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.torque-nm"}} />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
-                                Torque (rpm)
+                                {{t "fleet-ops.component.modals.vehicle-details.torque-rpm"}}
                             </label>
-                            <Input @value={{@options.vehicle.model_engine_torque_rpm}} @type="text" class="w-full form-input" placeholder="Engine Torque (rpm)" />
+                            <Input @value={{@options.vehicle.model_engine_torque_rpm}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.torque-rpm"}} />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
-                                Valves per Cylinder
+                                {{t "fleet-ops.component.modals.vehicle-details.valves"}}
                             </label>
-                            <Input @value={{@options.vehicle.model_engine_valves_per_cyl}} @type="text" class="w-full form-input" placeholder="Valves per Cylinder" />
+                            <Input @value={{@options.vehicle.model_engine_valves_per_cyl}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-details.valves"}} />
                         </div>
                     </div>
                 </ContentPanel>
 
-                <ContentPanel @title="Fuel Information" @open={{false}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                <ContentPanel @title={{t "fleet-ops.component.modals.vehicle-details.fuel-information"}} @open={{false}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
                     <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2">
                         <div class="input-group mb-2">
                             <label>
-                                Fuel
+                                {{t "fleet-ops.component.modals.vehicle-details.fuel"}}
                             </label>
-                            <Input @value={{@options.vehicle.model_engine_fuel}} @type="text" class="w-full form-input" placeholder="Fuel Type" />
+                            <Input @value={{@options.vehicle.model_engine_fuel}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.fuel-type"}} />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
-                                Fuel Cap (L)
+                                {{t "fleet-ops.component.modals.vehicle-details.fuel-cap"}}
                             </label>
-                            <Input @value={{@options.vehicle.model_fuel_cap_l}} @type="text" class="w-full form-input" placeholder="Fuel Cap Volume (L)" />
+                            <Input @value={{@options.vehicle.model_fuel_cap_l}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-form.fuel-cap"}} />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
-                                Liters Per km City
+                                {{t "fleet-ops.component.modals.vehicle-details.liters-city"}}
                             </label>
-                            <Input @value={{@options.vehicle.model_lkm_city}} @type="text" class="w-full form-input" placeholder="Liters Per km City" />
+                            <Input @value={{@options.vehicle.model_lkm_city}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-details.liters-city"}} />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
-                                Liters Per km Highway
+                                {{t "fleet-ops.component.modals.vehicle-details.liters-highway"}}
                             </label>
-                            <Input @value={{@options.vehicle.model_lkm_hwy}} @type="text" class="w-full form-input" placeholder="Liters Per km Highway" />
+                            <Input @value={{@options.vehicle.model_lkm_hwy}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-details.liters-highway"}} />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
-                                Liters Per km Mixed
+                                {{t "fleet-ops.component.modals.vehicle-details.liters-mixed"}}
                             </label>
-                            <Input @value={{@options.vehicle.model_lkm_mixed}} @type="text" class="w-full form-input" placeholder="Liters Per km Mixed" />
+                            <Input @value={{@options.vehicle.model_lkm_mixed}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.vehicle-details.liters-mixed"}} />
                         </div>
                     </div>
                 </ContentPanel>