@fleetbase/fleetops-engine 0.6.37 → 0.6.39

package/addon/components/orchestrator/plan-viewer.js

@@ -0,0 +1,342 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { addMinutes } from 'date-fns';
+import toCalendarDate from '../../utils/to-calendar-date';
+
+/**
+ * Orchestrator::PlanViewer
+ *
+ * Displays the proposed plan after a run completes. Shows per-vehicle
+ * route cards with ordered stop rows. Supports drag-and-drop manual
+ * overrides and expand/collapse per route card.
+ *
+ * Tabs:
+ *   - Routes   — per-vehicle route cards with ordered stop list
+ *   - Timeline — EventCalendar resourceTimelineDay view (same library as Scheduler)
+ *
+ * @arg planByVehicle         - Array of { vehicle, driver, orders, routeColor, summary }
+ * @arg unassignedAfterRun    - Array of orders the engine could not assign
+ * @arg runMessage            - Optional informational message from the engine
+ * @arg onDropOnVehicle       - Action(vehicleId, driverId, event)
+ * @arg onDragOver            - Action(event)
+ * @arg onDismissMessage      - Action — dismiss the run message banner
+ * @arg formatDuration        - Helper(seconds) → string
+ * @arg formatDistance        - Helper(metres) → string
+ * @arg formatUnixTime        - Helper(unix) → string
+ */
+export default class OrchestratorPlanViewerComponent extends Component {
+    @service currentUser;
+
+    @tracked expandedCards = new Set();
+    @tracked activeTab = 'routes'; // 'routes' | 'timeline'
+    @tracked _calendar = null;
+
+    // ── Tab / card actions ────────────────────────────────────────────────────
+
+    @action setTab(tab) {
+        this.activeTab = tab;
+    }
+
+    @action toggleCard(vehicleId) {
+        const expanded = new Set(this.expandedCards);
+        if (expanded.has(vehicleId)) {
+            expanded.delete(vehicleId);
+        } else {
+            expanded.add(vehicleId);
+        }
+        this.expandedCards = expanded;
+    }
+
+    @action expandAll() {
+        const ids = (this.args.planByVehicle ?? []).map((g) => g.vehicle?.public_id).filter(Boolean);
+        this.expandedCards = new Set(ids);
+    }
+
+    @action collapseAll() {
+        this.expandedCards = new Set();
+    }
+
+    /**
+     * Returns true when every vehicle card is expanded.
+     * Used to show the correct label on the single toggle button.
+     */
+    get allExpanded() {
+        const ids = (this.args.planByVehicle ?? []).map((g) => g.vehicle?.public_id).filter(Boolean);
+        return ids.length > 0 && ids.every((id) => this.expandedCards.has(id));
+    }
+
+    @action toggleExpandAll() {
+        if (this.allExpanded) {
+            this.collapseAll();
+        } else {
+            this.expandAll();
+        }
+    }
+
+    /**
+     * isExpanded — decorated as @action so Glimmer allows it to be invoked
+     * with an argument from HBS: (this.isExpanded vehicleId)
+     */
+    @action isExpanded(vehicleId) {
+        return this.expandedCards.has(vehicleId);
+    }
+
+    get hasUnassigned() {
+        return (this.args.unassignedAfterRun ?? []).length > 0;
+    }
+
+    get totalOrders() {
+        return (this.args.planByVehicle ?? []).reduce((sum, g) => sum + (g.orders?.length ?? 0), 0);
+    }
+
+    get totalVehicles() {
+        return (this.args.planByVehicle ?? []).length;
+    }
+
+    // ── EventCalendar ─────────────────────────────────────────────────────────
+
+    /**
+     * Returns the IANA timezone string for the current organisation.
+     * Falls back to the browser's local timezone.
+     */
+    get companyTimezone() {
+        return this.currentUser?.company?.timezone ?? Intl.DateTimeFormat().resolvedOptions().timeZone;
+    }
+
+    /**
+     * Receives the EventCalendar instance once it is mounted.
+     */
+    @action setCalendarApi(calendar) {
+        this._calendar = calendar;
+    }
+
+    /**
+     * The date to display on the timeline — derived from the earliest scheduled
+     * order in the plan, so the calendar opens on the right day automatically.
+     */
+    get timelineDate() {
+        const plan = this.args.planByVehicle ?? [];
+        let earliest = null;
+        for (const group of plan) {
+            for (const item of group.orders ?? []) {
+                const t = this._resolveStopTime(item);
+                if (t !== null) {
+                    if (earliest === null || t < earliest) earliest = t;
+                }
+            }
+        }
+        if (earliest === null) return new Date();
+        // Convert the UTC unix timestamp to a wall-clock Date in the company timezone.
+        return toCalendarDate(new Date(earliest * 1000), this.companyTimezone);
+    }
+
+    /**
+     * Resources for EventCalendar — one row per vehicle/driver group.
+     * When a driver phase ran (@hasDriverPhase), the row title uses the driver
+     * name as the primary identifier; otherwise the vehicle name is used.
+     */
+    get calendarResources() {
+        const hasDriverPhase = this.args.hasDriverPhase ?? false;
+        return (this.args.planByVehicle ?? []).map((group) => {
+            const primaryTitle =
+                hasDriverPhase && group.driver ? (group.driver.name ?? group.driver.display_name ?? 'Driver') : (group.vehicle?.display_name ?? group.vehicle?.name ?? 'Vehicle');
+            return {
+                id: group.vehicle?.public_id ?? group.vehicle?.id ?? String(Math.random()),
+                title: primaryTitle,
+                extendedProps: { group, hasDriverPhase },
+            };
+        });
+    }
+
+    /**
+     * Events for EventCalendar — one event per planned stop.
+     * Uses the vehicle's routeColor for consistent color coding.
+     */
+    get calendarEvents() {
+        const tz = this.companyTimezone;
+        const events = [];
+        const DURATION_MIN = 30; // default slot duration when no estimate available
+
+        for (const group of this.args.planByVehicle ?? []) {
+            const resourceId = group.vehicle?.public_id ?? group.vehicle?.id;
+            const color = group.routeColor ?? '#6366f1';
+
+            // Cursor used when no arrival time is known — starts at 08:00 on the plan date
+            let cursorMs = null;
+
+            for (const item of group.orders ?? []) {
+                const stopTimeSec = this._resolveStopTime(item);
+                let startMs;
+
+                if (stopTimeSec !== null) {
+                    startMs = stopTimeSec * 1000;
+                    cursorMs = startMs + DURATION_MIN * 60 * 1000;
+                } else {
+                    // No time known — use cursor or default to 08:00 today
+                    if (cursorMs === null) {
+                        const today = new Date();
+                        today.setHours(8, 0, 0, 0);
+                        cursorMs = today.getTime();
+                    }
+                    startMs = cursorMs;
+                    cursorMs = startMs + DURATION_MIN * 60 * 1000;
+                }
+
+                const startUtc = new Date(startMs);
+                const endUtc = addMinutes(startUtc, DURATION_MIN);
+
+                // Convert to "fake local" dates for EventCalendar timezone handling
+                const start = toCalendarDate(startUtc, tz);
+                const end = toCalendarDate(endUtc, tz);
+
+                const order = item.order;
+                const tracking = order?.tracking ?? order?.public_id ?? '—';
+                const customerName = order?.customer_name ?? null;
+                const pickupAddress = order?.payload?.pickup?.address ?? order?.pickup_name ?? null;
+                const dropoffAddress = order?.payload?.dropoff?.address ?? order?.dropoff_name ?? null;
+                const sequence = item.sequence ?? null;
+
+                events.push({
+                    id: `plan-${resourceId}-${order?.public_id ?? Math.random()}`,
+                    resourceId,
+                    title: tracking,
+                    start,
+                    end,
+                    display: 'block',
+                    backgroundColor: color,
+                    borderColor: color,
+                    textColor: '#ffffff',
+                    extendedProps: {
+                        order,
+                        tracking,
+                        sequence,
+                        customerName,
+                        pickupAddress,
+                        dropoffAddress,
+                        startUtc,
+                        endUtc,
+                    },
+                });
+            }
+        }
+
+        return events;
+    }
+
+    /**
+     * Renders the resource label cell for each timeline row.
+     * When a driver phase ran (hasDriverPhase), the driver name is the primary
+     * label and the vehicle name is the secondary sub-label. Otherwise the
+     * vehicle name is primary and the driver name (if any) is secondary.
+     */
+    @action renderResourceLabel({ resource }) {
+        const { group, hasDriverPhase } = resource.extendedProps ?? {};
+        const vehicleName = group?.vehicle?.display_name ?? group?.vehicle?.name ?? 'Vehicle';
+        const driverName = group?.driver?.name ?? '';
+        const stopCount = group?.orders?.length ?? 0;
+        const color = group?.routeColor ?? '#6366f1';
+
+        const primaryLabel = hasDriverPhase && driverName ? driverName : vehicleName;
+        const secondaryLabel = hasDriverPhase && driverName ? vehicleName : driverName;
+
+        return {
+            html: `<div style="width:100%;box-sizing:border-box;padding:4px 8px;border-left:3px solid ${color};">
+                <div style="font-size:0.72rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;">${primaryLabel}</div>
+                ${secondaryLabel ? `<div style="font-size:0.65rem;color:#9ca3af;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">${secondaryLabel}</div>` : ''}
+                <div style="font-size:0.62rem;color:#6b7280;margin-top:1px;">${stopCount} stop${stopCount !== 1 ? 's' : ''}</div>
+            </div>`,
+        };
+    }
+
+    /**
+     * Renders the event tile content inside the timeline.
+     * Shows: sequence + tracking number, scheduled time, pickup → dropoff address, customer.
+     */
+    @action renderEventContent({ event }) {
+        const { tracking, sequence, customerName, pickupAddress, dropoffAddress, startUtc, endUtc } = event.extendedProps ?? {};
+
+        const fmt = (d) => {
+            if (!d) return '';
+            return d.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false });
+        };
+
+        const title = sequence != null ? `${sequence}. ${tracking}` : tracking;
+        const timeRange = startUtc ? `${fmt(startUtc)} – ${fmt(endUtc)}` : '';
+        const routeLine = [pickupAddress, dropoffAddress].filter(Boolean).join(' > ');
+
+        return {
+            html: `<div style="display:flex;flex-direction:column;gap:2px;padding:3px 0;overflow:hidden;height:100%;">
+                <div style="display:flex;align-items:center;gap:4px;flex-wrap:nowrap;">
+                    <span style="width:7px;height:7px;border-radius:50%;background:#ffffff;opacity:0.9;flex-shrink:0;"></span>
+                    <span style="font-size:0.72rem;font-weight:700;color:#ffffff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;">${title}</span>
+                </div>
+                ${timeRange ? `<div style="font-size:0.65rem;color:rgba(255,255,255,0.9);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3;">${timeRange}</div>` : ''}
+                ${
+                    routeLine
+                        ? `<div style="font-size:0.62rem;color:rgba(255,255,255,0.8);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3;word-break:break-word;">${routeLine}</div>`
+                        : ''
+                }
+                ${
+                    customerName
+                        ? `<div style="font-size:0.62rem;color:rgba(255,255,255,0.7);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3;">${customerName}</div>`
+                        : ''
+                }
+            </div>`,
+        };
+    }
+
+    /**
+     * Calendar display options — 24h time format, no header toolbar
+     * (navigation is not needed for a read-only plan review).
+     */
+    get calendarOptions() {
+        return {
+            slotLabelFormat: { hour: '2-digit', minute: '2-digit', hour12: false },
+            eventTimeFormat: { hour: '2-digit', minute: '2-digit', hour12: false },
+            dayHeaderFormat: { weekday: 'short', month: 'numeric', day: 'numeric' },
+        };
+    }
+
+    get calendarHeaderToolbar() {
+        return { start: '', center: 'title', end: '' };
+    }
+
+    // ── Internal helpers ──────────────────────────────────────────────────────
+
+    /**
+     * Resolve the best available Unix timestamp (seconds) for a stop item.
+     *
+     * Priority:
+     *   1. VROOM arrival time (item.arrival — Unix seconds)
+     *   2. order.scheduled_at (JS Date object from Ember Data or ISO string from plain JSON)
+     *   3. null — caller must use a fallback cursor
+     */
+    _resolveStopTime(item) {
+        // 1. VROOM arrival time (Unix seconds integer)
+        if (item.arrival && typeof item.arrival === 'number') {
+            return item.arrival;
+        }
+        // 2. order.scheduled_at — may be a Date object (Ember Data) or an ISO
+        //    string (plain JSON from orchestrator/orders endpoint)
+        const scheduledAt = item.order?.scheduled_at;
+        if (scheduledAt) {
+            const d = scheduledAt instanceof Date ? scheduledAt : new Date(scheduledAt);
+            if (!isNaN(d.getTime())) {
+                return Math.floor(d.getTime() / 1000);
+            }
+        }
+        return null;
+    }
+
+    /**
+     * The date range covered by the plan, formatted for the header.
+     * e.g. "Thu Apr 10, 2026"
+     */
+    get timelineDateRange() {
+        const date = this.timelineDate;
+        if (!date) return null;
+        return date.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric', year: 'numeric' });
+    }
+}

