@stacksjs/defaults 0.70.229 → 0.70.230

package/resources/components/Dashboard/Commerce/ProductWaitlistEntryDialog.stx

@@ -0,0 +1,209 @@
+<script client>
+import type { ProductWaitlistOptions, ProductWaitlistRecord, ProductWaitlistWritePayload } from '../../../../app/Actions/Dashboard/Commerce/product-waitlist-records'
+
+type DialogMode = 'add' | 'edit'
+
+const open = useReactiveProp('open', false)
+const mode = useReactiveProp('mode', 'add' as DialogMode)
+const record = useReactiveProp('record', null as ProductWaitlistRecord | null)
+const options = useReactiveProp('options', {
+  products: [],
+  customers: [],
+} as ProductWaitlistOptions)
+const busy = useReactiveProp('busy', false)
+const errors = useReactiveProp('errors', {} as Record<string, string>)
+const emit = defineEmits()
+
+const productId = state<number | string>('')
+const customerId = state<number | string>('')
+const name = state('')
+const email = state('')
+const phone = state('')
+const quantity = state(1)
+const notificationPreference = state<ProductWaitlistWritePayload['notificationPreference']>('email')
+const source = state('website')
+const notes = state('')
+const status = state<ProductWaitlistWritePayload['status']>('waiting')
+let lastSync = ''
+
+function relationId(value: number | string): number | null {
+  if (value === '')
+    return null
+  const id = Number(value)
+  return Number.isInteger(id) && id > 0 ? id : null
+}
+
+function reset(entry: ProductWaitlistRecord | null): void {
+  productId.set(entry?.productId || '')
+  customerId.set(entry?.customerId || '')
+  name.set(entry?.name || '')
+  email.set(entry?.email || '')
+  phone.set(entry?.phone || '')
+  quantity.set(entry?.quantity || 1)
+  notificationPreference.set((entry?.notificationPreference as ProductWaitlistWritePayload['notificationPreference']) || 'email')
+  source.set(entry?.source || 'website')
+  notes.set(entry?.notes || '')
+  status.set((entry?.status as ProductWaitlistWritePayload['status']) || 'waiting')
+}
+
+effect(() => {
+  const entry = record()
+  if (!open()) {
+    lastSync = ''
+    return
+  }
+
+  const signature = `${mode()}:${entry?.id || 'new'}`
+  if (signature === lastSync)
+    return
+
+  lastSync = signature
+  reset(entry)
+})
+
+function hydrateCustomer(event: Event): void {
+  const selectedId = (event.target as HTMLSelectElement).value
+  const customer = options().customers.find(option => option.id === selectedId)
+  if (!customer)
+    return
+  if (!name().trim())
+    name.set(customer.label)
+  if (!email().trim())
+    email.set(customer.email)
+  if (!phone().trim())
+    phone.set(customer.phone)
+}
+
+function submitForm(): void {
+  const selectedProductId = relationId(productId())
+  if (!selectedProductId)
+    return
+
+  emit('submit', {
+    productId: selectedProductId,
+    customerId: relationId(customerId()),
+    name: name().trim(),
+    email: email().trim(),
+    phone: phone().trim(),
+    quantity: Math.max(1, Math.trunc(Number(quantity()) || 1)),
+    notificationPreference: notificationPreference(),
+    source: source(),
+    notes: notes().trim(),
+    status: status(),
+  } satisfies ProductWaitlistWritePayload)
+}
+
+function errorMessages(): string[] {
+  return Object.entries(errors()).map(([field, message]) => {
+    const label = field.replace(/([a-z])([A-Z])/g, '$1 $2').replaceAll('_', ' ')
+    return `${label.charAt(0).toUpperCase()}${label.slice(1)}: ${message}`
+  })
+}
+</script>
+
+<div
+  :show="open"
+  role="dialog"
+  aria-modal="true"
+  :aria-label="mode() === 'edit' ? 'Edit product waitlist entry' : 'Add product waitlist entry'"
+  class="fixed inset-0 overflow-y-auto z-30 dashboard-modal-layer"
+>
+  <div class="flex items-end justify-center sm:items-center p-4 sm:p-6 min-h-full text-center">
+    <button type="button" aria-label="Close product waitlist dialog" class="fixed inset-0 bg-gray-950/50" :disabled="busy()" @click="emit('close')"></button>
+    <form class="overflow-hidden relative p-5 sm:p-6 sm:max-w-2xl sm:w-full text-left bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl" @submit.prevent="submitForm()">
+      <div class="flex gap-4 items-start justify-between">
+        <div>
+          <h2 class="font-semibold text-gray-900 text-lg dark:text-white">{{ mode() === 'edit' ? 'Edit waitlist entry' : 'Add waitlist entry' }}</h2>
+          <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Save this entry through the WaitlistProduct model API.</p>
+        </div>
+        <Button variant="ghost" size="sm" iconOnly ariaLabel="Close dialog" :disabled="busy()" @click="emit('close')">
+          <span class="block h-5 w-5 i-hugeicons-cancel-01"></span>
+        </Button>
+      </div>
+
+      <ul :if="errorMessages().length > 0" class="mt-5 p-3 space-y-1 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">
+        <template :for="message in errorMessages()" :key="message"><li>{{ message }}</li></template>
+      </ul>
+
+      <div class="grid gap-4 sm:grid-cols-2 mt-6">
+        <label class="block sm:col-span-2">
+          <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Product</span>
+          <select x-model="productId" required class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600">
+            <option value="">Select a product</option>
+            <option :for="option in options().products" :value="option.id">{{ option.label }}{{ option.detail ? ' · ' + option.detail : '' }}</option>
+          </select>
+        </label>
+
+        <label class="block sm:col-span-2">
+          <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Existing customer</span>
+          <select x-model="customerId" class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600" @change="hydrateCustomer($event)">
+            <option value="">No linked customer</option>
+            <option :for="option in options().customers" :value="option.id">{{ option.label }}{{ option.detail ? ' · ' + option.detail : '' }}</option>
+          </select>
+        </label>
+
+        <label class="block">
+          <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Name</span>
+          <input type="text" x-model.trim="name" required maxlength="255" autocomplete="name" class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600" />
+        </label>
+
+        <label class="block">
+          <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Email</span>
+          <input type="email" x-model.trim="email" required maxlength="255" autocomplete="email" class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600" />
+        </label>
+
+        <label class="block">
+          <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Phone</span>
+          <input type="tel" x-model.trim="phone" maxlength="100" autocomplete="tel" class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600" />
+        </label>
+
+        <label class="block">
+          <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Quantity</span>
+          <input type="number" x-model.number="quantity" required min="1" step="1" class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600" />
+        </label>
+
+        <label class="block">
+          <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Notification preference</span>
+          <select x-model="notificationPreference" required class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600">
+            <option value="email">Email</option>
+            <option value="sms">SMS</option>
+            <option value="both">Email and SMS</option>
+          </select>
+        </label>
+
+        <label class="block">
+          <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Source</span>
+          <select x-model="source" required class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600">
+            <option value="website">Website</option>
+            <option value="social_media">Social media</option>
+            <option value="in-store">In store</option>
+            <option value="email">Email</option>
+            <option value="app">App</option>
+            <option value="referral">Referral</option>
+            <option value="other">Other</option>
+          </select>
+        </label>
+
+        <label class="block">
+          <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Status</span>
+          <select x-model="status" required class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600">
+            <option value="waiting">Waiting</option>
+            <option value="notified">Notified</option>
+            <option value="purchased">Purchased</option>
+            <option value="cancelled">Cancelled</option>
+          </select>
+        </label>
+
+        <label class="block sm:col-span-2">
+          <span class="block font-medium text-gray-900 text-sm dark:text-neutral-200">Notes</span>
+          <textarea x-model.trim="notes" maxlength="500" rows="3" class="block mt-2 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600"></textarea>
+        </label>
+      </div>
+
+      <div class="flex flex-col-reverse gap-3 sm:flex-row sm:justify-end mt-6">
+        <Button variant="secondary" :disabled="busy()" @click="emit('close')">Cancel</Button>
+        <Button type="submit" :loading="busy()">{{ mode() === 'edit' ? 'Save changes' : 'Add entry' }}</Button>
+      </div>
+    </form>
+  </div>
+</div>

