Download Attendance Management System Today
// reset to demo dataset (keep same structure) function resetToDemo() const defaultData = getDefaultData(); saveData(defaultData); renderAll();
.action-btns display: flex; gap: 8px; flex-wrap: wrap;
<div class="dashboard"> <h1>⏱️ Attendance Management System</h1> <div class="sub">Solid • Reliable • Track check-ins & download reports (CSV/JSON)</div>
// render table & stats function renderAll() const data = loadData(); const employees, attendanceRecords = data; const today = getTodayDateStr(); // build map for today's status const todayStatusMap = new Map(); attendanceRecords.forEach(rec => if (rec.date === today) todayStatusMap.set(rec.employeeId, status: rec.status, timestamp: rec.timestamp ); ); const tbody = document.getElementById('tableBody'); if (!employees.length) tbody.innerHTML = '<tr><td colspan="5" style="text-align:center;">No employees found. Add some using the form.</td></tr>'; else tbody.innerHTML = ''; employees.forEach(emp => const record = todayStatusMap.get(emp.id); let status = record ? record.status : 'absent'; let timeStr = record ? new Date(record.timestamp).toLocaleTimeString([], hour:'2-digit', minute:'2-digit') : '—'; let statusDisplay = ''; let badgeClass = ''; if (status === 'present') badgeClass = 'status-present'; statusDisplay = '✅ Present'; else if (status === 'late') badgeClass = 'status-late'; statusDisplay = '⏰ Late'; else badgeClass = 'status-absent'; statusDisplay = '❌ Absent'; download attendance management system
body background: linear-gradient(145deg, #e9eff7 0%, #dbe3ed 100%); min-height: 100vh; padding: 2rem 1.5rem;
// simple escape for XSS safety function escapeHtml(str) if (!str) return ''; return str.replace(/[&<>]/g, function(m) if (m === '&') return '&'; if (m === '<') return '<'; if (m === '>') return '>'; return m; ).replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g, function(c) return c; );
.stat-icon font-size: 2.2rem;
function getDefaultData() const today = getTodayDateStr(); const employees = [ id: "EMP-001", name: "Aarav Sharma", createdAt: new Date().toISOString() , id: "EMP-002", name: "Bianca Rossi", createdAt: new Date().toISOString() , id: "EMP-003", name: "Carlos Mendez", createdAt: new Date().toISOString() , id: "EMP-004", name: "Diana Prince", createdAt: new Date().toISOString() ]; const attendanceRecords = [ employeeId: "EMP-001", date: today, status: "present", timestamp: new Date().toISOString() , employeeId: "EMP-002", date: today, status: "late", timestamp: new Date().toISOString() , employeeId: "EMP-003", date: today, status: "absent", timestamp: new Date().toISOString() , employeeId: "EMP-004", date: today, status: "present", timestamp: new Date().toISOString() ]; return employees, attendanceRecords ;
.status-badge display: inline-block; padding: 4px 12px; border-radius: 30px; font-size: 0.7rem; font-weight: 700; text-align: center;
.btn-danger background: #b91c1c; .btn-danger:hover background: #991b1b; // reset to demo dataset (keep same structure)
.btn-outline background: transparent; border: 1.5px solid #1f5e7e; color: #1f5e7e;
.status-present background: #dff9e6; color: #11734c;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <title>Solid Attendance Management System | Track & Download Records</title> <style> * margin: 0; padding: 0; box-sizing: border-box; font-family: system-ui, 'Segoe UI', 'Inter', 'Roboto', sans-serif; new Date(record
const row = document.createElement('tr'); row.innerHTML = ` <td style="font-family: monospace;">$escapeHtml(emp.id)</td> <td class="employee-name">$escapeHtml(emp.name)</td> <td><span class="status-badge $badgeClass">$statusDisplay</span></td> <td style="font-size:0.75rem; color:#4b6f8c;">$timeStr</td> <td class="action-btns"> <button class="small-btn mark-present" data-id="$emp.id" data-status="present">✅ Present</button> <button class="small-btn mark-late" data-id="$emp.id" data-status="late">⏰ Late</button> <button class="small-btn mark-absent" data-id="$emp.id" data-status="absent">❌ Absent</button> <button class="small-btn delete-emp" data-id="$emp.id" style="background:#fbe9e7; color:#b91c1c;">🗑️ Del</button> </td> `; tbody.appendChild(row); );