@fleetbase/fleetops-engine 0.3.9 → 0.4.1

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

@@ -21,6 +21,10 @@ export default class FleetFormPanelComponent extends Component {
      * @service hostRouter
      */
     @service hostRouter;
+    /**
+     * @service intl
+     */
+    @service intl;
 
     /**
      * @service loader
@@ -94,7 +98,7 @@ export default class FleetFormPanelComponent extends Component {
             return fleet
                 .save()
                 .then((fleet) => {
-                    this.notifications.success(`Fleet (${fleet.name}) saved successfully.`);
+                    this.notifications.success(this.intl.t('fleet-ops.component.fleet-form-panel.success-message', { fleetName: fleet.name }));
                     contextComponentCallback(this, 'onAfterSave', fleet);
                 })
                 .catch((error) => {

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

@@ -1,28 +1,28 @@
 <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 @fleet.name}}</div>
             </div>
             <div class="field-info-container">
-                <div class="field-name">Service Area</div>
+                <div class="field-name">{{t "fleet-ops.common.service-area"}}</div>
                 <div class="field-value">{{n-a @fleet.service_area.name}}</div>
             </div>
             <div class="field-info-container">
-                <div class="field-name">Zone</div>
+                <div class="field-name">{{t "fleet-ops.common.zone"}}</div>
                 <div class="field-value">{{n-a @fleet.zone.name}}</div>
             </div>
             <div class="field-info-container">
-                <div class="field-name">Task</div>
+                <div class="field-name">{{t "fleet-ops.common.task"}}</div>
                 <div class="field-value">{{n-a @fleet.task}}</div>
             </div>
             <div class="field-info-container">
-                <div class="field-name">Active Manpower</div>
+                <div class="field-name">{{t "fleet-ops.component.fleet-panel.details.active-manpower"}}</div>
                 <div class="field-value">{{@fleet.drivers_online_count}} of {{@fleet.drivers_count}} Online</div>
             </div>
             <div class="field-info-container">
-                <div class="field-name">Date Created</div>
+                <div class="field-name">{{t "fleet-ops.common.date-created"}}</div>
                 <div class="field-value">{{@fleet.createdAtShort}}</div>
             </div>
         </div>

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

@@ -3,7 +3,7 @@
         <div class="mb-3 flex items-center justify-between">
             <div class="flex items-center">
                 <div class="fleet-driver-listing-search">
-                    <Input @type="text" {{on "input" this.onInput}} placeholder="Search drivers in fleet" class="w-64 form-input form-input-sm" />
+                    <Input @type="text" {{on "input" this.onInput}} placeholder={{t "fleet-ops.component.fleet-panel.driver-listing.search-driver"}} class="w-64 form-input form-input-sm" />
                 </div>
                 {{#if this.search.isRunning}}
                     <div class="mx-2">
@@ -12,7 +12,7 @@
                 {{/if}}
             </div>
             <div class="w-56">
-                <ModelSelect @modelName="driver" @selectedModel={{this.selectedDriver}} @placeholder="Add driver to fleet" @triggerClass="form-select form-input form-select-sm form-input-sm" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{this.onAddDriver}} as |model|>
+                <ModelSelect @modelName="driver" @selectedModel={{this.selectedDriver}} @placeholder={{t "fleet-ops.component.fleet-panel.driver-listing.add-driver"}} @triggerClass="form-select form-input form-select-sm form-input-sm" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{this.onAddDriver}} as |model|>
                     {{model.name}}
                 </ModelSelect>
             </div>
@@ -23,7 +23,7 @@
                     {{#if this.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 @@
                         <div class="mr-2">
                             <Spinner @iconClass="text-sky-500" />
                         </div>
-                        <span>Loading fleet drivers...</span>
+                        <span>{{t "fleet-ops.component.fleet-panel.driver-listing.loading-driver"}}</span>
                     </div>
                 {{/if}}
                 {{#each this.drivers as |driver|}}
@@ -61,7 +61,7 @@
                         <div class="flex items-center justify-end">
                             <a href="javascript:;" class="text-danger text-opacity-75" {{on "click" (fn this.onRemoveDriver driver)}}>
                                 <FaIcon @icon="times" @prefix="fas" class="mr-1" />
-                                <span>Remove</span>
+                                <span>{{t "fleet-ops.common.remove"}}</span>
                             </a>
                         </div>
                     </div>

package/addon/components/fleet-panel/driver-listing.js

@@ -22,6 +22,12 @@ export default class FleetPanelDriverListingComponent extends Component {
      */
     @service fetch;
 
+    /**
+     * Service for intl.
+     * @service
+     */
+    @service intl;
+
     /**
      * The universe service.
      *

package/addon/components/fleet-panel/vehicle-listing.hbs

@@ -3,7 +3,7 @@
         <div class="mb-3 flex items-center justify-between">
             <div class="flex items-center">
                 <div class="fleet-vehicle-listing-search">
-                    <Input @type="text" {{on "input" this.onInput}} placeholder="Search vehicle's in fleet" class="w-64 form-input form-input-sm" />
+                    <Input @type="text" {{on "input" this.onInput}} placeholder={{t "fleet-ops.component.fleet-panel.vehicle-listing.search-vehicle"}} class="w-64 form-input form-input-sm" />
                 </div>
                 {{#if this.search.isRunning}}
                     <div class="mx-2">
@@ -12,7 +12,7 @@
                 {{/if}}
             </div>
             <div class="w-56">
-                <ModelSelect @modelName="vehicle" @selectedModel={{this.selectedVehicle}} @placeholder="Add vehicle to fleet" @triggerClass="form-select form-input form-select-sm form-input-sm" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{this.onAddVehicle}} as |model|>
+                <ModelSelect @modelName="vehicle" @selectedModel={{this.selectedVehicle}} @placeholder={{t "fleet-ops.component.fleet-panel.vehicle-listing.add-vehicle"}} @triggerClass="form-select form-input form-select-sm form-input-sm" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{this.onAddVehicle}} as |model|>
                     {{model.displayName}}
                 </ModelSelect>
             </div>
@@ -23,7 +23,7 @@
                     {{#if this.selectable}}
                         <div></div>
                     {{/if}}
-                    <div class="col-span-4 flex items-center">Vehicle</div>
+                    <div class="col-span-4 flex items-center">{{t "fleet-ops.common.vehicle"}}</div>
                     <div class="col-span-7 flex items-center"></div>
                 </div>
             </div>
@@ -33,7 +33,7 @@
                         <div class="mr-2">
                             <Spinner @iconClass="text-sky-500" />
                         </div>
-                        <span>Loading fleet vehicles...</span>
+                        <span>{{t "fleet-ops.component.fleet-panel.vehicle-listing.loading-vehicle"}}</span>
                     </div>
                 {{/if}}
                 {{#each this.vehicles as |vehicle|}}
@@ -61,7 +61,7 @@
                         <div class="flex items-center justify-end">
                             <a href="javascript:;" class="text-danger text-opacity-75" {{on "click" (fn this.onRemoveVehicle vehicle)}}>
                                 <FaIcon @icon="times" @prefix="fas" class="mr-1" />
-                                <span>Remove</span>
+                                <span>{{t "fleet-ops.common.remove"}}</span>
                             </a>
                         </div>
                     </div>

package/addon/components/fleet-panel/vehicle-listing.js

@@ -22,6 +22,12 @@ export default class FleetPanelVehicleListingComponent extends Component {
      */
     @service fetch;
 
+    /**
+     * Service for intl.
+     * @service
+     */
+    @service intl;
+
     /**
      * The universe service.
      *

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

@@ -2,7 +2,7 @@
     <div class="mb-2 flex items-center justify-between">
         <div class="flex items-center">
             <div class="fleet-vehicle-listing-search">
-                <Input @type="text" {{on "keyup" (perform this.search)}} placeholder="Search vehicle in fleet" class="w-64 form-input form-input-sm" />
+                <Input @type="text" {{on "keyup" (perform this.search)}} placeholder={{t "fleet-ops.component.fleet-vehicle-listing.search-vehicle"}} class="w-64 form-input form-input-sm" />
             </div>
             {{#if this.isLoading}}
                 <div class="mx-2">
@@ -12,7 +12,7 @@
         </div>
         <div class="w-56">
             {{#if @onAddVehicle}}
-                <ModelSelect @modelName="vehicle" @query={{hash assignedFleet=false}}  @selectedModel={{@options.selectedVehicle}} @placeholder="Add vehicle to fleet" @triggerClass="form-select form-input form-select-sm form-input-sm" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{this.onAdd}} as |model|>
+                <ModelSelect @modelName="vehicle" @query={{hash assignedFleet=false}}  @selectedModel={{@options.selectedVehicle}} @placeholder={{t "fleet-ops.component.fleet-vehicle-listing.add-vehicle"}} @triggerClass="form-select form-input form-select-sm form-input-sm" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{this.onAdd}} as |model|>
                     {{model.display_name}}
                 </ModelSelect>
             {{/if}}
@@ -24,7 +24,7 @@
                 {{#if @selectable}}
                     <div></div>
                 {{/if}}
-                <div class="col-span-4 flex items-center">Vehicle</div>
+                <div class="col-span-4 flex items-center">{{t "fleet-ops.common.vehicle"}}</div>
                 <div class="col-span-7 flex items-center"></div>
             </div>
         </div>
@@ -32,7 +32,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 vehicle...</span>
+                    <span>{{t "fleet-ops.component.fleet-vehicle-listing.loading-message"}}</span>
                 </div>
             {{/unless}}
             {{#each this.vehicles as |vehicle|}}
@@ -61,7 +61,7 @@
                         {{#if @onRemoveVehicle}}
                             <a href="javascript:;" class="text-danger text-opacity-75" {{on "click" (fn this.onRemove vehicle)}}>
                                 <FaIcon @icon="times" @prefix="fas" class="mr-1" />
-                                <span>Remove</span>
+                                <span>{{t "fleet-ops.common.remove"}}</span>
                             </a>
                         {{/if}}
                     </div>

package/addon/components/fuel-report-form-panel.hbs

@@ -10,7 +10,7 @@
     @width={{or this.width @width "570px"}}
 >
     <Overlay::Header
-        @title={{if this.fuelReport.public_id this.fuelReport.name "New Fuel Report"}}
+        @title={{if this.fuelReport.public_id this.fuelReport.name (t "fleet-ops.component.fuel-report-form-panel.fuel-report") }}
         @status={{this.fuelReport.public_id}}
         @hideStatusDot={{true}}
         @createdAt={{this.fuelReport.createdAt}}
@@ -20,24 +20,24 @@
             <Button
                 @icon={{if this.fuelReport.id "save" "check"}}
                 @type="primary"
-                @text={{if this.fuelReport.id "Save Fuel Report" "Create Fuel Report"}}
+                @text={{if this.fuelReport.id (t "fleet-ops.component.fuel-report-form-panel.save-fuel-report")(t "fleet-ops.component.fuel-report-form-panel.create-fuel-report") }}
                 @onClick={{this.save}}
                 @wrapperClass="mr-2"
             />
             {{#if this.fuelReport.id}}
-                <Button @type="default" @icon="gas-pump" @helpText="View fuel report details" @onClick={{this.onViewDetails}} @wrapperClass="mr-2" />
+                <Button @type="default" @icon="gas-pump" @helpText={{t "fleet-ops.component.fuel-report-form-panel.view-details"}} @onClick={{this.onViewDetails}} @wrapperClass="mr-2" />
             {{/if}}
-            <Button @type="default" @icon="times" @helpText={{if this.fuelReport.id "Cancel edit fuel report" "Cancel new fuel report"}} @onClick={{this.onPressCancel}} />
+            <Button @type="default" @icon="times" @helpText={{if this.fuelReport.id (t "fleet-ops.component.fuel-report-form-panel.cancel-edit-fuel-report")(t "fleet-ops.component.fuel-report-form-panel.cancel-new-fuel-report") }} @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-1 text-xs dark:text-gray-100">
-            <InputGroup @name="Reporter">
+            <InputGroup @name={{t "fleet-ops.common.reporter"}}>
                 <ModelSelect
                     @modelName="user"
                     @selectedModel={{this.fuelReport.reporter}}
-                    @placeholder="Select Reporter"
+                    @placeholder={{t "fleet-ops.component.fuel-report-form-panel.select-reporter"}}
                     @triggerClass="form-select form-input"
                     @infiniteScroll={{false}}
                     @renderInPlace={{true}}
@@ -48,11 +48,11 @@
                     {{model.name}}
                 </ModelSelect>
             </InputGroup>
-            <InputGroup @name="Driver">
+            <InputGroup @name={{t "fleet-ops.common.driver"}}>
                 <ModelSelect
                     @modelName="driver"
                     @selectedModel={{this.fuelReport.driver}}
-                    @placeholder="Select Driver"
+                    @placeholder={{t "fleet-ops.component.fuel-report-form-panel.select-driver"}}
                     @triggerClass="form-select form-input"
                     @infiniteScroll={{false}}
                     @renderInPlace={{true}}
@@ -63,11 +63,11 @@
                     {{model.name}}
                 </ModelSelect>
             </InputGroup>
-            <InputGroup @name="Vehicle">
+            <InputGroup @name={{t "fleet-ops.common.vehicle"}}>
                 <ModelSelect
                     @modelName="vehicle"
                     @selectedModel={{this.fuelReport.vehicle}}
-                    @placeholder="Select Vehicle"
+                    @placeholder={{t "fleet-ops.component.fuel-report-form-panel.select-vehicle"}}
                     @triggerClass="form-select form-input"
                     @infiniteScroll={{false}}
                     @renderInPlace={{true}}
@@ -78,13 +78,13 @@
                     {{model.display_name}}
                 </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.statusOptions}}
                         @selected={{this.fuelReport.status}}
                         @onChange={{fn (mut this.fuelReport.status)}}
-                        @placeholder="Select fuel-report status"
+                        @placeholder={{t "fleet-ops.component.fuel-report-form-panel.select-fuel-report"}}
                         @triggerClass="form-select form-input"
                         as |status|
                     >
@@ -92,8 +92,8 @@
                     </PowerSelect>
                 </div>
             </InputGroup>
-            <InputGroup @name="Odometer" @type="number" @value={{this.fuelReport.odometer}} />
-            <InputGroup @name="Cost">
+            <InputGroup @name={{t "fleet-ops.component.fuel-report-form-panel.odometer"}} @type="number" @value={{this.fuelReport.odometer}} />
+            <InputGroup @name={{t "fleet-ops.component.fuel-report-form-panel.cost"}}>
                 <MoneyInput
                     class="w-full"
                     @value={{this.fuelReport.amount}}
@@ -102,7 +102,7 @@
                     @onCurrencyChange={{fn (mut this.fuelReport.currency)}}
                 />
             </InputGroup>
-            <InputGroup @name="Volume" @helpText="Select the metric unit and volume of fuel to report." @wrapperClass="w-full">
+            <InputGroup @name={{t "fleet-ops.component.fuel-report-form-panel.volume"}} @helpText={{t "fleet-ops.component.fuel-report-form-panel.select-volume-text"}} @wrapperClass="w-full">
                 <UnitInput
                     class="w-full"
                     @measurement="volume"
@@ -112,7 +112,7 @@
                     @onUnitChange={{fn (mut this.fuelReport.metric_unit)}}
                 />
             </InputGroup>
-            <InputGroup @name="Coordinates">
+            <InputGroup @name={{t "fleet-ops.common.coordinates"}}>
                 <CoordinatesInput @value={{this.fuelReport.location}} @onChange={{fn (mut this.fuelReport.location)}} />
             </InputGroup>
         </div>

package/addon/components/fuel-report-form-panel.js

@@ -15,6 +15,10 @@ export default class FuelReportFormPanelComponent extends Component {
      * @service notifications
      */
     @service notifications;
+    /**
+     * @service intl
+     */
+    @service intl;
 
     /**
      * @service hostRouter
@@ -87,7 +91,7 @@ export default class FuelReportFormPanelComponent extends Component {
             return fuelReport
                 .save()
                 .then((fuelReport) => {
-                    this.notifications.success(`Fuel report saved successfully.`);
+                    this.notifications.success(this.intl.t('fleet-ops.component.fuel-report-form-panel.success-message'));
                     contextComponentCallback(this, 'onAfterSave', fuelReport);
                 })
                 .catch((error) => {

package/addon/components/fuel-report-panel/details.hbs

@@ -1,40 +1,40 @@
 <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">ID</div>
+                <div class="field-name">{{t "fleet-ops.common.id"}}</div>
                 <div class="field-value">{{n-a @fuelReport.public_id}}</div>
             </div>
             <div class="field-info-container col-span-2">
-                <div class="field-name">Reporter</div>
+                <div class="field-name">{{t "fleet-ops.common.reporter"}}</div>
                 <div class="field-value">{{n-a @fuelReport.reporter_name}}</div>
             </div>
             <div class="field-info-container">
-                <div class="field-name">Driver</div>
+                <div class="field-name">{{t "fleet-ops.common.driver"}}</div>
                 <div class="field-value">{{n-a @fuelReport.driver_name}}</div>
             </div>
             <div class="field-info-container">
-                <div class="field-name">Vehicle</div>
+                <div class="field-name">{{t "fleet-ops.common.vehicle"}}</div>
                 <div class="field-value">{{n-a @fuelReport.vehicle_name}}</div>
             </div>
             <div class="field-info-container">
-                <div class="field-name">Odometer</div>
+                <div class="field-name">{{t "fleet-ops.common.odometer"}}</div>
                 <div class="field-value">{{n-a @fuelReport.odometer}}</div>
             </div>
             <div class="field-info-container">
-                <div class="field-name">Cost</div>
+                <div class="field-name">{{t "fleet-ops.common.cost"}}</div>
                 <div class="field-value">{{format-currency @fuelReport.amount @fuelReport.currency}}</div>
             </div>
             <div class="field-info-container">
-                <div class="field-name">Fuel/ Volume</div>
-                <div class="field-value">{{pluralize @fuelReport.volume @fuelReport.metric_unit}}</div>
+                <div class="field-name">{{t "fleet-ops.component.fuel-report-panel.details.fuel"}}</div>
+                <div class="field-value">{{pluralize (n-a @fuelReport.volume) (n-a @fuelReport.metric_unit)}}</div>
             </div>
             <div class="field-info-container">
-                <div class="field-name">Date Created</div>
+                <div class="field-name">{{t "fleet-ops.common.date-created"}}</div>
                 <div class="field-value">{{@fuelReport.createdAtShort}}</div>
             </div>
             <div class="field-info-container">
-                <div class="field-name">Coordinates</div>
+                <div class="field-name">{{t "fleet-ops.common.coordinates"}}</div>
                 <div class="field-value">{{point-coordinates @fuelReport.location}}</div>
             </div>
         </div>

package/addon/components/fuel-report-panel.hbs

@@ -9,9 +9,9 @@
     @isResizable={{or this.isResizable @isResizable}}
     @width={{or this.width @width "570px"}}
 >
-    <Overlay::Header @title="Fuel Report Details" @status={{this.fuelReport.public_id}} @hideStatusDot={{true}} @createdAt={{this.fuelReport.createdAt}}>
-        <Button @type="default" @icon="pen" @helpText="Edit fuel report" @onClick={{this.onEdit}} @wrapperClass="mr-2" />
-        <Button @type="default" @icon="times" @helpText={{if this.fuelReport.id "Cancel edit fuel report" "Cancel new fuel report"}} @onClick={{this.onPressCancel}} />
+    <Overlay::Header @title={{t "fleet-ops.component.fuel-report-panel.title"}} @status={{this.fuelReport.public_id}} @hideStatusDot={{true}} @createdAt={{this.fuelReport.createdAt}}>
+        <Button @type="default" @icon="pen" @helpText={{t "fleet-ops.component.fuel-report-panel.edit-button"}} @onClick={{this.onEdit}} @wrapperClass="mr-2" />
+        <Button @type="default" @icon="times" @helpText={{if this.fuelReport.id (t "fleet-ops.component.fuel-report-panel.cancel-edit-fuel-report")(t "fleet-ops.component.fuel-report-panel.cancel-new-fuel-report") }} @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/global-search.hbs

@@ -2,7 +2,7 @@
     <div class="next-map-search-bar-container {{if @visible "is-visible"}}" {{did-insert this.setupComponent}}>
         <div class="next-map-search-bar">
             <FaIcon @icon="search" class="ml-4" />
-            <Input @value={{@value}} {{on "input" this.search}} placeholder="Search by keyword..." />
+            <Input @value={{@value}} {{on "input" this.search}} placeholder={{t "fleet-ops.component.global-search.search"}} />
             <div class="pr-4 flex items-center justify-center">
                 {{#if this.isLoading}}
                     <Spinner class="text-sky-400" />

package/addon/components/horizontal-route.hbs

@@ -13,7 +13,7 @@
                         <div class="notch">
                             {{#if (eq location.uuid this.destination.uuid)}}
                                 <Attach::Tooltip @class="clean" @animation="scale" @placement="top" @showOn="mouseenter focus">
-                                    <InputInfo @text="Destination" @iconClass="text-green-400" class="flex items-center" @spanClass="flex items-start justify-start text-left ml-1" />
+                                    <InputInfo @text={{t "fleet-ops.common.destination"}} @iconClass="text-green-400" class="flex items-center" @spanClass="flex items-start justify-start text-left ml-1" />
                                 </Attach::Tooltip>
                             {{/if}}
                         </div>

package/addon/components/integrated-order-details.hbs

@@ -2,38 +2,38 @@
     <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-2">
         {{#if this.isLalamove}}
             <div class="field-info-container space-y-2">
-                <div class="field-name">Order ID</div>
+                <div class="field-name">{{t "fleet-ops.component.integrated-order-details.order-id"}}</div>
                 <div class="field-value">
                     {{n-a @details.orderId}}
                 </div>
             </div>
             <div class="field-info-container space-y-2">
-                <div class="field-name">Quotation ID</div>
+                <div class="field-name">{{t "fleet-ops.component.integrated-order-details.quotation-id"}}</div>
                 <div class="field-value">
                     {{n-a @details.quotationId}}
                 </div>
             </div>
 
             <div class="field-info-container space-y-2">
-                <div class="field-name">Driver ID</div>
+                <div class="field-name">{{t "fleet-ops.component.integrated-order-details.driver-id"}}</div>
                 <div class="field-value">
                     {{n-a @details.driverId "No Driver Assigned"}}
                 </div>
             </div>
             <div class="field-info-container space-y-2">
-                <div class="field-name">Status</div>
+                <div class="field-name">{{t "fleet-ops.common.status"}}</div>
                 <div class="field-value">
                     {{smart-humanize @details.status}}
                 </div>
             </div>
             <div class="field-info-container space-y-2">
-                <div class="field-name">Distance</div>
+                <div class="field-name">{{t "fleet-ops.common.distance"}}</div>
                 <div class="field-value">
                     {{format-meters @details.distance.value}}
                 </div>
             </div>
             <div class="field-info-container space-y-2">
-                <div class="field-name">Shareable Link</div>
+                <div class="field-name">{{t "fleet-ops.component.integrated-order-details.link"}}</div>
                 <div class="field-value">
                     <a href={{@details.shareLink}} class="break-words anchor-button" target="_lalamove_link">
                         <div>
@@ -44,14 +44,14 @@
                 </div>
             </div>
             <div class="field-info-container space-y-2 lg:col-span-2">
-                <div class="field-name">Price Breakdown</div>
+                <div class="field-name">{{t "fleet-ops.component.integrated-order-details.price-breakdown"}}</div>
                 <div class="field-value">
                     <div class="next-table-wrapper">
                         <table class="table table-fixed w-full">
                             <thead>
                                 <tr>
-                                    <th class="text-left">Item</th>
-                                    <th class="text-left">Amount</th>
+                                    <th class="text-left">{{t "fleet-ops.common.item"}}</th>
+                                    <th class="text-left">{{t "fleet-ops.common.amount"}}</th>
                                 </tr>
                             </thead>
                             <tbody>
@@ -64,7 +64,7 @@
                                     {{/if}}
                                 {{/each-in}}
                                 <tr>
-                                    <td class="font-bold">Total</td>
+                                    <td class="font-bold">{{t "fleet-ops.common.total"}}</td>
                                     <td class="font-bold">{{format-currency (mult @details.priceBreakdown.total 100) @details.priceBreakdown.currency}}</td>
                                 </tr>
                             </tbody>
@@ -73,14 +73,14 @@
                 </div>
             </div>
             <div class="field-info-container space-y-2 lg:col-span-2">
-                <div class="field-name">Metadata</div>
+                <div class="field-name">{{t "fleet-ops.component.integrated-order-details.metadata"}}</div>
                 <div class="field-value">
                     <div class="next-table-wrapper">
                         <table class="table table-fixed w-full">
                             <thead>
                                 <tr>
-                                    <th class="text-left">Key</th>
-                                    <th class="text-left">Value</th>
+                                    <th class="text-left">{{t "fleet-ops.common.key"}}</th>
+                                    <th class="text-left">{{t "fleet-ops.common.value"}}</th>
                                 </tr>
                             </thead>
                             <tbody>