// client-shell.jsx — The authenticated client portal: sidebar + scoped screens. // Everything here is filtered to the signed-in customer's own jobs only. function ClientShell() { const { client, doLogout, toast } = useClient(); const { tweaks } = useTweakValues(); const [screen, setScreen] = useState('overview'); // Handle Stripe payment success/cancel redirects useEffect(() => { const params = new URLSearchParams(window.location.search); const paymentStatus = params.get('payment'); if (paymentStatus === 'success') { toast('Payment submitted successfully. Your invoice will be updated shortly.', 'success', 5000); // Switch to invoices tab so they can see the updated status setScreen('invoices'); } else if (paymentStatus === 'canceled') { toast('Payment was canceled.', 'info', 4000); } // Clear the query params from the URL to avoid re-triggering on refresh if (paymentStatus) { const url = window.location.pathname + window.location.hash; window.history.replaceState({}, '', url); } }, []); const nav = [ { id: 'overview', label: 'Overview', icon: }, { id: 'crews', label: 'Crews on site', icon: }, { id: 'compliance', label: 'Compliance', icon: }, { id: 'invoices', label: 'Invoices', icon: }, ]; return ( <>
{screen === 'overview' && } {screen === 'crews' && } {screen === 'compliance' && } {screen === 'invoices' && }
); } function ClientToasts() { const { toasts } = useClient(); return toasts.map(t => (
{t.text}
)); } function ClientDocHost() { const { activeDoc, setActiveDoc } = useClient(); if (!activeDoc) return null; return ( setActiveDoc(null)} title={activeDoc.title} subtitle={activeDoc.subtitle} file={activeDoc.file} accent="var(--accent)"> {activeDoc.el === 'invoice' && } ); } // ── Small UI bits ──────────────────────────────────────────── function CCard({ children, style, pad = 18, onClick }) { return
{children}
; } function CPill({ tone = 'neutral', children, icon }) { const t = { good:['var(--good-soft)','var(--good)'], warn:['var(--warn-soft)','var(--warn)'], bad:['var(--bad-soft)','var(--bad)'], info:['var(--info-soft)','var(--info)'], accent:['var(--accent-soft)','var(--accent-deep)'], neutral:['var(--panel-3)','var(--text-2)'], dark:['#0F172A','#fff'] }[tone] || ['var(--panel-3)','var(--text-2)']; return {icon}{children}; } function CStat({ label, value, sub, tone, icon }) { return (
{label}{icon && {icon}}
{value}
{sub &&
{sub}
} ); } function CTitle({ children, action }) { return

{children}

{action}
; } const statusTone = { active: 'good', wrapping: 'warn', starting: 'info', paid: 'good', sent: 'info', draft: 'neutral' }; const certTone = { current: 'good', expiring: 'warn', expired: 'bad' }; // ── OVERVIEW ───────────────────────────────────────────────── function ClientOverview({ go }) { const { client, jobs, invoices } = useClient(); const onsite = jobs.reduce((s, j) => s + j.rwics.filter(r => r.onsite).length, 0); const active = jobs.filter(j => j.status === 'active').length; const certIssues = jobs.flatMap(j => j.rwics).filter(r => r.cert !== 'current').length; const outstanding = invoices.filter(i => i.status === 'sent').reduce((s, i) => s + i.amount, 0); return (
{client.name} · {client.railroad}

Your flagging activity

Live view of RailFlagsPro crews protecting your right-of-way.
} /> } /> } /> } />
go('crews')} style={{ background: 'none', border: 'none', color: 'var(--accent-deep)', fontWeight: 600, fontSize: 13, cursor: 'pointer' }}>All jobs →}>Active jobs
{jobs.filter(j => j.status !== 'wrapping').map(j => (
{j.name} {j.status}
{j.projectNumber} · {j.sub} · MP {j.mp} · {j.state}
{j.rwics.filter(r => r.onsite).map((r, i) => (
{r.name.split(' ').map(w=>w[0]).join('')}
))} {j.rwics.filter(r => r.onsite).length === 0 && none on site}
))}
); } // ── CREWS ──────────────────────────────────────────────────── function ClientCrews() { const { jobs } = useClient(); return (

Crews on site

Every RWIC assigned to your projects, with live on-site status.
{jobs.map(j => (
{j.name}
{j.projectNumber} · {j.sub} · MP {j.mp}
{j.status}
{j.rwics.length === 0 ? (
No RWIC assigned yet — starting {C_date(j.start)}.
) : j.rwics.map((r, i) => (
{r.name.split(' ').map(w=>w[0]).join('')}
{r.name}
{r.badge}
{r.cert === 'current' ? 'Certified' : r.cert === 'expiring' ? 'Cert expiring' : 'Cert expired'} {r.onsite ? On site : Off site}
))} ))}
); } // ── COMPLIANCE ─────────────────────────────────────────────── function ClientCompliance() { const { jobs } = useClient(); const allRwics = jobs.flatMap(j => j.rwics.map(r => ({ ...r, job: j }))); const issues = allRwics.filter(r => r.cert !== 'current'); const score = allRwics.length ? Math.round((allRwics.filter(r => r.cert === 'current').length / allRwics.length) * 100) : 100; return (

Compliance

