// MissionChef — Catering · Events (Angebot → Auftrag → Dispo → Durchführung → Abschluss) function fmtEventDate(iso) { const d = new Date(iso); return d.toLocaleDateString('de-DE', { weekday: 'short', day: '2-digit', month: '2-digit', year: 'numeric' }); } function daysUntil(iso) { const d = new Date(iso); d.setHours(0,0,0,0); const now = new Date(); now.setHours(0,0,0,0); return Math.round((d - now) / 86400000); } const EVENT_STATES = [ { id: 'offer', label: 'Angebot', tone: 'ember', order: 1 }, { id: 'planning', label: 'Planung', tone: 'default',order: 2 }, { id: 'confirmed', label: 'Bestätigt', tone: 'leaf', order: 3 }, { id: 'production', label: 'Produktion', tone: 'ink', order: 4 }, { id: 'completed', label: 'Abgeschlossen',tone: 'default',order: 5 }, ]; function CateringScreenV2({ Topbar }) { const store = useStore(); const [selected, setSelected] = React.useState(null); const [filter, setFilter] = React.useState('all'); const [showNew, setShowNew] = React.useState(false); const sortedEvents = React.useMemo(() => [...store.events].sort((a,b) => new Date(a.date) - new Date(b.date)) , [store.events]); const filtered = filter === 'all' ? sortedEvents : sortedEvents.filter(e => e.state === filter); const metrics = React.useMemo(() => { const now = new Date(); now.setHours(0,0,0,0); const upcoming = store.events.filter(e => new Date(e.date) >= now); const totals = upcoming.reduce((acc, e) => { const t = eventTotals(e); return { revenue: acc.revenue + t.revenue, profit: acc.profit + t.profit, guests: acc.guests + e.guests }; }, { revenue: 0, profit: 0, guests: 0 }); return { count: upcoming.length, guests: totals.guests, revenue: totals.revenue, profit: totals.profit, offers: store.events.filter(e => e.state === 'offer').length, margin: totals.revenue > 0 ? (totals.profit / totals.revenue) * 100 : 0, }; }, [store.events]); return ( <> setShowNew(true)} className="mc-btn leaf sm">Neues Event} />
{/* KPIs */}
{/* Filter tabs */}
setFilter('all')} /> {EVENT_STATES.map(s => { const count = store.events.filter(e => e.state === s.id).length; if (count === 0) return null; return setFilter(s.id)} />; })}
{/* Event grid */}
{filtered.map(e => ( setSelected(e)} /> ))}
{selected && x.id === selected.id)} staff={store.staff} onClose={() => setSelected(null)} />} {showNew && setShowNew(false)} />} ); } // ─── KPI card ───────────────────────────────────────────────────────────────── function KpiCard({ label, value, tone, sub }) { const color = tone === 'leaf' ? 'var(--mc-leaf-700)' : tone === 'ember' ? 'var(--mc-ember-700)' : 'var(--mc-ink)'; return (
{label}
{value}
{sub &&
{sub}
}
); } function FilterChip({ label, active, onClick }) { return ( ); } // ─── Event card ─────────────────────────────────────────────────────────────── function EventCard({ event, staff, onOpen }) { const lead = staff.find(s => s.id === event.lead); const stateMeta = EVENT_STATES.find(s => s.id === event.state) || EVENT_STATES[0]; const t = eventTotals(event); const d = daysUntil(event.date); const timelineDone = Object.values(event.timeline || {}).filter(Boolean).length; const timelineTotal = 11; return (
{stateMeta.label} {d >= 0 && d <= 7 && {d === 0 ? 'Heute' : `in ${d}T`}} {d < 0 && vergangen}
{event.name}
{event.customer?.name} · {event.venue}
{fmtEventDate(event.date)}
{event.startTime}—{event.endTime}
Gäste
{event.guests}
Format
{event.type}
Lead
{lead?.name.split(' ')[0] || '—'}
Fortschritt {timelineDone}/{timelineTotal}
{fmtEUR(t.revenue)}
); } // ─── Detail drawer ──────────────────────────────────────────────────────────── function EventDetail({ event, staff, onClose }) { const [tab, setTab] = React.useState('overview'); const [showOffer, setShowOffer] = React.useState(false); const t = eventTotals(event); const stateMeta = EVENT_STATES.find(s => s.id === event.state) || EVENT_STATES[0]; const changeState = (stateId) => mcApi.patch('/events/' + event.id, { state: stateId }); const tabs = [ { id: 'overview', label: 'Übersicht' }, { id: 'menu', label: 'Menü & Kalkulation' }, { id: 'team', label: 'Team-Dispo' }, { id: 'equipment', label: 'Equipment' }, { id: 'timeline', label: 'Timeline' }, ]; return (
{/* Header */}
{stateMeta.label} {event.type}
{event.name}
{fmtEventDate(event.date)} · {event.startTime}—{event.endTime} · {event.venue} · {event.guests} Gäste
{EVENT_STATES.map(s => ( ))}
{/* Tabs */}
{tabs.map(t2 => ( ))}
{/* Body */}
{tab === 'overview' && } {tab === 'menu' && } {tab === 'team' && } {tab === 'equipment' && } {tab === 'timeline' && }
{/* Footer summary */}
= 30 ? 'leaf' : t.margin >= 20 ? 'default' : 'ember'} />
{showOffer && setShowOffer(false)} />}
); } function SumItem({ label, value, tone, dim }) { const color = tone === 'leaf' ? 'var(--mc-leaf-700)' : tone === 'ember' ? 'var(--mc-ember-700)' : dim ? 'var(--mc-ink-dim)' : 'var(--mc-ink)'; return (
{label}
{value}
); } // ─── Overview tab ───────────────────────────────────────────────────────────── function OverviewTab({ event, staff, totals }) { const lead = staff.find(s => s.id === event.lead); const [notes, setNotes] = React.useState(event.notes || ''); React.useEffect(() => setNotes(event.notes || ''), [event.id]); const saveNotes = () => mcApi.patch('/events/' + event.id, { notes }); const outstanding = totals.revenue - (event.paidTotal || 0); return (
{/* Kunde */}
Kunde
{event.customer.name}
{/* Venue + Zeiten */}
Veranstaltungsort
{event.venue}
{event.address}
{daysUntil(event.date) > 0 ? `Noch ${daysUntil(event.date)} Tage bis zum Event` : daysUntil(event.date) === 0 ? 'Heute · Tag des Events' : `Vor ${Math.abs(daysUntil(event.date))} Tagen stattgefunden`}
Finanzen
0 ? 'ember' : 'leaf'} bold />
{/* Zusammensetzung */}
Zusammensetzung der Kalkulation
{/* Notes */}
Notizen