package/resources/components/Dashboard/Commerce/ProductWaitlistTable.stx

@@ -0,0 +1,81 @@
+<script client>
+import type { ProductWaitlistOptions, ProductWaitlistRecord } from '../../../../app/Actions/Dashboard/Commerce/product-waitlist-records'
+
+const records = useReactiveProp('records', [] as ProductWaitlistRecord[])
+const options = useReactiveProp('options', {
+  products: [],
+  customers: [],
+} as ProductWaitlistOptions)
+const loading = useReactiveProp('loading', false)
+const emit = defineEmits()
+
+function formatDate(value: string): string {
+  if (!value)
+    return 'Not recorded'
+  const date = new Date(value)
+  return Number.isNaN(date.getTime()) ? value : new Intl.DateTimeFormat(undefined, { dateStyle: 'medium' }).format(date)
+}
+
+function productLabel(productId: string): string {
+  return options().products.find(option => option.id === productId)?.label || (productId ? `Product ${productId}` : 'Not linked')
+}
+
+function statusClass(value: string): string {
+  if (value === 'purchased')
+    return 'text-purple-700 dark:text-purple-300 bg-purple-50 dark:bg-purple-950/30'
+  if (value === 'notified')
+    return 'text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-950/30'
+  if (value === 'waiting')
+    return 'text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-950/30'
+  return 'text-gray-700 dark:text-neutral-300 bg-gray-100 dark:bg-neutral-700'
+}
+</script>
+
+<div class="overflow-hidden bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
+  <div :if="loading()" class="flex items-center justify-center p-8 text-gray-500 text-sm dark:text-neutral-400">
+    <span class="mr-2 h-4 w-4 animate-spin i-hugeicons-loading-03"></span>
+    Loading waitlist records
+  </div>
+  <div :else-if="records().length === 0" class="p-8 text-center">
+    <p class="font-medium text-gray-900 text-sm dark:text-white">No product waitlist records found</p>
+    <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Add an entry or adjust the current filters.</p>
+  </div>
+  <div :else class="overflow-x-auto">
+    <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">
+      <thead class="bg-gray-50 dark:bg-neutral-900/50">
+        <tr>
+          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs uppercase dark:text-neutral-400">Customer</th>
+          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs uppercase dark:text-neutral-400">Product</th>
+          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-right text-xs uppercase dark:text-neutral-400">Quantity</th>
+          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs uppercase dark:text-neutral-400">Status</th>
+          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs uppercase dark:text-neutral-400">Preference</th>
+          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs uppercase dark:text-neutral-400">Created</th>
+          <th scope="col" class="relative px-4 py-3"><span class="sr-only">Actions</span></th>
+        </tr>
+      </thead>
+      <tbody class="divide-gray-100 divide-y dark:divide-neutral-700">
+        <template :for="entry in records()" :key="entry.id">
+          <tr class="hover:bg-gray-50/60 dark:hover:bg-neutral-700/50">
+            <td class="px-4 py-3">
+              <p class="font-medium text-gray-900 text-sm dark:text-white">{{ entry.name || 'Unnamed' }}</p>
+              <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ entry.email || entry.phone || 'No contact recorded' }}</p>
+            </td>
+            <td class="px-4 py-3 text-gray-700 text-sm dark:text-neutral-200">{{ productLabel(entry.productId) }}</td>
+            <td class="px-4 py-3 font-mono text-gray-700 text-right text-sm dark:text-neutral-200">{{ entry.quantity }}</td>
+            <td class="px-4 py-3"><span :class="'inline-flex px-2 py-1 font-medium text-xs capitalize rounded-full ' + statusClass(entry.status)">{{ entry.status || 'unknown' }}</span></td>
+            <td class="px-4 py-3 capitalize text-gray-600 text-sm dark:text-neutral-300">{{ entry.notificationPreference || 'Not recorded' }}</td>
+            <td class="px-4 py-3 text-gray-600 text-sm whitespace-nowrap dark:text-neutral-300">{{ formatDate(entry.createdAt) }}</td>
+            <td class="px-4 py-3 text-right whitespace-nowrap">
+              <Button variant="ghost" size="sm" iconOnly :ariaLabel="'Edit waitlist entry for ' + (entry.name || 'customer')" @click="emit('edit', entry)">
+                <span class="block h-4 w-4 text-blue-500 i-hugeicons-edit-01"></span>
+              </Button>
+              <Button variant="ghost" size="sm" iconOnly :ariaLabel="'Delete waitlist entry for ' + (entry.name || 'customer')" @click="emit('delete', entry)">
+                <span class="block h-4 w-4 text-red-500 i-hugeicons-waste"></span>
+              </Button>
+            </td>
+          </tr>
+        </template>
+      </tbody>
+    </table>
+  </div>
+</div>

