132 lines
5.1 KiB
JavaScript
132 lines
5.1 KiB
JavaScript
const PublicLostItemsTab = ({ state, handlers }) => {
|
|
const { publicLostItems, user } = state;
|
|
|
|
const getStatusDisplay = (lostItem) => {
|
|
const statusMap = {
|
|
active: { label: "Aktif", color: "bg-green-600 text-white" },
|
|
claimed: { label: "Sedang Diklaim", color: "bg-yellow-600 text-white" },
|
|
resolved: { label: "Selesai", color: "bg-blue-600 text-white" },
|
|
};
|
|
return (
|
|
statusMap[lostItem.status] || {
|
|
label: lostItem.status,
|
|
color: "bg-gray-600 text-white",
|
|
}
|
|
);
|
|
};
|
|
|
|
const shouldShowFoundButton = (lostItem) => {
|
|
return lostItem.user_id !== user.id && lostItem.status === "active";
|
|
};
|
|
|
|
const shouldShowClaimedInfo = (lostItem) => {
|
|
return lostItem.status === "claimed" || lostItem.status === "resolved";
|
|
};
|
|
|
|
return (
|
|
<div className="bg-slate-800 rounded-xl p-6 border border-slate-700">
|
|
<h3 className="text-2xl font-bold text-white mb-4">
|
|
😢 Barang Hilang (Dari Pengguna Lain)
|
|
</h3>
|
|
<p className="text-slate-400 mb-6">
|
|
Jika Anda menemukan barang yang cocok, klik "Saya Menemukan!" untuk
|
|
memberitahu pemiliknya
|
|
</p>
|
|
|
|
{publicLostItems.length === 0 ? (
|
|
<div className="text-center py-12 text-slate-400">
|
|
<p className="text-6xl mb-4">🔭</p>
|
|
<p className="text-xl">Tidak ada barang hilang saat ini</p>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{publicLostItems.map((lostItem) => {
|
|
const statusDisplay = getStatusDisplay(lostItem);
|
|
const showFoundButton = shouldShowFoundButton(lostItem);
|
|
const showClaimedInfo = shouldShowClaimedInfo(lostItem);
|
|
|
|
return (
|
|
<div
|
|
key={lostItem.id}
|
|
className={`bg-slate-900/50 rounded-lg p-5 border transition ${
|
|
lostItem.status === "resolved"
|
|
? "border-blue-500/50 opacity-75"
|
|
: "border-slate-700 hover:border-blue-500"
|
|
}`}
|
|
>
|
|
<div className="flex justify-between items-start mb-3">
|
|
<div>
|
|
<h4 className="font-bold text-white text-lg">
|
|
{lostItem.name}
|
|
</h4>
|
|
<p className="text-sm text-slate-400">
|
|
{lostItem.category}
|
|
</p>
|
|
</div>
|
|
<span
|
|
className={`text-xs px-2 py-1 rounded-full ${statusDisplay.color}`}
|
|
>
|
|
{statusDisplay.label}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="space-y-2 mb-4 text-sm text-slate-300">
|
|
<p>
|
|
<strong>📍 Lokasi:</strong>{" "}
|
|
{lostItem.location || "Tidak disebutkan"}
|
|
</p>
|
|
<p>
|
|
<strong>🎨 Warna:</strong>{" "}
|
|
{lostItem.color || "Tidak disebutkan"}
|
|
</p>
|
|
<p>
|
|
<strong>📅 Tanggal Hilang:</strong>{" "}
|
|
{new Date(lostItem.date_lost).toLocaleDateString("id-ID")}
|
|
</p>
|
|
<p>
|
|
<strong>📝 Deskripsi:</strong> {lostItem.description}
|
|
</p>
|
|
</div>
|
|
|
|
{/* PERBAIKAN: Ubah dari handleOpenDirectClaimModal ke handleOpenFoundOption */}
|
|
{showFoundButton && (
|
|
<button
|
|
onClick={() => handlers.handleOpenFoundOption(lostItem)}
|
|
className="w-full bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 text-white px-4 py-3 rounded-lg font-semibold transition shadow-lg"
|
|
>
|
|
🎉 Saya Menemukan Barang Ini!
|
|
</button>
|
|
)}
|
|
|
|
{lostItem.status === "claimed" && (
|
|
<div className="bg-yellow-900/30 border border-yellow-700/50 rounded-lg p-3 text-center">
|
|
<p className="text-yellow-400 text-sm">
|
|
⏳ Sedang menunggu konfirmasi pemilik
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{lostItem.status === "resolved" && (
|
|
<div className="bg-blue-900/30 border border-blue-700/50 rounded-lg p-3 text-center">
|
|
<p className="text-blue-400 text-sm font-semibold">
|
|
✅ Barang sudah dikembalikan ke pemilik
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{lostItem.user_id === user.id && (
|
|
<div className="bg-purple-900/30 border border-purple-700/50 rounded-lg p-3 text-center">
|
|
<p className="text-purple-400 text-sm">
|
|
📋 Ini laporan kehilangan Anda
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|