// Admin panel — back office for Lupipak. // Sections: Dashboard · Leads · Products · Sectors · Settings // Protected by username/password login; uses RBAC (admin / sales / viewer). function useAuth() { const [user, setUser] = React.useState(undefined); // undefined = loading, null = logged out const refresh = React.useCallback(async () => { const me = await api.tryGet('/api/auth/me'); setUser(me?.user || null); }, []); React.useEffect(() => { refresh(); }, [refresh]); return { user, setUser, refresh }; } const can = (user, perm) => { if (!user) return false; if (user.access === 'admin') return true; if (user.access === 'sales' && (perm === 'read' || perm === 'leads:write')) return true; if (user.access === 'viewer' && perm === 'read') return true; return false; }; function AdminAuthGate({ onExit, children }) { const auth = useAuth(); if (auth.user === undefined) return ; if (auth.user === null) return ; return React.cloneElement(children, { user: auth.user, refreshAuth: auth.refresh }); } function LoginScreen({ onAuth, onExit }) { const [form, setForm] = React.useState({ username: '', password: '' }); const [err, setErr] = React.useState(null); const [busy, setBusy] = React.useState(false); const submit = async (e) => { e?.preventDefault(); setBusy(true); setErr(null); try { await api.post('/api/auth/login', form); await onAuth(); } catch (e) { setErr(e.message); } finally { setBusy(false); } }; return (
Back office · sign in

Welcome back.

