// HungryDB — UI components // Phases: idle → dragging → extracting → database const { useState, useEffect, useRef, useMemo, useCallback } = React; /* ────────────────────────────────────────────────────────────────────── */ /* Icons — minimal stroke set */ /* ────────────────────────────────────────────────────────────────────── */ const Icon = ({ name, size = 16, stroke = 1.4 }) => { const s = { width: size, height: size, fill: "none", stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round" }; switch (name) { case "users": return ; case "box": return ; case "receipt": return ; case "truck": return ; case "clipboard": return ; case "list": return ; case "upload": return ; case "x": return ; case "arrow": return ; case "sparkle": return ; case "download": return ; case "search": return ; case "check": return ; case "chevron": return ; case "activity": return ; case "trend-up": return ; case "trend-dn": return ; case "plus": return ; case "filter": return ; case "sort": return ; default: return null; } }; /* ────────────────────────────────────────────────────────────────────── */ /* File icons — flat, format-coded */ /* ────────────────────────────────────────────────────────────────────── */ const FileIcon = ({ kind, size = 36 }) => { const palette = { excel: { bg: "#1F6F47", label: "XLSX" }, pdf: { bg: "#B23A2E", label: "PDF" }, word: { bg: "#2A5BB0", label: "DOCX" }, csv: { bg: "#5A6E3A", label: "CSV" }, scan: { bg: "#7A6450", label: "SCAN" }, }[kind] || { bg: "#666", label: "FILE" }; return (

{palette.label}

); }; /* ────────────────────────────────────────────────────────────────────── */ /* DropZone — phase: idle / dragging */ /* ────────────────────────────────────────────────────────────────────── */ const DropZone = ({ onDrop, sector }) => { const [dragging, setDragging] = useState(false); const [hoveredFile, setHoveredFile] = useState(null); const data = window.HUNGRYDB_DATA; // Floating preview chips (decorative — represent files-to-be-dropped) const chips = data.SOURCE_FILES; return (

{/* Header */}

HungryDB

{sector}

{/* Centerpiece */}

Step 1 of 2

Drop in everything.
We build the database.

Excel, PDFs, Word, scanned receipts, CSV exports from your legacy ERP. No prep. No clean tables required.

{/* The actual drop area */}

{ e.preventDefault(); setDragging(true); }} onDragLeave={() => setDragging(false)} onDrop={(e) => { e.preventDefault(); setDragging(false); onDrop(); }} onClick={onDrop} >

Drop files here

or browse · up to 2 GB

{/* Floating decorative file chips */}

{chips.map((f, i) => (

setHoveredFile(f.id)} onMouseLeave={() => setHoveredFile(null)} >

{f.name}

{f.size}

))}

XLSX· PDF· DOCX· CSV· JPG / Scan· PNG

