134 lines
9.6 KiB
HTML
134 lines
9.6 KiB
HTML
<h2>Recommended Hybrid: A + B's escape hatch</h2>
|
|
<p class="subtitle">Layout A's inline badge as default. Power users click "Show alternatives" on any line to reveal B's ranked panel for that line only.</p>
|
|
|
|
<div class="mockup">
|
|
<div class="mockup-header">Bank Reconciliation — Account: RBC Operating · 487 unreconciled</div>
|
|
<div class="mockup-body" style="padding:14px;font-family:-apple-system,sans-serif;font-size:13px;background:#f3f4f6">
|
|
|
|
<div style="background:#fff;border:1px solid #d8dadd;border-radius:8px;margin-bottom:10px;overflow:hidden">
|
|
<div style="display:flex;justify-content:space-between;align-items:center;padding:12px 14px">
|
|
<div>
|
|
<div style="font-weight:600">Apr 12 — RBC e-transfer</div>
|
|
<div style="color:#666;font-size:12px;margin-top:2px">Cheque 4827 · Westin Plating Co · <strong>$1,847.50 CAD</strong></div>
|
|
</div>
|
|
<div style="display:flex;gap:8px;align-items:center">
|
|
<div style="background:#22c55e;color:#fff;padding:4px 10px;border-radius:14px;font-size:11px;font-weight:700;letter-spacing:0.3px">92% MATCH</div>
|
|
</div>
|
|
</div>
|
|
<div style="padding:10px 14px;background:#f0fdf4;border-top:1px solid #d1fae5;display:flex;justify-content:space-between;align-items:center">
|
|
<div style="font-size:12px;color:#166534">
|
|
💡 <strong>INV/2026/00123</strong> — Westin Plating Co — $1,847.50
|
|
</div>
|
|
<div style="display:flex;gap:6px">
|
|
<button style="background:#22c55e;color:#fff;border:none;padding:5px 12px;border-radius:5px;font-size:11px;font-weight:600;cursor:pointer">Accept</button>
|
|
<button style="background:#fff;color:#666;border:1px solid #d8dadd;padding:5px 10px;border-radius:5px;font-size:11px;cursor:pointer">Reject</button>
|
|
<button style="background:transparent;color:#666;border:none;padding:5px 8px;font-size:11px;cursor:pointer;text-decoration:underline">Show 2 alternatives</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="background:#fff;border:1px solid #fde68a;border-radius:8px;margin-bottom:10px;overflow:hidden">
|
|
<div style="display:flex;justify-content:space-between;align-items:center;padding:12px 14px">
|
|
<div>
|
|
<div style="font-weight:600">Apr 12 — RBC payment</div>
|
|
<div style="color:#666;font-size:12px;margin-top:2px">Cheque 4828 · partner unknown · <strong>$1,800.00 CAD</strong></div>
|
|
</div>
|
|
<div style="background:#f59e0b;color:#fff;padding:4px 10px;border-radius:14px;font-size:11px;font-weight:700">68% MATCH</div>
|
|
</div>
|
|
<div style="padding:10px 14px;background:#fffbeb;border-top:1px solid #fde68a;display:flex;justify-content:space-between;align-items:center">
|
|
<div style="font-size:12px;color:#92400e">
|
|
💡 <strong>INV/2026/00098</strong> — Westin Plating Co — $1,800.00 · <em style="color:#a16207">amount matches but partner unconfirmed</em>
|
|
</div>
|
|
<div style="display:flex;gap:6px">
|
|
<button style="background:#f59e0b;color:#fff;border:none;padding:5px 12px;border-radius:5px;font-size:11px;font-weight:600;cursor:pointer">Accept</button>
|
|
<button style="background:#fff;color:#666;border:1px solid #d8dadd;padding:5px 10px;border-radius:5px;font-size:11px;cursor:pointer">Reject</button>
|
|
<button style="background:transparent;color:#666;border:none;padding:5px 8px;font-size:11px;cursor:pointer;text-decoration:underline">Show 4 alternatives</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="background:#fff;border:1px solid #d8dadd;border-radius:8px;margin-bottom:10px;overflow:hidden">
|
|
<div style="display:flex;justify-content:space-between;align-items:center;padding:12px 14px">
|
|
<div>
|
|
<div style="font-weight:600">Apr 11 — Visa adjustment</div>
|
|
<div style="color:#666;font-size:12px;margin-top:2px">Ref VSA-201 · Royal Bank fees · <strong>$89.99 CAD</strong></div>
|
|
</div>
|
|
<div style="background:#94a3b8;color:#fff;padding:4px 10px;border-radius:14px;font-size:11px;font-weight:700">NO MATCH</div>
|
|
</div>
|
|
<div style="padding:8px 14px;background:#f8fafc;border-top:1px solid #e2e8f0;display:flex;gap:6px;justify-content:flex-end">
|
|
<button style="background:#fff;color:#666;border:1px solid #d8dadd;padding:5px 10px;border-radius:5px;font-size:11px;cursor:pointer">Reconcile manually</button>
|
|
<button style="background:#fff;color:#666;border:1px solid #d8dadd;padding:5px 10px;border-radius:5px;font-size:11px;cursor:pointer">Apply rule</button>
|
|
<button style="background:#fff;color:#666;border:1px solid #d8dadd;padding:5px 10px;border-radius:5px;font-size:11px;cursor:pointer">Write off</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="background:#fff;border:2px solid #22c55e;border-radius:8px;margin-bottom:10px;overflow:hidden">
|
|
<div style="display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:#f0fdf4">
|
|
<div>
|
|
<div style="font-weight:600">Apr 11 — RBC bulk deposit</div>
|
|
<div style="color:#666;font-size:12px;margin-top:2px">Ref 9921-D · Westin Plating Co · <strong>$3,200.00 CAD</strong></div>
|
|
</div>
|
|
<div style="background:#22c55e;color:#fff;padding:4px 10px;border-radius:14px;font-size:11px;font-weight:700">98% MATCH (alternatives expanded)</div>
|
|
</div>
|
|
<div style="background:#f8fafc;padding:10px 14px;border-top:1px solid #d1fae5">
|
|
<div style="font-size:11px;color:#666;margin-bottom:8px;text-transform:uppercase;letter-spacing:0.4px;font-weight:600">AI suggestions, ranked</div>
|
|
<div style="background:#fff;border:1px solid #22c55e;border-radius:6px;padding:8px 10px;margin-bottom:5px;display:flex;justify-content:space-between;align-items:center">
|
|
<div>
|
|
<div style="font-size:12px;font-weight:600;color:#166534">98% — INV/2026/00145 — $3,200.00 · Westin Plating Co</div>
|
|
<div style="font-size:11px;color:#666;margin-top:2px">Exact amount + same partner + invoice date Apr 8 · 4 prior reconciles match this pattern</div>
|
|
</div>
|
|
<button style="background:#22c55e;color:#fff;border:none;padding:5px 14px;border-radius:5px;font-size:11px;font-weight:600;cursor:pointer">Accept</button>
|
|
</div>
|
|
<div style="background:#fff;border:1px solid #fde68a;border-radius:6px;padding:8px 10px;margin-bottom:5px;display:flex;justify-content:space-between;align-items:center">
|
|
<div>
|
|
<div style="font-size:12px;font-weight:600;color:#92400e">71% — INV/2026/00141 — $3,200.00 · Bramalea Lift Co</div>
|
|
<div style="font-size:11px;color:#666;margin-top:2px">Amount matches, partner is a different client</div>
|
|
</div>
|
|
<button style="background:#fff;color:#666;border:1px solid #d8dadd;padding:5px 12px;border-radius:5px;font-size:11px;cursor:pointer">Use this</button>
|
|
</div>
|
|
<div style="background:#fff;border:1px solid #d8dadd;border-radius:6px;padding:8px 10px;display:flex;justify-content:space-between;align-items:center">
|
|
<div>
|
|
<div style="font-size:12px;font-weight:600;color:#666">62% — INV/2026/00139 + INV/2026/00140 (combined) — Westin Plating Co</div>
|
|
<div style="font-size:11px;color:#666;margin-top:2px">Two invoices summing to $3,200.00</div>
|
|
</div>
|
|
<button style="background:#fff;color:#666;border:1px solid #d8dadd;padding:5px 12px;border-radius:5px;font-size:11px;cursor:pointer">Use this</button>
|
|
</div>
|
|
<div style="margin-top:6px"><button style="background:transparent;color:#666;border:none;padding:4px;font-size:11px;cursor:pointer;text-decoration:underline">Hide alternatives</button></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="background:#fff;border:1px solid #d8dadd;border-radius:8px;padding:8px 14px;text-align:center">
|
|
<button style="background:#22c55e;color:#fff;border:none;padding:8px 22px;border-radius:6px;font-size:12px;font-weight:700;cursor:pointer">Accept all 47 high-confidence (≥95%)</button>
|
|
<span style="color:#666;font-size:11px;margin-left:10px">·</span>
|
|
<span style="color:#666;font-size:11px;margin-left:8px">487 lines unreconciled · 47 ready to auto-accept · 134 need review · 306 no AI match</span>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<p class="subtitle">Each line: confidence badge top-right, single suggestion strip below (Accept / Reject / Show alternatives). High-confidence lines have a green border for instant scanning. Bottom bar offers batch-accept of all ≥95% matches at once. The 4th line shows what "Show alternatives" reveals when expanded — B's ranked panel inline.</p>
|
|
|
|
<div class="options">
|
|
<div class="option" data-choice="approve" onclick="toggleSelect(this)">
|
|
<div class="letter">✓</div>
|
|
<div class="content">
|
|
<h3>Looks right — proceed with this hybrid</h3>
|
|
<p>I'll capture this as the default UI design in the spec. Specific colour choices and exact pixel spacing get refined during implementation.</p>
|
|
</div>
|
|
</div>
|
|
<div class="option" data-choice="adjust" onclick="toggleSelect(this)">
|
|
<div class="letter">✏</div>
|
|
<div class="content">
|
|
<h3>Mostly right but I want changes</h3>
|
|
<p>Tell me in the terminal what to adjust (positions, colours, button labels, missing actions, etc.).</p>
|
|
</div>
|
|
</div>
|
|
<div class="option" data-choice="back_to_pure_a" onclick="toggleSelect(this)">
|
|
<div class="letter">A</div>
|
|
<div class="content">
|
|
<h3>Just pure A, no alternatives panel</h3>
|
|
<p>Keep it simple — single suggestion per line, no expand. If user disagrees with AI they go to the manual reconcile dialog.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|