@fleetbase/fleetops-engine 0.3.9 → 0.4.1

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>

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

@@ -11,15 +11,15 @@
             </div>
             <div class="grid grid-cols-1 md:grid-cols-3 gap-2 text-xs dark:text-gray-100">
                 <div class="field-info-container">
-                    <div class="field-name">Sandbox</div>
+                    <div class="field-name">{{t "fleet-ops.component.modals.vendor-details.sandbox"}}</div>
                     <div class="field-value">{{if @options.vendor.sandbox "Yes" "No"}}</div>
                 </div>
                 <div class="field-info-container">
-                    <div class="field-name">Host</div>
+                    <div class="field-name">{{t "fleet-ops.component.modals.vendor-details.host"}}</div>
                     <div class="field-value">{{n-a @options.vendor.host}}</div>
                 </div>
                 <div class="field-info-container">
-                    <div class="field-name">Namespace</div>
+                    <div class="field-name">{{t "fleet-ops.component.modals.vendor-details.namespace"}}</div>
                     <div class="field-value">{{n-a @options.vendor.namespace}}</div>
                 </div>
                 {{#if (is-object @options.vendor.options)}}
@@ -34,41 +34,41 @@
         {{else}}
             <div class="grid grid-cols-3 md:grid-cols-2 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.vendor.name}}</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.vendor.email}}</div>
                 </div>
 
                 <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.vendor.phone}}</div>
                 </div>
 
                 <div class="field-info-container">
-                    <div class="field-name">Website URL</div>
+                    <div class="field-name">{{t "fleet-ops.common.website-url"}}</div>
                     <div class="field-value">{{n-a @options.vendor.website_url}}</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.vendor.country}} @showFlag={{true}} />
                     </div>
                 </div>
 
                 <div class="field-info-container">
-                    <div class="field-name">Status</div>
+                    <div class="field-name">{{t "fleet-ops.common.status"}}</div>
                     <div class="field-value">
                         <Badge @status={{@options.vendor.status}} />
                     </div>
                 </div>
 
                 <div class="field-info-container">
-                    <div class="field-name">Address</div>
+                    <div class="field-name">{{t "fleet-ops.common.address"}}</div>
                     <div class="field-value">{{n-a @options.vendor.address}}</div>
                 </div>
             </div>

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

@@ -8,7 +8,7 @@
                             <FaIcon @icon="handshake" @size="xl" class="text-blue-500" />
                         </div>
                         <div>
-                            <span class="text-gray-900 dark:text-gray-100 text-lg">Choose Integrated Vendor</span>
+                            <span class="text-gray-900 dark:text-gray-100 text-lg">{{t "fleet-ops.component.modals.vendor-form.choose-vendor"}}</span>
                         </div>
                     </button>
                     <button type="button" class="outline-none flex-1 rounded-lg bg-white dark:bg-gray-900 border-2 border-transparent px-4 py-2 flex items-center justify-center {{if (eq @options.action "create") 'border-blue-500'}}" {{on "click" (fn (mut @options.action) "create")}}>
@@ -16,7 +16,7 @@
                             <FaIcon @icon="building" @size="xl" class="text-blue-500" />
                         </div>
                         <div>
-                            <span class="text-gray-900 dark:text-gray-100 text-lg">Create Custom Vendor</span>
+                            <span class="text-gray-900 dark:text-gray-100 text-lg">{{t "fleet-ops.component.modals.vendor-form.create-vendor"}}</span>
                         </div>
                     </button>
                 </div>
