5103022014/Skripsi_Valentino_5103022014
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update 16 mei urutan dan tampilan user admin

Browse Source
This commit is contained in:
[Valentino Heman Budiarto]
2026-05-16 15:30:23 +07:00
parent 4970220a24
commit 8e7f5f539b
9 changed files with 225 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app/dashboard/bookings/calendar/page.tsx
+34 -21
View File
@@ -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">