@fleetbase/fleetops-engine 0.6.18 → 0.6.20

package/addon/components/equipment/form.js

@@ -0,0 +1,27 @@
+import Component from '@glimmer/component';
+import { task } from 'ember-concurrency';
+
+export default class EquipmentFormComponent extends Component {
+    /**
+     * Equipment type options
+     */
+    equipmentTypeOptions = ['ppe', 'refrigeration_unit', 'tool', 'liftgate', 'ramp', 'container', 'pallet_jack', 'forklift', 'safety_equipment', 'communication_device', 'other'];
+
+    /**
+     * Status options for equipment
+     */
+    statusOptions = ['available', 'in_use', 'maintenance', 'retired', 'lost', 'damaged'];
+
+    /**
+     * Task to handle photo upload
+     */
+    @task *handlePhotoUpload(file) {
+        try {
+            const response = yield file.upload(this.args.resource);
+            this.args.resource.photo_uuid = response.uuid;
+            this.args.resource.photo_url = response.url;
+        } catch (error) {
+            console.error('Photo upload failed:', error);
+        }
+    }
+}

package/addon/components/fleet/details.hbs

@@ -0,0 +1,32 @@
+<div class="details-wrapper" ...attributes>
+    <ContentPanel @title={{t "common.details"}} @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-2 gap-2 text-xs dark:text-gray-100">
+            <div class="field-info-container">
+                <div class="field-name">{{t "common.name"}}</div>
+                <div class="field-value">{{n-a @resource.name}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "resource.service-area"}}</div>
+                <div class="field-value">{{n-a @resource.service_area.name}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "resource.zone"}}</div>
+                <div class="field-value">{{n-a @resource.zone.name}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "fleet.fields.task"}}</div>
+                <div class="field-value">{{n-a @resource.task}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "fleet.fields.active-manpower"}}</div>
+                <div class="field-value">{{@resource.drivers_online_count}} of {{@resource.drivers_count}} Online</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "common.date-created"}}</div>
+                <div class="field-value">{{@resource.createdAtShort}}</div>
+            </div>
+        </div>
+    </ContentPanel>
+
+    <CustomField::Yield @subject={{@resource}} @viewMode={{true}} @wrapperClass="bordered-top" />
+</div>

package/addon/components/fleet/details.js

@@ -0,0 +1,3 @@
+import Component from '@glimmer/component';
+
+export default class FleetDetailsComponent extends Component {}

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

