93 lines
8.5 KiB
HTML
93 lines
8.5 KiB
HTML
<h2>Hybrid: AI Recommendation + Your Input + Bulk Actions</h2>
|
|
<p class="subtitle">The AI pre-fills its recommendation. You get an editable input per row to override or add notes. Checkboxes for bulk actions.</p>
|
|
|
|
<div class="mockup">
|
|
<div class="mockup-header">Chat Panel — find_missing_itc_bills result</div>
|
|
<div class="mockup-body" style="padding: 0; overflow-x: auto;">
|
|
<table style="width:100%; border-collapse: collapse; font-size: 13px;">
|
|
<thead>
|
|
<tr style="background: rgba(255,255,255,0.05); border-bottom: 2px solid rgba(255,255,255,0.15);">
|
|
<th style="padding: 8px 6px; width:30px; text-align:center;"><input type="checkbox" title="Select all"></th>
|
|
<th style="padding: 8px 6px; text-align:left; font-weight:600;">Date</th>
|
|
<th style="padding: 8px 6px; text-align:left; font-weight:600;">Vendor</th>
|
|
<th style="padding: 8px 6px; text-align:right; font-weight:600;">Amount</th>
|
|
<th style="padding: 8px 6px; text-align:left; font-weight:600; color:#60a5fa;">AI Recommendation</th>
|
|
<th style="padding: 8px 6px; text-align:left; font-weight:600; color:#fbbf24;">Your Input</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr style="border-bottom: 1px solid rgba(255,255,255,0.08);">
|
|
<td style="padding: 6px; text-align:center;"><input type="checkbox"></td>
|
|
<td style="padding: 6px;">2024-01-10</td>
|
|
<td style="padding: 6px;">Ki Mobility LLC</td>
|
|
<td style="padding: 6px; text-align:right; font-weight:600;">-$14,917.95</td>
|
|
<td style="padding: 6px;"><span style="background:rgba(34,197,94,0.15); color:#4ade80; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:500;">Dismiss</span> <span style="opacity:0.7; font-size:12px;">US vendor, no HST applies</span></td>
|
|
<td style="padding: 6px;"><input style="width:100%; padding:4px 8px; font-size:12px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.15); border-radius:4px; color:inherit;" placeholder="Add your note..." value="Confirmed, no ITC needed"></td>
|
|
</tr>
|
|
<tr style="border-bottom: 1px solid rgba(255,255,255,0.08);">
|
|
<td style="padding: 6px; text-align:center;"><input type="checkbox" checked></td>
|
|
<td style="padding: 6px;">2024-02-16</td>
|
|
<td style="padding: 6px;">Savaria Concord Lifts</td>
|
|
<td style="padding: 6px; text-align:right; font-weight:600;">-$10,173.00</td>
|
|
<td style="padding: 6px;"><span style="background:rgba(251,191,36,0.15); color:#fbbf24; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:500;">Flag</span> <span style="opacity:0.7; font-size:12px;">Canadian vendor, ITC likely missing</span></td>
|
|
<td style="padding: 6px;"><input style="width:100%; padding:4px 8px; font-size:12px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.15); border-radius:4px; color:inherit;" placeholder="Add your note..."></td>
|
|
</tr>
|
|
<tr style="border-bottom: 1px solid rgba(255,255,255,0.08);">
|
|
<td style="padding: 6px; text-align:center;"><input type="checkbox" checked></td>
|
|
<td style="padding: 6px;">2024-02-13</td>
|
|
<td style="padding: 6px;">Savaria Concord Lifts</td>
|
|
<td style="padding: 6px; text-align:right; font-weight:600;">-$9,599.50</td>
|
|
<td style="padding: 6px;"><span style="background:rgba(251,191,36,0.15); color:#fbbf24; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:500;">Flag</span> <span style="opacity:0.7; font-size:12px;">Canadian vendor, ITC likely missing</span></td>
|
|
<td style="padding: 6px;"><input style="width:100%; padding:4px 8px; font-size:12px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.15); border-radius:4px; color:inherit;" placeholder="Add your note..." value="Need to check PO"></td>
|
|
</tr>
|
|
<tr style="border-bottom: 1px solid rgba(255,255,255,0.08);">
|
|
<td style="padding: 6px; text-align:center;"><input type="checkbox"></td>
|
|
<td style="padding: 6px;">2024-01-11</td>
|
|
<td style="padding: 6px;">Joerns Healthcare</td>
|
|
<td style="padding: 6px; text-align:right; font-weight:600;">-$2,392.80</td>
|
|
<td style="padding: 6px;"><span style="background:rgba(251,191,36,0.15); color:#fbbf24; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:500;">Flag</span> <span style="opacity:0.7; font-size:12px;">Check fiscal position</span></td>
|
|
<td style="padding: 6px;"><input style="width:100%; padding:4px 8px; font-size:12px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.15); border-radius:4px; color:inherit;" placeholder="Add your note..."></td>
|
|
</tr>
|
|
<tr style="border-bottom: 1px solid rgba(255,255,255,0.08);">
|
|
<td style="padding: 6px; text-align:center;"><input type="checkbox"></td>
|
|
<td style="padding: 6px;">2024-01-11</td>
|
|
<td style="padding: 6px;">Maple Leaf Wheelchair</td>
|
|
<td style="padding: 6px; text-align:right; font-weight:600;">-$2,181.30</td>
|
|
<td style="padding: 6px;"><span style="background:rgba(96,165,250,0.15); color:#60a5fa; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:500;">Create Rule</span> <span style="opacity:0.7; font-size:12px;">Recurring vendor, always has HST</span></td>
|
|
<td style="padding: 6px;"><input style="width:100%; padding:4px 8px; font-size:12px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.15); border-radius:4px; color:inherit;" placeholder="Add your note..."></td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding: 6px; text-align:center;"><input type="checkbox"></td>
|
|
<td style="padding: 6px;">2024-01-17</td>
|
|
<td style="padding: 6px;">Human Care Canada Inc.</td>
|
|
<td style="padding: 6px; text-align:right; font-weight:600;">-$2,446.20</td>
|
|
<td style="padding: 6px;"><span style="background:rgba(251,191,36,0.15); color:#fbbf24; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:500;">Flag</span> <span style="opacity:0.7; font-size:12px;">Canadian vendor, ITC likely missing</span></td>
|
|
<td style="padding: 6px;"><input style="width:100%; padding:4px 8px; font-size:12px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.15); border-radius:4px; color:inherit;" placeholder="Add your note..."></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<!-- Bulk action bar -->
|
|
<div style="padding: 10px 12px; background: rgba(255,255,255,0.03); border-top: 1px solid rgba(255,255,255,0.1); display:flex; gap:8px; align-items:center; flex-wrap: wrap;">
|
|
<span style="font-size:12px; opacity:0.7; margin-right:4px;">2 selected</span>
|
|
<button style="padding:5px 12px; font-size:12px; background:#22c55e; border:none; border-radius:4px; color:white; cursor:pointer; font-weight:500;">✓ Apply Recommendations</button>
|
|
<button style="padding:5px 12px; font-size:12px; background:rgba(251,191,36,0.2); border:1px solid rgba(251,191,36,0.4); border-radius:4px; color:#fbbf24; cursor:pointer; font-weight:500;">⚑ Flag Selected</button>
|
|
<button style="padding:5px 12px; font-size:12px; background:rgba(96,165,250,0.2); border:1px solid rgba(96,165,250,0.4); border-radius:4px; color:#60a5fa; cursor:pointer; font-weight:500;">+ Create Rules</button>
|
|
<button style="padding:5px 12px; font-size:12px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15); border-radius:4px; color:inherit; cursor:pointer;">Dismiss Selected</button>
|
|
<div style="flex:1;"></div>
|
|
<button style="padding:5px 12px; font-size:12px; background:rgba(139,92,246,0.2); border:1px solid rgba(139,92,246,0.4); border-radius:4px; color:#a78bfa; cursor:pointer; font-weight:500;">✍ Submit All Notes to AI</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-top: 24px;">
|
|
<h3>How it works</h3>
|
|
<ul style="font-size: 14px; line-height: 1.8; opacity: 0.85;">
|
|
<li><strong>AI Recommendation</strong> column — pre-filled by AI with a colour-coded badge (Dismiss/Flag/Create Rule) + reasoning</li>
|
|
<li><strong>Your Input</strong> column — editable text field per row for your notes, corrections, or instructions</li>
|
|
<li><strong>Checkboxes</strong> — select rows for bulk actions</li>
|
|
<li><strong>Bulk action bar</strong> — Apply Recommendations, Flag, Create Rules, Dismiss, or Submit All Notes back to the AI</li>
|
|
<li><strong>"Submit All Notes to AI"</strong> — sends your row-level annotations back into the chat so the AI can learn and act on your feedback</li>
|
|
</ul>
|
|
</div>
|