// finance.jsx — FINANCE module (thu/chi, cash flow, forecast vs actual) + widget.
const FIN_APP = APPS.find(a => a.id === 'finance');
const FIN_MONTHS = ['2026-01','2026-02','2026-03','2026-04','2026-05','2026-06'];
function mLabel(m, lang){ const n = +m.slice(5); return (lang === 'vi' ? 'Th' + n : 'M' + n); }

function incomeItems(contracts){
  const arr = [];
  contracts.forEach(c => { if (contractStatus(c) === 'cancelled') return;
    (c.schedule || []).forEach(s => arr.push({ contract:c.code, customer:c.customer, no:s.no, amount:s.amount, dueDate:s.dueDate, condition:s.condition, paid:s.paid, paidDate:s.paidDate })); });
  return arr;
}

function FinanceModule(){
  const p = usePortal();
  const { t } = useLang();
  const sub = p.route.sub || 'overview';
  const items = [
    { id:'overview', icon:'bi-pie-chart', label:t('fin.overview') },
    { id:'cashflow', icon:'bi-arrow-left-right', label:t('fin.cashflow') },
    { id:'income', icon:'bi-arrow-down-circle', label:t('fin.income') },
    { id:'expense', icon:'bi-arrow-up-circle', label:t('fin.expense') },
    { id:'forecast', icon:'bi-graph-up-arrow', label:t('fin.forecast') },
    { id:'settings', icon:'bi-gear', label:t('c.settings') },
  ];
  const go = (id) => p.navigate({ name:'module', module:'finance', sub:id });
  return (<>
    <ModuleSidebar app={FIN_APP} items={items} active={sub} onNavigate={go} />
    <main className="main">
      {sub === 'overview' && <FinOverview go={go} />}
      {sub === 'cashflow' && <FinCashflow />}
      {sub === 'income' && <FinIncome />}
      {sub === 'expense' && <FinExpense />}
      {sub === 'forecast' && <FinForecast />}
      {sub === 'settings' && <FinSettings />}
    </main>
  </>);
}

/* shared aggregates */
function useFinance(){
  const p = usePortal();
  const inc = incomeItems(p.contracts);
  const exp = p.expenses;
  const realizedIn = inc.filter(i => i.paid).reduce((s, i) => s + i.amount, 0);
  const realizedOut = exp.filter(e => e.status === 'paid').reduce((s, e) => s + e.amount, 0);
  const beforeIn = inc.filter(i => i.paid && i.paidDate && i.paidDate < '2026-01-01').reduce((s, i) => s + i.amount, 0);
  const beforeOut = exp.filter(e => e.status === 'paid' && e.date < '2026-01-01').reduce((s, e) => s + e.amount, 0);
  const opening = beforeIn - beforeOut;
  // monthly realized
  const rows = []; let cum = opening;
  FIN_MONTHS.forEach(m => {
    const tin = inc.filter(i => i.paid && monthKey(i.paidDate) === m).reduce((s, i) => s + i.amount, 0);
    const tout = exp.filter(e => e.status === 'paid' && monthKey(e.date) === m).reduce((s, e) => s + e.amount, 0);
    cum += tin - tout;
    rows.push({ m, tin, tout, net:tin - tout, cum });
  });
  return { inc, exp, realizedIn, realizedOut, opening, rows, balance:opening + (realizedIn - beforeIn) - (realizedOut - beforeOut) };
}

