import React, {useEffect,useState} from 'react';
import {createRoot} from 'react-dom/client';
import {supabase} from './supabase';
import {Activity,Archive,ArrowRight,CheckCircle2,ClipboardList,FileCheck,Home,LogOut,PackageCheck,ShieldCheck,Users,Building2,LockKeyhole,RefreshCw,AlertCircle,Plus,Save,Trash2,Eye,Search,Boxes,Tag} from 'lucide-react';
import './style.css';
const roleNames={SYSTEM_ADMIN:'System Admin',BOHC_LOGISTICS:'Logistik BOHC',BOHC_FINANCE:'Finance BOHC',BOHC_MANAGER:'Manager Operasional BOHC',BOHC_RECEIVER:'Penerima BOHC',ARTHA_OPERATIONS:'Operasional Artha',ARTHA_FINANCE:'Finance Artha'};
function PurchaseOrderPage({profile,session}){
 const [rows,setRows]=useState([]),[loading,setLoading]=useState(true),[saving,setSaving]=useState(false),[error,setError]=useState(''),[message,setMessage]=useState(''),[search,setSearch]=useState('');
 const [selectedPO,setSelectedPO]=useState(null),[selectedItems,setSelectedItems]=useState([]),[detailLoading,setDetailLoading]=useState(false),[detailError,setDetailError]=useState('');
 const [form,setForm]=useState({requesting_department:'',requester_name:profile?.display_name||'',requested_at:new Date().toISOString().slice(0,10)});
 const [items,setItems]=useState([{item_code:'',item_name:'',specification:'',unit:'',quantity:1,selling_price:''}]);
 const canCreate=profile?.role_code==='BOHC_LOGISTICS'||profile?.role_code==='SYSTEM_ADMIN';
 async function load(){setLoading(true);setError('');const {data,error}=await supabase.from('purchase_orders').select('id,po_number,company,requesting_department,requester_name,requested_at,status,finance_decision,manager_decision,created_at').order('created_at',{ascending:false});if(error)setError(error.message);else setRows(data||[]);setLoading(false)}
 async function submitPO(row){const {error}=await supabase.from('purchase_orders').update({status:'PENDING_FINANCE',finance_decision:'PENDING',manager_decision:'PENDING'}).eq('id',row.id).eq('status','DRAFT');if(error)setError('PO gagal diajukan: '+error.message);else{setMessage('PO berhasil diajukan ke Finance.');await load()}}
 async function openDetail(row){
  setSelectedPO(row);setSelectedItems([]);setDetailError('');setDetailLoading(true);
  const {data,error}=await supabase.from('po_items').select('id,item_code,item_name,specification,unit,quantity,selling_price').eq('po_id',row.id);
  if(error)setDetailError('Rincian barang tidak dapat dimuat: '+error.message);
  else setSelectedItems(data||[]);
  setDetailLoading(false);
 }
 useEffect(()=>{load()},[]);
 function updateItem(i,k,v){setItems(prev=>prev.map((x,n)=>n===i?{...x,[k]:v}:x))}
 async function createPO(e){e.preventDefault();setSaving(true);setError('');setMessage('');
  const poNumber=`PO-BOHC-${new Date().getFullYear()}${String(Date.now()).slice(-6)}`;
  const payload={po_number:poNumber,company:'BOHC',requesting_department:form.requesting_department.trim(),requester_name:form.requester_name.trim(),requested_at:form.requested_at,status:'DRAFT',finance_decision:'PENDING',manager_decision:'PENDING',created_by:session.user.id};
  const {data:po,error:poError}=await supabase.from('purchase_orders').insert(payload).select('id').single();
  if(poError){setError('PO gagal disimpan: '+poError.message);setSaving(false);return}
  const itemPayload=items.filter(x=>x.item_name.trim()).map(x=>({po_id:po.id,item_code:x.item_code.trim()||null,item_name:x.item_name.trim(),specification:x.specification.trim()||null,unit:x.unit.trim(),quantity:Number(x.quantity),selling_price:x.selling_price===''?null:Number(x.selling_price)}));
  if(!itemPayload.length){setError('PO tersimpan, tetapi belum ada item. Tambahkan item pada PO terlebih dahulu.');setSaving(false);await load();return}
  const {error:itemError}=await supabase.from('po_items').insert(itemPayload);
  if(itemError){setError('Header PO tersimpan ('+poNumber+'), tetapi item gagal: '+itemError.message);setSaving(false);await load();return}
  setMessage(`PO ${poNumber} berhasil dibuat.`);setForm({requesting_department:'',requester_name:profile?.display_name||'',requested_at:new Date().toISOString().slice(0,10)});setItems([{item_code:'',item_name:'',specification:'',unit:'',quantity:1,selling_price:''}]);await load();setSaving(false)
 }
 const filtered=rows.filter(r=>(r.po_number||'').toLowerCase().includes(search.toLowerCase())||(r.requesting_department||'').toLowerCase().includes(search.toLowerCase()));
 return <div className="po-module"><div className="panel po-list-panel"><div className="panel-head"><div><h3>Daftar Purchase Order</h3><p>PO BOHC yang tercatat di sistem</p></div><button className="po-refresh" onClick={load}><RefreshCw size={15}/> Refresh</button></div><div className="po-search"><Search size={16}/><input value={search} onChange={e=>setSearch(e.target.value)} placeholder="Cari nomor PO atau departemen…"/></div>{loading?<p className="po-muted">Memuat data…</p>:filtered.length===0?<p className="po-muted">Belum ada PO atau data tidak ditemukan.</p>:<div className="po-table-wrap"><table className="po-table"><thead><tr><th>Nomor PO</th><th>Departemen</th><th>Pemohon</th><th>Tanggal</th><th>Status</th><th>Aksi</th></tr></thead><tbody>{filtered.map(r=><tr key={r.id}><td><button type="button" className="po-number-link" onClick={()=>openDetail(r)} title="Buka detail PO">{r.po_number}</button></td><td>{r.requesting_department}</td><td>{r.requester_name}</td><td>{r.requested_at}</td><td><span className="po-status">{r.status}</span></td><td>{r.status==='DRAFT'&&canCreate?<button type="button" className="po-refresh" onClick={()=>submitPO(r)}>Ajukan</button>:<span className="po-muted">—</span>}</td></tr>)}</tbody></table></div>}</div>
 {selectedPO&&<section className="panel po-detail" aria-label="Detail Purchase Order">
  <div className="po-detail-heading">
   <div><span className="po-kicker">RINGKASAN PENGADAAN</span><h3>Detail Purchase Order</h3><p>{selectedPO.po_number}</p></div>
   <div className="po-detail-actions"><span className="po-status">{selectedPO.status||'DRAFT'}</span><button type="button" className="po-refresh" onClick={()=>setSelectedPO(null)}>Tutup detail</button></div>
  </div>
  <div className="po-detail-grid">
   <div className="po-detail-field"><span>Perusahaan pemohon</span><strong>{selectedPO.company||'-'}</strong></div>
   <div className="po-detail-field"><span>Departemen</span><strong>{selectedPO.requesting_department||'-'}</strong></div>
   <div className="po-detail-field"><span>Nama pemohon</span><strong>{selectedPO.requester_name||'-'}</strong></div>
   <div className="po-detail-field"><span>Tanggal pengajuan</span><strong>{selectedPO.requested_at||'-'}</strong></div>
   <div className="po-detail-field"><span>Keputusan Finance</span><strong>{selectedPO.finance_decision||'PENDING'}</strong></div>
   <div className="po-detail-field"><span>Keputusan Manager</span><strong>{selectedPO.manager_decision||'PENDING'}</strong></div>
  </div>
  <div className="po-section-title"><div><h4>Rincian barang</h4><p>Item yang diajukan pada purchase order ini</p></div></div>
  {detailLoading?<p className="po-muted">Memuat rincian barang…</p>:detailError?<div className="error po-msg"><AlertCircle size={16}/>{detailError}</div>:selectedItems.length===0?<div className="po-empty-items"><PackageCheck size={22}/><div><b>Rincian barang belum tersedia</b><p>Data item belum ditemukan atau akun ini belum memiliki izin membaca rincian PO.</p></div></div>:
   <div className="po-table-wrap"><table className="po-table po-detail-table"><thead><tr><th>Nama barang</th><th>Kode</th><th>Spesifikasi</th><th>Satuan</th><th>Jumlah</th><th>Harga jual</th><th>Subtotal</th></tr></thead><tbody>
    {selectedItems.map((it,index)=><tr key={it.id||index}><td><strong>{it.item_name}</strong></td><td>{it.item_code||'-'}</td><td>{it.specification||'-'}</td><td>{it.unit}</td><td>{it.quantity}</td><td>{it.selling_price==null?'-':Number(it.selling_price).toLocaleString('id-ID',{style:'currency',currency:'IDR',maximumFractionDigits:0})}</td><td>{it.selling_price==null?'-':(Number(it.quantity)*Number(it.selling_price)).toLocaleString('id-ID',{style:'currency',currency:'IDR',maximumFractionDigits:0})}</td></tr>)}
   </tbody></table></div>}
  <div className="po-approval-strip">
   <div><span className="po-approval-step">01</span><section><b>Review Finance BOHC</b><small>{selectedPO.finance_decision||'PENDING'}</small></section></div>
   <div><span className="po-approval-step">02</span><section><b>Persetujuan Manager</b><small>{selectedPO.manager_decision||'PENDING'}</small></section></div>
   <div><span className="po-approval-step">03</span><section><b>Pemrosesan ARTHA</b><small>Menunggu persetujuan</small></section></div>
  </div>
  <p className="po-detail-note"><ShieldCheck size={15}/> Persetujuan hanya dapat dilakukan oleh akun Finance dan Manager sesuai role masing-masing. Admin sistem berfungsi untuk monitoring.</p>
 </section>}
 {canCreate?<form className="panel po-form" onSubmit={createPO}><div className="panel-head"><div><h3><Plus size={18}/> Buat Purchase Order</h3><p>Isi kebutuhan barang dan detail pengajuan</p></div><span className="badge">BOHC</span></div><div className="po-fields"><label>Departemen pemohon<input required value={form.requesting_department} onChange={e=>setForm({...form,requesting_department:e.target.value})} placeholder="Contoh: Operasional"/></label><label>Nama pemohon<input required value={form.requester_name} onChange={e=>setForm({...form,requester_name:e.target.value})}/></label><label>Tanggal pengajuan<input required type="date" value={form.requested_at} onChange={e=>setForm({...form,requested_at:e.target.value})}/></label></div><div className="po-items-head"><b>Rincian barang</b><button type="button" onClick={()=>setItems([...items,{item_code:'',item_name:'',specification:'',unit:'',quantity:1,selling_price:''}])}><Plus size={15}/> Tambah item</button></div>{items.map((it,i)=><div className="po-item-row" key={i}><label>Nama barang<input required value={it.item_name} onChange={e=>updateItem(i,'item_name',e.target.value)} placeholder="Nama barang / BHP"/></label><label>Kode<input value={it.item_code} onChange={e=>updateItem(i,'item_code',e.target.value)} placeholder="Opsional"/></label><label>Spesifikasi<input value={it.specification} onChange={e=>updateItem(i,'specification',e.target.value)} placeholder="Ukuran / detail"/></label><label>Satuan<input required value={it.unit} onChange={e=>updateItem(i,'unit',e.target.value)} placeholder="pcs, box, unit"/></label><label>Jumlah<input required type="number" min="0.01" step="0.01" value={it.quantity} onChange={e=>updateItem(i,'quantity',e.target.value)}/></label><label>Harga jual (opsional)<input type="number" min="0" value={it.selling_price} onChange={e=>updateItem(i,'selling_price',e.target.value)} placeholder="Kosongkan jika belum"/></label>{items.length>1&&<button className="po-remove" type="button" title="Hapus item" onClick={()=>setItems(items.filter((_,n)=>n!==i))}><Trash2 size={16}/></button>}</div>)}<div className="po-submit"><small>PO akan dibuat dengan status DRAFT dan menunggu proses approval.</small><button disabled={saving}><Save size={16}/>{saving?'Menyimpan…':'Simpan PO'}</button></div>{error&&<div className="error po-msg"><AlertCircle size={16}/>{error}</div>}{message&&<div className="success po-msg"><CheckCircle2 size={16}/>{message}</div>}</form>:<div className="notice-bar"><ShieldCheck size={16}/> Pembuatan PO hanya tersedia untuk role Logistik BOHC.</div>}
 </div>
}


