)); const PAD = ["1","2","3","4","5","6","7","8","9","","0","⌫"]; return (

{typeof LOGO_DATA_URL!=="undefined"&& IPS

}

IPS-PROJECT

{prompt||"Enter PIN to continue"}

{subtitle&&

{subtitle}

} {!subtitle&&

}

{dots}

{error&&

Incorrect PIN

}

{PAD.map((k,i) => k==="" ?

: )}

); } // First-time name entry screen function NameEntry({onDone}) { const [name, setName] = React.useState(""); return (

{typeof LOGO_DATA_URL!=="undefined"&& IPS

}

IPS-PROJECT

Internal Pipeline Services

Your Name

setName(e.target.value)} onKeyDown={e=>e.key==="Enter"&&name.trim()&&onDone(name.trim())} placeholder="Enter your name..." style={{background:"#ffffff",border:"1px solid rgba(0,0,0,0.15)",borderRadius:8,padding:"12px 14px",color:"var(--text)",fontSize:16,fontFamily:"var(--font)",width:"100%",boxSizing:"border-box",outline:"none",marginBottom:14}} />

); } // ======== SECTION SELECT PAGE ======== function SectionSelectPage({project, onSelectSection, onBack}) { const numSections = project.numSections || 1; const sections = Array.from({length: numSections}, (_, i) => i + 1); const [loading, setLoading] = React.useState(false); const handleSelect = async (n) => { setLoading(true); await onSelectSection(n); // loading will clear when component unmounts (stage changes) }; return (

{typeof LOGO_DATA_URL!=="undefined"&& IPS

}

IPS-PROJECT

{project.projectNumber}

{project.client||""}{project.location?" · "+project.location:""}

{loading ? (

Loading section…

) : (

Select Your Section

{sections.map(n => ( ))}

)}

); } // ======== CREW MANAGEMENT PAGE ======== function CrewManagementPage({onBack}) { const ALL_TABS = ["runs","runsheet","results","notes","report","final","archive","coating","jsa","deliveries","comps","inspect","checklist","photos","manhours","setup"]; const TAB_LABELS = {runs:"Runs",runsheet:"Sheet",results:"Results",notes:"Notes",report:"Daily",final:"Final",archive:"Archive",coating:"Coat",jsa:"JSA",deliveries:"Deliveries",comps:"Comps",inspect:"DFT",checklist:"Check",photos:"Photos",manhours:"Hours",setup:"Setup"}; const [users, setUsers] = React.useState([]); const [pinModal, setPinModal] = React.useState(false); const [newPin, setNewPin] = React.useState(""); const [saving, setSaving] = React.useState(false); const [msg, setMsg] = React.useState(""); React.useEffect(() => { loadUsers(); }, []); const loadUsers = async () => { const u = await Storage.getUsers(); setUsers(u.sort((a,b) => (a.joinedAt||0)-(b.joinedAt||0))); }; const toggleTab = async (userDeviceId, tab) => { const user = users.find(u => u.deviceId === userDeviceId); if (!user) return; const perms = { ...(user.tabPermissions||{}) }; perms[tab] = perms[tab] === false ? true : false; await Storage.updateUserPermissions(userDeviceId, perms); setUsers(prev => prev.map(u => u.deviceId===userDeviceId ? {...u, tabPermissions: perms} : u)); }; const deleteUser = async (deviceId) => { if (!window.confirm("Remove this crew member?")) return; await Storage.deleteUser(deviceId); setUsers(prev => prev.filter(u => u.deviceId !== deviceId)); }; const savePin = async () => { if (newPin.length !== 4) return; setSaving(true); await Storage.setManagerPin(newPin); setPinModal(false); setNewPin(""); setSaving(false); setMsg("Manager PIN updated"); setTimeout(()=>setMsg(""),2500); }; return (

CREW MANAGEMENT

{msg&&

{msg}

} {/* Manager PIN */}

Manager PIN

This PIN gives full app access on any device. Crew log in with their project number instead.

{/* Crew list */}

Crew Members ({users.length})

{users.length===0&&

No crew members have logged in yet

} {users.map(u => { const perms = u.tabPermissions || {}; return (

{u.name}

Joined {new Date(u.joinedAt||0).toLocaleDateString()}

Tab Access

{ALL_TABS.map(tab => { const allowed = perms[tab] !== false; return ( ); })}

); })} {/* Manager PIN modal */} {pinModal&&

Change Manager PIN

Full access on any device. Keep this private.

setNewPin(e.target.value.replace(/\D/g,"").slice(0,4))} placeholder="4-digit PIN" style={{...S.inp,marginBottom:12,fontSize:22,letterSpacing:"0.4em",textAlign:"center"}} />

}

); } // ═══ SCROLL PICKER ═══ function ScrollPicker({options,value,onChange,label,width=120,height=150,fontSize=15}) { const ref=useRef(null),IH=40,pad=Math.floor(height/IH/2); const idx=options.findIndex(o=>String(o)===String(value)); const dm=useRef(false),st=useRef(null),lv=useRef(value); useEffect(()=>{if(ref.current&&idx>=0&&!dm.current){ref.current.scrollTop=idx*IH;dm.current=true}},[]); useEffect(()=>{if(ref.current&&dm.current&&String(value)!==String(lv.current)){const n=options.findIndex(o=>String(o)===String(value));if(n>=0)ref.current.scrollTo({top:n*IH,behavior:"smooth"});lv.current=value}},[value]); const hs=()=>{if(!ref.current)return;clearTimeout(st.current);st.current=setTimeout(()=>{if(!ref.current)return;const i=Math.round(ref.current.scrollTop/IH),c=Math.max(0,Math.min(i,options.length-1));ref.current.scrollTo({top:c*IH,behavior:"smooth"});if(String(options[c])!==String(value)){lv.current=options[c];onChange(options[c])}},80)}; return (

