@fleetbase/fleetops-engine 0.0.1

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

@@ -0,0 +1,83 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="flex">
+            <div class="w-32 mb-6 mr-6">
+                <Image src={{@options.driver.photo_url}} @fallbackSrc={{config "defaultValues.driverImage"}} alt={{@options.driver.name}} height="128" width="128" class="h-32 w-32 rounded-md" />
+                <UploadButton @name="photos" @accept="image/*" @onFileAdded={{fn @options.uploadNewPhoto}} class="w-32" />
+            </div>
+            <div class="flex-1">
+                <div class="grid grid-cols-1 gap-2 text-xs dark:text-gray-100">
+                    <div class="input-group">
+                        <label>
+                            Name
+                        </label>
+                        <Input @value={{@options.driver.name}} type="text" class="w-full form-input" placeholder="Name" />
+                    </div>
+                </div>
+
+                <div class="grid grid-cols-2 gap-2 text-xs dark:text-gray-100">
+                    <div class="input-group">
+                        <label>
+                            Internal ID
+                        </label>
+                        <Input @value={{@options.driver.internal_id}} type="text" class="w-full form-input" placeholder="Internal ID" />
+                    </div>
+
+                    <div class="input-group">
+                        <label>
+                            Drivers License
+                        </label>
+                        <Input @value={{@options.driver.drivers_license_number}} type="text" class="w-full form-input" placeholder="Drivers License" />
+                    </div>
+
+                    <div class="input-group">
+                        <label>
+                            Email
+                        </label>
+                        <Input @value={{@options.driver.email}} type="text" class="w-full form-input" placeholder="Email" />
+                    </div>
+
+                    <div class="input-group">
+                        <label>
+                            Phone
+                        </label>
+                        <PhoneInput @value={{@options.driver.phone}} @onInput={{fn (mut @options.driver.phone)}} class="form-input w-full" />
+                    </div>
+
+                    <div class="input-group">
+                        <label>
+                            Vendor
+                        </label>
+                        <ModelSelect @modelName="vendor" @selectedModel={{@options.driver.vendor}} @placeholder="Select Vendor" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut @options.driver.vendor)}} as |model|>
+                            {{model.name}}
+                        </ModelSelect>
+                    </div>
+
+                    <div class="input-group">
+                        <label>
+                            Vehicle
+                        </label>
+                        <ModelSelect @modelName="vehicle" @selectedModel={{@options.driver.vehicle}} @placeholder="Select Vehicle" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut @options.driver.vehicle)}} as |model|>
+                            {{model.display_name}}
+                        </ModelSelect>
+                    </div>
+
+                    <div class="input-group">
+                        <label>
+                            City
+                        </label>
+                        <Input @value={{@options.driver.city}} type="text" class="w-full form-input" placeholder="City" />
+                    </div>
+
+                    <div class="input-group">
+                        <label>
+                            Country
+                        </label>
+                        <CountrySelect class="w-full form-input form-select form-datalist" @value={{@options.driver.country}} @onChange={{fn (mut @options.driver.country)}} placeholder="Country" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    {{yield}}
+</Modal::Default>

package/addon/components/modals/edit-meta-form.hbs

