@fleetbase/fleetops-engine 0.3.3 → 0.3.5

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

@@ -6,6 +6,8 @@ import { isArray } from '@ember/array';
 import getWithDefault from '@fleetbase/ember-core/utils/get-with-default';
 import contextComponentCallback from '../utils/context-component-callback';
 import applyContextComponentArguments from '../utils/apply-context-component-arguments';
+import getIssueTypes from '../utils/get-issue-types';
+import getIssueCategories from '../utils/get-issue-categories';
 
 export default class IssueFormPanelComponent extends Component {
     /**
@@ -55,24 +57,14 @@ export default class IssueFormPanelComponent extends Component {
      *
      * @var {String}
      */
-    @tracked issueTypes = ['vehicle', 'driver', 'route', 'payload-cargo', 'software-technical', 'operational', 'customer', 'security', 'environmental-sustainability'];
+    @tracked issueTypes = getIssueTypes();
 
     /**
      *  The subcategories for issue types.
      *
      * @var {Object}
      */
-    @tracked issueCategoriesByType = {
-        vehicle: ['Mechanical Problems', 'Cosmetic Damages', 'Tire Issues', 'Electronics and Instruments', 'Maintenance Alerts', 'Fuel Efficiency Issues'],
-        driver: ['Behavior Concerns', 'Documentation', 'Time Management', 'Communication', 'Training Needs', 'Health and Safety Violations'],
-        route: ['Inefficient Routes', 'Safety Concerns', 'Blocked Routes', 'Environmental Considerations', 'Unfavorable Weather Conditions'],
-        'payload-cargo': ['Damaged Goods', 'Misplaced Goods', 'Documentation Issues', 'Temperature-Sensitive Goods', 'Incorrect Cargo Loading'],
-        'software-technical': ['Bugs', 'UI/UX Concerns', 'Integration Failures', 'Performance', 'Feature Requests', 'Security Vulnerabilities'],
-        operational: ['Compliance', 'Resource Allocation', 'Cost Overruns', 'Communication', 'Vendor Management Issues'],
-        customer: ['Service Quality', 'Billing Discrepancies', 'Communication Breakdown', 'Feedback and Suggestions', 'Order Errors'],
-        security: ['Unauthorized Access', 'Data Concerns', 'Physical Security', 'Data Integrity Issues'],
-        'environmental-sustainability': ['Fuel Consumption', 'Carbon Footprint', 'Waste Management', 'Green Initiatives Opportunities'],
-    };
+    @tracked issueCategoriesByType = getIssueCategories({ fullObject: true });
 
     /**
      * Selectable issue categories.
@@ -101,7 +93,7 @@ export default class IssueFormPanelComponent extends Component {
     constructor() {
         super(...arguments);
         this.issue = this.args.issue;
-        this.issueCategories = getWithDefault(this.issueCategoriesByType, this.issue.type, []);
+        this.issueCategories = getWithDefault(this.issueCategoriesByType, getWithDefault(this.issue, 'type', 'operational'), []);
         applyContextComponentArguments(this);
     }
 

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

@@ -0,0 +1 @@
+<FleetListingPanel ...attributes />

package/addon/components/layout/fleet-ops-sidebar/fleet-listing.js

@@ -0,0 +1,3 @@
+import Component from '@glimmer/component';
+
+export default class LayoutFleetOpsSidebarFleetListingComponent extends Component {}

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

@@ -5,20 +5,20 @@
     {{#if menuItem.renderComponentInPlace}}
         {{component menuItem.component}}
     {{else}}
-        <Layout::Sidebar::Item @onClick={{fn this.universe.transitionMenuItem (concat this.routePrefix "virtual") menuItem}} @item={{menuItem}} @icon={{menuItem.icon}}>{{menuItem.title}}</Layout::Sidebar::Item>
+        <Layout::Sidebar::Item @onClick={{fn this.universe.transitionMenuItem (concat this.routePrefix "virtual") menuItem}} @menuItem={{menuItem}} @icon={{menuItem.icon}} @rightSideComponent={{menuItem.rightSideComponent}} @rightSideComponentContext={{menuItem.rightSideComponentContext}} @rightSideStatus={{menuItem.rightSideStatus}} @rightSideStatusText={{menuItem.rightSideStatusText}} @hideRightSideStatusDot={{menuItem.hideRightSideStatusDot}} @rightSideStatusClass={{menuItem.rightSideStatusClass}} @disableRightSideStatusHumanize={{menuItem.disableRightSideStatusHumanize}} @dropdownButton={{menuItem.dropdownButton}} @dropdownButtonActions={{menuItem.dropdownButtonActions}} @dropdownButtonIcon={{menuItem.dropdownButtonIcon}} @dropdownButtonIconPrefix={{menuItem.dropdownButtonIconPrefix}} @dropdownButtonText={{menuItem.dropdownButtonText}} @dropdownButtonCalculatePosition={{menuItem.dropdownButtonCalculatePosition}} @dropdownButtonRenderInPlace={{menuItem.dropdownButtonRenderInPlace}} @dropdownButtonMenuLabel={{menuItem.dropdownButtonMenuLabel}} @dropdownButtonWrapperClass={{menuItem.dropdownButtonWrapperClass}} @dropdownButtonTriggerClass={{menuItem.dropdownButtonTriggerClass}} @registerDropdownButtonAPI={{menuItem.registerDropdownButtonAPI}}>{{menuItem.title}}</Layout::Sidebar::Item>
     {{/if}}
 {{/each}}
 {{#each this.menuPanels as |menuPanel|}}
     <Layout::Sidebar::Panel @open={{menuPanel.open}} @title={{menuPanel.title}}>
-        {{#each menuPanel.items as |item|}}
-            <Layout::Sidebar::Item @route={{concat this.routePrefix item.route}} @icon={{item.icon}}>{{item.title}}</Layout::Sidebar::Item>
+        {{#each menuPanel.items as |menuItem|}}
+            <Layout::Sidebar::Item @route={{concat this.routePrefix menuItem.route}} @icon={{menuItem.icon}} @rightSideComponent={{menuItem.rightSideComponent}} @rightSideComponentContext={{menuItem.rightSideComponentContext}} @rightSideStatus={{menuItem.rightSideStatus}} @rightSideStatusText={{menuItem.rightSideStatusText}} @hideRightSideStatusDot={{menuItem.hideRightSideStatusDot}} @rightSideStatusClass={{menuItem.rightSideStatusClass}} @disableRightSideStatusHumanize={{menuItem.disableRightSideStatusHumanize}} @dropdownButton={{menuItem.dropdownButton}} @dropdownButtonActions={{menuItem.dropdownButtonActions}} @dropdownButtonIcon={{menuItem.dropdownButtonIcon}} @dropdownButtonIconPrefix={{menuItem.dropdownButtonIconPrefix}} @dropdownButtonText={{menuItem.dropdownButtonText}} @dropdownButtonCalculatePosition={{menuItem.dropdownButtonCalculatePosition}} @dropdownButtonRenderInPlace={{menuItem.dropdownButtonRenderInPlace}} @dropdownButtonMenuLabel={{menuItem.dropdownButtonMenuLabel}} @dropdownButtonWrapperClass={{menuItem.dropdownButtonWrapperClass}} @dropdownButtonTriggerClass={{menuItem.dropdownButtonTriggerClass}} @registerDropdownButtonAPI={{menuItem.registerDropdownButtonAPI}}>{{menuItem.title}}</Layout::Sidebar::Item>
         {{/each}}
     </Layout::Sidebar::Panel>
 {{/each}}
 {{#each this.universeMenuPanels as |menuPanel|}}
     <Layout::Sidebar::Panel @open={{menuPanel.open}} @title={{menuPanel.title}}>
         {{#each menuPanel.items as |menuItem|}}
-            <Layout::Sidebar::Item @onClick={{fn this.universe.transitionMenuItem (concat this.routePrefix "virtual") menuItem}} @item={{menuItem}} @icon={{menuItem.icon}}>{{menuItem.title}}</Layout::Sidebar::Item>
+            <Layout::Sidebar::Item @onClick={{fn this.universe.transitionMenuItem (concat this.routePrefix "virtual") menuItem}} @menuItem={{menuItem}} @icon={{menuItem.icon}} @rightSideComponent={{menuItem.rightSideComponent}} @rightSideComponentContext={{menuItem.rightSideComponentContext}} @rightSideStatus={{menuItem.rightSideStatus}} @rightSideStatusText={{menuItem.rightSideStatusText}} @hideRightSideStatusDot={{menuItem.hideRightSideStatusDot}} @rightSideStatusClass={{menuItem.rightSideStatusClass}} @disableRightSideStatusHumanize={{menuItem.disableRightSideStatusHumanize}} @dropdownButton={{menuItem.dropdownButton}} @dropdownButtonActions={{menuItem.dropdownButtonActions}} @dropdownButtonIcon={{menuItem.dropdownButtonIcon}} @dropdownButtonIconPrefix={{menuItem.dropdownButtonIconPrefix}} @dropdownButtonText={{menuItem.dropdownButtonText}} @dropdownButtonCalculatePosition={{menuItem.dropdownButtonCalculatePosition}} @dropdownButtonRenderInPlace={{menuItem.dropdownButtonRenderInPlace}} @dropdownButtonMenuLabel={{menuItem.dropdownButtonMenuLabel}} @dropdownButtonWrapperClass={{menuItem.dropdownButtonWrapperClass}} @dropdownButtonTriggerClass={{menuItem.dropdownButtonTriggerClass}} @registerDropdownButtonAPI={{menuItem.registerDropdownButtonAPI}}>{{menuItem.title}}</Layout::Sidebar::Item>
         {{/each}}
     </Layout::Sidebar::Panel>
 {{/each}}

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

@@ -11,6 +11,8 @@ import { isArray } from '@ember/array';
  */
 export default class LayoutFleetOpsSidebarComponent extends Component {
     @service universe;
+    @service contextPanel;
+    @service store;
     @tracked routePrefix = 'console.fleet-ops.';
     @tracked menuPanels = [];
     @tracked universeMenuItems = [];
@@ -100,6 +102,14 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
             return true;
         }
 
+        // Check if the route exists in the settings
+        const routeExists = visibilitySettings.some((visibilityControl) => (exactMatch ? visibilityControl.route === routePrefix : visibilityControl.route.startsWith(routePrefix)));
+
+        // If the route doesn't exist in the settings, return true (visible by default)
+        if (!routeExists) {
+            return true;
+        }
+
         return visibilitySettings.some((visibilityControl) => {
             const match = exactMatch ? visibilityControl.route === routePrefix : visibilityControl.route.startsWith(routePrefix);
             return match && visibilityControl.visible;

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

@@ -1,4 +1,4 @@
-<Drawer @isMinimized={{true}} @notchEnabled={{true}} @onLoad={{this.setDrawerContext}}>
+<Drawer @onResizeEnd={{@onResizeEnd}} @onResizeStart={{@onResizeStart}} @isMinimized={{@isMinimized}} @isOpen={{@isOpen}} @notchEnabled={{true}} @onLoad={{this.setDrawerContext}}>
     <div class="ui-tabs pt-4">
         <nav>
             {{#each this.tabs as |tab|}}

package/addon/components/live-map.hbs

@@ -87,5 +87,5 @@
 </div>
 
 {{#if this.isDataLoaded}}
-    <LiveMapDrawer @vehicles={{this.vehicles}} @drivers={{this.drivers}} @places={{this.places}} @liveMap={{this}} @onDrawerReady={{this.setDrawerContext}} />
+    <LiveMapDrawer @tab={{@drawerTab}} @onTabChanged={{@onDrawerTabChanged}} @onResizeEnd={{@onDrawerResizeEnd}} @onResizeStart={{@onDrawerResizeStart}} @isMinimized={{@isDrawerMinimized}} @isOpen={{@isDrawerOpen}} @vehicles={{this.vehicles}} @drivers={{this.drivers}} @places={{this.places}} @liveMap={{this}} @onDrawerReady={{this.setDrawerContext}} />
 {{/if}}

package/addon/components/modals/driver-assign-vehicle.hbs

@@ -2,19 +2,10 @@
     <div class="modal-body-container">
         <div class="grid grid-cols-1 gap-2 text-xs dark:text-gray-100">
             <InputGroup @name="Select Vehicle" @value={{@options.driver.vehicle_uuid}}>
-                <ModelSelect
-                    @modelName="vehicle"
-                    @selectedModel={{@options.driver.vehicle_uuid}}
-                    @placeholder="Select Vehicle to Assign"
-                    @triggerClass="form-select form-input"
-                    @infiniteScroll={{false}}
-                    @renderInPlace={{true}}
-                    @onChange={{fn (mut @options.driver.vehicle_uuid)}} as |model|
-                >
-                    {{model.name}}
+                <ModelSelect @modelName="vehicle" @selectedModel={{@options.driver.vehicle_uuid}} @placeholder="Select Vehicle to Assign" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut @options.driver.vehicle)}} @onChangeId={{fn (mut @options.driver.vehicle_uuid)}} as |model|>
+                    {{model.display_name}}
                 </ModelSelect>
             </InputGroup>
         </div>
     </div>
-    {{yield}}
 </Modal::Default>

package/addon/components/modals/driver-assign-vendor.hbs

@@ -2,15 +2,7 @@
     <div class="modal-body-container">
         <div class="grid grid-cols-1 gap-2 text-xs dark:text-gray-100">
             <InputGroup @name="Select Vendor" @value={{@options.driver.vendor_uuid}}>
-                <ModelSelect
-                    @modelName="vendor"
-                    @selectedModel={{@options.driver.vendor_uuid}}
-                    @placeholder="Select Vendor"
-                    @triggerClass="form-select form-input"
-                    @infiniteScroll={{false}}
-                    @renderInPlace={{true}}
-                    @onChange={{fn (mut @options.driver.vendor_uuid)}} as |model|
-                >
+                <ModelSelect @modelName="vendor" @selectedModel={{@options.driver.vendor_uuid}} @placeholder="Select Vendor" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut @options.driver.vendor)}} @onChangeId={{fn (mut @options.driver.vendor_uuid)}} as |model|>
                     {{model.name}}
                 </ModelSelect>
             </InputGroup>

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

@@ -1,6 +1,10 @@
 <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">ID</div>
+                <div class="field-value">{{n-a @options.fuelReport.public_id}}</div>
+            </div>
             <div class="field-info-container">
                 <div class="field-name">Driver</div>
                 <div class="field-value">{{n-a @options.fuelReport.driver_name}}</div>

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

@@ -21,15 +21,43 @@
             <span>{{n-a @order.createdAtWithTime}}</span>
         </div>
         <div class="flex items-center justify-between">
-            <div>
+            <div class="flex flex-row items-center">
                 <FaIcon @icon="calendar" class="mr-2" />
                 <span class="font-semibold">Driver Assigned</span>
+                <div class="ml-2">
+                    <a href="javascript:;" class="text-blue-400 hover:opacity-75" {{on "click" this.startAssignDriver}}>
+                        <FaIcon @icon="edit" @size="xs" />
+                    </a>
+                </div>
+            </div>
+            <div>
+                {{#if this.isAssigningDriver}}
+                    <ModelSelect @modelName="driver" @selectedModel={{@order.driver_assigned}} @placeholder="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>
+                    </ModelSelect>
+                {{else}}
+                    <a href="javascript:;" disabled={{not @order.driver_assigned}} class={{unless @order.driver_assigned "dark:text-gray-600 text-gray-400"}} {{on "click" (fn this.onClickDriver @order.driver_assigned)}}>{{n-a @order.driver_assigned.name "No Driver Assigned"}}</a>
+                {{/if}}
             </div>
-            <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}} />
+        <div class="flex items-center justify-between">
+            <div class="flex flex-row items-center">
+                <FaIcon @icon="calendar" class="mr-2" />
+                <span class="font-semibold">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 "No Vehicle Assigned"}}</a>
         </div>
+        {{!-- <div class="z-20 relative">
+            <RouteList @order={{@order}} />
+        </div> --}}
     </div>
     {{yield}}
 </div>

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

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

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

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

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

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

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

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