@fleetbase/fleetops-engine 0.6.18 → 0.6.20

package/addon/components/map/order-list-overlay.hbs

@@ -0,0 +1,176 @@
+<Overlay
+    class="orders-panel"
+    @position="right"
+    @onLoad={{this.overlay.handleLoad}}
+    @isOpen={{this.overlay.isOpen}}
+    @noBackdrop={{true}}
+    @fullHeight={{true}}
+    {{set-width this.overlay.width}}
+>
+    <Overlay::Header @onPressCancel={{this.overlay.close}} class="order-list-overlay-panel-header">
+        <:default>
+            <div class="h-full flex-1 pl-7 relative">
+                <div class="absolute h-full left-0 top-0 bottom-0 flex items-center justify-center">
+                    {{#if this.overlay.load.isRunning}}
+                        <Spinner />
+                    {{else}}
+                        <FaIcon @icon="search" />
+                    {{/if}}
+                </div>
+                <Input
+                    @value={{this.overlay.searchQuery}}
+                    @type="text"
+                    placeholder={{t "order-list-overlay.search"}}
+                    class="w-full p-0 m-0 h-full bg-transparent order-list-overlay-search"
+                />
+            </div>
+        </:default>
+        <:actions>
+            {{#if this.overlay.selectedOrders.length}}
+                <BasicDropdown @renderInPlace={{true}} as |dd|>
+                    <dd.Trigger>
+                        <div class="next-org-button-trigger has-selections {{if dd.isOpen 'is-open'}}">
+                            <FaIcon @icon="ellipsis-h" @prefix="fas" class="text-gray-800 dark:text-white" />
+                        </div>
+                    </dd.Trigger>
+                    <dd.Content>
+                        <div class="next-dd-menu">
+                            <div class="px-1">
+                                <div class="text-sm flex flex-row items-center px-3 py-0.5 rounded-md my-1">
+                                    {{t "order-list-overlay.selected"}}
+                                    {{pluralize this.overlay.selectedOrders.length "Order"}}
+                                </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.orderActions.bulkCancel this.overlay.selectedOrders)}}>{{t
+                                        "fleet-ops.component.order-list-overlay.cancel"
+                                    }}</a>
+                                <a href="javascript:;" class="next-dd-item text-danger" {{on "click" (dropdown-fn dd this.orderActions.bulkDelete this.overlay.selectedOrders)}}>{{t
+                                        "fleet-ops.component.order-list-overlay.delete"
+                                    }}</a>
+                            </div>
+                        </div>
+                    </dd.Content>
+                </BasicDropdown>
+            {{/if}}
+            <BasicDropdown @renderInPlace={{true}} as |dd|>
+                <dd.Trigger>
+                    <div class="next-org-button-trigger {{if dd.isOpen 'is-open'}}">
+                        <FaIcon @icon="ellipsis-h" @prefix="fas" class="text-gray-900 dark:text-gray-500" />
+                    </div>
+                </dd.Trigger>
+                <dd.Content>
+                    <div class="next-dd-menu">
+                        <div class="px-1">
+                            <div class="text-sm flex flex-row items-center px-3 py-0.5 rounded-md my-1">
+                                {{t "order-list-overlay.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 (transition-to "operations.orders.index.new"))}}>{{t
+                                    "fleet-ops.component.order-list-overlay.create-order"
+                                }}</a>
+                            <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.fleetActions.modal.create)}}>{{t
+                                    "fleet-ops.component.order-list-overlay.create-fleet"
+                                }}</a>
+                        </div>
+                    </div>
+                </dd.Content>
+            </BasicDropdown>
+        </:actions>
+    </Overlay::Header>
+    <Overlay::Body class="fleetops-order-list-overlay" @wrapperClass="fleetops-order-list-overlay-inner-wrapper">
+        <div class="fleetops-order-list-overlay-list">
+            {{#if this.overlay.loaded}}
+                <div class="next-content-panel-wrapper">
+                    {{#each-in this.overlay.orderGroups as |key orders|}}
+                        <ContentPanel
+                            @title={{t (concat "order-list-overlay." (dasherize key))}}
+                            @subtitle={{pluralize orders.length (t "resource.order")}}
+                            @open={{orders.length}}
+                            @panelTitleInlineClass="fleetops-order-list-title-text"
+                            @panelSubtitleInlineClass="resource-count"
+                            @panelBodyClass="order-listings"
+                        >
+                            {{#each orders as |order index|}}
+                                <Map::OrderListOverlay::Order
+                                    @order={{order}}
+                                    @index={{add index 1}}
+                                    @isSelected={{includes order.public_id (map-by "public_id" this.overlay.selectedOrders)}}
+                                    @onClick={{this.overlay.toggleSelectOrder}}
+                                    @onDoubleClick={{transition-to "operations.orders.index.details" order}}
+                                    @onMouseEnter={{@onMouseEnterOrder}}
+                                    @onMouseLeave={{@onMouseLeaveOrder}}
+                                    as |isSelected|
+                                >
+                                    {{#if isSelected}}
+                                        <div class="order-listing-actions space-x-2">
+                                            <Button
+                                                @type="default"
+                                                @icon="file-invoice"
+                                                @text={{t "common.details"}}
+                                                @size="xs"
+                                                @onClick={{transition-to "operations.orders.index.details" order}}
+                                                @wrapperClass="order-listing-action-button"
+                                            />
+                                        </div>
+                                    {{/if}}
+                                </Map::OrderListOverlay::Order>
+                            {{/each}}
+                        </ContentPanel>
+                    {{/each-in}}
+
+                    {{#each this.overlay.fleets as |fleet|}}
+                        <ContentPanel
+                            @title={{fleet.name}}
+                            @subtitle={{concat fleet.drivers_online_count " of " fleet.drivers_count " Online"}}
+                            @open={{fleet.drivers.length}}
+                            @actionButtons={{array (hash type="default" icon="cog" size="xs" onClick=(fn this.fleetActions.panel.view fleet))}}
+                            @panelTitleInlineClass="fleetops-order-list-title-text"
+                            @panelSubtitleInlineClass="resource-count"
+                            @panelBodyClass="fleet-listings"
+                        >
+                            {{#each fleet.drivers as |driver|}}
+                                <ContentPanel
+                                    @titleComponent="map/order-list-overlay/driver-panel-title"
+                                    @titleComponentContext={{driver}}
+                                    @panelHeaderClass="next-orders-driver-header"
+                                    @panelBodyClass="order-listings"
+                                >
+                                    {{#each driver._panelActiveJobs as |order index|}}
+                                        <Map::OrderListOverlay::Order
+                                            @order={{order}}
+                                            @index={{add index 1}}
+                                            @isSelected={{includes order.public_id (map-by "public_id" this.overlay.selectedOrders)}}
+                                            @onClick={{this.overlay.toggleSelectOrder}}
+                                            @onDoubleClick={{transition-to "operations.orders.index.details" order}}
+                                            @onMouseEnter={{@onMouseEnterOrder}}
+                                            @onMouseLeave={{@onMouseLeaveOrder}}
+                                            as |isSelected|
+                                        >
+                                            {{#if isSelected}}
+                                                <div class="order-listing-actions space-x-2">
+                                                    <Button
+                                                        @type="default"
+                                                        @icon="file-invoice"
+                                                        @text={{t "common.details"}}
+                                                        @size="xs"
+                                                        @onClick={{transition-to "operations.orders.index.details" order}}
+                                                        @wrapperClass="order-listing-action-button"
+                                                    />
+                                                </div>
+                                            {{/if}}
+                                        </Map::OrderListOverlay::Order>
+                                    {{/each}}
+                                </ContentPanel>
+                            {{/each}}
+                        </ContentPanel>
+                    {{/each}}
+                </div>
+            {{/if}}
+            <Spacer @height="200px" />
+        </div>
+    </Overlay::Body>
+</Overlay>

package/addon/components/map/order-list-overlay.js

@@ -0,0 +1,8 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+
+export default class MapOrderListOverlayComponent extends Component {
+    @service('order-list-overlay') overlay;
+    @service fleetActions;
+    @service orderActions;
+}

package/addon/components/map/search.hbs

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

package/addon/components/map/search.js

@@ -0,0 +1,3 @@
+import Component from '@glimmer/component';
+
+export default class MapSearchComponent extends Component {}

package/addon/components/map/toolbar/visibility-control-panel.hbs

@@ -0,0 +1,130 @@
+{{!-- template-lint-disable require-context-role --}}
+<div class="next-dd-menu overflow-visible">
+    <div class="px-1">
+        <div class="text-sm flex flex-row items-center px-3 py-0.5 rounded-md my-1 text-gray-800 dark:text-gray-300">
+            {{t "map.visibility-controls.title"}}
+        </div>
+    </div>
+
+    <div class="next-dd-menu-seperator"></div>
+
+    <div class="px-1">
+        <button type="button" class="next-dd-item w-full flex-row items-center justify-between relative" aria-pressed={{this.arePlacesHidden}} {{on "click" this.togglePlaces}}>
+            <div class="flex flex-row items-center">
+                <div class="w-6 flex"><FaIcon @icon="building" /></div>
+                <span>
+                    {{#if this.arePlacesHidden}}
+                        {{t "map.visibility-controls.show-places"}}
+                    {{else}}
+                        {{t "map.visibility-controls.hide-places"}}
+                    {{/if}}
+                </span>
+            </div>
+            <div>
+                <Badge @status="info" @hideStatusDot={{true}} @spanClass="rounded-full -mr-2">{{this.places.length}}</Badge>
+            </div>
+        </button>
+
+        <BasicDropdownHover @horizontalPosition="right" @calculatePosition={{this.calculatePosition}} @renderInPlace={{true}} as |dd|>
+            <dd.Trigger
+                @tagName="button"
+                type="button"
+                class="next-dd-item flex-row items-center justify-between relative {{if dd.isOpen 'active'}}"
+                aria-haspopup="menu"
+                aria-expanded={{dd.isOpen}}
+            >
+                <div class="flex flex-row items-center">
+                    <div class="w-6"><FaIcon @icon="user" /></div>
+                    <span>
+                        {{t "map.visibility-controls.driver-controls"}}
+                    </span>
+                </div>
+                <div>
+                    <Badge @status="info" @hideStatusDot={{true}} @spanClass="rounded-full -mr-2">{{this.drivers.length}}</Badge>
+                </div>
+            </dd.Trigger>
+
+            <dd.Content>
+                <div class="next-dd-menu" role="menu">
+                    <div class="px-1">
+                        <div class="text-sm flex flex-row items-center px-3 py-0.5 rounded-md my-1 text-gray-800 dark:text-gray-300 truncate">
+                            <FaIcon @icon="binoculars" class="mr-2" />
+                            <span>{{t "map.visibility-controls.driver-visibility-controls"}}</span>
+                        </div>
+                    </div>
+
+                    <div class="next-dd-menu-seperator"></div>
+
+                    <div class="px-1">
+                        <button type="button" role="menuitem" class="next-dd-item w-full" {{on "click" (fn this.toggleDrivers true)}}>
+                            {{#if this.areDriversHidden}}
+                                {{t "map.visibility-controls.show-drivers"}}
+                            {{else}}
+                                {{t "map.visibility-controls.hide-drivers"}}
+                            {{/if}}
+                        </button>
+
+                        <button type="button" role="menuitem" class="next-dd-item w-full" {{on "click" (fn this.toggleDriversByOnline true)}}>
+                            {{t "map.visibility-controls.show-online-drivers"}}
+                        </button>
+
+                        <button type="button" role="menuitem" class="next-dd-item w-full" {{on "click" (fn this.toggleDriversByOnline false)}}>
+                            {{t "map.visibility-controls.show-offline-drivers"}}
+                        </button>
+                    </div>
+                </div>
+            </dd.Content>
+        </BasicDropdownHover>
+
+        <BasicDropdownHover @horizontalPosition="right" @calculatePosition={{this.calculatePosition}} @renderInPlace={{true}} as |dd|>
+            <dd.Trigger
+                @tagName="button"
+                type="button"
+                class="next-dd-item flex-row items-center justify-between relative {{if dd.isOpen 'active'}}"
+                aria-haspopup="menu"
+                aria-expanded={{dd.isOpen}}
+            >
+                <div class="flex flex-row items-center">
+                    <div class="w-6"><FaIcon @icon="car" /></div>
+                    <span>
+                        {{t "map.visibility-controls.vehicle-controls"}}
+                    </span>
+                </div>
+                <div>
+                    <Badge @status="info" @hideStatusDot={{true}} @spanClass="rounded-full -mr-2">{{this.vehicles.length}}</Badge>
+                </div>
+            </dd.Trigger>
+
+            <dd.Content>
+                <div class="next-dd-menu" role="menu">
+                    <div class="px-1">
+                        <div class="text-sm flex flex-row items-center px-3 py-0.5 rounded-md my-1 text-gray-800 dark:text-gray-300 truncate">
+                            <FaIcon @icon="binoculars" class="mr-2" />
+                            <span>{{t "map.visibility-controls.vehicle-visibility-controls"}}</span>
+                        </div>
+                    </div>
+
+                    <div class="next-dd-menu-seperator"></div>
+
+                    <div class="px-1">
+                        <button type="button" role="menuitem" class="next-dd-item w-full" {{on "click" (fn this.toggleVehicles true)}}>
+                            {{#if this.areVehiclesHidden}}
+                                {{t "map.visibility-controls.show-vehicles"}}
+                            {{else}}
+                                {{t "map.visibility-controls.hide-vehicles"}}
+                            {{/if}}
+                        </button>
+
+                        <button type="button" role="menuitem" class="next-dd-item w-full" {{on "click" (fn this.toggleVehiclesByOnline true)}}>
+                            {{t "map.visibility-controls.show-online-vehicles"}}
+                        </button>
+
+                        <button type="button" role="menuitem" class="next-dd-item w-full" {{on "click" (fn this.toggleVehiclesByOnline false)}}>
+                            {{t "map.visibility-controls.show-offline-vehicles"}}
+                        </button>
+                    </div>
+                </div>
+            </dd.Content>
+        </BasicDropdownHover>
+    </div>
+</div>

package/addon/components/map/toolbar/visibility-control-panel.js

@@ -0,0 +1,78 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { calculateInPlacePosition } from 'ember-basic-dropdown/utils/calculate-position';
+
+export default class MapToolbarVisibilityControlPanel extends Component {
+    @service leafletLayerVisibilityManager;
+    @service leafletMapManager;
+    @tracked areVehiclesHidden = false;
+    @tracked arePlacesHidden = false;
+    @tracked areDriversHidden = false;
+
+    get livemap() {
+        return this.leafletMapManager?._livemap ?? {};
+    }
+
+    get vehicles() {
+        return this.livemap.vehicles ?? [];
+    }
+
+    get drivers() {
+        return this.livemap.drivers ?? [];
+    }
+
+    get places() {
+        return this.livemap.places ?? [];
+    }
+
+    #setModelVisible(model, visible) {
+        if (visible) {
+            this.leafletLayerVisibilityManager.showModelLayer(model);
+        } else {
+            this.leafletLayerVisibilityManager.hideModelLayer(model);
+        }
+    }
+
+    #setAllVisible(models, visible) {
+        for (const m of models) {
+            this.#setModelVisible(m, visible);
+        }
+    }
+
+    @action calculatePosition(trigger) {
+        const position = calculateInPlacePosition(...arguments);
+        const rect = trigger.getBoundingClientRect();
+        position.style.top = '-0.5rem';
+        position.style.left = `calc(${rect.width}px + 0.75rem)`;
+        return position;
+    }
+
+    @action togglePlaces() {
+        this.arePlacesHidden = !this.arePlacesHidden;
+        this.#setAllVisible(this.places, !this.arePlacesHidden);
+    }
+
+    @action toggleDrivers() {
+        this.areDriversHidden = !this.areDriversHidden;
+        this.#setAllVisible(this.drivers, !this.areDriversHidden);
+    }
+
+    @action toggleDriversByOnline(wantOnline = true) {
+        for (const d of this.drivers) {
+            this.#setModelVisible(d, Boolean(d?.online) === Boolean(wantOnline));
+        }
+    }
+
+    @action toggleVehicles() {
+        this.areVehiclesHidden = !this.areVehiclesHidden;
+        this.#setAllVisible(this.vehicles, !this.areVehiclesHidden);
+    }
+
+    @action toggleVehiclesByOnline(wantOnline = true) {
+        for (const v of this.vehicles) {
+            this.#setModelVisible(v, Boolean(v?.online) === Boolean(wantOnline));
+        }
+    }
+}

package/addon/components/map/toolbar/zones-panel.hbs

@@ -0,0 +1,55 @@
+<div class="next-dd-menu overflow-visible">
+    <div class="px-1">
+        <div class="text-sm flex flex-row items-center px-3 py-0.5 rounded-md my-1 text-gray-800 dark:text-gray-300">
+            {{t "map.zones-panel.title"}}
+        </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.geofence.createServiceArea)}}>{{t "map.zones-panel.create-service"}}</a>
+        <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn @dd this.geofence.showAllServiceAreas)}}>{{t "map.zones-panel.show"}}</a>
+        <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn @dd this.geofence.hideAllServiceAreas)}}>{{t "map.zones-panel.hide"}}</a>
+        {{#each this.serviceAreaActions.serviceAreas as |serviceArea|}}
+            <BasicDropdownHover @horizontalPosition="right" @calculatePosition={{this.calculatePosition}} @renderInPlace={{true}} as |dd|>
+                <dd.Trigger class="next-dd-item {{if dd.isOpen 'active'}}">
+                    <FaIcon @icon="drafting-compass" class="mr-2" />
+                    <span>{{serviceArea.name}}</span>
+                </dd.Trigger>
+                <dd.Content>
+                    <div class="next-dd-menu">
+                        <div class="px-1">
+                            <div class="text-sm flex flex-row items-center px-3 py-0.5 rounded-md my-1 text-gray-800 dark:text-gray-300 truncate">
+                                <FaIcon @icon="drafting-compass" class="mr-2" />
+                                <span>{{t "common.resource-actions" resource=serviceArea.name}}</span>
+                            </div>
+                        </div>
+                        <div class="next-dd-menu-seperator"></div>
+                        <div class="px-1">
+                            {{#if (is-model-leaflet-layer-hidden serviceArea)}}
+                                <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.geofence.focusServiceArea serviceArea)}}>
+                                    <span>{{t "map.zones-panel.focus-resource" resource=serviceArea.name}}</span>
+                                </a>
+                            {{else}}
+                                <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.geofence.blurServiceArea serviceArea)}}>
+                                    <span>{{t "map.zones-panel.blur-resource" resource=serviceArea.name}}</span>
+                                </a>
+                            {{/if}}
+                            <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.geofence.createZone serviceArea)}}>
+                                <span>{{t "map.zones-panel.create-zone-inside" serviceAreaName=serviceArea.name}}</span>
+                            </a>
+                            <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.serviceAreaActions.modal.edit serviceArea)}}>
+                                <span>{{t "common.edit-resource-name" resourceName=serviceArea.name}}</span>
+                            </a>
+                            <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.geofence.editServiceArea serviceArea)}}>
+                                <span>{{t "map.zones-panel.edit-boundaries" resource=serviceArea.name}}</span>
+                            </a>
+                            <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.serviceAreaActions.delete serviceArea)}}>
+                                <span>{{t "common.delete-resource-name" resourceName=serviceArea.name}}</span>
+                            </a>
+                        </div>
+                    </div>
+                </dd.Content>
+            </BasicDropdownHover>
+        {{/each}}
+    </div>
+</div>