function ApprovalCenter({profile,session}){
 const role=profile?.role_code, finance=role==='BOHC_FINANCE', manager=role==='BOHC_MANAGER', admin=role==='SYSTEM_ADMIN';
 const [rows,setRows]=useState([]),[loading,setLoading]=useState(true),[error,setError]=useState(''),[busy,setBusy]=useState(''),[note,setNote]=useState({}),[selected,setSelected]=useState(null),[items,setItems]=useState([]);
 async function load(){setLoading(true);setError('');let q=supabase.from('purchase_orders').select('id,po_number,company,requesting_department,requester_name,requested_at,status,finance_decision,finance_user,finance_at,finance_note,manager_decision,manager_user,manager_at,manager_note,created_at');if(finance)q=q.eq('status','PENDING_FINANCE');else if(manager)q=q.eq('status','PENDING_MANAGER');else if(!admin)q=q.in('status',['PENDING_FINANCE','PENDING_MANAGER','APPROVED','SENT_TO_ARTHA']);const {data,error}=await q.order('created_at',{ascending:false});if(error)setError(error.message);else setRows(data||[]);setLoading(false)}
 useEffect(()=>{load()},[role]);
 async function open(r){setSelected(r);const {data,error}=await supabase.from('po_items').select('id,item_name,specification,unit,quantity,selling_price').eq('po_id',r.id);if(error)setError(error.message);else setItems(data||[])}
 async function decide(r,d){const n=(note[r.id]||'').trim();if(d!=='APPROVED'&&!n){setError('Catatan wajib diisi untuk revisi atau penolakan.');return}setBusy(r.id);setError('');const at=new Date().toISOString();const patch=finance?{finance_decision:d,finance_user:session.user.id,finance_at:at,finance_note:n||null,status:d==='APPROVED'?'PENDING_MANAGER':d==='REJECTED'?'REJECTED':'DRAFT'}:{manager_decision:d,manager_user:session.user.id,manager_at:at,manager_note:n||null,status:d==='APPROVED'?'APPROVED':d==='REJECTED'?'REJECTED':'PENDING_FINANCE'};const {error}=await supabase.from('purchase_orders').update(patch).eq('id',r.id);if(error)setError('Gagal menyimpan keputusan: '+error.message);else{setSelected(null);await load()}setBusy('')}
 return <div className="po-module"><section className="panel po-list-panel"><div className="panel-head"><div><h3>{finance?'Antrean Approval Finance':manager?'Antrean Approval Manager':'Monitoring Approval'}</h3><p>{finance?'PO menunggu pemeriksaan Finance BOHC.':manager?'PO yang sudah disetujui Finance.':'Pantau status persetujuan tanpa mengambil keputusan.'}</p></div><button className="po-refresh" onClick={load}><RefreshCw size={15}/> Refresh</button></div>{error&&<div className="error po-msg"><AlertCircle size={16}/>{error}</div>}{loading?<p className="po-muted">Memuat…</p>:!rows.length?<p className="po-muted">Tidak ada PO dalam antrean.</p>:<div className="po-table-wrap"><table className="po-table"><thead><tr><th>Nomor PO</th><th>Departemen</th><th>Pemohon</th><th>Tanggal</th><th>Status</th><th></th></tr></thead><tbody>{rows.map(r=><tr key={r.id}><td><button className="po-number-link" onClick={()=>open(r)}>{r.po_number}</button></td><td>{r.requesting_department}</td><td>{r.requester_name}</td><td>{r.requested_at}</td><td><span className="po-status">{r.status}</span></td><td><button className="po-refresh" onClick={()=>open(r)}>{finance||manager?'Review':'Detail'}</button></td></tr>)}</tbody></table></div>}</section>
 {selected&&<section className="panel po-detail"><div className="po-detail-heading"><div><span className="po-kicker">LEMBAR PERSETUJUAN</span><h3>{selected.po_number}</h3><p>{selected.requesting_department} • {selected.requester_name}</p></div><button className="po-refresh" onClick={()=>setSelected(null)}>Tutup</button></div><div className="po-detail-grid"><div className="po-detail-field"><span>Status</span><strong>{selected.status}</strong></div><div className="po-detail-field"><span>Finance</span><strong>{selected.finance_decision||'PENDING'}</strong></div><div className="po-detail-field"><span>Manager</span><strong>{selected.manager_decision||'PENDING'}</strong></div></div><div className="po-section-title"><div><h4>Rincian barang</h4><p>Periksa item sebelum mengambil keputusan</p></div></div>{items.length?<div className="po-table-wrap"><table className="po-table"><thead><tr><th>Barang</th><th>Spesifikasi</th><th>Satuan</th><th>Jumlah</th><th>Harga</th></tr></thead><tbody>{items.map(i=><tr key={i.id}><td>{i.item_name}</td><td>{i.specification||'-'}</td><td>{i.unit}</td><td>{i.quantity}</td><td>{i.selling_price==null?'-':Number(i.selling_price).toLocaleString('id-ID')}</td></tr>)}</tbody></table></div>:<p className="po-muted">Rincian tidak ditemukan atau tidak memiliki izin baca.</p>}{(finance||manager)&&<div className="po-review-box"><label>Catatan keputusan<textarea value={note[selected.id]||''} onChange={e=>setNote({...note,[selected.id]:e.target.value})} placeholder="Wajib diisi untuk revisi atau penolakan."/></label><div className="po-review-actions"><button disabled={!!busy} onClick={()=>decide(selected,'REVISION')}>Minta revisi</button><button disabled={!!busy} onClick={()=>decide(selected,'REJECTED')}>Tolak</button><button disabled={!!busy} onClick={()=>decide(selected,'APPROVED')}>{busy?'Menyimpan…':'Setujui'}</button></div></div>}{admin&&<p className="po-detail-note"><ShieldCheck size={15}/> System Admin hanya dapat memantau, bukan menyetujui.</p>}</section>}</div>
}


