const { useState, useEffect, useRef } = React; // ─── SUPABASE CONFIG ─── const SUPABASE_URL = "https://xqkouxndymijvlvnhscq.supabase.co"; const SUPABASE_KEY = "sb_publishable_JPzdZVVKELNCQqPWpullAg_x8Xi5ktM"; // Simple Supabase client const sb = { headers: (token) => ({ "Content-Type": "application/json", "apikey": SUPABASE_KEY, "Authorization": `Bearer ${token || SUPABASE_KEY}`, }), auth: { signUp: async (email, password, fullName) => { const r = await fetch(`${SUPABASE_URL}/auth/v1/signup`, { method: "POST", headers: { "Content-Type": "application/json", "apikey": SUPABASE_KEY }, body: JSON.stringify({ email, password, data: { full_name: fullName } }), }); return r.json(); }, signIn: async (email, password) => { const r = await fetch(`${SUPABASE_URL}/auth/v1/token?grant_type=password`, { method: "POST", headers: { "Content-Type": "application/json", "apikey": SUPABASE_KEY }, body: JSON.stringify({ email, password }), }); return r.json(); }, getUser: async (token) => { const r = await fetch(`${SUPABASE_URL}/auth/v1/user`, { headers: { "apikey": SUPABASE_KEY, "Authorization": `Bearer ${token}` }, }); return r.json(); }, }, from: (table, token) => ({ select: async (query = "*", filters = "") => { const r = await fetch(`${SUPABASE_URL}/rest/v1/${table}?select=${query}${filters}`, { headers: sb.headers(token) }); return r.json(); }, insert: async (data) => { const r = await fetch(`${SUPABASE_URL}/rest/v1/${table}`, { method: "POST", headers: { ...sb.headers(token), "Prefer": "return=representation" }, body: JSON.stringify(data), }); return r.json(); }, update: async (data, match) => { const r = await fetch(`${SUPABASE_URL}/rest/v1/${table}?${match}`, { method: "PATCH", headers: { ...sb.headers(token), "Prefer": "return=representation" }, body: JSON.stringify(data), }); return r.json(); }, delete: async (match) => { await fetch(`${SUPABASE_URL}/rest/v1/${table}?${match}`, { method: "DELETE", headers: sb.headers(token), }); }, }), }; // ─── CONSTANTS ─── const REDLINE_FLOOR = 500; const SHINGLE_COLORS = ["Charcoal","Weathered Wood","Hickory","Barkwood","Pewter Gray","Slate","Shakewood","Williamsburg Gray","Hunter Green","Mission Brown","Patriot Red","Oyster Gray","Driftwood","Fox Hollow Gray","Custom"]; const DRIP_EDGE_COLORS = ["White","Brown","Black","Charcoal Gray","Weathered Wood","Musket Brown","Royal Brown","Tuxedo Gray","Almond","Custom"]; const fmt = (n) => { if (n == null || isNaN(n)) return "$0.00"; return new Intl.NumberFormat("en-US",{style:"currency",currency:"USD"}).format(n); }; // ─── THEME ─── // Theme — matches westpeakroofing.com brand tokens (Utah heritage earth tones). // Source palette: --color-peak-* CSS variables from the live marketing site. const T = { bg:"#fafafa", // peak-bg bgCard:"#ffffff", // white cards on off-white bg for subtle elevation bgInput:"#f5ecd6", // peak-cream — soft surface for inputs/secondary border:"#ebe0c0", // peak-cream-dark — subtle borders borderStrong:"#2e2a27", // peak-ink — strong border where needed accent:"#565132", // peak-olive — brand accent (heritage olive) accentDark:"#3e3a24", // peak-olive-dark — pressed/hover accentLight:"#f5ecd6", // peak-cream — accent surface backdrop text:"#2e2a27", // peak-ink — primary text textSec:"#4a423d", // peak-ink-soft — secondary text textDim:"#6d6051", // peak-muted — tertiary text danger:"#a13a2a", // warm brick (fits earth palette, not bright red) dangerBg:"#f3d6cf", // soft brick wash warn:"#b99974", // peak-tan-dark — secondary/warn accent tan:"#d4b594", // peak-tan tanLight:"#e6cca8", // peak-tan-light }; // ─── ICONS ─── const IconBack=({s=18})=>; const IconRight=({s=18})=>; const IconPlus=({s=18})=>; const IconLock=({s=14})=>; const IconTrash=({s=16})=>; const IconPrint=({s=18})=>; const IconShield=({s=18})=>; const IconCheck=({s=16})=>; const IconAlert=({s=16})=>; const IconPen=({s=18})=>; const IconHome=({s=20})=>; const IconUsers=({s=18})=>; const IconSettings=({s=18})=>; const IconLogout=({s=18})=>; // ─── COMPONENTS ─── const Toggle=({on,onToggle,label,disabled=false})=>(); const NumInput=({value,onChange,label,prefix="$",placeholder="0",small=false,disabled=false})=>(
{label&&
{label}
}
{prefix&&{prefix}}onChange(parseFloat(e.target.value)||0)} disabled={disabled} placeholder={placeholder} style={{border:"none",outline:"none",background:"transparent",width:"100%",fontSize:15,fontWeight:600,color:T.text,fontVariantNumeric:"tabular-nums",cursor:disabled?"not-allowed":"text"}}/>
); const Card=({children,style={}})=>(
{children}
); const SectionLabel=({children,icon})=>(
{icon}{children}
); const NavBar=({title,onBack,rightAction})=>(
{onBack?:
}
{title}
{rightAction||
}
); const LineItem=({label,value,color=T.text,sub=false})=>(
{label}{value}
); const OOPBox=({c,activeJob})=>(
Homeowner Out of Pocket
{c.roofGapTotal>0&&!c.insuranceFullyCovered&&
Roof Cost Gap{fmt(c.roofGapTotal)}
}
Your Deductible{fmt(activeJob.deductible)}
{activeJob.vent_upgrade_enabled&&<>
Ventilation Upgrade{fmt(c.ventTotalSell)}
{c.ventInsuranceCredit>0&&
Insurance vent credit−{fmt(c.ventInsuranceCredit)}
}} {activeJob.gutters_enabled&&<>
Gutters{fmt(activeJob.gutters_lump_sum)}
{c.gutterInsCredit>0&&
Insurance gutter credit−{fmt(c.gutterInsCredit)}
}}
Total Out of Pocket{fmt(c.homeownerOOP)}
); const SignaturePad = ({ onSign }) => { const canvasRef = useRef(null); const drawing = useRef(false); const hasDrawn = useRef(false); const getPos = (e) => { const r = canvasRef.current.getBoundingClientRect(); const t = e.touches ? e.touches[0] : e; return { x: t.clientX - r.left, y: t.clientY - r.top }; }; const start = (e) => { e.preventDefault(); drawing.current = true; hasDrawn.current = true; const ctx = canvasRef.current.getContext("2d"); const p = getPos(e); ctx.beginPath(); ctx.moveTo(p.x, p.y); }; const move = (e) => { if (!drawing.current) return; e.preventDefault(); const ctx = canvasRef.current.getContext("2d"); const p = getPos(e); ctx.lineTo(p.x, p.y); ctx.strokeStyle = T.accent; ctx.lineWidth = 2.5; ctx.lineCap = "round"; ctx.stroke(); }; const end = () => { drawing.current = false; }; const clear = () => { const ctx = canvasRef.current.getContext("2d"); ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height); hasDrawn.current = false; }; // Touch handlers are registered natively with { passive: false } so preventDefault // actually fires on mobile. React's synthetic touch events are passive by default, // which silently no-ops preventDefault and lets the page scroll instead of drawing. useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const startTouch = (e) => start(e); const moveTouch = (e) => move(e); const endTouch = (e) => end(e); canvas.addEventListener("touchstart", startTouch, { passive: false }); canvas.addEventListener("touchmove", moveTouch, { passive: false }); canvas.addEventListener("touchend", endTouch); return () => { canvas.removeEventListener("touchstart", startTouch); canvas.removeEventListener("touchmove", moveTouch); canvas.removeEventListener("touchend", endTouch); }; }, []); return (
Sign below to agree to the amount shown above
); }; const PinModal=({onSuccess,onCancel})=>{const[pin,setPin]=useState("");const[error,setError]=useState(false);const ref=useRef(null);useEffect(()=>{if(ref.current)ref.current.focus()},[]);return(
Enter PIN
Access commission details
setPin(e.target.value.replace(/\D/g,""))} onKeyDown={(e)=>{if(e.key==="Enter"){if(pin===onSuccess.pin)onSuccess.fn();else{setError(true);setPin("");setTimeout(()=>setError(false),1500)}}}} style={{width:"100%",textAlign:"center",fontSize:32,fontWeight:700,fontVariantNumeric:"tabular-nums",letterSpacing:12,padding:"12px",border:`2px solid ${error?T.danger:T.border}`,borderRadius:12,background:T.bgInput,color:T.text,outline:"none",boxSizing:"border-box"}}/>{error&&
Incorrect PIN
}
)}; // ─── CALC FUNCTION ─── const calcJob = (job, pricing, ventPricing) => { if (!job || !pricing?.length) return {}; const shingle = pricing.find(p => p.shingle_type === job.shingle_type) || pricing[0]; const ridgeCost = ventPricing?.find(v => v.vent_type === "ridge")?.cost || 6; const boxCoverCost = ventPricing?.find(v => v.vent_type === "box_cover")?.cost || 20; // Strip credited line items from RCV before computing per-square shingle insurance. // Gutter D&R and turtle vent value are paid to the homeowner inside the ACV/dep // checks AND shown as credits on the OOP screen — counting them in insurancePerSq // too would credit the homeowner twice (the bug Dallin sensed on Carpenter). const creditedLineItems = (job.gutters_enabled ? (job.gutter_insurance_coverage || 0) : 0) + (job.vent_upgrade_enabled ? (job.turtle_vent_total_value || 0) : 0); const roofInsurance = Math.max(0, job.rcv - creditedLineItems); const insurancePerSq = job.squares > 0 ? roofInsurance / job.squares : 0; const roofGapPerSq = Math.max(0, job.sell_price_per_square - insurancePerSq); const roofGapTotal = roofGapPerSq * job.squares; const insuranceFullyCovered = insurancePerSq >= job.sell_price_per_square; const shingleCommission = (job.sell_price_per_square - shingle.cost) * job.squares; const ridgeTotal = job.vent_upgrade_enabled ? job.ridge_vent_sell_price * job.ridge_vent_qty : 0; const ridgeCommission = job.vent_upgrade_enabled ? (job.ridge_vent_sell_price - ridgeCost) * job.ridge_vent_qty : 0; const boxCoverTotal = job.vent_upgrade_enabled ? job.box_cover_sell_price * job.box_cover_qty : 0; const boxCoverCommission = job.vent_upgrade_enabled ? (job.box_cover_sell_price - boxCoverCost) * job.box_cover_qty : 0; const ventTotalSell = ridgeTotal + boxCoverTotal; const ventInsuranceCredit = job.turtle_vent_total_value; const ventOOP = job.vent_upgrade_enabled ? Math.max(0, ventTotalSell - ventInsuranceCredit) : 0; const ventCommission = ridgeCommission + boxCoverCommission; const gutterInsCredit = job.gutters_enabled ? job.gutter_insurance_coverage : 0; const gutterOOP = job.gutters_enabled ? Math.max(0, job.gutters_lump_sum - gutterInsCredit) : 0; const homeownerOOP = roofGapTotal + job.deductible + ventOOP + gutterOOP; const totalCommission = Math.max(0, shingleCommission) + Math.max(0, ventCommission); const totalJobValue = (job.sell_price_per_square * job.squares) + ventOOP + gutterOOP; const displayShingleColor = job.shingle_color === "Custom" ? job.shingle_color_custom : job.shingle_color; const displayDripEdge = job.drip_edge_color === "Custom" ? job.drip_edge_color_custom : job.drip_edge_color; return { shingle:{...shingle,name:shingle.display_name}, insurancePerSq, roofGapPerSq, roofGapTotal, insuranceFullyCovered, shingleCommission, ridgeTotal, ridgeCommission, boxCoverTotal, boxCoverCommission, ventTotalSell, ventInsuranceCredit, ventOOP, ventCommission, gutterInsCredit, gutterOOP, homeownerOOP, totalCommission, totalJobValue, displayShingleColor, displayDripEdge, ridgeCost, boxCoverCost }; }; // ─── MAIN APP ─── function App() { const [screen, setScreen] = useState("loading"); const [token, setToken] = useState(null); const [user, setUser] = useState(null); const [profile, setProfile] = useState(null); const [jobs, setJobs] = useState([]); const [activeJob, setActiveJob] = useState(null); const [pricing, setPricing] = useState([]); const [ventPricing, setVentPricing] = useState([]); const [allProfiles, setAllProfiles] = useState([]); const [showPin, setShowPin] = useState(false); const [showSig, setShowSig] = useState(false); const [signed, setSigned] = useState(false); const [loading, setLoading] = useState(false); const [error, setError] = useState(""); // Auth form state const [authMode, setAuthMode] = useState("login"); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [fullName, setFullName] = useState(""); const [businessName, setBusinessName] = useState(""); const [profilePin, setProfilePin] = useState(""); const [profileBname, setProfileBname] = useState(""); const [profileFullName, setProfileFullName] = useState(""); const [debugLog, setDebugLog] = useState([]); const addDebug = (msg) => setDebugLog(prev => [...prev, new Date().toLocaleTimeString() + ": " + msg]); // ─── JobNimbus import flow state ─── const [jnQuery, setJnQuery] = useState(""); const [jnResults, setJnResults] = useState([]); const [jnSearching, setJnSearching] = useState(false); const [jnSelectedJob, setJnSelectedJob] = useState(null); const [jnFiles, setJnFiles] = useState([]); const [jnFilesLoading, setJnFilesLoading] = useState(false); const [jnParsing, setJnParsing] = useState(false); const [jnParseResult, setJnParseResult] = useState(null); const [jnError, setJnError] = useState(""); // Debounced JN search — 300ms after typing stops useEffect(() => { if (screen !== "jn_import") return; let cancelled = false; setJnSearching(true); const t = setTimeout(async () => { try { const r = await fetch("/api/jn/jobs?q=" + encodeURIComponent(jnQuery)); const d = await r.json(); if (!cancelled) setJnResults(d.jobs || []); } catch (e) { if (!cancelled) setJnError("Search failed: " + e.message); } finally { if (!cancelled) setJnSearching(false); } }, 300); return () => { cancelled = true; clearTimeout(t); }; }, [jnQuery, screen]); // Auto-fetch files when a job is selected useEffect(() => { if (!jnSelectedJob) { setJnFiles([]); return; } let cancelled = false; setJnFilesLoading(true); (async () => { try { const r = await fetch("/api/jn/files?jnid=" + encodeURIComponent(jnSelectedJob.id)); const d = await r.json(); if (!cancelled) { // Sort: filenames containing "scope"/"estimate" to the top — those are usually the carrier estimate const files = (d.files || []).sort((a, b) => { const aScore = /scope|estimate|state farm|allstate|usaa|traveler|liberty|bear river/i.test(a.filename) ? 0 : 1; const bScore = /scope|estimate|state farm|allstate|usaa|traveler|liberty|bear river/i.test(b.filename) ? 0 : 1; return aScore - bScore; }); setJnFiles(files); } } catch (e) { if (!cancelled) setJnError("File list failed: " + e.message); } finally { if (!cancelled) setJnFilesLoading(false); } })(); return () => { cancelled = true; }; }, [jnSelectedJob]); // JN auto-upload status — flips through "uploading" → "success" | "failed" inside // the contract-sign flow. Surfaced as a toast on the Summary screen and as a // home-screen badge for admins (failed uploads = signed && jnid && !jn_uploaded_at). const [jnUploadStatus, setJnUploadStatus] = useState(null); // Reset transient upload toast when switching jobs so we don't show stale status. useEffect(() => { setJnUploadStatus(null); }, [activeJob?.id]); // Job Margin "Total Job Value" — typed by the rep, defaults to calcJob's existing // totalJobValue = (sell × squares) + ventOOP + gutterOOP. Same number the app has // always shown as "Total billed to homeowner"; tier click commits the back-solved sell. const [whatIfTotal, setWhatIfTotal] = useState(0); useEffect(() => { if (!activeJob?.id || !pricing?.length) return; const cc = calcJob(activeJob, pricing, ventPricing); setWhatIfTotal(cc.totalJobValue || 0); }, [activeJob?.id, pricing?.length]); const isAdmin = profile?.role === "admin"; const appStyle = { fontFamily:"'DM Sans','Helvetica Neue',system-ui,sans-serif", background:T.bg, minHeight:"100vh", color:T.text, maxWidth:520, margin:"0 auto" }; const fontLink = <> ; const inputStyle = {width:"100%",border:`1px solid ${T.border}`,borderRadius:10,padding:"12px",fontSize:15,fontFamily:"inherit",outline:"none",background:"#ffffff",color:T.text,boxSizing:"border-box"}; const btnPrimary = {width:"100%",padding:"15px",border:"none",borderRadius:12,background:T.accent,color:"#fff",fontSize:15,fontWeight:600,cursor:"pointer",fontFamily:"inherit",letterSpacing:"0.01em",boxShadow:"0 1px 3px rgba(46,42,39,0.10)"}; const fieldLabel = (t) =>
{t}
; // ─── INIT: check for saved session ─── useEffect(() => { const saved = localStorage.getItem("wp_token"); if (saved) { restoreSession(saved); } else setScreen("auth"); }, []); const restoreSession = async (t) => { try { addDebug("1. Getting user..."); const res = await sb.auth.getUser(t); addDebug("2. Got: " + JSON.stringify(res).substring(0, 150)); const u = res?.user || res; if (u?.id) { addDebug("3. User ID: " + u.id); setToken(t); setUser(u); addDebug("4. Fetching profile..."); let profiles = await sb.from("profiles", t).select("*", `&id=eq.${u.id}`); addDebug("5. Profiles: " + JSON.stringify(profiles).substring(0, 200)); if (!profiles || !Array.isArray(profiles) || profiles.length === 0) { addDebug("6. Creating profile..."); const isAdminUser = u.email === "dallinr@westpeakroofing.com"; const ins = await sb.from("profiles", t).insert({ id: u.id, email: u.email, full_name: u.user_metadata?.full_name || "", business_name: "", role: isAdminUser ? "admin" : "pending", }); addDebug("7. Insert: " + JSON.stringify(ins).substring(0, 200)); profiles = await sb.from("profiles", t).select("*", `&id=eq.${u.id}`); addDebug("8. Re-fetch: " + JSON.stringify(profiles).substring(0, 200)); } if (profiles?.[0]) { setProfile(profiles[0]); addDebug("9. Role: " + profiles[0].role); } else { addDebug("9. NO PROFILE FOUND"); } addDebug("10. Loading pricing..."); await loadPricing(t); if (profiles?.[0]?.role === "admin" || profiles?.[0]?.role === "rep") { addDebug("11. Loading jobs..."); await loadJobs(t, profiles[0]); addDebug("12. HOME"); setScreen("home"); } else if (profiles?.[0]?.role === "pending") { addDebug("11. PENDING"); setScreen("pending"); } else { addDebug("11. No role -> auth"); setScreen("debug"); } } else { addDebug("3. No user ID"); setScreen("debug"); } } catch (e) { addDebug("CATCH: " + e.message); setScreen("debug"); } }; const loadPricing = async (t) => { const p = await sb.from("pricing", t).select("*", "&order=sort_order"); if (Array.isArray(p)) setPricing(p); const vp = await sb.from("vent_pricing", t).select("*"); if (Array.isArray(vp)) setVentPricing(vp); }; const loadJobs = async (t, prof) => { const filter = prof?.role === "admin" ? "&order=created_at.desc" : `&rep_id=eq.${prof?.id}&order=created_at.desc`; // Embed rep profile for the admin "uploaded by" display (rep:profiles!jobs_rep_id_fkey(full_name)) const j = await sb.from("jobs", t).select("*,rep:profiles!jobs_rep_id_fkey(full_name)", filter); if (Array.isArray(j)) setJobs(j); }; // Format full_name as "F Lastname" (first-initial + last word). Falls back gracefully. const repShortName = (fullName) => { if (!fullName) return ""; const parts = String(fullName).trim().split(/\s+/); if (parts.length === 1) return parts[0]; return `${parts[0][0]} ${parts[parts.length - 1]}`; }; const loadAllProfiles = async () => { const p = await sb.from("profiles", token).select("*", "&order=created_at.desc"); if (Array.isArray(p)) setAllProfiles(p); }; const logout = () => { localStorage.removeItem("wp_token"); setToken(null); setUser(null); setProfile(null); setJobs([]); setActiveJob(null); setScreen("auth"); setEmail(""); setPassword(""); setFullName(""); setBusinessName(""); }; const handleAuth = async () => { setLoading(true); setError(""); setDebugLog([]); try { if (authMode === "login") { addDebug("Login: " + email); const res = await sb.auth.signIn(email, password); addDebug("Response: " + JSON.stringify(res).substring(0, 200)); const accessToken = res?.access_token || res?.session?.access_token; if (accessToken) { addDebug("Got token, restoring..."); localStorage.setItem("wp_token", accessToken); await restoreSession(accessToken); } else { setError("No token: " + JSON.stringify(res).substring(0, 200)); setScreen("debug"); } } else { const res = await sb.auth.signUp(email, password, fullName); console.log("SIGNUP RESPONSE:", JSON.stringify(res).substring(0, 500)); const accessToken = res?.access_token || res?.session?.access_token; const userId = res?.user?.id || res?.id; if (accessToken) { localStorage.setItem("wp_token", accessToken); if (userId) { await sb.from("profiles", accessToken).update( { business_name: businessName, full_name: fullName }, `id=eq.${userId}` ); } await restoreSession(accessToken); } else if (userId && !accessToken) { setError("Account created but no session. Email confirmation may still be on. Check Supabase Auth settings. Raw: " + JSON.stringify(res).substring(0, 150)); setAuthMode("login"); } else { setError("Signup response: " + JSON.stringify(res).substring(0, 200)); } } } catch (e) { setError("Connection error: " + e.message); } setLoading(false); }; const approveRep = async (id) => { await sb.from("profiles", token).update({ role: "rep" }, `id=eq.${id}`); await loadAllProfiles(); }; const denyRep = async (id) => { await sb.from("profiles", token).update({ role: "denied" }, `id=eq.${id}`); await loadAllProfiles(); }; const createJob = () => { const defaultShingle = pricing[1] || pricing[0]; const defaultRidge = ventPricing.find(v => v.vent_type === "ridge"); const defaultBox = ventPricing.find(v => v.vent_type === "box_cover"); setActiveJob({ rep_id: user.id, customer_name: "", property_address: "", trailer_placement: "", job_date: new Date().toISOString().split("T")[0], date_of_loss: null, claim_number: "", insurance_carrier: "", rcv:0, acv:0, deductible:0, depreciation:0, squares:0, ridge_length:0, turtle_vent_count:0, turtle_vent_total_value:0, gutter_insurance_coverage:0, shingle_type: defaultShingle?.shingle_type || "hdz", shingle_color:"", shingle_color_custom:"", drip_edge_color:"", drip_edge_color_custom:"", sell_price_per_square: 0, vent_upgrade_enabled:false, ridge_vent_qty:0, ridge_vent_sell_price: defaultRidge?.default_sell || 10, box_cover_qty:0, box_cover_sell_price: defaultBox?.default_sell || 25, gutters_enabled:false, gutters_lump_sum:0, signed:false, }); setSigned(false); setShowSig(false); setScreen("setup"); }; // ─── JobNimbus import: open the picker screen with a fresh job in state ─── const importFromJobNimbus = () => { const defaultShingle = pricing[1] || pricing[0]; const defaultRidge = ventPricing.find(v => v.vent_type === "ridge"); const defaultBox = ventPricing.find(v => v.vent_type === "box_cover"); setActiveJob({ rep_id: user.id, customer_name: "", property_address: "", trailer_placement: "", job_date: new Date().toISOString().split("T")[0], date_of_loss: null, claim_number: "", insurance_carrier: "", rcv:0, acv:0, deductible:0, depreciation:0, squares:0, ridge_length:0, turtle_vent_count:0, turtle_vent_total_value:0, gutter_insurance_coverage:0, shingle_type: defaultShingle?.shingle_type || "hdz", shingle_color:"", shingle_color_custom:"", drip_edge_color:"", drip_edge_color_custom:"", sell_price_per_square: 0, vent_upgrade_enabled:false, ridge_vent_qty:0, ridge_vent_sell_price: defaultRidge?.default_sell || 10, box_cover_qty:0, box_cover_sell_price: defaultBox?.default_sell || 25, gutters_enabled:false, gutters_lump_sum:0, signed:false, }); setSigned(false); setShowSig(false); setJnQuery(""); setJnResults([]); setJnSelectedJob(null); setJnFiles([]); setJnParseResult(null); setJnError(""); setScreen("jn_import"); }; // ─── Convert parser output (parser/parse-scope.js) into the West Peak Pro job shape. ─── const CARRIER_NAMES = { state_farm: "State Farm", bear_river: "Bear River Mutual", allstate: "Allstate", travelers: "Travelers", liberty_mutual: "Liberty Mutual", usaa: "USAA", uig: "United Insurance Group", generic_xactimate: "", scanned_pdf: "", }; const normalizeName = (n) => { if (!n) return ""; // "LAST, FIRST MIDDLE" → "First Middle Last"; uppercase-only → Title Case let s = n.trim(); if (/^[A-Z][A-Z, ]+$/.test(s) && s.includes(",")) { const [last, rest] = s.split(",").map(x => x.trim()); s = `${rest} ${last}`; } return s.replace(/\b([A-Z])([A-Z]+)/g, (_,a,b) => a + b.toLowerCase()); }; const parseLossDate = (d) => { if (!d) return null; const m = d.match(/^(\d{1,2})\/(\d{1,2})\/(\d{2,4})$/); if (!m) return null; const [, mo, da, yr] = m; const fullYr = yr.length === 2 ? `20${yr}` : yr; return `${fullYr}-${mo.padStart(2,"0")}-${da.padStart(2,"0")}`; }; const applyParseResult = (parsed) => { const f = parsed?.fields || {}; // Westpeak Pro's "ACV (1st Check)" field is the NET ACV paid by the // carrier after the deductible. The parser's f.acv is GROSS ACV // (= RCV − Depreciation), so subtract the deductible. Prefer the // parser's f.net_claim if available (State Farm extracts this directly). const netAcv = (f.net_claim != null) ? f.net_claim : ((f.acv != null && f.deductible != null) ? f.acv - f.deductible : null); setActiveJob(prev => { const nextRcv = f.rcv ?? prev.rcv; const nextSquares = f.squares ?? prev.squares; const next = { ...prev, // jnid links this job to its JobNimbus counterpart — needed for signed-contract auto-upload. jnid: jnSelectedJob?.id ?? prev.jnid, customer_name: normalizeName(f.customer_name) || prev.customer_name, property_address: f.property_address || prev.property_address, claim_number: f.claim_number || prev.claim_number, insurance_carrier: CARRIER_NAMES[parsed.carrier] || prev.insurance_carrier, date_of_loss: parseLossDate(f.date_of_loss) || prev.date_of_loss, rcv: nextRcv, acv: netAcv ?? prev.acv, deductible: f.deductible ?? prev.deductible, depreciation: f.depreciation ?? prev.depreciation, squares: nextSquares, turtle_vent_count: f.turtle_vent_quantity ?? prev.turtle_vent_count, turtle_vent_total_value: f.turtle_vent_total_value ?? prev.turtle_vent_total_value, gutter_insurance_coverage: f.gutter_rcv_credit ?? prev.gutter_insurance_coverage, }; // Mirror the u() auto-fill rule for the JN-parser path. if (!next._sell_price_user_edited && nextRcv > 0 && nextSquares > 0) { next.sell_price_per_square = nextRcv / nextSquares; } return next; }); }; const saveJobToDb = async (j) => { const job = j || activeJob; if (!job) return; // Strip the embedded rep relation before persisting — it's a read-only join, not a column. // Also strip the session-only _sell_price_user_edited flag — not a DB column. const { rep, _sell_price_user_edited, ...persistable } = job; setLoading(true); try { if (job.id) { await sb.from("jobs", token).update({...persistable, updated_at: new Date().toISOString()}, `id=eq.${job.id}`); } else { const res = await sb.from("jobs", token).insert(persistable); if (res?.[0]?.id) setActiveJob(prev => ({...prev, id: res[0].id})); } await loadJobs(token, profile); } catch (e) { console.error(e); } setLoading(false); }; const deleteJob = async (id) => { await sb.from("jobs", token).delete(`id=eq.${id}`); await loadJobs(token, profile); }; // Tampering guard: once a contract is signed, every Setup/Builder/Margin field // is frozen. The `u()` helper is the choke point for all UI edits, so gating // here is bulletproof against any single-screen UI bypass. const locked = !!activeJob?.signed; const u = (key, val) => { if (locked) return; // contract is signed — no further field edits setActiveJob(prev => { const j = {...prev, [key]: val}; if (key === "vent_upgrade_enabled" && val) { if (j.ridge_vent_qty === 0 && j.ridge_length > 0) j.ridge_vent_qty = Math.round(j.ridge_length); if (j.box_cover_qty === 0 && j.turtle_vent_count > 0) j.box_cover_qty = j.turtle_vent_count; } // Manual edit in the Sell Price field stops auto-tracking from insurance/sq. if (key === "sell_price_per_square") { j._sell_price_user_edited = true; } // Until the rep has manually entered a sell price, keep Sell Price = RCV / squares // (what the document shows). Recompute on any input that changes that ratio. if ((key === "rcv" || key === "squares") && !j._sell_price_user_edited && j.rcv > 0 && j.squares > 0) { j.sell_price_per_square = j.rcv / j.squares; } return j; }); }; const c = calcJob(activeJob, pricing, ventPricing); // ════════════════════════════════════════ // DEBUG // ════════════════════════════════════════ if (screen === "debug") return (
{fontLink}

