Update index.html

index.html

@@ -151,6 +151,11 @@
       const [teacherFilter, setTeacherFilter] = useState('all');
       const [searchQuery, setSearchQuery] = useState('');
       const [isSaving, setIsSaving] = useState(false);
+      const [selectedDate, setSelectedDate] = useState(() => {
+        const d = new Date();
+        d.setHours(0, 0, 0, 0);
+        return d;
+      });
 
       const CLASSES = useMemo(() => {
         const sheetClasses = Object.keys(studentsData || {});
@@ -164,8 +169,10 @@
 
       const currentTimeSlots = getDynamicTimeSlots(selectedClass);
 
-      const today = new Date();
-      const dateId = `${today.getDate().toString().padStart(2, '0')}-${(today.getMonth() + 1).toString().padStart(2, '0')}-${today.getFullYear()}`;
+      const now = new Date();
+      const isToday = selectedDate.toDateString() === now.toDateString();
+      const dateId = `${selectedDate.getDate().toString().padStart(2, '0')}-${(selectedDate.getMonth() + 1).toString().padStart(2, '0')}-${selectedDate.getFullYear()}`;
+      const selectedDateInputValue = `${selectedDate.getFullYear()}-${(selectedDate.getMonth() + 1).toString().padStart(2, '0')}-${selectedDate.getDate().toString().padStart(2, '0')}`;
 
       const selectedClassData = allClassLogs[selectedClass] || {};
       const teacherLogs = selectedClassData.teacherLogs || {};
@@ -219,11 +226,11 @@
         return () => clearInterval(interval);
       }, [fetchLogs]);
 
-      const formattedDateStr = `${today.getDate().toString().padStart(2, '0')}/${(today.getMonth() + 1).toString().padStart(2, '0')}/${today.getFullYear()}`;
-      const fallbackDateStr = `${today.getDate()}/${today.getMonth() + 1}/${today.getFullYear()}`;
+      const formattedDateStr = `${selectedDate.getDate().toString().padStart(2, '0')}/${(selectedDate.getMonth() + 1).toString().padStart(2, '0')}/${selectedDate.getFullYear()}`;
+      const fallbackDateStr = `${selectedDate.getDate()}/${selectedDate.getMonth() + 1}/${selectedDate.getFullYear()}`;
       
       let todaysAttendance = attendanceData[formattedDateStr] || attendanceData[fallbackDateStr];
-      if (!todaysAttendance && Object.keys(attendanceData).length > 0) {
+      if (!todaysAttendance && isToday && Object.keys(attendanceData).length > 0) {
         todaysAttendance = attendanceData[Object.keys(attendanceData)[Object.keys(attendanceData).length - 1]];
       }
 
@@ -264,23 +271,29 @@
         .sort((a, b) => b[1] - a[1])
         .slice(0, 3);
 
-      const currentHour = today.getHours();
-      const currentMin = today.getMinutes();
+      const currentHour = now.getHours();
+      const currentMin = now.getMinutes();
       
-      const activeTimeSlotObj = getCurrentActiveSlot(selectedClass, currentHour, currentMin);
+      const activeTimeSlotObj = isToday ? getCurrentActiveSlot(selectedClass, currentHour, currentMin) : null;
       const activeTimeSlotId = activeTimeSlotObj ? activeTimeSlotObj.id : null;
       
       const lastSlot = currentTimeSlots[currentTimeSlots.length - 1];
-      const isAfterSchool = currentHour > lastSlot.endHour || (currentHour === lastSlot.endHour && currentMin >= lastSlot.endMin);
+      const isAfterSchool = isToday
+        ? (currentHour > lastSlot.endHour || (currentHour === lastSlot.endHour && currentMin >= lastSlot.endMin))
+        : (selectedDate < now);
 
       const missedPeriods = currentTimeSlots.filter(slot => {
         if (slot.id === 'R') return false;
+        if (!isToday) {
+          // For past/future dates: treat as missed if no teacher log
+          return !teacherLogs[slot.id];
+        }
         const hasEnded = currentHour > slot.endHour || (currentHour === slot.endHour && currentMin >= slot.endMin);
         return hasEnded && !teacherLogs[slot.id];
       });
 
       const classesTeacherStatus = CLASSES.map(cls => {
-        const activeSlot = getCurrentActiveSlot(cls, currentHour, currentMin);
+        const activeSlot = isToday ? getCurrentActiveSlot(cls, currentHour, currentMin) : null;
         const clsLogs = allClassLogs[cls] || {};
         const clsTeacherLogs = clsLogs.teacherLogs || {};
 
@@ -348,7 +361,8 @@
           name: teacher.name,
           period: slotId,
           subject: teacher.subject,
-          action: 'set'
+          action: 'set',
+          date: dateId
         });
         setIsSaving(false);
       };
@@ -367,7 +381,7 @@
         const students = [...selectedStudents];
         const cls = selectedClass;
         const logId = Date.now();
