rahmatrafli1
5f00a0dbf1
- Implemented Create, Edit, and Index pages for Buku (Books) with form handling and validation. - Added Create, Edit, and Index pages for Kategori (Categories) with form handling and validation. - Developed Create and Index pages for Peminjaman (Loans) with form handling and validation. - Integrated status management and action buttons for loan records. - Enhanced UI with responsive design and user-friendly navigation.
157 lines
6.8 KiB
JavaScript
157 lines
6.8 KiB
JavaScript
import MainLayout from "@/Layouts/MainLayout";
|
|
import { Head, useForm, Link } from "@inertiajs/react";
|
|
|
|
export default function PeminjamanCreate({ anggotas, bukus }) {
|
|
const { data, setData, post, processing, errors } = useForm({
|
|
anggota_id: "",
|
|
buku_id: "",
|
|
tanggal_pinjam: "",
|
|
tanggal_kembali_rencana: "",
|
|
catatan: "",
|
|
});
|
|
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault();
|
|
post("/peminjaman");
|
|
};
|
|
|
|
return (
|
|
<MainLayout>
|
|
<Head title="Tambah Peminjaman" />
|
|
|
|
<div className="max-w-2xl mx-auto">
|
|
<div className="flex items-center gap-2 mb-6">
|
|
<Link
|
|
href="/peminjaman"
|
|
className="text-indigo-600 hover:underline"
|
|
>
|
|
← Kembali
|
|
</Link>
|
|
<span className="text-gray-400">/</span>
|
|
<span className="text-gray-600">Tambah Peminjaman</span>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-xl shadow p-6">
|
|
<h1 className="text-xl font-bold text-gray-800 mb-6">
|
|
📋 Tambah Peminjaman Baru
|
|
</h1>
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<FormField label="Anggota" error={errors.anggota_id}>
|
|
<select
|
|
value={data.anggota_id}
|
|
onChange={(e) =>
|
|
setData("anggota_id", e.target.value)
|
|
}
|
|
className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
|
|
>
|
|
<option value="">-- Pilih Anggota --</option>
|
|
{anggotas.map((a) => (
|
|
<option key={a.id} value={a.id}>
|
|
{a.nama}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</FormField>
|
|
|
|
<FormField label="Buku" error={errors.buku_id}>
|
|
<select
|
|
value={data.buku_id}
|
|
onChange={(e) =>
|
|
setData("buku_id", e.target.value)
|
|
}
|
|
className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
|
|
>
|
|
<option value="">-- Pilih Buku --</option>
|
|
{bukus.map((b) => (
|
|
<option key={b.id} value={b.id}>
|
|
{b.judul} (Stok: {b.stok_tersedia})
|
|
</option>
|
|
))}
|
|
</select>
|
|
</FormField>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<FormField
|
|
label="Tanggal Pinjam"
|
|
error={errors.tanggal_pinjam}
|
|
>
|
|
<input
|
|
type="date"
|
|
value={data.tanggal_pinjam}
|
|
onChange={(e) =>
|
|
setData(
|
|
"tanggal_pinjam",
|
|
e.target.value,
|
|
)
|
|
}
|
|
className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
|
|
/>
|
|
</FormField>
|
|
|
|
<FormField
|
|
label="Rencana Kembali"
|
|
error={errors.tanggal_kembali_rencana}
|
|
>
|
|
<input
|
|
type="date"
|
|
value={data.tanggal_kembali_rencana}
|
|
onChange={(e) =>
|
|
setData(
|
|
"tanggal_kembali_rencana",
|
|
e.target.value,
|
|
)
|
|
}
|
|
className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
|
|
/>
|
|
</FormField>
|
|
</div>
|
|
|
|
<FormField label="Catatan" error={errors.catatan}>
|
|
<textarea
|
|
value={data.catatan}
|
|
onChange={(e) =>
|
|
setData("catatan", e.target.value)
|
|
}
|
|
className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-400 focus:outline-none"
|
|
rows={3}
|
|
placeholder="Catatan tambahan (opsional)"
|
|
/>
|
|
</FormField>
|
|
|
|
<div className="flex gap-3 pt-4">
|
|
<button
|
|
type="submit"
|
|
disabled={processing}
|
|
className="bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700 disabled:opacity-50 transition-colors"
|
|
>
|
|
{processing
|
|
? "Menyimpan..."
|
|
: "💾 Simpan Peminjaman"}
|
|
</button>
|
|
<Link
|
|
href="/peminjaman"
|
|
className="bg-gray-200 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-300 transition-colors"
|
|
>
|
|
Batal
|
|
</Link>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</MainLayout>
|
|
);
|
|
}
|
|
|
|
function FormField({ label, error, children }) {
|
|
return (
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
{label}
|
|
</label>
|
|
{children}
|
|
{error && <p className="text-red-500 text-xs mt-1">{error}</p>}
|
|
</div>
|
|
);
|
|
}
|