แก้สรุป เเละ ลบ วันสอนชดเชยไม่ได้

app/pages/makeup-classes.vue

@@ -180,15 +180,7 @@
 
           <div class="pt-4 border-t border-slate-700 flex justify-between items-center">
             <div class="flex gap-1">
-              <UButton
-                v-if="group.status !== 'cancelled' && group.status !== 'completed'"
-                size="sm"
-                color="primary"
-                variant="ghost"
-                icon="i-heroicons-pencil-square"
-                square
-                @click="openEditModal(group)"
-              />
+
               <UButton
                 size="sm"
                 color="error"

app/pages/rooms.vue

@@ -3,7 +3,7 @@
     <!-- Navbar -->
     <nav class="sticky top-16 z-50 bg-white border-b border-slate-200 p-3 shadow-sm no-print">
       <div class="container mx-auto flex items-center">
         <UButton icon="i-lucide-arrow-left" label="ย้อนกลับ" color="gray" variant="ghost" size="lg" to="/" class="font-bold text-md cursor-pointer hover:bg-slate-100" />
       </div>
     </nav>
 
@@ -107,8 +107,8 @@
             </div>
           </div>
 
-          <div class="overflow-x-auto w-full custom-scrollbar">
-            <table class="w-full text-left border-collapse min-w-[1200px]">
+          <div class="w-full overflow-x-auto custom-scrollbar">
+            <table class="w-full text-left border-collapse">
               <thead>
                 <tr class="bg-slate-100 border-b border-slate-200 text-sm font-black text-slate-600">
                   <th
@@ -143,7 +143,7 @@
                     <p class="font-bold text-slate-900 truncate max-w-[160px]">
                       {{ room.room_name }}
                     </p>
                     <p v-if="room.building" class="text-md text-slate-500 truncate max-w-[160px]">
                       {{ room.building }}
                     </p>
                   </td>
@@ -541,20 +541,20 @@
 <style scoped>
 /* Scrollbar Styling for Table */
 .custom-scrollbar::-webkit-scrollbar {
-  height: 8px;
-  width: 8px;
+  height: 12px;
+  width: 12px;
 }
 
 .custom-scrollbar::-webkit-scrollbar-track {
-  background: rgba(30, 41, 59, 1);
+  background: #f1f5f9;
 }
 
 .custom-scrollbar::-webkit-scrollbar-thumb {
-  background: rgba(51, 65, 85, 1);
+  background: #94a3b8;
   border-radius: 10px;
 }
 
 .custom-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: rgba(71, 85, 105, 1);
+  background: #64748b;
 }
 </style>

check_db.js

@@ -0,0 +1,18 @@
+import Database from 'better-sqlite3'
+const db = new Database('./server/data/data.db')
+
+console.log('Tables and Row Counts:')
+const tables = db.prepare("SELECT name FROM sqlite_master WHERE type='table'").all()
+
+tables.forEach(t => {
+  const count = db.prepare(`SELECT COUNT(*) as cnt FROM ${t.name}`).get()
+  console.log(`  - ${t.name}: ${count.cnt} rows`)
+})
+
+console.log('\nMakeup Classes Sample:')
+const makeup = db.prepare('SELECT id_makeup, status, teacher_id, section_id FROM makeup_classes LIMIT 5').all()
+console.log(JSON.stringify(makeup, null, 2))
+
+console.log('\nTeachers Sample:')
+const teachers = db.prepare('SELECT id_teacher, prefix, first_name, last_name FROM teachers LIMIT 3').all()
+console.log(JSON.stringify(teachers, null, 2))

create_correct_test_data.js

@@ -0,0 +1,59 @@
+import Database from 'better-sqlite3'
+const db = new Database('./server/data/data.db')
+
+// Delete existing test data
+console.log('Deleting existing test makeup_classes...')
+db.prepare('DELETE FROM makeup_classes WHERE id_makeup >= 10').run()
+
+// Insert correct test makeup class data
+const today = new Date().toISOString().split('T')[0]
+const tomorrow = new Date(Date.now() + 86400000).toISOString().split('T')[0]
+
+console.log('Creating correct test makeup_classes data...')
+
+const teacher = db.prepare('SELECT id_teacher FROM teachers LIMIT 1').get()
+const section = db.prepare('SELECT id_section FROM sections LIMIT 1').get()
+const subject = db.prepare('SELECT id_subject FROM Subjects LIMIT 1').get()
+const room = db.prepare('SELECT id_room FROM rooms LIMIT 1').get()
+
+if (!teacher || !section || !subject) {
+  console.error('Missing required data')
+  process.exit(1)
+}
+
+const insertStmt = db.prepare(`
+  INSERT INTO makeup_classes (
+    original_date, original_time_slot, makeup_date, 
+    makeup_time_start, makeup_time_end, teacher_id, 
+    section_id, subject_id, room_id, status, notes
+  ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+`)
+
+// Create test makeup classes with different times
+const timeSlots = [
+  ['08:00', '09:00'],
+  ['10:00', '11:00'],
+  ['13:00', '14:00']
+]
+
+timeSlots.forEach((slot, i) => {
+  const result = insertStmt.run(
+    today,
+    `${slot[0]}-${slot[1]}`,
+    tomorrow,
+    slot[0],
+    slot[1],
+    teacher.id_teacher,
+    section.id_section,
+    subject.id_subject,
+    room?.id_room || null,
+    'confirmed',
+    `Test makeup class ${i + 1}`
+  )
+  console.log(`  Created makeup_class ID: ${result.lastInsertRowid}, time: ${slot[0]}-${slot[1]}`)
+})
+
+// Verify
+const all = db.prepare('SELECT id_makeup, status, makeup_time_start, makeup_time_end FROM makeup_classes').all()
+console.log('\nAll makeup_classes:')
+console.log(JSON.stringify(all, null, 2))

