@fleetbase/fleetops-engine 0.3.3 → 0.3.4

package/addon/components/contact-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">
@@ -17,13 +24,21 @@
             <div class="flex flex-col flex-1 w-3/4">
                 <div class="flex flex-row">
                     <div class="w-14">
-                        <div class="w-12 h-12 flex items-center justify-start relative hover:bg-gray-100 transition-all rounded-lg overflow-hidden">
-                            <img src={{this.contact.photo_url}} alt={{this.contact.name}} height="48" width="48" class="h-12 w-12 rounded-lg shadow-sm" />
+                        <div class="upload-avatar-overlay w-12 h-12 flex items-center justify-start rounded-lg">
+                            <img src={{this.contact.photo_url}} alt={{this.contact.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.contact.public_id}} />
                             </Attach::Tooltip>
-                            <div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity bg-gray-600 bg-opacity-50 rounded-lg">
-                                <UploadButton @name="photos" @accept="image/*" @onFileAdded={{this.onUploadNewPhoto}} @icon="upload" @hideButtonText={{true}} @labelClass="upload-avatar-label-overlay" class="w-12 btn-reset" />
+                            <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"
+                                />
                             </div>
                         </div>
                     </div>
@@ -72,7 +87,14 @@
             </InputGroup>
             <InputGroup @name="Type">
                 <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
-                    <PowerSelect @options={{this.contactTypeOptions}} @selected={{this.contact.type}} @onChange={{fn (mut this.contact.type)}} @placeholder="Select contact type" @triggerClass="form-select form-input" as |type|>
+                    <PowerSelect
+                        @options={{this.contactTypeOptions}}
+                        @selected={{this.contact.type}}
+                        @onChange={{fn (mut this.contact.type)}}
+                        @placeholder="Select contact type"
+                        @triggerClass="form-select form-input"
+                        as |type|
+                    >
                         {{smart-humanize type}}
                     </PowerSelect>
                 </div>

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

@@ -109,6 +109,16 @@
                         </PowerSelect>
                     </div>
                 </InputGroup>
+              <InputGroup @name="Coordinates" @wrapperClass="col-span-2">
+                <CoordinatesInput
+                    @value={{this.driver.location}}
+                    @onChange={{this.onCoordinatesChanged}}
+                    @onGeocode={{this.onAutocomplete}}
+                    @onUpdatedFromMap={{this.onCoordinatesChanged}}
+                    @onInit={{this.setCoordinatesInput}}
+                    @renderInPlace={{false}}
+                />
+            </InputGroup>
             </div>
         </div>
     </Overlay::Body>

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

@@ -2,6 +2,7 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
+import Point from '@fleetbase/fleetops-data/utils/geojson/point';
 import contextComponentCallback from '../utils/context-component-callback';
 import applyContextComponentArguments from '../utils/apply-context-component-arguments';
 
@@ -59,6 +60,12 @@ export default class DriverFormPanelComponent extends Component {
      */
     @tracked isLoading = false;
 
+    /**
+     * The coordinates input component instance.
+     * @type {CoordinateInputComponent}
+     */
+    @tracked coordinatesInputComponent;
+
     /**
      * Constructs the component and applies initial state.
      */
@@ -108,6 +115,7 @@ export default class DriverFormPanelComponent extends Component {
                     this.isLoading = false;
                 });
         } catch (error) {
+            this.notifications.error(error.message);
             this.loader.removeLoader('.next-content-overlay-panel-container ');
             this.isLoading = false;
         }