Debug Log

{debugLog.length === 0 ?
No logs yet
: debugLog.map((log, i) => (
{log}
))}
{error &&
{error}
}
); // ════════════════════════════════════════ // LOADING // ════════════════════════════════════════ if (screen === "loading") return (
{fontLink}
West Peak Pro
Loading...
); // ════════════════════════════════════════ // AUTH (Login / Signup) // ════════════════════════════════════════ if (screen === "auth") return (
{fontLink}
West Peak Roofing

West Peak Pro

{authMode==="signup"&&
{fieldLabel("Full Name")}setFullName(e.target.value)} placeholder="Dallin Rowley" style={inputStyle}/>
} {authMode==="signup"&&
{fieldLabel("Business Name (for invoices)")}setBusinessName(e.target.value)} placeholder="Altaway Solutions" style={inputStyle}/>
}
{fieldLabel("Email")}setEmail(e.target.value)} placeholder="you@email.com" style={inputStyle}/>
{fieldLabel("Password")}setPassword(e.target.value)} placeholder="••••••••" style={inputStyle} onKeyDown={e=>{if(e.key==="Enter")handleAuth()}}/>
{error&&
{error}
}
); // ════════════════════════════════════════ // PENDING APPROVAL // ════════════════════════════════════════ if (screen === "pending") return (
{fontLink}

