update 17 mei

2026-05-17 21:34:19 +07:00
parent e6f5c4df06
commit 8d35ec81d8
7 changed files with 448 additions and 46 deletions
@@ -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>

@@ -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>
+  );
+}