@@ -160,4 +168,47 @@ export default class DriverFormPanelComponent extends Component {
     @action onPressCancel() {
         return contextComponentCallback(this, 'onPressCancel', this.driver);
     }
+
+    /**
+     * 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 DriverFormPanelComponent
+     */
+    @action onAutocomplete({ location }) {
+        if (location) {
+            this.driver.set('location', 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 DriverFormPanelComponent
+     */
+    @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 DriverFormPanelComponent
+     */
+    @action onCoordinatesChanged({ latitude, longitude }) {
+        const location = new Point(longitude, latitude);
+        this.driver.setProperties({ location });
+    }
 }

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

@@ -15,7 +15,7 @@
             </div>
             <div class="field-info-container">
                 <div class="field-name">Drivers License</div>
-                <div class="field-value">{{n-a @driver.drivers_license}}</div>
+                <div class="field-value">{{n-a @driver.drivers_license_number}}</div>
             </div>
             <div class="field-info-container">
                 <div class="field-name">Email</div>
@@ -25,10 +25,6 @@
                 <div class="field-name">Phone</div>
                 <div class="field-value">{{n-a @driver.phone}}</div>
             </div>
-            <div class="field-info-container">
-                <div class="field-name">Current Job</div>
-                <div class="field-value">{{n-a @driver.current_job_id}}</div>
-            </div>
             <div class="field-info-container">
                 <div class="field-name">City</div>
                 <div class="field-value">{{n-a @driver.city}}</div>

package/addon/components/driver-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">
@@ -14,7 +21,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.driver.photo_url}} @fallbackSrc={{config "defaultValues.driverImage"}} alt={{this.driver.name}} height="48" width="48" class="h-12 w-12 rounded-lg shadow-sm" />
+                            <Image
+                                src={{this.driver.photo_url}}
+                                @fallbackSrc={{config "defaultValues.driverImage"}}
+                                alt={{this.driver.name}}
+                                height="48"
+                                width="48"
+                                class="h-12 w-12 rounded-lg shadow-sm"
+                            />
                             <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
                                 <InputInfo @text={{this.driver.name}} />
                             </Attach::Tooltip>
@@ -25,7 +39,11 @@
                         <div class="-mt-1">
                             {{#if this.driver.vehicle}}
                                 <div class="flex flex-row items-center">
-                                    <a href="javascript:;" class="text-sm dark:text-blue-400 text-blue-600 hover:opacity-50" {{on "click" this.onClickDriverVehicle}}>{{this.driver.vehicle.displayName}}</a>
+                                    <a
+                                        href="javascript:;"
+                                        class="text-sm dark:text-blue-400 text-blue-600 hover:opacity-50"
+                                        {{on "click" this.onClickDriverVehicle}}
+                                    >{{this.driver.vehicle.displayName}}</a>
                                 </div>
                             {{else}}
                                 <div class="flex flex-row items-center">

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

@@ -1,5 +1,18 @@
-<Overlay @onLoad={{this.setOverlayContext}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizeble={{or this.isResizable @isResizable}} @width={{or this.width @width "600px"}}>
-    <Overlay::Header @title={{if this.fleet.public_id this.fleet.name "New Fleet"}} @status={{this.fleet.public_id}} @hideStatusDot={{true}} @createdAt={{this.fleet.createdAt}} @titleWrapperClass="leading-5">
+<Overlay
+    @onLoad={{this.setOverlayContext}}
+    @position="right"
+    @noBackdrop={{true}}
+    @fullHeight={{true}}
+    @isResizeble={{or this.isResizable @isResizable}}
+    @width={{or this.width @width "600px"}}
+>
+    <Overlay::Header
+        @title={{if this.fleet.public_id this.fleet.name "New Fleet"}}
+        @status={{this.fleet.public_id}}
+        @hideStatusDot={{true}}
+        @createdAt={{this.fleet.createdAt}}
+        @titleWrapperClass="leading-5"
+    >
         <div class="flex flex-1 justify-end">
             <Button @icon={{if this.fleet.id "save" "check"}} @type="primary" @text={{if this.fleet.id "Save Fleet" "Create Fleet"}} @onClick={{this.save}} @wrapperClass="mr-2" />
             {{#if this.fleet.id}}
@@ -14,23 +27,64 @@
             <div class="flex flex-col text-xs dark:text-gray-100">
                 <InputGroup @name="Fleet Name" @value={{this.fleet.name}} />
                 <InputGroup @name="Parent Fleet" @value={{this.fleet.parent_fleet}}>
-                    <ModelSelect @modelName="fleet" @selectedModel={{this.fleet.parent_fleet}} @placeholder="Select parent fleet to assign fleet to" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn this.updateRelationship "parent_fleet"}} @allowClear={{true}} as |model|>
+                    <ModelSelect
+                        @modelName="fleet"
+                        @selectedModel={{this.fleet.parent_fleet}}
+                        @placeholder="Select parent fleet to assign fleet to"
+                        @triggerClass="form-select form-input"
+                        @infiniteScroll={{false}}
+                        @renderInPlace={{true}}
+                        @onChange={{fn this.updateRelationship "parent_fleet"}}
+                        @allowClear={{true}}
+                        as |model|
+                    >
                         {{model.name}}
                     </ModelSelect>
                 </InputGroup>
                 <InputGroup @name="Vendor" @value={{this.fleet.vendor}}>
-                    <ModelSelect @modelName="vendor" @selectedModel={{this.fleet.vendor}} @placeholder="Select vendor to assign fleet to" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn this.updateRelationship "vendor"}} @allowClear={{true}} as |model|>
+                    <ModelSelect
+                        @modelName="vendor"
+                        @selectedModel={{this.fleet.vendor}}
+                        @placeholder="Select vendor to assign fleet to"
+                        @triggerClass="form-select form-input"
+                        @infiniteScroll={{false}}
+                        @renderInPlace={{true}}
+                        @onChange={{fn this.updateRelationship "vendor"}}
+                        @allowClear={{true}}
+                        as |model|
+                    >
                         {{model.name}}
                     </ModelSelect>
                 </InputGroup>
                 <InputGroup @name="Assign to Service Area" @value={{this.fleet.service_area}}>
-                    <ModelSelect @modelName="service-area" @selectedModel={{this.fleet.service_area}} @placeholder="Select service area to assign fleet to" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn this.updateRelationship "service_area"}} @allowClear={{true}} as |model|>
+                    <ModelSelect
+                        @modelName="service-area"
+                        @selectedModel={{this.fleet.service_area}}
+                        @placeholder="Select service area to assign fleet to"
+                        @triggerClass="form-select form-input"
+                        @infiniteScroll={{false}}
+                        @renderInPlace={{true}}
+                        @onChange={{fn this.updateRelationship "service_area"}}
+                        @allowClear={{true}}
+                        as |model|
+                    >
                         {{model.name}}
                     </ModelSelect>
                 </InputGroup>
                 {{#if this.fleet.service_area}}
                     <InputGroup @name="Assign to Zone" @value={{this.fleet.zone}}>
-                        <ModelSelect @modelName="zone" @selectedModel={{this.fleet.zone}} @query={{hash service_area_uuid=this.fleet.service_area.id}} @placeholder="Select zone to assign fleet to" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn this.updateRelationship "zone"}} @allowClear={{true}} as |model|>
+                        <ModelSelect
+                            @modelName="zone"
+                            @selectedModel={{this.fleet.zone}}
+                            @query={{hash service_area_uuid=this.fleet.service_area.id}}
+                            @placeholder="Select zone to assign fleet to"
+                            @triggerClass="form-select form-input"
+                            @infiniteScroll={{false}}
+                            @renderInPlace={{true}}
+                            @onChange={{fn this.updateRelationship "zone"}}
+                            @allowClear={{true}}
+                            as |model|
+                        >
                             {{model.name}}
                         </ModelSelect>
                     </InputGroup>

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