Account Pending

Your account has been created. An admin needs to approve your access before you can start using West Peak Pro.

); // ════════════════════════════════════════ // HOME // ════════════════════════════════════════ if (screen === "home") { return (
{fontLink}
West Peak Pro
{profile?.full_name||"Welcome"}
{profile?.business_name}{isAdmin?" · Admin":""}
{isAdmin&&} {isAdmin&&}
{isAdmin && (() => { const stalled = jobs.filter(j => j.signed && j.jnid && !j.jn_uploaded_at); if (stalled.length === 0) return null; return (
{stalled.length} contract{stalled.length===1?"":"s"} not uploaded to JobNimbus
Signed but missing from JN Documents tab: {stalled.slice(0,3).map(j=>j.customer_name||"Untitled").join(", ")}{stalled.length>3?` + ${stalled.length-3} more`:""}
); })()} {jobs.length > 0 && (
{isAdmin?"All Jobs":"My Jobs"} ({jobs.length})
{jobs.map(job => { const jc = calcJob(job, pricing, ventPricing); return (
{setActiveJob(job);setSigned(job.signed);setShowSig(false);setScreen("builder")}} style={{flex:1,background:T.bgCard,borderRadius:14,padding:"14px 16px",border:`1px solid ${T.border}`,cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"space-between"}}>
{job.customer_name||"Untitled"}
{job.job_date} · {fmt(jc.totalJobValue)} {isAdmin && job.rep?.full_name && · {repShortName(job.rep.full_name)}}
{job.signed&&}
); })}
)}
Data secured by Supabase
{showPin&&{setShowPin(false);setScreen("commission")}}} onCancel={()=>setShowPin(false)}/>}
); } // ════════════════════════════════════════ // ADMIN: User Management // ════════════════════════════════════════ if (screen === "admin") { const pending = allProfiles.filter(p => p.role === "pending"); const active = allProfiles.filter(p => p.role === "rep" || p.role === "admin"); const denied = allProfiles.filter(p => p.role === "denied"); return (
{fontLink} setScreen("home")}/>
{pending.length > 0 && ( }>Pending Approval ({pending.length}) {pending.map(p => (
{p.full_name||p.email}
{p.email}{p.business_name?` · ${p.business_name}`:""}
))} )} }>Active Team ({active.length}) {active.map(p => { const repJobs = jobs.filter(j => j.rep_id === p.id); const totalVal = repJobs.reduce((sum, j) => sum + (calcJob(j, pricing, ventPricing).totalJobValue || 0), 0); return (
{p.full_name||p.email} {p.role==="admin"&&ADMIN}
{p.business_name||p.email}
{repJobs.length} jobs
{fmt(totalVal)} total
); })} {denied.length > 0 && ( Denied ({denied.length}) {denied.map(p => (
{p.full_name||p.email}
))} )}
); } // ════════════════════════════════════════ // ADMIN: Pricing Management // ════════════════════════════════════════ if (screen === "pricing_admin") { const updatePricing = async (type, field, val) => { await sb.from("pricing", token).update({ [field]: val, updated_at: new Date().toISOString() }, `shingle_type=eq.${type}`); await loadPricing(token); }; const updateVentPricing = async (type, field, val) => { await sb.from("vent_pricing", token).update({ [field]: val, updated_at: new Date().toISOString() }, `vent_type=eq.${type}`); await loadPricing(token); }; return (
{fontLink} setScreen("home")}/>
}>Shingle Pricing (Redline) {pricing.map(p => (
{p.display_name}
updatePricing(p.shingle_type,"cost",v)} small/> updatePricing(p.shingle_type,"suggested_sell",v)} small/>
))} Ventilation Pricing {ventPricing.map(v => (
{v.display_name}
updateVentPricing(v.vent_type,"cost",val)} small/> updateVentPricing(v.vent_type,"default_sell",val)} small/>
))}
); } // ════════════════════════════════════════ // PROFILE SETUP (first-time PIN & business name) // ════════════════════════════════════════ if (screen === "profile_setup") { const saveProfile = async () => { await sb.from("profiles", token).update({ commission_pin: profilePin, business_name: profileBname, full_name: profileFullName }, `id=eq.${user.id}`); setProfile(prev => ({...prev, commission_pin: profilePin, business_name: profileBname, full_name: profileFullName})); setScreen("home"); }; return (
{fontLink} setScreen("home")}/>
Your Settings
{fieldLabel("Full Name")}setProfileFullName(e.target.value)} placeholder="Dallin Rowley" style={inputStyle}/>
{fieldLabel("Business Name (on invoices)")}setProfileBname(e.target.value)} placeholder="Altaway Solutions" style={inputStyle}/>
{fieldLabel("Commission PIN (4 digits)")}setProfilePin(e.target.value.replace(/\D/g,""))} placeholder="••••" style={{...inputStyle,textAlign:"center",fontSize:24,letterSpacing:8}}/>
{profile?.email}
); } // ════════════════════════════════════════ // SETUP (same as before but with db fields) // ════════════════════════════════════════ // ════════════════════════════════════════ // JOBNIMBUS IMPORT // ════════════════════════════════════════ if (screen === "jn_import") { const handleFileClick = async (file) => { setJnParsing(true); setJnError(""); setJnParseResult(null); try { const r = await fetch("/api/jn/parse-scope?fileId=" + encodeURIComponent(file.id)); const data = await r.json(); if (!r.ok) throw new Error(data?.message || "Parse failed"); setJnParseResult(data); applyParseResult(data); } catch (e) { setJnError("Parser error: " + e.message); } finally { setJnParsing(false); } }; return (
{fontLink} setScreen("home")}/>
{/* Step 1: search */} 1. Find the JobNimbus Job {setJnQuery(e.target.value);setJnSelectedJob(null);setJnParseResult(null);}} placeholder="Customer name, address, or job #" style={inputStyle} autoFocus /> {jnSearching &&
Searching…
} {!jnSearching && jnResults.length > 0 && !jnSelectedJob && (
{jnResults.map(j => (
setJnSelectedJob(j)} style={{padding:"10px 12px",borderBottom:`1px solid ${T.border}`,cursor:"pointer"}}>
{j.name}
{j.address || "no address"} {j.status?` · ${j.status}`:""}
))}
)} {!jnSearching && jnQuery.length >= 2 && jnResults.length === 0 && !jnSelectedJob && (
No matches.
)} {jnSelectedJob && (
{jnSelectedJob.name}
{jnSelectedJob.address}
)} {/* Step 2: pick scope PDF */} {jnSelectedJob && ( 2. Pick the Scope-of-Work PDF {jnFilesLoading &&
Loading files…
} {!jnFilesLoading && jnFiles.length === 0 &&
No PDFs on this job.
} {!jnFilesLoading && jnFiles.length > 0 && (
{jnFiles.map(f => (
handleFileClick(f)} style={{padding:"10px 12px",borderBottom:`1px solid ${T.border}`,cursor:"pointer"}}>
{f.filename}
{f.uploadedAt &&
{new Date(f.uploadedAt).toLocaleDateString()}
}
))}
)} {jnParsing &&
Parsing PDF…
} )} {/* Step 3: parse result */} {jnError && (
{jnError}
 )} {jnParseResult && ( }>3. Parsed Values confidence: {jnParseResult.confidence} {(jnParseResult.notes||[]).length > 0 && (
{jnParseResult.notes.join(" · ")}
)}
Carrier
{CARRIER_NAMES[jnParseResult.carrier] || jnParseResult.carrier}
Customer
{normalizeName(jnParseResult.fields?.customer_name) || "—"}
Claim #
{jnParseResult.fields?.claim_number || "—"}
Date of Loss
{jnParseResult.fields?.date_of_loss || "—"}
RCV
{jnParseResult.fields?.rcv != null ? fmt(jnParseResult.fields.rcv) : "—"}
Depreciation
{jnParseResult.fields?.depreciation != null ? fmt(jnParseResult.fields.depreciation) : "—"}
ACV (1st check)
{(() => { const f = jnParseResult.fields || {}; const net = f.net_claim != null ? f.net_claim : (f.acv != null && f.deductible != null ? f.acv - f.deductible : null); return net != null ? fmt(net) : "—"; })()}
Deductible
{jnParseResult.fields?.deductible != null ? fmt(jnParseResult.fields.deductible) : "—"}
Squares
{jnParseResult.fields?.squares ?? "—"}
Turtle vents
{jnParseResult.fields?.turtle_vent_quantity ? `${jnParseResult.fields.turtle_vent_quantity} EA · ${fmt(jnParseResult.fields.turtle_vent_total_value)}` : "—"}
 )}
); } if (screen === "setup") { const lockedInputStyle = locked ? {...inputStyle, opacity: 0.55, cursor: "not-allowed", background: "#f5f0e6"} : inputStyle; const textInput = (val, onChange, ph) => onChange(e.target.value)} placeholder={ph} disabled={locked} style={lockedInputStyle}/>; const dateInput = (val, onChange) => onChange(e.target.value)} disabled={locked} style={lockedInputStyle}/>; return (
{fontLink} setScreen("home")}/>
{locked &&
Contract signed — fields locked. No changes can be made after signing.
} Customer Info
{fieldLabel("Customer Name")}{textInput(activeJob.customer_name,v=>u("customer_name",v),"Nicole Carpenter")}
{fieldLabel("Property Address")}{textInput(activeJob.property_address,v=>u("property_address",v),"940 Willowmere Dr, Kaysville UT")}
{fieldLabel("Job Date")}{dateInput(activeJob.job_date,v=>u("job_date",v))}
{fieldLabel("Date of Loss")}{dateInput(activeJob.date_of_loss,v=>u("date_of_loss",v))}
{fieldLabel("Claim #")}{textInput(activeJob.claim_number,v=>u("claim_number",v),"4495X780M")}
{fieldLabel("Carrier")}{textInput(activeJob.insurance_carrier,v=>u("insurance_carrier",v),"State Farm")}
{fieldLabel("Trailer Placement")}{textInput(activeJob.trailer_placement,v=>u("trailer_placement",v),"Driveway, RV area, etc.")}
 }>Scope of Work
