// ── Admin Dashboard ─────────────────────────────────────────────────────────── const AdminPricingField = ({ id, label, keyName, pricing, setPricing, prefix = '$', suffix = '' }) => (
{prefix && {prefix}} setPricing(p => ({ ...p, [keyName]: e.target.value }))} style={{ flex: 1, border: 'none', outline: 'none', padding: '12px 14px', fontFamily: 'Inter, sans-serif', fontSize: '15px', fontWeight: '600', color: '#1B2A4A', background: '#fff' }} /> {suffix && {suffix}}
); const normalizeClientEmail = (value) => String(value || '').trim().toLowerCase(); const findClientProfileByEmail = (profiles, email) => { const normalized = normalizeClientEmail(email); return profiles.find((profile) => !profile.is_admin && normalizeClientEmail(profile.email) === normalized) || null; }; const buildClientGroups = (profiles, quotes, rentals, clientContacts) => { const groups = new Map(); const profileById = new Map(profiles.map((profile) => [profile.id, profile])); const contactByEmail = new Map((clientContacts || []).map((contact) => [normalizeClientEmail(contact.email), contact])); const ensureGroup = (email) => { const normalized = normalizeClientEmail(email); if (!normalized) return null; if (!groups.has(normalized)) { groups.set(normalized, { email: normalized, names: new Set(), phones: new Set(), quoteCount: 0, rentalCount: 0, quotes: [], rentals: [], linkedProfile: null, contactRecord: contactByEmail.get(normalized) || null, lastActivity: null, }); } return groups.get(normalized); }; const pushActivity = (group, value) => { if (!value) return; const stamp = new Date(value).getTime(); if (!Number.isFinite(stamp)) return; if (!group.lastActivity || stamp > group.lastActivity) group.lastActivity = stamp; }; profiles.filter((profile) => !profile.is_admin).forEach((profile) => { const group = ensureGroup(profile.email); if (!group) return; if (profile.full_name) group.names.add(profile.full_name); if (profile.phone) group.phones.add(profile.phone); group.linkedProfile = profile; pushActivity(group, profile.created_at); }); quotes.forEach((quote) => { const group = ensureGroup(quote.email); if (!group) return; if (quote.name) group.names.add(quote.name); if (quote.phone) group.phones.add(quote.phone); group.quoteCount += 1; group.quotes.push(quote); pushActivity(group, quote.created_at); }); rentals.forEach((rental) => { const profile = rental.user_id ? profileById.get(rental.user_id) : null; const group = ensureGroup(rental.customer_email || profile?.email); if (!group) return; if (rental.customer_name) group.names.add(rental.customer_name); if (profile?.phone) group.phones.add(profile.phone); group.rentalCount += 1; group.rentals.push(rental); if (!group.linkedProfile && profile && !profile.is_admin) group.linkedProfile = profile; pushActivity(group, rental.created_at || rental.start_date); }); return Array.from(groups.values()) .map((group) => ({ ...group, name: group.contactRecord?.full_name || Array.from(group.names)[0] || (group.linkedProfile?.full_name || '—'), phone: group.contactRecord?.phone || Array.from(group.phones)[0] || (group.linkedProfile?.phone || ''), company: group.contactRecord?.company || '', privateNotes: group.contactRecord?.private_notes || '', currentSales: group.quotes.filter((quote) => quote.interest === 'sale' && !['completed', 'cancelled'].includes(String(quote.status || '').toLowerCase())), pastSales: group.quotes.filter((quote) => quote.interest === 'sale' && String(quote.status || '').toLowerCase() === 'completed'), })) .sort((a, b) => (b.lastActivity || 0) - (a.lastActivity || 0)); }; const AdminDashboard = ({ user, onSignOut }) => { const [activeTab, setActiveTab] = React.useState('pricing'); const [pricing, setPricing] = React.useState(null); const [quotes, setQuotes] = React.useState([]); const [rentals, setRentals] = React.useState([]); const [profiles, setProfiles] = React.useState([]); const [clientContacts, setClientContacts] = React.useState([]); const [inventory, setInventory] = React.useState([]); const [loading, setLoading] = React.useState(true); const [saving, setSaving] = React.useState(false); const [saveMsg, setSaveMsg] = React.useState(''); const [editQuote, setEditQuote] = React.useState(null); const [editRental, setEditRental] = React.useState(null); const [viewClient, setViewClient] = React.useState(null); const [showNewQuote, setShowNewQuote] = React.useState(false); const [showNewRental, setShowNewRental] = React.useState(false); // Load all data React.useEffect(() => { (async () => { setLoading(true); if (SUPABASE_CONFIGURED) { const [p, q, r, pr, cc, inv] = await Promise.all([ supa.getPricing(), supa.getQuotes(null, true), supa.getRentals(null, true), supa.getAllProfiles(), supa.getClientContacts(), supa.getInventory(), ]); setPricing(p || MOCK_DATA.pricing); setQuotes(Array.isArray(q) ? q : MOCK_DATA.quotes); setRentals(Array.isArray(r) ? r : MOCK_DATA.rentals); setProfiles(Array.isArray(pr) ? pr : MOCK_DATA.profiles); setClientContacts(Array.isArray(cc) ? cc : MOCK_DATA.client_contacts); setInventory(Array.isArray(inv) ? inv : MOCK_DATA.inventory); } else { await new Promise(r => setTimeout(r, 400)); setPricing({ ...MOCK_DATA.pricing }); setQuotes([...MOCK_DATA.quotes]); setRentals([...MOCK_DATA.rentals]); setProfiles([...MOCK_DATA.profiles]); setClientContacts([...(MOCK_DATA.client_contacts || [])]); setInventory([...MOCK_DATA.inventory]); } setLoading(false); })(); }, []); const savePricing = async () => { setSaving(true); if (SUPABASE_CONFIGURED) await supa.savePricing(pricing); // Also update the in-memory PRICING object used by EstimatorPage if (window.PRICING) { window.PRICING.sale['20-new'] = Number(pricing.sale_20_new); window.PRICING.sale['20-used'] = Number(pricing.sale_20_used); window.PRICING.sale['40-new'] = Number(pricing.sale_40_new); window.PRICING.sale['40-used'] = Number(pricing.sale_40_used); window.PRICING.rental['20-new'] = Number(pricing.rent_20_new); window.PRICING.rental['20-used'] = Number(pricing.rent_20_used); window.PRICING.rental['40-new'] = Number(pricing.rent_40_new); window.PRICING.rental['40-used'] = Number(pricing.rent_40_used); window.PRICING.delivery.flatFee = Number(pricing.delivery_flat); window.PRICING.delivery.includedMiles = Number(pricing.delivery_included_miles); window.PRICING.delivery.perMile = Number(pricing.delivery_per_mile); window.PRICING.delivery.maxRadius = Number(pricing.delivery_max_radius); window.PRICING.delivery.hubZip = pricing.delivery_hub_zip; window.PRICING.taxRate = normalizeTaxRateDecimal(pricing.tax_rate); window.PRICING.buyoutCreditRate = Number(pricing.buyout_credit_rate); } await new Promise(r => setTimeout(r, 300)); setSaving(false); setSaveMsg('✓ Saved and applied to estimator'); setTimeout(() => setSaveMsg(''), 3000); }; const StatusBadge = ({ status }) => { const colors = { pending: ['#FFF8E1','#856404'], quoted: ['#EBF8FF','#2B6CB0'], active: ['#F0FFF4','#276749'], completed: ['#F7FAFC','#4A5568'], cancelled: ['#FFF5F5','#C53030'] }; const [bg, color] = colors[status] || ['#F7FAFC','#4A5568']; return {status}; }; const TabBtn = ({ id, label, count }) => ( ); if (loading) return (

Loading dashboard…

); const clientGroups = buildClientGroups(profiles, quotes, rentals, clientContacts); return (
{/* Top bar */}
Sea Steel Storage
ADMIN
{user.email}
{/* Stats row */}
{[ { label: 'Total Quotes', value: quotes.length, color: '#4A9FD4' }, { label: 'Active Rentals', value: rentals.filter(r => r.status === 'active').length, color: '#38A169' }, { label: 'Pending Quotes', value: quotes.filter(q => q.status === 'pending').length, color: '#D69E2E' }, { label: 'Total Clients', value: clientGroups.length, color: '#805AD5' }, ].map(s => (
{s.value}
{s.label}
))}
{/* Tab nav */}
{/* ── PRICING TAB ── */} {activeTab === 'pricing' && pricing && (
{/* Sale prices */}

Container Sale Prices

{/* Rental rates */}

Monthly Rental Rates

{/* Delivery */}

Delivery Settings

setPricing(p => ({ ...p, delivery_hub_zip: e.target.value }))} style={{ width: '100%', boxSizing: 'border-box', border: '1.5px solid #E2E8F0', borderRadius: '8px', padding: '12px 14px', fontFamily: 'Inter, sans-serif', fontSize: '15px', fontWeight: '600', color: '#1B2A4A', outline: 'none' }} onFocus={e => e.target.style.borderColor = '#4A9FD4'} onBlur={e => e.target.style.borderColor = '#E2E8F0'} />

Use `TRAFFIC_UNAWARE` for delivery pricing by route miles. Traffic-aware modes are better for ETA accuracy.

Delivery estimate formula: base fee covers the first included miles, then the additional per-mile rate applies after that. Delivery is taxable.

{/* Tax & Buyout */}

Tax & Buyout

These values drive the Price Estimator in real time. Changes are applied immediately to all estimates.

{/* Save button */}
{saveMsg && {saveMsg}}
)} {/* ── QUOTES TAB ── */} {activeTab === 'quotes' && (

All Quotes

{['Date', 'Name', 'Email', 'ZIP', 'Interest', 'Size', 'Condition', 'Status', 'Actions'].map(h => ( ))} {quotes.map((q, i) => ( ))}
{h}
{new Date(q.created_at).toLocaleDateString()} {q.name} {q.email} {q.zip} {q.interest} {q.size} {q.condition}
{quotes.length === 0 &&

No quotes yet.

}
)} {/* ── RENTALS TAB ── */} {activeTab === 'rentals' && (
{rentals.map(r => ( setEditRental(r)} /> ))} {rentals.length === 0 && (
No rentals yet. Click "+ Add Rental" to create one.
)}
)} {/* ── INVENTORY TAB ── */} {activeTab === 'inventory' && ( )} {/* ── CLIENTS TAB ── */} {activeTab === 'clients' && (

Clients Grouped by Email

{['Name', 'Email', 'Phone', 'Quotes', 'Rentals', 'Portal', 'Last Activity'].map(h => ( ))} {clientGroups.map((client, i) => ( setViewClient(client)}> ))}
{h}
{client.name} {client.email} {client.phone || '—'} {client.quoteCount} {client.rentalCount} {client.linkedProfile ? 'Linked' : 'No Account'} {client.lastActivity ? new Date(client.lastActivity).toLocaleDateString() : '—'}
)}
{viewClient && ( setViewClient(null)}> { const payload = { email: viewClient.email, full_name: data.full_name, phone: data.phone, company: data.company, private_notes: data.private_notes, updated_at: new Date().toISOString(), }; if (SUPABASE_CONFIGURED) { await supa.saveClientContact(payload); } setClientContacts((contacts) => { const existing = contacts.find((contact) => normalizeClientEmail(contact.email) === viewClient.email); if (existing) { return contacts.map((contact) => normalizeClientEmail(contact.email) === viewClient.email ? { ...contact, ...payload } : contact); } return [{ ...payload, created_at: new Date().toISOString() }, ...contacts]; }); setViewClient((current) => current ? { ...current, name: data.full_name || current.name, phone: data.phone || current.phone, company: data.company || '', privateNotes: data.private_notes || '' } : current); }} onEditQuote={(quote) => { setViewClient(null); setEditQuote(quote); }} onEditRental={(rental) => { setViewClient(null); setEditRental(rental); }} /> )} {/* ── Edit Quote Modal ── */} {editQuote && ( setEditQuote(null)}> { if (SUPABASE_CONFIGURED) await supa.updateQuote(editQuote.id, data); setQuotes(qs => qs.map(q => q.id === editQuote.id ? { ...q, ...data } : q)); setEditQuote(null); }} onDraftSave={async (data) => { if (SUPABASE_CONFIGURED) await supa.updateQuote(editQuote.id, data); setQuotes(qs => qs.map(q => q.id === editQuote.id ? { ...q, ...data } : q)); setEditQuote(q => (q && q.id === editQuote.id ? { ...q, ...data } : q)); }} onSent={(updatedQuote) => { setQuotes(qs => qs.map(q => q.id === updatedQuote.id ? { ...q, ...updatedQuote } : q)); setEditQuote(null); }} /> )} {/* ── New Quote Modal ── */} {showNewQuote && ( setShowNewQuote(false)}> { const matchedProfile = findClientProfileByEmail(profiles, data.email); const payload = { ...data, email: normalizeClientEmail(data.email), user_id: matchedProfile?.id || null, }; if (SUPABASE_CONFIGURED) { const rows = await supa.saveQuote(payload); const createdQuote = Array.isArray(rows) ? rows[0] : rows; if (createdQuote) { setQuotes((qs) => [createdQuote, ...qs]); setShowNewQuote(false); setEditQuote(createdQuote); return; } } const createdQuote = { ...payload, id: String(Date.now()), created_at: new Date().toISOString() }; setQuotes((qs) => [createdQuote, ...qs]); setShowNewQuote(false); setEditQuote(createdQuote); }} /> )} {/* ── Edit/Add Rental Modal ── */} {(editRental || showNewRental) && ( { setEditRental(null); setShowNewRental(false); }}> { if (editRental) { if (SUPABASE_CONFIGURED) { const rows = await supa.updateRental(editRental.id, data); const updatedRental = Array.isArray(rows) ? rows[0] : rows; setRentals(rs => rs.map(r => r.id === editRental.id ? { ...r, ...(updatedRental || data) } : r)); } else { setRentals(rs => rs.map(r => r.id === editRental.id ? { ...r, ...data } : r)); } } else { if (SUPABASE_CONFIGURED) { const rows = await supa.saveRental(data); const createdRental = Array.isArray(rows) ? rows[0] : rows; setRentals(rs => [createdRental || { ...data, id: String(Date.now()) }, ...rs]); } else { const newR = { ...data, id: String(Date.now()) }; setRentals(rs => [newR, ...rs]); } } setEditRental(null); setShowNewRental(false); }} /> )}
); }; // ── Shared Modal wrapper ────────────────────────────────────────────────────── const Modal = ({ title, children, onClose, maxWidth = '560px' }) => (
e.target === e.currentTarget && onClose()}>