GoBD compliant · Hosted in Frankfurt, DE · End-to-end encrypted

); }; /* ────────────────────────────────────────────────────────────────────── */ /* ExtractionView — animated parsing */ /* ────────────────────────────────────────────────────────────────────── */ const ExtractionView = ({ onDone, sector }) => { const [progress, setProgress] = useState(0); const [activeFile, setActiveFile] = useState(0); const [messages, setMessages] = useState([]); const data = window.HUNGRYDB_DATA; const files = data.SOURCE_FILES; const SCRIPT = useMemo(() => [ { t: 200, m: "Files received", k: "info" }, { t: 500, m: "Sector detected: Bakery / Pastry", k: "infer" }, { t: 900, m: "customer_list_2024.xlsx — 5 customers, 7 fields", k: "ok" }, { t: 1300, m: "invoice_2026-04-12.pdf — 4 line items, VAT 7%", k: "ok" }, { t: 1600, m: "order_millmann_supply.docx — supplier matched", k: "ok" }, { t: 1900, m: "handwritten_receipt.jpg — OCR + handwriting recognition", k: "ok" }, { t: 2200, m: "legacy_erp_export_2023.csv — 1,812 bookings", k: "ok" }, { t: 2500, m: "Relations resolved: 4 foreign keys", k: "infer" }, { t: 2800, m: "Schema ready", k: "done" }, ], []); useEffect(() => { const start = performance.now(); const TOTAL = 3100; let raf; const tick = () => { const elapsed = performance.now() - start; const p = Math.min(1, elapsed / TOTAL); setProgress(p); setActiveFile(Math.min(files.length - 1, Math.floor(p * files.length))); if (p < 1) raf = requestAnimationFrame(tick); else setTimeout(onDone, 350); }; raf = requestAnimationFrame(tick); const timers = SCRIPT.map(s => setTimeout(() => { setMessages(prev => [...prev, s]); }, s.t)); return () => { cancelAnimationFrame(raf); timers.forEach(clearTimeout); }; }, []); return (

{/* Left: files being parsed */}

Sources

{files.map((f, i) => { const state = i < activeFile ? "done" : i === activeFile ? "active" : "wait"; return (

{f.name}

{f.note}

{state === "done" && } {state === "active" && } {state === "wait" && ·}

); })}

{/* Center: animated extraction visualization */}

Extraction

{[...Array(48)].map((_, i) => (

))}

{Math.round(progress * 100)}

Detecting fields

{/* Right: live log */}

Log

{messages.map((m, i) => (

{m.m}

))}

); }; /* ────────────────────────────────────────────────────────────────────── */ /* Schema helpers — clone, fuzzy search, slug, singularize, PK generator */ /* ────────────────────────────────────────────────────────────────────── */ const cloneTables = (tables) => { const out = {}; for (const k of Object.keys(tables)) { const t = tables[k]; out[k] = { ...t, pos: { ...(t.pos || { x: 80, y: 80 }) }, fields: t.fields.map(f => ({ ...f })), rows: t.rows.map(r => ({ ...r, _provenance: { ...(r._provenance || {}) } })), }; } return out; }; const singularize = (s) => s.endsWith("ies") ? s.slice(0, -3) + "y" : s.endsWith("ses") ? s.slice(0, -2) : s.endsWith("s") ? s.slice(0, -1) : s; const slugifyTableKey = (label, existing) => { let base = label.trim().toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_+|_+$/g, "") || "table"; let k = base, i = 2; while (existing.includes(k)) k = `${base}_${i++}`; return k; }; const nextPkValue = (table) => { const pk = table.fields.find(f => f.pk); if (!pk) return ""; const n = (table.rows?.length || 0) + 1; if (pk.type === "int") return n; const prefix = (table.label || "row").replace(/[^A-Za-z]/g, "").slice(0, 1).toUpperCase() || "R"; return `${prefix}${String(n).padStart(3, "0")}`; }; const fuzzyFind = (tables, q) => { const needle = q.trim().toLowerCase(); if (!needle) return []; const out = []; for (const k of Object.keys(tables)) { const t = tables[k]; if (t.label.toLowerCase().includes(needle) || k.toLowerCase().includes(needle)) { out.push({ kind: "table", table: k, label: t.label, hint: `${t.rows.length} rows · ${t.fields.length} fields` }); } for (let ci = 0; ci < t.fields.length; ci++) { const f = t.fields[ci]; if (f.name.toLowerCase().includes(needle)) { out.push({ kind: "field", table: k, col: ci, label: `${t.label} · ${f.name}`, hint: f.type + (f.pk ? " · PK" : f.ref ? ` → ${f.ref}` : "") }); } } for (let ri = 0; ri < t.rows.length && out.length < 40; ri++) { const row = t.rows[ri]; for (let ci = 0; ci < t.fields.length; ci++) { const f = t.fields[ci]; const val = row[f.name]; if (val === null || val === undefined) continue; const sv = String(val); if (sv.toLowerCase().includes(needle)) { out.push({ kind: "row", table: k, rowIdx: ri, col: ci, label: sv, hint: `${t.label} · ${f.name} · row ${ri + 1}` }); break; } } } if (out.length > 40) break; } return out.slice(0, 14); }; /* Inline form for creating a new table from the sidebar */ const NewTableForm = ({ parents, onCreate, onCancel }) => { const [name, setName] = useState(""); const [parent, setParent] = useState(""); return ( ); }; /* ────────────────────────────────────────────────────────────────────── */ /* Activity feed — animated ingest cards */ /* ────────────────────────────────────────────────────────────────────── */ // Pre-seeded ingest cards so the Activity panel feels lived-in on first load. // These are "done" already — no animation, fully expandable. const seedActivityEvents = () => ([ { id: "seed-1", fileName: "handwritten_receipt.jpg", fileSize: "412 KB", kind: "scan", table: "invoices", tableLabel: "Invoices", rowIdx: null, addedRows: 1, detectedFields: 5, cells: [ { name: "id", type: "pk", value: "INV-0143", pk: true }, { name: "customer_id", type: "fk", value: "C003", ref: "customers" }, { name: "date", type: "date", value: "2026-04-28" }, { name: "amount", type: "money", value: "84.20" }, { name: "status", type: "text", value: "paid" }, ], ts: Date.now() - 1000 * 60 * 4, }, { id: "seed-2", fileName: "millmann_supply_order.docx", fileSize: "28 KB", kind: "word", table: "orders", tableLabel: "Supplier Orders", rowIdx: null, addedRows: 1, detectedFields: 4, cells: [ { name: "id", type: "pk", value: "O-0042", pk: true }, { name: "supplier_id", type: "fk", value: "S001", ref: "suppliers" }, { name: "date", type: "date", value: "2026-04-22" }, { name: "total", type: "money", value: "1840.00" }, ], ts: Date.now() - 1000 * 60 * 27, }, { id: "seed-3", fileName: "customer_list_march.xlsx", fileSize: "64 KB", kind: "excel", table: "customers", tableLabel: "Customers", rowIdx: null, addedRows: 3, detectedFields: 4, cells: [ { name: "id", type: "pk", value: "C006", pk: true }, { name: "name", type: "text", value: "Café Murnau" }, { name: "city", type: "text", value: "Garmisch" }, { name: "since", type: "date", value: "2026-03-14" }, ], ts: Date.now() - 1000 * 60 * 60 * 3, }, { id: "seed-4", fileName: "invoice_2026-04-12.pdf", fileSize: "118 KB", kind: "pdf", table: "invoices", tableLabel: "Invoices", rowIdx: null, addedRows: 1, detectedFields: 5, cells: [ { name: "id", type: "pk", value: "INV-0140", pk: true }, { name: "customer_id", type: "fk", value: "C002", ref: "customers" }, { name: "date", type: "date", value: "2026-04-12" }, { name: "amount", type: "money", value: "212.29" }, { name: "status", type: "text", value: "open" }, ], ts: Date.now() - 1000 * 60 * 60 * 26, }, ]); const relTime = (ts) => { const s = Math.max(1, Math.floor((Date.now() - ts) / 1000)); if (s < 60) return `${s}s ago`; if (s < 3600) return `${Math.floor(s/60)}m ago`; if (s < 86400) return `${Math.floor(s/3600)}h ago`; return `${Math.floor(s/86400)}d ago`; }; // IngestCard — animates through reading → extracting → linking → done. // Pre-seeded events skip the animation and start expanded. const PHASES = [ { key: "reading", label: "Reading document", ms: 700 }, { key: "extracting", label: "Extracting fields", ms: 900 }, { key: "linking", label: "Linking to schema", ms: 700 }, { key: "done", label: "Added to table", ms: 0 }, ]; const IngestCard = ({ event, onPickTable, onJumpToCell }) => { const isLive = !!event.isLive; const [phaseIdx, setPhaseIdx] = useState(isLive ? 0 : 3); const [expanded, setExpanded] = useState(!isLive); useEffect(() => { if (!isLive) return; let cancelled = false; const tick = (i) => { if (cancelled || i >= PHASES.length - 1) return; const t = setTimeout(() => { if (cancelled) return; setPhaseIdx(i + 1); if (i + 1 === PHASES.length - 1) { setTimeout(() => !cancelled && setExpanded(true), 250); } else { tick(i + 1); } }, PHASES[i].ms); return t; }; tick(0); return () => { cancelled = true; }; // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const phase = PHASES[phaseIdx]; const done = phase.key === "done"; const progressPct = ((phaseIdx) / (PHASES.length - 1)) * 100; const openCell = (cellName) => { if (event.rowIdx == null || !onJumpToCell) { onPickTable && onPickTable(event.table); return; } // Find column index of the cell in the row const colIdx = Math.max(0, event.cells.findIndex(c => c.name === cellName)); onJumpToCell(event.table, event.rowIdx, colIdx); }; return (

