466 lines
16 KiB
TypeScript
466 lines
16 KiB
TypeScript
import { useState } from 'react'
|
|
import { createFileRoute, Link, redirect, useRouter } from '@tanstack/react-router'
|
|
|
|
import { ConfirmDialog } from '#/components/confirm-dialog'
|
|
import { ReservationCharts } from '#/components/reservation-charts'
|
|
import { ReservationDateTimeField } from '#/components/reservation-datetime-field'
|
|
import { StaffTabs } from '#/components/staff-tabs'
|
|
import { getCurrentStaffUser } from '#/lib/auth'
|
|
import { authClient } from '#/lib/auth-client'
|
|
import { formatDateOnly, formatDateTimeLocal } from '#/lib/datetime'
|
|
import { generateTimeOptions, getNextAvailableSlot, getOpeningRangesForWeekday } from '#/lib/opening-hours'
|
|
import {
|
|
createReservation,
|
|
deleteReservation,
|
|
getReservations,
|
|
getTables,
|
|
updateReservation,
|
|
} from '#/lib/reservations'
|
|
import { getReservationSettings } from '#/lib/settings'
|
|
|
|
export const Route = createFileRoute('/staff/')({
|
|
component: StaffDashboard,
|
|
beforeLoad: async () => {
|
|
const staffUser = await getCurrentStaffUser()
|
|
if (!staffUser) {
|
|
throw redirect({ to: '/staff/login' })
|
|
}
|
|
return { staffUser }
|
|
},
|
|
loader: async ({ context }) => {
|
|
const [reservations, tables, settings] = await Promise.all([
|
|
getReservations(),
|
|
getTables(),
|
|
getReservationSettings(),
|
|
])
|
|
return { staffUser: context.staffUser, reservations, tables, settings }
|
|
},
|
|
})
|
|
|
|
const dateTimeFormatter = new Intl.DateTimeFormat('de-DE', {
|
|
dateStyle: 'medium',
|
|
timeStyle: 'short',
|
|
})
|
|
|
|
function isSameDay(a: Date, b: Date) {
|
|
return (
|
|
a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate()
|
|
)
|
|
}
|
|
|
|
type ReservationRow = Awaited<ReturnType<typeof getReservations>>[number]
|
|
|
|
type FormState = {
|
|
tableId: number | string
|
|
customerName: string
|
|
customerEmail: string
|
|
partySize: number
|
|
reservationTime: string
|
|
}
|
|
|
|
type SettingsRow = Awaited<ReturnType<typeof getReservationSettings>>
|
|
|
|
function emptyForm(defaultTableId: number | string, settings: SettingsRow): FormState {
|
|
const slot = getNextAvailableSlot(
|
|
new Date(Date.now() + settings.minLeadTimeMinutes * 60_000),
|
|
settings.reservationIntervalMinutes,
|
|
)
|
|
|
|
return {
|
|
tableId: defaultTableId,
|
|
customerName: '',
|
|
customerEmail: '',
|
|
partySize: 2,
|
|
reservationTime: slot ? `${slot.date}T${slot.time}` : '',
|
|
}
|
|
}
|
|
|
|
function StaffDashboard() {
|
|
const router = useRouter()
|
|
const { staffUser, reservations, tables, settings } = Route.useLoaderData()
|
|
|
|
const [editingId, setEditingId] = useState<number | null>(null)
|
|
const [form, setForm] = useState<FormState>(() => emptyForm(tables[0]?.id ?? '', settings))
|
|
const [error, setError] = useState<string | null>(null)
|
|
const [success, setSuccess] = useState<string | null>(null)
|
|
const [isSubmitting, setIsSubmitting] = useState(false)
|
|
const [deletingId, setDeletingId] = useState<number | null>(null)
|
|
const [pendingDelete, setPendingDelete] = useState<ReservationRow | null>(null)
|
|
const [searchQuery, setSearchQuery] = useState('')
|
|
const [tableFilter, setTableFilter] = useState('all')
|
|
const [timeFilter, setTimeFilter] = useState<'all' | 'today' | 'upcoming' | 'past'>('all')
|
|
|
|
const now = new Date()
|
|
const todaysReservations = reservations.filter((r) => isSameDay(new Date(r.reservationTime), now))
|
|
const guestsToday = todaysReservations.reduce((sum, r) => sum + r.partySize, 0)
|
|
const upcoming = reservations.filter((r) => new Date(r.reservationTime).getTime() >= now.getTime())
|
|
|
|
const filteredReservations = reservations.filter((r) => {
|
|
if (tableFilter !== 'all' && String(r.tableId) !== tableFilter) return false
|
|
|
|
const reservationTime = new Date(r.reservationTime)
|
|
if (timeFilter === 'today' && !isSameDay(reservationTime, now)) return false
|
|
if (timeFilter === 'upcoming' && reservationTime.getTime() < now.getTime()) return false
|
|
if (timeFilter === 'past' && reservationTime.getTime() >= now.getTime()) return false
|
|
|
|
const query = searchQuery.trim().toLowerCase()
|
|
if (query) {
|
|
const haystack = `${r.customerName} ${r.customerEmail} ${r.tableName}`.toLowerCase()
|
|
if (!haystack.includes(query)) return false
|
|
}
|
|
|
|
return true
|
|
})
|
|
|
|
// Other reservations already sitting on the currently selected table + date, so the
|
|
// time picker can block them instead of letting staff pick a slot the server will
|
|
// just reject as double-booked. A reservation occupies its whole configured
|
|
// duration, not just its exact start time, so every interval-grid slot that falls
|
|
// inside that window counts as taken too.
|
|
const [selectedDate] = form.reservationTime.split('T')
|
|
const otherReservationsOnSelection = reservations.filter(
|
|
(r) =>
|
|
r.id !== editingId &&
|
|
String(r.tableId) === String(form.tableId) &&
|
|
formatDateOnly(new Date(r.reservationTime)) === selectedDate,
|
|
)
|
|
const bookedTimesForForm = selectedDate
|
|
? generateTimeOptions(
|
|
getOpeningRangesForWeekday(new Date(`${selectedDate}T00:00`).getDay()),
|
|
settings.reservationIntervalMinutes,
|
|
).filter((option) => {
|
|
const slotStart = new Date(`${selectedDate}T${option}`).getTime()
|
|
return otherReservationsOnSelection.some((r) => {
|
|
const otherStart = new Date(r.reservationTime).getTime()
|
|
const otherEnd = otherStart + r.durationMinutes * 60_000
|
|
return slotStart >= otherStart && slotStart < otherEnd
|
|
})
|
|
})
|
|
: []
|
|
|
|
function startEdit(reservation: ReservationRow) {
|
|
setEditingId(reservation.id)
|
|
setForm({
|
|
tableId: reservation.tableId,
|
|
customerName: reservation.customerName,
|
|
customerEmail: reservation.customerEmail,
|
|
partySize: reservation.partySize,
|
|
reservationTime: formatDateTimeLocal(new Date(reservation.reservationTime)),
|
|
})
|
|
setError(null)
|
|
setSuccess(null)
|
|
}
|
|
|
|
function cancelEdit() {
|
|
setEditingId(null)
|
|
setForm(emptyForm(tables[0]?.id ?? '', settings))
|
|
setError(null)
|
|
}
|
|
|
|
async function handleSubmit(event: React.FormEvent) {
|
|
event.preventDefault()
|
|
setError(null)
|
|
setSuccess(null)
|
|
|
|
if (!form.tableId) {
|
|
setError('Bitte wählen Sie einen Tisch aus')
|
|
return
|
|
}
|
|
|
|
if (!form.reservationTime.split('T')[1]) {
|
|
setError('Bitte wählen Sie eine gültige Uhrzeit aus')
|
|
return
|
|
}
|
|
|
|
setIsSubmitting(true)
|
|
try {
|
|
const payload = {
|
|
tableId: Number(form.tableId),
|
|
customerName: form.customerName,
|
|
customerEmail: form.customerEmail,
|
|
partySize: Number(form.partySize),
|
|
reservationTime: new Date(form.reservationTime).toISOString(),
|
|
}
|
|
|
|
if (editingId) {
|
|
await updateReservation({ data: { id: editingId, ...payload } })
|
|
setSuccess('Reservierung wurde aktualisiert.')
|
|
} else {
|
|
await createReservation({ data: payload })
|
|
setSuccess('Reservierung wurde angelegt.')
|
|
}
|
|
|
|
setEditingId(null)
|
|
setForm(emptyForm(tables[0]?.id ?? '', settings))
|
|
await router.invalidate()
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Etwas ist schiefgelaufen')
|
|
} finally {
|
|
setIsSubmitting(false)
|
|
}
|
|
}
|
|
|
|
async function confirmDelete() {
|
|
const reservation = pendingDelete
|
|
if (!reservation) return
|
|
|
|
setPendingDelete(null)
|
|
setDeletingId(reservation.id)
|
|
setError(null)
|
|
setSuccess(null)
|
|
|
|
try {
|
|
await deleteReservation({ data: { id: reservation.id } })
|
|
if (editingId === reservation.id) {
|
|
cancelEdit()
|
|
}
|
|
setSuccess('Reservierung wurde gelöscht.')
|
|
await router.invalidate()
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Etwas ist schiefgelaufen')
|
|
} finally {
|
|
setDeletingId(null)
|
|
}
|
|
}
|
|
|
|
async function handleLogout() {
|
|
await authClient.signOut()
|
|
await router.navigate({ to: '/staff/login' })
|
|
await router.invalidate()
|
|
}
|
|
|
|
return (
|
|
<div className="staff-page">
|
|
<div className="staff-nav">
|
|
<header className="staff-topbar">
|
|
<Link className="wordmark" to="/">
|
|
Steakhaus <span>bei Mirko</span>
|
|
</Link>
|
|
<div className="staff-topbar-right">
|
|
<span>Angemeldet als {staffUser.name}</span>
|
|
<button type="button" className="btn btn-secondary" onClick={handleLogout}>
|
|
Abmelden
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="staff-tabs-bar">
|
|
<StaffTabs role={staffUser.role} />
|
|
</div>
|
|
</div>
|
|
|
|
<main className="page staff-main">
|
|
<h1 className="section-heading">Reservierungen</h1>
|
|
|
|
<div className="staff-stats">
|
|
<div className="stat-card">
|
|
<span className="stat-value">{reservations.length}</span>
|
|
<span className="stat-label">Reservierungen gesamt</span>
|
|
</div>
|
|
<div className="stat-card">
|
|
<span className="stat-value">{todaysReservations.length}</span>
|
|
<span className="stat-label">Heute</span>
|
|
</div>
|
|
<div className="stat-card">
|
|
<span className="stat-value">{guestsToday}</span>
|
|
<span className="stat-label">Gäste heute</span>
|
|
</div>
|
|
<div className="stat-card">
|
|
<span className="stat-value">{upcoming.length}</span>
|
|
<span className="stat-label">Anstehend</span>
|
|
</div>
|
|
</div>
|
|
|
|
<ReservationCharts reservations={reservations} tables={tables} />
|
|
|
|
<section className="staff-form-section">
|
|
<h2 className="section-heading staff-subheading">
|
|
{editingId ? 'Reservierung bearbeiten' : 'Neue Reservierung'}
|
|
</h2>
|
|
|
|
<form className="reservation-form" onSubmit={handleSubmit}>
|
|
<label>
|
|
Tisch
|
|
<select
|
|
value={form.tableId}
|
|
onChange={(e) => setForm((f) => ({ ...f, tableId: e.target.value }))}
|
|
required
|
|
>
|
|
<option value="" disabled>
|
|
Tisch auswählen
|
|
</option>
|
|
{tables.map((table) => (
|
|
<option key={table.id} value={table.id}>
|
|
{table.name} ({table.seats} Plätze)
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
|
|
<div className="form-row">
|
|
<label>
|
|
Name
|
|
<input
|
|
type="text"
|
|
value={form.customerName}
|
|
onChange={(e) => setForm((f) => ({ ...f, customerName: e.target.value }))}
|
|
required
|
|
/>
|
|
</label>
|
|
|
|
<label>
|
|
E-Mail
|
|
<input
|
|
type="email"
|
|
value={form.customerEmail}
|
|
onChange={(e) => setForm((f) => ({ ...f, customerEmail: e.target.value }))}
|
|
required
|
|
/>
|
|
</label>
|
|
</div>
|
|
|
|
<div className="form-row">
|
|
<label>
|
|
Anzahl Personen
|
|
<input
|
|
type="number"
|
|
inputMode="numeric"
|
|
min={1}
|
|
max={20}
|
|
value={form.partySize}
|
|
onChange={(e) => setForm((f) => ({ ...f, partySize: Number(e.target.value) }))}
|
|
required
|
|
/>
|
|
</label>
|
|
|
|
<label>
|
|
Datum & Uhrzeit
|
|
<ReservationDateTimeField
|
|
value={form.reservationTime}
|
|
onChange={(reservationTime) => setForm((f) => ({ ...f, reservationTime }))}
|
|
bookedTimes={bookedTimesForForm}
|
|
intervalMinutes={settings.reservationIntervalMinutes}
|
|
minLeadTimeMinutes={settings.minLeadTimeMinutes}
|
|
maxLeadTimeDays={settings.maxLeadTimeDays}
|
|
/>
|
|
</label>
|
|
</div>
|
|
|
|
<div className="form-actions">
|
|
<button type="submit" disabled={isSubmitting}>
|
|
{isSubmitting ? 'Wird gespeichert …' : editingId ? 'Speichern' : 'Anlegen'}
|
|
</button>
|
|
{editingId && (
|
|
<button type="button" className="btn btn-secondary" onClick={cancelEdit}>
|
|
Abbrechen
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{error && <p className="message message-error">{error}</p>}
|
|
{success && <p className="message message-success">{success}</p>}
|
|
</form>
|
|
</section>
|
|
|
|
<section className="staff-table-section">
|
|
{reservations.length > 0 && (
|
|
<div className="table-filters">
|
|
<input
|
|
type="search"
|
|
className="table-search"
|
|
placeholder="Suche nach Name, E-Mail oder Tisch …"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
aria-label="Reservierungen durchsuchen"
|
|
/>
|
|
<select value={tableFilter} onChange={(e) => setTableFilter(e.target.value)} aria-label="Nach Tisch filtern">
|
|
<option value="all">Alle Tische</option>
|
|
{tables.map((table) => (
|
|
<option key={table.id} value={String(table.id)}>
|
|
{table.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<select
|
|
value={timeFilter}
|
|
onChange={(e) => setTimeFilter(e.target.value as typeof timeFilter)}
|
|
aria-label="Nach Zeitraum filtern"
|
|
>
|
|
<option value="all">Alle Zeiträume</option>
|
|
<option value="today">Heute</option>
|
|
<option value="upcoming">Anstehend</option>
|
|
<option value="past">Vergangen</option>
|
|
</select>
|
|
</div>
|
|
)}
|
|
|
|
{filteredReservations.length === 0 ? (
|
|
<p className="empty-state">
|
|
{reservations.length === 0
|
|
? 'Noch keine Reservierungen vorhanden.'
|
|
: 'Keine Reservierungen für diese Filter gefunden.'}
|
|
</p>
|
|
) : (
|
|
<div className="table-scroll">
|
|
<table className="reservations-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Datum & Uhrzeit</th>
|
|
<th>Tisch</th>
|
|
<th>Kunde</th>
|
|
<th>Personen</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{filteredReservations.map((reservation) => (
|
|
<tr key={reservation.id} className={editingId === reservation.id ? 'is-editing' : undefined}>
|
|
<td>{dateTimeFormatter.format(new Date(reservation.reservationTime))}</td>
|
|
<td>{reservation.tableName}</td>
|
|
<td>
|
|
{reservation.customerName}
|
|
<br />
|
|
<span className="muted">{reservation.customerEmail}</span>
|
|
</td>
|
|
<td>{reservation.partySize}</td>
|
|
<td>
|
|
<div className="table-actions">
|
|
<button type="button" className="btn btn-secondary" onClick={() => startEdit(reservation)}>
|
|
Bearbeiten
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="btn btn-danger"
|
|
disabled={deletingId === reservation.id}
|
|
onClick={() => setPendingDelete(reservation)}
|
|
>
|
|
{deletingId === reservation.id ? 'Löschen …' : 'Löschen'}
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</section>
|
|
</main>
|
|
|
|
<ConfirmDialog
|
|
open={pendingDelete !== null}
|
|
title="Reservierung löschen"
|
|
message={
|
|
pendingDelete
|
|
? `Reservierung von ${pendingDelete.customerName} wirklich löschen? Der Gast erhält eine E-Mail zur Bestätigung der Stornierung. Dies kann nicht rückgängig gemacht werden.`
|
|
: ''
|
|
}
|
|
confirmLabel="Löschen"
|
|
danger
|
|
onConfirm={confirmDelete}
|
|
onCancel={() => setPendingDelete(null)}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|