function FinOverview({ go }){
  const { t, lang } = useLang();
  const fin = useFinance();
  const pendingIn = fin.inc.filter(i => !i.paid).reduce((s, i) => s + i.amount, 0);
  const maxAbs = Math.max(...fin.rows.map(r => Math.max(r.tin, r.tout)), 1);
  return (
    <div className="page pagefade">
      <div className="page-head"><div><h1>{t('fin.title')}</h1><div className="sub">{lang === 'vi' ? 'Tổng quan thu chi & dòng tiền.' : 'Income, expense & cash-flow overview.'}</div></div></div>
      <div className="kpi-strip">
        <Kpi label={t('fin.totalIn')} value={vndShort(fin.realizedIn)} icon="bi-arrow-down-circle" delta={lang === 'vi' ? 'thực thu' : 'received'} deltaDir="up" />
        <Kpi label={t('fin.totalOut')} value={vndShort(fin.realizedOut)} icon="bi-arrow-up-circle" delta={lang === 'vi' ? 'đã chi' : 'spent'} deltaDir="down" />
        <Kpi label={t('fin.balance')} value={vndShort(fin.balance)} icon="bi-wallet2" />
        <Kpi label={t('fin.pending')} value={vndShort(pendingIn)} icon="bi-hourglass-split" />
      </div>
      <div className="card" style={{ marginBottom:14 }}>
        <div className="card-head"><h3>{t('fin.cashflow')} · 2026</h3><button className="btn btn-ghost btn-sm" onClick={() => go('cashflow')}>{t('c.details')}</button></div>
        <div className="card-body">
          <div style={{ display:'flex', alignItems:'flex-end', gap:18, height:160, padding:'0 4px' }}>
            {fin.rows.map(r => (
              <div key={r.m} style={{ flex:1, display:'flex', flexDirection:'column', alignItems:'center', gap:6 }}>
                <div style={{ display:'flex', alignItems:'flex-end', gap:4, height:120 }}>
                  <div title={'Thu ' + vnd(r.tin)} style={{ width:14, height:Math.max(2, r.tin / maxAbs * 120), background:'var(--success)', borderRadius:'3px 3px 0 0' }}></div>
                  <div title={'Chi ' + vnd(r.tout)} style={{ width:14, height:Math.max(2, r.tout / maxAbs * 120), background:'var(--error)', borderRadius:'3px 3px 0 0' }}></div>
                </div>
                <div className="subtle" style={{ fontSize:'var(--fs-sm)' }}>{mLabel(r.m, lang)}</div>
              </div>
            ))}
          </div>
          <div className="flex g16" style={{ marginTop:10, fontSize:'var(--fs-base)' }}>
            <span className="flex g4 items-center"><i style={{ width:9, height:9, borderRadius:2, background:'var(--success)', display:'inline-block' }}></i>{t('fin.totalIn')}</span>
            <span className="flex g4 items-center"><i style={{ width:9, height:9, borderRadius:2, background:'var(--error)', display:'inline-block' }}></i>{t('fin.totalOut')}</span>
          </div>
        </div>
      </div>
    </div>
  );
}

