// Finance workspace — cash reconciliation, settlement, payables, and branch expenses
const FINANCE_SETTLEMENTS = [
  { id:'STL-260723-01', channel:'QRIS', branch:'Cabang Pusat', sales:1_842_500, fee:12_898, net:1_829_602, eta:'Hari ini, 16.00', status:'Terjadwal' },
  { id:'STL-260723-02', channel:'Debit BCA', branch:'Cabang Kalimalang', sales:684_000, fee:8_208, net:675_792, eta:'24 Jul 2026', status:'Terjadwal' },
  { id:'STL-260722-03', channel:'QRIS', branch:'Cabang Kalimalang', sales:1_126_000, fee:7_882, net:1_118_118, eta:'Masuk 22 Jul', status:'Selesai' },
];
const FINANCE_PAYABLES = [
  { invoice:'INV-77214', supplier:'PT Sumber Pangan Sejahtera', due:'25 Jul 2026', amount:2_460_000, branch:'Pusat', status:'Perlu dijadwalkan' },
  { invoice:'INV-88532', supplier:'PT Tirta Niaga', due:'29 Jul 2026', amount:1_920_000, branch:'Pusat', status:'Belum jatuh tempo' },
  { invoice:'INV-44108', supplier:'UD Makmur Jaya', due:'23 Jul 2026', amount:845_000, branch:'Kalimalang', status:'Jatuh tempo hari ini' },
];

function Finance({ cabang, pushToast }) {
  const [tab, setTab] = React.useState('reconciliation');
  const [done, setDone] = React.useState([]);
  const complete = (id, message) => { setDone(previous => [...previous, id]); pushToast({msg:message}); };
  return <div className="stack-6">
    <div className="finance-brief"><div><p>RINGKASAN KEUANGAN · 23 JULI 2026</p><h2>Kas dan settlement sesuai, 2 tagihan perlu tindakan</h2><span>{cabang === 'all' ? 'Semua cabang' : CABANG_LIST.find(item => item.id === cabang)?.name} · diperbarui 09.34</span></div><Pill tone="success" dot>Data tersinkron</Pill></div>
    <div className="grid-4">
      <Kpi label="Kas Seharusnya" value="Rp 2,18 jt" hint="2 shift aktif" icon="cashbox" />
      <Kpi label="Selisih Kas" value="-Rp 12.500" hint="0,6% · perlu dicatat" icon="alert" tone="warn" />
      <Kpi label="Settlement Masuk" value="Rp 3,62 jt" hint="QRIS + Debit hari ini" icon="qris" tone="success" />
      <Kpi label="Tagihan 7 Hari" value="Rp 5,23 jt" hint="3 invoice pemasok" icon="bank" />
    </div>

    <Card><div className="card-pad">
      <div className="row between mb-4"><div className="tabs"><button className={'tab '+(tab === 'reconciliation' ? 'active' : '')} onClick={() => setTab('reconciliation')}>Rekonsiliasi Kas</button><button className={'tab '+(tab === 'settlement' ? 'active' : '')} onClick={() => setTab('settlement')}>Settlement</button><button className={'tab '+(tab === 'payables' ? 'active' : '')} onClick={() => setTab('payables')}>Tagihan Pemasok</button><button className={'tab '+(tab === 'expenses' ? 'active' : '')} onClick={() => setTab('expenses')}>Pengeluaran</button></div><Btn icon="download" size="sm">Ekspor</Btn></div>
      {tab === 'reconciliation' && <FinanceReconciliation done={done} complete={complete} />}
      {tab === 'settlement' && <FinanceSettlement />}
      {tab === 'payables' && <FinancePayables done={done} complete={complete} />}
      {tab === 'expenses' && <FinanceExpenses pushToast={pushToast} />}
    </div></Card>

    <div className="grid-2">
      <Card><div className="card-pad"><SectionHead title="Kontrol pemisahan tugas" hint="Keuangan mencatat pembayaran, tetapi tidak mengubah penjualan atau stok" /><div className="setting-row"><div><b>Tidak dapat mengubah transaksi</b><span>Koreksi transaksi tetap melalui persetujuan pemilik.</span></div><Pill tone="success">Aktif</Pill></div><div className="setting-row"><div><b>Tidak dapat membayar invoice sendiri</b><span>Invoice yang dibuat pengguna yang sama memerlukan pemeriksa lain.</span></div><Pill tone="success">Aktif</Pill></div><div className="setting-row"><div><b>Ekspor menyertakan jejak audit</b><span>Waktu, pengguna, cabang, dan filter ikut tersimpan.</span></div><Pill tone="success">Aktif</Pill></div></div></Card>
      <Card><div className="card-pad"><SectionHead title="Arus kas 7 hari" hint="Perkiraan berdasarkan settlement dan jatuh tempo pemasok" /><div className="cashflow-row"><span>Saldo operasional saat ini</span><b>Rp 18.420.000</b></div><div className="cashflow-row positive"><span>Settlement akan masuk</span><b>+ Rp 6.240.000</b></div><div className="cashflow-row negative"><span>Tagihan akan dibayar</span><b>− Rp 5.225.000</b></div><div className="cashflow-total"><span>Proyeksi saldo</span><strong>Rp 19.435.000</strong></div></div></Card>
    </div>
  </div>;
}

