REQ1 / PO1 • partial receiving packet — Prepare a role-and-record route from approved request to issued order and reconcile partial delivery against the exact order line,…

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>REQ1 / PO1 • partial receiving packet</title><style>*{box-sizing:border-box}body{margin:0;background:var(--bg,#f3f7fa);color:var(--ink,#203342);font:16px/1.55 system-ui,Segoe UI,sans-serif}main{max-width:1100px;margin:auto;padding:28px 30px 50px}h1{font-size:clamp(27px,3.5vw,40px);line-height:1.18;letter-spacing:-.035em;margin:8px 0 12px}h2{font-size:21px;line-height:1.35;margin:0 0 16px}h3{font-size:18px}.eyebrow{color:var(--accent,#176783);font-size:12px;letter-spacing:.12em;font-weight:800;text-transform:uppercase}.intro,.muted,small{color:#516272}.intro{margin:0 0 24px}.panel{padding:24px;border:1px solid var(--line,#d6e0e7);border-radius:12px;background:white;margin:18px 0}.grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.grid>*{min-width:0}.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:16px 0}button,input,textarea,select{font:inherit}button{border:1px solid var(--accent,#176783);background:var(--accent,#176783);color:white;padding:10px 16px;min-height:44px;border-radius:7px;font-weight:700;cursor:pointer}button.secondary{background:white;color:var(--accent,#176783)}button[aria-pressed=true]{background:var(--tint,#e3f2f8);color:var(--ink,#203342);box-shadow:inset 0 0 0 2px var(--accent,#176783)}button:hover{filter:brightness(.96)}:focus-visible{outline:3px solid #d56b00;outline-offset:3px}label{display:block;margin:12px 0 5px;font-size:14px;font-weight:650}input:not([type=checkbox]),select,textarea{width:100%;padding:10px 12px;min-height:44px;border:1px solid #94a5b2;background:white;color:inherit;border-radius:7px}textarea{resize:vertical;min-height:120px}input[type=checkbox]{width:20px;height:20px;margin-right:9px}label.inline{display:flex;align-items:center;font-weight:500;gap:7px}.result{padding:24px;background:var(--tint,#e3f2f8);border:1px solid var(--line,#c8dce7);border-radius:12px}.big{font-size:clamp(30px,5vw,48px);font-weight:780;line-height:1.25;letter-spacing:-.035em;margin:10px 0}.trace{font:15px/1.7 ui-monospace,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}.error{color:#a12820;font-weight:650;min-height:24px}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:15px}th,td{text-align:left;border-bottom:1px solid var(--line,#d6e0e7);padding:12px 9px;vertical-align:top}th{font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:#516272}code,pre,.code{font:14px/1.65 ui-monospace,Consolas,monospace}pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--tint,#eef3f7);padding:16px;border-radius:6px}details{border-top:1px solid var(--line,#d6e0e7);margin:24px 0;padding-top:16px}summary{cursor:pointer;font-weight:700;min-height:44px}footer{border-top:1px solid var(--line,#d6e0e7);margin-top:26px;padding-top:16px;font-size:13px;color:#516272}.bar{height:16px;background:#dce4ea;border-radius:20px;overflow:hidden;margin:12px 0}.bar span{display:block;height:100%;background:var(--accent,#176783)}[hidden]{display:none!important}@media(max-width:720px){main{padding:20px}.grid{grid-template-columns:1fr;gap:12px}.panel,.result{padding:20px}}@media(max-width:400px){main{padding:16px}.panel,.result{padding:16px}button{padding:10px 13px}} .metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:20px 0}.metric{padding:20px;background:white;border:1px solid var(--line,#d6e0e7);border-radius:9px}.metric h2{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#516272;margin:0}.metric .big{font-size:clamp(25px,4vw,39px);margin:8px 0}.metric small{font-size:12px;display:block}.badge{display:inline-block;padding:4px 10px;background:var(--tint,#e3f2f8);border-radius:20px;font-size:13px;font-weight:700}.paper{background:white;padding:26px;border:1px solid var(--line,#d6e0e7)}.feedback{padding:18px;background:var(--tint,#e3f2f8);border-left:4px solid var(--accent,#176783)}.preview{white-space:pre-wrap;overflow-wrap:anywhere}.fact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.fact-grid article{padding:20px;background:white;border:1px solid var(--line,#d6e0e7)}.record-row{display:grid;grid-template-columns:70px 1fr 1fr 1fr;gap:12px;align-items:start;padding:16px 0;border-bottom:1px solid var(--line,#d6e0e7)}.record-row small{display:block}.record-row b{display:block}.export textarea{min-height:170px}@media(max-width:720px){.metrics{grid-template-columns:1fr 1fr}.fact-grid{grid-template-columns:1fr}.record-row{grid-template-columns:55px 1fr 1fr}.record-row .row-extra{grid-column:2/4}}@media(max-width:400px){.metrics{gap:10px}.metric{padding:14px}.metric .big{font-size:29px}.metric h2{font-size:11px}.paper{padding:18px}.record-row{gap:9px;font-size:14px}}
body{--accent:#51658c;--bg:#f2f3f7;--ink:#2e3546;--tint:#e9edf6;--line:#d5dae7}.receipt-paper{background:white;border:1px solid #d5dae7;box-shadow:0 7px 18px #26344c0c;padding:26px;border-top:5px solid #51658c}.document-head{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;font-size:14px}.receipt-paper h2{font:27px Georgia,serif;margin:20px 0}.quantity-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.quantity-strip b{display:block;font-size:34px;line-height:1.4}.quantity-strip small{font-size:12px}.quantity-bar{display:flex;height:16px;background:#e4e7ec;margin:17px 0;border-radius:3px;overflow:hidden}#usable-bar{background:#538d7f}#damaged-bar{background:#d6a257}#outstanding-bar{background:#adb7c9}.panel{border-radius:3px}.paper h2{font:25px Georgia,serif}@media(max-width:400px){.receipt-paper{padding:17px}.quantity-strip{gap:7px}.quantity-strip b{font-size:27px}.quantity-strip small{font-size:10px}.document-head{font-size:13px}}</style></head><body><main>
<header><span class="eyebrow">Procurement handoff / fictional paper-packet order</span><h1>Keep arrival, condition, and the gap separate.</h1><p class="intro">Reconcile the exact order line before routing damage and the outstanding quantity for review.</p></header>
<section class="receipt-paper"><div class="document-head"><b>REQ1 → PO1 · line 1 → D1</b><span class="badge" id="packet-status">Partial delivery · review needed</span></div><h2>Paper packets <span class="muted">/ unit: packet</span></h2><div class="quantity-strip"><div><small>Ordered</small><b id="ordered-result">20</b></div><div><small>Arrived</small><b id="arrived-result">14</b></div><div><small>Usable</small><b id="usable-result">12</b></div><div><small>Damaged</small><b id="damaged-result">2</b></div><div><small>Not arrived</small><b id="outstanding-result">6</b></div></div><div class="quantity-bar" aria-label="Order composition"><span id="usable-bar"></span><span id="damaged-bar"></span><span id="outstanding-bar"></span></div><p id="equations" class="trace">14 = 12 + 2 arrived; 20 = 12 + 2 + 6 ordered</p><p id="receipt-note"></p></section>
<nav class="controls" aria-label="Record walkthrough"><button type="button" id="request" class="secondary">1 · Request</button><button type="button" id="order" class="secondary">2 · Issued order record</button><button type="button" id="delivery" class="secondary">3 · Receiving</button></nav><section class="panel"><h2 id="record-title"></h2><p id="record-detail"></p></section>
<div class="grid"><section class="panel"><h2>Line and delivery quantities</h2><p><b>PO1 line 1 · D1 · paper packets · packet</b></p><label for="ordered">Original line quantity</label><input id="ordered" type="number" value="20" ><label for="arrived">Arrived in delivery D1</label><input id="arrived" type="number" value="14" ><label for="usable">Recorded usable</label><input id="usable" type="number" value="12" ><label for="damaged">Recorded damaged</label><input id="damaged" type="number" value="2" ></section><section class="panel"><h2>Evidence gates</h2><label for="approval-ref">Approved-request evidence reference</label><input id="approval-ref" type="text" value="REQ1 approved-request specimen" ><label for="order-ref">Issued-order evidence reference</label><input id="order-ref" type="text" value="PO1 line 1 issued-order specimen" ><p class="muted">These default references describe fictional supplied records; this review does not approve or issue anything.</p><label for="receiver">Actual receiver / observation date, if supplied</label><input id="receiver" type="text" value="" ><label for="authority">Organization roles and actual authority references — to confirm</label><textarea id="authority" rows="3"></textarea><small>Confirm requester, authorized approver, designated buyer, receiver, and discrepancy contact in the actual procedure.</small></section></div>
<div class="controls"><button type="button" id="reconcile">Review quantity packet</button><button type="button" id="reset" class="secondary">Restore D1 specimen</button></div><p id="error" class="error" role="alert"></p>
<section class="paper"><h2>Discrepancy query draft</h2><label for="query">Exact generated query — not sent</label><textarea id="query" rows="6" readonly></textarea><div class="controls"><button type="button" id="select-query" class="secondary">Select query text</button></div><small>Copy the selected text manually into the authorized review workflow.</small><div class="grid"><div><label for="recipient">Actual query recipient — blank until supplied</label><input id="recipient" type="text" value="" ><label for="response">Actual response — blank until supplied</label><textarea id="response" rows="3"></textarea></div><div><label for="next-step">Authorized next step — blank until supplied</label><textarea id="next-step" rows="3"></textarea><label for="follow-up">Actual follow-up date — blank until supplied</label><input id="follow-up" type="text" value="" ></div></div></section>
<details><summary>Procedure and next-delivery boundary</summary><ol><li>Record the need and REQ1 item/unit/quantity.</li><li>Check the actual approval authority and reference.</li><li>Retain the separately issued PO1 line 1 record.</li><li>Inspect the same item, line, and unit at receiving.</li><li>Record partial delivery and damage separately; attach real condition evidence.</li><li>Route the query to the designated buying role; retain the actual response and authority.</li><li>For a later delivery, add a new delivery ID against the same PO line, preserve D1, and avoid counting D1 again.</li></ol><p>Do not infer supplier fault, return, disposal, replacement, a new arrival date, payment authority, thresholds, or invoice rules from the quantity record.</p></details>
<section class="panel export"><h2>Receiving review packet</h2><div class="controls"><button type="button" id="prepare">Prepare text</button><button type="button" id="select-text" class="secondary">Select text</button></div><p id="export-error" class="error" role="alert"></p><label for="export-text">Exact generated plain text — manual copying</label><textarea id="export-text" rows="10" readonly></textarea><small>Select text, then copy it manually into your maintained document. Nothing is saved or sent.</small></section>
<footer>Local HTML review document, not a purchase, approval, stock update, payment, message sender, PDF, or Word export. Maintained purchasing records and the organization’s authorized receiving workflow remain authoritative. Future delivery and damage resolution evidence must be supplied separately.</footer>
</main><script>const $=id=>document.getElementById(id);const on=(id,e,fn)=>$(id).addEventListener(e,fn);const txt=(id,v)=>$(id).textContent=v;const esc=s=>String(s).replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));const positive=x=>String(x).trim()!==''&&Number.isFinite(Number(x))&&Number(x)>0;const num=x=>Number(x.toPrecision(10)).toString();function enter(id,fn){on(id,'keydown',e=>{if(e.key==='Enter'&&!e.isComposing&&e.keyCode!==229){e.preventDefault();fn()}})}function selectText(id){$(id).focus();$(id).select()}
function clockMinute(s){if(!/^(?:[01]\d|2[0-3]):[0-5]\d$/.test(s))throw Error('Use a valid 24-hour time as HH:MM.');const [h,m]=s.split(':').map(Number);return h*60+m}
function whole(s,label){if(!/^\d+$/.test(String(s))||!Number.isSafeInteger(Number(s)))throw Error(label+' must be a nonnegative whole number.');return Number(s)}
function isoDay(s){if(!/^\d{4}-\d{2}-\d{2}$/.test(s))throw Error('Use a real calendar date as YYYY-MM-DD.');const d=new Date(s+'T00:00:00Z');if(!Number.isFinite(d.getTime())||d.toISOString().slice(0,10)!==s)throw Error('Use a real calendar date as YYYY-MM-DD.');return d.getTime()/86400000}


let current=null,stage='delivery';
function receiptMath(o,a,u,d,approval,order){o=whole(o,'Ordered quantity');a=whole(a,'Arrived quantity');u=whole(u,'Usable quantity');d=whole(d,'Damaged quantity');if(o===0)throw Error('The original order quantity must be positive.');if(!approval.trim())throw Error('Approved-request evidence is missing; no approval claim can pass this gate.');if(!order.trim())throw Error('Issued-order reference is missing; no issued-order claim can pass this gate.');if(!Number.isSafeInteger(u+d)||a!==u+d)throw Error('Arrived must equal usable plus damaged. Preserve every category.');if(a>o)throw Error('Arrived exceeds the original order. Reconcile overdelivery separately; do not create negative outstanding quantity.');return {o,a,u,d,outstanding:o-a}}
function pending(){current=null;for(const n of ['ordered-result','arrived-result','usable-result','damaged-result','outstanding-result'])txt(n,'—');for(const n of ['usable-bar','damaged-bar','outstanding-bar'])$(n).style.width='0%';txt('packet-status','Current evidence needs review');txt('equations','Inputs changed. Review the current quantities and evidence references.');txt('receipt-note','');$('query').value='';$('export-text').value='';txt('error','');txt('export-error','')}
function walkthrough(){txt('record-title',{request:'REQ1 · original need and approved-request record',order:'PO1 · line 1 · separately issued order record',delivery:'D1 · receiving against the same line'}[stage]);txt('record-detail',stage==='request'?'The fictional request identifies paper packets in packet units. Its supplied approved-request reference is not approval performed by this page.':stage==='order'?$('order-ref').value.trim()?'Issued-order evidence supplied for this review: '+$('order-ref').value+'. Keep the buyer and actual authority reference in the maintained process.':'Issued-order evidence missing. This review cannot claim that an order was issued.':'D1 retains the same REQ1 / PO1 / line 1 identity. Arrived includes both usable and damaged; missing units are a separate quantity.');for(const s of ['request','order','delivery'])$(s).setAttribute('aria-pressed',String(stage===s))}
function reconcile(){try{current=receiptMath($('ordered').value,$('arrived').value,$('usable').value,$('damaged').value,$('approval-ref').value,$('order-ref').value);const r=current;for(const [n,v]of [['ordered-result',r.o],['arrived-result',r.a],['usable-result',r.u],['damaged-result',r.d],['outstanding-result',r.outstanding]])txt(n,v);$('usable-bar').style.width=r.u/r.o*100+'%';$('damaged-bar').style.width=r.d/r.o*100+'%';$('outstanding-bar').style.width=r.outstanding/r.o*100+'%';txt('equations',r.a+' = '+r.u+' + '+r.d+' arrived; '+r.o+' = '+r.u+' + '+r.d+' + '+r.outstanding+' ordered');txt('packet-status',r.outstanding?'Partial delivery · review needed':r.d?'All units arrived · damage decision needed':'Quantities reconcile · authorized acceptance not established');txt('receipt-note',r.d+' damaged packets have arrived; they are separate from '+r.outstanding+' packets not yet arrived. Condition decisions remain separate.');$('query').value='Delivery D1 for REQ1, PO1 line 1, records '+r.a+' of '+r.o+' paper packets arrived: '+r.u+' usable and '+r.d+' damaged. '+r.outstanding+' packets have not arrived. Please confirm the authorized next steps for the damaged packets and the evidence needed to follow up on the outstanding quantity. No full-receipt, acceptance, or payment claim has been recorded.';txt('error','');walkthrough()}catch(e){pending();txt('packet-status','Evidence gate held');txt('error',e.message);walkthrough()}}
for(const n of ['ordered','arrived','usable','damaged','approval-ref','order-ref']){on(n,'input',()=>{pending();walkthrough()});enter(n,reconcile)}
for(const s of ['request','order','delivery'])on(s,'click',()=>{stage=s;walkthrough()});
for(const n of ['receiver','authority','recipient','response','next-step','follow-up'])on(n,'input',()=>{$('export-text').value='';txt('export-error','')});
on('reconcile','click',reconcile);on('select-query','click',()=>selectText('query'));on('prepare','click',()=>{if(!current){$('export-text').value='';txt('export-error','Review the current quantity and evidence packet first.');return}$('export-text').value='PARTIAL RECEIVING REVIEW — FICTIONAL SPECIMEN\nREQ1 | PO1 line 1 | D1 | paper packets | packet\n'+$('equations').textContent+'\n'+$('packet-status').textContent+'\nApproved-request reference: '+$('approval-ref').value+'\nIssued-order reference: '+$('order-ref').value+'\nReceiver / observation: '+($('receiver').value||'TO CONFIRM')+'\nRoles / authority: '+($('authority').value||'TO CONFIRM')+'\n\nQuery draft (not sent): '+$('query').value+'\n\nActual recipient: '+($('recipient').value||'NOT SUPPLIED')+'\nActual response: '+($('response').value||'NOT SUPPLIED')+'\nAuthorized next step: '+($('next-step').value||'NOT SUPPLIED')+'\nFollow-up date: '+($('follow-up').value||'NOT SUPPLIED')+'\nNo purchase, approval, stock change, payment, or message performed.';txt('export-error','')});on('select-text','click',()=>selectText('export-text'));on('reset','click',()=>{for(const [n,v]of Object.entries({ordered:'20',arrived:'14',usable:'12',damaged:'2','approval-ref':'REQ1 approved-request specimen','order-ref':'PO1 line 1 issued-order specimen',receiver:'',authority:'',recipient:'',response:'','next-step':'','follow-up':''}))$(n).value=v;stage='delivery';$('export-text').value='';txt('export-error','');reconcile()});reconcile();
</script></body></html>