done && setExpanded(v => !v)}>

{event.fileName}

{event.fileSize} • {relTime(event.ts)} {done && <> • {e.stopPropagation(); onPickTable && onPickTable(event.table);}}> {event.tableLabel} }

{done && ( )} {!done &&

Working

}

{!done && (

{PHASES.slice(0, -1).map((p, i) => (

{p.label} {i < phaseIdx && }

))}

)} {done && expanded && (

{event.addedRows}

{event.addedRows === 1 ? "row added" : "rows added"}

{event.detectedFields}

fields detected

100%

confidence

Row added to {event.tableLabel}

{event.cells.map((c, i) => (

openCell(c.name)}>

{c.pk && PK} {c.type === "fk" && FK} {c.name}

{String(c.value ?? "")}

))}

)}

); }; const ActivityPanel = ({ events, onIngest, onPickTable, onJumpToCell }) => { const [dragOver, setDragOver] = useState(false); const fileInputRef = useRef(null); const handleFiles = (fileList) => { if (!onIngest || !fileList || !fileList.length) return; Array.from(fileList).forEach(f => { const size = f.size ? (f.size > 1024*1024 ? `${(f.size/1024/1024).toFixed(1)} MB` : `${Math.max(1, Math.round(f.size/1024))} KB`) : "—"; onIngest(f.name || String(f), size); }); }; const onDrop = (e) => { e.preventDefault(); setDragOver(false); handleFiles(e.dataTransfer.files); }; const totalRows = events.reduce((n, e) => n + (e.addedRows || 0), 0); return (

{ e.preventDefault(); setDragOver(true); }} onDragLeave={() => setDragOver(false)} onDrop={onDrop} onClick={() => fileInputRef.current?.click()} role="button" >

Drop a document on the agent

PDF, Excel, Word, scans — it picks the right table.

{ handleFiles(e.target.files); e.target.value = ""; }} />

{events.length}

documents

{totalRows}

rows added

live

agent

Recent ingestions

