245 lines
9.2 KiB
TypeScript
245 lines
9.2 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import axios from "axios";
|
|
import { useRouter } from "next/navigation";
|
|
import { 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://172.17.110.6:8080/api/rooms", {
|
|
headers: { Authorization: `Bearer ${token}` },
|
|
});
|
|
setRooms(response.data.data);
|
|
} catch (error) {
|
|
console.error("Error:", error);
|
|
router.push("/login");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
// --- 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 {
|
|
const startISO = new Date(startTime).toISOString();
|
|
const endISO = new Date(endTime).toISOString();
|
|
|
|
await axios.post(
|
|
"http://172.17.110.6: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) {
|
|
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="w-full">
|
|
|
|
{/* Header Konten: Judul & Tombol Riwayat */}
|
|
<div className="flex items-center justify-between mb-8">
|
|
<h2 className="text-2xl font-bold text-gray-800">Pilih Ruangan</h2>
|
|
<button
|
|
onClick={() => router.push('/history')}
|
|
className="flex items-center gap-2 bg-white border border-gray-300 text-gray-700 hover:bg-blue-50 hover:text-blue-600 hover:border-blue-300 px-4 py-2 rounded-lg text-sm font-medium shadow-sm transition-all"
|
|
>
|
|
<Clock size={18} />
|
|
Lihat Riwayat Booking
|
|
</button>
|
|
</div>
|
|
|
|
{/* Grid Daftar Kelas */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{/* 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">
|
|
<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>
|
|
</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-500" /> {room.floor}
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Users size={16} className="text-blue-500" /> Kapasitas: {room.capacity}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
className="mt-6 w-full bg-blue-600 text-white font-medium py-2 rounded-lg hover:bg-blue-700 transition flex justify-center items-center gap-2 shadow-sm"
|
|
onClick={() => openBookingModal(room)}
|
|
>
|
|
<Calendar size={16} />
|
|
Booking Ruangan
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* --- MODAL POPUP FORMULIR --- */}
|
|
{isModalOpen && selectedRoom && (
|
|
<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-md shadow-xl overflow-hidden border border-gray-100">
|
|
|
|
{/* Header Modal */}
|
|
<div className="bg-blue-600 p-4 flex justify-between items-center text-white">
|
|
<h3 className="font-semibold text-lg">Form Peminjaman</h3>
|
|
<button onClick={() => setIsModalOpen(false)} className="hover:bg-blue-700 p-1 rounded-lg transition-colors">
|
|
<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 mt-0.5">{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-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all"
|
|
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-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all"
|
|
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-2.5 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-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all"
|
|
value={purpose}
|
|
onChange={(e) => setPurpose(e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="pt-3 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 transition-all"
|
|
>
|
|
Batal
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={submitLoading}
|
|
className={`flex-1 py-2 rounded-lg text-white text-sm font-medium shadow-sm transition-all
|
|
${submitLoading ? 'bg-blue-400 cursor-not-allowed' : 'bg-blue-600 hover:bg-blue-700'}`}
|
|
>
|
|
{submitLoading ? 'Mengirim...' : 'Ajukan Booking'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
} |