/* eslint-disable no-undef */ const { useState, useEffect, useRef, useCallback } = React; // ---------- Constants ---------- const CC_COLUMNS = ["Date", "Payee", "Memo", "Outflow", "Inflow"]; const FIELD_META = { Date: { hint: "Day of the transaction", tone: "neutral", required: true }, Payee: { hint: "Who you paid or who paid you", tone: "neutral", required: false }, Memo: { hint: "What the transaction was for", tone: "neutral", required: false }, Outflow: { hint: "Money leaving the account", tone: "out", required: true }, Inflow: { hint: "Money coming in", tone: "in", required: true }, }; // Sample data (Scotiabank demo) const SAMPLE_FILE = "scotia-checking-march.csv"; const SAMPLE_HEADERS = [ "2026-03-09 (1)", "AMEX CARDS L4U8J8 (1)", "6907.81 (1)", "Unnamed column (1)", "3300.37 (1)", ]; const SAMPLE_ROWS = [ ["2026-03-09", "RI102 TFR-FR 7306381", "", "9254.7", "12555.07"], ["2026-03-09", "G-Transfer **775", "4104.16", "", "8450.91"], ["2026-03-09", "SEND E-TFR ***Jc9", "113", "", "8337.91"], ["2026-03-10", "CPL: INS", "", "79.2", "8417.11"], ["2026-03-10", "CANADA PRO", "", "53.51", "8470.62"], ["2026-03-10", "260310S7053200WIRE", "", "8568.26", "17038.88"], ["2026-03-13", "JG455 TFR-TO C/C", "10000", "", "7038.88"], ["2026-03-13", "CONSUMER LOANS LOAN", "593.47", "", "6445.41"], ["2026-03-16", "SEND E-TFR ***SRJ", "2000", "", "4445.41"], ["2026-03-16", "UO301 TFR-FR 7306381", "", "20148", "24593.41"], ]; const SAMPLE_MAPPING = { "0": "Date", "1": "Memo", "2": "Outflow", "3": "Inflow", "4": "" }; // ---------- CSV helpers ---------- function autoDetectMapping(headers) { const lower = headers.map(h => h.toLowerCase()); const KEYWORDS = { Date: ["date", "datum", "posted", "trans date", "transaction date", "booking date", "value date"], Payee: ["payee", "merchant", "vendor", "beneficiary", "counterpart"], Memo: ["memo", "description", "narrative", "notes", "details", "reference", "remarks"], Outflow: ["debit", "outflow", "withdrawal", "dr", "charge", "payment out", "money out"], Inflow: ["credit", "inflow", "deposit", "cr", "payment in", "money in"], }; const mapping = {}; headers.forEach((_, i) => { mapping[String(i)] = ""; }); const assigned = new Set(); CC_COLUMNS.forEach(col => { for (let i = 0; i < lower.length; i++) { if (assigned.has(i)) continue; if (KEYWORDS[col].some(kw => lower[i].includes(kw))) { mapping[String(i)] = col; assigned.add(i); break; } } }); return mapping; } function deduplicateHeaders(raw) { const seen = {}; return raw.map(h => { const base = h.trim() || "Unnamed column"; if (seen[base] === undefined) { seen[base] = 0; return base; } seen[base]++; return `${base} (${seen[base]})`; }); } function parseCSVText(text, cfg) { const { delimiter, hasHeader, startAtRow } = cfg; const config = { header: false, skipEmptyLines: true, beforeFirstChunk(chunk) { const rows = chunk.split("\n"); return rows.slice((startAtRow || 1) - 1).join("\n"); }, }; if (delimiter !== "auto") config.delimiter = delimiter; const result = Papa.parse(text, config); const allRows = result.data; if (!allRows.length) return { headers: [], rows: [] }; if (hasHeader) { const headers = deduplicateHeaders(allRows[0]); const rows = allRows.slice(1).map(r => headers.map((_, i) => r[i] ?? "")); return { headers, rows }; } else { const maxCols = Math.max(...allRows.map(r => r.length)); const headers = Array.from({ length: maxCols }, (_, i) => `Column ${i + 1}`); return { headers, rows: allRows.map(r => headers.map((_, i) => r[i] ?? "")) }; } } function getConvertedRow(row, mapping, invertedOutflow) { const outflowEntry = Object.entries(mapping).find(([, v]) => v === "Outflow"); const inflowEntry = Object.entries(mapping).find(([, v]) => v === "Inflow"); const outflowIdx = outflowEntry ? outflowEntry[0] : null; const inflowIdx = inflowEntry ? inflowEntry[0] : null; const sameCol = outflowIdx !== null && inflowIdx !== null && outflowIdx === inflowIdx; return CC_COLUMNS.map(col => { const entry = Object.entries(mapping).find(([, v]) => v === col); if (!entry) return ""; const cell = row[Number(entry[0])] || ""; if (col === "Outflow") { if (!cell) return ""; if (sameCol) return !invertedOutflow ? (cell.startsWith("-") ? cell.slice(1) : "") : (cell.startsWith("-") ? "" : cell); return cell.startsWith("-") ? cell.slice(1) : cell; } if (col === "Inflow") { if (!cell) return ""; if (sameCol) return !invertedOutflow ? (cell.startsWith("-") ? "" : cell) : (cell.startsWith("-") ? cell.slice(1) : ""); return cell.startsWith("-") ? cell.slice(1) : cell; } return cell; }); } function buildConvertedCSV(headers, rows, mapping, invertedOutflow) { let csv = '"' + CC_COLUMNS.join('","') + '"\n'; rows.forEach(row => { const vals = getConvertedRow(row, mapping, invertedOutflow); csv += '"' + vals.map(v => v.replace(/"/g, '""').trim()).join('","') + '"\n'; }); return csv; } function computeDateRange(rows, mapping) { const entry = Object.entries(mapping).find(([, v]) => v === "Date"); if (!entry) return ""; const idx = Number(entry[0]); const dates = rows.map(r => new Date(r[idx])).filter(d => !isNaN(d)); if (!dates.length) return ""; const min = new Date(Math.min(...dates.map(d => d.getTime()))); const max = new Date(Math.max(...dates.map(d => d.getTime()))); const fmt = d => d.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" }); return min.getTime() === max.getTime() ? fmt(min) : `${fmt(min)} – ${fmt(max)}`; } // ---------- Inline icons ---------- const Icon = { upload: p => ( ), file: p => ( ), download: p => ( ), refresh: p => ( ), swap: p => ( ), check: p => ( ), sun: p => ( ), moon: p => ( ), chevron: p => ( ), x: p => ( ), }; // ---------- Header ---------- function Header({ theme, onToggleTheme }) { return (
); } // ---------- Shared header toggle ---------- function HeaderToggle({ hasHeader, onToggle, onClick }) { return (