-        const timeOutStr = `${today.getHours().toString().padStart(2, '0')}:${today.getMinutes().toString().padStart(2, '0')}`;
+        const timeOutStr = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
         
         const newLog = {
           id: logId,
@@ -393,7 +407,8 @@
           action: 'exit',
           students: students,
           timeOut: timeOutStr,
-          logId: logId
+          logId: logId,
+          date: dateId
         });
         setIsSaving(false);
       };
@@ -417,7 +432,8 @@
             type: 'student',
             period: slotId,
             action: 'delete',
-            logId: logId
+            logId: logId,
+            date: dateId
           });
         } else if (toDelete.type === 'teacher') {
           const { slotId } = toDelete;
@@ -432,7 +448,8 @@
             className: selectedClass,
             type: 'teacher',
             period: slotId,
-            action: 'delete'
+            action: 'delete',
+            date: dateId
           });
         }
         setIsSaving(false);
@@ -462,7 +479,8 @@
                 name: prevLog.name,
                 period: currentSlotId,
                 subject: prevLog.subject,
-                action: 'set'
+                action: 'set',
+                date: dateId
               });
               setIsSaving(false);
            }
@@ -499,9 +517,39 @@
                 </div>
 
                 <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-3 text-sm">
-                  <div className="bg-indigo-800/60 backdrop-blur-md px-3 py-2 rounded-lg border border-indigo-500/30 flex items-center gap-2 justify-center">
-                    <Calendar className="w-4 h-4 text-indigo-300" />
-                    <span>{today.toLocaleDateString('ms-MY', { weekday: 'long', day: 'numeric', month: 'short', year: 'numeric' })}</span>
+                  <div className="bg-indigo-800/60 backdrop-blur-md px-3 py-2 rounded-lg border border-indigo-500/30 flex items-center gap-2 justify-center relative">
+                    <Calendar className="w-4 h-4 text-indigo-300 flex-shrink-0" />
+                    <label className="cursor-pointer flex items-center gap-2">
+                      <span className="whitespace-nowrap">
+                        {selectedDate.toLocaleDateString('ms-MY', { weekday: 'long', day: 'numeric', month: 'short', year: 'numeric' })}
+                      </span>
+                      <input
+                        type="date"
+                        value={selectedDateInputValue}
+                        onChange={(e) => {
+                          if (!e.target.value) return;
+                          const [y, m, d] = e.target.value.split('-').map(Number);
+                          const newDate = new Date(y, m - 1, d);
+                          newDate.setHours(0, 0, 0, 0);
+                          setSelectedDate(newDate);
+                        }}
+                        className="absolute inset-0 opacity-0 cursor-pointer w-full h-full"
+                        title="Pilih tarikh"
+                      />
+                    </label>
+                    {!isToday && (
+                      <button
+                        onClick={() => {
+                          const d = new Date();
+                          d.setHours(0, 0, 0, 0);
+                          setSelectedDate(d);
+                        }}
+                        className="ml-1 text-[10px] font-bold bg-white/20 hover:bg-white/30 px-1.5 py-0.5 rounded text-white whitespace-nowrap"
+                        title="Kembali ke hari ini"
+                      >
+                        Hari Ini
+                      </button>
+                    )}
                   </div>
 
                   {activeTab === 'class_view' && (
@@ -621,13 +669,25 @@
                   <div className="flex flex-col md:flex-row md:items-center justify-between gap-3 border-b border-slate-100 pb-4">
                     <div>
                       <h2 className="text-lg font-bold text-slate-800 flex items-center gap-2">
-                        <Activity className="w-5 h-5 text-indigo-600" /> Status Guru Semasa (Real-Time)
+                        <Activity className="w-5 h-5 text-indigo-600" /> Status Guru {isToday ? 'Semasa (Real-Time)' : 'Mengikut Tarikh Dipilih'}
                       </h2>
                       <p className="text-xs text-slate-500 mt-0.5">
-                        Memaparkan status guru mengajar di setiap kelas mengikut waktu jam sekarang (
-                        <span className="font-bold text-indigo-700">
-                          {today.toLocaleTimeString('ms-MY', { hour: '2-digit', minute: '2-digit' })}
-                        </span>)
+                        {isToday ? (
+                          <>
+                            Memaparkan status guru mengajar di setiap kelas mengikut waktu jam sekarang (
+                            <span className="font-bold text-indigo-700">
+                              {now.toLocaleTimeString('ms-MY', { hour: '2-digit', minute: '2-digit' })}
+                            </span>)
+                          </>
+                        ) : (
+                          <>
+                            Memaparkan rekod guru untuk tarikh{' '}
+                            <span className="font-bold text-indigo-700">
+                              {selectedDate.toLocaleDateString('ms-MY', { weekday: 'long', day: 'numeric', month: 'short', year: 'numeric' })}
+                            </span>
+                            {' '}(bukan hari ini)
+                          </>
+                        )}
                       </p>
                     </div>