add admin time off edit fuctionaliy

public/js/main.js

@@ -206,34 +206,17 @@ function handleAdminDashboardClick(e) {
         return;
     }
 
-    if (target.classList.contains('set-pending-btn')) {
-        if (confirm('Are you sure you want to move this request back to pending?')) {
-            apiCall('/admin/update-time-off-status', 'POST', { requestId: id, status: 'pending' })
-                .then(res => {
-                    if (res.success) {
-                        showMessage('Request status set to pending.', 'success');
-                        renderTimeOffHistoryView();
-                    }
-                });
-        }
-        return;
-    }
-
     if (target.classList.contains('admin-delete-request-btn')) {
         if (confirm('Are you sure you want to permanently delete this request? This cannot be undone.')) {
             apiCall(`/admin/time-off-requests/${id}`, 'DELETE')
                 .then(res => {
                     if (res.success) {
                         showMessage('Request deleted.', 'success');
-                        if (document.getElementById('tab-content-overview')) {
+                        apiCall('/admin/time-off-requests/pending').then(requestsRes => {
-                            apiCall('/admin/time-off-requests/pending').then(requestsRes => {
+                            if (requestsRes.success) {
-                                if (requestsRes.success) {
+                                updatePendingRequestsList(requestsRes.data);
-                                    updatePendingRequestsList(requestsRes.data);
+                            }
-                                }
+                        });
-                            });
-                        } else {
-                            renderTimeOffHistoryView();
-                        }
                     }
                 });
         }
@@ -268,6 +251,38 @@ async function handleEditTimeOffSubmit(e) {
     }
 }
 
+// --- NEW: Handler for clicks specifically on the Time Off History page ---
+function handleTimeOffHistoryClick(e) {
+    const target = e.target.closest('button');
+    if (!target) return;
+    
+    const { id } = target.dataset;
+
+    if (target.classList.contains('set-pending-btn')) {
+        if (confirm('Are you sure you want to move this request back to pending?')) {
+            apiCall('/admin/update-time-off-status', 'POST', { requestId: id, status: 'pending' })
+                .then(res => {
+                    if (res.success) {
+                        showMessage('Request status set to pending.', 'success');
+                        renderTimeOffHistoryView(); // Refresh the history view
+                    }
+                });
+        }
+    }
+
+    if (target.classList.contains('admin-delete-request-btn')) {
+        if (confirm('Are you sure you want to permanently delete this request? This cannot be undone.')) {
+            apiCall(`/admin/time-off-requests/${id}`, 'DELETE')
+                .then(res => {
+                    if (res.success) {
+                        showMessage('Request deleted.', 'success');
+                        renderTimeOffHistoryView(); // Refresh the history view
+                    }
+                });
+        }
+    }
+}
+
 // --- LISTENER ATTACHMENT FUNCTIONS ---
 export function attachAuthFormListener() {
     const form = document.getElementById('auth-form');
@@ -280,16 +295,9 @@ export function attachEmployeeDashboardListeners() {
 
     dashboard.addEventListener('click', async (e) => {
         const target = e.target;
-
+        if (target.id === 'punch-btn') handlePunch();
-        if (target.id === 'punch-btn') {
+        if (target.id === 'change-password-btn') renderChangePasswordModal(handleChangePassword);
-            handlePunch();
+        if (target.id === 'view-request-history-btn') handleViewRequestHistoryClick();
-        }
-        if (target.id === 'change-password-btn') {
-            renderChangePasswordModal(handleChangePassword);
-        }
-        if (target.id === 'view-request-history-btn') {
-            handleViewRequestHistoryClick();
-        }
         if (target.classList.contains('delete-request-btn')) {
             const id = target.dataset.id;
             if (confirm('Are you sure you want to delete this time off request?')) {
@@ -326,6 +334,14 @@ export function attachAdminDashboardListeners() {
     setupTabbedInterface(); 
 }
 
+// --- NEW: Listener attachment function for the history page ---
+export function attachTimeOffHistoryListeners() {
+    const historyView = document.getElementById('admin-time-off-history-view');
+    if (historyView) {
+        historyView.addEventListener('click', handleTimeOffHistoryClick);
+    }
+}
+
 // --- APP INITIALIZER ---
 function initializeApp() {
     authToken = localStorage.getItem('authToken');

public/js/ui.js

@@ -7,6 +7,7 @@ import {
     attachAuthFormListener,
     attachAdminDashboardListeners,
     attachEmployeeDashboardListeners,
+    attachTimeOffHistoryListeners,
     lastAdminTab
 } from './main.js';
 
@@ -305,7 +306,7 @@ export function renderTimeOffHistoryView() {
                                     <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 font-medium capitalize text-${r.status === 'approved' ? 'green' : 'red'}-600">${r.status}</td>
+                                    <td class="p-2 font-medium capitalize text-${r.status === 'approved' ? 'green' : r.status === 'denied' ? 'red' : 'gray'}-600">${r.status}</td>
                                     <td class="p-2">
                                         <div class="flex flex-col sm:flex-row gap-2">
                                             <button class="set-pending-btn font-medium text-blue-600 hover:underline" data-id="${r.id}">Set to Pending</button>
@@ -319,6 +320,7 @@ export function renderTimeOffHistoryView() {
                 </div>
             </div>`;
         document.getElementById('back-to-dash-btn').addEventListener('click', renderAdminDashboard);
+        attachTimeOffHistoryListeners();
     });
 }
 
@@ -376,7 +378,6 @@ export function renderEditTimeOffModal(request, submitHandler) {
     renderModal('Edit Time Off Request', formHTML, submitHandler);
 }
 
-
 // --- UI HELPER FUNCTIONS ---
 export async function handleViewNotesClick() {
     const userId = document.getElementById('note-user-select').value;