@fleetbase/fleetops-engine 0.6.48 → 0.6.50

package/addon/components/map/leaflet-live-map.js

@@ -8,11 +8,14 @@ import { guidFor } from '@ember/object/internals';
 import { camelize, capitalize, dasherize } from '@ember/string';
 import { singularize, pluralize } from 'ember-inflector';
 import { all } from 'rsvp';
-import { task } from 'ember-concurrency';
+import { task, timeout } from 'ember-concurrency';
 import { next } from '@ember/runloop';
 import getModelName from '@fleetbase/ember-core/utils/get-model-name';
 
 export default class MapLeafletLiveMapComponent extends Component {
+    liveViewportReloadDebounceMs = 300;
+    liveViewportResourceLimit = 500;
+
     @service mapManager;
     @service mapSettings;
     @service leafletMapManager;
@@ -98,6 +101,11 @@ export default class MapLeafletLiveMapComponent extends Component {
             this.universe.off('fleet-ops.geofence.exited', this._geofenceExitedHandler);
             this._geofenceExitedHandler = null;
         }
+        if (this._viewportReloadHandler && this.map && typeof this.map.off === 'function') {
+            this.map.off('moveend', this._viewportReloadHandler);
+            this.map.off('zoomend', this._viewportReloadHandler);
+            this._viewportReloadHandler = null;
+        }
     }
 
     @action didLoad({ target: map }) {
@@ -106,8 +114,9 @@ export default class MapLeafletLiveMapComponent extends Component {
         this.trigger('onLoad', ...arguments);
         this.load.perform();
         // Listen for map move/zoom events to trigger viewport-based resource reload
-        map.on('moveend', () => this.reloadResourcesInViewport.perform());
-        map.on('zoomend', () => this.reloadResourcesInViewport.perform());
+        this._viewportReloadHandler = () => this.reloadResourcesInViewport.perform();
+        map.on('moveend', this._viewportReloadHandler);
+        map.on('zoomend', this._viewportReloadHandler);
     }
 
     /**
@@ -211,13 +220,27 @@ export default class MapLeafletLiveMapComponent extends Component {
         this.#createZoneContextMenu(zone, layer);
     }
 
+    @action rebuildMapContextMenu() {
+        if (!this.map) {
+            return;
+        }
+
+        this.#createMapContextMenu(this.map);
+        this.#refreshResourceContextMenus();
+        this.#pruneResourceContextMenus();
+    }
+
+    @action syncServiceAreaContextMenus() {
+        this.rebuildMapContextMenu();
+    }
+
     /** load resources and wait for stuff here and trigger map ready **/
     @task *load() {
         try {
             // Get initial map bounds for spatial filtering (provider-agnostic)
             const mapBounds = this.mapManager.getBounds?.() ?? (this.map ? this.map.getBounds() : null);
             const bounds = this.#serializeBoundsForRequest(mapBounds);
-            const params = bounds ? { bounds } : {};
+            const params = this.#liveViewportRequestParams(bounds);
 
             const data = yield all([
                 this.loadResource.perform('routes'),
@@ -242,12 +265,19 @@ export default class MapLeafletLiveMapComponent extends Component {
         if (this.isViewportReloadSuspended) {
             return;
         }
+
+        yield timeout(this.liveViewportReloadDebounceMs);
+
+        if (this.isViewportReloadSuspended) {
+            return;
+        }
+
         // Get current map bounds (provider-agnostic)
         const rawBounds = this.mapManager.getBounds?.() ?? this.map?.getBounds();
         if (!rawBounds) return;
         const bounds = this.#serializeBoundsForRequest(rawBounds);
         if (!bounds) return;
-        const params = { bounds };
+        const params = this.#liveViewportRequestParams(bounds);
 
         // Reload spatially-filtered resources (drivers, vehicles, places)
         // Orders, routes, and service-areas are not spatially filtered
@@ -445,6 +475,10 @@ export default class MapLeafletLiveMapComponent extends Component {
         return null;
     }
 
+    #liveViewportRequestParams(bounds) {
+        return bounds ? { bounds, limit: this.liveViewportResourceLimit } : { limit: this.liveViewportResourceLimit };
+    }
+
     #setResourceLayer(model, layer, options = {}) {
         const { hidden = false } = options;
         const type = getModelName(model);
@@ -462,6 +496,7 @@ export default class MapLeafletLiveMapComponent extends Component {
     }
 
     #createMapContextMenu(map) {
+        const serviceAreas = Array.from(this.serviceAreaActions.serviceAreas ?? []);
         const items = [
             {
                 text: this.intl.t('live-map.show-coordinates'),
@@ -494,10 +529,10 @@ export default class MapLeafletLiveMapComponent extends Component {
                 callback: () => this.geofence.createServiceArea(),
                 index: 5,
             },
-            this.serviceAreaActions.serviceAreas.length ? { separator: true } : null,
-            ...this.serviceAreaActions.serviceAreas.map((serviceArea, i) => {
+            serviceAreas.length ? { separator: true } : null,
+            ...serviceAreas.map((serviceArea, i) => {
                 return {
-                    text: this.intl.t('live-map.focus-service', { serviceName: serviceArea.name }),
+                    text: this.intl.t('live-map.focus-service', { serviceName: this.#resourceDisplayName(serviceArea) }),
                     callback: () => this.geofence.focusServiceArea(serviceArea),
                     index: 6 + i,
                 };
@@ -511,71 +546,200 @@ export default class MapLeafletLiveMapComponent extends Component {
     }
 
     #createZoneContextMenu(zone, layer) {
+        const zoneName = this.#resourceDisplayName(zone);
         let items = [
             {
                 separator: true,
             },
             {
-                text: this.intl.t('live-map.edit-zone', { zoneName: zone.name }),
+                text: this.intl.t('live-map.edit-zone', { zoneName }),
                 callback: () => this.zoneActions.modal.edit(zone),
             },
             {
-                text: this.intl.t('live-map.delete-zone', { zoneName: zone.name }),
-                callback: () => this.zoneActions.delete(zone),
+                text: this.intl.t('live-map.delete-zone', { zoneName }),
+                callback: () => this.#deleteZone(zone),
             },
         ];
 
         if (!this.mapManager.isGoogleMaps) {
             items.splice(2, 0, {
-                text: this.intl.t('live-map.edit-boundaries', { resource: zone.name }),
+                text: this.intl.t('live-map.edit-boundaries', { resource: zoneName }),
                 callback: () => this.geofence.editZone(zone),
             });
         }
 
         // create contextmenu registry
-        const contextmenuRegistry = this.leafletContextmenuManager.createContextMenu(`zone:${zone.public_id}`, layer, items, { zone });
+        const contextmenuRegistry = this.leafletContextmenuManager.createContextMenu(this.#resourceContextKey('zone', zone), layer, items, { zone });
         this.universe.trigger('fleet-ops:contextmenu:zone:created', contextmenuRegistry, this.leafletContextmenuManager);
 
         return contextmenuRegistry;
     }
 
     #createServiceAreaContextMenu(serviceArea, layer) {
+        const serviceName = this.#resourceDisplayName(serviceArea);
         let items = [
             {
                 separator: true,
             },
             {
-                text: this.intl.t('live-map.blur-service', { serviceName: serviceArea.name }),
+                text: this.intl.t('live-map.blur-service', { serviceName }),
                 callback: () => this.geofence.blurServiceArea(serviceArea),
             },
             {
-                text: this.intl.t('live-map.create-zone', { serviceName: serviceArea.name }),
+                text: this.intl.t('live-map.create-zone', { serviceName }),
                 callback: () => this.geofence.createZone(serviceArea),
             },
             {
-                text: this.intl.t('live-map.edit-service', { serviceName: serviceArea.name }),
+                text: this.intl.t('live-map.edit-service', { serviceName }),
                 callback: () => this.serviceAreaActions.modal.edit(serviceArea),
             },
             {
-                text: this.intl.t('live-map.delete-service', { serviceName: serviceArea.name }),
-                callback: () => this.serviceAreaActions.delete(serviceArea),
+                text: this.intl.t('live-map.delete-service', { serviceName }),
+                callback: () => this.#deleteServiceArea(serviceArea),
             },
         ];
 
         if (!this.mapManager.isGoogleMaps) {
             items.splice(4, 0, {
-                text: this.intl.t('live-map.edit-boundaries', { resource: serviceArea.name }),
+                text: this.intl.t('live-map.edit-boundaries', { resource: serviceName }),
                 callback: () => this.geofence.editServiceArea(serviceArea),
             });
         }
 
         // create contextmenu registry
-        const contextmenuRegistry = this.leafletContextmenuManager.createContextMenu(`service-area:${serviceArea.public_id}`, layer, items, { serviceArea });
+        const contextmenuRegistry = this.leafletContextmenuManager.createContextMenu(this.#resourceContextKey('service-area', serviceArea), layer, items, { serviceArea });
         this.universe.trigger('fleet-ops:contextmenu:service-area:created', contextmenuRegistry, this.leafletContextmenuManager);
 
         return contextmenuRegistry;
     }
 
+    #resourceContextKey(type, resource) {
+        return `${type}:${resource?.public_id ?? resource?.id}`;
+    }
+
+    #resourceDisplayName(resource) {
+        return resource?.get?.('name') || resource?.name || resource?.display_name || resource?.public_id || resource?.id || '';
+    }
+
+    #deleteServiceArea(serviceArea) {
+        const zones = Array.from(serviceArea?.zones ?? []);
+
+        return this.serviceAreaActions.delete(
+            serviceArea,
+            {},
+            {
+                callback: () => {
+                    this.#removeServiceAreaFromMapState(serviceArea, zones);
+                    this.rebuildMapContextMenu();
+                },
+            }
+        );
+    }
+
+    #deleteZone(zone) {
+        return this.zoneActions.delete(
+            zone,
+            {},
+            {
+                callback: () => {
+                    this.#removeZoneFromMapState(zone);
+                    this.rebuildMapContextMenu();
+                },
+            }
+        );
+    }
+
+    #removeServiceAreaFromMapState(serviceArea, zones = []) {
+        const serviceAreaId = serviceArea?.id;
+        const serviceAreaKey = this.#resourceContextKey('service-area', serviceArea);
+
+        zones.forEach((zone) => this.#removeZoneFromMapState(zone));
+        this.#removeOverlay(serviceArea);
+        this.leafletContextmenuManager.removeContextMenu(serviceAreaKey);
+
+        this.serviceAreaActions.serviceAreas = Array.from(this.serviceAreaActions.serviceAreas ?? []).filter((candidate) => candidate?.id !== serviceAreaId);
+    }
+
+    #removeZoneFromMapState(zone) {
+        const zoneId = zone?.id;
+        const zoneKey = this.#resourceContextKey('zone', zone);
+
+        this.#removeOverlay(zone);
+        this.leafletContextmenuManager.removeContextMenu(zoneKey);
+
+        for (const serviceArea of Array.from(this.serviceAreaActions.serviceAreas ?? [])) {
+            const zones = serviceArea?.zones;
+            if (!zones) {
+                continue;
+            }
+
+            const currentZones = Array.from(zones);
+            const nextZones = currentZones.filter((candidate) => candidate?.id !== zoneId);
+            if (nextZones.length !== currentZones.length) {
+                if (typeof zones.removeObject === 'function') {
+                    zones.removeObject(zone);
+                } else {
+                    serviceArea.set?.('zones', nextZones);
+                }
+                break;
+            }
+        }
+
+        this.serviceAreaActions.serviceAreas = Array.from(this.serviceAreaActions.serviceAreas ?? []);
+    }
+
+    #removeOverlay(resource) {
+        if (!resource?.id) {
+            return;
+        }
+
+        this.mapManager.removeOverlay?.(resource.id);
+
+        const layer = resource?.leafletLayer;
+        if (layer) {
+            this.mapManager.removeLayer?.(layer);
+        }
+    }
+
+    #refreshResourceContextMenus() {
+        for (const serviceArea of Array.from(this.serviceAreaActions.serviceAreas ?? [])) {
+            const serviceAreaLayer = this.mapManager.getOverlay(serviceArea?.id) ?? serviceArea?.leafletLayer;
+            if (serviceAreaLayer) {
+                this.#createServiceAreaContextMenu(serviceArea, serviceAreaLayer);
+            }
+
+            for (const zone of Array.from(serviceArea?.zones ?? [])) {
+                const zoneLayer = this.mapManager.getOverlay(zone?.id) ?? zone?.leafletLayer;
+                if (zoneLayer) {
+                    this.#createZoneContextMenu(zone, zoneLayer);
+                }
+            }
+        }
+    }
+
+    #pruneResourceContextMenus() {
+        const activeServiceAreaKeys = new Set();
+        const activeZoneKeys = new Set();
+
+        for (const serviceArea of Array.from(this.serviceAreaActions.serviceAreas ?? [])) {
+            activeServiceAreaKeys.add(this.#resourceContextKey('service-area', serviceArea));
+
+            for (const zone of Array.from(serviceArea?.zones ?? [])) {
+                activeZoneKeys.add(this.#resourceContextKey('zone', zone));
+            }
+        }
+
+        for (const registry of Object.values(this.leafletContextmenuManager.contextMenuRegistry ?? {})) {
+            if (registry?.serviceArea && !activeServiceAreaKeys.has(this.#resourceContextKey('service-area', registry.serviceArea))) {
+                this.leafletContextmenuManager.removeContextMenu(this.#resourceContextKey('service-area', registry.serviceArea));
+            }
+
+            if (registry?.zone && !activeZoneKeys.has(this.#resourceContextKey('zone', registry.zone))) {
+                this.leafletContextmenuManager.removeContextMenu(this.#resourceContextKey('zone', registry.zone));
+            }
+        }
+    }
+
     #createDriverContextMenu(driver, layer) {
         let items = [
             {

package/addon/components/modals/order-change-destination.hbs

@@ -0,0 +1,46 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{perform this.confirmSelection}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="space-y-3">
+            {{#each this.waypointOptions as |option|}}
+                <button
+                    type="button"
+                    class="w-full rounded-md border px-4 py-3 text-left shadow-sm transition {{if option.isCurrent 'border-blue-500 bg-blue-50 dark:border-blue-600 dark:bg-blue-900' (if option.isSelected 'border-green-500 bg-green-50 dark:border-green-700 dark:bg-green-900' 'border-gray-200 bg-white hover:border-blue-300 hover:bg-blue-50 dark:border-gray-700 dark:bg-gray-800 dark:hover:border-blue-700 dark:hover:bg-gray-900')}}"
+                    disabled={{this.confirmSelection.isRunning}}
+                    {{on "click" (fn this.selectOption option)}}
+                >
+                    <div class="flex items-start gap-3">
+                        <div
+                            class="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full text-xs font-bold {{if option.isCurrent 'bg-blue-600 text-white' 'bg-gray-200 text-gray-800 dark:bg-gray-700 dark:text-gray-100'}}"
+                        >
+                            {{option.label}}
+                        </div>
+                        <div class="min-w-0 flex-1">
+                            <div class="flex items-center justify-between gap-2">
+                                <div class="truncate text-sm font-semibold dark:text-gray-100">{{option.title}} - {{or option.waypoint.name option.waypoint.id}}</div>
+                                {{#if option.isCurrent}}
+                                    <Badge @status="info" class="uppercase">Current</Badge>
+                                {{else if option.isSelected}}
+                                    <Badge @status="success" class="uppercase">Selected</Badge>
+                                {{else if option.waypoint.complete}}
+                                    <Badge @status="completed" class="uppercase">Complete</Badge>
+                                {{else if option.waypoint.status_code}}
+                                    <Badge @status={{dasherize option.waypoint.status_code}} class="uppercase">{{option.waypoint.status_code}}</Badge>
+                                {{else if option.waypoint.status}}
+                                    <Badge @status={{dasherize option.waypoint.status}} class="uppercase">{{option.waypoint.status}}</Badge>
+                                {{/if}}
+                            </div>
+                            <div class="mt-1 truncate text-xs text-gray-600 dark:text-gray-300">{{or option.waypoint.address option.waypoint.street1}}</div>
+                            {{#if option.tracking}}
+                                <div class="mt-1 text-xs font-mono text-gray-500 dark:text-gray-400">{{option.tracking}}</div>
+                            {{/if}}
+                        </div>
+                    </div>
+                </button>
+            {{else}}
+                <div class="rounded-md border border-dashed border-gray-300 p-6 text-center text-sm text-gray-500 dark:border-gray-700 dark:text-gray-400">
+                    No waypoint destinations are available.
+                </div>
+            {{/each}}
+        </div>
+    </div>
+</Modal::Default>

package/addon/components/modals/order-change-destination.js

@@ -0,0 +1,106 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { task } from 'ember-concurrency';
+import { buildServiceStopsFromPayload, describeRoutePoint } from '../../utils/route-visualization';
+import { colorForId } from '../../utils/route-colors';
+
+export default class ModalsOrderChangeDestinationComponent extends Component {
+    @service fetch;
+    @service notifications;
+    @tracked selectedOption;
+
+    get order() {
+        return this.args.options?.order;
+    }
+
+    get waypoints() {
+        const waypoints = this.order?.payload?.waypoints;
+        if (typeof waypoints?.toArray === 'function') {
+            return waypoints.toArray();
+        }
+
+        return Array.isArray(waypoints) ? waypoints : Array.from(waypoints ?? []);
+    }
+
+    get routeColor() {
+        return colorForId(this.order?.public_id ?? this.order?.id ?? 'order-route');
+    }
+
+    get serviceStops() {
+        return buildServiceStopsFromPayload(this.order?.payload);
+    }
+
+    get currentWaypointId() {
+        const activeStop = this.order?.tracker_data?.active_stop;
+        const payload = this.order?.payload;
+
+        return activeStop?.uuid ?? activeStop?.public_id ?? payload?.current_waypoint_uuid ?? payload?.current_waypoint;
+    }
+
+    get waypointOptions() {
+        return this.serviceStops.map((stop, index) => ({
+            waypoint: stop.place,
+            stop,
+            index,
+            id: this.waypointId(stop.place),
+            isCurrent: this.isCurrentWaypoint(stop.place),
+            isSelected: this.isSelectedStop(stop),
+            label: describeRoutePoint(stop, this.routeColor).label,
+            title: describeRoutePoint(stop, this.routeColor).title,
+            tracking: this.trackingForStop(stop),
+        }));
+    }
+
+    waypointId(waypoint) {
+        return waypoint?.id ?? waypoint?.public_id ?? waypoint?.uuid;
+    }
+
+    isCurrentWaypoint(waypoint) {
+        return [waypoint?.id, waypoint?.uuid, waypoint?.public_id, waypoint?.waypoint_public_id].includes(this.currentWaypointId);
+    }
+
+    isSelectedStop(stop) {
+        const selectedPlace = this.selectedOption?.waypoint;
+
+        return [selectedPlace?.id, selectedPlace?.uuid, selectedPlace?.public_id, selectedPlace?.waypoint_public_id].includes(this.waypointId(stop?.place));
+    }
+
+    trackingForStop(stop) {
+        return stop?.place?.tracking ?? stop?.place?.tracking_number ?? stop?.trackingNumberUuid ?? this.order?.tracking ?? this.order?.tracking_number;
+    }
+
+    @action selectOption(option) {
+        if (!option?.isCurrent) {
+            this.selectedOption = option;
+        }
+    }
+
+    @task *confirmSelection(modal) {
+        const option = this.selectedOption;
+        const waypoint = option?.waypoint;
+        const waypointId = this.waypointId(waypoint);
+        if (!waypointId) {
+            modal.stopLoading();
+            return this.notifications.warning('Select a destination first.');
+        }
+
+        modal.startLoading();
+
+        try {
+            const order = yield this.fetch.patch(`orders/set-destination/${this.order.id}/${waypointId}`);
+            this.notifications.success(`Current destination changed to ${waypoint.name ?? waypoint.address ?? waypointId}.`);
+
+            if (typeof this.args.options?.onChange === 'function') {
+                yield this.args.options.onChange(order, waypoint);
+            }
+
+            modal.done();
+        } catch (error) {
+            this.notifications.serverError(error);
+        } finally {
+            modal.stopLoading();
+        }
+    }
+}

package/addon/components/modals/stop-activity.hbs

@@ -0,0 +1,28 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="mb-4 rounded-md border border-gray-200 bg-gray-50 px-4 py-3 dark:border-gray-700 dark:bg-gray-800">
+            <div class="text-xs font-semibold uppercase text-gray-500 dark:text-gray-400">Stop</div>
+            <div class="mt-1 text-sm font-semibold text-gray-900 dark:text-gray-100">{{this.stopName}}</div>
+            <div class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{or this.place.address this.place.street1}}</div>
+        </div>
+
+        {{#if this.loadActivity.isRunning}}
+            <div class="flex items-center justify-center p-8 text-sm text-gray-500 dark:text-gray-400">
+                <FaIcon @icon="spinner" @spin={{true}} class="mr-2" />
+                Loading activity...
+            </div>
+        {{else if this.trackingNumberUuid}}
+            <Order::ActivityList @activity={{this.activity}} @resource={{hash status=this.stop.status}} />
+        {{else}}
+            <div class="min-h-24 pb-4">
+                <div class="flex items-center justify-center rounded-xl border border-dashed border-gray-300 bg-gray-50 p-6 dark:border-gray-600 dark:bg-gray-800">
+                    <div class="text-center">
+                        <FaIcon @icon="layer-group" @size="2x" class="mb-2 text-gray-400" />
+                        <div class="text-sm font-medium text-gray-600 dark:text-gray-400">No stop activity</div>
+                        <div class="mt-1 text-xs text-gray-500 dark:text-gray-500">This stop does not have a separate activity stream.</div>
+                    </div>
+                </div>
+            </div>
+        {{/if}}
+    </div>
+</Modal::Default>

package/addon/components/modals/stop-activity.js

@@ -0,0 +1,52 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { task } from 'ember-concurrency';
+
+export default class ModalsStopActivityComponent extends Component {
+    @service store;
+    @service notifications;
+    @tracked activity = [];
+
+    constructor() {
+        super(...arguments);
+        this.loadActivity.perform();
+    }
+
+    get stop() {
+        return this.args.options?.stop;
+    }
+
+    get place() {
+        return this.stop?.place ?? this.stop;
+    }
+
+    get order() {
+        return this.args.options?.order;
+    }
+
+    get stopName() {
+        return this.place?.name ?? this.place?.address ?? this.place?.id;
+    }
+
+    get trackingNumberUuid() {
+        return this.stop?.trackingNumberUuid ?? this.stop?.tracking_number_uuid ?? this.stop?.tracking_number?.uuid ?? this.place?.tracking_number_uuid ?? this.place?.tracking_number?.uuid;
+    }
+
+    @task *loadActivity() {
+        if (!this.trackingNumberUuid) {
+            this.activity = [];
+            return [];
+        }
+
+        try {
+            const activity = yield this.store.query('tracking-status', {
+                tracking_number_uuid: this.trackingNumberUuid,
+            });
+            this.activity = activity.toArray();
+            return activity;
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+}

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

@@ -16,6 +16,23 @@
             </InfoBlock>
         {{/if}}
 
+        {{#if this.currentWaypoint}}
+            <div class="my-4 rounded-md border border-blue-200 bg-blue-50 px-4 py-3 text-blue-900 dark:border-blue-700 dark:bg-blue-900 dark:text-blue-50">
+                <div class="text-xs font-semibold uppercase">Updating activity for</div>
+                <div class="mt-1 flex items-start justify-between gap-3">
+                    <div class="min-w-0">
+                        <div class="truncate text-sm font-semibold">{{or this.currentWaypoint.name this.currentWaypoint.id}}</div>
+                        <div class="truncate text-xs">{{or (place-address-html this.currentWaypoint showTitle=false) this.currentWaypoint.address this.currentWaypoint.street1}}</div>
+                    </div>
+                    {{#if this.currentWaypoint.status_code}}
+                        <Badge @status={{dasherize this.currentWaypoint.status_code}} class="uppercase">{{this.currentWaypoint.status_code}}</Badge>
+                    {{else if this.currentWaypoint.status}}
+                        <Badge @status={{dasherize this.currentWaypoint.status}} class="uppercase">{{this.currentWaypoint.status}}</Badge>
+                    {{/if}}
+                </div>
+            </div>
+        {{/if}}
+
         <fieldset class="my-5">
             <legend class="sr-only">
                 {{t "modals.order-new-activity.activity-options"}}
@@ -36,14 +53,18 @@
                         </div>
                         <label for={{concat "activity_" index}} class="ml-3 flex flex-col cursor-pointer w-full">
                             <span class="block text-sm font-semibold">
-                                {{activity.status}}
+                                {{or activity._resolved_status activity.status}}
                             </span>
                             <span class="block text-sm">
-                                {{activity.details}}
+                                {{or activity._resolved_details activity.details}}
 
                                 {{#if (eq activity.code "dispatched")}}
                                     <InfoBlock @type="warning" @size="xs" @icon="exclamation-triangle" @text={{t "modals.order-new-activity.dispatch"}} class="mt-1" />
                                 {{/if}}
+
+                                {{#if activity.require_pod}}
+                                    <InfoBlock @type="warning" @size="xs" @icon="camera" @text="Requires photo proof of delivery" class="mt-1" />
+                                {{/if}}
                             </span>
                         </label>
                         <div>
@@ -88,5 +109,26 @@
                 </div>
             </div>
         </fieldset>
+
+        {{#if this.selectedActivityRequiresPod}}
+            <div class="mb-5 rounded-md border border-yellow-300 bg-yellow-50 p-4 dark:border-yellow-700 dark:bg-yellow-900">
+                <div class="mb-2 text-sm font-semibold text-yellow-900 dark:text-yellow-50">Photo proof of delivery required</div>
+                <p class="mb-3 text-xs text-yellow-800 dark:text-yellow-100">Upload a delivery photo before submitting this activity update.</p>
+                <FileUpload @name="photos[]" @accept={{join "," this.acceptedProofFileTypes}} @multiple={{false}} @onFileAdded={{this.setProofFile}}>
+                    <a tabindex={{0}} class="btn btn-magic cursor-pointer">
+                        <FaIcon @icon="camera" class="mr-1" />
+                        Select photo
+                    </a>
+                </FileUpload>
+                {{#if this.proofFiles}}
+                    {{#each this.proofFiles as |file|}}
+                        <div class="mt-3 flex items-center justify-between rounded-md border border-yellow-400 bg-white px-3 py-2 text-xs text-yellow-900 dark:bg-yellow-950 dark:text-yellow-50">
+                            <span class="truncate">{{file.name}}</span>
+                            <span class="font-semibold">{{round file.progress}}%</span>
+                        </div>
+                    {{/each}}
+                {{/if}}
+            </div>
+        {{/if}}
     </div>
-</Modal::Default>
+</Modal::Default>