266 lines
9.8 KiB
TypeScript
266 lines
9.8 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import axios from "axios";
|
|
import { useRouter } from "next/navigation";
|
|
import { LogOut, MapPin, Users, Calendar, X, Clock, FileText } from "lucide-react";
|
|
|
|
// Tipe Data
|
|
interface Room {
|
|
room_id: number;
|
|
name: string;
|
|
category: string;
|
|
capacity: number;
|
|
floor: string;
|
|
status: string;
|
|
}
|
|
|
|
export default function Dashboard() {
|
|
const router = useRouter();
|
|
const [user, setUser] = useState<any>(null);
|
|
const [rooms, setRooms] = useState<Room[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
// --- STATE UNTUK MODAL BOOKING ---
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
const [selectedRoom, setSelectedRoom] = useState<Room | null>(null);
|
|
const [startTime, setStartTime] = useState("");
|
|
const [endTime, setEndTime] = useState("");
|
|
const [purpose, setPurpose] = useState("");
|
|
const [submitLoading, setSubmitLoading] = useState(false);
|
|
// ----------------------------------
|
|
|
|
useEffect(() => {
|
|
const token = localStorage.getItem("token");
|
|
const userData = localStorage.getItem("user");
|
|
|
|
if (!token || !userData) {
|
|
router.push("/login");
|
|
return;
|
|
}
|
|
|
|
setUser(JSON.parse(userData));
|
|
fetchRooms(token);
|
|
}, []);
|
|
|
|
const fetchRooms = async (token: string) => {
|
|
try {
|
|
const response = await axios.get("http://localhost:8080/api/rooms", {
|
|
headers: { Authorization: `Bearer ${token}` },
|
|
});
|
|
setRooms(response.data.data);
|
|
} catch (error) {
|
|
console.error("Error:", error);
|
|
router.push("/login");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleLogout = () => {
|
|
localStorage.removeItem("token");
|
|
localStorage.removeItem("user");
|
|
router.push("/login");
|
|
};
|
|
|
|
// --- BUKA MODAL ---
|
|
const openBookingModal = (room: Room) => {
|
|
setSelectedRoom(room);
|
|
setIsModalOpen(true);
|
|
// Reset form
|
|
setStartTime("");
|
|
setEndTime("");
|
|
setPurpose("");
|
|
};
|
|
|
|
// --- SUBMIT BOOKING ---
|
|
const handleBookingSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setSubmitLoading(true);
|
|
|
|
const token = localStorage.getItem("token");
|
|
|
|
try {
|
|
// Perlu convert string datetime-local ke Format ISO string (RFC3339) buat Golang
|
|
// Contoh input: "2026-02-06T14:30" -> Output: "2026-02-06T14:30:00.000Z"
|
|
const startISO = new Date(startTime).toISOString();
|
|
const endISO = new Date(endTime).toISOString();
|
|
|
|
await axios.post(
|
|
"http://localhost:8080/api/bookings",
|
|
{
|
|
room_id: selectedRoom?.room_id,
|
|
start_time: startISO,
|
|
end_time: endISO,
|
|
purpose: purpose,
|
|
},
|
|
{
|
|
headers: { Authorization: `Bearer ${token}` },
|
|
}
|
|
);
|
|
|
|
alert("Booking Berhasil Diajukan! Menunggu persetujuan.");
|
|
setIsModalOpen(false); // Tutup modal
|
|
|
|
} catch (error: any) {
|
|
// Tangkap error dari Backend (Misal: Bentrok / 409 Conflict)
|
|
const errorMsg = error.response?.data?.error || "Gagal melakukan booking.";
|
|
alert("GAGAL: " + errorMsg);
|
|
} finally {
|
|
setSubmitLoading(false);
|
|
}
|
|
};
|
|
|
|
if (loading) return <div className="p-10 text-center">Memuat data...</div>;
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 relative">
|
|
{/* Navbar */}
|
|
<nav className="bg-white shadow-sm px-6 py-4 flex justify-between items-center sticky top-0 z-10">
|
|
<div>
|
|
<h1 className="text-xl font-bold text-blue-600">S-CLASS</h1>
|
|
<p className="text-xs text-gray-500">Welcome, {user?.full_name}</p>
|
|
</div>
|
|
<div className="flex gap-4">
|
|
{/* Tombol Cek History (Nanti kita buat halamannya) */}
|
|
<button
|
|
onClick={() => router.push('/history')}
|
|
className="text-sm text-gray-600 hover:text-blue-600 font-medium"
|
|
>
|
|
Riwayat Saya
|
|
</button>
|
|
<button
|
|
onClick={handleLogout}
|
|
className="flex items-center gap-2 text-sm text-red-500 hover:bg-red-50 px-3 py-2 rounded-lg transition"
|
|
>
|
|
<LogOut size={16} /> Keluar
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
|
|
{/* Konten Utama */}
|
|
<main className="max-w-6xl mx-auto p-6">
|
|
<h2 className="text-2xl font-bold text-gray-800 mb-6">Pilih Ruangan</h2>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{rooms.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">
|
|
<div>
|
|
<div className="flex justify-between items-start mb-3">
|
|
<span className={`px-2 py-1 text-xs font-semibold rounded-full ${
|
|
room.status === 'Available' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'
|
|
}`}>
|
|
{room.status}
|
|
</span>
|
|
<span className="text-gray-400 text-xs">{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">
|
|
<div className="flex items-center gap-2">
|
|
<MapPin size={16} className="text-blue-400" /> {room.floor}
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Users size={16} className="text-blue-400" /> Kapasitas: {room.capacity}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
className="mt-5 w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition flex justify-center items-center gap-2"
|
|
onClick={() => openBookingModal(room)}
|
|
>
|
|
<Calendar size={16} />
|
|
Booking Ruangan
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</main>
|
|
|
|
{/* --- MODAL POPUP FORMULIR --- */}
|
|
{isModalOpen && selectedRoom && (
|
|
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
|
|
<div className="bg-white rounded-2xl w-full max-w-md shadow-2xl overflow-hidden">
|
|
|
|
{/* Header Modal */}
|
|
<div className="bg-blue-600 p-4 flex justify-between items-center text-white">
|
|
<h3 className="font-bold text-lg">Form Peminjaman</h3>
|
|
<button onClick={() => setIsModalOpen(false)} className="hover:bg-blue-700 p-1 rounded">
|
|
<X size={20} />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Body Form */}
|
|
<form onSubmit={handleBookingSubmit} className="p-6 space-y-4">
|
|
<div className="bg-blue-50 p-3 rounded-lg border border-blue-100 mb-2">
|
|
<p className="text-sm text-blue-800 font-semibold">Ruangan: {selectedRoom.name}</p>
|
|
<p className="text-xs text-blue-600">{selectedRoom.floor}</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Waktu Mulai</label>
|
|
<div className="relative">
|
|
<Clock className="absolute left-3 top-2.5 text-gray-400 h-4 w-4" />
|
|
<input
|
|
type="datetime-local"
|
|
required
|
|
className="pl-9 w-full border border-gray-300 rounded-lg p-2 text-sm focus:ring-blue-500 focus:border-blue-500"
|
|
value={startTime}
|
|
onChange={(e) => setStartTime(e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Waktu Selesai</label>
|
|
<div className="relative">
|
|
<Clock className="absolute left-3 top-2.5 text-gray-400 h-4 w-4" />
|
|
<input
|
|
type="datetime-local"
|
|
required
|
|
className="pl-9 w-full border border-gray-300 rounded-lg p-2 text-sm focus:ring-blue-500 focus:border-blue-500"
|
|
value={endTime}
|
|
onChange={(e) => setEndTime(e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Keperluan / Kegiatan</label>
|
|
<div className="relative">
|
|
<FileText className="absolute left-3 top-3 text-gray-400 h-4 w-4" />
|
|
<textarea
|
|
required
|
|
rows={3}
|
|
placeholder="Contoh: Rapat Progres Skripsi"
|
|
className="pl-9 w-full border border-gray-300 rounded-lg p-2 text-sm focus:ring-blue-500 focus:border-blue-500"
|
|
value={purpose}
|
|
onChange={(e) => setPurpose(e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="pt-2 flex gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsModalOpen(false)}
|
|
className="flex-1 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 text-sm font-medium"
|
|
>
|
|
Batal
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={submitLoading}
|
|
className={`flex-1 py-2 rounded-lg text-white text-sm font-medium
|
|
${submitLoading ? 'bg-blue-400 cursor-not-allowed' : 'bg-blue-600 hover:bg-blue-700'}`}
|
|
>
|
|
{submitLoading ? 'Mengirim...' : 'Ajukan Booking'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|