@@ -7,7 +7,7 @@
             </div>
             <div class="field-info-container">
                 <div class="field-name">Service Area</div>
-                <div class="field-value">{{n-a @fleet.serviceArea.name}}</div>
+                <div class="field-value">{{n-a @fleet.service_area.name}}</div>
             </div>
             <div class="field-info-container">
                 <div class="field-name">Zone</div>

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

@@ -1,7 +1,26 @@
-<Overlay @onLoad={{this.setOverlayContext}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizeble={{or this.isResizable @isResizable}} @width={{or this.width @width "600px"}}>
-    <Overlay::Header @title={{if this.fuelReport.public_id this.fuelReport.name "New Fuel Report"}} @status={{this.fuelReport.public_id}} @hideStatusDot={{true}} @createdAt={{this.fuelReport.createdAt}} @titleWrapperClass="leading-5">
+<Overlay
+    @onLoad={{this.setOverlayContext}}
+    @position="right"
+    @noBackdrop={{true}}
+    @fullHeight={{true}}
+    @isResizeble={{or this.isResizable @isResizable}}
+    @width={{or this.width @width "600px"}}
+>
+    <Overlay::Header
+        @title={{if this.fuelReport.public_id this.fuelReport.name "New Fuel Report"}}
+        @status={{this.fuelReport.public_id}}
+        @hideStatusDot={{true}}
+        @createdAt={{this.fuelReport.createdAt}}
+        @titleWrapperClass="leading-5"
+    >
         <div class="flex flex-1 justify-end">
-            <Button @icon={{if this.fuelReport.id "save" "check"}} @type="primary" @text={{if this.fuelReport.id "Save Fuel Report" "Create Fuel Report"}} @onClick={{this.save}} @wrapperClass="mr-2" />
+            <Button
+                @icon={{if this.fuelReport.id "save" "check"}}
+                @type="primary"
+                @text={{if this.fuelReport.id "Save Fuel Report" "Create Fuel Report"}}
+                @onClick={{this.save}}
+                @wrapperClass="mr-2"
+            />
             {{#if this.fuelReport.id}}
                 <Button @type="default" @icon="gas-pump" @helpText="View fuel report details" @onClick={{this.onViewDetails}} @wrapperClass="mr-2" />
             {{/if}}
@@ -12,26 +31,83 @@
     <Overlay::Body @wrapperClass="new-service-rate-overlay-body px-4 space-y-4 pt-4" @increaseInnerBodyHeightBy={{1000}}>
         <div class="grid grid-cols-1 text-xs dark:text-gray-100">
             <InputGroup @name="Reporter">
-                <ModelSelect @modelName="user" @selectedModel={{this.fuelReport.reporter}} @placeholder="Select Reporter" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut this.fuelReport.reporter)}} @onChangeId={{fn (mut this.fuelReport.reported_by_uuid)}} as |model|>
+                <ModelSelect
+                    @modelName="user"
+                    @selectedModel={{this.fuelReport.reporter}}
+                    @placeholder="Select Reporter"
+                    @triggerClass="form-select form-input"
+                    @infiniteScroll={{false}}
+                    @renderInPlace={{true}}
+                    @onChange={{fn (mut this.fuelReport.reporter)}}
+                    @onChangeId={{fn (mut this.fuelReport.reported_by_uuid)}}
+                    as |model|
+                >
                     {{model.name}}
                 </ModelSelect>
             </InputGroup>
             <InputGroup @name="Driver">
