update 17 mei

backend/cmd/main.go

@@ -14,8 +14,8 @@ func main() {
 	// 1. Konek Database
 	config.ConnectDatabase()
 
-	// 2. AutoMigrate (Membuat tabel jika belum ada)
+	// 2. AutoMigrate (Tambahkan ClassSchedule di sini agar dikenali GORM)
-	config.DB.AutoMigrate(&models.User{}, &models.Room{}, &models.Booking{})
+	config.DB.AutoMigrate(&models.User{}, &models.Room{}, &models.Booking{}, &models.ClassSchedule{})
 
 	r := gin.Default()
 
@@ -35,6 +35,7 @@ func main() {
 
 	r.POST("/api/verify-code", controllers.VerifyRedeemCode)
 
+	// --- RUTE YANG DILINDUNGI TOKEN (UNTUK WEB) ---
 	protected := r.Group("/api")
 	protected.Use(middleware.AuthMiddleware())
 	{
@@ -51,14 +52,20 @@ func main() {
 		// Bookings
 		protected.POST("/bookings", controllers.CreateBooking)
 		protected.GET("/bookings", controllers.GetAllBookings)
-		protected.PUT("/bookings/:id/status", controllers.UpdateBookingStatus) // <-- Cukup tulis satu kali saja
+		protected.PUT("/bookings/:id/status", controllers.UpdateBookingStatus)
 
 		// Admin (Manage Rooms)
-		protected.PUT("/admin/rooms/:id/status", controllers.UpdateRoomStatus) // <-- Pastikan baris ini ada
+		protected.PUT("/admin/rooms/:id/status", controllers.UpdateRoomStatus)
+		
+		// 🌟 RUTE BARU: Jadwal Kuliah (Untuk Halaman Web Admin)
+		protected.GET("/schedules", controllers.GetSchedules)
 	}
 
-	// 5. Jalur IoT ESP32 (Di luar protected)
+	// 5. Jalur IoT ESP32 (Di luar protected karena ESP32 tidak pakai sistem Login Token)
 	r.POST("/api/sensor/energy", controllers.UpdateRoomPower)
+	
+	// 🌟 RUTE BARU: Untuk menerima ketukan pintu dari Hardware ESP32
+	r.POST("/api/hardware/verify", controllers.VerifyHardwareCode)
 
 	r.Run(":8080")
 }
@@ -76,4 +83,4 @@ func CORSMiddleware() gin.HandlerFunc {
 		}
 		c.Next()
 	}
-}
+}

backend/controllers/hardwarecontroller.go

