123 lines
4.3 KiB
JavaScript
123 lines
4.3 KiB
JavaScript
// assets/js/pages/admin/modals/CreateClaimModal.js
|
||
|
||
const CreateClaimModal = ({ state, handlers }) => {
|
||
const {
|
||
showCreateClaimModal,
|
||
setShowCreateClaimModal,
|
||
items,
|
||
users,
|
||
loading,
|
||
} = state;
|
||
const { handleCreateClaim } = handlers;
|
||
|
||
return (
|
||
<Modal
|
||
isOpen={showCreateClaimModal}
|
||
onClose={() => setShowCreateClaimModal(false)}
|
||
title="➕ Tambah Klaim Manual"
|
||
size="large"
|
||
>
|
||
<form onSubmit={handleCreateClaim} className="space-y-4">
|
||
<div className="bg-blue-500/10 border border-blue-500/30 p-4 rounded-lg mb-4">
|
||
<p className="text-sm text-blue-300">
|
||
ℹ️ Fitur ini untuk menambahkan klaim manual oleh admin, misalnya
|
||
jika user melaporkan secara offline.
|
||
</p>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block font-semibold mb-2 text-slate-300">
|
||
Pilih Barang *
|
||
</label>
|
||
<select
|
||
name="item_id"
|
||
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"
|
||
>
|
||
<option value="">-- Pilih Barang --</option>
|
||
{items
|
||
.filter(
|
||
(item) =>
|
||
item.status === "unclaimed" || item.status === "pending_claim"
|
||
)
|
||
.map((item) => (
|
||
<option key={item.id} value={item.id}>
|
||
{item.name} - {item.location} (
|
||
{Helpers.formatDate(item.date_found)})
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block font-semibold mb-2 text-slate-300">
|
||
Pilih User Pengklaim *
|
||
</label>
|
||
<select
|
||
name="user_id"
|
||
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"
|
||
>
|
||
<option value="">-- Pilih User --</option>
|
||
{users &&
|
||
users.map((user) => (
|
||
<option key={user.id} value={user.id}>
|
||
{user.name} ({user.email})
|
||
</option>
|
||
))}
|
||
</select>
|
||
<p className="text-xs text-slate-400 mt-1">
|
||
User yang akan menjadi pengklaim barang ini
|
||
</p>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block font-semibold mb-2 text-slate-300">
|
||
Deskripsi Klaim *
|
||
</label>
|
||
<textarea
|
||
name="description"
|
||
required
|
||
rows="4"
|
||
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 ciri-ciri yang diklaim oleh user..."
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block font-semibold mb-2 text-slate-300">
|
||
No. Kontak *
|
||
</label>
|
||
<input
|
||
type="text"
|
||
name="contact"
|
||
required
|
||
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="08123456789"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block font-semibold mb-2 text-slate-300">
|
||
Catatan Admin (Opsional)
|
||
</label>
|
||
<textarea
|
||
name="admin_notes"
|
||
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="Catatan internal untuk admin..."
|
||
/>
|
||
</div>
|
||
|
||
<button
|
||
type="submit"
|
||
disabled={loading}
|
||
className="w-full px-4 py-3 bg-gradient-to-r from-green-600 to-green-700 text-white rounded-xl hover:from-green-700 hover:to-green-800 transition font-semibold shadow-lg disabled:from-slate-600 disabled:to-slate-700"
|
||
>
|
||
{loading ? "⏳ Menyimpan..." : "✅ Simpan Klaim"}
|
||
</button>
|
||
</form>
|
||
</Modal>
|
||
);
|
||
};
|