{events.length === 0 && (

No ingestions yet. Drop a file above to get started.

)} {events.map(ev => ( ))}

); }; /* ────────────────────────────────────────────────────────────────────── */ /* DatabaseView — schema diagram + table grid + sidebar */ /* ────────────────────────────────────────────────────────────────────── */ const DatabaseView = ({ sector, onReset }) => { const data = window.HUNGRYDB_DATA; // Live, mutable copy of the schema so search, new-table, agent ingest and grid // edits all read/write the same source of truth. const [tables, setTables] = useState(() => cloneTables(data.TABLES)); const [relations, setRelations] = useState(() => data.RELATIONS.map(r => ({ ...r }))); const [activeTable, setActiveTable] = useState(null); // null = schema overview const [activeRow, setActiveRow] = useState(null); const [provenanceCell, setProvenanceCell] = useState(null); // { table, rowIdx, field } const [sidebarTab, setSidebarTab] = useState("activity"); // Activity feed — every ingestion produces a card here. Pre-seeded with // a handful of mock completed ingestions so the demo feels lived-in. const [ingestEvents, setIngestEvents] = useState(() => seedActivityEvents()); // Search bar state const [query, setQuery] = useState(""); const [showResults, setShowResults] = useState(false); const [pendingFocus, setPendingFocus] = useState(null); // { table, rowIdx, col } const searchRef = useRef(null); // "New table" sidebar form const [newTableOpen, setNewTableOpen] = useState(false); const tableKeys = Object.keys(tables); const updateTable = useCallback((key, mutator) => { setTables(prev => ({ ...prev, [key]: mutator(prev[key]) })); }, []); const createTable = (label, parentKey) => { const key = slugifyTableKey(label, Object.keys(tables)); const fields = [{ name: "id", type: "uuid", pk: true }]; if (parentKey && tables[parentKey]) { fields.push({ name: `${singularize(parentKey)}_id`, type: "fk", ref: parentKey }); } const count = Object.keys(tables).length; const newTable = { label, english: label, icon: "list", pos: { x: 80 + (count % 3) * 380, y: 80 + Math.floor(count / 3) * 280 }, fields, rows: [], }; setTables(prev => ({ ...prev, [key]: newTable })); if (parentKey) { setRelations(prev => [...prev, { from: key, fromField: `${singularize(parentKey)}_id`, to: parentKey }]); } setActiveTable(key); setActiveRow(null); setNewTableOpen(false); }; const focusCell = (table, rowIdx, col) => { setActiveTable(table); setActiveRow(rowIdx ?? null); setPendingFocus({ table, rowIdx: rowIdx ?? 0, col: col ?? 0 }); setQuery(""); setShowResults(false); }; // ⌘K / Ctrl-K focuses the global search useEffect(() => { const onKey = (e) => { if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") { e.preventDefault(); searchRef.current?.focus(); searchRef.current?.select(); } }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, []); // Agent-driven ingest — pretend to read the file and append a synthetic row // to the best-matching table. Returns a rich payload that the Activity panel // uses to render an animated ingestion card. const ingestFile = (fileName, fileSize) => { const lower = (fileName || "").toLowerCase(); const match = (re) => tableKeys.find(k => re.test(tables[k].label) || re.test(k)); let pickKey = /invoice|inv|rechnung/.test(lower) ? match(/invoice/i) : /customer|kunde|client/.test(lower) ? match(/customer/i) : /supplier|vendor|lieferant/.test(lower) ? match(/supplier/i) : /order|po\b|bestellung/.test(lower) ? match(/order/i) : /product|price|preis|artikel/.test(lower) ? match(/product/i) : null; pickKey = pickKey || activeTable || tableKeys[0]; const target = tables[pickKey]; if (!target) return null; const newRow = { _provenance: {} }; const cells = []; target.fields.forEach((f) => { let v = ""; if (f.pk) v = nextPkValue(target); else if (f.type === "money") v = (Math.random() * 400 + 50).toFixed(2); else if (f.type === "int") v = Math.floor(Math.random() * 20) + 1; else if (f.type === "percent") v = "7%"; else if (f.type === "date") v = "2026-05-" + String(Math.floor(Math.random() * 10) + 1).padStart(2, "0"); else if (f.type === "fk") { const ref = tables[f.ref]; const refRow = ref?.rows[Math.floor(Math.random() * Math.max(1, ref?.rows.length || 1))]; const refPk = ref?.fields.find(x => x.pk)?.name; v = (refRow && refPk) ? refRow[refPk] : ""; } else if (f.name === "name") v = fileName.replace(/\.[^.]+$/, "").replace(/[_-]+/g, " "); else v = ""; newRow[f.name] = v; newRow._provenance[f.name] = "agent:" + fileName; cells.push({ name: f.name, type: f.type, value: v, pk: !!f.pk, ref: f.ref }); }); const newRowIdx = (tables[pickKey]?.rows.length) || 0; setTables(prev => ({ ...prev, [pickKey]: { ...prev[pickKey], rows: [...prev[pickKey].rows, newRow] }, })); // Determine extension/kind for the card icon const ext = (lower.match(/\.([a-z0-9]+)$/) || ["", ""])[1]; const kind = ["pdf"].includes(ext) ? "pdf" : ["xlsx", "xls", "csv"].includes(ext) ? "excel" : ["doc", "docx"].includes(ext) ? "word" : ["jpg", "jpeg", "png", "tif", "tiff", "heic"].includes(ext) ? "scan" : "csv"; return { id: `ing-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`, fileName, fileSize: fileSize || "—", kind, table: pickKey, tableLabel: target.label, rowIdx: newRowIdx, cells, addedRows: 1, detectedFields: cells.length, ts: Date.now(), }; }; const results = showResults ? fuzzyFind(tables, query) : []; return (

{/* TOP CHROME */}

HungryDB

{activeTable && ( <> / {tables[activeTable].label} )}

{ setQuery(e.target.value); setShowResults(true); }} onFocus={() => setShowResults(true)} onBlur={() => setTimeout(() => setShowResults(false), 120)} onKeyDown={(e) => { if (e.key === "Escape") { setQuery(""); setShowResults(false); e.currentTarget.blur(); } else if (e.key === "Enter" && results[0]) { const r = results[0]; focusCell(r.table, r.rowIdx, r.col); } }} placeholder="Search tables, fields, rows…" /> ⌘K {showResults && query && (

{results.length === 0 ? (

No matches in {tableKeys.length} tables

) : results.map((r, i) => ( ))}

)}

{/* MAIN GRID */}

{/* Left rail — table list */}

Database

Tables

{tableKeys.map(k => { const t = tables[k]; return ( ); })} {newTableOpen ? ( ({ key: k, label: tables[k].label }))} onCreate={createTable} onCancel={() => setNewTableOpen(false)} /> ) : ( )}

Inferred

{data.INFERENCE_NOTES.slice(0, 3).map((n, i) => (

{n.label}

{n.value}

))}

{/* Center — schema or table grid */}

{activeTable === null ? ( setActiveTable(k)}/> ) : ( setPendingFocus(null)} /> )}

{/* Right — Intelligence sidebar */}