@@ -0,0 +1,120 @@
+package controllers
+
+import (
+	"fmt"
+	"net/http"
+	"time"
+
+	"github.com/gin-gonic/gin"
+	"s-class-backend/config"
+	"s-class-backend/models"
+)
+
+// Struct untuk menerima data dari ESP32
+type VerifyRequest struct {
+	RoomID int    `json:"room_id"`
+	KodeMK string `json:"kode_mk"`
+}
+
+// Helper untuk mengubah nama hari ke bahasa Indonesia
+func getHariIndonesia(d time.Weekday) string {
+	days := []string{"Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu"}
+	return days[d]
+}
+
+func VerifyHardwareCode(c *gin.Context) {
+	var req VerifyRequest
+	if err := c.ShouldBindJSON(&req); err != nil {
+		c.JSON(http.StatusBadRequest, gin.H{"error": "Format data tidak valid"})
+		return
+	}
+
+	// 1. Dapatkan waktu sekarang di zona waktu Surabaya (WIB / GMT+7)
+	loc, _ := time.LoadLocation("Asia/Jakarta")
+	now := time.Now().In(loc)
+	hariIni := getHariIndonesia(now.Weekday())
+	jamSekarangStr := now.Format("15:04:05")
+
+	// =========================================================================
+	// SKENARIO A: Dosen masuk sesuai jadwal perkuliahan
+	// =========================================================================
+	var schedule models.ClassSchedule
+	err := config.DB.Where(
+		"room_id = ? AND kode_mk = ? AND hari = ? AND jam_mulai <= ? AND jam_selesai >= ?",
+		req.RoomID, req.KodeMK, hariIni, jamSekarangStr, jamSekarangStr,
+	).First(&schedule).Error
+
+	if err == nil {
+		// Ditemukan jadwal yang cocok! Izinkan relay menyala.
+		c.JSON(http.StatusOK, gin.H{
+			"status":  "success",
+			"relay":   "ON",
+			"message": fmt.Sprintf("Akses diterima. Jadwal %s sedang berlangsung.", schedule.NamaMK),
+		})
+		return
+	}
+
+	// =========================================================================
+	// SKENARIO B: Akses Dadakan (Di luar jadwal / Kode MK tidak cocok jam ini)
+	// =========================================================================
+
+	// CEK 1: Apakah ada jadwal KULIAH LAIN yang sedang berlangsung saat ini?
+	var activeSchedule models.ClassSchedule
+	errActive := config.DB.Where(
+		"room_id = ? AND hari = ? AND jam_mulai <= ? AND jam_selesai >= ?",
+		req.RoomID, hariIni, jamSekarangStr, jamSekarangStr,
+	).First(&activeSchedule).Error
+
+	if errActive == nil {
+		c.JSON(http.StatusForbidden, gin.H{
+			"error": fmt.Sprintf("Akses ditolak. Ruangan sedang digunakan untuk jadwal: %s", activeSchedule.NamaMK),
+		})
+		return
+	}
+
+	// CEK 2: Apakah ada BOOKING MAHASISWA (Approved) yang sedang berlangsung?
+	// Asumsi tabel booking memiliki status 'Approved', 'Pending', dll.
+	var activeBooking models.Booking
+	errBooking := config.DB.Where(
+		"room_id = ? AND status = 'Approved' AND start_time <= ? AND end_time >= ?",
+		req.RoomID, now, now, // Sesuaikan jika format DB menggunakan timestamp ISO
+	).First(&activeBooking).Error
+
+	if errBooking == nil {
+		c.JSON(http.StatusForbidden, gin.H{
+			"error": "Akses ditolak. Ruangan sedang dipinjam oleh mahasiswa.",
+		})
+		return
+	}
+
+	// CEK 3: Pengecekan Aturan 10 Menit untuk Jadwal Berikutnya
+	var nextSchedule models.ClassSchedule
+	errNext := config.DB.Where(
+		"room_id = ? AND hari = ? AND jam_mulai > ?",
+		req.RoomID, hariIni, jamSekarangStr,
+	).Order("jam_mulai asc").First(&nextSchedule).Error
+
+	if errNext == nil {
+		// Parse jam mulai jadwal berikutnya
+		nextTime, _ := time.Parse("15:04:05", nextSchedule.JamMulai)
+		currentTime, _ := time.Parse("15:04:05", jamSekarangStr)
+
+		// Hitung selisih dalam menit
+		diffMinutes := nextTime.Sub(currentTime).Minutes()
+
+		if diffMinutes <= 10 {
+			c.JSON(http.StatusForbidden, gin.H{
+				"error": fmt.Sprintf("Akses ditolak. Kelas %s akan segera dimulai dalam %.0f menit. Ruangan harus dikosongkan.", nextSchedule.NamaMK, diffMinutes),
+			})
+			return
+		}
+	}
+
+	// Jika lolos semua rintangan di atas, ruangan dipastikan KOSONG dan AMAN.
+	// Akses dadakan diizinkan!
+	c.JSON(http.StatusOK, gin.H{
+		"status":  "success",
+		"relay":   "ON",
+		"message": "Akses dadakan diizinkan. Tidak ada tabrakan jadwal terdekat.",
+	})
+}

backend/controllers/schedulecontroller.go

