77 lines
3.4 KiB
JavaScript
77 lines
3.4 KiB
JavaScript
// web/js/components/FoundOptionModal.js
|
||
const FoundOptionModal = ({ isOpen, onClose, onSelectOption }) => {
|
||
if (!isOpen) return null;
|
||
|
||
return (
|
||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-80 backdrop-blur-sm p-4">
|
||
<div className="bg-slate-900 rounded-2xl border border-slate-700 shadow-2xl max-w-lg w-full overflow-hidden animate-fade-in-up">
|
||
{/* Header Modal */}
|
||
<div className="p-6 border-b border-slate-800">
|
||
<h3 className="text-xl font-bold text-white text-center">
|
||
🧐 Bagaimana proses pengembaliannya?
|
||
</h3>
|
||
<p className="text-slate-400 text-center text-sm mt-2">
|
||
Pilih metode yang Anda inginkan untuk memproses barang temuan ini.
|
||
</p>
|
||
</div>
|
||
|
||
{/* Pilihan Opsi */}
|
||
<div className="p-6 space-y-4">
|
||
{/* OPSI 1: Langsung ke Pemilik (Direct) */}
|
||
<button
|
||
onClick={() => onSelectOption("direct")}
|
||
className="w-full group relative flex items-center p-4 bg-gradient-to-r from-blue-900/40 to-slate-900 border-2 border-blue-500/30 hover:border-blue-500 rounded-xl transition-all hover:shadow-lg hover:shadow-blue-500/20 text-left"
|
||
>
|
||
<div className="bg-blue-500/20 p-3 rounded-full mr-4 group-hover:bg-blue-500 group-hover:text-white transition-colors text-blue-400">
|
||
⚡
|
||
</div>
|
||
<div>
|
||
<h4 className="font-bold text-white group-hover:text-blue-400 transition">
|
||
Langsung ke Pemilik (Cepat)
|
||
</h4>
|
||
<p className="text-xs text-slate-400 mt-1">
|
||
Anda mengisi form, notifikasi langsung ke pemilik untuk
|
||
<span className="text-green-400 font-bold ml-1">
|
||
Approve/Reject.
|
||
</span>
|
||
</p>
|
||
<span className="text-[10px] text-blue-300 font-mono mt-1 block">
|
||
*Tanpa perantara Manager
|
||
</span>
|
||
</div>
|
||
</button>
|
||
|
||
{/* OPSI 2: Via Manager (Standard) */}
|
||
<button
|
||
onClick={() => onSelectOption("manager")}
|
||
className="w-full group relative flex items-center p-4 bg-gradient-to-r from-purple-900/40 to-slate-900 border-2 border-purple-500/30 hover:border-purple-500 rounded-xl transition-all hover:shadow-lg hover:shadow-purple-500/20 text-left"
|
||
>
|
||
<div className="bg-purple-500/20 p-3 rounded-full mr-4 group-hover:bg-purple-500 group-hover:text-white transition-colors text-purple-400">
|
||
🛡️
|
||
</div>
|
||
<div>
|
||
<h4 className="font-bold text-white group-hover:text-purple-400 transition">
|
||
Verifikasi Manager (Aman)
|
||
</h4>
|
||
<p className="text-xs text-slate-400 mt-1">
|
||
Laporan diperiksa Manager/Posko dulu sebelum diteruskan ke
|
||
pemilik.
|
||
</p>
|
||
</div>
|
||
</button>
|
||
</div>
|
||
|
||
{/* Footer / Tombol Batal */}
|
||
<div className="p-4 bg-slate-950/50 border-t border-slate-800 text-center">
|
||
<button
|
||
onClick={onClose}
|
||
className="text-slate-500 hover:text-white text-sm font-medium transition px-4 py-2 hover:bg-slate-800 rounded-lg"
|
||
>
|
||
Batal
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|