// contracts.jsx — CONTRACTS module + ContractStore + widget.
const HD_APP = APPS.find(a => a.id === 'contracts');

function catLabel(id, lang){ const c = CONTRACT_CATEGORIES.find(x => x.id === id); return c ? c[lang] || c.vi : id; }
function genContractCode(list){
  const yr = TODAY.slice(0, 4);
  const max = list.reduce((m, c) => { const mm = (c.code || '').match(new RegExp('HD-' + yr + '-(\\d+)')); return mm ? Math.max(m, +mm[1]) : m; }, 0);
  return 'HD-' + yr + '-' + String(max + 1).padStart(3, '0');
}

function HdStatusBadge({ c }){
  const { lang } = useLang(); const st = contractStatus(c); const s = CONTRACT_STATUS[st];
  return <span className={'badge ' + s.cls}><i className="dot"></i>{s[lang] || s.vi}</span>;
}

function ContractModule(){
  const p = usePortal();
  const { t } = useLang();
  const sub = p.route.sub || 'overview';
  const expiring = p.contracts.filter(c => contractStatus(c) === 'expiring').length;
  const items = [
    { id:'overview', icon:'bi-pie-chart', label:t('c.overview') },
    { id:'list', icon:'bi-list-ul', label:t('c.list'), count:p.contracts.length },
    { id:'report', icon:'bi-bar-chart', label:t('c.report') },
    { id:'settings', icon:'bi-gear', label:t('c.settings') },
  ];
  const go = (id, extra) => p.navigate({ name:'module', module:'contracts', sub:id, ...extra });
  return (<>
    <ModuleSidebar app={HD_APP} items={items} active={sub === 'detail' ? 'list' : sub} onNavigate={go} />
    <main className="main">
      {sub === 'overview' && <HdOverview go={go} expiring={expiring} />}
      {sub === 'list' && <HdList go={go} />}
      {sub === 'detail' && <HdDetail code={p.route.id} go={go} />}
      {sub === 'report' && <HdReport />}
      {sub === 'settings' && <HdSettings />}
    </main>
  </>);
}

