fix tab switch after action

public/js/main.js

@@ -13,7 +13,8 @@ import {
     renderRequestHistoryModal,
     handleViewNotesClick,
     renderArchiveView,
-    renderTimeOffHistoryView
+    renderTimeOffHistoryView,
+    updatePendingRequestsList
 } from './ui.js';
 
 // --- STATE MANAGEMENT ---
@@ -181,15 +182,35 @@ function handleAdminDashboardClick(e) {
             return;
     }
 
-    // Handle buttons by their class name
+    // --- THIS IS THE UPDATED LOGIC ---
+    // It now calls the targeted update function instead of renderAdminDashboard()
+    if (target.classList.contains('approve-request-btn') || target.classList.contains('deny-request-btn')) {
+        const status = target.classList.contains('approve-request-btn') ? 'approved' : 'denied';
+        if (confirm(`Set this request to "${status}"?`)) {
+            apiCall('/admin/update-time-off-status', 'POST', { requestId: id, status: status })
+                .then(res => {
+                    if (res.success) {
+                        showMessage(`Request ${status}.`, 'success');
+                        // After success, just fetch the new list of requests and update the table
+                        apiCall('/admin/time-off-requests/pending').then(requestsRes => {
+                            if (requestsRes.success) {
+                                updatePendingRequestsList(requestsRes.data);
+                            }
+                        });
+                    }
+                });
+        }
+        return; // Stop the function here
+    }
+    // --- END OF UPDATED LOGIC ---
+
+    // Handle other buttons by their class name
     if (target.classList.contains('edit-btn')) renderEditModal(id, handleEditSubmit);
     if (target.classList.contains('delete-btn') && confirm('Delete this time entry?')) apiCall(`/admin/logs/${id}`, 'DELETE').then(res => res.success && renderAdminDashboard());
     if (target.classList.contains('force-clock-out-btn') && confirm(`Force clock out ${username}?`)) apiCall('/admin/force-clock-out', 'POST', { userId: userid }).then(res => res.success && renderAdminDashboard());
     if (target.classList.contains('reset-pw-btn')) renderResetPasswordModal(username, handleResetPassword);
     if (target.classList.contains('change-role-btn')) { const newRole = role === 'admin' ? 'employee' : 'admin'; if(confirm(`Change ${username} to ${newRole}?`)) apiCall('/admin/update-role', 'POST', { username, newRole }).then(res => res.success && renderAdminDashboard()); }
     if (target.classList.contains('delete-user-btn') && confirm(`PERMANENTLY DELETE user '${username}'?`)) apiCall(`/admin/delete-user/${username}`, 'DELETE').then(res => res.success && renderAdminDashboard());
-    if (target.classList.contains('approve-request-btn')) { if (confirm('Approve request?')) apiCall('/admin/update-time-off-status', 'POST', { requestId: id, status: 'approved' }).then(res => res.success && renderAdminDashboard()); }
-    if (target.classList.contains('deny-request-btn')) { if (confirm('Deny request?')) apiCall('/admin/update-time-off-status', 'POST', { requestId: id, status: 'denied' }).then(res => res.success && renderAdminDashboard()); }
     if (target.classList.contains('delete-note-btn')) { if (confirm('Delete this note?')) { apiCall(`/admin/notes/${noteId}`, 'DELETE').then(res => { if (res.success) { showMessage('Note deleted.', 'success'); handleViewNotesClick(); }});}}
 }
 

public/js/ui.js

@@ -308,3 +308,28 @@ export async function handleViewNotesClick() {
         container.innerHTML = '<p class="text-red-500 text-center">Could not load notes.</p>';
     }
 }   
+// This function ONLY updates the pending requests table.
+function updatePendingRequestsList(requests) {
+    const tableBody = document.querySelector('#tab-content-overview table tbody');
+    if (!tableBody) return; // Exit if the table isn't on the page
+
+    if (requests.length === 0) {
+        tableBody.innerHTML = '<tr><td colspan="4" class="text-center p-4">No pending requests.</td></tr>';
+        return;
+    }
+
+    // Rebuild only the rows of the table
+    tableBody.innerHTML = requests.map(r => `
+        <tr class="border-t">
+            <td class="p-2">${r.username}</td>
+            <td class="p-2 whitespace-nowrap">${utils.formatDate(r.start_date)} - ${utils.formatDate(r.end_date)}</td>
+            <td class="p-2">${r.reason || ''}</td>
+            <td class="p-2">
+                <div class="flex flex-col sm:flex-row gap-2">
+                    <button class="approve-request-btn font-medium text-green-600 hover:underline" data-id="${r.id}">Approve</button>
+                    <button class="deny-request-btn font-medium text-red-600 hover:underline" data-id="${r.id}">Deny</button>
+                </div>
+            </td>
+        </tr>
+    `).join('');
+}