// BILLING PLATFORM — Dashboard + Time & WIP tabs
const { useState: useBlDashState, useMemo: useBlDashMemo } = React;
const Tbd = window.ArbiterTokens;

function BillingDashboard({ data }) {
  const bl = window.__bl;
  const k = data.kpis;
  const fp = data.firmProfile;
  const ytdPct = (k.ytdBilled / fp.annualTargetRevenue) * 100;
  const trend = data.realization.monthlyTrend;
  const maxTrend = Math.max(...trend.map(t => t.worked));

  return (
    <div>
      {/* Top KPI strip — 6 cards */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: '12px', marginBottom: '16px' }}>
        <div style={bl.stat}>
          <span style={bl.statLabel}>YTD Billed</span>
          <span style={bl.statValue}>{bl.money(k.ytdBilled)}</span>
          <span style={{ ...bl.statDelta, color: bl.emerald }}>↑ {ytdPct.toFixed(0)}% of {bl.money(fp.annualTargetRevenue)} target</span>
        </div>
        <div style={bl.stat}>
          <span style={bl.statLabel}>YTD Collected</span>
          <span style={bl.statValue}>{bl.money(k.ytdCollected)}</span>
          <span style={{ ...bl.statDelta, color: Tbd.color.text.tertiary }}>{((k.ytdCollected / k.ytdBilled) * 100).toFixed(1)}% of billed</span>
        </div>
        <div style={bl.stat}>
          <span style={bl.statLabel}>Realization — overall</span>
          <span style={{ ...bl.statValue, color: bl.realColor(k.realizationOverall) }}>{k.realizationOverall}%</span>
          <span style={{ ...bl.statDelta, color: Tbd.color.text.tertiary }}>work → cash</span>
        </div>
        <div style={bl.stat}>
          <span style={bl.statLabel}>WIP</span>
          <span style={bl.statValue}>{bl.money(k.wipTotal)}</span>
          <span style={{ ...bl.statDelta, color: bl.amber }}>{bl.money(k.wipAgedOver60)} aged 60+</span>
        </div>
        <div style={bl.stat}>
          <span style={bl.statLabel}>AR Outstanding</span>
          <span style={bl.statValue}>{bl.money(k.arTotal)}</span>
          <span style={{ ...bl.statDelta, color: bl.crimson }}>{bl.money(k.arOver90)} at 91+ days</span>
        </div>
        <div style={bl.stat}>
          <span style={bl.statLabel}>DSO</span>
          <span style={{ ...bl.statValue, color: k.dso > 80 ? bl.amber : bl.emerald }}>{k.dso}</span>
          <span style={{ ...bl.statDelta, color: Tbd.color.text.tertiary }}>days — target 75</span>
        </div>
      </div>

      {/* Row 2: trend chart + alerts */}
      <div style={{ display: 'grid', gridTemplateColumns: '2.2fr 1fr', gap: '16px', marginBottom: '16px' }}>
        <div style={bl.card}>
          <div style={bl.cardH}>
            <span>Revenue trend — Worked / Billed / Collected (last 12 months)</span>
            <div style={{ display: 'flex', gap: '12px', fontSize: '10px' }}>
              <span style={{ color: bl.slate }}>■ Worked</span>
              <span style={{ color: bl.teal }}>■ Billed</span>
              <span style={{ color: bl.emerald }}>■ Collected</span>
            </div>
          </div>
          <div style={{ padding: '18px 16px 14px', display: 'flex', gap: '10px', alignItems: 'flex-end', height: '180px' }}>
            {trend.map((t, i) => (
              <div key={t.m} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '4px' }}>
                <div style={{ display: 'flex', gap: '2px', alignItems: 'flex-end', height: '140px', width: '100%', justifyContent: 'center' }}>
                  <div style={{ width: '26%', height: `${(t.worked / maxTrend) * 100}%`, background: bl.slate, opacity: 0.6, borderRadius: '2px 2px 0 0' }} title={`Worked: $${t.worked}M`} />
                  <div style={{ width: '26%', height: `${(t.billed / maxTrend) * 100}%`, background: bl.teal, borderRadius: '2px 2px 0 0' }} title={`Billed: $${t.billed}M`} />
                  <div style={{ width: '26%', height: `${(t.collected / maxTrend) * 100}%`, background: bl.emerald, borderRadius: '2px 2px 0 0' }} title={`Collected: $${t.collected}M`} />
                </div>
                <span style={{ fontSize: '9px', color: Tbd.color.text.tertiary, fontFamily: Tbd.font.mono }}>{t.m}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Alerts */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
          <div style={{ ...bl.card, marginBottom: 0, borderLeft: `3px solid ${bl.crimson}` }}>
            <div style={{ ...bl.cardH, color: bl.crimson }}>! Critical alerts</div>
            <div style={{ padding: '10px 16px', display: 'flex', flexDirection: 'column', gap: '8px' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '12px' }}>
                <span style={{ color: Tbd.color.text.secondary }}>Past-due invoices (60+ days)</span>
                <span style={{ color: bl.crimson, fontWeight: 700 }}>{k.pastDueInvoices}</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '12px' }}>
                <span style={{ color: Tbd.color.text.secondary }}>Budget breaches this week</span>
                <span style={{ color: bl.amber, fontWeight: 700 }}>{k.budgetBreaches}</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '12px' }}>
                <span style={{ color: Tbd.color.text.secondary }}>Trust variances flagged</span>
                <span style={{ color: bl.crimson, fontWeight: 700 }}>{k.trustAlerts}</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '12px' }}>
                <span style={{ color: Tbd.color.text.secondary }}>Timekeepers missing time</span>
                <span style={{ color: bl.amber, fontWeight: 700 }}>{k.missingTime}</span>
              </div>
            </div>
          </div>

          <div style={{ ...bl.card, marginBottom: 0, borderLeft: `3px solid ${bl.violet}` }}>
            <div style={{ ...bl.cardH, color: bl.violet }}>Trust compliance</div>
            <div style={{ padding: '10px 16px', display: 'flex', flexDirection: 'column', gap: '8px' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '12px' }}>
                <span style={{ color: Tbd.color.text.secondary }}>Total trust balance</span>
                <span style={{ color: Tbd.color.text.primary, fontWeight: 700, fontFamily: Tbd.font.mono }}>{bl.money(k.trustTotal)}</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '12px' }}>
                <span style={{ color: Tbd.color.text.secondary }}>Active IOLTA accounts</span>
                <span style={{ color: Tbd.color.text.primary, fontWeight: 700, fontFamily: Tbd.font.mono }}>{k.trustAccounts}</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '12px' }}>
                <span style={{ color: Tbd.color.text.secondary }}>Reconciled this period</span>
                <span style={{ color: bl.emerald, fontWeight: 700, fontFamily: Tbd.font.mono }}>{k.trustReconciledPct}%</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Row 3: realization funnel + top performers */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: '16px' }}>
        <div style={bl.card}>
          <div style={bl.cardH}>Realization funnel — YTD</div>
          <div style={{ padding: '18px 16px' }}>
            {[
              { label: 'Worked', value: data.realization.funnel.worked, pct: 100, color: bl.slate },
              { label: 'Billed', value: data.realization.funnel.billed, pct: (data.realization.funnel.billed / data.realization.funnel.worked) * 100, color: bl.teal },
              { label: 'Collected', value: data.realization.funnel.collected, pct: (data.realization.funnel.collected / data.realization.funnel.worked) * 100, color: bl.emerald },
            ].map(step => (
              <div key={step.label} style={{ marginBottom: '14px' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '12px', marginBottom: '5px' }}>
                  <span style={{ color: Tbd.color.text.primary, fontWeight: 600 }}>{step.label}</span>
                  <span style={{ fontFamily: Tbd.font.mono, color: Tbd.color.text.secondary }}>{bl.money(step.value)} · {step.pct.toFixed(1)}%</span>
                </div>
                <div style={{ height: '22px', background: Tbd.color.border.light, borderRadius: '4px', overflow: 'hidden', position: 'relative' }}>
                  <div style={{ width: `${step.pct}%`, height: '100%', background: `linear-gradient(90deg, ${step.color} 0%, ${step.color}CC 100%)`, borderRadius: '4px', display: 'flex', alignItems: 'center', justifyContent: 'flex-end', paddingRight: '8px', color: '#fff', fontSize: '10px', fontWeight: 700 }}>
                    {step.pct.toFixed(1)}%
                  </div>
                </div>
              </div>
            ))}
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '12px', marginTop: '10px', padding: '10px 0 0', borderTop: `1px solid ${Tbd.color.border.light}` }}>
              <div><div style={{ fontSize: '9px', color: Tbd.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Work→Bill</div><div style={{ fontSize: '16px', fontWeight: 700, color: bl.realColor(k.realizationWorked), fontFamily: Tbd.font.mono }}>{k.realizationWorked}%</div></div>
              <div><div style={{ fontSize: '9px', color: Tbd.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Bill→Cash</div><div style={{ fontSize: '16px', fontWeight: 700, color: bl.realColor(k.realizationBilled), fontFamily: Tbd.font.mono }}>{k.realizationBilled}%</div></div>
              <div><div style={{ fontSize: '9px', color: Tbd.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Overall</div><div style={{ fontSize: '16px', fontWeight: 700, color: bl.realColor(k.realizationOverall), fontFamily: Tbd.font.mono }}>{k.realizationOverall}%</div></div>
            </div>
          </div>
        </div>

        <div style={bl.card}>
          <div style={bl.cardH}>Top rainmakers — projected origination</div>
          <div>
            {data.forecast.partnerComp.map((p, i) => {
              const max = Math.max(...data.forecast.partnerComp.map(x => x.projectedOrig));
              return (
                <div key={p.partner} style={{ padding: '10px 16px', borderBottom: i < data.forecast.partnerComp.length - 1 ? `1px solid ${Tbd.color.border.light}` : 'none' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '4px', alignItems: 'baseline' }}>
                    <span style={{ fontSize: '12px', fontWeight: 600, color: Tbd.color.text.primary }}>{p.partner}</span>
                    <span style={{ display: 'flex', gap: '10px', alignItems: 'baseline' }}>
                      <span style={{ fontFamily: Tbd.font.mono, color: Tbd.color.text.secondary, fontSize: '11px' }}>{bl.money(p.projectedOrig)}</span>
                      <span style={{ fontSize: '10px', fontWeight: 700, color: p.vsPriorYr >= 0 ? bl.emerald : bl.crimson, minWidth: '40px', textAlign: 'right' }}>{p.vsPriorYr >= 0 ? '↑' : '↓'}{Math.abs(p.vsPriorYr)}%</span>
                    </span>
                  </div>
                  <div style={{ height: '4px', background: Tbd.color.border.light, borderRadius: '2px', overflow: 'hidden' }}>
                    <div style={{ width: `${(p.projectedOrig / max) * 100}%`, height: '100%', background: bl.emerald }} />
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

function BillingTimeWIP({ data }) {
  const bl = window.__bl;
  const [view, setView] = useBlDashState('time'); // time | wip | missing

  const totalWIP = data.wipByMatter.reduce((s, m) => s + m.wip, 0);
  const overBudgetCount = data.wipByMatter.filter(m => m.budgetBurn > 80).length;
  const totalUnbilledToday = data.timeEntries.filter(t => t.status === 'Unbilled' && t.date === '2026-04-20').reduce((s, t) => s + t.amount, 0);

  return (
    <div>
      {/* KPI strip */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: '12px', marginBottom: '16px' }}>
        <div style={bl.stat}>
          <span style={bl.statLabel}>Entries today</span>
          <span style={bl.statValue}>{data.timeEntries.filter(t => t.date === '2026-04-20').length}</span>
          <span style={{ ...bl.statDelta, color: Tbd.color.text.tertiary }}>{bl.money(totalUnbilledToday)} unbilled</span>
        </div>
        <div style={bl.stat}>
          <span style={bl.statLabel}>Total WIP</span>
          <span style={bl.statValue}>{bl.money(totalWIP)}</span>
          <span style={{ ...bl.statDelta, color: Tbd.color.text.tertiary }}>across {data.wipByMatter.length} matters</span>
        </div>
        <div style={bl.stat}>
          <span style={bl.statLabel}>Aged 60+</span>
          <span style={{ ...bl.statValue, color: bl.amber }}>{bl.money(data.kpis.wipAgedOver60)}</span>
          <span style={{ ...bl.statDelta, color: Tbd.color.text.tertiary }}>oldest 74 days</span>
        </div>
        <div style={bl.stat}>
          <span style={bl.statLabel}>Over-budget soon</span>
          <span style={{ ...bl.statValue, color: bl.crimson }}>{overBudgetCount}</span>
          <span style={{ ...bl.statDelta, color: Tbd.color.text.tertiary }}>&gt; 80% burn</span>
        </div>
        <div style={bl.stat}>
          <span style={bl.statLabel}>Missing time</span>
          <span style={{ ...bl.statValue, color: bl.amber }}>{data.missingTime.length}</span>
          <span style={{ ...bl.statDelta, color: Tbd.color.text.tertiary }}>timekeepers below target</span>
        </div>
      </div>

      {/* Sub-toggle */}
      <div style={{ display: 'flex', gap: '6px', marginBottom: '14px', padding: '4px', background: Tbd.color.bg.secondary, borderRadius: '8px', border: `1px solid ${Tbd.color.border.light}`, width: 'fit-content' }}>
        {[{ k: 'time', l: 'Time entries' }, { k: 'wip', l: 'WIP by matter' }, { k: 'missing', l: 'Missing time' }].map(t => (
          <button key={t.k} onClick={() => setView(t.k)} style={{
            padding: '5px 14px', borderRadius: '5px', border: 'none',
            background: view === t.k ? Tbd.color.bg.card : 'transparent',
            color: view === t.k ? bl.emerald : Tbd.color.text.secondary,
            fontSize: '11px', fontWeight: view === t.k ? 700 : 500, cursor: 'pointer', fontFamily: Tbd.font.family,
          }}>{t.l}</button>
        ))}
      </div>

      {view === 'time' && (
        <div style={bl.card}>
          <div style={bl.cardH}>
            <span>Time entries — last {data.timeEntries.length}</span>
            <div style={{ display: 'flex', gap: '6px' }}>
              <button style={bl.btnSecondary}>Import CSV</button>
              <button style={bl.btnPrimary}>+ New entry</button>
            </div>
          </div>
          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
            <thead>
              <tr>
                <th style={bl.th}>Date</th>
                <th style={bl.th}>Timekeeper</th>
                <th style={bl.th}>Matter</th>
                <th style={{ ...bl.th, textAlign: 'right' }}>Hours</th>
                <th style={{ ...bl.th, textAlign: 'right' }}>Rate</th>
                <th style={{ ...bl.th, textAlign: 'right' }}>Amount</th>
                <th style={bl.th}>Task</th>
                <th style={bl.th}>Narrative</th>
                <th style={bl.th}>Status</th>
              </tr>
            </thead>
            <tbody>
              {data.timeEntries.map(t => (
                <tr key={t.id}>
                  <td style={{ ...bl.td, fontFamily: Tbd.font.mono, fontSize: '11px', color: Tbd.color.text.tertiary }}>{t.date}</td>
                  <td style={bl.td}>
                    <div style={{ fontSize: '12px', fontWeight: 600, color: Tbd.color.text.primary }}>{t.timekeeper}</div>
                    <div style={{ fontSize: '10px', color: Tbd.color.text.tertiary }}>{t.role}</div>
                  </td>
                  <td style={{ ...bl.td, color: Tbd.color.text.secondary, maxWidth: '200px' }}>{t.matter}</td>
                  <td style={{ ...bl.td, textAlign: 'right', fontFamily: Tbd.font.mono, color: Tbd.color.text.primary, fontWeight: 600 }}>{t.hours.toFixed(1)}</td>
                  <td style={{ ...bl.td, textAlign: 'right', fontFamily: Tbd.font.mono, color: Tbd.color.text.secondary }}>{t.rate > 0 ? `$${t.rate}` : '—'}</td>
                  <td style={{ ...bl.td, textAlign: 'right', fontFamily: Tbd.font.mono, color: t.billable ? Tbd.color.text.primary : Tbd.color.text.tertiary, fontWeight: 700 }}>{bl.money(t.amount)}</td>
                  <td style={{ ...bl.td, fontFamily: Tbd.font.mono, fontSize: '11px', color: Tbd.color.text.tertiary }}>{t.task || '—'}</td>
                  <td style={{ ...bl.td, color: Tbd.color.text.secondary, maxWidth: '360px', fontSize: '11px', lineHeight: 1.5 }}>{t.narrative}</td>
                  <td style={bl.td}>
                    <span style={{ ...bl.tag, ...(t.status === 'Unbilled' ? { background: bl.amberBg, color: bl.amber } : t.status === 'Billed' ? { background: bl.emeraldBg, color: bl.emerald } : { background: Tbd.color.bg.secondary, color: Tbd.color.text.secondary }) }}>{t.status}</span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {view === 'wip' && (
        <div style={bl.card}>
          <div style={bl.cardH}>
            <span>WIP by matter — {data.wipByMatter.length}</span>
            <button style={bl.btnSecondary}>Export</button>
          </div>
          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
            <thead>
              <tr>
                <th style={bl.th}>Matter</th>
                <th style={bl.th}>Client</th>
                <th style={bl.th}>Billing partner</th>
                <th style={{ ...bl.th, textAlign: 'right' }}>WIP</th>
                <th style={{ ...bl.th, textAlign: 'right' }}>Entries</th>
                <th style={{ ...bl.th, textAlign: 'right' }}>Oldest (days)</th>
                <th style={bl.th}>Budget burn</th>
                <th style={bl.th}>AFA</th>
                <th style={bl.th}>Status</th>
              </tr>
            </thead>
            <tbody>
              {data.wipByMatter.map(w => {
                const burnColor = w.budgetBurn > 80 ? bl.crimson : w.budgetBurn > 60 ? bl.amber : bl.emerald;
                const statusStyle = w.status === 'Over budget soon' ? { bg: bl.crimsonBg, color: bl.crimson }
                  : w.status === 'Watch' ? { bg: bl.amberBg, color: bl.amber }
                  : { bg: bl.emeraldBg, color: bl.emerald };
                return (
                  <tr key={w.matterId}>
                    <td style={{ ...bl.td, fontWeight: 600, color: Tbd.color.text.primary, maxWidth: '280px' }}>
                      {w.matter}
                      <div style={{ fontFamily: Tbd.font.mono, fontSize: '10px', color: Tbd.color.text.tertiary, marginTop: '2px' }}>{w.matterId}</div>
                    </td>
                    <td style={{ ...bl.td, color: Tbd.color.text.secondary }}>{w.client}</td>
                    <td style={{ ...bl.td, color: Tbd.color.text.secondary }}>{w.billingPartner}</td>
                    <td style={{ ...bl.td, textAlign: 'right', fontFamily: Tbd.font.mono, color: Tbd.color.text.primary, fontWeight: 700 }}>{bl.money(w.wip)}</td>
                    <td style={{ ...bl.td, textAlign: 'right', fontFamily: Tbd.font.mono, color: Tbd.color.text.secondary }}>{w.entries}</td>
                    <td style={{ ...bl.td, textAlign: 'right', fontFamily: Tbd.font.mono, color: w.oldest > 60 ? bl.amber : Tbd.color.text.secondary, fontWeight: 600 }}>{w.oldest}</td>
                    <td style={bl.td}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                        <div style={{ width: '80px', height: '4px', background: Tbd.color.border.light, borderRadius: '2px', overflow: 'hidden' }}>
                          <div style={{ width: `${Math.min(100, w.budgetBurn)}%`, height: '100%', background: burnColor }} />
                        </div>
                        <span style={{ fontFamily: Tbd.font.mono, fontSize: '11px', color: burnColor, fontWeight: 600, minWidth: '40px', textAlign: 'right' }}>{w.budgetBurn.toFixed(1)}%</span>
                      </div>
                    </td>
                    <td style={{ ...bl.td }}><span style={{ ...bl.tag, background: bl.tealBg, color: bl.teal }}>{w.afa}</span></td>
                    <td style={bl.td}><span style={{ ...bl.tag, background: statusStyle.bg, color: statusStyle.color }}>{w.status}</span></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}

      {view === 'missing' && (
        <div style={bl.card}>
          <div style={bl.cardH}>
            <span>Timekeepers below target this week — {data.missingTime.length}</span>
            <button style={bl.btnSecondary}>Send reminders</button>
          </div>
          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
            <thead>
              <tr>
                <th style={bl.th}>Timekeeper</th>
                <th style={bl.th}>Role</th>
                <th style={{ ...bl.th, textAlign: 'right' }}>Hours this week</th>
                <th style={{ ...bl.th, textAlign: 'right' }}>Target</th>
                <th style={bl.th}>Fill rate</th>
                <th style={{ ...bl.th, textAlign: 'right' }}>Missing days</th>
                <th style={bl.th}>Last entry</th>
              </tr>
            </thead>
            <tbody>
              {data.missingTime.map(m => {
                const pct = (m.hoursThisWeek / m.target) * 100;
                const color = pct >= 80 ? bl.amber : bl.crimson;
                return (
                  <tr key={m.timekeeper}>
                    <td style={{ ...bl.td, fontWeight: 600, color: Tbd.color.text.primary }}>{m.timekeeper}</td>
                    <td style={{ ...bl.td, color: Tbd.color.text.secondary }}>{m.role}</td>
                    <td style={{ ...bl.td, textAlign: 'right', fontFamily: Tbd.font.mono, color: Tbd.color.text.primary, fontWeight: 700 }}>{m.hoursThisWeek.toFixed(1)}</td>
                    <td style={{ ...bl.td, textAlign: 'right', fontFamily: Tbd.font.mono, color: Tbd.color.text.secondary }}>{m.target}</td>
                    <td style={bl.td}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                        <div style={{ width: '100px', height: '4px', background: Tbd.color.border.light, borderRadius: '2px', overflow: 'hidden' }}>
                          <div style={{ width: `${Math.min(100, pct)}%`, height: '100%', background: color }} />
                        </div>
                        <span style={{ fontFamily: Tbd.font.mono, fontSize: '11px', color, fontWeight: 600 }}>{pct.toFixed(0)}%</span>
                      </div>
                    </td>
                    <td style={{ ...bl.td, textAlign: 'right', fontFamily: Tbd.font.mono, color: bl.crimson, fontWeight: 700 }}>{m.missingDays}</td>
                    <td style={{ ...bl.td, color: Tbd.color.text.tertiary, fontSize: '11px' }}>{m.lastEntry}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}

window.BillingDashboard = BillingDashboard;
window.BillingTimeWIP = BillingTimeWIP;