From 86682ce7c307389d16958cfed3273ea7fc6b772c Mon Sep 17 00:00:00 2001
From: "[Valentino Heman Budiarto]" <[hemanvalentino@gmail.com]>
Date: Mon, 22 Jun 2026 16:50:24 +0700
Subject: [PATCH] jadwal

---
 frontend/app/admin/schedules/page.tsx | 241 +++++++++++++++++++++++---
 1 file changed, 220 insertions(+), 21 deletions(-)

diff --git a/frontend/app/admin/schedules/page.tsx b/frontend/app/admin/schedules/page.tsx
index 8ff986e..4e8f01d 100644
--- a/frontend/app/admin/schedules/page.tsx
+++ b/frontend/app/admin/schedules/page.tsx
@@ -2,12 +2,26 @@
 
 import { useEffect, useState } from "react";
 import axios from "axios";
-import { CalendarDays, Plus, Trash2, Clock, MapPin, LayoutList, Calendar } from "lucide-react";
+import { CalendarDays, Plus, Trash2, Clock, MapPin, LayoutList, Calendar, Edit, X, Save } 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 [viewMode, setViewMode] = useState<"table" | "calendar">("table");
+
+  // STATE UNTUK MODAL FORM (TAMBAH & EDIT)
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [formData, setFormData] = useState({
+    schedule_id: null as number | null,
+    kode_mk: "",
+    nama_mk: "",
+    room_id: 1, // Default Kelas D101
+    hari: "Senin",
+    jam_mulai: "",
+    jam_selesai: "",
+    jumlah_sks: 2,
+  });
 
   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"];
@@ -31,7 +45,92 @@ export default function SchedulesPage() {
     }
   };
 