{label&&

{label}

}

{Array(pad).fill(null).map((_,i)=>

)} {options.map((o,i)=>(

{if(ref.current)ref.current.scrollTo({top:i*IH,behavior:"smooth"});onChange(o)}} style={{height:IH,display:"flex",alignItems:"center",justifyContent:"center",scrollSnapAlign:"center",fontSize,fontWeight:String(o)===String(value)?800:400,color:String(o)===String(value)?"var(--text)":"var(--dim)",fontFamily:"var(--mono)",cursor:"pointer",transition:"all 0.1s"}}> {o}

))} {Array(pad).fill(null).map((_,i)=>

)}

); } function WeightInput({value, onChange, label}) { return (

{label&&{label}} onChange(parseFloat(e.target.value)||0)} style={{...S.inp,fontSize:20,textAlign:"center",fontFamily:"var(--mono)",fontWeight:800}} placeholder="0" />

); } function QuickPick({options,value,onChange,label,width="100%"}) { return (

{label&&{label}}

{options.map(o=>( ))}

); } function Inp({label:lb,type,value:v,onChange:oc,placeholder:ph,inputMode:im,style:sx}) { return (

{lb&&{lb}} oc(e.target.value)} placeholder={ph||""} style={S.inp} />

); } function VolumePicker({value, onChange, label}) { return ; } function HCLConcentrationPicker({value, onChange, label}) { return ; } // ═══ SWIPEABLE ROW — Apple-Mail-style swipe to reveal, tap to confirm delete ═══ function SwipeRow({onDelete, children, style:sx}) { const [offset, setOffset] = useState(0); const [open, setOpen] = useState(false); const [swiping, setSwiping] = useState(false); const [confirmOpen, setConfirmOpen] = useState(false); const startX = useRef(null); const startY = useRef(null); const rowRef = useRef(null); const snapWidth = 88; const threshold = 50; // Close if user taps outside this row useEffect(() => { if (!open) return; const handler = (e) => { if (rowRef.current && !rowRef.current.contains(e.target)) { setOpen(false); setOffset(0); } }; document.addEventListener("touchstart", handler, true); return () => document.removeEventListener("touchstart", handler, true); }, [open]); const onTouchStart = (e) => { startX.current = e.touches[0].clientX; startY.current = e.touches[0].clientY; setSwiping(false); }; const onTouchMove = (e) => { if (startX.current === null) return; const dx = e.touches[0].clientX - startX.current; const dy = Math.abs(e.touches[0].clientY - startY.current); if (!swiping && dy > Math.abs(dx)) { startX.current = null; return; } if (dx < 0 || open) { setSwiping(true); e.preventDefault(); const base = open ? -snapWidth : 0; setOffset(Math.min(0, Math.max(-snapWidth - 20, base + dx))); } }; const onTouchEnd = () => { setSwiping(false); startX.current = null; if (open) { if (offset > -snapWidth / 2) { setOpen(false); setOffset(0); } else { setOffset(-snapWidth); } } else { if (offset < -threshold) { setOpen(true); setOffset(-snapWidth); } else { setOffset(0); } } }; const handleDeleteTap = (e) => { e.stopPropagation(); setConfirmOpen(true); }; const handleConfirmDelete = (e) => { e.stopPropagation(); setConfirmOpen(false); setOpen(false); setOffset(0); onDelete(); }; const handleCancelDelete = (e) => { e.stopPropagation(); setConfirmOpen(false); setOpen(false); setOffset(0); }; return (

{confirmOpen && (

e.stopPropagation()} style={{background:"#ffffff",border:"1px solid rgba(255,68,68,0.3)",borderRadius:18,padding:"28px 24px",maxWidth:300,width:"90%",textAlign:"center",boxShadow:"0 20px 60px rgba(0,0,0,0.08)"}}>

🗑

Delete Project?

This will permanently delete the project and all its data. This cannot be undone.

)} {/* Red delete button revealed on swipe */}

🗑 DELETE

{children}

); } // ═══ POPUP MENU ═══ function PopupMenu({title, options, onSelect, onClose, showManual, manualLabel, manualValue, onManualChange, onManualConfirm}) { return (

e.stopPropagation()} style={{width:"100%",maxWidth:460,margin:"0 auto",background:"rgba(245,246,248,0.99)",backdropFilter:"blur(20px)",borderRadius:"20px 20px 0 0",border:"1px solid var(--border)",padding:"20px 16px",paddingBottom:"calc(20px + env(safe-area-inset-bottom,0))"}}>

{title&&

{title}

}

{options.map(o=>( ))}

{showManual&&

{manualLabel||"Manual Entry"}

onManualChange(e.target.value)} placeholder="Enter value..." style={{...S.inp,flex:1}} />

}

); }