u("rcv",v)} disabled={locked}/>u("deductible",v)} disabled={locked}/>
u("acv",v)} disabled={locked}/>u("depreciation",v)} disabled={locked}/>
u("squares",v)} prefix="" placeholder="46.15" disabled={locked}/>u("ridge_length",v)} prefix="" placeholder="122" disabled={locked}/>
u("turtle_vent_count",v)} prefix="" placeholder="11" disabled={locked}/>u("turtle_vent_total_value",v)} placeholder="861.11" disabled={locked}/>
u("gutter_insurance_coverage",v)} placeholder="1266.22" disabled={locked}/>
{activeJob.squares>0&&activeJob.rcv>0&&(
{c.insurancePerSq:}
Insurance: {fmt(c.insurancePerSq)}/sq
)}
); } // ════════════════════════════════════════ // BUILDER // ════════════════════════════════════════ if (screen === "builder") { const selectStyle = {width:"100%",border:`1.5px solid ${T.border}`,borderRadius:10,padding:"10px 12px",fontSize:14,fontFamily:"inherit",background:locked?"#f5f0e6":T.bgInput,color:T.text,outline:"none",opacity:locked?0.55:1,cursor:locked?"not-allowed":"text"}; return (
{fontLink} {saveJobToDb().then(()=>setScreen("setup"))}} rightAction={}/>
{locked &&
Contract signed — fields locked. No changes can be made after signing.
} {/* Insurance Coverage */} {activeJob.squares>0&&activeJob.rcv>0&&( }>Insurance Coverage
Insurance pays{fmt(c.insurancePerSq)}/sq
=REDLINE_FLOOR?T.warn:T.danger}}/>
$0Redline $500Sell {fmt(activeJob.sell_price_per_square)}
{!c.insuranceFullyCovered&&c.roofGapTotal>0&&
Homeowner gap ({fmt(c.roofGapPerSq)}/sq){fmt(c.roofGapTotal)}
} {c.insuranceFullyCovered&&
Fully covered
} )} {/* Shingle */} Shingle Type & Price
{pricing.map(s=>())}
u("sell_price_per_square",v)} disabled={locked}/>
Total
0&&c.shingle?.cost?(activeJob.sell_price_per_square>=c.shingle.cost?T.accent:T.danger):T.textDim}}>{fmt(activeJob.sell_price_per_square*activeJob.squares)}
 {/* Colors */} Colors
