@fleetbase/fleetops-engine 0.3.1 → 0.3.3

package/addon/components/live-map-drawer.js

@@ -0,0 +1,104 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { isArray } from '@ember/array';
+import contextComponentCallback from '../utils/context-component-callback';
+import applyContextComponentArguments from '../utils/apply-context-component-arguments';
+import LiveMapDrawerVehicleListingComponent from './live-map-drawer/vehicle-listing';
+import LiveMapDrawerDriverListingComponent from './live-map-drawer/driver-listing';
+import LiveMapDrawerPlaceListingComponent from './live-map-drawer/place-listing';
+
+export default class LiveMapDrawerComponent extends Component {
+    /**
+     * Universe service for managing global data and settings.
+     *
+     * @type {Service}
+     */
+    @service universe;
+
+    /**
+     * The current active tab.
+     *
+     * @type {Object}
+     * @tracked
+     */
+    @tracked tab;
+
+    /**
+     * The drawer component context api.
+     *
+     * @type {Object}
+     * @tracked
+     */
+    @tracked drawer;
+
+    /**
+     * Returns the array of tabs available for the drawer.
+     *
+     * @type {Array}
+     */
+    get tabs() {
+        const registeredTabs = this.universe.getMenuItemsFromRegistry('component:live-map-drawer');
+        const defaultTabs = [
+            this.universe._createMenuItem('Vehicles', null, { icon: 'car', component: LiveMapDrawerVehicleListingComponent }),
+            this.universe._createMenuItem('Drivers', null, { icon: 'id-card', component: LiveMapDrawerDriverListingComponent }),
+            this.universe._createMenuItem('Places', null, { icon: 'building', component: LiveMapDrawerPlaceListingComponent }),
+        ];
+
+        if (isArray(registeredTabs)) {
+            return [...defaultTabs, ...registeredTabs];
+        }
+
+        return defaultTabs;
+    }
+
+    /**
+     * Initializes the vehicle panel component.
+     */
+    constructor() {
+        super(...arguments);
+        this.tab = this.getTabUsingSlug(this.args.tab);
+        applyContextComponentArguments(this);
+    }
+
+    /**
+     * Sets the drawer component context api.
+     *
+     * @param {Object} drawerApi
+     * @memberof LiveMapDrawerComponent
+     */
+    @action setDrawerContext(drawerApi) {
+        this.drawer = drawerApi;
+
+        if (typeof this.args.onDrawerReady === 'function') {
+            this.args.onDrawerReady(...arguments);
+        }
+    }
+
+    /**
+     * Handles changing the active tab.
+     *
+     * @method
+     * @param {String} tab - The new tab to switch to.
+     * @action
+     */
+    @action onTabChanged(tab) {
+        this.tab = this.getTabUsingSlug(tab);
+        contextComponentCallback(this, 'onTabChanged', tab);
+    }
+
+    /**
+     * Finds and returns a tab based on its slug.
+     *
+     * @param {String} tabSlug - The slug of the tab.
+     * @returns {Object|null} The found tab or null.
+     */
+    getTabUsingSlug(tabSlug) {
+        if (tabSlug) {
+            return this.tabs.find(({ slug }) => slug === tabSlug);
+        }
+
+        return this.tabs[0];
+    }
+}

package/addon/components/live-map.hbs

@@ -84,4 +84,8 @@
 
         {{yield layers}}
     </LeafletMap>