FRA 49 CFR Part 214 roadway-worker certification status for crews on your property.
} /> } /> } />
{issues.length > 0 && ( <> Needs attention
{issues.map(r => (
{r.name} · {r.cert === 'expired' ? 'Certification expired' : 'Certification expiring soon'}
{r.job.name} · {r.badge}
{r.cert}
))}
)} Certification matrix
RWICJobBadgeStatus
{allRwics.map((r, i) => (
{r.name}
{r.job.id}
{r.badge}
{r.cert}
))}
); } // ── Pay Invoice Modal ───────────────────────────────────────── function PayInvoiceModal({ inv, onClose }) { const { client } = useClient(); const [mode, setMode] = useState('full'); const [partial, setPartial] = useState(''); const [loading, setLoading] = useState(false); const [payError, setPayError] = useState(''); const amountDue = inv.amount - (inv.amount_paid || 0); const getPayAmount = () => { if (mode === 'full') return amountDue; const v = parseFloat(partial); return (isNaN(v) || v <= 0) ? 0 : Math.min(v, amountDue); }; const proceed = async () => { const amountDollars = getPayAmount(); if (amountDollars < 0.50) { setPayError('Please enter an amount of at least $0.50.'); return; } setPayError(''); setLoading(true); const amountCents = Math.round(amountDollars * 100); const invoiceId = inv._dbId || inv.id; const invoiceNumber = inv.id; const companyName = client ? client.name : 'Client'; try { // Prefer Supabase JS client functions.invoke; fall back to raw fetch let checkoutUrl = null; if (window._rfpSupabase && window._rfpSupabase.functions) { const { data, error } = await window._rfpSupabase.functions.invoke('create-invoice-payment', { body: { invoice_id: invoiceId, invoice_number: invoiceNumber, amount_cents: amountCents, company_name: companyName, }, }); if (error) throw error; checkoutUrl = data && data.url; } else { // Fallback: call via fetch with the Supabase anon key const supabaseUrl = (typeof SUPABASE_URL !== 'undefined' ? SUPABASE_URL : null) || window.RFP_CONFIG?.supabaseUrl; const anonKey = (typeof SUPABASE_ANON_KEY !== 'undefined' ? SUPABASE_ANON_KEY : null) || window.RFP_CONFIG?.anonKey; if (!supabaseUrl) throw new Error('Supabase URL not configured.'); // Get auth token if available let authToken = anonKey; if (window._rfpSupabase) { const { data: sessionData } = await window._rfpSupabase.auth.getSession(); if (sessionData && sessionData.session) { authToken = sessionData.session.access_token; } } const resp = await fetch(`${supabaseUrl}/functions/v1/create-invoice-payment`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${authToken}`, 'apikey': anonKey || '', }, body: JSON.stringify({ invoice_id: invoiceId, invoice_number: invoiceNumber, amount_cents: amountCents, company_name: companyName, }), }); const json = await resp.json(); if (!resp.ok) throw new Error(json.error || `HTTP ${resp.status}`); checkoutUrl = json.url; } if (!checkoutUrl) throw new Error('No checkout URL returned from payment service.'); // Redirect to Stripe Checkout window.location.href = checkoutUrl; } catch (err) { console.error('Payment error:', err); setPayError('Unable to create payment session. Please contact your account manager.'); setLoading(false); } }; return (
e.target === e.currentTarget && !loading && onClose()}>
PAY INVOICE
{inv.id}
Invoice total {C_money(inv.amount)}
{(inv.amount_paid || 0) > 0 && (
Already paid -{C_money(inv.amount_paid)}
)}
Amount due {C_money(amountDue)}
🔒 You'll be redirected to a secure Stripe checkout page to complete payment.
{payError && (
{payError}
)}
); } // Payment status tone const payTone = { unpaid: 'warn', partial: 'info', paid: 'good' }; // ── INVOICES ───────────────────────────────────────────────── function ClientInvoices() { const { client, invoices, setActiveDoc } = useClient(); const [payModal, setPayModal] = useState(null); const openDoc = (inv) => setActiveDoc({ el: 'invoice', title: `Invoice ${inv.id}`, subtitle: client.name, file: { filename: `${inv.id}.txt`, content: `RailFlagsPro Invoice ${inv.id}\nBill to: ${client.name}\nJob: ${inv.job}\nPeriod: ${inv.period}\nHours: ${inv.hours}\nAmount: ${C_money(inv.amount)}\nDue: ${inv.due}\n`, mime: 'text/plain' }, payload: { inv, client }, }); const totalPaid = invoices.filter(i => i.status === 'paid').reduce((s, i) => s + i.amount, 0); const totalOpen = invoices.filter(i => i.status === 'sent').reduce((s, i) => s + i.amount, 0); // Merge payment_status into invoice display: if DB has payment_status use it, // otherwise derive from invoice status const getPayStatus = (inv) => { if (inv.payment_status) return inv.payment_status; if (inv.status === 'paid') return 'paid'; return 'unpaid'; }; return (

Invoices

Billing for flagging services on your jobs. {client.terms} terms.
} /> } /> } />
InvoiceJobPeriodHoursAmountStatusPayment
{invoices.map((inv, i) => { const payStatus = getPayStatus(inv); const canPay = inv.status !== 'draft' && payStatus !== 'paid'; return (
{inv.id}
{inv.job}
{inv.period}
{C_num(inv.hours, 1)}
{C_money(inv.amount)}
{inv.status}
{payStatus}
{inv.status !== 'draft' && ( )} {canPay && ( )}
); })} {payModal && setPayModal(null)} />}
); } // ── Invoice document template (for the doc viewer) ─────────── function InvoiceDoc({ data }) { const { inv, client } = data; return (
{inv.id}
Issued {C_date(inv.issued)}
} />
Bill to
{client.name}
{client.railroad} · {client.terms}
Due date
{C_date(inv.due)}
Job Period Hours Rate Amount
{inv.job} {inv.period} {C_num(inv.hours, 1)} {C_money(client.billRate)} {C_money(inv.amount)}
Subtotal{C_money(inv.amount)}
Total due{C_money(inv.amount)}
); } Object.assign(window, { ClientShell, ClientOverview, ClientCrews, ClientCompliance, ClientInvoices, InvoiceDoc, CCard, CPill, CStat, CTitle, PayInvoiceModal });