@@ -0,0 +1,20 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="flex flex-row mb-5">
+            <Button @text="Add metafield" @icon="plus" @iconPrefix="fas" @onClick={{fn @options.addMetaField @options.meta}} />
+        </div>
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-2">
+            {{#each @options.meta as |metaField index|}}
+                <div class="input-group">
+                    <div class="flex justify-between items-center mb-1">
+                        <Input class="form-input border-0 px-2 py-1 m-0 bg-white dark:bg-gray-900 shadow-none" @value={{metaField.label}} placeholder={{metaField.label}} />
+                        <a href="javascript:;" class="text-xs" {{on "click" (fn @options.removeMetaField @options.meta index)}}>
+                            <FaIcon @icon="trash" @size="sm" class="mr-1" /> Remove
+                        </a>
+                    </div>
+                    <Input class="w-full form-input" @value={{metaField.value}} placeholder={{metaField.label}} />
+                </div>
+            {{/each}}
+        </div>
+    </div>
+</Modal::Default>

package/addon/components/modals/entity-form.hbs

@@ -0,0 +1,57 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="flex">
+            <div class="w-32 mb-6 mr-6 flex flex-col items-center">
+                <Image src={{@options.entity.photo_url}} alt={{@options.entity.name}} height="128" width="128" class="h-32 w-32 rounded-md" />
+                <UploadButton @name="photos" @accept="image/*" @onFileAdded={{fn @options.uploadNewPhoto}} class="w-32" />
+            </div>
+            <div class="flex-1 space-y-4">
+                <ContentPanel @title="Details" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                    <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2">
+                        <InputGroup @name="Name" @value={{@options.entity.name}} @helpText="Name of item or entity." @wrapperClass="mb-2" />
+                        <InputGroup @name="Internal ID" @value={{@options.entity.internal_id}} @helpText="Use this field to optionally set a custom identifier or internal identifier for the entity." @wrapperClass="mb-2" />
+                        <InputGroup @name="SKU" @value={{@options.entity.sku}} @helpText="Stock keeping unit number if applicable." @wrapperClass="mb-2" />
+                        <div></div>
+                        <InputGroup @name="Description" @helpText="Additional description text of entity." @wrapperClass="col-span-2 mb-2">
+                            <Textarea @value={{@options.entity.description}} type="text" class="w-full form-input" placeholder="Description" />
+                        </InputGroup>
+                    </div>
+                </ContentPanel>
+
+                <ContentPanel @title="Pricing & Value" @open={{false}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                    <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2">
+                        <InputGroup @name="Price" @helpText="Price of entity." @wrapperClass="mb-2">
+                            <MoneyInput class="w-full" @value={{@options.entity.price}} @currency={{@options.entity.currency}} @canSelectCurrency={{true}} @onCurrencyChange={{fn (mut @options.entity.currency)}} />
+                        </InputGroup>
+                        <InputGroup @name="Sale Price" @helpText="Sale price or discounted price of entity." @wrapperClass="mb-2">
+                            <MoneyInput class="w-full" @value={{@options.entity.sale_price}} @currency={{@options.entity.currency}} @canSelectCurrency={{true}} @onCurrencyChange={{fn (mut @options.entity.currency)}} />
+                        </InputGroup>
+                        <InputGroup @name="Declared Value" @helpText="Declared value of entity, useful is insurable." @wrapperClass="mb-2">
+                            <MoneyInput class="w-full" @value={{@options.entity.declared_value}} @currency={{@options.entity.currency}} @canSelectCurrency={{true}} @onCurrencyChange={{fn (mut @options.entity.currency)}} />
+                        </InputGroup>
+                    </div>
+                </ContentPanel>
+
+                <ContentPanel @title="Measurements & Weight" @open={{false}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                    <div class="grid grid-cols-3 gap-1">
+                        <InputGroup @name="Length" @helpText="The length of the entity." @wrapperClass="mb-2">
+                            <UnitInput class="w-full" @value={{@options.entity.length}} @unit={{@options.entity.dimensions_unit}} @canSelectUnit={{true}} @onUnitChange={{fn (mut @options.entity.dimensions_unit)}} />
+                        </InputGroup>
+                        <InputGroup @name="Width" @helpText="The width of the entity." @wrapperClass="mb-2">
+                            <UnitInput class="w-full" @value={{@options.entity.width}} @unit={{@options.entity.dimensions_unit}} @canSelectUnit={{true}} @onUnitChange={{fn (mut @options.entity.dimensions_unit)}} />
+                        </InputGroup>
+                        <InputGroup @name="Height" @helpText="The height of the entity." @wrapperClass="mb-2">
+                            <UnitInput class="w-full" @value={{@options.entity.height}} @unit={{@options.entity.dimensions_unit}} @canSelectUnit={{true}} @onUnitChange={{fn (mut @options.entity.dimensions_unit)}} />
+                        </InputGroup>
+                    </div>
+                    <div class="grid grid-cols-3 gap-1">
+                        <InputGroup @name="Weight" @helpText="The weight of the entity." @wrapperClass="mb-2">
+                            <UnitInput class="w-full" @value={{@options.entity.weight}} @measurement="weight" @unit={{@options.entity.weight_unit}} @canSelectUnit={{true}} @onUnitChange={{fn (mut
+                                                            @options.entity.weight_unit)}} />
+                        </InputGroup>
+                    </div>
+                </ContentPanel>
+            </div>
+        </div>
+    </div>
+</Modal::Default>

package/addon/components/modals/entity-meta-field-prompt.hbs

@@ -0,0 +1,6 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <KeyInput @name="Meta Field Key" @value={{@options.keyName}} @onChange={{fn (mut @options.keyName)}} />
+    </div>
+    {{yield}}
+</Modal::Default>

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

@@ -0,0 +1,31 @@
+<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">Name</div>
+                <div class="field-value">{{n-a @options.fleet.name}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Service Area</div>
+                <div class="field-value">{{n-a @options.fleet.serviceArea.name}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Zone</div>
+                <div class="field-value">{{n-a @options.fleet.zone.name}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Task</div>
+                <div class="field-value">{{n-a @options.fleet.task}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Active Manpower</div>
+                <div class="field-value">{{@options.fleet.drivers_online_count}} of {{@options.fleet.drivers_count}} Online</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Date Created</div>
+                <div class="field-value">{{@options.fleet.createdAtShort}}</div>
+            </div>
+        </div>
+        <FleetDriverListing @fleet={{@options.fleet}} @onAddDriver={{@options.addDriver}} @onRemoveDriver={{@options.removeDriver}} />
+    </div>
+</Modal::Default>

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

@@ -0,0 +1,26 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="grid grid-cols-2 gap-2 text-xs dark:text-gray-100">
+            <div class="col-span-2">
+                <InputGroup @name="Fleet Name" @value={{@options.fleet.name}} />
+            </div>
+            <InputGroup @name="Assign to Service Area" @value={{@options.fleet.service_area}}>
+                <ModelSelect @modelName="service-area" @selectedModel={{@options.fleet.service_area}} @placeholder="Select service area to assign fleet to" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut @options.fleet.service_area)}} as |model|>
+                    {{model.name}}
+                </ModelSelect>
+            </InputGroup>
+            {{#if @options.fleet.service_area}}
+                <InputGroup @name="Assign to Zone" @value={{@options.fleet.zone}}>
+                    <ModelSelect @modelName="zone" @selectedModel={{@options.fleet.zone}} @query={{hash service_area_uuid=@options.fleet.service_area.id}} @placeholder="Select zone to assign fleet to" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut @options.fleet.zone)}} as |model|>
+                        {{model.name}}
+                    </ModelSelect>
+                </InputGroup>
+            {{/if}}
+            <InputGroup @name="Task/ Mission" @helpText="Give a description of this fleet's primary task or mission if applicable." @value={{@options.fleet.task}} />
+            <InputGroup @name="Status" @helpText="Select the status of the fleet.">
+                <Select @options={{@options.statusOptions}} @value={{@options.fleet.status}} @onSelect={{fn (mut @options.fleet.status)}} @placeholder="Select status" class="w-full" />
+            </InputGroup>
+        </div>
+    </div>
+    {{yield}}
+</Modal::Default>

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

@@ -0,0 +1,34 @@
+<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">Driver</div>
+                <div class="field-value">{{n-a @options.fuelReport.driver_name}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Vehicle</div>
+                <div class="field-value">{{n-a @options.fuelReport.vehicle_name}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Odometer</div>
+                <div class="field-value">{{n-a @options.fuelReport.odometer}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Cost</div>
+                <div class="field-value">{{format-currency @options.fuelReport.amount @options.fuelReport.currency}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Fuel/ Volume</div>
+                <div class="field-value">{{pluralize @options.fuelReport.volume @options.fuelReport.metric_unit}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Date Created</div>
+                <div class="field-value">{{@options.fuelReport.createdAtShort}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Coordinates</div>
+                <div class="field-value">{{point-coordinates @options.fuelReport.location}}</div>
+            </div>
+        </div>
+    </div>
+</Modal::Default>

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

@@ -0,0 +1,26 @@
+<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="Driver">
+                <ModelSelect @modelName="driver" @selectedModel={{@options.fuelReport.driver}} @placeholder="Select Driver" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut @options.fuelReport.driver)}} @onChangeId={{fn (mut @options.fuelReport.driver_uuid)}} as |model|>
+                    {{model.name}}
+                </ModelSelect>
+            </InputGroup>
+            <InputGroup @name="Vehicle">
+                <ModelSelect @modelName="vehicle" @selectedModel={{@options.fuelReport.vehicle}} @placeholder="Select Vehicle" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut @options.fuelReport.vehicle)}} @onChangeId={{fn (mut @options.fuelReport.vehicle_uuid)}} as |model|>
+                    {{model.display_name}}
+                </ModelSelect>
+            </InputGroup>
+            <InputGroup @name="Odometer" @type="number" @value={{@options.fuelReport.odometer}} />
+            <InputGroup @name="Cost">
+                <MoneyInput class="w-full" @value={{@options.fuelReport.amount}} @currency={{@options.fuelReport.currency}} @canSelectCurrency={{true}} @onCurrencyChange={{fn (mut @options.fuelReport.currency)}} />
+            </InputGroup>
+            <InputGroup @name="Volume" @helpText="Select the metric unit and volume of fuel to report." @wrapperClass="w-full">
+                <UnitInput class="w-full" @measurement="volume" @value={{@options.fuelReport.volume}} @unit={{@options.fuelReport.metric_unit}} @canSelectUnit={{true}} @onUnitChange={{fn (mut @options.fuelReport.metric_unit)}} />
+            </InputGroup>
+            <InputGroup @name="Coordinates">
+                <CoordinatesInput @value={{@options.fuelReport.location}} @onChange={{fn (mut @options.fuelReport.location)}} />
+            </InputGroup>
+        </div>
+    </div>
+</Modal::Default>

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

@@ -0,0 +1,42 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="grid grid-cols-3 gap-2 text-xs dark:text-gray-100">
+            <div class="col-span-3 mb-5">
+                <label class="block mb-2 font-bold">
+                    Group Name
+                </label>
+                <span class="block truncate">
+                    {{@options.group.name}}
+                </span>
+            </div>
+
+            <div class="mb-5">
+                <label class="block mb-2 font-bold">
+                    Members
+                </label>
+                <span class="block truncate">
+                    {{@options.user.internal_id}}
+                </span>
+            </div>
+
+            <div class="mb-5">
+                <label class="block mb-2 font-bold">
+                    Status
+                </label>
+                <Badge @status={{@options.vendor.status}} />
+            </div>
+
+            <div class="col-span-1"></div>
+
+            <div class="col-span-2 mb-5">
+                <label class="block mb-2 font-bold">
+                    Address
+                </label>
+                <div>
+                    {{(html-safe @options.vendor.address)}}
+                </div>
+            </div>
+        </div>
+    </div>
+    {{yield}}
+</Modal::Default>

package/addon/components/modals/group-form.hbs

@@ -0,0 +1,54 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="text-xs dark:text-gray-100">
+            <div class="input-group">
+                <label>
+                    Group Name
+                </label>
+                <Input @value={{@options.group.name}} type="text" class="w-full form-input" placeholder=" Group Name" />
+            </div>
+
+            <div class="input-group">
+                <div class="mb-4">
+                    <InputLabel class="mb-2" @labelText="Select users to add to group"
+                        @helpText="Search and select users to add to this group." />
+            
+                    <div class="flex items-start justify-between">
+                        <ModelSelect @modelName="user" @selectedModel={{@options.lastSelectedUser}} @placeholder="Select user to add to group"
+                            @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{@options.addUser}} as |model|>
+                            {{model.name}}
+                        </ModelSelect>
+                    </div>
+                </div>
+                <div
+                    class="h-48 overflow-y-scroll bg-white border border-gray-200 rounded shadow-sm dark:bg-gray-800 dark:border-gray-900">
+                    {{#if @options.group.users}}
+                        {{#each @options.group.users as |user|}}
+                            <div
+                                class="flex items-center justify-between p-3 text-sm text-gray-800 border-b border-gray-200 dark:border-gray-900 dark:text-gray-100">
+                                <span>
+                                    {{user.name}}
+                                </span>
+                                <span>
+                                    <a href="javascript:;" class="text-blue-300 no-underline hover:text-blue-500" {{on "click" (fn
+                                        @options.removeUser user)}}>
+                                        <FaIcon @icon="times" @prefix="fas" />
+                                    </a>
+                                </span>
+                            </div>
+                        {{/each}}
+                    {{else}}
+                        <div class="flex items-center justify-center h-full dark:text-gray-100">
+                            <div class="flex flex-col items-center justify-center w-2/4 h-full my-8 text-center">
+                                <div class="text-base font-semibold">
+                                    No users added to group
+                                </div>
+                            </div>
+                        </div>
+                    {{/if}}
+                </div>
+            </div>
+        </div>
+    </div>
+    {{yield}}
+</Modal::Default>

package/addon/components/modals/install-prompt.hbs

@@ -0,0 +1,21 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container space-y-4">
+        <div class="flex">
+            <div>
+                <div class="flex items-center justify-center p-3 rounded-md bg-gray-600 shadow mr-4">
+                    <FaIcon @icon="cloud-download" class="text-blue-400" @size="2x" />
+                </div>
+            </div>
+            <div class="flex-1 dark:text-gray-100">
+                <p class="text-base mb-2">You are attempting to install the extension "{{or @options.extensionName}}".
+                    Are you sure you wish to proceed with this installation?</p>
+                <small>Some extensions require access to your resources.</small>
+            </div>
+        </div>
+        {{#if @options.isInstalling}}
+            <div>
+                <ProgressBar @task="install" @progress={{@options.installProgress}} />
+            </div>
+        {{/if}}
+    </div>
+</Modal::Default>

package/addon/components/modals/map-field-form.hbs

@@ -0,0 +1,9 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="grid grid-cols-1 gap-2 text-xs dark:text-gray-100">
+            <InputGroup @name="Label" @value={{@options.label}}  />
+            <InputGroup @name="Value" @value={{@options.value}}  />
+        </div>
+    </div>
+    {{yield}}
+</Modal::Default>

package/addon/components/modals/map-field-group-form.hbs

@@ -0,0 +1,6 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <InputGroup @name="Name" @value={{@options.groupName}} />
+    </div>
+    {{yield}}
+</Modal::Default>

package/addon/components/modals/map-layer-form.hbs

@@ -0,0 +1,29 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="mb-4 border border-gray-700 shadow-sm rounded-md pt-2 px-4">
+            <InputGroup @name="Layer Type" @helpText="Select the type of layer you wish to create.">
+                <Select @options={{@options.layerTypes}} @value={{@options.selectedLayerType}} @onSelect={{fn (mut @options.selectedLayerType)}} @placeholder="Select layer type..." class="w-full" />
+            </InputGroup>
+        </div>
+        {{#if (eq @options.selectedLayerType "Zone")}}
+            <InputGroup @name="Service Area" @helpText="Select the Service Area to attribute this Zone to.">
+                <ModelSelect @modelName="service-area" @selectedModel={{@options.layerOptions.service_area}} @placeholder="Select service area to assign fleet to" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut @options.layerOptions.service_area)}} as |model|>
+                    {{model.name}}
+                </ModelSelect>
+            </InputGroup>
+        {{/if}}
+        <InputGroup @value={{@options.layerOptions.name}} @name="{{@options.selectedLayerType}} Name" @helpText="Set a display name for the {{@options.selectedLayerType}}." @required={{true}} />
+        {{#if (eq @options.selectedLayerType "Service Area")}}
+            <InputGroup @name="Service Area Type" @helpText="Select the type definition for this service area .">
+                <Select @options={{@options.serviceAreaTypes}} @value={{@options.layerOptions.type}} @onSelect={{fn (mut @options.layerOptions.type)}} @placeholder="Select service area type..." class="w-full" />
+            </InputGroup>
+        {{/if}}
+        <InputGroup @type="color" @value={{@options.layerOptions.stroke_color}} @name="{{@options.selectedLayerType}} Border Color" @helpText="Customize the border color for this {{@options.selectedLayerType}}." class="p-0 border-0 m-0 w-8 h-8 bg-transparent rounded-none" />
+        <InputGroup @type="color" @value={{@options.layerOptions.color}} @name="{{@options.selectedLayerType}} Color" @helpText="Customize the fill color for this {{@options.selectedLayerType}}." class="p-0 border-0 m-0 w-8 h-8 bg-transparent rounded-none" />
+        {{#if (eq @options.selectedLayerType "Service Area")}}
+            <InputGroup @name="Service Area Country" @helpText="Optionally set the country in which this Service Area is located or based in.">
+                <CountrySelect class="w-full form-input" @value={{@options.layerOptions.country}} @onChange={{fn (mut @options.layerOptions.country)}} />
+            </InputGroup>
+        {{/if}}
+    </div>
+</Modal::Default>

package/addon/components/modals/meta-field-form.hbs

@@ -0,0 +1,8 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="grid grid-cols-1 gap-2 text-xs dark:text-gray-100">
+            <InputGroup @name="Label" @value={{@options.label}} />
+            <InputGroup @name="Value" @value={{@options.value}} />
+        </div>
+    </div>
+</Modal::Default>

package/addon/components/modals/meta-field-group-form.hbs

@@ -0,0 +1,5 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <InputGroup @name="Name" @value={{@options.groupName}} />
+    </div>
+</Modal::Default>

package/addon/components/modals/new-order-config.hbs

@@ -0,0 +1,11 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <InputGroup @name="Config Name" @value={{@options.name}} />
+        <InputGroup @name="Config Description" @value={{@options.description}} />
+        <InputGroup @name="Config Tags">
+            <TagInput class="form-input" @placeholder="Add tags" @allowSpacesInTags={{true}} @tags={{@options.tags}} @addTag={{@options.addTag}} @removeTagAtIndex={{@options.removeTag}} as |tag|>
+                {{tag}}
+            </TagInput>
+        </InputGroup>
+    </div>
+</Modal::Default>

package/addon/components/modals/option-prompt.hbs

@@ -0,0 +1,17 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="flex items-center justify-center p-3">
+            <select class="form-select w-full" {{on "change" @options.selectOption}}>
+                <option selected disabled>
+                    {{@options.title}}
+                </option>
+                {{#each @options.promptOptions as |promptOption|}}
+                    <option value={{promptOption}} selected={{eq @options.selected promptOption}}>
+                        {{humanize promptOption}}
+                    </option>
+                {{/each}}
+            </select>
+        </div>
+    </div>
+    {{yield}}
+</Modal::Default>

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

@@ -0,0 +1,25 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <InputGroup @name="Select Driver">
+            <ModelSelect @modelName="driver" @selectedModel={{@options.order.driver_assigned}} @placeholder="Select Driver to Assign" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut @options.order.driver_assigned)}} as |model|>
+                <div class="flex items-center">
+                    <div class="w-7">
+                        <FaIcon @icon="id-card-alt" />
+                    </div>
+                    <div class="flex-1 flex flex-row truncate">
+                        <span class="uppercase mr-2">{{model.name}}</span>
+                        <span class="uppercase">{{model.phone}}</span>
+                    </div>
+                    {{#if @options.order.facilitator}}
+                        <div class="px-1 ml-2 leading-5 bg-green-400 rounded shadow">
+                            <span class="text-xs text-green-900">
+                                {{@options.order.facilitator.name}}
+                            </span>
+                        </div>
+                    {{/if}}
+                </div>
+            </ModelSelect>
+        </InputGroup>
+
+    </div>
+</Modal::Default>

package/addon/components/modals/order-config-new-status.hbs

@@ -0,0 +1,5 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <InputGroup @name="New Status" @value={{@options.statusName}} @helpText="Enter a new activity status to add to the flow" />
+    </div>
+</Modal::Default>

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

@@ -0,0 +1,18 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="px-3 mb-4">
+            <div class="flex justify-between items-start">
+                <div class="flex-1 flex items-center">
+                    <label class="dark:text-gray-100 mr-3">Schedule</label>
+
+                    <DateTimeInput class="form-input" @value={{@options.order.scheduled_at}} @minDate={{format-date (now) "yyyy-MM-d" }} @minTime={{format-date (now) "HH:mm" }} @onUpdate={{@options.reschedule}} />
+                </div>
+                <div class="flex justify-end">
+                    <Button @type="danger" @text="Unschedule" @onClick={{@options.unschedule}} @disabled={{not @options.order.scheduled_at}} />
+                </div>
+            </div>
+        </div>
+
+        <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>