W01 • administrative maintenance SOP — Write the administrative work-order procedure that links an asset/request to an authorized task reference, completion notes and unresolved…
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>W01 • administrative maintenance SOP</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}} .sheet{background:white;padding:28px;border:1px solid var(--line,#d6e0e7)}.note{padding:16px;border-left:4px solid var(--accent,#176783);background:var(--tint,#e3f3fa)}.badge{display:inline-block;padding:5px 11px;border-radius:22px;background:var(--tint,#e3f3fa);font-size:13px;font-weight:700}.preview{white-space:pre-wrap;overflow-wrap:anywhere}.schedule-row{display:grid;grid-template-columns:1fr 100px 100px;gap:14px;align-items:center;border-bottom:1px solid var(--line,#d6e0e7);padding:12px 0}.schedule-row label{margin:0}.schedule-row small{display:block}.export textarea{min-height:200px}h2,h3,p,td,button{overflow-wrap:anywhere}.grid>*{min-width:0}@media(max-width:720px){.sheet{padding:20px}.schedule-row{grid-template-columns:1fr 80px}.schedule-row .range{grid-column:1/3}}@media(max-width:400px){.sheet{padding:16px}}
body{--accent:#344c63;--tint:#edf2f6;--bg:#f1f4f6;--ink:#263b4d;--line:#cdd8e0}.work-order{background:white;border:1px solid #c9d4dd;border-top:6px solid #344c63;padding:28px}.wo-heading{display:flex;gap:20px;align-items:center;justify-content:space-between}.wo-heading h2{font-size:32px;margin:6px 0 18px}.status-dot{background:#fff0d2;color:#75541b;border:1px solid #dfc88c;padding:8px 13px;font-size:13px;font-weight:700;border-radius:25px}.record-chain{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.record-chain article{padding:14px 0;border-top:2px solid #b9c8d5}.record-chain small,.record-chain b{display:block}.record-chain b{font-size:19px;margin:7px 0}.record-chain p{font-size:14px}.procedure{display:grid;grid-template-columns:280px 1fr;gap:20px;margin:22px 0}.procedure nav{display:flex;flex-direction:column;gap:7px}.step-button{text-align:left;background:white;color:#344c63;border-color:#d0dbe3;font-weight:600;display:flex;gap:12px}.step-button span{font:14px/1.7 ui-monospace,Consolas,monospace;color:#627c92}.log-entry{border-bottom:1px solid #d1dce4;padding:18px 0}.log-entry h3{margin:10px 0}.log-entry .preview{font-size:15px}@media(max-width:720px){.wo-heading{display:block}.status-dot{display:inline-block;margin-bottom:15px}.record-chain{grid-template-columns:1fr;gap:5px}.record-chain article{padding:10px 0}.record-chain p{margin:6px 0}.procedure{grid-template-columns:1fr}.procedure nav{display:grid;grid-template-columns:1fr 1fr}.step-button{font-size:13px;padding:10px;gap:6px}.work-order{padding:20px}}</style></head><body><main>
<header><span class="eyebrow">Office operations / original administrative review</span><h1>A completed visit still needs evidence.</h1><p class="intro">Keep W01’s reported symptom, completion note and verification record distinct.</p></header>
<section class="work-order"><div class="wo-heading"><div><span class="eyebrow">W01 / PR01 office printer</span><h2 id="work-status">Verification pending</h2></div><span class="status-dot">Review remains open</span></div><div class="record-chain"><article><small>Q01 · report</small><b>Blank output page</b><p>Reported symptom; no cause confirmed.</p></article><article><small>O01 · completion note</small><b>“Visit completed”</b><p>Illustrative source note; not a verification result.</p></article><article><small>E01 · exception</small><b>Verification absent in source</b><p id="evidence-state">0 supplemental notes attached for review.</p></article></div><p class="note">V01 task authority and P01 provider assignment: TO CONFIRM. Actual closure decision: not supplied.</p></section>
<section class="procedure"><nav aria-label="Administrative procedure"><button type="button" id="step-0" class="step-button"><span>01</span>Register the request</button><button type="button" id="step-1" class="step-button"><span>02</span>Confirm the authorized task</button><button type="button" id="step-2" class="step-button"><span>03</span>Record the assignment</button><button type="button" id="step-3" class="step-button"><span>04</span>Collect completion notes</button><button type="button" id="step-4" class="step-button"><span>05</span>Collect defined verification</button><button type="button" id="step-5" class="step-button"><span>06</span>Review exceptions</button><button type="button" id="step-6" class="step-button"><span>07</span>Record the closure decision</button></nav><article class="sheet"><span id="step-number" class="eyebrow"></span><h2 id="step-title"></h2><p id="step-detail"></p><p id="step-record"></p></article></section>
<div class="grid"><section class="panel"><h2>Add a separately supplied record</h2><p>Enter a reference and its supplied wording. This adds a local review note; it does not verify a result or change the maintained work order.</p><label for="record-type">Evidence category</label><select id="record-type"><option value="verification">Verification</option><option value="task">Authorized task reference</option><option value="provider">Provider assignment</option><option value="completion">Completion and task linkage</option><option value="criteria">Closure criteria</option><option value="review">Exception response / review decision</option></select><label for="record-ref">Supplied record reference / version</label><input id="record-ref" type="text" value=""><label for="record-date">Date on the supplied record</label><input id="record-date" type="date" value=""><label for="record-text">Exact supplied wording / reviewer or authority details</label><textarea id="record-text"></textarea><div class="controls"><button type="button" id="add-record">Attach local review note</button><button type="button" id="clear-entry" class="secondary">Clear unadded entry</button></div><p id="record-error" class="error" role="alert"></p><p id="note-status" aria-live="polite">No supplemental record entered.</p></section>
<section class="panel"><h2>Evidence coverage, not approval</h2><div id="coverage-list"></div><p class="note">An attached note is not a confirmed task authority, approved method, successful repair or closure decision. Responsible review is still needed.</p><h3>Procedure metadata</h3><label for="sop-owner">SOP owner (to confirm)</label><input id="sop-owner" type="text" value=""><label for="sop-version">SOP version (to confirm)</label><input id="sop-version" type="text" value=""><label for="effective">Effective date (to confirm)</label><input id="effective" type="date" value=""><small>Actual coordinator, provider, authority, technical references and review schedule remain to confirm.</small></section></div>
<section class="sheet"><h2>Retained record trail</h2><article class="log-entry"><span class="badge">O01 · original illustrative note</span><p>Visit completed. No verification record for Q01 is supplied in the original example.</p></article><article class="log-entry"><span class="badge">E01 · original exception</span><p>O01 reports visit completed; verification evidence for Q01 is absent. Follow-up owner and route: TO CONFIRM.</p></article><div id="supplemental"></div></section>
<section class="panel"><h2>Unsent request for records</h2><label for="request">Draft administrative request</label><textarea id="request" readonly></textarea><button type="button" id="select-request" class="secondary">Select request text</button><small>Copy manually. This request is not sent and gives no equipment-operation instruction.</small></section>
<section class="panel export"><h2>Manual-copy SOP and evidence 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">Generated plain text</label><textarea id="export-text" readonly></textarea><small>Select text, then copy manually. Nothing is saved or sent.</small></section>
<footer>Administrative documentation companion only. No disassembly, isolation, operating or testing instructions, diagnosis, service interval, repair, use clearance or real work-order closure is supplied. User-entered notes are unverified local text and are lost on reload. Maintained records, qualified-owner instructions and organizational criteria remain authoritative.</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=>({'&':'&','<':'<','>':'>','"':'"',"'":'''}[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 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}
const procedure=[["Register the request", "Link asset, request ID, reported symptom and permitted requester reference. Clarify missing request details."], ["Confirm the authorized task", "Record approved scope, instruction version and authority from the qualified owner/provider. Keep V01 unresolved until confirmed."], ["Record the assignment", "Link actual provider/owner and authorization reference. P01 is a placeholder until supplied."], ["Collect completion notes", "Record what was reported as performed, by whom, when and under which task reference. Preserve O01."], ["Collect defined verification", "Retain approved check reference, actual result and responsible reviewer. The form supplies no technical method."], ["Review exceptions", "Link missing evidence, follow-up and actual responses. Keep E01 and earlier notes when later records arrive."], ["Record the closure decision", "Only the responsible organization can apply its defined criteria and record reviewer, decision and linked evidence."]];
const categories={verification:'Verification',task:'Authorized task reference',provider:'Provider assignment',completion:'Completion and task linkage',criteria:'Closure criteria',review:'Exception response / review decision'};let notes=[],step=4;
const originalRequest="For W01/PR01, please provide the authorized task reference and assigned provider reference, plus any actual completion and verification records addressing Q01's blank-output report. O01 records a completed visit, but verification evidence is not attached. W01 remains Verification pending until the required records and closure criteria have been reviewed.";
function stepView(i){step=i;txt('step-number','Administrative step '+(i+1)+' of 7');txt('step-title',procedure[i][0]);txt('step-detail',procedure[i][1]);const n=i===1?'V01: TO CONFIRM':i===2?'P01: TO CONFIRM':i===3?'O01: visit completed; preserve the original wording':i===4?'Approved verification method, actual observation/result/time and reviewer: not supplied in the source':i===5?'E01: retain original gap and link later responses':i===6?'Actual criteria, decision, reviewer and date: not supplied in the source':'PR01 / W01 / Q01: blank-output report';txt('step-record',n);for(let j=0;j<7;j++)$('step-'+j).setAttribute('aria-pressed',String(i===j))}
for(let i=0;i<7;i++)on('step-'+i,'click',()=>stepView(i));
function invalidatePacket(){$('export-text').value='';txt('export-error','Inputs changed; prepare the current review packet.')}
function renderNotes(){txt('evidence-state',notes.length+' supplemental '+(notes.length===1?'note':'notes')+' attached for review.');$('supplemental').innerHTML=notes.map((n,i)=>'<article class="log-entry"><span class="badge">L'+String(i+1).padStart(2,'0')+' · user-entered, unverified</span><h3>'+esc(categories[n.type])+' / '+esc(n.ref)+'</h3><small>Date supplied: '+esc(n.date)+'</small><p class="preview">'+esc(n.text)+'</p></article>').join('');$('coverage-list').innerHTML=Object.entries(categories).map(([key,label])=>{const hits=notes.filter(n=>n.type===key);return '<p><b>'+label+'</b><br><small>'+(hits.length?hits.length+' local note(s) attached; responsible review pending':'Not supplied in the source; no supplemental note attached')+'</small></p>'}).join('');$('request').value=notes.length?"For W01/PR01, please review the separately supplied records below and provide any remaining authorized task, provider, completion, verification and closure-criteria evidence addressing Q01. Original O01 records a completed visit; original E01 recorded absent verification. Supplemental local notes are not independently verified. W01 remains Verification pending until required records and organizational closure criteria have been reviewed.\n\n"+notes.map((n,i)=>'L'+String(i+1).padStart(2,'0')+' / '+categories[n.type]+' / '+n.ref+' / '+n.date+': '+n.text).join('\n'):originalRequest}
function validateNote(type,ref,date,text){if(!categories[type])throw Error('Choose a supported evidence category.');if(!ref.trim()||!text.trim())throw Error('Supply a record reference and the actual supplied wording.');isoDay(date);if(ref.trim()==='O01'||ref.trim()==='E01')throw Error('Keep O01 and E01 unchanged. Give the new record its separate reference.');if(notes.some(n=>n.ref===ref.trim()))throw Error('This reference is already attached; retain it and use a separate reference for a later record.');return {type,ref:ref.trim(),date,text:text.trim()}}
on('add-record','click',()=>{try{const n=validateNote($('record-type').value,$('record-ref').value,$('record-date').value,$('record-text').value);notes.push(n);renderNotes();invalidatePacket();txt('record-error','');txt('note-status','Attached '+n.ref+' as a separate local review note. W01 remains Verification pending.');$('record-ref').value='';$('record-date').value='';$('record-text').value=''}catch(e){txt('record-error',e.message);txt('note-status','No new note attached. Existing records are retained.')}});
for(const n of ['record-type','record-ref','record-date','record-text']){on(n,'input',()=>{txt('record-error','');txt('note-status','Unattached entry; attach explicitly to retain it in this local review.');invalidatePacket()});on(n,'change',()=>{txt('record-error','');invalidatePacket()})}
on('clear-entry','click',()=>{for(const n of ['record-ref','record-date','record-text'])$(n).value='';txt('record-error','');txt('note-status','Unadded entry cleared. Attached notes and original records are retained.')});
for(const n of ['sop-owner','sop-version','effective'])on(n,'input',invalidatePacket);
on('prepare','click',()=>{$('export-text').value='';try{if($('effective').value)isoDay($('effective').value);if($('record-ref').value.trim()||$('record-date').value||$('record-text').value.trim())throw Error('Attach or clear the unadded entry before preparing the packet.');$('export-text').value='ADMINISTRATIVE MAINTENANCE SOP / W01 / PR01\nOwner: '+($('sop-owner').value||'TO CONFIRM')+'\nVersion: '+($('sop-version').value||'TO CONFIRM')+'\nEffective: '+($('effective').value||'TO CONFIRM')+'\n\n'+procedure.map((p,i)=>(i+1)+'. '+p[0]+': '+p[1]).join('\n')+'\n\nSOURCE RECORDS RETAINED\nQ01: reported blank output page, no cause confirmed.\nV01: authorized service task/reference TO CONFIRM.\nP01: assigned provider reference TO CONFIRM.\nO01: illustrative visit-completed note; no supplied verification.\nE01: original missing-verification exception; owner/route TO CONFIRM.\nStatus: Verification pending. Actual closure decision: NOT SUPPLIED BY THE SOURCE.\n\nSUPPLEMENTAL USER-ENTERED NOTES / UNVERIFIED\n'+(notes.length?notes.map((n,i)=>'L'+String(i+1).padStart(2,'0')+' / '+categories[n.type]+' / '+n.ref+' / '+n.date+'\n'+n.text).join('\n\n'):'None attached. All actual evidence fields remain blank.')+'\n\nUNSENT RECORD REQUEST\n'+$('request').value+'\n\nNo physical instructions or use clearance. A visit or timestamp alone does not establish repair. Qualified-owner technical references and organizational closure criteria remain authoritative. Attached text does not change the maintained work order.';txt('export-error','Review packet prepared; no work order was closed or request sent.')}catch(e){txt('export-error',e.message)}});
on('select-text','click',()=>selectText('export-text'));on('select-request','click',()=>selectText('request'));stepView(4);renderNotes();
</script></body></html>