package/resources/components/Dashboard/Commerce/RestaurantWaitlistDashboard.stx

@@ -0,0 +1,294 @@
+<script client>
+import type { RestaurantWaitlistOptions, RestaurantWaitlistRecord, RestaurantWaitlistSummary, RestaurantWaitlistWritePayload } from '../../../../app/Actions/Dashboard/Commerce/restaurant-waitlist-records'
+import { restaurantWaitlistTimestamp } from '../../../../app/Actions/Dashboard/Commerce/restaurant-waitlist-records'
+import { DashboardApiError, dashboardApi } from '../../../../functions/dashboard-api'
+import { pushToast } from '../../../../functions/toasts'
+
+interface RestaurantWaitlistResponse {
+  records: RestaurantWaitlistRecord[]
+  summary: RestaurantWaitlistSummary
+  options: RestaurantWaitlistOptions
+}
+
+const records = state<RestaurantWaitlistRecord[]>([])
+const summary = state<RestaurantWaitlistSummary>({ total: 0, waiting: 0, seated: 0, cancelled: 0, noShow: 0, averageQuotedWait: 0, seatingRate: 0 })
+const options = state<RestaurantWaitlistOptions>({ customers: [] })
+const search = state('')
+const status = state('all')
+const preference = state('all')
+const isLoading = state(true)
+const loadError = state('')
+const entryDialogOpen = state(false)
+const entryDialogMode = state<'add' | 'edit'>('add')
+const editingRecord = state<RestaurantWaitlistRecord | null>(null)
+const deleteRecord = state<RestaurantWaitlistRecord | null>(null)
+const isSaving = state(false)
+const isDeleting = state(false)
+const busyId = state('')
+const validationErrors = state<Record<string, string>>({})
+
+function rows(): RestaurantWaitlistRecord[] {
+  const query = search().trim().toLowerCase()
+  return records().filter((record) => {
+    if (status() !== 'all' && record.status !== status())
+      return false
+    if (preference() !== 'all' && record.tablePreference !== preference())
+      return false
+    return !query || [record.name, record.email, record.phone, record.status, record.tablePreference]
+      .some(value => value.toLowerCase().includes(query))
+  })
+}
+
+function openAddDialog(): void {
+  entryDialogMode.set('add')
+  editingRecord.set(null)
+  validationErrors.set({})
+  entryDialogOpen.set(true)
+}
+
+function openEditDialog(record: RestaurantWaitlistRecord): void {
+  entryDialogMode.set('edit')
+  editingRecord.set(record)
+  validationErrors.set({})
+  entryDialogOpen.set(true)
+}
+
+function closeEntryDialog(): void {
+  if (isSaving())
+    return
+  entryDialogOpen.set(false)
+  editingRecord.set(null)
+  validationErrors.set({})
+}
+
+function openDeleteDialog(record: RestaurantWaitlistRecord): void {
+  deleteRecord.set(record)
+}
+
+function closeDeleteDialog(): void {
+  if (!isDeleting())
+    deleteRecord.set(null)
+}
+
+function relationId(value: string): number | null {
+  const id = Number(value)
+  return Number.isInteger(id) && id > 0 ? id : null
+}
+
+function writePayload(record: RestaurantWaitlistRecord, nextStatus = record.status): RestaurantWaitlistWritePayload {
+  const payload: RestaurantWaitlistWritePayload = {
+    customerId: relationId(record.customerId),
+    name: record.name,
+    email: record.email,
+    phone: record.phone,
+    partySize: record.partySize,
+    checkInTime: restaurantWaitlistTimestamp(record.checkInTime),
+    tablePreference: record.tablePreference as RestaurantWaitlistWritePayload['tablePreference'],
+    status: nextStatus as RestaurantWaitlistWritePayload['status'],
+    quoted_wait_time: record.quotedWaitTime,
+  }
+  if (record.actualWaitTime !== null)
+    payload.actual_wait_time = record.actualWaitTime
+  if (record.queuePosition !== null)
+    payload.queue_position = record.queuePosition
+  return payload
+}
+
+function elapsedMinutes(value: string): number {
+  const checkedIn = restaurantWaitlistTimestamp(value) * 1000
+  if (checkedIn <= 0)
+    return 0
+  return Math.max(0, Math.round((Date.now() - checkedIn) / 60000))
+}
+
+async function loadRecords(): Promise<void> {
+  isLoading.set(true)
+  loadError.set('')
+  try {
+    const result = await dashboardApi<RestaurantWaitlistResponse>('/api/dashboard/commerce/waitlist-restaurants')
+    records.set(Array.isArray(result.records) ? result.records : [])
+    summary.set(result.summary ?? { total: 0, waiting: 0, seated: 0, cancelled: 0, noShow: 0, averageQuotedWait: 0, seatingRate: 0 })
+    options.set(result.options ?? { customers: [] })
+  }
+  catch (error) {
+    loadError.set('Restaurant waitlist records could not be loaded.')
+    pushToast('error', 'Could not load restaurant waitlist', {
+      detail: error instanceof Error ? error.message : String(error),
+    })
+  }
+  finally {
+    isLoading.set(false)
+  }
+}
+
+async function saveRecord(payload: RestaurantWaitlistWritePayload): Promise<void> {
+  const current = editingRecord()
+  const isEditing = entryDialogMode() === 'edit' && current !== null
+  const path = isEditing
+    ? `/api/dashboard/commerce/waitlist-restaurants/${current.id}`
+    : '/api/dashboard/commerce/waitlist-restaurants'
+  const method = isEditing ? 'PATCH' : 'POST'
+
+  isSaving.set(true)
+  validationErrors.set({})
+  try {
+    await dashboardApi(path, { method, body: payload })
+    entryDialogOpen.set(false)
+    editingRecord.set(null)
+    pushToast('success', isEditing ? 'Waitlist party updated' : 'Waitlist party added')
+    await loadRecords()
+  }
+  catch (error) {
+    if (error instanceof DashboardApiError)
+      validationErrors.set(error.fields ?? {})
+    pushToast('error', 'Could not save waitlist party', {
+      detail: error instanceof Error ? error.message : String(error),
+    })
+  }
+  finally {
+    isSaving.set(false)
+  }
+}
+
+async function changeStatus(record: RestaurantWaitlistRecord, nextStatus: 'seated' | 'no_show'): Promise<void> {
+  busyId.set(record.id)
+  try {
+    const payload = writePayload(record, nextStatus)
+    if (nextStatus === 'seated' && payload.actual_wait_time === undefined)
+      payload.actual_wait_time = elapsedMinutes(record.checkInTime)
+    await dashboardApi(`/api/dashboard/commerce/waitlist-restaurants/${record.id}`, { method: 'PATCH', body: payload })
+    pushToast('success', nextStatus === 'seated' ? 'Party marked as seated' : 'Party marked as no show')
+    await loadRecords()
+  }
+  catch (error) {
+    pushToast('error', 'Could not update waitlist status', {
+      detail: error instanceof Error ? error.message : String(error),
+    })
+  }
+  finally {
+    busyId.set('')
+  }
+}
+
+async function deleteSelectedRecord(): Promise<void> {
+  const current = deleteRecord()
+  if (!current)
+    return
+
+  isDeleting.set(true)
+  busyId.set(current.id)
+  try {
+    await dashboardApi(`/api/dashboard/commerce/waitlist-restaurants/${current.id}`, { method: 'DELETE' })
+    deleteRecord.set(null)
+    pushToast('success', 'Waitlist party deleted')
+    await loadRecords()
+  }
+  catch (error) {
+    pushToast('error', 'Could not delete waitlist party', {
+      detail: error instanceof Error ? error.message : String(error),
+    })
+  }
+  finally {
+    isDeleting.set(false)
+    busyId.set('')
+  }
+}
+
+onMount(() => {
+  void loadRecords()
+})
+</script>
+
+<div class="space-y-6">
+  <header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+    <div>
+      <h1 class="font-bold text-2xl text-gray-900 dark:text-white">Restaurant Waitlist</h1>
+      <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Manage persisted WaitlistRestaurant records and seating states.</p>
+    </div>
+    <div class="flex gap-2">
+      <Button variant="secondary" :loading="isLoading()" @click="loadRecords">
+        <span :if="!isLoading()" class="h-4 w-4 i-hugeicons-refresh"></span>
+        Refresh
+      </Button>
+      <Button :disabled="isLoading()" @click="openAddDialog()">
+        <span class="h-4 w-4 i-hugeicons-add-01"></span>
+        Add party
+      </Button>
+    </div>
+  </header>
+
+  <div :if="loadError()" class="p-4 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">{{ loadError() }}</div>
+
+  <section class="grid gap-3 grid-cols-2 lg:grid-cols-5">
+    <template :for="item in [
+      { label: 'Waiting', value: summary().waiting },
+      { label: 'Quoted wait', value: summary().averageQuotedWait + ' min' },
+      { label: 'Seated', value: summary().seated },
+      { label: 'No show', value: summary().noShow },
+      { label: 'Seating rate', value: summary().seatingRate + '%' }
+    ]">
+      <div class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
+        <p class="text-gray-500 text-xs uppercase dark:text-neutral-400">{{ item.label }}</p>
+        <p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ item.value }}</p>
+      </div>
+    </template>
+  </section>
+
+  <section class="space-y-3">
+    <div class="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
+      <div>
+        <h2 class="font-semibold text-gray-900 dark:text-white">Waitlist parties</h2>
+        <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Up to 200 recent records from the application model.</p>
+      </div>
+      <div class="flex flex-wrap gap-2">
+        <label class="sr-only" for="restaurant-waitlist-status">Status</label>
+        <select id="restaurant-waitlist-status" x-model="status" class="px-3 py-2 text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-700">
+          <option value="all">All statuses</option>
+          <option value="waiting">Waiting</option>
+          <option value="seated">Seated</option>
+          <option value="cancelled">Cancelled</option>
+          <option value="no_show">No show</option>
+        </select>
+        <label class="sr-only" for="restaurant-waitlist-preference">Table preference</label>
+        <select id="restaurant-waitlist-preference" x-model="preference" class="px-3 py-2 text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-700">
+          <option value="all">All tables</option>
+          <option value="no_preference">No preference</option>
+          <option value="indoor">Indoor</option>
+          <option value="bar">Bar</option>
+          <option value="booth">Booth</option>
+        </select>
+        <label class="sr-only" for="restaurant-waitlist-search">Search waitlist</label>
+        <input id="restaurant-waitlist-search" x-model="search" type="search" placeholder="Search waitlist" class="px-3 py-2 w-56 text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-700" />
+      </div>
+    </div>
+
+    <RestaurantWaitlistTable
+      :records="rows()"
+      :loading="isLoading()"
+      :busyId="busyId()"
+      @seat="changeStatus($event, 'seated')"
+      @no-show="changeStatus($event, 'no_show')"
+      @edit="openEditDialog"
+      @delete="openDeleteDialog"
+    />
+  </section>
+</div>
+
+<RestaurantWaitlistEntryDialog
+  :open="entryDialogOpen()"
+  :mode="entryDialogMode()"
+  :record="editingRecord()"
+  :options="options()"
+  :busy="isSaving()"
+  :errors="validationErrors()"
+  @submit="saveRecord"
+  @close="closeEntryDialog()"
+/>
+
+<RestaurantWaitlistDeleteDialog
+  :open="Boolean(deleteRecord())"
+  :record="deleteRecord()"
+  :busy="isDeleting()"
+  @confirm="deleteSelectedRecord()"
+  @close="closeDeleteDialog()"
+/>