@@ -0,0 +1,81 @@
+<div class={{or @wrapperClass @options.wrapperClass}}>
+    <div class="fleet-driver-listing" ...attributes>
+        <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={{t "fleet.driver-listing.search-driver"}} class="w-64 form-input form-input-sm" />
+                </div>
+                {{#if this.search.isRunning}}
+                    <div class="mx-2">
+                        <Spinner @iconClass="text-sky-500 fa-spin-800ms" />
+                    </div>
+                {{/if}}
+            </div>
+            <div class="w-56">
+                <ModelSelect
+                    @modelName="driver"
+                    @selectedModel={{this.selectedDriver}}
+                    @placeholder={{t "fleet.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>
+        </div>
+        <div class="bg-white border border-gray-200 rounded shadow-sm dark:bg-gray-900 dark:border-gray-700 text-xs">
+            <div class="w-full">
+                <div class="grid grid-cols-12 text-xs p-3 font-semibold text-gray-800 dark:text-gray-100 border-b border-gray-200 dark:border-gray-700 shadow-sm">
+                    {{#if this.selectable}}
+                        <div></div>
+                    {{/if}}
+                    <div class="col-span-4 flex items-center">{{t "resource.driver"}}</div>
+                    <div class="col-span-7 flex items-center"></div>
+                </div>
+            </div>
+            <div class="h-48 overflow-y-scroll bg-gray-50 dark:bg-gray-800">
+                {{#if (and (not this.drivers) this.search.isRunning)}}
+                    <div class="flex items-center justify-center p-4 dark:text-gray-100">
+                        <div class="mr-2">
+                            <Spinner @iconClass="text-sky-500" />
+                        </div>
+                        <span>{{t "common.loading-resource" resource=(t "resource.drivers")}}</span>
+                    </div>
+                {{/if}}
+                {{#each this.drivers as |driver|}}
+                    <div class="flex flex-row items-center justify-between text-xs py-2 px-3 text-gray-800 border-b border-gray-200 dark:border-gray-700 dark:text-gray-100 bg-gray-50 dark:bg-gray-800">
+                        <div class="flex flex-row items-center">
+                            {{#if this.selectable}}
+                                <div class="flex items-center mr-2">
+                                    <Checkbox @value={{includes driver this.selected}} @onToggle={{fn this.onSelect driver}} />
+                                </div>
+                            {{/if}}
+                            <div class="flex items-center">
+                                <div class="flex flex-row items-start">
+                                    <div class="mr-2">
+                                        <div class="relative">
+                                            <Image src={{driver.photo_url}} alt={{driver.name}} class="w-5 h-5 rounded-md" @fallbackSrc={{config "defaultValues.driverImage"}} />
+                                            <FaIcon @icon="circle" class="absolute right-0 top-0 -mr-1 -mt-1 {{if driver.online 'text-green-500' 'text-yellow-200'}}" />
+                                        </div>
+                                    </div>
+                                    <div>
+                                        <div class="font-semibold">{{driver.name}}</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <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>{{t "common.remove"}}</span>
+                            </a>
+                        </div>
+                    </div>
+                {{/each}}
+            </div>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,77 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { debug } from '@ember/debug';
+import { timeout, task } from 'ember-concurrency';
+import contextComponentCallback from '@fleetbase/ember-core/utils/context-component-callback';
+
+export default class FleetDriverListingComponent extends Component {
+    @service store;
+    @service fetch;
+    @service intl;
+    @service universe;
+    @service notifications;
+    @tracked selected = [];
+    @tracked selectable = false;
+    @tracked drivers = [];
+    @tracked fleet;
+
+    constructor() {
+        super(...arguments);
+        const { options = {} } = this.args;
+
+        this.fleet = this.args.resource;
+        this.selectable = this.args.selectable === true || options.selectable === true;
+        this.search.perform({ limit: -1 });
+    }
+
+    @task({ restartable: true }) *search(params = {}) {
+        if (!params.value) {
+            yield timeout(300);
+        }
+
+        try {
+            const drivers = yield this.store.query('driver', { fleet: this.fleet.id, ...params });
+            this.drivers = drivers.toArray();
+            contextComponentCallback(this, 'onLoaded', drivers);
+            return drivers;
+        } catch (err) {
+            debug('Unable to load fleet drivers: ' + err.message);
+        }
+    }
+
+    @action onInput({ target: { value } }) {
+        this.search.perform({ query: value });
+    }
+
+    @action async onAddDriver(driver) {
+        try {
+            await this.fetch.post('fleets/assign-driver', { driver: driver.id, fleet: this.fleet.id });
+            this.drivers.pushObject(driver);
+            this.universe.trigger('fleet-ops.fleet.driver_assigned', this.fleet, driver);
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    @action async onRemoveDriver(driver) {
+        try {
+            await this.fetch.post('fleets/remove-driver', { driver: driver.id, fleet: this.fleet.id });
+            this.drivers.removeObject(driver);
+            this.universe.trigger('fleet-ops.fleet.driver_unassigned', this.fleet, driver);
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    @action onSelect(driver) {
+        if (this.selected.includes(driver)) {
+            this.selected.removeObject(driver);
+        } else {
+            this.selected.pushObject(driver);
+        }
+
+        contextComponentCallback(this, 'onSelect', ...arguments);
+    }
+}

package/addon/components/fleet/form.hbs

@@ -0,0 +1,108 @@
+<div class="form-wrapper" ...attributes>
+    <ContentPanel @title={{t "fleet.fields.fleet-details"}} @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2 no-input-group-padding text-xs">
+            <InputGroup @name={{t "fleet.fields.fleet-name"}} @value={{@resource.name}} @disabled={{cannot-write @resource}} @wrapperClass="col-span-2" />
+            <InputGroup @name={{t "fleet.fields.parent-fleet"}} @value={{@resource.parent_fleet}}>
+                <ModelSelect
+                    @modelName="fleet"
+                    @selectedModel={{@resource.parent_fleet}}
+                    @placeholder={{t "fleet.fields.select-parent-fleet"}}
+                    @triggerClass="form-select form-input"
+                    @infiniteScroll={{false}}
+                    @renderInPlace={{true}}
+                    @onChange={{fn this.updateRelationship "parent_fleet"}}
+                    @allowClear={{true}}
+                    @disabled={{cannot-write @resource}}
+                    as |model|
+                >
+                    {{model.name}}
+                </ModelSelect>
+            </InputGroup>
+            <InputGroup @name={{t "resource.vendor"}} @value={{@resource.vendor}}>
+                <ModelSelect
+                    @modelName="vendor"
+                    @selectedModel={{@resource.vendor}}
+                    @placeholder={{t "fleet.fields.select-vendor"}}
+                    @triggerClass="form-select form-input"
+                    @infiniteScroll={{false}}
+                    @renderInPlace={{true}}
+                    @onChange={{fn this.updateRelationship "vendor"}}
+                    @allowClear={{true}}
+                    @disabled={{cannot-write @resource}}
+                    as |model|
+                >
+                    {{model.name}}
+                </ModelSelect>
+            </InputGroup>
+            <InputGroup @name={{t "fleet.fields.service-title"}} @value={{@resource.service_area}}>
+                <ModelSelect
+                    @modelName="service-area"
+                    @selectedModel={{@resource.service_area}}
+                    @placeholder={{t "fleet.fields.select-service"}}
+                    @triggerClass="form-select form-input"
+                    @infiniteScroll={{false}}
+                    @renderInPlace={{true}}
+                    @onChange={{fn this.updateRelationship "service_area"}}
+                    @allowClear={{true}}
+                    @disabled={{cannot-write @resource}}
+                    as |model|
+                >
+                    {{model.name}}
+                </ModelSelect>
+            </InputGroup>
+            {{#if @resource.service_area}}
+                <InputGroup @name={{t "fleet.fields.zone-title"}} @value={{@resource.zone}}>
+                    <ModelSelect
+                        @modelName="zone"
+                        @selectedModel={{@resource.zone}}
+                        @query={{hash service_area_uuid=@resource.service_area.id}}
+                        @placeholder={{t "fleet.fields.select-zone"}}
+                        @triggerClass="form-select form-input"
+                        @infiniteScroll={{false}}
+                        @renderInPlace={{true}}
+                        @onChange={{fn this.updateRelationship "zone"}}
+                        @allowClear={{true}}
+                        @disabled={{cannot-write @resource}}
+                        as |model|
+                    >
+                        {{model.name}}
+                    </ModelSelect>
+                </InputGroup>
+            {{/if}}
+            <InputGroup @name={{t "common.status"}} @helpText={{t "fleet.fields.select-status-fleet"}}>
+                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                    <PowerSelect
+                        @options={{get-fleet-ops-options "fleetStatuses"}}
+                        @selected={{find-by "value" @resource.status (get-fleet-ops-options "fleetStatuses")}}
+                        @onChange={{set-model-attr @resource "status"}}
+                        @placeholder={{t "fleet.fields.select-status"}}
+                        @triggerClass="form-select form-input"
+                        @disabled={{cannot-write @resource}}
+                        as |status|
+                    >
+                        <div class="text-sm">
+                            <div class="font-semibold normalize-in-trigger">{{status.label}}</div>
+                            <div class="hide-from-trigger">{{status.description}}</div>
+                        </div>
+                    </PowerSelect>
+                </div>
+            </InputGroup>
+            <InputGroup
+                @name={{t "fleet.fields.task-mission-title"}}
+                @helpText={{t "fleet.fields.task-text"}}
+                @value={{@resource.task}}
+                @disabled={{cannot-write @resource}}
+                @wrapperClass="col-span-2"
+            />
+            <RegistryYield @registry="fleet-ops:component:fleet:form:details" as |RegistryComponent|>
+                <RegistryComponent @resource={{@resource}} @controller={{@controller}} @permission={{get-write-permission @resource}} />
+            </RegistryYield>
+        </div>
+    </ContentPanel>
+
+    <CustomField::Yield @subject={{@resource}} @wrapperClass="bordered-top" />
+
+    <RegistryYield @registry="fleet-ops:component:fleet:form" as |RegistryComponent|>
+        <RegistryComponent @resource={{@resource}} @controller={{@controller}} @permission={{get-write-permission @resource}} />
+    </RegistryYield>
+</div>

package/addon/components/fleet/form.js

@@ -0,0 +1,20 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { underscore } from '@ember/string';
+
+export default class FleetFormComponent extends Component {
+    @tracked statusOptions = ['active', 'disabled', 'decommissioned'];
+
+    get writePermission() {
+        return this.args.resource.isNew ? 'fleet-ops create fleet' : 'fleet-ops update fleet';
+    }
+
+    @action updateRelationship(relation, value) {
+        this.args.resource.set(relation, value);
+
+        if (!value) {
+            this.args.resource.set(underscore(relation) + '_uuid', null);
+        }
+    }
+}

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

@@ -0,0 +1,86 @@
+<div class={{or @wrapperClass @options.wrapperClass}}>
+    <div class="fleet-vehicle-listing" ...attributes>
+        <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={{t "fleet.vehicle-listing.search-vehicle"}}
+                        class="w-64 form-input form-input-sm"
+                    />
+                </div>
+                {{#if this.search.isRunning}}
+                    <div class="mx-2">
+                        <Spinner @iconClass="text-sky-500 fa-spin-800ms" />
+                    </div>
+                {{/if}}
+            </div>
+            <div class="w-56">
+                <ModelSelect
+                    @modelName="vehicle"
+                    @selectedModel={{this.selectedVehicle}}
+                    @placeholder={{t "fleet.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>
+        </div>
+        <div class="bg-white border border-gray-200 rounded shadow-sm dark:bg-gray-900 dark:border-gray-700 text-xs">
+            <div class="w-full">
+                <div class="grid grid-cols-12 text-xs p-3 font-semibold text-gray-800 dark:text-gray-100 border-b border-gray-200 dark:border-gray-700 shadow-sm">
+                    {{#if this.selectable}}
+                        <div></div>
+                    {{/if}}
+                    <div class="col-span-4 flex items-center">{{t "resource.vehicle"}}</div>
+                    <div class="col-span-7 flex items-center"></div>
+                </div>
+            </div>
+            <div class="h-48 overflow-y-scroll bg-gray-50 dark:bg-gray-800">
+                {{#if (and (not this.vehicles) this.search.isRunning)}}
+                    <div class="flex items-center justify-center p-4 dark:text-gray-100">
+                        <div class="mr-2">
+                            <Spinner @iconClass="text-sky-500" />
+                        </div>
+                        <span>{{t "common.loading-resource" resource=(t "resource.vehicles")}}</span>
+                    </div>
+                {{/if}}
+                {{#each this.vehicles as |vehicle|}}
+                    <div class="flex flex-row items-center justify-between text-xs py-2 px-3 text-gray-800 border-b border-gray-200 dark:border-gray-700 dark:text-gray-100 bg-gray-50 dark:bg-gray-800">
+                        <div class="flex flex-row items-center">
+                            {{#if this.selectable}}
+                                <div class="flex items-center mr-2">
+                                    <Checkbox @value={{includes vehicle this.selected}} @onToggle={{fn this.onSelect vehicle}} />
+                                </div>
+                            {{/if}}
+                            <div class="flex items-center">
+                                <div class="flex flex-row items-start">
+                                    <div class="mr-2">
+                                        <div class="relative">
+                                            <Image src={{vehicle.photo_url}} alt={{vehicle.name}} class="w-5 h-5 rounded-md" @fallbackSrc={{config "defaultValues.vehicleImage"}} />
+                                            <FaIcon @icon="circle" class="absolute right-0 top-0 -mr-1 -mt-1 {{if vehicle.online 'text-green-500' 'text-yellow-200'}}" />
+                                        </div>
+                                    </div>
+                                    <div>
+                                        <div class="font-semibold">{{vehicle.displayName}}</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <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>{{t "common.remove"}}</span>
+                            </a>
+                        </div>
+                    </div>
+                {{/each}}
+            </div>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,76 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { debug } from '@ember/debug';
+import { timeout, task } from 'ember-concurrency';
+import contextComponentCallback from '@fleetbase/ember-core/utils/context-component-callback';
+
+export default class FleetVehicleListingComponent extends Component {
+    @service store;
+    @service fetch;
+    @service intl;
+    @service universe;
+    @tracked vehicles = [];
+    @tracked selected = [];
+    @tracked selectable = false;
+    @tracked fleet;
+
+    constructor() {
+        super(...arguments);
+        const { options = {} } = this.args;
+
+        this.fleet = this.args.resource;
+        this.selectable = this.args.selectable === true || options.selectable === true;
+        this.search.perform({ limit: -1 });
+    }
+
+    @task({ restartable: true }) *search(params = {}) {
+        if (!params.value) {
+            yield timeout(300);
+        }
+
+        try {
+            const vehicles = yield this.store.query('vehicle', { fleet: this.fleet.id, ...params });
+            this.vehicles = vehicles.toArray();
+            contextComponentCallback(this, 'onLoaded', vehicles);
+            return vehicles;
+        } catch (err) {
+            debug('Unable to load fleet vehicles: ' + err.message);
+        }
+    }
+
+    @action onInput({ target: { value } }) {
+        this.search.perform({ query: value });
+    }
+
+    @action async onAddVehicle(vehicle) {
+        try {
+            await this.fetch.post('fleets/assign-vehicle', { vehicle: vehicle.id, fleet: this.fleet.id });
+            this.vehicles.pushObject(vehicle);
+            this.universe.trigger('fleet-ops.fleet.vehicle_assigned', this.fleet, vehicle);
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    @action async onRemoveVehicle(vehicle) {
+        try {
+            await this.fetch.post('fleets/remove-vehicle', { vehicle: vehicle.id, fleet: this.fleet.id });
+            this.vehicles.removeObject(vehicle);
+            this.universe.trigger('fleet-ops.fleet.vehicle_unassigned', this.fleet, vehicle);
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    @action onSelect(vehicle) {
+        if (this.selected.includes(vehicle)) {
+            this.selected.removeObject(vehicle);
+        } else {
+            this.selected.pushObject(vehicle);
+        }
+
+        contextComponentCallback(this, 'onSelect', ...arguments);
+    }
+}

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={{t "fleet-ops.component.fleet-driver-listing.search-driver"}} class="w-64 form-input form-input-sm" />
+                <Input @type="text" {{on "keyup" (perform this.search)}} placeholder={{t "fleet-driver-listing.search-driver"}} class="w-64 form-input form-input-sm" />
             </div>
 
             {{#if this.isLoading}}
@@ -16,7 +16,7 @@
                 <ModelSelect
                     @modelName="driver"
                     @selectedModel={{@options.selectedDriver}}
-                    @placeholder={{t "fleet-ops.component.fleet-driver-listing.add-driver"}}
+                    @placeholder={{t "fleet-driver-listing.add-driver"}}
                     @triggerClass="form-select form-input form-select-sm form-input-sm"
                     @infiniteScroll={{false}}
                     @renderInPlace={{true}}
@@ -34,7 +34,7 @@
                 {{#if @selectable}}
                     <div></div>
                 {{/if}}
-                <div class="col-span-4 flex items-center">{{t "fleet-ops.common.driver"}}</div>
+                <div class="col-span-4 flex items-center">{{t "common.driver"}}</div>
                 <div class="col-span-7 flex items-center"></div>
             </div>
         </div>
@@ -42,7 +42,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>{{t "fleet-ops.component.fleet-driver-listing.loading-message"}}</span>
+                    <span>{{t "fleet-driver-listing.loading-message"}}</span>
                 </div>
             {{/unless}}
             {{#each this.drivers as |driver|}}
@@ -71,7 +71,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>{{t "fleet-ops.common.remove"}}</span>
+                                <span>{{t "common.remove"}}</span>
                             </a>
                         {{/if}}
                     </div>

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

@@ -1,28 +1,28 @@
 <div class="p-4">
-    <ContentPanel @title={{t "fleet-ops.common.details"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-900">
+    <ContentPanel @title={{t "common.details"}} @open={{true}}>
         <div class="grid grid-cols-2 gap-4 text-xs md:mb-6 dark:text-gray-100">
-            <div class="field-info-container space-y-2">
-                <div class="field-name">{{t "fleet-ops.common.name"}}</div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "common.name"}}</div>
                 <div class="field-value">{{n-a @fleet.name}}</div>
             </div>
-            <div class="field-info-container space-y-2">
-                <div class="field-name">{{t "fleet-ops.common.service-area"}}</div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "common.service-area"}}</div>
                 <div class="field-value">{{n-a @fleet.service_area.name}}</div>
             </div>
-            <div class="field-info-container space-y-2">
-                <div class="field-name">{{t "fleet-ops.common.zone"}}</div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "common.zone"}}</div>
                 <div class="field-value">{{n-a @fleet.zone.name}}</div>
             </div>
-            <div class="field-info-container space-y-2">
-                <div class="field-name">{{t "fleet-ops.common.task"}}</div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "common.task"}}</div>
                 <div class="field-value">{{n-a @fleet.task}}</div>
             </div>
-            <div class="field-info-container space-y-2">
-                <div class="field-name">{{t "fleet-ops.component.fleet-panel.details.active-manpower"}}</div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "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 space-y-2">
-                <div class="field-name">{{t "fleet-ops.common.date-created"}}</div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "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={{t "fleet-ops.component.fleet-panel.driver-listing.search-driver"}} class="w-64 form-input form-input-sm" />
+                    <Input @type="text" {{on "input" this.onInput}} placeholder={{t "fleet-panel.driver-listing.search-driver"}} class="w-64 form-input form-input-sm" />
                 </div>
                 {{#if this.search.isRunning}}
                     <div class="mx-2">
@@ -15,7 +15,7 @@
                 <ModelSelect
                     @modelName="driver"
                     @selectedModel={{this.selectedDriver}}
-                    @placeholder={{t "fleet-ops.component.fleet-panel.driver-listing.add-driver"}}
+                    @placeholder={{t "fleet-panel.driver-listing.add-driver"}}
                     @triggerClass="form-select form-input form-select-sm form-input-sm"
                     @infiniteScroll={{false}}
                     @renderInPlace={{true}}
@@ -32,7 +32,7 @@
                     {{#if this.selectable}}
                         <div></div>
                     {{/if}}
-                    <div class="col-span-4 flex items-center">{{t "fleet-ops.common.driver"}}</div>
+                    <div class="col-span-4 flex items-center">{{t "common.driver"}}</div>
                     <div class="col-span-7 flex items-center"></div>
                 </div>
             </div>
@@ -42,7 +42,7 @@
                         <div class="mr-2">
                             <Spinner @iconClass="text-sky-500" />
                         </div>
-                        <span>{{t "fleet-ops.component.fleet-panel.driver-listing.loading-driver"}}</span>
+                        <span>{{t "fleet-panel.driver-listing.loading-driver"}}</span>
                     </div>
                 {{/if}}
                 {{#each this.drivers as |driver|}}
@@ -70,7 +70,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>{{t "fleet-ops.common.remove"}}</span>
+                                <span>{{t "common.remove"}}</span>
                             </a>
                         </div>
                     </div>