function FinCashflow(){
  const { t, lang } = useLang();
  const fin = useFinance();
  const totIn = fin.rows.reduce((s, r) => s + r.tin, 0), totOut = fin.rows.reduce((s, r) => s + r.tout, 0);
  return (
    <div className="page pagefade">
      <div className="page-head"><div><h1>{t('fin.cashflow')}</h1><div className="sub">{lang === 'vi' ? 'Bảng cân đối dòng tiền theo tháng (2026).' : 'Monthly cash-flow balance (2026).'}</div></div>
        <button className="btn"><i className="bi bi-download"></i>{lang === 'vi' ? 'Xuất Excel' : 'Export'}</button></div>
      <div className="card"><div style={{ overflow:'auto' }}>
        <table className="tbl">
          <thead><tr><th>{t('fin.month')}</th><th className="num">{t('fin.totalIn')}</th><th className="num">{t('fin.totalOut')}</th><th className="num">{t('fin.net')}</th><th className="num">{t('fin.cumulative')}</th></tr></thead>
          <tbody>
            <tr style={{ cursor:'default' }}><td className="muted">{lang === 'vi' ? 'Số dư đầu kỳ' : 'Opening'}</td><td colSpan="3"></td><td className="num mono" style={{ fontWeight:600 }}>{vnd(fin.opening)}</td></tr>
            {fin.rows.map(r => (
              <tr key={r.m} style={{ cursor:'default' }}>
                <td style={{ fontWeight:500 }}>{lang === 'vi' ? 'Tháng ' + (+r.m.slice(5)) : 'Month ' + (+r.m.slice(5))}</td>
                <td className="num mono" style={{ color:'var(--success)' }}>{r.tin ? vnd(r.tin) : '—'}</td>
                <td className="num mono" style={{ color:'var(--error)' }}>{r.tout ? vnd(r.tout) : '—'}</td>
                <td className="num mono" style={{ fontWeight:600, color:r.net >= 0 ? 'var(--success)' : 'var(--error)' }}>{r.net >= 0 ? '+' : ''}{vnd(r.net)}</td>
                <td className="num mono" style={{ fontWeight:600 }}>{vnd(r.cum)}</td>
              </tr>
            ))}
          </tbody>
          <tfoot><tr style={{ cursor:'default', background:'var(--bg-subtle)' }}><td style={{ fontWeight:700 }}>{lang === 'vi' ? 'Tổng' : 'Total'}</td><td className="num mono" style={{ fontWeight:700, color:'var(--success)' }}>{vnd(totIn)}</td><td className="num mono" style={{ fontWeight:700, color:'var(--error)' }}>{vnd(totOut)}</td><td className="num mono" style={{ fontWeight:700 }}>{vnd(totIn - totOut)}</td><td className="num mono" style={{ fontWeight:700, color:'var(--primary)' }}>{vnd(fin.rows[fin.rows.length - 1].cum)}</td></tr></tfoot>
        </table>
      </div></div>
    </div>
  );
}

function FinIncome(){
  const p = usePortal();
  const { t, lang } = useLang();
  const toast = useToast();
  const [filter, setFilter] = React.useState('all');
  const inc = incomeItems(p.contracts).sort((a, b) => a.dueDate < b.dueDate ? -1 : 1);
  const list = inc.filter(i => filter === 'all' || (filter === 'paid' ? i.paid : !i.paid));
  const markReceived = (it) => {
    const c = p.contracts.find(x => x.code === it.contract);
    p.patchContract(it.contract, { ...c, schedule:c.schedule.map(s => s.no === it.no ? { ...s, paid:true, paidDate:TODAY } : s) });
    toast(lang === 'vi' ? 'Đã ghi nhận thực thu' : 'Recorded as received', 'success');
  };
  const totalDue = inc.reduce((s, i) => s + i.amount, 0);
  const received = inc.filter(i => i.paid).reduce((s, i) => s + i.amount, 0);
  return (
    <div className="page pagefade">
      <div className="page-head"><div><h1>{t('fin.income')}</h1><div className="sub">{lang === 'vi' ? 'Các khoản phải thu từ lịch thanh toán hợp đồng.' : 'Receivables from contract payment schedules.'}</div></div></div>
      <div className="kpi-strip">
        <Kpi label={lang === 'vi' ? 'Tổng phải thu' : 'Total due'} value={vndShort(totalDue)} icon="bi-cash-stack" />
        <Kpi label={t('fin.received')} value={vndShort(received)} icon="bi-check-circle" deltaDir="up" />
        <Kpi label={t('fin.pending')} value={vndShort(totalDue - received)} icon="bi-hourglass-split" />
        <Kpi label={t('fin.collectRate')} value={Math.round(received / totalDue * 100) + '%'} icon="bi-percent" />
      </div>
      <div className="toolbar"><div className="seg">{['all','paid','pending'].map(s => <button key={s} className={filter === s ? 'is-active' : ''} onClick={() => setFilter(s)}>{s === 'all' ? t('c.all') : s === 'paid' ? t('fin.received') : t('fin.pending')}</button>)}</div></div>
      <div className="card"><div style={{ overflow:'auto' }}>
        <table className="tbl">
          <thead><tr><th>{t('hd.code')}</th><th>{t('ct.customer')}</th><th>{t('hd.installment')}</th><th className="num">{lang === 'vi' ? 'Số tiền' : 'Amount'}</th><th>{t('hd.dueDate')}</th><th>{t('c.status')}</th><th></th></tr></thead>
          <tbody>
            {list.map((it, i) => { const cust = CustomerStore.byCode(it.customer) || {}; const overdue = !it.paid && it.dueDate < TODAY; return (
              <tr key={i} style={{ cursor:'pointer' }} onClick={() => p.navigate({ name:'module', module:'contracts', sub:'detail', id:it.contract })}>
                <td><span className="mono" style={{ fontWeight:600, color:'var(--primary)' }}>{it.contract}</span></td>
                <td style={{ fontWeight:500 }}>{cust.shortName}</td>
                <td className="muted">{lang === 'vi' ? 'Đợt ' : '#'}{it.no}</td>
                <td className="num mono" style={{ fontWeight:600 }}>{vnd(it.amount)}</td>
                <td className="mono" style={{ fontSize:'var(--fs-base)', color:overdue ? 'var(--error)' : 'inherit' }}>{it.dueDate}{overdue && <i className="bi bi-exclamation-circle" style={{ marginLeft:4 }}></i>}</td>
                <td>{it.paid ? <span className="badge badge-success"><i className="dot"></i>{t('fin.received')}</span> : overdue ? <span className="badge badge-error"><i className="dot"></i>{lang === 'vi' ? 'Quá hạn' : 'Overdue'}</span> : <span className="badge badge-warning"><i className="dot"></i>{t('fin.pending')}</span>}</td>
                <td style={{ textAlign:'right' }} onClick={e => e.stopPropagation()}>{!it.paid && <button className="btn btn-sm btn-primary" onClick={() => markReceived(it)}><i className="bi bi-check2"></i>{t('fin.markReceived')}</button>}</td>
              </tr>
            ); })}
          </tbody>
        </table>
      </div></div>
    </div>
  );
}

