/* Export tab — bundle all artifacts for a project (or site). Shows a file-list manifest grouped by artifact type, with size/count, and big [Download all] button + per-format buttons. Nothing here actually writes files — it's a mock of the UX, but the manifest numbers are derived from real table/mapping counts. */ const ExportTab = ({ project, tables, mapping, scope = 'project' /* 'project' | 'site' */, allProjects }) => { const [selectedFormats, setSelectedFormats] = React.useState({ ddl: true, migration: true, mapping: true, yaml: true, validation: true, dataDict: true, summary: true, }); const [bundleFmt, setBundleFmt] = React.useState('zip'); // zip | tar.gz const [excelFmt, setExcelFmt] = React.useState('xlsx'); // xlsx | html const tableCount = scope === 'site' ? allProjects.reduce((a, p) => a + p.tables, 0) : tables.length; /* Build manifest — a list of (category, file, size) tuples */ const manifest = React.useMemo(() => { const entries = []; const prefix = scope === 'site' ? 'site/' : `${slugify(project?.name || 'project')}/`; if (selectedFormats.ddl) { const list = (scope === 'site' ? allProjects : [project]).flatMap(p => Array.from({ length: p.tables }, (_, i) => ({ cat: 'DDL', path: `${prefix}${slugify(p.name)}/ddl/${paddedName(i)}.sql`, size: rand(i + 11, 4000, 18000), kind: 'sql', })) ); entries.push(...list); } if (selectedFormats.migration) { const list = (scope === 'site' ? allProjects : [project]).flatMap(p => Array.from({ length: p.tables }, (_, i) => ({ cat: 'Migration SQL', path: `${prefix}${slugify(p.name)}/migration/${paddedName(i)}.up.sql`, size: rand(i + 21, 1200, 9200), kind: 'sql', })) ); entries.push(...list); } if (selectedFormats.mapping) { const list = (scope === 'site' ? allProjects : [project]).flatMap(p => Array.from({ length: p.tables }, (_, i) => ({ cat: 'Mapping', path: `${prefix}${slugify(p.name)}/mapping/${paddedName(i)}.map.xlsx`, size: rand(i + 31, 12_000, 42_000), kind: 'xlsx', })) ); entries.push(...list); } if (selectedFormats.yaml) { const list = (scope === 'site' ? allProjects : [project]).flatMap(p => Array.from({ length: p.tables }, (_, i) => ({ cat: 'Pipeline', path: `${prefix}${slugify(p.name)}/pipeline/${paddedName(i)}.pipeline.xlsx`, size: rand(i + 41, 10_000, 26_000), kind: 'xlsx', })) ); entries.push(...list); } if (selectedFormats.validation) { const list = (scope === 'site' ? allProjects : [project]).flatMap(p => Array.from({ length: p.tables }, (_, i) => ({ cat: 'Validation', path: `${prefix}${slugify(p.name)}/validation/${paddedName(i)}.report.xlsx`, size: rand(i + 51, 18_000, 64_000), kind: 'xlsx', })) ); entries.push(...list); } if (selectedFormats.dataDict) { const list = (scope === 'site' ? allProjects : [project]).map(p => ({ cat: 'DB design spec', path: `${prefix}${slugify(p.name)}/db-design-spec.xlsx`, size: 40_000 + p.tables * 2800, kind: 'xlsx', })); entries.push(...list); } if (selectedFormats.summary) { if (scope === 'site') { entries.push({ cat: 'Summary', path: `${prefix}site-summary.xlsx`, size: 680_000, kind: 'xlsx', }); } else { entries.push({ cat: 'Summary', path: `${prefix}project-summary.xlsx`, size: 320_000, kind: 'xlsx', }); } } return entries; }, [selectedFormats, scope, project, allProjects, excelFmt]); const grouped = {}; manifest.forEach(m => { (grouped[m.cat] = grouped[m.cat] || []).push(m); }); const totalSize = manifest.reduce((a, m) => a + m.size, 0); return (
{/* Left: picker */}
{scope === 'site' ? 'site export' : 'project export'}
{scope === 'site' ? (window.TENANT || 'KDB Bank') : project?.name}
{tableCount} tables · {manifest.length} files · {fmtBytes(totalSize)}
Artifact formats setSelectedFormats(s => ({ ...s, ddl: v }))}/> setSelectedFormats(s => ({ ...s, migration: v }))}/> setSelectedFormats(s => ({ ...s, mapping: v }))}/> setSelectedFormats(s => ({ ...s, yaml: v }))}/> setSelectedFormats(s => ({ ...s, validation: v }))}/>
Documents setSelectedFormats(s => ({ ...s, dataDict: v }))}/> setSelectedFormats(s => ({ ...s, summary: v }))}/>
Bundle format
{/* CTA bar */}
} onClick={() => alert(`Generating ${bundleFmt} bundle…\n${manifest.length} files · ${fmtBytes(totalSize)}`)} style={{ width: '100%', justifyContent: 'center', height: 32, fontSize: 12.5 }} > Download bundle ({fmtBytes(totalSize)})
alert('Copying manifest…')}>Copy manifest alert(`Opening DB design spec (${excelFmt})…`)}>Preview spec
signed · sha256 + pgp · will be logged to audit
{/* Right: manifest preview */}
{/* Tab-bar showing the two preview modes */}
); }; /* ============================================================= */ const PreviewArea = ({ manifest, grouped, scope, project, tables, mapping, allProjects, excelFmt }) => { const [view, setView] = React.useState('spec'); // spec | manifest | summary return ( <>
{[ { k: 'spec', l: 'DB design spec' }, { k: 'summary', l: scope === 'site' ? 'Site summary' : 'Project summary' }, { k: 'manifest', l: `Manifest (${manifest.length})` }, ].map(t => ( ))}
preview only · download to save
{view === 'spec' && } {view === 'summary' && } {view === 'manifest' && }
); }; /* ============================================================= */ /* DB Design Spec (Excel-style) preview */ /* ============================================================= */ const DesignSpecPreview = ({ project, tables, mapping, scope, allProjects, fmt }) => { const displayName = scope === 'site' ? (window.TENANT || 'KDB Bank') : project?.name; const sheetList = scope === 'site' ? ['Cover', 'All tables', ...allProjects.map(p => p.name)] : ['Cover', 'Tables', 'Columns', 'Mapping', 'Validation']; const [sheet, setSheet] = React.useState(sheetList[0]); /* fake but plausible per-column spec rows */ const columnSpec = React.useMemo(() => buildColumnSpec(), []); return (
{/* Workbook window */}
{/* Excel-ish title bar */}
X db-design-spec — {slugify(displayName)}.{fmt} · read-only preview
{/* Ribbon */}
{['File','Home','Insert','Page Layout','Formulas','Data','Review','View'].map((m, i) => ( {m} ))}
{/* Cell name/formula row */}
A1
fx = "{displayName} / Database Design Specification"
{/* Sheet content */} {sheet === 'Cover' && a+p.tables,0) : tables.length}/>} {(sheet === 'Tables' || sheet === 'All tables') && } {sheet === 'Columns' && } {sheet === 'Mapping' && } {sheet === 'Validation' && } {scope === 'site' && allProjects.find(p => p.name === sheet) && ( p.name === sheet)]}/> )} {/* Sheet tabs */}
{sheetList.map(s => ( ))}
rendered in-browser · actual file is a native .{fmt} workbook with {sheetList.length} sheet(s)
); }; /* ----- Spec sheets ----- */ const xlsxHead = (cols) => ( {cols.map((c, i) => {String.fromCharCode(65 + i)})} ); const xlsxHeader = (labels) => ( 2 {labels.map((l, i) => ( {l} ))} ); const CoverSheet = ({ displayName, scope, project, allProjects, tableCount }) => ( {xlsxHead(['A','B','C','D'])} {['Ver','Date','Author','Change'].map(h => )} {[ ['v4.12.0','2026-04-21','H. Oh','site export support, add validation sheet'], ['v4.11.0','2026-04-08','H. Oh','character-set conversion plan (EBCDIC-KANA)'], ['v4.10.0','2026-03-22','J. Park','initial spec draft'], ].map((r, i) => ( {r.map((c, j) => )} ))}
1{displayName} — Database Design Specification
2
3Document IDDDS-{slugify(displayName).toUpperCase()}-2026-04-21
4Versionv4.12.0
5Issued2026-04-21 09:41 JST
6AuthorKS Info System
7ClassificationInternal · Migration program
8
9Scope
10 {scope === 'site' ? `Site-wide specification covering all ${allProjects.length} migration projects at ${displayName}, totalling ${tableCount.toLocaleString()} tables.` : `Migration program ${project?.name} — ${tableCount} tables from ${project?.src} to ${project?.tgt}.`}
11
12Revision history
13{h}
{14 + i}{c}
); const TablesSheet = ({ tables, scope, allProjects }) => { const rows = scope === 'site' ? allProjects.flatMap(p => Array.from({length: Math.min(p.tables, 8)}, (_, i) => [ p.name, `TBL_${String(i+1).padStart(3,'0')}`, `${p.src.split(' ')[0]}`, `${p.tgt.split(' ')[0]}`, rand(i,100,500000).toLocaleString(), rand(i,1,40), rand(i,0,2), ])) : tables.map(t => [t.schema, t.name, 'EBCDIC', 'UTF-8', t.rows.toLocaleString(), t.rule, t.issues]); const headers = scope === 'site' ? ['Project','Table','Source enc','Target enc','Rows','Rules','Issues'] : ['Schema','Table','Source enc','Target enc','Rows','Rules','Issues']; return ( {xlsxHead(Array.from({length: headers.length}, (_, i) => i))} {xlsxHeader(headers)} {rows.map((r, i) => ( {r.map((c, j) => ( ))} ))}
{3 + i}= 4 ? 'right' : 'left', fontFamily: j >= 4 ? 'var(--mono)' : 'var(--sans)', color: j === 6 && +c > 0 ? '#a12929' : 'inherit', }}>{c}
); }; const ColumnsSheet = ({ rows }) => ( {xlsxHead(Array.from({length: 9}, (_, i) => i))} {xlsxHeader(['Table','Col #','Source column','Source type','Target column','Target type','Nullable','PK','Transform'])} {rows.map((r, i) => ( {r.map((c, j) => ( ))} ))}
{3 + i}{c}
); const MappingSheet = ({ mapping }) => ( {xlsxHead(Array.from({length: 7}, (_, i) => i))} {xlsxHeader(['Source','Source type','Target','Target type','Rule','Status','Note'])} {mapping.map((m, i) => ( ))}
{3 + i} {m.src} {m.srcType} {m.tgt} {m.tgtType} {m.rule} {m.status} {m.note || '—'}
); const ValidationSheet = ({ tables }) => ( {xlsxHead(Array.from({length: 8}, (_, i) => i))} {xlsxHeader(['Table','Rows ASIS','Rows TOBE','Δ rows','Sum(amt) ASIS','Sum(amt) TOBE','Δ %','Verdict'])} {tables.map((t, i) => { const asis = t.rows; const tobe = t.done || t.rows; const sumA = asis * 1342 + ((i * 31) % 1000); const sumB = sumA - (t.issues || 0) * 1342 + (i % 2 === 0 ? 0 : 2); const delta = sumA ? ((sumB - sumA) / sumA) * 100 : 0; const ok = Math.abs(delta) < 0.001 && t.issues === 0; return ( ); })}
{3 + i} {t.name} {asis.toLocaleString()} {tobe.toLocaleString()} {(tobe - asis) >= 0 ? '+' : ''}{(tobe - asis).toLocaleString()} {sumA.toLocaleString()} {sumB.toLocaleString()} 0.001 ? '#a12929' : '#1e7a2f'}}>{delta.toFixed(4)}% {ok ? '✓ PASS' : '✗ FAIL'}
); /* ============================================================= */ /* Site/Project Summary (PDF-style) */ /* ============================================================= */ const SummaryPreview = ({ scope, project, allProjects }) => { const displayName = scope === 'site' ? (window.TENANT || 'KDB Bank') : project?.name; return (
Migration Program · Summary Report

{displayName}

2026-04-21 · Document DDS-{slugify(displayName).toUpperCase()}-2026-04-21 · KS Info System

1 · Executive summary

This document summarizes the {scope === 'site' ? 'bank-wide' : 'program-scoped'} data migration effort from legacy systems (primarily IBM z/OS mainframe EBCDIC datasets and Oracle 11g/12c) into modernized PostgreSQL 15 targets. As of the issue date, {scope === 'site' ? `${allProjects.length} sub-projects are tracked` : `this program is tracked independently`}, covering {scope === 'site' ? allProjects.reduce((a,p)=>a+p.tables,0).toLocaleString() : project?.tables} tables.

2 · Rows processed

{['Project','Rows total','Processed','%','Errors','Warn'].map(h => ( ))} {(scope === 'site' ? allProjects : [project]).map((p, i) => { const total = p.tables * 180_000 * 1.5; const done = p.status === 'done' ? total : total * (p.status === 'waiting' ? 0.1 : 0.7); return ( ); })}
{h}
{p.name} {abbr(total)} {abbr(done)} {((done/total)*100).toFixed(1)}% {p.status === 'running' ? 2 : 0} {p.status === 'waiting' ? 0 : 4}

3 · Validation results

Row-count reconciliation and SHA-256 checksum verification ran on all completed tables. Amount-column summations (Kahan-compensated) match between source and target within 0.001 % tolerance on {scope === 'site' ? 'all' : 'all'} tables except for known PK-violation rows quarantined to the recovery queue. See appendix A for per-table verdicts.

4 · Known issues

  1. 4 rows in GL_ENTRY violate FK to ACCT_MASTER.account_no (first: AC00881104) — held in recovery queue.
  2. Invalid EBCDIC byte 0x3F at offset 0x1A08B2C in KYC_DOCUMENT — decode aborted, batch requeued.
  3. 14 rows in TXN_JOURNAL_2024 had last_txn_ts = '00000000000000' — null-coerced per mapping rule.

5 · Sign-off

Migration PM · KS Info System
Data Governance · {window.TENANT || 'KDB Bank'}
— Page 1 of 6 —
); }; /* ============================================================= */ /* Manifest preview */ /* ============================================================= */ const ManifestPreview = ({ grouped }) => (
{Object.entries(grouped).map(([cat, files]) => (
{cat} {files.length} files · {fmtBytes(files.reduce((a, f) => a + f.size, 0))} {files.slice(0, 80).map((f, i) => ( ))} {files.length > 80 && ( )}
{f.path} {f.kind} {fmtBytes(f.size)}
…{files.length - 80} more files
))}
); /* ============================================================= */ /* small helpers */ /* ============================================================= */ const SectionHead = ({ children }) => (
{children}
); const CheckRow = ({ label, hint, checked, onChange }) => ( ); const Seg = ({ options, value, onChange }) => (
{options.map((o, i) => ( ))}
); const xlsxTable = { width: '100%', borderCollapse: 'collapse', fontSize: 11, fontFamily: 'var(--sans)' }; const corner = { width: 32, background: '#f3f2f1', borderBottom: '1px solid #d0cfce', borderRight: '1px solid #d0cfce' }; const colHead = { padding: '2px 6px', background: '#f3f2f1', color: '#605e5c', borderBottom: '1px solid #d0cfce', borderRight: '1px solid #d0cfce', fontSize: 10.5, fontWeight: 500, fontFamily: 'var(--mono)', minWidth: 80, textAlign: 'center', }; const rowNum = { background: '#f3f2f1', color: '#605e5c', fontFamily: 'var(--mono)', borderRight: '1px solid #d0cfce', borderBottom: '1px solid #e1dfdd', fontSize: 10.5, padding: '2px 6px', textAlign: 'right', width: 32, }; const cell = { padding: '3px 8px', borderRight: '1px solid #e1dfdd', borderBottom: '1px solid #e1dfdd', fontSize: 11, color: '#1a2330', whiteSpace: 'nowrap', }; const summaryH2 = { fontSize: 15, margin: '18px 0 6px', fontWeight: 700 }; const summaryP = { fontSize: 12.5, lineHeight: 1.55, color: '#1a2330', margin: '0 0 10px' }; const miniBtn2 = { padding: '1px 7px', fontSize: 10.5, border: '1px solid var(--border-strong)', background: 'var(--panel)', borderRadius: 3, cursor: 'pointer', color: 'var(--text-2)', fontFamily: 'var(--sans)', }; function slugify(s) { return String(s || '').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, ''); } function paddedName(i) { return `tbl_${String(i + 1).padStart(3, '0')}`; } function rand(seed, lo, hi) { const x = ((seed * 9301 + 49297) % 233280) / 233280; return Math.round(lo + x * (hi - lo)); } function fmtBytes(n) { if (n >= 1e9) return (n / 1e9).toFixed(2) + ' GB'; if (n >= 1e6) return (n / 1e6).toFixed(1) + ' MB'; if (n >= 1e3) return (n / 1e3).toFixed(1) + ' KB'; return n + ' B'; } function buildColumnSpec() { /* A few dozen sample rows across multiple tables */ const out = []; const tbls = ['ACCT_MASTER', 'CUST_PROFILE', 'TXN_JOURNAL_2024', 'LOAN_REPAYMENT', 'GL_ENTRY']; const samples = [ ['ACCT_NO','CHAR(16)','account_no','VARCHAR(16)','NO','✓','auto'], ['CUST_ID','CHAR(10)','customer_id','VARCHAR(10)','NO','—','auto'], ['BR_CODE','CHAR(4)','branch_code','CHAR(4)','NO','—','auto'], ['BAL_AMT','COMP-3 S9(13)V99','balance_amount','NUMERIC(15,2)','NO','—','unpack.comp3'], ['OPEN_DT','CHAR(8) YYYYMMDD','opened_at','DATE','NO','—','to_date(?,YYYYMMDD)'], ['STATUS_FLG','CHAR(1)','status','VARCHAR(12)','NO','—','LOOKUP(status_dict)'], ['ACCT_NAME_KANJI','CHAR(40) EBCDIC-KANA','account_name','VARCHAR(80)','YES','—','iconv ebcdic-kana→utf-8'], ['FILLER_01','CHAR(20)','—','—','YES','—','SKIP (padding)'], ['UPD_TS','CHAR(14)','updated_at','TIMESTAMP','YES','—','to_ts(YYYYMMDDHHMISS)'], ]; tbls.forEach(t => { samples.forEach((r, idx) => out.push([t, idx + 1, ...r])); }); return out; } Object.assign(window, { ExportTab });