An eight-order dashboard with derived counts and an offline status filter

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"><meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; script-src 'unsafe-inline'; form-action 'none'; base-uri 'none'"><title>Order attention · offline dashboard</title><style>*{box-sizing:border-box}body{margin:0;font:16px/1.5 Arial,Helvetica,sans-serif;color:#24313b;background:#fff}main{max-width:900px;margin:auto;padding:22px}h1{font-size:26px;line-height:1.2;margin:8px 0 18px}h2{font-size:19px;margin:22px 0 10px}h3{font-size:17px;margin:14px 0 8px}p{margin:10px 0}ul,ol{padding-left:22px}li{margin:6px 0}.note{font-size:13px;color:#53616a}.callout{border-left:4px solid #405d73;background:#f2f5f7;padding:10px 14px}table{border-collapse:collapse;width:100%;margin:12px 0}caption{text-align:left;font-weight:bold;padding:0 0 8px}th,td{padding:9px 8px;text-align:left;vertical-align:top;border-bottom:1px solid #b8c3ca;overflow-wrap:anywhere}th{background:#edf2f5}td b{display:none}footer{border-top:1px solid #aeb9bf;margin-top:22px;padding-top:12px}pre{white-space:pre-wrap;overflow-wrap:anywhere;font:16px/1.5 ui-monospace,monospace;background:#f5f5f5;padding:12px}@media(max-width:560px){main{padding:16px}h1{font-size:23px}thead{display:none}table,tbody,tr,td{display:block;width:100%}caption{display:block}tr{border-bottom:1px solid #aeb9bf;padding:6px 0}td{border:0;padding:3px 0}td b{display:inline}}@media print{@page{size:letter;margin:.5in}main{padding:0}}[hidden]{display:none!important}.overview{border-top:4px solid #454768;border-bottom:1px solid #bbb;padding:12px 0;font-weight:bold}.filters{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}button{font:inherit;padding:7px 12px;border:1px solid #454768;border-radius:3px;background:white;color:#24243a}button[aria-pressed=true]{background:#454768;color:white}button:focus-visible{outline:3px solid #222;outline-offset:3px}.empty{background:#fff3e7;padding:12px}</style></head><body><main><p class="note">Original fictional eight-order dataset · no live warehouse feed</p><h1>Which orders need attention?</h1><p id="overall" class="overview">All supplied rows: 8 | Shipped: 4 | Packed: 2 | Blocked: 2</p><h2>Review a status locally</h2><div class="filters" role="group" aria-label="Filter order status"><button type="button" data-filter="all" aria-pressed="true">All</button><button type="button" data-filter="blocked" aria-pressed="false">Blocked</button><button type="button" data-filter="packed" aria-pressed="false">Packed</button><button type="button" data-filter="shipped" aria-pressed="false">Shipped</button><button type="button" data-filter="returned" aria-pressed="false">Returned</button></div><p id="matching" role="status" aria-live="polite">Visible rows: 8 of 8 | Filter: all</p><p id="empty" class="empty" hidden>No supplied orders match this status. No record invented.</p><table><caption>Supplied order records · summary above always covers all rows</caption><thead><tr><th scope="col">Order ID</th><th scope="col">Status</th><th scope="col">Next check</th></tr></thead><tbody><tr data-order="S101" data-status="shipped"><td><b>Order ID: </b>S101</td><td><b>Status: </b>shipped</td><td><b>Next check: </b>No open action</td></tr><tr data-order="S102" data-status="packed"><td><b>Order ID: </b>S102</td><td><b>Status: </b>packed</td><td><b>Next check: </b>Dispatch check</td></tr><tr data-order="S103" data-status="blocked"><td><b>Order ID: </b>S103</td><td><b>Status: </b>blocked</td><td><b>Next check: </b>Label problem: inspect label</td></tr><tr data-order="S104" data-status="shipped"><td><b>Order ID: </b>S104</td><td><b>Status: </b>shipped</td><td><b>Next check: </b>No open action</td></tr><tr data-order="S105" data-status="shipped"><td><b>Order ID: </b>S105</td><td><b>Status: </b>shipped</td><td><b>Next check: </b>No open action</td></tr><tr data-order="S106" data-status="packed"><td><b>Order ID: </b>S106</td><td><b>Status: </b>packed</td><td><b>Next check: </b>Dispatch check</td></tr><tr data-order="S107" data-status="blocked"><td><b>Order ID: </b>S107</td><td><b>Status: </b>blocked</td><td><b>Next check: </b>Stock check: verify supplied count</td></tr><tr data-order="S108" data-status="shipped"><td><b>Order ID: </b>S108</td><td><b>Status: </b>shipped</td><td><b>Next check: </b>No open action</td></tr></tbody></table><h2>Before using real records</h2><p>Actual data source, export date, responsible people and completeness: [TO CONFIRM]. Verify duplicate IDs and unknown statuses. The display does not update order state, send messages or save a filter.</p><footer>Send the corrected review to the coordinator with the blocked rows. Perform operational changes through the real order workflow. No network, storage, fake live refresh or success toast.</footer><script>(()=>{const rows=[...document.querySelectorAll('[data-order]')],buttons=[...document.querySelectorAll('[data-filter]')],allowed=['shipped','packed','blocked'];const invalid=rows.some((r,i)=>!allowed.includes(r.dataset.status)||rows.findIndex(q=>q.dataset.order===r.dataset.order)!==i);if(invalid){document.querySelector('#overall').textContent='Counts unavailable: [CHECK DATA] duplicate ID or unknown status.';buttons.forEach(b=>b.disabled=true);return;}const counts=Object.fromEntries(allowed.map(s=>[s,rows.filter(r=>r.dataset.status===s).length]));document.querySelector('#overall').textContent='All supplied rows: '+rows.length+' | Shipped: '+counts.shipped+' | Packed: '+counts.packed+' | Blocked: '+counts.blocked;function show(status){let count=0;rows.forEach(r=>{r.hidden=status!=='all'&&r.dataset.status!==status;if(!r.hidden)count++;});buttons.forEach(b=>b.setAttribute('aria-pressed',String(b.dataset.filter===status)));document.querySelector('#matching').textContent='Visible rows: '+count+' of '+rows.length+' | Filter: '+status;document.querySelector('#empty').hidden=count!==0;}buttons.forEach(b=>b.addEventListener('click',()=>show(b.dataset.filter)));show('all');})();</script></main></body></html>