Basdat/web/js/pages/admin/modals/EditClaimModal.js
2025-12-20 00:01:08 +07:00

85 lines
2.9 KiB
JavaScript

// assets/js/pages/admin/modals/EditClaimModal.js
const EditClaimModal = ({ state, handlers }) => {
const {
showEditClaimModal,
setShowEditClaimModal,
selectedClaimToEdit,
loading,
} = state;
const { handleUpdateClaim } = handlers;
return (
<Modal
isOpen={showEditClaimModal}
onClose={() => setShowEditClaimModal(false)}
title="✏️ Edit Klaim"
size="large"
>
{selectedClaimToEdit && (
<form onSubmit={handleUpdateClaim} className="space-y-4">
<div className="bg-blue-500/10 border border-blue-500/30 p-4 rounded-lg mb-4">
<div className="grid grid-cols-2 gap-2 text-sm text-slate-300">
<div>
<strong className="text-blue-400">Barang:</strong>{" "}
{selectedClaimToEdit.item_name}
</div>
<div>
<strong className="text-blue-400">Pengklaim:</strong>{" "}
{selectedClaimToEdit.user_name}
</div>
</div>
</div>
<div>
<label className="block font-semibold mb-2 text-slate-300">
Deskripsi Klaim *
</label>
<textarea
name="description"
defaultValue={selectedClaimToEdit.description}
required
rows="4"
className="w-full px-4 py-3 bg-slate-700 border-2 border-slate-600 rounded-xl text-white focus:border-blue-500 focus:outline-none"
/>
</div>
<div>
<label className="block font-semibold mb-2 text-slate-300">
No. Kontak *
</label>
<input
type="text"
name="contact"
defaultValue={selectedClaimToEdit.contact}
required
className="w-full px-4 py-3 bg-slate-700 border-2 border-slate-600 rounded-xl text-white focus:border-blue-500 focus:outline-none"
/>
</div>
<div>
<label className="block font-semibold mb-2 text-slate-300">
Alasan Edit *
</label>
<textarea
name="reason"
required
rows="2"
className="w-full px-4 py-3 bg-slate-700 border-2 border-slate-600 rounded-xl text-white placeholder-slate-400 focus:border-blue-500 focus:outline-none"
placeholder="Jelaskan alasan edit klaim..."
/>
</div>
<button
type="submit"
disabled={loading}
className="w-full px-4 py-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-xl hover:from-blue-700 hover:to-blue-800 transition font-semibold shadow-lg disabled:from-slate-600 disabled:to-slate-700"
>
{loading ? "⏳ Menyimpan..." : "✅ Update Klaim"}
</button>
</form>
)}
</Modal>
);
};