{/* Provenance overlay */} {provenanceCell && ( setProvenanceCell(null)} /> )}

); }; /* Schema (ERD) view ─────────────────────────────────────────────────── */ const SchemaView = ({ data, tables, relations, onPick }) => { tables = tables || data.TABLES; relations = relations || data.RELATIONS; const tableKeys = Object.keys(tables); const W = 1180, H = 700; const TW = 280, TH = 220; // Local positions — let the user drag tables around. Seed from data. const [positions, setPositions] = React.useState(() => { const out = {}; tableKeys.forEach(k => { out[k] = { ...(tables[k].pos || { x: 80, y: 80 }) }; }); return out; }); // When new tables are added, seed positions for them. React.useEffect(() => { setPositions(prev => { let changed = false; const out = { ...prev }; tableKeys.forEach(k => { if (!out[k]) { out[k] = { ...(tables[k].pos || { x: 80, y: 80 }) }; changed = true; } }); return changed ? out : prev; }); }, [tableKeys.length]); // Pan / zoom state. viewBox = (vx, vy, vw, vh) in canvas coords. const [view, setView] = React.useState({ x: 0, y: 0, w: W, h: H }); const svgRef = React.useRef(null); // Drag state — either dragging a node, or panning the canvas. const dragRef = React.useRef(null); // { kind: 'node'|'pan', key?, startX, startY, startPos? } // Convert client (px) → canvas coords using current view + svg size const clientToCanvas = (cx, cy) => { const r = svgRef.current.getBoundingClientRect(); const sx = view.w / r.width; const sy = view.h / r.height; return { x: view.x + (cx - r.left) * sx, y: view.y + (cy - r.top) * sy }; }; const onMouseDownNode = (k, e) => { e.stopPropagation(); const p = clientToCanvas(e.clientX, e.clientY); dragRef.current = { kind: "node", key: k, startMx: p.x, startMy: p.y, startPx: positions[k].x, startPy: positions[k].y, moved: false, }; window.addEventListener("mousemove", onMouseMove); window.addEventListener("mouseup", onMouseUp); }; const onMouseDownCanvas = (e) => { if (e.button !== 0) return; dragRef.current = { kind: "pan", startCx: e.clientX, startCy: e.clientY, startVx: view.x, startVy: view.y, }; window.addEventListener("mousemove", onMouseMove); window.addEventListener("mouseup", onMouseUp); }; const onMouseMove = (e) => { const d = dragRef.current; if (!d) return; if (d.kind === "node") { const p = clientToCanvas(e.clientX, e.clientY); const dx = p.x - d.startMx, dy = p.y - d.startMy; if (Math.abs(dx) + Math.abs(dy) > 2) d.moved = true; setPositions(prev => ({ ...prev, [d.key]: { x: d.startPx + dx, y: d.startPy + dy } })); } else if (d.kind === "pan") { const r = svgRef.current.getBoundingClientRect(); const sx = view.w / r.width; const sy = view.h / r.height; setView(v => ({ ...v, x: d.startVx - (e.clientX - d.startCx) * sx, y: d.startVy - (e.clientY - d.startCy) * sy })); } }; const onMouseUp = (e) => { const d = dragRef.current; window.removeEventListener("mousemove", onMouseMove); window.removeEventListener("mouseup", onMouseUp); if (d?.kind === "node" && !d.moved) { // treat as click → drill into table onPick(d.key); } dragRef.current = null; }; // Wheel = zoom around the cursor const onWheel = (e) => { if (!svgRef.current) return; e.preventDefault(); const r = svgRef.current.getBoundingClientRect(); const cx = view.x + ((e.clientX - r.left) / r.width) * view.w; const cy = view.y + ((e.clientY - r.top) / r.height) * view.h; const factor = e.deltaY > 0 ? 1.12 : 1 / 1.12; const nw = Math.min(W * 4, Math.max(W * 0.4, view.w * factor)); const nh = nw * (H / W); // keep cursor anchor stable const nx = cx - ((e.clientX - r.left) / r.width) * nw; const ny = cy - ((e.clientY - r.top) / r.height) * nh; setView({ x: nx, y: ny, w: nw, h: nh }); }; // Reset / fit const resetView = () => setView({ x: 0, y: 0, w: W, h: H }); // Compute edge endpoints — anchor on the side of each table at the FK/PK row const ROW_Y = (idx) => 48 + idx * 28 + 14; const edges = relations.map(r => { const ta = tables[r.from], tb = tables[r.to]; if (!ta || !tb) return null; const a = positions[r.from], b = positions[r.to]; if (!a || !b) return null; const fromIdx = Math.min(ta.fields.findIndex(f => f.name === r.fromField), 5); const toIdx = Math.min(tb.fields.findIndex(f => f.pk), 5); // Determine sides dynamically based on current positions const acx = a.x + TW / 2, bcx = b.x + TW / 2; const acy = a.y + TH / 2, bcy = b.y + TH / 2; const dx = bcx - acx, dy = bcy - acy; let aSide, bSide; if (Math.abs(dx) > Math.abs(dy) * 0.6) { // mostly horizontal — exit side facing partner aSide = dx > 0 ? "R" : "L"; bSide = dx > 0 ? "L" : "R"; } else { // mostly vertical — bow out to the right of both aSide = "R"; bSide = "R"; } const ax = a.x + (aSide === "R" ? TW : 0); const ay = a.y + ROW_Y(fromIdx >= 0 ? fromIdx : 1); const bx = b.x + (bSide === "R" ? TW : 0); const by = b.y + ROW_Y(toIdx >= 0 ? toIdx : 0); const aDir = aSide === "R" ? 1 : -1; const bDir = bSide === "R" ? 1 : -1; const samePush = aSide === bSide; const baseOff = samePush ? 100 : 70; const c1x = ax + aDir * baseOff; const c2x = bx + bDir * baseOff; const c1y = ay; const c2y = by; return { ...r, ax, ay, bx, by, c1x, c1y, c2x, c2y }; }).filter(Boolean); return (

Inferred Schema

{data.INFERENCE_NOTES[0].value}

{tableKeys.length}

Tables

{tableKeys.reduce((s,k)=>s+tables[k].rows.length,0)}

Rows shown

1,812

+ from CSV

{relations.length}

Relations

Drag tables to rearrange · scroll to zoom · drag empty space to pan · click a table to view rows

); }; /* TableGrid view — Excel-like editable grid ───────────────────────────── */ const TableGrid = ({ tableKey, table, updateTable, data, activeRow, setActiveRow, provenanceCell, setProvenanceCell, pendingFocus, clearPendingFocus }) => { const t = table || data.TABLES[tableKey]; const rows = t.rows; const fields = t.fields; const setRows = (updater) => updateTable(tableKey, prev => ({ ...prev, rows: typeof updater === "function" ? updater(prev.rows) : updater })); const setFields = (updater) => updateTable(tableKey, prev => ({ ...prev, fields: typeof updater === "function" ? updater(prev.fields) : updater })); // Selection: { r: rowIndex, c: colIndex } — colIndex into fields[] const [sel, setSel] = React.useState({ r: 0, c: 0 }); const [editing, setEditing] = React.useState(null); // { r, c, draft } const [colWidths, setColWidths] = React.useState(() => Object.fromEntries(fields.map(f => [f.name, defaultColWidth(f)])) ); React.useEffect(() => { setColWidths(prev => { const out = { ...prev }; let changed = false; fields.forEach(f => { if (!out[f.name]) { out[f.name] = defaultColWidth(f); changed = true; } }); return changed ? out : prev; }); }, [tableKey, fields.length]); // When user runs a search and picks a result, jump to that row/col + open editor React.useEffect(() => { if (!pendingFocus) return; const { rowIdx, col } = pendingFocus; const r = Math.min(Math.max(rowIdx ?? 0, 0), Math.max(0, rows.length - 1)); const c = Math.min(Math.max(col ?? 0, 0), Math.max(0, fields.length - 1)); setSel({ r, c }); clearPendingFocus && clearPendingFocus(); }, [pendingFocus]); const wrapRef = React.useRef(null); // Focus selected cell into view; refocus the grid after edits React.useEffect(() => { if (editing) return; wrapRef.current?.focus(); }, [editing, sel.r, sel.c, tableKey]); const totalCols = fields.length; const totalRows = rows.length; const beginEdit = (r, c, seedChar) => { const f = fields[c]; if (!f) return; const cur = rows[r]?.[f.name]; setEditing({ r, c, draft: seedChar !== undefined ? seedChar : (cur ?? "") }); }; const commitEdit = () => { if (!editing) return; const { r, c, draft } = editing; const f = fields[c]; setRows(prev => { const next = [...prev]; const row = { ...(next[r] || {}) }; row[f.name] = coerceValue(draft, f); // Mark as user-edited — drop any provenance for this cell so it shows as authored row._provenance = { ...(row._provenance || {}) }; row._provenance[f.name] = "edited:you"; next[r] = row; return next; }); setEditing(null); }; const cancelEdit = () => setEditing(null); const addRow = () => { const newRow = { _provenance: {} }; fields.forEach(f => { if (f.pk) newRow[f.name] = nextPkValue(t); else newRow[f.name] = ""; }); const newIdx = rows.length; setRows(prev => [...prev, newRow]); // Auto-enter edit mode on the first non-PK cell so the user can just type. // If the table only has a PK column, don't auto-edit (would wipe the PK value). const firstEditable = fields.findIndex(f => !f.pk); if (firstEditable >= 0) { setSel({ r: newIdx, c: firstEditable }); setTimeout(() => setEditing({ r: newIdx, c: firstEditable, draft: "" }), 0); } else { setSel({ r: newIdx, c: 0 }); } }; const deleteRow = (r) => { setRows(prev => prev.filter((_, i) => i !== r)); setSel(s => ({ r: Math.min(s.r, rows.length - 2), c: s.c })); }; const addColumn = () => { let i = fields.length + 1; let baseName; do { baseName = "field_" + i++; } while (fields.some(f => f.name === baseName)); const newField = { name: baseName, type: "text" }; setFields(prev => [...prev, newField]); setColWidths(w => ({ ...w, [baseName]: 140 })); setRows(prev => prev.map(r => ({ ...r, [baseName]: "" }))); // Jump to the new column header so the user can rename it setSel(s => ({ r: s.r, c: fields.length })); }; const onKey = (e) => { if (editing) { if (e.key === "Enter") { e.preventDefault(); commitEdit(); setSel(s => ({ r: Math.min(s.r + 1, totalRows - 1), c: s.c })); } else if (e.key === "Tab") { e.preventDefault(); commitEdit(); setSel(s => ({ r: s.r, c: Math.min(s.c + 1, totalCols - 1) })); } else if (e.key === "Escape"){ e.preventDefault(); cancelEdit(); } return; } const { r, c } = sel; if (e.key === "ArrowDown") { e.preventDefault(); setSel({ r: Math.min(r + 1, totalRows - 1), c }); } else if (e.key === "ArrowUp") { e.preventDefault(); setSel({ r: Math.max(r - 1, 0), c }); } else if (e.key === "ArrowLeft"){ e.preventDefault(); setSel({ r, c: Math.max(c - 1, 0) }); } else if (e.key === "ArrowRight" || e.key === "Tab") { e.preventDefault(); setSel({ r, c: Math.min(c + 1, totalCols - 1) }); } else if (e.key === "Enter" || e.key === "F2") { e.preventDefault(); beginEdit(r, c); } else if (e.key === "Delete" || e.key === "Backspace") { e.preventDefault(); const f = fields[c]; setRows(prev => { const next = [...prev]; next[r] = { ...next[r], [f.name]: "" }; return next; }); } else if (e.key.length === 1 && !e.metaKey && !e.ctrlKey) { // start editing with the typed character beginEdit(r, c, e.key); } }; const startResize = (fieldName, startX, startW) => { const onMove = (ev) => { const dx = ev.clientX - startX; setColWidths(w => ({ ...w, [fieldName]: Math.max(60, startW + dx) })); }; const onUp = () => { window.removeEventListener("mousemove", onMove); window.removeEventListener("mouseup", onUp); document.body.style.cursor = ""; }; window.addEventListener("mousemove", onMove); window.addEventListener("mouseup", onUp); document.body.style.cursor = "col-resize"; }; // Selected cell info for formula bar const selField = fields[sel.c]; const selRow = rows[sel.r]; const selVal = selField && selRow ? selRow[selField.name] : ""; const selAddress = selField ? `${columnLetter(sel.c)}${sel.r + 1}` : ""; return (

Table

{t.label}

{rows.length} rows · {fields.length} fields

{/* Formula bar */}

{selAddress}

ƒx

editing && setEditing({ ...editing, draft: e.target.value })} onFocus={() => { if (!editing && selField) beginEdit(sel.r, sel.c); }} onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); commitEdit(); } else if (e.key === "Escape") { e.preventDefault(); cancelEdit(); } }} placeholder="Click a cell to edit" />

