@fleetbase/fleetops-engine 0.6.38 → 0.6.39

package/addon/components/orchestrator/order-pool.js

@@ -0,0 +1,394 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+
+/**
+ * Orchestrator::OrderPool
+ *
+ * Left panel of the Orchestrator Workbench. Displays the filterable,
+ * searchable list of orders available for allocation. Handles order
+ * selection (checkbox + click) and drag initiation.
+ *
+ * @arg orders              - Full array of available orders
+ * @arg selectedOrderIds    - Set of selected order public_ids
+ * @arg isLoading           - Whether data is loading
+ * @arg cardFields          - Configured card fields { standard: [], byConfig: {}, meta: [] }
+ * @arg onToggleSelection   - Action(order) — toggle order selection
+ * @arg onClearSelection    - Action — clear all selections
+ * @arg onDragStart         - Action(order, event) — drag start handler
+ * @arg onOpenImport        - Action — open import modal
+ */
+
+/**
+ * Default standard fields shown when no card-field settings have been saved.
+ */
+const DEFAULT_FIELDS = [
+    { key: 'pickup', icon: 'location-crosshairs', iconClass: 'text-green-400' },
+    { key: 'dropoff', icon: 'location-dot', iconClass: 'text-red-400' },
+    { key: 'scheduled_at', icon: 'clock', highlight: 'text-blue-500 dark:text-blue-400' },
+    { key: 'customer', icon: 'user' },
+    { key: 'driver_assigned', icon: 'id-badge' },
+    { key: 'vehicle_assigned', icon: 'truck' },
+    { key: 'created_at', icon: 'calendar-plus', highlight: 'text-gray-500 dark:text-gray-400' },
+];
+
+/** Icon/highlight metadata for known standard field keys. */
+const FIELD_META = {
+    tracking: { icon: 'hashtag' },
+    status: { icon: 'circle-dot' },
+    scheduled_at: { icon: 'clock', highlight: 'text-blue-500 dark:text-blue-400' },
+    customer: { icon: 'user' },
+    type: { icon: 'tag' },
+    notes: { icon: 'note-sticky' },
+    priority: { icon: 'flag' },
+    dropoff: { icon: 'location-dot', iconClass: 'text-red-400' },
+    pickup: { icon: 'location-crosshairs', iconClass: 'text-green-400' },
+    driver_assigned: { icon: 'id-badge' },
+    vehicle_assigned: { icon: 'truck' },
+    created_at: { icon: 'calendar-plus', highlight: 'text-gray-500 dark:text-gray-400' },
+};
+
+export default class OrchestratorOrderPoolComponent extends Component {
+    @service intl;
+
+    // ── Quick filter chip ─────────────────────────────────────────────────
+    @tracked orderSearch = '';
+    @tracked orderFilter = 'all';
+
+    // ── Card body collapse state (hides entire card body) ─────────────────
+    @tracked collapsedOrderIds = new Set();
+    // ── Inline route collapse state (hides route stop list inside card) ───
+    @tracked collapsedRouteIds = new Set();
+
+    // ── Advanced filter panel ─────────────────────────────────────────────────
+    @tracked showAdvanced = false;
+    @tracked advancedCountry = null;
+    @tracked advancedType = null;
+    @tracked advancedStatus = null;
+    @tracked advancedDate = null;
+
+    // ── Quick filter ──────────────────────────────────────────────────────────
+
+    @action onSearchInput(event) {
+        this.orderSearch = event.target.value;
+    }
+
+    @action setFilter(filter) {
+        this.orderFilter = filter;
+    }
+
+    @action stopPropagation(event) {
+        event?.stopPropagation();
+    }
+
+    // ── Waypoint collapse actions ─────────────────────────────────────────
+
+    @action toggleWaypointCollapse(orderId, event) {
+        event?.stopPropagation();
+        const next = new Set(this.collapsedOrderIds);
+        if (next.has(orderId)) {
+            next.delete(orderId);
+        } else {
+            next.add(orderId);
+        }
+        this.collapsedOrderIds = next;
+    }
+
+    get allWaypointsCollapsed() {
+        const orders = this.filteredOrders ?? [];
+        return orders.length > 0 && orders.every((o) => this.collapsedOrderIds.has(o.public_id));
+    }
+
+    @action toggleAllWaypoints() {
+        if (this.allWaypointsCollapsed) {
+            this.collapsedOrderIds = new Set();
+        } else {
+            const ids = (this.filteredOrders ?? []).map((o) => o.public_id).filter(Boolean);
+            this.collapsedOrderIds = new Set(ids);
+        }
+    }
+
+    @action collapseAllWaypoints() {
+        const ids = (this.filteredOrders ?? []).map((o) => o.public_id).filter(Boolean);
+        this.collapsedOrderIds = new Set(ids);
+    }
+
+    @action expandAllWaypoints() {
+        this.collapsedOrderIds = new Set();
+    }
+
+    @action isWaypointCollapsed(orderId) {
+        return this.collapsedOrderIds.has(orderId);
+    }
+
+    // ── Inline route collapse actions ────────────────────────────────────
+
+    @action toggleRouteCollapse(orderId, event) {
+        event?.stopPropagation();
+        const next = new Set(this.collapsedRouteIds);
+        if (next.has(orderId)) {
+            next.delete(orderId);
+        } else {
+            next.add(orderId);
+        }
+        this.collapsedRouteIds = next;
+    }
+
+    @action isRouteCollapsed(orderId) {
+        return this.collapsedRouteIds.has(orderId);
+    }
+
+    /**
+     * orderRouteStops — returns an array of { label, address } objects
+     * representing the ordered route stops for an order, using A/B/C labels.
+     */
+    @action orderRouteStops(order) {
+        const stops = [];
+        const payload = order.payload;
+
+        if (!payload) {
+            if (order.pickup_name) stops.push(order.pickup_name);
+            if (order.dropoff_name) stops.push(order.dropoff_name);
+            return stops.map((address, i) => ({ label: String.fromCharCode(65 + i), address }));
+        }
+
+        if (payload.pickup) {
+            stops.push(payload.pickup.address ?? payload.pickup.street1 ?? payload.pickup.name ?? '—');
+        }
+
+        const waypoints = typeof payload.waypoints?.toArray === 'function' ? payload.waypoints.toArray() : Array.isArray(payload.waypoints) ? payload.waypoints : [];
+
+        for (const wp of waypoints) {
+            const place = wp.place ?? wp;
+            stops.push(place.address ?? place.street1 ?? place.name ?? '—');
+        }
+
+        if (payload.dropoff) {
+            stops.push(payload.dropoff.address ?? payload.dropoff.street1 ?? payload.dropoff.name ?? '—');
+        }
+
+        if (stops.length === 0) {
+            if (order.pickup_name) stops.push(order.pickup_name);
+            if (order.dropoff_name) stops.push(order.dropoff_name);
+        }
+
+        return stops.map((address, i) => ({ label: String.fromCharCode(65 + i), address }));
+    }
+
+    // ── Advanced filter panel ─────────────────────────────────────────────────
+
+    @action toggleAdvanced() {
+        this.showAdvanced = !this.showAdvanced;
+    }
+
+    @action setAdvancedCountry(value) {
+        this.advancedCountry = value || null;
+    }
+
+    @action setAdvancedType(event) {
+        this.advancedType = event.target.value || null;
+    }
+
+    @action setAdvancedStatus(event) {
+        this.advancedStatus = event.target.value || null;
+    }
+
+    @action setAdvancedDate(event) {
+        this.advancedDate = event.target.value || null;
+    }
+
+    @action clearAdvancedFilters() {
+        this.advancedCountry = null;
+        this.advancedType = null;
+        this.advancedStatus = null;
+        this.advancedDate = null;
+    }
+
+    get hasAdvancedFilters() {
+        return !!(this.advancedCountry || this.advancedType || this.advancedStatus || this.advancedDate);
+    }
+
+    /** Unique order types derived from the current order pool. */
+    get availableTypes() {
+        const orders = this.args.orders ?? [];
+        const types = [...new Set(orders.map((o) => o.type).filter(Boolean))].sort();
+        return types;
+    }
+
+    /** Unique order statuses derived from the current order pool. */
+    get availableStatuses() {
+        const orders = this.args.orders ?? [];
+        const statuses = [...new Set(orders.map((o) => o.status).filter(Boolean))].sort();
+        return statuses;
+    }
+
+    // ── Filtered orders ───────────────────────────────────────────────────────
+
+    get filteredOrders() {
+        let orders = this.args.orders ?? [];
+
+        // ── Text search ───────────────────────────────────────────────────────
+        if (this.orderSearch) {
+            const q = this.orderSearch.toLowerCase();
+            orders = orders.filter(
+                (o) =>
+                    o.tracking?.toLowerCase().includes(q) ||
+                    o.public_id?.toLowerCase().includes(q) ||
+                    o.payload?.dropoff?.address?.toLowerCase().includes(q) ||
+                    o.payload?.pickup?.address?.toLowerCase().includes(q)
+            );
+        }
+
+        // ── Quick filter chip ─────────────────────────────────────────────────
+        if (this.orderFilter === 'scheduled') {
+            orders = orders.filter((o) => !!o.scheduled_at);
+        } else if (this.orderFilter === 'urgent') {
+            orders = orders.filter((o) => (o.orchestrator_priority ?? 0) >= 75);
+        } else if (this.orderFilter === 'today') {
+            const today = new Date().toDateString();
+            orders = orders.filter((o) => o.scheduled_at && new Date(o.scheduled_at).toDateString() === today);
+        } else if (this.orderFilter === 'unassigned') {
+            orders = orders.filter((o) => !o.vehicle_assigned_uuid && !o.driver_assigned_uuid);
+        } else if (this.orderFilter === 'imported') {
+            orders = orders.filter((o) => o.meta?.imported_via_orchestrator);
+        }
+
+        // ── Advanced filters ──────────────────────────────────────────────────
+        if (this.advancedCountry) {
+            const country = this.advancedCountry.toLowerCase();
+            orders = orders.filter((o) => {
+                const pickupCountry = (o.payload?.pickup?.country ?? '').toLowerCase();
+                const dropoffCountry = (o.payload?.dropoff?.country ?? '').toLowerCase();
+                const pickupAddr = (o.payload?.pickup?.address ?? '').toLowerCase();
+                return pickupCountry === country || dropoffCountry === country || pickupAddr.includes(country);
+            });
+        }
+
+        if (this.advancedType) {
+            orders = orders.filter((o) => o.type === this.advancedType);
+        }
+
+        if (this.advancedStatus) {
+            orders = orders.filter((o) => o.status === this.advancedStatus);
+        }
+
+        if (this.advancedDate) {
+            const filterDate = new Date(this.advancedDate).toDateString();
+            orders = orders.filter((o) => o.scheduled_at && new Date(o.scheduled_at).toDateString() === filterDate);
+        }
+
+        return orders;
+    }
+
+    get selectedOrderIdsArray() {
+        return [...(this.args.selectedOrderIds ?? new Set())];
+    }
+
+    // ── Card field resolution ─────────────────────────────────────────────────
+
+    /**
+     * resolvedCardFields — @action so Glimmer allows it to be invoked with
+     * arguments from HBS:  {{#each (this.resolvedCardFields order) as |field|}}
+     */
+    @action resolvedCardFields(order) {
+        const cardFields = this.args.cardFields;
+
+        if (!cardFields) {
+            return DEFAULT_FIELDS.map(({ key, icon, iconClass, highlight }) => {
+                const { value, label } = this._resolveStandardFieldFull(order, key);
+                if (!value) return null;
+                return { label, value, icon, iconClass, highlight };
+            }).filter(Boolean);
+        }
+
+        const fields = [];
+
+        for (const key of cardFields.standard ?? []) {
+            const { value, label } = this._resolveStandardFieldFull(order, key);
+            if (!value) continue;
+            const meta = FIELD_META[key] ?? {};
+            fields.push({ label, value, ...meta });
+        }
+
+        const configUuid = order.order_config_uuid;
+        if (configUuid && cardFields.byConfig?.[configUuid]) {
+            for (const fieldKey of cardFields.byConfig[configUuid]) {
+                let label = fieldKey;
+                let value = null;
+
+                const cfvCollection = order.custom_field_values ?? order.customFieldValues ?? [];
+                const cfvArray = typeof cfvCollection?.toArray === 'function' ? cfvCollection.toArray() : Array.isArray(cfvCollection) ? cfvCollection : [];
+
+                for (const cfv of cfvArray) {
+                    const cf = cfv.custom_field ?? (typeof cfv.customField?.get === 'function' ? cfv.customField : null) ?? cfv.customField ?? null;
+
+                    const cfName = cf?.name ?? cf?.get?.('name') ?? '';
+                    const cfLabel = cf?.label ?? cf?.get?.('label') ?? '';
+
+                    if (cfName !== fieldKey && cfLabel !== fieldKey) continue;
+
+                    const rawVal = cfv.value ?? null;
+                    if (rawVal !== null && rawVal !== undefined) {
+                        label = cfLabel || cfName || fieldKey;
+                        value = typeof rawVal === 'object' ? JSON.stringify(rawVal) : String(rawVal);
+                    }
+                    break;
+                }
+
+                if (value !== null && value !== '') {
+                    fields.push({ label, value });
+                }
+            }
+        }
+
+        for (const key of cardFields.meta ?? []) {
+            const val = order.meta?.[key];
+            if (val !== undefined && val !== null) {
+                fields.push({ label: key, value: String(val) });
+            }
+        }
+
+        return fields;
+    }
+
+    @action priorityBadgeStatus(priority) {
+        if (priority >= 75) return 'error';
+        if (priority >= 50) return 'warning';
+        return 'info';
+    }
+
+    _resolveStandardFieldFull(order, key) {
+        const t = (k) => {
+            try {
+                return this.intl.t(`orchestrator.${k}`);
+            } catch {
+                return k;
+            }
+        };
+        const map = {
+            tracking: { label: t('field-tracking'), value: order.tracking ?? order.public_id },
+            status: { label: t('field-status'), value: order.status },
+            scheduled_at: { label: t('scheduled'), value: order.scheduled_at ? this._formatDate(order.scheduled_at) : null },
+            customer: { label: t('customer'), value: order.customer?.name },
+            type: { label: t('field-type'), value: order.type },
+            notes: { label: t('field-notes'), value: order.notes },
+            priority: { label: t('field-priority'), value: order.orchestrator_priority != null ? String(order.orchestrator_priority) : null },
+            dropoff: { label: t('dropoff'), value: order.payload?.dropoff?.address ?? order.dropoff_name },
+            pickup: { label: t('pickup'), value: order.payload?.pickup?.address ?? order.pickup_name },
+            driver_assigned: { label: t('driver-assigned'), value: order.driver_assigned?.name },
+            vehicle_assigned: { label: t('vehicle-assigned'), value: order.vehicle_assigned?.display_name ?? order.vehicle_assigned?.name },
+            created_at: { label: t('created'), value: order.created_at ? this._formatDate(order.created_at) : null },
+        };
+        return map[key] ?? { label: key, value: order[key] != null ? String(order[key]) : null };
+    }
+
+    _formatDate(date) {
+        if (!date) return null;
+        try {
+            return new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' }).format(new Date(date));
+        } catch {
+            return String(date);
+        }
+    }
+}

