@fleetbase/fleetops-engine 0.0.1

package/addon/templates/operations/orders/index/view.hbs

@@ -0,0 +1,428 @@
+<Overlay @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizable={{true}} @isMaximizable={{true}} @isMinimizable={{true}} @onLoad={{this.setupInterface}} as |overlay|>
+    <Overlay::Header @overlay={{overlay}} @title={{@model.public_id}} @status={{@model.status}} @dispatched={{@model.dispatched}} @createdAt={{@model.createdAt}} @onPressCancel={{this.transitionBack}}>
+        {{#if @model.canBeDispatched}}
+            <Button @type="primary" @icon="paper-plane" @text="Dispatch" class="mr-2" @onClick={{fn this.dispatchOrder @model}} />
+        {{/if}}
+        <DropdownButton @icon="ellipsis-h" @size="sm" @iconPrefix="fas" as |dd|>
+            <div class="next-dd-menu mt-1 mx-0" aria-orientation="vertical" aria-labelledby="user-menu">
+                <div class="px-1">
+                    <div class="text-sm flex flex-row items-center px-3 py-1 rounded-md my-1 text-gray-800 dark:text-gray-300">
+                        Order Actions
+                    </div>
+                </div>
+                <div class="next-dd-menu-seperator"></div>
+                <div class="px-1">
+                    <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.editOrder @model)}}>
+                        <div class="w-6">
+                            <FaIcon @icon="edit" />
+                        </div>
+                        <span>Edit Details</span>
+                    </a>
+                    {{#unless @model.isIntegratedVendorOrder}}
+                        <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.createNewActivity @model)}}>
+                            <div class="w-6">
+                                <FaIcon @icon="signal" />
+                            </div>
+                            <span>Update Activity</span>
+                        </a>
+                        {{#if @model.driver_assigned_uuid}}
+                            <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.unassignDriver @model)}}>
+                                <div class="w-6">
+                                    <FaIcon @icon="user-xmark" />
+                                </div>
+                                <span>Unassign Driver</span>
+                            </a>
+                        {{else}}
+                            <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.assignDriver @model)}}>
+                                <div class="w-6">
+                                    <FaIcon @icon="user-check" />
+                                </div>
+                                <span>Assign Driver</span>
+                            </a>
+                        {{/if}}
+                        <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.viewOrderLabel @model)}}>
+                            <div class="w-6">
+                                <FaIcon @icon="file-invoice" />
+                            </div>
+                            <span>Get Order Label</span>
+                        </a>
+                    {{/unless}}
+                    <div class="next-dd-menu-seperator"></div>
+                    <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.listenToSocket @model)}}>
+                        <div class="w-6">
+                            <FaIcon @icon="headphones" />
+                        </div>
+                        <span>Listen to socket channel</span>
+                    </a>
+                    <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.viewOrderMeta @model)}}>
+                        <div class="w-6">
+                            <FaIcon @icon="table" />
+                        </div>
+                        <span>View metadata</span>
+                    </a>
+                    {{#unless @model.isCanceled}}
+                        <div class="next-dd-menu-seperator"></div>
+                        <a href="javascript:;" class="next-dd-item text-danger" {{on "click" (dropdown-fn dd this.cancelOrder @model)}}>
+                            <div class="w-6">
+                                <FaIcon @icon="ban" class="text-danger" />
+                            </div>
+                            <span>Cancel Order</span>
+                        </a>
+                    {{/unless}}
+                    <a href="javascript:;" class="next-dd-item text-danger" {{on "click" (dropdown-fn dd this.deleteOrder @model)}}>
+                        <div class="w-6">
+                            <FaIcon @icon="trash" class="text-danger" />
+                        </div>
+                        <span>Delete Order</span>
+                    </a>
+                </div>
+            </div>
+        </DropdownButton>
+    </Overlay::Header>
+
+    <Overlay::Body @wrapperClass="new-order-overlay-body" @increaseInnerBodyHeightBy={{1000}}>
+        <ContentPanel @title="Activity" @open={{true}} @pad={{false}} @isLoading={{this.isLoadingAdditionalData}} @panelBodyWrapperClass="px-0 py-4" @panelBodyClass="bg-white dark:bg-gray-800">
+            {{#if @model.tracking_statuses}}
+                <Timeline @activity={{@model.tracking_statuses}} @wrapperClass="space-x-4 px-2" @arrowClass="bg-gray-600 border border-gray-900 shadow-md" as |TimelineItem|>
+                    <TimelineItem class="flex flex-col w-40 px-3 py-2 rounded text-sm leading-4 truncate space-y-2 bg-gray-100 dark:bg-gray-900 dark:text-white" as |trackingStatus|>
+                        <div class="font-semibold truncate">
+                            {{trackingStatus.status}}
+                        </div>
+                        <div class="truncate">
+                            {{trackingStatus.details}}
+                        </div>
+                        <div class="truncate">
+                            {{trackingStatus.createdAt}}
+                        </div>
+                        <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
+                            <InputInfo @text={{trackingStatus.details}} />
+                        </Attach::Tooltip>
+                    </TimelineItem>
+                </Timeline>
+            {{else}}
+                <div class="px-10 py-2 flex items-center justify-center">
+                    <p class="text-red-600 dark:text-red-100">Unable to load order activity</p>
+                </div>
+            {{/if}}
+        </ContentPanel>
+
+        <ContentPanel @title="Details" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800" @actionButtons={{this.detailPanelButtons}}>
+            <div class="flex mb-4 space-x-2">
+                {{#if @model.dispatched}}
+                    <Badge @hideStatusDot={{false}} @status="Dispatched" />
+                {{/if}}
+                {{#if @model.adhoc}}
+                    <Badge @hideStatusDot={{false}} @disableHumanize={{true}} @status="success">Ad-Hoc</Badge>
+                {{/if}}
+            </div>
+            <div class="grid grid-cols-2 lg:grid-cols-3 field-info-containers-darker gap-4 lg:gap-2">
+                <div class="field-info-container space-y-2">
+                    <div class="field-name">Customer</div>
+                    <div class="flex flex-row">
+                        <div>
+                            <Image src={{avatar-url @model.customer.photo_url}} @fallbackSrc={{config "defaultValues.contactImage"}} class="w-8 h-8 rounded-md shadow-sm mr-2" alt={{@model.customer.name}} />
+                        </div>
+                        <div>
+                            <div class="field-value">{{n-a @model.customer.name "No Customer"}}</div>
+                            {{#if @model.customer}}
+                                <div>{{@model.customer.phone}}</div>
+                            {{/if}}
+                        </div>
+                    </div>
+                </div>
+                <div class="field-info-container space-y-2">
+                    <div class="field-name">Facilitator</div>
+                    {{#if @model.facilitator.isIntegratedVendor}}
+                        <div class="flex flex-row">
+                            <div>
+                                <Image src={{avatar-url @model.facilitator.photo_url}} @fallbackSrc={{config "defaultValues.contactImage"}} class="w-8 h-8 rounded-md border border-gray-200 dark:border-gray-900 shadow-sm mr-2" alt={{@model.facilitator.name}} />
+                            </div>
+                            <div>
+                                <div class="field-value">{{n-a @model.facilitator.name}}</div>
+                            </div>
+                        </div>
+                    {{else}}
+                        <div class="field-value">{{n-a @model.facilitator.name "No Facilitator"}}</div>
+                    {{/if}}
+                </div>
+                <div class="field-info-container space-y-2">
+                    <div class="field-name flex flex-row items-center justify-between">
+                        <span>Driver Assigned</span>
+                    </div>
+                    <div>
+                        <div class="flex flex-row">
+                            <div>
+                                <Image src={{avatar-url @model.driver_assigned.photo_url}} @fallbackSrc={{config "defaultValues.driverImage"}} width="32" height="32" class="w-8 h-8 rounded-md shadow-sm mr-3 lg:mr-2" alt={{@model.driver_assigned.name}} />
+                            </div>
+                            <div class="field-value">
+                                <div>{{n-a @model.driver_assigned.name "No Driver"}}</div>
+                                {{#if @model.driver_assigned}}
+                                    <div>{{@model.driver_assigned.phone}}</div>
+                                {{/if}}
+                            </div>
+                        </div>
+                        <div class="mt-1">
+                            <Button @size="xs" @type="default" @icon="edit" @text={{if @model.has_driver_assigned "Change Driver" "Assign Driver"}} @onClick={{fn this.assignDriver @model}} />
+                        </div>
+                    </div>
+                </div>
+                <div class="field-info-container space-y-2">
+                    <div class="field-name">Internal ID</div>
+                    <div class="field-value">{{n-a @model.internal_id}}</div>
+                </div>
+                <div class="field-info-container space-y-2">
+                    <div class="field-name">Tracking Number</div>
+                    <div class="field-value">{{n-a @model.tracking_number.tracking_number}}</div>
+                </div>
+                <div class="field-info-container space-y-2">
+                    <div class="field-name">Type</div>
+                    <div class="field-value">
+                        <Badge @status="default">{{n-a (humanize @model.type)}}</Badge>
+                    </div>
+                </div>
+                <div class="field-info-container space-y-2">
+                    <div class="field-name">Date Scheduled</div>
+                    <div class="field-value">{{n-a @model.scheduledAt}}</div>
+                </div>
+                <div class="field-info-container space-y-2">
+                    <div class="field-name">Date Dispatched</div>
+                    <div class="field-value">{{n-a @model.dispatchedAt}}</div>
+                </div>
+                <div class="field-info-container space-y-2">
+                    <div class="field-name">Date Started</div>
+                    <div class="field-value">{{n-a @model.startedAt}}</div>
+                </div>
+            </div>
+        </ContentPanel>
+
+        {{#if @model.isIntegratedVendorOrder}}
+            <ContentPanel @title={{concat @model.facilitator.name " Order Details"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                <IntegratedOrderDetails @integratedVendor={{@model.facilitator}} @details={{@model.meta.integrated_vendor_order}} />
+            </ContentPanel>
+        {{/if}}
+
+        {{#if @model.order_config}}
+            {{#each @model.groupedMetaFields as |group|}}
+                <ContentPanel @title={{if group.value (humanize group.value) "Additional Details"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-2">
+                        {{#each group.items as |metaField|}}
+                            <div class="field-info-container space-y-2">
+                                <div class="field-name">{{metaField.label}}</div>
+                                <div class="field-value">
+                                    <CustomFieldValue @metaField={{metaField}} @value={{get @model.meta metaField.key}} />
+                                </div>
+                            </div>
+                        {{/each}}
+                    </div>
+                </ContentPanel>
+            {{/each}}
+        {{/if}}
+
+        {{#if @model.tracking_number}}
+            <ContentPanel @title="Tracking" @prefixTitleRight={{@model.tracking}} @isLoading={{this.isLoadingAdditionalData}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                <div class="mb-4 flex justify-end">
+                    <Button @size="xs" @type="default" @icon="barcode" @text="Get Order Label" @onClick={{fn this.viewOrderLabel @model}} />
+                </div>
+                <div class="flex flex-row items-center justify-center space-x-4">
+                    <div class="p-2 rounded-md bg-white">
+                        <img src={{concat "data:image/png;base64," @model.tracking_number.qr_code}} class="w-18 h-18" alt={{@model.public_id}} />
+                    </div>
+                    <div class="p-2 rounded-md bg-white">
+                        <img src={{concat "data:image/png;base64," @model.tracking_number.barcode}} class="w-40 h-14" alt={{@model.public_id}} />
+                    </div>
+                </div>
+            </ContentPanel>
+        {{/if}}
+
+        <ContentPanel @title="Route" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800" @actionButtons={{this.routePanelButtons}}>
+            {{#if @model.payload.isMultiDrop}}
+                <div>
+                    <RouteList @order={{@model}} />
+                </div>
+            {{else}}
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-2">
+                    <div class="field-info-container">
+                        <label class="field-name">Pickup</label>
+                        <DisplayPlace @place={{@model.payload.pickup}} />
+                    </div>
+                    <div class="field-info-container">
+                        <label class="field-name">Dropoff</label>
+                        <DisplayPlace @place={{@model.payload.dropoff}} />
+                    </div>
+                    <div class="field-info-container">
+                        <label class="field-name">Return</label>
+                        <DisplayPlace @place={{@model.payload.return}} />
+                    </div>
+                </div>
+            {{/if}}
+        </ContentPanel>
+
+        {{#if @model.isStorefrontOrder}}
+            <ContentPanel @title="Order Summary" @prefixTitleRight={{if @model.payload.cod_amount "Cash" ""}} @prefixTitleRightClass="text-green-400" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                <div class="flex flex-col space-y-4 p-2 overflow-hidden">
+                    {{#each @model.payload.entities as |entity|}}
+                        <div class="flex flex-1">
+                            <div class="mr-2">
+                                <div class="flex items-center justify-center w-6 h-5 border border-gray-200 dark:border-blue-400 rounded-md">
+                                    <span class="text-blue-400 text-xs">{{entity.meta.quantity}}x</span>
+                                </div>
+                            </div>
+                            <div class="flex-1 flex">
+                                <div class="mr-4">
+                                    <img src={{entity.photo_url}} class="w-12 h-12 rounded-md shadow-sm" alt={{entity.name}} />
+                                </div>
+                                <div>
+                                    <h4 class="font-semibold dark:text-gray-100 mb-1 text-sm">{{entity.name}}</h4>
+                                    <div class="flex flex-wrap truncate w-44">
+                                        <p class="dark:text-gray-50 text-xs truncate">{{entity.description}}</p>
+                                    </div>
+                                    <div>
+                                        {{#each entity.meta.variants as |variant|}}
+                                            <div>
+                                                <span class="text-xs dark:text-gray-50">{{variant.name}}</span>
+                                            </div>
+                                        {{/each}}
+                                    </div>
+                                    <div>
+                                        {{#each entity.meta.addons as |addon|}}
+                                            <div>
+                                                <span class="text-xs dark:text-gray-50">+ {{addon.name}}</span>
+                                            </div>
+                                        {{/each}}
+                                    </div>
+                                </div>
+                            </div>
+                            <div>
+                                <span class="dark:text-gray-50 text-sm">{{format-currency entity.meta.subtotal entity.currency}}</span>
+                            </div>
+                        </div>
+                    {{/each}}
+                </div>
+                <div class="p-2 space-y-2 border-t border-b dark:border-gray-800">
+                    <div class="flex items-center justify-between">
+                        <span class="dark:text-gray-50 text-sm">Subtotal</span>
+                        <span class="dark:text-gray-50 text-sm">{{format-currency @model.meta.subtotal @model.meta.currency}}</span>
+                    </div>
+                    {{#unless @model.meta.is_pickup}}
+                        <div class="flex items-center justify-between">
+                            <span class="dark:text-gray-50 text-sm">Delivery fee</span>
+                            <span class="dark:text-gray-50 text-sm">{{format-currency @model.meta.delivery_fee @model.meta.currency}}</span>
+                        </div>
+                    {{/unless}}
+                    {{#if @model.meta.tip}}
+                        <div class="flex items-center justify-between">
+                            <span class="dark:text-gray-50 text-sm">Tip</span>
+                            <span class="dark:text-gray-50 text-sm">{{get-tip-amount @model.meta.tip @model.meta.subtotal @model.meta.currency}}</span>
+                        </div>
+                    {{/if}}
+                    {{#if @model.meta.delivery_tip}}
+                        <div class="flex items-center justify-between">
+                            <span class="dark:text-gray-50 text-sm">Delivery Tip</span>
+                            <span class="dark:text-gray-50 text-sm">{{get-tip-amount @model.meta.delivery_tip @model.meta.subtotal @model.meta.currency}}</span>
+                        </div>
+                    {{/if}}
+                </div>
+                <div class="p-2">
+                    <div class="flex items-center justify-between">
+                        <span class="dark:text-gray-50 font-bold text-sm">Total</span>
+                        <span class="dark:text-gray-50 font-bold text-sm">{{format-currency @model.meta.total @model.meta.currency}}</span>
+                    </div>
+                </div>
+            </ContentPanel>
+        {{/if}}
+
+        <ContentPanel @title="Payload" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+            {{#if this.isMultiDropOrder}}
+                <div class="space-y-2">
+                    {{#each this.entitiesByDestination as |group|}}
+                        <div class="rounded-md border border-gray-200 dark:border-gray-900 p-3">
+                            <div class="mb-3 flex justify-between items-start">
+                                <div class="flex-1">
+                                    <div class="dark:text-gray-100 text-sm mb-1 font-mono">Items drop at</div>
+                                    {{!-- <h4 class="font-bold dark:text-gray-100">{{group.waypoint.address}}</h4> --}}
+                                    <DisplayPlace @place={{group.waypoint}} @addressClass="text-sm font-mono" />
+                                    <div class="my-2">
+                                        <span class="rounded-md bg-yellow-300 text-yellow-900 px-2 py-1 text-sm">Tracking: {{group.waypoint.tracking}}</span>
+                                    </div>
+                                </div>
+                                <div>
+                                    <div class="mb-2 flex justify-end">
+                                        <Badge @status={{group.waypoint.status_code}} />
+                                    </div>
+                                    <div class="flex items-start">
+                                        <DropdownButton @triggerClass="mr-2" @iconClass="icon-text-height" @buttonSize="sm" @icon="ellipsis-h" @iconPrefix="fas" @contentClass="dropdown-menu" as |dd|>
+                                            <div class="next-dd-menu mt-1 mx-0" aria-orientation="vertical" aria-labelledby="user-menu">
+                                                <div class="px-1">
+                                                    <div class="text-sm flex flex-row items-center px-3 py-1 rounded-md my-1 text-gray-300">
+                                                        Waypoint Actions
+                                                    </div>
+                                                </div>
+                                                <div class="next-dd-menu-seperator"></div>
+                                                <div class="px-1">
+                                                    <a href="javascript:;" class="next-dd-item" {{on "click" (fn this.viewWaypointLabel group.waypoint dd)}}>
+                                                        Get Label
+                                                    </a>
+                                                    <a href="javascript:;" class="next-dd-item">
+                                                        View Activity
+                                                    </a>
+                                                </div>
+                                            </div>
+                                        </DropdownButton>
+                                        <Button @icon="plus" @iconPrefix="fas" @text="Add Item" @size="sm" @onClick={{fn this.addEntity group.waypoint}} />
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="grid grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-2">
+                                {{#each group.entities as |entity|}}
+                                    <div class="col-3">
+                                        <div class="w-full rounded-md bg-gray-100 dark:bg-gray-900 shadow-sm p-3 relative">
+                                            <div class="flex items-center justify-center mb-3">
+                                                <img src={{entity.photo_url}} class="w-14 h-14 rounded-md shadow-sm" alt={{or entity.name entity.public_id}} />
+                                            </div>
+                                            <div>
+                                                <div class="dark:text-gray-100 font-bold truncate mb-1">
+                                                    {{n-a entity.name}}
+                                                </div>
+                                                <div class="dark:text-gray-100 truncate mb-2">
+                                                    {{entity.tracking}}
+                                                </div>
+                                                <Button @icon="pencil" @text="Edit Item" @size="xs" @onClick={{fn this.editEntity entity}} />
+                                            </div>
+                                            <div class="absolute top-0 right-0 p-2">
+                                                <Button @icon="times" @iconPrefix="fas" @type="danger" @size="xs" @onClick={{fn this.removeEntity entity}} />
+                                            </div>
+                                        </div>
+                                    </div>
+                                {{/each}}
+                            </div>
+                        </div>
+                    {{/each}}
+                </div>
+            {{else}}
+                <div class="grid grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-2">
+                    {{#each @model.payload.entities as |entity index|}}
+                        <div class="col-3">
+                            <div class="w-full rounded-md bg-gray-100 dark:bg-gray-900 shadow-sm p-3 relative">
+                                <div class="flex items-center justify-center mb-3">
+                                    <img src={{entity.photo_url}} class="w-14 h-14 rounded-md shadow-sm" alt={{or entity.name entity.public_id}} />
+                                </div>
+                                <div>
+                                    <div class="dark:text-gray-100 font-bold truncate mb-1">
+                                        {{n-a entity.name}}
+                                    </div>
+                                    <div class="dark:text-gray-100 truncate mb-2">
+                                        {{entity.tracking}}
+                                    </div>
+                                    <Button @icon="pencil" @text="Edit Item" @size="sm" @onClick={{fn this.editEntity entity}} />
+                                </div>
+                                <div class="absolute top-0 right-0 p-2">
+                                    <Button @icon="times" @iconPrefix="fas" @type="danger" @size="xs" @onClick={{fn this.removeEntity entity}} @wrapperClass={{if (eq index 0) "invisible"}} />
+                                </div>
+                            </div>
+                        </div>
+                    {{/each}}
+                </div>
+            {{/if}}
+        </ContentPanel>
+    </Overlay::Body>
+</Overlay>

package/addon/templates/operations/orders/index.hbs

@@ -0,0 +1,48 @@
+<MapContainer::Topbar class="next-topbar-{{this.layout}}">
+    <MapContainer::ViewSwitch>
+        <FaIcon @icon="layer-group" class="mr-2 text-gray-400 dark:text-gray-600" />
+        <button type="button" class="{{if this.isMapLayout 'active'}}" {{on "click" (fn this.setLayoutMode "map")}}>Map</button>
+        <button type="button" class="{{if this.isTableLayout 'active'}} flex flex-row items-center relative" {{on "click" (fn this.setLayoutMode "table")}}>
+            <div class="mr-1.5">Table</div>
+            <Badge class="flex items-center justify-center -mr-4" @spanClass="rounded-full px-1 py-0i" @hideStatusDot={{true}} @status="info">{{@model.meta.total}}</Badge>
+        </button>
+    </MapContainer::ViewSwitch>
+</MapContainer::Topbar>
+
+{{#if this.isMapLayout}}
+    <MapContainer @layout={{this.layout}} @onReady={{this.onMapContainerReady}}>
+        <GlobalSearch @visible={{this.isSearchVisible}} @onPressOrder={{this.viewOrder}} />
+        <MapContainer::Toolbar @activeOrdersCount={{this.activeOrdersCount}} @map={{this.leafletMap}} @onPressViewOrders={{this.toggleOrdersPanel}} @onPressSearch={{this.toggleSearch}} @onPressCreateOrder={{this.createOrder}} @onPressCreateDriver={{this.driversController.createDriver}} @onPressDriverProfile={{this.driversController.viewDriver}} />
+        <OrderListOverlay @noBackdrop={{true}} @fullHeight={{true}} @outView={{not this.isOrdersPanelVisible}} @width={{if (media 'isMobile') "100%" "338px"}} @onPressCancel={{this.hideOrdersPanel}} @onPressCreateOrder={{this.createOrder}} @onPressViewOrder={{this.viewOrder}} @onPressCreateFleet={{this.fleetController.createFleet}} @onPressManageFleet={{this.fleetController.viewFleet}} @onPressCancelOrders={{this.bulkCancelOrders}} @onPressDeleteOrders={{this.bulkDeleteOrders}} />
+        <LiveMap id="leafletMap" class="next-leaflet-container-map" @lat={{1.3521}} @lng={{103.8198}} @zoom={{12}} @zoomControl={{false}} @onLoad={{this.setMapReference}} {{set-container-dimensions}} />
+    </MapContainer>
+{{/if}}
+
+{{#if this.isTableLayout}}
+    <Layout::Section::Header @title="Orders" @onSearch={{perform this.search}}>
+        <Button @icon="cogs" @text="Config" class="mr-2" @onClick={{fn (transition-to "operations.orders.index.config")}} />
+        <FiltersPicker @columns={{this.columns}} @onApply={{fn this.filters.apply this}} @onClear={{fn this.filters.reset this}} @onFilterClear={{this.filters.clear}} @onChange={{this.filters.set}} @buttonWrapperClass="mr-2" />
+        <VisibleColumnPicker @columns={{this.columns}} @onChange={{fn (mut this.columns)}} class="mr-2" />
+        {{#if (safe-has this.table "selectedRows")}}
+            <DropdownButton @icon="layer-group" @type="magic" @text="Bulk Action" @size="sm" @buttonWrapperClass="mr-2" as |dd|>
+                <div class="next-dd-menu mt-2 mx-0">
+                    <div class="px-1">
+                        <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.bulkCancelOrders)}}>
+                            Cancel Orders
+                        </a>
+                        <a href="javascript:;" class="text-red-500 next-dd-item" {{on "click" (dropdown-fn dd this.bulkDeleteOrders)}}>
+                            Delete Orders
+                        </a>
+                    </div>
+                </div>
+            </DropdownButton>
+        {{/if}}
+        <Button @type="primary" @icon="plus" @iconPrefix="fas" @text="New" @wrapperClass="mr-2" @onClick={{fn (transition-to "operations.orders.index.new")}} />
+        <Button @icon="long-arrow-up" @iconClass="rotate-icon-45" @text="Export" @onClick={{this.exportOrders}} />
+    </Layout::Section::Header>
+    <Layout::Section::Body>
+        <Table @rows={{@model}} @columns={{this.columns}} @selectable={{true}} @canSelectAll={{true}} @onSetup={{fn (mut this.table)}} @pagination={{true}} @paginationMeta={{@model.meta}} @page={{this.page}} @onPageChange={{fn (mut this.page)}} @tfootVerticalOffset="53" @tfootVerticalOffsetElements=".next-view-section-subheader,.next-map-container-topbar" />
+    </Layout::Section::Body>
+{{/if}}
+
+{{outlet}}

package/addon/templates/operations/orders.hbs

@@ -0,0 +1 @@
+{{outlet}}

package/addon/templates/operations/scheduler/index.hbs

@@ -0,0 +1,30 @@
+<Layout::Section::Header @title="Scheduler" />
+
+{{!-- <div>
+    <div class="p-6">
+        <div class="grid grid-cols-3 gap-4">
+            <div class="space-y-4">
+                <ContentPanel @title="Unscheduled Orders" @titleStatuRight={{this.unscheduledOrders.length}} @titleStatuRightClass="info-status-badge" @hideStatusDot={{true}} @open={{this.unscheduledOrders.length}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                    <div class="space-y-4">
+                        {{#each this.unscheduledOrders as |order|}}
+                            <FullCalendar::Draggable @eventData={{json-hash id=order.id title=order.eventTitle allDay=true}}>
+                                <Order::ScheduleCard @order={{order}} @titleClass="cursor-move" @onTitleClick={{fn this.viewEvent order}} />
+                            </FullCalendar::Draggable>
+                        {{/each}}
+                    </div>
+                </ContentPanel>
+                <ContentPanel @title="Scheduled Orders" @titleStatuRight={{this.scheduledOrders.length}} @titleStatusRightClass="info-status-badge" @hideStatusDot={{true}} @open={{this.scheduledOrders.length}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                    <div class="space-y-4">
+                        {{#each this.scheduledOrders as |order|}}
+                            <Order::ScheduleCard @order={{order}} @titleClass="cursor-pointer" @onTitleClick={{fn this.viewEvent order}} />
+                        {{/each}}
+                    </div>
+                </ContentPanel>
+            </div>
+
+            <div class="col-span-2">
+                <FullCalendar @events={{this.events}} @onDrop={{this.scheduleEventFromDrop}} @onEventReceive={{this.receivedEvent}} @onEventDrop={{this.rescheduleEventFromDrag}} @onEventClick={{this.viewOrderAsEvent}} />
+            </div>
+        </div>
+    </div>
+</div> --}}

package/addon/templates/operations/scheduler.hbs

@@ -0,0 +1 @@
+{{outlet}}

package/addon/templates/operations/service-rates/index/edit.hbs

@@ -0,0 +1 @@
+{{outlet}}