@fleetbase/fleetops-engine 0.0.1

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

@@ -0,0 +1,63 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="grid grid-cols-2 gap-3 text-xs dark:text-gray-100">
+            <InputGroup @name="Internal ID" @value={{@options.order.internal_id}} @helpText="Use this field to optionally set a custom identifier or internal identifier for the order." />
+
+            <div class="input-group">
+                <InputLabel @labelText="Schedule" @helpText="The date and time the order will be dispatched. If no driver is assigned at time of dispatch, the dispatch will fail. If the order is Ad-Hoc the order will be pinged to drivers in vicinity of pickup." />
+                <DateTimeInput class="form-input" @value={{@options.order.scheduled_at}} @minDate={{format-date (now) "yyyy-MM-d"}} @minTime={{format-date (now) "HH:mm"}} @onUpdate={{@options.scheduleOrder}} @disabled={{@options.order.isIntegratedVendorOrder}} />
+            </div>
+
+            <InputGroup @name="Customer" @helpText="Optionally assign the customer of this order. If it's a new customer, use the 'New Customer' button above.">
+                <ModelSelect @modelName="customer" @selectedModel={{@options.order.customer}} @placeholder="Select Customer" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @allowClear={{true}} @onChange={{fn @options.setOrderCustomer}} as |model|>
+                    <div class="flex items-center">
+                        <div class="w-7">
+                            <FaIcon @icon={{if model.isVendor "warehouse" "user" }} />
+                        </div>
+                        <span class="uppercase">
+                            {{model.name}}
+                        </span>
+                    </div>
+                </ModelSelect>
+            </InputGroup>
+
+            <InputGroup @name="Facilitator" @helpText="Optionally assign a facilitator for this order, a facilitator can be a 3rd party subcontractor or service that will facilitate the transport of this order.">
+                <ModelSelect @modelName="facilitator" @selectedModel={{@options.order.facilitator}} @placeholder="Select Facilitator" @triggerClass="form-select form-input" @allowClear={{true}} @infiniteScroll={{false}} @renderInPlace={{true}} @disabled={{@options.order.isIntegratedVendorOrder}} @onChange={{@options.setOrderFacilitator}} as |model|>
+                    <div class="flex items-center">
+                        <div class="w-7">
+                            {{#if model.isIntegratedVendor}}
+                                <Image src={{model.photo_url}} alt={{model.name}} class="w-4 h-4" width="16" height="16" />
+                            {{else}}
+                                <FaIcon @icon={{if model.isVendor "warehouse" "user" }} />
+                            {{/if}}
+                        </div>
+                        <span class="uppercase">
+                            {{model.name}}
+                        </span>
+                    </div>
+                </ModelSelect>
+            </InputGroup>
+
+            <InputGroup @name="Assign Driver" @helpText="Assign the driver this order will be dispatched to.">
+                <ModelSelect @modelName="driver" @selectedModel={{@options.order.driver_assigned}} @query={{this.driversQuery}} @placeholder="Select Driver" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @disabled={{@options.order.isIntegratedVendorOrder}} @allowClear={{true}} @onChange={{@options.setDriver}} 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 this.order.facilitator}}
+                            <div class="px-1 ml-2 leading-5 bg-green-400 rounded shadow">
+                                <span class="text-xs text-green-900">
+                                    {{this.order.facilitator.name}}
+                                </span>
+                            </div>
+                        {{/if}}
+                    </div>
+                </ModelSelect>
+            </InputGroup>
+        </div>
+    </div>
+</Modal::Default>

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