package/addon/components/orchestrator/resource-panel.hbs

@@ -0,0 +1,301 @@
+{{! Orchestrator::ResourcePanel — right panel: Vehicles + Drivers tabs }}
+<div class="resource-panel flex flex-col h-full overflow-hidden">
+
+    {{! Tab bar — matches original border-bottom underline style }}
+    <div class="flex border-b dark:border-gray-700 flex-shrink-0">
+        <button
+            type="button"
+            class="flex-1 py-2 pl-2 text-xs font-medium transition-colors
+                {{if
+                    (eq this.activeTab 'vehicles')
+                    'text-indigo-500 border-b-2 border-indigo-500 dark:text-indigo-400 dark:border-indigo-400'
+                    'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'
+                }}"
+            {{on "click" (fn this.setTab "vehicles")}}
+        >
+            <FaIcon @icon="truck" @size="xs" class="mr-1" />
+            {{t "orchestrator.available-vehicles"}}
+            <span class="ml-1 text-gray-400 tabular-nums">({{this.filteredVehicles.length}})</span>
+        </button>
+        <button
+            type="button"
+            class="flex-1 py-2 text-xs font-medium transition-colors
+                {{if
+                    (eq this.activeTab 'drivers')
+                    'text-indigo-500 border-b-2 border-indigo-500 dark:text-indigo-400 dark:border-indigo-400'
+                    'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'
+                }}"
+            {{on "click" (fn this.setTab "drivers")}}
+        >
+            <FaIcon @icon="id-card-alt" @size="xs" class="mr-1" />
+            {{t "orchestrator.available-drivers"}}
+            <span class="ml-1 text-gray-400 tabular-nums">({{this.filteredDrivers.length}})</span>
+        </button>
+    </div>
+
+    {{! Search + filter strip — shared, sits above the scrollable list }}
+    <div class="px-2 py-1.5 border-b dark:border-gray-700 flex-shrink-0 space-y-1">
+        {{! Search input }}
+        <div class="relative">
+            <FaIcon @icon="search" @size="xs" class="absolute left-2 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none" />
+            {{#if (eq this.activeTab "vehicles")}}
+                <input
+                    type="text"
+                    class="form-input form-input-sm w-full pl-7i pr-2 py-1 text-xs"
+                    placeholder={{t "orchestrator.search-vehicles"}}
+                    value={{this.vehicleSearch}}
+                    {{on "input" this.onVehicleSearchInput}}
+                />
+            {{else}}
+                <input
+                    type="text"
+                    class="form-input form-input-sm w-full pl-7i pr-2 py-1 text-xs"
+                    placeholder={{t "orchestrator.search-drivers"}}
+                    value={{this.driverSearch}}
+                    {{on "input" this.onDriverSearchInput}}
+                />
+            {{/if}}
+        </div>
+        {{! Filter chips }}
+        {{#if (eq this.activeTab "vehicles")}}
+            <div class="flex gap-1 flex-wrap">
+                <button
+                    type="button"
+                    class="px-2 py-0.5 rounded text-xs transition-colors
+                        {{if
+                            (eq this.vehicleFilter 'all')
+                            'bg-indigo-500 text-white'
+                            'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
+                        }}"
+                    {{on "click" (fn this.setVehicleFilter "all")}}
+                >{{t "orchestrator.filter-all"}}</button>
+                <button
+                    type="button"
+                    class="px-2 py-0.5 rounded text-xs transition-colors
+                        {{if
+                            (eq this.vehicleFilter 'active')
+                            'bg-indigo-500 text-white'
+                            'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
+                        }}"
+                    {{on "click" (fn this.setVehicleFilter "active")}}
+                >{{t "orchestrator.filter-active"}}</button>
+                <button
+                    type="button"
+                    class="px-2 py-0.5 rounded text-xs transition-colors
+                        {{if
+                            (eq this.vehicleFilter 'available')
+                            'bg-indigo-500 text-white'
+                            'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
+                        }}"
+                    {{on "click" (fn this.setVehicleFilter "available")}}
+                >{{t "orchestrator.filter-available"}}</button>
+                <button
+                    type="button"
+                    class="px-2 py-0.5 rounded text-xs transition-colors
+                        {{if
+                            (eq this.vehicleFilter 'no-driver')
+                            'bg-indigo-500 text-white'
+                            'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
+                        }}"
+                    {{on "click" (fn this.setVehicleFilter "no-driver")}}
+                >{{t "orchestrator.filter-no-driver"}}</button>
+            </div>
+        {{else}}
+            <div class="flex gap-1 flex-wrap">
+                <button
+                    type="button"
+                    class="px-2 py-0.5 rounded text-xs transition-colors
+                        {{if
+                            (eq this.driverFilter 'all')
+                            'bg-indigo-500 text-white'
+                            'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
+                        }}"
+                    {{on "click" (fn this.setDriverFilter "all")}}
+                >{{t "orchestrator.filter-all"}}</button>
+                <button
+                    type="button"
+                    class="px-2 py-0.5 rounded text-xs transition-colors
+                        {{if
+                            (eq this.driverFilter 'online')
+                            'bg-indigo-500 text-white'
+                            'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
+                        }}"
+                    {{on "click" (fn this.setDriverFilter "online")}}
+                >{{t "orchestrator.filter-online"}}</button>
+                <button
+                    type="button"
+                    class="px-2 py-0.5 rounded text-xs transition-colors
+                        {{if
+                            (eq this.driverFilter 'offline')
+                            'bg-indigo-500 text-white'
+                            'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
+                        }}"
+                    {{on "click" (fn this.setDriverFilter "offline")}}
+                >{{t "orchestrator.filter-offline"}}</button>
+                <button
+                    type="button"
+                    class="px-2 py-0.5 rounded text-xs transition-colors
+                        {{if
+                            (eq this.driverFilter 'on-shift')
+                            'bg-indigo-500 text-white'
+                            'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
+                        }}"
+                    {{on "click" (fn this.setDriverFilter "on-shift")}}
+                >{{t "orchestrator.filter-on-job"}}</button>
+            </div>
+        {{/if}}
+    </div>
+
+    {{! Tab content }}
+    <div class="flex-1 overflow-y-auto">
+        {{#if @isLoading}}
+            <div class="flex justify-center py-8"><Spinner /></div>
+
+            {{! ── Vehicles tab ── }}
+        {{else if (eq this.activeTab "vehicles")}}
+            {{#if this.filteredVehicles.length}}
+                {{#each this.filteredVehicles as |vehicle|}}
+                    <button
+                        type="button"
+                        class="w-full text-left flex items-start gap-3 px-3 py-2.5 border-b dark:border-gray-700/60 cursor-pointer select-none transition-colors
+                            {{if
+                                (includes vehicle.public_id this.selectedVehicleIdsArray)
+                                'bg-indigo-100 dark:bg-indigo-900/60 hover:bg-indigo-100 dark:hover:bg-indigo-900/60'
+                                'hover:bg-gray-50 dark:hover:bg-gray-800/60'
+                            }}"
+                        {{on "click" (fn @onToggleVehicle vehicle)}}
+                    >
+                        {{! Avatar (photo_url) — driver online dot top-right }}
+                        <div class="relative flex-shrink-0 mt-0.5">
+                            <img
+                                src={{vehicle.photo_url}}
+                                alt={{or vehicle.display_name "Vehicle"}}
+                                class="w-9 h-9 rounded object-cover bg-gray-200 dark:bg-gray-700"
+                                {{fallback-img-src (config "defaultValues.vehicleAvatar")}}
+                            />
+                            <span
+                                class="absolute top-0 left-0 block w-2.5 h-2.5 rounded-full border-2 border-white dark:border-gray-900
+                                    {{if vehicle.driver.online 'bg-green-500' 'bg-gray-400'}}"
+                            ></span>
+                        </div>
+                        {{! All fields — always shown, "-" when absent }}
+                        <div class="flex-1 min-w-0 space-y-0.5">
+                            {{! Name + vehicle status badge }}
+                            <div class="flex items-center justify-between gap-1.5">
+                                <span class="text-xs font-semibold truncate dark:text-white">{{or vehicle.display_name "-"}}</span>
+                                {{#if vehicle.status}}
+                                    <Badge @status={{vehicle.status}}>{{smart-humanize vehicle.status}}</Badge>
+                                {{/if}}
+                            </div>
+                            {{! Assigned driver }}
+                            <div class="flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400">
+                                <FaIcon @icon="id-card-alt" @size="xs" class="w-3 flex-shrink-0" />
+                                <span class="truncate">{{or vehicle.driver.name (t "orchestrator.no-driver-assigned")}}</span>
+                            </div>
+                            {{! Plate number }}
+                            <div class="flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400">
+                                <FaIcon @icon="hashtag" @size="xs" class="w-3 flex-shrink-0" />
+                                <span class="truncate">{{or vehicle.plate_number "-"}}</span>
+                            </div>
+                            {{! Call sign }}
+                            <div class="flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400">
+                                <FaIcon @icon="broadcast-tower" @size="xs" class="w-3 flex-shrink-0" />
+                                <span class="truncate">{{or vehicle.call_sign "-"}}</span>
+                            </div>
+                        </div>
+                    </button>
+                {{/each}}
+            {{else}}
+                <div class="flex flex-col items-center justify-center py-12 text-gray-400 text-xs">
+                    <FaIcon @icon="truck" @size="2x" class="mb-2 opacity-40" />
+                    {{#if this.vehicleSearch}}
+                        {{t "orchestrator.no-search-results"}}
+                    {{else}}
+                        {{t "orchestrator.no-available-vehicles"}}
+                    {{/if}}
+                </div>
+            {{/if}}
+
+            {{! ── Drivers tab ── }}
+        {{else}}
+            {{#if this.filteredDrivers.length}}
+                {{#each this.filteredDrivers as |driver|}}
+                    <button
+                        type="button"
+                        class="w-full text-left flex items-start gap-3 px-3 py-2.5 border-b dark:border-gray-700/60 cursor-pointer select-none transition-colors
+                            {{if
+                                (includes driver.public_id this.selectedDriverIdsArray)
+                                'bg-indigo-100 dark:bg-indigo-900/60 hover:bg-indigo-100 dark:hover:bg-indigo-900/60'
+                                'hover:bg-gray-50 dark:hover:bg-gray-800/60'
+                            }}"
+                        {{on "click" (fn @onToggleDriver driver)}}
+                    >
+                        {{! Avatar — online dot top-right }}
+                        <div class="relative flex-shrink-0 mt-0.5">
+                            <img
+                                src={{driver.photo_url}}
+                                alt={{or driver.name "Driver"}}
+                                class="w-9 h-9 rounded-full object-cover bg-gray-200 dark:bg-gray-700"
+                                {{fallback-img-src (config "defaultValues.driverImage")}}
+                            />
+                            <span
+                                class="absolute top-0 left-0 block w-2.5 h-2.5 rounded-full border-2 border-white dark:border-gray-900 {{if driver.online 'bg-green-500' 'bg-gray-400'}}"
+                            ></span>
+                        </div>
+                        {{! All fields — always shown, "-" when absent }}
+                        <div class="flex-1 min-w-0 space-y-0.5">
+                            <div class="text-xs font-semibold truncate dark:text-white">{{or driver.name "-"}}</div>
+                            {{! Vehicle }}
+                            <div class="flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400">
+                                <FaIcon @icon="truck" @size="xs" class="w-3 flex-shrink-0" />
+                                <span class="truncate">{{or driver.vehicle.display_name (t "orchestrator.no-vehicle-assigned")}}</span>
+                            </div>
+                            {{! Phone }}
+                            <div class="flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400">
+                                <FaIcon @icon="phone" @size="xs" class="w-3 flex-shrink-0" />
+                                <span class="truncate">{{or driver.phone "-"}}</span>
+                            </div>
+                            {{! Email }}
+                            <div class="flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400">
+                                <FaIcon @icon="envelope" @size="xs" class="w-3 flex-shrink-0" />
+                                <span class="truncate">{{or driver.email "-"}}</span>
+                            </div>
+                        </div>
+                    </button>
+                {{/each}}
+            {{else}}
+                <div class="flex flex-col items-center justify-center py-12 text-gray-400 text-xs">
+                    <FaIcon @icon="id-card-alt" @size="2x" class="mb-2 opacity-40" />
+                    {{#if this.driverSearch}}
+                        {{t "orchestrator.no-search-results"}}
+                    {{else}}
+                        {{t "orchestrator.no-available-drivers"}}
+                    {{/if}}
+                </div>
+            {{/if}}
+        {{/if}}
+    </div>
+
+    {{! Selection info bar }}
+    {{#if (or this.selectedDriverIdsArray.length this.selectedVehicleIdsArray.length)}}
+        <div class="px-3 py-2 border-t dark:border-gray-700 bg-indigo-900/20 flex items-center justify-between flex-shrink-0">
+            <span class="text-xs text-indigo-400">
+                {{#if this.selectedVehicleIdsArray.length}}
+                    {{this.selectedVehicleIdsArray.length}}
+                    vehicles selected
+                {{/if}}
+                {{#if (and this.selectedVehicleIdsArray.length this.selectedDriverIdsArray.length)}}
+                    ·
+                {{/if}}
+                {{#if this.selectedDriverIdsArray.length}}
+                    {{this.selectedDriverIdsArray.length}}
+                    {{t "orchestrator.drivers-selected"}}
+                {{/if}}
+            </span>
+            <button type="button" class="text-xs text-gray-400 hover:text-white" {{on "click" this.clearAllSelections}}>
+                {{t "orchestrator.clear-selection"}}
+            </button>
+        </div>
+    {{/if}}
+
+</div>