feat: Add CRUD functionality for books, categories, and loans
- 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.
This commit is contained in:
154
resources/js/Pages/Anggota/Edit.jsx
Normal file
154
resources/js/Pages/Anggota/Edit.jsx
Normal file
@@ -0,0 +1,154 @@
|
||||
import MainLayout from "@/Layouts/MainLayout";
|
||||
import { Head, useForm, Link } from "@inertiajs/react";
|
||||
|
||||
export default function AnggotaEdit({ anggota }) {
|
||||
const { data, setData, put, processing, errors } = useForm({
|
||||
nama: anggota.nama,
|
||||
email: anggota.email,
|
||||
no_telepon: anggota.no_telepon ?? "",
|
||||
alamat: anggota.alamat ?? "",
|
||||
tanggal_bergabung: anggota.tanggal_bergabung,
|
||||
status: anggota.status,
|
||||
});
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
put(`/anggota/${anggota.id}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<MainLayout>
|
||||
<Head title="Edit Anggota" />
|
||||
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<div className="flex items-center gap-2 mb-6">
|
||||
<Link
|
||||
href="/anggota"
|
||||
className="text-indigo-600 hover:underline"
|
||||
>
|
||||
← Kembali
|
||||
</Link>
|
||||
<span className="text-gray-400">/</span>
|
||||
<span className="text-gray-600">Edit Anggota</span>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-xl shadow p-6">
|
||||
<h1 className="text-xl font-bold text-gray-800 mb-6">
|
||||
✏️ Edit Anggota
|
||||
</h1>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<FormField label="Nama Lengkap" error={errors.nama}>
|
||||
<input
|
||||
type="text"
|
||||
value={data.nama}
|
||||
onChange={(e) =>
|
||||
setData("nama", 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="Email" error={errors.email}>
|
||||
<input
|
||||
type="email"
|
||||
value={data.email}
|
||||
onChange={(e) =>
|
||||
setData("email", 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 className="grid grid-cols-2 gap-4">
|
||||
<FormField
|
||||
label="No Telepon"
|
||||
error={errors.no_telepon}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
value={data.no_telepon}
|
||||
onChange={(e) =>
|
||||
setData("no_telepon", 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="Tanggal Bergabung"
|
||||
error={errors.tanggal_bergabung}
|
||||
>
|
||||
<input
|
||||
type="date"
|
||||
value={data.tanggal_bergabung}
|
||||
onChange={(e) =>
|
||||
setData(
|
||||
"tanggal_bergabung",
|
||||
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="Alamat" error={errors.alamat}>
|
||||
<textarea
|
||||
value={data.alamat}
|
||||
onChange={(e) =>
|
||||
setData("alamat", 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}
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Status" error={errors.status}>
|
||||
<select
|
||||
value={data.status}
|
||||
onChange={(e) =>
|
||||
setData("status", 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="aktif">Aktif</option>
|
||||
<option value="nonaktif">Non Aktif</option>
|
||||
</select>
|
||||
</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..."
|
||||
: "💾 Update Anggota"}
|
||||
</button>
|
||||
<Link
|
||||
href="/anggota"
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user