br-service.jsx
1 // Brutalist SERVICE / MAINTENANCE TICKET — Form 47. 2 // A yard-desk work order: hull, symptoms, diagnostic trace, parts 3 // requisition, labor log, cost summary, sign-off. 4 5 function BRService({ onNav }) { 6 const ship = makeShip("VNT-CH-1044-BM"); 7 8 return ( 9 <BRPage minHeight={2100}> 10 <BRNav active="service" cartCount={0} onNav={onNav}/> 11 12 {/* HEADER */} 13 <div style={{padding:"30px 40px 22px", borderBottom:`4px double ${BR.ink}`, display:"flex", justifyContent:"space-between", alignItems:"flex-end"}}> 14 <div> 15 <div style={{fontFamily:"IBM Plex Mono", fontSize:11, letterSpacing:3, color:BR.mute, textTransform:"uppercase"}}>FORM 47 · YARD WORK ORDER · WO-2396-08812</div> 16 <div style={{fontFamily:"Oswald", fontWeight:900, fontSize:92, lineHeight:0.9, letterSpacing:-2, textTransform:"uppercase", marginTop:6}}>Service</div> 17 <div style={{fontFamily:"IBM Plex Mono", fontSize:12, color:BR.ink2, marginTop:8, letterSpacing:1.2}}> 18 OPENED 2396.112.0610Z · KROVAS CERES DRY-DOCK C · FOREMAN K. MAARS 19 </div> 20 </div> 21 <div style={{display:"flex", gap:10}}> 22 <BRStamp rotate={-6} color={BR.rust}>IN WORK</BRStamp> 23 <BRStamp rotate={5}>PRIORITY 2</BRStamp> 24 </div> 25 </div> 26 27 {/* STRIP — hull at a glance */} 28 <div style={{display:"grid", gridTemplateColumns:"280px 1fr", borderBottom:`2px solid ${BR.ink}`, background:BR.paper2}}> 29 <div style={{padding:"16px 20px", borderRight:`1px solid ${BR.ink}`}}> 30 <div style={{height:90, border:`1.5px solid ${BR.ink}55`, position:"relative", background:BR.paper}}> 31 <div style={{position:"absolute", inset:"12% 6%"}}> 32 <ShipSilhouette ship={ship} stroke={BR.ink} glow={false} strokeWidth={1.2} detail="mid"/> 33 </div> 34 </div> 35 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:16, letterSpacing:1, textTransform:"uppercase", marginTop:10}}>{ship.model}</div> 36 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, color:BR.mute, letterSpacing:1, marginTop:2}}>VNT-CH-1044-BM · HRS 2,188</div> 37 </div> 38 <div style={{padding:"16px 24px", display:"grid", gridTemplateColumns:"repeat(5,1fr)", gap:18}}> 39 {[ 40 ["REPORTED", "2396.112"], 41 ["SLIP", "DRY-DOCK C"], 42 ["FOREMAN", "K. MAARS"], 43 ["DUE", "2396.120"], 44 ["STATUS", "AWAITING PART"], 45 ].map(([k,v], i) => ( 46 <div key={i}> 47 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, letterSpacing:2, color:BR.mute, textTransform:"uppercase"}}>{k}</div> 48 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:18, letterSpacing:-0.2, marginTop:2}}>{v}</div> 49 </div> 50 ))} 51 </div> 52 </div> 53 54 {/* BODY */} 55 <div style={{display:"grid", gridTemplateColumns:"1fr 1fr 320px"}}> 56 {/* Col 1 — complaint + diagnostic */} 57 <div style={{borderRight:`1px solid ${BR.ink}`, padding:"24px 28px"}}> 58 <BRH n="01">Pilot Complaint</BRH> 59 <div style={{fontFamily:"'Caveat','Space Grotesk',cursive", fontSize:20, color:BR.ink, lineHeight:1.4, borderBottom:`2px solid ${BR.ink}`, paddingBottom:10}}> 60 "Q-drive shudder above 0.6c. Fuel trim runs 4% rich on port bank. Intermittent red on coolant loop 3 — self-clears. Thump felt through the deck on re-entry burn. Please diagnose." 61 </div> 62 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, color:BR.mute, letterSpacing:2, marginTop:6, textTransform:"uppercase"}}>LT S. TOREN · 2396.112.0540Z</div> 63 64 <div style={{height:24}}/> 65 <BRH n="02">Yard Diagnostic</BRH> 66 <div style={{border:`2px solid ${BR.ink}`, background:"#0c0c0c", padding:"14px 16px", fontFamily:"IBM Plex Mono", fontSize:11, color:BR.paper, lineHeight:1.6, letterSpacing:0.5}}> 67 <pre style={{margin:0, whiteSpace:"pre-wrap", fontFamily:"inherit"}}>{`> run diag --full 68 [OK] bus-a1 … 214 pts … clean 69 [OK] bus-a2 … 188 pts … clean 70 [!!] drv-q … bolt-torque · stud 4b drifted 12% 71 [!!] fuel-p … injector 3 · atomization 94% nominal 72 [OK] life … all loops green 73 [?] cool-3 … transient pressure spike · not reproduced 74 [!!] strk-p3 · stress-mark on port strake 3 · 75 cosmetic, cleared for flight 76 > diag complete · 4 flags · 2 parts required`}</pre> 77 </div> 78 79 <div style={{height:20}}/> 80 <BRH n="03">Root Cause</BRH> 81 <div style={{fontFamily:"IBM Plex Sans", fontSize:13, lineHeight:1.6, color:BR.ink2}}> 82 Drive shudder traced to stud <b>4B</b> on the Q-drive mount (torque drift 12% below spec). Fuel trim traced to injector <b>3</b> (atomization 94%). Coolant loop 3 flagged for continued monitoring; no parts action this cycle. 83 </div> 84 </div> 85 86 {/* Col 2 — parts + labor */} 87 <div style={{borderRight:`1px solid ${BR.ink}`, padding:"24px 28px"}}> 88 <BRH n="04">Parts Requisition</BRH> 89 <table style={{width:"100%", borderCollapse:"collapse", fontFamily:"IBM Plex Mono", fontSize:11}}> 90 <thead> 91 <tr style={{background:BR.paper2, borderBottom:`2px solid ${BR.ink}`}}> 92 {["PART №","Description","Qty","Unit ₵","Line ₵","Status"].map(h => ( 93 <th key={h} style={{padding:"8px 10px", textAlign:"left", fontSize:10, letterSpacing:2, color:BR.mute, textTransform:"uppercase", fontWeight:500}}>{h}</th> 94 ))} 95 </tr> 96 </thead> 97 <tbody> 98 {[ 99 ["KRV-QS-4B-X", "Q-drive mount stud, 4B", "4", "2,200", "8,800", "IN STOCK"], 100 ["OBS-FI-03-M", "Fuel injector, MN-class", "1", "14,400", "14,400", "IN STOCK"], 101 ["OBS-GK-03-M", "Injector seal kit", "1", "1,800", "1,800", "IN STOCK"], 102 ["KRV-CL-LP-3", "Coolant loop 3, monitor", "1", "—", "—", "DIAG ONLY"], 103 ["VNT-CB-P3-S", "Port strake 3 cosmetic", "1", "22,100", "22,100", "BACK-ORDER"], 104 ].map((r, i) => ( 105 <tr key={i} style={{borderBottom:`1px dotted ${BR.ink}44`, background: i%2 ? BR.paper : BR.paper2}}> 106 {r.map((c, j) => ( 107 <td key={j} style={{padding:"8px 10px", fontSize: j===1 ? 11 : 11}}> 108 {j===5 ? <span style={{fontFamily:"Oswald", fontWeight:700, fontSize:10, letterSpacing:2, color: c==="IN STOCK" ? BR.green : c==="BACK-ORDER" ? BR.rust : BR.mute}}>{c}</span> : c} 109 </td> 110 ))} 111 </tr> 112 ))} 113 </tbody> 114 </table> 115 116 <div style={{height:20}}/> 117 <BRH n="05">Labor Log</BRH> 118 <div style={{fontFamily:"IBM Plex Mono", fontSize:11, lineHeight:1.8, color:BR.ink2, letterSpacing:0.5}}> 119 {[ 120 ["0610Z","K. MAARS", "Intake · walk-around · logged dent P3"], 121 ["0712Z","T. NARIN", "Q-drive lift · stud torque re-check"], 122 ["0844Z","T. NARIN", "Stud 4B extracted · torque 412 Nm (spec 470)"], 123 ["1020Z","K. MAARS", "Injector 3 bench-test · flow 94%"], 124 ["1140Z","N. ORSAK", "Coolant loop 3 pressure sweep · nominal"], 125 ["1320Z","K. MAARS", "Reassembly pending parts · 4 studs pulled"], 126 ].map((r, i) => ( 127 <div key={i} style={{display:"grid", gridTemplateColumns:"60px 110px 1fr", gap:8, padding:"4px 0", borderBottom:`1px dotted ${BR.ink}22`}}> 128 <span style={{color:BR.mute}}>{r[0]}</span> 129 <span style={{fontWeight:700}}>{r[1]}</span> 130 <span>{r[2]}</span> 131 </div> 132 ))} 133 </div> 134 135 <div style={{height:18}}/> 136 <BRH n="06">Next Actions</BRH> 137 <div style={{display:"grid", gap:6}}> 138 {[ 139 ["Await strake cosmetic · ETA 2396.118", BR.rust], 140 ["Reinstall injector 3 + seal kit", BR.ink], 141 ["Torque stud 4B to 470 Nm · cross-check all 4", BR.ink], 142 ["Run 0.8c verification burn", BR.ink], 143 ].map(([t, c], i) => ( 144 <div key={i} style={{padding:"8px 12px", border:`2px solid ${c}`, color:c, fontFamily:"IBM Plex Mono", fontSize:11, letterSpacing:0.5}}>· {t}</div> 145 ))} 146 </div> 147 </div> 148 149 {/* Col 3 — reckoning + sign-off */} 150 <div style={{padding:"24px 26px", background:BR.paper2, display:"flex", flexDirection:"column"}}> 151 <BRH n="07">Reckoning</BRH> 152 <BRSpec k="Parts" v="₵47.10k"/> 153 <BRSpec k="Labor" v="₵18.40k" unit="9.5h"/> 154 <BRSpec k="Yard fee" v="₵4.20k"/> 155 <BRSpec k="Warranty" v="−₵22.10k" unit="strake"/> 156 <BRSpec k="Coalition rebate" v="−₵2.80k"/> 157 158 <div style={{marginTop:18, padding:"14px 0", borderTop:`2px solid ${BR.ink}`, borderBottom:`2px solid ${BR.ink}`}}> 159 <div style={{display:"flex", justifyContent:"space-between", alignItems:"baseline"}}> 160 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:13, letterSpacing:3, textTransform:"uppercase"}}>Invoice Due</div> 161 <div style={{fontFamily:"Oswald", fontWeight:900, fontSize:32, letterSpacing:-0.5}}>₵44.80k</div> 162 </div> 163 </div> 164 165 <div style={{height:18}}/> 166 <BRH n="08">Warranty Status</BRH> 167 <div style={{border:`2px solid ${BR.green}`, background:"rgba(45,107,58,0.08)", padding:"10px 12px", fontFamily:"IBM Plex Mono", fontSize:11, color:BR.green, letterSpacing:1}}> 168 IN FORCE · EXPIRES 2399.088<br/> 169 COVERED: STRAKE COSMETIC, HULL CORROSION<br/> 170 EXCLUDED: PILOT-INDUCED, COMBAT 171 </div> 172 173 <div style={{marginTop:"auto", paddingTop:22}}> 174 <BRH n="09">Sign-Off</BRH> 175 <div style={{display:"grid", gridTemplateColumns:"1fr", gap:14}}> 176 <div> 177 <div style={{fontFamily:"'Caveat','Space Grotesk',cursive", fontSize:26, color:BR.ink, borderBottom:`2px solid ${BR.ink}`, paddingBottom:4}}>K. Maars</div> 178 <div style={{fontFamily:"IBM Plex Mono", fontSize:9, color:BR.mute, letterSpacing:2, marginTop:2, textTransform:"uppercase"}}>Yard foreman</div> 179 </div> 180 <div> 181 <div style={{fontFamily:"'Caveat','Space Grotesk',cursive", fontSize:26, color:BR.mute, borderBottom:`2px dashed ${BR.ink}55`, paddingBottom:4}}> </div> 182 <div style={{fontFamily:"IBM Plex Mono", fontSize:9, color:BR.mute, letterSpacing:2, marginTop:2, textTransform:"uppercase"}}>Pilot acceptance — on handover</div> 183 </div> 184 </div> 185 186 <button onClick={() => onNav("fleet")} style={{width:"100%", marginTop:16, padding:"14px 0", background:BR.ink, color:BR.paper, border:"none", fontFamily:"Oswald", fontWeight:900, fontSize:12, letterSpacing:3, cursor:"pointer"}}>▸ RETURN TO BRIDGE</button> 187 </div> 188 </div> 189 </div> 190 191 <BRFooter/> 192 </BRPage> 193 ); 194 } 195 196 Object.assign(window, { BRService });