Update index.html

index.html

@@ -269,6 +269,9 @@
       const activeTimeSlotObj = getCurrentActiveSlot(selectedClass, currentHour, currentMin);
       const activeTimeSlotId = activeTimeSlotObj ? activeTimeSlotObj.id : null;
       
+      const lastSlot = currentTimeSlots[currentTimeSlots.length - 1];
+      const isAfterSchool = currentHour > lastSlot.endHour || (currentHour === lastSlot.endHour && currentMin >= lastSlot.endMin);
+
       const missedPeriods = currentTimeSlots.filter(slot => {
         if (slot.id === 'R') return false;
         const hasEnded = currentHour > slot.endHour || (currentHour === slot.endHour && currentMin >= slot.endMin);
@@ -856,19 +859,47 @@
                       )}
                     </div>
 
-                    <div className="bg-rose-50 p-4 rounded-xl border border-rose-200 shadow-sm sm:col-span-2 md:col-span-1">
-                       <div className="text-xs font-bold text-rose-700 mb-2 flex items-center gap-1">
+                    <div className={`p-4 rounded-xl border shadow-sm sm:col-span-2 md:col-span-1 ${missedPeriods.length > 0 ? 'bg-rose-50 border-rose-200' : 'bg-emerald-50 border-emerald-200'}`}>
+                       <div className={`text-xs font-bold mb-2 flex items-center gap-1 ${missedPeriods.length > 0 ? 'text-rose-700' : 'text-emerald-700'}`}>
                          <Clock className="w-3.5 h-3.5"/> Log Belum Diisi
-                       </div>
-                       <div className="flex flex-wrap gap-1.5 mt-2">
-                         {missedPeriods.length > 0 ? missedPeriods.map(p => (
-                           <span key={p.id} className="px-2 py-0.5 bg-white border border-rose-200 rounded text-rose-600 text-[10px] font-bold">
-                             Waktu {p.label}
-                           </span>
-                         )) : (
-                           <span className="text-[10px] text-emerald-600 font-bold bg-emerald-100 px-2 py-0.5 rounded">Semua log lengkap</span>
+                         {missedPeriods.length > 0 && (
+                           <span className="ml-auto bg-rose-600 text-white text-[10px] px-1.5 py-0.5 rounded-full font-black">{missedPeriods.length}</span>
                          )}
                        </div>
+                       {missedPeriods.length === 0 ? (
+                         <span className="text-[10px] text-emerald-600 font-bold bg-emerald-100 px-2 py-0.5 rounded">Semua log lengkap ✓</span>
+                       ) : isAfterSchool && missedPeriods.length > 6 ? (
+                         <div className="space-y-2">
+                           <p className="text-[11px] text-rose-600 font-medium">
+                             {missedPeriods.length} waktu belum dilog hari ini
+                           </p>
+                           <div className="flex flex-wrap gap-1">
+                             {missedPeriods.map(p => (
+                               <button
+                                 key={p.id}
+                                 onClick={() => openTeacherModal(p)}
+                                 className="px-2 py-0.5 bg-white border border-rose-200 rounded text-rose-600 text-[10px] font-bold hover:bg-rose-100 hover:border-rose-400 transition-colors cursor-pointer"
+                                 title="Klik untuk set guru"
+                               >
+                                 {p.label}
+                               </button>
+                             ))}
+                           </div>
+                         </div>
+                       ) : (
+                         <div className="flex flex-wrap gap-1.5">
+                           {missedPeriods.map(p => (
+                             <button
+                               key={p.id}
+                               onClick={() => openTeacherModal(p)}
+                               className="px-2 py-0.5 bg-white border border-rose-200 rounded text-rose-600 text-[10px] font-bold hover:bg-rose-100 hover:border-rose-400 transition-colors cursor-pointer"
+                               title="Klik untuk set guru"
+                             >
+                               Waktu {p.label}
+                             </button>
+                           ))}
+                         </div>
+                       )}
                     </div>
                   </div>
                 </div>