Update index.html

index.html

@@ -229,31 +229,37 @@
       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 && isToday && Object.keys(attendanceData).length > 0) {
-        todaysAttendance = attendanceData[Object.keys(attendanceData)[Object.keys(attendanceData).length - 1]];
-      }
+      // Only use attendance data that matches the selected date — no fallback to other days
+      const todaysAttendance = attendanceData[formattedDateStr] || attendanceData[fallbackDateStr] || null;
+      const hasAttendanceData = !!todaysAttendance;
 
-      const absenteesForClass = todaysAttendance ? (todaysAttendance[selectedClass] || []) : [];
+      const absenteesForClass = hasAttendanceData ? (todaysAttendance[selectedClass] || []) : [];
       const classStudents = studentsData[selectedClass] || [];
-      const totalStudents = classStudents.length || 24; 
-      const absentCount = absenteesForClass ? absenteesForClass.length : 0;
-      const presentCount = totalStudents - absentCount;
-      const attendancePercentage = totalStudents > 0 ? Math.round((presentCount / totalStudents) * 100) : 100;
+      const totalStudents = classStudents.length || 24;
+      // If no attendance record for this date (e.g. Saturday / public holiday), show 0 present & 0 absent
+      const absentCount = hasAttendanceData ? absenteesForClass.length : 0;
+      const presentCount = hasAttendanceData ? (totalStudents - absentCount) : 0;
+      const attendancePercentage = hasAttendanceData && totalStudents > 0
+        ? Math.round((presentCount / totalStudents) * 100)
+        : 0;
 
       let schoolTotalEnrolled = 0;
       let schoolTotalAbsent = 0;
+      let schoolTotalPresent = 0;
       
       CLASSES.forEach(cls => {
         const cStudents = studentsData[cls] || [];
-        const cAbsents = todaysAttendance ? (todaysAttendance[cls] || []) : [];
-        schoolTotalEnrolled += (cStudents.length || 24);
-        schoolTotalAbsent += cAbsents.length;
+        const cEnrolled = cStudents.length || 24;
+        schoolTotalEnrolled += cEnrolled;
+        if (hasAttendanceData) {
+          const cAbsents = todaysAttendance[cls] || [];
+          schoolTotalAbsent += cAbsents.length;
+          schoolTotalPresent += (cEnrolled - cAbsents.length);
+        }
       });
-      const schoolTotalPresent = schoolTotalEnrolled - schoolTotalAbsent;
-      const schoolAttendancePercentage = schoolTotalEnrolled > 0 
+      const schoolAttendancePercentage = hasAttendanceData && schoolTotalEnrolled > 0 
         ? Math.round((schoolTotalPresent / schoolTotalEnrolled) * 100) 
