Van
Guard
Stay compliant. Keep moving.
/** @jsxRuntime classic */ const { useState, useEffect, useRef } = React; // ── SUPABASE MINI-CLIENT ────────────────────────────────────────────────────── const SUPA_URL = 'https://qzzwkxborlmmyaukvhga.supabase.co'; const SUPA_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InF6endreGJvcmxtbXlhdWt2aGdhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3ODIxNjM2MTUsImV4cCI6MjA5NzczOTYxNX0.CmI0bEHPpVUIxZIU7F1tdDAwN1vLryd8QqRny7ig3mk'; const VAPID_PUBLIC_KEY='BH3NTRSAJFv7P_APz14gT2TPvD963aU9fejfAeI0WfZERYOLIZr08V5GwVX-0H7Utp0dXYqgnryviaE3C4pNFSo'; const urlBase64ToUint8=s=>{const p=(s+'===').slice(0,s.length+((4-s.length%4)%4)).replace(/-/g,'+').replace(/_/g,'/');const r=atob(p);return Uint8Array.from(r,c=>c.charCodeAt(0));} const _SK = 'vg_session'; const _getS = () => { try { const ss=sessionStorage.getItem(_SK); if(ss) return JSON.parse(ss); // Migrate any existing localStorage session into sessionStorage, then clear it const ls=localStorage.getItem(_SK); if(ls){ sessionStorage.setItem(_SK,ls); localStorage.removeItem(_SK); return JSON.parse(ls); } return null; } catch { return null; } }; const _saveS = s => { if(s) sessionStorage.setItem(_SK,JSON.stringify(s)); else sessionStorage.removeItem(_SK); localStorage.removeItem(_SK); // always wipe any lingering localStorage copy }; const _ls = []; const _h = tok => ({ 'apikey': SUPA_KEY, 'Content-Type': 'application/json', 'Authorization': `Bearer ${tok || SUPA_KEY}` }); class _Q { constructor(t, tok) { this.t=t; this.tok=tok; this.f=[]; this.cols='*'; this.ord=null; this.lim=null; this.cnt=false; this.hd=false; this.sg=false; this.mb=false; } select(c='*', o={}) { this.cols=c; if(o.count) this.cnt=true; if(o.head) this.hd=true; return this; } eq(c,v) { this.f.push(`${c}=eq.${encodeURIComponent(v)}`); return this; } gte(c,v) { this.f.push(`${c}=gte.${encodeURIComponent(v)}`); return this; } order(c,{ascending=true}={}) { this.ord=`${c}.${ascending?'asc':'desc'}`; return this; } limit(n) { this.lim=n; return this; } single() { this.sg=true; return this; } maybeSingle() { this.mb=true; return this; } async _run() { let url=`${SUPA_URL}/rest/v1/${this.t}?select=${this.cols}`; this.f.forEach(x=>url+=`&${x}`); if(this.ord) url+=`&order=${this.ord}`; if(this.cnt||this.hd) { const r=await fetch(url,{method:'HEAD',headers:{..._h(this.tok),'Prefer':'count=exact'}}); const count=parseInt((r.headers.get('content-range')||'0/0').split('/')[1])||0; return {count,data:null,error:null}; } if(this.mb) { const r=await fetch(url+'&limit=1',{headers:_h(this.tok)}); const arr=await r.json().catch(()=>[]); return {data:Array.isArray(arr)?(arr[0]||null):null,error:null}; } if(this.lim) url+=`&limit=${this.lim}`; const h={..._h(this.tok)}; if(this.sg) h['Accept']='application/vnd.pgrst.object+json'; const r=await fetch(url,{headers:h}); const data=await r.json().catch(()=>null); if(data&&data.code) return {data:null,error:data}; return {data,error:null}; } then(res,rej) { return this._run().then(res,rej); } } class _U { constructor(t,tok,d) { this.t=t; this.tok=tok; this.d=d; this.f=[]; this.ret='minimal'; this.sg=false; } eq(c,v) { this.f.push(`${c}=eq.${encodeURIComponent(v)}`); return this; } select() { this.ret='representation'; return this; } single() { this.sg=true; return this; } async _run() { let url=`${SUPA_URL}/rest/v1/${this.t}?${this.f.join('&')}`; const h={..._h(this.tok),'Prefer':`return=${this.ret}`}; if(this.sg) h['Accept']='application/vnd.pgrst.object+json'; const r=await fetch(url,{method:'PATCH',headers:h,body:JSON.stringify(this.d)}); const text=await r.text(); if(!text||!text.trim()) return {data:null,error:null}; const data=JSON.parse(text); return {data,error:null}; } then(res,rej) { return this._run().then(res,rej); } } const sb = { auth: { getSession: async () => ({data:{session:_getS()},error:null}), signUp: async ({email,password,options}) => { // Pass name/business/referral as user_metadata so the DB trigger populates the // profile reliably — works whether or not email confirmation is on. const r=await fetch(`${SUPA_URL}/auth/v1/signup`,{method:'POST',headers:{'apikey':SUPA_KEY,'Content-Type':'application/json'},body:JSON.stringify({email,password,data:options?.data||{}})}); const d=await r.json(); if(!r.ok || d.error || d.error_description || (d.msg && !d.id && !d.access_token)){ return {error:{message:d.error_description||d.msg||d.message||'Sign up failed. Please try again.'}}; } const uid=d.user?.id||d.id; // Email confirmation ON → no session yet. Profile is created by the trigger. if(!d.access_token){ return {data:{session:null,user:d.user||d},error:null}; } // Autoconfirm → we have a session. (Trigger also creates the profile; this is a safe fallback.) await fetch(`${SUPA_URL}/rest/v1/profiles`,{method:'POST',headers:{..._h(d.access_token),'Prefer':'resolution=merge-duplicates,return=minimal'},body:JSON.stringify({id:uid,name:options?.data?.name,business_name:options?.data?.businessName})}).catch(()=>{}); fetch('/.netlify/functions/send-welcome',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({firstName:options?.data?.name,email:(d.user||d).email})}).catch(()=>{}); const s={access_token:d.access_token,refresh_token:d.refresh_token,user:d.user||d}; _saveS(s); _ls.forEach(fn=>fn('SIGNED_IN',s)); return {data:{session:s},error:null}; }, signInWithPassword: async ({email,password}) => { const r=await fetch(`${SUPA_URL}/auth/v1/token?grant_type=password`,{method:'POST',headers:{'apikey':SUPA_KEY,'Content-Type':'application/json'},body:JSON.stringify({email,password})}); const d=await r.json(); if(!d.access_token) return {error:{message:d.error_description||d.msg||'Incorrect email or password'}}; const s={access_token:d.access_token,refresh_token:d.refresh_token,user:d.user}; _saveS(s); _ls.forEach(fn=>fn('SIGNED_IN',s)); return {data:{session:s},error:null}; }, signOut: async () => { const s=_getS(); if(s?.access_token) await fetch(`${SUPA_URL}/auth/v1/logout`,{method:'POST',headers:{'apikey':SUPA_KEY,'Authorization':`Bearer ${s.access_token}`}}).catch(()=>{}); _saveS(null); _ls.forEach(fn=>fn('SIGNED_OUT',null)); return {error:null}; }, updatePassword: async (newPassword) => { const s=_getS(); if(!s?.access_token) return {error:{message:'Not signed in'}}; const r=await fetch(`${SUPA_URL}/auth/v1/user`,{method:'PUT',headers:{..._h(s.access_token)},body:JSON.stringify({password:newPassword})}); const d=await r.json(); if(d.error||d.code>=400) return {error:{message:d.message||'Failed to update password'}}; return {data:d,error:null}; }, resetPassword: async (email) => { const r=await fetch(`${SUPA_URL}/auth/v1/recover`,{method:'POST',headers:{'apikey':SUPA_KEY,'Content-Type':'application/json'},body:JSON.stringify({email})}); return r.ok?{error:null}:{error:{message:'Could not send reset email. Please check your email address.'}}; }, onAuthStateChange: cb => { _ls.push(cb); return {data:{subscription:{unsubscribe:()=>{const i=_ls.indexOf(cb);if(i>-1)_ls.splice(i,1);}}}}; } }, from: table => { const tok=_getS()?.access_token; return { select:(c,o)=>new _Q(table,tok).select(c,o), insert:async d=>{try{const r=await fetch(`${SUPA_URL}/rest/v1/${table}`,{method:'POST',headers:{..._h(tok),'Prefer':'return=minimal'},body:JSON.stringify(d)});return r.ok?{data:null,error:null}:{data:null,error:await r.json()};}catch{if(!navigator.onLine){_addQ({table,data:d,tok,prefer:'return=minimal'});return{data:null,error:null,offline:true};}return{data:null,error:{message:'Network error'}};}}, upsert:async d=>{try{const r=await fetch(`${SUPA_URL}/rest/v1/${table}`,{method:'POST',headers:{..._h(tok),'Prefer':'resolution=merge-duplicates,return=minimal'},body:JSON.stringify(d)});return r.ok?{data:null,error:null}:{data:null,error:await r.json()};}catch{if(!navigator.onLine){_addQ({table,data:d,tok,prefer:'resolution=merge-duplicates,return=minimal'});return{data:null,error:null,offline:true};}return{data:null,error:{message:'Network error'}};}}, update:d=>new _U(table,tok,d), }; } }; // ── OFFLINE QUEUE ───────────────────────────────────────────────────────────── const _OQ_KEY='vg_offline_queue'; const _getQ=()=>{try{return JSON.parse(localStorage.getItem(_OQ_KEY)||'[]');}catch{return[];}}; const _saveQ=q=>localStorage.setItem(_OQ_KEY,JSON.stringify(q)); const _addQ=item=>{const q=_getQ();q.push({...item,qid:Date.now()+Math.random().toString(36).slice(2)});_saveQ(q);}; const replayOfflineQueue=async()=>{ const q=_getQ(); if(!q.length) return 0; const remain=[]; for(const item of q){ try{ const tok=_getS()?.access_token||item.tok; const heads={..._h(tok)}; if(item.prefer) heads['Prefer']=item.prefer; const r=await fetch(`${SUPA_URL}/rest/v1/${item.table}`,{method:'POST',headers:heads,body:JSON.stringify(item.data)}); if(!r.ok) remain.push(item); }catch{remain.push(item);} } _saveQ(remain); return q.length-remain.length; }; // ── HELPERS ─────────────────────────────────────────────────────────────────── const today = () => new Date().toISOString().slice(0,10); const nowTime = () => new Date().toTimeString().slice(0,5); const fmtDate = d => new Date(d+'T12:00:00').toLocaleDateString('en-GB',{day:'numeric',month:'short',year:'numeric'}); const fmtDateShort = d => new Date(d+'T12:00:00').toLocaleDateString('en-GB',{day:'numeric',month:'short'}); // ── ICONS ───────────────────────────────────────────────────────────────────── const I = { home:<path strokeLinecap="round" strokeLinejoin="round" d="M2.25 12l8.954-8.955a1.126 1.126 0 011.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/>, diary:<path strokeLinecap="round" strokeLinejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.966 8.966 0 00-6 2.292m0-14.25v14.25"/>, temp:<><path strokeLinecap="round" strokeLinejoin="round" d="M9.75 9.75l4.5-4.5m0 0l4.5 4.5m-4.5-4.5v12m-7.5 0h15"/><path strokeLinecap="round" strokeLinejoin="round" d="M15 15a3 3 0 11-6 0 3 3 0 016 0z"/></>, van:<path strokeLinecap="round" strokeLinejoin="round" d="M8.25 18.75a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 01-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h1.125c.621 0 1.129-.504 1.09-1.124a17.902 17.902 0 00-3.213-9.193 2.056 2.056 0 00-1.58-.86H14.25M16.5 18.75h-2.25m0-11.177v-.958c0-.568-.422-1.048-.987-1.106a48.554 48.554 0 00-10.026 0 1.106 1.106 0 00-.987 1.106v7.635m12-6.677v6.677m0 4.5v-4.5m0 0h-12"/>, eho:<path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/>, check:<path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5"/>, warn:<path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/>, user:<path strokeLinecap="round" strokeLinejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"/>, chevron:<path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/>, back:<path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5"/>, fire:<path strokeLinecap="round" strokeLinejoin="round" d="M15.362 5.214A8.252 8.252 0 0112 21 8.25 8.25 0 016.038 7.048 8.287 8.287 0 009 9.6a8.983 8.983 0 013.361-6.867 8.21 8.21 0 003 2.48z"/>, location:<path strokeLinecap="round" strokeLinejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0zM19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"/>, water:<path strokeLinecap="round" strokeLinejoin="round" d="M12 3.75a6.715 6.715 0 00-3.722 1.118c-1.88 2.528-2.028 5.147-1.328 7.382A8.978 8.978 0 0012 15.75a8.978 8.978 0 005.05-3.5c.7-2.235.552-4.854-1.328-7.382A6.715 6.715 0 0012 3.75z"/>, lock:<path strokeLinecap="round" strokeLinejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"/>, logout:<path strokeLinecap="round" strokeLinejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75"/>, star:<path strokeLinecap="round" strokeLinejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z"/>, plus:<path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>, team:<path strokeLinecap="round" strokeLinejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"/>, download:<path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/>, mail:<path strokeLinecap="round" strokeLinejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"/>, chat:<path strokeLinecap="round" strokeLinejoin="round" d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z"/>, bell:<path strokeLinecap="round" strokeLinejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0"/>, }; const Icon = ({name,size=20,color='currentColor'}) => ( <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={2}>{I[name]}</svg> ); // ── VAN ICON SVG ───────────────────────────────────────────────────────────── const VanIcon = ({size=40, wheelColor='#1A2744'}) => ( <svg width={size} height={Math.round(size*0.68)} viewBox="0 0 100 68" fill="none" xmlns="http://www.w3.org/2000/svg"> <line x1="2" y1="24" x2="20" y2="24" stroke="white" strokeWidth="4.5" strokeLinecap="round"/> <line x1="7" y1="33" x2="20" y2="33" stroke="white" strokeWidth="4.5" strokeLinecap="round"/> <line x1="12" y1="42" x2="20" y2="42" stroke="white" strokeWidth="4.5" strokeLinecap="round"/> <path d="M22 56 L22 22 L38 16 L38 56 Z" fill="white"/> <path d="M24.5 53 L24.5 26 L36.5 21 L36.5 53 Z" fill="rgba(255,255,255,0.18)"/> <rect x="38" y="16" width="52" height="40" rx="5" fill="white"/> <circle cx="31" cy="58" r="8.5" fill={wheelColor}/> <circle cx="31" cy="58" r="3.5" fill="white"/> <circle cx="70" cy="58" r="8.5" fill={wheelColor}/> <circle cx="70" cy="58" r="3.5" fill="white"/> <circle cx="73" cy="34" r="11" fill="#0D7377"/> <polyline points="67.5,34 72,38.5 79.5,27" stroke="white" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" fill="none"/> </svg> ); // ── SHARED UI ───────────────────────────────────────────────────────────────── const Spinner = ({full}) => ( <div className={`flex items-center justify-center ${full?'h-64':'py-8'}`}> <div className="w-7 h-7 border-2 border-teal/20 border-t-teal rounded-full animate-spin"/> </div> ); const Card = ({children,className=''}) => <div className={`bg-white rounded-2xl shadow-sm border border-gray-100 ${className}`}>{children}</div>; const Badge = ({label,color='teal'}) => { const cls={green:'bg-green-100 text-green-700',red:'bg-red-100 text-red-700',amber:'bg-amber-100 text-amber-700',teal:'bg-teal-light text-teal',navy:'bg-navy/10 text-navy'}[color]||'bg-teal-light text-teal'; return <span className={`text-xs font-bold px-2.5 py-1 rounded-full ${cls}`}>{label}</span>; }; const Checkbox = ({checked,onChange,label,isNA,onToggleNA}) => { if(isNA) return ( <div className="flex items-center gap-3 py-2.5"> <span className="w-6 h-6 rounded-lg border-2 border-gray-100 bg-gray-50 flex items-center justify-center flex-shrink-0"> <span className="text-gray-300 text-[8px] font-black tracking-tight">NA</span> </span> <span className="flex-1 text-sm text-gray-300 line-through leading-snug">{label}</span> <button onClick={onToggleNA} className="text-[10px] font-bold text-teal px-2 py-1 rounded-lg bg-teal-light active:opacity-70 flex-shrink-0">Restore</button> </div> ); return ( <div className="flex items-center gap-3 py-2.5 w-full"> <button onClick={()=>onChange(!checked)} className="flex items-center gap-3 flex-1 text-left active:opacity-60"> <span className={`w-6 h-6 rounded-lg border-2 flex items-center justify-center flex-shrink-0 transition-colors ${checked?'bg-teal border-teal':'border-gray-200 bg-gray-50'}`}> {checked&&<Icon name="check" size={13} color="white"/>} </span> <span className={`text-sm leading-snug ${checked?'text-gray-400 line-through':'text-gray-700'}`}>{label}</span> </button> {onToggleNA&&<button onClick={onToggleNA} className="text-[10px] font-bold text-gray-300 px-1.5 py-0.5 rounded border border-gray-200 active:bg-gray-100 flex-shrink-0 ml-1">NA</button>} </div> ); }; const Input = ({label,value,onChange,type='text',placeholder='',required=false,hint}) => ( <div className="mb-4"> {label&&<label className="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1.5">{label}{required&&<span className="text-red-400 ml-1">*</span>}</label>} <input type={type} value={value} onChange={e=>onChange(e.target.value)} placeholder={placeholder} className="w-full border border-gray-200 rounded-xl px-4 py-3 text-sm text-gray-800 bg-gray-50 focus:outline-none focus:border-teal focus:bg-white transition-colors"/> {hint&&<p className="text-xs text-gray-400 mt-1">{hint}</p>} </div> ); const Btn = ({children,onClick,variant='primary',className='',disabled=false,loading=false,size='md'}) => { const cls={primary:'bg-teal text-white active:opacity-80',navy:'bg-navy text-white active:opacity-80',ghost:'bg-gray-100 text-gray-600 active:bg-gray-200',outline:'border border-navy text-navy bg-white active:bg-gray-50',danger:'bg-red-500 text-white active:opacity-80'}[variant]; const sz={md:'py-3.5 text-sm',sm:'py-2.5 text-xs',lg:'py-4 text-base'}[size]; return ( <button onClick={onClick} disabled={disabled||loading} className={`w-full ${sz} rounded-xl font-semibold transition-all flex items-center justify-center gap-2 ${cls} ${(disabled||loading)?'opacity-40':''} ${className}`}> {loading&&<div className="w-4 h-4 border-2 border-current/30 border-t-current rounded-full animate-spin"/>} {children} </button> ); }; const ErrMsg = ({msg}) => msg?<div className="bg-red-50 border border-red-100 text-red-600 text-sm rounded-xl px-4 py-3 mb-4 leading-snug">{msg}</div>:null; const OkMsg = ({msg}) => msg?<div className="bg-green-50 border border-green-100 text-green-700 text-sm rounded-xl px-4 py-3 text-center font-semibold">{msg}</div>:null; // ── TOP NAV ─────────────────────────────────────────────────────────────────── const TABS = [ {key:'dashboard',label:'Home',icon:'home'}, {key:'diary',label:'Diary',icon:'diary'}, {key:'temp',label:'Temps',icon:'temp'}, {key:'van',label:'Equipment',icon:'van'}, {key:'records',label:'Records',icon:'eho'}, ]; const TopNav = ({screen,onChange,profile}) => { const initials = (profile?.name||'?').split(' ').map(w=>w[0]).join('').slice(0,2).toUpperCase(); return ( <div className="fixed top-0 left-0 right-0 z-50 max-w-lg mx-auto"> {/* Header bar */} <div className="bg-navy flex items-center px-4 h-14 gap-2.5"> <div className="flex-shrink-0 flex items-center"> <img src="/icon-navy.png" alt="VanGuard" style={{width:'40px',height:'38px',objectFit:'contain'}}/> </div> <div className="flex-1 min-w-0"> <p className="text-white font-black text-base leading-none">Van<span className="text-teal">Guard</span></p> <p className="text-white/40 text-xs leading-none mt-0.5 truncate">{profile?.business_name||'Stay compliant. Keep moving.'}</p> </div> <button onClick={()=>onChange('account')} aria-label="Settings" className={`w-9 h-9 rounded-full flex items-center justify-center transition-all ${screen==='account'?'bg-teal text-white':'bg-white/10 text-white/80 hover:bg-white/20'}`}> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg> </button> </div> {/* Tab bar */} <div className="bg-white border-b border-gray-100 flex shadow-sm"> {TABS.map(t=>( <button key={t.key} onClick={()=>onChange(t.key)} className={`flex-1 flex flex-col items-center py-2 gap-0.5 border-b-2 transition-all ${screen===t.key?'border-teal text-teal':'border-transparent text-gray-400'}`}> <Icon name={t.icon} size={18} color={screen===t.key?'#0D7377':'#9CA3AF'}/> <span className="text-[10px] font-semibold">{t.label}</span> </button> ))} </div> </div> ); }; // ── DESKTOP SIDEBAR (≥lg) ───────────────────────────────────────────────────── const CogIcon = ({size=18})=>( <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg> ); const DesktopSidebar = ({screen,onChange,profile,onHelp}) => { const item=(active)=>`w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-semibold transition-all ${active?'bg-teal text-white':'text-white/60 hover:bg-white/10 hover:text-white'}`; return ( <div className="hidden lg:flex lg:flex-col lg:w-64 lg:h-screen lg:sticky lg:top-0 shrink-0 bg-navy text-white"> <div className="flex items-center gap-2.5 px-5 h-16 border-b border-white/10"> <img src="/icon-navy.png" alt="VanGuard" style={{width:'34px',height:'32px',objectFit:'contain'}}/> <div className="min-w-0"> <p className="font-black text-base leading-none">Van<span className="text-teal">Guard</span></p> <p className="text-white/40 text-[11px] leading-none mt-1 truncate">{profile?.business_name||'Stay compliant'}</p> </div> </div> <nav className="flex-1 py-4 px-3 space-y-1 overflow-y-auto"> {TABS.map(t=>( <button key={t.key} onClick={()=>onChange(t.key)} className={item(screen===t.key)}> <Icon name={t.icon} size={18} color={screen===t.key?'white':'rgba(255,255,255,0.6)'}/> {t.label} </button> ))} </nav> <div className="px-3 py-4 border-t border-white/10 space-y-1"> <button onClick={()=>onChange('account')} className={item(screen==='account')}><CogIcon/> Settings</button> <button onClick={onHelp} className={item(false)}><span className="w-[18px] text-center font-black">?</span> Help</button> </div> </div> ); }; // ── LANDING PAGE ────────────────────────────────────────────────────────────── // ── ISO CAROUSEL ────────────────────────────────────────────────────────────── const IsoCarousel = ({bg='#0C1628'}) => { const stkRef=useRef(null); const titleRef=useRef(null); const dotsRef=useRef(null); const wrapRef=useRef(null); useEffect(()=>{ const S=[ {t:'Dashboard',i:'📊',c:'#14A085',rows:[{l:'Temperature logs',v:'3 readings',ok:true},{l:'Van checks',v:'All clear',ok:true},{l:'Food diary',v:'Pending',ok:null},{l:'Cleaning log',v:'Done',ok:true}]}, {t:'Temperature Log',i:'🌡',c:'#E85D04',rows:[{l:'Fridge',v:'3°C',ok:true},{l:'Freezer',v:'-18°C',ok:true},{l:'Hot hold',v:'68°C',ok:true},{l:'Delivery box',v:'5°C',ok:true}]}, {t:'Van Checks',i:'🚐',c:'#0D7377',rows:[{l:'Wheels & tyres',ok:true},{l:'Fire extinguisher',ok:true},{l:'First aid kit',ok:true},{l:'Gas seals checked',ok:true}]}, {t:'EHO Report',i:'📋',c:'#7209B7',cta:'↓ Download PDF report',rows:[{l:'30-day log complete',ok:true},{l:'Temperature records',ok:true},{l:'Cleaning schedule',ok:true},{l:'Food diary entries',ok:true}]}, {t:'Food Diary',i:'📖',c:'#F77F00',rows:[{l:'09:15 Delivery in',v:'Butcher+veg'},{l:'11:00 Trading',v:'Borough Mkt'},{l:'14:30 Complaints',v:'None'},{l:'16:00 Waste',v:'0.5 kg'}]}, ]; const ZP=[115,58,0,-58,-115],OP=[1,0.82,0.64,0.48,0.34]; const mkP=s=>{ const rows=s.rows.map(r=>{const dot=r.ok===true?'#14A085':r.ok===null?'#F59E0B':'rgba(255,255,255,0.1)';return`<div style="display:flex;align-items:center;justify-content:space-between;padding:3.5px 0;border-bottom:0.5px solid rgba(255,255,255,0.07)"><div style="display:flex;align-items:center;gap:5px"><div style="width:5px;height:5px;border-radius:50%;flex-shrink:0;background:${dot}"></div><span style="font-size:7.5px;color:rgba(255,255,255,0.85)">${r.l}</span></div>${r.v?`<span style="font-size:7px;color:rgba(255,255,255,0.4)">${r.v}</span>`:''}</div>`;}).join(''); const cta=s.cta?`<div style="margin-top:7px;background:${s.c};border-radius:5px;padding:4px 0;text-align:center;font-size:7px;font-weight:700;color:white">${s.cta}</div>`:''; return`<div style="width:144px;background:#07101f;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,0.1)"><div style="height:12px;background:#040c18;display:flex;align-items:center;justify-content:center"><div style="width:28px;height:2px;background:rgba(255,255,255,0.1);border-radius:2px"></div></div><div style="padding:7px 8px 7px"><div style="display:flex;align-items:center;gap:5px;margin-bottom:6px"><div style="width:19px;height:19px;background:${s.c};border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:9px;flex-shrink:0">${s.i}</div><span style="font-size:9px;font-weight:700;color:white">${s.t}</span></div>${rows}${cta}</div><div style="height:10px;background:#040c18;display:flex;align-items:center;justify-content:center"><div style="width:32px;height:2px;background:rgba(255,255,255,0.1);border-radius:2px"></div></div></div><div style="font-size:7.5px;font-weight:600;color:rgba(255,255,255,0.3);letter-spacing:1px;text-align:center;margin-top:7px">${s.t.toUpperCase()}</div>`; }; const stk=stkRef.current,titleEl=titleRef.current,dotsEl=dotsRef.current; if(!stk)return; const cards=S.map((s,i)=>{ const d=document.createElement('div'); d.style.cssText='position:absolute;top:50%;left:50%;width:170px;height:212px;background:rgba(8,17,38,0.93);border-top:1px solid rgba(255,255,255,0.30);border-left:1px solid rgba(255,255,255,0.15);border-right:1px solid rgba(255,255,255,0.07);border-bottom:1px solid rgba(255,255,255,0.07);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px;box-sizing:border-box;will-change:transform,opacity'; d.innerHTML=mkP(s); d.style.transform=`translate(-50%,-50%) translateZ(${ZP[i]}px)`; d.style.opacity=String(OP[i]); d.style.zIndex=String(10-i); stk.appendChild(d); return d; }); let queue=[0,1,2,3,4],busy=false; const updateUI=()=>{ if(titleEl)titleEl.textContent=S[queue[0]].t.toUpperCase(); if(dotsEl)dotsEl.querySelectorAll('.iso-dot').forEach((d,i)=>{d.className='iso-dot'+(queue[0]===i?' iso-on':'');}); }; if(dotsEl){ S.forEach((_,i)=>{ const d=document.createElement('span'); d.className='iso-dot'+(i===0?' iso-on':''); d.style.cssText='width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.22);display:inline-block;margin:0 3px;cursor:pointer;transition:all 0.3s;vertical-align:middle'; d.onclick=()=>{ if(busy||queue[0]===i)return; const pos=queue.indexOf(i);if(pos<0)return; queue=[...queue.slice(pos),...queue.slice(0,pos)]; queue.forEach((sc,p)=>{cards[sc].style.transition='transform 0.46s cubic-bezier(0.4,0,0.2,1),opacity 0.36s';cards[sc].style.transform=`translate(-50%,-50%) translateZ(${ZP[p]}px)`;cards[sc].style.opacity=String(OP[p]);cards[sc].style.zIndex=String(10-p);}); updateUI(); }; dotsEl.appendChild(d); }); } // Dot active style via JS since we can't use a <style> tag cleanly in useEffect const styleEl=document.createElement('style'); styleEl.textContent='.iso-on{background:#0D7377!important;width:20px!important;border-radius:3px!important}'; document.head.appendChild(styleEl); const advance=()=>{ if(busy)return;busy=true; const fi=queue[0],fc=cards[fi]; fc.style.transition='transform 0.30s cubic-bezier(0.2,0,0.4,1),opacity 0.22s'; fc.style.transform='translate(-50%,-50%) translateZ(210px) rotateY(-18deg) translateY(-6px)'; fc.style.opacity='0.72';fc.style.zIndex='20'; setTimeout(()=>{ for(let p=1;p<5;p++){const sc=queue[p];cards[sc].style.transition='transform 0.50s cubic-bezier(0.4,0,0.2,1),opacity 0.38s';cards[sc].style.transform=`translate(-50%,-50%) translateZ(${ZP[p-1]}px)`;cards[sc].style.opacity=String(OP[p-1]);cards[sc].style.zIndex=String(10-(p-1));} fc.style.transition='transform 0.50s cubic-bezier(0.55,0,0.9,0.5),opacity 0.30s'; fc.style.transform='translate(-50%,-50%) translateZ(-175px) rotateY(0deg) translateY(0px)'; fc.style.opacity='0'; setTimeout(()=>{ const f=queue.shift();queue.push(f); fc.style.transition='none';fc.style.transform=`translate(-50%,-50%) translateZ(${ZP[4]}px)`;fc.style.zIndex='6'; setTimeout(()=>{fc.style.transition='opacity 0.28s';fc.style.opacity=String(OP[4]);},30); updateUI();busy=false; },520); },310); }; let timer=setInterval(advance,3800); const wrap=wrapRef.current; const isTouch='ontouchstart' in window||navigator.maxTouchPoints>0; if(wrap&&!isTouch){ wrap.addEventListener('mouseenter',()=>clearInterval(timer)); wrap.addEventListener('mouseleave',()=>{clearInterval(timer);timer=setInterval(advance,3800);}); } return()=>{clearInterval(timer);styleEl.remove();while(stk.firstChild)stk.removeChild(stk.firstChild);if(dotsEl)dotsEl.innerHTML='';}; },[]); return ( <div ref={wrapRef} style={{background:bg,borderRadius:bg==='transparent'?0:'16px',padding:'28px 0 20px',margin:'0 0 0 0'}}> <div style={{perspective:'600px',perspectiveOrigin:'50% 44%',height:'310px',display:'flex',alignItems:'center',justifyContent:'center',overflow:'visible'}}> <div ref={stkRef} style={{position:'relative',width:'170px',height:'210px',transformStyle:'preserve-3d',transform:'rotateX(9deg) rotateY(-24deg)'}}></div> </div> <div ref={titleRef} style={{textAlign:'center',color:'rgba(255,255,255,0.42)',fontSize:'9.5px',fontWeight:'600',letterSpacing:'1.4px',marginTop:'4px'}}>DASHBOARD</div> <div ref={dotsRef} style={{textAlign:'center',marginTop:'13px'}}></div> </div> ); }; // ── LANDING PAGE ────────────────────────────────────────────────────────────── const LandingPage = ({onGetStarted}) => { const [userCount,setUserCount]=useState(null); useEffect(()=>{ sb.from('profiles').select('*',{count:'exact',head:true}) .then(({count})=>{if(count>=10)setUserCount(count);}) .catch(()=>{}); },[]); const features=[ {icon:'temp',title:'Temperature Logs',desc:'Log fridge, hot hold & delivery temps in seconds. Timestamped and tamper-proof.'}, {icon:'van',title:'Van & Cleaning Checks',desc:'Daily vehicle, equipment and cleaning checklists tailored to your unit type.'}, {icon:'eho',title:'EHO Audit Report',desc:'One tap generates a PDF report covering your entire compliance history — ready for inspection day.'}, {icon:'diary',title:'Food Safety Diary',desc:'Record deliveries, waste, complaints and allergen notes with date and time stamps.'}, ]; const steps=[ {n:'1',title:'Start free trial',desc:'14 days free, every feature included. Card required to start — cancel anytime.'}, {n:'2',title:'Log as you trade',desc:'30 seconds per check. Works on any phone, no app install needed.'}, {n:'3',title:'Ace your inspection',desc:'Download your audit report and hand it straight to the EHO.'}, ]; return ( <div className="min-h-screen bg-white" style={{fontFamily:'system-ui,-apple-system,sans-serif'}}> {/* ── NAV ── */} <div style={{background:'#1A2744'}} className="sticky top-0 z-50 flex items-center justify-between px-5 py-3"> <div className="flex items-center gap-2"> <img src="/icon-192.png" alt="VanGuard" style={{width:'28px',height:'28px',borderRadius:'7px'}}/> <span className="text-xl font-black text-white">Van<span style={{color:'#0D7377'}}>Guard</span></span> </div> <button onClick={()=>onGetStarted('login')} className="text-sm font-semibold text-white border border-white/30 rounded-lg px-4 py-1.5"> Sign in </button> </div> {/* ── HERO (split: text left + carousel right) ── */} <div style={{ background:'linear-gradient(115deg,#1A2744 0%,#122033 47%,#0C1628 100%)', position:'relative', overflow:'visible' }}> {/* Teal radial glow at the seam — visual glue between the two halves */} <div style={{ position:'absolute',top:'50%',left:'47%', transform:'translate(-50%,-50%)', width:'360px',height:'360px', background:'radial-gradient(ellipse,rgba(13,115,119,0.16) 0%,transparent 68%)', pointerEvents:'none' }}/> {/* Subtle vertical highlight line at the seam — hidden on mobile */} <div className="hero-divider" style={{ position:'absolute',top:'10%',left:'46.5%', width:'1px',height:'80%', background:'linear-gradient(to bottom,transparent,rgba(13,115,119,0.25) 30%,rgba(13,115,119,0.25) 70%,transparent)', pointerEvents:'none' }}/> <div className="hero-cols" style={{display:'flex',alignItems:'center',position:'relative',zIndex:2,minHeight:'390px'}}> {/* LEFT: headline + CTA */} <div className="hero-left" style={{flex:'0 0 47%',padding:'36px 14px 36px 20px',display:'flex',flexDirection:'column',justifyContent:'center',alignItems:'center',textAlign:'center'}}> <div className="hero-logo-row" style={{display:'flex',alignItems:'center',justifyContent:'center',gap:'8px',marginBottom:'14px'}}> <img src="/icon-192.png" alt="VanGuard" style={{width:'30px',height:'30px',borderRadius:'8px',boxShadow:'0 4px 16px rgba(0,0,0,0.5)',flexShrink:0}}/> <span style={{fontSize:'8px',fontWeight:'700',letterSpacing:'1.3px',color:'rgba(255,255,255,0.38)',lineHeight:'1.4',textTransform:'uppercase'}}>Mobile caterer<br/>food safety</span> </div> <h1 style={{color:'white',fontSize:'30px',fontWeight:'900',lineHeight:'1.1',margin:'0 0 10px',letterSpacing:'-0.5px'}}> Stay compliant.<br/>Keep moving. </h1> <p style={{color:'rgba(255,255,255,0.5)',fontSize:'11.5px',lineHeight:'1.6',margin:'0 0 20px'}}> Food safety records built for mobile caterers. EHO-ready in under a minute a day. </p> <button onClick={()=>onGetStarted('register')} style={{background:'#0D7377',color:'white',fontWeight:'800',fontSize:'13px',padding:'13px 0',borderRadius:'14px',border:'none',cursor:'pointer',width:'100%',boxShadow:'0 4px 24px rgba(13,115,119,0.45)',letterSpacing:'0.2px'}}> Start Free Trial </button> <button onClick={()=>onGetStarted('login')} style={{background:'transparent',border:'none',color:'rgba(255,255,255,0.3)',fontSize:'10px',padding:'9px 0 0',cursor:'pointer',fontWeight:'600',textAlign:'center'}}> Already have an account? </button> <p style={{color:'rgba(255,255,255,0.18)',fontSize:'9px',textAlign:'center',margin:'5px 0 0'}}>14-day free trial · Cancel anytime</p> </div> {/* RIGHT: live carousel */} <div className="hero-right" style={{flex:'1',display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',overflow:'visible',padding:'8px 0'}}> <p style={{color:'rgba(255,255,255,0.28)',fontSize:'8.5px',fontWeight:'700',letterSpacing:'1.6px',marginBottom:'2px',textAlign:'center'}}>SEE IT IN ACTION</p> <IsoCarousel bg="transparent"/> </div> </div> </div> {/* ── TRUST STRIP ── */} <div className="border-b border-gray-100"> {userCount&&( <div className="flex items-center justify-center gap-2 py-3 border-b border-gray-100" style={{background:'#E6F6F6'}}> <span className="text-lg">👨🍳</span> <span className="text-sm font-bold" style={{color:'#0D7377'}}>{userCount} mobile caterers</span> <span className="text-xs text-gray-500">already keeping records with VanGuard</span> </div> )} <div className="flex justify-around px-4 py-5"> {[['✓','14-day free trial'],['✓','Cancel anytime'],['✓','Any phone']].map(([icon,label])=>( <div key={label} className="flex items-center gap-1.5"> <span className="font-bold text-sm" style={{color:'#0D7377'}}>{icon}</span> <span className="text-xs text-gray-500 font-medium">{label}</span> </div> ))} </div> </div> {/* ── PROBLEM ── */} <div className="px-5 py-10"> <h2 className="text-xl font-black text-center mb-2" style={{color:'#1A2744'}}> Paper records are a liability. </h2> <p className="text-gray-500 text-sm text-center mb-6 leading-relaxed"> Most food safety apps are built for restaurants — too complex, too expensive, or missing the checks mobile caterers actually need. Paper gets wet, lost, or forgotten. Neither impresses an EHO. </p> <div className="rounded-2xl p-4" style={{background:'#E6F6F6'}}> <p className="text-sm font-bold mb-2" style={{color:'#0D7377'}}>VanGuard is different:</p> {['Designed around the mobile caterer workflow','Van, trailer & gazebo-specific checks','Instant audit report — no manual compilation','£7.99/month. Not £50+ like the big players'].map(p=>( <div key={p} className="flex items-start gap-2 mb-2"> <span className="mt-0.5 font-bold flex-shrink-0" style={{color:'#0D7377'}}>→</span> <span className="text-sm text-gray-700">{p}</span> </div> ))} </div> </div> {/* ── FEATURES ── */} <div style={{background:'#F8FAFB'}} className="px-5 py-10"> <h2 className="text-xl font-black text-center mb-1" style={{color:'#1A2744'}}>Everything you need.</h2> <p className="text-gray-400 text-sm text-center mb-6">Nothing you don't.</p> <div className="grid grid-cols-2 gap-3"> {features.map(f=>( <div key={f.title} className="bg-white rounded-2xl p-4 shadow-sm"> <div className="w-9 h-9 rounded-xl flex items-center justify-center mb-3" style={{background:'#E6F6F6'}}> <Icon name={f.icon} size={18} color="#0D7377"/> </div> <p className="text-xs font-bold mb-1" style={{color:'#1A2744'}}>{f.title}</p> <p className="text-xs text-gray-400 leading-relaxed">{f.desc}</p> </div> ))} </div> </div> {/* ── HOW IT WORKS ── */} <div className="px-5 py-10"> <h2 className="text-xl font-black text-center mb-6" style={{color:'#1A2744'}}>Up and running in minutes.</h2> <div className="space-y-4"> {steps.map(s=>( <div key={s.n} className="flex items-start gap-4"> <div className="w-9 h-9 rounded-full flex items-center justify-center flex-shrink-0 font-black text-white text-sm" style={{background:'#0D7377'}}> {s.n} </div> <div className="pt-1"> <p className="text-sm font-bold mb-0.5" style={{color:'#1A2744'}}>{s.title}</p> <p className="text-sm text-gray-400">{s.desc}</p> </div> </div> ))} </div> </div> {/* ── PRICING ── */} <div style={{background:'#F8FAFB'}} className="px-5 py-10"> <h2 className="text-xl font-black text-center mb-1" style={{color:'#1A2744'}}>Simple pricing.</h2> <p className="text-gray-400 text-sm text-center mb-6">No hidden fees.</p> {/* Monthly — featured */} <div className="rounded-2xl p-5 mb-4 border-2 relative overflow-hidden" style={{background:'#1A2744',borderColor:'#0D7377'}}> <div className="absolute top-3 right-3 text-xs font-bold px-2 py-0.5 rounded-full" style={{background:'#0D7377',color:'white'}}> ⭐ 14 days free </div> <p className="text-xs font-bold tracking-wider mb-3" style={{color:'#0D7377'}}>SOLO PLAN</p> <div className="flex items-end gap-1 mb-1"> <span className="text-4xl font-black text-white">£7.99</span> <span className="text-white/40 text-sm mb-1">/month</span> </div> <p className="text-sm font-semibold mb-1" style={{color:'#4ECDC4'}}>Free for your first 14 days.</p> <p className="text-xs mb-1" style={{color:'rgba(255,255,255,0.55)'}}>or <strong>£69.99/year</strong> — save 27%</p> <p className="text-xs mb-4" style={{color:'rgba(255,255,255,0.4)'}}>Cancel anytime before your trial ends and you won't be charged</p> <button onClick={()=>onGetStarted('register')} className="w-full py-3.5 rounded-xl font-bold text-white text-sm" style={{background:'#0D7377'}}> Start Free Trial </button> </div> {/* Reassurance */} <div className="bg-white rounded-2xl p-5 border border-gray-100 shadow-sm"> <p className="text-xs font-bold tracking-wider mb-3 text-gray-400">WHAT YOU GET</p> <div className="flex items-end gap-1 mb-1"> <span className="text-3xl font-black" style={{color:'#1A2744'}}>Everything</span> </div> <p className="text-xs text-gray-400 mb-1">Every feature, from day one. One simple price after your free trial.</p> <p className="text-xs text-gray-400">Card details taken to start your trial · Cancel anytime · No long contracts</p> </div> </div> {/* ── COMPARISON ── */} <div className="px-5 py-10"> <h2 className="text-xl font-black text-center mb-2" style={{color:'#1A2744'}}>VanGuard vs. paper records.</h2> <p className="text-center text-xs text-gray-400 mb-6">Most mobile caterers still use clipboards. Here's what that costs you.</p> <div className="rounded-2xl overflow-hidden border border-gray-100 shadow-sm"> <table className="w-full text-sm"> <thead> <tr style={{background:'#1A2744'}}> <th className="text-left py-3 px-4 text-white/60 font-medium text-xs"></th> <th className="py-3 px-2 text-white/40 font-medium text-xs">Paper</th> <th className="py-3 px-2 text-white font-bold text-xs">VanGuard</th> </tr> </thead> <tbody> {[ ['Survives a rainy market day','✗','✓'], ['Auto-timestamps every entry','✗','✓'], ['Flags a failed temp reading instantly','✗','✓'], ['Export a full inspection pack in one tap','✗','✓'], ['Morning reminder to log your checks','✗','✓'], ['Works on any phone, nothing to install','✗','✓'], ].map(([label,...cells],i)=>( <tr key={label} style={{background:i%2===0?'white':'#F8FAFB'}}> <td className="py-3 px-4 text-gray-600 text-xs">{label}</td> {cells.map((c,j)=>( <td key={j} className={`py-3 px-2 text-center text-xs font-semibold ${c==='✓'?'text-teal':c==='✗'?'text-red-400':'text-gray-400'}`}>{c}</td> ))} </tr> ))} </tbody> </table> </div> </div> {/* ── BOTTOM CTA ── */} <div style={{background:'#1A2744'}} className="px-5 py-12 text-center"> <h2 className="text-2xl font-black text-white mb-3">Ready to go paperless?</h2> <p className="text-white/50 text-sm mb-6">Join mobile caterers already using VanGuard to stay compliant.</p> <button onClick={()=>onGetStarted('register')} className="w-full max-w-xs mx-auto block font-bold text-white py-4 rounded-2xl text-base mb-3 shadow-lg" style={{background:'#0D7377'}}> Start Your Free Trial </button> <p className="text-white/25 text-xs">14 days free · Cancel anytime</p> </div> {/* ── FOOTER ── */} <div className="px-5 py-6 text-center border-t border-gray-100"> <p className="text-xs text-gray-300 mb-1">© 2026 VanGuard · Food safety for UK mobile caterers</p> <p className="text-xs text-gray-300"> <a href="mailto:hello@vanguardapp.co.uk" style={{color:'#0D7377'}}>Contact & support</a> {' · '} <a href="/privacy.html" style={{color:'#0D7377'}}>Privacy</a> {' · '} <a href="/terms.html" style={{color:'#0D7377'}}>Terms</a> </p> </div> </div> ); }; // ── AUTH SCREEN ─────────────────────────────────────────────────────────────── const AuthScreen = ({initialMode='login', onBack=null}) => { const [mode,setMode]=useState(initialMode); // 'login' | 'register' | 'forgot' const [email,setEmail]=useState(''); const [pass,setPass]=useState(''); const [name,setName]=useState(''); const [biz,setBiz]=useState(''); const [err,setErr]=useState(''); const [ok,setOk]=useState(''); const [loading,setLoading]=useState(false); const submit=async()=>{ setErr(''); setOk(''); setLoading(true); if(mode==='forgot'){ if(!email){setErr('Please enter your email address.');setLoading(false);return;} const {error}=await sb.auth.resetPassword(email); if(error){setErr(error.message);}else{setOk('Reset link sent! Check your inbox.');} setLoading(false); return; } if(mode==='register'){ if(!name||!biz||!email||!pass){setErr('Please fill in all fields.');setLoading(false);return;} try{ const refCode=new URLSearchParams(window.location.search).get('ref')||localStorage.getItem('vg_ref')||null; const {error,data:signUpData}=await sb.auth.signUp({email,password:pass,options:{data:{name,businessName:biz,referred_by:refCode}}}); if(refCode) localStorage.removeItem('vg_ref'); if(error){setErr(error.message);setLoading(false);return;} // If email confirmation is required, no session is returned. Tell the user // instead of leaving the button spinning forever. if(!signUpData?.session){ setOk('Account created! Check your inbox to confirm your email, then sign in.'); setMode('login');setPass('');setLoading(false);return; } // Otherwise onAuthStateChange will take over and load the app. }catch(e){setErr('Sign up failed. Please try again.');setLoading(false);} } else { if(!email||!pass){setErr('Please fill in all fields.');setLoading(false);return;} try{ const {error}=await sb.auth.signInWithPassword({email,password:pass}); if(error){setErr(error.message);setPass('');setLoading(false);} }catch(e){setErr('Sign in failed. Please try again.');setPass('');setLoading(false);} } }; return ( <div className="relative min-h-screen bg-navy flex flex-col items-center justify-center p-5"> {onBack&&<button onClick={onBack} className="absolute top-5 left-5 flex items-center gap-1 text-white/40 text-xs"> <Icon name="back" size={14} color="rgba(255,255,255,0.4)"/> Back </button>} <img src="/icon-192.png" className="mb-4 shadow-2xl" alt="VanGuard" style={{width:'80px',height:'80px',borderRadius:'20px'}}/> <h1 className="text-3xl font-black text-white mb-1">Van<span style={{color:'#0D7377'}}>Guard</span></h1> <p className="text-white/40 text-sm mb-8 text-center">Stay compliant. Keep moving.</p> <div className="w-full max-w-sm bg-white rounded-2xl p-6 shadow-2xl"> {mode==='forgot'?( <> <button onClick={()=>{setMode('login');setErr('');setOk('');}} className="flex items-center gap-1 text-xs text-gray-400 mb-4"> <Icon name="back" size={14} color="#9CA3AF"/> Back to sign in </button> <h2 className="font-black text-navy text-lg mb-1">Reset password</h2> <p className="text-sm text-gray-400 mb-4">Enter your email and we'll send a reset link.</p> <ErrMsg msg={err}/> {ok?<OkMsg msg={ok}/>:<> <Input label="Email" value={email} onChange={setEmail} type="email" placeholder="you@example.com" required/> <Btn onClick={submit} loading={loading}>Send reset link</Btn> </>} </> ):( <> <div className="flex rounded-xl bg-gray-100 p-1 mb-5"> {['login','register'].map(m=>( <button key={m} onClick={()=>{setMode(m);setErr('');}} className={`flex-1 py-2 rounded-lg text-sm font-semibold transition-all ${mode===m?'bg-white shadow text-navy':'text-gray-400'}`}> {m==='login'?'Sign In':'Free Trial'} </button> ))} </div> <ErrMsg msg={err}/> {ok&&<OkMsg msg={ok}/>} {mode==='register'&&<> <Input label="Your name" value={name} onChange={setName} placeholder="Sarah Jones" required/> <Input label="Business name" value={biz} onChange={setBiz} placeholder="The Taco Van" required/> </>} <Input label="Email" value={email} onChange={setEmail} type="email" placeholder="you@example.com" required/> <Input label="Password" value={pass} onChange={setPass} type="password" placeholder="Min. 6 characters" required/> {mode==='register'&&<p className="text-xs text-gray-400 text-center mb-4">14-day free trial · Card required to start · Cancel anytime</p>} <Btn onClick={submit} loading={loading}>{mode==='register'?'Start Free Trial':'Sign In'}</Btn> {mode==='login'&&<button onClick={()=>{setMode('forgot');setErr('');}} className="w-full text-center text-xs text-gray-400 mt-3 py-1">Forgot password?</button>} </> )} </div> <p className="text-white/25 text-xs mt-6 text-center">Food safety compliance built for mobile caterers · £7.99/month after trial</p> </div> ); }; // ── ONBOARDING WIZARD ───────────────────────────────────────────────────────── const unitTypes=[ {key:'van',label:'Food Van',emoji:'🚐',desc:'Motorised catering van'}, {key:'trailer',label:'Trailer',emoji:'🚛',desc:'Towed catering trailer'}, {key:'gazebo',label:'Gazebo / Stall',emoji:'⛺',desc:'Market stall or tent'}, {key:'tricycle',label:'Bike / Trike',emoji:'🚲',desc:'Bicycle or tricycle unit'}, ]; // Default daily checklists (shared by onboarding + the Daily Diary). const DEFAULT_OPENING=['Fridge/freezer temps checked','Hand washing station set up','Unit cleaned from previous use','Food stored correctly (covered & separated)']; const DEFAULT_CLOSING=['Food stored away or safely discarded','Equipment cleaned and put away','All power and gas turned off','Unit secured and locked']; const DEFAULT_CLEANING=['Work surfaces wiped & sanitised','Chopping boards cleaned','Fridge/freezer wiped inside','Cooking equipment cleaned','Floors swept & mopped','Bins emptied & relined','Hand wash station restocked','Waste disposed correctly']; // localStorage keys for a user's custom checklist lines (also mirrored to profiles.custom_checklists). const ckKeys=uid=>({opening:`vg_coj_${uid}`,closing:`vg_cclosej_${uid}`,cleaning:`vg_ccj_${uid}`}); const rmKeys=uid=>({opening:`vg_rmopen_${uid}`,closing:`vg_rmclose_${uid}`,cleaning:`vg_rmclean_${uid}`}); const readCustom=(uid,which)=>{try{return JSON.parse(localStorage.getItem(ckKeys(uid)[which]))||[];}catch{return[];}}; const writeCustom=(uid,which,list)=>{try{localStorage.setItem(ckKeys(uid)[which],JSON.stringify(list));}catch{}}; const readRemoved=(uid,which)=>{try{return JSON.parse(localStorage.getItem(rmKeys(uid)[which]))||[];}catch{return[];}}; const writeRemoved=(uid,which,list)=>{try{localStorage.setItem(rmKeys(uid)[which],JSON.stringify(list));}catch{}}; // Hydrate localStorage from a saved profile so custom checklists follow the user across devices. const hydrateChecklists=(uid,saved)=>{ if(!saved||typeof saved!=='object') return; ['opening','closing','cleaning'].forEach(which=>{ if(Array.isArray(saved[which])&&!localStorage.getItem(ckKeys(uid)[which])) writeCustom(uid,which,saved[which]); if(saved.removed&&Array.isArray(saved.removed[which])&&!localStorage.getItem(rmKeys(uid)[which])) writeRemoved(uid,which,saved.removed[which]); }); }; // One editable checklist inside the onboarding "customise" step. const ChecklistEditor=({title,defaults,removed,setRemoved,custom,setCustom})=>{ const [txt,setTxt]=useState(''); const add=()=>{const v=txt.trim();if(!v)return;setCustom([...custom,{id:Date.now().toString(),label:v}]);setTxt('');}; return ( <div className="bg-white rounded-2xl p-4 mb-3"> <p className="font-bold text-navy text-sm mb-2">{title}</p> {defaults.map((item,i)=>{ const gone=removed.includes(i); return ( <div key={i} className={`flex items-center gap-2 py-1.5 ${gone?'opacity-40':''}`}> <div className="w-4 h-4 rounded border-2 border-gray-200 flex-shrink-0"/> <span className={`text-sm flex-1 text-gray-700 ${gone?'line-through':''}`}>{item}</span> <button onClick={()=>setRemoved(gone?removed.filter(x=>x!==i):[...removed,i])} className="text-xs font-semibold flex-shrink-0" style={{color:gone?'#0D7377':'#EF4444'}}> {gone?'Add back':'Remove'} </button> </div> ); })} {custom.map(job=>( <div key={job.id} className="flex items-center gap-2 py-1.5"> <div className="w-4 h-4 rounded border-2 border-teal flex-shrink-0"/> <span className="text-sm flex-1 text-gray-700">{job.label}</span> <button onClick={()=>setCustom(custom.filter(j=>j.id!==job.id))} className="text-gray-300 hover:text-red-400 text-lg leading-none flex-shrink-0">×</button> </div> ))} <div className="flex gap-2 mt-2 pt-2 border-t border-gray-100"> <input value={txt} onChange={e=>setTxt(e.target.value)} onKeyDown={e=>e.key==='Enter'&&add()} placeholder="Add your own line…" className="flex-1 border border-gray-200 rounded-xl px-3 py-2 text-sm bg-gray-50 focus:outline-none focus:border-teal"/> <button onClick={add} disabled={!txt.trim()} className="rounded-xl px-4 py-2 text-sm font-bold text-white disabled:opacity-30" style={{background:'#0D7377'}}>+</button> </div> </div> ); }; const OnboardingWizard = ({userId,profile,onComplete}) => { const [step,setStep]=useState(1); const TOTAL=4; const [unitType,setUnitType]=useState(profile?.unit_type||'van'); const [useLPG,setUseLPG]=useState(profile?.lpg_enabled!==false); const [authority,setAuthority]=useState(profile?.authority||''); const [hygieneRating,setHygieneRating]=useState(profile?.hygiene_rating??null); // null = not yet rated, 0-5 // New profile questions const [teamSize,setTeamSize]=useState(profile?.team_size||'solo'); const [waterOnboard,setWaterOnboard]=useState(profile?.water_enabled??false); const [foodType,setFoodType]=useState(profile?.food_type||''); // Checklist customisation (hydrated from any existing saved lists) const [rmOpen,setRmOpen]=useState(()=>readRemoved(userId,'opening')); const [rmClose,setRmClose]=useState(()=>readRemoved(userId,'closing')); const [rmClean,setRmClean]=useState(()=>readRemoved(userId,'cleaning')); const [cOpen,setCOpen]=useState(()=>readCustom(userId,'opening')); const [cClose,setCClose]=useState(()=>readCustom(userId,'closing')); const [cClean,setCClean]=useState(()=>readCustom(userId,'cleaning')); const [saving,setSaving]=useState(false); const finish=async()=>{ setSaving(true); // Persist checklist choices to localStorage (used by the Daily Diary)… writeCustom(userId,'opening',cOpen);writeCustom(userId,'closing',cClose);writeCustom(userId,'cleaning',cClean); writeRemoved(userId,'opening',rmOpen);writeRemoved(userId,'closing',rmClose);writeRemoved(userId,'cleaning',rmClean); const custom_checklists={opening:cOpen,closing:cClose,cleaning:cClean,removed:{opening:rmOpen,closing:rmClose,cleaning:rmClean}}; const fields={unit_type:unitType,authority,lpg_enabled:useLPG,hygiene_rating:hygieneRating,team_size:teamSize,water_enabled:waterOnboard,food_type:foodType,custom_checklists,onboarded:true}; // Update (not upsert) so we only touch these columns and never clobber name/business_name. await sb.from('profiles').update(fields).eq('id',userId); localStorage.setItem('vg_ob_'+userId,'1'); onComplete({...profile,...fields}); }; const Dots=()=>( <div className="flex gap-2 justify-center mb-8"> {Array.from({length:TOTAL},(_,k)=>k+1).map(i=>( <div key={i} className={`rounded-full transition-all ${step===i?'w-8 h-2 bg-teal':'w-2 h-2 bg-white/20'}`}/> ))} </div> ); const NavBtns=({onBack,onNext,nextLabel='Next →'})=>( <div className="flex gap-2"> {onBack&&<button onClick={onBack} className="flex-1 py-3.5 rounded-xl font-semibold text-sm bg-white/10 text-white">← Back</button>} <button onClick={onNext} className="flex-1 py-3.5 rounded-xl font-semibold text-sm bg-teal text-white">{nextLabel}</button> </div> ); return ( <div className="min-h-screen bg-navy flex flex-col items-center justify-center p-5 py-10"> <div className="w-full max-w-sm"> <Dots/> {step===1&&( <div className="fade-in"> <h2 className="text-2xl font-black text-white text-center mb-2">What's your unit type?</h2> <p className="text-white/50 text-sm text-center mb-6">This helps us tailor your daily checklists</p> <div className="grid grid-cols-2 gap-3 mb-6"> {unitTypes.map(u=>( <button key={u.key} onClick={()=>setUnitType(u.key)} className={`p-4 rounded-2xl border-2 text-left transition-all ${unitType===u.key?'bg-teal border-teal text-white':'bg-white/10 border-white/10 text-white'}`}> <div className="text-2xl mb-1">{u.emoji}</div> <div className="font-bold text-sm">{u.label}</div> <div className={`text-xs ${unitType===u.key?'text-white/70':'text-white/40'}`}>{u.desc}</div> </button> ))} </div> <Btn onClick={()=>setStep(2)}>Next →</Btn> </div> )} {step===2&&( <div className="fade-in"> <h2 className="text-2xl font-black text-white text-center mb-2">A bit more detail</h2> <p className="text-white/50 text-sm text-center mb-6">We'll customise your checks based on your answers</p> <div className="bg-white rounded-2xl p-5 mb-4"> <p className="font-bold text-navy text-sm mb-3">Do you use LPG / bottled gas?</p> <div className="grid grid-cols-2 gap-2 mb-4"> {[{v:true,l:'Yes — I use gas'},{v:false,l:'No gas appliances'}].map(o=>( <button key={String(o.v)} onClick={()=>setUseLPG(o.v)} className={`py-3 rounded-xl text-sm font-semibold border-2 transition-all ${useLPG===o.v?'bg-teal border-teal text-white':'bg-gray-50 border-gray-100 text-gray-600'}`}> {o.l} </button> ))} </div> <p className="font-bold text-navy text-sm mb-3">Do you carry a water tank on board?</p> <div className="grid grid-cols-2 gap-2 mb-4"> {[{v:true,l:'Yes'},{v:false,l:'No'}].map(o=>( <button key={String(o.v)} onClick={()=>setWaterOnboard(o.v)} className={`py-3 rounded-xl text-sm font-semibold border-2 transition-all ${waterOnboard===o.v?'bg-teal border-teal text-white':'bg-gray-50 border-gray-100 text-gray-600'}`}> {o.l} </button> ))} </div> <p className="font-bold text-navy text-sm mb-3">Who runs the unit day to day?</p> <div className="grid grid-cols-2 gap-2 mb-4"> {[{v:'solo',l:'Just me'},{v:'team',l:'Me + staff'}].map(o=>( <button key={o.v} onClick={()=>setTeamSize(o.v)} className={`py-3 rounded-xl text-sm font-semibold border-2 transition-all ${teamSize===o.v?'bg-teal border-teal text-white':'bg-gray-50 border-gray-100 text-gray-600'}`}> {o.l} </button> ))} </div> <label className="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1.5">What do you mainly serve? <span className="font-normal text-gray-400 normal-case">(optional)</span></label> <input value={foodType} onChange={e=>setFoodType(e.target.value)} placeholder="e.g. Burgers, coffee, tacos" className="w-full border border-gray-200 rounded-xl px-4 py-3 text-sm bg-gray-50 focus:outline-none focus:border-teal mb-4"/> <label className="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1.5">Your local council / authority</label> <input value={authority} onChange={e=>setAuthority(e.target.value)} placeholder="e.g. Southwark Council" className="w-full border border-gray-200 rounded-xl px-4 py-3 text-sm bg-gray-50 focus:outline-none focus:border-teal"/> <p className="text-xs text-gray-400 mt-1">Your EHO inspecting authority</p> <div className="mt-4 pt-4 border-t border-gray-100"> <label className="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">Current food hygiene rating <span className="font-normal text-gray-400 normal-case">(optional)</span></label> <div className="flex gap-1.5 mb-1"> {[1,2,3,4,5].map(v=>{ const active=hygieneRating===v; const col=v>=4?'#16a34a':v===3?'#d97706':'#ef4444'; return( <button key={v} onClick={()=>setHygieneRating(active?null:v)} className="flex-1 py-2.5 rounded-xl text-sm font-bold border-2 transition-all" style={{background:active?col:'#F9FAFB',borderColor:active?col:'#E5E7EB',color:active?'white':col}}> {v}★ </button> ); })} </div> <p className="text-xs text-gray-400">{hygieneRating!==null?`You've selected ${hygieneRating}/5 — we'll show this on your profile`:'Tap your current rating. Skip if not yet inspected.'}</p> </div> </div> <NavBtns onBack={()=>setStep(1)} onNext={()=>setStep(3)}/> </div> )} {step===3&&( <div className="fade-in"> <h2 className="text-2xl font-black text-white text-center mb-2">Your daily checklists</h2> <p className="text-white/50 text-sm text-center mb-6">Here's what you'll tick off each day. Remove anything that doesn't apply, or add your own lines — you can change these anytime.</p> <ChecklistEditor title="Opening checks" defaults={DEFAULT_OPENING} removed={rmOpen} setRemoved={setRmOpen} custom={cOpen} setCustom={setCOpen}/> <ChecklistEditor title="Closing checks" defaults={DEFAULT_CLOSING} removed={rmClose} setRemoved={setRmClose} custom={cClose} setCustom={setCClose}/> <ChecklistEditor title="Cleaning schedule" defaults={DEFAULT_CLEANING} removed={rmClean} setRemoved={setRmClean} custom={cClean} setCustom={setCClean}/> <div className="mt-1"><NavBtns onBack={()=>setStep(2)} onNext={()=>setStep(4)}/></div> </div> )} {step===4&&( <div className="fade-in text-center"> <div className="w-20 h-20 bg-teal rounded-2xl flex items-center justify-center mx-auto mb-5 shadow-xl"> <Icon name="check" size={40} color="white"/> </div> <h2 className="text-2xl font-black text-white mb-2">You're all set!</h2> <p className="text-white/50 text-sm mb-2">Your daily checklists are customised for your {unitTypes.find(u=>u.key===unitType)?.label||'unit'}.</p> {useLPG&&<p className="text-white/50 text-sm mb-1">LPG safety checks are included.</p>} {!useLPG&&<p className="text-white/50 text-sm mb-1">LPG section is hidden — you can enable it in Account anytime.</p>} <p className="text-white/50 text-sm mb-6">Next, start your 14-day free trial.</p> <Btn onClick={finish} loading={saving} size="lg">Continue</Btn> </div> )} </div> </div> ); }; // ── DASHBOARD ───────────────────────────────────────────────────────────────── const Dashboard = ({profile,userId,onNav}) => { const [status,setStatus]=useState({diary:false,temps:0,clean:false,van:false}); const [counts,setCounts]=useState({diaries:0,temps:0}); const [loading,setLoading]=useState(true); const todayStr=today(); useEffect(()=>{ const load=async()=>{ const [{count:dC},{count:tC},{data:tD},{data:tT},{data:tC2},{data:tV}]=await Promise.all([ sb.from('diaries').select('*',{count:'exact',head:true}).eq('user_id',userId), sb.from('temp_logs').select('*',{count:'exact',head:true}).eq('user_id',userId), sb.from('diaries').select('id').eq('user_id',userId).eq('date',todayStr), sb.from('temp_logs').select('id').eq('user_id',userId).eq('date',todayStr), sb.from('cleaning_logs').select('id').eq('user_id',userId).eq('date',todayStr), sb.from('van_checks').select('id').eq('user_id',userId).eq('date',todayStr), ]); setCounts({diaries:dC||0,temps:tC||0}); setStatus({diary:!!(tD?.length),temps:tT?.length||0,clean:!!(tC2?.length),van:!!(tV?.length)}); setLoading(false); }; load(); },[userId]); const tasks=[ {label:'Daily diary completed',done:status.diary,nav:'diary',hint:'Opening & closing checks'}, {label:'Temperature checks',done:status.temps>=2,nav:'temp',hint:`${status.temps}/2 readings today`}, {label:'Cleaning schedule',done:status.clean,nav:'diary',hint:'Sign off today\'s cleaning'}, {label:'Van & safety check',done:status.van,nav:'van',hint:'Daily unit inspection'}, ]; const done=tasks.filter(t=>t.done).length; const pct=Math.round((done/4)*100); const ringCol=pct===100?'#16a34a':pct>=50?'#f59e0b':'#ef4444'; const trialDays=profile?.trial_start?Math.floor((new Date()-new Date(profile.trial_start))/86400000):0; const trialLeft=Math.max(0,14-trialDays); const hour=new Date().getHours(); const greeting=hour<12?'Good morning':hour<17?'Good afternoon':'Good evening'; return ( <div className="pt-28 pb-8 px-4"> {/* Hero */} <div className="bg-navy rounded-2xl p-5 mb-4 flex items-center gap-4"> {loading?( <div className="w-16 h-16 flex items-center justify-center"><div className="w-6 h-6 border-2 border-white/20 border-t-white rounded-full animate-spin"/></div> ):( <div className="relative w-16 h-16 flex-shrink-0"> <svg viewBox="0 0 36 36" className="w-16 h-16 -rotate-90"> <circle cx="18" cy="18" r="15.9" fill="none" stroke="rgba(255,255,255,0.1)" strokeWidth="3"/> <circle cx="18" cy="18" r="15.9" fill="none" stroke={ringCol} strokeWidth="3" strokeDasharray={`${pct} ${100-pct}`} strokeLinecap="round"/> </svg> <div className="absolute inset-0 flex items-center justify-center"> <span className="text-white font-black text-sm">{pct}%</span> </div> </div> )} <div className="flex-1 min-w-0"> <p className="text-white/50 text-xs">{greeting},</p> <p className="text-white font-bold text-lg leading-tight">{profile?.name?.split(' ')[0]||'there'} 👋</p> <p className={`text-sm font-semibold mt-1 ${pct===100?'text-green-400':pct>0?'text-amber-400':'text-white/50'}`}> {pct===100?'✓ EHO ready for today':`${done} of 4 checks done`} </p> </div> {trialLeft>0&&<Badge label={`${trialLeft}d left`} color="amber"/>} </div> {/* Today's tasks */} <div className="mb-2"><p className="text-xs font-bold text-gray-400 uppercase tracking-wider px-1 mb-2">Today's Checks</p></div> <Card className="divide-y divide-gray-50 mb-5"> {tasks.map((t,i)=>( <button key={i} onClick={()=>onNav(t.nav)} className="w-full flex items-center gap-3 px-4 py-3.5 active:bg-gray-50 text-left"> <div className={`w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 ${t.done?'bg-green-100':'bg-gray-100'}`}> {t.done?<Icon name="check" size={15} color="#16a34a"/>:<div className="w-2 h-2 rounded-full bg-gray-300"/>} </div> <div className="flex-1 min-w-0"> <p className={`text-sm font-semibold ${t.done?'line-through text-gray-300':'text-gray-800'}`}>{t.label}</p> <p className={`text-xs ${t.done?'text-gray-300':'text-gray-400'}`}>{t.hint}</p> </div> {!t.done&&<Icon name="chevron" size={16} color="#CBD5E1"/>} </button> ))} </Card> {/* Stats */} <div className="mb-2"><p className="text-xs font-bold text-gray-400 uppercase tracking-wider px-1 mb-2">Your Records</p></div> <div className="grid grid-cols-2 gap-3 mb-5"> <Card className="p-4"><p className="text-2xl font-black text-teal">{counts.diaries}</p><p className="text-xs text-gray-400 mt-0.5">Diary entries</p></Card> <Card className="p-4"><p className="text-2xl font-black text-teal">{counts.temps}</p><p className="text-xs text-gray-400 mt-0.5">Temp readings</p></Card> </div> {/* Records shortcut */} <button onClick={()=>onNav('records')} className="w-full bg-navy rounded-2xl p-4 flex items-center gap-3 active:opacity-80"> <div className="w-10 h-10 bg-teal rounded-xl flex items-center justify-center flex-shrink-0"> <Icon name="eho" size={20} color="white"/> </div> <div className="flex-1 text-left"> <p className="text-white font-bold text-sm">Compliance Records</p> <p className="text-white/40 text-xs">Browse history & export EHO pack</p> </div> <Icon name="chevron" size={18} color="rgba(255,255,255,0.3)"/> </button> </div> ); }; // ── DIARY ───────────────────────────────────────────────────────────────────── const DiaryScreen = ({userId,profile}) => { const todayStr=today(); const [tab,setTab]=useState('opening'); const [location,setLocation]=useState(''); const [opening,setOpening]=useState({}); const [closing,setClosing]=useState({}); const [issues,setIssues]=useState(''); const [cleanChecks,setCleanChecks]=useState({}); const [cleanBy,setCleanBy]=useState(profile?.name||''); const [saving,setSaving]=useState(false); const [savedD,setSavedD]=useState(false); const [savedC,setSavedC]=useState(false); const [recent,setRecent]=useState([]); const [loading,setLoading]=useState(true); const [diaryNA,setDiaryNA]=useState(()=>{try{return JSON.parse(localStorage.getItem(`vg_na_diary_${userId}`))||{};}catch{return{};}}); const toggleDiaryNA=key=>{const u={...diaryNA,[key]:!diaryNA[key]};setDiaryNA(u);localStorage.setItem(`vg_na_diary_${userId}`,JSON.stringify(u));}; const [customCleanJobs,setCustomCleanJobs]=useState(()=>{try{return JSON.parse(localStorage.getItem(`vg_ccj_${userId}`))||[];}catch{return[];}}); const [newCleanJob,setNewCleanJob]=useState(''); const addCleanJob=()=>{if(!newCleanJob.trim())return;const job={id:Date.now().toString(),label:newCleanJob.trim()};const u=[...customCleanJobs,job];setCustomCleanJobs(u);localStorage.setItem(`vg_ccj_${userId}`,JSON.stringify(u));setNewCleanJob('');}; const removeCleanJob=id=>{const u=customCleanJobs.filter(j=>j.id!==id);setCustomCleanJobs(u);localStorage.setItem(`vg_ccj_${userId}`,JSON.stringify(u));const nc={...cleanChecks};delete nc[`ccj_${id}`];setCleanChecks(nc);}; const [customOpenJobs,setCustomOpenJobs]=useState(()=>{try{return JSON.parse(localStorage.getItem(`vg_coj_${userId}`))||[];}catch{return[];}}); const [newOpenJob,setNewOpenJob]=useState(''); const addOpenJob=()=>{if(!newOpenJob.trim())return;const job={id:Date.now().toString(),label:newOpenJob.trim()};const u=[...customOpenJobs,job];setCustomOpenJobs(u);localStorage.setItem(`vg_coj_${userId}`,JSON.stringify(u));setNewOpenJob('');}; const removeOpenJob=id=>{const u=customOpenJobs.filter(j=>j.id!==id);setCustomOpenJobs(u);localStorage.setItem(`vg_coj_${userId}`,JSON.stringify(u));const nc={...opening};delete nc[`coj_${id}`];setOpening(nc);}; const [customCloseJobs,setCustomCloseJobs]=useState(()=>{try{return JSON.parse(localStorage.getItem(`vg_cclosej_${userId}`))||[];}catch{return[];}}); const [newCloseJob,setNewCloseJob]=useState(''); const addCloseJob=()=>{if(!newCloseJob.trim())return;const job={id:Date.now().toString(),label:newCloseJob.trim()};const u=[...customCloseJobs,job];setCustomCloseJobs(u);localStorage.setItem(`vg_cclosej_${userId}`,JSON.stringify(u));setNewCloseJob('');}; const removeCloseJob=id=>{const u=customCloseJobs.filter(j=>j.id!==id);setCustomCloseJobs(u);localStorage.setItem(`vg_cclosej_${userId}`,JSON.stringify(u));const nc={...closing};delete nc[`closej_${id}`];setClosing(nc);}; const openingItems=DEFAULT_OPENING; const closingItems=DEFAULT_CLOSING; const cleanItems=DEFAULT_CLEANING; // Default lines the user removed during onboarding (or later). Treated like "not applicable". const rmOpen=readRemoved(userId,'opening'); const rmClose=readRemoved(userId,'closing'); const rmClean=readRemoved(userId,'cleaning'); useEffect(()=>{ const load=async()=>{ const [{data:all},{data:cl}]=await Promise.all([ sb.from('diaries').select('*').eq('user_id',userId).order('date',{ascending:false}).limit(14), sb.from('cleaning_logs').select('*').eq('user_id',userId).eq('date',todayStr).maybeSingle(), ]); const td=(all||[]).find(d=>d.date===todayStr); if(td){setLocation(td.location||'');setOpening(td.opening||{});setClosing(td.closing||{});setIssues(td.issues||'');setSavedD(true);} if(cl){setCleanChecks(cl.checks||{});setCleanBy(cl.saved_by||profile?.name||'');setSavedC(true);} setRecent((all||[]).filter(d=>d.date!==todayStr).slice(0,7)); setLoading(false); }; load(); },[userId]); const saveDiary=async()=>{ setSaving(true); await sb.from('diaries').upsert({user_id:userId,date:todayStr,location,opening,closing,issues},{onConflict:'user_id,date'}); setSavedD(true); setSaving(false); }; const saveClean=async()=>{ setSaving(true); await sb.from('cleaning_logs').upsert({user_id:userId,date:todayStr,checks:cleanChecks,saved_by:cleanBy},{onConflict:'user_id,date'}); setSavedC(true); setSaving(false); }; const saveEndOfDay=async()=>{ setSaving(true); await Promise.all([ sb.from('diaries').upsert({user_id:userId,date:todayStr,location,opening,closing,issues},{onConflict:'user_id,date'}), sb.from('cleaning_logs').upsert({user_id:userId,date:todayStr,checks:cleanChecks,saved_by:cleanBy},{onConflict:'user_id,date'}), ]); setSavedD(true);setSavedC(true);setSaving(false); }; if(loading) return <div className="pt-28"><Spinner full/></div>; const allOpen=openingItems.every((_,i)=>rmOpen.includes(i)||opening[i]||diaryNA['o'+i]); const allClose=closingItems.every((_,i)=>rmClose.includes(i)||closing[i]||diaryNA['c'+i]); const allClean=cleanItems.every((_,i)=>rmClean.includes(i)||cleanChecks[i]||diaryNA['cl'+i]); const tickAllOpen=()=>{const o={...opening};openingItems.forEach((_,i)=>{if(!rmOpen.includes(i))o[i]=true;});customOpenJobs.forEach(j=>{o[`coj_${j.id}`]=true;});setOpening(o);}; const tickAllClose=()=>{const c={...closing};closingItems.forEach((_,i)=>{if(!rmClose.includes(i))c[i]=true;});customCloseJobs.forEach(j=>{c[`closej_${j.id}`]=true;});setClosing(c);}; const tickAllClean=()=>{const c={...cleanChecks};cleanItems.forEach((_,i)=>{if(!rmClean.includes(i))c[i]=true;});customCleanJobs.forEach(j=>{c[`ccj_${j.id}`]=true;});setCleanChecks(c);}; const TickAll=({onClick})=>(<button onClick={onClick} className="text-xs font-bold text-teal active:opacity-60">Tick all</button>); return ( <div className="pt-28 pb-8 px-4"> <Card className="p-4 mb-4"> <div className="flex items-center gap-2 mb-3"> <Icon name="location" size={14} color="#0D7377"/> <span className="text-xs font-bold text-teal uppercase tracking-wide">{fmtDate(todayStr)}</span> {savedD&&<Badge label="Saved" color="green"/>} </div> <Input label="Where are you trading today?" value={location} onChange={setLocation} placeholder="e.g. Borough Market, Stall 12"/> </Card> {/* Tab selector */} <div className="flex rounded-xl bg-gray-100 p-1 mb-4"> {[{k:'opening',l:'Opening'},{k:'closing',l:'End of Day'}].map(t=>( <button key={t.k} onClick={()=>setTab(t.k)} className={`flex-1 py-2.5 rounded-lg text-xs font-bold transition-all ${tab===t.k?'bg-white shadow text-navy':'text-gray-400'}`}> {t.l} </button> ))} </div> {tab==='opening'&&( <Card className="p-4 fade-in"> <div className="flex items-center justify-between mb-4"> <h3 className="font-bold text-navy text-sm">Opening Checks</h3> <div className="flex items-center gap-2">{allOpen?<Badge label="All done" color="green"/>:<TickAll onClick={tickAllOpen}/>}</div> </div> {openingItems.map((item,i)=>rmOpen.includes(i)?null:( <Checkbox key={i} checked={!!opening[i]} onChange={v=>setOpening(p=>({...p,[i]:v}))} label={item} isNA={!!diaryNA['o'+i]} onToggleNA={()=>toggleDiaryNA('o'+i)}/> ))} {customOpenJobs.map(job=>( <div key={job.id} className="flex items-center gap-1"> <div className="flex-1"><Checkbox checked={!!opening[`coj_${job.id}`]} onChange={v=>setOpening(p=>({...p,[`coj_${job.id}`]:v}))} label={job.label} isNA={!!diaryNA[`coj_${job.id}`]} onToggleNA={()=>toggleDiaryNA(`coj_${job.id}`)}/></div> <button onClick={()=>removeOpenJob(job.id)} className="text-gray-300 hover:text-red-400 text-xl leading-none pb-3 flex-shrink-0">×</button> </div> ))} <div className="flex gap-2 mt-3 pt-3 border-t border-gray-100"> <input value={newOpenJob} onChange={e=>setNewOpenJob(e.target.value)} onKeyDown={e=>e.key==='Enter'&&addOpenJob()} placeholder="Add custom item…" className="flex-1 border border-gray-200 rounded-xl px-3 py-2 text-sm bg-gray-50 focus:outline-none focus:border-teal"/> <button onClick={addOpenJob} disabled={!newOpenJob.trim()} className="rounded-xl px-4 py-2 text-sm font-bold text-white disabled:opacity-30" style={{background:'#0D7377'}}>+</button> </div> <div className="mt-4"><Btn onClick={saveDiary} loading={saving} variant={savedD?'ghost':'primary'}>{savedD?'Apply changes':'Save opening checks'}</Btn></div> </Card> )} {tab==='closing'&&( <Card className="p-4 fade-in"> {/* ── Closing Checks ── */} <div className="flex items-center justify-between mb-4"> <h3 className="font-bold text-navy text-sm">Closing Checks</h3> <div className="flex items-center gap-2">{allClose?<Badge label="Done" color="green"/>:<TickAll onClick={tickAllClose}/>}</div> </div> {closingItems.map((item,i)=>rmClose.includes(i)?null:( <Checkbox key={i} checked={!!closing[i]} onChange={v=>setClosing(p=>({...p,[i]:v}))} label={item} isNA={!!diaryNA['c'+i]} onToggleNA={()=>toggleDiaryNA('c'+i)}/> ))} {customCloseJobs.map(job=>( <div key={job.id} className="flex items-center gap-1"> <div className="flex-1"><Checkbox checked={!!closing[`closej_${job.id}`]} onChange={v=>setClosing(p=>({...p,[`closej_${job.id}`]:v}))} label={job.label} isNA={!!diaryNA[`closej_${job.id}`]} onToggleNA={()=>toggleDiaryNA(`closej_${job.id}`)}/></div> <button onClick={()=>removeCloseJob(job.id)} className="text-gray-300 hover:text-red-400 text-xl leading-none pb-3 flex-shrink-0">×</button> </div> ))} <div className="flex gap-2 mt-3 pt-3 border-t border-gray-100"> <input value={newCloseJob} onChange={e=>setNewCloseJob(e.target.value)} onKeyDown={e=>e.key==='Enter'&&addCloseJob()} placeholder="Add custom check…" className="flex-1 border border-gray-200 rounded-xl px-3 py-2 text-sm bg-gray-50 focus:outline-none focus:border-teal"/> <button onClick={addCloseJob} disabled={!newCloseJob.trim()} className="rounded-xl px-4 py-2 text-sm font-bold text-white disabled:opacity-30" style={{background:'#0D7377'}}>+</button> </div> {/* ── Cleaning Schedule ── */} <div className="flex items-center justify-between mt-6 mb-4 pt-5 border-t-2 border-gray-100"> <h3 className="font-bold text-navy text-sm">Cleaning Schedule</h3> <div className="flex items-center gap-2">{allClean?<Badge label="Done" color="green"/>:<TickAll onClick={tickAllClean}/>}</div> </div> {cleanItems.map((item,i)=>rmClean.includes(i)?null:( <Checkbox key={i} checked={!!cleanChecks[i]} onChange={v=>setCleanChecks(p=>({...p,[i]:v}))} label={item} isNA={!!diaryNA['cl'+i]} onToggleNA={()=>toggleDiaryNA('cl'+i)}/> ))} {customCleanJobs.map(job=>( <div key={job.id} className="flex items-center gap-1"> <div className="flex-1"><Checkbox checked={!!cleanChecks[`ccj_${job.id}`]} onChange={v=>setCleanChecks(p=>({...p,[`ccj_${job.id}`]:v}))} label={job.label} isNA={!!diaryNA[`ccj_${job.id}`]} onToggleNA={()=>toggleDiaryNA(`ccj_${job.id}`)}/></div> <button onClick={()=>removeCleanJob(job.id)} className="text-gray-300 hover:text-red-400 text-xl leading-none pb-3 flex-shrink-0">×</button> </div> ))} <div className="flex gap-2 mt-3 pt-3 border-t border-gray-100"> <input value={newCleanJob} onChange={e=>setNewCleanJob(e.target.value)} onKeyDown={e=>e.key==='Enter'&&addCleanJob()} placeholder="Add custom item…" className="flex-1 border border-gray-200 rounded-xl px-3 py-2 text-sm bg-gray-50 focus:outline-none focus:border-teal"/> <button onClick={addCleanJob} disabled={!newCleanJob.trim()} className="rounded-xl px-4 py-2 text-sm font-bold text-white disabled:opacity-30" style={{background:'#0D7377'}}>+</button> </div> {/* ── Notes + sign-off ── */} <div className="mt-5 pt-5 border-t border-gray-100"> <label className="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1.5">Issues / notes (optional)</label> <textarea value={issues} onChange={e=>setIssues(e.target.value)} rows={3} placeholder="Any issues, incidents or actions taken today?" className="w-full border border-gray-200 rounded-xl px-4 py-3 text-sm bg-gray-50 focus:outline-none focus:border-teal resize-none"/> </div> <div className="mt-3"><Input label="Signed off by" value={cleanBy} onChange={setCleanBy} placeholder="Your name"/></div> <Btn onClick={saveEndOfDay} loading={saving} variant={(savedD&&savedC)?'ghost':'primary'}>{(savedD&&savedC)?'Apply changes':'Save end of day'}</Btn> </Card> )} {recent.length>0&&( <div className="mt-6"> <p className="text-xs font-bold text-gray-400 uppercase tracking-wider px-1 mb-3">Recent Entries</p> {recent.map((d,i)=>( <Card key={i} className="p-3.5 mb-2 flex items-center gap-3"> <div className="w-8 h-8 bg-green-100 rounded-xl flex items-center justify-center flex-shrink-0"> <Icon name="check" size={14} color="#16a34a"/> </div> <div className="flex-1"> <p className="text-sm font-bold text-navy">{fmtDate(d.date)}</p> <p className="text-xs text-gray-400 truncate">{d.location||'No location recorded'}</p> </div> <span className="text-xs text-gray-300">{fmtDateShort(d.date)}</span> </Card> ))} </div> )} </div> ); }; // ── TEMPERATURE LOG ─────────────────────────────────────────────────────────── const DEFAULT_APPLIANCES=[ {id:'a1',name:'Fridge 1',type:'cold',th:8,emoji:'🧊'}, {id:'a2',name:'Freezer',type:'cold',th:-18,emoji:'❄️'}, {id:'a3',name:'Hot Hold',type:'hot',th:63,emoji:'🔥'}, ]; const applKey=uid=>`vg_appliances_${uid}`; const loadAppliances=uid=>{try{return JSON.parse(localStorage.getItem(applKey(uid)))||DEFAULT_APPLIANCES;}catch{return DEFAULT_APPLIANCES;}}; const saveAppliances=(uid,list)=>localStorage.setItem(applKey(uid),JSON.stringify(list)); const TempScreen = ({userId}) => { const [appliances,setAppliances]=useState(()=>loadAppliances(userId)); const [temps,setTemps]=useState({}); const [actions,setActions]=useState({}); const [allTemps,setAllTemps]=useState([]); const [saving,setSaving]=useState({}); const [flash,setFlash]=useState({}); const [editMode,setEditMode]=useState(false); const [showAdd,setShowAdd]=useState(false); const [newName,setNewName]=useState(''); const [newType,setNewType]=useState('cold'); const [newTh,setNewTh]=useState(''); const [loading,setLoading]=useState(true); const todayStr=today(); const loadTemps=async()=>{const{data}=await sb.from('temp_logs').select('*').eq('user_id',userId).order('created_at',{ascending:false}).limit(60);setAllTemps(data||[]);setLoading(false);}; const deleteTemp=async(id)=>{const tok=_getS()?.access_token;await fetch(`${SUPA_URL}/rest/v1/temp_logs?id=eq.${id}`,{method:'DELETE',headers:_h(tok)});await loadTemps();}; useEffect(()=>{loadTemps();},[userId]); const todayTemps=allTemps.filter(t=>t.date===todayStr); const logTemp=async(appl)=>{ const tempVal=temps[appl.id]; if(!tempVal) return; const tempNum=parseFloat(tempVal); const isPass=appl.type==='hot'?tempNum>=appl.th:tempNum<=appl.th; setSaving(p=>({...p,[appl.id]:true})); await sb.from('temp_logs').insert({user_id:userId,date:todayStr,time:nowTime(),unit:appl.name,temp:tempNum,type:appl.type,threshold:appl.th,pass:isPass,action:actions[appl.id]||null}); await loadTemps(); setTemps(p=>({...p,[appl.id]:''})); setActions(p=>({...p,[appl.id]:''})); setFlash(p=>({...p,[appl.id]:true})); setTimeout(()=>setFlash(p=>({...p,[appl.id]:false})),2000); setSaving(p=>({...p,[appl.id]:false})); }; const removeAppliance=id=>{const u=appliances.filter(a=>a.id!==id);setAppliances(u);saveAppliances(userId,u);}; const addAppliance=()=>{ if(!newName) return; const th=newTh?parseFloat(newTh):(newType==='cold'?8:63); const emoji=newType==='cold'?'🧊':'🔥'; const u=[...appliances,{id:Date.now().toString(),name:newName,type:newType,th,emoji}]; setAppliances(u); saveAppliances(userId,u); setNewName(''); setNewTh(''); setShowAdd(false); }; if(loading) return <div className="pt-28"><Spinner full/></div>; return ( <div className="pt-28 pb-8 px-4"> {/* Status banner */} <div className={`rounded-2xl p-4 mb-4 flex items-center gap-3 border ${todayTemps.length>=2?'bg-green-50 border-green-100':'bg-amber-50 border-amber-100'}`}> <div className={`w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0 ${todayTemps.length>=2?'bg-green-100':'bg-amber-100'}`}> <span className={`text-lg font-black ${todayTemps.length>=2?'text-green-700':'text-amber-700'}`}>{todayTemps.length}</span> </div> <div className="flex-1"> <p className={`font-bold text-sm ${todayTemps.length>=2?'text-green-700':'text-amber-800'}`}> {todayTemps.length>=2?'Daily requirement met ✓':`${todayTemps.length} of 2 readings done today`} </p> <p className={`text-xs ${todayTemps.length>=2?'text-green-500':'text-amber-600'}`}>Need at least 2 readings per day</p> </div> </div> {/* Appliance header + manage button */} <div className="flex items-center justify-between mb-3"> <p className="text-xs font-bold text-gray-400 uppercase tracking-wider px-1">Log Temperatures</p> <button onClick={()=>{setEditMode(p=>!p);setShowAdd(false);setNewName('');setNewTh('');}} className={`flex items-center gap-1.5 px-4 py-2 rounded-xl text-sm font-bold transition-all ${editMode?'bg-navy text-white':'bg-teal text-white'}`}> {editMode?( <><span className="text-base leading-none">✓</span> Done</> ):( <><Icon name="plus" size={14} color="white"/> Add / Remove</> )} </button> </div> {appliances.map(appl=>{ const tempVal=temps[appl.id]||''; const tempNum=parseFloat(tempVal); const isPass=tempVal?(appl.type==='hot'?tempNum>=appl.th:tempNum<=appl.th):null; const flashed=flash[appl.id]; return ( <Card key={appl.id} className="p-4 mb-3"> <div className="flex items-center gap-2 mb-3"> <span className="text-xl">{appl.emoji}</span> <div className="flex-1"> <p className="font-bold text-navy text-sm">{appl.name}</p> <p className="text-xs text-gray-400">{appl.type==='hot'?`Must be ≥${appl.th}°C`:`Must be ≤${appl.th}°C`}</p> </div> {isPass!==null&&( <span className={`text-xs font-bold px-2 py-1 rounded-lg ${isPass?'bg-green-100 text-green-700':'bg-red-100 text-red-600'}`}>{isPass?'PASS':'FAIL'}</span> )} {editMode&&( <button onClick={()=>removeAppliance(appl.id)} className="w-7 h-7 bg-red-100 rounded-lg flex items-center justify-center ml-1"> <span className="text-red-500 font-black text-base leading-none">−</span> </button> )} </div> {flashed?<OkMsg msg="✓ Reading saved!"/>:( <> <div className="flex gap-2"> <div className="relative flex-1"> <input type="number" value={tempVal} onChange={e=>setTemps(p=>({...p,[appl.id]:e.target.value}))} placeholder="0" className="w-full border border-gray-200 rounded-xl px-4 py-3 text-2xl font-black bg-gray-50 focus:outline-none focus:border-teal pr-10"/> <span className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 font-bold text-sm">°C</span> </div> <button onClick={()=>logTemp(appl)} disabled={!tempVal||saving[appl.id]} className={`px-6 rounded-xl font-bold text-sm transition-all flex items-center gap-1 ${tempVal?'bg-teal text-white':'bg-gray-100 text-gray-400'}`}> {saving[appl.id]?<div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin"/>:'Log'} </button> </div> {tempVal&&!isPass&&( <div className="mt-2"> <textarea value={actions[appl.id]||''} onChange={e=>setActions(p=>({...p,[appl.id]:e.target.value}))} rows={2} placeholder="FAIL — note corrective action taken..." className="w-full border border-red-200 rounded-xl px-4 py-2 text-sm bg-red-50 focus:outline-none resize-none mt-1"/> </div> )} </> )} </Card> ); })} {/* Inline add form — shown in edit mode */} {editMode&&( <Card className="p-4 mb-3 border-2 border-teal/30 fade-in"> <p className="text-xs font-bold text-teal uppercase tracking-wide mb-3">Add New Appliance</p> <div className="grid grid-cols-3 gap-2 mb-3"> {[{label:'Fridge',type:'cold',th:8,emoji:'🧊'},{label:'Freezer',type:'cold',th:-18,emoji:'❄️'},{label:'Hot Hold',type:'hot',th:63,emoji:'🔥'}].map(p=>( <button key={p.label} onClick={()=>{setNewName(p.label);setNewType(p.type);setNewTh(String(p.th));}} className={`py-2.5 rounded-xl border-2 text-xs font-semibold text-center transition-all ${newName===p.label?'bg-teal border-teal text-white':'bg-gray-50 border-gray-100 text-gray-600'}`}> <div className="text-lg">{p.emoji}</div><div>{p.label}</div> </button> ))} </div> <Input label="Name" value={newName} onChange={setNewName} placeholder="e.g. Fridge 2, Prep Fridge"/> <div className="grid grid-cols-2 gap-3 mb-3"> <div> <label className="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1.5">Type</label> <div className="flex gap-2"> {[{v:'cold',l:'Cold'},{v:'hot',l:'Hot'}].map(o=>( <button key={o.v} onClick={()=>setNewType(o.v)} className={`flex-1 py-2.5 rounded-xl text-sm font-semibold border-2 transition-all ${newType===o.v?'bg-teal border-teal text-white':'bg-gray-50 border-gray-100 text-gray-600'}`}>{o.l}</button> ))} </div> </div> <Input label="Safe limit (°C)" value={newTh} onChange={setNewTh} type="number" placeholder={newType==='cold'?'8':'63'}/> </div> <Btn onClick={addAppliance} disabled={!newName} size="sm">+ Add appliance</Btn> </Card> )} {/* Today's readings */} {todayTemps.length>0&&( <> <p className="text-xs font-bold text-gray-400 uppercase tracking-wider px-1 mb-3">Today's Readings</p> {todayTemps.map((t,i)=>( <Card key={i} className="p-3.5 mb-2 flex items-center gap-3"> <div className={`w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0 ${t.pass?'bg-green-100':'bg-red-100'}`}> <Icon name={t.pass?'check':'warn'} size={14} color={t.pass?'#16a34a':'#dc2626'}/> </div> <div className="flex-1"> <p className="text-sm font-bold text-navy">{t.unit}</p> <p className="text-xs text-gray-400">{t.time} · {t.temp}°C</p> </div> <span className={`text-xs font-bold px-2 py-1 rounded-lg ${t.pass?'bg-green-100 text-green-700':'bg-red-100 text-red-600'}`}>{t.pass?'PASS':'FAIL'}</span> <button onClick={()=>{if(window.confirm('Delete this reading?'))deleteTemp(t.id);}} className="w-7 h-7 rounded-lg bg-gray-100 flex items-center justify-center active:bg-red-100 flex-shrink-0 ml-1" title="Delete reading"> <span className="text-gray-400 text-sm font-bold leading-none">×</span> </button> </Card> ))} </> )} {allTemps.filter(t=>t.date!==todayStr).length>0&&( <> <p className="text-xs font-bold text-gray-400 uppercase tracking-wider px-1 mt-5 mb-3">Previous</p> {allTemps.filter(t=>t.date!==todayStr).slice(0,10).map((t,i)=>( <Card key={i} className="p-3 mb-2 flex items-center gap-3"> <div className={`w-6 h-6 rounded-lg flex items-center justify-center flex-shrink-0 ${t.pass?'bg-green-100':'bg-red-100'}`}> <Icon name={t.pass?'check':'warn'} size={12} color={t.pass?'#16a34a':'#dc2626'}/> </div> <div className="flex-1 min-w-0"> <p className="text-xs font-semibold text-navy">{t.unit} · {t.temp}°C · {t.time}</p> <p className="text-xs text-gray-400">{fmtDate(t.date)}</p> </div> <span className={`text-xs font-bold ${t.pass?'text-green-600':'text-red-500'}`}>{t.pass?'PASS':'FAIL'}</span> </Card> ))} </> )} </div> ); }; // ── VAN & SAFETY ────────────────────────────────────────────────────────────── const VanScreen = ({userId,profile}) => { const [tab,setTab]=useState('vehicle'); const showLPG=profile?.lpg_enabled!==false; const showWater=profile?.water_enabled===true; const todayStr=today(); const [saving,setSaving]=useState(false); const [vChecks,setVChecks]=useState({}); const [vBy,setVBy]=useState(profile?.name||''); const [vSaved,setVSaved]=useState(false); const [lpgRecs,setLpgRecs]=useState([]); const [lpg,setLpg]=useState({hose:false,reg:false,flame:false,leak:false}); const [lpgNotes,setLpgNotes]=useState(''); const [lpgFlash,setLpgFlash]=useState(false); const [waterRecs,setWaterRecs]=useState([]); const [water,setWater]=useState({filled:false,cleaned:false,san:false}); const [waterFlash,setWaterFlash]=useState(false); const [pitches,setPitches]=useState([]); const [pitchName,setPitchName]=useState(''); const [pitchAddr,setPitchAddr]=useState(''); const [pitchFlash,setPitchFlash]=useState(false); const [loading,setLoading]=useState(true); const [vanNA,setVanNA]=useState(()=>{try{return JSON.parse(localStorage.getItem(`vg_na_van_${userId}`))||{};}catch{return{};}}); const toggleVanNA=key=>{const u={...vanNA,[key]:!vanNA[key]};setVanNA(u);localStorage.setItem(`vg_na_van_${userId}`,JSON.stringify(u));}; const [customVanJobs,setCustomVanJobs]=useState(()=>{try{return JSON.parse(localStorage.getItem(`vg_cvj_${userId}`))||[];}catch{return[];}}); const [newVanJob,setNewVanJob]=useState(''); const addVanJob=()=>{if(!newVanJob.trim())return;const job={id:Date.now().toString(),label:newVanJob.trim()};const u=[...customVanJobs,job];setCustomVanJobs(u);localStorage.setItem(`vg_cvj_${userId}`,JSON.stringify(u));setNewVanJob('');}; const removeVanJob=id=>{const u=customVanJobs.filter(j=>j.id!==id);setCustomVanJobs(u);localStorage.setItem(`vg_cvj_${userId}`,JSON.stringify(u));const nc={...vChecks};delete nc[`cvj_${id}`];setVChecks(nc);}; const [customLpgJobs,setCustomLpgJobs]=useState(()=>{try{return JSON.parse(localStorage.getItem(`vg_clpgj_${userId}`))||[];}catch{return[];}}); const [customLpgChecks,setCustomLpgChecks]=useState(()=>{try{return JSON.parse(localStorage.getItem(`vg_clpgchecks_${userId}`))||{};}catch{return{};}}); const [newLpgJob,setNewLpgJob]=useState(''); const addLpgJob=()=>{if(!newLpgJob.trim())return;const job={id:Date.now().toString(),label:newLpgJob.trim()};const u=[...customLpgJobs,job];setCustomLpgJobs(u);localStorage.setItem(`vg_clpgj_${userId}`,JSON.stringify(u));setNewLpgJob('');}; const removeLpgJob=id=>{const u=customLpgJobs.filter(j=>j.id!==id);setCustomLpgJobs(u);localStorage.setItem(`vg_clpgj_${userId}`,JSON.stringify(u));const nc={...customLpgChecks};delete nc[id];setCustomLpgChecks(nc);localStorage.setItem(`vg_clpgchecks_${userId}`,JSON.stringify(nc));}; const toggleLpgCheck=(id,v)=>{const nc={...customLpgChecks,[id]:v};setCustomLpgChecks(nc);localStorage.setItem(`vg_clpgchecks_${userId}`,JSON.stringify(nc));}; const [customWaterJobs,setCustomWaterJobs]=useState(()=>{try{return JSON.parse(localStorage.getItem(`vg_cwj_${userId}`))||[];}catch{return[];}}); const [customWaterChecks,setCustomWaterChecks]=useState(()=>{try{return JSON.parse(localStorage.getItem(`vg_cwchecks_${userId}`))||{};}catch{return{};}}); const [newWaterJob,setNewWaterJob]=useState(''); const addWaterJob=()=>{if(!newWaterJob.trim())return;const job={id:Date.now().toString(),label:newWaterJob.trim()};const u=[...customWaterJobs,job];setCustomWaterJobs(u);localStorage.setItem(`vg_cwj_${userId}`,JSON.stringify(u));setNewWaterJob('');}; const removeWaterJob=id=>{const u=customWaterJobs.filter(j=>j.id!==id);setCustomWaterJobs(u);localStorage.setItem(`vg_cwj_${userId}`,JSON.stringify(u));const nc={...customWaterChecks};delete nc[id];setCustomWaterChecks(nc);localStorage.setItem(`vg_cwchecks_${userId}`,JSON.stringify(nc));}; const toggleWaterCheck=(id,v)=>{const nc={...customWaterChecks,[id]:v};setCustomWaterChecks(nc);localStorage.setItem(`vg_cwchecks_${userId}`,JSON.stringify(nc));}; const vehicleItems=['Unit is clean and ready for service',showLPG?'Gas connections checked — no leaks':'Electrical connections checked','Fire extinguisher present and accessible','First aid kit stocked and accessible','Hand washing station set up and stocked','Food at correct temperatures','All equipment safely stored','Waste disposal set up']; useEffect(()=>{ const load=async()=>{ const [{data:vc},{data:lR},{data:wR},{data:pR}]=await Promise.all([ sb.from('van_checks').select('*').eq('user_id',userId).eq('date',todayStr).maybeSingle(), sb.from('lpg_logs').select('*').eq('user_id',userId).order('created_at',{ascending:false}).limit(5), sb.from('water_logs').select('*').eq('user_id',userId).order('created_at',{ascending:false}).limit(3), sb.from('pitch_logs').select('*').eq('user_id',userId).order('created_at',{ascending:false}).limit(20), ]); if(vc){setVChecks(vc.checks||{});setVBy(vc.signed_by||profile?.name||'');setVSaved(true);} setLpgRecs(lR||[]); setWaterRecs(wR||[]); setPitches(pR||[]); setLoading(false); }; load(); },[userId]); const saveVehicle=async()=>{setSaving(true);await sb.from('van_checks').upsert({user_id:userId,date:todayStr,checks:vChecks,signed_by:vBy},{onConflict:'user_id,date'});setVSaved(true);setSaving(false);}; const saveLPG=async()=>{ if(!Object.values(lpg).every(Boolean)) return; setSaving(true); await sb.from('lpg_logs').insert({user_id:userId,date:todayStr,...lpg,notes:lpgNotes}); const{data}=await sb.from('lpg_logs').select('*').eq('user_id',userId).order('created_at',{ascending:false}).limit(5); setLpgRecs(data||[]); setLpgFlash(true); setTimeout(()=>setLpgFlash(false),2000); setSaving(false); }; const saveWater=async()=>{ setSaving(true); await sb.from('water_logs').insert({user_id:userId,date:todayStr,...water}); const{data}=await sb.from('water_logs').select('*').eq('user_id',userId).order('created_at',{ascending:false}).limit(3); setWaterRecs(data||[]); setWaterFlash(true); setTimeout(()=>setWaterFlash(false),2000); setSaving(false); }; const savePitch=async()=>{ if(!pitchName) return; setSaving(true); await sb.from('pitch_logs').insert({user_id:userId,date:todayStr,name:pitchName,address:pitchAddr}); const{data}=await sb.from('pitch_logs').select('*').eq('user_id',userId).order('created_at',{ascending:false}).limit(20); setPitches(data||[]); setPitchFlash(true); setTimeout(()=>setPitchFlash(false),2000); setPitchName(''); setPitchAddr(''); setSaving(false); }; const lastLPG=lpgRecs[0]; const lpgDays=lastLPG?Math.floor((new Date()-new Date(lastLPG.created_at))/86400000):null; const lpgDue=!lastLPG||lpgDays>30; const tabs=[{k:'vehicle',l:'Unit'},{k:'lpg',l:'LPG'},{k:'water',l:'Water'},{k:'pitch',l:'Pitch'}].filter(t=>(t.k!=='lpg'||showLPG)&&(t.k!=='water'||showWater)); if(loading) return <div className="pt-28"><Spinner full/></div>; return ( <div className="pt-28 pb-8 px-4"> <div className={`flex rounded-xl bg-gray-100 p-1 mb-4`}> {tabs.map(t=>( <button key={t.k} onClick={()=>setTab(t.k)} className={`flex-1 py-2.5 rounded-lg text-xs font-bold transition-all ${tab===t.k?'bg-white shadow text-navy':'text-gray-400'}`}> {t.l} </button> ))} </div> {tab==='vehicle'&&( <Card className="p-4 fade-in"> <div className="flex items-center justify-between mb-4"> <h3 className="font-bold text-navy text-sm">Daily Unit Check</h3> <button onClick={()=>{const c={...vChecks};vehicleItems.forEach((_,i)=>{c[i]=true;});customVanJobs.forEach(j=>{c[`cvj_${j.id}`]=true;});setVChecks(c);}} className="text-xs font-bold text-teal active:opacity-60">Tick all</button> </div> {vehicleItems.map((item,i)=>( <Checkbox key={i} checked={!!vChecks[i]} onChange={v=>setVChecks(p=>({...p,[i]:v}))} label={item} isNA={!!vanNA['v'+i]} onToggleNA={()=>toggleVanNA('v'+i)}/> ))} {customVanJobs.map(job=>( <div key={job.id} className="flex items-center gap-1"> <div className="flex-1"><Checkbox checked={!!vChecks[`cvj_${job.id}`]} onChange={v=>setVChecks(p=>({...p,[`cvj_${job.id}`]:v}))} label={job.label} isNA={!!vanNA[`cvj_${job.id}`]} onToggleNA={()=>toggleVanNA(`cvj_${job.id}`)}/></div> <button onClick={()=>removeVanJob(job.id)} className="text-gray-300 hover:text-red-400 text-xl leading-none pb-3 flex-shrink-0">×</button> </div> ))} <div className="flex gap-2 mt-3 pt-3 border-t border-gray-100"> <input value={newVanJob} onChange={e=>setNewVanJob(e.target.value)} onKeyDown={e=>e.key==='Enter'&&addVanJob()} placeholder="Add custom check…" className="flex-1 border border-gray-200 rounded-xl px-3 py-2 text-sm bg-gray-50 focus:outline-none focus:border-teal"/> <button onClick={addVanJob} disabled={!newVanJob.trim()} className="rounded-xl px-4 py-2 text-sm font-bold text-white disabled:opacity-30" style={{background:'#0D7377'}}>+</button> </div> <div className="mt-4"><Input label="Checked by" value={vBy} onChange={setVBy} placeholder="Your name"/></div> <Btn onClick={saveVehicle} loading={saving} variant={vSaved?'ghost':'primary'}>{vSaved?'Apply changes':'Save unit check'}</Btn> </Card> )} {tab==='lpg'&&showLPG&&( <div className="fade-in"> <div className={`rounded-2xl p-4 mb-4 flex items-start gap-3 border ${lpgDue?'bg-amber-50 border-amber-200':'bg-green-50 border-green-100'}`}> <Icon name={lpgDue?'warn':'check'} size={18} color={lpgDue?'#d97706':'#16a34a'}/> <div> <p className={`font-bold text-sm ${lpgDue?'text-amber-800':'text-green-700'}`}> {!lastLPG?'No LPG check on record':lpgDue?`Overdue — last checked ${lpgDays} days ago`:`Checked ${lpgDays}d ago — next in ${30-lpgDays}d`} </p> <p className="text-xs text-gray-500 mt-0.5">Monthly LPG checks are required</p> </div> </div> <Card className="p-4 mb-3"> <h3 className="font-bold text-navy text-sm mb-4">LPG Safety Inspection</h3> <Checkbox checked={lpg.hose} onChange={v=>setLpg(p=>({...p,hose:v}))} label="Gas hose in good condition — no cracks or damage" isNA={!!vanNA['lpg_hose']} onToggleNA={()=>toggleVanNA('lpg_hose')}/> <Checkbox checked={lpg.reg} onChange={v=>setLpg(p=>({...p,reg:v}))} label="Regulator secure and undamaged" isNA={!!vanNA['lpg_reg']} onToggleNA={()=>toggleVanNA('lpg_reg')}/> <Checkbox checked={lpg.flame} onChange={v=>setLpg(p=>({...p,flame:v}))} label="Flame supervision devices working correctly" isNA={!!vanNA['lpg_flame']} onToggleNA={()=>toggleVanNA('lpg_flame')}/> <Checkbox checked={lpg.leak} onChange={v=>setLpg(p=>({...p,leak:v}))} label="No gas smell or leaks detected" isNA={!!vanNA['lpg_leak']} onToggleNA={()=>toggleVanNA('lpg_leak')}/> {customLpgJobs.map(job=>( <div key={job.id} className="flex items-center gap-1"> <div className="flex-1"><Checkbox checked={!!customLpgChecks[job.id]} onChange={v=>toggleLpgCheck(job.id,v)} label={job.label} isNA={!!vanNA[`lpgj_${job.id}`]} onToggleNA={()=>toggleVanNA(`lpgj_${job.id}`)}/></div> <button onClick={()=>removeLpgJob(job.id)} className="text-gray-300 hover:text-red-400 text-xl leading-none pb-3 flex-shrink-0">×</button> </div> ))} <div className="flex gap-2 mt-2 pt-3 border-t border-gray-100 mb-2"> <input value={newLpgJob} onChange={e=>setNewLpgJob(e.target.value)} onKeyDown={e=>e.key==='Enter'&&addLpgJob()} placeholder="Add custom check…" className="flex-1 border border-gray-200 rounded-xl px-3 py-2 text-sm bg-gray-50 focus:outline-none focus:border-teal"/> <button onClick={addLpgJob} disabled={!newLpgJob.trim()} className="rounded-xl px-4 py-2 text-sm font-bold text-white disabled:opacity-30" style={{background:'#0D7377'}}>+</button> </div> <div className="mt-3 mb-3"> <label className="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1.5">Notes (optional)</label> <textarea value={lpgNotes} onChange={e=>setLpgNotes(e.target.value)} rows={2} className="w-full border border-gray-200 rounded-xl px-4 py-3 text-sm bg-gray-50 focus:outline-none resize-none"/> </div> {lpgFlash?<OkMsg msg="✓ LPG check recorded!"/>:<Btn onClick={saveLPG} loading={saving} disabled={!Object.values(lpg).every(Boolean)}>Save LPG Check</Btn>} </Card> {lpgRecs.slice(0,3).map((r,i)=>( <Card key={i} className="p-3 mb-2 flex items-center gap-3"> <div className="w-8 h-8 bg-green-100 rounded-xl flex items-center justify-center"><Icon name="fire" size={14} color="#16a34a"/></div> <div><p className="text-sm font-bold text-navy">{fmtDate(r.date)}</p><p className="text-xs text-green-600">All checks passed</p></div> </Card> ))} </div> )} {tab==='water'&&( <Card className="p-4 fade-in"> <h3 className="font-bold text-navy text-sm mb-1">Water Tank Log</h3> {waterRecs[0]&&<p className="text-xs text-teal font-semibold mb-3">Last logged: {fmtDate(waterRecs[0].date)}</p>} <p className="text-xs text-gray-400 mb-4">Record potable water management</p> <Checkbox checked={water.filled} onChange={v=>setWater(p=>({...p,filled:v}))} label="Fresh water tank filled with potable water" isNA={!!vanNA['w_filled']} onToggleNA={()=>toggleVanNA('w_filled')}/> <Checkbox checked={water.cleaned} onChange={v=>setWater(p=>({...p,cleaned:v}))} label="Tank and pipes cleaned" isNA={!!vanNA['w_cleaned']} onToggleNA={()=>toggleVanNA('w_cleaned')}/> <Checkbox checked={water.san} onChange={v=>setWater(p=>({...p,san:v}))} label="Tank sanitised with appropriate solution" isNA={!!vanNA['w_san']} onToggleNA={()=>toggleVanNA('w_san')}/> {customWaterJobs.map(job=>( <div key={job.id} className="flex items-center gap-1"> <div className="flex-1"><Checkbox checked={!!customWaterChecks[job.id]} onChange={v=>toggleWaterCheck(job.id,v)} label={job.label} isNA={!!vanNA[`wj_${job.id}`]} onToggleNA={()=>toggleVanNA(`wj_${job.id}`)}/></div> <button onClick={()=>removeWaterJob(job.id)} className="text-gray-300 hover:text-red-400 text-xl leading-none pb-3 flex-shrink-0">×</button> </div> ))} <div className="flex gap-2 mt-3 pt-3 border-t border-gray-100"> <input value={newWaterJob} onChange={e=>setNewWaterJob(e.target.value)} onKeyDown={e=>e.key==='Enter'&&addWaterJob()} placeholder="Add custom check…" className="flex-1 border border-gray-200 rounded-xl px-3 py-2 text-sm bg-gray-50 focus:outline-none focus:border-teal"/> <button onClick={addWaterJob} disabled={!newWaterJob.trim()} className="rounded-xl px-4 py-2 text-sm font-bold text-white disabled:opacity-30" style={{background:'#0D7377'}}>+</button> </div> <div className="mt-4">{waterFlash?<OkMsg msg="✓ Water log saved!"/>:<Btn onClick={saveWater} loading={saving}>Save Water Log</Btn>}</div> </Card> )} {tab==='pitch'&&( <div className="fade-in"> <Card className="p-4 mb-4"> <h3 className="font-bold text-navy text-sm mb-4">Log Today's Pitch</h3> <Input label="Event / Market name" value={pitchName} onChange={setPitchName} placeholder="e.g. Borough Market" required/> <Input label="Address" value={pitchAddr} onChange={setPitchAddr} placeholder="e.g. Southwark, London SE1"/> {pitchFlash?<OkMsg msg="✓ Pitch logged!"/>:<Btn onClick={savePitch} loading={saving} disabled={!pitchName}>Log pitch</Btn>} </Card> {pitches.length>0&&<> <p className="text-xs font-bold text-gray-400 uppercase tracking-wider px-1 mb-3">Pitch History</p> {pitches.map((r,i)=>( <Card key={i} className="p-3.5 mb-2 flex items-center gap-3"> <div className="w-8 h-8 bg-teal-light rounded-xl flex items-center justify-center flex-shrink-0"><Icon name="location" size={14} color="#0D7377"/></div> <div className="flex-1 min-w-0"> <p className="text-sm font-bold text-navy truncate">{r.name}</p> <p className="text-xs text-gray-400">{fmtDate(r.date)}{r.address?` · ${r.address}`:''}</p> </div> </Card> ))} </>} {!pitches.length&&<p className="text-sm text-gray-400 text-center py-6">No pitches logged yet</p>} </div> )} </div> ); }; // ── EHO PACK ────────────────────────────────────────────────────────────────── const RecordsScreen = ({userId,profile}) => { const [period,setPeriod]=useState('week'); const [logType,setLogType]=useState('temps'); const [records,setRecords]=useState([]); const [counts,setCounts]=useState({}); const [passRate,setPassRate]=useState(0); const [todayPct,setTodayPct]=useState(0); const [loading,setLoading]=useState(true); const todayStr=today(); const getCutoff=(p)=>{ if(p==='today') return todayStr; if(p==='week') return new Date(Date.now()-7*864e5).toISOString().slice(0,10); if(p==='month') return new Date(Date.now()-30*864e5).toISOString().slice(0,10); return null; }; useEffect(()=>{ let ok=true; const load=async()=>{ const cs=getCutoff(period); const ar=(q)=>period==='today'?q.eq('date',cs):cs?q.gte('date',cs):q; const mq=(t)=>ar(sb.from(t).select('*',{count:'exact',head:true}).eq('user_id',userId)); const [dC,tC,cC,vC,lC,wC,pC,allT,tD,tT,tCl,tV]=await Promise.all([ mq('diaries'),mq('temp_logs'),mq('cleaning_logs'),mq('van_checks'), mq('lpg_logs'),mq('water_logs'),mq('pitch_logs'), sb.from('temp_logs').select('pass').eq('user_id',userId), sb.from('diaries').select('id').eq('user_id',userId).eq('date',todayStr), sb.from('temp_logs').select('id').eq('user_id',userId).eq('date',todayStr), sb.from('cleaning_logs').select('id').eq('user_id',userId).eq('date',todayStr), sb.from('van_checks').select('id').eq('user_id',userId).eq('date',todayStr), ]); if(!ok) return; setCounts({diary:dC.count||0,temp:tC.count||0,clean:cC.count||0,van:vC.count||0,lpg:lC.count||0,water:wC.count||0,pitch:pC.count||0}); const passing=(allT.data||[]).filter(t=>t.pass).length; setPassRate(allT.data?.length?Math.round((passing/allT.data.length)*100):0); const done=[!!(tD.data?.length),!!(tT.data?.length>=2),!!(tCl.data?.length),!!(tV.data?.length)].filter(Boolean).length; setTodayPct(Math.round((done/4)*100)); }; load(); return()=>{ok=false;}; },[userId,period]); useEffect(()=>{ let ok=true; const load=async()=>{ setLoading(true); setRecords([]); const cs=getCutoff(period); const tableMap={temps:'temp_logs',diary:'diaries',cleaning:'cleaning_logs',equipment:'van_checks',lpg:'lpg_logs',water:'water_logs',pitches:'pitch_logs'}; const table=tableMap[logType]; let q=sb.from(table).select('*').eq('user_id',userId).order('date',{ascending:false}).order('created_at',{ascending:false}).limit(100); if(period==='today') q=q.eq('date',cs); else if(cs) q=q.gte('date',cs); const{data}=await q; if(!ok) return; setRecords(data||[]); setLoading(false); }; load(); return()=>{ok=false;}; },[userId,logType,period]); const total=Object.values(counts).reduce((a,b)=>a+b,0); const exportPack=async()=>{ const w=window.open('','_blank'); if(!w){alert('Pop-ups are blocked. Please allow pop-ups for this site and try again.');return;} w.document.write('<html><head><title>VanGuard</title></head><body style="font-family:Arial,sans-serif;display:flex;align-items:center;justify-content:center;height:100vh;margin:0;background:#1A2744;color:white;font-size:18px;font-weight:bold">Loading your records...</body></html>'); w.document.close(); const cs=getCutoff(period); const ar=(q)=>period==='today'?q.eq('date',cs):cs?q.gte('date',cs):q; const mq=(t)=>ar(sb.from(t).select('*').eq('user_id',userId).order('date',{ascending:false})); const [{data:diaries},{data:temps},{data:cleans},{data:vans},{data:lpg},{data:waters},{data:pitches}]=await Promise.all([ mq('diaries'),mq('temp_logs'),mq('cleaning_logs'),mq('van_checks'),mq('lpg_logs'),mq('water_logs'),mq('pitch_logs'), ]); const pLabel={today:'Today',week:'Last 7 days',month:'Last 30 days',all:'All time'}[period]; const token=_getS()?.access_token||''; const biz=profile?.business_name||'VanGuard'; const subject='Food Safety Records — '+biz+' ('+pLabel+')'; const style=`*{box-sizing:border-box}body{font-family:Arial,Helvetica,sans-serif;margin:0;color:#111;background:#eef1f4} .toolbar{position:sticky;top:0;z-index:5;background:#fff;border-bottom:1px solid #e5e7eb;padding:12px 16px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;box-shadow:0 1px 4px rgba(0,0,0,0.06)} .btn{border:1px solid #e5e7eb;background:#fff;color:#1A2744;padding:11px 18px;border-radius:9px;font-size:14px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:7px} .btn:hover{background:#f6f8fa}.btn.primary{background:#0D7377;border-color:#0D7377;color:#fff}.btn.primary:hover{background:#0a5f63} .btn.close{margin-left:auto;color:#6b7280} .hint{max-width:820px;margin:10px auto 0;padding:0 22px;color:#94a3b8;font-size:12px} #report{max-width:820px;margin:16px auto 40px;background:#fff;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden} .hdr{background:#1A2744;color:#fff;padding:22px 28px;display:flex;align-items:center;gap:14px} .hdr img{width:46px;height:46px;border-radius:11px} .hdr .t{font-size:21px;font-weight:800;line-height:1.1}.hdr .s{font-size:11px;color:#9fb3c8;letter-spacing:1.5px;text-transform:uppercase;margin-top:4px} .meta{padding:16px 28px;background:#F8FAFC;border-bottom:1px solid #eef1f4;color:#475569;font-size:13px;line-height:1.8} .bd{padding:20px 28px 8px} h2{color:#0D7377;margin:24px 0 6px;font-size:15px} table{width:100%;border-collapse:collapse;margin-top:6px;font-size:13px} th{background:#F1F5F9;color:#334155;padding:9px 10px;text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:0.4px} td{padding:8px 10px;border-bottom:1px solid #eef1f4}tr:nth-child(even) td{background:#fafbfc} .pass{color:#16a34a;font-weight:bold}.fail{color:#dc2626;font-weight:bold} .foot{padding:8px 28px 24px;color:#94a3b8;font-size:11px} @media print{.toolbar,.hint{display:none!important}body{background:#fff}#report{border:none;margin:0;max-width:100%;border-radius:0}}`; const reportInner=`<div class="hdr"><img src="https://vanguardapp.co.uk/icon-192.png" alt="VanGuard"/><div><div class="t">Food Safety Records</div><div class="s">VanGuard · vanguardapp.co.uk</div></div></div> <div class="meta"><strong>Business:</strong> ${biz} | <strong>Operator:</strong> ${profile?.name||'—'} | <strong>Authority:</strong> ${profile?.authority||'—'}<br> <strong>Period:</strong> ${pLabel} | <strong>Total records:</strong> ${total} | <strong>Temp pass rate:</strong> ${passRate}% | <strong>Exported:</strong> ${new Date().toLocaleString('en-GB')}</div> <div class="bd"> ${diaries?.length?`<h2>Daily Diary (${diaries.length} entries)</h2><table><tr><th>Date</th><th>Location</th><th>Opening</th><th>Closing</th><th>Issues</th></tr>${diaries.map(d=>`<tr><td>${fmtDate(d.date)}</td><td>${d.location||'-'}</td><td>${Object.values(d.opening||{}).filter(Boolean).length}/4</td><td>${Object.values(d.closing||{}).filter(Boolean).length}/4</td><td>${d.issues||'None'}</td></tr>`).join('')}</table>`:''} ${temps?.length?`<h2>Temperature Log (${temps.length} readings)</h2><table><tr><th>Date</th><th>Time</th><th>Unit</th><th>Temp</th><th>Result</th><th>Action</th></tr>${temps.map(t=>`<tr><td>${fmtDate(t.date)}</td><td>${t.time}</td><td>${t.unit}</td><td>${t.temp}°C</td><td class="${t.pass?'pass':'fail'}">${t.pass?'PASS':'FAIL'}</td><td>${t.action||'-'}</td></tr>`).join('')}</table>`:''} ${cleans?.length?`<h2>Cleaning Records (${cleans.length})</h2><table><tr><th>Date</th><th>Items completed</th><th>Signed by</th></tr>${cleans.map(c=>`<tr><td>${fmtDate(c.date)}</td><td>${Object.values(c.checks||{}).filter(Boolean).length}/8 items</td><td>${c.saved_by||'-'}</td></tr>`).join('')}</table>`:''} ${vans?.length?`<h2>Unit / Van Checks (${vans.length})</h2><table><tr><th>Date</th><th>Items</th><th>Checked by</th></tr>${vans.map(v=>`<tr><td>${fmtDate(v.date)}</td><td>${Object.values(v.checks||{}).filter(Boolean).length}/8</td><td>${v.signed_by||'-'}</td></tr>`).join('')}</table>`:''} ${lpg?.length?`<h2>LPG Safety (${lpg.length})</h2><table><tr><th>Date</th><th>Result</th><th>Notes</th></tr>${lpg.map(l=>`<tr><td>${fmtDate(l.date)}</td><td class="pass">Passed</td><td>${l.notes||'-'}</td></tr>`).join('')}</table>`:''} ${waters?.length?`<h2>Water Records (${waters.length})</h2><table><tr><th>Date</th><th>Filled</th><th>Cleaned</th><th>Sanitised</th></tr>${waters.map(w=>`<tr><td>${fmtDate(w.date)}</td><td>${w.filled?'Yes':'-'}</td><td>${w.cleaned?'Yes':'-'}</td><td>${w.sanitised?'Yes':'-'}</td></tr>`).join('')}</table>`:''} ${pitches?.length?`<h2>Pitch Log (${pitches.length})</h2><table><tr><th>Date</th><th>Location</th><th>Address</th></tr>${pitches.map(p=>`<tr><td>${fmtDate(p.date)}</td><td>${p.name}</td><td>${p.address||'-'}</td></tr>`).join('')}</table>`:''} </div> <p class="foot">Generated by VanGuard · vanguardapp.co.uk</p>`; w.document.open(); w.document.write(`<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Food Safety Records — ${biz}</title><style>${style}</style></head><body> <div class="toolbar"> <button class="btn primary" onclick="window.print()">⤓ Save as PDF</button> <button class="btn" onclick="window.print()">🖨 Print</button> <button class="btn" id="emailBtn" onclick="emailReport()">✉ Email report</button> <button class="btn close" onclick="window.close()">Close</button> </div> <div class="hint">In the print dialog, choose your printer, or set the destination to “Save as PDF”.</div> <div id="report">${reportInner}</div> <script> var TOKEN=${JSON.stringify(token)};var SUBJECT=${JSON.stringify(subject)};var STYLE=${JSON.stringify(style)};var ENDPOINT=${JSON.stringify(location.origin+'/.netlify/functions/send-records')}; function emailReport(){ var to=prompt("Send these records to which email address?",""); if(!to){return;} var btn=document.getElementById("emailBtn"); if(btn){btn.disabled=true;btn.textContent="Sending…";} var body="<div style=\\"font-family:Arial,sans-serif;background:#eef1f4;padding:20px\\"><style>"+STYLE+"</style>"+document.getElementById("report").outerHTML+"</div>"; fetch(ENDPOINT,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({to:to,subject:SUBJECT,html:body,token:TOKEN})}) .then(function(r){return r.json().then(function(j){return {ok:r.ok,j:j};});}) .then(function(res){ if(res.ok){alert("Records sent to "+to);}else{alert("Could not send: "+((res.j&&res.j.error)||"please try again"));} if(btn){btn.disabled=false;btn.textContent="✉ Email report";} }) .catch(function(){ alert("Could not send. Please check your connection and try again."); if(btn){btn.disabled=false;btn.textContent="✉ Email report";} }); } </script> </body></html>`); w.document.close(); }; const LOG_TYPES=[ {key:'temps',label:'Temps',cnt:counts.temp}, {key:'diary',label:'Diary',cnt:counts.diary}, {key:'cleaning',label:'Cleaning',cnt:counts.clean}, {key:'equipment',label:'Equipment',cnt:counts.van}, {key:'lpg',label:'LPG',cnt:counts.lpg}, {key:'water',label:'Water',cnt:counts.water}, {key:'pitches',label:'Pitches',cnt:counts.pitch}, ]; const sc=todayPct===100?'green':todayPct>=50?'amber':'red'; const sBg={green:'bg-green-50 border-green-100',amber:'bg-amber-50 border-amber-100',red:'bg-red-50 border-red-100'}[sc]; const sTxt={green:'text-green-700',amber:'text-amber-700',red:'text-red-700'}[sc]; const sRing={green:'#16a34a',amber:'#d97706',red:'#ef4444'}[sc]; const renderRecord=(r)=>{ const base="py-3 border-b border-gray-50 last:border-0 flex items-center gap-3"; if(logType==='temps') return ( <div key={r.id} className={base}> <div className={`w-2 h-2 rounded-full flex-shrink-0 ${r.pass?'bg-green-400':'bg-red-400'}`}/> <div className="flex-1 min-w-0"> <p className="text-sm font-semibold text-gray-800 truncate">{r.unit}</p> <p className="text-xs text-gray-400">{fmtDate(r.date)} · {r.time}</p> {r.action&&<p className="text-xs text-amber-600 truncate mt-0.5">Action: {r.action}</p>} </div> <div className="flex-shrink-0 text-right"> <p className="text-sm font-bold text-gray-800">{r.temp}°C</p> <Badge label={r.pass?'PASS':'FAIL'} color={r.pass?'green':'red'}/> </div> </div> ); if(logType==='diary') return ( <div key={r.id} className={base+" items-start"}> <div className="w-2 h-2 rounded-full bg-navy flex-shrink-0 mt-1.5"/> <div className="flex-1 min-w-0"> <p className="text-sm font-semibold text-gray-800">{fmtDate(r.date)}</p> <p className="text-xs text-gray-400 truncate">{r.location||'No location'}</p> {r.issues&&<p className="text-xs text-amber-600 truncate mt-0.5">Issue: {r.issues}</p>} </div> <div className="flex-shrink-0 text-right text-xs text-gray-500 mt-0.5"> <p>{Object.values(r.opening||{}).filter(Boolean).length}/4 open</p> <p>{Object.values(r.closing||{}).filter(Boolean).length}/4 close</p> </div> </div> ); if(logType==='cleaning') return ( <div key={r.id} className={base}> <div className="w-2 h-2 rounded-full bg-teal flex-shrink-0"/> <div className="flex-1 min-w-0"> <p className="text-sm font-semibold text-gray-800">{fmtDate(r.date)}</p> <p className="text-xs text-gray-400">{Object.values(r.checks||{}).filter(Boolean).length}/8 items</p> </div> <span className="flex-shrink-0 text-xs text-gray-400">{r.saved_by||'—'}</span> </div> ); if(logType==='equipment') return ( <div key={r.id} className={base}> <div className="w-2 h-2 rounded-full bg-teal flex-shrink-0"/> <div className="flex-1 min-w-0"> <p className="text-sm font-semibold text-gray-800">{fmtDate(r.date)}</p> <p className="text-xs text-gray-400">{Object.values(r.checks||{}).filter(Boolean).length}/8 checks</p> </div> <span className="flex-shrink-0 text-xs text-gray-400">{r.signed_by||'—'}</span> </div> ); if(logType==='lpg') return ( <div key={r.id} className={base}> <div className="w-2 h-2 rounded-full bg-teal flex-shrink-0"/> <div className="flex-1 min-w-0"> <p className="text-sm font-semibold text-gray-800">{fmtDate(r.date)}</p> {r.notes&&<p className="text-xs text-gray-400 truncate">{r.notes}</p>} </div> <Badge label="✓ Passed" color="green"/> </div> ); if(logType==='water') return ( <div key={r.id} className={base}> <div className="w-2 h-2 rounded-full bg-teal flex-shrink-0"/> <div className="flex-1 min-w-0"> <p className="text-sm font-semibold text-gray-800">{fmtDate(r.date)}</p> <p className="text-xs text-gray-400">{[r.filled&&'Filled',r.cleaned&&'Cleaned',r.sanitised&&'Sanitised'].filter(Boolean).join(' · ')||'—'}</p> </div> </div> ); if(logType==='pitches') return ( <div key={r.id} className={base}> <div className="w-2 h-2 rounded-full bg-navy flex-shrink-0"/> <div className="flex-1 min-w-0"> <p className="text-sm font-semibold text-gray-800">{r.name}</p> <p className="text-xs text-gray-400">{fmtDate(r.date)}{r.address&&` · ${r.address}`}</p> </div> </div> ); return null; }; return ( <div className="pt-28 pb-8 px-4"> <div className={`rounded-2xl p-4 mb-4 border flex items-center gap-4 ${sBg}`}> <div className="relative flex-shrink-0" style={{width:'56px',height:'56px'}}> <svg width="56" height="56" viewBox="0 0 56 56"> <circle cx="28" cy="28" r="24" fill="none" stroke="#FFFFFF" strokeWidth="6"/> <circle cx="28" cy="28" r="24" fill="none" stroke={sRing} strokeWidth="6" strokeLinecap="round" strokeDasharray={2*Math.PI*24} strokeDashoffset={2*Math.PI*24*(1-todayPct/100)} transform="rotate(-90 28 28)"/> </svg> <div className="absolute inset-0 flex items-center justify-center"> <span className={`text-sm font-black ${sTxt}`}>{todayPct}%</span> </div> </div> <div className="flex-1 min-w-0"> <p className={`font-bold text-sm ${sTxt}`}>{todayPct===100?'EHO-ready for today':todayPct>0?'Some checks outstanding':'No checks logged today'}</p> <p className="text-xs text-gray-500 mt-0.5">Across diary, temps, cleaning & equipment</p> </div> </div> <Btn onClick={exportPack} variant="navy" className="mb-4"><Icon name="download" size={16} color="white"/>Export / email records</Btn> <div className="grid grid-cols-4 gap-1.5 mb-4"> {[['today','Today'],['week','This week'],['month','Month'],['all','All time']].map(([p,l])=>( <button key={p} onClick={()=>setPeriod(p)} className={`py-2 rounded-xl text-xs font-bold border-2 transition-all ${period===p?'bg-teal border-teal text-white':'bg-gray-50 border-gray-100 text-gray-600'}`}>{l}</button> ))} </div> <div className="flex gap-2 overflow-x-auto pb-2 mb-4 -mx-1 px-1" style={{scrollbarWidth:'none',msOverflowStyle:'none'}}> {LOG_TYPES.map(t=>( <button key={t.key} onClick={()=>setLogType(t.key)} className={`flex-shrink-0 px-3 py-1.5 rounded-full text-xs font-bold border transition-all ${logType===t.key?'bg-navy border-navy text-white':'bg-white border-gray-200 text-gray-600'}`}> {t.label}{t.cnt>0?` (${t.cnt})`:''} </button> ))} </div> <Card className="p-4 mb-4"> {loading ?<Spinner/> :records.length===0 ?<div className="text-center py-8"> <p className="text-4xl mb-2">📭</p> <p className="text-sm text-gray-400">No {LOG_TYPES.find(t=>t.key===logType)?.label.toLowerCase()} records for this period</p> </div> :<div> <p className="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-3">{records.length} record{records.length!==1?'s':''}</p> {records.map(r=>renderRecord(r))} </div> } </Card> <Card className="p-4 mb-4"> <div className="flex justify-between items-center mb-1"> <h3 className="font-bold text-navy text-sm">Export EHO Pack</h3> <span className="text-xs text-gray-400">{total} total records</span> </div> <p className="text-xs text-gray-400 mb-3">All record types for the selected period. Save as PDF, print, or email to your EHO or team.</p> <Btn onClick={exportPack} variant="navy"><Icon name="download" size={16} color="white"/>Export / email records</Btn> <p className="text-xs text-gray-400 text-center mt-2">Opens a printable page · save as PDF</p> </Card> <div className="grid grid-cols-2 gap-3"> <Card className="p-4"><p className="text-2xl font-black text-teal">{passRate}%</p><p className="text-xs text-gray-400 mt-1">Temperature pass rate</p></Card> <Card className="p-4"><p className="text-2xl font-black text-teal">{total}</p><p className="text-xs text-gray-400 mt-1">Records this period</p></Card> </div> </div> ); }; // ── FEEDBACK CARD ───────────────────────────────────────────────────────────── const FeedbackCard = ({userId,email}) => { const [msg,setMsg]=useState(''); const [sent,setSent]=useState(false); const [sending,setSending]=useState(false); const send=async()=>{ if(!msg.trim())return; setSending(true); await sb.from('feedback').insert({user_id:userId,email,message:msg.trim()}); setSending(false);setSent(true);setMsg(''); setTimeout(()=>setSent(false),5000); }; return ( <Card className="p-4 mt-4"> <div className="flex items-center gap-3 mb-3"> <div className="w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0" style={{background:'#EAF6F6'}}> <Icon name="chat" size={18} color="#0D7377"/> </div> <div> <p className="font-bold text-navy text-sm">Feedback & suggestions</p> <p className="text-xs text-gray-400">We read every message, and aim to add requested features within a week.</p> </div> </div> {sent?( <div className="bg-green-50 border border-green-100 rounded-xl p-3 text-center"> <p className="text-green-700 text-sm font-semibold">Thank you — we've got it. 🙌</p> <p className="text-green-600 text-xs mt-0.5">We read everything and will be in touch if we need more detail.</p> </div> ):(<> <textarea value={msg} onChange={e=>setMsg(e.target.value)} rows={3} placeholder="What would make VanGuard better for you? Bugs, ideas or feature requests all welcome…" className="w-full border border-gray-200 rounded-xl px-4 py-3 text-sm bg-gray-50 focus:outline-none focus:border-teal resize-none mb-2"/> <Btn onClick={send} loading={sending}>Send feedback</Btn> </>)} </Card> ); }; // ── ACCOUNT ─────────────────────────────────────────────────────────────────── const AccountScreen = ({userId,profile,onUpdate}) => { const [section,setSection]=useState('profile'); const [name,setName]=useState(profile?.name||''); const [biz,setBiz]=useState(profile?.business_name||''); const [unitType,setUnitType]=useState(profile?.unit_type||'van'); const [authority,setAuthority]=useState(profile?.authority||''); const [lpgEnabled,setLpgEnabled]=useState(profile?.lpg_enabled!==false); const [waterEnabled,setWaterEnabled]=useState(profile?.water_enabled??false); const [teamSize,setTeamSize]=useState(profile?.team_size||'solo'); const [foodType,setFoodType]=useState(profile?.food_type||''); const [hygieneRating,setHygieneRating]=useState(profile?.hygiene_rating??null); // Keep the form in sync when the profile loads/changes (e.g. name from signup). useEffect(()=>{ setName(profile?.name||''); setBiz(profile?.business_name||''); setUnitType(profile?.unit_type||'van'); setAuthority(profile?.authority||''); setLpgEnabled(profile?.lpg_enabled!==false); setWaterEnabled(profile?.water_enabled??false); setTeamSize(profile?.team_size||'solo'); setFoodType(profile?.food_type||''); setHygieneRating(profile?.hygiene_rating??null); },[profile?.id]); const [saving,setSaving]=useState(false); const [flash,setFlash]=useState(''); const [newPass,setNewPass]=useState(''); const [passFlash,setPassFlash]=useState(''); const [passErr,setPassErr]=useState(''); const [passLoading,setPassLoading]=useState(false); const saveProfile=async()=>{ setSaving(true); const{data}=await sb.from('profiles').update({name,business_name:biz,unit_type:unitType,authority,lpg_enabled:lpgEnabled,water_enabled:waterEnabled,team_size:teamSize,food_type:foodType,hygiene_rating:hygieneRating}).eq('id',userId).select().single(); if(data) onUpdate(data); setFlash('Profile saved!'); setTimeout(()=>setFlash(''),2000); setSaving(false); }; const changePass=async()=>{ setPassErr(''); setPassFlash(''); if(newPass.length<6){setPassErr('Password must be at least 6 characters.');return;} setPassLoading(true); const{error}=await sb.auth.updatePassword(newPass); if(error){setPassErr(error.message);} else {setPassFlash('Password updated!');setNewPass('');} setPassLoading(false); }; const logout=async()=>{await sb.auth.signOut();}; const [subLoading,setSubLoading]=useState(''); const isActive=profile?.subscription_status==='active'; const isLifetime=profile?.subscription_status==='lifetime'; const isTrialing=profile?.subscription_status==='trialing'; const isPastDue=profile?.subscription_status==='past_due'; const hasStripe=!!profile?.stripe_customer_id; const trialDays=profile?.trial_start?Math.floor((new Date()-new Date(profile.trial_start))/86400000):0; const trialLeft=isTrialing?Math.max(0,14-trialDays):0; const isYearly=profile?.plan_interval==='year'; const planName=isYearly?'Yearly plan':'Monthly plan'; const planPrice=isYearly?'£69.99/year':'£7.99/month'; const cancelling=!!profile?.cancel_at_period_end; const periodEnd=profile?.period_end?new Date(profile.period_end):null; const fmtEnd=periodEnd&&!isNaN(periodEnd)?periodEnd.toLocaleDateString('en-GB',{day:'numeric',month:'long',year:'numeric'}):null; const subscribe=async(plan='monthly')=>{ setSubLoading(plan); try{ const tok=_getS()?.access_token; const res=await fetch('/.netlify/functions/create-checkout',{ method:'POST', headers:{'Content-Type':'application/json','Authorization':`Bearer ${tok}`}, body:JSON.stringify({userId,email:profile?.email||_getS()?.user?.email,trial:false}), }); const {url,error}=await res.json(); if(error)throw new Error(error); window.location.href=url; } catch(e){ alert('Could not start checkout: '+e.message); setSubLoading(''); } }; const [portalLoading,setPortalLoading]=useState(false); const openPortal=async()=>{ setPortalLoading(true); try{ const tok=_getS()?.access_token; const res=await fetch('/.netlify/functions/create-portal',{ method:'POST', headers:{'Content-Type':'application/json','Authorization':`Bearer ${tok}`}, body:JSON.stringify({userId}), }); const {url,error}=await res.json(); if(error)throw new Error(error); window.location.href=url; } catch(e){ alert('Could not open the billing portal: '+e.message); setPortalLoading(false); } }; const [notifStatus,setNotifStatus]=useState('checking'); const [notifLoading,setNotifLoading]=useState(false); useEffect(()=>{ if(!('serviceWorker' in navigator)||!('PushManager' in window)){setNotifStatus('unsupported');return;} if(Notification.permission==='denied'){setNotifStatus('denied');return;} navigator.serviceWorker.ready.then(r=>r.pushManager.getSubscription()).then(sub=>{ setNotifStatus(sub?'subscribed':'unsubscribed'); }).catch(()=>setNotifStatus('unsubscribed')); },[]); const enableNotifs=async()=>{ setNotifLoading(true); try{ const perm=await Notification.requestPermission(); if(perm!=='granted'){setNotifStatus('denied');setNotifLoading(false);return;} const reg=await navigator.serviceWorker.ready; const sub=await reg.pushManager.subscribe({userVisibleOnly:true,applicationServerKey:urlBase64ToUint8(VAPID_PUBLIC_KEY)}); const tok=_getS()?.access_token; await fetch('/.netlify/functions/push-subscribe',{method:'POST',headers:{'Content-Type':'application/json','Authorization':`Bearer ${tok}`},body:JSON.stringify({subscription:sub.toJSON(),action:'subscribe'})}).catch(()=>{}); setNotifStatus('subscribed'); }catch{setNotifStatus('unsubscribed');} setNotifLoading(false); }; const disableNotifs=async()=>{ setNotifLoading(true); try{ const reg=await navigator.serviceWorker.ready; const sub=await reg.pushManager.getSubscription(); if(sub){ const tok=_getS()?.access_token; await fetch('/.netlify/functions/push-subscribe',{method:'POST',headers:{'Content-Type':'application/json','Authorization':`Bearer ${tok}`},body:JSON.stringify({subscription:sub.toJSON(),action:'unsubscribe'})}).catch(()=>{}); await sub.unsubscribe(); } setNotifStatus('unsubscribed'); }catch{} setNotifLoading(false); }; const sections=[{k:'profile',l:'Profile',icon:'user'},{k:'security',l:'Security',icon:'lock'},{k:'subscription',l:'Plan',icon:'star'},{k:'notifications',l:'Reminders',icon:'bell'}]; return ( <div className="pt-28 pb-8 px-4"> {/* Profile summary */} <Card className="p-4 mb-5"> <div className="flex items-center gap-3"> <div className="w-12 h-12 bg-navy rounded-xl flex items-center justify-center flex-shrink-0"> <span className="text-white font-black text-base">{(profile?.name||'?').split(' ').map(w=>w[0]).join('').slice(0,2).toUpperCase()}</span> </div> <div className="flex-1 min-w-0"> <p className="font-bold text-navy truncate">{profile?.name||'Your Name'}</p> <p className="text-xs text-gray-400 truncate">{profile?.business_name||'Your Business'}</p> {profile?.hygiene_rating!=null&&(()=>{ const r=profile.hygiene_rating; const col=r>=4?'#16a34a':r>=3?'#d97706':'#ef4444'; return <p className="text-xs font-bold mt-0.5" style={{color:col}}>{'★'.repeat(r)}{'☆'.repeat(5-r)} {r}/5 food hygiene</p>; })()} </div> {isLifetime?<Badge label="Founding Member" color="teal"/>:isActive?<Badge label="Active" color="green"/>:trialLeft>0?<Badge label={`Trial: ${trialLeft}d`} color="amber"/>:<Badge label="Expired" color="red"/>} </div> <div className="mt-3 pt-3 border-t border-gray-100"> <button onClick={logout} className="w-full flex items-center gap-2 py-2 text-red-500 font-semibold text-sm active:opacity-60"> <Icon name="logout" size={16} color="#ef4444"/> Sign out </button> </div> </Card> {/* ── Refer a friend (top for visibility) ── */} {(isActive||isLifetime||trialLeft>0)&&( <Card className="p-4 mb-5 border-2" style={{borderColor:'#FDE68A',background:'#FFFBEB'}}> <div className="flex items-center gap-3 mb-3"> <div className="w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0" style={{background:'#FFF3E0'}}> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#F59E0B" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg> </div> <div> <p className="font-bold text-navy text-sm">Refer a friend — get 2 months free</p> <p className="text-xs text-gray-500">Share your link. When a friend starts their free trial, you get 2 months credited to your subscription.</p> </div> </div> {(()=>{ const refCode=userId.slice(0,8); const refUrl=`https://vanguardapp.co.uk?ref=${refCode}`; const [copied,setCopied]=useState(false); const copy=()=>{ navigator.clipboard.writeText(refUrl).then(()=>{ setCopied(true); setTimeout(()=>setCopied(false),2000); }); }; return ( <div> <div className="flex items-center gap-2 bg-white/70 rounded-xl px-3 py-2 mb-2"> <p className="text-xs text-gray-600 flex-1 truncate font-mono">{refUrl}</p> </div> <Btn onClick={copy} variant={copied?'primary':'outline'} className="w-full"> {copied?'✓ Copied!':'Copy referral link'} </Btn> </div> ); })()} </Card> )} {/* Section tabs */} <div className="grid grid-cols-4 gap-1.5 mb-5"> {sections.map(s=>( <button key={s.k} onClick={()=>setSection(s.k)} className={`flex flex-col items-center gap-1 py-3 rounded-xl border-2 transition-all ${section===s.k?'bg-navy border-navy text-white':'bg-white border-gray-100 text-gray-500'}`}> <Icon name={s.icon} size={16} color={section===s.k?'white':'#9CA3AF'}/> <span className="text-[10px] font-bold">{s.l}</span> </button> ))} </div> {section==='profile'&&( <Card className="p-4 fade-in"> <h3 className="font-bold text-navy text-sm mb-4">Business Profile</h3> <Input label="Your name" value={name} onChange={setName} placeholder="Full name"/> <Input label="Business / trading name" value={biz} onChange={setBiz} placeholder="e.g. The Taco Van"/> <Input label="Local authority" value={authority} onChange={setAuthority} placeholder="e.g. Southwark Council"/> <div className="mb-4"> <label className="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">Unit type</label> <div className="grid grid-cols-2 gap-2"> {unitTypes.map(u=>( <button key={u.key} onClick={()=>setUnitType(u.key)} className={`py-2.5 px-3 rounded-xl text-sm font-semibold border-2 text-left transition-all ${unitType===u.key?'bg-teal border-teal text-white':'bg-gray-50 border-gray-100 text-gray-600'}`}> {u.emoji} {u.label} </button> ))} </div> </div> <div className="flex items-center justify-between py-3 border-b border-gray-100"> <div> <p className="text-sm font-semibold text-navy">LPG / Gas equipment</p> <p className="text-xs text-gray-400">Show LPG safety checks in Van screen</p> </div> <button onClick={()=>setLpgEnabled(p=>!p)} className={`relative w-12 h-6 rounded-full transition-colors ${lpgEnabled?'bg-teal':'bg-gray-200'}`}> <div className={`absolute top-0.5 w-5 h-5 bg-white rounded-full shadow transition-all ${lpgEnabled?'left-6':'left-0.5'}`}/> </button> </div> <div className="flex items-center justify-between py-3 border-b border-gray-100"> <div> <p className="text-sm font-semibold text-navy">Water tank on board</p> <p className="text-xs text-gray-400">Show water tank checks in Van screen</p> </div> <button onClick={()=>setWaterEnabled(p=>!p)} className={`relative w-12 h-6 rounded-full transition-colors ${waterEnabled?'bg-teal':'bg-gray-200'}`}> <div className={`absolute top-0.5 w-5 h-5 bg-white rounded-full shadow transition-all ${waterEnabled?'left-6':'left-0.5'}`}/> </button> </div> <div className="py-3 border-b border-gray-100"> <p className="text-sm font-semibold text-navy mb-2">Who runs the unit?</p> <div className="grid grid-cols-2 gap-2"> {[{v:'solo',l:'Just me'},{v:'team',l:'Me + staff'}].map(o=>( <button key={o.v} onClick={()=>setTeamSize(o.v)} className={`py-2.5 rounded-xl text-sm font-semibold border-2 transition-all ${teamSize===o.v?'bg-teal border-teal text-white':'bg-gray-50 border-gray-100 text-gray-600'}`}> {o.l} </button> ))} </div> </div> <div className="py-3 border-b border-gray-100 mb-1"> <Input label="What you mainly serve" value={foodType} onChange={setFoodType} placeholder="e.g. Burgers, coffee, tacos"/> </div> <div className="py-3 border-b border-gray-100 mb-4"> <p className="text-sm font-semibold text-navy mb-1">Food hygiene rating</p> <p className="text-xs text-gray-400 mb-2">Your current FSA rating (0–5 stars)</p> <div className="flex gap-1.5"> {[1,2,3,4,5].map(v=>{ const active=hygieneRating===v; const col=v>=4?'#16a34a':v===3?'#d97706':'#ef4444'; return( <button key={v} onClick={()=>setHygieneRating(active?null:v)} className="flex-1 py-2 rounded-xl text-sm font-bold border-2 transition-all" style={{background:active?col:'#F9FAFB',borderColor:active?col:'#E5E7EB',color:active?'white':col}}> {v}★ </button> ); })} </div> {hygieneRating===null&&<p className="text-xs text-gray-400 mt-1">Not set — tap to select</p>} </div> {flash?<OkMsg msg={flash}/>:<Btn onClick={saveProfile} loading={saving}>Save profile</Btn>} </Card> )} {section==='security'&&( <Card className="p-4 fade-in"> <h3 className="font-bold text-navy text-sm mb-1">Change Password</h3> <p className="text-xs text-gray-400 mb-4">Set a new password for your account</p> <ErrMsg msg={passErr}/> <Input label="New password" value={newPass} onChange={setNewPass} type="password" placeholder="Min. 6 characters" hint="Must be at least 6 characters"/> {passFlash?<OkMsg msg={passFlash}/>:<Btn onClick={changePass} loading={passLoading}>Update password</Btn>} </Card> )} {section==='subscription'&&( <div className="fade-in"> {/* ── Founding member ── */} {isLifetime&&( <Card className="p-4 mb-4 border-2 border-teal"> <div className="flex items-center gap-3 mb-3"> <div className="w-10 h-10 bg-teal rounded-xl flex items-center justify-center flex-shrink-0"> <Icon name="star" size={18} color="white"/> </div> <div> <p className="font-bold text-navy text-sm">Founding Member</p> <p className="text-xs text-teal font-semibold">Lifetime access · Thank you!</p> </div> </div> <p className="text-xs text-gray-500">You're one of our founding members. You have full access to VanGuard forever, including all future features.</p> </Card> )} {/* ── Monthly active ── */} {isActive&&( <Card className="p-4 mb-4"> <div className="flex items-center gap-3 mb-4"> <div className="w-10 h-10 bg-green-100 rounded-xl flex items-center justify-center flex-shrink-0"> <Icon name="star" size={18} color="#16a34a"/> </div> <div> <p className="font-bold text-navy text-sm">{planName}</p> <p className="text-xs text-gray-400">{planPrice} · Active</p> </div> </div> {cancelling?( <div className="bg-amber-50 border border-amber-100 rounded-xl p-3 mb-3"> <p className="text-amber-700 text-sm font-semibold">Subscription cancelled</p> <p className="text-amber-600 text-xs mt-0.5">{fmtEnd?`Your access stays active until ${fmtEnd}, then your account will pause.`:'Your access stays active until the end of your current billing period.'}</p> </div> ):fmtEnd&&( <p className="text-xs text-gray-500 mb-3">Renews on {fmtEnd}.</p> )} <Btn variant="ghost" onClick={openPortal} loading={portalLoading}>{cancelling?'Resume or manage subscription':'Manage or cancel subscription'}</Btn> <p className="text-xs text-gray-400 text-center mt-2">Update your card, view invoices or cancel anytime</p> </Card> )} {/* ── Payment failed ── */} {isPastDue&&( <Card className="p-4 mb-4 border-2 border-red-200"> <div className="flex items-center gap-3 mb-3"> <div className="w-10 h-10 bg-red-100 rounded-xl flex items-center justify-center flex-shrink-0"> <Icon name="star" size={18} color="#dc2626"/> </div> <div> <p className="font-bold text-navy text-sm">Payment failed</p> <p className="text-xs text-red-600 font-semibold">Update your card to keep your access</p> </div> </div> <Btn variant="primary" onClick={openPortal} loading={portalLoading}>Update payment details</Btn> </Card> )} {/* ── Free trial (card on file) ── */} {isTrialing&&( <Card className="p-4 mb-4 border-2 border-teal"> <div className="flex items-center gap-3 mb-3"> <div className="w-10 h-10 bg-teal-light rounded-xl flex items-center justify-center flex-shrink-0"> <Icon name="star" size={18} color="#0D7377"/> </div> <div> <p className="font-bold text-navy text-sm">{planName} · Free trial</p> <p className="text-xs text-teal font-semibold">{trialLeft>0?`${trialLeft} day${trialLeft!==1?'s':''} left`:'Trial ending'} · then {planPrice}</p> </div> </div> <p className="text-xs text-gray-500 mb-3">Your card is on file. You won't be charged until your trial ends — cancel anytime before then and you'll pay nothing.</p> <Btn variant="ghost" onClick={openPortal} loading={portalLoading}>Manage or cancel trial</Btn> </Card> )} {/* ── Not subscribed / lapsed: plan card ── */} {!isActive&&!isLifetime&&!isTrialing&&!isPastDue&&( <> {trialLeft>0?( <div className="bg-amber-50 rounded-xl p-3 mb-4 border border-amber-100"> <p className="text-amber-700 text-sm font-semibold">Your trial ends in {trialLeft} days</p> <p className="text-amber-600 text-xs mt-0.5">Choose a plan below to keep your data and stay compliant</p> </div> ):( <div className="bg-red-50 rounded-xl p-3 mb-4 border border-red-100"> <p className="text-red-700 text-sm font-semibold">Your trial has ended</p> <p className="text-red-600 text-xs mt-0.5">Choose a plan to regain access to your records</p> </div> )} {/* Yearly card */} <Card className="p-4 mb-3 border-2 border-teal"> <div className="flex items-center justify-between mb-2"> <p className="text-[10px] font-bold text-teal uppercase tracking-wider">Yearly · best value</p> <span className="text-[10px] font-bold bg-teal text-white px-2 py-0.5 rounded-full">Save 27%</span> </div> <p className="font-black text-navy text-2xl mb-0.5">£69.99<span className="text-sm font-normal text-gray-400"> /year</span></p> <p className="text-xs text-gray-400 mb-3">Every feature · Cancel anytime</p> <Btn variant="primary" onClick={()=>subscribe('yearly')} loading={subLoading==='yearly'}>Subscribe yearly</Btn> </Card> {/* Monthly card */} <Card className="p-4 mb-4"> <p className="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-1">Monthly</p> <p className="font-black text-navy text-2xl mb-0.5">£7.99<span className="text-sm font-normal text-gray-400"> /month</span></p> <p className="text-xs text-gray-400 mb-3">Cancel anytime</p> <Btn variant="navy" onClick={()=>subscribe('monthly')} loading={subLoading==='monthly'}>Subscribe monthly</Btn> </Card> </> )} {/* ── What's included ── */} <Card className="p-4"> <h3 className="font-bold text-navy text-sm mb-3">{isLifetime?'Everything included, forever':'What\'s included'}</h3> {[...['Unlimited diary entries','Temperature log & alerts','Cleaning schedules','Van & LPG safety checks','One-tap EHO export','Pitch location log'],...(isLifetime?['All future features']:[])].map((f,i)=>( <div key={i} className="flex items-center gap-2 py-1.5"> <div className={`w-5 h-5 ${isLifetime?'bg-teal-light':'bg-green-100'} rounded-full flex items-center justify-center flex-shrink-0`}> <Icon name="check" size={11} color={isLifetime?'#0D7377':'#16a34a'}/> </div> <span className="text-sm text-gray-700">{f}</span> </div> ))} </Card> </div> )} {section==='notifications'&&( <Card className="p-4 fade-in"> <div className="flex items-center gap-3 mb-4"> <div className="w-10 h-10 bg-teal-light rounded-xl flex items-center justify-center flex-shrink-0"> <Icon name="bell" size={18} color="#0D7377"/> </div> <div> <p className="font-bold text-navy text-sm">Daily Reminders</p> <p className="text-xs text-gray-400">Morning push notification to log your checks</p> </div> </div> {notifStatus==='unsupported'&&( <div className="bg-gray-50 rounded-xl p-4 text-center"> <p className="text-sm text-gray-500">Push notifications aren't supported on this browser</p> <p className="text-xs text-gray-400 mt-1">Try installing VanGuard as an app (Add to Home Screen) and open it from there</p> </div> )} {notifStatus==='denied'&&( <div className="bg-red-50 rounded-xl p-4 border border-red-100"> <p className="text-sm text-red-700 font-semibold mb-1">Notifications blocked</p> <p className="text-xs text-red-600">To enable reminders, go to your browser or phone settings and allow notifications for this site, then return here.</p> </div> )} {(notifStatus==='unsubscribed'||notifStatus==='checking')&& notifStatus!=='denied'&& notifStatus!=='unsupported'&&( <div> <div className="bg-gray-50 rounded-xl p-4 mb-4"> <p className="text-sm text-gray-700 font-semibold mb-1">🌅 Daily reminder at 7am</p> <p className="text-xs text-gray-500">VanGuard will send you a push notification each morning reminding you to log your opening temperature check and open the day.</p> </div> <Btn onClick={enableNotifs} loading={notifLoading}>Enable daily reminders</Btn> </div> )} {notifStatus==='subscribed'&&( <div> <div className="bg-green-50 rounded-xl p-4 border border-green-100 mb-4"> <p className="text-sm text-green-700 font-semibold">✓ Daily reminders active</p> <p className="text-xs text-green-600 mt-0.5">You'll get a push notification each morning at 7am to log your compliance checks.</p> </div> <Btn onClick={disableNotifs} variant="ghost" loading={notifLoading}>Turn off reminders</Btn> </div> )} </Card> )} {section==='team'&&( <Card className="p-4 fade-in"> <div className="flex items-center gap-3 mb-4"> <div className="w-10 h-10 bg-teal-light rounded-xl flex items-center justify-center"> <Icon name="team" size={18} color="#0D7377"/> </div> <div> <p className="font-bold text-navy text-sm">Team Members</p> <p className="text-xs text-gray-400">Coming in Fleet plan</p> </div> </div> <div className="bg-gray-50 rounded-xl p-4 text-center mb-4"> <p className="text-sm text-gray-600 mb-1">Add staff members to your account so they can log records too</p> <p className="text-xs text-gray-400">Available in the VanGuard Fleet plan · £18.99/month</p> </div> <Btn variant="outline" onClick={()=>setSection('subscription')}>View plans</Btn> </Card> )} {/* ── Feedback & suggestions ── */} <FeedbackCard userId={userId} email={profile?.email||_getS()?.user?.email}/> {/* ── Support ── */} <Card className="p-4 mt-4"> <div className="flex items-center gap-3 mb-3"> <div className="w-10 h-10 bg-teal-light rounded-xl flex items-center justify-center flex-shrink-0"> <Icon name="mail" size={18} color="#0D7377"/> </div> <div> <p className="font-bold text-navy text-sm">Contact support</p> <p className="text-xs text-gray-400">Need help with something specific? Email us directly.</p> </div> </div> <div className="flex gap-2"> <a href="mailto:hello@vanguardapp.co.uk" className="flex-1 flex items-center justify-center gap-2 py-3 rounded-xl text-sm font-semibold text-white active:opacity-80" style={{background:'#0D7377'}}> <Icon name="mail" size={16} color="#FFFFFF"/> Email support </a> </div> </Card> </div> ); }; // ── RESET PASSWORD SCREEN ──────────────────────────────────────────────────── const ResetPasswordScreen=({token,onDone})=>{ const [pass,setPass]=useState(''); const [confirm,setConfirm]=useState(''); const [loading,setLoading]=useState(false); const [err,setErr]=useState(''); const [ok,setOk]=useState(''); const submit=async()=>{ setErr(''); if(pass.length<6){setErr('Password must be at least 6 characters.');return;} if(pass!==confirm){setErr('Passwords do not match.');return;} setLoading(true); const r=await fetch(`${SUPA_URL}/auth/v1/user`,{method:'PUT',headers:{'apikey':SUPA_KEY,'Content-Type':'application/json','Authorization':`Bearer ${token}`},body:JSON.stringify({password:pass})}); const d=await r.json(); if(d.error||d.code>=400){setErr(d.message||'Failed to update password.');setLoading(false);return;} setOk('Password updated! Taking you to sign in...'); setTimeout(onDone,2000); setLoading(false); }; return ( <div className="min-h-screen bg-navy flex flex-col items-center justify-center p-5"> <img src="/icon-192.png" className="mb-4 shadow-2xl" alt="VanGuard" style={{width:'80px',height:'80px',borderRadius:'20px'}}/> <h1 className="text-3xl font-black text-white mb-1">Van<span className="text-teal">Guard</span></h1> <p className="text-white/40 text-sm mb-8">Stay compliant. Keep moving.</p> <div className="w-full max-w-sm bg-white rounded-2xl p-6 shadow-2xl"> <h2 className="font-black text-navy text-lg mb-1">Choose a new password</h2> <p className="text-sm text-gray-400 mb-4">Make it at least 6 characters.</p> <ErrMsg msg={err}/> {ok?<OkMsg msg={ok}/>:<> <Input label="New password" value={pass} onChange={setPass} type="password" placeholder="Min. 6 characters"/> <Input label="Confirm password" value={confirm} onChange={setConfirm} type="password" placeholder="Repeat password"/> <Btn onClick={submit} loading={loading}>Set new password</Btn> </>} </div> </div> ); }; // ── HELP DRAWER ─────────────────────────────────────────────────────────────── const HELP={ dashboard:{title:'Dashboard',emoji:'🏠',steps:['Your daily checklist shows what needs completing before you trade.','Aim for 100% every day — tap any incomplete item to go straight there.','Come back at end of day to complete your closing and cleaning checks.','The percentage is based on diary, temps, cleaning and equipment checks.'],tip:'An EHO inspector wants to see consistent daily records. The dashboard shows at a glance whether you\'re on track.'}, diary:{title:'Daily Diary',emoji:'📋',steps:['Complete Opening checks before you start serving.','Closing checks now include gas/power off and unit secured — not cleaning (that\'s in the Cleaning tab).','Sign off the Cleaning schedule separately after your clean.','Log your trading location — EHOs cross-reference pitch records.','Tap NA on any item that doesn\'t apply to your setup. It won\'t block completion and is remembered between sessions.'],tip:'Food Standards Agency requires written records of your daily checks. Your diary is your evidence. Consistent, complete entries are more convincing than sporadic ones.'}, temp:{title:'Temperature Control',emoji:'🌡️',steps:['Enter the temperature in the box next to each appliance and tap Log — takes about 5 seconds.','Log at least twice a day: once at start of service, once during service.','If a reading fails, a note box appears — always record what action you took.','Use Add Appliance to add fridges, freezers or hot-hold units. Tap Remove on any you don\'t use.','Made a mistake? Tap × on a today\'s reading to delete it. Yesterday\'s readings are locked to protect your audit trail.'],tip:'Temperature control is the #1 thing EHOs check. Cold food must be ≤8°C, hot food ≥63°C. Two readings per day is the legal minimum — more is better.'}, van:{title:'Equipment & Safety',emoji:'🔧',steps:['Complete the Equipment check every day before opening.','Tap NA on any item that doesn\'t apply — for example, gas connections if you\'re electric-only. This persists between sessions.','Log LPG inspections monthly — legally required if you use gas.','Record water tank refills under Water.','Log every trading location under Pitch.'],tip:'Mobile caterers must demonstrate their unit is maintained and safe. These records are checked at every inspection — they show you take safety seriously.'}, records:{title:'Records',emoji:'🛡️',steps:['Use the period buttons (Today / This week / Month / All time) to filter by date range.','Use the log type tabs to browse Temps, Diary, Cleaning, Equipment, LPG, Water or Pitches.','Tap Export to PDF to open a print-ready EHO pack in a new tab.','Tap Print / Save as PDF in the export page, then hand it to the inspector.'],tip:'Handing an inspector a complete, organised pack at the start of a visit creates an excellent first impression and often reduces the time they spend on site.'}, account:{title:'Account',emoji:'👤',steps:['Keep your business name and local authority up to date — both appear on your EHO pack.','Update your unit type (van, trailer, stall etc.) and turn LPG checks on or off here.','Use Security to change your password.'],tip:'Your local authority name appears on every EHO pack you export. Make sure it matches the council that actually inspects you.'}, }; const HelpDrawer=({screen,open,onClose})=>{ const c=HELP[screen]||HELP.dashboard; return ( <> {/* Overlay */} {open&&<div className="fixed inset-0 bg-black/40 z-40" onClick={onClose}/>} {/* Drawer */} <div style={{transform:open?'translateX(0)':'translateX(100%)',transition:'transform 0.3s cubic-bezier(0.4,0,0.2,1)'}} className="fixed top-0 right-0 h-full w-80 max-w-full bg-white z-50 shadow-2xl flex flex-col"> {/* Drawer header */} <div className="bg-navy px-5 pt-14 pb-5 flex-shrink-0"> <div className="flex items-center justify-between mb-1"> <div className="flex items-center gap-2"> <span className="text-2xl">{c.emoji}</span> <h3 className="font-black text-white text-lg">{c.title}</h3> </div> <button onClick={onClose} className="w-8 h-8 rounded-full bg-white/10 text-white font-bold text-lg flex items-center justify-center">✕</button> </div> <p className="text-white/50 text-xs">Tips for this screen</p> </div> {/* Drawer content */} <div className="flex-1 overflow-y-auto p-5"> <p className="text-xs font-bold text-gray-400 uppercase tracking-wider mb-4">How to use</p> <div className="space-y-4 mb-6"> {c.steps.map((step,i)=>( <div key={i} className="flex gap-3"> <div className="w-7 h-7 bg-teal rounded-full flex items-center justify-center flex-shrink-0 mt-0.5 shadow-sm"> <span className="text-white text-xs font-black">{i+1}</span> </div> <p className="text-sm text-gray-700 leading-relaxed pt-1">{step}</p> </div> ))} </div> <div className="bg-navy rounded-2xl p-4"> <p className="text-xs font-bold text-teal uppercase tracking-wide mb-2">🛡 EHO Tip</p> <p className="text-sm text-white/80 leading-relaxed">{c.tip}</p> </div> </div> {/* Footer */} <div className="p-5 border-t border-gray-100 flex-shrink-0"> <Btn onClick={onClose} variant="navy">Got it</Btn> </div> </div> </> ); }; // ── INSTALL PROMPT ──────────────────────────────────────────────────────────── const InstallPrompt = ({userId}) => { const [show,setShow]=useState(false); const [isIOS,setIsIOS]=useState(false); const [deferred,setDeferred]=useState(null); const key=`vg_install_asked_${userId}`; useEffect(()=>{ if(localStorage.getItem(key)) return; if(window.matchMedia('(display-mode: standalone)').matches) return; if(window.navigator.standalone) return; const ios=/iphone|ipad|ipod/i.test(navigator.userAgent); setIsIOS(ios); const onPrompt=e=>{e.preventDefault();setDeferred(e);}; window.addEventListener('beforeinstallprompt',onPrompt); const t=setTimeout(()=>setShow(true), 45000); return ()=>{window.removeEventListener('beforeinstallprompt',onPrompt);clearTimeout(t);}; },[]); const dismiss=()=>{setShow(false);localStorage.setItem(key,'1');}; const install=async()=>{ if(deferred){deferred.prompt();await deferred.userChoice;setDeferred(null);} dismiss(); }; if(!show) return null; return ( <div style={{position:'fixed',bottom:0,left:0,right:0,zIndex:100,padding:'0 12px 20px',maxWidth:'512px',margin:'0 auto'}} className="fade-in"> <div className="bg-white rounded-2xl shadow-2xl border border-gray-100 overflow-hidden"> <div className="bg-navy px-4 py-3 flex items-center gap-3"> <div className="w-10 h-10 bg-teal rounded-xl flex items-center justify-center flex-shrink-0"> <VanIcon size={28} wheelColor="#0D7377"/> </div> <div className="flex-1"> <p className="text-white font-black text-sm leading-none">Van<span className="text-teal">Guard</span></p> <p className="text-white/40 text-xs mt-0.5">Food safety compliance</p> </div> <button onClick={dismiss} className="text-white/30 hover:text-white/60 text-xl leading-none w-8 h-8 flex items-center justify-center">×</button> </div> <div className="p-4"> <p className="font-bold text-navy text-sm mb-1">Add to your Home Screen</p> <p className="text-xs text-gray-400 leading-relaxed mb-3">Get instant access to your food safety records — works offline too.</p> {isIOS&&( <div className="bg-teal-light rounded-xl p-3 text-xs text-gray-600 leading-relaxed mb-3"> In Safari: tap <strong className="text-teal">Share ⬆</strong> at the bottom, then <strong className="text-teal">Add to Home Screen</strong> </div> )} <div className="flex gap-2"> {!isIOS&&<Btn onClick={install} variant="primary" size="sm" className="flex-1">Install App</Btn>} <Btn onClick={dismiss} variant="ghost" size="sm" className={isIOS?'w-full':'flex-1'}>Not now</Btn> </div> </div> </div> </div> ); }; const HelpFab=({onClick})=>( <div style={{position:'fixed',right:'16px',top:'50%',transform:'translateY(-50%)',zIndex:39,width:'44px',height:'44px'}}> <span className="fab-ring"/> <span className="fab-ring fab-ring-2"/> <button onClick={onClick} className="fab-glow relative w-11 h-11 bg-teal rounded-full flex flex-col items-center justify-center gap-0.5 active:scale-95" style={{border:'none',cursor:'pointer',width:'44px',height:'44px'}}> <span className="text-white font-black text-base leading-none">?</span> <span style={{color:'rgba(255,255,255,0.75)',fontSize:'8px',fontWeight:'800',letterSpacing:'0.5px',lineHeight:1}}>TIPS</span> </button> </div> ); // ── OFFLINE BANNER ──────────────────────────────────────────────────────────── const OfflineBanner=()=>{ const [online,setOnline]=useState(navigator.onLine); const [syncing,setSyncing]=useState(false); const [flash,setFlash]=useState(''); useEffect(()=>{ const goOn=async()=>{ setOnline(true); if(_getQ().length>0){ setSyncing(true); const n=await replayOfflineQueue(); setSyncing(false); if(n>0){setFlash(`✓ ${n} record${n!==1?'s':''} synced`);setTimeout(()=>setFlash(''),3000);} } }; const goOff=()=>setOnline(false); window.addEventListener('online',goOn); window.addEventListener('offline',goOff); return()=>{window.removeEventListener('online',goOn);window.removeEventListener('offline',goOff);}; },[]); const bar=(bg,msg)=>( <div className="fixed top-0 left-0 right-0 z-[100] max-w-lg mx-auto pointer-events-none"> <div className={`${bg} text-white text-xs font-bold py-1.5 text-center`}>{msg}</div> </div> ); if(flash) return bar('bg-green-500',flash); if(syncing) return bar('bg-teal','Syncing offline records...'); if(!online) return bar('bg-amber-500','Offline — records will sync when reconnected'); return null; }; // ── TRIAL BANNER (last 7 days) ──────────────────────────────────────────────── const TrialBanner=({trialLeft,onUpgrade})=>{ if(trialLeft<=0||trialLeft>7) return null; const urgent=trialLeft<=3; return ( <div className={`fixed left-0 right-0 z-30 max-w-lg mx-auto flex items-center justify-between px-4 py-2 ${urgent?'bg-red-500':'bg-amber-500'}`} style={{top:'56px'}}> <p className="text-white text-xs font-bold"> {urgent?`Trial ends in ${trialLeft} day${trialLeft!==1?'s':''}!`:`${trialLeft} days left on your free trial`} </p> <button onClick={onUpgrade} className="bg-white text-navy text-xs font-black px-3 py-1 rounded-full active:scale-95 transition-transform ml-3 flex-shrink-0"> Upgrade </button> </div> ); }; // ── START TRIAL SCREEN (card required before first use) ────────────────────── const StartTrialScreen=({userId,email,onLogout})=>{ const [loading,setLoading]=useState(false); const [err,setErr]=useState(''); const [plan,setPlan]=useState('monthly'); const startTrial=async()=>{ setErr(''); setLoading(true); try{ const tok=_getS()?.access_token; const res=await fetch('/.netlify/functions/create-checkout',{ method:'POST', headers:{'Content-Type':'application/json','Authorization':`Bearer ${tok}`}, body:JSON.stringify({userId,email,trial:true,plan}), }); const{url,error}=await res.json(); if(error) throw new Error(error); window.location.href=url; }catch(e){setErr('Could not start your trial: '+e.message);setLoading(false);} }; return ( <div className="min-h-screen bg-navy flex flex-col items-center justify-center p-5 pt-16"> <div className="w-full max-w-sm fade-in"> <div className="text-center mb-7"> <img src="/icon-192.png" className="w-16 h-16 mx-auto rounded-2xl shadow-2xl mb-4" alt="VanGuard" style={{borderRadius:'18px'}}/> <h1 className="text-2xl font-black text-white leading-tight">Start your<br/>14-day free trial</h1> <p className="text-white/50 text-sm mt-2 leading-relaxed">Full access to every feature. We'll take your card to hold your place — you won't be charged until day 15.</p> </div> <div className="bg-white rounded-2xl p-5 mb-4"> <div className="grid grid-cols-2 gap-2 mb-4"> <button onClick={()=>setPlan('monthly')} className={`rounded-xl border-2 p-3 text-left transition-all ${plan==='monthly'?'border-teal bg-teal-light':'border-gray-100 bg-gray-50'}`}> <p className="text-[10px] font-bold text-gray-500 uppercase tracking-wide">Monthly</p> <p className="font-black text-navy text-lg leading-tight">£7.99<span className="text-xs font-normal text-gray-400">/mo</span></p> </button> <button onClick={()=>setPlan('yearly')} className={`relative rounded-xl border-2 p-3 text-left transition-all ${plan==='yearly'?'border-teal bg-teal-light':'border-gray-100 bg-gray-50'}`}> <span className="absolute -top-2 right-2 text-[9px] font-black bg-teal text-white px-1.5 py-0.5 rounded-full">SAVE 27%</span> <p className="text-[10px] font-bold text-gray-500 uppercase tracking-wide">Yearly</p> <p className="font-black text-navy text-lg leading-tight">£69.99<span className="text-xs font-normal text-gray-400">/yr</span></p> </button> </div> <div className="flex items-baseline gap-1 mb-1"> <span className="text-3xl font-black text-navy">£0</span> <span className="text-gray-400 text-sm">for 14 days</span> </div> <p className="text-xs text-gray-500 mb-4">{plan==='yearly'?'then £69.99/year':'then £7.99/month'} · cancel anytime before day 15 and pay nothing</p> {[ 'Unlimited daily diary, temperature & cleaning logs', 'Van, LPG & pitch safety checks', 'One-tap EHO inspection export', 'Daily reminder notifications', ].map((f,i)=>( <div key={i} className="flex items-center gap-2 py-1.5"> <div className="w-5 h-5 bg-teal-light rounded-full flex items-center justify-center flex-shrink-0"> <Icon name="check" size={11} color="#0D7377"/> </div> <span className="text-sm text-gray-700">{f}</span> </div> ))} </div> {err&&<div className="bg-red-500/10 border border-red-400/30 rounded-xl px-4 py-3 mb-3"><p className="text-red-200 text-xs">{err}</p></div>} <Btn variant="primary" onClick={startTrial} loading={loading}>Start free trial</Btn> <p className="text-center text-white/30 text-[11px] mt-3 leading-relaxed">Secure payment by Stripe · No charge for 14 days · Cancel anytime</p> <button onClick={onLogout} className="w-full text-center text-white/30 text-xs mt-4 py-1">Sign out</button> </div> </div> ); }; // ── PAYWALL SCREEN (trial expired) ─────────────────────────────────────────── const PaywallScreen=({userId,profile})=>{ const [subLoading,setSubLoading]=useState(''); const [portalLoading,setPortalLoading]=useState(false); const subscribe=async(plan)=>{ setSubLoading(plan); try{ const tok=_getS()?.access_token; const res=await fetch('/.netlify/functions/create-checkout',{ method:'POST', headers:{'Content-Type':'application/json','Authorization':`Bearer ${tok}`}, body:JSON.stringify({userId,email:profile?.email||_getS()?.user?.email,trial:false,plan}), }); const{url,error}=await res.json(); if(error) throw new Error(error); window.location.href=url; }catch(e){alert('Could not start checkout: '+e.message);setSubLoading('');} }; const openPortal=async()=>{ setPortalLoading(true); try{ const tok=_getS()?.access_token; const res=await fetch('/.netlify/functions/create-portal',{ method:'POST', headers:{'Content-Type':'application/json','Authorization':`Bearer ${tok}`}, body:JSON.stringify({userId}), }); const{url,error}=await res.json(); if(error) throw new Error(error); window.location.href=url; }catch(e){alert('Could not open the billing portal: '+e.message);setPortalLoading(false);} }; const hasStripe=!!profile?.stripe_customer_id; return ( <div className="min-h-screen bg-navy flex flex-col items-center justify-center p-5 pt-16"> <div className="w-full max-w-sm fade-in"> <div className="text-center mb-7"> <img src="/icon-192.png" className="w-16 h-16 mx-auto rounded-2xl shadow-2xl mb-4" alt="VanGuard" style={{borderRadius:'18px'}}/> <h1 className="text-2xl font-black text-white leading-tight">Your free trial<br/>has ended</h1> <p className="text-white/50 text-sm mt-2 leading-relaxed">Choose a plan to keep your records and stay EHO-ready.</p> </div> <div className="bg-white rounded-2xl p-4 mb-3 relative overflow-hidden" style={{border:'2px solid #14B8A6'}}> <div className="absolute top-3 right-3 text-[10px] font-black bg-teal text-white px-2 py-0.5 rounded-full">SAVE 27%</div> <p className="font-black text-navy text-sm mb-0.5">Yearly</p> <div className="flex items-baseline gap-1 mb-1"> <span className="text-3xl font-black text-navy">£69.99</span> <span className="text-gray-400 text-sm">/year</span> </div> <p className="text-xs text-gray-500 mb-4">Every feature · best value · cancel any time.</p> <Btn variant="primary" onClick={()=>subscribe('yearly')} loading={subLoading==='yearly'}>Subscribe Yearly</Btn> </div> <div className="bg-white/10 rounded-2xl p-4 mb-6"> <p className="font-black text-white text-sm mb-0.5">Monthly</p> <div className="flex items-baseline gap-1 mb-1"> <span className="text-3xl font-black text-white">£7.99</span> <span className="text-white/40 text-sm">/month</span> </div> <p className="text-xs text-white/40 mb-4">Cancel any time.</p> <Btn variant="outline" onClick={()=>subscribe('monthly')} loading={subLoading==='monthly'}>Subscribe Monthly</Btn> </div> {hasStripe&&( <button onClick={openPortal} disabled={portalLoading} className="w-full text-center text-white/50 text-xs mb-4 py-1 underline"> {portalLoading?'Opening…':'Manage billing or update your card'} </button> )} <p className="text-center text-white/25 text-xs leading-relaxed">Your data is safe and waiting.</p> </div> </div> ); }; // ── APP ─────────────────────────────────────────────────────────────────────── const App = () => { const [session,setSession]=useState(null); const [profile,setProfile]=useState(null); const [screen,setScreen]=useState('dashboard'); const [appLoading,setAppLoading]=useState(true); const [showOnboarding,setShowOnboarding]=useState(false); const [showHelp,setShowHelp]=useState(false); const [recoveryToken,setRecoveryToken]=useState(null); const [checkoutFlash,setCheckoutFlash]=useState(''); const [showLanding,setShowLanding]=useState(true); const [authMode,setAuthMode]=useState('register'); useEffect(()=>{ const qs=new URLSearchParams(window.location.search); // Store referral code for use at sign-up const ref=qs.get('ref'); if(ref) localStorage.setItem('vg_ref',ref); if(qs.get('checkout')==='success'){ setCheckoutFlash('success'); setScreen('account'); window.history.replaceState(null,'',window.location.pathname); } else if(qs.get('checkout')==='cancelled'){ setCheckoutFlash('cancelled'); window.history.replaceState(null,'',window.location.pathname); } else if(qs.get('screen')==='account'){ // Returning from the Stripe billing portal. setScreen('account'); window.history.replaceState(null,'',window.location.pathname); } const hash=window.location.hash; if(hash.includes('type=recovery')&&hash.includes('access_token')){ const params=new URLSearchParams(hash.slice(1)); const token=params.get('access_token'); if(token){setRecoveryToken(token);window.history.replaceState(null,'',window.location.pathname);setAppLoading(false);return;} } sb.auth.getSession().then(({data:{session}})=>{ setSession(session); if(session) loadProfile(session.user.id); else setAppLoading(false); }).catch(()=>setAppLoading(false)); const {data:{subscription}}=sb.auth.onAuthStateChange(async(_e,session)=>{ setSession(session); if(session) loadProfile(session.user.id); else {setProfile(null);setShowLanding(true);setAppLoading(false);} }); const IDLE_MS=30*60*1000; let idleTimer=null; const resetIdle=()=>{ clearTimeout(idleTimer); idleTimer=setTimeout(()=>{ sb.auth.signOut(); },IDLE_MS); }; const events=['mousemove','mousedown','touchstart','keydown','scroll']; events.forEach(e=>window.addEventListener(e,resetIdle,{passive:true})); resetIdle(); return ()=>{ subscription.unsubscribe(); clearTimeout(idleTimer); events.forEach(e=>window.removeEventListener(e,resetIdle)); }; },[]); const loadProfile=async(userId)=>{ try{ const timeout=new Promise((_,rej)=>setTimeout(()=>rej(new Error('timeout')),8000)); const{data}=await Promise.race([ sb.from('profiles').select('*').eq('id',userId).maybeSingle(), timeout ]); setProfile(data); hydrateChecklists(userId,data?.custom_checklists); if(data?.onboarded) localStorage.setItem('vg_ob_'+userId,'1'); } catch(e){ console.error('loadProfile error:',e); _saveS(null); setSession(null); } finally { setAppLoading(false); } }; if(appLoading) return ( <div className="min-h-screen bg-navy flex flex-col items-center justify-center gap-5"> <img src="/icon-192.png" className="w-24 h-24 rounded-3xl shadow-2xl" alt="VanGuard" style={{borderRadius:'22px'}}/> <div> <p className="text-white font-black text-2xl text-center leading-none">Van<span className="text-teal">Guard</span></p> <p className="text-white/30 text-xs text-center mt-1 uppercase tracking-widest">Stay compliant. Keep moving.</p> </div> <div className="w-6 h-6 border-2 border-white/20 border-t-white rounded-full animate-spin"/> </div> ); if(recoveryToken) return <ResetPasswordScreen token={recoveryToken} onDone={()=>setRecoveryToken(null)}/>; if(!session) return showLanding ? <LandingPage onGetStarted={(m)=>{setAuthMode(m);setShowLanding(false);}}/> : <AuthScreen initialMode={authMode} onBack={()=>setShowLanding(true)}/>; if(!session?.user?.id){_saveS(null);setSession(null);return null;} const userId=session.user.id; const status=profile?.subscription_status; const isLifetime=status==='lifetime'; const isActive=status==='active'; const isTrialing=status==='trialing'; const hasStripe=!!profile?.stripe_customer_id; const hasAccess=isLifetime||isActive||isTrialing; const trialDays=profile?.trial_start?Math.floor((new Date()-new Date(profile.trial_start))/86400000):0; const trialLeft=isTrialing?Math.max(0,14-trialDays):0; // Signed in but never put a card on file → needs to start the card-required trial. const needsTrial=!!profile&&!hasAccess&&!hasStripe&&checkoutFlash!=='success'; // Had a card but the subscription lapsed. const isExpired=!!profile&&hasStripe&&(status==='past_due'||status==='cancelled'); // 1) Force a one-time onboarding before anything else. const needsOnboarding=!!profile&&!profile.onboarded&&!localStorage.getItem('vg_ob_'+userId); if(needsOnboarding) return ( <OnboardingWizard userId={userId} profile={profile} onComplete={p=>{setProfile(p);}}/> ); // 2) Then the card-required trial. if(needsTrial) return ( <StartTrialScreen userId={userId} email={profile?.email||session?.user?.email} onLogout={()=>sb.auth.signOut()}/> ); return ( <div className="lg:flex lg:items-stretch min-h-screen"> <DesktopSidebar screen={screen} onChange={setScreen} profile={profile} onHelp={()=>setShowHelp(true)}/> <div className="app-shell max-w-lg mx-auto lg:max-w-none lg:mx-0 lg:flex-1 relative min-h-screen"> <OfflineBanner/> <div className="lg:hidden"><TopNav screen={screen} onChange={setScreen} profile={profile}/></div> <TrialBanner trialLeft={trialLeft} onUpgrade={()=>setScreen('account')}/> {checkoutFlash==='success'&&<div className="fixed left-0 right-0 z-40 max-w-lg mx-auto px-4 pt-3" style={{top:trialLeft>0&&trialLeft<=7?'96px':'56px'}}> <div className="bg-green-500 text-white text-sm font-semibold px-4 py-3 rounded-xl flex items-center justify-between shadow-lg"> <span>Subscription active!</span> <button onClick={()=>setCheckoutFlash('')} className="ml-3 opacity-70 text-lg leading-none">x</button> </div> </div>} {checkoutFlash==='cancelled'&&<div className="fixed top-14 left-0 right-0 z-40 max-w-lg mx-auto px-4 pt-3"> <div className="bg-gray-600 text-white text-sm px-4 py-3 rounded-xl flex items-center justify-between shadow-lg"> <span>Checkout cancelled.</span> <button onClick={()=>setCheckoutFlash('')} className="ml-3 opacity-70 text-lg leading-none">x</button> </div> </div>} <div className="vg-content lg:max-w-3xl lg:mx-auto"> {isExpired&&screen!=='account'?( <PaywallScreen userId={userId} profile={profile}/> ):( <> {screen==='dashboard'&&<Dashboard profile={profile} userId={userId} onNav={setScreen}/>} {screen==='diary'&&<DiaryScreen userId={userId} profile={profile}/>} {screen==='temp'&&<TempScreen userId={userId}/>} {screen==='van'&&<VanScreen userId={userId} profile={profile}/>} {screen==='records'&&<RecordsScreen userId={userId} profile={profile}/>} {screen==='account'&&<AccountScreen userId={userId} profile={profile} onUpdate={p=>{setProfile(p);}}/>} </> )} </div> <div className="lg:hidden"><HelpFab onClick={()=>setShowHelp(true)}/></div> <HelpDrawer screen={screen} open={showHelp} onClose={()=>setShowHelp(false)}/> <InstallPrompt userId={userId}/> </div> </div> ); }; ReactDOM.createRoot(document.getElementById('root')).render(<App/>);