function FinExpense(){
  const p = usePortal();
  const { t, tt, lang } = useLang();
  const toast = useToast();
  const [cat, setCat] = React.useState('all');
  const [open, setOpen] = React.useState(false);
  const [editExp, setEditExp] = React.useState(null);
  const list = p.expenses.filter(e => cat === 'all' || e.cat === cat).sort((a, b) => a.date < b.date ? 1 : -1);
  const total = p.expenses.reduce((s, e) => s + e.amount, 0);
  const paid = p.expenses.filter(e => e.status === 'paid').reduce((s, e) => s + e.amount, 0);
  const catName = id => { const c = EXPENSE_CATEGORIES.find(x => x.id === id); return c ? c[lang] : id; };
  return (
    <div className="page pagefade">
      <div className="page-head"><div><h1>{t('fin.expense')}</h1><div className="sub">{lang === 'vi' ? 'Các khoản chi của doanh nghiệp.' : 'Company expenses.'}</div></div>
        <button className="btn btn-primary" onClick={() => setOpen(true)}><i className="bi bi-plus-lg"></i>{t('fin.newExpense')}</button></div>
      <div className="kpi-strip">
        <Kpi label={t('fin.totalOut')} value={vndShort(total)} icon="bi-arrow-up-circle" />
        <Kpi label={lang === 'vi' ? 'Đã chi' : 'Paid'} value={vndShort(paid)} icon="bi-check-circle" />
        <Kpi label={t('fin.pending')} value={vndShort(total - paid)} icon="bi-hourglass-split" />
        <Kpi label={lang === 'vi' ? 'Số khoản' : 'Items'} value={p.expenses.length} icon="bi-list-ul" />
      </div>
      <div className="toolbar"><select className="select" style={{ width:'auto' }} value={cat} onChange={e => setCat(e.target.value)}>
        <option value="all">{t('fin.cat')}: {t('c.all')}</option>{EXPENSE_CATEGORIES.map(c => <option key={c.id} value={c.id}>{c[lang]}</option>)}</select></div>
      <div className="card"><div style={{ overflow:'auto' }}>
        <table className="tbl">
          <thead><tr><th>{lang === 'vi' ? 'Ngày' : 'Date'}</th><th>{t('fin.cat')}</th><th>{t('fin.desc')}</th><th className="num">{lang === 'vi' ? 'Số tiền' : 'Amount'}</th><th>{t('c.status')}</th><th style={{ width:70 }}>{t('c.actions')}</th></tr></thead>
          <tbody>
            {list.map(e => (
              <tr key={e.id} style={{ cursor:'default' }}>
                <td className="mono" style={{ fontSize:'var(--fs-base)' }}>{e.date}</td>
                <td><span className="badge badge-neutral">{catName(e.cat)}</span></td>
                <td style={{ fontWeight:500 }}>{e.desc}</td>
                <td className="num mono" style={{ fontWeight:600, color:'var(--error)' }}>{vnd(e.amount)}</td>
                <td>{e.status === 'paid' ? <span className="badge badge-success"><i className="dot"></i>{lang === 'vi' ? 'Đã chi' : 'Paid'}</span> : <span className="badge badge-warning"><i className="dot"></i>{t('fin.pending')}</span>}</td>
                <td style={{ whiteSpace:'nowrap' }}>
                  <button className="iconbtn" title={t('c.edit')} onClick={() => setEditExp(e)}><i className="bi bi-pencil" style={{ fontSize:12 }}></i></button>
                  <button className="iconbtn" title={t('c.delete')} onClick={() => { if (window.confirm(lang === 'vi' ? 'Xóa khoản chi này?' : 'Delete this expense?')) { p.deleteExpense(e.id); toast(lang === 'vi' ? 'Đã xóa khoản chi' : 'Expense deleted', 'success'); } }}><i className="bi bi-trash" style={{ fontSize:12 }}></i></button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div></div>
      {open && <NewExpenseModal onClose={() => setOpen(false)} />}
      {editExp && <NewExpenseModal editing={editExp} onClose={() => setEditExp(null)} />}
    </div>
  );
}

function NewExpenseModal({ onClose, editing }){
  const p = usePortal();
  const { t, lang } = useLang();
  const toast = useToast();
  const [f, setF] = React.useState(editing ? { date:editing.date, cat:editing.cat, desc:editing.desc, amount:String(editing.amount), status:editing.status } : { date:TODAY, cat:'khac', desc:'', amount:'', status:'pending' });
  const set = (k, v) => setF(s => ({ ...s, [k]:v }));
  const create = () => {
    if (!f.desc.trim() || !(+f.amount > 0)) { toast(lang === 'vi' ? 'Nhập diễn giải và số tiền' : 'Enter description and amount', 'error'); return; }
    if (editing) { p.updateExpense(editing.id, { ...editing, date:f.date, cat:f.cat, desc:f.desc, amount:+f.amount, status:f.status }); toast(lang === 'vi' ? 'Đã lưu' : 'Saved', 'success'); onClose(); return; }
    p.addExpense({ id:'C' + Date.now(), date:f.date, cat:f.cat, desc:f.desc, amount:+f.amount, status:f.status });
    toast(lang === 'vi' ? 'Đã thêm khoản chi' : 'Expense added', 'success'); onClose();
  };
  return (
    <Modal title={editing ? (lang === 'vi' ? 'Sửa khoản chi' : 'Edit expense') : t('fin.newExpense')} width={520} onClose={onClose}
      footer={<><button className="btn" onClick={onClose}>{t('c.cancel')}</button><button className="btn btn-primary" onClick={create}>{editing ? t('c.save') : t('c.create')}</button></>}>
      <div className="col g16">
        <div className="flex g12"><div style={{ flex:1 }}><Field label={lang === 'vi' ? 'Ngày' : 'Date'}><input type="date" className="input" value={f.date} onChange={e => set('date', e.target.value)} /></Field></div>
          <div style={{ flex:1 }}><Field label={t('fin.cat')}><select className="select" value={f.cat} onChange={e => set('cat', e.target.value)}>{EXPENSE_CATEGORIES.map(c => <option key={c.id} value={c.id}>{c[lang]}</option>)}</select></Field></div></div>
        <Field label={t('fin.desc')}><input className="input" value={f.desc} onChange={e => set('desc', e.target.value)} placeholder={lang === 'vi' ? 'Diễn giải khoản chi' : 'Expense description'} /></Field>
        <div className="flex g12"><div style={{ flex:1 }}><Field label={lang === 'vi' ? 'Số tiền (₫)' : 'Amount (₫)'}><input type="number" className="input" value={f.amount} onChange={e => set('amount', e.target.value)} placeholder="0" /></Field></div>
          <div style={{ flex:1 }}><Field label={t('c.status')}><select className="select" value={f.status} onChange={e => set('status', e.target.value)}><option value="pending">{t('fin.pending')}</option><option value="paid">{lang === 'vi' ? 'Đã chi' : 'Paid'}</option></select></Field></div></div>
      </div>
    </Modal>
  );
}

function FinForecast(){
  const p = usePortal();
  const { t, lang } = useLang();
  const inc = incomeItems(p.contracts);
  const months = ['2026-01','2026-02','2026-03','2026-04','2026-05','2026-06','2026-07','2026-08','2026-09','2026-10'];
  const data = months.map(m => ({ m,
    forecast:inc.filter(i => monthKey(i.dueDate) === m).reduce((s, i) => s + i.amount, 0),
    actual:inc.filter(i => i.paid && monthKey(i.paidDate) === m).reduce((s, i) => s + i.amount, 0) }));
  const maxV = Math.max(...data.map(d => Math.max(d.forecast, d.actual)), 1);
  const dueToDate = inc.filter(i => i.dueDate <= TODAY).reduce((s, i) => s + i.amount, 0);
  const actualToDate = inc.filter(i => i.paid).reduce((s, i) => s + i.amount, 0);
  const totalForecast = inc.reduce((s, i) => s + i.amount, 0);
  return (
    <div className="page pagefade">
      <div className="page-head"><div><h1>{t('fin.forecast')}</h1><div className="sub">{lang === 'vi' ? 'Dự báo doanh thu theo lịch HĐ so với thực thu.' : 'Scheduled revenue forecast vs. actual collection.'}</div></div></div>
      <div className="kpi-strip">
        <Kpi label={lang === 'vi' ? 'Dự báo cả năm' : 'Forecast (year)'} value={vndShort(totalForecast)} icon="bi-graph-up-arrow" />
        <Kpi label={lang === 'vi' ? 'Dự báo đến nay' : 'Forecast to-date'} value={vndShort(dueToDate)} icon="bi-calendar-check" />
        <Kpi label={t('fin.actual')} value={vndShort(actualToDate)} icon="bi-cash-coin" deltaDir="up" />
        <Kpi label={t('fin.collectRate')} value={Math.round(actualToDate / dueToDate * 100) + '%'} icon="bi-percent" />
      </div>
      <div className="card"><div className="card-head"><h3>{t('fin.expected')} vs {t('fin.actual')} · 2026</h3>
        <div className="flex g16" style={{ fontSize:'var(--fs-base)' }}>
          <span className="flex g4 items-center"><i style={{ width:9, height:9, borderRadius:2, background:'var(--primary-light-2)', display:'inline-block' }}></i>{t('fin.expected')}</span>
          <span className="flex g4 items-center"><i style={{ width:9, height:9, borderRadius:2, background:'var(--primary)', display:'inline-block' }}></i>{t('fin.actual')}</span>
        </div></div>
        <div className="card-body">
          <div style={{ display:'flex', alignItems:'flex-end', gap:12, height:180 }}>
            {data.map(d => (
              <div key={d.m} style={{ flex:1, display:'flex', flexDirection:'column', alignItems:'center', gap:6 }}>
                <div style={{ position:'relative', width:'100%', maxWidth:34, height:140, display:'flex', alignItems:'flex-end', justifyContent:'center' }}>
                  <div title={'Dự báo ' + vnd(d.forecast)} style={{ position:'absolute', bottom:0, width:'100%', height:Math.max(1, d.forecast / maxV * 140), background:'var(--primary-light-2)', borderRadius:'3px 3px 0 0' }}></div>
                  <div title={'Thực thu ' + vnd(d.actual)} style={{ position:'relative', width:'58%', height:Math.max(1, d.actual / maxV * 140), background:'var(--primary)', borderRadius:'3px 3px 0 0' }}></div>
                </div>
                <div className="subtle" style={{ fontSize:'var(--fs-sm)' }}>{mLabel(d.m, lang)}</div>
              </div>
            ))}
          </div>
          <div className="subtle" style={{ fontSize:'var(--fs-sm)', marginTop:8 }}>{lang === 'vi' ? 'Cột nhạt = dự báo theo lịch thanh toán · cột đậm = đã thực thu' : 'Light = scheduled forecast · solid = actually collected'}</div>
        </div>
      </div>
    </div>
  );
}

function FinSettings(){
  const { t, lang } = useLang();
  return (
    <div className="page pagefade">
      <div className="page-head"><div><h1>{t('c.settings')}</h1><div className="sub">{lang === 'vi' ? 'Hạng mục thu chi.' : 'Income & expense categories.'}</div></div></div>
      <div className="card" style={{ maxWidth:560 }}><div className="card-head"><h3>{lang === 'vi' ? 'Hạng mục chi' : 'Expense categories'}</h3></div>
        <div className="card-body flex g8 wrap">{EXPENSE_CATEGORIES.map(c => <span key={c.id} className="badge badge-neutral" style={{ height:24 }}>{c[lang]}</span>)}</div>
      </div>
    </div>
  );
}

/* Dashboard widget */
function FinanceWidget(){
  const p = usePortal();
  const { t, lang } = useLang();
  const fin = useFinance();
  return (
    <div className="card">
      <div className="card-head"><h3><i className="bi bi-wallet2" style={{ color:'var(--success)', marginRight:6 }}></i>{t('fin.title')}</h3><button className="btn btn-ghost btn-sm" onClick={() => p.openApp(FIN_APP)}>{t('c.viewAll')}</button></div>
      <div className="card-body" style={{ paddingTop:6 }}>
        <div className="flex g16" style={{ marginBottom:10 }}>
          <div><div className="k-val" style={{ fontSize:'var(--fs-xl)', fontWeight:700, color:'var(--success)' }}>{vndShort(fin.realizedIn)}</div><div className="subtle" style={{ fontSize:'var(--fs-sm)' }}>{t('fin.totalIn')}</div></div>
          <div><div className="k-val" style={{ fontSize:'var(--fs-xl)', fontWeight:700, color:'var(--error)' }}>{vndShort(fin.realizedOut)}</div><div className="subtle" style={{ fontSize:'var(--fs-sm)' }}>{t('fin.totalOut')}</div></div>
        </div>
        <div className="flex justify-between items-center" style={{ padding:'8px 0', borderTop:'1px solid var(--border-light)' }}>
          <span className="muted">{t('fin.balance')}</span><span className="mono" style={{ fontWeight:700, fontSize:'var(--fs-lg)', color:'var(--primary)' }}>{vndShort(fin.balance)}</span>
        </div>
        <button className="btn btn-subtle btn-sm" style={{ width:'100%' }} onClick={() => p.openApp(FIN_APP)}><i className="bi bi-arrow-left-right"></i>{t('fin.cashflow')}</button>
      </div>
    </div>
  );
}

Object.assign(window, { FinanceModule, FinanceWidget });