update 16 mei urutan dan tampilan user admin

frontend/app/admin/approvals/page.tsx

@@ -1,22 +1,50 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { ShieldCheck, Check, X, Clock } from "lucide-react";
+import axios from "axios";
+import { ShieldCheck, Check, X } from "lucide-react";
 
 export default function ApprovalsPage() {
   const [activeTab, setActiveTab] = useState("Pending");
   const [bookings, setBookings] = useState<any[]>([]);
 
+  // 1. FUNGSI UNTUK MENGAMBIL DATA ASLI DARI DATABASE
+  const fetchBookings = async () => {
+    try {
+      const token = localStorage.getItem("token");
+      // Mengambil dari fungsi GetAllBookings di backend
+      const res = await axios.get("http://localhost:8080/api/bookings", {
+        headers: { Authorization: `Bearer ${token}` }
+      });
+      setBookings(res.data.data);
+    } catch (err: any) {
+      console.error("Gagal mengambil data peminjaman:", err);
+    }
+  };
+
   useEffect(() => {
-    // Data Dummy Sementara
-    setBookings([
-      { id: 1, user: { full_name: "Andreas Budi" }, room: { name: "Kelas D101" }, start_time: new Date().toISOString(), purpose: "Rapat Evaluasi BEM", status: "Pending" },
-      { id: 2, user: { full_name: "Siska Saraswati" }, room: { name: "Kelas D105" }, start_time: new Date().toISOString(), purpose: "Sidang Skripsi", status: "Pending" },
-      { id: 3, user: { full_name: "Bima Arya" }, room: { name: "Kelas D102" }, start_time: new Date().toISOString(), purpose: "Kelas Pengganti", status: "Approved" },
-      { id: 4, user: { full_name: "Citra Kirana" }, room: { name: "Kelas D104" }, start_time: new Date().toISOString(), purpose: "Latihan Band", status: "Rejected" },
-    ]);
+    fetchBookings();
   }, []);
 
+  // 2. FUNGSI UNTUK MENGUBAH STATUS (APPROVE / REJECT)
+  const updateStatus = async (bookingId: string, newStatus: string) => {
+    try {
+      const token = localStorage.getItem("token");
+      // Mengirim UUID booking_id ke backend Golang
+      await axios.put(
+        `http://localhost:8080/api/bookings/${bookingId}/status`,
+        { status: newStatus },
+        { headers: { Authorization: `Bearer ${token}` } }
+      );
+      
+      alert(`Peminjaman berhasil di-${newStatus}!`);
+      fetchBookings(); // Refresh tabel setelah update
+    } catch (err: any) {
+      console.error("Gagal update status:", err.response?.data || err.message);
+      alert("Error: " + (err.response?.data?.error || "Gagal mengubah status"));
+    }
+  };
+
   const filteredBookings = bookings.filter(b => b.status === activeTab);
 
   return (
@@ -56,34 +84,62 @@ export default function ApprovalsPage() {
               <tr>
                 <th className="p-4">Peminjam</th>
                 <th className="p-4">Ruangan</th>
-                <th className="p-4">Waktu Mulai</th>
+                <th className="p-4">Tanggal & Waktu</th>
                 <th className="p-4">Keperluan</th>
                 <th className="p-4 text-center">Status / Aksi</th>
               </tr>
             </thead>
             <tbody className="divide-y divide-gray-50">
               {filteredBookings.map((b) => (
-                <tr key={b.id} className="hover:bg-gray-50/50 transition-colors">
-                  <td className="p-4 font-bold text-gray-800 text-sm">{b.user?.full_name}</td>
-                  <td className="p-4 text-sm font-medium text-gray-600">{b.room?.name}</td>
-                  <td className="p-4 text-sm text-gray-600">{new Date(b.start_time).toLocaleString('id-ID')}</td>
+                // Pastikan key menggunakan booking_id (UUID)
+                <tr key={b.booking_id} className="hover:bg-gray-50/50 transition-colors">
+                {/* Gunakan huruf KECIL: b.user dan b.room sesuai JSON dari Golang */}
+                  <td className="p-4 font-bold text-gray-800 text-sm">{b.user?.full_name || "Tanpa Nama"}</td>
+                  <td className="p-4 text-sm font-medium text-gray-600">{b.room?.name || "Ruangan Tidak Diketahui"}</td>
+                  
+                  {/* Menampilkan Waktu Mulai sampai Waktu Selesai */}
+                  <td className="p-4 text-sm text-gray-600">
+                    <div className="font-bold">
+                      {new Date(b.start_time).toLocaleTimeString('id-ID', {hour: '2-digit', minute:'2-digit'})} - {new Date(b.end_time).toLocaleTimeString('id-ID', {hour: '2-digit', minute:'2-digit'})}
+                    </div>
+                    <div className="text-xs text-gray-400">
+                      {new Date(b.start_time).toLocaleDateString('id-ID')}
+                    </div>
+                  </td>
                   <td className="p-4 text-sm text-gray-600">{b.purpose}</td>
                   <td className="p-4 text-center">
                     {b.status === "Pending" ? (
                       <div className="flex justify-center gap-2">
-                        <button className="flex items-center gap-1 px-3 py-1.5 bg-green-50 text-green-600 font-bold text-xs rounded-lg hover:bg-green-100 transition-colors">
+                        {/* 3. TOMBOL SETUJUI & TOLAK YANG SUDAH BERFUNGSI */}
+                        <button 
+                          // KITA CEK SEMUA KEMUNGKINAN NAMA ID-NYA:
+                          onClick={() => updateStatus(b.booking_id || b.BookingID || b.id, "Approved")}
+                          className="flex items-center gap-1 px-3 py-1.5 bg-green-50 text-green-600 font-bold text-xs rounded-lg hover:bg-green-100 transition-colors"
+                        >
                           <Check size={14} /> Setujui
                         </button>
-                        <button className="flex items-center gap-1 px-3 py-1.5 bg-red-50 text-red-600 font-bold text-xs rounded-lg hover:bg-red-100 transition-colors">
+                        
+                        <button 
+                          onClick={() => updateStatus(b.booking_id || b.BookingID || b.id, "Rejected")}
+                          className="flex items-center gap-1 px-3 py-1.5 bg-red-50 text-red-600 font-bold text-xs rounded-lg hover:bg-red-100 transition-colors"
+                        >
                           <X size={14} /> Tolak
                         </button>
                       </div>
                     ) : (
-                      <span className={`px-3 py-1 rounded-full text-xs font-bold ${
-                        b.status === 'Approved' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'
-                      }`}>
-                        {b.status}
-                      </span>
+                      <div className="flex flex-col items-center gap-1">
+                        <span className={`px-3 py-1 rounded-full text-xs font-bold ${
+                          b.status === 'Approved' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'
+                        }`}>
+                          {b.status}
+                        </span>
+                        {/* Menampilkan Redeem Code jika sudah Approved */}
+                        {b.status === 'Approved' && b.redeem_code && (
+                          <span className="text-[10px] text-gray-500 font-mono bg-gray-100 px-2 py-0.5 rounded">
+                            Code: {b.redeem_code}
+                          </span>
+                        )}
+                      </div>
                     )}
                   </td>
                 </tr>

frontend/app/admin/page.tsx

@@ -49,7 +49,8 @@ export default function AdminDashboard() {
     }
   };
 
-const handleAction = async (id: number, status: string) => {
+  // PERBAIKAN 1: Ubah tipe id menjadi 'string' karena kita menggunakan UUID
+  const handleAction = async (id: string, status: string) => {
     try {
       const token = localStorage.getItem("token");
       // Mengirim status 'Approved' atau 'Rejected' ke backend
@@ -59,7 +60,8 @@ const handleAction = async (id: number, status: string) => {
       );
       alert(`Permintaan berhasil di-${status}`);
       fetchAdminData(); // Refresh data setelah aksi
-    } catch (err) {
+    } catch (err: any) {
+      console.error(err);
       alert("Gagal memproses pendaftaran.");
     }
   };
@@ -75,7 +77,7 @@ const handleAction = async (id: number, status: string) => {
         </h2>
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
           {roomStats.map((room) => (
-            <div key={room.id} className="bg-white p-5 rounded-xl border border-gray-100 shadow-sm">
+            <div key={room.room_id} className="bg-white p-5 rounded-xl border border-gray-100 shadow-sm">
               <div className="flex justify-between items-start mb-3">
                 <span className="text-sm font-bold text-gray-400 uppercase tracking-tight">{room.name}</span>
                 <div className={`h-3 w-3 rounded-full ${room.power_consumption > 5 ? 'bg-orange-500 animate-pulse' : 'bg-gray-300'}`} />
@@ -104,26 +106,42 @@ const handleAction = async (id: number, status: string) => {
               <tr>
                 <th className="p-4">Peminjam</th>
                 <th className="p-4">Ruangan</th>
-                <th className="p-4">Waktu</th>
+                <th className="p-4">Tanggal & Waktu</th>
                 <th className="p-4">Keperluan</th>
                 <th className="p-4 text-center">Tindakan</th>
               </tr>
             </thead>
             <tbody className="divide-y divide-gray-50">
               {pendingBookings.map((b) => (
-                <tr key={b.id} className="hover:bg-gray-50/50 transition-colors">
-                  <td className="p-4 font-bold text-gray-800 text-sm">{b.user?.full_name}</td>
-                  <td className="p-4 text-sm font-medium text-gray-600">{b.room?.name}</td>
-                  <td className="p-4 text-xs text-gray-500 leading-relaxed">
-                    {new Date(b.start_time).toLocaleString('id-ID')}
+                // PERBAIKAN 2: Gunakan booking_id sebagai key
+                <tr key={b.booking_id} className="hover:bg-gray-50/50 transition-colors">
+                  <td className="p-4 font-bold text-gray-800 text-sm">{b.user?.full_name || "Tanpa Nama"}</td>
+                  <td className="p-4 text-sm font-medium text-gray-600">{b.room?.name || "Ruangan Tidak Diketahui"}</td>
+                  
+                  {/* PERBAIKAN 3: Format Waktu Mulai dan Selesai yang Rapi */}
+                  <td className="p-4 text-sm text-gray-600">
+                    <div className="font-bold">
+                      {new Date(b.start_time).toLocaleTimeString('id-ID', {hour: '2-digit', minute:'2-digit'})} - {new Date(b.end_time).toLocaleTimeString('id-ID', {hour: '2-digit', minute:'2-digit'})}
+                    </div>
+                    <div className="text-xs text-gray-400">
+                      {new Date(b.start_time).toLocaleDateString('id-ID')}
+                    </div>
                   </td>
-                  <td className="p-4 text-sm text-gray-600 truncate max-w-37.5">{b.purpose}</td>
+
+                  <td className="p-4 text-sm text-gray-600 truncate max-w-60">{b.purpose}</td>
                   <td className="p-4">
                     <div className="flex justify-center gap-2">
-                      <button onClick={() => handleAction(b.id, 'Approved')} className="p-2 bg-green-50 text-green-600 rounded-lg hover:bg-green-100 transition-colors">
+                      {/* PERBAIKAN 4: Gunakan b.booking_id di fungsi onClick */}
+                      <button 
+                        onClick={() => handleAction(b.booking_id, 'Approved')} 
+                        className="p-2 bg-green-50 text-green-600 rounded-lg hover:bg-green-100 transition-colors"
+                      >
                         <Check size={18} />
                       </button>
-                      <button onClick={() => handleAction(b.id, 'Rejected')} className="p-2 bg-red-50 text-red-600 rounded-lg hover:bg-red-100 transition-colors">
+                      <button 
+                        onClick={() => handleAction(b.booking_id, 'Rejected')} 
+                        className="p-2 bg-red-50 text-red-600 rounded-lg hover:bg-red-100 transition-colors"
+                      >
                         <X size={18} />
                       </button>
                     </div>

frontend/app/admin/rooms/page.tsx

@@ -66,7 +66,10 @@ export default function ManageRoomsPage() {
       </div>
 
       <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-        {rooms.map((room) => (
+        {/* TAMBAHKAN [...rooms].sort(...) SEBELUM .map */}
+        {[...rooms]
+          .sort((a, b) => a.name.localeCompare(b.name))
+          .map((room) => (
           <div key={room.room_id} className={`bg-white p-6 rounded-2xl border transition-all shadow-sm flex items-center justify-between
             ${room.status === 'Maintenance' ? 'border-orange-200 bg-orange-50/20' : 'border-gray-100'}`}>
             
@@ -93,7 +96,6 @@ export default function ManageRoomsPage() {
               >
                 Set to {room.status === 'Available' ? 'Maintenance' : 'Available'}
               </button>
-              <span className="text-[10px] text-gray-400 font-medium italic">ID: {room.room_id}</span>
             </div>
           </div>
         ))}