updated archive buttons

public/js/main.js

@@ -1,11 +1,9 @@
 // js/main.js
 
 // --- IMPORTS ---
-// We import everything we need from our other modules.
 import { apiCall } from './api.js';
 import { showMessage } from './utils.js';
 import {
-    updateUI,
     renderAuthView,
     renderAdminDashboard,
     renderEmployeeDashboard,
@@ -13,36 +11,23 @@ import {
     renderChangePasswordModal,
     renderResetPasswordModal,
     renderRequestHistoryModal,
-    handleViewNotesClick, // This UI-specific handler is simple enough to live in ui.js
+    handleViewNotesClick,
     renderArchiveView,
     renderTimeOffHistoryView
 } from './ui.js';
 
 // --- STATE MANAGEMENT ---
-// Simple module-level state.
 let user = null;
 let authToken = null;
 
 // --- EVENT HANDLERS (The "Logic") ---
-// These functions define what happens when a user interacts with the app.
-
 async function handleAuthSubmit(e) {
     e.preventDefault();
     const username = e.target.elements.username.value;
     const password = e.target.elements.password.value;
     const res = await apiCall('/login', 'POST', { username, password });
-    
     if (res.success) {
-        console.log("Login successful! Handling response..."); // <<< ADD THIS
-        
-        localStorage.setItem('authToken', res.data.token);
-        localStorage.setItem('user', JSON.stringify(res.data.user));
-
-        console.log("Token and user saved to localStorage."); // <<< ADD THIS
-        
         initializeApp();
-        
-        console.log("initializeApp() has been called."); // <<< ADD THIS
     }
 }
 
@@ -67,7 +52,7 @@ async function handleChangePassword(e) {
     const res = await apiCall('/user/change-password', 'POST', { currentPassword, newPassword });
     if (res.success) {
         showMessage(res.data.message, 'success');
-        document.getElementById('modal-container').innerHTML = ''; // Close modal
+        document.getElementById('modal-container').innerHTML = '';
     }
 }
 
@@ -175,9 +160,28 @@ async function handleResetPassword(e) {
 
 // This single handler uses event delegation for all buttons on the admin dashboard
 function handleAdminDashboardClick(e) {
-    const target = e.target;
+    const target = e.target.closest('button'); // Find the closest button that was clicked
+    if (!target) return; // Ignore clicks that aren't on or inside a button
+
     const { id, userid, username, role, noteId } = target.dataset;
     
+    // Handle buttons by their ID
+    switch (target.id) {
+        case 'view-archives-btn':
+            renderArchiveView();
+            return;
+        case 'archive-btn':
+            handleArchive();
+            return;
+        case 'view-time-off-history-btn':
+            renderTimeOffHistoryView();
+            return;
+        case 'view-notes-btn':
+            handleViewNotesClick();
+            return;
+    }
+
+    // Handle 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());
@@ -190,32 +194,28 @@ function handleAdminDashboardClick(e) {
 }
 
 // --- LISTENER ATTACHMENT FUNCTIONS ---
-// These are exported to ui.js and called after a view is rendered to make it interactive.
-
 export function attachAuthFormListener() {
     const form = document.getElementById('auth-form');
-    form.addEventListener('submit', handleAuthSubmit);
+    if (form) form.addEventListener('submit', handleAuthSubmit);
 }
 
 export function attachEmployeeDashboardListeners() {
-    document.getElementById('punch-btn').addEventListener('click', handlePunch);
+    document.getElementById('punch-btn')?.addEventListener('click', handlePunch);
-    document.getElementById('change-password-btn').addEventListener('click', () => renderChangePasswordModal(handleChangePassword));
+    document.getElementById('change-password-btn')?.addEventListener('click', () => renderChangePasswordModal(handleChangePassword));
-    document.getElementById('time-off-form').addEventListener('submit', handleTimeOffRequest);
+    document.getElementById('time-off-form')?.addEventListener('submit', handleTimeOffRequest);
-    document.getElementById('view-request-history-btn').addEventListener('click', handleViewRequestHistoryClick);
+    document.getElementById('view-request-history-btn')?.addEventListener('click', handleViewRequestHistoryClick);
 }
 
-// In js/main.js
-
 export function attachAdminDashboardListeners() {
-    // This master listener handles most buttons in the admin view via event delegation
+    // This master listener handles all buttons
-    document.getElementById('admin-dashboard').addEventListener('click', handleAdminDashboardClick);
+    document.getElementById('admin-dashboard')?.addEventListener('click', handleAdminDashboardClick);
     
-    // Listeners for specific forms that need to prevent default submission behavior
+    // Listeners for forms that need to prevent default submission
-    document.getElementById('create-user-form').addEventListener('submit', handleCreateUser);
+    document.getElementById('create-user-form')?.addEventListener('submit', handleCreateUser);
-    document.getElementById('add-punch-form').addEventListener('submit', handleAddPunch);
+    document.getElementById('add-punch-form')?.addEventListener('submit', handleAddPunch);
-    document.getElementById('add-note-form').addEventListener('submit', handleAddNote);
+    document.getElementById('add-note-form')?.addEventListener('submit', handleAddNote);
     
-    // Call the function to make the new tabs work
+    // Make the tabs interactive
     setupTabbedInterface(); 
 }
 
@@ -240,29 +240,24 @@ function initializeApp() {
     }
 }
 
-// This function handles the logic for switching between tabs
+// --- HELPERS ---
 function setupTabbedInterface() {
     const tabsContainer = document.getElementById('admin-tabs-nav');
     const contentContainer = document.getElementById('admin-tabs-content');
 
-    // Exit if the tab elements aren't on the page
     if (!tabsContainer || !contentContainer) return;
 
-    // Use event delegation on the tab navigation container
     tabsContainer.addEventListener('click', (e) => {
         const clickedTab = e.target.closest('.tab-btn');
-        // Ignore clicks that aren't on a tab button
         if (!clickedTab) return;
 
         const tabTarget = clickedTab.dataset.tab;
 
-        // Update the active state on tab buttons
         tabsContainer.querySelectorAll('.tab-btn').forEach(btn => {
             btn.classList.remove('active-tab');
         });
         clickedTab.classList.add('active-tab');
 
-        // Show the correct content panel and hide the others
         contentContainer.querySelectorAll('[id^="tab-content-"]').forEach(panel => {
             panel.classList.add('hidden');
         });
@@ -271,7 +266,16 @@ function setupTabbedInterface() {
 }
 
 // --- START THE APP ---
-// Attach global listeners that are always present.
+// Register the service worker for PWA functionality
+if ('serviceWorker' in navigator) {
+  window.addEventListener('load', () => {
+    navigator.serviceWorker.register('/sw.js')
+      .then(registration => console.log('Service Worker registered! Scope:', registration.scope))
+      .catch(err => console.error('Service Worker registration failed:', err));
+  });
+}
+
+// Attach global listeners that are always present on the page
 document.getElementById('sign-out-btn').addEventListener('click', () => handleSignOut('You have been signed out.'));
 document.addEventListener('visibilitychange', () => {
     if (document.visibilityState === 'visible' && localStorage.getItem('user')) {
@@ -279,20 +283,5 @@ document.addEventListener('visibilitychange', () => {
     }
 });
 
-if ('serviceWorker' in navigator) {
+// Initial call to start the app on page load
-  window.addEventListener('load', () => {
-    navigator.serviceWorker.register('/sw.js')
-      .then(registration => {
-        console.log('Service Worker registered! Scope: ', registration.scope);
-      })
-      .catch(err => {
-        console.error('Service Worker registration failed: ', err);
-      });
-  });
-}
-
-// Attach global listeners that are always present on the page.
-document.getElementById('sign-out-btn').addEventListener('click', () => handleSignOut('You have been signed out.'));
-
-// Initial call to start the app on page load.
 initializeApp();