@@ -39,38 +39,38 @@
 
             {{#if @options.selectedIntegratedVendor}}
                 <div class="mb-2">
-                    <label class="mb-2 block dark:text-gray-400 text-xs">Credentials</label>
+                    <label class="mb-2 block dark:text-gray-400 text-xs">{{t "fleet-ops.component.modals.vendor-form.credentials"}}</label>
                     {{#each @options.selectedIntegratedVendor.credential_params as |param|}}
-                        <InputGroup @name={{smart-humanize param.key}} @value={{mut (get @options.integratedVendor.credentials param.key)}} @helpText={{concat "Optionally supply your own " (smart-humanize param.key) " to configure this vendor."}} />
+                        <InputGroup @name={{smart-humanize param.key}} @value={{mut (get @options.integratedVendor.credentials param.key)}} @helpText={{concat (t "fleet-ops.component.modals.vendor-form.optionally") (smart-humanize param.key) (t "fleet-ops.component.modals.vendor-form.configure-vendor")}} />
                     {{/each}}
                 </div>
                 <div class="mb-2">
-                    <label class="mb-2 block dark:text-gray-400 text-xs">Options</label>
+                    <label class="mb-2 block dark:text-gray-400 text-xs">{{t "fleet-ops.component.modals.vendor-form.options"}}</label>
                     {{#each @options.selectedIntegratedVendor.option_params as |param|}}
                         {{#if param.options}}
                             <InputGroup @name={{smart-humanize param.key}}>
-                                <Select @value={{mut (get @options.integratedVendor.options param.key)}} @options={{param.options}} @optionValue={{param.optionValue}} @optionLabel={{param.optionLabel}} @humanize={{true}} @placeholder={{concat "Select " (smart-humanize param.key)}} @onSelect={{fn (mut (get @options.integratedVendor.options param.key))}} />
+                                <Select @value={{mut (get @options.integratedVendor.options param.key)}} @options={{param.options}} @optionValue={{param.optionValue}} @optionLabel={{param.optionLabel}} @humanize={{true}} @placeholder={{concat (t "fleet-ops.component.modals.vendor-form.select") (smart-humanize param.key)}} @onSelect={{fn (mut (get @options.integratedVendor.options param.key))}} />
                             </InputGroup>
                         {{else}}
-                            <InputGroup @name={{smart-humanize param.key}} @value={{mut (get @options.integratedVendor.options param.key)}} @helpText={{concat "Optionally supply your own " (smart-humanize param.key) " to configure this vendor."}} />
+                            <InputGroup @name={{smart-humanize param.key}} @value={{mut (get @options.integratedVendor.options param.key)}} @helpText={{concat (t "fleet-ops.component.modals.vendor-form.optionally") (smart-humanize param.key) (t "fleet-ops.component.modals.vendor-form.configure-vendor")}} />
                         {{/if}}
                     {{/each}}
                 </div>
                 <InputGroup @wrapperClass="mb-2">
-                    <Checkbox @value={{@options.integratedVendor.sandbox}} @label="Sandbox" @onToggle={{fn (mut @options.integratedVendor.sandbox)}} @alignItems="center" @labelClass="mb-0i" />
+                    <Checkbox @value={{@options.integratedVendor.sandbox}} @label={{t "fleet-ops.component.modals.vendor-form.sandbox"}} @onToggle={{fn (mut @options.integratedVendor.sandbox)}} @alignItems="center" @labelClass="mb-0i" />
                 </InputGroup>
                 <div>
                     <button type="button" class="btn-link text-xs outline-none text-blue-600 hover:text-blue-600 mb-3" {{on "click" @options.toggleAdvancedOptions}}>
                         {{#if @options.showAdvancedOptions}}
-                            <span>Hide Advanced</span>
+                            <span>{{t "fleet-ops.component.modals.vendor-form.hide-advanced"}}</span>
                         {{else}}
-                            <span>Show Advanced</span>
+                            <span>{{t "fleet-ops.component.modals.vendor-form.show-advanced"}}</span>
                         {{/if}}
                     </button>
                     {{#if @options.showAdvancedOptions}}
-                        <InputGroup @name="Custom Host" @value={{@options.integratedVendor.host}} @helpText="Optionally provide a custom host that should be used for this integration." />
-                        <InputGroup @name="Custom Namespace" @value={{@options.integratedVendor.namespace}} @helpText="Optionally provide a custom namespace or api version that should be used for the integration." />
-                        <InputGroup @name="Webhook URL" @value={{@options.integratedVendor.webhook_url}} @helpText="Integrated vendors will typically require this so that Fleetbase can receive activity updates on the order. Do not change unless you know what you are doing! Changing this may break your order updates!" />
+                        <InputGroup @name={{t "fleet-ops.component.modals.vendor-form.custom-host"}} @value={{@options.integratedVendor.host}} @helpText={{t "fleet-ops.component.modals.vendor-form.host-text"}} />
+                        <InputGroup @name={{t "fleet-ops.component.modals.vendor-form.custom-namespace"}} @value={{@options.integratedVendor.namespace}} @helpText={{t "fleet-ops.component.modals.vendor-form.namespace-text"}} />
+                        <InputGroup @name={{t "fleet-ops.component.modals.vendor-form.webhook"}} @value={{@options.integratedVendor.webhook_url}} @helpText={{t "fleet-ops.component.modals.vendor-form.webhook-text"}} />
                     {{/if}}
                 </div>
             {{/if}}
@@ -85,35 +85,35 @@
                     </div>
                 </div>
                 <div class="mb-2">
-                    <label class="mb-2 block dark:text-gray-400 text-xs">Credentials</label>
+                    <label class="mb-2 block dark:text-gray-400 text-xs">{{t "fleet-ops.component.modals.vendor-form.credentials"}}</label>
                     {{#if @options.isEditingCredentials}}
                         {{#each @options.vendor.provider_settings.credential_params as |param|}}
-                            <InputGroup @name={{smart-humanize param.key}} @value={{mut (get @options.vendor.credentials param.key)}} @helpText={{concat "Optionally supply your own " (smart-humanize param.key) " to configure this vendor."}} />
+                            <InputGroup @name={{smart-humanize param.key}} @value={{mut (get @options.vendor.credentials param.key)}} @helpText={{concat (t "fleet-ops.component.modals.vendor-form.optionally") (smart-humanize param.key) (t "fleet-ops.component.modals.vendor-form.configure-vendor")}} />
                         {{/each}}
                         <div class="my-4">
-                            <Button @text="Cancel credentials reset" @type="danger" @size="sm" @icon="times" @onClick={{@options.toggleCredentialsReset}} />
+                            <Button @text={{t "fleet-ops.component.modals.vendor-form.cancel-credentials"}} @type="danger" @size="sm" @icon="times" @onClick={{@options.toggleCredentialsReset}} />
                         </div>
                     {{else}}
                         <div>
                             <div class="rounded-md border border-blue-300 dark:border-blue-600 bg-blue-100 dark:bg-blue-500 text-blue-900 dark:text-white text-sm px-4 py-2 mb-4">
-                                <p class="mb-2">Sensitive credentials can only be reset, to update credentials you must re-enter the credentials.</p>
+                                <p class="mb-2">{{t "fleet-ops.component.modals.vendor-form.reset-message"}}</p>
                                 <Button @type="default" @size="xs" @icon="repeat" @text="Click here to reset" @onClick={{@options.toggleCredentialsReset}} />
                             </div>
                         </div>
                         {{#each @options.vendor.provider_settings.credential_params as |param|}}
-                            <InputGroup @name={{smart-humanize param.key}} @value="*********" @disabled="true" @helpText={{concat "Optionally supply your own " (smart-humanize param.key) " to configure this vendor."}} />
+                            <InputGroup @name={{smart-humanize param.key}} @value="*********" @disabled="true" @helpText={{concat (t "fleet-ops.component.modals.vendor-form.optionally") (smart-humanize param.key) (t "fleet-ops.component.modals.vendor-form.configure-vendor")}} />
                         {{/each}}
                     {{/if}}
                 </div>
                 <div class="mb-2">
-                     <label class="mb-2 block dark:text-gray-400 text-xs">Options</label>
+                     <label class="mb-2 block dark:text-gray-400 text-xs">{{t "fleet-ops.component.modals.vendor-form.options"}}</label>
                     {{#each @options.vendor.provider_settings.option_params as |param|}}
                         {{#if param.options}}
                             <InputGroup @name={{smart-humanize param.key}}>
-                                <Select @value={{mut (get @options.vendor.options param.key)}} @options={{param.options}} @optionValue={{param.optionValue}} @optionLabel={{param.optionLabel}} @humanize={{true}} @placeholder={{concat "Select " (smart-humanize param.key)}} @onSelect={{fn (mut (get @options.vendor.options param.key))}} />
+                                <Select @value={{mut (get @options.vendor.options param.key)}} @options={{param.options}} @optionValue={{param.optionValue}} @optionLabel={{param.optionLabel}} @humanize={{true}} @placeholder={{concat (t "fleet-ops.component.modals.vendor-form.select") (smart-humanize param.key)}} @onSelect={{fn (mut (get @options.vendor.options param.key))}} />
                             </InputGroup>
                         {{else}}
-                            <InputGroup @name={{smart-humanize param.key}} @value={{mut (get @options.vendor.options param.key)}} @helpText={{concat "Optionally supply your own " (smart-humanize param.key) " to configure this vendor."}} />
+                            <InputGroup @name={{smart-humanize param.key}} @value={{mut (get @options.vendor.options param.key)}} @helpText={{concat (t "fleet-ops.component.modals.vendor-form.optionally") (smart-humanize param.key) (t "fleet-ops.component.modals.vendor-form.configure-vendor")}} />
                         {{/if}}
                     {{/each}}
                 </div>
@@ -123,43 +123,43 @@
                 <div>
                     <button type="button" class="btn-link text-xs outline-none text-blue-600 hover:text-blue-600 mb-3" {{on "click" @options.toggleAdvancedOptions}}>
                         {{#if @options.showAdvancedOptions}}
-                            <span>Hide Advanced</span>
+                            <span>{{t "fleet-ops.component.modals.vendor-form.hide-advanced"}}</span>
                         {{else}}
-                            <span>Show Advanced</span>
+                            <span>{{t "fleet-ops.component.modals.vendor-form.show-advanced"}}</span>
                         {{/if}}
                     </button>
                     {{#if @options.showAdvancedOptions}}
-                        <InputGroup @name="Custom Host" @value={{@options.vendor.host}} @helpText="Optionally provide a custom host that should be used for this integration." />
-                        <InputGroup @name="Custom Namespace" @value={{@options.vendor.namespace}} @helpText="Optionally provide a custom namespace or api version that should be used for the integration." />
-                        <InputGroup @name="Webhook URL" @value={{@options.vendor.webhook_url}} @helpText="Integrated vendors will typically require this so that Fleetbase can receive activity updates on the order. Do not change unless you know what you are doing! Changing this may break your order updates!" />
+                        <InputGroup @name={{t "fleet-ops.component.modals.vendor-form.custom-host"}} @value={{@options.vendor.host}} @helpText={{t "fleet-ops.component.modals.vendor-form.host-text"}} />
+                        <InputGroup @name={{t "fleet-ops.component.modals.vendor-form.custom-namespace"}} @value={{@options.vendor.namespace}} @helpText={{t "fleet-ops.component.modals.vendor-form.namespace-text"}} />
+                        <InputGroup @name={{t "fleet-ops.component.modals.vendor-form.webhook"}} @value={{@options.vendor.webhook_url}} @helpText={{t "fleet-ops.component.modals.vendor-form.webhook-text"}} />
                     {{/if}}
                 </div>
             {{else}}
                 <div class="grid lg:grid-cols-2 grid-cols-1 gap-2 text-xs dark:text-gray-100">
-                    <InputGroup @name="Name" @value={{@options.vendor.name}} @wrapperClass="mb-0" @helpText="The vendor's name, typically the name of a business." />
-                    <InputGroup @name="Email" @type="email" @value={{@options.vendor.email}} @wrapperClass="mb-0" @helpText="The vendor's email, this can be used to trigger emails to the vendor." />
-                    <InputGroup @name="Phone" @type="tel" @value={{@options.vendor.phone}} @wrapperClass="mb-0" @helpText="The vendor's phone #, this can be used to trigger SMS or messages to the vendor." />
-                    <InputGroup @name="Website" @value={{@options.vendor.website}} @wrapperClass="mb-0" @helpText="The vendor's website, optionally add the vendors website for reference." />
+                    <InputGroup @name={{t "fleet-ops.common.name"}} @value={{@options.vendor.name}} @wrapperClass="mb-0" @helpText={{t "fleet-ops.component.modals.vendor-form.name-text"}} />
+                    <InputGroup @name={{t "fleet-ops.common.email"}} @type="email" @value={{@options.vendor.email}} @wrapperClass="mb-0" @helpText={{t "fleet-ops.component.modals.vendor-form.email-text"}} />
+                    <InputGroup @name={{t "fleet-ops.common.phone"}} @type="tel" @value={{@options.vendor.phone}} @wrapperClass="mb-0" @helpText={{t "fleet-ops.component.modals.vendor-form.phone-text"}} />
+                    <InputGroup @name={{t "fleet-ops.common.website"}} @value={{@options.vendor.website}} @wrapperClass="mb-0" @helpText={{t "fleet-ops.component.modals.vendor-form.website-text"}} />
                     <InputGroup @wrapperClass="mb-0 col-span-2">
                         <div class="flex items-start justify-between">
                             <label>
-                                Address
+                                {{t "fleet-ops.common.address"}}
                             </label>
                             <div class="mb-1.5 flex flex-row">
                                 {{#if @options.vendor.has_place}}
-                                    <Button @type="default" @size="xs" @icon="edit" @text="Edit" @onClick={{@options.editAddress}} />
+                                    <Button @type="default" @size="xs" @icon="edit" @text={{t "fleet-ops.common.edit"}} @onClick={{@options.editAddress}} />
                                 {{/if}}
-                                <Button @type="default" @size="xs" @icon="plus" @text="New" @onClick={{@options.newAddress}} />
+                                <Button @type="default" @size="xs" @icon="plus" @text={{t "fleet-ops.common.new"}} @onClick={{@options.newAddress}} />
                             </div>
                         </div>
 
-                        <ModelSelect @modelName="place" @selectedModel={{@options.vendor.place}} @placeholder="Select Address" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{@options.selectAddress}} as |model|>
+                        <ModelSelect @modelName="place" @selectedModel={{@options.vendor.place}} @placeholder={{t "fleet-ops.component.modals.vendor-form.select-address"}} @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{@options.selectAddress}} as |model|>
                             {{model.name}} - {{model.street1}}
                         </ModelSelect>
                     </InputGroup>
 
-                    <InputGroup @name="Country" @wrapperClass="mb-0">
-                        <CountrySelect class="w-full form-input form-select form-datalist" @value={{@options.vendor.country}} @onChange={{fn (mut @options.vendor.country)}} placeholder="Country" />
+                    <InputGroup @name={{t "fleet-ops.common.country"}} @wrapperClass="mb-0">
+                        <CountrySelect class="w-full form-input form-select form-datalist" @value={{@options.vendor.country}} @onChange={{fn (mut @options.vendor.country)}} placeholder={{t "fleet-ops.common.country"}} />
                     </InputGroup>
                 </div>
             {{/if}}