@@ -0,0 +1,84 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container my-5">
+        {{#if @options.isProcessing}}
+            <div class="min-h-56 dropzone w-full rounded px-4 py-8 min-h text-gray-900 dark:text-white text-center flex flex-col items-center justify-center border-2 border-dashed border-gray-200 dark:border-indigo-500">
+                <div class="flex items-center justify-center py-5">
+                    <PageLoader class="text-sm dar:text-gray-100" @loadingMessage="Processing import..." />
+                </div>
+            </div>
+        {{else}}
+            {{#let (file-queue name="spreadsheets" onFileAdded=this.queueFile accept=(join "," @options.acceptedFileTypes)) as |queue|}}
+                <FileDropzone @queue={{queue}} class="min-h-56 dropzone w-full rounded px-4 py-8 min-h text-gray-900 dark:text-white text-center flex flex-col items-center justify-center border-2 border-dashed border-gray-200 dark:border-indigo-500" as |dropzone|>
+                    {{#if dropzone.active}}
+                        {{#if dropzone.valid}}
+                            Drop to upload
+                        {{else}}
+                            Invalid
+                        {{/if}}
+                    {{else if queue.files.length}}
+                        <div class="my-2">
+                            <FaIcon @icon="file-spreadsheet" class="text-indigo-500 mr-2" />
+                            {{pluralize queue.files.length "spreadsheet"}} ready for upload.
+                        </div>
+                        <div class="my-2">({{queue.progress}}%)</div>
+                    {{else}}
+                        <h4 class="font-semibold mb-8">
+                            <FaIcon @icon="file-spreadsheet" class="text-indigo-500 mr-2" /> Upload Spreadsheets
+                        </h4>
+                        <div>
+                            {{#if dropzone.supported}}
+                                <p class="text-base font-semibold my-5">Drag and drop spreadsheet files onto this dropzone</p>
+                            {{/if}}
+
+                            <UploadButton @buttonText="or select spreadsheets to upload" @type="magic" @name="spreadsheets" @for="spreadsheets" @accept={{join "," @options.acceptedFileTypes}} @multiple={{true}} @onFileAdded={{fn @options.queueFile}} class="w-72" />
+                        </div>
+                    {{/if}}
+                </FileDropzone>
+            {{/let}}
+
+            {{#if @options.uploadQueue}}
+                <div class="mx-0 my-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <span class="leading-6 dark:text-gray-100">Upload Queue</span>
+                    </div>
+
+                    <div class="table-wrapper table-fluid">
+                        <table class="table table-fixed">
+                            <thead>
+                                <tr>
+                                    {{#each @options.fileQueueColumns as |column|}}
+                                        <th>{{column.name}}</th>
+                                    {{/each}}
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {{#each @options.uploadQueue as |file|}}
+                                    <tr>
+                                        {{#each @options.fileQueueColumns as |column|}}
+                                            <td>
+                                                {{#if (eq column.key "delete")}}
+                                                    <a href="javascript:;" {{on "click" (fn @options.removeFile file)}}>
+                                                        <FaIcon @icon="trash" class="text-red-500" />
+                                                    </a>
+                                                {{else if (eq column.key "type")}}
+                                                    <FileIcon @file={{file}} />
+                                                {{else if (eq column.key "fileSize")}}
+                                                    {{format-bytes (get file column.valuePath)}}
+                                                {{else if (eq column.key "uploadDate")}}
+                                                    {{format-date (get file column.valuePath) "d MMM yyyy"}}
+                                                {{else}}
+                                                    <div class="w-44 truncate">{{get file column.valuePath}}</div>
+                                                {{/if}}
+                                            </td>
+                                        {{/each}}
+                                    </tr>
+                                {{/each}}
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            {{/if}}
+        {{/if}}
+
+    </div>
+</Modal::Default>

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

@@ -0,0 +1,7 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <object id="pdf" class="border-0 w-full shadow-sm h-40rem" data={{@options.data}} type="application/pdf" alt={{@options.order.public_id}}>
+            <div class="text-center font-semibold dark:text-gray-100 p-6 flex items-center justify-center">Loading Label...</div>
+        </object>
+    </div>
+</Modal::Default>

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

@@ -0,0 +1,12 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    {{#each-in @options.order.meta as |key value|}}
+        <div class="grid grid-cols-2 border-t border-gray-200 dark:border-gray-700">
+            <div class="px-6 py-1.5 border-r border-gray-200 dark:border-gray-700">
+                <span class="text-gray-700 dark:text-white text-xs font-mono">{{key}}</span>
+            </div>
+            <div class="px-6 py-1.5">
+                <span class="text-gray-700 dark:text-white text-xs font-mono">{{value}}</span>
+            </div>
+        </div>
+    {{/each-in}}
+</Modal::Default>

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

@@ -0,0 +1,62 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <p class="mb-5 dark:text-gray-100">Select an activity status to update order tracking activity, or input a custom activity.</p>
+
+        {{#if @options.order.activityHasEnded}}
+            <InfoBlock class="warning mt-2" @icon="exclamation-triangle">
+                This order is currently {{@options.order.status}}, additional activity will overwrite this status. 
+                Fleetbase does not recommend this unless you absolutely know what you're doing.
+            </InfoBlock>
+        {{/if}}
+
+        <fieldset class="my-5">
+            <legend class="sr-only">
+                Activity Options
+            </legend>
+        
+            <div class="radio-group-condensed -space-y-px">
+                {{#each @options.activityOptions as |activity index|}}
+                    <div class="radio-group-item shadow-sm {{if (eq @options.selected index) 'is-checked'}}">
+                        <div class="flex items-center h-5">
+                            <RadioButton @radioClass="focus:ring-blue-500" @radioId={{concat "activity_" index}} @value={{index}} @groupValue={{@options.selected}} @name="activity" @changed={{fn (mut @options.selected)}} />
+                        </div>
+                        <label for={{concat "activity_" index}} class="ml-3 flex flex-col cursor-pointer w-full">
+                            <span class="block text-sm font-semibold">
+                                {{activity.status}}
+                            </span>
+                            <span class="block text-sm">
+                                {{activity.details}}
+
+                                {{#if (eq activity.code "dispatched")}}
+                                    <InfoBlock class="warning xs mt-2" @icon="exclamation-triangle" @text="This will trigger the order to dispatch." />
+                                {{/if}}
+                            </span>
+                        </label>
+                        <div>
+                            <Badge @status="default" class="uppercase">{{activity.code}}</Badge>
+                        </div>
+                    </div>
+                {{/each}}
+
+                <div class="radio-group-item shadow-sm {{if (eq @options.selected 'custom') 'is-checked'}}">
+                    <div class="flex items-center h-5">
+                        <RadioButton @radioClass="focus:ring-blue-500" @radioId="activity_custom" @value="custom" @groupValue={{@options.selected}} @name="activity"
+                            @changed={{fn (mut @options.selected)}} />
+                    </div>
+                    <label for="activity_custom" class="ml-3 flex flex-col cursor-pointer w-full pr-5">
+                        <span class="block text-sm font-medium">
+                            <Input @type="text" class="form-input form-input-sm w-full rounded-b-none" placeholder="Custom activity status" />
+                        </span>
+                        <span class="block text-sm">
+                            <Input @type="text" class="form-input form-input-sm w-full rounded-t-none" placeholder="Custom activity details" />
+                        </span>
+                    </label>
+                    <div>
+                        <Input @type="text" class="form-input form-input-sm" placeholder="Custom activity code" />
+                    </div>
+                </div>
+            </div>
+        </fieldset>
+
+    </div>
+</Modal::Default>

package/addon/components/modals/order-route-form.hbs

@@ -0,0 +1,111 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="flex flex-row justify-between mb-6">
+            <div class="flex">
+                <ShortToggle @isToggled={{@options.order.payload.isMultiDrop}} @onToggle={{@options.toggleMultiDropOrder}} @label="Toggle Multiple Dropoff's" />
+            </div>
+            <div class="flex flex-1 justify-end space-x-2">
+                {{#if @options.order.payload.isMultiDrop}}
+                    {{!-- <Button @type="magic" @icon="magic" @text="Optimize Route" @size="sm" @onClick={{fn @options.optimizeRoute}} @helpText="Fleetbase will automatically optimize the route." @disabled={{lt @options.order.payload.waypoints.length 3}} @isLoading={{@options.isOptimizingRoute}} /> --}}
+                    <Button @icon="map-marked-alt" @text="Add Waypoint" @size="sm" @onClick={{@options.addWaypoint}} @helpText="Use the `Add Waypoint` button to add more stops for this order. The Fleetbase routing engine will automatically optimize the route as each stop is added or removed." />
+                {{/if}}
+            </div>
+        </div>
+
+        {{#if @options.order.payload.isMultiDrop}}
+            <DragSortList class="overflow-visible" @items={{@options.order.payload.waypoints}} @dragEndAction={{@options.sortWaypoints}} as |waypoint index|>
+                <div id={{concat "waypoint_" (add index 1)}} class="py-1 mb-3">
+                    <div class="flex items-center justify-between">
+                        <div class="flex items-center justify-between cursor-move">
+                            <FaIcon @icon="grip-lines" @prefix="fas" class="mr-3 text-gray-100" />
+                            <label class="waypoint-label dark:text-gray-100 text-sm">
+                                {{waypoint-label (add index 1)}}
+                            </label>
+                        </div>
+
+                        <div class="flex-1 px-4">
+                            <ModelSelect @modelName="place" @selectedModel={{waypoint.place}} @placeholder={{concat "Select Waypoint " (add index 1)}} @triggerClass="form-select form-input truncate" @wrapperClass="w-96" @infiniteScroll={{false}} @customSearchEndpoint="places/search" @query={{hash geo=true latitude=@options.userLatitude longitude=@options.userLongitude}} @renderInPlace={{true}} @onChange={{fn @options.setWaypointPlace index}} as |model|>
+                                {{model.address}}
+                            </ModelSelect>
+
+                            {{#if waypoint.place.hasInvalidCoordinates}}
+                                <div class="leading-5 text-sm text-red-400 mt-2">
+                                    <FaIcon @icon="exclamation-triangle" class="mr-1" /> Invalid coordinates!
+                                </div>
+                            {{/if}}
+                        </div>
+
+                        <div class="flex items-center">
+                            {{#if waypoint.place}}
+                                <Button class="mr-2" @icon="edit" @size="sm" @onClick={{fn @options.editPlace waypoint.place}} />
+                            {{/if}}
+                            <Button @type="danger" @icon="trash" @iconPrefix="fas" @size="sm" @onClick={{fn @options.removeWaypoint waypoint}} />
+                        </div>
+                    </div>
+                </div>
+            </DragSortList>
+        {{else}}
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-xs dark:text-gray-100">
+                <div class="input-group">
+                    <div class="flex items-center justify-between">
+                        <label>Pickup</label>
+
+                        {{#if @options.order.payload.pickup}}
+                            <a href="javascript:;" {{on "click" (fn @options.editPlace @options.order.payload.pickup)}}>Edit Address</a>
+                        {{/if}}
+                    </div>
+
+                    <ModelSelect @modelName="place" @selectedModel={{@options.order.payload.pickup}} @placeholder="Select Pickup" @triggerClass="form-select form-input" @infiniteScroll={{false}} @customSearchEndpoint="places/search" @query={{hash geo=true latitude=@options.userLatitude longitude=@options.userLongitude}} @renderInPlace={{true}} @onChange={{fn @options.setPayloadPlace "pickup" }} as |model|>
+                        {{model.address}}
+                    </ModelSelect>
+
+                    {{#if @options.order.payload.pickup.hasInvalidCoordinates}}
+                        <div class="leading-5 text-sm text-red-400 mt-2">
+                            <FaIcon @icon="exclamation-triangle" class="mr-1" /> Invalid coordinates!
+                        </div>
+                    {{/if}}
+                </div>
+
+                <div class="input-group">
+                    <div class="flex items-center justify-between">
+                        <label>Dropoff</label>
+
+                        {{#if @options.order.payload.dropoff}}
+                            <a href="javascript:;" {{on "click" (fn @options.editPlace @options.order.payload.dropoff)}}>Edit Address</a>
+                        {{/if}}
+                    </div>
+
+                    <ModelSelect @modelName="place" @selectedModel={{@options.order.payload.dropoff}} @placeholder="Select Dropoff" @triggerClass="form-select form-input" @infiniteScroll={{false}} @customSearchEndpoint="places/search" @query={{hash geo=true latitude=@options.userLatitude longitude=@options.userLongitude}} @renderInPlace={{true}} @onChange={{fn @options.setPayloadPlace "dropoff" }} as |model|>
+                        {{model.address}}
+                    </ModelSelect>
+
+                    {{#if @options.order.payload.dropoff.hasInvalidCoordinates}}
+                        <div class="leading-5 text-sm text-red-400 mt-2">
+                            <FaIcon @icon="exclamation-triangle" class="mr-1" /> Invalid coordinates!
+                        </div>
+                    {{/if}}
+                </div>
+
+                <div class="input-group">
+                    <div class="flex items-center justify-between">
+                        <label>Return</label>
+
+                        {{#if @options.order.payload.return}}
+                            <a href="javascript:;" {{on "click" (fn @options.editPlace @options.order.payload.return)}}>Edit Address</a>
+                        {{/if}}
+                    </div>
+
+                    <ModelSelect @modelName="place" @selectedModel={{@options.order.payload.return}} @placeholder="Select Return" @triggerClass="form-select form-input" @infiniteScroll={{false}} @customSearchEndpoint="places/search" @query={{hash geo=true latitude=@options.userLatitude longitude=@options.userLongitude}} @renderInPlace={{true}} @onChange={{fn @options.setPayloadPlace "return" }} as |model|>
+                        {{model.address}}
+                    </ModelSelect>
+
+                    {{#if @options.order.payload.return.hasInvalidCoordinates}}
+                        <div class="leading-5 text-sm text-red-400 mt-2">
+                            <FaIcon @icon="exclamation-triangle" class="mr-1" /> Invalid coordinates!
+                        </div>
+                    {{/if}}
+                </div>
+            </div>
+        {{/if}}
+    </div>
+</Modal::Default>

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

@@ -0,0 +1,20 @@
+<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="Select Vendor" @value={{@options.place.vendor_uuid}}>
+                <ModelSelect
+                    @modelName="vendor"
+                    @selectedModel={{@options.place.vendor_uuid}}
+                    @placeholder="Select Vendor"
+                    @triggerClass="form-select form-input"
+                    @infiniteScroll={{false}}
+                    @renderInPlace={{true}}
+                    @onChange={{fn (mut @options.place.vendor_uuid)}} as |model|
+                >
+                    {{model.name}}
+                </ModelSelect>
+            </InputGroup>
+        </div>
+    </div>
+    {{yield}}
+</Modal::Default>

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

@@ -0,0 +1,105 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="flex">
+            <div class="w-48 mb-6 mr-6">
+                <LeafletMap class="w-full h-48 mb-2 rounded-md shadow-md" @lat={{@options.place.latitude}} @lng={{@options.place.longitude}} @zoom={{12}} as |layers|>
+                    <layers.tile @url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png" />
+
+                    <layers.marker @location={{@options.place.coordinates}} />
+                </LeafletMap>
+            </div>
+            <div class="flex-1">
+                <div class="grid grid-cols-1 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 @options.place.name}}</div>
+                    </div>
+
+                    <div class="field-info-container">
+                        <div class="field-name">Street</div>
+                        <div class="field-value">{{n-a @options.place.street1}}</div>
+                    </div>
+                </div>
+
+                <div class="grid grid-cols-3 gap-2 text-xs dark:text-gray-100">
+
+                    <div class="field-info-container">
+                        <div class="field-name">Neighborhood</div>
+                        <div class="field-value">{{n-a @options.place.neighborhood}}</div>
+                    </div>
+
+                    <div class="field-info-container">
+                        <div class="field-name">Building</div>
+                        <div class="field-value">{{n-a @options.place.building}}</div>
+                    </div>
+
+                    <div class="field-info-container">
+                        <div class="field-name">Security Access Code</div>
+                        <div class="field-value">{{n-a @options.place.security_access_code}}</div>
+                    </div>
+                </div>
+
+                <div class="grid grid-cols-3 gap-2 text-xs dark:text-gray-100">
+
+                    <div class="field-info-container">
+                        <div class="field-name">City</div>
+                        <div class="field-value">{{n-a @options.place.city}}</div>
+                    </div>
+
+                    <div class="field-info-container">
+                        <div class="field-name">State</div>
+                        <div class="field-value">{{n-a @options.place.province}}</div>
+                    </div>
+
+                    <div class="field-info-container">
+                        <div class="field-name">Country</div>
+                        <div class="field-value"><CountryName @country={{@options.place.country}} @showFlag={{true}} /></div>
+                    </div>
+                </div>
+
+                <div class="grid grid-cols-3 gap-2 text-xs dark:text-gray-100">
+
+                    <div class="field-info-container">
+                        <div class="field-name">Phone</div>
+                        <div class="field-value">{{n-a @options.place.phone}}</div>
+                    </div>
+
+                    <div class="field-info-container">
+                        <div class="field-name">Email</div>
+                        <div class="field-value">{{n-a @options.place.email}}</div>
+                    </div>
+
+                    <div class="field-info-container">
+                        <div class="field-name">Vendor</div>
+                        <div class="field-value">
+                            {{#if @options.place.vendor_uuid}}
+                                <a href="javascript:;" {{on "click" @options.viewVendor}}>
+                                    {{@options.place.vendor_name}}
+                                </a>
+                            {{else}}
+                                {{@options.place.vendor_name}}
+                            {{/if}}
+                        </div>
+                    </div>
+                </div>
+
+                <div class="grid grid-cols-2 gap-2 text-xs dark:text-gray-100">
+                    <div class="mb-5">
+                        <label class="flex items-center mb-2 font-bold">
+                            Coordinates
+                            <a href="javascript:;" class="block ml-3" {{on "click" @options.viewPlaceOnMap}}>
+                                <FaIcon @icon="map" class="mr-1" />
+                                View on map
+                            </a>
+                        </label>
+                        <span class="block truncate">
+                            {{point-coordinates @options.place.location}}
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    {{yield}}
+</Modal::Default>

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

@@ -0,0 +1,30 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="grid grid-cols-3 gap-1 text-xs dark:text-gray-100">
+            <InputGroup @name="Name" @autocomplete="nope" @value={{@options.place.name}} @wrapperClass="col-span-3" />
+            <InputGroup @name="Street 1" @value={{@options.place.street1}} @wrapperClass="col-span-3">
+                <AutocompleteInput @value={{@options.place.street1}} @fetchUrl="places/lookup" @onSelect={{@options.autocomplete}} placeholder="Street 1" class="w-full" as |result|>
+                    {{result.address}}
+                </AutocompleteInput>
+            </InputGroup>
+            <InputGroup @name="Street 2" @autocomplete="nope" @value={{@options.place.street2}} @wrapperClass="col-span-3" />
+            <InputGroup @name="Neighborhood" @autocomplete="nope" @value={{@options.place.neighborhood}} />
+            <InputGroup @name="Building" @autocomplete="nope" @value={{@options.place.building}} />
+            <InputGroup @name="Security Access Code" @autocomplete="nope" @value={{@options.place.security_access_code}} />
+            <InputGroup @name="Postal Code" @autocomplete="nope" @value={{@options.place.postal_code}} />
+            <InputGroup @name="City" @autocomplete="nope" @value={{@options.place.city}} />
+            <InputGroup @name="State" @autocomplete="nope" @value={{@options.place.province}} />
+            <InputGroup @name="Country" @wrapperClass="col-span-2">
+                <CountrySelect class="w-full form-input form-select form-datalist" @value={{@options.place.country}} @onChange={{fn (mut @options.place.country)}} placeholder="Country" />
+            </InputGroup>
+            <InputGroup @name="Coordinates" @wrapperClass="col-span-2">
+                <CoordinatesInput @value={{@options.place.location}} @onChange={{@options.updatePlaceCoordinates}} @onGeocode={{@options.autocomplete}} @onInit={{@options.setCoordinatesInput}} />
+            </InputGroup>
+            <div class="col-span-1"></div>
+            <InputGroup @name="Phone">
+                <PhoneInput @value={{@options.place.phone}} @autocomplete="nope" @onInput={{fn (mut @options.place.phone)}} class="form-input w-full" />
+            </InputGroup>
+            <InputGroup @name="Email" @autocomplete="nope" @value={{@options.place.email}} />
+        </div>
+    </div>
+</Modal::Default>

package/addon/components/modals/point-map.hbs

@@ -0,0 +1,16 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <LeafletMap class="rounded-md shadow-md map-height-base" @lat={{@options.latitude}} @lng={{@options.longitude}} @zoom={{12}} as |layers|>
+            <layers.tile @url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png" />
+
+            <layers.marker @icon={{@options.icon}} @location={{point-to-coordinates @options.location}} as |marker|>
+                <marker.popup @maxWidth="500" @minWidth="180">
+                    {{#if @options.popupText}}
+                        <div>{{@options.popupText}}</div>
+                    {{/if}}
+                    <div>{{format-point @options.location}}</div>
+                </marker.popup>
+            </layers.marker>
+        </LeafletMap>
+    </div>
+</Modal::Default>

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

@@ -0,0 +1,22 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}} as |options|>
+    <div class="modal-body-container" ...attributes>
+        <div class="input-group">
+            <label>
+                Policy Name
+            </label>
+            <Input @value={{@options.policy.name}} type="text" class="w-full form-input" placeholder="Enter a name for your policy" />
+        </div>
+        <div class="input-group">
+            <label>
+                Policy Description
+            </label>
+            <Input @value={{@options.policy.description}} type="text" class="w-full form-input" placeholder="Enter a description for your policy" />
+        </div>
+        <div class="input-group">
+            <label>
+               Select Permissions
+            </label>
+            <PermissionPicker @selected={{@options.policy.permissions}} @onChange={{fn (mut @options.policy.permissions)}} />
+        </div>
+    </div>
+</Modal::Default>

package/addon/components/modals/resend-verification-email.hbs

@@ -0,0 +1,25 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="bg-blue-50 rounded shadow-sm border-l-4 border-blue-400 p-4 mb-5">
+            <div class="flex">
+                <div class="flex-shrink-0">
+                    <svg class="h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
+                        fill="currentColor" aria-hidden="true">
+                        <path fill-rule="evenodd"
+                            d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
+                            clip-rule="evenodd" />
+                    </svg>
+                </div>
+                <div class="ml-3 flex items-center">
+                    <span class="font-extrabold text-blue-800">Verify your email address</span>
+                </div>
+            </div>
+            <div class="py-3">
+                <p class="text-blue-700">Re-verify your email address and click Send to continue.</p>
+            </div>
+        </div>
+
+        <InputGroup @type="email" @name="Verify your email address" @value={{@options.email}}
+            @helpText="Have a second look and confirm your email address is correct." @inputClass="input-lg" />
+    </div>
+</Modal::Default>

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

@@ -0,0 +1,16 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}} as |options|>
+    <div class="modal-body-container" ...attributes>
+        <div class="input-group">
+            <label>
+                Role Name
+            </label>
+            <Input @value={{@options.role.name}} type="text" class="w-full form-input" placeholder="Enter a name for this role" />
+        </div>
+        <div class="input-group">
+            <label>
+               Select Permissions
+            </label>
+            <PermissionPicker @selected={{@options.role.permissions}} @onChange={{fn (mut @options.role.permissions)}} />
+        </div>
+    </div>
+</Modal::Default>

package/addon/components/modals/select-payment-method.hbs

@@ -0,0 +1,12 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        {{#each @options.paymentMethods as |paymentMethod|}}
+            <a href="javascript:;" {{on "click" (fn @options.selectPaymentMethod paymentMethod)}} class="flex items-center justify-between px-3 py-2 shadow-sm rounded-md border border-gray-900 {{if (eq @options.selectedPaymentMethod.id paymentMethod.id) 'border-blue-500 shadow-outline-blue'}}">
+                <div class="flex items-center dark:text-gray-100">
+                    <FaIcon @icon="cc-visa" class="mr-1" />
+                    <span class="mr-2">Card ending in {{paymentMethod.last4}}</span>
+                </div>
+            </a>
+        {{/each}}
+    </div>
+</Modal::Default>