@fleetbase/fleetops-engine 0.6.18 → 0.6.19

package/addon/components/modals/service-area-form.hbs

@@ -2,34 +2,34 @@
     <div class="modal-body-container">
         <InputGroup
             @value={{@options.serviceArea.name}}
-            @name={{t "fleet-ops.component.modals.service-area-form.name"}}
-            @helpText={{t "fleet-ops.component.modals.service-area-form.name-text"}}
+            @name={{t "modals.service-area-form.name"}}
+            @helpText={{t "modals.service-area-form.name-text"}}
             @required={{true}}
         />
-        <InputGroup @name={{t "fleet-ops.component.modals.service-area-form.type"}} @helpText={{t "fleet-ops.component.modals.service-area-form.type-text"}}>
+        <InputGroup @name={{t "modals.service-area-form.type"}} @helpText={{t "modals.service-area-form.type-text"}}>
             <Select
                 @options={{@options.serviceAreaTypes}}
                 @value={{@options.serviceArea.type}}
                 @onSelect={{fn (mut @options.serviceArea.type)}}
-                @placeholder={{t "fleet-ops.component.modals.service-area-form.select-type"}}
+                @placeholder={{t "modals.service-area-form.select-type"}}
                 class="w-full"
             />
         </InputGroup>
         <InputGroup
             @type="color"
             @value={{@options.serviceArea.stroke_color}}
-            @name={{t "fleet-ops.component.modals.service-area-form.border-color"}}
-            @helpText={{t "fleet-ops.component.modals.service-area-form.customize-border-color"}}
+            @name={{t "modals.service-area-form.border-color"}}
+            @helpText={{t "modals.service-area-form.customize-border-color"}}
             class="p-0 border-0 m-0 w-8 h-8 bg-transparent rounded-none"
         />
         <InputGroup
             @type="color"
             @value={{@options.serviceArea.color}}
-            @name={{t "fleet-ops.component.modals.service-area-form.area-color"}}
-            @helpText={{t "fleet-ops.component.modals.service-area-form.customize-area-color"}}
+            @name={{t "modals.service-area-form.area-color"}}
+            @helpText={{t "modals.service-area-form.customize-area-color"}}
             class="p-0 border-0 m-0 w-8 h-8 bg-transparent rounded-none"
         />
-        <InputGroup @name={{t "fleet-ops.component.modals.service-area-form.country"}} @helpText={{t "fleet-ops.component.modals.service-area-form.country-text"}}>
+        <InputGroup @name={{t "modals.service-area-form.country"}} @helpText={{t "modals.service-area-form.country-text"}}>
             <CountrySelect class="w-full form-input" @value={{@options.serviceArea.country}} @onChange={{fn (mut @options.serviceArea.country)}} />
         </InputGroup>
     </div>

package/addon/components/modals/set-password.hbs

@@ -5,23 +5,23 @@
                 <FaIcon @icon="info-circle" class="text-blue-900 mr-4" />
             </div>
             <p class="flex-1 text-sm text-blue-900 dark:text-blue-900">
-                {{t "fleet-ops.component.modals.set-password.message"}}
+                {{t "modals.set-password.message"}}
             </p>
         </div>
 
         <InputGroup
-            @name={{t "fleet-ops.component.modals.set-password.new-password"}}
+            @name={{t "modals.set-password.new-password"}}
             @value={{@options.password}}
             @type="password"
             @inputClass="form-input-lg"
-            @helpText={{t "fleet-ops.component.modals.set-password.help-text"}}
+            @helpText={{t "modals.set-password.help-text"}}
         />
         <InputGroup
-            @name={{t "fleet-ops.component.modals.set-password.confirm-password"}}
+            @name={{t "modals.set-password.confirm-password"}}
             @value={{@options.password_confirmation}}
             @type="password"
             @inputClass="form-input-lg"
-            @helpText={{t "fleet-ops.component.modals.set-password.help-text"}}
+            @helpText={{t "modals.set-password.help-text"}}
         />
     </div>
 </Modal::Default>

