// compute stats based on today's records function computeStats(employees, attendanceRecords) const today = getTodayDateStr(); const todayRecords = attendanceRecords.filter(rec => rec.date === today); const presentCount = todayRecords.filter(rec => rec.status === 'present').length; const lateCount = todayRecords.filter(rec => rec.status === 'late').length; const absentCount = todayRecords.filter(rec => rec.status === 'absent').length; // employees without any record today considered absent? but we count from existing records only. // For better UX: total employees = all employees, but absent shown as those not present/late. const totalEmp = employees.length; const recordedEmpIds = todayRecords.map(r => r.employeeId); const missingEmp = employees.filter(emp => !recordedEmpIds.includes(emp.id)).length; const totalAbsentEffective = absentCount + missingEmp; return totalEmployees: totalEmp, presentToday: presentCount, lateToday: lateCount, absentToday: totalAbsentEffective ;
.btn-danger background: #b91c1c; .btn-danger:hover background: #991b1b; download attendance management system
button background: #1f5e7e; border: none; padding: 10px 20px; border-radius: 40px; font-weight: 600; color: white; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: 0.2s; font-size: 0.85rem; box-shadow: 0 2px 5px rgba(0,0,0,0.1); // compute stats based on today's records function
<!-- Stats summary --> <div class="stats-row" id="statsContainer"> <div class="stat-card"><div class="stat-icon">👥</div><div class="stat-info"><h3>Total Employees</h3><div class="stat-number" id="totalEmployees">0</div></div></div> <div class="stat-card"><div class="stat-icon">✅</div><div class="stat-info"><h3>Present Today</h3><div class="stat-number" id="presentToday">0</div></div></div> <div class="stat-card"><div class="stat-icon">⏰</div><div class="stat-info"><h3>Late Today</h3><div class="stat-number" id="lateToday">0</div></div></div> <div class="stat-card"><div class="stat-icon">📅</div><div class="stat-info"><h3>Absent Today</h3><div class="stat-number" id="absentToday">0</div></div></div> </div> const totalEmp = employees
/* add employee section */ .action-section background: #ffffffcc; backdrop-filter: blur(4px); border-radius: 1.6rem; padding: 1.2rem 1.6rem; margin-bottom: 28px; display: flex; flex-wrap: wrap; gap: 15px; align-items: flex-end; justify-content: space-between; border: 1px solid #ffffff;
/* table container */ .table-wrapper overflow-x: auto; border-radius: 1.5rem; background: white; box-shadow: 0 6px 14px rgba(0,0,0,0.05); margin-top: 15px;