-</div>
+</div>
+
+{{#if this.isDataLoaded}}
+    <LiveMapDrawer @vehicles={{this.vehicles}} @drivers={{this.drivers}} @places={{this.places}} @liveMap={{this}} @onDrawerReady={{this.setDrawerContext}} />
+{{/if}}

package/addon/components/live-map.js

@@ -152,6 +152,13 @@ export default class LiveMapComponent extends Component {
      */
     @tracked isReady = false;
 
+    /**
+     * Indicates if all the data requested has completed loading.
+     * @type {boolean}
+     * @memberof LiveMapComponent
+     */
+    @tracked isDataLoaded = false;
+
     /**
      * Controls for visibility.
      * @type {Object}
@@ -188,6 +195,13 @@ export default class LiveMapComponent extends Component {
      */
     @tracked leafletMap;
 
+    /**
+     * The Drawer component context API.
+     * @type {Object}
+     * @memberof LiveMapComponent
+     */
+    @tracked drawer;
+
     /**
      * The map's zoom level.
      * @type {number}
@@ -288,21 +302,63 @@ export default class LiveMapComponent extends Component {
         // set initial coordinates
         this.setInitialCoordinates();
 
-        // load required live data
-        this.fetchLiveData('routes');
-        this.fetchLiveData('vehicles', {
-            onLoaded: (vehicles) => {
-                this.watchMovingObjects('vehicles', vehicles);
-            },
-        });
-        this.fetchLiveData('drivers', {
-            onLoaded: (drivers) => {
-                this.watchMovingObjects('drivers', drivers);
-            },
-        });
-        this.fetchLiveData('places');
-        this.listen();
-        this.ready();
+        // load data and complete setup
+        this.completeSetup([
+            this.fetchLiveData('routes'),
+            this.fetchLiveData('vehicles', {
+                onLoaded: (vehicles) => {
+                    this.watchMovingObjects('vehicles', vehicles);
+                },
+            }),
+            this.fetchLiveData('drivers', {
+                onLoaded: (drivers) => {
+                    this.watchMovingObjects('drivers', drivers);
+                },
+            }),
+            this.fetchLiveData('places'),
+        ]);
+    }
+
+    /**
+     * Completes the setup of the component by processing an array of live data promises.
+     * It waits for all the provided promises to settle and then sets a flag indicating
+     * that data fetching is complete. It ensures that any final listening and readiness
+     * processes are invoked at the end of the setup process.
+     *
+     * @param {Promise[]} liveDataPromises - An array of promises that fetch live data.
+     * @returns {Promise} A promise that resolves when all data-fetching promises have settled.
+     */
+    completeSetup(liveDataPromises) {
+        return allSettled(liveDataPromises)
+            .then(() => {
+                this.isDataLoaded = true;
+            })
+            .finally(() => {
+                this.listen();
+                this.ready();
+            });
+    }
+
+    /**
+     * Reloads the live map data.
+     *
+     * @memberof LiveMapComponent
+     */
+    reload() {
+        this.completeSetup([
+            this.fetchLiveData('routes'),
+            this.fetchLiveData('vehicles', {
+                onLoaded: (vehicles) => {
+                    this.watchMovingObjects('vehicles', vehicles);
+                },
+            }),
+            this.fetchLiveData('drivers', {
+                onLoaded: (drivers) => {
+                    this.watchMovingObjects('drivers', drivers);
+                },
+            }),
+            this.fetchLiveData('places'),
+        ]);
     }
 
     /**
@@ -463,6 +519,11 @@ export default class LiveMapComponent extends Component {
 
                 return data;
             })
+            .catch((error) => {
+                if (typeof options.onFailure === 'function') {
+                    options.onFailure(error);
+                }
+            })
             .finally(() => {
                 this.isLoading = false;
             });
@@ -838,6 +899,20 @@ export default class LiveMapComponent extends Component {
         return null;
     }
 
+    /**
+     * Sets the drawer component context api.
+     *
+     * @param {Object} drawerApi
+     * @memberof LiveMapComponent
+     */
+    @action setDrawerContext(drawerApi) {
+        this.drawer = drawerApi;
+
+        if (typeof this.args.onDrawerReady === 'function') {
+            this.args.onDrawerReady(...arguments);
+        }
+    }
+
     /**
      * Handle the 'drawstop' event.
      *
@@ -989,6 +1064,7 @@ export default class LiveMapComponent extends Component {
      * @memberof LiveMapComponent
      */
     @action onDriverClicked(driver) {
+        this.contextPanel.clear();
         this.contextPanel.focus(driver);
     }
 
@@ -1011,6 +1087,23 @@ export default class LiveMapComponent extends Component {
         this.createVehicleContextMenu(vehicle, target);
     }
 
+    /**
+     * Handle the addition of a place marker.
+     *
+     * @param {PlaceModel} place - The place object.
+     * @param {Event} event - The event object associated with the addition.
+     * @memberof LiveMapComponent
+     */
+    @action onPlaceAdded(place, event) {
+        const { target } = event;
+
+        set(target, 'record_id', place.id);
+        set(target, 'record_type', 'place');
+
+        // set the marker instance to the vehicle model
+        set(place, '_marker', target);
+    }
+
     /**
      * Handle the click event of a vehicle marker.
      *
@@ -1019,6 +1112,7 @@ export default class LiveMapComponent extends Component {
      * @memberof LiveMapComponent
      */
     @action onVehicleClicked(vehicle) {
+        this.contextPanel.clear();
         this.contextPanel.focus(vehicle);
     }
 

package/addon/components/map-container/toolbar.hbs

@@ -1,30 +1,30 @@
 <MapContainer::ToolbarContainer ...attributes>
     <div class="next-map-container-toolbar next-map-container-toolbar-zoom-control">
-        <div>
-            <button type="button" class="toolbar-button" {{on "click" (fn this.onAction "onZoomIn")}}>
+        <div id="map-toolbar-zoom-in-button-wrapper">
+            <button type="button" id="map-toolbar-zoom-in-button" class="toolbar-button" {{on "click" (fn this.onAction "onZoomIn")}}>
                 <FaIcon @icon="plus" @prefix="fas" class="text-gray-100" />
             </button>
         </div>
-        <div>
+        <div id="map-toolbar-zoom-out-button-wrapper">
             <button type="button" class="toolbar-button" {{on "click" (fn this.onAction "onZoomOut")}}>
-                <FaIcon @icon="minus" @prefix="fas" class="text-gray-100" />
+                <FaIcon @icon="minus" id="map-toolbar-zoom-out-button" @prefix="fas" class="text-gray-100" />
             </button>
         </div>
     </div>
     <div class="next-map-container-toolbar-panel next-map-container-toolbar-actions">
-        <button type="button" class="toolbar-button is-action" {{on "click" (fn this.onAction "onPressCreateOrder")}}>
+        <button type="button" id="map-toolbar-create-order-button" class="toolbar-button is-action" {{on "click" (fn this.onAction "onPressCreateOrder")}}>
             <FaIcon @icon="paper-plane" />
             <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
                 <InputInfo @text="Create Order" @iconClass="hidden" class="py-1 px-2 bg-gray-900 -mt-1" />
             </Attach::Tooltip>
         </button>
-        <button type="button" class="toolbar-button" {{on "click" (fn this.onAction "onPressSearch")}}>
+        <button type="button" id="map-toolbar-search-button" class="toolbar-button" {{on "click" (fn this.onAction "onPressSearch")}}>
             <FaIcon @icon="search" />
             <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
                 <InputInfo @text="Search" @iconClass="hidden" class="py-1 px-2 bg-gray-900 -mt-1" />
             </Attach::Tooltip>
         </button>
-        <button type="button" class="toolbar-button relative" {{on "click" (fn this.onAction "onPressViewOrders")}}>
+        <button type="button" id="map-toolbar-view-orders-button" class="toolbar-button relative" {{on "click" (fn this.onAction "onPressViewOrders")}}>
             <div class="active-orders-count absolute top-0 right-0 -mr-2.5 -mt-1">
                 <div class="relative flex w-5 h-5 rounded-full">
                     <div class="absolute inset-0 rounded-full w-5 h-5 text-xs bg-blue-500 opacity-75 {{if @activeOrdersCount 'animate-ping'}}"></div>
@@ -36,7 +36,7 @@
                 <InputInfo @text="View Orders" @iconClass="hidden" class="py-1 px-2 bg-gray-900 -mt-1" />
             </Attach::Tooltip>
         </button>
-        <BasicDropdown @horizontalPosition="right" @calculatePosition={{this.calculatePosition}} @renderInPlace={{true}} as |dd|>
+        <BasicDropdown id="map-toolbar-service-areas-button" @horizontalPosition="right" @calculatePosition={{this.calculatePosition}} @renderInPlace={{true}} as |dd|>
             <dd.Trigger class="toolbar-button">
                 <FaIcon @icon="map-marked-alt" />
                 <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
@@ -47,7 +47,7 @@
                 <MapContainer::Toolbar::ZonesPanel @dd={{dd}} @liveMap={{@liveMap}} @map={{@map}} @onPressCreateServiceArea={{@onPressCreateServiceArea}} />
             </dd.Content>
         </BasicDropdown>
-        <BasicDropdown @horizontalPosition="right" @calculatePosition={{this.calculatePosition}} @renderInPlace={{true}} as |dd|>
+        <BasicDropdown id="map-toolbar-visibility-controls-button" @horizontalPosition="right" @calculatePosition={{this.calculatePosition}} @renderInPlace={{true}} as |dd|>
             <dd.Trigger class="toolbar-button">
                 <FaIcon @icon="eye" />
                 <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
@@ -58,5 +58,11 @@
                 <MapContainer::Toolbar::VisibilityControlPanel @dd={{dd}} @liveMap={{@liveMap}} @map={{@map}} />
             </dd.Content>
         </BasicDropdown>
+        <button type="button" id="map-toolbar-live-map-drawer-button" class="toolbar-button is-action mb-0i" {{on "click" (fn this.onAction "onPressLiveMapDrawerToggle")}}>
+            <FaIcon @icon="binoculars" />
+            <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
+                <InputInfo @text="Scope" @iconClass="hidden" class="py-1 px-2 bg-gray-900 -mt-1" />
+            </Attach::Tooltip>
+        </button>
     </div>
 </MapContainer::ToolbarContainer>

package/addon/components/map-container/topbar.hbs

@@ -1 +1 @@
-<div class="next-map-container-topbar" ...attributes>{{yield}}</div>
+<div id="map-topbar-container" class="next-map-container-topbar" ...attributes>{{yield}}</div>

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

@@ -0,0 +1,38 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="grid grid-cols-2 flex-col md:flex-row gap-2 mb-6">
+            <div class="field-info-container">
+                <div class="field-name">Reporter</div>
+                <div class="field-value">{{n-a @issue.reporter}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Assigned To</div>
+                <div class="field-value">{{n-a @issue.assignee}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Driver</div>
+                <div class="field-value">{{n-a @issue.driver}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Vehicle</div>
+                <div class="field-value">{{n-a @issue.vehicle.displayName}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Issue Type</div>
+                <div class="field-value">{{n-a @issue.type}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Issue Category</div>
+                <div class="field-value">{{n-a @issue.category}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Date Created</div>
+                <div class="field-value">{{@issue.createdAtShort}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Coordinates</div>
+                <div class="field-value">{{point-coordinates @issue.location}}</div>
+            </div>
+        </div>
+    </div>
+</Modal::Default>

package/addon/components/modals/issue-from.hbs

@@ -0,0 +1,138 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <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)}}
+                    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)}}
+                    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|
+                >
+                    {{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|
+                >
+                    {{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|
+                    >
+                        {{smart-humanize type}}
+                    </PowerSelect>
+                </div>
+            </InputGroup>
+
+            <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|
+                    >
+                        {{smart-humanize category}}
+                    </PowerSelect>
+                </div>
+            </InputGroup>
+
+            <InputGroup @name="Issue Report">
+                <Textarea @value={{this.issue.report}} aria-label="Issue Report" class="w-full form-input" placeholder="Issue Report" rows={{5}} />
+            </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|
+                >
+                    {{tag}}
+                </TagInput>
+            </InputGroup>
+
+            <InputGroup @name="Priority">
+                <Input @value={{this.issue.priority}} @type="text" class="w-full form-input" placeholder="Priority" />
+            </InputGroup>
+
+            <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|
+                    >
+                        {{smart-humanize status}}
+                    </PowerSelect>
+                </div>
+            </InputGroup>
+
+            <InputGroup @name="Coordinates">
+                <CoordinatesInput @value={{this.issue.location}} @onChange={{fn (mut this.issue.location)}} />
+            </InputGroup>
+        </div>
+    </div>
+    {{yield}}
+</Modal::Default>

package/addon/components/modals/order-event.hbs

@@ -13,6 +13,6 @@
             </div>
         </div>
 
-        <ScheduleCard class="border border-night-905" @itemClass="bg-green-600" @contentClass="bg-transparent-i py-3" @titleClass="hidden-i" @order={{@options.order}} />
+        <Order::ScheduleCard class="border border-night-905" @itemClass="bg-green-600" @contentClass="bg-transparent-i py-3" @titleClass="hidden-i" @order={{@options.order}} />
     </div>
 </Modal::Default>

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

@@ -1,4 +1,4 @@
-<div class="order-schedule-card border border-gray-200 dark:border-gray-700" {{did-insert this.setupComponent}} ...attributes>
+<div class="order-schedule-card border border-gray-200 dark:border-gray-700" ...attributes>
     <a href="javascript:;" class="{{@titleClass}} card-title border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900" {{on "click" (fn this.onTitleClick @order)}}>
         <span>{{@order.public_id}}</span>
         <div>
@@ -11,21 +11,21 @@
                 <FaIcon @icon="calendar" class="mr-2" />
                 <span class="font-semibold">Date scheduled</span>
             </div>
-            <span>{{@order.scheduledAt}}</span>
+            <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" />
                 <span class="font-semibold">Date created</span>
             </div>
-            <span>{{@order.createdAtWithTime}}</span>
+            <span>{{n-a @order.createdAtWithTime}}</span>
         </div>
         <div class="flex items-center justify-between">
             <div>
                 <FaIcon @icon="calendar" class="mr-2" />
                 <span class="font-semibold">Driver Assigned</span>
             </div>
-            <span>{{@order.driver_assigned.name "None"}}</span>
+            <span class={{unless @order.driver_assigned "dark:text-gray-600 text-gray-400"}}>{{n-a @order.driver_assigned.name "No Driver Assigned"}}</span>
         </div>
         <div class="z-20 relative">
             <RouteList @order={{@order}} />

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

@@ -2,16 +2,23 @@ import Component from '@glimmer/component';
 import { action } from '@ember/object';
 
 export default class OrderScheduleCardComponent extends Component {
-    @action setupComponent() {
-        const { order } = this.args;
+    constructor(owner, { order }) {
+        super(...arguments);
 
-        order?.loadDriver();
-        order?.loadPayload();
+        if (order && typeof order.loadDriver === 'function') {
+            order.loadDriver();
+        }
+
+        if (order && typeof order.loadPayload === 'function') {
+            order.loadPayload();
+        }
     }
 
     @action onTitleClick(order) {
-        if (typeof this.args.onTitleClick === 'function') {
-            this.args.onTitleClick(order);
+        const { onTitleClick } = this.args;
+
+        if (typeof onTitleClick === 'function') {
+            onTitleClick(order);
         }
     }
 }

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

@@ -0,0 +1,50 @@
+<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.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}} />
+        </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="Name" @autocomplete="nope" @value={{this.place.name}} @wrapperClass="col-span-3" />
+            <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|>
+                    {{result.address}}
+                </AutocompleteInput>
+            </InputGroup>
+            <InputGroup @name="Street 2" @autocomplete="nope" @value={{this.place.street2}} @wrapperClass="col-span-3" />
+            <InputGroup @name="Neighborhood" @autocomplete="nope" @value={{this.place.neighborhood}} />
+            <InputGroup @name="Building" @autocomplete="nope" @value={{this.place.building}} />
+            <InputGroup @name="Security Access Code" @autocomplete="nope" @value={{this.place.security_access_code}} />
+            <InputGroup @name="Postal Code" @autocomplete="nope" @value={{this.place.postal_code}} />
+            <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" />
+            </InputGroup>
+            <InputGroup @name="Coordinates" @wrapperClass="col-span-2">
+                <CoordinatesInput
+                    @value={{this.place.location}}
+                    @onChange={{this.updatePlaceCoordinates}}
+                    @onGeocode={{this.autocomplete}}
+                    @onUpdatedFromMap={{this.reverseGeocode}}
+                    @onInit={{this.setCoordinatesInput}}
+                />
+            </InputGroup>
+            <div class="col-span-1"></div>
+            <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>