Update index.html

index.html

@@ -150,6 +150,7 @@
       const [selectedStudents, setSelectedStudents] = useState([]);
       const [teacherFilter, setTeacherFilter] = useState('all');
       const [searchQuery, setSearchQuery] = useState('');
+      const [isSaving, setIsSaving] = useState(false);
 
       const CLASSES = useMemo(() => {
         const sheetClasses = Object.keys(studentsData || {});
@@ -327,24 +328,29 @@
       };
 
       const saveTeacherLog = async () => {
-        if (!tempTeacher.name) return;
+        if (!tempTeacher.name || isSaving || !activeSlot) return;
+        setIsSaving(true);
 
-        const updatedTeacherLogs = { ...teacherLogs, [activeSlot.id]: { ...tempTeacher } };
+        const slotId = activeSlot.id;
+        const teacher = { ...tempTeacher };
+        const cls = selectedClass;
+
+        const updatedTeacherLogs = { ...teacherLogs, [slotId]: teacher };
         setAllClassLogs(prev => ({
           ...prev,
-          [selectedClass]: { ...selectedClassData, teacherLogs: updatedTeacherLogs }
+          [cls]: { ...(prev[cls] || {}), teacherLogs: updatedTeacherLogs, studentLogs: (prev[cls] || {}).studentLogs || {} }
         }));
+        setIsTeacherModalOpen(false);
 
         await postLog({
-          className: selectedClass,
+          className: cls,
           type: 'teacher',
-          name: tempTeacher.name,
-          period: activeSlot.id,
-          subject: tempTeacher.subject,
+          name: teacher.name,
+          period: slotId,
+          subject: teacher.subject,
           action: 'set'
         });
-
-        setIsTeacherModalOpen(false);
+        setIsSaving(false);
       };
 
       const openStudentModal = (slot) => {
@@ -354,44 +360,52 @@
       };
 
       const saveStudentLog = async () => {
-        if (selectedStudents.length === 0) return;
+        if (selectedStudents.length === 0 || isSaving || !activeSlot) return;
+        setIsSaving(true);
+
+        const slotId = activeSlot.id;
+        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 newLog = {
           id: logId,
-          names: selectedStudents,
+          names: students,
           timeOut: timeOutStr,
           timeIn: null
         };
-        const updatedSlotLogs = [...(studentLogs[activeSlot.id] || []), newLog];
-        const updatedStudentLogs = { ...studentLogs, [activeSlot.id]: updatedSlotLogs };
+        const updatedSlotLogs = [...(studentLogs[slotId] || []), newLog];
+        const updatedStudentLogs = { ...studentLogs, [slotId]: updatedSlotLogs };
         
         setAllClassLogs(prev => ({
           ...prev,
-          [selectedClass]: { ...selectedClassData, studentLogs: updatedStudentLogs }
+          [cls]: { ...(prev[cls] || {}), teacherLogs: (prev[cls] || {}).teacherLogs || {}, studentLogs: updatedStudentLogs }
         }));
+        setIsStudentModalOpen(false);
 
         await postLog({
-          className: selectedClass,
+          className: cls,
           type: 'student',
           name: '',
-          period: activeSlot.id,
-          subject: teacherLogs[activeSlot.id]?.subject || '',
+          period: slotId,
+          subject: teacherLogs[slotId]?.subject || '',
           action: 'exit',
-          students: selectedStudents,
+          students: students,
           timeOut: timeOutStr,
           logId: logId
         });
-
-        setIsStudentModalOpen(false);
+        setIsSaving(false);
       };
 
       const confirmDelete = async () => {
-        if (!itemToDelete) return;
+        if (!itemToDelete || isSaving) return;
+        setIsSaving(true);
+        const toDelete = itemToDelete;
+        setItemToDelete(null);
         
-        if (itemToDelete.type === 'student') {
-          const { slotId, logId } = itemToDelete;
+        if (toDelete.type === 'student') {
+          const { slotId, logId } = toDelete;
           const updatedLogs = (studentLogs[slotId] || []).filter(log => log.id !== logId);
           setAllClassLogs(prev => ({
             ...prev,
@@ -405,8 +419,8 @@
             action: 'delete',
             logId: logId
           });
-        } else if (itemToDelete.type === 'teacher') {
-          const { slotId } = itemToDelete;
+        } else if (toDelete.type === 'teacher') {
+          const { slotId } = toDelete;
           const newTeacherLogs = { ...teacherLogs };
           delete newTeacherLogs[slotId];
           setAllClassLogs(prev => ({
@@ -421,11 +435,12 @@
             action: 'delete'
           });
         }
-        setItemToDelete(null);
+        setIsSaving(false);
       };
 
       const handleCopyPrevious = async (e, currentSlotId) => {
         e.stopPropagation();
+        if (isSaving) return;
         const currentIndex = currentTimeSlots.findIndex(s => s.id === currentSlotId);
         let prevIndex = currentIndex - 1;
         while (prevIndex >= 0 && (currentTimeSlots[prevIndex].id === 'R' || !teacherLogs[currentTimeSlots[prevIndex].id])) {
@@ -434,6 +449,7 @@
         if (prevIndex >= 0) {
            const prevLog = teacherLogs[currentTimeSlots[prevIndex].id];
            if (prevLog && prevLog.name) {
+              setIsSaving(true);
               const updatedTeacherLogs = { ...teacherLogs, [currentSlotId]: { ...prevLog } };
               setAllClassLogs(prev => ({
                 ...prev,
@@ -448,6 +464,7 @@
                 subject: prevLog.subject,
                 action: 'set'
               });
+              setIsSaving(false);
            }
         }
       };
@@ -1067,8 +1084,10 @@
                 </select>
 
                 <div className="flex gap-3">
-                  <button onClick={() => setIsTeacherModalOpen(false)} className="flex-1 py-3 text-sm font-bold text-slate-600 bg-slate-100 rounded-xl hover:bg-slate-200">Batal</button>
-                  <button onClick={saveTeacherLog} className="flex-1 py-3 text-sm font-bold text-white bg-indigo-600 rounded-xl hover:bg-indigo-700">Simpan</button>
+                  <button onClick={() => setIsTeacherModalOpen(false)} disabled={isSaving} className="flex-1 py-3 text-sm font-bold text-slate-600 bg-slate-100 rounded-xl hover:bg-slate-200 disabled:opacity-50">Batal</button>
+                  <button onClick={saveTeacherLog} disabled={isSaving || !tempTeacher.name} className="flex-1 py-3 text-sm font-bold text-white bg-indigo-600 rounded-xl hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed">
+                    {isSaving ? 'Menyimpan...' : 'Simpan'}
+                  </button>
                 </div>
               </div>
             </div>
@@ -1113,7 +1132,9 @@
 
                 <div className="flex gap-3 mt-auto pt-2">
                   <button onClick={() => setIsStudentModalOpen(false)} className="flex-1 py-3 text-sm font-bold text-slate-600 bg-slate-100 rounded-xl hover:bg-slate-200">Batal</button>
-                  <button onClick={saveStudentLog} disabled={selectedStudents.length === 0} className="flex-1 py-3 text-sm font-bold text-white bg-indigo-600 rounded-xl hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed">Rekod Keluar</button>
+                  <button onClick={saveStudentLog} disabled={selectedStudents.length === 0 || isSaving} className="flex-1 py-3 text-sm font-bold text-white bg-indigo-600 rounded-xl hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed">
+                    {isSaving ? 'Menyimpan...' : 'Rekod Keluar'}
+                  </button>
                 </div>
               </div>
             </div>