Order review · EC01 — Keep order/payment/fulfillment states separate and reconcile actionable remaining units without treating paid as shipped or canceled as…

Select the code and use your copy shortcut. Changes in this preview are temporary.

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Order review · EC01</title><style>
*{box-sizing:border-box}body{margin:0;font:15px/1.5 system-ui,sans-serif;color:#24374c;background:#f3f6fa}main{max-width:1200px;margin:auto;padding:30px}header{display:flex;justify-content:space-between;gap:20px;align-items:center}h1{font-size:32px;letter-spacing:-.04em;margin:3px 0}h2{font-size:20px;margin:0 0 12px}h3{font-size:16px;margin:0 0 8px}p{margin:0 0 10px}.eyebrow{font-size:11px;font-weight:750;letter-spacing:.14em;text-transform:uppercase;color:#50708d}.small{font-size:13px;color:#5a6e83}.metrics{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:15px;margin:25px 0}.metric{background:white;border:1px solid #d9e2ed;border-radius:12px;padding:21px}.metric.primary{background:#173e69;color:white;border-color:#173e69}.number{font-size:46px;line-height:1.2;font-weight:750;letter-spacing:-.04em;margin:7px 0}.metric p{font-size:13px;margin:0}.metric .caption{opacity:.8}.bar{display:flex;height:7px;overflow:hidden;border-radius:9px;background:#e8edf3;margin-top:17px}.bar i{display:block;background:#29a4aa}.layout{display:grid;grid-template-columns:1.75fr 1fr;gap:20px}.panel{background:#fff;border:1px solid #d9e2ed;border-radius:12px;padding:22px}.filters{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:15px}button{min-height:42px;font:650 13px system-ui;border:1px solid #cad8e6;color:#24496e;background:white;border-radius:6px;padding:8px 12px;cursor:pointer}button[aria-pressed=true]{background:#d9eaf8;border-color:#4a85b5;color:#164b75}button.primary{background:#173e69;color:white}:focus-visible{outline:3px solid #ce7b25;outline-offset:3px}.order{display:grid;grid-template-columns:55px 1fr 73px;gap:10px;align-items:center;padding:15px 0;border-top:1px solid #e3e9ef}.order strong{display:block}.badges{display:flex;gap:5px;flex-wrap:wrap}.badge{font-size:11px;padding:3px 6px;background:#eef3f8;color:#38546d;border-radius:4px}.badge.paid{background:#e3f4eb;color:#21624e}.badge.blocked{background:#fff0d8;color:#7b561b}.qty{text-align:right;font-size:13px}.qty b{display:block;font-size:21px}.queue-note{font-size:13px;color:#546d85;margin:10px 0}.detail{background:#f2f6fb;border-radius:8px;padding:16px;margin-top:10px}.detail p{font-size:13px}.lines{width:100%;border-collapse:collapse;font-size:13px}.lines td,.lines th{padding:7px 3px;text-align:right;border-bottom:1px solid #d7e1ed}.lines td:first-child,.lines th:first-child{text-align:left}.warning{color:#a2362b;font-size:14px;min-height:22px;margin:12px 0}.policy{background:#e7f0f8;border-left:4px solid #3c7ca5;padding:16px;margin-top:22px;font-size:13px}.workbench{margin-top:25px}.inputgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px}label{font-weight:650;font-size:13px}input,select{display:block;font:16px system-ui;width:100%;border:1px solid #a6b8c9;border-radius:6px;margin:5px 0 8px;padding:10px;background:white;color:#24374c}footer{font-size:13px;color:#5a6e83;margin-top:25px;max-width:90ch}@media(max-width:850px){main{padding:24px 18px}.layout{grid-template-columns:1fr}.metrics{gap:10px}.metric{padding:16px}.number{font-size:35px}}@media(max-width:530px){main{padding:20px 13px}header{display:block}header .small{margin-top:10px}.metrics{grid-template-columns:1fr}.metric{padding:16px}.metric .number{font-size:36px;margin:3px 0}.layout{gap:15px}.panel{padding:17px}.inputgrid{grid-template-columns:1fr}.order{grid-template-columns:48px 1fr 58px;gap:5px}.filters button{flex:1}}
</style></head><body><main><header><div><p class="eyebrow">Operations / order exceptions</p><h1>What needs review?</h1><p class="small">Keep payment, fulfillment, and order state separate.</p></div><p class="small">Fictional source FIXTURE-EC01<br>October 13, 2026 · 12:00 p.m. UTC−04:00</p></header><section class="metrics" aria-label="Whole-source metrics"><div class="metric primary"><p>Q1 fulfillment review</p><div id="qualified-units" class="number">6 units</div><p id="qualified-orders">2 qualified orders · O1 and O2</p><div class="bar"><i id="qualified-bar" style="width:75%"></i></div><p class="caption" style="margin-top:8px">Whole dated source · not permission to ship</p></div><div class="metric"><p>Payment-blocked work</p><div class="number" id="blocked-units">2 units</div><p>O4 · Pending payment</p><p class="caption" style="margin-top:14px">Excluded from Q1</p></div><div class="metric"><p>Amount difference requiring review</p><div class="number" id="refund-difference">USD 10</div><p>O3 · Captured 40 − refunded 30</p><p class="caption" style="margin-top:14px">Separate monetary record; no refund approved</p></div></section><p id="validation" class="warning" role="alert"></p><div class="layout"><section class="panel"><h2>Order review queue</h2><div class="filters"><button id="filter-all" type="button" aria-pressed="true">All 4 orders</button><button id="filter-qualified" type="button" aria-pressed="false">Q1 qualified</button><button id="filter-blocked" type="button" aria-pressed="false">Payment blocked</button><button id="filter-refund" type="button" aria-pressed="false">Refund review</button></div><p id="scope" class="queue-note">Showing all 4 orders. Summary metrics always cover the whole dated source.</p><div id="orders"></div></section><aside class="panel"><h2 id="detail-heading">O2 · line reconciliation</h2><div id="detail-body"></div><div class="policy"><strong>Q1 policy</strong><br>Open + Paid + Unfulfilled or Partially fulfilled + explicitly No hold + consistent positive remaining line units.<br><br>Blank is unknown. Missing Q1 evidence withholds complete qualified totals.</div></aside></div><section class="panel workbench"><h2>Inspect a source-data change</h2><p class="small">Change only the local demonstration. Unknown or invalid inputs clear dependent totals.</p><div class="inputgrid"><label for="o2-hold">O2 hold<select id="o2-hold"><option value="No">No</option><option value="Yes">Yes</option><option value="">Unknown / not supplied</option></select></label><label for="l22-fulfilled">L22 fulfilled units · ordered 3<input id="l22-fulfilled" value="1" inputmode="numeric" maxlength="10"></label></div><button type="button" id="reset" class="primary">Restore original snapshot</button><p id="scenario" class="small" style="margin-top:10px">Original demonstration values. Source history is not overwritten.</p></section><footer><p>O3 picking quantities are not supplied, not zero. Its canceled state excludes picking but leaves the monetary review visible. O1/O2 captured cash amounts are unknown; Paid is a status, not a cash total.</p><p>Proposed next step for O3: review monetary reconciliation. Actual owner, decision, decision date, and completed action remain unassigned. This HTML review companion does not connect to a store, ship, refund, capture payment, save changes, or export a workbook.</p></footer></main><script>
'use strict';const $=id=>document.getElementById(id);const headers=[{id:'O1',order:'Open',payment:'Paid',fulfillment:'Unfulfilled',hold:'No'},{id:'O2',order:'Open',payment:'Paid',fulfillment:'Partially fulfilled',hold:'No'},{id:'O3',order:'Canceled',payment:'Partially refunded',fulfillment:'Not required',hold:'Not applicable'},{id:'O4',order:'Open',payment:'Pending',fulfillment:'Unfulfilled',hold:'No'}];const originalLines=[{id:'L11',order:'O1',ordered:3,fulfilled:0},{id:'L21',order:'O2',ordered:2,fulfilled:1},{id:'L22',order:'O2',ordered:3,fulfilled:1},{id:'L41',order:'O4',ordered:2,fulfilled:0}];let filter='all',selected='O2';
function summarize(orders,lines){const issues=[],seen=new Set(),headerSeen=new Set(),totals={},qualified=[];for(const o of orders){if(headerSeen.has(o.id))issues.push(o.id+': duplicate/conflicting order header');headerSeen.add(o.id);if(o.order==='Open'&&o.payment==='Paid'&&['Unfulfilled','Partially fulfilled'].includes(o.fulfillment)&&!['No','Yes'].includes(o.hold))issues.push(o.id+': hold is unknown');}
for(const l of lines){if(seen.has(l.id))issues.push(l.id+': duplicate line ID');seen.add(l.id);if(!headerSeen.has(l.order))issues.push(l.id+': matching order header missing');if(!Number.isSafeInteger(l.ordered)||!Number.isSafeInteger(l.fulfilled)||l.ordered<0||l.fulfilled<0||l.fulfilled>l.ordered){issues.push(l.id+': ordered/fulfilled quantity is missing or invalid');continue;}totals[l.order]=(totals[l.order]||0)+l.ordered-l.fulfilled;}
for(const o of orders)if(o.order==='Open'&&o.payment==='Paid'&&['Unfulfilled','Partially fulfilled'].includes(o.fulfillment)&&o.hold==='No'){if(totals[o.id]===undefined)issues.push(o.id+': remaining line units missing');else if(totals[o.id]>0)qualified.push(o.id);}
return{issues,totals,qualified,count:issues.length?null:qualified.length,units:issues.length?null:qualified.reduce((sum,id)=>sum+totals[id],0)};}
function current(){const orders=headers.map(o=>({...o,hold:o.id==='O2'?$('o2-hold').value:o.hold}));const raw=$('l22-fulfilled').value.trim(),n=/^[0-9]+$/.test(raw)?Number(raw):null;return{orders,lines:originalLines.map(l=>({...l,fulfilled:l.id==='L22'?n:l.fulfilled}))};}
function addText(parent,tag,text,cls){const e=document.createElement(tag);e.textContent=text;if(cls)e.className=cls;parent.appendChild(e);return e;}
function render(){const{orders,lines}=current(),r=summarize(orders,lines);$('qualified-units').textContent=r.units===null?'Withheld':r.units+' units';$('qualified-orders').textContent=r.count===null?'Complete Q1 totals need source evidence':r.count+' qualified order'+(r.count===1?'':'s')+(r.qualified.length?' · '+r.qualified.join(' and '):'');$('qualified-bar').style.width=r.units===null?'0%':(r.units/(r.units+2)*100)+'%';$('validation').textContent=r.issues.join('; ');$('l22-fulfilled').setAttribute('aria-invalid',String(r.issues.some(x=>x.startsWith('L22'))));let shown=orders.filter(o=>filter==='all'||(filter==='qualified'&&r.units!==null&&r.qualified.includes(o.id))||(filter==='blocked'&&o.id==='O4')||(filter==='refund'&&o.id==='O3'));$('scope').textContent='Showing '+(filter==='all'?'all 4 orders':filter==='qualified'?(r.units===null?'no qualified rows until evidence is complete':r.qualified.join(', ')||'no qualified orders'):filter==='blocked'?'O4 payment-blocked work':'O3 refund review')+'. Summary metrics always cover the whole dated source.';$('orders').replaceChildren();for(const o of shown){let row=document.createElement('div');row.className='order';let b=addText(row,'button',o.id);b.type='button';b.id='inspect-'+o.id;b.setAttribute('aria-label','Inspect '+o.id);b.addEventListener('click',()=>{selected=o.id;render();});let c=document.createElement('div');let badges=document.createElement('div');badges.className='badges';for(const s of[o.order,o.payment,o.fulfillment])addText(badges,'span',s,'badge'+(s==='Paid'?' paid':s==='Pending'?' blocked':''));c.appendChild(badges);addText(c,'span','Hold: '+(o.hold||'unknown'),'small');row.appendChild(c);let q=document.createElement('div');q.className='qty';addText(q,'b',o.id==='O3'?'—':r.issues.some(x=>x.startsWith('L22'))&&o.id==='O2'?'?':String(r.totals[o.id]));addText(q,'span',o.id==='O3'?'unsupplied':'remaining');row.appendChild(q);$('orders').appendChild(row);}const o=orders.find(x=>x.id===selected),ownLines=lines.filter(l=>l.order===selected);$('detail-heading').textContent=selected+' · '+(selected==='O3'?'refund review':'line reconciliation');$('detail-body').replaceChildren();let d=$('detail-body');addText(d,'p',o.order+' / '+o.payment+' / '+o.fulfillment,'small');if(selected==='O3'){addText(d,'h3','USD 10 difference');addText(d,'p','Captured USD 40 − refunded USD 30. Amount difference requiring review, not an approved or automatically owed refund.');addText(d,'p','Picking quantities: not supplied. Proposed task: Review O3 monetary reconciliation. Owner / actual decision / decision date: not supplied.');}else{let table=document.createElement('table');table.className='lines';let head=document.createElement('tr');for(const text of['Line','Ordered','Fulfilled','Left'])addText(head,'th',text);table.appendChild(head);ownLines.forEach(l=>{let tr=document.createElement('tr');for(const text of[l.id,l.ordered,l.fulfilled===null?'Unknown':l.fulfilled,Number.isSafeInteger(l.fulfilled)&&l.fulfilled<=l.ordered&&l.fulfilled>=0?l.ordered-l.fulfilled:'Unknown'])addText(tr,'td',text);table.appendChild(tr);});d.appendChild(table);addText(d,'p',selected==='O2'?'Two unique lines, one order. Original sums: 5 ordered − 2 fulfilled = 3 remaining.':'Remaining units = ordered − fulfilled.','small');addText(d,'p',r.issues.length?'Resolve the named source exception before treating Q1 totals as complete.':r.qualified.includes(o.id)?'Qualifies for Q1 fulfillment review. No shipping action is authorized.':o.id==='O4'?'Payment pending: not Q1 qualified.':'Does not qualify: inspect the hold and policy.');}for(const name of['all','qualified','blocked','refund'])$('filter-'+name).setAttribute('aria-pressed',String(filter===name));}
for(const name of['all','qualified','blocked','refund'])$('filter-'+name).addEventListener('click',()=>{filter=name;if(name==='refund')selected='O3';if(name==='blocked')selected='O4';render();});for(const id of['o2-hold','l22-fulfilled'])$(id).addEventListener('input',()=>{$('scenario').textContent='Local what-if values. Original FIXTURE-EC01 remains the dated reference.';render();});$('o2-hold').addEventListener('change',render);$('reset').addEventListener('click',()=>{$('o2-hold').value='No';$('l22-fulfilled').value='1';filter='all';selected='O2';$('scenario').textContent='Original demonstration values. Source history is not overwritten.';render();});render();
</script></body></html>