-                <ModelSelect @modelName="driver" @selectedModel={{this.fuelReport.driver}} @placeholder="Select Driver" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut this.fuelReport.driver)}} @onChangeId={{fn (mut this.fuelReport.driver_uuid)}} as |model|>
+                <ModelSelect
+                    @modelName="driver"
+                    @selectedModel={{this.fuelReport.driver}}
+                    @placeholder="Select Driver"
+                    @triggerClass="form-select form-input"
+                    @infiniteScroll={{false}}
+                    @renderInPlace={{true}}
+                    @onChange={{fn (mut this.fuelReport.driver)}}
+                    @onChangeId={{fn (mut this.fuelReport.driver_uuid)}}
+                    as |model|
+                >
                     {{model.name}}
                 </ModelSelect>
             </InputGroup>
             <InputGroup @name="Vehicle">
-                <ModelSelect @modelName="vehicle" @selectedModel={{this.fuelReport.vehicle}} @placeholder="Select Vehicle" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut this.fuelReport.vehicle)}} @onChangeId={{fn (mut this.fuelReport.vehicle_uuid)}} as |model|>
+                <ModelSelect
+                    @modelName="vehicle"
+                    @selectedModel={{this.fuelReport.vehicle}}
+                    @placeholder="Select Vehicle"
+                    @triggerClass="form-select form-input"
+                    @infiniteScroll={{false}}
+                    @renderInPlace={{true}}
+                    @onChange={{fn (mut this.fuelReport.vehicle)}}
+                    @onChangeId={{fn (mut this.fuelReport.vehicle_uuid)}}
+                    as |model|
+                >
                     {{model.display_name}}
                 </ModelSelect>
             </InputGroup>