create_test_data.js

@@ -0,0 +1,52 @@
+import Database from 'better-sqlite3'
+const db = new Database('./server/data/data.db')
+
+// Insert test makeup class data
+const today = new Date().toISOString().split('T')[0]
+const tomorrow = new Date(Date.now() + 86400000).toISOString().split('T')[0]
+
+console.log('Creating test makeup_classes data...')
+
+const teacher = db.prepare('SELECT id_teacher FROM teachers LIMIT 1').get()
+const section = db.prepare('SELECT id_section FROM sections LIMIT 1').get()
+const subject = db.prepare('SELECT id_subject FROM Subjects LIMIT 1').get()
+const room = db.prepare('SELECT id_room FROM rooms LIMIT 1').get()
+
+if (!teacher || !section || !subject) {
+  console.error('Missing required data (teacher, section, or subject)')
+  process.exit(1)
+}
+
+const insertStmt = db.prepare(`
+  INSERT INTO makeup_classes (
+    original_date, original_time_slot, makeup_date, 
+    makeup_time_start, makeup_time_end, teacher_id, 
+    section_id, subject_id, room_id, status, notes
+  ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+`)
+
+// Create 3 test makeup classes
+for (let i = 1; i <= 3; i++) {
+  const result = insertStmt.run(
+    today,
+    '08:00-09:00',
+    tomorrow,
+    '08:00',
+    `0${8+i}:00`,
+    teacher.id_teacher,
+    section.id_section,
+    subject.id_subject,
+    room?.id_room || null,
+    'confirmed',
+    `Test makeup class ${i}`
+  )
+  console.log(`  Created makeup_class ID: ${result.lastInsertRowid}`)
+}
+
+// Verify
+const count = db.prepare('SELECT COUNT(*) as cnt FROM makeup_classes').get()
+console.log(`\nTotal makeup_classes: ${count.cnt}`)
+
+const sample = db.prepare('SELECT id_makeup, status FROM makeup_classes').all()
+console.log('Sample:')
+console.log(JSON.stringify(sample, null, 2))

server/api/makeup-classes/[id].js

@@ -70,20 +70,26 @@ export default defineEventHandler(async (event) => {
       }
     }
 
-    // 2. Check Room Availability (if room, date, or time is changing)
+    // 2. Check Room Availability (only if room, date, or time is actually being changed)
     const newRoomId = body.room_id !== undefined ? body.room_id : oldData.room_id
     const newStart = body.makeup_time_start !== undefined ? body.makeup_time_start : oldData.makeup_time_start
     const newEnd = body.makeup_time_end !== undefined ? body.makeup_time_end : oldData.makeup_time_end
 
-    if (newRoomId && newRoomId !== 'null' && newDate && newStart && newEnd) {
+    // Only check room availability if there's an actual change to room, date, or time AND room is assigned
+    const hasRoomChange = body.room_id !== undefined && body.room_id !== oldData.room_id
+    const hasDateChange = body.makeup_date !== undefined && body.makeup_date !== oldData.makeup_date
+    const hasTimeChange = (body.makeup_time_start !== undefined && body.makeup_time_start !== oldData.makeup_time_start) || 
+                          (body.makeup_time_end !== undefined && body.makeup_time_end !== oldData.makeup_time_end)
+
+    if ((hasRoomChange || hasDateChange || hasTimeChange) && newRoomId && newRoomId !== 'null' && newStart && newEnd) {
       // We need term for room check
       let term = body.term
       if (!term) {
-        const teacherSchedule = db.prepare('SELECT term FROM schedules WHERE id_teacher = ? ORDER BY created_at DESC LIMIT 1').get(oldData.teacher_id)
+        const teacherSchedule = db.prepare('SELECT term FROM schedules WHERE id_teacher = ? ORDER BY id_schedule DESC LIMIT 1').get(oldData.teacher_id)
         term = teacherSchedule?.term
       }
 
-      if (term) {
+      if (term && newDate) {
         const availability = checkRoomAvailability({
           room_id: newRoomId,
           date: newDate,

server/api/makeup-classes/index.js

@@ -82,7 +82,7 @@ export default defineEventHandler(async (event) => {
       // We need term for room check. If not provided, try to find teacher's current term.
       let term = body.term
       if (!term) {
-        const teacherSchedule = db.prepare('SELECT term FROM schedules WHERE id_teacher = ? ORDER BY created_at DESC LIMIT 1').get(body.teacher_id)
+        const teacherSchedule = db.prepare('SELECT term FROM schedules WHERE id_teacher = ? ORDER BY id_schedule DESC LIMIT 1').get(body.teacher_id)
         term = teacherSchedule?.term
       }