From a3f1a10bf525bc32d8b0d0484835059ed480b1fa Mon Sep 17 00:00:00 2001
From: James Pattinson <james@pattinson.org>
Date: Sun, 21 Jun 2026 17:26:42 -0400
Subject: [PATCH] Drone management improvements

---
 web/drone-requests.html | 458 ++++++++++++++++++++++++++++++++--------
 web/shared.js           |  10 +
 web/topbar.js           |  73 ++++++-
 3 files changed, 453 insertions(+), 88 deletions(-)

diff --git a/web/drone-requests.html b/web/drone-requests.html
index 138daa1..f9f8a9a 100644
--- a/web/drone-requests.html
+++ b/web/drone-requests.html
@@ -9,27 +9,57 @@
     <style>
         .workspace {
             display: grid;
-            grid-template-columns: minmax(360px, 0.95fr) minmax(520px, 1.35fr);
-            gap: 1rem;
+            grid-template-columns: 1fr;
+            gap: 0;
             align-items: start;
         }
 
+        .workspace.has-selection:not(.queue-open) {
+            grid-template-columns: 1fr;
+        }
+
+        .workspace.has-selection:not(.queue-open) .request-list {
+            display: none;
+        }
+
+        .workspace.has-selection:not(.queue-open) .detail-shell {
+            display: grid;
+        }
+
+        .container {
+            max-width: none;
+            padding: 1.25rem;
+        }
+
         .toolbar {
             display: flex;
             gap: 0.75rem;
             align-items: center;
             justify-content: space-between;
             flex-wrap: wrap;
-            margin-bottom: 1rem;
+            margin-bottom: 0.85rem;
+        }
+
+        .toolbar h2 {
+            font-size: 1.55rem;
+            margin: 0 0 0.15rem;
         }
 
         .filter-row {
             display: flex;
             gap: 0.5rem;
-            flex-wrap: wrap;
+            flex-wrap: nowrap;
             align-items: center;
         }
 
+        .filter-row select {
+            width: 210px;
+        }
+
+        .filter-row .btn {
+            padding: 0.58rem 0.9rem;
+        }
+
         .request-list {
             background: white;
             border-radius: 8px;
@@ -37,16 +67,49 @@
             overflow: hidden;
         }
 
+        .workspace:not(.has-selection) .queue-header .queue-toggle {
+            display: none;
+        }
+
+        .workspace .table-header {
+            padding: 0.72rem 0.85rem;
+        }
+
+        .queue-header,
+        .workbench-bar {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 0.75rem;
+        }
+
+        .queue-toggle {
+            border: 1px solid #cfd8e3;
+            border-radius: 5px;
+            background: white;
+            color: #263645;
+            cursor: pointer;
+            font: inherit;
+            font-weight: 700;
+            padding: 0.42rem 0.65rem;
+            white-space: nowrap;
+        }
+
+        .queue-toggle:hover {
+            background: #eef6fb;
+        }
+
         .request-list-body {
-            max-height: calc(100vh - 210px);
+            max-height: calc(100vh - 255px);
             overflow-y: auto;
         }
 
         .request-row {
             width: 100%;
             display: grid;
-            grid-template-columns: 1fr auto;
-            gap: 0.5rem;
+            grid-template-columns: minmax(150px, 0.8fr) minmax(200px, 1.1fr) minmax(150px, 0.85fr) auto;
+            gap: 1rem;
+            align-items: center;
             text-align: left;
             padding: 0.85rem 1rem;
             border: 0;
@@ -80,7 +143,7 @@
             font-size: 0.75rem;
             font-weight: 700;
             justify-content: center;
-            min-width: 86px;
+            min-width: 76px;
             padding: 0.25rem 0.55rem;
         }
 
