@fleetbase/fleetops-engine 0.4.12 → 0.4.13

package/addon/components/edit-order-route-panel.js

@@ -3,6 +3,7 @@ import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { isArray } from '@ember/array';
+import { task } from 'ember-concurrency-decorators';
 import contextComponentCallback from '../utils/context-component-callback';
 import applyContextComponentArguments from '../utils/apply-context-component-arguments';
 import getRoutingHost from '@fleetbase/ember-core/utils/get-routing-host';
@@ -87,26 +88,50 @@ export default class EditOrderRoutePanelComponent extends Component {
         contextComponentCallback(this, 'onLoad', ...arguments);
     }
 
-    /**
-     * Handles save action for the order route.
-     *
-     * @method
-     * @action
-     */
-    @action onSave() {
-        const isActionOverrided = contextComponentCallback(this, 'onSave', this.order);
-
-        if (!isActionOverrided) {
-            return this.order
-                .save()
-                .then((order) => {
-                    this.notifications.success(this.intl.t('fleet-ops.operations.orders.index.view.update-success', { orderId: order.public_id }));
-                    contextComponentCallback(this, 'onAfterSave', order);
-                })
-                .catch((error) => {
-                    this.notifications.serverError(error);
-                });
+    @task *save() {
+        const { payload } = this.order;
+
+        yield this.fetch
+            .patch(
+                `orders/route/${this.order.id}`,
+                {
+                    pickup: payload.pickup,
+                    dropoff: payload.dropoff,
+                    return: payload.return,
+                    waypoints: this._serializeWaypoints(payload.waypoints),
+                },
+                {
+                    normalizeToEmberData: true,
+                    normalizeModelType: 'order',
+                }
+            )
+            .then((order) => {
+                this.notifications.success(this.intl.t('fleet-ops.operations.orders.index.view.update-success', { orderId: order.public_id }));
+                contextComponentCallback(this, 'onAfterSave', order);
+            })
+            .catch((error) => {
+                this.notifications.serverError(error);
+            });
+    }
+
+    _serializeWaypoints(waypoints = []) {
+        if (!waypoints) {
+            return [];
         }
+
+        waypoints = typeof waypoints.toArray === 'function' ? waypoints.toArray() : Array.from(waypoints);
+        return waypoints.map((waypoint) => {
+            const json = waypoint.serialize();
+            // if place is serialized just send it back
+            if (json.place) {
+                return json;
+            }
+
+            // set id for place_uuid
+            json.place_uuid = waypoint.place ? waypoint.place.id : waypoint.place_uuid;
+
+            return json;
+        });
     }
 
     /**
@@ -147,26 +172,50 @@ export default class EditOrderRoutePanelComponent extends Component {
             }
 
             this.order.payload.setProperties({
+                pickup: null,
+                dropoff: null,
+                return: null,
                 pickup_uuid: null,
                 dropoff_uuid: null,
+                return_uuid: null,
             });
         } else {
-            const waypoint = this.store.createRecord('waypoint');
-            this.order.payload.waypoints.pushObject(waypoint);
+            // get pickup from payload waypoints if available
+            const waypoints = typeof this.order.payload.waypoints.toArray === 'function' ? this.order.payload.waypoints.toArray() : Array.from(this.order.payload.waypoints);
+
+            if (waypoints[0]) {
+                const pickup = this.createPlaceFromWaypoint(waypoints[0]);
+                this.order.payload.set('pickup', pickup);
+            }
+
+            if (waypoints[1]) {
+                const dropoff = this.createPlaceFromWaypoint(waypoints[1]);
+                this.order.payload.set('dropoff', dropoff);
+            }
 
             this.order.payload.setProperties({
-                pickup_uuid: null,
-                dropoff_uuid: null,
-                pickup: null,
-                dropoff: null,
+                waypoints: [],
             });
         }
 
+        // this.isMultiDrop = isMultiDrop;
         contextComponentCallback(this, 'onRouteChanged');
     }
 
+    createPlaceFromWaypoint(waypoint) {
+        const json = waypoint.serialize();
+        return this.store.createRecord('place', json);
+    }
+
     addWaypointFromExistingPlace(place) {
-        const waypoint = this.store.createRecord('waypoint', { place, location: place.location });
+        const json = place.serialize();
+        const waypoint = this.store.createRecord('waypoint', {
+            uuid: place.id,
+            place_uuid: place.id,
+            location: place.location,
+            place,
+            ...json,
+        });
         this.order.payload.waypoints.pushObject(waypoint);
 
         // fire callback
@@ -196,11 +245,13 @@ export default class EditOrderRoutePanelComponent extends Component {
             return;
         }
 
+        const json = place.serialize();
         this.order.payload.waypoints.objectAt(index).setProperties({
-            name: place.name,
+            uuid: place.id,
             place_uuid: place.id,
             location: place.location,
             place,
+            ...json,
         });
 
         // fire callback waypoint place selected

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

@@ -3,6 +3,6 @@
         <FleetListingPanel @fleet={{subFleet}} @onVehicleClicked={{this.onVehicleClicked}} @depth={{add @depth 1}} @itemDropdownButton={{@itemDropdownButton}} @itemDropdownButtonActions={{@itemDropdownButtonActions}} />
     {{/each}}
     {{#each this.fleet.vehicles as |vehicle|}}
-        <Layout::Sidebar::Item @icon="circle" @iconSize="2xs" @iconClass={{if vehicle.online "text-green-500" "text-yellow-200"}} @onClick={{fn this.onVehicleClicked vehicle}} @rightSideComponent={{@itemRightSideComponent}} @rightSideComponentContext={{@itemRightSideComponentContext}} @rightSideStatus={{@itemRightSideStatus}} @rightSideStatusText={{@itemRightSideStatusText}} @hideRightSideStatusDot={{@itemHideRightSideStatusDot}} @rightSideStatusClass={{@itemRightSideStatusClass}} @disableRightSideStatusHumanize={{@itemDisableRightSideStatusHumanize}} @dropdownButton={{@itemDropdownButton}} @dropdownButtonActions={{@itemDropdownButtonActions}} @dropdownContext={{vehicle}} @dropdownButtonIcon={{@itemDropdownButtonIcon}} @dropdownButtonIconPrefix={{@itemDropdownButtonIconPrefix}} @dropdownButtonText={{@itemDropdownButtonText}} @dropdownButtonCalculatePosition={{@itemDropdownButtonCalculatePosition}} @dropdownButtonRenderInPlace={{@itemDropdownButtonRenderInPlace}} @dropdownButtonMenuLabel={{vehicle.displayName}} @dropdownButtonWrapperClass={{@itemDropdownButtonWrapperClass}} @dropdownButtonTriggerClass={{@itemDropdownButtonTriggerClass}} @registerDropdownButtonAPI={{@itemRegisterDropdownButtonAPI}}>{{vehicle.displayName}}</Layout::Sidebar::Item>
+        <Layout::Sidebar::Item @icon="circle" @iconSize="2xs" @iconClass={{if vehicle.online "text-green-500" "text-yellow-200"}} @onClick={{fn this.onVehicleClicked vehicle}} @rightSideComponent={{@itemRightSideComponent}} @rightSideComponentContext={{@itemRightSideComponentContext}} @rightSideStatus={{@itemRightSideStatus}} @rightSideStatusText={{@itemRightSideStatusText}} @hideRightSideStatusDot={{@itemHideRightSideStatusDot}} @rightSideStatusClass={{@itemRightSideStatusClass}} @disableRightSideStatusHumanize={{@itemDisableRightSideStatusHumanize}} @dropdownButton={{@itemDropdownButton}} @dropdownButtonActions={{@itemDropdownButtonActions}} @dropdownContext={{vehicle}} @dropdownButtonIcon={{@itemDropdownButtonIcon}} @dropdownButtonIconPrefix={{@itemDropdownButtonIconPrefix}} @dropdownButtonText={{@itemDropdownButtonText}} @dropdownButtonCalculatePosition={{@itemDropdownButtonCalculatePosition}} @dropdownButtonMenuLabel={{vehicle.displayName}} @dropdownButtonWrapperClass={{@itemDropdownButtonWrapperClass}} @dropdownButtonTriggerClass={{@itemDropdownButtonTriggerClass}} @registerDropdownButtonAPI={{@itemRegisterDropdownButtonAPI}} @dropdownButtonRenderInPlace={{false}}>{{vehicle.displayName}}</Layout::Sidebar::Item>
     {{/each}}
 </Layout::Sidebar::Panel>

package/addon/components/layout/fleet-ops-sidebar/driver-listing.hbs

@@ -1,5 +1,5 @@
 <Layout::Sidebar::Panel @open={{true}} @title={{@title}} @titleIcon={{@icon}} @hideCaret={{true}} @toggleOnCaretOnly={{true}} @onClickPanelTitle={{this.transitionToRoute}} @wrapperClass="next-driver-listing">
     {{#each this.drivers as |driver|}}
-        <Layout::Sidebar::Item @icon="circle" @iconSize="2xs" @iconClass={{if driver.online "text-green-500" "text-yellow-200"}} @onClick={{fn this.onDriverClicked driver}} class="driver-nav-item" @dropdownButton={{true}} @dropdownButtonActions={{this.dropdownButtonActions}} @dropdownContext={{driver}} @dropdownButtonIcon={{@itemDropdownButtonIcon}} @dropdownButtonIconPrefix={{@itemDropdownButtonIconPrefix}} @dropdownButtonText={{@itemDropdownButtonText}} @dropdownButtonCalculatePosition={{@itemDropdownButtonCalculatePosition}} @dropdownButtonRenderInPlace={{true}} @dropdownButtonMenuLabel={{driver.name}} @dropdownButtonWrapperClass={{@itemDropdownButtonWrapperClass}} @dropdownButtonTriggerClass={{@itemDropdownButtonTriggerClass}} @registerDropdownButtonAPI={{@itemRegisterDropdownButtonAPI}} @rightSideComponent={{@itemRightSideComponent}} @rightSideComponentContext={{@itemRightSideComponentContext}} @rightSideStatus={{@itemRightSideStatus}} @rightSideStatusText={{@itemRightSideStatusText}} @hideRightSideStatusDot={{@itemHideRightSideStatusDot}} @rightSideStatusClass={{@itemRightSideStatusClass}} @disableRightSideStatusHumanize={{@itemDisableRightSideStatusHumanize}}>{{driver.name}}</Layout::Sidebar::Item>
+        <Layout::Sidebar::Item @icon="circle" @iconSize="2xs" @iconClass={{if driver.online "text-green-500" "text-yellow-200"}} @onClick={{fn this.onDriverClicked driver}} class="driver-nav-item" @dropdownButton={{true}} @dropdownButtonActions={{this.dropdownButtonActions}} @dropdownContext={{driver}} @dropdownButtonIcon={{@itemDropdownButtonIcon}} @dropdownButtonIconPrefix={{@itemDropdownButtonIconPrefix}} @dropdownButtonText={{@itemDropdownButtonText}} @dropdownButtonCalculatePosition={{@itemDropdownButtonCalculatePosition}} @dropdownButtonRenderInPlace={{false}} @dropdownButtonMenuLabel={{driver.name}} @dropdownButtonWrapperClass={{@itemDropdownButtonWrapperClass}} @dropdownButtonTriggerClass={{@itemDropdownButtonTriggerClass}} @dropdownHorizontalPosition="left" @registerDropdownButtonAPI={{@itemRegisterDropdownButtonAPI}} @rightSideComponent={{@itemRightSideComponent}} @rightSideComponentContext={{@itemRightSideComponentContext}} @rightSideStatus={{@itemRightSideStatus}} @rightSideStatusText={{@itemRightSideStatusText}} @hideRightSideStatusDot={{@itemHideRightSideStatusDot}} @rightSideStatusClass={{@itemRightSideStatusClass}} @disableRightSideStatusHumanize={{@itemDisableRightSideStatusHumanize}}>{{driver.name}}</Layout::Sidebar::Item>
     {{/each}}
 </Layout::Sidebar::Panel>

package/addon/components/layout/fleet-ops-sidebar.hbs

@@ -27,4 +27,5 @@
     </Layout::Sidebar::Panel>
 {{/each}}
 <Layout::Sidebar::Item @onClick={{this.onClickSettings}} @icon="cogs">{{t "fleet-ops.component.layout.fleet-ops-sidebar.settings"}}</Layout::Sidebar::Item>
-{{yield}}
+{{yield}}
+<Spacer @height="10px" />

package/addon/components/live-map.js

@@ -393,7 +393,6 @@ export default class LiveMapComponent extends Component {
 
         // trigger that initial coordinates is set to livemap component
         this.universe.trigger('fleet-ops.live-map.has_coordinates', { latitude: this.latitude, longitude: this.longitude });
-        return [this.latitude, this.longitude];
     }
 
     /**

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

@@ -7,25 +7,31 @@
     </a>
     <div class="{{@contentClass}} card-content bg-white dark:bg-gray-900 text-sm space-y-2">
         <div class="flex items-center justify-between">
-            <div>
-                <FaIcon @icon="calendar" class="mr-2" />
+            <div class="flex flex-row items-center leading-5">
+                <div class="w-4">
+                    <FaIcon @icon="clock" @size="xs" />
+                </div>
                 <span class="font-semibold">{{t "fleet-ops.component.order.schedule-card.date"}}</span>
             </div>
             <span class={{unless @order.scheduled_at "dark:text-gray-600 text-gray-400"}}>{{n-a @order.scheduledAt "Not Scheduled"}}</span>
         </div>
         <div class="flex items-center justify-between">
-            <div>
-                <FaIcon @icon="calendar" class="mr-2" />
+            <div class="flex flex-row items-center leading-5">
+                <div class="w-4">
+                    <FaIcon @icon="calendar" @size="xs" />
+                </div>
                 <span class="font-semibold">Date created</span>
             </div>
             <span>{{n-a @order.createdAtWithTime}}</span>
         </div>
         <div class="flex items-center justify-between">
             <div class="flex flex-row items-center">
-                <FaIcon @icon="calendar" class="mr-2" />
+                <div class="w-4">
+                    <FaIcon @icon="id-card-alt" @size="xs" />
+                </div>
                 <span class="font-semibold">{{t "fleet-ops.component.order.schedule-card.driver-assigned"}}</span>
-                <div class="ml-2">
-                    <a href="javascript:;" class="text-blue-400 hover:opacity-75" {{on "click" this.startAssignDriver}}>
+                <div class="ml-1">
+                    <a href="javascript:;" class="text-blue-400 text-xs hover:opacity-75" {{on "click" this.startAssignDriver}}>
                         <FaIcon @icon="edit" @size="xs" />
                     </a>
                 </div>
@@ -33,14 +39,9 @@
             <div>
                 {{#if this.isAssigningDriver}}
                     <ModelSelect @modelName="driver" @selectedModel={{@order.driver_assigned}} @placeholder={{t "fleet-ops.component.order.schedule-card.select-driver"}} @triggerClass="form-select form-input form-input-sm w-48" @infiniteScroll={{false}} @renderInPlace={{true}} @allowClear={{true}} @disabled={{@model.isLoading}} @onChange={{this.assignDriver}} as |model|>
-                        <div class="flex items-center">
-                            <div class="w-5">
-                                <FaIcon @icon="id-card-alt" @size="xs" />
-                            </div>
-                            <div class="flex-1 flex flex-row truncate text-xs">
-                                <span class="uppercase mr-1.5 text-xs">{{model.name}}</span>
-                                <span class="uppercase text-xs">{{model.phone}}</span>
-                            </div>
+                        <div class="flex flex-row items-center truncate uppercase">
+                            <span class="uppercase mr-1.5">{{model.name}}</span>
+                            <span class="uppercase">{{model.phone}}</span>
                         </div>
                     </ModelSelect>
                 {{else}}
@@ -49,12 +50,23 @@
             </div>
         </div>
         <div class="flex items-center justify-between">
-            <div class="flex flex-row items-center">
-                <FaIcon @icon="calendar" class="mr-2" />
+            <div class="flex flex-row items-center leading-5">
+                <div class="w-4">
+                    <FaIcon @icon="car" @size="xs" />
+                </div>
                 <span class="font-semibold">{{t "fleet-ops.component.order.schedule-card.vehicle-assigned"}}</span>
             </div>
             <a href="javascript:;" disabled={{not @order.driver_assigned.vehicle}} class={{unless @order.driver_assigned.vehicle_uuid "dark:text-gray-600 text-gray-400"}} {{on "click" (fn this.onClickVehicle @order.driver_assigned.vehicle)}}>{{n-a @order.driver_assigned.vehicle_name (t "fleet-ops.component.order.schedule-card.no-vehicle")}}</a>
         </div>
+        <div class="flex items-center justify-between">
+            <div class="flex flex-row items-center leading-5">
+                <div class="w-4">
+                    <FaIcon @icon="location-dot" @size="xs" />
+                </div>
+                <span class="font-semibold">{{t "fleet-ops.component.order.schedule-card.destination"}}</span>
+            </div>
+            <span>{{n-a @order.pickupName}}</span>
+        </div>
         {{!-- <div class="z-20 relative">
             <RouteList @order={{@order}} />
         </div> --}}

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

@@ -79,7 +79,7 @@ export default class OrderScheduleCardComponent extends Component {
      * @memberof OrderScheduleCardComponent
      */
     @action startAssignDriver() {
-        this.isAssigningDriver = true;
+        this.isAssigningDriver = !this.isAssigningDriver;
     }
 
     /**

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

@@ -1,61 +1,45 @@
-<Overlay
-    @onLoad={{this.setOverlayContext}}
-    @onOpen={{this.onOpen}}
-    @onClose={{this.onClose}}
-    @onToggle={{this.onToggle}}
-    @position="right"
-    @noBackdrop={{true}}
-    @fullHeight={{true}}
-    @isResizeble={{or this.isResizable @isResizable}}
-    @width={{or this.width @width "570px"}}
->
-    <Overlay::Header
-        @title={{if this.place.public_id this.place.name (t "fleet-ops.component.place-form-panel.place") }}
-        @status={{this.place.public_id}}
-        @hideStatusDot={{true}}
-        @createdAt={{this.place.createdAt}}
-        @titleWrapperClass="leading-5"
-    >
+<Overlay @onLoad={{this.setOverlayContext}} @onOpen={{this.onOpen}} @onClose={{this.onClose}} @onToggle={{this.onToggle}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizeble={{true}} @width="570px" @overlayClass="place-form-panel">
+    <Overlay::Header @title={{if this.place.public_id this.place.address (t "fleet-ops.component.place-form-panel.place")}} @status={{this.place.public_id}} @hideStatusDot={{true}} @titleWrapperClass="flex-col leading-5">
         <div class="flex flex-1 justify-end">
-            <Button @icon={{if this.place.id "save" "check"}} @type="primary" @text={{if this.place.id (t "fleet-ops.component.place-form-panel.save-place")(t "fleet-ops.component.place-form-panel.create-place") }} @onClick={{this.save}} @wrapperClass="mr-2" />
+            <Button @icon={{if this.place.id "save" "check"}} @type="primary" @text={{if this.place.id (t "fleet-ops.component.place-form-panel.save-place") (t "fleet-ops.component.place-form-panel.create-place")}} @onClick={{this.save}} @wrapperClass="mr-2" />
             <Button @type="default" @icon="times" @helpText={{if this.place.id (t "fleet-ops.component.place-form-panel.cancel-edit-place")(t "fleet-ops.component.place-form-panel.cancel-new-place") }} @onClick={{this.onPressCancel}} />
         </div>
     </Overlay::Header>
 
     <Overlay::Body @wrapperClass="new-service-rate-overlay-body px-4 space-y-4 pt-4" @increaseInnerBodyHeightBy={{1000}}>
-        <div class="grid grid-cols-3 gap-1 text-xs dark:text-gray-100">
-            <InputGroup @name={{t "fleet-ops.common.name"}} @wrapperClass="col-span-2">
-                <Input @value={{this.place.name}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.common.name"}} />
-            </InputGroup>
-            <InputGroup @name={{t "fleet-ops.component.place-form-panel.street-1"}} @value={{this.place.street1}} @wrapperClass="col-span-3">
-                <AutocompleteInput @value={{this.place.street1}} @fetchUrl="places/lookup" @onSelect={{this.onAutocomplete}} placeholder={{t "fleet-ops.component.place-form-panel.street-1"}} class="w-full" as |result|>
-                    {{result.address}}
-                </AutocompleteInput>
-            </InputGroup>
-            <InputGroup @name={{t "fleet-ops.component.place-form-panel.street-2"}} @autocomplete="nope" @value={{this.place.street2}} @wrapperClass="col-span-3" />
-            <InputGroup @name={{t "fleet-ops.component.place-form-panel.neighborhood"}} @autocomplete="nope" @value={{this.place.neighborhood}} />
-            <InputGroup @name={{t "fleet-ops.component.place-form-panel.building"}} @autocomplete="nope" @value={{this.place.building}} />
-            <InputGroup @name={{t "fleet-ops.component.place-form-panel.security-code"}} @autocomplete="nope" @value={{this.place.security_access_code}} />
-            <InputGroup @name={{t "fleet-ops.component.place-form-panel.postal-code"}} @autocomplete="nope" @value={{this.place.postal_code}} />
-            <InputGroup @name={{t "fleet-ops.common.city"}} @autocomplete="nope" @value={{this.place.city}} />
-            <InputGroup @name={{t "fleet-ops.component.place-form-panel.state"}} @autocomplete="nope" @value={{this.place.province}} />
-            <InputGroup @name={{t "fleet-ops.common.country"}} @wrapperClass="col-span-2">
-                <CountrySelect class="w-full form-input form-select form-datalist" @value={{this.place.country}} @onChange={{fn (mut this.place.country)}} placeholder={{t "fleet-ops.common.country"}} />
-            </InputGroup>
-            <InputGroup @name={{t "fleet-ops.common.coordinates"}} @wrapperClass="col-span-2">
-                <CoordinatesInput
-                    @value={{this.place.location}}
-                    @onChange={{this.updatePlaceCoordinates}}
-                    @onGeocode={{this.onAutocomplete}}
-                    @onUpdatedFromMap={{this.onReverseGeocode}}
-                    @onInit={{this.setCoordinatesInput}}
-                />
-            </InputGroup>
-            <div class="col-span-1"></div>
-            <InputGroup @name={{t "fleet-ops.common.phone"}}>
-                <PhoneInput @value={{this.place.phone}} @autocomplete="nope" @onInput={{this.phone}} class="form-input w-full" />
-            </InputGroup>
+        <div class="flex-1 space-y-4">
+            <div class="grid grid-cols-3 gap-1 text-xs dark:text-gray-100">
+                <InputGroup @name={{t "fleet-ops.common.name"}} @wrapperClass="col-span-2">
+                    <Input @value={{this.place.name}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.common.name"}} />
+                </InputGroup>
+                <InputGroup @name={{t "fleet-ops.component.place-form-panel.street-1"}} @value={{this.place.street1}} @wrapperClass="col-span-3">
+                    <AutocompleteInput @value={{this.place.street1}} @fetchUrl="places/lookup" @onSelect={{this.onAutocomplete}} placeholder={{t "fleet-ops.component.place-form-panel.street-1"}} class="w-full" as |result|>
+                        {{result.address}}
+                    </AutocompleteInput>
+                </InputGroup>
+                <InputGroup @name={{t "fleet-ops.component.place-form-panel.street-2"}} @autocomplete="nope" @value={{this.place.street2}} @wrapperClass="col-span-3" />
+                <InputGroup @name={{t "fleet-ops.component.place-form-panel.neighborhood"}} @autocomplete="nope" @value={{this.place.neighborhood}} />
+                <InputGroup @name={{t "fleet-ops.component.place-form-panel.building"}} @autocomplete="nope" @value={{this.place.building}} />
+                <InputGroup @name={{t "fleet-ops.component.place-form-panel.security-code"}} @autocomplete="nope" @value={{this.place.security_access_code}} />
+                <InputGroup @name={{t "fleet-ops.component.place-form-panel.postal-code"}} @autocomplete="nope" @value={{this.place.postal_code}} />
+                <InputGroup @name={{t "fleet-ops.common.city"}} @autocomplete="nope" @value={{this.place.city}} />
+                <InputGroup @name={{t "fleet-ops.component.place-form-panel.state"}} @autocomplete="nope" @value={{this.place.province}} />
+                <InputGroup @name={{t "fleet-ops.common.country"}} @wrapperClass="col-span-2">
+                    <CountrySelect class="w-full form-input form-select form-datalist" @value={{this.place.country}} @onChange={{fn (mut this.place.country)}} placeholder={{t "fleet-ops.common.country"}} />
+                </InputGroup>
+                <InputGroup @name={{t "fleet-ops.common.coordinates"}} @wrapperClass="col-span-2">
+                    <CoordinatesInput @value={{this.place.location}} @onChange={{this.updatePlaceCoordinates}} @onGeocode={{this.onAutocomplete}} @onUpdatedFromMap={{this.onReverseGeocode}} @onInit={{this.setCoordinatesInput}} />
+                </InputGroup>
+                <div class="col-span-1"></div>
+                <InputGroup @name={{t "fleet-ops.common.phone"}}>
+                    <PhoneInput @value={{this.place.phone}} @autocomplete="nope" @onInput={{this.phone}} class="form-input w-full" />
+                </InputGroup>
+            </div>
+            <ContentPanel @title={{t "fleet-ops.component.avatar-picker.avatar"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                <AvatarPicker @model={{this.place}} @defaultAvatar={{config "defaultValues.placeAvatar"}} />
+            </ContentPanel>
         </div>
+
         <Spacer @height="300px" />
     </Overlay::Body>
 </Overlay>

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

@@ -1,5 +1,5 @@
 <div class="p-4 space-y-4">
-    <ContentPanel @title="Map" @open={{false}}>
+    <ContentPanel @title="Map" @open={{true}}>
         <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
@@ -23,58 +23,54 @@
         <div class="grid grid-cols-1 lg:grid-cols-3 gap-2 text-xs dark:text-gray-100">
             <div class="field-info-container col-span-3">
                 <div class="field-name">{{t "fleet-ops.common.name"}}</div>
-                <div class="field-value">{{n-a @place.name}}</div>
+                <div class="field-value uppercase">{{n-a @place.name}}</div>
             </div>
 
             <div class="field-info-container col-span-3">
                 <div class="field-name">{{t "fleet-ops.common.street"}}</div>
-                <div class="field-value">{{n-a @place.street1}}</div>
+                <div class="field-value uppercase">{{n-a @place.street1}}</div>
             </div>
 
             <div class="field-info-container">
                 <div class="field-name">{{t "fleet-ops.common.neighborhood"}}</div>
-                <div class="field-value">{{n-a @place.neighborhood}}</div>
+                <div class="field-value uppercase">{{n-a @place.neighborhood}}</div>
             </div>
 
             <div class="field-info-container">
                 <div class="field-name">{{t "fleet-ops.common.building"}}</div>
-                <div class="field-value">{{n-a @place.building}}</div>
+                <div class="field-value uppercase">{{n-a @place.building}}</div>
             </div>
 
             <div class="field-info-container">
                 <div class="field-name">{{t "fleet-ops.common.security-access-code"}}</div>
-                <div class="field-value">{{n-a @place.security_access_code}}</div>
+                <div class="field-value uppercase">{{n-a @place.security_access_code}}</div>
             </div>
 
             <div class="field-info-container">
                 <div class="field-name">{{t "fleet-ops.common.city"}}</div>
-                <div class="field-value">{{n-a @place.city}}</div>
+                <div class="field-value uppercase">{{n-a @place.city}}</div>
             </div>
 
             <div class="field-info-container">
                 <div class="field-name">{{t "fleet-ops.common.state"}}</div>
-                <div class="field-value">{{n-a @place.province}}</div>
+                <div class="field-value uppercase">{{n-a @place.province}}</div>
             </div>
 
             <div class="field-info-container">
                 <div class="field-name">{{t "fleet-ops.common.country"}}</div>
-                <div class="field-value">
+                <div class="field-value uppercase">
                     <CountryName @country={{@place.country}} @showFlag={{true}} />
                 </div>
             </div>
 
             <div class="field-info-container">
                 <div class="field-name">{{t "fleet-ops.common.phone"}}</div>
-                <div class="field-value">{{n-a @place.phone}}</div>
+                <div class="field-value uppercase">{{n-a @place.phone}}</div>
             </div>
 
             <div class="field-info-container col-span-3">
                 <div class="field-name">
                     {{t "fleet-ops.common.coordinates"}}
-                    {{!-- <a href="javascript:;" class="block ml-3" {{on "click" @place.viewPlaceOnMap}}>
-                                <FaIcon @icon="map" class="mr-1" />
-                                View on map
-                            </a> --}}
                 </div>
                 <div class="field-value">
                     {{point-coordinates @place.location}}

package/addon/components/place-panel.hbs

@@ -1,15 +1,5 @@
-<Overlay
-    @onLoad={{this.setOverlayContext}}
-    @onOpen={{this.onOpen}}
-    @onClose={{this.onClose}}
-    @onToggle={{this.onToggle}}
-    @position="right"
-    @noBackdrop={{true}}
-    @fullHeight={{true}}
-    @isResizable={{or this.isResizable @isResizable}}
-    @width={{or this.width @width "570px"}}
->
-    <Overlay::Header @title={{this.place.name}} @status={{this.place.public_id}} @hideStatusDot={{true}} @createdAt={{this.place.createdAt}}>
+<Overlay @onLoad={{this.setOverlayContext}} @onOpen={{this.onOpen}} @onClose={{this.onClose}} @onToggle={{this.onToggle}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizable={{true}} @width="570px" @overlayClass="place-panel">
+    <Overlay::Header @title={{this.place.address}} @status={{this.place.public_id}} @hideStatusDot={{true}}>
         <Button @type="default" @icon="pen" @helpText={{t "fleet-ops.component.place-panel.edit-place"}} @onClick={{this.onEdit}} @wrapperClass="mr-2" />
         <Button @type="default" @icon="times" @helpText={{if this.place.id (t "fleet-ops.component.place-panel.cancel-edit-place")(t "fleet-ops.component.place-panel.cancel-new-place") }} @onClick={{this.onPressCancel}} />
     </Overlay::Header>

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

@@ -1,14 +1,4 @@
-<Overlay
-    @onLoad={{this.setOverlayContext}}
-    @onOpen={{this.onOpen}}
-    @onClose={{this.onClose}}
-    @onToggle={{this.onToggle}}
-    @position="right"
-    @noBackdrop={{true}}
-    @fullHeight={{true}}
-    @isResizeble={{or this.isResizable @isResizable}}
-    @width={{or this.width @width "570px"}}
->
+<Overlay @onLoad={{this.setOverlayContext}} @onOpen={{this.onOpen}} @onClose={{this.onClose}} @onToggle={{this.onToggle}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizeble={{or this.isResizable @isResizable}} @width={{or this.width @width "570px"}}>
     <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">
@@ -18,21 +8,9 @@
             </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 (t "fleet-ops.component.vehicle-form-panel.save-vehicle")(t "fleet-ops.component.vehicle-form-panel.create-vehicle") }}
-                        @onClick={{this.save}}
-                        @isLoading={{this.isLoading}}
-                    />
+                    <Button @icon={{if this.vehicle.id "save" "check"}} @type="primary" @text={{if this.vehicle.id (t "fleet-ops.component.vehicle-form-panel.save-vehicle") (t "fleet-ops.component.vehicle-form-panel.create-vehicle")}} @onClick={{this.save}} @isLoading={{this.isLoading}} />
                 </div>
-                <Button
-                    @type="default"
-                    @icon="times"
-                    @helpText={{if this.vehicle.id (t "fleet-ops.component.vehicle-form-panel.cancel-edit-vehicle")(t "fleet-ops.component.vehicle-form-panel.cancel-new-vehicle") }}
-                    @onClick={{this.onPressCancel}}
-                    @disabled={{this.isLoading}}
-                />
+                <Button @type="default" @icon="times" @helpText={{if this.vehicle.id (t "fleet-ops.component.vehicle-form-panel.cancel-edit-vehicle") (t "fleet-ops.component.vehicle-form-panel.cancel-new-vehicle")}} @onClick={{this.onPressCancel}} @disabled={{this.isLoading}} />
             </div>
         </div>
         <div class="flex flex-row justify-between w-full">
@@ -45,15 +23,7 @@
                                 <InputInfo @text={{t "fleet-ops.component.vehicle-form-panel.upload-photo"}} />
                             </Attach::Tooltip>
                             <div class="upload-avatar-button-wrapper rounded-lg">
-                                <UploadButton
-                                    @name={{t "fleet-ops.common.photos"}}
-                                    @accept="image/*"
-                                    @onFileAdded={{this.onUploadNewPhoto}}
-                                    @icon="upload"
-                                    @hideButtonText={{true}}
-                                    @labelClass="upload-avatar-label-overlay"
-                                    class="w-12 btn-reset"
-                                />
+                                <UploadButton @name={{t "fleet-ops.common.photos"}} @accept="image/*" @onFileAdded={{this.onUploadNewPhoto}} @icon="upload" @hideButtonText={{true}} @labelClass="upload-avatar-label-overlay" class="w-12 btn-reset" />
                             </div>
                         </div>
                     </div>
@@ -118,68 +88,29 @@
                     </InputGroup>
 
                     <InputGroup @name={{t "fleet-ops.component.vehicle-form-panel.driver-assigned"}}>
-                        <ModelSelect
-                            @modelName="driver"
-                            @selectedModel={{this.vehicle.driver}}
-                            @placeholder={{t "fleet-ops.component.vehicle-form-panel.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={{t "fleet-ops.component.vehicle-form-panel.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={{t "fleet-ops.common.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={{t "fleet-ops.component.vehicle-form-panel.select-vehicle"}}
-                                @triggerClass="form-select form-input"
-                                as |status|
-                            >
+                            <PowerSelect @options={{this.vehicleStatusOptions}} @selected={{this.vehicle.status}} @onChange={{fn (mut this.vehicle.status)}} @placeholder={{t "fleet-ops.component.vehicle-form-panel.select-vehicle"}} @triggerClass="form-select form-input" as |status|>
                                 {{smart-humanize status}}
                             </PowerSelect>
                         </div>
                     </InputGroup>
                     <InputGroup @name={{t "fleet-ops.common.coordinates"}} @wrapperClass="col-span-2">
-                <CoordinatesInput
-                    @value={{this.vehicle.location}}
-                    @onChange={{this.onCoordinatesChanged}}
-                    @onGeocode={{this.onAutocomplete}}
-                    @onUpdatedFromMap={{this.onCoordinatesChanged}}
-                    @onInit={{this.setCoordinatesInput}}
-                />
-            </InputGroup>
+                        <CoordinatesInput @value={{this.vehicle.location}} @onChange={{this.onCoordinatesChanged}} @onGeocode={{this.onAutocomplete}} @onUpdatedFromMap={{this.onCoordinatesChanged}} @onInit={{this.setCoordinatesInput}} />
+                    </InputGroup>
                 </div>
             </ContentPanel>
 
-            <ContentPanel @title={{t "fleet-ops.component.vehicle-form-panel.avatar"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
-                <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2">
-                    <div class="input-group mb-2">
-                        <InputLabel @labelText={{t "fleet-ops.component.vehicle-form-panel.select-map-avatar"}} @helpText={{t "fleet-ops.component.vehicle-form-panel.select-avatar-rendering"}} />
-                        <FetchSelect
-                            @wrapperClass="w-60"
-                            @placeholder={{t "fleet-ops.component.vehicle-form-panel.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>
-                    <div>
-                        <img alt={{this.vehicle.displayName}} src={{this.vehicle.avatar_url}} class="w-24 h-24" />
-                    </div>
-                </div>
+            <ContentPanel @title={{t "fleet-ops.component.avatar-picker.avatar"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                <AvatarPicker @model={{this.vehicle}} @defaultAvatar={{config "defaultValues.vehicleAvatar"}} />
             </ContentPanel>
         </div>
+
         <Spacer @height="300px" />
     </Overlay::Body>
 </Overlay>