@fleetbase/fleetops-engine 0.3.9 → 0.4.1

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

@@ -12,12 +12,12 @@
                 <div class="grid grid-cols-1 gap-2 text-xs 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.place.name}}</div>
                     </div>
 
                     <div class="field-info-container">
-                        <div class="field-name">Street</div>
+                        <div class="field-name">{{t "fleet-ops.common.street"}}</div>
                         <div class="field-value">{{n-a @options.place.street1}}</div>
                     </div>
                 </div>
@@ -25,17 +25,17 @@
                 <div class="grid grid-cols-3 gap-2 text-xs dark:text-gray-100">
 
                     <div class="field-info-container">
-                        <div class="field-name">Neighborhood</div>
+                        <div class="field-name">{{t "fleet-ops.common.neighborhood"}}</div>
                         <div class="field-value">{{n-a @options.place.neighborhood}}</div>
                     </div>
 
                     <div class="field-info-container">
-                        <div class="field-name">Building</div>
+                        <div class="field-name">{{t "fleet-ops.common.building"}}</div>
                         <div class="field-value">{{n-a @options.place.building}}</div>
                     </div>
 
                     <div class="field-info-container">
-                        <div class="field-name">Security Access Code</div>
+                        <div class="field-name">{{t "fleet-ops.common.security-access-code"}}</div>
                         <div class="field-value">{{n-a @options.place.security_access_code}}</div>
                     </div>
                 </div>
@@ -43,17 +43,17 @@
                 <div class="grid grid-cols-3 gap-2 text-xs dark:text-gray-100">
 
                     <div class="field-info-container">
-                        <div class="field-name">City</div>
+                        <div class="field-name">{{t "fleet-ops.common.city"}}</div>
                         <div class="field-value">{{n-a @options.place.city}}</div>
                     </div>
 
                     <div class="field-info-container">
-                        <div class="field-name">State</div>
+                        <div class="field-name">{{t "fleet-ops.common.state"}}</div>
                         <div class="field-value">{{n-a @options.place.province}}</div>
                     </div>
 
                     <div class="field-info-container">
-                        <div class="field-name">Country</div>
+                        <div class="field-name">{{t "fleet-ops.common.country"}}</div>
                         <div class="field-value"><CountryName @country={{@options.place.country}} @showFlag={{true}} /></div>
                     </div>
                 </div>
@@ -61,17 +61,17 @@
                 <div class="grid grid-cols-3 gap-2 text-xs dark:text-gray-100">
 
                     <div class="field-info-container">
-                        <div class="field-name">Phone</div>
+                        <div class="field-name">{{t "fleet-ops.common.phone"}}</div>
                         <div class="field-value">{{n-a @options.place.phone}}</div>
                     </div>
 
                     <div class="field-info-container">
-                        <div class="field-name">Email</div>
+                        <div class="field-name">{{t "fleet-ops.common.email"}}</div>
                         <div class="field-value">{{n-a @options.place.email}}</div>
                     </div>
 
                     <div class="field-info-container">
