// assets/js/pages/user/UserModals.js // ✅ [BARU] Modal untuk memilih Laporan Hilang yang cocok const SelectLostItemModal = ({ isOpen, onClose, lostItems, onSelect, onManual, }) => (

Kami menemukan laporan Barang Hilang Anda dengan kategori yang sama. Pilih salah satu untuk mengisi form klaim secara otomatis.

{lostItems.map((item) => (
onSelect(item)} className="bg-slate-800 border border-slate-600 hover:border-blue-500 hover:bg-slate-700/50 p-4 rounded-xl cursor-pointer transition group" >

{item.name}

📅 {Helpers.formatDate(item.date_lost)} • 📍{" "} {item.location || "?"}

👉

"{item.description}"

))}
); const DetailModalUser = ({ isOpen, onClose, item, user, onClaim }) => ( {item && (
{item.name}

{item.name}

Kategori: {item.category || Helpers.getCategoryName(item.category_id)}
Lokasi: {item.location}
Tanggal: {Helpers.formatDate(item.date_found)}
Status: {item.status}
{item.status === "unclaimed" && item.reporter_id !== user?.id && ( )} {item.reporter_id === user?.id && (
✓ Ini adalah barang yang Anda laporkan

Anda tidak dapat mengklaim barang yang Anda sendiri temukan

)}
)}
); const ClaimModalUser = ({ isOpen, onClose, onSubmit, loading, initialData, categories, // Pastikan prop ini diterima }) => { const [formData, setFormData] = React.useState({ description: "", contact: "", }); React.useEffect(() => { if (isOpen) { if (initialData) { setFormData({ description: initialData.description || "", contact: initialData.contact || "", }); } else { setFormData({ description: "", contact: "" }); } } }, [isOpen, initialData]); const handleChange = (e) => { const { name, value } = e.target; setFormData((prev) => ({ ...prev, [name]: value })); }; if (!isOpen) return null; return (
{initialData && (

✅ Data terisi otomatis dari laporan hilang Anda. Silakan lengkapi bukti.

)} {/* Deskripsi */}