// 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, renderEditModal, renderChangePasswordModal, renderResetPasswordModal, renderRequestHistoryModal, handleViewNotesClick, // This UI-specific handler is simple enough to live in ui.js 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) { initializeApp(); // Re-initialize the app state after login } } function handleSignOut(message) { localStorage.clear(); authToken = null; user = null; if (message) { showMessage(message, 'success'); } initializeApp(); } const handlePunch = () => { apiCall('/punch', 'POST').then(res => res.success && renderEmployeeDashboard()); }; async function handleChangePassword(e) { e.preventDefault(); const currentPassword = e.target.elements['modal-current-pw'].value; const newPassword = e.target.elements['modal-new-pw'].value; 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 } } async function handleTimeOffRequest(e) { e.preventDefault(); const startDate = e.target.elements['start-date'].value; const endDate = e.target.elements['end-date'].value; const reason = e.target.elements['reason'].value; if (new Date(endDate) < new Date(startDate)) { return showMessage('End date cannot be before start date.', 'error'); } const res = await apiCall('/user/request-time-off', 'POST', { startDate, endDate, reason }); if (res.success) { showMessage(res.data.message, 'success'); e.target.reset(); renderEmployeeDashboard(); } } async function handleViewRequestHistoryClick() { const res = await apiCall('/user/time-off-requests/history'); if (res.success) { renderRequestHistoryModal(res.data); } } async function handleEditSubmit(e) { e.preventDefault(); const id = e.target.elements['edit-id'].value; const punch_in_time = new Date(e.target.elements['edit-in'].value).toISOString(); const punch_out_value = e.target.elements['edit-out'].value; const punch_out_time = punch_out_value ? new Date(punch_out_value).toISOString() : null; const res = await apiCall(`/admin/logs/${id}`, 'PUT', { punch_in_time, punch_out_time }); if (res.success) { document.getElementById('modal-container').innerHTML = ''; renderAdminDashboard(); showMessage('Entry updated successfully.', 'success'); } } const handleArchive = () => { if (confirm('Are you sure you want to archive all completed time entries? This action cannot be undone.')) { apiCall('/admin/archive', 'POST').then(res => { if(res.success) { showMessage('Records archived successfully.', 'success'); renderAdminDashboard(); } }); } }; async function handleCreateUser(e) { e.preventDefault(); const username = e.target.elements['new-username'].value; const password = e.target.elements['new-password'].value; const role = e.target.elements['new-user-role'].value; const res = await apiCall('/admin/create-user', 'POST', { username, password, role }); if (res.success) { showMessage(res.data.message, 'success'); e.target.reset(); renderAdminDashboard(); } } async function handleAddPunch(e) { e.preventDefault(); const selected = e.target.elements['add-punch-user']; const userId = selected.value; const username = selected.options[selected.selectedIndex].dataset.username; const punchInTime = new Date(e.target.elements['add-punch-in'].value).toISOString(); const punchOutValue = e.target.elements['add-punch-out'].value; const punchOutTime = punchOutValue ? new Date(punchOutValue).toISOString() : null; const res = await apiCall('/admin/add-punch', 'POST', { userId, username, punchInTime, punchOutTime }); if (res.success) { showMessage(res.data.message, 'success'); e.target.reset(); renderAdminDashboard(); } } async function handleAddNote(e) { e.preventDefault(); const userId = e.target.elements['note-user-select'].value; const noteText = e.target.elements['note-text'].value; if (!userId) { return showMessage('Please select an employee.', 'error'); } const res = await apiCall('/admin/notes', 'POST', { userId, noteText }); if (res.success) { showMessage(res.data.message, 'success'); e.target.reset(); } } async function handleResetPassword(e) { e.preventDefault(); const username = e.target.elements['reset-username'].value; const newPassword = e.target.elements['reset-new-pw'].value; const res = await apiCall('/admin/reset-password', 'POST', { username, newPassword }); if (res.success) { showMessage(res.data.message, 'success'); document.getElementById('modal-container').innerHTML = ''; } } // This single handler uses event delegation for all buttons on the admin dashboard function handleAdminDashboardClick(e) { const target = e.target; const { id, userid, username, role, noteId } = target.dataset; 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(); }});}} } // --- 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); } export function attachEmployeeDashboardListeners() { document.getElementById('punch-btn').addEventListener('click', handlePunch); document.getElementById('change-password-btn').addEventListener('click', () => renderChangePasswordModal(handleChangePassword)); document.getElementById('time-off-form').addEventListener('submit', handleTimeOffRequest); document.getElementById('view-request-history-btn').addEventListener('click', handleViewRequestHistoryClick); } export function attachAdminDashboardListeners() { // Event delegation for all buttons document.getElementById('admin-dashboard').addEventListener('click', handleAdminDashboardClick); // Specific form handlers document.getElementById('create-user-form').addEventListener('submit', handleCreateUser); document.getElementById('add-punch-form').addEventListener('submit', handleAddPunch); document.getElementById('add-note-form').addEventListener('submit', handleAddNote); // Other top-level buttons document.getElementById('archive-btn').addEventListener('click', handleArchive); document.getElementById('view-archives-btn').addEventListener('click', renderArchiveView); document.getElementById('view-time-off-history-btn').addEventListener('click', renderTimeOffHistoryView); document.getElementById('view-notes-btn').addEventListener('click', handleViewNotesClick); } // --- APP INITIALIZER --- function initializeApp() { authToken = localStorage.getItem('authToken'); const userString = localStorage.getItem('user'); user = userString ? JSON.parse(userString) : null; if (authToken && user) { const userControls = document.getElementById('nav-user-controls'); userControls.classList.remove('hidden'); userControls.querySelector('#welcome-message').textContent = `Welcome, ${user.username}`; if (user.role === 'admin') { renderAdminDashboard(); } else { renderEmployeeDashboard(); } } else { document.getElementById('nav-user-controls').classList.add('hidden'); renderAuthView(); } } // --- START THE APP --- // Attach global listeners that are always present. document.getElementById('sign-out-btn').addEventListener('click', () => handleSignOut('You have been signed out.')); document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'visible' && localStorage.getItem('user')) { initializeApp(); } }); // Initial call to start the app on page load. initializeApp();