function FinanceReconciliation({ done, complete }) { return <div className="table-wrap"><table className="table"><thead><tr><th>Shift</th><th>Kasir</th><th>Cabang</th><th className="num">Sistem</th><th className="num">Fisik</th><th className="num">Selisih</th><th>Status</th><th /></tr></thead><tbody><tr><td className="code">SH-260722-P-S</td><td>Andri Saputra</td><td>Cabang Pusat</td><td className="num">Rp 2.342.000</td><td className="num">Rp 2.329.500</td><td className="num negative-text">− Rp 12.500</td><td><Pill tone={done.includes('SH-P') ? 'success' : 'warning'}>{done.includes('SH-P') ? 'Dicatat' : 'Perlu alasan'}</Pill></td><td className="actions"><Btn size="sm" icon="check" onClick={() => complete('SH-P','Selisih kas dicatat dan dikirim ke audit log')}>{done.includes('SH-P') ? 'Tersimpan' : 'Catat Selisih'}</Btn></td></tr><tr><td className="code">SH-260722-K-S</td><td>Wati Susanto</td><td>Cabang Kalimalang</td><td className="num">Rp 1.185.500</td><td className="num">Rp 1.190.500</td><td className="num positive-text">+ Rp 5.000</td><td><Pill tone="success">Sesuai toleransi</Pill></td><td /></tr></tbody></table></div>; }
function FinanceSettlement() { return <div className="table-wrap"><table className="table"><thead><tr><th>Settlement</th><th>Channel</th><th>Cabang</th><th className="num">Penjualan</th><th className="num">Biaya</th><th className="num">Bersih</th><th>Estimasi</th><th>Status</th></tr></thead><tbody>{FINANCE_SETTLEMENTS.map(item => <tr key={item.id}><td className="code">{item.id}</td><td><b>{item.channel}</b></td><td>{item.branch}</td><td className="num">{rupiah(item.sales,{sym:true})}</td><td className="num">{rupiah(item.fee,{sym:true})}</td><td className="num"><b>{rupiah(item.net,{sym:true})}</b></td><td>{item.eta}</td><td><Pill tone={item.status === 'Selesai' ? 'success' : 'accent'}>{item.status}</Pill></td></tr>)}</tbody></table></div>; }
function FinancePayables({ done, complete }) { return <div className="table-wrap"><table className="table"><thead><tr><th>Invoice</th><th>Pemasok</th><th>Cabang</th><th>Jatuh tempo</th><th className="num">Nilai</th><th>Status</th><th /></tr></thead><tbody>{FINANCE_PAYABLES.map(item => <tr key={item.invoice}><td className="code">{item.invoice}</td><td><b>{item.supplier}</b></td><td>{item.branch}</td><td>{item.due}</td><td className="num"><b>{rupiah(item.amount,{sym:true})}</b></td><td><Pill tone={done.includes(item.invoice) ? 'success' : item.status.includes('hari ini') ? 'warning' : 'neutral'}>{done.includes(item.invoice) ? 'Dijadwalkan' : item.status}</Pill></td><td className="actions"><Btn size="sm" icon="calendar" disabled={done.includes(item.invoice)} onClick={() => complete(item.invoice,`${item.invoice} dijadwalkan untuk pembayaran`)}>Jadwalkan</Btn></td></tr>)}</tbody></table></div>; }
function FinanceExpenses({ pushToast }) { const [open, setOpen] = React.useState(false); return <div><div className="row between mb-4"><div className="table-sub">Pengeluaran operasional di luar purchase order.</div><Btn tone="primary" size="sm" icon="plus" onClick={() => setOpen(true)}>Catat Pengeluaran</Btn></div><div className="table-wrap"><table className="table"><thead><tr><th>Tanggal</th><th>Kategori</th><th>Catatan</th><th>Cabang</th><th className="num">Nilai</th><th>Status</th></tr></thead><tbody><tr><td>23 Jul 2026</td><td>Listrik</td><td>Token meter toko</td><td>Kalimalang</td><td className="num">Rp 500.000</td><td><Pill tone="success">Tercatat</Pill></td></tr><tr><td>22 Jul 2026</td><td>Transport</td><td>Pengiriman transfer stok</td><td>Pusat</td><td className="num">Rp 85.000</td><td><Pill tone="success">Tercatat</Pill></td></tr></tbody></table></div>{open && <div className="inline-form"><label className="field"><span>Kategori</span><select><option>Operasional</option><option>Listrik</option><option>Transport</option></select></label><label className="field"><span>Nilai</span><input defaultValue="Rp 150.000" /></label><label className="field"><span>Catatan</span><input placeholder="Keperluan pengeluaran" /></label><Btn tone="primary" icon="check" onClick={() => { setOpen(false); pushToast({msg:'Pengeluaran disimpan dan masuk audit log'}); }}>Simpan</Btn></div>}</div>; }
Object.assign(window, { Finance });