e.stopPropagation()} style={{
background: '#fff', borderRadius: 14, width: '100%', maxWidth: width,
maxHeight: '90vh', overflow: 'auto',
boxShadow: '0 20px 60px rgba(0,0,0,0.25)',
animation: 'slideUp 200ms ease-out',
}}>
{children}
);
const Field = ({ label, children, required }) => (
{open && (
{slots.map(slot => {
const active = slot.time === value;
return (
);
})}
)}
);
};
// ---------- New booking modal ----------
const NewBookingModal = ({ open, initial, onClose, onCreate, staff, bookings = [] }) => {
const [customerSearch, setCustomerSearch] = React.useState('');
const [selectedCustomer, setSelectedCustomer] = React.useState(null);
const [isNewCustomer, setIsNewCustomer] = React.useState(false);
const [name, setName] = React.useState('');
const [phone, setPhone] = React.useState('');
const [email, setEmail] = React.useState('');
const [serviceIds, setServiceIds] = React.useState(['herreklip']);
const [staffId, setStaffId] = React.useState(initial?.staffId || staff[0]?.id);
const [start, setStart] = React.useState(initial?.start || 9*60);
const [note, setNote] = React.useState('');
const [showResults, setShowResults] = React.useState(false);
React.useEffect(() => {
if (open) {
setCustomerSearch(''); setSelectedCustomer(null); setIsNewCustomer(false);
setName(''); setPhone(''); setEmail(''); setNote('');
setServiceIds(['herreklip']);
setStaffId(initial?.staffId || staff[0]?.id);
setStart(initial?.start ?? 9*60);
}
}, [open, initial]);
// Compute available start times for selected staff + selected services.
// MUST run on every render (before any early return) — rules of hooks.
const availableSlots = React.useMemo(() => {
const slots = [];
if (!serviceIds.length) return slots;
for (let t = 8 * 60; t <= 19 * 60; t += 15) {
const ok = !hasConflict(staffId, t, serviceIds, bookings);
slots.push({ time: t, available: ok });
}
return slots;
}, [staffId, serviceIds, bookings, open]);
if (!open) return null;
const isCurrentSlotConflict = serviceIds.length > 0 &&
hasConflict(staffId, start, serviceIds, bookings);
const matches = customerSearch.length >= 1 && !selectedCustomer
? CUSTOMERS.filter(c => c.name.toLowerCase().includes(customerSearch.toLowerCase())
|| c.phone.includes(customerSearch)).slice(0, 5)
: [];
const pickCustomer = (c) => {
setSelectedCustomer(c);
setCustomerSearch(c.name);
setName(c.name); setPhone(c.phone); setEmail(c.email);
setShowResults(false);
setIsNewCustomer(false);
// Auto-select customer's favorite stylist if they have one
if (c.favoriteStaffId && staff.some(s => s.id === c.favoriteStaffId)) {
setStaffId(c.favoriteStaffId);
}
};
const canSubmit = serviceIds.length > 0 && !isCurrentSlotConflict && (selectedCustomer || (isNewCustomer && name));
const submit = () => {
if (!canSubmit) return;
const customer = selectedCustomer || {
id: 'cn' + Date.now(), name, phone, email, visits: 0, lastService: serviceIds[0],
};
if (!selectedCustomer) CUSTOMERS.push(customer);
onCreate({
id: 'b' + Date.now(),
staffId, start, serviceIds: [...serviceIds],
customerId: customer.id,
note,
}, customer);
};
const previewBooking = { start, serviceIds };
const segs = getBookingSegments(previewBooking);
const totalEnd = start + getBookingDuration(previewBooking);
const totalPrice = serviceIds.reduce((s, id) => s + (SERVICE_BY_ID[id]?.price || 0), 0);
const activeMinutes = segs.filter(s => s.kind === 'work').reduce((sum, s) => sum + (s.end - s.start), 0);
const toggleService = (id) => {
setServiceIds(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]);
};
const removeServiceAt = (i) => setServiceIds(prev => prev.filter((_, idx) => idx !== i));
const moveService = (i, dir) => {
setServiceIds(prev => {
const next = [...prev];
const j = i + dir;
if (j < 0 || j >= next.length) return prev;
[next[i], next[j]] = [next[j], next[i]];
return next;
});
};
return (