{err &&
{err}
}
); } const STATUS_META = { 'new': { label: 'New', color: '#D4532A', bg: 'rgba(212,83,42,.10)' }, 'contacted': { label: 'Contacted', color: '#3A362C', bg: 'rgba(58,54,44,.08)' }, 'waiting-design': { label: 'Waiting · Design', color: '#8B5E3C', bg: 'rgba(139,94,60,.10)' }, 'waiting-approval': { label: 'Waiting · Approval', color: '#6B5842', bg: 'rgba(107,88,66,.10)' }, 'production': { label: 'Production', color: '#4A5D3A', bg: 'rgba(74,93,58,.10)' }, 'completed': { label: 'Completed', color: '#2A4A2A', bg: 'rgba(42,74,42,.10)' }, }; const STATUS_ORDER = ['new', 'contacted', 'waiting-design', 'waiting-approval', 'production', 'completed']; function Admin({ onExit, sectors, settings, setSettings, user, refreshAuth }) { const [section, setSection] = React.useState('leads'); const [selectedLead, setSelectedLead] = React.useState(null); const [leads, setLeads] = React.useState([]); const [navOpen, setNavOpen] = React.useState(false); const isMobile = useMedia('(max-width: 900px)'); const refreshLeads = React.useCallback(() => { api.get('/api/leads').then(setLeads).catch(() => {}); }, []); React.useEffect(() => { refreshLeads(); }, [refreshLeads]); const updateLeadStatus = async (id, status) => { await api.put(`/api/leads/${id}/status`, { status }); refreshLeads(); if (selectedLead?.id === id) setSelectedLead(s => ({ ...s, status })); }; const logout = async () => { await api.post('/api/auth/logout', {}); refreshAuth?.(); }; const allItems = [ { id: 'dashboard', label: 'Dashboard', icon: , count: null, roles: ['admin','sales','viewer'] }, { id: 'leads', label: 'Leads', icon: , count: leads.filter(l => l.status === 'new').length, roles: ['admin','sales','viewer'] }, { id: 'products', label: 'Products', icon: , count: null, roles: ['admin','sales','viewer'] }, { id: 'sectors', label: 'Sectors', icon: , count: null, roles: ['admin','sales','viewer'] }, { id: 'team', label: 'Team & Access', icon: , count: null, roles: ['admin'] }, { id: 'settings', label: 'Settings', icon: , count: null, roles: ['admin'] }, ]; const navItems = allItems.filter(i => i.roles.includes(user?.access)); if (!navItems.find(i => i.id === section)) { /* current section removed for this role */ } const sidebar = ( ); return (
{sidebar}
{section === 'dashboard' && { setSection('leads'); setSelectedLead(l); }} />} {section === 'leads' && ( selectedLead ? l.id === selectedLead.id) || selectedLead} sectors={sectors} onBack={() => setSelectedLead(null)} onUpdateStatus={updateLeadStatus} /> : )} {section === 'products' && } {section === 'sectors' && } {section === 'team' && user?.access === 'admin' && } {section === 'settings' && user?.access === 'admin' && }
); } // ────────────────────────────────────────────── // Dashboard // ────────────────────────────────────────────── function AdminDashboard({ leads, sectors, onOpenLead }) { const now = new Date(); const newLeads = leads.filter(l => l.status === 'new').length; const inFlight = leads.filter(l => ['contacted','waiting-design','waiting-approval'].includes(l.status)).length; const completed = leads.filter(l => l.status === 'completed').length; const revenue = leads.reduce((s, l) => s + (l.total || 0), 0); const convertedRevenue = leads.filter(l => ['completed','production'].includes(l.status)).reduce((s, l) => s + (l.total || 0), 0); const [teamSales, setTeamSales] = React.useState(null); React.useEffect(() => { api.get('/api/analytics/team-sales').then(setTeamSales).catch(() => {}); }, [leads]); const bySector = (sectors || []).map(s => ({ sector: s, count: leads.filter(l => l.sector_id === s.id).length, })); const maxSectorCount = Math.max(...bySector.map(b => b.count), 1); const recent = [...leads].sort((a,b) => (b.created_at || '').localeCompare(a.created_at || '')).slice(0, 5); return (
{STATUS_ORDER.map(st => { const n = leads.filter(l => l.status === st).length; const pct = leads.length === 0 ? 0 : Math.round((n / leads.length) * 100); const meta = STATUS_META[st]; return (
{meta.label}
{n}
); })}
{recent.length === 0 &&
No leads yet.
} {recent.map(l => ( ))}
{/* ── Sales by Team ── */}
{!teamSales && (
Loading…
)} {teamSales && teamSales.conversions.length === 0 && (
No conversions yet — they'll appear here as leads are moved to Production or Completed.
)} {teamSales && teamSales.conversions.length > 0 && (() => { const maxRevenue = Math.max(...teamSales.conversions.map(c => c.revenue), 1); const totalDeals = teamSales.conversions.reduce((s, c) => s + c.deals, 0); return (
{/* Header */}
Team member Deals Production Revenue Share
{teamSales.conversions.map((c, i) => { const share = totalDeals === 0 ? 0 : Math.round((c.deals / totalDeals) * 100); const barW = maxRevenue === 0 ? 0 : Math.round((c.revenue / maxRevenue) * 100); const initials = c.actor.split(' ').map(x => x[0]).join('').slice(0, 2).toUpperCase(); return (
{/* Name + bar */}
{initials}
{c.actor} {i === 0 && TOP}
{c.deals} {c.in_production} £{Number(c.revenue).toLocaleString('en-GB', { maximumFractionDigits: 0 })}
{share}%
); })} {/* Totals row */}
Total converted {totalDeals} £{teamSales.conversions.reduce((s, c) => s + Number(c.revenue), 0).toLocaleString('en-GB', { maximumFractionDigits: 0 })}
); })()}
{bySector.length > 0 && (
{bySector.map(b => (
{b.sector.label.split(' ')[0]} {b.count}
{[...Array(7)].map((_, i) => { const h = Math.max(6, Math.random() * b.count * (50 / maxSectorCount) * 1.2); return
; })}
))}
)}
); } function StatCard({ label, value, hint, trend, accent }) { return (
{label} {trend}
{value}
{hint}
); } // ────────────────────────────────────────────── // Leads // ────────────────────────────────────────────── function LeadsList({ leads, sectors, onOpen }) { const [query, setQuery] = React.useState(''); const [countryF, setCountryF] = React.useState('all'); const [sectorF, setSectorF] = React.useState('all'); const [statusF, setStatusF] = React.useState('all'); const [sort, setSort] = React.useState('activity-desc'); const isMobile = useMedia('(max-width: 900px)'); const countries = ['all', ...Array.from(new Set(leads.map(l => l.country)))]; const sectorOpts = ['all', ...(sectors || []).map(s => s.id)]; const filtered = leads.filter(l => { if (query && !`${l.company} ${l.contact} ${l.id}`.toLowerCase().includes(query.toLowerCase())) return false; if (countryF !== 'all' && l.country !== countryF) return false; if (sectorF !== 'all' && l.sector_id !== sectorF) return false; if (statusF !== 'all' && l.status !== statusF) return false; return true; }).sort((a,b) => { if (sort === 'activity-desc') return ((b.last_activity_at || b.created_at) || '').localeCompare((a.last_activity_at || a.created_at) || ''); if (sort === 'created-desc') return (b.created_at || '').localeCompare(a.created_at || ''); if (sort === 'created-asc') return (a.created_at || '').localeCompare(b.created_at || ''); if (sort === 'total-desc') return (b.total || 0) - (a.total || 0); if (sort === 'total-asc') return (a.total || 0) - (b.total || 0); return 0; }); const exportCSV = () => { const header = ['id','company','contact','phone','country','sector','status','total','units','created_at']; const rows = filtered.map(l => header.map(h => JSON.stringify(l[h] ?? l[h.replace('sector','sector_id')] ?? '')).join(',')); const csv = [header.join(','), ...rows].join('\n'); const blob = new Blob([csv], { type: 'text/csv' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `lupipak-leads-${Date.now()}.csv`; a.click(); URL.revokeObjectURL(url); }; return (
l.status === 'new').length} need attention`} actions={} />
setQuery(e.target.value)} placeholder="Search company, contact, ref…" style={{ width: '100%', padding: '8px 8px 8px 32px', fontFamily: 'inherit', border: 0, background: 'transparent', outline: 'none' }} />
({value: c, label: c === 'all' ? 'All countries' : c }))} /> ({ value: s, label: s === 'all' ? 'All sectors' : (sectors || []).find(x => x.id === s)?.label || s }))} /> ({ value: s, label: STATUS_META[s].label }))]} />
{!isMobile && (
RefCompanyContactSectorValueUnitsLast update
)} {filtered.map((l, i) => ( onOpen(l)} last={i === filtered.length - 1} isMobile={isMobile} /> ))} {filtered.length === 0 && (
No leads match your filters.
)}
); } function LeadRow({ lead, sectors, onOpen, last, isMobile }) { const createdDate = new Date(lead.created_at); const sectorLabel = (sectors || []).find(s => s.id === lead.sector_id)?.label.split(' ')[0] || lead.sector_id; // Last-activity display const lastAt = lead.last_activity_at || lead.created_at; const lastDate = new Date(lastAt); const lastFmt = lastDate.toLocaleDateString('en-GB', { day: '2-digit', month: 'short' }); const lastActor = lead.last_actor && lead.last_actor !== 'System' ? lead.last_actor : null; const lastEvent = lead.last_event || ''; // Summarise event for the list view const lastEventShort = lastEvent.startsWith('Status changed to ') ? `→ ${lastEvent.replace('Status changed to ', '')}` : lastEvent.startsWith('Note: ') ? 'Note added' : lastEvent.length > 28 ? lastEvent.slice(0, 26) + '…' : lastEvent; if (isMobile) { return (
{lead.company} {lead.id}
{lead.contact} · {lead.country} · {sectorLabel}
£{(lead.total||0).toLocaleString('en-GB')} {lastEventShort && {lastFmt} · {lastEventShort}}
); } return (
{lead.id}
{lead.company}
{createdDate.toLocaleDateString('en-GB', { day: '2-digit', month: 'short' })} · {lead.country}
{lead.contact}
{lead.method}
{sectorLabel} £{(lead.total||0).toLocaleString('en-GB')} {((lead.units||0)/1000).toFixed(0)}k
{lastFmt}{lastActor ? ` · ${lastActor}` : ''}{lastEventShort ? ` · ${lastEventShort}` : ''}
); } function LeadDetail({ lead: initial, sectors, onBack, onUpdateStatus }) { const [lead, setLead] = React.useState(null); const [note, setNote] = React.useState(''); const [saving, setSaving] = React.useState(false); React.useEffect(() => { api.get(`/api/leads/${initial.id}`).then(setLead); }, [initial.id]); if (!lead) return ; const sector = (sectors || []).find(s => s.id === lead.sector_id); const changeStatus = async (newStatus) => { if (lead.status === newStatus) return; setLead(l => ({ ...l, status: newStatus })); // optimistic update try { await onUpdateStatus(lead.id, newStatus); const fresh = await api.get(`/api/leads/${lead.id}`); setLead(fresh); } catch (e) { // revert on failure const fresh = await api.get(`/api/leads/${lead.id}`); setLead(fresh); } }; const saveNote = async () => { if (!note.trim()) return; setSaving(true); try { await api.post(`/api/leads/${lead.id}/notes`, { note }); const fresh = await api.get(`/api/leads/${lead.id}`); setLead(fresh); setNote(''); } catch (e) { alert('Could not save note: ' + (e.message || 'Unknown error')); } finally { setSaving(false); } }; return (
Lead · {lead.id}

{lead.company}

{lead.contact} {lead.phone} {lead.country} {sector?.label}
{(lead.items || []).map((it, i) => (
{it.name}
{it.size} · {it.dims}
£{Number(it.unit).toFixed(3)} {Number(it.qty).toLocaleString('en-GB')} £{Math.round(Number(it.unit) * Number(it.qty)).toLocaleString('en-GB')}
))} {(lead.items || []).length === 0 && (
No line items recorded.
)}
Estimate £{(lead.total||0).toLocaleString('en-GB')}
{(() => { const timeline = [...(lead.activity || [])].reverse(); // newest first const fmtTime = (ts) => new Date(ts).toLocaleString('en-GB', { day: '2-digit', month: 'short', hour: '2-digit', minute: '2-digit' }); const noteCount = timeline.filter(a => a.event.startsWith('Note: ')).length; const totalCount = timeline.length; return ( <>
{timeline.length === 0 && (
No activity yet.
)} {timeline.map((a, i) => { const isNote = a.event.startsWith('Note: '); const isStatus = a.event.startsWith('Status changed to '); const status = isStatus ? a.event.replace('Status changed to ', '') : null; const isLast = i === timeline.length - 1; return (
{/* Left: timestamp + actor */}
{fmtTime(a.created_at)}
{a.actor}
{/* Right: event content */}
{isNote ? (
Note
{a.event.replace(/^Note: /, '')}
) : isStatus ? (
Status →
) : ( {a.event} )}
); })}
{/* Add note */}
Add note