+            <InputGroup @name="Status">
+                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                    <PowerSelect
+                        @options={{this.statusOptions}}
+                        @selected={{this.fuelReport.status}}
+                        @onChange={{fn (mut this.fuelReport.status)}}
+                        @placeholder="Select fuel-report status"
+                        @triggerClass="form-select form-input"
+                        as |status|
+                    >
+                        {{smart-humanize status}}
+                    </PowerSelect>
+                </div>
+            </InputGroup>
             <InputGroup @name="Odometer" @type="number" @value={{this.fuelReport.odometer}} />
             <InputGroup @name="Cost">
-                <MoneyInput class="w-full" @value={{this.fuelReport.amount}} @currency={{this.fuelReport.currency}} @canSelectCurrency={{true}} @onCurrencyChange={{fn (mut this.fuelReport.currency)}} />
+                <MoneyInput
+                    class="w-full"
+                    @value={{this.fuelReport.amount}}
+                    @currency={{this.fuelReport.currency}}
+                    @canSelectCurrency={{true}}
+                    @onCurrencyChange={{fn (mut this.fuelReport.currency)}}
+                />
             </InputGroup>
             <InputGroup @name="Volume" @helpText="Select the metric unit and volume of fuel to report." @wrapperClass="w-full">
-                <UnitInput class="w-full" @measurement="volume" @value={{this.fuelReport.volume}} @unit={{this.fuelReport.metric_unit}} @canSelectUnit={{true}} @onUnitChange={{fn (mut this.fuelReport.metric_unit)}} />
+                <UnitInput
+                    class="w-full"
+                    @measurement="volume"
+                    @value={{this.fuelReport.volume}}
+                    @unit={{this.fuelReport.metric_unit}}
+                    @canSelectUnit={{true}}
+                    @onUnitChange={{fn (mut this.fuelReport.metric_unit)}}
+                />
             </InputGroup>
             <InputGroup @name="Coordinates">
                 <CoordinatesInput @value={{this.fuelReport.location}} @onChange={{fn (mut this.fuelReport.location)}} />

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

