wip

src/routes/index.tsx

@@ -1,28 +1,22 @@
 import { useState } from 'react'
 import { createFileRoute, useRouter } from '@tanstack/react-router'
 
+import { ReservationDateTimeField } from '#/components/reservation-datetime-field'
 import { SiteFooter } from '#/components/site-footer'
 import { SiteHeader } from '#/components/site-header'
-import { formatDateTimeLocal } from '#/lib/datetime'
+import { getNextAvailableSlot, getOpeningHoursForDisplay, getTodayLabelBerlin } from '#/lib/opening-hours'
 import { createReservation, getTables } from '#/lib/reservations'
+import { getReservationSettings } from '#/lib/settings'
 
 export const Route = createFileRoute('/')({
   component: Home,
   loader: async () => {
-    const tables = await getTables()
-    return { tables }
+    const [tables, settings] = await Promise.all([getTables(), getReservationSettings()])
+    return { tables, settings }
   },
 })
 
-const OPENING_HOURS = [
-  { day: 'Montag', hours: null },
-  { day: 'Dienstag', hours: ['17:00 – 21:30'] },
-  { day: 'Mittwoch', hours: ['17:00 – 21:30'] },
-  { day: 'Donnerstag', hours: ['17:00 – 21:30'] },
-  { day: 'Freitag', hours: ['17:00 – 22:00'] },
-  { day: 'Samstag', hours: ['17:00 – 22:00'] },
-  { day: 'Sonntag', hours: ['11:30 – 13:30', '17:00 – 22:00'] },
-]
+const OPENING_HOURS = getOpeningHoursForDisplay()
 
 function FlameIcon() {
   return (
@@ -39,20 +33,24 @@ function FlameIcon() {
 
 function Home() {
   const router = useRouter()
-  const { tables } = Route.useLoaderData()
+  const { tables, settings } = Route.useLoaderData()
 
   const [tableId, setTableId] = useState<number | string>(tables[0]?.id ?? '')
   const [customerName, setCustomerName] = useState('')
   const [customerEmail, setCustomerEmail] = useState('')
   const [partySize, setPartySize] = useState(2)
-  const [reservationTime, setReservationTime] = useState(() =>
-    formatDateTimeLocal(new Date(Date.now() + 60 * 60 * 1000)),
-  )
+  const [reservationTime, setReservationTime] = useState(() => {
+    const slot = getNextAvailableSlot(
+      new Date(Date.now() + settings.minLeadTimeMinutes * 60_000),
+      settings.reservationIntervalMinutes,
+    )
+    return slot ? `${slot.date}T${slot.time}` : ''
+  })
   const [error, setError] = useState<string | null>(null)
   const [success, setSuccess] = useState<string | null>(null)
   const [isSubmitting, setIsSubmitting] = useState(false)
 
-  const todayName = new Date().toLocaleDateString('de-DE', { weekday: 'long' })
+  const todayName = getTodayLabelBerlin()
 
   async function handleSubmit(event: React.FormEvent) {
     event.preventDefault()
@@ -64,6 +62,11 @@ function Home() {
       return
     }
 
+    if (!reservationTime.split('T')[1]) {
+      setError('Bitte wählen Sie eine gültige Uhrzeit aus')
+      return
+    }
+
     setIsSubmitting(true)
     try {
       await createReservation({
@@ -182,6 +185,7 @@ function Home() {
                   Anzahl Personen
                   <input
                     type="number"
+                    inputMode="numeric"
                     min={1}
                     max={20}
                     value={partySize}
@@ -192,15 +196,21 @@ function Home() {
 
                 <label>
                   Datum &amp; Uhrzeit
-                  <input
-                    type="datetime-local"
+                  <ReservationDateTimeField
                     value={reservationTime}
-                    onChange={(e) => setReservationTime(e.target.value)}
-                    required
+                    onChange={setReservationTime}
+                    intervalMinutes={settings.reservationIntervalMinutes}
+                    minLeadTimeMinutes={settings.minLeadTimeMinutes}
+                    maxLeadTimeDays={settings.maxLeadTimeDays}
                   />
                 </label>
               </div>
 
+              <p className="field-hint">
+                Verfügbare Uhrzeiten richten sich nach unseren{' '}
+                <a href="#oeffnungszeiten">Öffnungszeiten</a>.
+              </p>
+
               <button type="submit" disabled={isSubmitting}>
                 {isSubmitting ? 'Wird gebucht …' : 'Jetzt reservieren'}
               </button>

src/routes/staff.index.tsx

@@ -1,9 +1,14 @@
 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 { formatDateTimeLocal } from '#/lib/datetime'
+import { formatDateOnly, formatDateTimeLocal } from '#/lib/datetime'
+import { generateTimeOptions, getNextAvailableSlot, getOpeningRangesForWeekday } from '#/lib/opening-hours'
 import {
   createReservation,
   deleteReservation,
@@ -11,6 +16,7 @@ import {
   getTables,
   updateReservation,
 } from '#/lib/reservations'
+import { getReservationSettings } from '#/lib/settings'
 
 export const Route = createFileRoute('/staff/')({
   component: StaffDashboard,
@@ -22,8 +28,12 @@ export const Route = createFileRoute('/staff/')({
     return { staffUser }
   },
   loader: async ({ context }) => {
-    const [reservations, tables] = await Promise.all([getReservations(), getTables()])
-    return { staffUser: context.staffUser, reservations, tables }
+    const [reservations, tables, settings] = await Promise.all([
+      getReservations(),
+      getTables(),
+      getReservationSettings(),
+    ])
+    return { staffUser: context.staffUser, reservations, tables, settings }
   },
 })
 
@@ -48,32 +58,86 @@ type FormState = {
   reservationTime: string
 }
 
-function emptyForm(defaultTableId: number | string): FormState {
+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: formatDateTimeLocal(new Date(Date.now() + 60 * 60 * 1000)),
+    reservationTime: slot ? `${slot.date}T${slot.time}` : '',
   }
 }
 
 function StaffDashboard() {
   const router = useRouter()
-  const { staffUser, reservations, tables } = Route.useLoaderData()
+  const { staffUser, reservations, tables, settings } = Route.useLoaderData()
 
   const [editingId, setEditingId] = useState<number | null>(null)
-  const [form, setForm] = useState<FormState>(() => emptyForm(tables[0]?.id ?? ''))
+  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({
@@ -89,7 +153,7 @@ function StaffDashboard() {
 
   function cancelEdit() {
     setEditingId(null)
-    setForm(emptyForm(tables[0]?.id ?? ''))
+    setForm(emptyForm(tables[0]?.id ?? '', settings))
     setError(null)
   }
 
@@ -103,6 +167,11 @@ function StaffDashboard() {
       return
     }
 
+    if (!form.reservationTime.split('T')[1]) {
+      setError('Bitte wählen Sie eine gültige Uhrzeit aus')
+      return
+    }
+
     setIsSubmitting(true)
     try {
       const payload = {
@@ -122,7 +191,7 @@ function StaffDashboard() {
       }
 
       setEditingId(null)
-      setForm(emptyForm(tables[0]?.id ?? ''))
+      setForm(emptyForm(tables[0]?.id ?? '', settings))
       await router.invalidate()
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Etwas ist schiefgelaufen')
@@ -131,11 +200,11 @@ function StaffDashboard() {
     }
   }
 
-  async function handleDelete(reservation: ReservationRow) {
-    if (!window.confirm(`Reservierung von ${reservation.customerName} wirklich löschen?`)) {
-      return
-    }
+  async function confirmDelete() {
+    const reservation = pendingDelete
+    if (!reservation) return
 
+    setPendingDelete(null)
     setDeletingId(reservation.id)
     setError(null)
     setSuccess(null)
@@ -162,22 +231,23 @@ function StaffDashboard() {
 
   return (
     <div className="staff-page">
-      <header className="staff-topbar">
-        <Link className="wordmark" to="/">
-          Steakhaus <span>bei Mirko</span>
-        </Link>
-        <div className="staff-topbar-right">
-          {staffUser.role === 'admin' && (
-            <Link className="btn btn-secondary" to="/staff/team">
-              Mitarbeiter
-            </Link>
-          )}
-          <span>Angemeldet als {staffUser.name}</span>
-          <button type="button" className="btn btn-secondary" onClick={handleLogout}>
-            Abmelden
-          </button>
+      <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>
-      </header>
+      </div>
 
       <main className="page staff-main">
         <h1 className="section-heading">Reservierungen</h1>
@@ -201,6 +271,8 @@ function StaffDashboard() {
           </div>
         </div>
 
+        <ReservationCharts reservations={reservations} tables={tables} />
+
         <section className="staff-form-section">
           <h2 className="section-heading staff-subheading">
             {editingId ? 'Reservierung bearbeiten' : 'Neue Reservierung'}
@@ -252,6 +324,7 @@ function StaffDashboard() {
                 Anzahl Personen
                 <input
                   type="number"
+                  inputMode="numeric"
                   min={1}
                   max={20}
                   value={form.partySize}
@@ -262,11 +335,13 @@ function StaffDashboard() {
 
               <label>
                 Datum &amp; Uhrzeit
-                <input
-                  type="datetime-local"
+                <ReservationDateTimeField
                   value={form.reservationTime}
-                  onChange={(e) => setForm((f) => ({ ...f, reservationTime: e.target.value }))}
-                  required
+                  onChange={(reservationTime) => setForm((f) => ({ ...f, reservationTime }))}
+                  bookedTimes={bookedTimesForForm}
+                  intervalMinutes={settings.reservationIntervalMinutes}
+                  minLeadTimeMinutes={settings.minLeadTimeMinutes}
+                  maxLeadTimeDays={settings.maxLeadTimeDays}
                 />
               </label>
             </div>
@@ -288,8 +363,43 @@ function StaffDashboard() {
         </section>
 
         <section className="staff-table-section">
-          {reservations.length === 0 ? (
-            <p className="empty-state">Noch keine Reservierungen vorhanden.</p>
+          {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">
@@ -303,7 +413,7 @@ function StaffDashboard() {
                   </tr>
                 </thead>
                 <tbody>
-                  {reservations.map((reservation) => (
+                  {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>
@@ -313,18 +423,20 @@ function StaffDashboard() {
                         <span className="muted">{reservation.customerEmail}</span>
                       </td>
                       <td>{reservation.partySize}</td>
-                      <td 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={() => handleDelete(reservation)}
-                        >
-                          {deletingId === reservation.id ? 'Löschen …' : 'Löschen'}
-                        </button>
+                      <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>
                   ))}
@@ -334,6 +446,20 @@ function StaffDashboard() {
           )}
         </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>
   )
 }

src/routes/staff.login.tsx

@@ -1,9 +1,23 @@
 import { useState } from 'react'
-import { createFileRoute, redirect, useRouter } from '@tanstack/react-router'
+import { createFileRoute, Link, redirect, useRouter } from '@tanstack/react-router'
 
 import { getCurrentStaffUser } from '#/lib/auth'
 import { authClient } from '#/lib/auth-client'
 
+function ArrowLeftIcon() {
+  return (
+    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" aria-hidden="true">
+      <path
+        d="M19 12H5M11 6l-6 6 6 6"
+        stroke="currentColor"
+        strokeWidth="1.6"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
 export const Route = createFileRoute('/staff/login')({
   component: StaffLogin,
   beforeLoad: async () => {
@@ -41,6 +55,11 @@ function StaffLogin() {
   return (
     <div className="staff-page staff-login-page">
       <form className="reservation-form staff-login-form" onSubmit={handleSubmit}>
+        <Link className="back-link" to="/">
+          <ArrowLeftIcon />
+          Zurück zur Startseite
+        </Link>
+
         <div className="staff-login-heading">
           <span className="section-kicker">Mitarbeiterbereich</span>
           <h1 className="section-heading">Anmelden</h1>

src/routes/staff.settings.tsx

@@ -0,0 +1,175 @@
+import { useState } from 'react'
+import { createFileRoute, Link, redirect, useRouter } from '@tanstack/react-router'
+
+import { StaffTabs } from '#/components/staff-tabs'
+import { getCurrentStaffUser } from '#/lib/auth'
+import { authClient } from '#/lib/auth-client'
+import { getReservationSettings, updateReservationSettings } from '#/lib/settings'
+
+export const Route = createFileRoute('/staff/settings')({
+  component: StaffSettings,
+  beforeLoad: async () => {
+    const staffUser = await getCurrentStaffUser()
+    if (!staffUser) {
+      throw redirect({ to: '/staff/login' })
+    }
+    if (staffUser.role !== 'admin') {
+      throw redirect({ to: '/staff' })
+    }
+    return { staffUser }
+  },
+  loader: async ({ context }) => {
+    const settings = await getReservationSettings()
+    return { staffUser: context.staffUser, settings }
+  },
+})
+
+type FormState = {
+  reservationIntervalMinutes: number
+  reservationDurationMinutes: number
+  minLeadTimeMinutes: number
+  maxLeadTimeDays: number
+}
+
+function StaffSettings() {
+  const router = useRouter()
+  const { staffUser, settings } = Route.useLoaderData()
+
+  const [form, setForm] = useState<FormState>({
+    reservationIntervalMinutes: settings.reservationIntervalMinutes,
+    reservationDurationMinutes: settings.reservationDurationMinutes,
+    minLeadTimeMinutes: settings.minLeadTimeMinutes,
+    maxLeadTimeDays: settings.maxLeadTimeDays,
+  })
+  const [error, setError] = useState<string | null>(null)
+  const [success, setSuccess] = useState<string | null>(null)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  async function handleLogout() {
+    await authClient.signOut()
+    await router.navigate({ to: '/staff/login' })
+    await router.invalidate()
+  }
+
+  async function handleSubmit(event: React.FormEvent) {
+    event.preventDefault()
+    setError(null)
+    setSuccess(null)
+    setIsSubmitting(true)
+
+    try {
+      await updateReservationSettings({ data: form })
+      setSuccess('Einstellungen wurden gespeichert.')
+      await router.invalidate()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Etwas ist schiefgelaufen')
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  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">Einstellungen</h1>
+
+        <section className="staff-form-section">
+          <h2 className="section-heading staff-subheading">Reservierungsregeln</h2>
+
+          <form className="reservation-form" onSubmit={handleSubmit}>
+            <label>
+              Reservierungsintervall (Minuten)
+              <input
+                type="number"
+                inputMode="numeric"
+                min={5}
+                max={120}
+                step={5}
+                value={form.reservationIntervalMinutes}
+                onChange={(e) => setForm((f) => ({ ...f, reservationIntervalMinutes: Number(e.target.value) }))}
+                required
+              />
+            </label>
+            <p className="field-hint">Abstand zwischen den wählbaren Uhrzeiten im Buchungsformular.</p>
+
+            <label>
+              Reservierungsdauer (Minuten)
+              <input
+                type="number"
+                inputMode="numeric"
+                min={15}
+                max={480}
+                step={15}
+                value={form.reservationDurationMinutes}
+                onChange={(e) => setForm((f) => ({ ...f, reservationDurationMinutes: Number(e.target.value) }))}
+                required
+              />
+            </label>
+            <p className="field-hint">
+              Wie lange ein Tisch nach einer Reservierung als belegt gilt — verhindert überlappende Buchungen.
+            </p>
+
+            <label>
+              Mindestvorlaufzeit (Minuten)
+              <input
+                type="number"
+                inputMode="numeric"
+                min={0}
+                max={10080}
+                step={15}
+                value={form.minLeadTimeMinutes}
+                onChange={(e) => setForm((f) => ({ ...f, minLeadTimeMinutes: Number(e.target.value) }))}
+                required
+              />
+            </label>
+            <p className="field-hint">
+              Wie kurzfristig frühestens reserviert werden kann, z. B. 60 für „mindestens eine Stunde im Voraus“.
+            </p>
+
+            <label>
+              Buchbar bis zu (Tage im Voraus)
+              <input
+                type="number"
+                inputMode="numeric"
+                min={1}
+                max={365}
+                step={1}
+                value={form.maxLeadTimeDays}
+                onChange={(e) => setForm((f) => ({ ...f, maxLeadTimeDays: Number(e.target.value) }))}
+                required
+              />
+            </label>
+            <p className="field-hint">
+              Wie weit im Voraus reserviert werden kann, z. B. 60 für „höchstens 60 Tage im Voraus“.
+            </p>
+
+            <button type="submit" disabled={isSubmitting}>
+              {isSubmitting ? 'Wird gespeichert …' : 'Speichern'}
+            </button>
+
+            {error && <p className="message message-error">{error}</p>}
+            {success && <p className="message message-success">{success}</p>}
+          </form>
+        </section>
+      </main>
+    </div>
+  )
+}

src/routes/staff.team.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import { createFileRoute, Link, redirect, useRouter } from '@tanstack/react-router'
 
+import { StaffTabs } from '#/components/staff-tabs'
 import { getCurrentStaffUser } from '#/lib/auth'
 import { authClient } from '#/lib/auth-client'
 import { listStaffMembers } from '#/lib/staff'
@@ -129,6 +130,12 @@ function StaffTeam() {
     setBusyId(null)
   }
 
+  async function handleLogout() {
+    await authClient.signOut()
+    await router.navigate({ to: '/staff/login' })
+    await router.invalidate()
+  }
+
   async function handleSetPassword(member: StaffMember) {
     const newPassword = window.prompt(`Neues Passwort für ${member.name} (mind. 8 Zeichen):`)
 
@@ -156,17 +163,23 @@ function StaffTeam() {
 
   return (
     <div className="staff-page">
-      <header className="staff-topbar">
-        <Link className="wordmark" to="/">
-          Steakhaus <span>bei Mirko</span>
-        </Link>
-        <div className="staff-topbar-right">
-          <Link className="btn btn-secondary" to="/staff">
-            Zu den Reservierungen
+      <div className="staff-nav">
+        <header className="staff-topbar">
+          <Link className="wordmark" to="/">
+            Steakhaus <span>bei Mirko</span>
           </Link>
-          <span>Angemeldet als {staffUser.name}</span>
+          <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>
-      </header>
+      </div>
 
       <main className="page staff-main">
         <h1 className="section-heading">Mitarbeiter</h1>
@@ -249,39 +262,41 @@ function StaffTeam() {
                     <td>{member.email}</td>
                     <td>{member.role === 'admin' ? 'Admin' : 'Mitarbeiter'}</td>
                     <td>{member.banned ? 'Gesperrt' : 'Aktiv'}</td>
-                    <td className="table-actions">
-                      <button
-                        type="button"
-                        className="btn btn-secondary"
-                        disabled={busyId === member.id}
-                        onClick={() => handleToggleRole(member)}
-                      >
-                        {member.role === 'admin' ? 'Zu Mitarbeiter machen' : 'Zu Admin machen'}
-                      </button>
-                      <button
-                        type="button"
-                        className="btn btn-secondary"
-                        disabled={busyId === member.id}
-                        onClick={() => handleSetPassword(member)}
-                      >
-                        Passwort setzen
-                      </button>
-                      <button
-                        type="button"
-                        className="btn btn-secondary"
-                        disabled={busyId === member.id || member.id === staffUser.id}
-                        onClick={() => handleToggleBan(member)}
-                      >
-                        {member.banned ? 'Entsperren' : 'Sperren'}
-                      </button>
-                      <button
-                        type="button"
-                        className="btn btn-danger"
-                        disabled={busyId === member.id || member.id === staffUser.id}
-                        onClick={() => handleRemove(member)}
-                      >
-                        Entfernen
-                      </button>
+                    <td>
+                      <div className="table-actions">
+                        <button
+                          type="button"
+                          className="btn btn-secondary"
+                          disabled={busyId === member.id}
+                          onClick={() => handleToggleRole(member)}
+                        >
+                          {member.role === 'admin' ? 'Zu Mitarbeiter machen' : 'Zu Admin machen'}
+                        </button>
+                        <button
+                          type="button"
+                          className="btn btn-secondary"
+                          disabled={busyId === member.id}
+                          onClick={() => handleSetPassword(member)}
+                        >
+                          Passwort setzen
+                        </button>
+                        <button
+                          type="button"
+                          className="btn btn-secondary"
+                          disabled={busyId === member.id || member.id === staffUser.id}
+                          onClick={() => handleToggleBan(member)}
+                        >
+                          {member.banned ? 'Entsperren' : 'Sperren'}
+                        </button>
+                        <button
+                          type="button"
+                          className="btn btn-danger"
+                          disabled={busyId === member.id || member.id === staffUser.id}
+                          onClick={() => handleRemove(member)}
+                        >
+                          Entfernen
+                        </button>
+                      </div>
                     </td>
                   </tr>
                 ))}

src/routes/stornieren.$token.tsx

@@ -0,0 +1,96 @@
+import { useState } from 'react'
+import { createFileRoute, Link } from '@tanstack/react-router'
+
+import { SiteFooter } from '#/components/site-footer'
+import { SiteHeader } from '#/components/site-header'
+import { cancelReservationByToken, getReservationByCancelToken } from '#/lib/reservations'
+
+export const Route = createFileRoute('/stornieren/$token')({
+  component: CancelReservationPage,
+  loader: async ({ params }) => {
+    const reservation = await getReservationByCancelToken({ data: { token: params.token } })
+    return { reservation }
+  },
+})
+
+const dateTimeFormatter = new Intl.DateTimeFormat('de-DE', {
+  dateStyle: 'full',
+  timeStyle: 'short',
+})
+
+function CancelReservationPage() {
+  const { token } = Route.useParams()
+  const { reservation } = Route.useLoaderData()
+
+  const [isCancelled, setIsCancelled] = useState(false)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  async function handleCancel() {
+    setError(null)
+    setIsSubmitting(true)
+
+    try {
+      await cancelReservationByToken({ data: { token } })
+      setIsCancelled(true)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Etwas ist schiefgelaufen')
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  return (
+    <>
+      <SiteHeader />
+
+      <main className="page">
+        <section className="section">
+          <div className="section-grid">
+            <div>
+              <span className="section-kicker">Reservierung verwalten</span>
+              <h1 className="section-heading">Reservierung stornieren</h1>
+            </div>
+
+            {!reservation ? (
+              <p className="empty-state">
+                Diese Reservierung wurde nicht gefunden oder ist bereits storniert.{' '}
+                <Link to="/">Zurück zur Startseite</Link>
+              </p>
+            ) : isCancelled ? (
+              <p className="message message-success">
+                Ihre Reservierung wurde storniert. Wir haben Ihnen eine Bestätigung per E-Mail
+                gesendet. <Link to="/">Zurück zur Startseite</Link>
+              </p>
+            ) : (
+              <div className="reservation-form">
+                <ul className="contact-list">
+                  <li>
+                    <span className="label">Tisch</span>
+                    <span>{reservation.tableName}</span>
+                  </li>
+                  <li>
+                    <span className="label">Datum &amp; Uhrzeit</span>
+                    <span>{dateTimeFormatter.format(new Date(reservation.reservationTime))}</span>
+                  </li>
+                  <li>
+                    <span className="label">Personen</span>
+                    <span>{reservation.partySize}</span>
+                  </li>
+                </ul>
+
+                <button type="button" className="btn btn-danger" disabled={isSubmitting} onClick={handleCancel}>
+                  {isSubmitting ? 'Wird storniert …' : 'Reservierung stornieren'}
+                </button>
+
+                {error && <p className="message message-error">{error}</p>}
+              </div>
+            )}
+          </div>
+        </section>
+      </main>
+
+      <SiteFooter />
+    </>
+  )
+}