{title}

{children}
); const createQuoteBuilderItem = (overrides = {}) => ({ id: overrides.id || `item_${Date.now()}_${Math.random().toString(36).slice(2, 7)}`, label: overrides.label || '', description: overrides.description || '', quantity: overrides.quantity ?? 1, unitPrice: overrides.unitPrice ?? '', }); const toMoneyNumber = (value) => { const num = Number(value); return Number.isFinite(num) ? num : 0; }; const formatMoney = (value) => `$${toMoneyNumber(value).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`; const normalizeTaxRateDecimal = (value) => { const numeric = Number(value); if (!Number.isFinite(numeric) || numeric < 0) return 0; return numeric > 1 ? numeric / 100 : numeric; }; const getDeliveryIncludedMiles = (pricing) => Math.max(0, Number(pricing?.delivery_included_miles ?? 45) || 45); const computeDeliveryEstimateFromMiles = (miles, pricing, quoteKind = 'sale') => { if (typeof miles !== 'number') return null; const maxRadius = Number(pricing?.delivery_max_radius || 150); if (miles > maxRadius) return 'out-of-range'; const baseFee = Number(pricing?.delivery_flat || 250); const additionalRate = Number(pricing?.delivery_per_mile || 2.5); const additionalMiles = Math.max(0, miles - getDeliveryIncludedMiles(pricing)); const oneWay = baseFee + (additionalMiles * additionalRate); const trips = quoteKind === 'rental' ? 2 : 1; return Math.round((oneWay * trips) * 100) / 100; }; const formatTaxRatePercent = (value) => { const percent = normalizeTaxRateDecimal(value) * 100; return `${percent.toFixed(percent % 1 === 0 ? 0 : 2)}%`; }; const getQuoteDraftStorageKey = (quoteId) => `sss_quote_builder_${quoteId}`; const formatQuoteSizeLabel = (value) => { const text = String(value || '').trim(); if (!text) return ''; return /^\d+$/.test(text) ? `${text}'` : text; }; const buildDefaultQuoteDraft = (quote, pricing) => ({ subject: `Your Sea Steel Storage Quote`, intro: `Thanks for reaching out. Based on your request, we've put together the quote below.`, quoteTitle: quote.interest === 'rental' ? 'Rental Quote' : 'Container Quote', quoteKind: quote.interest === 'rental' ? 'rental' : 'sale', validDays: 7, deliveryFee: '', discount: '', taxRate: String(normalizeTaxRateDecimal(pricing?.tax_rate || 0)), rentalTermMonths: 6, rentalMonthlyRate: quote.interest === 'rental' ? (quote.quoted_price || '') : '', rentalDeposit: '', footer: 'Reply to this email or call us if you want us to revise the quote, add delivery details, or reserve inventory.', terms: 'Quote subject to inventory availability. Delivery pricing assumes standard site access. Taxes and permit requirements may vary by jurisdiction.', lineItems: [ createQuoteBuilderItem({ label: [formatQuoteSizeLabel(quote.size), quote.condition || '', quote.interest ? `${quote.interest} container` : 'container quote'] .filter(Boolean) .join(' ') .replace(/\s+/g, ' ') .trim() || 'Container quote', description: quote.message || '', quantity: 1, unitPrice: quote.quoted_price || '', }), ], }); const computeQuoteBuilderTotals = (draft) => { const lineItems = Array.isArray(draft.lineItems) ? draft.lineItems .map((item) => ({ ...item, quantity: Math.max(1, Number(item.quantity) || 1), unitPrice: toMoneyNumber(item.unitPrice), })) .filter((item) => item.label.trim() || item.unitPrice > 0) : []; const itemsSubtotal = lineItems.reduce((sum, item) => sum + (item.quantity * item.unitPrice), 0); const deliveryFee = toMoneyNumber(draft.deliveryFee); const discount = toMoneyNumber(draft.discount); const taxRate = normalizeTaxRateDecimal(draft.taxRate); const quoteKind = draft.quoteKind === 'rental' ? 'rental' : 'sale'; if (quoteKind === 'rental') { const rentalMonthlyRate = toMoneyNumber(draft.rentalMonthlyRate); const rentalTermMonths = Math.max(1, Number(draft.rentalTermMonths) || 6); const rentalDeposit = toMoneyNumber(draft.rentalDeposit); const monthlyRate = rentalMonthlyRate > 0 ? rentalMonthlyRate : itemsSubtotal; const dueAtSigningSubtotal = Math.max(0, monthlyRate + deliveryFee + rentalDeposit - discount); const dueAtSigningTax = dueAtSigningSubtotal * taxRate; const dueAtSigningTotal = dueAtSigningSubtotal + dueAtSigningTax; const estimatedTermSubtotal = Math.max(0, (monthlyRate * rentalTermMonths) + deliveryFee + rentalDeposit - discount); const estimatedTermTax = estimatedTermSubtotal * taxRate; const total = estimatedTermSubtotal + estimatedTermTax; return { quoteKind, lineItems, itemsSubtotal, deliveryFee, discount, subtotal: estimatedTermSubtotal, taxRate, taxAmount: estimatedTermTax, total, totalLabel: 'Estimated Term Total', monthlyRate, rentalTermMonths, rentalDeposit, dueAtSigningSubtotal, dueAtSigningTax, dueAtSigningTotal, }; } const subtotal = Math.max(0, itemsSubtotal + deliveryFee - discount); const taxAmount = subtotal * taxRate; const total = subtotal + taxAmount; return { quoteKind, lineItems, itemsSubtotal, deliveryFee, discount, subtotal, taxRate, taxAmount, total, totalLabel: 'Quote Total', monthlyRate: 0, rentalTermMonths: Math.max(1, Number(draft.rentalTermMonths) || 6), rentalDeposit: 0, dueAtSigningSubtotal: 0, dueAtSigningTax: 0, dueAtSigningTotal: 0, }; }; const ManualQuoteCreateForm = ({ profiles, onCreate }) => { const [form, setForm] = React.useState({ name: '', email: '', phone: '', zip: '', interest: 'sale', size: '20', condition: 'New', delivery: '', message: '', status: 'pending', }); const [error, setError] = React.useState(''); const fld = { fontFamily: 'Inter, sans-serif', fontSize: '14px', fontWeight: '600', color: '#1B2A4A', border: '1.5px solid #E2E8F0', borderRadius: '8px', padding: '10px 14px', width: '100%', boxSizing: 'border-box', outline: 'none' }; const clients = profiles.filter((profile) => !profile.is_admin && profile.email); const set = (key, value) => setForm((state) => ({ ...state, [key]: value })); const handleClientPick = (profileId) => { const profile = clients.find((item) => item.id === profileId); if (!profile) return; setForm((state) => ({ ...state, name: profile.full_name || state.name, email: profile.email || state.email, phone: profile.phone || state.phone, })); }; const handleCreate = async () => { const normalizedEmail = normalizeClientEmail(form.email); const normalizedZip = String(form.zip || '').replace(/\D/g, '').slice(0, 5); if (!form.name.trim()) { setError('Customer name is required.'); return; } if (!normalizedEmail || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(normalizedEmail)) { setError('A valid email is required.'); return; } if (normalizedZip.length !== 5) { setError('A valid 5-digit ZIP is required.'); return; } setError(''); await onCreate({ ...form, name: form.name.trim(), email: normalizedEmail, phone: form.phone.trim(), zip: normalizedZip, delivery: form.delivery.trim(), message: form.message.trim(), }); }; return (
set('name', e.target.value)} style={fld} placeholder="Jane Smith" />
set('email', e.target.value)} style={fld} placeholder="jane@example.com" />
set('phone', e.target.value)} style={fld} placeholder="(253) 555-0100" />
set('zip', e.target.value)} style={fld} placeholder="98001" />
set('delivery', e.target.value)} style={fld} placeholder="Site access, city, or scheduling notes" />