// Sidebar + secondary views (Customers, Services, Statistics) const Sidebar = ({ active, onChange, unreadCount, onBell, onSettings }) => { const items = [ { id: 'calendar', icon: IconCalendar, label: 'Kalender' }, { id: 'customers', icon: IconUsers, label: 'Kunder' }, { id: 'staff', icon: IconUser, label: 'Medarbejdere' }, { id: 'departments', icon: IconBuilding, label: 'Afdelinger' }, { id: 'services', icon: IconScissors, label: 'Ydelser' }, { id: 'products', icon: IconBox, label: 'Produkter' }, { id: 'register', icon: IconGrid, label: 'Kasse' }, { id: 'stats', icon: IconChart, label: 'Statistik' }, ]; return (
{(window.__SALONIQ_SALON__?.name || 'Saloniq')[0].toUpperCase()}
{items.map(it => { const Ic = it.icon; const isActive = active === it.id; return ( ); })}
); }; // ---------- Customers list with detail panel ---------- const CustomersView = ({ customers, onUpdateCustomer }) => { const [search, setSearch] = React.useState(''); const [selectedId, setSelectedId] = React.useState(customers[0]?.id); const filtered = customers.filter(c => c.name.toLowerCase().includes(search.toLowerCase()) || c.phone.includes(search) || c.email.toLowerCase().includes(search.toLowerCase()) ); const selected = customers.find(c => c.id === selectedId); return (
{/* List */}

Kunder

setSearch(e.target.value)} placeholder="Søg navn, telefon, email…" style={{ ...inputStyle, paddingLeft: 36, width: '100%' }} />
{filtered.map(c => { const fav = STAFF.find(s => s.id === c.favoriteStaffId); const isActive = c.id === selectedId; return ( ); })}
{/* Detail panel */} {selected ? ( onUpdateCustomer(selected.id, patch)} /> ) : (
Vælg en kunde
)}
); }; const CustomerDetail = ({ customer, onUpdate }) => { const [notes, setNotes] = React.useState(customer.notes || ''); const [favStaff, setFavStaff] = React.useState(customer.favoriteStaffId || ''); const [savedFlash, setSavedFlash] = React.useState(false); const dirtyRef = React.useRef(false); // When switching customer, reload local state React.useEffect(() => { setNotes(customer.notes || ''); setFavStaff(customer.favoriteStaffId || ''); dirtyRef.current = false; }, [customer.id]); // Auto-save notes after debounce React.useEffect(() => { if (!dirtyRef.current) return; const t = setTimeout(() => { onUpdate({ notes, favoriteStaffId: favStaff || null }); setSavedFlash(true); setTimeout(() => setSavedFlash(false), 1600); dirtyRef.current = false; }, 500); return () => clearTimeout(t); }, [notes, favStaff]); const fav = STAFF.find(s => s.id === favStaff); return (
{/* Header */}

{customer.name}

{customer.phone} {customer.email}
{savedFlash && (
Gemt
)}
{/* Stats strip */}
{/* Favorite stylist */}
Foretrukken frisør
Vælges automatisk når kunden bookes ind.
{ setFavStaff(''); dirtyRef.current = true; }} label="Ingen præference" /> {STAFF.map(s => ( { setFavStaff(s.id); dirtyRef.current = true; }} tone={s.tone} label={s.name} /> ))}
{/* Notes */}
Noter
Synlig for alle medarbejdere. Brug fx til allergi, foretrukne produkter, særlige ønsker.