function RenewBanner({ contracts, go }){
  const { t, lang } = useLang();
  const exp = contracts.filter(c => contractStatus(c) === 'expiring');
  if (!exp.length) return null;
  return (
    <div className="card" style={{ borderColor:'var(--warning)', background:'var(--warning-bg)', marginBottom:14 }}>
      <div className="card-body col g8">
        <div className="flex g8 items-center" style={{ color:'var(--warning)', fontWeight:600 }}><i className="bi bi-alarm" style={{ fontSize:16 }}></i>{t('hd.renewHint')} ({exp.length})</div>
        {exp.map(c => {
          const d = daysBetween(TODAY, c.endDate);
          return (
            <div key={c.code} className="flex items-center g8" style={{ fontSize:'var(--fs-md)' }}>
              <span className="mono" style={{ fontWeight:600, color:'var(--primary)' }}>{c.code}</span>
              <span className="grow truncate">{(CustomerStore.byCode(c.customer) || {}).name}</span>
              <span className="badge badge-warning">{d} {t('hd.daysLeft')}</span>
              <button className="btn btn-sm" onClick={() => go('detail', { id:c.code })}>{t('c.details')}</button>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function HdOverview({ go }){
  const p = usePortal();
  const { t, lang } = useLang();
  const cs = p.contracts;
  const totalValue = cs.reduce((s, c) => s + contractTotals(c).total, 0);
  const byCat = {}; cs.forEach(c => { const v = contractTotals(c).total; byCat[c.category] = (byCat[c.category] || 0) + v; });
  const byStatus = {}; cs.forEach(c => { const st = contractStatus(c); byStatus[st] = (byStatus[st] || 0) + 1; });
  const colors = ['var(--primary)','var(--accent)','#7A5AF8','var(--warning)','var(--success)'];
  return (
    <div className="page pagefade">
      <div className="page-head"><div><h1>{t('hd.title')}</h1><div className="sub">{lang === 'vi' ? 'Tổng quan danh mục hợp đồng.' : 'Contract portfolio overview.'}</div></div>
        <button className="btn btn-primary" onClick={() => p.quick('contracts')}><i className="bi bi-plus-lg"></i>{t('hd.new')}</button></div>
      <div className="kpi-strip">
        <Kpi label={t('hd.title')} value={cs.length} icon="bi-file-earmark-text" />
        <Kpi label={CONTRACT_STATUS.active[lang]} value={cs.filter(c => contractStatus(c) === 'active').length} icon="bi-check-circle" />
        <Kpi label={t('hd.expiringSoon')} value={cs.filter(c => contractStatus(c) === 'expiring').length} icon="bi-alarm" />
        <Kpi label={t('hd.value')} value={vndShort(totalValue)} icon="bi-cash-stack" />
      </div>
      <RenewBanner contracts={cs} go={go} />
      <div className="dash-grid">
        <div className="card span2"><div className="card-head"><h3>{lang === 'vi' ? 'Giá trị theo loại HĐ' : 'Value by category'}</h3></div><div className="card-body">
          <DistribBars rows={Object.entries(byCat).sort((a, b) => b[1] - a[1]).map(([k, v], i) => ({ label:catLabel(k, lang), value:Math.round(v / 1e6), color:colors[i % colors.length] }))} />
          <div className="subtle" style={{ fontSize:'var(--fs-sm)', marginTop:6 }}>{lang === 'vi' ? 'Đơn vị: triệu đồng' : 'Unit: million VND'}</div>
        </div></div>
        <div className="card"><div className="card-head"><h3>{t('c.status')}</h3></div><div className="card-body">
          <DistribBars rows={Object.keys(CONTRACT_STATUS).filter(k => byStatus[k]).map((k, i) => ({ label:CONTRACT_STATUS[k][lang], value:byStatus[k] || 0, color:colors[i % colors.length] }))} />
        </div></div>
      </div>
    </div>
  );
}

function HdList({ go }){
  const p = usePortal();
  const { t, lang } = useLang();
  const [q, setQ] = React.useState('');
  const [cat, setCat] = React.useState('all');
  const [status, setStatus] = React.useState('all');
  const list = p.contracts.filter(c => {
    const cust = CustomerStore.byCode(c.customer) || {};
    return (cat === 'all' || c.category === cat) && (status === 'all' || contractStatus(c) === status) &&
      (!q || (c.code + (cust.name || '') + (cust.shortName || '')).toLowerCase().includes(q.toLowerCase()));
  });
  return (
    <div className="page pagefade">
      <div className="page-head"><div><h1>{t('c.list')}</h1><div className="sub">{list.length} {lang === 'vi' ? 'hợp đồng' : 'contracts'}</div></div>
        <button className="btn btn-primary" onClick={() => p.quick('contracts')}><i className="bi bi-plus-lg"></i>{t('hd.new')}</button></div>
      <div className="toolbar">
        <div className="topsearch" style={{ width:220, background:'var(--bg)', border:'1px solid var(--border-strong)' }}><i className="bi bi-search"></i>
          <input value={q} onChange={e => setQ(e.target.value)} placeholder={t('c.search')} style={{ border:'none', outline:'none', background:'transparent', flex:1 }} /></div>
        <select className="select" style={{ width:'auto' }} value={cat} onChange={e => setCat(e.target.value)}>
          <option value="all">{t('hd.category')}: {t('c.all')}</option>
          {CONTRACT_CATEGORIES.map(c => <option key={c.id} value={c.id}>{c[lang]}</option>)}
        </select>
        <div className="seg">
          {['all','active','expiring','draft','completed'].map(s => <button key={s} className={status === s ? 'is-active' : ''} onClick={() => setStatus(s)}>{s === 'all' ? t('c.all') : CONTRACT_STATUS[s][lang]}</button>)}
        </div>
      </div>
      <div className="card"><div style={{ overflow:'auto' }}>
        <table className="tbl">
          <thead><tr><th>{t('hd.code')}</th><th>{t('hd.category')}</th><th>{t('ct.customer')}</th><th>{t('hd.signDate')}</th><th>{t('hd.term')}</th><th className="num">{t('hd.value')}</th><th>{t('c.status')}</th></tr></thead>
          <tbody>
            {list.map(c => {
              const cust = CustomerStore.byCode(c.customer) || {};
              return (
                <tr key={c.code} onClick={() => go('detail', { id:c.code })}>
                  <td><span className="mono" style={{ fontWeight:600, color:'var(--primary)' }}>{c.code}</span></td>
                  <td className="muted">{catLabel(c.category, lang)}</td>
                  <td style={{ fontWeight:500 }}>{cust.shortName || cust.name}</td>
                  <td className="mono" style={{ fontSize:'var(--fs-base)' }}>{c.signDate}</td>
                  <td className="muted">{c.termType === 'term' ? <span className="mono" style={{ fontSize:'var(--fs-base)' }}>{c.endDate}</span> : TERM_TYPES.once[lang]}</td>
                  <td className="num" style={{ fontWeight:600 }}>{vndShort(contractTotals(c).total)}</td>
                  <td><HdStatusBadge c={c} /></td>
                </tr>
              );
            })}
          </tbody>
        </table>
        {!list.length && <EmptyState text={t('c.empty')} />}
      </div></div>
    </div>
  );
}

function HdDetail({ code, go }){
  const p = usePortal();
  const { t, lang } = useLang();
  const toast = useToast();
  const [editing, setEditing] = React.useState(false);
  const c = p.contracts.find(x => x.code === code);
  if (!c) return <div className="page"><EmptyState text={t('c.empty')} /></div>;
  const cust = CustomerStore.byCode(c.customer) || {};
  const rep = c.rep ? (ContactStore.byCode(c.rep) || {}) : {};
  const tot = contractTotals(c);
  const st = contractStatus(c);
  const paidSum = c.schedule.filter(s => s.paid).reduce((s, x) => s + x.amount, 0);
  const markPaid = (no) => {
    const ns = { ...c, schedule:c.schedule.map(s => s.no === no ? { ...s, paid:true, paidDate:TODAY } : s) };
    p.patchContract(c.code, ns); toast(lang === 'vi' ? 'Đã ghi nhận thanh toán đợt ' + no : 'Payment ' + no + ' recorded', 'success');
  };
  const renew = () => {
    if (c.termType !== 'term') return;
    const newEnd = new Date(c.endDate); newEnd.setFullYear(newEnd.getFullYear() + 1);
    p.patchContract(c.code, { ...c, startDate:c.endDate, endDate:newEnd.toISOString().slice(0, 10), status:'active' });
    toast(lang === 'vi' ? 'Đã gia hạn hợp đồng đến ' + newEnd.toISOString().slice(0, 10) : 'Renewed to ' + newEnd.toISOString().slice(0, 10), 'success');
  };
  return (
    <div className="page pagefade">
      <div className="page-head">
        <div className="flex g12 items-center">
          <button className="btn btn-ghost btn-icon" onClick={() => go('list')}><i className="bi bi-arrow-left"></i></button>
          <div><h1 style={{ fontSize:'var(--fs-2xl)' }}>{c.code}</h1>
            <div className="sub flex g8 items-center">{catLabel(c.category, lang)} · <HdStatusBadge c={c} /> · <span style={{ fontWeight:600 }}>{vnd(tot.total)}</span></div></div>
        </div>
        <div className="flex g8">
          {st === 'expiring' && <button className="btn btn-accent" onClick={renew}><i className="bi bi-arrow-repeat"></i>{t('hd.renew')}</button>}
          <button className="btn" onClick={() => setEditing(true)}><i className="bi bi-pencil"></i>{t('c.edit')}</button>
          <button className="btn btn-icon" title={t('c.delete')} onClick={() => { if (window.confirm((lang === 'vi' ? 'Xóa hợp đồng ' : 'Delete contract ') + c.code + '?')) { p.deleteContract(c.code); toast((lang === 'vi' ? 'Đã xóa ' : 'Deleted ') + c.code, 'success'); go('list'); } }}><i className="bi bi-trash"></i></button>
          <button className="btn" onClick={() => toast(lang === 'vi' ? 'Xuất PDF (demo)' : 'Export PDF (demo)', 'info')}><i className="bi bi-printer"></i></button>
          {editing && <NewContractModal editing={c} onClose={() => setEditing(false)} />}
        </div>
      </div>

      {st === 'expiring' && (
        <div className="card" style={{ borderColor:'var(--warning)', background:'var(--warning-bg)', marginBottom:14 }}><div className="card-body flex g8 items-center" style={{ color:'var(--warning)', fontWeight:600 }}>
          <i className="bi bi-alarm" style={{ fontSize:16 }}></i>{t('hd.renewHint')} — {daysBetween(TODAY, c.endDate)} {t('hd.daysLeft')} ({c.endDate})
          <button className="btn btn-sm btn-accent" style={{ marginLeft:'auto' }} onClick={renew}><i className="bi bi-arrow-repeat"></i>{t('hd.renew')}</button>
        </div></div>
      )}

      <div className="split" style={{ marginBottom:14 }}>
        <div className="card"><div className="card-head"><h3>{t('hd.parties')}</h3></div><div className="card-body">
          <div className="flex g12 items-center" style={{ marginBottom:10 }}>
            <Avatar name={cust.shortName || cust.name} size={36} square color="var(--primary)" />
            <div><div style={{ fontWeight:600 }}>{cust.name}</div><div className="mono subtle" style={{ fontSize:'var(--fs-sm)' }}>{c.customer}</div></div>
          </div>
          <div className="det-row"><span className="dk">{t('cust.mst')}</span><span className="dv mono">{cust.mst}</span></div>
          <div className="det-row"><span className="dk">{t('hd.address')}</span><span className="dv" style={{ maxWidth:200 }}>{CUSTOMER_ADDR[c.customer] || '—'}</span></div>
          <div className="det-row"><span className="dk">{t('hd.rep')}</span><span className="dv">{rep.name || '—'}</span></div>
          <div className="det-row"><span className="dk">{t('ct.title2')}</span><span className="dv">{rep.title || '—'}</span></div>
        </div></div>
        <div className="card"><div className="card-head"><h3 style={{ fontSize:'var(--fs-md)' }}>{lang === 'vi' ? 'Thông tin hiệu lực' : 'Term info'}</h3></div><div className="card-body">
          <div className="det-row"><span className="dk">{t('hd.signDate')}</span><span className="dv mono">{c.signDate}</span></div>
          <div className="det-row"><span className="dk">{t('hd.termType')}</span><span className="dv">{TERM_TYPES[c.termType][lang]}</span></div>
          {c.termType === 'term' && <>
            <div className="det-row"><span className="dk">{t('hd.start')}</span><span className="dv mono">{c.startDate}</span></div>
            <div className="det-row"><span className="dk">{t('hd.end')}</span><span className="dv mono">{c.endDate}</span></div>
            <div className="det-row"><span className="dk">{lang === 'vi' ? 'Nhắc gia hạn' : 'Renew reminder'}</span><span className="dv">{lang === 'vi' ? 'Trước ' : '' }{c.remindBefore} {lang === 'vi' ? 'ngày' : 'days before'}</span></div>
          </>}
        </div></div>
      </div>

      {/* products */}
      <div className="card" style={{ marginBottom:14 }}>
        <div className="card-head"><h3>{t('hd.items')}</h3></div>
        <div style={{ overflow:'auto' }}>
          <table className="tbl">
            <thead><tr><th style={{ width:36 }}>#</th><th>{t('hd.items')}</th><th>{t('hd.unit')}</th><th className="num">{t('hd.qty')}</th><th className="num">{t('hd.price')}</th><th className="num">{t('hd.amount')}</th><th className="num">{t('hd.vat')}</th><th className="num">{t('hd.total')}</th></tr></thead>
            <tbody>
              {c.items.map((it, i) => { const line = it.qty * it.price; const v = line * it.vat / 100; return (
                <tr key={i} style={{ cursor:'default' }}>
                  <td className="muted">{i + 1}</td><td style={{ fontWeight:500 }}>{it.name}</td><td className="muted">{it.unit}</td>
                  <td className="num">{it.qty}</td><td className="num mono">{vnd(it.price)}</td><td className="num mono">{vnd(line)}</td>
                  <td className="num muted">{it.vat}%</td><td className="num mono" style={{ fontWeight:600 }}>{vnd(line + v)}</td>
                </tr>
              ); })}
            </tbody>
            <tfoot>
              <tr style={{ cursor:'default' }}><td colSpan="5"></td><td className="num muted">{t('hd.subtotal')}</td><td colSpan="2" className="num mono">{vnd(tot.sub)}</td></tr>
              <tr style={{ cursor:'default' }}><td colSpan="5"></td><td className="num muted">{t('hd.vatTotal')}</td><td colSpan="2" className="num mono">{vnd(tot.vat)}</td></tr>
              <tr style={{ cursor:'default', background:'var(--bg-subtle)' }}><td colSpan="5"></td><td className="num" style={{ fontWeight:700 }}>{t('hd.total')}</td><td colSpan="2" className="num mono" style={{ fontWeight:700, color:'var(--primary)' }}>{vnd(tot.total)}</td></tr>
            </tfoot>
          </table>
        </div>
      </div>

      {/* schedule */}
      <div className="card">
        <div className="card-head"><h3>{t('hd.schedule')}</h3>
          <span className="badge badge-info">{t('hd.paid')}: {vndShort(paidSum)} / {vndShort(tot.total)}</span></div>
        <div style={{ overflow:'auto' }}>
          <table className="tbl">
            <thead><tr><th style={{ width:50 }}>{t('hd.installment')}</th><th className="num">{lang === 'vi' ? 'Số tiền' : 'Amount'}</th><th>{t('hd.dueDate')}</th><th>{t('hd.condition')}</th><th>{t('c.status')}</th><th></th></tr></thead>
            <tbody>
              {c.schedule.map(s => (
                <tr key={s.no} style={{ cursor:'default' }}>
                  <td style={{ fontWeight:600 }}>{s.no}</td>
                  <td className="num mono" style={{ fontWeight:600 }}>{vnd(s.amount)}</td>
                  <td className="mono" style={{ fontSize:'var(--fs-base)' }}>{s.dueDate}</td>
                  <td className="muted">{s.condition}</td>
                  <td>{s.paid ? <span className="badge badge-success"><i className="dot"></i>{t('hd.paid')}{s.paidDate ? ' · ' + s.paidDate : ''}</span> : <span className="badge badge-warning"><i className="dot"></i>{t('hd.unpaid')}</span>}</td>
                  <td style={{ textAlign:'right' }}>{!s.paid && <button className="btn btn-sm btn-primary" onClick={() => markPaid(s.no)}><i className="bi bi-check2"></i>{t('hd.markPaid')}</button>}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

function HdReport(){
  const p = usePortal();
  const { t, lang } = useLang();
  const cs = p.contracts;
  const byCust = {}; cs.forEach(c => { byCust[c.customer] = (byCust[c.customer] || 0) + contractTotals(c).total; });
  const top = Object.entries(byCust).sort((a, b) => b[1] - a[1]).slice(0, 8);
  const totalValue = cs.reduce((s, c) => s + contractTotals(c).total, 0);
  return (
    <div className="page pagefade">
      <div className="page-head"><div><h1>{t('c.report')}</h1><div className="sub">{lang === 'vi' ? 'Giá trị hợp đồng theo khách hàng.' : 'Contract value by customer.'}</div></div>
        <button className="btn"><i className="bi bi-download"></i>{lang === 'vi' ? 'Xuất Excel' : 'Export'}</button></div>
      <div className="kpi-strip">
        <Kpi label={t('hd.value')} value={vndShort(totalValue)} icon="bi-cash-stack" />
        <Kpi label={lang === 'vi' ? 'TB / hợp đồng' : 'Avg / contract'} value={vndShort(totalValue / cs.length)} icon="bi-graph-up" />
        <Kpi label={t('hd.title')} value={cs.length} icon="bi-file-earmark-text" />
        <Kpi label={t('hd.expiringSoon')} value={cs.filter(c => contractStatus(c) === 'expiring').length} icon="bi-alarm" />
      </div>
      <div className="card"><div className="card-head"><h3>{lang === 'vi' ? 'Top khách hàng theo giá trị' : 'Top customers by value'}</h3></div><div style={{ overflow:'auto' }}>
        <table className="tbl"><thead><tr><th>{t('ct.customer')}</th><th className="num">{lang === 'vi' ? 'Số HĐ' : 'Contracts'}</th><th className="num">{t('hd.value')}</th><th className="num">{lang === 'vi' ? 'Tỷ lệ' : 'Share'}</th></tr></thead>
          <tbody>{top.map(([code, v]) => { const cust = CustomerStore.byCode(code) || {}; const n = cs.filter(c => c.customer === code).length; return (
            <tr key={code} style={{ cursor:'default' }}><td><span className="flex g8 items-center"><Avatar name={cust.shortName || code} size={22} />{cust.name || code}</span></td><td className="num">{n}</td><td className="num mono" style={{ fontWeight:600 }}>{vnd(v)}</td><td className="num muted">{Math.round(v / totalValue * 100)}%</td></tr>
          ); })}</tbody></table>
      </div></div>
    </div>
  );
}

function HdSettings(){
  const { t, lang } = useLang();
  const toast = useToast();
  const [cats, setCats] = React.useState(CONTRACT_CATEGORIES.map(c => c[lang] || c.vi));
  const [draft, setDraft] = React.useState('');
  return (
    <div className="page pagefade">
      <div className="page-head"><div><h1>{t('c.settings')}</h1><div className="sub">{lang === 'vi' ? 'Danh mục loại hợp đồng.' : 'Contract categories.'}</div></div></div>
      <div className="card" style={{ maxWidth:560 }}>
        <div className="card-head"><h3>{lang === 'vi' ? 'Danh mục hợp đồng' : 'Contract categories'}</h3></div>
        <div className="card-body col g12">
          <div className="flex g8 wrap">{cats.map(c => <span key={c} className="badge badge-neutral" style={{ height:24 }}>{c}<button onClick={() => setCats(s => s.filter(x => x !== c))} style={{ border:'none', background:'none', marginLeft:4 }}><i className="bi bi-x"></i></button></span>)}</div>
          <div className="flex g8"><input className="input" value={draft} onChange={e => setDraft(e.target.value)} placeholder={lang === 'vi' ? 'Thêm loại HĐ…' : 'Add category…'} />
            <button className="btn btn-primary" onClick={() => { if (draft.trim()) { setCats(s => [...s, draft.trim()]); setDraft(''); toast(lang === 'vi' ? 'Đã thêm' : 'Added'); } }}>{t('c.create')}</button></div>
        </div>
      </div>
    </div>
  );
}

/* Dashboard widget */
function ContractWidget(){
  const p = usePortal();
  const { t, lang } = useLang();
  const cs = p.contracts;
  const expiring = cs.filter(c => contractStatus(c) === 'expiring');
  const totalValue = cs.reduce((s, c) => s + contractTotals(c).total, 0);
  return (
    <div className="card">
      <div className="card-head"><h3><i className="bi bi-file-earmark-text" style={{ color:'#0B4FBF', marginRight:6 }}></i>{t('hd.title')}</h3><button className="btn btn-ghost btn-sm" onClick={() => p.openApp(HD_APP)}>{t('c.viewAll')}</button></div>
      <div className="card-body" style={{ paddingTop:6 }}>
        <div className="flex g16" style={{ marginBottom:8 }}>
          <div><div className="k-val" style={{ fontSize:'var(--fs-2xl)', fontWeight:700 }}>{cs.length}</div><div className="subtle" style={{ fontSize:'var(--fs-sm)' }}>{lang === 'vi' ? 'hợp đồng' : 'contracts'}</div></div>
          <div><div className="k-val" style={{ fontSize:'var(--fs-2xl)', fontWeight:700 }}>{vndShort(totalValue)}</div><div className="subtle" style={{ fontSize:'var(--fs-sm)' }}>{t('hd.value')}</div></div>
        </div>
        {expiring.length > 0 && <div className="flex g8 items-center" style={{ color:'var(--warning)', fontSize:'var(--fs-base)', fontWeight:600, marginBottom:6 }}><i className="bi bi-alarm"></i>{expiring.length} {t('hd.expiringSoon').toLowerCase()}</div>}
        {cs.slice(0, 3).map(c => (
          <div key={c.code} className="list-row" style={{ cursor:'pointer' }} onClick={() => p.navigate({ name:'module', module:'contracts', sub:'detail', id:c.code })}>
            <span className="mono" style={{ fontWeight:600, color:'var(--primary)', fontSize:'var(--fs-base)', width:88 }}>{c.code}</span><span className="grow truncate">{(CustomerStore.byCode(c.customer) || {}).shortName}</span><HdStatusBadge c={c} />
          </div>
        ))}
        <button className="btn btn-subtle btn-sm" style={{ width:'100%', marginTop:8 }} onClick={() => p.quick('contracts')}><i className="bi bi-plus-lg"></i>{t('hd.new')}</button>
      </div>
    </div>
  );
}

Object.assign(window, { ContractModule, ContractWidget, genContractCode, catLabel, HdStatusBadge });