@@ -93,13 +156,57 @@
         .status-COMPLETED { background: #2c3e50; }
 
         .detail-shell {
+            display: none;
+            gap: 0.85rem;
+        }
+
+        .workbench-bar {
+            align-items: center;
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
             display: grid;
-            grid-template-rows: auto minmax(360px, 52vh) auto;
-            gap: 1rem;
+            gap: 0.8rem;
+            grid-template-columns: minmax(220px, 1fr) minmax(360px, 1.45fr) auto;
+            padding: 0.7rem 0.85rem;
+        }
+
+        .workbench-title {
+            min-width: 0;
+        }
+
+        .workbench-title strong {
+            color: #263645;
+            display: block;
+            font-size: 1.05rem;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .workbench-title > span {
+            color: #607080;
+            display: block;
+            font-size: 0.85rem;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .workbench-title .status-pill {
+            margin-left: 0.45rem;
+            vertical-align: middle;
+        }
+
+        .selected-overview {
+            display: grid;
+            grid-template-columns: minmax(300px, 0.9fr) minmax(360px, 1.1fr);
+            gap: 0.85rem;
+            align-items: stretch;
         }
 
         .detail-panel,
-        .action-panel {
+        .journal-panel {
             background: white;
             border-radius: 8px;
             box-shadow: 0 2px 10px rgba(0,0,0,0.1);
@@ -107,25 +214,26 @@
         }
 
         .detail-body,
-        .action-body {
-            padding: 1rem;
+        .journal-body {
+            padding: 0.85rem;
         }
 
         .detail-grid {
             display: grid;
-            grid-template-columns: repeat(3, minmax(0, 1fr));
-            gap: 0.85rem;
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+            gap: 0.6rem 0.8rem;
         }
 
         .field-label {
             color: #607080;
-            font-size: 0.75rem;
+            font-size: 0.68rem;
             font-weight: 700;
             text-transform: uppercase;
         }
 
         .field-value {
             color: #263645;
+            font-size: 0.92rem;
             font-weight: 600;
             margin-top: 0.15rem;
             overflow-wrap: anywhere;
@@ -136,24 +244,35 @@
             border-radius: 8px;
             box-shadow: 0 2px 10px rgba(0,0,0,0.1);
             overflow: hidden;
-            min-height: 360px;
+            min-height: calc(100vh - 335px);
         }
 
         #request-map {
             width: 100%;
             height: 100%;
-            min-height: 360px;
+            min-height: calc(100vh - 335px);
         }
 
-        .action-row {
+        .request-actions {
             display: grid;
-            grid-template-columns: minmax(160px, 220px) 1fr auto;
-            gap: 0.75rem;
-            align-items: start;
+            grid-template-columns: minmax(130px, 170px) auto;
+            gap: 0.45rem;
+            align-items: center;
+        }
+
+        .request-actions .btn {
+            padding: 0.5rem 0.7rem;
+            white-space: nowrap;
+        }
+
+        .detail-actions {
+            border-top: 1px solid #eef1f4;
+            margin-top: 0.85rem;
+            padding-top: 0.85rem;
         }
 
         textarea {
-            min-height: 86px;
+            min-height: 42px;
             resize: vertical;
         }
 
@@ -168,14 +287,13 @@
         }
 
         .journal {
-            margin-top: 1rem;
-            border-top: 1px solid #e6e9ec;
-            padding-top: 0.75rem;
+            max-height: 170px;
+            overflow-y: auto;
         }
 
         .journal-entry {
             border-bottom: 1px solid #eef1f4;
-            padding: 0.55rem 0;
+            padding: 0.4rem 0;
         }
 
         .empty-state {
@@ -197,16 +315,38 @@
             transform: translateY(0);
         }
 
-        @media (max-width: 980px) {
+        @media (max-width: 780px) {
             .workspace,
-            .detail-grid,
-            .action-row {
+            .request-row,
+            .selected-overview,
+            .workbench-bar,
+            .request-actions {
                 grid-template-columns: 1fr;
             }
 
+            .workspace.has-selection:not(.queue-open) {
+                grid-template-columns: 1fr;
+            }
+
+            .map-panel,
+            #request-map {
+                min-height: 360px;
+            }
+
             .request-list-body {
                 max-height: 360px;
             }
+
+        }
+
+        @media (max-width: 680px) {
+            .detail-grid {
+                grid-template-columns: 1fr;
+            }
+
+            .container {
+                padding: 1rem;
+            }
         }
     </style>
     <script src="topbar.js"></script>
@@ -247,45 +387,42 @@
             </div>
         </div>
 
-        <div class="workspace">
+        <div id="workspace" class="workspace">
             <section class="request-list">
-                <div class="table-header">Request Queue - <span id="request-count">0</span></div>
+                <div class="table-header queue-header">
+                    <span>Request Queue - <span id="request-count">0</span></span>
+                    <button class="queue-toggle" type="button" onclick="toggleQueue(false)">Hide</button>
+                </div>
                 <div id="request-list-body" class="request-list-body">
                     <div class="empty-state">Loading requests...</div>
                 </div>
             </section>
 
             <section class="detail-shell">
-                <div class="detail-panel">
-                    <div class="table-header">Selected Request</div>
-                    <div id="detail-body" class="detail-body">
-                        <div class="empty-state">Select a request to view its details.</div>
+                <div class="workbench-bar">
+                    <div id="workbench-title" class="workbench-title">
+                        <strong>No request selected</strong>
+                        <span>Select a request from the queue.</span>
+                    </div>
+                    <div id="workbench-actions" class="request-actions"></div>
+                    <button id="queue-toggle-main" class="queue-toggle" type="button" onclick="toggleQueue()">Queue</button>
+                </div>
+
+                <div class="selected-overview">
+                    <div class="detail-panel">
+                        <div id="detail-body" class="detail-body">
+                            <div class="empty-state">Select a request to view its details.</div>
+                        </div>
+                    </div>
+
+                    <div class="map-panel">
+                        <div id="request-map"></div>
                     </div>
                 </div>
 
-                <div class="map-panel">
-                    <div id="request-map"></div>
-                </div>
-
-                <div class="action-panel">
-                    <div class="table-header">Lifecycle</div>
-                    <div class="action-body">
-                        <div class="action-row">
-                            <select id="status-select" aria-label="New status">
-                                <option value="NEW">NEW</option>
-                                <option value="PENDING">PENDING</option>
-                                <option value="APPROVED">APPROVED</option>
-                                <option value="DENIED">DENIED</option>
-                                <option value="CANCELED">CANCELED</option>
-                                <option value="INFLIGHT">INFLIGHT</option>
-                                <option value="COMPLETED">COMPLETED</option>
-                            </select>
-                            <textarea id="operator-comment" placeholder="Comment or request for more information"></textarea>
-                            <div style="display: flex; flex-direction: column; gap: 0.5rem;">
-                                <button class="btn btn-success" onclick="saveStatus()">Set Status</button>
-                                <button class="btn btn-info" onclick="sendComment()">Send Comment</button>
-                            </div>
-                        </div>
+                <div class="journal-panel">
+                    <div class="table-header">Journal History</div>
+                    <div class="journal-body">
                         <div id="journal" class="journal"></div>
                     </div>
                 </div>
@@ -317,6 +454,25 @@
         </div>
     </div>
 
+    <div id="messageModal" class="modal" style="display: none;">
+        <div class="modal-content" style="max-width: 520px;">
+            <div class="modal-header">
+                <h2>Send Message</h2>
+                <button class="close" onclick="closeMessageModal()">&times;</button>
+            </div>
+            <form id="message-form">
+                <div class="form-group">
+                    <label for="message-comment">Message to operator</label>
+                    <textarea id="message-comment" required placeholder="Type the message to email to the operator"></textarea>
+                </div>
+                <div class="form-actions">
+                    <button type="button" class="btn btn-secondary" onclick="closeMessageModal()">Cancel</button>
+                    <button id="message-send-btn" type="submit" class="btn btn-info">Send Message</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
     <script>
         let accessToken = null;
@@ -329,6 +485,7 @@
 
         document.addEventListener('DOMContentLoaded', () => {
             document.getElementById('login-form').addEventListener('submit', handleLogin);
+            document.getElementById('message-form').addEventListener('submit', sendMessageFromModal);
             document.getElementById('status-filter').addEventListener('change', loadRequests);
             initializeAuth();
             initializeMap();
@@ -406,6 +563,9 @@
                 currentUser = username;
                 document.getElementById('current-user').textContent = username;
                 hideLogin();
+                if (typeof window.refreshDroneRequestBadge === 'function') {
+                    window.refreshDroneRequestBadge();
+                }
                 loadRequests();
             } catch (err) {
                 error.textContent = err.message;
@@ -422,6 +582,7 @@
             accessToken = null;
             currentUser = null;
             selectedRequest = null;
+            setLifecycleControlsEnabled(false);
             showLogin();
         }
 
@@ -458,7 +619,15 @@
                 renderRequestList();
                 if (selectedRequest) {
                     const fresh = requests.find(r => r.id === selectedRequest.id);
-                    if (fresh) selectRequest(fresh.id);
+                    if (fresh) {
+                        const keepQueueOpen = document.getElementById('workspace')?.classList.contains('queue-open');
+                        selectRequest(fresh.id, !keepQueueOpen);
+                    } else {
+                        clearSelectedRequest();
+                    }
+                } else {
+                    setQueueOpen(true);
+                    updateWorkbenchTitle();
                 }
             } catch (err) {
                 body.innerHTML = `<div class="empty-state">${escapeHtml(err.message)}</div>`;
@@ -467,6 +636,7 @@
 
         function renderRequestList() {
             document.getElementById('request-count').textContent = requests.length;
+            setQueueOpen(!selectedRequest || document.getElementById('workspace').classList.contains('queue-open'));
             const body = document.getElementById('request-list-body');
             if (!requests.length) {
                 body.innerHTML = '<div class="empty-state">No requests match the current filter.</div>';
@@ -477,34 +647,81 @@
                 <button class="request-row ${selectedRequest && selectedRequest.id === req.id ? 'active' : ''}" onclick="selectRequest(${req.id})">
                     <div>
                         <div class="request-ref">${escapeHtml(req.reference_number)}</div>
-                        <div class="request-meta">${escapeHtml(req.operator_name)} · ${formatDateTime(req.estimated_takeoff_at)}</div>
-                        <div class="request-meta">${escapeHtml(req.location_description || `${req.location_latitude}, ${req.location_longitude}`)}</div>
+                        <div class="request-meta">${escapeHtml(req.operator_name)}</div>
+                    </div>
+                    <div class="request-meta">${escapeHtml(req.location_description || `${req.location_latitude}, ${req.location_longitude}`)}</div>
+                    <div class="request-meta">
+                        <strong>${formatDateTime(req.estimated_takeoff_at)}</strong><br>
+                        ${formatDateTime(req.estimated_completion_at)}
                     </div>
                     <span class="status-pill status-${req.status}">${req.status}</span>
                 </button>
             `).join('');
         }
 
-        async function selectRequest(id) {
+        async function selectRequest(id, collapseQueue = true) {
             selectedRequest = requests.find(req => req.id === id);
             if (!selectedRequest) return;
+            setQueueOpen(!collapseQueue);
+            setLifecycleControlsEnabled(true);
+            updateWorkbenchTitle();
             renderRequestList();
             renderDetails();
             renderMap();
             await loadJournal();
         }
 
+        function clearSelectedRequest() {
+            selectedRequest = null;
+            setQueueOpen(true);
+            setLifecycleControlsEnabled(false);
+            updateWorkbenchTitle();
+            document.getElementById('detail-body').innerHTML = '<div class="empty-state">Select a request to view its details.</div>';
+            document.getElementById('journal').innerHTML = '';
+            renderRequestList();
+            renderMap();
+        }
+
+        function toggleQueue(forceOpen = null) {
+            const workspace = document.getElementById('workspace');
+            if (!workspace) return;
+            const open = forceOpen === null ? !workspace.classList.contains('queue-open') : forceOpen;
+            setQueueOpen(open);
+        }
+
+        function setQueueOpen(open) {
+            const workspace = document.getElementById('workspace');
+            if (!workspace) return;
+            workspace.classList.toggle('has-selection', Boolean(selectedRequest));
+            workspace.classList.toggle('queue-open', open || !selectedRequest);
+            const button = document.getElementById('queue-toggle-main');
+            if (button) {
+                button.textContent = workspace.classList.contains('queue-open')
+                    ? 'Hide Queue'
+                    : `Queue (${requests.length})`;
+            }
+            setTimeout(() => {
+                if (map) map.invalidateSize();
+            }, 240);
+        }
+
+        function updateWorkbenchTitle() {
+            const title = document.getElementById('workbench-title');
+            if (!title) return;
+            if (!selectedRequest) {
+                title.innerHTML = '<strong>No request selected</strong><span>Select a request from the queue.</span>';
+                renderWorkbenchActions();
+                return;
+            }
+            title.innerHTML = `
+                <strong>${escapeHtml(selectedRequest.reference_number)} · ${escapeHtml(selectedRequest.operator_name)} <span class="status-pill status-${selectedRequest.status}">${selectedRequest.status}</span></strong>
+                <span>${escapeHtml(selectedRequest.location_description || `${selectedRequest.location_latitude}, ${selectedRequest.location_longitude}`)} · ${formatDateTime(selectedRequest.estimated_takeoff_at)}</span>
+            `;
+            renderWorkbenchActions();
+        }
+
         function renderDetails() {
-            document.getElementById('status-select').value = selectedRequest.status;
-            document.getElementById('operator-comment').value = selectedRequest.operator_comments || '';
             document.getElementById('detail-body').innerHTML = `
-                <div style="display: flex; justify-content: space-between; gap: 1rem; align-items: start; margin-bottom: 1rem;">
-                    <div>
-                        <h2>${escapeHtml(selectedRequest.reference_number)}</h2>
-                        <div class="detail-meta">${escapeHtml(selectedRequest.operator_name)} · ${escapeHtml(selectedRequest.email)} · ${escapeHtml(selectedRequest.phone || '-')}</div>
-                    </div>
-                    <span class="status-pill status-${selectedRequest.status}">${selectedRequest.status}</span>
-                </div>
                 <div class="detail-grid">
                     ${field('Operator ID', selectedRequest.operator_id)}
                     ${field('Flyer', selectedRequest.flyer_name)}
@@ -519,13 +736,45 @@
                     ${field('Applicant Notes', selectedRequest.notes || '-')}
                     ${field('Operator Comments', selectedRequest.operator_comments || '-')}
                 </div>
+                <div class="detail-actions">
+                    <button class="btn btn-info" onclick="openMessageModal()">Send Message</button>
+                </div>
             `;
         }
 
+        function renderWorkbenchActions() {
+            const actions = document.getElementById('workbench-actions');
+            if (!actions) return;
+            if (!selectedRequest) {
+                actions.innerHTML = '';
+                return;
+            }
+
+            actions.innerHTML = `
+                <select id="status-select" class="lifecycle-control" aria-label="New status">
+                    <option value="NEW">NEW</option>
+                    <option value="PENDING">PENDING</option>
+                    <option value="APPROVED">APPROVED</option>
+                    <option value="DENIED">DENIED</option>
+                    <option value="CANCELED">CANCELED</option>
+                    <option value="INFLIGHT">INFLIGHT</option>
+                    <option value="COMPLETED">COMPLETED</option>
+                </select>
+                <button class="btn btn-success lifecycle-control" onclick="saveStatus()">Set</button>
+            `;
+            document.getElementById('status-select').value = selectedRequest.status;
+        }
+
         function field(label, value) {
             return `<div><div class="field-label">${escapeHtml(label)}</div><div class="field-value">${escapeHtml(value == null ? '-' : String(value))}</div></div>`;
         }
 
+        function setLifecycleControlsEnabled(enabled) {
+            document.querySelectorAll('.lifecycle-control').forEach(control => {
+                control.disabled = !enabled;
+            });
+        }
+
         function renderMap() {
             clearMapLayers();
             if (!map) return;
@@ -552,9 +801,23 @@
             }
 
             if (!mapLayers.length) return;
-            const group = L.featureGroup(mapLayers);
-            map.fitBounds(group.getBounds().pad(0.18));
-            setTimeout(() => map.invalidateSize(), 50);
+            fitMapToLayers();
+        }
+
+        function fitMapToLayers() {
+            const mapEl = document.getElementById('request-map');
+            if (!map || !mapEl || !mapLayers.length) return;
+
+            setTimeout(() => {
+                map.invalidateSize();
+                if (!mapEl.offsetWidth || !mapEl.offsetHeight) return;
+
+                const group = L.featureGroup(mapLayers);
+                const bounds = group.getBounds();
+                if (bounds.isValid()) {
+                    map.fitBounds(bounds.pad(0.18));
+                }
+            }, 120);
         }
 
         function addLayer(layer) {
@@ -569,29 +832,46 @@
         async function saveStatus() {
             if (!selectedRequest) return showNotification('Select a request first', true);
             const status = document.getElementById('status-select').value;
-            const comment = document.getElementById('operator-comment').value.trim();
 
             try {
                 const response = await authenticatedFetch(`/api/v1/drone-requests/${selectedRequest.id}/status`, {
                     method: 'PATCH',
                     headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ status, comment: comment || null })
+                    body: JSON.stringify({ status, comment: null })
                 });
                 if (!response.ok) throw new Error('Failed to update status');
                 selectedRequest = await response.json();
                 showNotification('Status updated');
                 await loadRequests();
-                renderDetails();
-                await loadJournal();
+                if (selectedRequest) {
+                    renderDetails();
+                    await loadJournal();
+                }
             } catch (err) {
                 showNotification(err.message, true);
             }
         }
 
-        async function sendComment() {
+        function openMessageModal() {
             if (!selectedRequest) return showNotification('Select a request first', true);
-            const comment = document.getElementById('operator-comment').value.trim();
+            document.getElementById('message-comment').value = '';
+            document.getElementById('messageModal').style.display = 'block';
+            document.getElementById('message-comment').focus();
+        }
+
+        function closeMessageModal() {
+            document.getElementById('messageModal').style.display = 'none';
+            document.getElementById('message-form').reset();
+        }
+
+        async function sendMessageFromModal(event) {
+            event.preventDefault();
+            if (!selectedRequest) return showNotification('Select a request first', true);
+
+            const comment = document.getElementById('message-comment').value.trim();
             if (!comment) return showNotification('Enter a comment first', true);
+            const button = document.getElementById('message-send-btn');
+            button.disabled = true;
 
             try {
                 const response = await authenticatedFetch(`/api/v1/drone-requests/${selectedRequest.id}/comments`, {
@@ -601,12 +881,17 @@
                 });
                 if (!response.ok) throw new Error('Failed to send comment');
                 selectedRequest = await response.json();
+                closeMessageModal();
                 showNotification('Comment sent');
                 await loadRequests();
-                renderDetails();
-                await loadJournal();
+                if (selectedRequest) {
+                    renderDetails();
+                    await loadJournal();
+                }
             } catch (err) {
                 showNotification(err.message, true);
+            } finally {
+                button.disabled = false;
             }
         }
 
@@ -638,7 +923,12 @@
                 if (event.data.startsWith('Heartbeat:')) return;
                 try {
                     const data = JSON.parse(event.data);
-                    if (data.type && data.type.startsWith('drone_request_')) loadRequests();
+                    if (data.type && data.type.startsWith('drone_request_')) {
+                        loadRequests();
+                        if (typeof window.refreshDroneRequestBadge === 'function') {
+                            window.refreshDroneRequestBadge();
+                        }
+                    }
                 } catch (err) {
                     console.warn('WebSocket parse failed', err);
                 }
diff --git a/web/shared.js b/web/shared.js
index 333c37b..0277bfc 100644
--- a/web/shared.js
+++ b/web/shared.js
@@ -128,6 +128,13 @@
                         loadArrivals();
                         showNotification('Arrival updated');
                     }
+
+                    if (data.type && data.type.startsWith('drone_request_')) {
+                        if (typeof window.refreshDroneRequestBadge === 'function') {
+                            window.refreshDroneRequestBadge();
+                        }
+                        showNotification('Drone request updated');
+                    }
                 } catch (error) {
                     console.error('Error parsing WebSocket message:', error);
                 }
@@ -513,6 +520,9 @@
                     await updateUserRole(); // Update role-based UI
                     startSessionExpiryCheck(); // Start monitoring session expiry
                     connectWebSocket(); // Connect WebSocket for real-time updates
+                    if (typeof window.refreshDroneRequestBadge === 'function') {
+                        window.refreshDroneRequestBadge();
+                    }
                     loadPPRs();
                 } else {
                     throw new Error(data.detail || 'Authentication failed');
diff --git a/web/topbar.js b/web/topbar.js
index 0003adc..eaf4849 100644
--- a/web/topbar.js
+++ b/web/topbar.js
@@ -86,6 +86,21 @@
             .dropdown-menu a:first-child { border-radius: 5px 5px 0 0; }
             .dropdown-menu a:last-child { border-radius: 0 0 5px 5px; }
             .shortcut { font-size: 0.8rem; color: #999; margin-left: 1rem; }
+            .notification-badge {
+                min-width: 1.4rem;
+                height: 1.4rem;
+                padding: 0 0.35rem;
+                border-radius: 999px;
+                background: #e74c3c;
+                color: white;
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 0.75rem;
+                font-weight: 700;
+                line-height: 1;
+            }
+            .notification-badge[hidden] { display: none; }
         `;
         document.head.appendChild(style);
     }
@@ -97,8 +112,9 @@
         return `<a href="#" data-topbar-action="${action}"${idAttr}${hidden}>${label} ${shortcutText}</a>`;
     }
 
-    function navLink(label, href) {
-        return `<a href="${href}">${label}</a>`;
+    function navLink(label, href, id = '') {
+        const idAttr = id ? ` id="${id}"` : '';
+        return `<a href="${href}"${idAttr}>${label}</a>`;
     }
 
     function normalizeTopbar() {
@@ -138,12 +154,14 @@
                     </div>
                 </div>
                 <div class="dropdown">
-                    <button class="btn btn-warning dropdown-toggle" id="adminDropdownBtn">⚙️ Menu</button>
+                    <button class="btn btn-warning dropdown-toggle" id="adminDropdownBtn">
+                        ⚙️ Menu <span class="notification-badge" id="drone-request-menu-badge" hidden>0</span>
+                    </button>
                     <div class="dropdown-menu" id="adminDropdownMenu">
                         ${navLink('🏠 Admin View', '/admin')}
                         ${navLink('🎛️ ATC View', '/atc')}
                         ${navLink('📊 Reports', '/reports')}
-                        ${navLink('🛸 Drone Requests', '/drone-requests')}
+                        ${navLink('🛸 Drone Requests <span class="notification-badge" id="drone-request-badge" hidden>0</span>', '/drone-requests')}
                         ${navLink('📔 Journal Log', '/journal')}
                         ${actionLink('✈️ User Aircraft', 'user-aircraft', '', 'user-aircraft-dropdown')}
                         ${actionLink('👥 User Management', 'user-management', '', 'user-management-dropdown')}
@@ -220,6 +238,51 @@
         }
     }
 
+    async function refreshDroneRequestBadge() {
+        const badges = [
+            document.getElementById('drone-request-badge'),
+            document.getElementById('drone-request-menu-badge'),
+        ].filter(Boolean);
+        if (!badges.length) return;
+
+        const token = localStorage.getItem('ppr_access_token');
+        if (!token) {
+            badges.forEach(badge => {
+                badge.hidden = true;
+            });
+            return;
+        }
+
+        try {
+            const response = await fetch('/api/v1/drone-requests/?status=NEW&limit=100', {
+                headers: { 'Authorization': `Bearer ${token}` }
+            });
+            if (!response.ok) {
+                badges.forEach(badge => {
+                    badge.hidden = true;
+                });
+                return;
+            }
+
+            const requests = await response.json();
+            const count = Array.isArray(requests) ? requests.length : 0;
+            const title = count === 1
+                ? '1 drone request waiting for approval'
+                : `${count} drone requests waiting for approval`;
+            badges.forEach(badge => {
+                badge.textContent = count > 99 ? '99+' : String(count);
+                badge.hidden = count === 0;
+                badge.title = title;
+            });
+        } catch (error) {
+            badges.forEach(badge => {
+                badge.hidden = true;
+            });
+        }
+    }
+
+    window.refreshDroneRequestBadge = refreshDroneRequestBadge;
+
     document.addEventListener('click', event => {
         const toggle = event.target.closest('.dropdown-toggle');
         const action = event.target.closest('[data-topbar-action]');
@@ -265,6 +328,8 @@
     document.addEventListener('DOMContentLoaded', () => {
         normalizeTopbar();
         updateRoleVisibility();
+        refreshDroneRequestBadge();
         handleDeferredAction();
+        window.setInterval(refreshDroneRequestBadge, 60000);
     });
 })();