-                        <div class="field-name">Vendor</div>
+                        <div class="field-name">{{t "fleet-ops.common.vendor"}}</div>
                         <div class="field-value">
                             {{#if @options.place.vendor_uuid}}
                                 <a href="javascript:;" {{on "click" @options.viewVendor}}>
@@ -87,10 +87,10 @@
                 <div class="grid grid-cols-2 gap-2 text-xs dark:text-gray-100">
                     <div class="mb-5">
                         <label class="flex items-center mb-2 font-bold">
-                            Coordinates
+                            {{t "fleet-ops.common.coordinates"}}
                             <a href="javascript:;" class="block ml-3" {{on "click" @options.viewPlaceOnMap}}>
                                 <FaIcon @icon="map" class="mr-1" />
-                                View on map
+                                {{t "fleet-ops.component.modals.place-details.view"}}
                             </a>
                         </label>
                         <span class="block truncate">

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

@@ -1,30 +1,30 @@
 <Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
     <div class="modal-body-container">
         <div class="grid grid-cols-3 gap-1 text-xs dark:text-gray-100">
-            <InputGroup @name="Name" @autocomplete="nope" @value={{@options.place.name}} @wrapperClass="col-span-3" />
-            <InputGroup @name="Street 1" @value={{@options.place.street1}} @wrapperClass="col-span-3">
-                <AutocompleteInput @value={{@options.place.street1}} @fetchUrl="places/lookup" @onSelect={{@options.autocomplete}} placeholder="Street 1" class="w-full" as |result|>
+            <InputGroup @name={{t "fleet-ops.common.name"}} @autocomplete="nope" @value={{@options.place.name}} @wrapperClass="col-span-3" />
+            <InputGroup @name={{t "fleet-ops.common.street-1"}} @value={{@options.place.street1}} @wrapperClass="col-span-3">
+                <AutocompleteInput @value={{@options.place.street1}} @fetchUrl="places/lookup" @onSelect={{@options.autocomplete}} placeholder={{t "fleet-ops.common.street-1"}} class="w-full" as |result|>
                     {{result.address}}
                 </AutocompleteInput>
             </InputGroup>
-            <InputGroup @name="Street 2" @autocomplete="nope" @value={{@options.place.street2}} @wrapperClass="col-span-3" />
-            <InputGroup @name="Neighborhood" @autocomplete="nope" @value={{@options.place.neighborhood}} />
-            <InputGroup @name="Building" @autocomplete="nope" @value={{@options.place.building}} />
-            <InputGroup @name="Security Access Code" @autocomplete="nope" @value={{@options.place.security_access_code}} />
-            <InputGroup @name="Postal Code" @autocomplete="nope" @value={{@options.place.postal_code}} />
-            <InputGroup @name="City" @autocomplete="nope" @value={{@options.place.city}} />
-            <InputGroup @name="State" @autocomplete="nope" @value={{@options.place.province}} />
-            <InputGroup @name="Country" @wrapperClass="col-span-2">
-                <CountrySelect class="w-full form-input form-select form-datalist" @value={{@options.place.country}} @onChange={{fn (mut @options.place.country)}} placeholder="Country" />
+            <InputGroup @name={{t "fleet-ops.common.street-2"}} @autocomplete="nope" @value={{@options.place.street2}} @wrapperClass="col-span-3" />
+            <InputGroup @name={{t "fleet-ops.common.neighborhood"}} @autocomplete="nope" @value={{@options.place.neighborhood}} />
+            <InputGroup @name={{t "fleet-ops.common.building"}} @autocomplete="nope" @value={{@options.place.building}} />
+            <InputGroup @name={{t "fleet-ops.common.security-access-code"}} @autocomplete="nope" @value={{@options.place.security_access_code}} />
+            <InputGroup @name={{t "fleet-ops.common.postal-code"}} @autocomplete="nope" @value={{@options.place.postal_code}} />
+            <InputGroup @name={{t "fleet-ops.common.city"}} @autocomplete="nope" @value={{@options.place.city}} />
+            <InputGroup @name={{t "fleet-ops.common.state"}} @autocomplete="nope" @value={{@options.place.province}} />
+            <InputGroup @name={{t "fleet-ops.common.country"}} @wrapperClass="col-span-2">
+                <CountrySelect class="w-full form-input form-select form-datalist" @value={{@options.place.country}} @onChange={{fn (mut @options.place.country)}} placeholder={{t "fleet-ops.common.country"}} />
             </InputGroup>
-            <InputGroup @name="Coordinates" @wrapperClass="col-span-2">
+            <InputGroup @name={{t "fleet-ops.common.coordinates"}} @wrapperClass="col-span-2">
                 <CoordinatesInput @value={{@options.place.location}} @onChange={{@options.updatePlaceCoordinates}} @onGeocode={{@options.autocomplete}} @onUpdatedFromMap={{@options.reverseGeocode}} @onInit={{@options.setCoordinatesInput}} />
             </InputGroup>
             <div class="col-span-1"></div>
-            <InputGroup @name="Phone">
+            <InputGroup @name={{t "fleet-ops.common.phone"}}>
                 <PhoneInput @value={{@options.place.phone}} @autocomplete="nope" @onInput={{fn (mut @options.place.phone)}} class="form-input w-full" />
             </InputGroup>
-            <InputGroup @name="Email" @autocomplete="nope" @value={{@options.place.email}} />
+            <InputGroup @name={{t "fleet-ops.common.email"}} @autocomplete="nope" @value={{@options.place.email}} />
         </div>
     </div>
 </Modal::Default>

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

@@ -2,19 +2,19 @@
     <div class="modal-body-container" ...attributes>
         <div class="input-group">
             <label>
-                Policy Name
+                {{t "fleet-ops.component.modals.policy-form.name"}}
             </label>
-            <Input @value={{@options.policy.name}}  @type="text" class="w-full form-input" placeholder="Enter a name for your policy" />
+            <Input @value={{@options.policy.name}}  @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.policy-form.name-text"}} />
         </div>
         <div class="input-group">
             <label>
-                Policy Description
+                {{t "fleet-ops.component.modals.policy-form.description"}}
             </label>
-            <Input @value={{@options.policy.description}}  @type="text" class="w-full form-input" placeholder="Enter a description for your policy" />
+            <Input @value={{@options.policy.description}}  @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.policy-form.description-text"}} />
         </div>
         <div class="input-group">
             <label>
-               Select Permissions
+               {{t "fleet-ops.component.modals.policy-form.permissions"}}
             </label>
             <PermissionPicker @selected={{@options.policy.permissions}} @onChange={{fn (mut @options.policy.permissions)}} />
         </div>

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

@@ -2,13 +2,13 @@
     <div class="modal-body-container" ...attributes>
         <div class="input-group">
             <label>
-                Role Name
+                {{t "fleet-ops.component.modals.role-form.name"}}
             </label>
-            <Input @value={{@options.role.name}}  @type="text" class="w-full form-input" placeholder="Enter a name for this role" />
+            <Input @value={{@options.role.name}}  @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.role-form.name-text"}} />
         </div>
         <div class="input-group">
             <label>
-               Select Permissions
+               {{t "fleet-ops.component.modals.role-form.permissions"}}
             </label>
             <PermissionPicker @selected={{@options.role.permissions}} @onChange={{fn (mut @options.role.permissions)}} />
         </div>

package/addon/components/modals/select-payment-method.hbs

@@ -4,7 +4,7 @@
             <a href="javascript:;" {{on "click" (fn @options.selectPaymentMethod paymentMethod)}} class="flex items-center justify-between px-3 py-2 shadow-sm rounded-md border border-gray-900 {{if (eq @options.selectedPaymentMethod.id paymentMethod.id) 'border-blue-500 shadow-outline-blue'}}">
                 <div class="flex items-center dark:text-gray-100">
                     <FaIcon @icon="cc-visa" class="mr-1" />
-                    <span class="mr-2">Card ending in {{paymentMethod.last4}}</span>
+                    <span class="mr-2">{{t "fleet-ops.component.modals.select-payment-method" htmlSafe=true method=@paymentMethod.last4}}</span>
                 </div>
             </a>
         {{/each}}

package/addon/components/modals/service-area-form.hbs

@@ -1,30 +1,30 @@
 <Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
     <div class="modal-body-container">
-        <InputGroup @value={{@options.serviceArea.name}} @name="Service Area Name" @helpText="Set a display name for the service area." @required={{true}} />
-        <InputGroup @name="Service Area Type" @helpText="Select the type definition for this service area .">
+        <InputGroup @value={{@options.serviceArea.name}} @name={{t "fleet-ops.component.modals.service-area-form.name"}} @helpText={{t "fleet-ops.component.modals.service-area-form.name-text"}} @required={{true}} />
+        <InputGroup @name={{t "fleet-ops.component.modals.service-area-form.type"}} @helpText={{t "fleet-ops.component.modals.service-area-form.type-text"}}>
             <Select
                 @options={{@options.serviceAreaTypes}}
                 @value={{@options.serviceArea.type}}
                 @onSelect={{fn (mut @options.serviceArea.type)}}
-                @placeholder="Select service area type..."
+                @placeholder={{t "fleet-ops.component.modals.service-area-form.select-type"}}
                 class="w-full"
             />
         </InputGroup>
         <InputGroup
             @type="color"
             @value={{@options.serviceArea.stroke_color}}
-            @name="Service Area Border Color"
-            @helpText="Customize the border color for this service area."
+            @name={{t "fleet-ops.component.modals.service-area-form.border-color"}}
+            @helpText={{t "fleet-ops.component.modals.service-area-form.customize-border-color"}}
             class="p-0 border-0 m-0 w-8 h-8 bg-transparent rounded-none"
         />
         <InputGroup
             @type="color"
             @value={{@options.serviceArea.color}}
-            @name="Service Area Color"
-            @helpText="Customize the fill color for this service area."
+            @name={{t "fleet-ops.component.modals.service-area-form.area-color"}}
+            @helpText={{t "fleet-ops.component.modals.service-area-form.customize-area-color"}}
             class="p-0 border-0 m-0 w-8 h-8 bg-transparent rounded-none"
         />
-        <InputGroup @name="Service Area Country" @helpText="Optionally set the country in which this service area is located or based in.">
+        <InputGroup @name={{t "fleet-ops.component.modals.service-area-form.country"}} @helpText={{t "fleet-ops.component.modals.service-area-form.country-text"}}>
             <CountrySelect class="w-full form-input" @value={{@options.serviceArea.country}} @onChange={{fn (mut @options.serviceArea.country)}} />
         </InputGroup>
     </div>

package/addon/components/modals/set-password.hbs

@@ -5,11 +5,11 @@
                 <FaIcon @icon="info-circle" class="text-blue-900 mr-4" />
             </div>
             <p class="flex-1 text-sm text-blue-900 dark:text-blue-900">
-                Welcome to Fleetbase! Before you get started, set a new password to continue below.
+                {{t "fleet-ops.component.modals.set-password.message"}}
             </p>
         </div>
 
-        <InputGroup @name="New Password" @value={{@options.password}} @type="password" @inputClass="form-input-lg" @helpText="Enter a password at-least 8 characters to continue." />
-        <InputGroup @name="Confirm Password" @value={{@options.password_confirmation}} @type="password" @inputClass="form-input-lg" @helpText="Enter a password at-least 8 characters to continue." />
+        <InputGroup @name={{t "fleet-ops.component.modals.set-password.new-password"}} @value={{@options.password}} @type="password" @inputClass="form-input-lg" @helpText={{t "fleet-ops.component.modals.set-password.help-text"}} />
+        <InputGroup @name={{t "fleet-ops.component.modals.set-password.confirm-password"}} @value={{@options.password_confirmation}} @type="password" @inputClass="form-input-lg" @helpText={{t "fleet-ops.component.modals.set-password.help-text"}} />
     </div>
 </Modal::Default>

package/addon/components/modals/uninstall-prompt.hbs

@@ -7,9 +7,8 @@
                 </div>
             </div>
             <div class="flex-1 dark:text-gray-100">
-                <p class="text-base mb-2">You are attempting to uninstall the extension "{{or @options.extensionName}}".
-                    Are you sure you wish to proceed with this uninstallation?</p>
-                <small>All configuration and customized settings will be lost.</small>
+                <p class="text-base mb-2">{{t "fleet-ops.component.modals.uninstall-prompt.message" htmlSafe=true options=@options.extensionName}}</p>
+                <small>{{t "fleet-ops.component.modals.uninstall-prompt.sub-message"}}</small>
             </div>
         </div>
         {{#if @options.isUninstalling}}

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

@@ -8,12 +8,12 @@
                         {{#if queue.files.length}}
                             <Spinner class="mr-1" />
                             <span>
-                                Uploading...
+                                {{t "fleet-ops.common.uploading"}}
                             </span>
                         {{else}}
                             <FaIcon @icon="image" class="mr-1" />
                             <span>
-                                Upload new
+                                {{t "fleet-ops.common.upload-new"}}
                             </span>
                         {{/if}}
                     </a>
@@ -23,30 +23,30 @@
                 <div class="grid grid-cols-2 gap-3 text-xs dark:text-gray-100">
                     <div class="input-group">
                         <label>
-                            Name
+                            {{t "fleet-ops.common.name"}}
                         </label>
-                        <Input @value={{@options.user.name}}  @type="text" class="w-full form-input" placeholder="Name" />
+                        <Input @value={{@options.user.name}}  @type="text" class="w-full form-input" placeholder={{t "fleet-ops.common.name"}} />
                     </div>
 
                     <div class="input-group">
                         <label>
-                            Email
+                            {{t "fleet-ops.common.email"}}
                         </label>
-                        <Input @value={{@options.user.email}}  @type="text" class="w-full form-input" placeholder="Email" />
+                        <Input @value={{@options.user.email}}  @type="text" class="w-full form-input" placeholder={{t "fleet-ops.common.email"}} />
                     </div>
 
                     <div class="input-group">
                         <label>
-                            Phone
+                            {{t "fleet-ops.common.phone"}}
                         </label>
                         <PhoneInput @value={{@options.user.phone}} @onInput={{fn (mut @options.user.phone)}} class="form-input w-full" />
                     </div>
 
                     <div class="input-group">
                         <label>
-                            Country
+                            {{t "fleet-ops.common.country"}}
                         </label>
-                        <CountrySelect class="w-full form-input form-select form-datalist" @value={{@options.user.country}} @onChange={{fn (mut @options.user.country)}} placeholder="Country" />
+                        <CountrySelect class="w-full form-input form-select form-datalist" @value={{@options.user.country}} @onChange={{fn (mut @options.user.country)}} placeholder={{t "fleet-ops.common.country"}} />
                     </div>
                 </div>
             </div>

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>