wip

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>
   )
 }