Shingle Color
{activeJob.shingle_color==="Custom"&&u("shingle_color_custom",e.target.value)} disabled={locked} placeholder="Custom color..." style={{...inputStyle,marginTop:8,opacity:locked?0.55:1}}/>}
Drip Edge
{activeJob.drip_edge_color==="Custom"&&u("drip_edge_color_custom",e.target.value)} disabled={locked} placeholder="Custom color..." style={{...inputStyle,marginTop:8,opacity:locked?0.55:1}}/>}
 {/* Ventilation */} Ventilation Upgrade u("vent_upgrade_enabled",!activeJob.vent_upgrade_enabled)} disabled={locked}/> {activeJob.vent_upgrade_enabled&&
RIDGE VENT
u("ridge_vent_qty",v)} prefix="" small disabled={locked}/>u("ridge_vent_sell_price",v)} small disabled={locked}/>
Total
{fmt(c.ridgeTotal)}
{activeJob.ridge_vent_sell_price>0&&activeJob.ridge_vent_sell_price
Below cost — min {fmt(c.ridgeCost)}/LF
}
BOX VENT COVERS
u("box_cover_qty",v)} prefix="" small disabled={locked}/>u("box_cover_sell_price",v)} small disabled={locked}/>
Total
{fmt(c.boxCoverTotal)}
{activeJob.box_cover_sell_price>0&&activeJob.box_cover_sell_price
Below cost — min {fmt(c.boxCoverCost)}/ea
} {activeJob.turtle_vent_total_value>0&&
Insurance vent credit: {fmt(c.ventInsuranceCredit)}
Homeowner upgrade: {fmt(c.ventOOP)}
}
} {/* Gutters */} Gutters u("gutters_enabled",!activeJob.gutters_enabled)} disabled={locked}/> {activeJob.gutters_enabled&&
u("gutters_lump_sum",v)} disabled={locked}/>{activeJob.gutter_insurance_coverage>0&&
Insurance credit: {fmt(c.gutterInsCredit)}
Homeowner: {fmt(c.gutterOOP)}
}
}
); } // ════════════════════════════════════════ // SUMMARY / CONTRACT // ════════════════════════════════════════ if (screen === "summary") { const docId = (activeJob.id||"").substring(0,36).toUpperCase(); const violations = []; if (activeJob.sell_price_per_square < c.shingle?.cost) violations.push(`${c.shingle?.name} sell (${fmt(activeJob.sell_price_per_square)}) below cost (${fmt(c.shingle?.cost)})`); if (activeJob.vent_upgrade_enabled && activeJob.ridge_vent_sell_price < c.ridgeCost) violations.push(`Ridge vent (${fmt(activeJob.ridge_vent_sell_price)}/LF) below cost (${fmt(c.ridgeCost)}/LF)`); if (activeJob.vent_upgrade_enabled && activeJob.box_cover_sell_price < c.boxCoverCost) violations.push(`Box cover (${fmt(activeJob.box_cover_sell_price)}/ea) below cost (${fmt(c.boxCoverCost)}/ea)`); const hasViolations = violations.length > 0; // mode: "print" (default — open window + print) or "html" (return string for upload) // sigOverride: signature data URL to embed if the React state hasn't updated yet (e.g. inside onSign) const generatePDF = (mode = "print", sigOverride = null) => { const today = new Date().toLocaleDateString("en-US",{year:"numeric",month:"long",day:"numeric"}); const signedAt = activeJob.signed_at || (sigOverride ? new Date().toISOString() : null); const signedDate = signedAt ? new Date(signedAt).toLocaleDateString("en-US",{year:"numeric",month:"long",day:"numeric"}) : ""; const homeownerSig = sigOverride || activeJob.homeowner_signature; const sigImg = homeownerSig ? `` : ""; const ventChecked = activeJob.vent_upgrade_enabled ? "☑" : "☐"; const ventUnchecked = activeJob.vent_upgrade_enabled ? "☐" : "☑"; const gutChecked = activeJob.gutters_enabled ? "☑" : "☐"; const gutUnchecked = activeJob.gutters_enabled ? "☐" : "☑"; const safeName = (activeJob.customer_name || "job").replace(/[^a-z0-9]+/gi, "_"); const docTitle = `WestPeak_Contract_${safeName}_${activeJob.id}`; const html = ` ${docTitle}

