update 15 mei
This commit is contained in:
[Valentino Heman Budiarto]
@@ -1,245 +1,149 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import axios from "axios";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Calendar, Clock, Save, X, AlertTriangle } from "lucide-react";
|
||||
import { CalendarPlus, Clock, FileText, MapPin, CheckCircle2 } from "lucide-react";
|
||||
|
||||
export default function AddBookingPage() {
|
||||
const router = useRouter();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [rooms, setRooms] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [submitLoading, setSubmitLoading] = useState(false);
|
||||
|
||||
// State untuk form input
|
||||
const [formData, setFormData] = useState({
|
||||
room: "Ruang T-301",
|
||||
date: "",
|
||||
startTime: "",
|
||||
endTime: "",
|
||||
purpose: "",
|
||||
});
|
||||
// State Form
|
||||
const [selectedRoomId, setSelectedRoomId] = useState("");
|
||||
const [startTime, setStartTime] = useState("");
|
||||
const [endTime, setEndTime] = useState("");
|
||||
const [purpose, setPurpose] = useState("");
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
|
||||
setFormData({ ...formData, [e.target.name]: e.target.value });
|
||||
};
|
||||
|
||||
// --- LOGIKA VALIDASI (Business Logic) ---
|
||||
const validateBookingRules = () => {
|
||||
// 1. Cek kelengkapan data dasar
|
||||
if (!formData.date || !formData.startTime || !formData.endTime) {
|
||||
alert("Mohon lengkapi Tanggal dan Jam terlebih dahulu.");
|
||||
return false;
|
||||
}
|
||||
|
||||
// 2. Ambil Jam Mulai
|
||||
const startHour = parseInt(formData.startTime.split(":")[0]);
|
||||
|
||||
// 3. Cek Jam Khusus (Diatas 21:00 ATAU Sebelum 06:00)
|
||||
const isSpecialTime = startHour >= 21 || startHour < 6;
|
||||
|
||||
if (isSpecialTime) {
|
||||
const bookingDate = new Date(formData.date);
|
||||
const today = new Date();
|
||||
|
||||
// Reset jam agar perhitungan murni berdasarkan tanggal
|
||||
bookingDate.setHours(0, 0, 0, 0);
|
||||
today.setHours(0, 0, 0, 0);
|
||||
|
||||
// Hitung selisih hari
|
||||
const diffTime = bookingDate.getTime() - today.getTime();
|
||||
const diffDays = diffTime / (1000 * 3600 * 24);
|
||||
|
||||
// ATURAN: Harus H-3
|
||||
if (diffDays < 3) {
|
||||
alert(
|
||||
`Gagal! Peminjaman di jam khusus (${formData.startTime}) harus dilakukan minimal 3 hari sebelumnya.\n\n` +
|
||||
`Jarak peminjaman Anda: ${diffDays} hari dari sekarang.`
|
||||
);
|
||||
return false;
|
||||
// Ambil daftar ruangan untuk Dropdown
|
||||
useEffect(() => {
|
||||
const fetchRooms = async () => {
|
||||
try {
|
||||
const token = localStorage.getItem("token");
|
||||
const res = await axios.get("http://localhost:8080/api/rooms", {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
});
|
||||
setRooms(res.data.data);
|
||||
} catch (error) {
|
||||
console.error("Gagal memuat ruangan", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
fetchRooms();
|
||||
}, []);
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!selectedRoomId) return alert("Pilih ruangan terlebih dahulu!");
|
||||
|
||||
// Jalankan validasi
|
||||
if (!validateBookingRules()) return;
|
||||
setSubmitLoading(true);
|
||||
const token = localStorage.getItem("token");
|
||||
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const startISO = new Date(startTime).toISOString();
|
||||
const endISO = new Date(endTime).toISOString();
|
||||
|
||||
// --- MOCK API CALL ---
|
||||
console.log("Mengirim Data:", formData);
|
||||
await axios.post("http://localhost:8080/api/bookings", {
|
||||
room_id: parseInt(selectedRoomId),
|
||||
start_time: startISO,
|
||||
end_time: endISO,
|
||||
purpose: purpose,
|
||||
}, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
alert("Berhasil! Jadwal telah disimpan.");
|
||||
setIsLoading(false);
|
||||
// Redirect kembali ke halaman List Booking
|
||||
router.push("/dashboard/bookings");
|
||||
}, 1500);
|
||||
alert("Booking Berhasil Diajukan!");
|
||||
router.push("/dashboard/bookings/calendar"); // Arahkan ke jadwal setelah sukses
|
||||
|
||||
} catch (error: any) {
|
||||
alert("GAGAL: " + (error.response?.data?.error || "Terjadi kesalahan"));
|
||||
} finally {
|
||||
setSubmitLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) return <div className="p-8 text-gray-500 font-medium">Memuat formulir...</div>;
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-270">
|
||||
{/* Header Halaman */}
|
||||
<div className="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<h2 className="text-2xl font-bold text-black">
|
||||
Buat Peminjaman Baru
|
||||
</h2>
|
||||
<nav>
|
||||
<ol className="flex items-center gap-2 text-sm">
|
||||
<li><a className="font-medium text-gray-500" href="/dashboard/bookings">Booking /</a></li>
|
||||
<li className="font-medium text-yellow-500">Add</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Form Container */}
|
||||
<div className="rounded-xl border border-stroke bg-white shadow-sm border-gray-200 dark:bg-boxdark">
|
||||
<div className="border-b border-stroke py-4 px-6.5 border-gray-200">
|
||||
<h3 className="font-medium text-black ">
|
||||
Formulir Pengajuan Jadwal
|
||||
</h3>
|
||||
<div className="max-w-3xl mx-auto bg-white rounded-xl shadow-sm border border-gray-100 p-8">
|
||||
<div className="flex items-center gap-3 mb-8 border-b pb-4">
|
||||
<div className="bg-blue-100 p-3 rounded-lg text-blue-600">
|
||||
<CalendarPlus size={28} />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-gray-800">Buat Booking Baru</h2>
|
||||
<p className="text-gray-500 text-sm mt-1">Isi detail di bawah ini untuk memesan ruangan kelas S-CLASS.</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="p-6.5">
|
||||
|
||||
{/* --- Baris 1: Ruangan & Tanggal --- */}
|
||||
<div className="mb-4.5 flex flex-col gap-6 xl:flex-row">
|
||||
{/* Input Ruangan */}
|
||||
<div className="w-full xl:w-1/2">
|
||||
<label className="mb-2.5 block text-black font-medium">
|
||||
Pilih Ruangan <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="relative z-20 bg-white border border-gray-300 text-gray-900 focus:ring-yellow-500">
|
||||
<select
|
||||
name="room"
|
||||
value={formData.room}
|
||||
onChange={handleChange}
|
||||
className="relative z-20 w-full appearance-none rounded border border-stroke bg-transparent py-3 px-5 outline-none transition focus:border-yellow-500 active:border-yellow-500 dark:border-form-strokedark dark:bg-form-input dark:focus:border-yellow-500 text-black "
|
||||
>
|
||||
<option value="Ruang T-301">Ruang T-301 (Teori)</option>
|
||||
<option value="Ruang T-302">Ruang T-302 (Teori)</option>
|
||||
<option value="Lab Kendali">Lab Sistem Kendali</option>
|
||||
<option value="Lab IoT">Lab IoT & Embedded</option>
|
||||
<option value="Ruang Sidang">Ruang Sidang TA</option>
|
||||
</select>
|
||||
<span className="absolute top-1/2 right-4 z-30 -translate-y-1/2">
|
||||
<svg className="fill-current" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.98438 9.98438H17.0156C17.3781 9.98438 17.5656 10.4219 17.3094 10.6781L12.3094 15.6781C12.1406 15.8469 11.8594 15.8469 11.6906 15.6781L6.69062 10.6781C6.43438 10.4219 6.62188 9.98438 6.98438 9.98438Z" fill="gray" /></svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Input Tanggal */}
|
||||
<div className="w-full xl:w-1/2">
|
||||
<label className="mb-2.5 block text-black font-medium">
|
||||
Tanggal Peminjaman <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="date"
|
||||
name="date"
|
||||
required
|
||||
value={formData.date}
|
||||
onChange={handleChange}
|
||||
className="w-full rounded border border-stroke bg-gray-50 py-3 pl-11.5 pr-4.5 text-black focus:border-yellow-500 focus-visible:outline-none border-gray-200 dark:focus:border-yellow-500"
|
||||
/>
|
||||
<Calendar className="absolute left-4.5 top-3 text-gray-400" size={20} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* --- Baris 2: Waktu Mulai & Selesai --- */}
|
||||
<div className="mb-4.5 flex flex-col gap-6 xl:flex-row">
|
||||
<div className="w-full xl:w-1/2">
|
||||
<label className="mb-2.5 block text-black font-medium">
|
||||
Waktu Mulai <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="time"
|
||||
name="startTime"
|
||||
required
|
||||
value={formData.startTime}
|
||||
onChange={handleChange}
|
||||
className="w-full rounded border border-stroke bg-gray-50 py-3 pl-11.5 pr-4.5 text-black focus:border-yellow-500 focus-visible:outline-none border-gray-200 dark:focus:border-yellow-500"
|
||||
/>
|
||||
<Clock className="absolute left-4.5 top-3 text-gray-400" size={20} />
|
||||
</div>
|
||||
{/* Info Validasi */}
|
||||
<p className="mt-2 text-xs text-orange-500 flex items-center gap-1">
|
||||
<AlertTriangle size={12} />
|
||||
Peminjaman jam 21:00 - 06:00 wajib H-3.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="w-full xl:w-1/2">
|
||||
<label className="mb-2.5 block text-black font-medium">
|
||||
Waktu Selesai <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="time"
|
||||
name="endTime"
|
||||
required
|
||||
value={formData.endTime}
|
||||
onChange={handleChange}
|
||||
className="w-full rounded border border-stroke bg-gray-50 py-3 pl-11.5 pr-4.5 text-black focus:border-yellow-500 focus-visible:outline-none border-gray-200 dark:focus:border-yellow-500"
|
||||
/>
|
||||
<Clock className="absolute left-4.5 top-3 text-gray-400" size={20} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* --- Baris 3: Keperluan --- */}
|
||||
<div className="mb-6">
|
||||
<label className="mb-2.5 block text-black font-medium">
|
||||
Keperluan / Mata Kuliah <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<textarea
|
||||
rows={4}
|
||||
name="purpose"
|
||||
required
|
||||
placeholder="Jelaskan keperluan peminjaman ruang..."
|
||||
value={formData.purpose}
|
||||
onChange={handleChange}
|
||||
className="w-full rounded border border-stroke bg-transparent py-3 px-5 text-black outline-none transition focus:border-yellow-500 active:border-yellow-500 dark:border-form-strokedark dark:bg-form-input dark:focus:border-yellow-500"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
{/* --- Tombol Aksi --- */}
|
||||
<div className="flex gap-4 justify-end">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => router.push("/dashboard/bookings")}
|
||||
className="flex items-center justify-center gap-2 rounded border border-stroke py-2.5 px-6 font-medium text-black hover:shadow-1 border-gray-200 transition-all hover:bg-gray-100"
|
||||
>
|
||||
<X size={18} />
|
||||
Batal
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
className={`flex items-center justify-center gap-2 rounded bg-yellow-500 py-2.5 px-6 font-medium text-white hover:bg-yellow-600 transition-all ${
|
||||
isLoading ? "opacity-70 cursor-not-allowed" : ""
|
||||
}`}
|
||||
>
|
||||
{isLoading ? (
|
||||
"Menyimpan..."
|
||||
) : (
|
||||
<>
|
||||
<Save size={18} />
|
||||
Simpan Jadwal
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{/* Pilih Ruangan */}
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-gray-700 mb-2">Pilih Ruangan</label>
|
||||
<div className="relative">
|
||||
<MapPin className="absolute left-3 top-3 text-gray-400 h-5 w-5" />
|
||||
<select
|
||||
required
|
||||
className="pl-10 w-full border border-gray-300 rounded-lg p-3 text-sm font-medium focus:ring-2 focus:ring-blue-500 outline-none bg-white appearance-none"
|
||||
value={selectedRoomId}
|
||||
onChange={(e) => setSelectedRoomId(e.target.value)}
|
||||
>
|
||||
<option value="" disabled>-- Pilih Ruangan yang Tersedia --</option>
|
||||
{rooms.map(room => (
|
||||
<option key={room.room_id} value={room.room_id}>
|
||||
{room.name} (Kapasitas: {room.capacity} | {room.floor})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Waktu Mulai & Selesai (Grid 2 Kolom) */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-gray-700 mb-2">Waktu Mulai</label>
|
||||
<div className="relative">
|
||||
<Clock className="absolute left-3 top-3 text-gray-400 h-5 w-5" />
|
||||
<input type="datetime-local" required
|
||||
className="pl-10 w-full border border-gray-300 rounded-lg p-3 text-sm focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
value={startTime} onChange={(e) => setStartTime(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-gray-700 mb-2">Waktu Selesai</label>
|
||||
<div className="relative">
|
||||
<Clock className="absolute left-3 top-3 text-gray-400 h-5 w-5" />
|
||||
<input type="datetime-local" required
|
||||
className="pl-10 w-full border border-gray-300 rounded-lg p-3 text-sm focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
value={endTime} onChange={(e) => setEndTime(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Keperluan */}
|
||||
<div>
|
||||
<label className="block text-sm font-semibold text-gray-700 mb-2">Keperluan Kegiatan</label>
|
||||
<div className="relative">
|
||||
<FileText className="absolute left-3 top-3 text-gray-400 h-5 w-5" />
|
||||
<textarea required rows={4} placeholder="Jelaskan keperluan peminjaman ruangan ini..."
|
||||
className="pl-10 w-full border border-gray-300 rounded-lg p-3 text-sm focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
value={purpose} onChange={(e) => setPurpose(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" disabled={submitLoading}
|
||||
className={`w-full flex items-center justify-center gap-2 py-3.5 rounded-lg text-white font-bold transition-all shadow-sm
|
||||
${submitLoading ? 'bg-blue-400 cursor-not-allowed' : 'bg-blue-600 hover:bg-blue-700'}`}
|
||||
>
|
||||
{submitLoading ? 'Memproses...' : <><CheckCircle2 size={20} /> Ajukan Booking Sekarang</>}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user