@fleetbase/fleetops-engine 0.3.3 → 0.3.4

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

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

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

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

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

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

package/addon/components/vehicle-panel.hbs

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

package/addon/components/vendor-form-panel/create-form.hbs

@@ -2,7 +2,14 @@
     <ContentPanel @title="Setup" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
         <InputGroup @name="Select vendor type">
             <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
-                <PowerSelect @options={{this.vendorTypes}} @selected={{this.selectedVendorType}} @onChange={{this.onSelectVendorType}} @placeholder="Select vendor type" @triggerClass="form-select form-input" as |vendorType|>
+                <PowerSelect
+                    @options={{this.vendorTypes}}
+                    @selected={{this.selectedVendorType}}
+                    @onChange={{this.onSelectVendorType}}
+                    @placeholder="Select vendor type"
+                    @triggerClass="form-select form-input"
+                    as |vendorType|
+                >
                     {{vendorType.label}}
                 </PowerSelect>
             </div>
@@ -10,7 +17,14 @@
         {{#if (eq this.selectedVendorType.value "integrated-vendor")}}
             <InputGroup @name="Choose integrated vendor provider">
                 <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
-                    <PowerSelect @options={{this.supportedIntegratedVendors}} @selected={{this.selectedIntegratedVendor}} @onChange={{this.onSelectIntegratedVendor}} @placeholder="Select integrated vendor provider" @triggerClass="form-select form-input" as |integratedVendor|>
+                    <PowerSelect
+                        @options={{this.supportedIntegratedVendors}}
+                        @selected={{this.selectedIntegratedVendor}}
+                        @onChange={{this.onSelectIntegratedVendor}}
+                        @placeholder="Select integrated vendor provider"
+                        @triggerClass="form-select form-input"
+                        as |integratedVendor|
+                    >
                         <div class="flex flex-row items-center">
                             <Image src={{integratedVendor.logo}} alt={{integratedVendor.code}} class="w-4 h-4" width="16" height="16" />
                             <h3 class="text-sm ml-4 dark:text-white">{{integratedVendor.name}}</h3>
@@ -31,17 +45,33 @@
                 </ContentPanel>
                 <ContentPanel @title="Credentials" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
                     {{#each this.selectedIntegratedVendor.credential_params as |param|}}
-                        <InputGroup @name={{smart-humanize param.key}} @value={{mut (get this.integratedVendor.credentials param.key)}} @helpText={{concat "Optionally supply your own " (smart-humanize param.key) " to configure this vendor."}} />
+                        <InputGroup
+                            @name={{smart-humanize param.key}}
+                            @value={{mut (get this.integratedVendor.credentials param.key)}}
+                            @helpText={{concat "Optionally supply your own " (smart-humanize param.key) " to configure this vendor."}}
+                        />
                     {{/each}}
                 </ContentPanel>
                 <ContentPanel @title="Options" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
                     {{#each this.selectedIntegratedVendor.option_params as |param|}}
                         {{#if param.options}}
                             <InputGroup @name={{smart-humanize param.key}}>
-                                <Select @value={{mut (get this.integratedVendor.options param.key)}} @options={{param.options}} @optionValue={{param.optionValue}} @optionLabel={{param.optionLabel}} @humanize={{true}} @placeholder={{concat "Select " (smart-humanize param.key)}} @onSelect={{fn (mut (get this.integratedVendor.options param.key))}} />
+                                <Select
+                                    @value={{mut (get this.integratedVendor.options param.key)}}
+                                    @options={{param.options}}
+                                    @optionValue={{param.optionValue}}
+                                    @optionLabel={{param.optionLabel}}
+                                    @humanize={{true}}
+                                    @placeholder={{concat "Select " (smart-humanize param.key)}}
+                                    @onSelect={{fn (mut (get this.integratedVendor.options param.key))}}
+                                />
                             </InputGroup>
                         {{else}}
-                            <InputGroup @name={{smart-humanize param.key}} @value={{mut (get this.integratedVendor.options param.key)}} @helpText={{concat "Optionally supply your own " (smart-humanize param.key) " to configure this vendor."}} />
+                            <InputGroup
+                                @name={{smart-humanize param.key}}
+                                @value={{mut (get this.integratedVendor.options param.key)}}
+                                @helpText={{concat "Optionally supply your own " (smart-humanize param.key) " to configure this vendor."}}
+                            />
                         {{/if}}
                     {{/each}}
                     <InputGroup>
@@ -59,8 +89,16 @@
                     {{#if this.showAdvancedOptions}}
                         <div class="mt-4">
                             <InputGroup @name="Custom Host" @value={{this.integratedVendor.host}} @helpText="Optionally provide a custom host that should be used for this integration." />
-                            <InputGroup @name="Custom Namespace" @value={{this.integratedVendor.namespace}} @helpText="Optionally provide a custom namespace or api version that should be used for the integration." />
-                            <InputGroup @name="Webhook URL" @value={{this.integratedVendor.webhook_url}} @helpText="Integrated vendors will typically require this so that Fleetbase can receive activity updates on the order. Do not change unless you know what you are doing! Changing this may break your order updates!" />
+                            <InputGroup
+                                @name="Custom Namespace"
+                                @value={{this.integratedVendor.namespace}}
+                                @helpText="Optionally provide a custom namespace or api version that should be used for the integration."
+                            />
+                            <InputGroup
+                                @name="Webhook URL"
+                                @value={{this.integratedVendor.webhook_url}}
+                                @helpText="Integrated vendors will typically require this so that Fleetbase can receive activity updates on the order. Do not change unless you know what you are doing! Changing this may break your order updates!"
+                            />
                         </div>
                     {{/if}}
                 </ContentPanel>
@@ -74,17 +112,31 @@
                 <InputGroup @name="Name" @value={{this.vendor.name}} @helpText="The vendor's name, typically the name of a business." />
                 <InputGroup @name="Email" @type="email" @value={{this.vendor.email}} @helpText="The vendor's email, this can be used to trigger emails to the vendor." />
                 <InputGroup @name="Phone" @type="tel" @value={{this.vendor.phone}} @helpText="The vendor's phone #, this can be used to trigger SMS or messages to the vendor." />
-                <InputGroup @name="Website" @value={{this.vendor.website}} @helpText="The vendor's website, optionally add the vendors website for reference." />
+                <InputGroup @name="Website" @value={{this.vendor.website_url}} @helpText="The vendor's website, optionally add the vendors website for reference." />
                 <InputGroup @name="Type">
                     <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
-                        <PowerSelect @options={{@vendorTypes}} @selected={{this.vendor.type}} @onChange={{fn (mut this.vendor.type)}} @placeholder="Select vendor type" @triggerClass="form-select form-input" as |type|>
+                        <PowerSelect
+                            @options={{@vendorTypes}}
+                            @selected={{this.vendor.type}}
+                            @onChange={{fn (mut this.vendor.type)}}
+                            @placeholder="Select vendor type"
+                            @triggerClass="form-select form-input"
+                            as |type|
+                        >
                             {{smart-humanize type}}
                         </PowerSelect>
                     </div>
                 </InputGroup>
                 <InputGroup @name="Status">
                     <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
-                        <PowerSelect @options={{@vendorStatusOptions}} @selected={{this.vendor.status}} @onChange={{fn (mut this.vendor.status)}} @placeholder="Select vendor status" @triggerClass="form-select form-input" as |status|>
+                        <PowerSelect
+                            @options={{@vendorStatusOptions}}
+                            @selected={{this.vendor.status}}
+                            @onChange={{fn (mut this.vendor.status)}}
+                            @placeholder="Select vendor status"
+                            @triggerClass="form-select form-input"
+                            as |status|
+                        >
                             {{smart-humanize status}}
                         </PowerSelect>
                     </div>
@@ -98,7 +150,16 @@
                             <Button @type="default" @size="xs" @icon="edit" @text={{if this.vendor.has_place "Edit" "New Address"}} @onClick={{this.editAddress}} />
                         </div>
                     </div>
-                    <ModelSelect @modelName="place" @selectedModel={{this.vendor.place}} @placeholder="Select Address" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{this.selectVendorAddress}} as |model|>
+                    <ModelSelect
+                        @modelName="place"
+                        @selectedModel={{this.vendor.place}}
+                        @placeholder="Select Address"
+                        @triggerClass="form-select form-input"
+                        @infiniteScroll={{false}}
+                        @renderInPlace={{true}}
+                        @onChange={{this.selectVendorAddress}}
+                        as |model|
+                    >
                         <div class="flex items-center flex-row justify-between">
                             <div class="truncate flex-1">{{n-a model.address}}</div>
                             <Badge @hideStatusDot={{true}} @status="info">{{model.public_id}}</Badge>

package/addon/components/vendor-form-panel/edit-form.hbs

@@ -60,7 +60,7 @@
         <InputGroup @name="Name" @value={{this.vendor.name}} @helpText="The vendor's name, typically the name of a business." />
         <InputGroup @name="Email" @type="email" @value={{this.vendor.email}} @helpText="The vendor's email, this can be used to trigger emails to the vendor." />
         <InputGroup @name="Phone" @type="tel" @value={{this.vendor.phone}} @helpText="The vendor's phone #, this can be used to trigger SMS or messages to the vendor." />
-        <InputGroup @name="Website" @value={{this.vendor.website}} @helpText="The vendor's website, optionally add the vendors website for reference." />
+        <InputGroup @name="Website" @value={{this.vendor.website_url}} @helpText="The vendor's website, optionally add the vendors website for reference." />
         <InputGroup @name="Type">
             <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                 <PowerSelect @options={{@vendorTypes}} @selected={{this.vendor.type}} @onChange={{fn (mut this.vendor.type)}} @placeholder="Select vendor type" @triggerClass="form-select form-input" as |type|>

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

@@ -1,48 +1,88 @@
-<Overlay @onLoad={{this.setOverlayContext}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizeble={{or this.isResizable @isResizable}} @width={{or this.width @width "600px"}}>
+<Overlay
+    @onLoad={{this.setOverlayContext}}
+    @position="right"
+    @noBackdrop={{true}}
+    @fullHeight={{true}}
+    @isResizeble={{or this.isResizable @isResizable}}
+    @width={{or this.width @width "600px"}}
+>
     <Overlay::Header @hideLeftSection={{true}} @actionsWrapperClass="flex-1 flex-col py-3" class="h-auto-i">
+        <div class="flex flex-row items-center justify-between w-full mb-4">
+            <div class="flex flex-1 space-x-2">
+                {{#if this.vendor.id}}
+                    <Button @type="default" @icon="warehouse" @helpText="View vendor details" @onClick={{this.onViewDetails}} />
+                {{/if}}
+            </div>
+            <div class="flex flex-1 justify-end">
+                <div class="mr-2">
+                    <Button @icon={{if this.vendor.id "save" "check"}} @type="primary" @text={{if this.vendor.id "Save Vendor" "Create Vendor"}} @onClick={{this.save}} />
+                </div>
+                <Button @type="default" @icon="times" @helpText={{if this.vendor.id "Cancel edit vendor" "Cancel new vendor"}} @onClick={{this.onPressCancel}} />
+            </div>
+        </div>
         <div class="flex flex-row justify-between w-full">
-            <div class="flex flex-1 flex-row">
-                <div class="w-14">
-                    <div class="upload-avatar-overlay w-12 h-12 flex items-center justify-start rounded-lg">
-                        <img src={{this.vendor.logo_url}} alt={{this.vendor.name}} height="48" width="48" class="h-12 w-12 rounded-lg shadow-sm" />
-                        <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
-                            <InputInfo @text="Upload new photo" />
-                        </Attach::Tooltip>
-                        <div class="upload-avatar-button-wrapper rounded-lg">
-                            <UploadButton @name="photos" @accept="image/*" @onFileAdded={{this.onUploadNewPhoto}} @icon="upload" @hideButtonText={{true}} @labelClass="upload-avatar-label-overlay" class="w-12 btn-reset" />
+            <div class="flex flex-col flex-1 w-3/4">
+                <div class="flex flex-row">
+                    <div class="w-14">
+                        <div class="upload-avatar-overlay w-12 h-12 flex items-center justify-start rounded-lg">
+                            <img src={{this.vendor.logo_url}} alt={{this.vendor.name}} height="48" width="48" class="h-12 w-12 rounded-lg shadow-sm" />
+                            <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
+                                <InputInfo @text="Upload new photo" />
+                            </Attach::Tooltip>
+                            <div class="upload-avatar-button-wrapper rounded-lg">
+                                <UploadButton
+                                    @name="photos"
+                                    @accept="image/*"
+                                    @onFileAdded={{this.onUploadNewPhoto}}
+                                    @icon="upload"
+                                    @hideButtonText={{true}}
+                                    @labelClass="upload-avatar-label-overlay"
+                                    class="w-12 btn-reset"
+                                />
+                            </div>
                         </div>
                     </div>
-                </div>
-                <div class="flex flex-col">
-                    <h1 class="text-gray-900 dark:text-white text-2xl">
-                        {{#if this.vendor.id}}
-                            {{this.vendor.name}}
-                        {{else}}
-                            <span>New Vendor</span>
-                        {{/if}}
-                    </h1>
-                    <div class="-mt-1">
-                        <div class="flex flex-row items-center">
-                            <span class="text-sm dark:text-gray-500 text-gray-700 mr-3">{{n-a (smart-humanize this.vendor.type)}}</span>
+                    <div class="flex flex-col">
+                        <h1 class="text-gray-900 dark:text-white text-2xl">
+                            {{#if this.vendor.id}}
+                                {{this.vendor.name}}
+                            {{else}}
+                                {{#if this.vendor.name}}
+                                    {{this.vendor.name}}
+                                {{else}}
+                                    <span>New Vendor</span>
+                                {{/if}}
+                            {{/if}}
+                        </h1>
+                        <div class="-mt-1">
+                            <div class="flex flex-row items-center">
+                                <span class="text-sm dark:text-blue-400 text-blue-600">{{n-a (smart-humanize this.vendor.type)}}</span>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
-            <div>
-                <Button @icon={{if this.vendor.id "save" "check"}} @type="primary" @text={{if this.vendor.id "Save Vendor" "Create Vendor"}} @onClick={{this.save}} @wrapperClass="mr-2" />
-                {{#if this.vendor.id}}
-                    <Button @type="default" @icon="id-card" @helpText="View fleet details" @onClick={{this.onViewDetails}} @wrapperClass="mr-2" />
-                {{/if}}
-                <Button @type="default" @icon="times" @helpText={{if this.vendor.id "Cancel edit vendor" "Cancel new vendor"}} @onClick={{this.onPressCancel}} />
+            <div class="flex justify-end w-1/4">
+                <Badge @status={{this.vendor.status}} @type="info" @hideStatusDot={{true}} />
             </div>
         </div>
     </Overlay::Header>
 
     <Overlay::Body @wrapperClass="new-service-rate-overlay-body px-4 space-y-4 pt-4" @increaseInnerBodyHeightBy={{1000}}>
         {{#if this.isEditing}}
-            <VendorFormPanel::EditForm @vendor={{this.vendor}} @vendorTypes={{this.vendorTypeOptions}} @vendorStatusOptions={{this.vendorStatusOptions}} @onVendorChanged={{this.onVendorChanged}} />
+            <VendorFormPanel::EditForm
+                @vendor={{this.vendor}}
+                @vendorTypes={{this.vendorTypeOptions}}
+                @vendorStatusOptions={{this.vendorStatusOptions}}
+                @onVendorChanged={{this.onVendorChanged}}
+            />
         {{else}}
-            <VendorFormPanel::CreateForm @vendor={{this.vendor}} @vendorTypes={{this.vendorTypeOptions}} @vendorStatusOptions={{this.vendorStatusOptions}} @onVendorChanged={{this.onVendorChanged}} />
+            <VendorFormPanel::CreateForm
+                @vendor={{this.vendor}}
+                @vendorTypes={{this.vendorTypeOptions}}
+                @vendorStatusOptions={{this.vendorStatusOptions}}
+                @onVendorChanged={{this.onVendorChanged}}
+            />
         {{/if}}
     </Overlay::Body>
 </Overlay>

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

@@ -4,6 +4,8 @@ import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 import contextComponentCallback from '../utils/context-component-callback';
 import applyContextComponentArguments from '../utils/apply-context-component-arguments';
+import getVendorTypeOptions from '../utils/get-vendor-type-options';
+import getVendorStatusOptions from '../utils/get-vendor-status-options';
 
 export default class VendorFormPanelComponent extends Component {
     /**
@@ -64,52 +66,14 @@ export default class VendorFormPanelComponent extends Component {
      *
      * @memberof VendorFormPanelComponent
      */
-    @tracked vendorTypeOptions = [
-        'carrier-trucking-company',
-        'carrier-shipping-line',
-        'carrier-air-cargo',
-        'carrier-rail',
-        'freight-forwarder',
-        'warehouse-provider',
-        'broker',
-        'maintenance-repair-facility',
-        'fuel-station',
-        'tire-service-provider',
-        'equipment-rental',
-        'customs-broker',
-        'third-party-logistics-provider',
-        'technology-provider',
-        'consultant',
-        'insurance-provider',
-        'last-mile-delivery-service',
-        'packing-crating-service',
-        'intermodal-operator',
-        'drayage-service-provider',
-        'cold-chain-provider',
-        'hazardous-material-specialist',
-        'parcel-courier',
-        'bulk-material-handler',
-        'towing-service',
-        'cargo-inspector',
-        'pallet-provider',
-        'label-packaging-material-supplier',
-        'driver-leasing-service',
-        'vehicle-manufacturer',
-        'vehicle-dealership',
-        'parts-supplier',
-        'logistics-association',
-        'regulatory-body',
-        'training-certification-provider',
-        'general-vendor',
-        'ecommerce',
-    ];
+    @tracked vendorTypeOptions = getVendorTypeOptions();
 
     /**
      * Applicable status options for vendor.
      *
      * @memberof VendorFormPanelComponent
      */
-    @tracked vendorStatusOptions = ['pending', 'active', 'do-not-contact', 'prospective', 'archived'];
+    @tracked vendorStatusOptions = getVendorStatusOptions();
 
     /**
      * Constructs the component and applies initial state.

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

@@ -32,7 +32,7 @@
                 {{/if}}
             </div>
         {{else}}
-            <div class="grid grid-cols-3 md:grid-cols-2 gap-2 text-xs dark:text-gray-100">
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 text-xs dark:text-gray-100">
                 <div class="field-info-container">
                     <div class="field-name">Name</div>
                     <div class="field-value">{{n-a this.vendor.name}}</div>
@@ -67,7 +67,7 @@
                     </div>
                 </div>
 
-                <div class="field-info-container">
+                <div class="field-info-container col-span-2">
                     <div class="field-name">Address</div>
                     <div class="field-value">{{n-a this.vendor.address}}</div>
                 </div>

package/addon/components/vendor-panel.hbs

@@ -1,4 +1,11 @@
-<Overlay @onLoad={{this.setOverlayContext}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizable={{or this.isResizable @isResizable}} @width={{or this.width @width "600px"}}>
+<Overlay
+    @onLoad={{this.setOverlayContext}}
+    @position="right"
+    @noBackdrop={{true}}
+    @fullHeight={{true}}
+    @isResizable={{or this.isResizable @isResizable}}
+    @width={{or this.width @width "600px"}}
+>
     <Overlay::Header @hideLeftSection={{true}} @actionsWrapperClass="flex-1 flex-col py-3" class="h-auto-i">
         <div class="flex flex-row items-center justify-between w-full mb-4">
             <div class="flex flex-1 space-x-2">
@@ -12,7 +19,14 @@
             <div class="flex flex-1 flex-row">
                 <div class="w-14">
                     <div class="w-12 h-12 flex items-center justify-start rounded-lg">
-                        <Image src={{this.vendor.logo_url}} @fallbackSrc={{config "defaultValues.vendorImage"}} alt={{this.vendor.name}} height="48" width="48" class="h-12 w-12 rounded-lg shadow-sm" />
+                        <Image
+                            src={{this.vendor.logo_url}}
+                            @fallbackSrc={{config "defaultValues.vendorImage"}}
+                            alt={{this.vendor.name}}
+                            height="48"
+                            width="48"
+                            class="h-12 w-12 rounded-lg shadow-sm"
+                        />
                         <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
                             <InputInfo @text={{this.vendor.name}} />
                         </Attach::Tooltip>