Color, Material & Upgrade Agreement

WEST PEAK ROOFING

Project Information

Date${activeJob.job_date || today}
Property Address${activeJob.property_address || ""}
Homeowner(s)${activeJob.customer_name || ""}
Insurance Carrier${activeJob.insurance_carrier || ""}
Claim Number${activeJob.claim_number || ""}

How Your Roof Gets Paid For

Your insurance pays in two checks. The 1st Check comes up front — it's the cash value of your old roof, minus your deductible. The 2nd Check is released after the work is complete and covers the depreciation that was held back. Your Deductible is the amount your policy requires you to pay; it's set by your insurer, not by West Peak.

Insurance Summary

Insurance Value${fmt(activeJob.rcv)}
2nd Check (After Completion)(${fmt(activeJob.depreciation)})
Your Deductible(${fmt(activeJob.deductible)})
1st Check${fmt(activeJob.acv)}

Shingle Selection

Shingle Type${c.shingle?.name || ""}
Shingle Color${c.displayShingleColor || ""}
Drip Edge${c.displayDripEdge || ""}
Squares${activeJob.squares}

Ventilation

Insurance Covered (Base Scope): Like-kind replacement of existing ventilation (box / turtle / static vents) included if approved.

Upgrade Option (Not Insurance Covered):    ${ventUnchecked} No Upgrade    ${ventChecked} Vented Ridge Cap System

${activeJob.vent_upgrade_enabled ? ` ${c.ventInsuranceCredit > 0 ? `` : ''}
ItemQty / LFRateTotal
Ridge Vent${activeJob.ridge_vent_qty} LF${fmt(activeJob.ridge_vent_sell_price)}/LF${fmt(c.ridgeTotal)}
Turtle Vent Covers${activeJob.box_cover_qty} EA${fmt(activeJob.box_cover_sell_price)}/ea${fmt(c.boxCoverTotal)}
Ventilation Upgrade Total${fmt(c.ventTotalSell)}
Less: Insurance vent credit(${fmt(c.ventInsuranceCredit)})
Net Ventilation OOP${fmt(c.ventOOP)}
` : ''}

Gutters (If Required)

${gutUnchecked} Not Required    ${gutChecked} Replacement Required

${activeJob.gutters_enabled ? ` ${c.gutterInsCredit > 0 ? `` : ''}
New Gutter Cost${fmt(activeJob.gutters_lump_sum)}
Less: Insurance D&R Credit(${fmt(c.gutterInsCredit)})
Final Gutter Cost (Homeowner Pays)${fmt(c.gutterOOP)}
` : ''}