function ArthaProcurementPage({profile,session}){
 const [rows,setRows]=useState([]),[loading,setLoading]=useState(true),[error,setError]=useState(''),[message,setMessage]=useState(''),[busy,setBusy]=useState(''),[search,setSearch]=useState(''),[selected,setSelected]=useState(null),[items,setItems]=useState([]),[itemLoading,setItemLoading]=useState(false),[supplierPrices,setSupplierPrices]=useState([]),[suppliers,setSuppliers]=useState([]),[choices,setChoices]=useState({}),[saved,setSaved]=useState({});
 const canProcess=profile?.company==='ARTHA'&&profile?.role_code==='ARTHA_OPERATIONS';
 const money=v=>'Rp '+Number(v||0).toLocaleString('id-ID',{maximumFractionDigits:0});
 async function load(){setLoading(true);setError('');const {data,error}=await supabase.from('purchase_orders').select('id,po_number,company,requesting_department,requester_name,requested_at,status,sent_to_artha_at,finance_decision,manager_decision').eq('company','BOHC').in('status',['SENT_TO_ARTHA','PROCESSING','PARTIALLY_FULFILLED','FULFILLED']).order('sent_to_artha_at',{ascending:false});if(error)setError(error.message);else setRows(data||[]);setLoading(false)}
 async function loadSupplierData(){
  const [p,s]=await Promise.all([
   supabase.from('artha_supplier_prices').select('id,item_code,supplier_id,purchase_price,is_active').eq('is_active',true),
   supabase.from('artha_suppliers').select('supplier_id,supplier_code,supplier_name,active').eq('active',true)
  ]);
  if(p.error)setError('Harga supplier gagal dimuat: '+p.error.message);else setSupplierPrices(p.data||[]);
  if(s.error)setError('Daftar supplier gagal dimuat: '+s.error.message);else setSuppliers(s.data||[]);
 }
 useEffect(()=>{load();loadSupplierData()},[]);
 async function open(row){
  setSelected(row);setItems([]);setChoices({});setSaved({});setItemLoading(true);
  const {data,error}=await supabase.from('po_items').select('id,item_code,item_name,specification,unit,quantity,selling_price').eq('po_id',row.id);
  if(error)setError('Rincian barang gagal dimuat: '+error.message);
  else{
   const list=data||[];setItems(list);
   const {data:procData,error:procError}=await supabase.from('artha_po_procurement_items').select('po_item_id,item_code,supplier_id,supplier_price_id,purchase_price,selected_quantity').in('po_item_id',list.map(x=>x.id));
   if(procError)setError('Data pilihan supplier gagal dimuat: '+procError.message);
   else{const map={};(procData||[]).forEach(x=>{map[x.po_item_id]=x});setSaved(map);setChoices(Object.fromEntries((procData||[]).map(x=>[x.po_item_id,x.supplier_price_id||''])));}
  }
  setItemLoading(false);
 }
 async function saveSupplierChoice(item){
  const priceId=choices[item.id];const price=supplierPrices.find(x=>x.id===priceId);
  if(!price){setError('Pilih supplier dan harga beli terlebih dahulu.');return}
  setBusy(item.id);setError('');setMessage('');
  const payload={po_item_id:item.id,item_code:price.item_code,supplier_id:price.supplier_id,supplier_price_id:price.id,purchase_price:Number(price.purchase_price),selected_quantity:Number(item.quantity),selected_by:session?.user?.id||null,selected_at:new Date().toISOString(),updated_at:new Date().toISOString()};
  const {error}=await supabase.from('artha_po_procurement_items').upsert(payload,{onConflict:'po_item_id'});
  if(error)setError('Pilihan supplier gagal disimpan: '+error.message);
  else{setSaved(prev=>({...prev,[item.id]:payload}));setMessage(`Supplier untuk ${item.item_name} berhasil disimpan.`)}
  setBusy('');
 }
 async function startProcessing(row){if(!canProcess)return;const yes=window.confirm(`Mulai proses PO ${row.po_number}? Status akan berubah menjadi PROCESSING.`);if(!yes)return;setBusy(row.id);setError('');setMessage('');const {error}=await supabase.from('purchase_orders').update({status:'PROCESSING'}).eq('id',row.id).eq('status','SENT_TO_ARTHA');if(error)setError('Gagal memulai proses: '+error.message);else{setMessage(`PO ${row.po_number} berhasil masuk PROCESSING.`);await load();if(selected?.id===row.id)setSelected({...row,status:'PROCESSING'})}setBusy('')}
 const filtered=rows.filter(r=>(r.po_number||'').toLowerCase().includes(search.toLowerCase())||(r.requesting_department||'').toLowerCase().includes(search.toLowerCase()));
 return <div className="po-module artha-ops"><section className="panel po-list-panel"><div className="panel-head"><div><h3>PO Masuk dari BOHC</h3><p>Daftar purchase order yang telah disetujui dan dikirim ke PT Medis Artha Utama.</p></div><button className="po-refresh" onClick={()=>{load();loadSupplierData()}}><RefreshCw size={15}/> Refresh</button></div><div className="po-search"><Search size={16}/><input value={search} onChange={e=>setSearch(e.target.value)} placeholder="Cari nomor PO atau departemen…"/></div>{message&&<div className="success artha-msg">{message}</div>}{error&&<div className="error artha-msg"><AlertCircle size={16}/>{error}</div>}{loading?<p className="po-muted">Memuat PO masuk…</p>:filtered.length===0?<p className="po-muted">Belum ada PO yang dikirim BOHC.</p>:<div className="po-table-wrap"><table className="po-table"><thead><tr><th>Nomor PO</th><th>Departemen</th><th>Pemohon</th><th>Tanggal kirim</th><th>Status</th><th>Aksi</th></tr></thead><tbody>{filtered.map(r=><tr key={r.id}><td><button className="po-number-link" onClick={()=>open(r)}>{r.po_number}</button></td><td>{r.requesting_department||'-'}</td><td>{r.requester_name||'-'}</td><td>{r.sent_to_artha_at?new Date(r.sent_to_artha_at).toLocaleString('id-ID'):'-'}</td><td><span className="po-status">{r.status}</span></td><td><button className="po-refresh" onClick={()=>open(r)}>Detail / Pengadaan</button>{r.status==='SENT_TO_ARTHA'&&canProcess&&<button className="artha-primary" disabled={!!busy} onClick={()=>startProcessing(r)}>{busy===r.id?'Memproses…':'Mulai proses'}</button>}</td></tr>)}</tbody></table></div>}</section>
 {selected&&<section className="panel po-detail"><div className="po-detail-heading"><div><span className="po-kicker">ARTHA OPERATIONS</span><h3>{selected.po_number}</h3><p>{selected.requesting_department} • {selected.requester_name}</p></div><div className="po-detail-actions"><span className="po-status">{selected.status}</span><button className="po-refresh" onClick={()=>setSelected(null)}>Tutup detail</button></div></div><div className="po-detail-grid"><div className="po-detail-field"><span>Perusahaan pemohon</span><strong>{selected.company}</strong></div><div className="po-detail-field"><span>Departemen</span><strong>{selected.requesting_department||'-'}</strong></div><div className="po-detail-field"><span>Tanggal pengajuan</span><strong>{selected.requested_at||'-'}</strong></div><div className="po-detail-field"><span>Persetujuan Finance</span><strong>{selected.finance_decision||'-'}</strong></div><div className="po-detail-field"><span>Persetujuan Manager</span><strong>{selected.manager_decision||'-'}</strong></div><div className="po-detail-field"><span>Dikirim ke ARTHA</span><strong>{selected.sent_to_artha_at?new Date(selected.sent_to_artha_at).toLocaleString('id-ID'):'-'}</strong></div></div>
  <div className="po-section-title"><div><h4>Rincian barang & pemilihan supplier</h4><p>Harga beli dan supplier hanya ditampilkan pada workspace ARTHA.</p></div></div>
  {itemLoading?<p className="po-muted">Memuat barang…</p>:items.length===0?<p className="po-muted">Tidak ada rincian barang.</p>:<div className="po-table-wrap"><table className="po-table"><thead><tr><th>Barang BOHC</th><th>Kode master</th><th>Jumlah</th><th>Pilih supplier / harga beli</th><th>Total beli</th><th>Aksi</th></tr></thead><tbody>{items.map(it=>{
   const options=supplierPrices.filter(p=>p.item_code===it.item_code);
   const selectedPrice=options.find(p=>p.id===choices[it.id]);
   const supplierName=id=>suppliers.find(s=>s.supplier_id===id)?.supplier_name||'Supplier';
   const existing=saved[it.id];
   return <tr key={it.id}><td><b>{it.item_name}</b><small style={{display:'block',color:'#7b8494'}}>{it.specification||''}</small></td><td>{it.item_code||'Belum dipetakan'}</td><td>{it.quantity} {it.unit}</td><td>{!it.item_code?<span className="po-muted">Kode master belum dipetakan</span>:<><select value={choices[it.id]||''} onChange={e=>setChoices(prev=>({...prev,[it.id]:e.target.value}))} style={{minWidth:220,padding:9,borderRadius:8,border:'1px solid #d8dde7'}}><option value="">Pilih supplier dan harga</option>{options.map(p=><option key={p.id} value={p.id}>{supplierName(p.supplier_id)} — {money(p.purchase_price)}</option>)}</select>{options.length===0&&<small style={{display:'block',color:'#a15b00'}}>Belum ada harga supplier untuk kode ini.</small>}</>}</td><td>{selectedPrice?money(Number(selectedPrice.purchase_price)*Number(it.quantity)):existing?money(Number(existing.purchase_price)*Number(existing.selected_quantity)):'-'}</td><td>{it.item_code&&canProcess&&<button className="artha-primary" disabled={!!busy||!choices[it.id]} onClick={()=>saveSupplierChoice(it)}>{busy===it.id?'Menyimpan…':existing?'Perbarui pilihan':'Simpan pilihan'}</button>}{existing&&<small style={{display:'block',color:'#16845b',marginTop:5}}>Tersimpan: {money(existing.purchase_price)} / unit</small>}</td></tr>
  })}</tbody></table></div>}
  {selected.status==='SENT_TO_ARTHA'&&canProcess&&<div className="artha-action-box"><b>Konfirmasi pemrosesan</b><p>Jika pesanan siap ditangani, klik Mulai proses. Status PO akan berubah menjadi PROCESSING.</p><button className="artha-primary" disabled={!!busy} onClick={()=>startProcessing(selected)}>{busy===selected.id?'Memproses…':'Mulai proses PO'}</button></div>}
 </section>}
 </div>
}