@@ -43,6 +43,12 @@ export default class FuelReportFormPanelComponent extends Component {
      */
     @tracked isLoading = false;
 
+    /**
+     * Fuel Report status
+     * @type {Array}
+     */
+    @tracked statusOptions = ['draft', 'pending-approval', 'approved', 'rejected', 'revised', 'submitted', 'in-review', 'confirmed', 'processed', 'archived', 'cancelled'];
+
     /**
      * Constructs the component and applies initial state.
      */

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

@@ -1,6 +1,10 @@
 <div class="p-4">
     <ContentPanel @title="Details" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-900">
         <div class="grid grid-cols-2 gap-2 text-xs md:mb-6 dark:text-gray-100">
+            <div class="field-info-container">
+                <div class="field-name">ID</div>
+                <div class="field-value">{{n-a @fuelReport.public_id}}</div>
+            </div>
             <div class="field-info-container col-span-2">
                 <div class="field-name">Reporter</div>
                 <div class="field-value">{{n-a @fuelReport.reporter_name}}</div>

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

@@ -1,5 +1,18 @@
-<Overlay @onLoad={{this.setOverlayContext}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizable={{or this.isResizable @isResizable}} @width={{or this.width @width "600px"}}>
-    <Overlay::Header @title={{if this.issue.public_id this.issue.name "New Issue"}} @status={{this.issue.public_id}} @hideStatusDot={{true}} @createdAt={{this.issue.createdAt}} @titleWrapperClass="leading-5">
+<Overlay
+    @onLoad={{this.setOverlayContext}}
+    @position="right"
+    @noBackdrop={{true}}
+    @fullHeight={{true}}
+    @isResizable={{or this.isResizable @isResizable}}
+    @width={{or this.width @width "600px"}}
+>
+    <Overlay::Header
+        @title={{if this.issue.public_id this.issue.name "New Issue"}}
+        @status={{this.issue.public_id}}
+        @hideStatusDot={{true}}
+        @createdAt={{this.issue.createdAt}}
+        @titleWrapperClass="leading-5"
+    >
         <div class="flex flex-1 justify-end">
             <Button @icon={{if this.issue.id "save" "check"}} @type="primary" @text={{if this.issue.id "Save Issue" "Create Issue"}} @onClick={{this.save}} @wrapperClass="mr-2" />
             {{#if this.issue.id}}
@@ -12,32 +25,77 @@
     <Overlay::Body @wrapperClass="new-service-rate-overlay-body px-4 pt-4" @increaseInnerBodyHeightBy={{1000}}>
         <div class="grid grid-cols-1 text-xs dark:text-gray-100">
             <InputGroup @name="Reported By">
-                <ModelSelect @modelName="user" @selectedModel={{this.issue.reporter}} @placeholder="Select Reporter" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut this.issue.reporter)}} @onChangeId={{fn (mut this.issue.reported_by_uuid)}} as |model|>
+                <ModelSelect
+                    @modelName="user"
+                    @selectedModel={{this.issue.reporter}}
+                    @placeholder="Select Reporter"
+                    @triggerClass="form-select form-input"
+                    @infiniteScroll={{false}}
+                    @renderInPlace={{true}}
+                    @onChange={{fn (mut this.issue.reporter)}}
+                    @onChangeId={{fn (mut this.issue.reported_by_uuid)}}
+                    as |model|
+                >
                     {{model.name}}
                 </ModelSelect>
             </InputGroup>
 
             <InputGroup @name="Assigned To">
-                <ModelSelect @modelName="user" @selectedModel={{this.issue.assignee}} @placeholder="Select Assignee" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut this.issue.assignee)}} @onChangeId={{fn (mut this.issue.assigned_to_uuid)}} as |model|>
+                <ModelSelect
+                    @modelName="user"
+                    @selectedModel={{this.issue.assignee}}
+                    @placeholder="Select Assignee"
+                    @triggerClass="form-select form-input"
+                    @infiniteScroll={{false}}
+                    @renderInPlace={{true}}
+                    @onChange={{fn (mut this.issue.assignee)}}
+                    @onChangeId={{fn (mut this.issue.assigned_to_uuid)}}
+                    as |model|
+                >
                     {{model.name}}
                 </ModelSelect>
             </InputGroup>
 
             <InputGroup @name="Driver">
-                <ModelSelect @modelName="driver" @selectedModel={{this.issue.driver}} @placeholder="Select Driver" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut this.issue.driver)}} as |model|>
+                <ModelSelect
+                    @modelName="driver"
+                    @selectedModel={{this.issue.driver}}
+                    @placeholder="Select Driver"
+                    @triggerClass="form-select form-input"
+                    @infiniteScroll={{false}}
+                    @renderInPlace={{true}}
+                    @onChange={{fn (mut this.issue.driver)}}
+                    as |model|
+                >
                     {{model.name}}
                 </ModelSelect>
             </InputGroup>
 
             <InputGroup @name="Vehicle">