-  // Helper untuk mengecek apakah ada matkul di hari dan jam tertentu (Untuk Mode Kalender)
+  // =========================================================================
+  // FUNGSI CRUD (TAMBAH, EDIT, HAPUS)
+  // =========================================================================
+  
+  // 1. Buka Modal untuk Tambah Baru
+  const handleAddClick = () => {
+    setFormData({
+      schedule_id: null,
+      kode_mk: "",
+      nama_mk: "",
+      room_id: 1,
+      hari: "Senin",
+      jam_mulai: "07:00",
+      jam_selesai: "08:40",
+      jumlah_sks: 2,
+    });
+    setIsModalOpen(true);
+  };
+
+  // 2. Buka Modal untuk Edit Data Lama
+  const handleEditClick = (sched: any) => {
+    setFormData({
+      schedule_id: sched.schedule_id,
+      kode_mk: sched.kode_mk,
+      nama_mk: sched.nama_mk,
+      room_id: sched.room_id,
+      hari: sched.hari,
+      jam_mulai: sched.jam_mulai.substring(0, 5), // Potong detik jika ada (07:00:00 -> 07:00)
+      jam_selesai: sched.jam_selesai.substring(0, 5),
+      jumlah_sks: sched.jumlah_sks || 2,
+    });
+    setIsModalOpen(true);
+  };
+
+  // 3. Simpan Data (Create atau Update ke Backend)
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSaving(true);
+    try {
+      const token = localStorage.getItem("token");
+      const headers = { Authorization: `Bearer ${token}` };
+
+      // Format ulang jam agar aman (tambahkan detik 00)
+      const payload = {
+        ...formData,
+        jam_mulai: formData.jam_mulai.length === 5 ? `${formData.jam_mulai}:00` : formData.jam_mulai,
+        jam_selesai: formData.jam_selesai.length === 5 ? `${formData.jam_selesai}:00` : formData.jam_selesai,
+        jumlah_sks: Number(formData.jumlah_sks)
+      };
+
+      if (formData.schedule_id) {
+        // UPDATE (PUT)
+        await axios.put(`http://172.17.172.17:8080/api/schedules/${formData.schedule_id}`, payload, { headers });
+        alert("Jadwal berhasil diperbarui!");
+      } else {
+        // CREATE BARU (POST)
+        await axios.post("http://172.17.172.17:8080/api/schedules", payload, { headers });
+        alert("Jadwal baru berhasil ditambahkan!");
+      }
+      
+      setIsModalOpen(false);
+      fetchSchedules(); // Refresh data di tabel
+    } catch (err: any) {
+      console.error("Gagal menyimpan jadwal:", err);
+      alert("Gagal menyimpan data: " + (err.response?.data?.error || err.message));
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  // 4. Hapus Data (Delete)
+  const handleDelete = async (id: number, namaMK: string) => {
+    if (!window.confirm(`Apakah Anda yakin ingin menghapus jadwal mata kuliah ${namaMK}?`)) return;
+    
+    try {
+      const token = localStorage.getItem("token");
+      await axios.delete(`http://172.17.172.17:8080/api/schedules/${id}`, {
+        headers: { Authorization: `Bearer ${token}` }
+      });
+      alert("Jadwal berhasil dihapus!");
+      fetchSchedules();
+    } catch (err: any) {
+      alert("Gagal menghapus jadwal.");
+    }
+  };
+
   const getMatkulDiSlot = (hari: string, jam: string) => {
     return schedules.find((s) => {
       if (s.hari !== hari) return false;
@@ -59,6 +158,14 @@ export default function SchedulesPage() {
         </div>
         
         <div className="flex items-center gap-3">
+          {/* Tombol Tambah Jadwal */}
+          <button 
+            onClick={handleAddClick}
+            className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-bold hover:bg-blue-700 transition-all shadow-sm"
+          >
+            <Plus size={16} /> Tambah Jadwal
+          </button>
+
           {/* Toggle View Mode */}
           <div className="bg-gray-100 p-1 rounded-lg flex items-center border border-gray-200">
             <button 
@@ -74,7 +181,6 @@ export default function SchedulesPage() {
               <Calendar size={14} /> Mode Kalender
             </button>
           </div>
-
         </div>
       </div>
 
@@ -88,8 +194,8 @@ export default function SchedulesPage() {
                   <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">Hari & Waktu</th>
+                  <th className="p-4">SKS</th>
                   <th className="p-4 text-center">Aksi</th>
                 </tr>
               </thead>
@@ -97,24 +203,38 @@ export default function SchedulesPage() {
                 {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 className="p-4 font-bold text-blue-700 text-sm">{sched.kode_mk}</td>
+                      <td className="p-4 text-sm font-semibold text-gray-800">{sched.nama_mk}</td>
+                      <td className="p-4 text-sm font-bold text-gray-600 flex items-center gap-1.5 mt-2">
+                        <MapPin size={14} className="text-blue-500" /> Kelas D101
                       </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" />
+                        <div className="font-bold text-gray-700">{sched.hari}</div>
+                        <div className="flex items-center gap-1.5 font-medium text-xs mt-0.5">
+                          <Clock size={12} 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 className="p-4 text-sm font-bold text-gray-600 text-center">
+                        <span className="bg-gray-100 px-2 py-1 rounded-md border">{sched.jumlah_sks}</span>
+                      </td>
+                      <td className="p-4">
+                        <div className="flex items-center justify-center gap-2">
+                          <button 
+                            onClick={() => handleEditClick(sched)}
+                            className="p-2 bg-yellow-50 text-yellow-600 rounded-lg hover:bg-yellow-100 transition-colors"
+                            title="Edit Jadwal"
+                          >
+                            <Edit size={16} />
+                          </button>
+                          <button 
+                            onClick={() => handleDelete(sched.schedule_id, sched.nama_mk)}
+                            className="p-2 bg-red-50 text-red-500 rounded-lg hover:bg-red-100 transition-colors"
+                            title="Hapus Jadwal"
+                          >
+                            <Trash2 size={16} />
+                          </button>
+                        </div>
                       </td>
                     </tr>
                   ))
@@ -149,7 +269,11 @@ export default function SchedulesPage() {
                   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">
+                        <div 
+                          onClick={() => handleEditClick(mtk)} 
+                          className="bg-blue-50 border-l-4 border-blue-600 p-2 rounded text-left shadow-xs h-full flex flex-col justify-between cursor-pointer hover:bg-blue-100 transition-colors"
+                          title="Klik untuk Edit"
+                        >
                           <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>
@@ -166,7 +290,82 @@ export default function SchedulesPage() {
           </div>
         </div>
       )}
-      
+
+      {/* ==================================== MODAL FORM CRUD ==================================== */}
+      {isModalOpen && (
+        <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
+          <div className="bg-white rounded-2xl w-full max-w-lg shadow-xl overflow-hidden">
+            <div className="flex justify-between items-center p-5 border-b border-gray-100 bg-gray-50/50">
+              <h3 className="font-bold text-lg text-gray-800">
+                {formData.schedule_id ? "Edit Jadwal Kuliah" : "Tambah Jadwal Kuliah Baru"}
+              </h3>
+              <button onClick={() => setIsModalOpen(false)} className="text-gray-400 hover:text-red-500">
+                <X size={20} />
+              </button>
+            </div>
+            
+            <form onSubmit={handleSubmit} className="p-6 space-y-4">
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-xs font-bold text-gray-600 mb-1">Kode MK</label>
+                  <input type="text" required value={formData.kode_mk} onChange={(e) => setFormData({...formData, kode_mk: e.target.value.toUpperCase()})}
+                    className="w-full border border-gray-300 rounded-lg p-2.5 text-sm focus:ring-2 focus:ring-blue-500 outline-none uppercase" 
+                    placeholder="Contoh: EE153" 
+                  />
+                </div>
+                <div>
+                  <label className="block text-xs font-bold text-gray-600 mb-1">Jumlah SKS</label>
+                  <input type="number" min="1" max="6" required value={formData.jumlah_sks} onChange={(e) => setFormData({...formData, jumlah_sks: Number(e.target.value)})}
+                    className="w-full border border-gray-300 rounded-lg p-2.5 text-sm focus:ring-2 focus:ring-blue-500 outline-none" 
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-xs font-bold text-gray-600 mb-1">Nama Mata Kuliah</label>
+                <input type="text" required value={formData.nama_mk} onChange={(e) => setFormData({...formData, nama_mk: e.target.value})}
+                  className="w-full border border-gray-300 rounded-lg p-2.5 text-sm focus:ring-2 focus:ring-blue-500 outline-none" 
+                  placeholder="Contoh: Elektronika dan Sistem Digital" 
+                />
+              </div>
+
+              <div>
+                <label className="block text-xs font-bold text-gray-600 mb-1">Hari Pelaksanaan</label>
+                <select value={formData.hari} onChange={(e) => setFormData({...formData, hari: e.target.value})}
+                  className="w-full border border-gray-300 rounded-lg p-2.5 text-sm focus:ring-2 focus:ring-blue-500 outline-none bg-white">
+                  {hariUrutan.map(h => <option key={h} value={h}>{h}</option>)}
+                  <option value="Sabtu">Sabtu</option>
+                </select>
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-xs font-bold text-gray-600 mb-1">Jam Mulai</label>
+                  <input type="time" required value={formData.jam_mulai} onChange={(e) => setFormData({...formData, jam_mulai: e.target.value})}
+                    className="w-full border border-gray-300 rounded-lg p-2.5 text-sm focus:ring-2 focus:ring-blue-500 outline-none" 
+                  />
+                </div>
+                <div>
+                  <label className="block text-xs font-bold text-gray-600 mb-1">Jam Selesai</label>
+                  <input type="time" required value={formData.jam_selesai} onChange={(e) => setFormData({...formData, jam_selesai: e.target.value})}
+                    className="w-full border border-gray-300 rounded-lg p-2.5 text-sm focus:ring-2 focus:ring-blue-500 outline-none" 
+                  />
+                </div>
+              </div>
+
+              <div className="pt-4 flex gap-3">
+                <button type="button" onClick={() => setIsModalOpen(false)} className="flex-1 py-2.5 rounded-lg text-sm font-bold text-gray-600 bg-gray-100 hover:bg-gray-200 transition-colors">
+                  Batal
+                </button>
+                <button type="submit" disabled={isSaving} className={`flex-1 py-2.5 rounded-lg text-sm font-bold text-white transition-colors flex items-center justify-center gap-2 ${isSaving ? 'bg-blue-400' : 'bg-blue-600 hover:bg-blue-700'}`}>
+                  <Save size={16} /> {isSaving ? "Menyimpan..." : "Simpan Jadwal"}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+
     </div>
   );
 }
\ No newline at end of file