package/addon/components/modals/uninstall-prompt.hbs

@@ -7,8 +7,8 @@
                 </div>
             </div>
             <div class="flex-1 dark:text-gray-100">
-                <p class="text-base mb-2">{{t "fleet-ops.component.modals.uninstall-prompt.message" htmlSafe=true options=@options.extensionName}}</p>
-                <small>{{t "fleet-ops.component.modals.uninstall-prompt.sub-message"}}</small>
+                <p class="text-base mb-2">{{t "modals.uninstall-prompt.message" htmlSafe=true options=@options.extensionName}}</p>
+                <small>{{t "modals.uninstall-prompt.sub-message"}}</small>
             </div>
         </div>
         {{#if @options.isUninstalling}}

package/addon/components/modals/update-order-activity.hbs

@@ -0,0 +1,88 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{perform this.submitActivity}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="flex justify-between align-start">
+            <div class="flex-1">
+                <p class="mb-5 dark:text-gray-100">
+                    {{t "modals.order-new-activity.select-message"}}
+                </p>
+            </div>
+            <Button @text="Refresh activity" @icon="refresh" @size="xs" @wrapperClass="self-start" @isLoading={{this.loadActivity.isRunning}} @onClick={{perform this.loadActivity}} />
+        </div>
+
+        {{#if this.order.activityHasEnded}}
+            <InfoBlock class="warning mt-2" @icon="exclamation-triangle">
+                {{t "modals.order-new-activity.order-currently-message" htmlSafe=true options=@options.order.status}}
+                {{t "modals.order-new-activity.fleetbase-message"}}
+            </InfoBlock>
+        {{/if}}
+
+        <fieldset class="my-5">
+            <legend class="sr-only">
+                {{t "modals.order-new-activity.activity-options"}}
+            </legend>
+
+            <div class="radio-group-condensed -space-y-px">
+                {{#each this.activityOptions as |activity index|}}
+                    <div class="radio-group-item shadow-sm {{if (eq this.selectedActivity index) 'is-checked'}}">
+                        <div class="flex items-center h-5">
+                            <RadioButton
+                                @radioClass="focus:ring-blue-500"
+                                @radioId={{concat "activity_" index}}
+                                @value={{index}}
+                                @groupValue={{this.selectedActivity}}
+                                @name={{t "modals.order-new-activity.activity"}}
+                                @changed={{fn (mut this.selectedActivity)}}
+                            />
+                        </div>
+                        <label for={{concat "activity_" index}} class="ml-3 flex flex-col cursor-pointer w-full">
+                            <span class="block text-sm font-semibold">
+                                {{activity.status}}
+                            </span>
+                            <span class="block text-sm">
+                                {{activity.details}}
+
+                                {{#if (eq activity.code "dispatched")}}
+                                    <InfoBlock
+                                        @type="warning"
+                                        @size="xs"
+                                        @icon="exclamation-triangle"
+                                        @text={{t "modals.order-new-activity.dispatch"}}
+                                        class="mt-1"
+                                    />
+                                {{/if}}
+                            </span>
+                        </label>
+                        <div>
+                            <Badge @status={{dasherize activity.code}} class="uppercase">{{activity.code}}</Badge>
+                        </div>
+                    </div>
+                {{/each}}
+
+                <div class="radio-group-item shadow-sm {{if (eq this.selectedActivity 'custom') 'is-checked'}}">
+                    <div class="flex items-center h-5 pt-1">
+                        <RadioButton
+                            @radioClass="focus:ring-blue-500"
+                            @radioId="activity_custom"
+                            @value="custom"
+                            @groupValue={{this.selectedActivity}}
+                            @name={{t "modals.order-new-activity.activity"}}
+                            @changed={{fn (mut this.selectedActivity)}}
+                        />
+                    </div>
+                    <label for="activity_custom" class="ml-3 flex flex-col cursor-pointer w-full pr-5">
+                        <div class="font-semibold text-sm mb-1">Add custom activity</div>
+                        <span class="block text-sm font-medium">
+                            <Input @type="text" @value={{this.customActivity.status}} class="form-input form-input-sm w-full rounded-b-none" placeholder={{t "modals.order-new-activity.status"}} />
+                        </span>
+                        <span class="block text-sm">
+                            <Input @type="text" @value={{this.customActivity.details}} class="form-input form-input-sm w-full rounded-t-none" placeholder={{t "modals.order-new-activity.details"}} />
+                        </span>
+                    </label>
+                    <div>
+                        <Input @type="text" @value={{this.customActivity.code}} class="form-input form-input-sm" placeholder={{t "modals.order-new-activity.code"}} />
+                    </div>
+                </div>
+            </div>
+        </fieldset>
+    </div>
+</Modal::Default>

package/addon/components/modals/update-order-activity.js

@@ -0,0 +1,51 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { task } from 'ember-concurrency';
+
+export default class ModalsUpdateOrderActivityComponent extends Component {
+    @service fetch;
+    @service notifications;
+    @service modalsManager;
+    @tracked activityOptions = [];
+    @tracked order;
+    @tracked selectedActivity;
+    @tracked customActivity;
+
+    constructor(owner, { options = {} }) {
+        super(...arguments);
+        this.order = options.order;
+        this.loadActivity.perform();
+    }
+
+    @task *loadActivity() {
+        try {
+            const activityOptions = yield this.fetch.get(`orders/next-activity/${this.order.id}`);
+            this.activityOptions = activityOptions;
+            return activityOptions;
+        } catch (err) {
+            this.notifications.serverError(err);
+        }
+    }
+
+    @task *submitActivity(modal) {
+        modal.startLoading();
+
+        const activity = this.selectedActivity === 'custom' ? this.customActivity : this.activityOptions[this.selectedActivity];
+        if (this.selectedActivity === 'custom' && !activity.status && !activity.details && !activity.code) {
+            modal.stopLoading();
+            return this.notifications.warning(this.intl.t('fleet-ops.operations.orders.index.view.invalid-warning'));
+        }
+
+        try {
+            yield this.fetch.patch(`orders/update-activity/${this.order.id}`, { activity });
+            this.modalsManager.setOption('activityCreated', activity);
+            this.notifications.success(`Order activity has been updated to ${activity.status}`);
+        } catch (error) {
+            this.notifications.serverError(error);
+        } finally {
+            modal.stopLoading();
+            modal.done();
+        }
+    }
+}

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

@@ -8,12 +8,12 @@
                         {{#if queue.files.length}}
                             <Spinner class="mr-1" />
                             <span>
-                                {{t "fleet-ops.common.uploading"}}
+                                {{t "common.uploading"}}
                             </span>
                         {{else}}
                             <FaIcon @icon="image" class="mr-1" />
                             <span>
-                                {{t "fleet-ops.common.upload-new"}}
+                                {{t "common.upload-image"}}
                             </span>
                         {{/if}}
                     </a>
@@ -23,34 +23,33 @@
                 <div class="grid grid-cols-2 gap-4 text-xs dark:text-gray-100">
                     <div class="input-group">
                         <label>
-                            {{t "fleet-ops.common.name"}}
+                            {{t "common.name"}}
                         </label>
-                        <Input @value={{@options.user.name}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.common.name"}} />
+                        <Input @value={{@options.user.name}} @type="text" class="w-full form-input" placeholder={{t "common.name"}} />
                     </div>
 
                     <div class="input-group">
                         <label>
-                            {{t "fleet-ops.common.email"}}
+                            {{t "common.email"}}
                         </label>
-                        <Input @value={{@options.user.email}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.common.email"}} />
+                        <Input @value={{@options.user.email}} @type="text" class="w-full form-input" placeholder={{t "common.email"}} />
                     </div>
 
                     <div class="input-group">
                         <label>
-                            {{t "fleet-ops.common.phone"}}
+                            {{t "common.phone"}}
                         </label>
                         <PhoneInput @value={{@options.user.phone}} @onInput={{fn (mut @options.user.phone)}} class="form-input w-full" />
                     </div>
 
                     <div class="input-group">
                         <label>
-                            {{t "fleet-ops.common.country"}}
+                            {{t "common.country"}}
                         </label>
                         <CountrySelect
                             class="w-full form-input form-select form-datalist"
                             @value={{@options.user.country}}
                             @onChange={{fn (mut @options.user.country)}}
-                            placeholder={{t "fleet-ops.common.country"}}
                         />
                     </div>
                 </div>

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

@@ -7,58 +7,58 @@
                 </div>
             </div>
             <div class="flex-1 space-y-4">
-                <ContentPanel @title="Details" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                <ContentPanel @title="Details" @open={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
                     <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 @options.vehicle.name}}</div>
                         </div>
 
-                        <div class="field-info-container space-y-2">
-                            <div class="field-name">{{t "fleet-ops.common.vehicle"}}</div>
+                        <div class="field-info-container">
+                            <div class="field-name">{{t "common.vehicle"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.internal_id}}</div>
                         </div>
 
-                        <div class="field-info-container space-y-2">
-                            <div class="field-name">{{t "fleet-ops.common.plate-number"}}</div>
+                        <div class="field-info-container">
+                            <div class="field-name">{{t "common.plate-number"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.plate_number}}</div>
                         </div>
 
-                        <div class="field-info-container space-y-2">
-                            <div class="field-name">{{t "fleet-ops.common.vin-number"}}</div>
+                        <div class="field-info-container">
+                            <div class="field-name">{{t "common.vin-number"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.vin}}</div>
                         </div>
 
-                        <div class="field-info-container space-y-2">
-                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.make"}}</div>
+                        <div class="field-info-container">
+                            <div class="field-name">{{t "modals.vehicle-details.make"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.name}}</div>
                         </div>
 
-                        <div class="field-info-container space-y-2">
-                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.model"}}</div>
+                        <div class="field-info-container">
+                            <div class="field-name">{{t "modals.vehicle-details.model"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model}}</div>
                         </div>
 
-                        <div class="field-info-container space-y-2">
-                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.year"}}</div>
+                        <div class="field-info-container">
+                            <div class="field-name">{{t "modals.vehicle-details.year"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.year}}</div>
                         </div>
 
-                        <div class="field-info-container space-y-2">
-                            <div class="field-name">{{t "fleet-ops.common.status"}}</div>
+                        <div class="field-info-container">
+                            <div class="field-name">{{t "common.status"}}</div>
                             <Badge @status={{@options.vehicle.status}} />
                         </div>
                     </div>
 
                     <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2 mb-2 mt-2">
                         <div class="col-span-2">
-                            <div class="field-info-container space-y-2">
-                                <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.driver-assigned"}}</div>
+                            <div class="field-info-container">
+                                <div class="field-name">{{t "modals.vehicle-details.driver-assigned"}}</div>
                                 <div class="field-value">
                                     {{#if @options.vehicle.driver}}
                                         <DriverCard class="dark:bg-gray-800 rounded-md px-3 py-2" @driver={{@options.vehicle.driver}} @onClick={{@options.viewDriver}} />
                                     {{else}}
-                                        <span>{{t "fleet-ops.component.modals.vehicle-details.no-driver-assigned"}}</span>
+                                        <span>{{t "modals.vehicle-details.no-driver-assigned"}}</span>
                                     {{/if}}
                                 </div>
                             </div>
@@ -66,7 +66,7 @@
                     </div>
                 </ContentPanel>
 
-                <ContentPanel @title={{t "fleet-ops.component.modals.vehicle-details.avatar"}} @open={{false}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                <ContentPanel @title={{t "modals.vehicle-details.avatar"}} @open={{false}} @panelBodyClass="bg-white dark:bg-gray-800">
                     <div class="grid grid-cols-1 gap-2 text-xs dark:text-gray-100">
                         <div>
                             <Image alt={{@options.vehicle.public_id}} src={{@options.vehicle.avatar_url}} class="w-24 h-24" />
@@ -74,148 +74,148 @@
                     </div>
                 </ContentPanel>
 
-                <ContentPanel @title={{t "fleet-ops.component.modals.vehicle-details.model-information"}} @open={{false}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                <ContentPanel @title={{t "modals.vehicle-details.model-information"}} @open={{false}} @panelBodyClass="bg-white dark:bg-gray-800">
                     <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2">
-                        <div class="field-info-container space-y-2">
-                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.acceleration"}}</div>
+                        <div class="field-info-container">
+                            <div class="field-name">{{t "modals.vehicle-details.acceleration"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_0_to_100_kph}}</div>
                         </div>
 
-                        <div class="field-info-container space-y-2">
-                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.body"}}</div>
+                        <div class="field-info-container">
+                            <div class="field-name">{{t "modals.vehicle-details.body"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_body}}</div>
                         </div>
 
-                        <div class="field-info-container space-y-2">
-                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.doors"}}</div>
+                        <div class="field-info-container">
+                            <div class="field-name">{{t "modals.vehicle-details.doors"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_doors}}</div>
                         </div>
 
-                        <div class="field-info-container space-y-2">
-                            <div class="field-name">{{t "fleet-ops.common.driver"}}</div>
+                        <div class="field-info-container">
+                            <div class="field-name">{{t "common.driver"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_drive}}</div>
                         </div>
 
-                        <div class="field-info-container space-y-2">
-                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.length"}}</div>
+                        <div class="field-info-container">
+                            <div class="field-name">{{t "modals.vehicle-details.length"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_length_mm}}</div>
                         </div>
 
-                        <div class="field-info-container space-y-2">
-                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.seats"}}</div>
+                        <div class="field-info-container">
+                            <div class="field-name">{{t "modals.vehicle-details.seats"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_seats}}</div>
                         </div>
 
-                        <div class="field-info-container space-y-2">
-                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.top-speed"}}</div>
+                        <div class="field-info-container">
+                            <div class="field-name">{{t "modals.vehicle-details.top-speed"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_top_speed_kph}}</div>
                         </div>
 
-                        <div class="field-info-container space-y-2">
-                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.transmission"}}</div>
+                        <div class="field-info-container">
+                            <div class="field-name">{{t "modals.vehicle-details.transmission"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_transmission_type}}</div>
                         </div>
 
-                        <div class="field-info-container space-y-2">
-                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.weight"}}</div>
+                        <div class="field-info-container">
+                            <div class="field-name">{{t "modals.vehicle-details.weight"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_weight_kg}}</div>
                         </div>
 
-                        <div class="field-info-container space-y-2">
-                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.wheelbase"}}</div>
+                        <div class="field-info-container">
+                            <div class="field-name">{{t "modals.vehicle-details.wheelbase"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_wheelbase_mm}}</div>
                         </div>
 
-                        <div class="field-info-container space-y-2">
-                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.width"}}</div>
+                        <div class="field-info-container">
+                            <div class="field-name">{{t "modals.vehicle-details.width"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_width_mm}}</div>
                         </div>
                     </div>
                 </ContentPanel>
 
-                <ContentPanel @title={{t "fleet-ops.component.modals.vehicle-details.engine-information"}} @open={{false}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                <ContentPanel @title={{t "modals.vehicle-details.engine-information"}} @open={{false}} @panelBodyClass="bg-white dark:bg-gray-800">
                     <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2">
-                        <div class="field-info-container space-y-2">
-                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.engine-bore"}}</div>
+                        <div class="field-info-container">
+                            <div class="field-name">{{t "modals.vehicle-details.engine-bore"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_engine_bore_mm}}</div>
                         </div>
 
-                        <div class="field-info-container space-y-2">
-                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.cc"}}</div>
+                        <div class="field-info-container">
+                            <div class="field-name">{{t "modals.vehicle-details.cc"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_engine_cc}}</div>
                         </div>
 
-                        <div class="field-info-container space-y-2">
-                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.compression"}}</div>
+                        <div class="field-info-container">
+                            <div class="field-name">{{t "modals.vehicle-details.compression"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_engine_compression}}</div>
                         </div>
 
-                        <div class="field-info-container space-y-2">
-                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.cylinder"}}</div>
+                        <div class="field-info-container">
+                            <div class="field-name">{{t "modals.vehicle-details.cylinder"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_engine_cyl}}</div>
                         </div>
 
-                        <div class="field-info-container space-y-2">
-                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.position"}}</div>
+                        <div class="field-info-container">
+                            <div class="field-name">{{t "modals.vehicle-details.position"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_engine_position}}</div>
                         </div>
 
-                        <div class="field-info-container space-y-2">
-                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.power-ps"}}</div>
+                        <div class="field-info-container">
+                            <div class="field-name">{{t "modals.vehicle-details.power-ps"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_engine_power_ps}}</div>
                         </div>
 
-                        <div class="field-info-container space-y-2">
-                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.power-rpm"}}</div>
+                        <div class="field-info-container">
+                            <div class="field-name">{{t "modals.vehicle-details.power-rpm"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_engine_power_rpm}}</div>
                         </div>
 
-                        <div class="field-info-container space-y-2">
-                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.stroke"}}</div>
+                        <div class="field-info-container">
+                            <div class="field-name">{{t "modals.vehicle-details.stroke"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_engine_stroke_mm}}</div>
                         </div>
 
-                        <div class="field-info-container space-y-2">
-                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.torque-nm"}}</div>
+                        <div class="field-info-container">
+                            <div class="field-name">{{t "modals.vehicle-details.torque-nm"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_engine_torque_nm}}</div>
                         </div>
 
-                        <div class="field-info-container space-y-2">
-                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.torque-rpm"}}</div>
+                        <div class="field-info-container">
+                            <div class="field-name">{{t "modals.vehicle-details.torque-rpm"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_engine_torque_rpm}}</div>
                         </div>
 
-                        <div class="field-info-container space-y-2">
-                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.valves"}}</div>
+                        <div class="field-info-container">
+                            <div class="field-name">{{t "modals.vehicle-details.valves"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_valves_per_cyl}}</div>
                         </div>
                     </div>
                 </ContentPanel>
 
-                <ContentPanel @title={{t "fleet-ops.component.modals.vehicle-details.fuel-information"}} @open={{false}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                <ContentPanel @title={{t "modals.vehicle-details.fuel-information"}} @open={{false}} @panelBodyClass="bg-white dark:bg-gray-800">
                     <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2">
-                        <div class="field-info-container space-y-2">
-                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.fuel"}}</div>
+                        <div class="field-info-container">
+                            <div class="field-name">{{t "modals.vehicle-details.fuel"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_engine_fuel}}</div>
                         </div>
 
-                        <div class="field-info-container space-y-2">
-                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.fuel-cap"}}</div>
+                        <div class="field-info-container">
+                            <div class="field-name">{{t "modals.vehicle-details.fuel-cap"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_fuel_cap_l}}</div>
                         </div>
 
-                        <div class="field-info-container space-y-2">
-                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.liters-city"}}</div>
+                        <div class="field-info-container">
+                            <div class="field-name">{{t "modals.vehicle-details.liters-city"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_lkm_city}}</div>
                         </div>
 
-                        <div class="field-info-container space-y-2">
-                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.liters-highway"}}</div>
+                        <div class="field-info-container">
+                            <div class="field-name">{{t "modals.vehicle-details.liters-highway"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_lkm_hwy}}</div>
                         </div>
 
-                        <div class="field-info-container space-y-2">
-                            <div class="field-name">{{t "fleet-ops.component.modals.vehicle-details.liters-mixed"}}</div>
+                        <div class="field-info-container">
+                            <div class="field-name">{{t "modals.vehicle-details.liters-mixed"}}</div>
                             <div class="field-value">{{n-a @options.vehicle.model_lkm_mixed}}</div>
                         </div>
                     </div>