Michael
b2fa8503e6
Static layout mockups for each app tool (deduplicator, text cleaner, format standardizer, missing handler, column mapper, outlier detector, multi-file merger, validator/reporter, pipeline runner, PDF extractor, reconciler) plus index/home shells and shared assets. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
252 lines
14 KiB
HTML
252 lines
14 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Layout review — Reconcile Two Files</title>
|
|
<link rel="stylesheet" href="assets/app.css">
|
|
</head>
|
|
<body data-page="11_reconciler">
|
|
<div class="dt-app">
|
|
<aside class="dt-sidebar" id="dt-sidebar"></aside>
|
|
<main class="dt-main">
|
|
<div class="dt-review-banner">
|
|
<span class="dt-mi">visibility</span>
|
|
<span>Static layout preview of <strong>Reconcile Two Files</strong>, shown with both files imported, key columns mapped, and a completed reconciliation (matched / review / unmatched results). <a href="index.html">All pages →</a></span>
|
|
</div>
|
|
<div class="dt-main-inner">
|
|
|
|
<!-- Tool header -->
|
|
<div class="dt-tool-header">
|
|
<h1>Reconcile Two Files</h1>
|
|
<button class="dt-help-btn"><span class="dt-mi">help_outline</span> Help</button>
|
|
</div>
|
|
<p class="dt-tool-caption">Compare two lists of transactions (e.g. bank vs. ledger) and flag what doesn't match.</p>
|
|
|
|
<div class="dt-spacer"></div>
|
|
|
|
<!-- Side-by-side upload (st.columns(2) → two _side_panel) -->
|
|
<div class="dt-cols-2">
|
|
<!-- Left side -->
|
|
<div>
|
|
<h4 style="margin-top:0">Left (e.g. bank feed)</h4>
|
|
<div class="dt-uploader">
|
|
<div class="dt-uploader-text">
|
|
<span class="hint"><span class="dt-mi" style="vertical-align:-4px">upload_file</span> Drag and drop file here</span>
|
|
<span class="sub">CSV, TSV, XLSX, XLS</span>
|
|
</div>
|
|
<button class="dt-btn">Browse files</button>
|
|
</div>
|
|
<div class="dt-file-chip">
|
|
<span class="dt-file-icon-chip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6"/></svg></span>
|
|
<span class="name">bank_feed_may.csv</span>
|
|
<span class="size">214 KB</span>
|
|
</div>
|
|
<p class="dt-caption" style="margin-top:6px"><code>bank_feed_may.csv</code> — 1,204 rows, 4 columns</p>
|
|
<details class="dt-expander">
|
|
<summary>Preview left (e.g. bank feed)</summary>
|
|
<div class="dt-expander-body">
|
|
<div class="dt-table-wrap">
|
|
<table class="dt-table">
|
|
<thead><tr><th>posted_date</th><th>description</th><th>amount</th><th>ref</th></tr></thead>
|
|
<tbody>
|
|
<tr><td>2026-05-01</td><td>ACME SUPPLIES</td><td>-1240.00</td><td>CHK1041</td></tr>
|
|
<tr><td>2026-05-02</td><td>PAYROLL RUN</td><td>-8800.00</td><td>ACH5520</td></tr>
|
|
<tr><td>2026-05-03</td><td>CLIENT GLOBEX</td><td>5200.00</td><td>DEP0090</td></tr>
|
|
<tr><td>2026-05-04</td><td>UTILITY CO</td><td>-318.42</td><td>CHK1042</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
<!-- Right side -->
|
|
<div>
|
|
<h4 style="margin-top:0">Right (e.g. ledger)</h4>
|
|
<div class="dt-uploader">
|
|
<div class="dt-uploader-text">
|
|
<span class="hint"><span class="dt-mi" style="vertical-align:-4px">upload_file</span> Drag and drop file here</span>
|
|
<span class="sub">CSV, TSV, XLSX, XLS</span>
|
|
</div>
|
|
<button class="dt-btn">Browse files</button>
|
|
</div>
|
|
<div class="dt-file-chip">
|
|
<span class="dt-file-icon-chip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6"/></svg></span>
|
|
<span class="name">ledger_may.xlsx</span>
|
|
<span class="size">96 KB</span>
|
|
</div>
|
|
<p class="dt-caption" style="margin-top:6px"><code>ledger_may.xlsx</code> — 1,198 rows, 5 columns</p>
|
|
<details class="dt-expander">
|
|
<summary>Preview right (e.g. ledger)</summary>
|
|
<div class="dt-expander-body">
|
|
<div class="dt-table-wrap">
|
|
<table class="dt-table">
|
|
<thead><tr><th>txn_date</th><th>memo</th><th>value</th><th>invoice_no</th><th>account</th></tr></thead>
|
|
<tbody>
|
|
<tr><td>2026-05-01</td><td>Acme Supplies Inc</td><td>-1240.00</td><td>INV-1041</td><td>5000</td></tr>
|
|
<tr><td>2026-05-02</td><td>Monthly payroll</td><td>-8800.00</td><td>INV-5520</td><td>6000</td></tr>
|
|
<tr><td>2026-05-03</td><td>Globex retainer</td><td>5200.00</td><td>INV-0090</td><td>4000</td></tr>
|
|
<tr><td>2026-05-04</td><td>City Utilities</td><td>-318.40</td><td>INV-1042</td><td>6100</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="dt-divider">
|
|
|
|
<!-- Match settings -->
|
|
<h2>Match settings</h2>
|
|
<div class="dt-cols-2">
|
|
<!-- Left pickers (file order: posted_date, description, amount → date, desc, amount) -->
|
|
<div>
|
|
<h4 style="margin-top:0">Left columns</h4>
|
|
<div class="dt-field"><label class="dt-label">Date column (optional)</label><div class="dt-select">posted_date</div></div>
|
|
<div class="dt-field"><label class="dt-label">Description column (optional)</label><div class="dt-select">description</div></div>
|
|
<div class="dt-field"><label class="dt-label">Amount column</label><div class="dt-select">amount</div></div>
|
|
<div class="dt-field"><label class="dt-label">Reference columns (optional, e.g. check / invoice no.)</label>
|
|
<div class="dt-multiselect"><span class="dt-ms-chip">ref <span class="x">✕</span></span></div></div>
|
|
</div>
|
|
<!-- Right pickers (file order: txn_date, memo, value → date, desc, amount) -->
|
|
<div>
|
|
<h4 style="margin-top:0">Right columns</h4>
|
|
<div class="dt-field"><label class="dt-label">Date column (optional)</label><div class="dt-select">txn_date</div></div>
|
|
<div class="dt-field"><label class="dt-label">Description column (optional)</label><div class="dt-select">memo</div></div>
|
|
<div class="dt-field"><label class="dt-label">Amount column</label><div class="dt-select">value</div></div>
|
|
<div class="dt-field"><label class="dt-label">Reference columns (must match left count)</label>
|
|
<div class="dt-multiselect"><span class="dt-ms-chip">invoice_no <span class="x">✕</span></span></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tolerances & options (expanded=True) -->
|
|
<details class="dt-expander" open>
|
|
<summary>Tolerances & options</summary>
|
|
<div class="dt-expander-body">
|
|
<div class="dt-cols-3">
|
|
<div class="dt-field"><label class="dt-label">Amount tolerance</label>
|
|
<div class="dt-input">0.0200</div>
|
|
<div class="dt-help-text">Absolute tolerance on amount (e.g. 0.01 to absorb cent rounding).</div></div>
|
|
<div class="dt-field"><label class="dt-label">Date tolerance (days)</label>
|
|
<div class="dt-input">1</div>
|
|
<div class="dt-help-text">Allow N calendar days of drift between posting dates.</div></div>
|
|
<div class="dt-field"><label class="dt-label">Invert right amount sign</label>
|
|
<div class="dt-check" style="margin-top:8px"><span class="box"></span> Invert right amount sign</div>
|
|
<div class="dt-help-text">Use when one side records debits as positive and the other as negative.</div></div>
|
|
</div>
|
|
<div class="dt-field"><label class="dt-label">Description similarity boost (0 disables)</label>
|
|
<div class="dt-slider"><div class="track"><div class="fill" style="width:80%"></div><div class="knob" style="left:80%"></div></div><div class="val">80</div></div>
|
|
<div class="dt-help-text">When both sides have a description column set, accept matches with this minimum fuzzy similarity even if amount/date are merely within tolerance. Lower = more permissive.</div></div>
|
|
</div>
|
|
</details>
|
|
|
|
<hr class="dt-divider">
|
|
|
|
<button class="dt-btn dt-btn-primary dt-btn-block">Reconcile</button>
|
|
|
|
<hr class="dt-divider">
|
|
|
|
<!-- Results -->
|
|
<h2>Results</h2>
|
|
<div class="dt-metrics">
|
|
<div class="dt-metric"><div class="label">Matched</div><div class="value">1,173</div></div>
|
|
<div class="dt-metric"><div class="label">Review</div><div class="value">9</div></div>
|
|
<div class="dt-metric"><div class="label">Unmatched left</div><div class="value">22</div></div>
|
|
<div class="dt-metric"><div class="label">Unmatched right</div><div class="value">16</div></div>
|
|
</div>
|
|
<p class="dt-caption">Coverage: 97.4% of the larger side</p>
|
|
|
|
<!-- Tabs (st.tabs) — Matched active -->
|
|
<div class="dt-tabs">
|
|
<span class="dt-tab is-active">Matched (1,173)</span>
|
|
<span class="dt-tab">Review (9)</span>
|
|
<span class="dt-tab">Unmatched left (22)</span>
|
|
<span class="dt-tab">Unmatched right (16)</span>
|
|
</div>
|
|
|
|
<!-- Matched tab content -->
|
|
<p class="dt-caption">Preview of first 25 of 1,173 rows — download the CSV below for the full set.</p>
|
|
<div class="dt-table-wrap">
|
|
<table class="dt-table">
|
|
<thead><tr>
|
|
<th>left_posted_date</th><th>left_description</th><th>left_amount</th>
|
|
<th>right_txn_date</th><th>right_memo</th><th>right_value</th><th>amount_diff</th>
|
|
</tr></thead>
|
|
<tbody>
|
|
<tr><td>2026-05-01</td><td>ACME SUPPLIES</td><td>-1240.00</td><td>2026-05-01</td><td>Acme Supplies Inc</td><td>-1240.00</td><td class="dt-cell-add">0.00</td></tr>
|
|
<tr><td>2026-05-02</td><td>PAYROLL RUN</td><td>-8800.00</td><td>2026-05-02</td><td>Monthly payroll</td><td>-8800.00</td><td class="dt-cell-add">0.00</td></tr>
|
|
<tr><td>2026-05-03</td><td>CLIENT GLOBEX</td><td>5200.00</td><td>2026-05-03</td><td>Globex retainer</td><td>5200.00</td><td class="dt-cell-add">0.00</td></tr>
|
|
<tr><td>2026-05-04</td><td>UTILITY CO</td><td>-318.42</td><td>2026-05-04</td><td>City Utilities</td><td>-318.40</td><td class="dt-cell-flag">0.02</td></tr>
|
|
<tr><td>2026-05-06</td><td>OFFICE DEPOT</td><td>-89.15</td><td>2026-05-07</td><td>Office supplies</td><td>-89.15</td><td class="dt-cell-add">0.00</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Other tab previews shown as collapsed expanders for review context -->
|
|
<details class="dt-expander">
|
|
<summary>Review (9) — ambiguous candidates</summary>
|
|
<div class="dt-expander-body">
|
|
<p class="dt-caption">Pairs flagged because the algorithm couldn't pick a single best match (e.g. multiple equally-good candidates). Use the left/right indices to disambiguate manually.</p>
|
|
<div class="dt-table-wrap">
|
|
<table class="dt-table">
|
|
<thead><tr><th>left_idx</th><th>left_amount</th><th>right_idx</th><th>right_value</th><th>candidates</th></tr></thead>
|
|
<tbody>
|
|
<tr><td>118</td><td>-450.00</td><td>121, 209</td><td>-450.00</td><td class="dt-cell-flag">2 equal</td></tr>
|
|
<tr><td>203</td><td>1000.00</td><td>198, 244</td><td>1000.00</td><td class="dt-cell-flag">2 equal</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
|
|
<details class="dt-expander">
|
|
<summary>Unmatched left (22) — only in bank_feed_may.csv</summary>
|
|
<div class="dt-expander-body">
|
|
<p class="dt-caption">Preview of first 25 of 22 rows.</p>
|
|
<div class="dt-table-wrap">
|
|
<table class="dt-table">
|
|
<thead><tr><th>posted_date</th><th>description</th><th>amount</th><th>ref</th></tr></thead>
|
|
<tbody>
|
|
<tr><td class="dt-cell-del">2026-05-09</td><td class="dt-cell-del">BANK FEE</td><td class="dt-cell-del">-12.00</td><td class="dt-cell-del">FEE0001</td></tr>
|
|
<tr><td class="dt-cell-del">2026-05-14</td><td class="dt-cell-del">ATM WITHDRAWAL</td><td class="dt-cell-del">-200.00</td><td class="dt-cell-del">ATM7781</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
|
|
<details class="dt-expander">
|
|
<summary>Unmatched right (16) — only in ledger_may.xlsx</summary>
|
|
<div class="dt-expander-body">
|
|
<p class="dt-caption">Preview of first 25 of 16 rows.</p>
|
|
<div class="dt-table-wrap">
|
|
<table class="dt-table">
|
|
<thead><tr><th>txn_date</th><th>memo</th><th>value</th><th>invoice_no</th><th>account</th></tr></thead>
|
|
<tbody>
|
|
<tr><td class="dt-cell-del">2026-05-11</td><td class="dt-cell-del">Accrued interest</td><td class="dt-cell-del">37.50</td><td class="dt-cell-del">INV-9001</td><td class="dt-cell-del">7000</td></tr>
|
|
<tr><td class="dt-cell-del">2026-05-22</td><td class="dt-cell-del">Depreciation</td><td class="dt-cell-del">-410.00</td><td class="dt-cell-del">INV-9044</td><td class="dt-cell-del">8000</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
|
|
<hr class="dt-divider">
|
|
|
|
<!-- Downloads (st.columns(4) of html_download_button) -->
|
|
<div class="dt-btn-row">
|
|
<button class="dt-btn dt-btn-primary">Matched CSV</button>
|
|
<button class="dt-btn">Review CSV</button>
|
|
<button class="dt-btn">Unmatched left</button>
|
|
<button class="dt-btn">Unmatched right</button>
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<footer class="dt-footer" id="dt-footer"></footer>
|
|
<script src="assets/shell.js"></script>
|
|
</body>
|
|
</html>
|