Sep 15 - Update the attendance records table to update every 20 min

templates/attendance_report.html

@@ -14,6 +14,65 @@ tr.dynamic-qr-record {
 tr.dynamic-qr-record:hover {
     background-color: rgba(59, 91, 219, 0.07) !important;
 }
+
+/* Live updates: status pill in the table header + highlight for rows that
+   arrived while the page was open (see LIVE UPDATES in attendance_report.js) */
+.live-status {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    margin-left: 0.75rem;
+    padding: 0.15rem 0.6rem;
+    border-radius: 999px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    vertical-align: middle;
+    background: #dcfce7;
+    color: #166534;
+    cursor: default;
+}
+.live-status .live-dot {
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 50%;
+    background: #16a34a;
+    animation: live-pulse 2s ease-in-out infinite;
+}
+.live-status.live-status--retry {
+    background: #fef3c7;
+    color: #92400e;
+}
+.live-status.live-status--retry .live-dot {
+    background: #f59e0b;
+}
+.live-status.live-status--stopped {
+    background: #f1f5f9;
+    color: #475569;
+}
+.live-status.live-status--stopped .live-dot {
+    background: #94a3b8;
+    animation: none;
+}
+@keyframes live-pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.35; }
+}
+tr.live-new-record > td {
+    animation: live-row-in 6s ease-out;
+}
+@keyframes live-row-in {
+    0% { background-color: #bbf7d0; }
+    100% { background-color: transparent; }
+}
+@media (prefers-reduced-motion: reduce) {
+    .live-status .live-dot,
+    tr.live-new-record > td {
+        animation: none;
+    }
+    tr.live-new-record > td {
+        background-color: #f0fdf4;
+    }
+}
 </style>
 <!-- Fullscreen CSS -->
 <link rel="stylesheet" href="{{ url_for('static', filename='css/attendance_fullscreen.css') }}">
@@ -30,7 +89,7 @@ tr.dynamic-qr-record:hover {
 </button>
 
 <!-- Attendance Report Container with Fullscreen Support -->
-<div id="attendanceReportContainer" class="attendance-page" data-user-role="{{ session.role }}">
+<div id="attendanceReportContainer" class="attendance-page" data-user-role="{{ session.role }}"{% if live_latest_id is defined and live_latest_id is not none %} data-live-since-id="{{ live_latest_id }}"{% endif %}>
     <!-- Header Section -->
     <div class="attendance-header">
         <div class="header-content">