{fields.map(f => )} {fields.map((f, ci) => ( ))} {rows.map((row, ri) => ( {fields.map((f, ci) => { const val = row[f.name]; const prov = row._provenance?.[f.name]; const isSel = sel.r === ri && sel.c === ci; const isEditing = editing && editing.r === ri && editing.c === ci; return ( ); })} ))} {/* Add-row sentinel */}

	{columnLetter(ci)} {f.pk ? "● " : f.ref ? "↳ " : ""}{f.name} {f.type}{f.ref ? `→${f.ref}` : ""} { e.preventDefault(); startResize(f.name, e.clientX, colWidths[f.name] \|\| 140); }} />
{ setSel({ r: ri, c: 0 }); setActiveRow(ri); }} > {ri + 1}	{ e.stopPropagation(); setSel({ r: ri, c: ci }); }} onDoubleClick={(e) => { e.stopPropagation(); setSel({ r: ri, c: ci }); beginEdit(ri, ci); }} > {isEditing ? ( setEditing({ ...editing, draft: e.target.value })} onBlur={commitEdit} onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); commitEdit(); setSel(s => ({ r: Math.min(s.r + 1, totalRows - 1), c: s.c })); } else if (e.key === "Tab") { e.preventDefault(); commitEdit(); setSel(s => ({ r: s.r, c: Math.min(s.c + 1, totalCols - 1) })); } else if (e.key === "Escape") { e.preventDefault(); cancelEdit(); } }} /> ) : ( <> {formatVal(val, f)} {prov && prov !== "edited:you" && ( { e.stopPropagation(); setProvenanceCell({ table: tableKey, rowIdx: ri, field: f.name }); }} /> )} )}
+	Add row

); }; const columnLetter = (i) => { // 0 → A, 25 → Z, 26 → AA … let s = ""; let n = i; do { s = String.fromCharCode(65 + (n % 26)) + s; n = Math.floor(n / 26) - 1; } while (n >= 0); return s; }; const defaultColWidth = (f) => { if (f.type === "uuid") return 200; if (f.type === "date") return 110; if (f.type === "money") return 110; if (f.type === "int") return 80; if (f.type === "percent") return 90; if (f.type === "enum") return 110; if (f.type === "fk") return 140; if (f.name === "id" || f.name === "number" || f.name === "sku") return 140; return 160; }; const coerceValue = (draft, f) => { if (draft === "" || draft === null) return ""; if (f.type === "int") { const n = parseInt(draft, 10); return isNaN(n) ? draft : n; } if (f.type === "money") { const n = parseFloat(String(draft).replace(/[^\d.-]/g, "")); return isNaN(n) ? draft : n; } return draft; }; const formatVal = (v, f) => { if (v === null || v === undefined) return ∅; if (f.type === "money") return € {v}; if (f.type === "fk") return {v}; if (f.name === "status") { const cls = { paid: "ok", open: "wait", overdue: "bad" }[v] || ""; return {v}; } return v; }; /* ProvenanceOverlay ─────────────────────────────────────────────────── */ const ProvenanceOverlay = ({ cell, tables, data, onClose }) => { const t = (tables && tables[cell.table]) || data.TABLES[cell.table]; const row = t.rows[cell.rowIdx]; const prov = row?._provenance?.[cell.field]; const fileId = prov?.split(":")[0]; const file = data.SOURCE_FILES.find(f => f.id === fileId); const value = row ? row[cell.field] : ""; return (

e.stopPropagation()}>

