feat(frontend): add full reservation workflow, timeline gantt, and booking modal
This commit is contained in:
DanielS
278
frontend/src/components/BookingModal.tsx
Normal file
278
frontend/src/components/BookingModal.tsx
Normal file
@@ -0,0 +1,278 @@
|
||||
import { useState } from 'react';
|
||||
import { useAppStore } from '../store/useAppStore';
|
||||
import { Reservation } from '../types';
|
||||
|
||||
const TAGS = ['Hochstuhl', 'Allergie', 'Fensterplatz', 'Geburtstag'];
|
||||
const GUEST_COUNTS = [1, 2, 3, 4, 5, 6, 7, 8, 10, 12];
|
||||
|
||||
function generateId() {
|
||||
return Math.random().toString(36).substring(2, 10);
|
||||
}
|
||||
|
||||
function getTimeSlots() {
|
||||
const slots: string[] = [];
|
||||
for (let h = 10; h < 24; h++) {
|
||||
for (const m of [0, 15, 30, 45]) {
|
||||
slots.push(`${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`);
|
||||
}
|
||||
}
|
||||
return slots;
|
||||
}
|
||||
|
||||
const TIME_SLOTS = getTimeSlots();
|
||||
|
||||
export default function BookingModal() {
|
||||
const { tables, prefillTableId, prefillTime, prefillDate, closeBookingModal, addReservation } = useAppStore();
|
||||
|
||||
const today = prefillDate ?? new Date().toISOString().slice(0, 10);
|
||||
|
||||
const [guestCount, setGuestCount] = useState(2);
|
||||
const [date, setDate] = useState(today);
|
||||
const [startTime, setStartTime] = useState(prefillTime ?? '19:00');
|
||||
const [endTime, setEndTime] = useState(() => {
|
||||
const start = prefillTime ?? '19:00';
|
||||
const [h, m] = start.split(':').map(Number);
|
||||
const end = h + 1 + ':' + String(m).padStart(2, '0');
|
||||
return end;
|
||||
});
|
||||
const [firstName, setFirstName] = useState('');
|
||||
const [lastName, setLastName] = useState('');
|
||||
const [phone, setPhone] = useState('');
|
||||
const [email, setEmail] = useState('');
|
||||
const [tableId, setTableId] = useState(prefillTableId ?? tables[0]?.id ?? '');
|
||||
const [notes, setNotes] = useState('');
|
||||
const [selectedTags, setSelectedTags] = useState<string[]>([]);
|
||||
|
||||
const suggestedTables = tables.filter((t) => t.maxCapacity >= guestCount && t.status === 'FREE');
|
||||
|
||||
const toggleTag = (tag: string) =>
|
||||
setSelectedTags((prev) => prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]);
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!firstName || !tableId) return;
|
||||
|
||||
const reservation: Reservation = {
|
||||
id: generateId(),
|
||||
guest: { id: generateId(), firstName, lastName, phone: phone || undefined, email: email || undefined },
|
||||
tableIds: [tableId],
|
||||
date,
|
||||
startTime,
|
||||
endTime,
|
||||
guestCount,
|
||||
status: 'CONFIRMED',
|
||||
notes,
|
||||
tags: selectedTags,
|
||||
createdAt: new Date().toISOString(),
|
||||
};
|
||||
addReservation(reservation);
|
||||
closeBookingModal();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-slate-950/85 backdrop-blur-sm flex items-center justify-center p-4 z-50 overflow-y-auto">
|
||||
<div className="bg-slate-900 border border-slate-700 rounded-3xl w-full max-w-lg shadow-2xl my-4">
|
||||
{/* Header */}
|
||||
<div className="px-6 py-5 border-b border-slate-800 flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-amber-400">Neue Reservierung</h3>
|
||||
<p className="text-xs text-slate-400">Schnellbuchung / Walk-In</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={closeBookingModal}
|
||||
className="w-8 h-8 rounded-full bg-slate-800 hover:bg-slate-700 flex items-center justify-center text-slate-400 hover:text-white transition"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="p-6 space-y-5">
|
||||
{/* Person Count */}
|
||||
<div>
|
||||
<label className="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Personen</label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{GUEST_COUNTS.map((n) => (
|
||||
<button
|
||||
key={n}
|
||||
type="button"
|
||||
onClick={() => setGuestCount(n)}
|
||||
className={`w-11 h-11 rounded-xl font-bold text-sm transition border ${
|
||||
guestCount === n
|
||||
? 'bg-amber-500 border-amber-400 text-slate-950 shadow-lg shadow-amber-500/20'
|
||||
: 'bg-slate-800/60 border-slate-700 text-slate-300 hover:border-amber-500/50'
|
||||
}`}
|
||||
>
|
||||
{n}
|
||||
</button>
|
||||
))}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setGuestCount(15)}
|
||||
className={`px-3 h-11 rounded-xl font-bold text-sm transition border ${
|
||||
guestCount >= 13
|
||||
? 'bg-amber-500 border-amber-400 text-slate-950'
|
||||
: 'bg-slate-800/60 border-slate-700 text-slate-300 hover:border-amber-500/50'
|
||||
}`}
|
||||
>
|
||||
12+
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Date & Time */}
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
<div className="col-span-3 sm:col-span-1">
|
||||
<label className="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Datum</label>
|
||||
<input
|
||||
type="date"
|
||||
value={date}
|
||||
onChange={(e) => setDate(e.target.value)}
|
||||
className="w-full bg-slate-800/60 border border-slate-700 rounded-xl px-3 py-2.5 text-sm text-slate-100 focus:outline-none focus:border-amber-500 transition"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Von</label>
|
||||
<select
|
||||
value={startTime}
|
||||
onChange={(e) => setStartTime(e.target.value)}
|
||||
className="w-full bg-slate-800/60 border border-slate-700 rounded-xl px-3 py-2.5 text-sm text-slate-100 focus:outline-none focus:border-amber-500 transition"
|
||||
>
|
||||
{TIME_SLOTS.map((s) => <option key={s}>{s}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Bis</label>
|
||||
<select
|
||||
value={endTime}
|
||||
onChange={(e) => setEndTime(e.target.value)}
|
||||
className="w-full bg-slate-800/60 border border-slate-700 rounded-xl px-3 py-2.5 text-sm text-slate-100 focus:outline-none focus:border-amber-500 transition"
|
||||
>
|
||||
{TIME_SLOTS.map((s) => <option key={s}>{s}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Guest Info */}
|
||||
<div>
|
||||
<label className="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Gastdaten</label>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<input
|
||||
required
|
||||
type="text"
|
||||
placeholder="Vorname *"
|
||||
value={firstName}
|
||||
onChange={(e) => setFirstName(e.target.value)}
|
||||
className="bg-slate-800/60 border border-slate-700 rounded-xl px-3 py-2.5 text-sm text-slate-100 focus:outline-none focus:border-amber-500 transition placeholder-slate-600"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Nachname"
|
||||
value={lastName}
|
||||
onChange={(e) => setLastName(e.target.value)}
|
||||
className="bg-slate-800/60 border border-slate-700 rounded-xl px-3 py-2.5 text-sm text-slate-100 focus:outline-none focus:border-amber-500 transition placeholder-slate-600"
|
||||
/>
|
||||
<input
|
||||
type="tel"
|
||||
placeholder="Telefon"
|
||||
value={phone}
|
||||
onChange={(e) => setPhone(e.target.value)}
|
||||
className="bg-slate-800/60 border border-slate-700 rounded-xl px-3 py-2.5 text-sm text-slate-100 focus:outline-none focus:border-amber-500 transition placeholder-slate-600"
|
||||
/>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="E-Mail (optional)"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="bg-slate-800/60 border border-slate-700 rounded-xl px-3 py-2.5 text-sm text-slate-100 focus:outline-none focus:border-amber-500 transition placeholder-slate-600"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Table Selection */}
|
||||
<div>
|
||||
<label className="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">
|
||||
Tisch zuweisen
|
||||
{suggestedTables.length > 0 && (
|
||||
<span className="ml-2 text-emerald-400 font-medium normal-case">
|
||||
{suggestedTables.length} freie Tische verfügbar
|
||||
</span>
|
||||
)}
|
||||
</label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{tables.map((t) => {
|
||||
const isSuggested = suggestedTables.some((s) => s.id === t.id);
|
||||
return (
|
||||
<button
|
||||
key={t.id}
|
||||
type="button"
|
||||
onClick={() => setTableId(t.id)}
|
||||
className={`px-3 py-2 rounded-xl text-xs font-semibold border transition ${
|
||||
tableId === t.id
|
||||
? 'bg-amber-500 border-amber-400 text-slate-950'
|
||||
: isSuggested
|
||||
? 'bg-emerald-500/15 border-emerald-500/40 text-emerald-300 hover:bg-emerald-500/25'
|
||||
: 'bg-slate-800/50 border-slate-700 text-slate-400 hover:border-slate-500'
|
||||
}`}
|
||||
>
|
||||
{t.number} ({t.maxCapacity}P)
|
||||
{isSuggested && tableId !== t.id && <span className="ml-1">✓</span>}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tags */}
|
||||
<div>
|
||||
<label className="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Tags / Besonderheiten</label>
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
{TAGS.map((tag) => (
|
||||
<button
|
||||
key={tag}
|
||||
type="button"
|
||||
onClick={() => toggleTag(tag)}
|
||||
className={`px-3 py-1.5 rounded-full text-xs font-semibold border transition ${
|
||||
selectedTags.includes(tag)
|
||||
? 'bg-purple-500/30 border-purple-400/60 text-purple-300'
|
||||
: 'bg-slate-800/50 border-slate-700 text-slate-400 hover:border-slate-500'
|
||||
}`}
|
||||
>
|
||||
{tag === 'Hochstuhl' ? '🪑' : tag === 'Allergie' ? '⚠️' : tag === 'Fensterplatz' ? '🪟' : '🎂'} {tag}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Notes */}
|
||||
<div>
|
||||
<label className="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Notizen</label>
|
||||
<textarea
|
||||
rows={2}
|
||||
placeholder="Besondere Wünsche, Hinweise..."
|
||||
value={notes}
|
||||
onChange={(e) => setNotes(e.target.value)}
|
||||
className="w-full bg-slate-800/60 border border-slate-700 rounded-xl px-3 py-2.5 text-sm text-slate-100 focus:outline-none focus:border-amber-500 transition resize-none placeholder-slate-600"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-3 pt-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={closeBookingModal}
|
||||
className="flex-1 py-3 rounded-2xl bg-slate-800 hover:bg-slate-700 text-slate-300 font-semibold transition text-sm"
|
||||
>
|
||||
Abbrechen
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="flex-1 py-3 rounded-2xl bg-amber-500 hover:bg-amber-400 text-slate-950 font-bold transition text-sm active:scale-95 shadow-lg shadow-amber-500/25"
|
||||
>
|
||||
Reservierung bestätigen
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user