-                <ModelSelect @modelName="vehicle" @selectedModel={{this.issue.vehicle}} @placeholder="Select Vehicle" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut this.issue.vehicle)}} as |model|>
+                <ModelSelect
+                    @modelName="vehicle"
+                    @selectedModel={{this.issue.vehicle}}
+                    @placeholder="Select Vehicle"
+                    @triggerClass="form-select form-input"
+                    @infiniteScroll={{false}}
+                    @renderInPlace={{true}}
+                    @onChange={{fn (mut this.issue.vehicle)}}
+                    as |model|
+                >
                     {{model.displayName}}
                 </ModelSelect>
             </InputGroup>
 
             <InputGroup @name="Issue Type">
                 <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
-                    <PowerSelect @options={{this.issueTypes}} @selected={{this.issue.type}} @onChange={{this.onSelectIssueType}} @placeholder="Select issue type" @triggerClass="form-select form-input" as |type|>
+                    <PowerSelect
+                        @options={{this.issueTypes}}
+                        @selected={{this.issue.type}}
+                        @onChange={{this.onSelectIssueType}}
+                        @placeholder="Select issue type"
+                        @triggerClass="form-select form-input"
+                        as |type|
+                    >
                         {{smart-humanize type}}
                     </PowerSelect>
                 </div>
@@ -45,7 +103,15 @@
 
             <InputGroup @name="Issue Category">
                 <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
-                    <PowerSelect @options={{this.issueCategories}} @selected={{this.issue.category}} @onChange={{fn (mut this.issue.category)}} @placeholder="Select issue category" @triggerClass="form-select form-input" @disabled={{not this.issueCategories}} as |category|>
+                    <PowerSelect
+                        @options={{this.issueCategories}}
+                        @selected={{this.issue.category}}
+                        @onChange={{fn (mut this.issue.category)}}
+                        @placeholder="Select issue category"
+                        @triggerClass="form-select form-input"
+                        @disabled={{not this.issueCategories}}
+                        as |category|
+                    >
                         {{smart-humanize category}}
                     </PowerSelect>
                 </div>
@@ -56,14 +122,29 @@
             </InputGroup>
 
             <InputGroup @name="Issue Tags">
-                <TagInput class="form-input" @placeholder="Add tags" @allowSpacesInTags={{true}} @tags={{this.issue.tags}} @addTag={{this.addTag}} @removeTagAtIndex={{this.removeTag}} as |tag|>
+                <TagInput
+                    class="form-input"
+                    @placeholder="Add tags"
+                    @allowSpacesInTags={{true}}
+                    @tags={{this.issue.tags}}
+                    @addTag={{this.addTag}}
+                    @removeTagAtIndex={{this.removeTag}}
+                    as |tag|
+                >
                     {{tag}}
                 </TagInput>
             </InputGroup>
 
             <InputGroup @name="Issue Priority">
                 <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
-                    <PowerSelect @options={{this.issuePriorityOptions}} @selected={{this.issue.priority}} @onChange={{fn (mut this.issue.priority)}} @placeholder="Select issue priority" @triggerClass="form-select form-input" as |priority|>
+                    <PowerSelect
+                        @options={{this.issuePriorityOptions}}
+                        @selected={{this.issue.priority}}
+                        @onChange={{fn (mut this.issue.priority)}}
+                        @placeholder="Select issue priority"
+                        @triggerClass="form-select form-input"
+                        as |priority|
+                    >
                         {{smart-humanize priority}}
                     </PowerSelect>
                 </div>
@@ -71,7 +152,14 @@
 
             <InputGroup @name="Status">
                 <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
-                    <PowerSelect @options={{this.issueStatusOptions}} @selected={{this.issue.status}} @onChange={{fn (mut this.issue.status)}} @placeholder="Select issue status" @triggerClass="form-select form-input" as |status|>
+                    <PowerSelect
+                        @options={{this.issueStatusOptions}}
+                        @selected={{this.issue.status}}
+                        @onChange={{fn (mut this.issue.status)}}
+                        @placeholder="Select issue status"
+                        @triggerClass="form-select form-input"
+                        as |status|
+                    >
                         {{smart-humanize status}}
                     </PowerSelect>
                 </div>