-        : 100;
+        : 0;
 
       const exitCounts = {};
       Object.values(studentLogs).forEach(slotLogs => {
@@ -311,11 +317,13 @@
         }
 
         const cStudents = studentsData[cls] || [];
-        const cAbsents = todaysAttendance ? (todaysAttendance[cls] || []) : [];
+        const cAbsents = hasAttendanceData ? (todaysAttendance[cls] || []) : [];
         const cEnrolled = cStudents.length || 24;
-        const cAbsentCount = cAbsents.length;
-        const cPresentCount = cEnrolled - cAbsentCount;
-        const cPercentage = cEnrolled > 0 ? Math.round((cPresentCount / cEnrolled) * 100) : 100;
+        const cAbsentCount = hasAttendanceData ? cAbsents.length : 0;
+        const cPresentCount = hasAttendanceData ? (cEnrolled - cAbsentCount) : 0;
+        const cPercentage = hasAttendanceData && cEnrolled > 0
+          ? Math.round((cPresentCount / cEnrolled) * 100)
+          : 0;
 
         return {
           className: cls,
@@ -517,34 +525,33 @@
                 </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 relative">
+                  <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 flex-wrap">
                     <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>
+                    <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="bg-indigo-900 border border-indigo-400/40 rounded px-2 py-1 text-white font-bold focus:outline-none cursor-pointer text-sm [color-scheme:dark]"
+                      title="Pilih tarikh"
+                    />
+                    <span className="text-indigo-200 text-xs hidden sm:inline whitespace-nowrap">
+                      {selectedDate.toLocaleDateString('ms-MY', { weekday: 'long' })}
+                    </span>
                     {!isToday && (
                       <button
+                        type="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"
+                        className="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
@@ -857,7 +864,9 @@
               <>
                 <div className="p-4 md:p-6 grid grid-cols-1 lg:grid-cols-2 gap-6 border-b border-slate-100 bg-white">
                   <div className="space-y-3">
-                    <h2 className="text-xs font-bold uppercase tracking-wider text-slate-500">Kehadiran Hari Ini ({selectedClass})</h2>
+                    <h2 className="text-xs font-bold uppercase tracking-wider text-slate-500">
+                      Kehadiran {isToday ? 'Hari Ini' : 'Tarikh Dipilih'} ({selectedClass})
+                    </h2>
                     <div className="grid grid-cols-2 gap-3">
                       <div className="bg-slate-50 p-3 rounded-xl border border-slate-200 flex items-center justify-between">
                         <span className="text-xs md:text-sm font-medium text-slate-600">Hadir:</span>
@@ -872,6 +881,9 @@
                       <span className="text-xs md:text-sm font-medium text-slate-600">Jumlah Daftar:</span>
                       <span className="text-base md:text-lg font-bold text-slate-800">{totalStudents}</span>
                     </div>
+                    {!hasAttendanceData && (
+                      <p className="text-[11px] text-amber-600 font-medium italic">Tiada data kehadiran untuk tarikh ini</p>
+                    )}
                   </div>
 
                   <div>
@@ -879,6 +891,11 @@
                     <div className="bg-slate-50 p-4 rounded-xl border border-slate-200 min-h-[120px] flex flex-col justify-center">
                       {isLoading ? (
                         <div className="text-center text-slate-400 text-sm italic">Memuatkan data...</div>
+                      ) : !hasAttendanceData ? (
+                        <div className="flex flex-col items-center justify-center text-slate-400 italic">
+                          <span className="text-sm">Tiada data kehadiran</span>
+                          <span className="text-[11px] mt-1">(contoh: hari cuti / hujung minggu)</span>
+                        </div>
                       ) : absenteesForClass && absenteesForClass.length > 0 ? (
                         <ul className="text-sm space-y-1.5 max-h-32 overflow-y-auto pr-1">
                           {absenteesForClass.map((student, idx) => (
@@ -904,18 +921,27 @@
                   <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
                     
                     <div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm">
-                      <div className="text-xs font-bold text-slate-500 mb-1">Kadar Kehadiran ({presentCount}/{totalStudents})</div>
+                      <div className="text-xs font-bold text-slate-500 mb-1">
+                        Kadar Kehadiran {hasAttendanceData ? `(${presentCount}/${totalStudents})` : ''}
+                      </div>
                       <div className="flex items-baseline gap-2 mb-2">
-                        <span className={`text-2xl md:text-3xl font-black ${attendancePercentage < 80 ? 'text-orange-500' : 'text-emerald-500'}`}>
-                          {attendancePercentage}%
+                        <span className={`text-2xl md:text-3xl font-black ${
+                          !hasAttendanceData ? 'text-slate-400' : attendancePercentage < 80 ? 'text-orange-500' : 'text-emerald-500'
+                        }`}>
+                          {hasAttendanceData ? `${attendancePercentage}%` : '—'}
                         </span>
                       </div>
                       <div className="w-full bg-slate-100 rounded-full h-2.5">
                         <div 
-                          className={`h-2.5 rounded-full ${attendancePercentage < 80 ? 'bg-orange-500' : 'bg-emerald-500'}`} 
-                          style={{ width: `${attendancePercentage}%` }}
+                          className={`h-2.5 rounded-full ${
+                            !hasAttendanceData ? 'bg-slate-300' : attendancePercentage < 80 ? 'bg-orange-500' : 'bg-emerald-500'
+                          }`} 
+                          style={{ width: `${hasAttendanceData ? attendancePercentage : 0}%` }}
                         ></div>
                       </div>
+                      {!hasAttendanceData && (
+                        <p className="text-[10px] text-slate-400 italic mt-1">Tiada data</p>
+                      )}
                     </div>
 
                     <div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm">