@fleetbase/fleetops-engine 0.4.0 → 0.4.2

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

@@ -10,39 +10,39 @@
     @width={{or this.width @width "570px"}}
 >
     <Overlay::Header
-        @title={{if this.place.public_id this.place.name "New Place"}}
+        @title={{if this.place.public_id this.place.name (t "fleet-ops.component.place-form-panel.place") }}
         @status={{this.place.public_id}}
         @hideStatusDot={{true}}
         @createdAt={{this.place.createdAt}}
         @titleWrapperClass="leading-5"
     >
         <div class="flex flex-1 justify-end">
-            <Button @icon={{if this.place.id "save" "check"}} @type="primary" @text={{if this.place.id "Save Place" "Create Place"}} @onClick={{this.save}} @wrapperClass="mr-2" />
-            <Button @type="default" @icon="times" @helpText={{if this.place.id "Cancel edit place" "Cancel new place"}} @onClick={{this.onPressCancel}} />
+            <Button @icon={{if this.place.id "save" "check"}} @type="primary" @text={{if this.place.id (t "fleet-ops.component.place-form-panel.save-place")(t "fleet-ops.component.place-form-panel.create-place") }} @onClick={{this.save}} @wrapperClass="mr-2" />
+            <Button @type="default" @icon="times" @helpText={{if this.place.id (t "fleet-ops.component.place-form-panel.cancel-edit-place")(t "fleet-ops.component.place-form-panel.cancel-new-place") }} @onClick={{this.onPressCancel}} />
         </div>
     </Overlay::Header>
 
     <Overlay::Body @wrapperClass="new-service-rate-overlay-body px-4 space-y-4 pt-4" @increaseInnerBodyHeightBy={{1000}}>
         <div class="grid grid-cols-3 gap-1 text-xs dark:text-gray-100">