@@ -0,0 +1,27 @@
+package controllers
+
+import (
+	"net/http"
+
+	"github.com/gin-gonic/gin"
+	
+	// UBAH DUA BARIS INI MENJADI s-class-backend
+	"s-class-backend/config" 
+	"s-class-backend/models" 
+)
+
+// Fungsi untuk mengambil semua jadwal dari database
+func GetSchedules(c *gin.Context) {
+	var schedules []models.ClassSchedule
+
+	// Mengambil semua data jadwal dan diurutkan berdasarkan Hari dan Jam Mulai
+	if err := config.DB.Order("hari, jam_mulai").Find(&schedules).Error; err != nil {
+		c.JSON(http.StatusInternalServerError, gin.H{"error": "Gagal mengambil data jadwal kuliah"})
+		return
+	}
+
+	// Kirim data ke frontend (React)
+	c.JSON(http.StatusOK, gin.H{
+		"data": schedules,
+	})
+}

backend/models/entity.go

@@ -46,3 +46,18 @@ type Booking struct {
 
 	CreatedAt time.Time `json:"created_at"`
 }
+
+func (ClassSchedule) TableName() string {
+	return "class_schedules"
+}
+
+type ClassSchedule struct {
+	ScheduleID int    `gorm:"primaryKey;autoIncrement;column:schedule_id" json:"schedule_id"`
+	KodeMK     string `gorm:"type:varchar(50);not null;column:kode_mk" json:"kode_mk"`
+	NamaMK     string `gorm:"type:varchar(100);not null;column:nama_mk" json:"nama_mk"`
+	RoomID     int    `gorm:"not null;column:room_id" json:"room_id"`
+	Room       Room   `gorm:"foreignKey:RoomID" json:"room"`
+	Hari       string `gorm:"type:varchar(20);not null;column:hari" json:"hari"`
+	JamMulai   string `gorm:"type:time;not null;column:jam_mulai" json:"jam_mulai"`
+	JamSelesai string `gorm:"type:time;not null;column:jam_selesai" json:"jam_selesai"`
+}

frontend/app/admin/layout.tsx

