/* Site-wide overview — "All projects" dashboard Shows: - Top KPI tiles: total projects, total tables, total rows, processed rows, errors, warnings - Per-project progress table with row bars (rows total vs processed) - Status mix ring + stage breakdown + recent errors - Export-site button (delegates to onExportSite) */ const Site = ({ projects, onOpenProject, onExportSite, onOpenExportTab }) => { /* Derive synthetic per-project stats that look plausible. Keyed by id so the numbers are stable across renders. */ const stats = React.useMemo(() => { const rnd = (seed) => { let x = seed; return () => (x = (x * 9301 + 49297) % 233280) / 233280; }; return projects.map((p, i) => { const r = rnd(i + 7); const base = p.tables * 180_000; const total = Math.round(base * (0.6 + r() * 1.8)); let done; if (p.status === 'done') done = total; else if (p.status === 'waiting') done = Math.round(total * r() * 0.25); else done = Math.round(total * (0.5 + r() * 0.45)); return { ...p, rowsTotal: total, rowsDone: done, pct: total ? (done / total) * 100 : 0, errors: p.status === 'running' ? Math.floor(r() * 4) : (p.status === 'waiting' ? 0 : Math.floor(r() * 2)), warnings: Math.floor(r() * 8), artifacts: p.tables * 5, }; }); }, [projects]); const totals = stats.reduce((a, s) => ({ projects: a.projects + 1, tables: a.tables + s.tables, rowsTotal: a.rowsTotal + s.rowsTotal, rowsDone: a.rowsDone + s.rowsDone, errors: a.errors + s.errors, warnings: a.warnings + s.warnings, artifacts: a.artifacts + s.artifacts, running: a.running + (s.status === 'running' ? 1 : 0), waiting: a.waiting + (s.status === 'waiting' ? 1 : 0), done: a.done + (s.status === 'done' ? 1 : 0), }), { projects: 0, tables: 0, rowsTotal: 0, rowsDone: 0, errors: 0, warnings: 0, artifacts: 0, running: 0, waiting: 0, done: 0 }); const pctTotal = totals.rowsTotal ? (totals.rowsDone / totals.rowsTotal) * 100 : 0; return (
{/* Left column: KPIs + table */}
{/* Header */}
site overview · {window.TENANT || 'KDB Bank'}
All projects
{totals.projects} projects · {totals.tables.toLocaleString()} tables · {totals.artifacts.toLocaleString()} artifact files
}>Refresh } onClick={onOpenExportTab}>Site export… } onClick={onExportSite}>Download all
{/* KPI tiles */}
{/* Overall progress bar */}
Overall progress {abbr(totals.rowsDone)} / {abbr(totals.rowsTotal)} rows · {pctTotal.toFixed(2)}%
eta 04:12:07 · throughput 298 MB/s
s.status === 'done').length}`}/>
{/* Projects table */}
{['Project','Source → Target','Tables','Rows (done / total)','Progress','Errors','Warn','Updated','Actions'] .map((h, i) => ( ))} {stats.map((s, i) => ( onOpenProject(s.id)} onMouseEnter={e => e.currentTarget.style.background = 'var(--navy-50)'} onMouseLeave={e => e.currentTarget.style.background = i % 2 ? 'var(--zebra)' : 'transparent'} > ))}
= 2 && i <= 6 ? 'right' : 'left', padding: '7px 10px', fontSize: 10, fontWeight: 600, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: 0.6, fontFamily: 'var(--mono)', whiteSpace: 'nowrap', }}>{h}
{s.name}
{shorten(s.src)} → {shorten(s.tgt)} {s.tables} {abbr(s.rowsDone)} / {abbr(s.rowsTotal)}
{s.pct.toFixed(0)}%
{s.errors || '—'} {s.warnings || '—'} {s.updated}
{/* Right column: visual rollups */}
); }; /* ============ sub components ============ */ const Kpi = ({ label, value, sub, tone }) => { const color = { ok: 'var(--green)', err: 'var(--red)', warn: 'var(--amber)', info: 'var(--navy)', }[tone]; return (
{label}
{value}
{sub}
); }; const StackedBar = ({ stats }) => { const total = stats.reduce((a, s) => a + s.rowsTotal, 0) || 1; return (
{stats.map((s, i) => { const w = (s.rowsTotal / total) * 100; const done = (s.rowsDone / s.rowsTotal) * 100 || 0; const tone = s.status === 'done' ? 'var(--green)' : s.status === 'waiting' ? 'var(--text-4)' : 'var(--amber)'; return (
); })}
); }; const LegendDot = ({ tone, label }) => ( {label} ); const Panel = ({ title, children, last }) => (
{title}
{children}
); const Donut = ({ segments }) => { const total = segments.reduce((a, s) => a + s.value, 0) || 1; const R = 42, C = 2 * Math.PI * R; let offset = 0; const tones = { running: 'var(--amber)', waiting: 'var(--text-4)', ok: 'var(--green)', }; return (
{segments.map((s, i) => { const len = (s.value / total) * C; const dash = `${len} ${C - len}`; const el = ( ); offset += len; return el; })}
{segments.map(s => (
{s.label} {s.value} {((s.value / total) * 100).toFixed(0)}%
))}
); }; const StageBars = ({ stats }) => { /* Pretend aggregate stage completion using the same weights STAGES uses */ const base = [ { label: 'Extract', pct: 100 }, { label: 'Encode', pct: 98 }, { label: 'Unpack', pct: 82 }, { label: 'Transform', pct: 61 }, { label: 'Validate', pct: 34 }, { label: 'Load', pct: 18 }, { label: 'Verify', pct: 7 }, ]; return (
{base.map(s => (
{s.label}
{s.pct}%
))}
); }; const MixList = ({ stats, field }) => { const map = {}; stats.forEach(s => { map[s[field]] = (map[s[field]] || 0) + 1; }); const rows = Object.entries(map).sort((a, b) => b[1] - a[1]); const max = Math.max(...rows.map(r => r[1])); return (
{field === 'src' ? 'source systems' : 'target systems'}
{rows.map(([k, v]) => (
{shorten(k)}
{v}
))}
); }; const IssueFeed = () => { const items = [ { tone: 'err', proj: 'Core Ledger', text: 'FK violation GL_ENTRY.acct_no (4 rows)', when: '2m' }, { tone: 'err', proj: 'Deposit Accounts', text: 'invalid EBCDIC byte 0x3F at offset 0x1A0..', when: '4m' }, { tone: 'warn', proj: 'Core Ledger', text: 'last_txn_ts null-coerced on 14 rows', when: '6m' }, { tone: 'warn', proj: 'Loan Origination', text: 'soft-dedupe CUST_CONTACT (3 rows)', when: '12m' }, { tone: 'warn', proj: 'FX Treasury', text: 'kanji codepoint outside JIS X 0208 (2)', when: '18m' }, ]; return (
{items.map((it, i) => (
{it.text}
{it.proj} · {it.when} ago
))}
); }; const miniBtn = { padding: '2px 8px', fontSize: 11, border: '1px solid var(--border-strong)', background: 'var(--panel)', borderRadius: 3, cursor: 'pointer', color: 'var(--text-2)', fontFamily: 'var(--sans)', }; function abbr(n) { if (n >= 1e9) return (n / 1e9).toFixed(2) + 'B'; if (n >= 1e6) return (n / 1e6).toFixed(1) + 'M'; if (n >= 1e3) return (n / 1e3).toFixed(1) + 'K'; return String(n); } function shorten(s) { return s.replace('Mainframe ', 'MF ').replace('PostgreSQL', 'PG').replace('Oracle', 'Ora').replace('Linux / ', ''); } Object.assign(window, { Site });