Michael
48251b625f
Consistency pass over the parallel-agent work: - Replace 4 divergent inline header wrappers (flex/inline-flex, gap 10/12px, margin-top present/absent across 8 tool pages) with one shared .dt-tool-header-actions class; strip the now-redundant per-button margin-top:0. Every tool header now aligns the local-first pill + Help button identically. - Reconcile downloads row: reorder to the page's exceptions-first order (Review, Unmatched left, Unmatched right, Matched) to match the tabs and metric strip, and drop the lone competing primary — the four are parallel exports of equal weight. Audited and confirmed already-consistent: compact intake banner, privacy pill markup, .dt-next-step strips, the three coming-soon stubs, primary CTAs, and the 3-download CSV/audit/config pattern. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
249 lines
14 KiB
HTML
249 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="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>
|
|
<div class="dt-tool-header-actions">
|
|
<span class="dt-privacy-pill">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
<rect x="4" y="11" width="16" height="10" rx="2"/>
|
|
<path d="M8 11V7a4 4 0 018 0v4"/>
|
|
</svg>
|
|
Runs 100% locally
|
|
</span>
|
|
<button class="dt-help-btn"><span class="dt-mi">help_outline</span> Help</button>
|
|
</div>
|
|
</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-alert info">
|
|
<span class="dt-mi">description</span>
|
|
<span>Using <strong>bank_feed_may.csv</strong> from the upload screen.</span>
|
|
</div>
|
|
<button class="dt-btn" style="margin-bottom:4px">Use a different file</button>
|
|
<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-alert info">
|
|
<span class="dt-mi">description</span>
|
|
<span>Using <strong>ledger_may.xlsx</strong> from the upload screen.</span>
|
|
</div>
|
|
<button class="dt-btn" style="margin-bottom:4px">Use a different file</button>
|
|
<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 <span class="req">*</span></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 <span class="req">*</span></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 class="dt-help-text" style="color:var(--success);display:flex;align-items:center;gap:5px"><span class="dt-mi" style="font-family:'Material Symbols Outlined';font-size:15px;line-height:1">check_circle</span> 1 reference each side — counts match</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></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">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 class="dt-metric"><div class="label">Matched</div><div class="value">1,173</div></div>
|
|
</div>
|
|
<p class="dt-caption">Coverage: 97.4% of the larger side</p>
|
|
|
|
<!-- Tabs (st.tabs) — exceptions-first; Review active by default -->
|
|
<div class="dt-tabs">
|
|
<span class="dt-tab is-active">Review (9)</span>
|
|
<span class="dt-tab">Unmatched left (22)</span>
|
|
<span class="dt-tab">Unmatched right (16)</span>
|
|
<span class="dt-tab">Matched (1,173)</span>
|
|
</div>
|
|
|
|
<!-- Active tab content: Review (exceptions-first default) -->
|
|
<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>
|
|
|
|
<!-- Other tab previews shown as collapsed expanders for review context -->
|
|
<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>
|
|
|
|
<details class="dt-expander">
|
|
<summary>Matched (1,173) — cleanly reconciled</summary>
|
|
<div class="dt-expander-body">
|
|
<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>
|
|
</div>
|
|
</details>
|
|
|
|
<hr class="dt-divider">
|
|
|
|
<!-- Downloads (st.columns(4) of html_download_button) — exceptions-first,
|
|
matching the tab/metric order; four parallel exports, equal weight -->
|
|
<div class="dt-btn-row">
|
|
<button class="dt-btn">Review CSV</button>
|
|
<button class="dt-btn">Unmatched left</button>
|
|
<button class="dt-btn">Unmatched right</button>
|
|
<button class="dt-btn">Matched CSV</button>
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<footer class="dt-footer" id="dt-footer"></footer>
|
|
<script src="shell.js"></script>
|
|
</body>
|
|
</html>
|