package/addon/components/map/toolbar/zones-panel.js

@@ -0,0 +1,24 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { calculateInPlacePosition } from 'ember-basic-dropdown/utils/calculate-position';
+
+export default class MapToolbarZonesPanelComponent extends Component {
+    @service leafletMapManager;
+    @service serviceAreaActions;
+    @service geofence;
+
+    get serviceAreas() {
+        return this.serviceAreaActions.serviceAreas ?? [];
+    }
+
+    @action calculatePosition(trigger) {
+        const position = calculateInPlacePosition(...arguments);
+        const rect = trigger.getBoundingClientRect();
+
+        position.style.top = '-0.5rem';
+        position.style.left = `calc(${rect.width}px + 0.75rem)`;
+
+        return position;
+    }
+}

package/addon/components/map/toolbar.hbs

@@ -0,0 +1,115 @@
+<div class="next-map-container-toolbar-container {{if @horizontal 'toolbar-container-horizontal'}} {{if (eq @position 'bottom') 'position-bottom'}}" ...attributes>
+    <div class="next-map-container-toolbar next-map-container-toolbar-zoom-control">
+        <div id="map-toolbar-zoom-in-button-wrapper">
+            <button type="button" id="map-toolbar-zoom-in-button" class="toolbar-button" {{on "click" this.leafletMapManager.zoomIn}}>
+                <FaIcon @icon="plus" @prefix="fas" class="text-gray-100" />
+            </button>
+        </div>
+        <div id="map-toolbar-zoom-out-button-wrapper">
+            <button type="button" class="toolbar-button" {{on "click" this.leafletMapManager.zoomOut}}>
+                <FaIcon @icon="minus" id="map-toolbar-zoom-out-button" @prefix="fas" class="text-gray-100" />
+            </button>
+        </div>
+    </div>
+    <div class="next-map-container-toolbar-panel next-map-container-toolbar-actions">
+        {{#let (cannot "fleet-ops create order") as |unauthorized|}}
+            <button
+                type="button"
+                id="map-toolbar-create-order-button"
+                class="toolbar-button is-action {{if unauthorized 'unauthorized'}}"
+                {{on "click" (transition-to "operations.orders.index.new")}}
+                disabled={{unauthorized}}
+            >
+                <FaIcon @icon="paper-plane" />
+                <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
+                    {{#let (if unauthorized (concat (t "common.unauthorized-to") " " (t "common.create-order")) (t "common.create-order")) as |unauthorizedMessage|}}
+                        <InputInfo @text={{unauthorizedMessage}} @iconClass="hidden" class="py-1 px-2 bg-gray-900 -mt-1" />
+                    {{/let}}
+                </Attach::Tooltip>
+            </button>
+        {{/let}}
+        {{#let (cannot "fleet-ops list order") as |unauthorized|}}
+            <button
+                type="button"
+                id="map-toolbar-search-button"
+                class="toolbar-button {{if unauthorized 'unauthorized'}}"
+                {{on "click" this.globalSearch.toggle}}
+                disabled={{unauthorized}}
+            >
+                <FaIcon @icon="search" />
+                <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
+                    {{#let (if unauthorized (concat (t "common.unauthorized-to") " " (t "common.search")) (t "common.search")) as |unauthorizedMessage|}}
+                        <InputInfo @text={{unauthorizedMessage}} @iconClass="hidden" class="py-1 px-2 bg-gray-900 -mt-1" />
+                    {{/let}}
+                </Attach::Tooltip>
+            </button>
+        {{/let}}
+        {{#let (cannot "fleet-ops list order") as |unauthorized|}}
+            <button
+                type="button"
+                id="map-toolbar-view-orders-button"
+                class="toolbar-button relative {{if unauthorized 'unauthorized'}}"
+                {{on "click" this.orderListOverlay.toggle}}
+            >
+                <div class="active-orders-count absolute top-0 right-0 -mr-2.5 -mt-1">
+                    <div class="relative flex w-5 h-5 rounded-full">
+                        <div class="absolute inset-0 rounded-full w-5 h-5 text-xs bg-blue-500 opacity-75 {{if this.activeOrderCount 'animate-ping'}}"></div>
+                        <div class="relative inline-flex items-center justify-center rounded-full w-5 h-5 text-xs bg-blue-500 text-white z-10">{{this.activeOrderCount}}</div>
+                    </div>
+                </div>
+                <FaIcon @icon="layer-group" />
+                <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
+                    {{#let
+                        (if
+                            unauthorized
+                            (concat (t "common.unauthorized-to") " " (t "map.toolbar.view-order"))
+                            (t "map.toolbar.view-order")
+                        )
+                        as |unauthorizedMessage|
+                    }}
+                        <InputInfo @text={{unauthorizedMessage}} @iconClass="hidden" class="py-1 px-2 bg-gray-900 -mt-1" />
+                    {{/let}}
+                </Attach::Tooltip>
+            </button>
+        {{/let}}
+        {{#let (cannot "fleet-ops list service-area") as |unauthorized|}}
+            <BasicDropdown id="map-toolbar-service-areas-button" @horizontalPosition="right" @calculatePosition={{this.calculatePosition}} @renderInPlace={{true}} as |dd|>
+                <dd.Trigger class="toolbar-button {{if unauthorized 'unauthorized'}}">
+                    <FaIcon @icon="map-marked-alt" />
+                    <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
+                        {{#let
+                            (if
+                                unauthorized
+                                (concat (t "common.unauthorized-to") " " (t "map.toolbar.view-service-area"))
+                                (t "map.toolbar.view-service-area")
+                            )
+                            as |unauthorizedMessage|
+                        }}
+                            <InputInfo @text={{unauthorizedMessage}} @iconClass="hidden" class="{{if dd.isOpen 'hidden'}} py-1 px-2 bg-gray-900 -mt-1" />
+                        {{/let}}
+                    </Attach::Tooltip>
+                </dd.Trigger>
+                <dd.Content>
+                    <Map::Toolbar::ZonesPanel @dd={{dd}} />
+                </dd.Content>
+            </BasicDropdown>
+        {{/let}}
+        <BasicDropdown id="map-toolbar-visibility-controls-button" @horizontalPosition="right" @calculatePosition={{this.calculatePosition}} @renderInPlace={{true}} as |dd|>
+            <dd.Trigger class="toolbar-button">
+                <FaIcon @icon="eye" />
+                <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
+                    <InputInfo @text={{t "map.toolbar.visibility"}} @iconClass="hidden" class="{{if dd.isOpen 'hidden'}} py-1 px-2 bg-gray-900 -mt-1" />
+                </Attach::Tooltip>
+            </dd.Trigger>
+            <dd.Content>
+                <Map::Toolbar::VisibilityControlPanel @dd={{dd}} />
+            </dd.Content>
+        </BasicDropdown>
+        <button type="button" id="map-toolbar-live-map-drawer-button" class="toolbar-button is-action mb-0i" {{on "click" this.mapDrawer.toggle}}>
+            <FaIcon @icon="binoculars" />
+            <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
+                <InputInfo @text={{t "map.toolbar.scope"}} @iconClass="hidden" class="py-1 px-2 bg-gray-900 -mt-1" />
+            </Attach::Tooltip>
+        </button>
+    </div>
+</div>

package/addon/components/map/toolbar.js

@@ -0,0 +1,42 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { debug } from '@ember/debug';
+import { task } from 'ember-concurrency';
+
+export default class MapToolbarComponent extends Component {
+    @service leafletMapManager;
+    @service orderListOverlay;
+    @service mapDrawer;
+    @service globalSearch;
+    @service fetch;
+    @tracked activeOrderCount = 0;
+
+    constructor() {
+        super(...arguments);
+        this.getActiveOrderCount.perform();
+    }
+
+    @action calculatePosition(trigger) {
+        let { width } = trigger.getBoundingClientRect();
+
+        let style = {
+            marginTop: '0px',
+            left: `${width + 13}px`,
+            top: '0px',
+        };
+
+        return { style };
+    }
+
+    @task *getActiveOrderCount() {
+        try {
+            const count = yield this.fetch.get('fleet-ops/metrics', { discover: ['orders_in_progress'] });
+            this.activeOrderCount = count.orders_in_progress;
+            return count;
+        } catch (err) {
+            debug('Failed to get active order count: ' + err.message);
+        }
+    }
+}

package/addon/components/map.hbs

@@ -0,0 +1,11 @@
+{{yield
+    (hash
+        Container=(component "map/container")
+        Toolbar=(component "map/toolbar")
+        Search=(component "map/search")
+        Drawer=(component "map/drawer")
+        OrderList=(component "map/order-list-overlay")
+        LeafletLiveMap=(component "map/leaflet-live-map")
+        Leaflet=(component "leaflet-map")
+    )
+}}