109 lines
4.0 KiB
JavaScript
109 lines
4.0 KiB
JavaScript
// assets/js/pages/manager/ManagerTabs.js - FIXED
|
||
|
||
const ItemsTabManager = ({ state, handlers }) => {
|
||
const { showExpired, setShowExpired, items, expiredItems, stats } = state;
|
||
const {
|
||
handleViewDetail,
|
||
handleManualClaimClick,
|
||
handleEditItemClick,
|
||
handleDeleteItem,
|
||
} = handlers;
|
||
|
||
return (
|
||
<div className="bg-gradient-to-br from-slate-800 to-slate-900 rounded-xl p-6 shadow-xl border border-slate-700">
|
||
<div className="flex justify-between items-center mb-6">
|
||
<h2 className="text-xl font-semibold text-white">
|
||
{showExpired ? "📦 Barang Expired" : "📦 Daftar Barang Ditemukan"}
|
||
</h2>
|
||
|
||
<div className="flex gap-3">
|
||
{/* ✅ TOMBOL BARU */}
|
||
<button
|
||
onClick={() => state.setShowReportFoundModal(true)}
|
||
className="px-4 py-2 bg-gradient-to-r from-green-600 to-green-700 text-white rounded-lg font-semibold hover:from-green-700 hover:to-green-800 transition shadow-lg"
|
||
>
|
||
📝 Lapor Barang Ditemukan (Offline)
|
||
</button>
|
||
|
||
<button
|
||
onClick={() => setShowExpired(false)}
|
||
className={`px-4 py-2 rounded-lg font-semibold transition ${
|
||
!showExpired
|
||
? "bg-gradient-to-r from-blue-600 to-blue-700 text-white shadow-lg"
|
||
: "bg-slate-700 text-slate-300 hover:bg-slate-600"
|
||
}`}
|
||
>
|
||
📦 Aktif ({items.length})
|
||
</button>
|
||
|
||
<button
|
||
onClick={() => setShowExpired(true)}
|
||
className={`px-4 py-2 rounded-lg font-semibold transition ${
|
||
showExpired
|
||
? "bg-gradient-to-r from-red-600 to-red-700 text-white shadow-lg"
|
||
: "bg-slate-700 text-slate-300 hover:bg-slate-600"
|
||
}`}
|
||
>
|
||
⚠️ Expired ({stats.expired})
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
{(showExpired ? expiredItems : items).map((item) => (
|
||
<ItemCard
|
||
key={item.id}
|
||
item={item}
|
||
onViewDetail={handleViewDetail}
|
||
onManualClaim={handleManualClaimClick}
|
||
// ✅ TAMBAHKAN 3 PROPS INI:
|
||
isManager={true} // Agar logika di ItemCard jalan
|
||
onEdit={handleEditItemClick} // Fungsi ketika tombol diklik
|
||
onDelete={handleDeleteItem} // (Opsional) Jika manager boleh hapus
|
||
showActions={true}
|
||
/>
|
||
))}
|
||
</div>
|
||
|
||
{(showExpired ? expiredItems : items).length === 0 && (
|
||
<div className="text-center py-12 text-slate-400">
|
||
<div className="text-6xl mb-4">{showExpired ? "⚠️" : "📦"}</div>
|
||
<p>{showExpired ? "Belum ada barang expired" : "Belum ada barang"}</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const ClaimsTabManager = ({ state, handlers }) => {
|
||
const { claims } = state;
|
||
const { handleVerifyClaim, handleReopenCase, handleCancelApproval } =
|
||
handlers;
|
||
|
||
return (
|
||
<div className="bg-gradient-to-br from-slate-800 to-slate-900 rounded-xl p-6 shadow-xl border border-slate-700">
|
||
<h2 className="text-xl font-semibold mb-6 text-white">Daftar Klaim</h2>
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||
{claims.map((claim) => (
|
||
<ClaimCard
|
||
key={claim.id}
|
||
claim={claim}
|
||
onVerify={handleVerifyClaim} // Ini mentrigger modal verify/close
|
||
onReopen={handleReopenCase}
|
||
onCancelApproval={handleCancelApproval} // ✅ Pass props baru
|
||
/>
|
||
))}
|
||
</div>
|
||
{claims.length === 0 && (
|
||
<div className="text-center py-12 text-slate-400">
|
||
<div className="text-6xl mb-4">🤝</div>
|
||
<p>Belum ada klaim</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
window.ItemsTabManager = ItemsTabManager;
|
||
window.ClaimsTabManager = ClaimsTabManager;
|