function ArthaMasterDataPage({profile}){
 const isArtha=profile?.company==='ARTHA',isAdmin=profile?.role_code==='SYSTEM_ADMIN',canManage=profile?.role_code==='ARTHA_OPERATIONS';
 const [tab,setTab]=useState('items'),[rows,setRows]=useState([]),[costs,setCosts]=useState([]),[suppliers,setSuppliers]=useState([]),[supplierPrices,setSupplierPrices]=useState([]),[loading,setLoading]=useState(false),[error,setError]=useState(''),[message,setMessage]=useState(''),[search,setSearch]=useState(''),[saving,setSaving]=useState(false);
 const emptyForm={item_code:'',item_name:'',unit:'',provider:'',selling_price:'',supplier_id:'',purchase_price:''};
 const [form,setForm]=useState(emptyForm),[editing,setEditing]=useState(null),[editingPrice,setEditingPrice]=useState(null);
 const [supplierForm,setSupplierForm]=useState({supplier_code:'',supplier_name:''});
 const money=v=>'Rp '+Number(v||0).toLocaleString('id-ID',{maximumFractionDigits:0});
 async function load(){
  setLoading(true);setError('');
  const [itemsRes,supRes,pricesRes]=await Promise.all([
   supabase.from('artha_master_items').select('item_code,item_name,unit,provider,active').order('item_name'),
   supabase.from('artha_suppliers').select('supplier_id,supplier_code,supplier_name,active').order('supplier_name'),
   supabase.from('artha_supplier_prices').select('id,item_code,supplier_id,purchase_price,effective_date,is_active').order('effective_date',{ascending:false})
  ]);
  if(itemsRes.error){setError('Master barang tidak dapat dimuat: '+itemsRes.error.message);setRows([])}
  else setRows(itemsRes.data||[]);
  if(supRes.error)setError('Supplier tidak dapat dimuat: '+supRes.error.message);else setSuppliers(supRes.data||[]);
  if(pricesRes.error)setError('Harga supplier tidak dapat dimuat: '+pricesRes.error.message);else setSupplierPrices(pricesRes.data||[]);
  if(isAdmin){const {data,error}=await supabase.from('artha_master_costs').select('item_code,hpp,target_price,real_margin');if(error)setError('Data HPP tidak dapat dimuat: '+error.message);else setCosts(data||[]);}
  setLoading(false);
 }
 useEffect(()=>{if(isArtha)load()},[profile?.user_id]);
 async function openEdit(row){
  setEditingPrice(null);setEditing(row.item_code);setError('');
  const [sale,price]=await Promise.all([
   supabase.from('artha_master_sales_prices').select('selling_price').eq('item_code',row.item_code).maybeSingle(),
   supabase.from('artha_supplier_prices').select('supplier_id,purchase_price').eq('item_code',row.item_code).eq('is_active',true).limit(1).maybeSingle()
  ]);
  if(sale.error||price.error){setError('Harga barang gagal dimuat: '+(sale.error||price.error).message);return}
  setForm({item_code:row.item_code,item_name:row.item_name||'',unit:row.unit||'',provider:row.provider||'',selling_price:sale.data?.selling_price??'',supplier_id:price.data?.supplier_id||'',purchase_price:price.data?.purchase_price??''});
 }
 function resetForm(){setEditing(null);setEditingPrice(null);setForm(emptyForm)}
 async function openEditPrice(row){
  setEditing(null);setEditingPrice(row.id);setTab('prices');setError('');setMessage('');
  setForm({...emptyForm,item_code:row.item_code,supplier_id:row.supplier_id,purchase_price:row.purchase_price});
 }
 async function deactivateSupplierPrice(row){
  if(!canManage)return;
  if(!window.confirm(`Nonaktifkan harga ${row.item_code} dari ${supplierName(row.supplier_id)}?`))return;
  setSaving(true);setError('');setMessage('');
  const {error}=await supabase.from('artha_supplier_prices').update({is_active:false,updated_at:new Date().toISOString()}).eq('id',row.id);
  if(error)setError('Harga supplier gagal dinonaktifkan: '+error.message);else{setMessage('Harga supplier dinonaktifkan. Riwayat harga tetap tersimpan.');await load()}
  setSaving(false);
 }
 async function saveItem(e){
  e.preventDefault();if(!canManage)return;
  if(editingPrice){
   if(!form.supplier_id||form.purchase_price===''){setError('Pilih supplier dan isi harga beli.');return}
   setSaving(true);setError('');setMessage('');
   const {data:oldPrice,error:oldReadError}=await supabase.from('artha_supplier_prices').select('item_code').eq('id',editingPrice).single();
   if(oldReadError){setError('Data harga lama gagal dibaca: '+oldReadError.message);setSaving(false);return}
   const {error:insertError}=await supabase.from('artha_supplier_prices').insert({item_code:oldPrice.item_code,supplier_id:form.supplier_id,purchase_price:Number(form.purchase_price),effective_date:new Date().toISOString().slice(0,10),is_active:true});
   if(insertError){setError('Harga baru gagal disimpan: '+insertError.message);setSaving(false);return}
   const {error:deactivateError}=await supabase.from('artha_supplier_prices').update({is_active:false,updated_at:new Date().toISOString()}).eq('id',editingPrice);
   if(deactivateError)setError('Harga baru tersimpan, tetapi harga lama gagal dinonaktifkan: '+deactivateError.message);else{setMessage('Harga baru berhasil disimpan. Harga lama dipertahankan sebagai riwayat.');resetForm();await load()}
   setSaving(false);return;
  }
  if(form.purchase_price!==''&&!form.supplier_id){setError('Pilih supplier untuk menyimpan harga beli.');return}
  setSaving(true);setError('');setMessage('');
  const code=form.item_code.trim(),item={item_code:code,item_name:form.item_name.trim(),unit:form.unit.trim()||null,provider:form.provider.trim()||null,active:true};
  if(editing){
   const {error:itemError}=await supabase.from('artha_master_items').update({item_name:item.item_name,unit:item.unit,provider:item.provider}).eq('item_code',editing);
   if(itemError){setError('Barang gagal diperbarui: '+itemError.message);setSaving(false);return}
  }else{
   const {error:itemError}=await supabase.from('artha_master_items').insert(item);
   if(itemError){setError('Barang gagal ditambahkan: '+itemError.message);setSaving(false);return}
  }
  if(form.selling_price!==''){
   const {data:existing,error:readError}=await supabase.from('artha_master_sales_prices').select('item_code').eq('item_code',code).maybeSingle();
   if(readError){setError('Harga jual gagal diperiksa: '+readError.message);setSaving(false);return}
   const result=existing?await supabase.from('artha_master_sales_prices').update({selling_price:Number(form.selling_price)}).eq('item_code',code):await supabase.from('artha_master_sales_prices').insert({item_code:code,selling_price:Number(form.selling_price)});
   if(result.error){setError('Barang tersimpan, tetapi harga jual gagal: '+result.error.message);setSaving(false);await load();return}
  }
  if(form.purchase_price!==''&&form.supplier_id){
   const {data:existingPrice,error:findErr}=await supabase.from('artha_supplier_prices').select('id').eq('item_code',code).eq('supplier_id',form.supplier_id).eq('is_active',true).order('effective_date',{ascending:false}).limit(1).maybeSingle();
   if(findErr){setError('Harga beli gagal diperiksa: '+findErr.message);setSaving(false);return}
   const payload={item_code:code,supplier_id:form.supplier_id,purchase_price:Number(form.purchase_price),effective_date:new Date().toISOString().slice(0,10),is_active:true,updated_at:new Date().toISOString()};
   const result=existingPrice?await supabase.from('artha_supplier_prices').update(payload).eq('id',existingPrice.id):await supabase.from('artha_supplier_prices').insert(payload);
   if(result.error){setError('Barang tersimpan, tetapi harga beli gagal: '+result.error.message);setSaving(false);await load();return}
  }
  setMessage(editing?'Data barang dan harga berhasil diperbarui.':'Barang baru berhasil ditambahkan.');
  resetForm();await load();setSaving(false);
 }
 async function addSupplier(e){
  e.preventDefault();if(!canManage)return;setSaving(true);setError('');setMessage('');
  const code=supplierForm.supplier_code.trim().toUpperCase(),name=supplierForm.supplier_name.trim();
  const {error}=await supabase.from('artha_suppliers').insert({supplier_code:code,supplier_name:name,active:true});
  if(error)setError('Supplier gagal ditambahkan: '+error.message);else{setMessage('Supplier baru berhasil ditambahkan.');setSupplierForm({supplier_code:'',supplier_name:''});await load()}
  setSaving(false);
 }
 const filtered=rows.filter(r=>[r.item_code,r.item_name,r.provider].some(v=>(v||'').toLowerCase().includes(search.toLowerCase())));
 const supplierName=id=>suppliers.find(s=>s.supplier_id===id)?.supplier_name||'-';
 if(!isArtha)return <div className="panel master-denied"><ShieldCheck/><h3>Master Data ARTHA</h3><p>Modul ini hanya tersedia untuk pengguna perusahaan ARTHA.</p></div>;
 return <div className="master-module">
  <section className="panel master-hero"><div><span className="po-kicker">PRIVATE COMPANY DATA</span><h2>Master Data ARTHA</h2><p>Kelola barang, supplier, harga beli, dan harga jual internal PT Medis Artha Utama.</p></div><div className="master-count"><Boxes size={22}/><b>{rows.length}</b><span>Barang aktif</span></div></section>
  <div className="master-tabs"><button className={tab==='items'?'active':''} onClick={()=>setTab('items')}><Boxes size={16}/> Master Barang</button><button className={tab==='prices'?'active':''} onClick={()=>setTab('prices')}><Tag size={16}/> Harga Supplier & Jual</button><button className={tab==='suppliers'?'active':''} onClick={()=>setTab('suppliers')}><Building2 size={16}/> Supplier</button>{isAdmin&&<button className={tab==='costs'?'active':''} onClick={()=>setTab('costs')}><LockKeyhole size={16}/> HPP & Margin (Admin)</button>}</div>
  {message&&<div className="success master-alert">{message}</div>}{error&&<div className="error master-alert"><AlertCircle size={16}/>{error}</div>}
  {canManage&&(tab==='items'||tab==='prices')&&<section className="panel master-form"><div className="panel-head"><div><h3>{editingPrice?'Edit Harga Beli Supplier':editing?'Edit Barang':'Tambah Barang Baru'}</h3><p>{editingPrice?'Perbarui supplier dan harga beli untuk barang ini.':'ARTHA dapat menambah barang serta mengelola harga beli per supplier dan harga jual.'}</p></div>{(editing||editingPrice)&&<button type="button" className="po-refresh" onClick={resetForm}>Batal edit</button>}</div><form onSubmit={saveItem} className="master-form-grid">
   <label hidden={!!editingPrice}>Kode barang<input value={form.item_code} onChange={e=>setForm({...form,item_code:e.target.value})} required disabled={!!editing} placeholder="Contoh: BHP-001"/></label>
   <label hidden={!!editingPrice}>Nama barang<input value={form.item_name} onChange={e=>setForm({...form,item_name:e.target.value})} required placeholder="Nama barang"/></label>
   <label hidden={!!editingPrice}>Satuan<input value={form.unit} onChange={e=>setForm({...form,unit:e.target.value})} placeholder="Box / Pcs / Unit"/></label>
   <label hidden={!!editingPrice}>Provider utama (opsional)<input value={form.provider} onChange={e=>setForm({...form,provider:e.target.value})} placeholder="Contoh: PROMEDICA"/></label>
   <label>Supplier harga beli<select value={form.supplier_id} onChange={e=>setForm({...form,supplier_id:e.target.value})}><option value="">Pilih supplier</option>{suppliers.filter(s=>s.active).map(s=><option key={s.supplier_id} value={s.supplier_id}>{s.supplier_name}</option>)}</select></label>
   <label>Harga beli supplier (Rp)<input type="number" min="0" step="0.01" value={form.purchase_price} onChange={e=>setForm({...form,purchase_price:e.target.value})} placeholder="Opsional"/></label>
   <label hidden={!!editingPrice}>Harga jual ARTHA (Rp)<input type="number" min="0" step="0.01" value={form.selling_price} onChange={e=>setForm({...form,selling_price:e.target.value})} placeholder="Opsional"/></label>
   <div className="master-form-actions"><button className="artha-primary" disabled={saving}>{saving?'Menyimpan…':<><Save size={15}/> {editingPrice?'Simpan Harga':editing?'Simpan Perubahan':'Tambah Barang'}</>}</button></div>
  </form></section>}
  {canManage&&tab==='suppliers'&&<section className="panel master-form"><div className="panel-head"><div><h3>Tambah Supplier Baru</h3><p>Supplier baru akan tersedia untuk pemetaan harga beli barang.</p></div></div><form onSubmit={addSupplier} className="master-form-grid"><label>Kode supplier<input required value={supplierForm.supplier_code} onChange={e=>setSupplierForm({...supplierForm,supplier_code:e.target.value})} placeholder="Contoh: SUP-001"/></label><label>Nama supplier<input required value={supplierForm.supplier_name} onChange={e=>setSupplierForm({...supplierForm,supplier_name:e.target.value})} placeholder="Nama supplier"/></label><div className="master-form-actions"><button className="artha-primary" disabled={saving}>{saving?'Menyimpan…':<><Save size={15}/> Tambah Supplier</>}</button></div></form></section>}
  <section className="panel master-table-panel"><div className="panel-head"><div><h3>{tab==='costs'?'HPP & Margin Rahasia':tab==='suppliers'?'Daftar Supplier':tab==='prices'?'Daftar Harga Supplier':'Daftar Master Barang'}</h3><p>{tab==='costs'?'Informasi biaya internal khusus SYSTEM_ADMIN.':tab==='suppliers'?`${suppliers.length} supplier terdaftar.`:tab==='prices'?`${supplierPrices.length} data harga beli supplier.`:`${filtered.length} data ditampilkan dari ${rows.length} barang.`}</p></div><button className="po-refresh" onClick={load}><RefreshCw size={15}/> Refresh</button></div>
   {tab!=='costs'&&<div className="po-search"><Search size={16}/><input value={search} onChange={e=>setSearch(e.target.value)} placeholder="Cari kode, nama barang, atau supplier…"/></div>}
   {loading?<p className="po-muted">Memuat master data…</p>:tab==='costs'?(!isAdmin?<p className="po-muted">Akses khusus SYSTEM_ADMIN.</p>:<div className="po-table-wrap"><table className="po-table"><thead><tr><th>Kode</th><th>HPP</th><th>Target Harga</th><th>Margin</th></tr></thead><tbody>{costs.map(c=><tr key={c.item_code}><td>{c.item_code}</td><td>{money(c.hpp)}</td><td>{money(c.target_price)}</td><td>{c.real_margin==null?'-':Number(c.real_margin).toLocaleString('id-ID')}</td></tr>)}</tbody></table></div>):tab==='suppliers'?<div className="po-table-wrap"><table className="po-table"><thead><tr><th>Kode</th><th>Nama Supplier</th><th>Status</th></tr></thead><tbody>{suppliers.filter(s=>[s.supplier_code,s.supplier_name].some(v=>(v||'').toLowerCase().includes(search.toLowerCase()))).map(s=><tr key={s.supplier_id}><td>{s.supplier_code}</td><td>{s.supplier_name}</td><td>{s.active?'Aktif':'Nonaktif'}</td></tr>)}</tbody></table></div>:tab==='prices'?<div className="po-table-wrap"><table className="po-table"><thead><tr><th>Kode barang</th><th>Nama barang</th><th>Supplier</th><th>Harga beli</th><th>Tanggal berlaku</th>{canManage&&<th>Aksi</th>}</tr></thead><tbody>{supplierPrices.filter(p=>{const item=rows.find(x=>x.item_code===p.item_code);return [p.item_code,item?.item_name,supplierName(p.supplier_id)].some(v=>(v||'').toLowerCase().includes(search.toLowerCase()))}).map(p=><tr key={p.id}><td>{p.item_code}</td><td>{rows.find(x=>x.item_code===p.item_code)?.item_name||'-'}</td><td>{supplierName(p.supplier_id)}</td><td>{money(p.purchase_price)}</td><td>{p.effective_date}</td>{canManage&&<td><button className="po-refresh" onClick={()=>openEditPrice(p)}>Edit Harga</button> <button className="po-refresh" onClick={()=>{const item=rows.find(x=>x.item_code===p.item_code);if(item)openEdit(item);else setError('Master barang untuk kode '+p.item_code+' tidak ditemukan.')}}>Edit Nama</button> <button className="po-refresh" disabled={!p.is_active||saving} onClick={()=>deactivateSupplierPrice(p)}>{p.is_active?'Nonaktifkan':'Nonaktif'}</button></td>}</tr>)}</tbody></table></div>:filtered.length===0?<p className="po-muted">Belum ada data barang.</p>:<div className="po-table-wrap"><table className="po-table"><thead><tr><th>Kode</th><th>Nama Barang</th><th>Satuan</th><th>Provider</th>{canManage&&<th>Aksi</th>}</tr></thead><tbody>{filtered.map(r=><tr key={r.item_code}><td><b>{r.item_code}</b></td><td>{r.item_name}</td><td>{r.unit||'-'}</td><td>{r.provider||'-'}</td>{canManage&&<td><button className="po-refresh" onClick={()=>openEdit(r)}>Edit</button></td>}</tr>)}</tbody></table></div>}
  </section>
 </div>
}