Total Out of Pocket

${c.roofGapTotal > 0 && !c.insuranceFullyCovered ? `` : ''} ${activeJob.vent_upgrade_enabled ? `` : ''} ${activeJob.gutters_enabled ? `` : ''}
Insurance Deductible${fmt(activeJob.deductible)}
Roof Cost Gap${fmt(c.roofGapTotal)}
Ventilation Upgrade (net)${fmt(c.ventOOP)}
Gutter Upgrade (net)${fmt(c.gutterOOP)}
TOTAL HOMEOWNER RESPONSIBILITY${fmt(c.homeownerOOP)}

Payment Responsibility

Homeowner acknowledges:

Authorization

Homeowner approves all material selections and authorizes West Peak Roofing to proceed with installation and material ordering based on this agreement. All selections and costs are final. No verbal agreements apply.

Signatures

${sigImg}
Homeowner Signature
${profile?.full_name || ""}
Sales Representative Signature
${signedDate}
Date
${signedDate}
Date

Decking (Plywood) Replacement

During roof replacement, the condition of the roof decking cannot be fully determined until existing shingles are removed. If damaged or deteriorated decking is discovered during tear-off, the following terms apply:

Homeowner acknowledges:

Dump Trailer Placement

A dump trailer will be required for debris removal and will be placed on the property for the duration of the roofing project.

Homeowner acknowledges:

Preferred Trailer Placement Location${activeJob.trailer_placement || "Driveway"}

Authorization

Homeowner acknowledges the above terms for decking replacement and trailer placement and authorizes West Peak Roofing to proceed accordingly. All terms are final. No verbal agreements apply.

Signatures

${sigImg}
Homeowner Signature
${profile?.full_name || ""}
Sales Representative Signature
${signedDate}
Date
${signedDate}
Date
Document ID: ${docId} · ${today} · West Peak Roofing
`; if (mode === "html") return html; const w = window.open("", "_blank"); if (w) { w.document.write(html); w.document.close(); setTimeout(() => w.print(), 300); } }; // Auto-upload the signed contract PDF back to JobNimbus Documents. // Called from the homeowner-sign callback. Silent failure — never blocks the sign flow. const uploadContractToJn = async (jnid, sigDataUrl) => { if (!jnid) return { skipped: "no_jnid" }; try { // Lazy-load html2pdf from CDN on first use (kept out of the eager bundle). if (!window.html2pdf) { await new Promise((resolve, reject) => { const s = document.createElement("script"); s.src = "https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"; s.onload = resolve; s.onerror = reject; document.head.appendChild(s); }); } const html = generatePDF("html", sigDataUrl); const container = document.createElement("div"); container.innerHTML = html; container.style.position = "absolute"; container.style.left = "-9999px"; container.style.top = "0"; document.body.appendChild(container); try { const target = container.querySelector(".wpc") || container; const blob = await window.html2pdf().from(target).set({ margin: 0, filename: "contract.pdf", image: { type: "jpeg", quality: 0.92 }, html2canvas: { scale: 2, useCORS: true }, jsPDF: { unit: "in", format: "letter", orientation: "portrait" }, }).outputPdf("blob"); const base64 = await new Promise(resolve => { const reader = new FileReader(); reader.onloadend = () => resolve(String(reader.result).split(",")[1] || ""); reader.readAsDataURL(blob); }); const safeName = (activeJob.customer_name || "job").replace(/[^a-z0-9]+/gi, "_"); const stamp = new Date().toISOString().slice(0, 10); const filename = `WestPeak_Contract_${safeName}_${stamp}.pdf`; const res = await fetch("/api/jn/upload-contract", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ jnid, filename, base64 }), }); const data = await res.json(); return data; } finally { document.body.removeChild(container); } } catch (e) { console.error("JN auto-upload failed:", e); return { error: e.message }; } }; return (
{fontLink} {saveJobToDb();setScreen("builder")}}/>
West Peak Roofing

Color, Material & Upgrade Agreement

{activeJob.customer_name}
{activeJob.property_address&&
{activeJob.property_address}
}
 Project Information
Shingle Selection
Shingle Type
{c.shingle?.name}
Squares
{activeJob.squares}
Shingle Color
{c.displayShingleColor || "—"}
Drip Edge
{c.displayDripEdge || "—"}
 Ventilation
Insurance Covered (Base Scope): Like-kind replacement of existing ventilation (box / turtle / static vents) included if approved.
Upgrade Option (Not Insurance Covered)
{!activeJob.vent_upgrade_enabled ? "☑" : "☐"} No Upgrade {activeJob.vent_upgrade_enabled ? "☑" : "☐"} Vented Ridge Cap System
{activeJob.vent_upgrade_enabled && (
{c.ventInsuranceCredit > 0 && }
)} Gutters
{!activeJob.gutters_enabled ? "☑" : "☐"} Not Required {activeJob.gutters_enabled ? "☑" : "☐"} Replacement Required
{activeJob.gutters_enabled && (
{c.gutterInsCredit > 0 && }
)} How your roof gets paid for
Your insurance pays in two checks. The 1st Check comes up front — it's the cash value of your old roof, minus your deductible. The 2nd Check is released after the work is complete and covers the depreciation that was held back. Your Deductible is the amount your policy requires you to pay; it's set by your insurer, not by West Peak.
Insurance Summary
Payment Responsibility
Homeowner acknowledges:
  • Ventilation upgrades are NOT covered by insurance
  • Gutter costs beyond the insurance allowance are NOT covered
  • All listed additional costs are the homeowner's responsibility
 Decking (Plywood) Replacement
During roof replacement, decking condition cannot be fully determined until existing shingles are removed.
  • First two (2) sheets of plywood included at no additional cost
  • Additional sheets charged at $80.00 per sheet (material and labor included)
Homeowner acknowledges decking condition is not fully visible prior to tear-off; replacement may be required for code compliance; any decking beyond the first two sheets is the homeowner's responsibility.
 Dump Trailer Placement
A dump trailer will be required for debris removal and placed on the property for the duration of the project. Minor surface markings or wear may occur; West Peak Roofing is not responsible for pre-existing conditions or minor cosmetic impacts.
Preferred Trailer Placement
{activeJob.trailer_placement || "Driveway"}
 }>Authorization & Signature
Homeowner approves all material selections and authorizes West Peak Roofing to proceed with installation and material ordering based on this agreement. All selections and costs are final. No verbal agreements apply.
{hasViolations ? (
Cannot Sign — Below Redline
{violations.map((v,i)=>
• {v}
)}
) : signed ? (
Contract Signed
{activeJob.customer_name} · {new Date().toLocaleDateString()}
{activeJob.jnid && jnUploadStatus === "uploading" && (
Uploading to JobNimbus…
)} {activeJob.jnid && jnUploadStatus === "success" && (
Uploaded to JobNimbus Documents
)} {activeJob.jnid && jnUploadStatus === "failed" && (
JobNimbus upload failed
Contract is still signed and saved. An admin will retry the upload — let the office know.
)} {activeJob.jnid && activeJob.jn_uploaded_at && !jnUploadStatus && (
Already in JobNimbus Documents
)}
) : (
{!showSig ? ( ) : ( { setSigned(true); setShowSig(false); setActiveJob(prev => { const upd = {...prev, signed: true, signed_at: new Date().toISOString(), homeowner_signature: signatureDataUrl}; saveJobToDb(upd); // Fire-and-forget: auto-upload signed contract PDF to JN Documents tab. // Status surfaced as a toast on this screen; admin-only badge on home tracks failures. if (upd.jnid) { setJnUploadStatus("uploading"); uploadContractToJn(upd.jnid, signatureDataUrl).then(result => { if (result?.ok) { setJnUploadStatus("success"); setActiveJob(p => { const u = {...p, jn_uploaded_at: new Date().toISOString()}; saveJobToDb(u); return u; }); } else { setJnUploadStatus("failed"); } }).catch(() => setJnUploadStatus("failed")); } return upd; }); }}/> )}
)}
); } // ════════════════════════════════════════ // COMMISSION (PIN protected) // ════════════════════════════════════════ if (screen === "commission") { const biz = profile?.business_name || ""; // `locked` is defined at App scope (line ~601) and inherited here // Phase B vent fix (lines 182-189 of calcJob) is preserved end-to-end: // turtle vent value is stripped from RCV inside calcJob, and we never add it back here. const D = activeJob.deductible || 0; const V = c.ventOOP || 0; const G = c.gutterOOP || 0; const S = activeJob.squares || 0; // Total Job Value matches calcJob.totalJobValue exactly: T = sell·S + V + G. // Back-solving: sell = (T − V − G) / S. const impliedSell = S > 0 ? (whatIfTotal - V - G) / S : 0; // Tiers ascending by cost (NS < HDZ < UHDZ < Grand Sequoia < PermaLock). const tiers = [...(pricing || [])].sort((a, b) => (a.cost || 0) - (b.cost || 0)); // Per-tier commission via calcJob — never re-derive math, always defer to the function. const tierResults = tiers.map(tier => { const synth = { ...activeJob, shingle_type: tier.shingle_type, sell_price_per_square: impliedSell }; const r = calcJob(synth, pricing, ventPricing); return { tier, result: r }; }); const defaultTotal = c.totalJobValue || 0; const totalDirty = Math.abs((whatIfTotal || 0) - defaultTotal) > 0.005; const printInvoice = () => { const today = new Date().toLocaleDateString("en-US",{year:"numeric",month:"long",day:"numeric"}); const s = c.shingle; const safeName = (activeJob.customer_name || "job").replace(/[^a-z0-9]+/gi, "_"); const docTitle = `WestPeak_Invoice_${safeName}_${activeJob.id}`; const html = ` ${docTitle}