package/resources/components/Dashboard/Commerce/RestaurantWaitlistDeleteDialog.stx

@@ -0,0 +1,27 @@
+<script client>
+import type { RestaurantWaitlistRecord } from '../../../../app/Actions/Dashboard/Commerce/restaurant-waitlist-records'
+
+const open = useReactiveProp('open', false)
+const record = useReactiveProp('record', null as RestaurantWaitlistRecord | null)
+const busy = useReactiveProp('busy', false)
+const emit = defineEmits()
+</script>
+
+<div :show="open" role="alertdialog" aria-modal="true" aria-label="Delete restaurant waitlist entry" class="fixed inset-0 overflow-y-auto z-40 dashboard-modal-layer">
+  <div class="flex items-end justify-center sm:items-center p-4 min-h-full text-center">
+    <button type="button" aria-label="Close delete confirmation" class="fixed inset-0 bg-gray-950/50" :disabled="busy()" @click="emit('close')"></button>
+    <div class="relative p-5 sm:p-6 sm:max-w-md sm:w-full text-left bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl">
+      <div class="flex items-center justify-center h-10 w-10 text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-950/30 rounded-full">
+        <span class="h-5 w-5 i-hugeicons-waste"></span>
+      </div>
+      <h2 class="mt-4 font-semibold text-gray-900 text-lg dark:text-white">Delete waitlist party?</h2>
+      <p class="mt-2 text-gray-500 text-sm dark:text-neutral-400">
+        {{ record()?.name || 'This party' }} will be permanently removed from the WaitlistRestaurant model.
+      </p>
+      <div class="flex flex-col-reverse gap-3 sm:flex-row sm:justify-end mt-6">
+        <Button variant="secondary" :disabled="busy()" @click="emit('close')">Cancel</Button>
+        <Button variant="danger" :loading="busy()" @click="emit('confirm')">Delete party</Button>
+      </div>
+    </div>
+  </div>
+</div>