function App(){
 const [session,setSession]=useState(null),[profile,setProfile]=useState(null),[email,setEmail]=useState(''),[password,setPassword]=useState(''),[busy,setBusy]=useState(false),[error,setError]=useState(''),[notice,setNotice]=useState(''),[page,setPage]=useState('Dashboard');
 useEffect(()=>{if(!supabase)return;supabase.auth.getSession().then(({data})=>setSession(data.session));const {data:{subscription}}=supabase.auth.onAuthStateChange((_event,s)=>setSession(s));return()=>subscription.unsubscribe()},[]);
 useEffect(()=>{async function getProfile(){setProfile(null);if(!session?.user)return;const {data,error}=await supabase.from('profiles').select('company,display_name,role_code,active').eq('user_id',session.user.id).maybeSingle();if(error)setError('Profil belum dapat dibaca: '+error.message);else setProfile(data)}getProfile()},[session]);
 async function login(e){e.preventDefault();setBusy(true);setError('');setNotice('');const {error}=await supabase.auth.signInWithPassword({email,password});if(error)setError(error.message);else setNotice('Login berhasil. Memuat profil…');setBusy(false)}
 async function logout(){await supabase.auth.signOut();setProfile(null);setPage('Dashboard')}
 if(!supabase)return <div className="setup"><div className="brand-mark">AC</div><h1>ARTHA CONNECT</h1><p>Hubungkan aplikasi ke project Supabase terlebih dahulu.</p><div className="setupbox"><b>Langkah setup</b><ol><li>Salin file <code>.env.example</code> menjadi <code>.env</code>.</li><li>Isi Project URL dan Publishable key Supabase.</li><li>Jalankan ulang aplikasi.</li></ol></div></div>;
 if(!session)return <main className="login-shell"><div className="login-left"><div className="brand"><div className="brand-mark">AC</div><span>ARTHA <b>CONNECT</b></span></div><div className="hero"><span className="eyebrow">PROCUREMENT • RECEIVING • DOCUMENTS</span><h1>Semua proses.<br/><em>Satu koneksi.</em></h1><p>Sistem pengadaan dan penerimaan barang terintegrasi untuk BOHC dan PT Medis Artha Utama.</p><div className="hero-tags"><span><ShieldCheck size={16}/> Akses berbasis peran</span><span><Activity size={16}/> Monitoring terpusat</span></div></div><div className="login-footer">ARTHA CONNECT <span>•</span> Procurement Made Simple</div></div><div className="login-right"><form className="login-card" onSubmit={login}><div className="small-mark"><LockKeyhole size={19}/></div><h2>Selamat datang</h2><p>Masuk menggunakan akun yang telah didaftarkan oleh administrator.</p><label>Email</label><input type="email" value={email} onChange={e=>setEmail(e.target.value)} placeholder="nama@perusahaan.com" required/><label>Password</label><input type="password" value={password} onChange={e=>setPassword(e.target.value)} placeholder="Masukkan password" required/><button disabled={busy}>{busy?'Memproses…':'Masuk ke aplikasi'} <ArrowRight size={17}/></button>{error&&<div className="error"><AlertCircle size={16}/>{error}</div>}{notice&&<div className="success">{notice}</div>}<div className="secure-note"><ShieldCheck size={15}/> Login aman melalui Supabase Authentication</div></form><div className="copyright">© 2026 ARTHA CONNECT</div></div></main>;
 const role=profile?.role_code||'ROLE BELUM TERPASANG';const company=profile?.company||'Perusahaan belum terdeteksi';const isArtha=profile?.company==='ARTHA';const isAdmin=role==='SYSTEM_ADMIN';const menus=[['Dashboard',Home],['Purchase Order',ClipboardList],['Approval Center',CheckCircle2],['Goods Receiving',PackageCheck],['Digital BAST',FileCheck]];if(isArtha){menus.push(['Artha Procurement',Building2]);menus.push(['Master Data',Boxes]);if(role==='ARTHA_FINANCE'||isAdmin)menus.push(['Internal Finance',LockKeyhole]);}menus.push(['Reports',Activity]);if(isAdmin)menus.push(['User Management',Users]);
 return <div className="app"><aside className="sidebar"><div className="brand sidebrand"><div className="brand-mark">AC</div><span>ARTHA <b>CONNECT</b></span></div><div className="org-label">WORKSPACE</div><div className="org-pill"><Building2 size={16}/>{company}</div><div className="org-label nav-label">MENU UTAMA</div><nav>{menus.map(([name,Icon])=><button className={page===name?'active':''} onClick={()=>setPage(name)} key={name}><Icon size={18}/>{name}{name==='Approval Center'&&<span className="dot"/>}</button>)}</nav><div className="side-bottom"><div className="user-mini"><div className="avatar">{(profile?.display_name||session.user.email||'U').slice(0,1).toUpperCase()}</div><div><b>{profile?.display_name||session.user.email}</b><small>{roleNames[role]||role}</small></div></div><button className="logout" onClick={logout}><LogOut size={17}/> Keluar</button></div></aside><main className="main"><header><div><div className="crumb">ARTHA CONNECT <span>/</span> {page}</div><h1>{page}</h1></div><div className="header-right"><span className="online"><i/> Sistem aktif</span><div className="avatar top-avatar">{(profile?.display_name||'U').slice(0,1).toUpperCase()}</div></div></header><div className="content">{page==='Purchase Order'&&profile?<PurchaseOrderPage profile={profile} session={session}/>:page==='Approval Center'&&profile?<ApprovalCenter profile={profile} session={session}/>:page==='Artha Procurement'&&profile&&isArtha?<ArthaProcurementPage profile={profile}/>:page==='Master Data'&&profile&&isArtha?<ArthaMasterDataPage profile={profile}/>:!profile?<div className="warning"><AlertCircle/> <div><b>Profil pengguna belum ditemukan atau belum aktif.</b><p>Hubungi admin untuk memastikan baris di tabel <code>profiles</code> memakai User ID akun ini, company, role_code yang valid, dan active = true.</p></div></div>:<><div className="welcome"><div><span className="eyebrow">OVERVIEW</span><h2>Halo, {profile.display_name||'Pengguna'} 👋</h2><p>Berikut ringkasan aktivitas pengadaan dan penerimaan barang.</p></div><div className="welcome-icon"><Activity size={27}/></div></div><div className="stats"><Stat icon={ClipboardList} title="Total Purchase Order" val="—" sub="Data akan terhubung pada tahap berikutnya"/><Stat icon={CheckCircle2} title="Menunggu Approval" val="—" sub="Finance & Manager Operasional"/><Stat icon={PackageCheck} title="Penerimaan Barang" val="—" sub="Status penerimaan berjalan"/><Stat icon={FileCheck} title="Dokumen BAST" val="—" sub="BAST dibuat dan didistribusikan"/></div><div className="grid2"><section className="panel"><div className="panel-head"><div><h3>Alur proses</h3><p>Workflow pengadaan terintegrasi</p></div><span className="badge">PO → BAST</span></div><div className="workflow">{['Pengajuan PO','Review Finance BOHC','Approval Manager','Pemrosesan Artha','Penerimaan barang','Validasi & BAST'].map((s,i)=><div className="step" key={s}><div className={'step-num '+(i===0?'first':'')}>{i+1}</div><span>{s}</span>{i<5&&<div className="step-line"/>}</div>)}</div></section><section className="panel"><div className="panel-head"><div><h3>Akses & keamanan</h3><p>Informasi sesi akun</p></div><ShieldCheck className="shield" size={22}/></div><div className="security-list"><div><span>Perusahaan</span><b>{profile.company}</b></div><div><span>Role</span><b>{roleNames[role]||role}</b></div><div><span>Status akun</span><b className="status-ok"><CheckCircle2 size={15}/> Aktif</b></div><div><span>Modul rahasia Artha</span><b>{isArtha?'Sesuai role':'Tidak tersedia'}</b></div></div></section></div><div className="notice-bar"><RefreshCw size={16}/><span><b>Prototype terhubung.</b> Statistik transaksi belum ditarik dari database. Tahap berikutnya menghubungkan data PO, penerimaan, BAST, serta menguji policy RLS menggunakan akun tiap role.</span></div></>}</div><footer>ARTHA CONNECT <span>•</span> Procurement Made Simple <span className="foot-right">Version 1.0</span></footer></main></div>
}
function Stat({icon:Icon,title,val,sub}){return <div className="stat-card"><div className="stat-top"><span>{title}</span><div className="stat-icon"><Icon size={19}/></div></div><strong>{val}</strong><small>{sub}</small></div>}
createRoot(document.getElementById('root')).render(<App/>);