@fleetbase/fleetops-engine 0.3.2 → 0.3.4

package/addon/components/order/schedule-card.js

@@ -1,17 +1,174 @@
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
+import { isBlank } from '@ember/utils';
+import { inject as service } from '@ember/service';
 
+/**
+ * Component representing the schedule card of an order.
+ * @extends Component
+ * @memberof OrderScheduleCardComponent
+ */
 export default class OrderScheduleCardComponent extends Component {
-    @action setupComponent() {
-        const { order } = this.args;
+    /**
+     * Service for managing the context panel.
+     * @service
+     * @memberof OrderScheduleCardComponent
+     */
+    @service contextPanel;
 
-        order?.loadDriver();
-        order?.loadPayload();
+    /**
+     * Service for managing modals.
+     * @service
+     * @memberof OrderScheduleCardComponent
+     */
+    @service modalsManager;
+
+    /**
+     * Service for managing notifications.
+     * @service
+     * @memberof OrderScheduleCardComponent
+     */
+    @service notifications;
+
+    /**
+     * Indicates if a driver is currently being assigned.
+     * @tracked
+     * @memberof OrderScheduleCardComponent
+     */
+    @tracked isAssigningDriver;
+
+    /**
+     * Constructor for OrderScheduleCardComponent.
+     * @param {Object} owner - The owner of the component.
+     * @param {Object} args - Arguments passed to the component, including the order.
+     */
+    constructor(owner, { order }) {
+        super(...arguments);
+        this.loadDriverFromOrder(order);
+        this.loadPayloadFromOrder(order);
+    }
+
+    /**
+     * Action to handle driver click events.
+     * @action
+     * @param {DriverModel} driver - The clicked driver object.
+     * @memberof OrderScheduleCardComponent
+     */
+    @action onClickDriver(driver) {
+        this.contextPanel.focus(driver);
+    }
+
+    /**
+     * Action to handle vehicle click events.
+     * @action
+     * @param {VehicleModel} vehicle - The clicked vehicle object.
+     * @memberof OrderScheduleCardComponent
+     */
+    @action onClickVehicle(vehicle) {
+        this.contextPanel.focus(vehicle);
+    }
+
+    /**
+     * Action to start the process of assigning a driver.
+     * @action
+     * @memberof OrderScheduleCardComponent
+     */
+    @action startAssignDriver() {
+        this.isAssigningDriver = true;
+    }
+
+    /**
+     * Action to assign a driver to an order.
+     * @action
+     * @param {DriverModel} driver - The driver to be assigned.
+     * @memberof OrderScheduleCardComponent
+     */
+    @action assignDriver(driver) {
+        const order = this.args.order;
+
+        if (isBlank(driver)) {
+            return this.modalsManager.confirm({
+                title: 'Unassign Driver?',
+                body: `You are about to unassign the driver for Order ${order.public_id}. Click continue to confirm removal of driver.`,
+                acceptButtonText: 'Continue and unassign driver',
+                confirm: () => {
+                    order.setProperties({
+                        driver_assigned: null,
+                        driver_assigned_uuid: null,
+                    });
+
+                    return order
+                        .save()
+                        .catch((error) => {
+                            this.notifications.serverError(error);
+                        })
+                        .finally(() => {
+                            this.isAssigningDriver = false;
+                        });
+                },
+                decline: (modal) => {
+                    this.isAssigningDriver = false;
+                    modal.done();
+                },
+            });
+        }
+
+        return this.modalsManager.confirm({
+            title: 'Assign New Driver?',
+            body: `You are about to assign a new driver (${driver.name}) to Order ${order.public_id}. Click continue to confirm driver.`,
+            acceptButtonText: 'Continue and assign driver',
+            confirm: () => {
+                order.set('driver_assigned_uuid', driver.id);
+                return order
+                    .save()
+                    .catch((error) => {
+                        this.notifications.serverError(error);
+                    })
+                    .finally(() => {
+                        this.isAssigningDriver = false;
+                    });
+            },
+            decline: (modal) => {
+                this.isAssigningDriver = false;
+                modal.done();
+            },
+        });
     }
 
+    /**
+     * Action triggered when the title of an order is clicked.
+     * @action
+     * @param {OrderModel} order - The order associated with the clicked title.
+     * @memberof OrderScheduleCardComponent
+     */
     @action onTitleClick(order) {
-        if (typeof this.args.onTitleClick === 'function') {
-            this.args.onTitleClick(order);
+        const { onTitleClick } = this.args;
+
+        if (typeof onTitleClick === 'function') {
+            onTitleClick(order);
+        }
+    }
+
+    /**
+     * Loads the driver information from the order.
+     * @param {OrderModel} order - The order to load the driver from.
+     * @memberof OrderScheduleCardComponent
+     */
+    loadDriverFromOrder(order) {
+        if (order && typeof order.loadDriver === 'function') {
+            order.loadDriver();
+        }
+    }
+
+    /**
+     * Loads the payload information from the order.
+     * @param {OrderModel} order - The order to load the payload from.
+     * @memberof OrderScheduleCardComponent
+     */
+    loadPayloadFromOrder(order) {
+        if (order && typeof order.loadPayload === 'function') {
+            order.loadPayload();
         }
     }
 }

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

@@ -6,7 +6,13 @@
     @isResizeble={{or this.isResizable @isResizable}}
     @width={{or this.width @width "600px"}}
 >
-    <Overlay::Header @title={{if this.place.public_id this.place.name "New Place"}} @status={{this.place.public_id}} @hideStatusDot={{true}} @createdAt={{this.place.createdAt}} @titleWrapperClass="leading-5">
+    <Overlay::Header
+        @title={{if this.place.public_id this.place.name "New Place"}}
+        @status={{this.place.public_id}}
+        @hideStatusDot={{true}}
+        @createdAt={{this.place.createdAt}}
+        @titleWrapperClass="leading-5"
+    >
         <div class="flex flex-1 justify-end">
             <Button @icon={{if this.place.id "save" "check"}} @type="primary" @text={{if this.place.id "Save Place" "Create Place"}} @onClick={{this.save}} @wrapperClass="mr-2" />
             <Button @type="default" @icon="times" @helpText={{if this.place.id "Cancel edit place" "Cancel new place"}} @onClick={{this.onPressCancel}} />
@@ -15,9 +21,11 @@
 
     <Overlay::Body @wrapperClass="new-service-rate-overlay-body px-4 space-y-4 pt-4" @increaseInnerBodyHeightBy={{1000}}>
         <div class="grid grid-cols-3 gap-1 text-xs dark:text-gray-100">
-            <InputGroup @name="Name" @autocomplete="nope" @value={{this.place.name}} @wrapperClass="col-span-3" />
+            <InputGroup @name="Name" @wrapperClass="col-span-2">
+                <Input @value={{this.place.name}} @type="text" class="w-full form-input" placeholder="Name" />
+            </InputGroup>
             <InputGroup @name="Street 1" @value={{this.place.street1}} @wrapperClass="col-span-3">
-                <AutocompleteInput @value={{this.place.street1}} @fetchUrl="places/lookup" @onSelect={{this.autocomplete}} placeholder="Street 1" class="w-full" as |result|>
+                <AutocompleteInput @value={{this.place.street1}} @fetchUrl="places/lookup" @onSelect={{this.onAutocomplete}} placeholder="Street 1" class="w-full" as |result|>
                     {{result.address}}
                 </AutocompleteInput>
             </InputGroup>
@@ -29,14 +37,14 @@
             <InputGroup @name="City" @autocomplete="nope" @value={{this.place.city}} />
             <InputGroup @name="State" @autocomplete="nope" @value={{this.place.province}} />
             <InputGroup @name="Country" @wrapperClass="col-span-2">
-                <CountrySelect class="w-full form-input form-select form-datalist" @value={{this.place.country}} @onChange={{this.place.country}} placeholder="Country" />
+                <CountrySelect class="w-full form-input form-select form-datalist" @value={{this.place.country}} @onChange={{fn (mut this.place.country)}} placeholder="Country" />
             </InputGroup>
             <InputGroup @name="Coordinates" @wrapperClass="col-span-2">
                 <CoordinatesInput
                     @value={{this.place.location}}
                     @onChange={{this.updatePlaceCoordinates}}
-                    @onGeocode={{this.autocomplete}}
-                    @onUpdatedFromMap={{this.reverseGeocode}}
+                    @onGeocode={{this.onAutocomplete}}
+                    @onUpdatedFromMap={{this.onReverseGeocode}}
                     @onInit={{this.setCoordinatesInput}}
                 />
             </InputGroup>
@@ -44,7 +52,6 @@
             <InputGroup @name="Phone">
                 <PhoneInput @value={{this.place.phone}} @autocomplete="nope" @onInput={{this.phone}} class="form-input w-full" />
             </InputGroup>
-            <InputGroup @name="Email" @autocomplete="nope" @value={{this.place.email}} />
         </div>
     </Overlay::Body>
 </Overlay>

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

@@ -2,6 +2,8 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
+import { isBlank } from '@ember/utils';
+import Point from '@fleetbase/fleetops-data/utils/geojson/point';
 import contextComponentCallback from '../utils/context-component-callback';
 import applyContextComponentArguments from '../utils/apply-context-component-arguments';
 
@@ -48,6 +50,12 @@ export default class PlaceFormPanelComponent extends Component {
      */
     @tracked isLoading = false;
 
+    /**
+     * The coordinates input component instance.
+     * @type {CoordinateInputComponent}
+     */
+    @tracked coordinatesInputComponent;
+
     /**
      * All possible place types
      *
@@ -131,4 +139,67 @@ export default class PlaceFormPanelComponent extends Component {
     @action onPressCancel() {
         return contextComponentCallback(this, 'onPressCancel', this.place);
     }
+
+    /**
+     * Handles the selection from an autocomplete. Updates the place properties with the selected data.
+     * If a coordinates input component is present, updates its coordinates too.
+     *
+     * @action
+     * @param {Object} selected - The selected item from the autocomplete.
+     * @param {Object} selected.location - The location data of the selected item.
+     * @memberof PlaceFormPanelComponent
+     */
+    @action onAutocomplete(selected) {
+        this.place.setProperties({ ...selected });
+
+        if (this.coordinatesInputComponent) {
+            this.coordinatesInputComponent.updateCoordinates(selected.location);
+        }
+    }
+
+    /**
+     * Performs reverse geocoding given latitude and longitude. Updates place properties with the geocoding result.
+     *
+     * @action
+     * @param {Object} coordinates - The latitude and longitude coordinates.
+     * @param {number} coordinates.latitude - Latitude value.
+     * @param {number} coordinates.longitude - Longitude value.
+     * @returns {Promise} A promise that resolves with the reverse geocoding result.
+     * @memberof PlaceFormPanelComponent
+     */
+    @action onReverseGeocode({ latitude, longitude }) {
+        return this.fetch.get('geocoder/reverse', { coordinates: [latitude, longitude].join(','), single: true }).then((result) => {
+            if (isBlank(result)) {
+                return;
+            }
+
+            this.place.setProperties({ ...result });
+        });
+    }
+
+    /**
+     * Sets the coordinates input component.
+     *
+     * @action
+     * @param {Object} coordinatesInputComponent - The coordinates input component to be set.
+     * @memberof PlaceFormPanelComponent
+     */
+    @action setCoordinatesInput(coordinatesInputComponent) {
+        this.coordinatesInputComponent = coordinatesInputComponent;
+    }
+
+    /**
+     * Updates the place coordinates with the given latitude and longitude.
+     *
+     * @action
+     * @param {Object} coordinates - The latitude and longitude coordinates.
+     * @param {number} coordinates.latitude - Latitude value.
+     * @param {number} coordinates.longitude - Longitude value.
+     * @memberof PlaceFormPanelComponent
+     */
+    @action updatePlaceCoordinates({ latitude, longitude }) {
+        const location = new Point(longitude, latitude);
+
+        this.place.setProperties({ location });
+    }
 }

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

@@ -1,8 +1,16 @@
 <div class="p-4 space-y-4">
-    <ContentPanel @title="Map" @open={{true}}>
-        <LeafletMap class="w-full h-48 rounded-b-md shadow-md" @lat={{@place.latitude}} @lng={{@place.longitude}} @zoom={{17}} as |layers|>
+    <ContentPanel @title="Map" @open={{false}}>
+        <LeafletMap class="w-full h-48 rounded-b-md shadow-md" @lat={{@place.latitude}} @lng={{@place.longitude}} @zoom={{17}} @zoomControl={{false}} as |layers|>
             <layers.tile @url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png" />
-            <layers.marker @id={{@place.id}} @icon={{icon iconUrl="/engines-dist/images/building-marker.png" iconSize=(array 16 16)}} @location={{point-to-coordinates @place.location}} @riseOnHover={{true}} @title={{@place.address}} @alt={{@place.address}} as |marker|>
+            <layers.marker
+                @id={{@place.id}}
+                @icon={{icon iconUrl="/engines-dist/images/building-marker.png" iconSize=(array 16 16)}}
+                @location={{point-to-coordinates @place.location}}
+                @riseOnHover={{true}}
+                @title={{@place.address}}
+                @alt={{@place.address}}
+                as |marker|
+            >
                 <marker.popup>
                     <div>{{@place.address}}</div>
                     <div>{{format-point @place.location}}</div>
@@ -60,24 +68,6 @@
                 <div class="field-value">{{n-a @place.phone}}</div>
             </div>
 
-            <div class="field-info-container">
-                <div class="field-name">Email</div>
-                <div class="field-value">{{n-a @place.email}}</div>
-            </div>
-
-            <div class="field-info-container">
-                <div class="field-name">Vendor</div>
-                <div class="field-value">
-                    {{#if @place.vendor_uuid}}
-                        <a href="javascript:;" {{on "click" @place.viewVendor}}>
-                            {{@place.vendor_name}}
-                        </a>
-                    {{else}}
-                        {{@place.vendor_name}}
-                    {{/if}}
-                </div>
-            </div>
-
             <div class="field-info-container col-span-3">
                 <div class="field-name">
                     Coordinates

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

@@ -1,4 +1,11 @@
-<Overlay @onLoad={{this.setOverlayContext}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizeble={{or this.isResizable @isResizable}} @width={{or this.width @width "600px"}}>
+<Overlay
+    @onLoad={{this.setOverlayContext}}
+    @position="right"
+    @noBackdrop={{true}}
+    @fullHeight={{true}}
+    @isResizeble={{or this.isResizable @isResizable}}
+    @width={{or this.width @width "600px"}}
+>
     <Overlay::Header @hideLeftSection={{true}} @actionsWrapperClass="flex-1 flex-col py-3" class="h-auto-i min-h-[127px]">
         <div class="flex flex-row items-center justify-between w-full mb-4">
             <div class="flex flex-1 space-x-2">
@@ -8,9 +15,21 @@
             </div>
             <div class="flex flex-1 justify-end">
                 <div class="mr-2">
-                    <Button @icon={{if this.vehicle.id "save" "check"}} @type="primary" @text={{if this.vehicle.id "Save Vehicle" "Create Vehicle"}} @onClick={{this.save}} @isLoading={{this.isLoading}} />
+                    <Button
+                        @icon={{if this.vehicle.id "save" "check"}}
+                        @type="primary"
+                        @text={{if this.vehicle.id "Save Vehicle" "Create Vehicle"}}
+                        @onClick={{this.save}}
+                        @isLoading={{this.isLoading}}
+                    />
                 </div>
-                <Button @type="default" @icon="times" @helpText={{if this.vehicle.id "Cancel edit vehicle" "Cancel new vehicle"}} @onClick={{this.onPressCancel}} @disabled={{this.isLoading}} />
+                <Button
+                    @type="default"
+                    @icon="times"
+                    @helpText={{if this.vehicle.id "Cancel edit vehicle" "Cancel new vehicle"}}
+                    @onClick={{this.onPressCancel}}
+                    @disabled={{this.isLoading}}
+                />
             </div>
         </div>
         <div class="flex flex-row justify-between w-full">
@@ -23,7 +42,15 @@
                                 <InputInfo @text="Upload new photo" />
                             </Attach::Tooltip>
                             <div class="upload-avatar-button-wrapper rounded-lg">
-                                <UploadButton @name="photos" @accept="image/*" @onFileAdded={{this.onUploadNewPhoto}} @icon="upload" @hideButtonText={{true}} @labelClass="upload-avatar-label-overlay" class="w-12 btn-reset" />
+                                <UploadButton
+                                    @name="photos"
+                                    @accept="image/*"
+                                    @onFileAdded={{this.onUploadNewPhoto}}
+                                    @icon="upload"
+                                    @hideButtonText={{true}}
+                                    @labelClass="upload-avatar-label-overlay"
+                                    class="w-12 btn-reset"
+                                />
                             </div>
                         </div>
                     </div>
@@ -88,18 +115,43 @@
                     </InputGroup>
 
                     <InputGroup @name="Driver Assigned">
-                        <ModelSelect @modelName="driver" @selectedModel={{this.vehicle.driver}} @placeholder="Select Driver" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut this.vehicle.driver)}} as |model|>
+                        <ModelSelect
+                            @modelName="driver"
+                            @selectedModel={{this.vehicle.driver}}
+                            @placeholder="Select Driver"
+                            @triggerClass="form-select form-input"
+                            @infiniteScroll={{false}}
+                            @renderInPlace={{true}}
+                            @onChange={{fn (mut this.vehicle.driver)}}
+                            as |model|
+                        >
                             {{model.name}}
                         </ModelSelect>
                     </InputGroup>
 
                     <InputGroup @name="Status">
                         <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
-                            <PowerSelect @options={{this.vehicleStatusOptions}} @selected={{this.vehicle.status}} @onChange={{fn (mut this.vehicle.status)}} @placeholder="Select vehicle status" @triggerClass="form-select form-input" as |status|>
+                            <PowerSelect
+                                @options={{this.vehicleStatusOptions}}
+                                @selected={{this.vehicle.status}}
+                                @onChange={{fn (mut this.vehicle.status)}}
+                                @placeholder="Select vehicle status"
+                                @triggerClass="form-select form-input"
+                                as |status|
+                            >
                                 {{smart-humanize status}}
                             </PowerSelect>
                         </div>
                     </InputGroup>
+                    <InputGroup @name="Coordinates" @wrapperClass="col-span-2">
+                <CoordinatesInput
+                    @value={{this.vehicle.location}}
+                    @onChange={{this.onCoordinatesChanged}}
+                    @onGeocode={{this.onAutocomplete}}
+                    @onUpdatedFromMap={{this.onCoordinatesChanged}}
+                    @onInit={{this.setCoordinatesInput}}
+                />
+            </InputGroup>
                 </div>
             </ContentPanel>
 
@@ -107,7 +159,15 @@
                 <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2">
                     <div class="input-group mb-2">
                         <InputLabel @labelText="Select map avatar" @helpText="Select an avatar to be used for rendering on maps when using geolocation tracking features." />
-                        <FetchSelect @wrapperClass="w-60" @placeholder="Select avatar" @endpoint="vehicles/avatars" @selected={{this.vehicle.avatar_url}} @optionValue="value" @onChange={{fn (mut this.vehicle.avatar_url)}} as |option|>
+                        <FetchSelect
+                            @wrapperClass="w-60"
+                            @placeholder="Select avatar"
+                            @endpoint="vehicles/avatars"
+                            @selected={{this.vehicle.avatar_url}}
+                            @optionValue="value"
+                            @onChange={{fn (mut this.vehicle.avatar_url)}}
+                            as |option|
+                        >
                             {{titleize (humanize option.key)}}
                         </FetchSelect>
                     </div>

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

@@ -4,6 +4,7 @@ import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 import contextComponentCallback from '../utils/context-component-callback';
 import applyContextComponentArguments from '../utils/apply-context-component-arguments';
+import Point from '@fleetbase/fleetops-data/utils/geojson/point';
 
 export default class VehicleFormPanelComponent extends Component {
     /**
@@ -160,4 +161,40 @@ export default class VehicleFormPanelComponent extends Component {
     @action onPressCancel() {
         return contextComponentCallback(this, 'onPressCancel', this.vehicle);
     }
+
+    @action onAutocomplete({ location }) {
+        if (location) {
+            this.vehicle.setProperties({ location });
+
+            if (this.coordinatesInputComponent) {
+                this.coordinatesInputComponent.updateCoordinates(location);
+            }
+        }
+    }
+
+    /**
+     * Sets the coordinates input component.
+     *
+     * @action
+     * @param {Object} coordinatesInputComponent - The coordinates input component to be set.
+     * @memberof PlaceFormPanelComponent
+     */
+    @action setCoordinatesInput(coordinatesInputComponent) {
+        this.coordinatesInputComponent = coordinatesInputComponent;
+    }
+
+    /**
+     * Updates the Vehicle coordinates with the given latitude and longitude.
+     *
+     * @action
+     * @param {Object} coordinates - The latitude and longitude coordinates.
+     * @param {number} coordinates.latitude - Latitude value.
+     * @param {number} coordinates.longitude - Longitude value.
+     * @memberof PlaceFormPanelComponent
+     */
+    @action onCoordinatesChanged({ latitude, longitude }) {
+        const location = new Point(longitude, latitude);
+
+        this.vehicle.setProperties({ location });
+    }
 }

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

@@ -5,10 +5,6 @@
                 <div class="field-name">Name</div>
                 <div class="field-value">{{n-a @vehicle.display_name}}</div>
             </div>
-            <div class="field-info-container">
-                <div class="field-name">Internal ID</div>
-                <div class="field-value">{{n-a @vehicle.internal_id}}</div>
-            </div>
             <div class="field-info-container">
                 <div class="field-name">Plate Number</div>
                 <div class="field-value">{{n-a @vehicle.plate_number}}</div>
@@ -19,7 +15,7 @@
             </div>
             <div class="field-info-container">
                 <div class="field-name">Make</div>
-                <div class="field-value">{{n-a @vehicle.name}}</div>
+                <div class="field-value">{{n-a @vehicle.make}}</div>
             </div>
             <div class="field-info-container">
                 <div class="field-name">Model</div>
@@ -29,6 +25,14 @@
                 <div class="field-name">Year</div>
                 <div class="field-value">{{n-a @vehicle.year}}</div>
             </div>
+            <div class="field-info-container col-span-3">
+                <div class="field-name">
+                    Coordinates
+                </div>
+                <div class="field-value">
+                    {{point-coordinates @vehicle.location}}
+                </div>
+            </div>
         </div>
     </ContentPanel>
 

package/addon/components/vehicle-panel.hbs

@@ -1,4 +1,11 @@
-<Overlay @onLoad={{this.setOverlayContext}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizable={{or this.isResizable @isResizable}} @width={{or this.width @width "600px"}}>
+<Overlay
+    @onLoad={{this.setOverlayContext}}
+    @position="right"
+    @noBackdrop={{true}}
+    @fullHeight={{true}}
+    @isResizable={{or this.isResizable @isResizable}}
+    @width={{or this.width @width "600px"}}
+>
     <Overlay::Header @hideLeftSection={{true}} @actionsWrapperClass="flex-1 flex-col py-3" class="h-auto-i min-h-[127px]">
         <div class="flex flex-row items-center justify-between w-full mb-4">
             <div class="flex flex-1 space-x-2">
@@ -13,7 +20,14 @@
                 <div class="flex flex-row">
                     <div class="w-14">
                         <div class="w-12 h-12 flex items-center justify-start rounded-lg">
-                            <Image src={{this.vehicle.photo_url}} @fallbackSrc={{config "defaultValues.vehicleImage"}} alt={{this.vehicle.name}} height="48" width="48" class="h-12 w-12 rounded-lg shadow-sm" />
+                            <Image
+                                src={{this.vehicle.photo_url}}
+                                @fallbackSrc={{config "defaultValues.vehicleImage"}}
+                                alt={{this.vehicle.name}}
+                                height="48"
+                                width="48"
+                                class="h-12 w-12 rounded-lg shadow-sm"
+                            />
                             <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
                                 <InputInfo @text={{this.vehicle.displayName}} />
                             </Attach::Tooltip>
@@ -29,7 +43,7 @@
                             {{else}}
                                 <div class="flex flex-row items-center">
                                     <span class="text-sm dark:text-gray-500 text-gray-700 mr-3">No driver assigned</span>
-                                    {{!-- <Button @icon="user-plus" @size="xs" @helpText="Assign a driver to vehicle" /> --}}
+                                    {{! <Button @icon="user-plus" @size="xs" @helpText="Assign a driver to vehicle" /> }}
                                 </div>
                             {{/if}}
                         </div>
@@ -46,7 +60,7 @@
             <div class="ui-tabs mt-4">
                 <nav>
                     {{#each this.tabs as |tab|}}
-                        <a href="javascript:;" class="ui-tab {{if (eq this.tab.slug tab.slug) 'active' }}" {{on "click" (fn this.onTabChanged tab.slug)}}>
+                        <a href="javascript:;" class="ui-tab {{if (eq this.tab.slug tab.slug) 'active'}}" {{on "click" (fn this.onTabChanged tab.slug)}}>
                             <FaIcon @icon={{tab.icon}} class="mr-1" />
                             <span>{{tab.title}}</span>
                         </a>