Provenance

Value in database

{String(value)}

Table {t.label}

Field {cell.field}

Row #{cell.rowIdx + 1}

Confidence {prov === "inferred" ? "inferred" : "directly extracted"}

{file && }

{file?.name || "Inferred"}

{prov === "inferred" ? "AI inference" : prov}

); }; /* Fake document preview ──────────────────────────────────────────────── */ const FakeDoc = ({ file, highlight, value }) => { if (!file) return

Inferred from context — no direct source.

; if (file.kind === "excel" || file.kind === "csv") { // mini grid const cols = ["A","B","C","D","E","F","G"]; const targetCell = highlight?.split(":")[1] || ""; const targetCol = targetCell.match(/[A-Z]+/)?.[0]; const targetRow = parseInt(targetCell.match(/\d+/)?.[0] || "0", 10); return (

{file.name} Sheet1

{cols.map(c =>

{c}

)}

{[1,2,3,4,5,6,7,8,9,10,11].map(r => (

{r}

{cols.map(c => { const isTarget = c === targetCol && r === targetRow; return (

{isTarget ? String(value) : r === 1 ? ["ID","Name","Typ","Adresse","PLZ","USt-ID","Seit"][cols.indexOf(c)] || "" : r % 2 === 0 ? "···" : "··"}

); })}

))}

); } if (file.kind === "scan") { return (

Hofmeister Bakery

Munich

Date{value}

CustomerMs. Berger

2× Stollen25.00

5× Pretzel7.40

Total€32.40

SCAN · 1200 dpi

); } if (file.kind === "pdf") { return (

Hofmeister Bakery

Maximilian St 14 · 80539 Munich

INVOICE

{String(value)}

#	Description	Qty	Amount
1	Rye Mixed Loaf 1kg	24	70.80
2	Butter Pretzel	60	51.00
3	Apple Strudel Slice	18	49.50
4	Wholegrain Loaf 750g	22	57.20

); } if (file.kind === "word") { return (

Order to Millmann Mills Ltd.

Dear Sir or Madam,
we kindly request delivery of the following items by {String(value)}:

• Wheat flour 550, 40 sacks
• Rye flour 1150, 20 sacks

); } return

