update 16 mei urutan dan tampilan user admin
This commit is contained in:
[Valentino Heman Budiarto]
parent
4970220a24
commit
8e7f5f539b
@ -51,13 +51,16 @@ func CreateBooking(c *gin.Context) {
|
||||
return
|
||||
}
|
||||
|
||||
// (Overlap Check)
|
||||
// (Overlap Check)
|
||||
var count int64
|
||||
config.DB.Model(&models.Booking{}).Where("room_id = ? AND status != 'Cancelled' AND ((start_time < ? AND end_time > ?) OR (start_time < ? AND end_time > ?) OR (start_time >= ? AND end_time <= ?))",
|
||||
input.RoomID, input.EndTime, input.StartTime, input.EndTime, input.StartTime, input.StartTime, input.EndTime).Count(&count)
|
||||
// KITA UBAH STATUSNYA MENJADI: status IN ('Pending', 'Approved')
|
||||
config.DB.Model(&models.Booking{}).Where(
|
||||
"room_id = ? AND status IN ('Pending', 'Approved') AND ((start_time < ? AND end_time > ?) OR (start_time < ? AND end_time > ?) OR (start_time >= ? AND end_time <= ?))",
|
||||
input.RoomID, input.EndTime, input.StartTime, input.EndTime, input.StartTime, input.StartTime, input.EndTime,
|
||||
).Count(&count)
|
||||
|
||||
if count > 0 {
|
||||
c.JSON(http.StatusConflict, gin.H{"error": "Ruangan sudah dibooking pada jam tersebut!"})
|
||||
c.JSON(http.StatusConflict, gin.H{"error": "Ruangan sudah dibooking atau sedang dalam antrean persetujuan pada jam tersebut!"})
|
||||
return
|
||||
}
|
||||
|
||||
@ -110,44 +113,56 @@ type UpdateStatusInput struct {
|
||||
|
||||
// UPDATE STATUS (ADMIN)
|
||||
func UpdateBookingStatus(c *gin.Context) {
|
||||
bookingID := c.Param("id")
|
||||
var input UpdateStatusInput
|
||||
bookingID := c.Param("id")
|
||||
|
||||
// 1. Validasi Input JSON
|
||||
if err := c.ShouldBindJSON(&input); err != nil {
|
||||
c.JSON(http.StatusBadRequest, gin.H{"error": "Format data tidak valid"})
|
||||
return
|
||||
}
|
||||
var input UpdateStatusInput
|
||||
if err := c.ShouldBindJSON(&input); err != nil {
|
||||
c.JSON(http.StatusBadRequest, gin.H{"error": "Format data salah"})
|
||||
return
|
||||
}
|
||||
|
||||
var booking models.Booking
|
||||
// 2. Gunakan "id = ?" jika primary key di DB adalah 'id'
|
||||
// Jika di model kamu pakai 'RoomID', pastikan konsisten
|
||||
if err := config.DB.Where("id = ?", bookingID).First(&booking).Error; err != nil {
|
||||
c.JSON(http.StatusNotFound, gin.H{"error": "Data booking tidak ditemukan di database"})
|
||||
return
|
||||
}
|
||||
var booking models.Booking
|
||||
// KUNCI PERBAIKAN: Gunakan Where("booking_id = ?") agar tepat sasaran
|
||||
if err := config.DB.Where("booking_id = ?", bookingID).First(&booking).Error; err != nil {
|
||||
c.JSON(http.StatusNotFound, gin.H{"error": "Data booking tidak ditemukan di database"})
|
||||
return
|
||||
}
|
||||
|
||||
// 3. Update Status
|
||||
booking.Status = input.Status
|
||||
// Gunakan Switch Case (Clean Code) yang sudah kita bahas sebelumnya
|
||||
switch input.Status {
|
||||
case "Approved":
|
||||
if booking.RedeemCode == "" {
|
||||
booking.RedeemCode = helpers.GenerateRedeemCode()
|
||||
}
|
||||
case "Rejected", "Cancelled":
|
||||
booking.RedeemCode = ""
|
||||
}
|
||||
|
||||
// REVISI CLEAN CODE: Menggunakan Switch
|
||||
switch input.Status {
|
||||
case "Approved":
|
||||
if booking.RedeemCode == "" {
|
||||
booking.RedeemCode = helpers.GenerateRedeemCode()
|
||||
}
|
||||
case "Rejected", "Cancelled":
|
||||
booking.RedeemCode = ""
|
||||
}
|
||||
if err := config.DB.Save(&booking).Error; err != nil {
|
||||
c.JSON(http.StatusInternalServerError, gin.H{"error": "Gagal menyimpan perubahan ke database"})
|
||||
return
|
||||
}
|
||||
booking.Status = input.Status
|
||||
|
||||
c.JSON(http.StatusOK, gin.H{
|
||||
"message": "Status berhasil diperbarui!",
|
||||
"data": booking,
|
||||
})
|
||||
if err := config.DB.Save(&booking).Error; err != nil {
|
||||
c.JSON(http.StatusInternalServerError, gin.H{"error": "Gagal menyimpan ke database"})
|
||||
return
|
||||
}
|
||||
|
||||
c.JSON(http.StatusOK, gin.H{
|
||||
"message": "Status booking berhasil diperbarui!",
|
||||
"data": booking,
|
||||
})
|
||||
|
||||
booking.Status = input.Status
|
||||
|
||||
// KITA BUKA KEDOK ERROR DARI POSTGRESQL:
|
||||
if err := config.DB.Save(&booking).Error; err != nil {
|
||||
fmt.Println("🔥 ERROR DARI DATABASE:", err.Error()) // Cetak teks merah di terminal
|
||||
c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()}) // Tembak ke pop-up web
|
||||
return
|
||||
}
|
||||
|
||||
c.JSON(http.StatusOK, gin.H{
|
||||
"message": "Status booking berhasil diperbarui!",
|
||||
"data": booking,
|
||||
})
|
||||
}
|
||||
|
||||
// INPUT UNTUK ESP3
|
||||
@ -184,19 +199,17 @@ func VerifyRedeemCode(c *gin.Context) {
|
||||
|
||||
// GET ALL BOOKINGS (Untuk Calendar View semua user)
|
||||
func GetAllBookings(c *gin.Context) {
|
||||
var bookings []models.Booking
|
||||
var bookings []models.Booking
|
||||
|
||||
// Preload digunakan untuk mengambil data Relasi (Nama Ruangan & Nama Peminjam)
|
||||
if err := config.DB.Preload("Room").Preload("User").Order("created_at desc").Find(&bookings).Error; err != nil {
|
||||
c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
|
||||
return
|
||||
}
|
||||
// Preload digunakan untuk mengambil data Relasi (Nama Ruangan & Nama Peminjam)
|
||||
if err := config.DB.Preload("Room").Preload("User").Order("created_at desc").Find(&bookings).Error; err != nil {
|
||||
c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
|
||||
return
|
||||
}
|
||||
|
||||
// Perhatikan: responsenya menggunakan "data: bookings" agar cocok dengan Frontend React-mu
|
||||
c.JSON(http.StatusOK, gin.H{
|
||||
"status": "success",
|
||||
"data": bookings,
|
||||
})
|
||||
// Perhatikan: responsenya menggunakan "data: bookings" agar cocok dengan Frontend React-mu
|
||||
c.JSON(http.StatusOK, gin.H{
|
||||
"status": "success",
|
||||
"data": bookings,
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -56,26 +56,25 @@ func UpdateRoomStatus(c *gin.Context) {
|
||||
}
|
||||
|
||||
var room models.Room
|
||||
// KUNCI PERBAIKANNYA: Cukup masukkan `roomID` langsung.
|
||||
// GORM akan otomatis mencari berdasarkan Primary Key tanpa peduli nama kolomnya.
|
||||
if err := config.DB.First(&room, roomID).Error; err != nil {
|
||||
c.JSON(http.StatusNotFound, gin.H{"error": "Ruangan tidak ditemukan di tabel"})
|
||||
// Karena model sudah di-tag dengan benar, pencarian ini pasti akan berhasil
|
||||
if err := config.DB.Where("room_id = ?", roomID).First(&room).Error; err != nil {
|
||||
c.JSON(http.StatusNotFound, gin.H{"error": "Ruangan tidak ditemukan"})
|
||||
return
|
||||
}
|
||||
|
||||
// Ubah status dan simpan
|
||||
room.Status = input.Status
|
||||
if err := config.DB.Save(&room).Error; err != nil {
|
||||
c.JSON(http.StatusInternalServerError, gin.H{"error": "Gagal menyimpan perubahan"})
|
||||
return
|
||||
}
|
||||
|
||||
c.JSON(http.StatusOK, gin.H{
|
||||
"message": "Status ruangan berhasil diperbarui",
|
||||
"data": room,
|
||||
})
|
||||
}
|
||||
|
||||
// UPDATE ROOM POWER (Menerima data Watt dari ESP32 / Tuya)
|
||||
// UPDATE ROOM POWER (Menerima data Watt dari ESP32)
|
||||
func UpdateRoomPower(c *gin.Context) {
|
||||
var input EnergySensorInput
|
||||
|
||||
@ -85,14 +84,14 @@ func UpdateRoomPower(c *gin.Context) {
|
||||
}
|
||||
|
||||
var room models.Room
|
||||
if err := config.DB.First(&room, "room_id = ?", input.RoomID).Error; err != nil {
|
||||
// Tetap gunakan room_id agar GORM tidak bingung
|
||||
if err := config.DB.Where("room_id = ?", input.RoomID).First(&room).Error; err != nil {
|
||||
c.JSON(http.StatusNotFound, gin.H{"error": "Ruangan tidak ditemukan"})
|
||||
return
|
||||
}
|
||||
|
||||
// Pastikan kolom ini sesuai dengan nama di models.Room milikmu (misal: PowerConsumption)
|
||||
room.PowerConsumption = input.Power
|
||||
config.DB.Save(&room)
|
||||
|
||||
c.JSON(http.StatusOK, gin.H{"message": "Data daya ESP32 berhasil disimpan"})
|
||||
}
|
||||
}
|
||||
@ -19,12 +19,12 @@ type User struct {
|
||||
}
|
||||
|
||||
type Room struct {
|
||||
RoomID uint `gorm:"primaryKey" json:"room_id"`
|
||||
Name string `gorm:"not null" json:"name"`
|
||||
Category string `gorm:"not null" json:"category"`
|
||||
Capacity int `gorm:"not null" json:"capacity"`
|
||||
Floor string `gorm:"not null" json:"floor"`
|
||||
Status string `gorm:"type:room_status;default:'Available'" json:"status"`
|
||||
RoomID uint `gorm:"primaryKey;column:room_id" json:"room_id"`
|
||||
Name string `json:"name"`
|
||||
Category string `json:"category"`
|
||||
Floor string `json:"floor"`
|
||||
Capacity int `json:"capacity"`
|
||||
Status string `json:"status"`
|
||||
PowerConsumption float64 `json:"power_consumption" gorm:"default:0"`
|
||||
}
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
))}
|
||||
|
||||
@ -171,13 +171,17 @@ export default function CalendarViewPage() {
|
||||
|
||||
{/* BODY TABEL: Sumbu Y (Ruangan) */}
|
||||
<tbody>
|
||||
{rooms.map((room) => (
|
||||
<tr key={room.room_id} className="hover:bg-blue-50/30 transition-colors">
|
||||
|
||||
<td className="sticky left-0 z-10 bg-white border-b border-r border-gray-200 p-4 shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)] group-hover:bg-blue-50/30 transition-colors">
|
||||
<div className="font-bold text-gray-800">{room.name}</div>
|
||||
<div className="text-xs text-gray-500">{room.category}</div>
|
||||
</td>
|
||||
{/* --- DAFTAR RUANGAN YANG SUDAH DIURUTKAN --- */}
|
||||
{[...rooms]
|
||||
.sort((a, b) => a.name.localeCompare(b.name))
|
||||
.map((room) => (
|
||||
<tr key={room.room_id} className="hover:bg-blue-50/30 transition-colors">
|
||||
<td className="sticky left-0 z-10 bg-white border-b border-r border-gray-200 p-4 shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)] group-hover:bg-blue-50/30 transition-colors">
|
||||
<div className="font-bold text-gray-800">{room.name}</div>
|
||||
<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);
|
||||
@ -186,23 +190,32 @@ export default function CalendarViewPage() {
|
||||
<td key={idx} className="border-b border-gray-100 border-r border-r-gray-50 p-2 align-top">
|
||||
{dailyBookings.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{dailyBookings.map((b, i) => (
|
||||
<div key={i} className={`border rounded-md p-2 shadow-sm border-l-4
|
||||
{dailyBookings
|
||||
// 1. FILTER: Hanya tampilkan yang Pending atau Approved
|
||||
.filter((b) => b.status === "Pending" || b.status === "Approved")
|
||||
// 2. SORT: Urutkan berdasarkan waktu mulai (dari pagi ke malam)
|
||||
.sort((a, b) => new Date(a.start_time).getTime() - new Date(b.start_time).getTime())
|
||||
// 3. MAP: Render ke layar
|
||||
.map((b) => (
|
||||
<div
|
||||
key={b.booking_id}
|
||||
className={`border rounded-md p-2 shadow-sm border-l-4
|
||||
${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' :
|
||||
'bg-blue-50 border-blue-200 border-l-blue-500'}`}>
|
||||
<p className="text-xs font-bold text-gray-800 truncate" title={b.purpose}>
|
||||
{b.purpose}
|
||||
</p>
|
||||
<div className="flex flex-wrap items-center gap-1 text-[10px] text-gray-600 font-semibold mt-1">
|
||||
<Clock size={10} />
|
||||
{formatTime(b.start_time)} - {formatTime(b.end_time)}
|
||||
<span className="ml-auto text-[9px] uppercase bg-white/60 px-1 rounded border border-gray-100">
|
||||
{b.status || 'Pending'}
|
||||
</span>
|
||||
</div>
|
||||
'bg-blue-50 border-blue-200 border-l-blue-500'}`}
|
||||
>
|
||||
<p className="text-xs font-bold text-gray-800 truncate" title={b.purpose}>
|
||||
{b.purpose}
|
||||
</p>
|
||||
<div className="flex flex-wrap items-center gap-1 text-[10px] text-gray-600 font-semibold mt-1">
|
||||
<Clock size={10} />
|
||||
{formatTime(b.start_time)} - {formatTime(b.end_time)}
|
||||
<span className="ml-auto text-[9px] uppercase bg-white/60 px-1 rounded border border-gray-100">
|
||||
{b.status || 'Pending'}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-full w-full min-h-10 flex items-center justify-center text-gray-300 text-xs">
|
||||
|
||||
@ -121,7 +121,10 @@ export default function Dashboard() {
|
||||
|
||||
{/* Grid Daftar Kelas */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{rooms.map((room) => (
|
||||
{/* TAMBAHKAN PENGURUTAN ABJAD DI SINI */}
|
||||
{[...rooms]
|
||||
.sort((a, b) => a.name.localeCompare(b.name))
|
||||
.map((room) => (
|
||||
<div key={room.room_id} className="bg-white rounded-xl shadow-sm border border-gray-100 p-5 flex flex-col justify-between hover:shadow-md transition-shadow">
|
||||
<div>
|
||||
<div className="flex justify-between items-start mb-3">
|
||||
@ -130,7 +133,6 @@ export default function Dashboard() {
|
||||
}`}>
|
||||
{room.status}
|
||||
</span>
|
||||
<span className="text-gray-400 text-xs font-medium">{room.category}</span>
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-gray-800 mb-1">{room.name}</h3>
|
||||
<div className="space-y-2 text-sm text-gray-600 mt-4">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user