-            <InputGroup @name="Name" @wrapperClass="col-span-2">
-                <Input @value={{this.place.name}} @type="text" class="w-full form-input" placeholder="Name" />
+            <InputGroup @name={{t "fleet-ops.common.name"}} @wrapperClass="col-span-2">
+                <Input @value={{this.place.name}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.common.name"}} />
             </InputGroup>
-            <InputGroup @name="Street 1" @value={{this.place.street1}} @wrapperClass="col-span-3">
-                <AutocompleteInput @value={{this.place.street1}} @fetchUrl="places/lookup" @onSelect={{this.onAutocomplete}} placeholder="Street 1" class="w-full" as |result|>
+            <InputGroup @name={{t "fleet-ops.component.place-form-panel.street-1"}} @value={{this.place.street1}} @wrapperClass="col-span-3">
+                <AutocompleteInput @value={{this.place.street1}} @fetchUrl="places/lookup" @onSelect={{this.onAutocomplete}} placeholder={{t "fleet-ops.component.place-form-panel.street-1"}} class="w-full" as |result|>
                     {{result.address}}
                 </AutocompleteInput>
             </InputGroup>
-            <InputGroup @name="Street 2" @autocomplete="nope" @value={{this.place.street2}} @wrapperClass="col-span-3" />
-            <InputGroup @name="Neighborhood" @autocomplete="nope" @value={{this.place.neighborhood}} />
-            <InputGroup @name="Building" @autocomplete="nope" @value={{this.place.building}} />
-            <InputGroup @name="Security Access Code" @autocomplete="nope" @value={{this.place.security_access_code}} />
-            <InputGroup @name="Postal Code" @autocomplete="nope" @value={{this.place.postal_code}} />
-            <InputGroup @name="City" @autocomplete="nope" @value={{this.place.city}} />
-            <InputGroup @name="State" @autocomplete="nope" @value={{this.place.province}} />
-            <InputGroup @name="Country" @wrapperClass="col-span-2">
-                <CountrySelect class="w-full form-input form-select form-datalist" @value={{this.place.country}} @onChange={{fn (mut this.place.country)}} placeholder="Country" />
+            <InputGroup @name={{t "fleet-ops.component.place-form-panel.street-2"}} @autocomplete="nope" @value={{this.place.street2}} @wrapperClass="col-span-3" />
+            <InputGroup @name={{t "fleet-ops.component.place-form-panel.neighborhood"}} @autocomplete="nope" @value={{this.place.neighborhood}} />
+            <InputGroup @name={{t "fleet-ops.component.place-form-panel.building"}} @autocomplete="nope" @value={{this.place.building}} />
+            <InputGroup @name={{t "fleet-ops.component.place-form-panel.security-code"}} @autocomplete="nope" @value={{this.place.security_access_code}} />
+            <InputGroup @name={{t "fleet-ops.component.place-form-panel.postal-code"}} @autocomplete="nope" @value={{this.place.postal_code}} />
+            <InputGroup @name={{t "fleet-ops.common.city"}} @autocomplete="nope" @value={{this.place.city}} />
+            <InputGroup @name={{t "fleet-ops.component.place-form-panel.state"}} @autocomplete="nope" @value={{this.place.province}} />
+            <InputGroup @name={{t "fleet-ops.common.country"}} @wrapperClass="col-span-2">
+                <CountrySelect class="w-full form-input form-select form-datalist" @value={{this.place.country}} @onChange={{fn (mut this.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={{this.place.location}}
                     @onChange={{this.updatePlaceCoordinates}}
@@ -52,7 +52,7 @@
                 />
             </InputGroup>
             <div class="col-span-1"></div>
-            <InputGroup @name="Phone">
+            <InputGroup @name={{t "fleet-ops.common.phone"}}>
                 <PhoneInput @value={{this.place.phone}} @autocomplete="nope" @onInput={{this.phone}} class="form-input w-full" />
             </InputGroup>
         </div>

package/addon/components/place-form-panel.js

@@ -18,6 +18,11 @@ export default class PlaceFormPanelComponent extends Component {
      */
     @service fetch;
 
+    /**
+     * @service intl
+     */
+    @service intl;
+
     /**
      * @service notifications
      */
@@ -101,7 +106,7 @@ export default class PlaceFormPanelComponent extends Component {
             return place
                 .save()
                 .then((place) => {
-                    this.notifications.success(`place (${place.address}) saved successfully.`);
+                    this.notifications.success(this.intl.t('fleet-ops.component.place-form-panel.success-message', { placeAddress: place.address }));
                     contextComponentCallback(this, 'onAfterSave', place);
                 })
                 .catch((error) => {

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

@@ -22,55 +22,55 @@
     <ContentPanel @title="Details" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-900">
         <div class="grid grid-cols-1 lg:grid-cols-3 gap-2 text-xs dark:text-gray-100">
             <div class="field-info-container col-span-3">
-                <div class="field-name">Name</div>
+                <div class="field-name">{{t "fleet-ops.common.name"}}</div>
                 <div class="field-value">{{n-a @place.name}}</div>
             </div>
 
             <div class="field-info-container col-span-3">
-                <div class="field-name">Street</div>
+                <div class="field-name">{{t "fleet-ops.common.street"}}</div>
                 <div class="field-value">{{n-a @place.street1}}</div>
             </div>
 
             <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 @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 @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 @place.security_access_code}}</div>
             </div>
 
             <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 @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 @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={{@place.country}} @showFlag={{true}} />
                 </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 @place.phone}}</div>
             </div>
 
             <div class="field-info-container col-span-3">
                 <div class="field-name">
-                    Coordinates
+                    {{t "fleet-ops.common.coordinates"}}
                     {{!-- <a href="javascript:;" class="block ml-3" {{on "click" @place.viewPlaceOnMap}}>
                                 <FaIcon @icon="map" class="mr-1" />
                                 View on map

package/addon/components/place-panel.hbs

@@ -10,8 +10,8 @@
     @width={{or this.width @width "570px"}}
 >
     <Overlay::Header @title={{this.place.name}} @status={{this.place.public_id}} @hideStatusDot={{true}} @createdAt={{this.place.createdAt}}>
-        <Button @type="default" @icon="pen" @helpText="Edit place" @onClick={{this.onEdit}} @wrapperClass="mr-2" />
-        <Button @type="default" @icon="times" @helpText={{if this.place.id "Cancel edit place" "Cancel new place"}} @onClick={{this.onPressCancel}} />
+        <Button @type="default" @icon="pen" @helpText={{t "fleet-ops.component.place-panel.edit-place"}} @onClick={{this.onEdit}} @wrapperClass="mr-2" />
+        <Button @type="default" @icon="times" @helpText={{if this.place.id (t "fleet-ops.component.place-panel.cancel-edit-place")(t "fleet-ops.component.place-panel.cancel-new-place") }} @onClick={{this.onPressCancel}} />
     </Overlay::Header>
     <Overlay::Body class="no-padding" @increaseInnerBodyHeightBy={{1000}}>
         <div class="section-header-actions w-full overflow-x-scroll lg:overflow-x-auto">

package/addon/components/route-list.hbs

@@ -15,9 +15,9 @@
             <div class="px-3 py-2 w-full bg-yellow-200 text-yellow-900 rounded shadow-sm flex flex-col justify-center items-start mb-3">
                 <div class="flex flex-row items-center">
                     <FaIcon @icon="eye" class="mr-2 text-yellow-900" />
-                    <span class="font-bold">{{if this.isWaypointsCollapsed "Tap to expand" "Tap to collapse"}}</span>
+                    <span class="font-bold">{{if this.isWaypointsCollapsed (t "fleet-ops.component.route-list.expand")(t "fleet-ops.component.route-list.collapse") }}</span>
                 </div>
-                <div>{{@order.payload.middleWaypoints.length}} more waypoints</div>
+                <div>{{@order.payload.middleWaypoints.length}} {{t "fleet-ops.component.route-list.more-waypoints"}}</div>
             </div>
         </Button>
         {{#unless this.isWaypointsCollapsed}}

package/addon/components/settings-window.hbs

@@ -1,14 +1,14 @@
-<Overlay @onLoad={{this.onLoad}} @isOpen={{@isOpen}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizable={{true}} @isMaximizable={{true}} @isMinimizable={{true}} @width="570px" as |overlay|>
-    <Overlay::Header @overlay={{overlay}} @title="FleetOps Settings" @onPressCancel={{@onPressCancel}}>
-        <Button @icon="save" @type="primary" @text={{if (media 'isMobile') "" "Save Changes"}} @onClick={{this.saveSettings}} @isLoading={{this.isSaving}} @disabled={{or this.isLoading this.isSaving}} />
+<Overlay @onLoad={{this.onLoad}} @isOpen={{@isOpen}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizable={{true}} @isMaximizable={{true}} @isMinimizable={{true}} @width="600px" as |overlay|>
+    <Overlay::Header @overlay={{overlay}} @title={{t "fleet-ops.component.settings-window.title"}} @onPressCancel={{@onPressCancel}}>
+        <Button @icon="save" @type="primary" @text={{if (media 'isMobile') "" (t "fleet-ops.component.settings-window.save") }} @onClick={{this.saveSettings}} @isLoading={{this.isSaving}} @disabled={{or this.isLoading this.isSaving}} />
     </Overlay::Header>
 
     <Overlay::Body>
         <div class="px-5 py-4">
-            <InputGroup @name="Default Adhoc Ping Distance" @type="number" @value={{this.company.options.fleetops.adhoc_distance}} @wrapperClass="mb-0" @helpText="This setting determines the default distance in meters adhoc orders should ping drivers within vicinity of the order pickup point." />
+            <InputGroup @name={{t "fleet-ops.component.settings-window.name"}} @type="number" @value={{this.company.options.fleetops.adhoc_distance}} @wrapperClass="mb-0" @helpText={{t "fleet-ops.component.settings-window.name-text"}} />
             <div class="mt-2 px-3 py-1 rounded-lg border border-blue-600 bg-blue-100 flex items-center">
                 <FaIcon @icon="triangle-exclamation" class="text-blue-900 mr-1.5" />
-                <span class="text-blue-900 text-xs">Distance must be in meters</span>
+                <span class="text-blue-900 text-xs">{{t "fleet-ops.component.settings-window.message"}}</span>
             </div>
         </div>
     </Overlay::Body>

package/addon/components/settings-window.js

@@ -7,6 +7,7 @@ export default class SettingsWindowComponent extends Component {
     @service currentUser;
     @service store;
     @service notifications;
+    @service intl;
 
     @tracked isSaving = false;
     @tracked isLoading = false;
@@ -53,7 +54,7 @@ export default class SettingsWindowComponent extends Component {
         return this.company
             .save()
             .then(() => {
-                this.notifications.success('Settings successfully saved.');
+                this.notifications.success(this.intl.t('fleet-ops.component.settings-window.success-message'));
             })
             .finally(() => {
                 this.isSaving = false;

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

@@ -13,7 +13,7 @@
         <div class="flex flex-row items-center justify-between w-full mb-4">
             <div class="flex flex-1 space-x-2">
                 {{#if this.vehicle.id}}
-                    <Button @type="default" @icon="car" @helpText="View vehicle details" @onClick={{this.onViewDetails}} @disabled={{this.isLoading}} />
+                    <Button @type="default" @icon="car" @helpText={{t "fleet-ops.component.vehicle-form-panel.view-details"}} @onClick={{this.onViewDetails}} @disabled={{this.isLoading}} />
                 {{/if}}
             </div>
             <div class="flex flex-1 justify-end">
@@ -21,7 +21,7 @@
                     <Button
                         @icon={{if this.vehicle.id "save" "check"}}
                         @type="primary"
-                        @text={{if this.vehicle.id "Save Vehicle" "Create Vehicle"}}
+                        @text={{if this.vehicle.id (t "fleet-ops.component.vehicle-form-panel.save-vehicle")(t "fleet-ops.component.vehicle-form-panel.create-vehicle") }}
                         @onClick={{this.save}}
                         @isLoading={{this.isLoading}}
                     />
@@ -29,7 +29,7 @@
                 <Button
                     @type="default"
                     @icon="times"
-                    @helpText={{if this.vehicle.id "Cancel edit vehicle" "Cancel new vehicle"}}
+                    @helpText={{if this.vehicle.id (t "fleet-ops.component.vehicle-form-panel.cancel-edit-vehicle")(t "fleet-ops.component.vehicle-form-panel.cancel-new-vehicle") }}
                     @onClick={{this.onPressCancel}}
                     @disabled={{this.isLoading}}
                 />
@@ -42,11 +42,11 @@
                         <div class="upload-avatar-overlay w-12 h-12 flex items-center justify-start rounded-lg">
                             <img src={{this.vehicle.photo_url}} alt={{this.vehicle.name}} height="48" width="48" class="h-12 w-12 rounded-lg shadow-sm" />
                             <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
-                                <InputInfo @text="Upload new photo" />
+                                <InputInfo @text={{t "fleet-ops.component.vehicle-form-panel.upload-photo"}} />
                             </Attach::Tooltip>
                             <div class="upload-avatar-button-wrapper rounded-lg">
                                 <UploadButton
-                                    @name="photos"
+                                    @name={{t "fleet-ops.common.photos"}}
                                     @accept="image/*"
                                     @onFileAdded={{this.onUploadNewPhoto}}
                                     @icon="upload"
@@ -65,7 +65,7 @@
                                 {{#if this.vehicle.displayName}}
                                     {{this.vehicle.displayName}}
                                 {{else}}
-                                    <span>New Vehicle</span>
+                                    <span>{{t "fleet-ops.component.vehicle-form-panel.new-vehicle"}}</span>
                                 {{/if}}
                             {{/if}}
                         </h1>
@@ -76,7 +76,7 @@
                                 </div>
                             {{else}}
                                 <div class="flex flex-row items-center">
-                                    <span class="text-sm dark:text-gray-500 text-gray-700 mr-3">No driver assigned</span>
+                                    <span class="text-sm dark:text-gray-500 text-gray-700 mr-3">{{t "fleet-ops.component.vehicle-form-panel.not-assigned"}}</span>
                                 </div>
                             {{/if}}
                         </div>
@@ -93,35 +93,35 @@
         <div class="flex-1 space-y-4">
             <ContentPanel @title="Details" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
                 <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2">
-                    <InputGroup @name="Internal ID">
-                        <Input @value={{this.vehicle.internal_id}} @type="text" class="w-full form-input" placeholder="Internal ID" />
+                    <InputGroup @name={{t "fleet-ops.common.internal-id"}}>
+                        <Input @value={{this.vehicle.internal_id}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.common.internal-id"}} />
                     </InputGroup>
 
-                    <InputGroup @name="Plate Number">
-                        <Input @value={{this.vehicle.plate_number}} @type="text" class="w-full form-input" placeholder="Plate Number" />
+                    <InputGroup @name={{t "fleet-ops.component.vehicle-form-panel.plate-number"}}>
+                        <Input @value={{this.vehicle.plate_number}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.vehicle-form-panel.plate-number"}} />
                     </InputGroup>
 
-                    <InputGroup @name="VIN Number">
-                        <Input @value={{this.vehicle.vin}} @type="text" class="w-full form-input" placeholder="VIN Number" />
+                    <InputGroup @name={{t "fleet-ops.component.vehicle-form-panel.vin-number"}}>
+                        <Input @value={{this.vehicle.vin}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.vehicle-form-panel.vin-number"}} />
                     </InputGroup>
 
-                    <InputGroup @name="Make">
-                        <Input @value={{this.vehicle.make}} @type="text" class="w-full form-input" placeholder="Vehicle Make" />
+                    <InputGroup @name={{t "fleet-ops.component.vehicle-form-panel.make"}}>
+                        <Input @value={{this.vehicle.make}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.vehicle-form-panel.vehicle-make"}} />
                     </InputGroup>
 
-                    <InputGroup @name="Model">
-                        <Input @value={{this.vehicle.model}} @type="text" class="w-full form-input" placeholder="Vehicle Model" />
+                    <InputGroup @name={{t "fleet-ops.component.vehicle-form-panel.model"}}>
+                        <Input @value={{this.vehicle.model}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.vehicle-form-panel.vehicle-model"}} />
                     </InputGroup>
 
-                    <InputGroup @name="Year">
-                        <Input @value={{this.vehicle.year}} @type="text" class="w-full form-input" placeholder="Vehicle Year" />
+                    <InputGroup @name={{t "fleet-ops.component.vehicle-form-panel.year"}}>
+                        <Input @value={{this.vehicle.year}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.vehicle-form-panel.vehicle-year"}} />
                     </InputGroup>
 
-                    <InputGroup @name="Driver Assigned">
+                    <InputGroup @name={{t "fleet-ops.component.vehicle-form-panel.driver-assigned"}}>
                         <ModelSelect
                             @modelName="driver"
                             @selectedModel={{this.vehicle.driver}}
-                            @placeholder="Select Driver"
+                            @placeholder={{t "fleet-ops.component.vehicle-form-panel.select-driver"}}
                             @triggerClass="form-select form-input"
                             @infiniteScroll={{false}}
                             @renderInPlace={{true}}
@@ -132,13 +132,13 @@
                         </ModelSelect>
                     </InputGroup>
 
-                    <InputGroup @name="Status">
+                    <InputGroup @name={{t "fleet-ops.common.status"}}>
                         <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                             <PowerSelect
                                 @options={{this.vehicleStatusOptions}}
                                 @selected={{this.vehicle.status}}
                                 @onChange={{fn (mut this.vehicle.status)}}
-                                @placeholder="Select vehicle status"
+                                @placeholder={{t "fleet-ops.component.vehicle-form-panel.select-vehicle"}}
                                 @triggerClass="form-select form-input"
                                 as |status|
                             >
@@ -146,7 +146,7 @@
                             </PowerSelect>
                         </div>
                     </InputGroup>
-                    <InputGroup @name="Coordinates" @wrapperClass="col-span-2">
+                    <InputGroup @name={{t "fleet-ops.common.coordinates"}} @wrapperClass="col-span-2">
                 <CoordinatesInput
                     @value={{this.vehicle.location}}
                     @onChange={{this.onCoordinatesChanged}}
@@ -158,13 +158,13 @@
                 </div>
             </ContentPanel>
 
-            <ContentPanel @title="Avatar" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+            <ContentPanel @title={{t "fleet-ops.component.vehicle-form-panel.avatar"}} @open={{true}} @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." />
+                        <InputLabel @labelText={{t "fleet-ops.component.vehicle-form-panel.select-map-avatar"}} @helpText={{t "fleet-ops.component.vehicle-form-panel.select-avatar-rendering"}} />
                         <FetchSelect
                             @wrapperClass="w-60"
-                            @placeholder="Select avatar"
+                            @placeholder={{t "fleet-ops.component.vehicle-form-panel.select-avatar"}}
                             @endpoint="vehicles/avatars"
                             @selected={{this.vehicle.avatar_url}}
                             @optionValue="value"

package/addon/components/vehicle-form-panel.js

@@ -13,10 +13,15 @@ export default class VehicleFormPanelComponent extends Component {
     @service store;
 
     /**
-     * @service store
+     * @service fetch
      */
     @service fetch;
 
+    /**
+     * @service intl
+     */
+    @service intl;
+
     /**
      * @service currentUser
      */
@@ -98,7 +103,7 @@ export default class VehicleFormPanelComponent extends Component {
             return vehicle
                 .save()
                 .then((vehicle) => {
-                    this.notifications.success(`Vehicle (${vehicle.displayName}) saved successfully.`);
+                    this.notifications.success(this.intl.t('fleet-ops.component.vehicle-form-panel.success-message', { vehicleName: vehicle.displayName }));
                     contextComponentCallback(this, 'onAfterSave', vehicle);
                 })
                 .catch((error) => {
@@ -126,7 +131,7 @@ export default class VehicleFormPanelComponent extends Component {
             {
                 path: `uploads/${this.currentUser.companyId}/vehicles/${this.vehicle.id}`,
                 subject_uuid: this.vehicle.id,
-                subject_type: 'vehicle',
+                subject_type: 'fleet-ops:vehicle',
                 type: 'vehicle_photo',
             },
             (uploadedFile) => {

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

@@ -2,32 +2,32 @@
     <ContentPanel @title="Details" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-900">
         <div class="grid 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 @vehicle.display_name}}</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 @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 @vehicle.vin}}</div>
             </div>
             <div class="field-info-container">
-                <div class="field-name">Make</div>
+                <div class="field-name">{{t "fleet-ops.common.make"}}</div>
                 <div class="field-value">{{n-a @vehicle.make}}</div>
             </div>
             <div class="field-info-container">
-                <div class="field-name">Model</div>
+                <div class="field-name">{{t "fleet-ops.common.model"}}</div>
                 <div class="field-value">{{n-a @vehicle.model}}</div>
             </div>
             <div class="field-info-container">
-                <div class="field-name">Year</div>
+                <div class="field-name">{{t "fleet-ops.common.year"}}</div>
                 <div class="field-value">{{n-a @vehicle.year}}</div>
             </div>
             <div class="field-info-container col-span-3">
                 <div class="field-name">
-                    Coordinates
+                    {{t "fleet-ops.common.coordinates"}}
                 </div>
                 <div class="field-value">
                     {{point-coordinates @vehicle.location}}

package/addon/components/vehicle-panel.hbs

@@ -12,10 +12,10 @@
     <Overlay::Header @hideLeftSection={{true}} @actionsWrapperClass="flex-1 flex-col py-3" class="h-auto-i min-h-[127px]">
         <div class="flex flex-row items-center justify-between w-full mb-4">
             <div class="flex flex-1 space-x-2">
-                <Button @type="default" @icon="pen" @helpText="Edit vehicle" @onClick={{this.onEdit}} />
+                <Button @type="default" @icon="pen" @helpText={{t "fleet-ops.component.vehicle-panel.edit"}} @onClick={{this.onEdit}} />
             </div>
             <div class="flex flex-1 justify-end">
-                <Button @type="default" @icon="times" @helpText="Close vehicle details" @onClick={{this.onPressCancel}} />
+                <Button @type="default" @icon="times" @helpText={{t "fleet-ops.component.vehicle-panel.close"}} @onClick={{this.onPressCancel}} />
             </div>
         </div>
         <div class="flex flex-row justify-between w-full">
@@ -45,8 +45,8 @@
                                 </div>
                             {{else}}
                                 <div class="flex flex-row items-center">
-                                    <span class="text-sm dark:text-gray-500 text-gray-700 mr-3">No driver assigned</span>
-                                    {{! <Button @icon="user-plus" @size="xs" @helpText="Assign a driver to vehicle" /> }}
+                                    <span class="text-sm dark:text-gray-500 text-gray-700 mr-3">{{t "fleet-ops.component.vehicle-panel.not-assigned"}}</span>
+                                    {{!-- <Button @icon="user-plus" @size="xs" @helpText={{t "fleet-ops.component.vehicle-panel.assign-driver"}} /> --}}
                                 </div>
                             {{/if}}
                         </div>