package/addon/components/orchestrator/phase-builder.hbs

@@ -0,0 +1,162 @@
+{{! Orchestrator::PhaseBuilder — Compose a multi-phase orchestration run }}
+<div class="phase-builder flex flex-col h-full">
+
+    {{! Header }}
+    <div class="px-3 py-2 border-b dark:border-gray-700 flex items-center justify-between flex-shrink-0 bg-gray-50 dark:bg-gray-800">
+        <div>
+            <h3 class="text-xs font-semibold text-gray-800 dark:text-gray-100">{{t "orchestrator.phases"}}</h3>
+            <p class="text-xs text-gray-400 dark:text-gray-500">{{t "orchestrator.phases-description"}}</p>
+        </div>
+        <Button @icon="plus" @text={{t "orchestrator.add-phase"}} @type="default" @size="xs" @onClick={{this.addPhase}} />
+    </div>
+
+    <div class="flex flex-1 overflow-hidden">
+
+        {{! Phase list }}
+        <div class="w-48 border-r dark:border-gray-700 flex flex-col overflow-y-auto flex-shrink-0">
+            {{#if @phases.length}}
+                {{#each @phases as |phase index|}}
+                    <div
+                        class="flex items-center gap-2 px-2 py-2 border-b dark:border-gray-700 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors
+                            {{if (eq this.editingIndex index) 'bg-indigo-50 dark:bg-indigo-900/20 border-l-2 border-l-indigo-500' ''}}"
+                        {{on "click" (fn this.editPhase index)}}
+                    >
+                        <div class="w-5 h-5 rounded-full bg-indigo-100 dark:bg-indigo-900/40 flex items-center justify-center flex-shrink-0">
+                            <FaIcon @icon={{this.modeIcon phase.mode}} class="text-indigo-600 dark:text-indigo-400" @size="xs" />
+                        </div>
+                        <div class="flex-1 min-w-0">
+                            <p class="text-xs font-medium text-gray-800 dark:text-gray-100 truncate">{{phase.label}}</p>
+                            <p class="text-2xs text-gray-400 truncate">{{t "orchestrator.phase-n" n=(add index 1)}}</p>
+                        </div>
+                        <div class="flex flex-col gap-0.5 flex-shrink-0">
+                            <button type="button" class="text-gray-300 hover:text-gray-500 dark:hover:text-gray-200" {{on "click" (fn this.movePhaseUp index)}} title="Move up">
+                                <FaIcon @icon="chevron-up" @size="xs" />
+                            </button>
+                            <button type="button" class="text-gray-300 hover:text-gray-500 dark:hover:text-gray-200" {{on "click" (fn this.movePhaseDown index)}} title="Move down">
+                                <FaIcon @icon="chevron-down" @size="xs" />
+                            </button>
+                        </div>
+                    </div>
+                {{/each}}
+            {{else}}
+                <div class="flex flex-col items-center justify-center flex-1 py-8 text-gray-400 dark:text-gray-600">
+                    <FaIcon @icon="list-ol" class="mb-2 text-xl" />
+                    <p class="text-xs text-center px-2">{{t "orchestrator.no-phases"}}</p>
+                </div>
+            {{/if}}
+        </div>
+
+        {{! Phase editor }}
+        <div class="flex-1 overflow-y-auto">
+            {{#if this.isEditing}}
+                <div class="p-3 space-y-3">
+
+                    {{! Phase label }}
+                    <InputGroup @name={{t "orchestrator.phase-label"}}>
+                        <Input @type="text" @value={{this.draftPhase.label}} class="form-input form-input-sm w-full" {{on "input" this.setDraftLabel}} />
+                    </InputGroup>
+
+                    {{! Mode selection }}
+                    <InputGroup @name={{t "orchestrator.mode"}}>
+                        <div class="grid grid-cols-2 gap-1">
+                            {{#each this.modeOptions as |opt|}}
+                                <button
+                                    type="button"
+                                    class="flex items-center gap-1.5 px-2 py-1.5 rounded border text-xs transition-colors
+                                        {{if
+                                            (eq this.draftPhase.mode opt.value)
+                                            'bg-indigo-50 dark:bg-indigo-900/30 border-indigo-400 dark:border-indigo-600 text-indigo-700 dark:text-indigo-300'
+                                            'border-gray-200 dark:border-gray-600 text-gray-600 dark:text-gray-400 hover:border-gray-300 dark:hover:border-gray-500'
+                                        }}"
+                                    {{on "click" (fn this.setDraftMode opt.value)}}
+                                >
+                                    <FaIcon @icon={{this.modeIcon opt.value}} @size="xs" />
+                                    {{opt.label}}
+                                </button>
+                            {{/each}}
+                        </div>
+                    </InputGroup>
+
+                    {{! Order statuses to include }}
+                    <InputGroup @name={{t "orchestrator.include-order-statuses"}}>
+                        <div class="flex flex-wrap gap-1">
+                            {{#each this.orderStatusOptions as |opt|}}
+                                <button
+                                    type="button"
+                                    class="px-1.5 py-0.5 rounded text-xs border transition-colors
+                                        {{if
+                                            (includes opt.value this.draftPhase.orderStatuses)
+                                            'bg-indigo-100 dark:bg-indigo-900/40 border-indigo-400 text-indigo-700 dark:text-indigo-300'
+                                            'border-gray-200 dark:border-gray-600 text-gray-500 dark:text-gray-400'
+                                        }}"
+                                    {{on "click" (fn this.toggleDraftOrderStatus opt.value)}}
+                                >
+                                    {{opt.label}}
+                                </button>
+                            {{/each}}
+                        </div>
+                    </InputGroup>
+
+                    {{! Engine }}
+                    <InputGroup @name={{t "orchestrator.engine"}}>
+                        <Select
+                            @value={{this.draftPhase.engine}}
+                            @options={{@availableEngines}}
+                            @optionLabel="name"
+                            @optionValue="id"
+                            @onSelect={{this.setDraftEngine}}
+                            class="form-input-sm w-full"
+                        />
+                    </InputGroup>
+
+                    {{! Constraint toggles }}
+                    <InputGroup @name={{t "orchestrator.constraints"}}>
+                        <div class="space-y-1.5">
+                            <div class="flex items-center justify-between">
+                                <span class="text-xs text-gray-600 dark:text-gray-400">{{t "orchestrator.respect-capacity"}}</span>
+                                <Toggle @isToggled={{this.draftPhase.respectCapacity}} @onToggle={{fn this.setDraftOption "respectCapacity"}} />
+                            </div>
+                            <div class="flex items-center justify-between">
+                                <span class="text-xs text-gray-600 dark:text-gray-400">{{t "orchestrator.respect-skills"}}</span>
+                                <Toggle @isToggled={{this.draftPhase.respectSkills}} @onToggle={{fn this.setDraftOption "respectSkills"}} />
+                            </div>
+                            <div class="flex items-center justify-between">
+                                <span class="text-xs text-gray-600 dark:text-gray-400">{{t "orchestrator.balance-workload"}}</span>
+                                <Toggle @isToggled={{this.draftPhase.balanceWorkload}} @onToggle={{fn this.setDraftOption "balanceWorkload"}} />
+                            </div>
+                            <div class="flex items-center justify-between">
+                                <span class="text-xs text-gray-600 dark:text-gray-400">{{t "orchestrator.return-to-depot"}}</span>
+                                <Toggle @isToggled={{this.draftPhase.returnToDepot}} @onToggle={{fn this.setDraftOption "returnToDepot"}} />
+                            </div>
+                            <div class="flex items-center justify-between">
+                                <span class="text-xs text-gray-600 dark:text-gray-400">{{t "orchestrator.auto-commit"}}</span>
+                                <Toggle @isToggled={{this.draftPhase.autoCommit}} @onToggle={{fn this.setDraftOption "autoCommit"}} />
+                            </div>
+                        </div>
+                    </InputGroup>
+
+                    {{! Save / Cancel / Delete }}
+                    <div class="flex items-center gap-2 pt-1 border-t dark:border-gray-700">
+                        <Button @text={{t "orchestrator.save-phase"}} @type="primary" @size="xs" @onClick={{this.saveDraftPhase}} />
+                        <Button @text={{t "orchestrator.cancel"}} @type="default" @size="xs" @onClick={{this.closePhasEditor}} />
+                        <div class="flex-1"></div>
+                        <Button @icon="trash" @type="danger" @size="xs" @onClick={{fn this.removePhase this.editingIndex}} />
+                    </div>
+                </div>
+            {{else}}
+                <div class="flex flex-col items-center justify-center h-full py-12 text-gray-400 dark:text-gray-600">
+                    <FaIcon @icon="hand-pointer" class="mb-2 text-2xl" />
+                    <p class="text-xs">{{t "orchestrator.select-phase-to-edit"}}</p>
+                </div>
+            {{/if}}
+        </div>
+    </div>
+
+    {{! Run all phases button }}
+    {{#if @phases.length}}
+        <div class="px-3 py-2 border-t dark:border-gray-700 flex-shrink-0 bg-gray-50 dark:bg-gray-800">
+            <Button @icon="bolt" @text={{t "orchestrator.run-phases" count=@phases.length}} @type="primary" @size="sm" @onClick={{fn @onRunPhases @phases}} />
+        </div>
+    {{/if}}
+
+</div>