Request waiting ledger — Locate purchase requests waiting in their current intake/approval/quotation stage, distinguish waiting age from completed request-to-PO…
HTML for this example
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>Request waiting ledger</title><style>*{box-sizing:border-box}body{margin:0;font:16px/1.55 system-ui,sans-serif;color:var(--ink);background:var(--bg)}main{max-width:1120px;margin:auto;padding:30px}h1{font-size:clamp(30px,4vw,44px);line-height:1.12;letter-spacing:-.035em;margin:5px 0 12px}h2{font-size:23px;line-height:1.3;margin:0 0 15px}h3{font-size:17px;margin:0 0 8px}p{margin:0 0 12px}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.13em;font-weight:750;color:var(--accent)}.small,footer{font-size:13px;color:var(--muted)}footer{margin:27px 0}.panel{background:white;border:1px solid var(--line);padding:23px;border-radius:9px;margin-top:22px}.two{display:grid;grid-template-columns:1.35fr 1fr;gap:23px}.row{display:flex;gap:9px;flex-wrap:wrap;align-items:center}button{font:700 14px system-ui;min-height:44px;padding:10px 16px;border:1px solid var(--accent);background:var(--accent);color:white;border-radius:5px;cursor:pointer}button.secondary{color:var(--accent);background:white}button[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--ink)}button:disabled{opacity:.45;cursor:default}:focus-visible{outline:3px solid #d28b25;outline-offset:3px}label{display:block;font-size:13px;font-weight:650}input,textarea,select{display:block;width:100%;padding:11px;font:16px/1.5 system-ui;color:var(--ink);background:white;border:1px solid #9baab6;border-radius:4px;margin:6px 0 15px}textarea{min-height:100px;resize:vertical}.error{color:#a02b20;font-size:14px;min-height:23px}.result{font-size:40px;line-height:1.25;letter-spacing:-.04em;font-weight:750}.notice{padding:15px;background:#fff3db;border-left:4px solid #cf9d3e;font-size:14px;margin:16px 0}details{margin-top:23px;border-top:1px solid var(--line);padding-top:15px}summary{cursor:pointer;min-height:44px;font-weight:700}.time-row{display:grid;grid-template-columns:75px 1fr 70px;gap:14px;padding:15px 0;border-top:1px solid var(--line)}.time-row p{font-size:14px;margin:5px 0}.time-row input{margin:0;text-align:center}.range{font-size:13px;font-weight:700;color:var(--accent)}[hidden]{display:none!important}pre{white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.6 ui-monospace,Consolas,monospace} @media(max-width:740px){main{padding:23px 16px}.two{grid-template-columns:1fr;gap:0}.panel{padding:20px}}@media(max-width:380px){main{padding:20px 12px}.panel{padding:17px}.time-row{grid-template-columns:1fr 65px}.range{grid-column:1/-1}.row button{flex:1}}:root{--ink:#183d42;--bg:#edf4f4;--accent:#23757c;--muted:#5d7477;--line:#c7dddd}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:24px 0}.metric{padding:22px;background:white;border:1px solid var(--line);border-top:4px solid var(--accent);border-radius:7px}.metric p{font-size:13px}.queue{padding:15px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:60px 1fr;gap:15px}.queue p{font-size:14px;margin:3px 0}.unknown{color:#936829}.bar{background:#d9ebeb;height:12px;border-radius:3px;margin:8px 0}.bar i{display:block;height:100%;background:#47939a}.detail{background:#edf6f5;padding:18px;border-radius:5px}@media(max-width:550px){.metrics{grid-template-columns:1fr}.metric{padding:17px}.metric .result{font-size:34px}}</style></head><body><main><p class="eyebrow">Purchase-request review · fictional snapshot</p><h1>Where are requests waiting?</h1><p>October 13, 2026 · elapsed calendar days, with missing ages kept visible.</p><section class="metrics"><div class="metric"><p>Outstanding requests</p><div class="result" id="outstanding">3</div><p>R1, R2, R4 · no issued PO in this queue</p></div><div class="metric"><p>Awaiting approval</p><div class="result">2</div><p>1 known age: 3 days · 1 unknown age</p></div><div class="metric"><p>Completed request-to-PO cycle</p><div class="result" id="cycle">5 days</div><p id="cycle-trace">R3 · October 6 → October 11 · n = 1</p></div></section><div class="two"><section class="panel"><h2>Current-stage queue</h2><div class="row"><button id="filter-all" type="button" aria-pressed="true">All outstanding</button><button id="filter-approval" type="button" class="secondary">Approval</button><button id="filter-quote" type="button" class="secondary">Quote</button></div><p id="scope" class="small" style="margin-top:14px"></p><div id="ledger"></div></section><aside class="panel"><h2>Evidence handoff</h2><div id="detail" class="detail"></div><p class="small" style="margin-top:16px">Approval and PO references: not supplied. A sample status does not authorize a purchase.</p><h3>Separate completion evidence</h3><p>R3: requested October 6, PO issued October 11. Five elapsed calendar days; only this eligible record contributes to n = 1.</p><p class="small">Open waiting ages are not completed-cycle times. This one example does not establish typical performance.</p></aside></div><section class="panel"><h2>Check a proposed stage-entry date</h2><p class="small">Local date test for R4. The original unknown record above stays unchanged; this is not evidence added to the register.</p><label for="entry">Proposed current-approval-stage entry<input id="entry" type="date"></label><p id="date-error" class="error" role="alert"></p><p id="date-result" role="status">R4 waiting age remains unknown.</p></section><details><summary>Workbook handoff and scope</summary><p>Maintain separate request-ledger, stage-transition evidence, completion-evidence and dated-summary sheets. Record source references and actual owners in the purchasing workflow. For R4, request the date it entered approval, not a substitute request date.</p><p>HTML review companion only; no Excel file, ERP connection, approval, purchasing, sending or saving is performed. Unknown ages are never zero; future dates are invalid. No SLA threshold is supplied.</p></details></main><script>
'use strict';const $=id=>document.getElementById(id);
function dateValue(s){if(!/^\d{4}-\d{2}-\d{2}$/.test(s))return null;const n=Date.parse(s+'T00:00:00Z');return Number.isFinite(n)&&new Date(n).toISOString().slice(0,10)===s?n:null;}function days(a,b){const x=dateValue(a),y=dateValue(b);return x===null||y===null?null:(y-x)/86400000;}const rows=[{id:'R1',stage:'approval',entry:'2026-10-10'},{id:'R2',stage:'quote',entry:'2026-10-08'},{id:'R4',stage:'approval',entry:''}];let filter='all',selected='R4';function age(entry,snapshot='2026-10-13'){if(!entry)return{unknown:true};const n=days(entry,snapshot);return n===null||n<0?{error:'Invalid stage-entry date for the snapshot.'}:{days:n};}function completed(records,snapshot='2026-10-13'){const list=records.filter(r=>r.stage==='issued'&&r.request&&r.po).map(r=>{const n=days(r.request,r.po);return n===null||n<0||days(r.po,snapshot)<0?null:n;}).filter(n=>n!==null);return{n:list.length,mean:list.length?list.reduce((a,b)=>a+b,0)/list.length:null};}function render(){const shown=rows.filter(r=>filter==='all'||r.stage===filter);const known=shown.map(r=>age(r.entry)).filter(a=>'days'in a).map(a=>a.days);$('scope').textContent=shown.length+' requests; '+known.length+' known age'+(known.length===1?'':'s')+(known.length?' of '+known.join(', ')+' days':'')+'; '+(shown.length-known.length)+' unknown age. Completion panel retains its own n = 1.';for(const f of['all','approval','quote'])$('filter-'+f).setAttribute('aria-pressed',String(f===filter));$('ledger').replaceChildren();for(const r of shown){const div=document.createElement('div');div.className='queue';const b=document.createElement('button');b.type='button';b.id='inspect-'+r.id;b.textContent=r.id;b.className='secondary';b.addEventListener('click',()=>{selected=r.id;render();});div.appendChild(b);const p=document.createElement('p'),a=age(r.entry);p.textContent='Awaiting '+r.stage+' · '+(a.unknown?'Waiting age unknown':a.days+' calendar days waiting')+' · stage entry '+(r.entry||'UNKNOWN');div.appendChild(p);$('ledger').appendChild(div);}$('detail').textContent=selected==='R4'?'R4 · Awaiting approval. Current-stage entry: UNKNOWN. Needed: dated approval-stage transition evidence and source reference. Next handoff: ask the actual record owner to locate that evidence; owner not supplied.':selected+' · Awaiting '+rows.find(r=>r.id===selected).stage+'. Stage-entry date: '+rows.find(r=>r.id===selected).entry+'. Source reference and actual next-handoff owner: not supplied. Confirm the supporting transition record.';}for(const f of['all','approval','quote'])$('filter-'+f).addEventListener('click',()=>{filter=f;render();});$('entry').addEventListener('input',()=>{const r=age($('entry').value);$('date-error').textContent=r.error||'';$('date-result').textContent=r.error?'Not calculated':r.unknown?'R4 waiting age remains unknown.':'Proposed date gives '+r.days+' calendar day'+(r.days===1?'':'s')+'. Original R4 evidence remains unknown.';});render();
</script></body></html>