@@ -8,7 +8,8 @@ import {
   LayoutDashboard, 
   Activity,
   ShieldCheck,
-  Settings2
+  Settings2,
+  CalendarDays
 } from "lucide-react";
 
 export default function AdminLayout({ children }: { children: React.ReactNode }) {
@@ -16,18 +17,31 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
   const pathname = usePathname();
   const [user, setUser] = useState<any>(null);
   
-  // State isSidebarOpen sudah kita buang sepenuhnya
+  // 1. TAMBAHAN BARU: Gembok Loading untuk mencegah glitch redirect
+  const [isAuthorized, setIsAuthorized] = useState(false);
 
   useEffect(() => {
     const userData = localStorage.getItem("user");
-    if (userData) {
+    
+    if (!userData) {
+      router.push("/login");
+      return;
+    }
+
+    try {
       const parsed = JSON.parse(userData);
-      if (parsed.role !== 'admin') {
+      
+      // 2. PERBAIKAN: Baca role dengan aman, ubah semua ke huruf kecil
+      const userRole = parsed.role || parsed.Role || "";
+      
+      if (userRole.toLowerCase() !== 'admin') {
         router.push("/dashboard");
       } else {
         setUser(parsed);
+        setIsAuthorized(true); // Buka gembok karena dia benar-benar admin!
       }
-    } else {
+    } catch (error) {
+      console.error("Gagal membaca data user", error);
       router.push("/login");
     }
   }, [router]);
@@ -37,6 +51,15 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
     router.push("/login");
   };
 
+  // 3. CEGATAN RENDER: Jika belum divalidasi, jangan render apapun selain layar loading
+  if (!isAuthorized) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-white">
+        <div className="text-blue-600 font-bold animate-pulse">Memverifikasi Otoritas Admin...</div>
+      </div>
+    );
+  }
+
   return (
     <div className="min-h-screen bg-white flex flex-col font-sans">
       
@@ -96,6 +119,13 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
               <span>Manage Rooms</span>
             </Link>
 
+            <Link href="/admin/schedules" className={`flex items-center gap-4 font-semibold transition-colors group ${pathname === '/admin/schedules' ? 'text-blue-700' : 'text-gray-800 hover:text-blue-700'}`}>
+              <div className={`p-2 rounded-lg transition-colors ${pathname === '/admin/schedules' ? 'bg-white/60 shadow-sm' : 'bg-white/30 group-hover:bg-white/50'}`}>
+                <CalendarDays size={22} />
+              </div>
+              <span>Jadwal Kuliah</span>
+            </Link>
+
           </nav>
         </aside>
 

frontend/app/admin/schedules/page.tsx

@@ -0,0 +1,175 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import axios from "axios";
+import { CalendarDays, Plus, Trash2, Clock, MapPin, LayoutList, Calendar } from "lucide-react";
+
+export default function SchedulesPage() {
+  const [schedules, setSchedules] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [viewMode, setViewMode] = useState<"table" | "calendar">("table"); // State untuk pindah mode
+
+  const hariUrutan = ["Senin", "Selasa", "Rabu", "Kamis", "Jumat"];
+  const listJam = ["07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00"];
+
+  useEffect(() => {
+    fetchSchedules();
+  }, []);
+
+  const fetchSchedules = async () => {
+    try {
+      const token = localStorage.getItem("token");
+      const res = await axios.get("http://localhost:8080/api/schedules", {
+        headers: { Authorization: `Bearer ${token}` }
+      });
+      setSchedules(res.data.data || []);
+    } catch (err: any) {
+      console.error("Gagal ambil jadwal:", err);
+      setSchedules([]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Helper untuk mengecek apakah ada matkul di hari dan jam tertentu (Untuk Mode Kalender)
+  const getMatkulDiSlot = (hari: string, jam: string) => {
+    return schedules.find((s) => {
+      if (s.hari !== hari) return false;
+      const jamMulai = s.jam_mulai.substring(0, 5);
+      const jamSelesai = s.jam_selesai.substring(0, 5);
+      return jam >= jamMulai && jam < jamSelesai;
+    });
+  };
+
+  if (loading) return <div className="p-8 text-gray-500 font-medium">Memuat Jadwal Kuliah...</div>;
+
+  return (
+    <div className="max-w-6xl mx-auto space-y-6">
+      
+      {/* Header Halaman */}
+      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-4">
+        <div className="flex items-center gap-3">
+          <div className="bg-blue-100 p-3 rounded-lg text-blue-600">
+            <CalendarDays size={28} />
+          </div>
+          <div>
+            <h2 className="text-2xl font-bold text-gray-800">Jadwal Kuliah Statis</h2>
+            <p className="text-gray-500 text-sm mt-1">Pantau kepadatan ruang kelas D101 dan kelola jadwal otomatis.</p>
+          </div>
+        </div>
+        
+        <div className="flex items-center gap-3">
+          {/* Toggle View Mode */}
+          <div className="bg-gray-100 p-1 rounded-lg flex items-center border border-gray-200">
+            <button 
+              onClick={() => setViewMode("table")}
+              className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-bold transition-all ${viewMode === "table" ? "bg-white text-blue-600 shadow-sm" : "text-gray-600 hover:text-gray-900"}`}
+            >
+              <LayoutList size={14} /> Mode Tabel
+            </button>
+            <button 
+              onClick={() => setViewMode("calendar")}
+              className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-bold transition-all ${viewMode === "calendar" ? "bg-white text-blue-600 shadow-sm" : "text-gray-600 hover:text-gray-900"}`}
+            >
+              <Calendar size={14} /> Mode Kalender
+            </button>
+          </div>
+
+          <button className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-bold shadow-sm hover:bg-blue-700 transition-colors">
+            <Plus size={18} /> Tambah Jadwal
+          </button>
+        </div>
+      </div>
+
+      {/* ==================================== MODE TABEL ==================================== */}
+      {viewMode === "table" && (
+        <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
+          <div className="overflow-x-auto">
+            <table className="w-full text-left border-collapse">
+              <thead className="bg-gray-50 text-gray-500 text-xs font-bold uppercase border-b border-gray-100">
+                <tr>
+                  <th className="p-4">Kode MK</th>
+                  <th className="p-4">Mata Kuliah</th>
+                  <th className="p-4">Ruangan</th>
+                  <th className="p-4">Hari</th>
+                  <th className="p-4">Waktu</th>
+                  <th className="p-4 text-center">Aksi</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-gray-50">
+                {schedules.length > 0 ? (
+                  schedules.map((sched) => (
+                    <tr key={sched.schedule_id} className="hover:bg-blue-50/30 transition-colors">
+                      <td className="p-4 font-bold text-gray-800 text-sm">{sched.kode_mk}</td>
+                      <td className="p-4 text-sm font-semibold text-gray-600">{sched.nama_mk}</td>
+                      <td className="p-4 text-sm font-bold text-blue-600 flex items-center gap-1.5 mt-2">
+                        <MapPin size={14} /> Kelas D101
+                      </td>
+                      <td className="p-4 text-sm font-bold text-gray-700">
+                        <span className="bg-gray-100 px-2 py-1 rounded-md">{sched.hari}</span>
+                      </td>
+                      <td className="p-4 text-sm text-gray-600">
+                        <div className="flex items-center gap-1.5 font-medium">
+                          <Clock size={14} className="text-gray-400" />
+                          {sched.jam_mulai.substring(0, 5)} - {sched.jam_selesai.substring(0, 5)}
+                        </div>
+                      </td>
+                      <td className="p-4 text-center">
+                        <button className="p-2 bg-red-50 text-red-500 rounded-lg hover:bg-red-100 transition-colors">
+                          <Trash2 size={16} />
+                        </button>
+                      </td>
+                    </tr>
+                  ))
+                ) : (
+                  <tr>
+                    <td colSpan={6} className="p-10 text-center text-gray-400 text-sm">Belum ada jadwal kuliah terdaftar.</td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+
+      {/* ==================================== MODE KALENDER ==================================== */}
+      {viewMode === "calendar" && (
+        <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100 overflow-hidden">
+          <div className="grid grid-cols-6 gap-2 border-b border-gray-100 pb-3 text-center font-bold text-sm text-gray-500">
+            <div>Waktu</div>
+            {hariUrutan.map((h) => <div key={h} className="text-gray-700">{h}</div>)}
+          </div>
+
+          <div className="divide-y divide-gray-100">
+            {listJam.map((jam) => (
+              <div key={jam} className="grid grid-cols-6 gap-2 py-3 items-center min-h-17.5">
+                <div className="text-xs font-bold text-gray-400 text-center flex items-center justify-center gap-1">
+                  <Clock size={12} /> {jam}
+                </div>
+                
+                {hariUrutan.map((hari) => {
+                  const mtk = getMatkulDiSlot(hari, jam);
+                  return (
+                    <div key={hari} className="h-full">
+                      {mtk ? (
+                        <div className="bg-blue-50 border-l-4 border-blue-600 p-2 rounded text-left shadow-xs h-full flex flex-col justify-between">
+                          <span className="text-xs font-bold text-blue-800 block truncate">{mtk.nama_mk}</span>
+                          <span className="text-[10px] font-semibold text-blue-500">{mtk.kode_mk}</span>
+                        </div>
+                      ) : (
+                        <div className="border border-dashed border-gray-100 h-full rounded flex items-center justify-center text-[10px] text-gray-300">
+                          Kosong
+                        </div>
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+      
+    </div>
+  );
+}

frontend/app/dashboard/bookings/calendar/page.tsx

@@ -7,6 +7,7 @@ import { CalendarDays, MapPin, Clock, ChevronLeft, ChevronRight, Calendar as Cal
 export default function CalendarViewPage() {
   const [bookings, setBookings] = useState<any[]>([]);
   const [rooms, setRooms] = useState<any[]>([]);
+  const [schedules, setSchedules] = useState<any[]>([]); // 1. STATE BARU UNTUK JADWAL KULIAH
   const [loading, setLoading] = useState(true);
 
   // --- STATE UNTUK NAVIGASI MINGGU ---
@@ -50,19 +51,21 @@ export default function CalendarViewPage() {
     d.setHours(0, 0, 0, 0);
     setStartDate(d);
   };
-  // ------------------------------------------
 
   useEffect(() => {
     const fetchData = async () => {
       try {
         const token = localStorage.getItem("token");
-        const [roomsRes, bookingsRes] = await Promise.all([
+        // 2. FETCH DATA SCHEDULES BERSAMAAN DENGAN ROOMS & BOOKINGS
+        const [roomsRes, bookingsRes, schedulesRes] = await Promise.all([
           axios.get("http://localhost:8080/api/rooms", { headers: { Authorization: `Bearer ${token}` } }),
-          axios.get("http://localhost:8080/api/bookings", { headers: { Authorization: `Bearer ${token}` } })
+          axios.get("http://localhost:8080/api/bookings", { headers: { Authorization: `Bearer ${token}` } }),
+          axios.get("http://localhost:8080/api/schedules", { headers: { Authorization: `Bearer ${token}` } })
         ]);
         
         setRooms(roomsRes.data.data || []);
         setBookings(bookingsRes.data.data || []);
+        setSchedules(schedulesRes.data.data || []);
       } catch (error) {
         console.error("Gagal memuat data", error);
       } finally {
@@ -72,7 +75,7 @@ export default function CalendarViewPage() {
     fetchData();
   }, []);
 
-  // Fungsi memfilter booking
+  // Fungsi memfilter booking dinamis
   const getBookingsForCell = (roomId: number, dateObj: Date) => {
     return bookings.filter(b => {
       if (b.room_id !== roomId) return false;
@@ -85,6 +88,14 @@ export default function CalendarViewPage() {
     });
   };
 
+  // 3. FUNGSI BARU: Memfilter jadwal statis berdasarkan hari
+  const getSchedulesForCell = (roomId: number, dateObj: Date) => {
+    const namaHari = ["Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu"];
+    const hariIni = namaHari[dateObj.getDay()];
+
+    return schedules.filter(s => s.room_id === roomId && s.hari === hariIni);
+  };
+
   // Format Jam
   const formatTime = (isoString: string) => {
     return new Date(isoString).toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' });
@@ -119,7 +130,6 @@ export default function CalendarViewPage() {
           
           <div className="w-px h-6 bg-gray-200 mx-1"></div>
           
-          {/* TULISAN RENTANG TANGGAL DINAMIS (Lebar Fix w-44 untuk menghilangkan warning Tailwind) */}
           <button 
             onClick={goToToday} 
             title="Kembali ke minggu ini"
@@ -144,7 +154,6 @@ export default function CalendarViewPage() {
       {/* Pembungkus Tabel */}
       <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden relative">
         <div className="overflow-x-auto">
-          {/* Lebar tabel dipertahankan menggunakan min-w-[1000px] karena ini ukuran presisi khusus */}
           <table className="w-full min-w-250 text-left border-collapse">
             
             {/* HEADER TABEL: Sumbu X (Tanggal) */}
@@ -171,7 +180,6 @@ export default function CalendarViewPage() {
 
             {/* BODY TABEL: Sumbu Y (Ruangan) */}
             <tbody>
-{/* --- DAFTAR RUANGAN YANG SUDAH DIURUTKAN --- */}
         {[...rooms]
           .sort((a, b) => a.name.localeCompare(b.name))
           .map((room) => (
@@ -181,41 +189,61 @@ export default function CalendarViewPage() {
                 <div className="text-xs text-gray-500">{room.category}</div>
               </td>
               
-              {/* (Kodingan untuk kolom hari dan jadwal peminjamanmu biarkan tetap berada di bawah sini) */}
-
                   {weekDates.map((date, idx) => {
                     const dailyBookings = getBookingsForCell(room.room_id, date);
+                    const dailySchedules = getSchedulesForCell(room.room_id, date); // Ambil jadwal kuliah hari ini
                     
                     return (
                       <td key={idx} className="border-b border-gray-100 border-r border-r-gray-50 p-2 align-top">
-                        {dailyBookings.length > 0 ? (
+                        {(dailyBookings.length > 0 || dailySchedules.length > 0) ? (
                           <div className="space-y-2">
+                            
+                            {/* 4. RENDER JADWAL KULIAH STATIS (Tampil Paling Atas, Warna Abu-abu) */}
+                            {dailySchedules
+                              .sort((a, b) => a.jam_mulai.localeCompare(b.jam_mulai))
+                              .map((s, i) => (
+                                <div 
+                                  key={`sched-${i}`} 
+                                  className="border rounded-md p-2 shadow-sm border-l-4 bg-gray-100 border-gray-300 border-l-gray-500 opacity-90"
+                                >
+                                  <p className="text-xs font-bold text-gray-700 truncate" title={s.nama_mk}>
+                                    [KULIAH] {s.nama_mk}
+                                  </p>
+                                  <div className="flex flex-wrap items-center gap-1 text-[10px] text-gray-600 font-semibold mt-1">
+                                    <Clock size={10} />
+                                    {s.jam_mulai.substring(0, 5)} - {s.jam_selesai.substring(0, 5)}
+                                    <span className="ml-auto text-[9px] uppercase bg-gray-200 px-1 rounded border border-gray-300">
+                                      {s.kode_mk}
+                                    </span>
+                                  </div>
+                                </div>
+                              ))
+                            }
+
+                            {/* 5. RENDER BOOKING DINAMIS MAHASISWA */}
                             {dailyBookings
-                          // 1. FILTER: Hanya tampilkan yang Pending atau Approved
+                              .filter((b) => b.status === "Pending" || b.status === "Approved")
-                          .filter((b) => b.status === "Pending" || b.status === "Approved")
+                              .sort((a, b) => new Date(a.start_time).getTime() - new Date(b.start_time).getTime())
-                          // 2. SORT: Urutkan berdasarkan waktu mulai (dari pagi ke malam)
+                              .map((b) => (
-                          .sort((a, b) => new Date(a.start_time).getTime() - new Date(b.start_time).getTime())
+                                <div 
-                          // 3. MAP: Render ke layar
+                                  key={b.booking_id} 
-                          .map((b) => (
+                                  className={`border rounded-md p-2 shadow-sm border-l-4 
-                            <div 
+                                    ${b.status === 'Approved' ? 'bg-green-50 border-green-200 border-l-green-500' : 
-                              key={b.booking_id} 
+                                      b.status === 'Pending' ? 'bg-yellow-50 border-yellow-200 border-l-yellow-500' : 
-                              className={`border rounded-md p-2 shadow-sm border-l-4 
+                                      'bg-blue-50 border-blue-200 border-l-blue-500'}`}
-                                ${b.status === 'Approved' ? 'bg-green-50 border-green-200 border-l-green-500' : 
+                                >
-                                  b.status === 'Pending' ? 'bg-yellow-50 border-yellow-200 border-l-yellow-500' : 
+                                  <p className="text-xs font-bold text-gray-800 truncate" title={b.purpose}>
-                                  'bg-blue-50 border-blue-200 border-l-blue-500'}`}
+                                    {b.purpose}
-                            >
+                                  </p>
-                              <p className="text-xs font-bold text-gray-800 truncate" title={b.purpose}>
+                                  <div className="flex flex-wrap items-center gap-1 text-[10px] text-gray-600 font-semibold mt-1">
-                                {b.purpose}
+                                    <Clock size={10} />
-                              </p>
+                                    {formatTime(b.start_time)} - {formatTime(b.end_time)}
-                              <div className="flex flex-wrap items-center gap-1 text-[10px] text-gray-600 font-semibold mt-1">
+                                    <span className="ml-auto text-[9px] uppercase bg-white/60 px-1 rounded border border-gray-100">
-                                <Clock size={10} />
+                                      {b.status || 'Pending'}
-                                {formatTime(b.start_time)} - {formatTime(b.end_time)}
+                                    </span>
-                                <span className="ml-auto text-[9px] uppercase bg-white/60 px-1 rounded border border-gray-100">
+                                  </div>
-                                  {b.status || 'Pending'}
+                                </div>
-                                </span>
+                              ))}
-                              </div>
-                            </div>
-                        ))}
                           </div>
                         ) : (
                           <div className="h-full w-full min-h-10 flex items-center justify-center text-gray-300 text-xs">