@fleetbase/fleetops-engine 0.4.0 → 0.4.2

package/addon/components/admin/navigator-app.hbs

@@ -1,8 +1,8 @@
-<ContentPanel @title="Navigator App" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
-    <InputGroup @name="Instance Linking URL">
+<ContentPanel @title={{t "fleet-ops.component.admin.navigator-app.title"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+    <InputGroup @name={{t "fleet-ops.component.admin.navigator-app.name"}}>
         <ClickToCopy class="px-4 py-2 border rounded-md bg-gray-100 shadow-sm dark:bg-gray-700 border-gray-200 dark:border-gray-800" @value={{this.url}}>{{this.url}}</ClickToCopy>
         <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
-            <InputInfo>Use this URL to link the official Navigator app to this {{t "app.name"}} instance. Opening this URL on a mobile device will open the Navigator app and update it's configuration and branding.</InputInfo>
+            <InputInfo>{{t "fleet-ops.component.admin.navigator-app.message" htmlSafe=true companyName=@app.name}}</InputInfo>
         </Attach::Tooltip>
     </InputGroup>
 </ContentPanel>

package/addon/components/admin/visibility-controls.hbs

@@ -1,12 +1,12 @@
-<ContentPanel @title="Visibility Controls" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
-    <p class="mb-4 dark:text-white text-gray-800">Visibility controls allow you to disable sections of Fleet-Ops. Toggle the checkbox to enable or disable sections to hide in Fleet-ops.</p>
+<ContentPanel @title={{t "fleet-ops.component.admin.visibility-controls.title"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+    <p class="mb-4 dark:text-white text-gray-800">{{t "fleet-ops.component.admin.visibility-controls.message"}}</p>
     {{#each this.visibilitySettings as |visibilityControl|}}
         <InputGroup @wrapperClass="mb-1i">
-            <Checkbox @value={{visibilityControl.visible}} @label={{concat visibilityControl.name " Visible"}} @onToggle={{fn (mut visibilityControl.visible)}} @helpText="Enable or disable visibility for this section in Fleet-Ops." />
+            <Checkbox @value={{visibilityControl.visible}} @label={{concat visibilityControl.name " Visible"}} @onToggle={{fn (mut visibilityControl.visible)}} @helpText={{t "fleet-ops.component.admin.visibility-controls.checkbox-text"}} />
         </InputGroup>
     {{/each}}
 </ContentPanel>
 
 <div class="mt-3 flex items-center justify-end">
-    <Button @type="primary" @size="lg" @icon="save" @text="Save Changes" @onClick={{this.saveVisibilitySettings}} @disabled={{this.isLoading}} @isLoading={{this.isLoading}} />
+    <Button @type="primary" @size="lg" @icon="save" @text={{t "fleet-ops.common.save-changes"}} @onClick={{this.saveVisibilitySettings}} @disabled={{this.isLoading}} @isLoading={{this.isLoading}} />
 </div>

package/addon/components/cell/driver-name.hbs

@@ -8,6 +8,6 @@
     </div>
 {{else}}
     <div class="flex items-center">
-        <span>No driver assigned</span>
+        <span>{{t "fleet-ops.component.cell.driver-name.not-assigned"}}</span>
     </div>
 {{/if}}

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

@@ -13,14 +13,14 @@
         <div class="flex flex-row items-center justify-between w-full mb-4">
             <div class="flex flex-1 space-x-2">
                 {{#if this.contact.id}}
-                    <Button @type="default" @icon="id-card" @helpText="View contact details" @onClick={{this.onViewDetails}} />
+                    <Button @type="default" @icon="id-card" @helpText={{t "fleet-ops.component.contact-form-panel.view-contact-button"}} @onClick={{this.onViewDetails}} />
                 {{/if}}
             </div>
             <div class="flex flex-1 justify-end">
                 <div class="mr-2">
-                    <Button @icon={{if this.contact.id "save" "check"}} @type="primary" @text={{if this.contact.id "Save Contact" "Create Contact"}} @onClick={{this.save}} />
+                    <Button @icon={{if this.contact.id "save" "check"}} @type="primary" @text={{if this.contact.id (t "fleet-ops.component.contact-form-panel.save-contact")(t "fleet-ops.component.contact-form-panel.create-contact") }} @onClick={{this.save}} />
                 </div>
-                <Button @type="default" @icon="times" @helpText={{if this.contact.id "Cancel edit contact" "Cancel new contact"}} @onClick={{this.onPressCancel}} />
+                <Button @type="default" @icon="times" @helpText={{if this.contact.id (t "fleet-ops.component.contact-form-panel.cancel-edit-button")(t "fleet-ops.component.contact-form-panel.cancel-new-button") }} @onClick={{this.onPressCancel}} />
             </div>
         </div>
         <div class="flex flex-row justify-between w-full">
@@ -34,7 +34,7 @@
                             </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"
@@ -53,7 +53,7 @@
                                 {{#if this.contact.name}}
                                     {{this.contact.name}}
                                 {{else}}
-                                    <span>New Contact</span>
+                                    <span>{{t "fleet-ops.component.contact-form-panel.new-contact"}}</span>
                                 {{/if}}
                             {{/if}}
                         </h1>
@@ -73,22 +73,22 @@
 
     <Overlay::Body @wrapperClass="new-service-rate-overlay-body px-4 pt-4" @increaseInnerBodyHeightBy={{700}}>
         <div class="grid grid-cols-1 text-xs dark:text-gray-100">
-            <InputGroup @name="Name">
-                <Input @value={{this.contact.name}} @type="text" class="w-full form-input" placeholder="Name" />
+            <InputGroup @name={{t "fleet-ops.common.name"}}>
+                <Input @value={{this.contact.name}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.common.name"}} />
             </InputGroup>
-            <InputGroup @name="Title">
-                <Input @value={{this.contact.title}} @type="text" class="w-full form-input" placeholder="Title" />
+            <InputGroup @name={{t "fleet-ops.common.title"}}>
+                <Input @value={{this.contact.title}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.common.title"}} />
             </InputGroup>
-            <InputGroup @name="Internal ID">
-                <Input @value={{this.contact.internal_id}} @type="text" class="w-full form-input" placeholder="Internal ID" />
+            <InputGroup @name={{t "fleet-ops.common.internal-id"}}>
+                <Input @value={{this.contact.internal_id}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.common.internal-id"}} />
             </InputGroup>
-            <InputGroup @name="Email">
-                <Input @value={{this.contact.email}} @type="text" class="w-full form-input" placeholder="Email" />
+            <InputGroup @name={{t "fleet-ops.common.email"}}>
+                <Input @value={{this.contact.email}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.common.email"}} />
             </InputGroup>
-            <InputGroup @name="Phone">
+            <InputGroup @name={{t "fleet-ops.common.phone"}}>
                 <PhoneInput @value={{this.contact.phone}} @onInput={{fn (mut this.contact.phone)}} class="form-input w-full" />
             </InputGroup>
-            <InputGroup @name="Type">
+            <InputGroup @name={{t "fleet-ops.common.type"}}>
                 <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                     <PowerSelect
                         @options={{this.contactTypeOptions}}

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

@@ -10,6 +10,10 @@ export default class ContactFormPanelComponent extends Component {
      * @service store
      */
     @service store;
+    /**
+     * @service intl
+     */
+    @service intl;
 
     /**
      * @service fetch
@@ -105,7 +109,7 @@ export default class ContactFormPanelComponent extends Component {
             return contact
                 .save()
                 .then((contact) => {
-                    this.notifications.success(`contact (${contact.name}) saved successfully.`);
+                    this.notifications.success(this.intl.t('fleet-ops.component.contact-form-panel.success-message', { contactName: contact.name }));
                     contextComponentCallback(this, 'onAfterSave', contact);
                 })
                 .catch((error) => {
@@ -133,8 +137,8 @@ export default class ContactFormPanelComponent extends Component {
             {
                 path: `uploads/${this.currentUser.companyId}/drivers/${this.contact.id}`,
                 subject_uuid: this.contact.id,
-                subject_type: `contact`,
-                type: `contact_photo`,
+                subject_type: 'fleet-ops:contact',
+                type: 'contact_photo',
             },
             (uploadedFile) => {
                 this.contact.setProperties({
@@ -180,7 +184,7 @@ export default class ContactFormPanelComponent extends Component {
             {
                 path: `uploads/${this.contact.company_uuid}/contacts/${this.contact.slug}`,
                 subject_uuid: this.contact.id,
-                subject_type: 'contact',
+                subject_type: 'fleet-ops:contact',
                 type: 'contact_photo',
             },
             (uploadedFile) => {

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

@@ -1,34 +1,34 @@
 <div class="p-4">
-    <ContentPanel @title="Details" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-900">
+    <ContentPanel @title={{t "fleet-ops.common.details"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-900">
         <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 lg:gap-4 text-xs dark:text-gray-100">
 
             <div class="field-info-container">
-                <div class="field-name">Website URL</div>
+                <div class="field-name">{{t "fleet-ops.component.contact-panel.details.web-url"}}</div>
                 <div class="field-value">{{n-a @contact.name}}</div>
             </div>
 
             <div class="field-info-container">
-                <div class="field-name">Title</div>
+                <div class="field-name">{{t "fleet-ops.common.title"}}</div>
                 <div class="field-value">{{n-a @contact.title}}</div>
             </div>
 
             <div class="field-info-container">
-                <div class="field-name">Internal ID</div>
+                <div class="field-name">{{t "fleet-ops.common.internal-id"}}</div>
                 <div class="field-value">{{n-a @contact.internal_id}}</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 @contact.email}}</div>
             </div>
 
             <div class="field-info-container">
-                <div class="field-name">Phone</div>
+                <div class="field-name">{{t "fleet-ops.common.email"}}</div>
                 <div class="field-value">{{n-a @contact.phone}}</div>
             </div>
 
             <div class="field-info-container">
-                <div class="field-name">Type</div>
+                <div class="field-name">{{t "fleet-ops.common.type"}}</div>
                 <div class="field-value"><Badge @status={{@contact.type}} /></div>
             </div>
         </div>

package/addon/components/contact-panel.hbs

@@ -2,10 +2,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 contact" @onClick={{this.onEdit}} />
+                <Button @type="default" @icon="pen" @helpText={{t "fleet-ops.component.contact-panel.edit-button"}} @onClick={{this.onEdit}} />
             </div>
             <div class="flex flex-1 justify-end">
-                <Button @type="default" @icon="times" @helpText={{if this.contact.id "Cancel edit contact" "Cancel new contact"}} @onClick={{this.onPressCancel}} />
+                <Button @type="default" @icon="times" @helpText={{if this.contact.id (t "fleet-ops.component.contact-panel.cancel-edit-button")(t "fleet-ops.component.contact-panel.cancel-new-button") }} @onClick={{this.onPressCancel}} />
             </div>
         </div>
         <div class="flex flex-row justify-between w-full">

package/addon/components/display-place.hbs

@@ -4,9 +4,9 @@
             <div class={{@noAddressClass}}>
                 <span class="text-red-500">
                     {{#if @type}}
-                        No {{@type}} address!
+                        {{t "fleet-ops.component.display-panel.no-address" htmlSafe=true type=@type}}
                     {{else}}
-                        No address!
+                        {{t "fleet-ops.component.display-panel.no-address-message"}}
                     {{/if}}
                 </span>
             </div>

package/addon/components/driver-card.hbs

@@ -17,7 +17,7 @@
                         {{#each @driver.fleets as |fleet|}}
                             <span class="driver-fleet-name truncate horizontal-li-item text-xs">{{fleet.name}}</span>
                         {{else}}
-                            <span class="text-xs text-muted">No fleets</span>
+                            <span class="text-xs text-muted">{{t "fleet-ops.component.driver-card.no-fleets"}}</span>
                         {{/each}}
                     </div>
                 </div>

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

@@ -3,14 +3,14 @@
         <div class="flex flex-row items-center justify-between w-full mb-4">
             <div class="flex flex-1 space-x-2">
                 {{#if this.driver.id}}
-                    <Button @type="default" @icon="id-card" @helpText="View driver details" @onClick={{this.onViewDetails}} />
+                    <Button @type="default" @icon="id-card" @helpText={{t "fleet-ops.component.driver-form-panel.driver-detail"}} @onClick={{this.onViewDetails}} />
                 {{/if}}
             </div>
             <div class="flex flex-1 justify-end">
                 <div class="mr-2">
-                    <Button @icon={{if this.driver.id "save" "check"}} @type="primary" @text={{if this.driver.id "Save Driver" "Create Driver"}} @onClick={{this.save}} />
+                    <Button @icon={{if this.driver.id "save" "check"}} @type="primary" @text={{if this.driver.id (t "fleet-ops.component.driver-form-panel.save-driver")(t "fleet-ops.component.driver-form-panel.create-driver") }} @onClick={{this.save}} />
                 </div>
-                <Button @type="default" @icon="times" @helpText={{if this.driver.id "Cancel edit driver" "Cancel new driver"}} @onClick={{this.onPressCancel}} />
+                <Button @type="default" @icon="times" @helpText={{if this.driver.id (t "fleet-ops.component.driver-form-panel.cancel-edit-driver")(t "fleet-ops.component.driver-form-panel.cancel-new-driver") }} @onClick={{this.onPressCancel}} />
             </div>
         </div>
         <div class="flex flex-row justify-between w-full">
@@ -20,10 +20,10 @@
                         <div class="upload-avatar-overlay w-12 h-12 flex items-center justify-start rounded-lg">
                             <img src={{this.driver.photo_url}} alt={{this.driver.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.driver-form-panel.upload-new-photo"}} />
                             </Attach::Tooltip>
                             <div class="upload-avatar-button-wrapper rounded-lg">
-                                <UploadButton @name="photos" @accept="image/*" @onFileAdded={{this.onUploadNewPhoto}} @icon="upload" @hideButtonText={{true}} @labelClass="upload-avatar-label-overlay" class="w-12 btn-reset" />
+                                <UploadButton @name={{t "fleet-ops.common.photos"}} @accept="image/*" @onFileAdded={{this.onUploadNewPhoto}} @icon="upload" @hideButtonText={{true}} @labelClass="upload-avatar-label-overlay" class="w-12 btn-reset" />
                             </div>
                         </div>
                     </div>
@@ -35,7 +35,7 @@
                                 {{#if this.driver.name}}
                                     {{this.driver.name}}
                                 {{else}}
-                                    <span>New Driver</span>
+                                    <span>{{t "fleet-ops.component.driver-form-panel.new-driver"}}</span>
                                 {{/if}}
                             {{/if}}
                         </h1>
@@ -46,7 +46,7 @@
                                 </div>
                             {{else}}
                                 <div class="flex flex-row items-center">
-                                    <span class="text-sm dark:text-gray-500 text-gray-700 mr-3">No vehicle assigned</span>
+                                    <span class="text-sm dark:text-gray-500 text-gray-700 mr-3">{{t "fleet-ops.component.driver-panel.no-vehicle-message"}}</span>
                                 </div>
                             {{/if}}
                         </div>
@@ -62,56 +62,63 @@
     <Overlay::Body @wrapperClass="new-service-rate-overlay-body px-4 space-y-4 pt-4" @increaseInnerBodyHeightBy={{1000}}>
         <div class="flex-1">
             <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 text-xs dark:text-gray-100">
-                <InputGroup @name="Name" @wrapperClass="col-span-2">
-                    <Input @value={{this.driver.name}} @type="text" class="w-full form-input" placeholder="Name" />
+                <InputGroup @name={{t "fleet-ops.common.name"}} @wrapperClass="col-span-2">
+                    <Input @value={{this.driver.name}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.common.name"}} />
                 </InputGroup>
-
-                <InputGroup @name="Internal ID">
-                    <Input @value={{this.driver.internal_id}} @type="text" class="w-full form-input" placeholder="Internal ID" />
+                
+                <InputGroup @name={{t "fleet-ops.common.internal-id"}}>
+                    <Input @value={{this.driver.internal_id}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.common.internal-id"}} />
                 </InputGroup>
 
-                <InputGroup @name="Drivers License">
-                    <Input @value={{this.driver.drivers_license_number}} @type="text" class="w-full form-input" placeholder="Drivers License" />
+                <InputGroup @name={{t "fleet-ops.common.driver-license"}}>
+                    <Input @value={{this.driver.drivers_license_number}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.common.driver-license"}} />
                 </InputGroup>
 
-                <InputGroup @name="Email">
-                    <Input @value={{this.driver.email}} @type="text" class="w-full form-input" placeholder="Email" />
+                <InputGroup @name={{t "fleet-ops.common.email"}}>
+                    <Input @value={{this.driver.email}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.common.email"}} />
                 </InputGroup>
 
-                <InputGroup @name="Phone">
+                <InputGroup @name={{t "fleet-ops.common.phone"}}>
                     <PhoneInput @value={{this.driver.phone}} @onInput={{fn (mut this.driver.phone)}} class="form-input w-full" />
                 </InputGroup>
 
-                <InputGroup @name="Vendor">
+                <InputGroup @name={{t "fleet-ops.component.driver-form-panel.vendor"}}>
                     <ModelSelect @modelName="vendor" @selectedModel={{this.driver.vendor}} @placeholder="Select Vendor" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut this.driver.vendor)}} as |model|>
                         {{model.name}}
                     </ModelSelect>
                 </InputGroup>
 
-                <InputGroup @name="Vehicle">
-                    <ModelSelect @modelName="vehicle" @selectedModel={{this.driver.vehicle}} @placeholder="Select Vehicle" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut this.driver.vehicle)}} as |model|>
+                <InputGroup @name={{t "fleet-ops.common.vehicle"}}>
+                    <ModelSelect @modelName="vehicle" @selectedModel={{this.driver.vehicle}} @placeholder={{t "fleet-ops.component.driver-form-panel.select-vehicle"}} @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut this.driver.vehicle)}} as |model|>
                         {{model.display_name}}
                     </ModelSelect>
                 </InputGroup>
 
-                <InputGroup @name="City">
-                    <Input @value={{this.driver.city}} @type="text" class="w-full form-input" placeholder="City" />
+                <InputGroup @name={{t "fleet-ops.common.city"}}>
+                    <Input @value={{this.driver.city}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.common.city"}} />
                 </InputGroup>
 
-                <InputGroup @name="Country">
-                    <CountrySelect class="w-full form-input form-select form-datalist" @value={{this.driver.country}} @onChange={{fn (mut this.driver.country)}} placeholder="Country" />
+                <InputGroup @name={{t "fleet-ops.common.country"}}>
+                    <CountrySelect class="w-full form-input form-select form-datalist" @value={{this.driver.country}} @onChange={{fn (mut this.driver.country)}} placeholder={{t "fleet-ops.common.country"}} />
                 </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.driverStatusOptions}} @selected={{this.driver.status}} @onChange={{fn (mut this.driver.status)}} @placeholder="Select driver status" @triggerClass="form-select form-input" as |status|>
+                        <PowerSelect @options={{this.driverStatusOptions}} @selected={{this.driver.status}} @onChange={{fn (mut this.driver.status)}} @placeholder={{t "fleet-ops.common.status"}} @triggerClass="form-select form-input" as |status|>
                             {{smart-humanize status}}
                         </PowerSelect>
                     </div>
                 </InputGroup>
-                <InputGroup @name="Coordinates" @wrapperClass="col-span-2">
-                    <CoordinatesInput @value={{this.driver.location}} @onChange={{this.onCoordinatesChanged}} @onGeocode={{this.onAutocomplete}} @onUpdatedFromMap={{this.onCoordinatesChanged}} @onInit={{this.setCoordinatesInput}} @renderInPlace={{false}} />
-                </InputGroup>
+              <InputGroup @name={{t "fleet-ops.common.coordinates"}} @wrapperClass="col-span-2">
+                <CoordinatesInput
+                    @value={{this.driver.location}}
+                    @onChange={{this.onCoordinatesChanged}}
+                    @onGeocode={{this.onAutocomplete}}
+                    @onUpdatedFromMap={{this.onCoordinatesChanged}}
+                    @onInit={{this.setCoordinatesInput}}
+                    @renderInPlace={{false}}
+                />
+            </InputGroup>
             </div>
         </div>
     </Overlay::Body>

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

@@ -16,6 +16,10 @@ export default class DriverFormPanelComponent extends Component {
      * @service fetch
      */
     @service fetch;
+    /**
+     * @service intl
+     */
+    @service intl;
 
     /**
      * @service currentUser
@@ -103,7 +107,7 @@ export default class DriverFormPanelComponent extends Component {
         return driver
             .save()
             .then((driver) => {
-                this.notifications.success(`Driver (${driver.name}) saved successfully.`);
+                this.notifications.success(this.intl.t('fleet-ops.component.driver-form-panel.success-message', { driverName: driver.name }));
                 contextComponentCallback(this, 'onAfterSave', driver);
             })
             .catch((error) => {
@@ -127,7 +131,7 @@ export default class DriverFormPanelComponent extends Component {
             {
                 path: `uploads/${this.currentUser.companyId}/drivers/${this.driver.id}`,
                 subject_uuid: this.driver.id,
-                subject_type: 'driver',
+                subject_type: 'fleet-ops:driver',
                 type: 'driver_photo',
             },
             (uploadedFile) => {

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

@@ -1,42 +1,42 @@
 <div class="p-4">
-    <ContentPanel @title="Details" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-900">
+    <ContentPanel @title={{t "fleet-ops.common.details"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-900">
         <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 @driver.name}}</div>
             </div>
             <div class="field-info-container">
-                <div class="field-name">ID</div>
+                <div class="field-name">{{t "fleet-ops.common.id"}}</div>
                 <div class="field-value">{{n-a @driver.public_id}}</div>
             </div>
             <div class="field-info-container">
-                <div class="field-name">Internal ID</div>
+                <div class="field-name">{{t "fleet-ops.common.internal-id"}}</div>
                 <div class="field-value">{{n-a @driver.internal_id}}</div>
             </div>
             <div class="field-info-container">
-                <div class="field-name">Drivers License</div>
+                <div class="field-name">{{t "fleet-ops.common.driver-license"}}</div>
                 <div class="field-value">{{n-a @driver.drivers_license_number}}</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 @driver.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 @driver.phone}}</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 @driver.city}}</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={{@driver.country}} />
                 </div>
             </div>
             <div class="field-info-container md:col-span-3">
-                <div class="field-name">Coordinates</div>
+                <div class="field-name">{{t "fleet-ops.common.coordinates"}}</div>
                 <div class="field-value">{{point-coordinates @driver.location}}</div>
             </div>
         </div>

package/addon/components/driver-panel.hbs

@@ -12,11 +12,11 @@
     <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="location-arrow" @helpText="Locate driver" @onClick={{@onPressCancel}} /> --}}
-                <Button @type="default" @icon="pen" @helpText="Edit driver" @onClick={{this.onEdit}} />
+                {{!-- <Button @type="default" @icon="location-arrow" @helpText={{t "fleet-ops.component.driver-panel.locate-button-text"}} @onClick={{@onPressCancel}} /> --}}
+                <Button @type="default" @icon="pen" @helpText={{t "fleet-ops.component.driver-panel.edit-button-text"}} @onClick={{this.onEdit}} />
             </div>
             <div class="flex flex-1 justify-end">
-                <Button @type="default" @icon="times" @helpText="Close driver details" @onClick={{this.onPressCancel}} />
+                <Button @type="default" @icon="times" @helpText={{t "fleet-ops.component.driver-panel.close-button-text"}} @onClick={{this.onPressCancel}} />
             </div>
         </div>
         <div class="flex flex-row justify-between w-full">
@@ -50,8 +50,8 @@
                                 </div>
                             {{else}}
                                 <div class="flex flex-row items-center">
-                                    <span class="text-sm dark:text-gray-500 text-gray-700 mr-3">No vehicle assigned</span>
-                                    {{! <Button @icon="plus" @size="xs" @helpText="Assign a vehicle to driver" /> }}
+                                    <span class="text-sm dark:text-gray-500 text-gray-700 mr-3">{{t "fleet-ops.component.driver-panel.no-vehicle-message"}}</span>
+                                    {{!-- <Button @icon="plus" @size="xs" @helpText={{t "fleet-ops.component.driver-panel.assign-vehicle-button"}} /> --}}
                                 </div>
                             {{/if}}
                         </div>

package/addon/components/fleet-driver-listing.hbs

@@ -2,7 +2,7 @@
     <div class="mb-2 flex items-center justify-between">
         <div class="flex items-center">
             <div class="fleet-driver-listing-search">
-                <Input @type="text" {{on "keyup" (perform this.search)}} placeholder="Search drivers in fleet" class="w-64 form-input form-input-sm" />
+                <Input @type="text" {{on "keyup" (perform this.search)}} placeholder={{t "fleet-ops.component.fleet-driver-listing.search-driver"}} class="w-64 form-input form-input-sm" />
             </div>
 
             {{#if this.isLoading}}
@@ -13,7 +13,7 @@
         </div>
         <div class="w-56">
             {{#if @onAddDriver}}
-                <ModelSelect @modelName="driver" @selectedModel={{@options.selectedDriver}} @placeholder="Add driver to fleet" @triggerClass="form-select form-input form-select-sm form-input-sm" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{this.onAdd}} as |model|>
+                <ModelSelect @modelName="driver" @selectedModel={{@options.selectedDriver}} @placeholder={{t "fleet-ops.component.fleet-driver-listing.add-driver"}} @triggerClass="form-select form-input form-select-sm form-input-sm" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{this.onAdd}} as |model|>
                     {{model.name}}
                 </ModelSelect>
             {{/if}}
@@ -25,7 +25,7 @@
                 {{#if @selectable}}
                     <div></div>
                 {{/if}}
-                <div class="col-span-4 flex items-center">Driver</div>
+                <div class="col-span-4 flex items-center">{{t "fleet-ops.common.driver"}}</div>
                 <div class="col-span-7 flex items-center"></div>
             </div>
         </div>
@@ -33,7 +33,7 @@
             {{#unless this.isLoaded}}
                 <div class="flex text-center items-center justify-center p-4 dark:text-gray-100">
                     <Spinner class="mr-2" @iconClass="text-sky-500" />
-                    <span>Loading fleet drivers...</span>
+                    <span>{{t "fleet-ops.component.fleet-driver-listing.loading-message"}}</span>
                 </div>
             {{/unless}}
             {{#each this.drivers as |driver|}}
@@ -62,7 +62,7 @@
                         {{#if @onRemoveDriver}}
                             <a href="javascript:;" class="text-danger text-opacity-75" {{on "click" (fn this.onRemove driver)}}>
                                 <FaIcon @icon="times" @prefix="fas" class="mr-1" />
-                                <span>Remove</span>
+                                <span>{{t "fleet-ops.common.remove"}}</span>
                             </a>
                         {{/if}}
                     </div>