Preview not available

; }; /* Intelligence panel ─────────────────────────────────────────────────── */ /* Pre-seeded chat history — a couple of mock Q&A turns so a fresh demo looks lived-in instead of empty. (Ingestion lives in the Activity tab.) */ const generateMockIngestHistory = () => [ { role: "user", text: "Show me overdue invoices.", }, { role: "ai", kind: "list", text: "2 invoices are overdue:", items: [ { left: "2026-0138 · Café Murnau", right: "€450.68 · 24 days", tone: "bad" }, { left: "2026-0140 · Sonnenberg", right: "€212.29 · 19 days", tone: "wait" }, ], link: { table: "invoices", label: "Open in Invoices" }, }, ]; const IntelPanel = ({ data, tables, onPickTable, onJumpToActivity }) => { const [chat, setChat] = useState(generateMockIngestHistory); const [input, setInput] = useState(""); const chatRef = useRef(null); const intel = data.INTELLIGENCE; // Keep the latest message in view as the conversation grows. useEffect(() => { const el = chatRef.current; if (el) el.scrollTop = el.scrollHeight; }, [chat.length]); const ask = (q) => { const lower = q.toLowerCase(); let answer; if (lower.includes("overdue") || lower.includes("open") || lower.includes("unpaid")) { answer = { kind: "list", text: "2 invoices are overdue or open:", items: [ { left: "2026-0138 · Café Murnau", right: "€450.68 · 24 days", tone: "bad" }, { left: "2026-0140 · Sonnenberg Restaurant", right: "€212.29 · 19 days", tone: "wait" }, ], link: { table: "invoices", label: "Open in Invoices" }, }; } else if (lower.includes("revenue") || lower.includes("category") || lower.includes("sales")) { answer = { kind: "bars", text: "Revenue by category, last 30 days:", bars: [ { label: "Bread", value: 4820, pct: 0.62 }, { label: "Rolls", value: 2940, pct: 0.38 }, { label: "Pastry", value: 3120, pct: 0.40 }, { label: "Seasonal", value: 1602, pct: 0.21 }, ], }; } else if (lower.includes("datev") || lower.includes("export")) { answer = { kind: "export", text: "DATEV export for March 2026 is ready (142 bookings)." }; } else if (lower.includes("500") || lower.includes("over")) { answer = { kind: "list", text: "3 invoices over €500:", items: [ { left: "2026-0141 · Hotel Kronprinz", right: "€687.79", tone: "ok" }, { left: "2026-0138 · Café Murnau", right: "€450.68", tone: "wait" }, { left: "2026-0142 · Lindenhof Café", right: "€304.42", tone: "ok" }, ], }; } else if (lower.includes("supplier") || lower.includes("expensive")) { answer = { kind: "text", text: "Millmann Mills: +6.4% vs Q1. Wagner Yeast stable. Schmidt Packaging: −2%.", }; } else { answer = { kind: "text", text: "I couldn't find a direct answer. Please rephrase your question." }; } setChat(prev => [...prev, { role: "user", text: q }, { role: "ai", ...answer }]); setInput(""); }; return (

{/* Hint: ingestion lives in the Activity tab */}

{data.INTELLIGENCE.summaries.map((s, i) => (

{s.title}

{s.value}

{s.delta}

))}

Ask

{chat.length === 0 && (

Ask your database in plain language.

)} {chat.map((m, i) => (

{m.role === "user" ?

{m.text}

{(m.kind === "list" || m.kind === "ingest") && m.items && (

{m.items.map((it, j) => (

{it.left} {it.right}

))}

)} {m.kind === "bars" && (

{m.bars.map((b, j) => (

{b.label}

{b.value.toLocaleString("de-DE")} €

))}

)} {m.kind === "export" && ( )} {m.link && ( )}

}

))}

{intel.suggestions.slice(0, 4).map((q, i) => ( ))}

); }; /* Exports panel ─────────────────────────────────────────────────────── */ const ExportsPanel = ({ data }) => (

Tax-relevant packages and documents. Prepared GoBD-compliant.

{data.INTELLIGENCE.exports.map((x) => (

{x.name}

{x.period} · {x.lines.toLocaleString("en-US")} {x.lines === 1 ? "file" : "lines"} · {x.format}

))}

Tax advisor view

Your tax advisor sees all HungryDB clients in one dashboard. Monthly packages are delivered automatically.

); /* ────────────────────────────────────────────────────────────────────── */ /* App root */ /* ────────────────────────────────────────────────────────────────────── */ const App = () => { const initialPhase = (typeof location !== "undefined" && new URLSearchParams(location.search).get("phase")) || "idle"; const [phase, setPhase] = useState(initialPhase); // idle | extracting | ready const [tw, setTweak] = useTweaks({ sector: "Bakery" }); return (

{phase === "idle" && ( setPhase("extracting")}/> )} {phase === "extracting" && ( setPhase("ready")}/> )} {phase === "ready" && ( setPhase("idle")}/> )} setTweak("sector", v)} options={["Bakery", "Carpentry", "Auto repair"]} /> setPhase("idle")}/>

); }; ReactDOM.createRoot(document.getElementById("root")).render();

Drop in everything. We build the database.

{data.INFERENCE_NOTES[0].value}

{t.label}

Drop in everything.
We build the database.