COMMISSION INVOICE

${profile?.full_name||"Sales Representative"}

From: ${biz||"Independent Contractor"}
To: West Peak Roofing
Date: ${today}
Customer: ${activeJob.customer_name}
Job Date: ${activeJob.job_date}
Claim: ${activeJob.claim_number||"N/A"}
${activeJob.vent_upgrade_enabled?``:""}
ItemDetailsCommission
${s?.name}${activeJob.squares} sq × ${fmt(activeJob.sell_price_per_square-s?.cost)}/sq${fmt(c.shingleCommission)}
Ridge Vent${activeJob.ridge_vent_qty} LF × ${fmt(activeJob.ridge_vent_sell_price-c.ridgeCost)}/LF${fmt(c.ridgeCommission)}
Box Covers${activeJob.box_cover_qty} ea × ${fmt(activeJob.box_cover_sell_price-c.boxCoverCost)}/ea${fmt(c.boxCoverCommission)}
TOTAL DUE${fmt(c.totalCommission)}
${today} · ${biz} · Confidential
`; const w = window.open("", "_blank"); if (w) { w.document.write(html); w.document.close(); setTimeout(() => w.print(), 300); } }; const onPickTier = (tier) => { if (locked) return; if (!(impliedSell > 0) || S <= 0) return; setActiveJob(prev => { const upd = {...prev, shingle_type: tier.shingle_type, sell_price_per_square: impliedSell}; saveJobToDb(upd); return upd; }); }; const onTotalInput = (raw) => { if (locked) return; const cleaned = String(raw).replace(/[^0-9.]/g, ""); if (cleaned === "" || cleaned === ".") { setWhatIfTotal(0); return; } const n = Number(cleaned); if (!isNaN(n)) setWhatIfTotal(n); }; const activeTierCost = c.shingle?.cost || 0; const marginPerSq = Math.max(0, impliedSell - activeTierCost); // Best/worst tier commissions to give reps a sense of the spread const affordableTiers = tierResults.filter(t => impliedSell >= (t.tier.cost || 0)); const bestTierResult = affordableTiers.length > 0 ? affordableTiers.reduce((a, b) => (a.result.totalCommission >= b.result.totalCommission ? a : b)) : null; const activeResult = tierResults.find(t => t.tier.shingle_type === activeJob.shingle_type); const bumpTotal = (delta) => { if (locked) return; setWhatIfTotal(prev => Math.max(0, (prev || 0) + delta)); }; const QuickBump = ({label, delta}) => ( ); return (
{fontLink} setScreen("home")}/>
{/* HERO — solid olive, cream typography. Quiet, premium. */}
Your Commission
{fmt(c.totalCommission)}
{c.shingle?.name || "—"} · {fmt(activeJob.sell_price_per_square)}/sq · {S} sq
{(marginPerSq > 0 || (bestTierResult && bestTierResult.tier.shingle_type !== activeJob.shingle_type && !locked)) && (
{marginPerSq > 0 && (
{fmt(marginPerSq)}/sq margin
)} {bestTierResult && bestTierResult.tier.shingle_type !== activeJob.shingle_type && !locked && (
{bestTierResult.tier.display_name} +{fmt(bestTierResult.result.totalCommission - c.totalCommission)}
)}
)}
{/* TOTAL JOB INPUT — the lever; line-item math reacts below */} Total job value
$ onTotalInput(e.target.value)} disabled={locked} style={{flex:1,minWidth:0,background:"transparent",border:"none",outline:"none",fontSize:24,fontWeight:600,color:T.text,fontVariantNumeric:"tabular-nums",letterSpacing:"-0.02em",WebkitAppearance:"none",fontFamily:"inherit"}} />
{locked ? "Locked" : (totalDirty ? "Preview — tap a tier below to commit" : "Live from current job state")} {fmt(impliedSell)}/sq
{/* YOUR COMMISSION — work-backward line-item breakdown */} Your commission
{/* Shingles */}
Shingles · {c.shingle?.name || ""}
Sold {S} sq × {fmt(impliedSell)}/sq {fmt(impliedSell * S)}
Redline cost {S} sq × {fmt(activeTierCost)}/sq −{fmt(activeTierCost * S)}
Shingle commission {fmt(c.shingleCommission)}
{/* Ridge Vent */} {activeJob.vent_upgrade_enabled && (
Ridge Vent
Sold {activeJob.ridge_vent_qty} LF × {fmt(activeJob.ridge_vent_sell_price)}/LF {fmt(c.ridgeTotal)}
Redline cost {activeJob.ridge_vent_qty} LF × {fmt(c.ridgeCost)}/LF −{fmt(c.ridgeCost * (activeJob.ridge_vent_qty || 0))}
Ridge commission {fmt(c.ridgeCommission)}
)} {/* Box Covers */} {activeJob.vent_upgrade_enabled && (
Box Covers
Sold {activeJob.box_cover_qty} ea × {fmt(activeJob.box_cover_sell_price)}/ea {fmt(c.boxCoverTotal)}
Redline cost {activeJob.box_cover_qty} ea × {fmt(c.boxCoverCost)}/ea −{fmt(c.boxCoverCost * (activeJob.box_cover_qty || 0))}
Box cover commission {fmt(c.boxCoverCommission)}
)} {/* Gutters — passthrough, no commission */} {activeJob.gutters_enabled && (
Gutters
Sold to homeowner {fmt(activeJob.gutters_lump_sum || 0)}
No commission on gutters — passthrough
)} {/* Total commission */}
Your total commission {fmt(c.totalCommission)}
{/* HOMEOWNER PAYS — billing breakdown with credits explicit */} Homeowner pays
{/* Roof */}
Roof
Insurance pays {fmt(c.insurancePerSq * S)}
Deductible {fmt(activeJob.deductible || 0)}
{c.roofGapTotal > 0 && !c.insuranceFullyCovered && (
Roof gap (sell above insurance) {fmt(c.roofGapTotal)}
)}
{/* Ventilation upgrade */} {activeJob.vent_upgrade_enabled && (
Ventilation upgrade
Vent upgrade billed {fmt(c.ventTotalSell)}
{c.ventInsuranceCredit > 0 && (
Less: turtle-vent insurance credit −{fmt(c.ventInsuranceCredit)}
)}
Net vent OOP {fmt(c.ventOOP)}
)} {/* Gutters */} {activeJob.gutters_enabled && (
Gutters
Gutters billed {fmt(activeJob.gutters_lump_sum || 0)}
{c.gutterInsCredit > 0 && (
Less: insurance D&R credit −{fmt(c.gutterInsCredit)}
)}
Net gutter OOP {fmt(c.gutterOOP)}
)} {/* Total */}
Total homeowner OOP {fmt(c.homeownerOOP)}
{/* COMPACT TIER LIST — pre-appointment planning */} Other shingle tiers {tiers.length === 0 ? (
No shingle pricing rows loaded yet.
) : (
{tierResults.map(({tier, result}) => { const isActive = tier.shingle_type === activeJob.shingle_type; const canAfford = impliedSell >= (tier.cost || 0); return ( ); })}
)} {locked && (
Locked — contract signed.
)}
PIN Protected · Rep view only
); } return null; } ReactDOM.createRoot(document.getElementById("root")).render();