@fleetbase/fleetops-engine 0.0.1

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

@@ -0,0 +1,77 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        {{#if @options.isIntegratedVendor}}
+            <div class="integrated-vendor-button border-0 mb-4">
+                <div>
+                    <img src={{@options.vendor.provider_settings.logo}} alt={{@options.vendor.provider_settings.code}} class="w-20 h-20" width="80" height="80" />
+                </div>
+                <div>
+                    <h3 class="text-sm font-semibold dark:text-white">{{@options.vendor.provider_settings.name}}</h3>
+                </div>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-2 text-xs dark:text-gray-100">
+                <div class="field-info-container">
+                    <div class="field-name">Sandbox</div>
+                    <div class="field-value">{{if @options.vendor.sandbox "Yes" "No"}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Host</div>
+                    <div class="field-value">{{n-a @options.vendor.host}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Namespace</div>
+                    <div class="field-value">{{n-a @options.vendor.namespace}}</div>
+                </div>
+                {{#if (is-object @options.vendor.options)}}
+                    {{#each-in @options.vendor.options as |key value|}}
+                        <div class="field-info-container">
+                            <div class="field-name">{{smart-humanize key}}</div>
+                            <div class="field-value">{{n-a value}}</div>
+                        </div>
+                    {{/each-in}}
+                {{/if}}
+            </div>
+        {{else}}
+            <div class="grid grid-cols-3 md: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 @options.vendor.name}}</div>
+                </div>
+
+                <div class="field-info-container">
+                    <div class="field-name">Email</div>
+                    <div class="field-value">{{n-a @options.vendor.email}}</div>
+                </div>
+
+                <div class="field-info-container">
+                    <div class="field-name">Phone</div>
+                    <div class="field-value">{{n-a @options.vendor.phone}}</div>
+                </div>
+
+                <div class="field-info-container">
+                    <div class="field-name">Website URL</div>
+                    <div class="field-value">{{n-a @options.vendor.website_url}}</div>
+                </div>
+
+                <div class="field-info-container">
+                    <div class="field-name">Country</div>
+                    <div class="field-value">
+                        <CountryName @country={{@options.vendor.country}} @showFlag={{true}} />
+                    </div>
+                </div>
+
+                <div class="field-info-container">
+                    <div class="field-name">Status</div>
+                    <div class="field-value">
+                        <Badge @status={{@options.vendor.status}} />
+                    </div>
+                </div>
+
+                <div class="field-info-container">
+                    <div class="field-name">Address</div>
+                    <div class="field-value">{{n-a @options.vendor.address}}</div>
+                </div>
+            </div>
+        {{/if}}
+    </div>
+</Modal::Default>

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

@@ -0,0 +1,168 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        {{#if @options.action}}
+            <InputGroup>
+                <div class="space-x-4 flex">
+                    <button type="button" class="outline-none flex-1 rounded-lg bg-white dark:bg-gray-900 border-2 border-transparent px-4 py-2 flex items-center justify-center {{if (eq @options.action "select") 'border-blue-500'}}" {{on "click" (fn (mut @options.action) "select")}}>
+                        <div class="mr-2.5">
+                            <FaIcon @icon="handshake" @size="xl" class="text-blue-500" />
+                        </div>
+                        <div>
+                            <h3 class="text-gray-900 dark:text-gray-100">Choose Integrated Vendor</h3>
+                        </div>
+                    </button>
+                    <button type="button" class="outline-none flex-1 rounded-lg bg-white dark:bg-gray-900 border-2 border-transparent px-4 py-2 flex items-center justify-center {{if (eq @options.action "create") 'border-blue-500'}}" {{on "click" (fn (mut @options.action) "create")}}>
+                        <div class="mr-2.5">
+                            <FaIcon @icon="building" @size="xl" class="text-blue-500" />
+                        </div>
+                        <div>
+                            <h3 class="text-gray-900 dark:text-gray-100">Create Custom Vendor</h3>
+                        </div>
+                    </button>
+                </div>
+            </InputGroup>
+        {{/if}}
+
+        {{#if (eq @options.action "select")}}
+            <div class="grid grid-cols-2 gap-4 lg:grid-cols-3 mb-4">
+                {{#each @options.supportedIntegratedVendors as |integratedVendor|}}
+                    <button type="button" class="integrated-vendor-button {{if (eq @options.selectedIntegratedVendor.code integratedVendor.code) 'selected'}}" {{on "click" (fn @options.selectIntegratedVendor integratedVendor)}}>
+                        <div>
+                            <img src={{integratedVendor.logo}} alt={{integratedVendor.code}} class="w-20 h-20" width="80" height="80" />
+                        </div>
+                        <div>
+                            <h3 class="text-sm font-semibold dark:text-white">{{integratedVendor.name}}</h3>
+                        </div>
+                    </button>
+                {{/each}}
+            </div>
+
+            {{#if @options.selectedIntegratedVendor}}
+                <div class="mb-2">
+                    <label class="mb-2 block dark:text-gray-400 text-xs">Credentials</label>
+                    {{#each @options.selectedIntegratedVendor.credential_params as |param|}}
+                        <InputGroup @name={{smart-humanize param.key}} @value={{mut (get @options.integratedVendor.credentials param.key)}} @helpText={{concat "Optionally supply your own " (smart-humanize param.key) " to configure this vendor."}} />
+                    {{/each}}
+                </div>
+                <div class="mb-2">
+                    <label class="mb-2 block dark:text-gray-400 text-xs">Options</label>
+                    {{#each @options.selectedIntegratedVendor.option_params as |param|}}
+                        {{#if param.options}}
+                            <InputGroup @name={{smart-humanize param.key}}>
+                                <Select @value={{mut (get @options.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 @options.integratedVendor.options param.key))}} />
+                            </InputGroup>
+                        {{else}}
+                            <InputGroup @name={{smart-humanize param.key}} @value={{mut (get @options.integratedVendor.options param.key)}} @helpText={{concat "Optionally supply your own " (smart-humanize param.key) " to configure this vendor."}} />
+                        {{/if}}
+                    {{/each}}
+                </div>
+                <InputGroup @wrapperClass="mb-2">
+                    <Checkbox @value={{@options.integratedVendor.sandbox}} @label="Sandbox" @onToggle={{fn (mut @options.integratedVendor.sandbox)}} @alignItems="center" @labelClass="mb-0i" />
+                </InputGroup>
+                <div>
+                    <button type="button" class="btn-link text-xs outline-none text-blue-600 hover:text-blue-600 mb-3" {{on "click" @options.toggleAdvancedOptions}}>
+                        {{#if @options.showAdvancedOptions}}
+                            <span>Hide Advanced</span>
+                        {{else}}
+                            <span>Show Advanced</span>
+                        {{/if}}
+                    </button>
+                    {{#if @options.showAdvancedOptions}}
+                        <InputGroup @name="Custom Host" @value={{@options.integratedVendor.host}} @helpText="Optionally provide a custom host that should be used for this integration." />
+                        <InputGroup @name="Custom Namespace" @value={{@options.integratedVendor.namespace}} @helpText="Optionally provide a custom namespace or api version that should be used for the integration." />
+                        <InputGroup @name="Webhook URL" @value={{@options.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!" />
+                    {{/if}}
+                </div>
+            {{/if}}
+        {{else}}
+            {{#if @options.isIntegratedVendor}}
+                <div class="integrated-vendor-button border-0 mb-4">
+                    <div>
+                        <img src={{@options.vendor.provider_settings.logo}} alt={{@options.vendor.provider_settings.code}} class="w-20 h-20" width="80" height="80" />
+                    </div>
+                    <div>
+                        <h3 class="text-sm font-semibold dark:text-white">{{@options.vendor.provider_settings.name}}</h3>
+                    </div>
+                </div>
+                <div class="mb-2">
+                    <label class="mb-2 block dark:text-gray-400 text-xs">Credentials</label>
+                    {{#if @options.isEditingCredentials}}
+                        {{#each @options.vendor.provider_settings.credential_params as |param|}}
+                            <InputGroup @name={{smart-humanize param.key}} @value={{mut (get @options.vendor.credentials param.key)}} @helpText={{concat "Optionally supply your own " (smart-humanize param.key) " to configure this vendor."}} />
+                        {{/each}}
+                        <div class="my-4">
+                            <Button @text="Cancel credentials reset" @type="danger" @size="sm" @icon="times" @onClick={{fn @options.toggleCredentialsReset}} />
+                        </div>
+                    {{else}}
+                        <div>
+                            <div class="rounded-md border border-blue-300 dark:border-blue-600 bg-blue-100 dark:bg-blue-500 text-blue-900 dark:text-white text-sm px-4 py-2 mb-4">
+                                <p class="mb-2">Sensitive credentials can only be reset, to update credentials you must re-enter the credentials.</p>
+                                <Button @type="default" @size="xs" @icon="repeat" @text="Click here to reset" @onClick={{fn @options.toggleCredentialsReset}} />
+                            </div>
+                        </div>
+                        {{#each @options.vendor.provider_settings.credential_params as |param|}}
+                            <InputGroup @name={{smart-humanize param.key}} @value="*********" @disabled="true" @helpText={{concat "Optionally supply your own " (smart-humanize param.key) " to configure this vendor."}} />
+                        {{/each}}
+                    {{/if}}
+                </div>
+                <div class="mb-2">
+                     <label class="mb-2 block dark:text-gray-400 text-xs">Options</label>
+                    {{#each @options.vendor.provider_settings.option_params as |param|}}
+                        {{#if param.options}}
+                            <InputGroup @name={{smart-humanize param.key}}>
+                                <Select @value={{mut (get @options.vendor.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 @options.vendor.options param.key))}} />
+                            </InputGroup>
+                        {{else}}
+                            <InputGroup @name={{smart-humanize param.key}} @value={{mut (get @options.vendor.options param.key)}} @helpText={{concat "Optionally supply your own " (smart-humanize param.key) " to configure this vendor."}} />
+                        {{/if}}
+                    {{/each}}
+                </div>
+                <InputGroup @wrapperClass="mb-2">
+                    <Checkbox @value={{@options.vendor.sandbox}} @label="Sandbox" @onToggle={{fn (mut @options.vendor.sandbox)}} @alignItems="center" @labelClass="mb-0i" />
+                </InputGroup>
+                <div>
+                    <button type="button" class="btn-link text-xs outline-none text-blue-600 hover:text-blue-600 mb-3" {{on "click" @options.toggleAdvancedOptions}}>
+                        {{#if @options.showAdvancedOptions}}
+                            <span>Hide Advanced</span>
+                        {{else}}
+                            <span>Show Advanced</span>
+                        {{/if}}
+                    </button>
+                    {{#if @options.showAdvancedOptions}}
+                        <InputGroup @name="Custom Host" @value={{@options.vendor.host}} @helpText="Optionally provide a custom host that should be used for this integration." />
+                        <InputGroup @name="Custom Namespace" @value={{@options.vendor.namespace}} @helpText="Optionally provide a custom namespace or api version that should be used for the integration." />
+                        <InputGroup @name="Webhook URL" @value={{@options.vendor.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!" />
+                    {{/if}}
+                </div>
+            {{else}}
+                <div class="grid lg:grid-cols-2 grid-cols-1 gap-2 text-xs dark:text-gray-100">
+                    <InputGroup @name="Name" @value={{@options.vendor.name}} @wrapperClass="mb-0" @helpText="The vendor's name, typically the name of a business." />
+                    <InputGroup @name="Email" @type="email" @value={{@options.vendor.email}} @wrapperClass="mb-0" @helpText="The vendor's email, this can be used to trigger emails to the vendor." />
+                    <InputGroup @name="Phone" @type="tel" @value={{@options.vendor.phone}} @wrapperClass="mb-0" @helpText="The vendor's phone #, this can be used to trigger SMS or messages to the vendor." />
+                    <InputGroup @name="Website" @value={{@options.vendor.website}} @wrapperClass="mb-0" @helpText="The vendor's website, optionally add the vendors website for reference." />
+                    <InputGroup @wrapperClass="mb-0 col-span-2">
+                        <div class="flex items-start justify-between">
+                            <label>
+                                Address
+                            </label>
+                            <div class="mb-1.5 flex flex-row">
+                                {{#if @options.vendor.has_place}}
+                                    <Button @type="default" @size="xs" @icon="edit" @text="Edit" @onClick={{fn @options.editAddress}} />
+                                {{/if}}
+                                <Button @type="default" @size="xs" @icon="plus" @text="New" @onClick={{fn @options.newAddress}} />
+                            </div>
+                        </div>
+
+                        <ModelSelect @modelName="place" @selectedModel={{@options.vendor.place}} @placeholder="Select Address" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn @options.selectAddress}} as |model|>
+                            {{model.name}} - {{model.street1}}
+                        </ModelSelect>
+                    </InputGroup>
+
+                    <InputGroup @name="Country" @wrapperClass="mb-0">
+                        <CountrySelect class="w-full form-input form-select form-datalist" @value={{@options.vendor.country}} @onChange={{fn (mut @options.vendor.country)}} placeholder="Country" />
+                    </InputGroup>
+                </div>
+            {{/if}}
+        {{/if}}
+    </div>
+</Modal::Default>

package/addon/components/modals/view-service-area.hbs

@@ -0,0 +1,12 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="next-map-container">
+        <LeafletMap class="h-screen-65 w-full {{@options.mapClass}}" @lat={{this.latitude}} @lng={{this.longitude}} @zoom={{11}} @zoomControl={{false}} @onLoad={{this.setupMap}} ...attributes as |layers|>
+            <layers.tile @url={{this.tileSourceUrl}} />
+            {{#if @options.serviceArea}}
+                <layers.polygon @id={{@options.serviceArea.id}} @record={{@options.serviceArea}} @locations={{@options.serviceArea.bounds}} @fillColor={{@options.serviceArea.color}} @color={{@options.serviceArea.stroke_color}} @onAdd={{fn this.onServiceAreaAdded @options.serviceArea}} as |polygon|>
+                    <polygon.tooltip @permanent={{true}} @sticky={{true}}>{{@options.serviceArea.name}} Service Area</polygon.tooltip>
+                </layers.polygon>
+            {{/if}}
+        </LeafletMap>
+    </div>
+</Modal::Default>

package/addon/components/modals/view-zone.hbs

@@ -0,0 +1,12 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="next-map-container">
+        <LeafletMap class="h-screen-65 w-full {{@options.mapClass}}" @lat={{this.latitude}} @lng={{this.longitude}} @zoom={{11}} @zoomControl={{false}} @onLoad={{this.setupMap}} ...attributes as |layers|>
+            <layers.tile @url={{this.tileSourceUrl}} />
+            {{#if @options.zone}}
+                <layers.polygon @id={{@options.zone.id}} @record={{@options.zone}} @locations={{@options.zone.locations}} @fillColor={{@options.zone.color}} @color={{@options.zone.stroke_color}} @onAdd={{fn this.onZoneAdded @options.zone}} as |polygon|>
+                    <polygon.tooltip @permanent={{true}} @sticky={{true}}>{{@options.zone.name}} Zone</polygon.tooltip>
+                </layers.polygon>
+            {{/if}}
+        </LeafletMap>
+    </div>
+</Modal::Default>

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

@@ -0,0 +1,16 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="input-group">
+            <InputLabel @labelText="Zone Name" @helpText="Set a display name for the zone." @required={{true}} />
+            <Input @value={{@options.zone.name}} type="text" class="w-full form-input" placeholder="Zone Name" />
+        </div>
+
+        <InputGroup @type="color" @value={{@options.zone.stroke_color}} @name="Zone Border Color" @helpText="Customize the border color for this zone." class="p-0 border-0 m-0 w-8 h-8 bg-transparent rounded-none" />
+        <InputGroup @type="color" @value={{@options.zone.color}} @name="Zone Color" @helpText="Customize the fill color for this zone." class="p-0 border-0 m-0 w-8 h-8 bg-transparent rounded-none" />
+
+        <div class="input-group">
+            <InputLabel @labelText="Zone Name" @helpText="Optionally give the zone a description." />
+            <Textarea @value={{@options.zone.description}} rows={{3}} type="text" class="w-full form-input" placeholder="Description of Zone" />
+        </div>
+    </div>
+</Modal::Default>

package/addon/components/operations-pane/pane.hbs

@@ -0,0 +1 @@
+<div class="operations-pane hidden" ...attributes>{{yield}}</div>

package/addon/components/order/header.hbs

@@ -0,0 +1,48 @@
+<div class="px-3 py-4 border-b border-gray-900 order-view-header">
+    <div class="flex items-start justify-between">
+        <div class="flex items-start flex-1">
+            <Button @text="Back" @onClick={{@onBackButtonClick}} class="mr-3" />
+            <div>
+                <h1 class="mb-1 text-gray-700 dark:text-gray-100">
+                    {{@order.public_id}}
+                </h1>
+                <div class="flex flex-row">
+                    <Badge @status={{@order.status}} @helpText={{if (eq @order.status "dispatched") (concat "Dispatched at " @order.dispatchedAt)}} />
+                    {{#if @order.shouldDisplayDispatchLabel}}
+                        <Badge @status="info" class="ml-2" @helpText="Dispatched at {{@order.dispatchedAt}}">Dispatched</Badge>
+                    {{/if}}
+                </div>
+            </div>
+        </div>
+        <div class="flex">
+            {{#if @order.canBeDispatched}}
+                <Button @type="primary" @icon="paper-plane" @text="Dispatch" class="mr-2" @onClick={{fn this.forwardAction "dispatchOrder"}} />
+            {{/if}}
+            <DropdownButton @icon="ellipsis-h" @contentClass="dropdown-menu" as |dd|>
+                <div class="dropdown-menu-content context-menu">
+                    <a href="#" class="dropdown-menu-item" {{on "click" (fn this.forwardAction "editOrder" dd)}}>
+                        Edit Details
+                    </a>
+                    <a href="#" class="dropdown-menu-item" {{on "click" (fn this.forwardAction "createNewActivity" dd)}}>
+                        Update Activity
+                    </a>
+                    <a href="#" class="dropdown-menu-item" {{on "click" (fn this.forwardAction "assignDriver" dd)}}>
+                        Assign Driver
+                    </a>
+                    <a href="#" class="dropdown-menu-item" {{on "click" (fn this.forwardAction "viewOrderLabel" dd)}}>
+                        Get Order Label
+                    </a>
+                    {{!-- <a href="#" class="dropdown-menu-item" {{on "click" (fn this.forwardAction "splitOrder" dd)}}>
+                        Split Order
+                    </a> --}}
+                    {{!-- <a href="#" class="dropdown-menu-item" {{on "click" (fn this.forwardAction "splitOrder" dd)}}>
+                        Reschedule Order
+                    </a> --}}
+                    <a href="#" class="dropdown-menu-item"  {{on "click" (fn this.forwardAction "cancelOrder" dd)}}>
+                        Cancel Order
+                    </a>
+                </div>
+            </DropdownButton>
+        </div>
+    </div>
+</div>

package/addon/components/order/header.js

@@ -0,0 +1,26 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { classify } from '@ember/string';
+import isFunction from '@fleetbase/ember-core/utils/is-function';
+
+export default class OrderHeaderComponent extends Component {
+    /**
+     * Forwards action up the component via callback arguments
+     *
+     * @param {String} forwardedAction the name of the action to send up
+     * @void
+     */
+    @action
+    forwardAction(forwardedAction, dd) {
+        const { order } = this.args;
+        const actionName = `on${classify(forwardedAction)}`;
+
+        if (dd && isFunction(dd.actions.close)) {
+            dd.actions.close();
+        }
+
+        if (typeof this.args[actionName] === 'function') {
+            this.args[actionName](order);
+        }
+    }
+}

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

@@ -0,0 +1,51 @@
+<div class="place-card" ...attributes>
+    <span class={{@titleClass}}>
+        {{@title}}
+    </span>
+    <div class="place-name">
+        {{@place.name @place.street1}}
+    </div>
+    <div class="place-street1 {{if this.noTitle "hidden"}}">
+        {{@place.street1}}
+    </div>
+    <div class="place-street2 {{unless @place.street2 "hidden"}}">
+        {{@place.street2}}
+    </div>
+    <div class="flex flex-row place-location">
+        <div class="place-city {{unless @place.city "hidden"}}">
+            {{@place.city}}
+        </div>
+        <div class="place-province {{unless @place.province "hidden"}}">
+            {{@place.province}}
+        </div>
+        <div class="place-postalcode {{unless @place.postal_code "hidden"}}">
+            {{@place.postal_code}}
+        </div>
+    </div>
+    <div class="place-country {{unless @place.country "hidden"}}">
+        {{@place.country}}
+    </div>
+
+    {{#if @place.metadata}}
+        <Button @size="xs" @onClick={{this.showMeta}} class="my-2">
+            {{#if this.showingMeta}}
+                Show less details
+            {{else}}
+                Show more details
+            {{/if}}
+        </Button>
+        {{#if this.showingMeta}}
+            {{#each-in @place.metadata as |key value|}}
+                <div class="place-meta">
+                    <div class="place-meta-key">
+                        {{humanize key}}:
+                    </div>
+                    <div class="place-meta-value">
+                        {{value}}
+                    </div>
+                </div>
+            {{/each-in}}
+        {{/if}}
+    {{/if}}
+</div>
+{{yield}}

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

@@ -0,0 +1,33 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { computed, get, action } from '@ember/object';
+
+export default class OrderPlaceCardComponent extends Component {
+    /**
+     * Flag to state if place has no name or street1
+     *
+     * @var {Boolean}
+     */
+    @computed('args.place.{name,street1}')
+    get noTitle() {
+        // eslint-disable-next-line ember/no-get
+        return !get(this, 'args.place.name') || !get(this, 'args.place.street1');
+    }
+
+    /**
+     * Action to toggle `showingMeta` flag
+     *
+     * @void
+     */
+    @action
+    showMeta() {
+        this.showingMeta = this.showingMeta ? false : true;
+    }
+
+    /**
+     * Whether or not to display meta
+     *
+     * @var {Boolean}
+     */
+    @tracked showingMeta = false;
+}

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

@@ -0,0 +1,35 @@
+<div class="order-schedule-card border border-gray-200 dark:border-gray-700" {{did-insert this.setupComponent}} ...attributes>
+    <a href="javascript:;" class="{{@titleClass}} card-title border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900" {{on "click" (fn this.onTitleClick @order)}}>
+        <span>{{@order.public_id}}</span>
+        <div>
+            <Badge @status={{@order.status}} />
+        </div>
+    </a>
+    <div class="{{@contentClass}} card-content bg-white dark:bg-gray-900 text-sm space-y-2">
+        <div class="flex items-center justify-between">
+            <div>
+                <FaIcon @icon="calendar" class="mr-2" />
+                <span class="font-semibold">Date scheduled</span>
+            </div>
+            <span>{{@order.scheduledAt}}</span>
+        </div>
+        <div class="flex items-center justify-between">
+            <div>
+                <FaIcon @icon="calendar" class="mr-2" />
+                <span class="font-semibold">Date created</span>
+            </div>
+            <span>{{@order.createdAtWithTime}}</span>
+        </div>
+        <div class="flex items-center justify-between">
+            <div>
+                <FaIcon @icon="calendar" class="mr-2" />
+                <span class="font-semibold">Driver Assigned</span>
+            </div>
+            <span>{{@order.driver_assigned.name "None"}}</span>
+        </div>
+        <div class="z-20 relative">
+            <RouteList @order={{@order}} />
+        </div>
+    </div>
+    {{yield}}
+</div>

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

@@ -0,0 +1,17 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+export default class OrderScheduleCardComponent extends Component {
+    @action setupComponent() {
+        const { order } = this.args;
+
+        order?.loadDriver();
+        order?.loadPayload();
+    }
+
+    @action onTitleClick(order) {
+        if (typeof this.args.onTitleClick === 'function') {
+            this.args.onTitleClick(order);
+        }
+    }
+}

package/addon/components/order/sub-header/item.hbs

@@ -0,0 +1,16 @@
+<div class="order-subheader-item" ...attributes>
+    <div class="flex flex-row items-center justify-between px-3">
+        <div class="flex flex-col flex-1">
+            <span class="text-xs font-semibold uppercase dark:text-gray-200">
+                {{@name}}
+            </span>
+            <span class="w-11/12 text-sm font-bold truncate dark:text-gray-300">
+                {{@value}}
+            </span>
+        </div>
+        <div>
+            <FaIcon @icon={{@icon}} @size="lg" class="dark:text-gray-300" />
+        </div>
+        {{yield}}
+    </div>
+</div>

package/addon/components/order/sub-header.hbs

@@ -0,0 +1,3 @@
+<div class="flex flex-row items-center w-full px-2 py-5 bg-gray-900 justify-evenly">
+    {{yield}}
+</div>