@stacksjs/defaults 0.70.207 → 0.70.208

package/views/dashboard/commerce/waitlist/restaurant.stx

@@ -0,0 +1,1024 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - Restaurant Waitlist')
+<PageLayout>
+      <div class="sm:flex sm:items-center sm:justify-between">
+        <PageHeader title="Waitlist" description="Manage your restaurant waitlist and notify parties when their table is ready" />
+        <div class="flex mt-4 space-x-3 sm:mt-0">
+          <button type="button" @click="openAddEntryModal()" class="inline-flex items-center px-3 py-2 font-semibold text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 shadow-sm">
+            <div class="mr-1 h-5 w-5 i-hugeicons-plus-sign"></div>
+            Add to waitlist
+          </button>
+          <button type="button" @click="exportWaitlist()" class="inline-flex items-center px-3 py-2 font-semibold text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-800 hover:bg-gray-50 dark:hover:bg-neutral-700 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 shadow-sm">
+            <div class="mr-1 h-5 w-5 i-hugeicons-download-01"></div>
+            Export
+          </button>
+        </div>
+      </div>
+
+      <dl class="grid gap-5 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 mt-5">
+        <div class="overflow-hidden px-4 py-5 sm:p-6 bg-white dark:bg-neutral-800 rounded-lg shadow">
+          <dt class="font-medium text-gray-500 text-sm truncate dark:text-neutral-300">Current Wait</dt>
+          <dd class="mt-1 font-semibold text-3xl text-gray-900 tracking-tight dark:text-white">{{ averageWait() }}min</dd>
+          <dd class="flex items-center mt-2 text-blue-600 text-sm dark:text-blue-400">
+            <div class="mr-1 h-4 w-4 i-hugeicons-hourglass"></div>
+            <span>{{ waitingEntries() }} parties waiting</span>
+          </dd>
+        </div>
+
+        <div class="overflow-hidden px-4 py-5 sm:p-6 bg-white dark:bg-neutral-800 rounded-lg shadow">
+          <dt class="font-medium text-gray-500 text-sm truncate dark:text-neutral-300">Seated Today</dt>
+          <dd class="mt-1 font-semibold text-3xl text-gray-900 tracking-tight dark:text-white">{{ seatedEntries() }}</dd>
+          <dd class="flex items-center mt-2 text-green-600 text-sm dark:text-green-400">
+            <div class="mr-1 h-4 w-4 i-hugeicons-checkmark-circle-02"></div>
+            <span>Tables turned</span>
+          </dd>
+        </div>
+
+        <div class="overflow-hidden px-4 py-5 sm:p-6 bg-white dark:bg-neutral-800 rounded-lg shadow">
+          <dt class="font-medium text-gray-500 text-sm truncate dark:text-neutral-300">No Shows</dt>
+          <dd class="mt-1 font-semibold text-3xl text-gray-900 tracking-tight dark:text-white">{{ noShowEntries() }}</dd>
+          <dd class="flex items-center mt-2 text-red-600 text-sm dark:text-red-400">
+            <div class="mr-1 h-4 w-4 i-hugeicons-cancel-circle"></div>
+            <span>Missed reservations</span>
+          </dd>
+        </div>
+
+        <div class="overflow-hidden px-4 py-5 sm:p-6 bg-white dark:bg-neutral-800 rounded-lg shadow">
+          <dt class="font-medium text-gray-500 text-sm truncate dark:text-neutral-300">Seating Rate</dt>
+          <dd class="mt-1 font-semibold text-3xl text-gray-900 tracking-tight dark:text-white">{{ seatingRate() }}%</dd>
+          <dd class="flex items-center mt-2 text-purple-600 text-sm dark:text-purple-400">
+            <div class="mr-1 h-4 w-4 i-hugeicons-analytics-up"></div>
+            <span>{{ seatedEntries() }} parties seated</span>
+          </dd>
+        </div>
+      </dl>
+
+      <div class="grid gap-5 grid-cols-1 lg:grid-cols-2 mt-8">
+        <div class="overflow-hidden bg-white dark:bg-neutral-800 rounded-lg shadow">
+          <div class="p-6">
+            <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-white">Wait Time Trend</h3>
+            <div class="mt-2 h-80">
+              <canvas id="restaurant_trend_chart"></canvas>
+            </div>
+          </div>
+        </div>
+
+        <div class="overflow-hidden bg-white dark:bg-neutral-800 rounded-lg shadow">
+          <div class="p-6">
+            <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-white">Party Sizes</h3>
+            <div class="mt-2 h-80">
+              <canvas id="restaurant_product_chart"></canvas>
+            </div>
+          </div>
+        </div>
+
+        <div class="overflow-hidden bg-white dark:bg-neutral-800 rounded-lg shadow">
+          <div class="p-6">
+            <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-white">Table Preferences</h3>
+            <div class="mt-2 h-80">
+              <canvas id="restaurant_source_chart"></canvas>
+            </div>
+          </div>
+        </div>
+
+        <div class="overflow-hidden bg-white dark:bg-neutral-800 rounded-lg shadow">
+          <div class="p-6">
+            <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-white">Current Status</h3>
+            <div class="mt-2 h-80">
+              <canvas id="restaurant_status_chart"></canvas>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between mt-6">
+        <div class="relative max-w-sm">
+          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+            <div class="h-5 w-5 text-gray-400 i-hugeicons-search-01"></div>
+          </div>
+          <input x-model="searchQuery" type="text" placeholder="Search waitlist..." class="block pl-10 pr-3 py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white placeholder:text-gray-400 dark:placeholder:text-neutral-500 dark:bg-neutral-800 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-700 focus:ring-2 focus:ring-blue-600 focus:ring-inset" />
+        </div>
+
+        <div class="flex flex-col gap-4 sm:flex-row">
+          <select x-model="partySizeFilter" class="block pl-3 pr-10 py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white dark:bg-neutral-800 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-700 focus:ring-2 focus:ring-blue-600 focus:ring-inset">
+            <option value="all">All Party Sizes</option>
+            <option value="1-2">1-2 People</option>
+            <option value="3-4">3-4 People</option>
+            <option value="5-6">5-6 People</option>
+            <option value="7+">7+ People</option>
+          </select>
+
+          <select x-model="statusFilter" class="block pl-3 pr-10 py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white dark:bg-neutral-800 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-700 focus:ring-2 focus:ring-blue-600 focus:ring-inset">
+            <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>
+
+          <select x-model="tablePreferenceFilter" class="block pl-3 pr-10 py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white dark:bg-neutral-800 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-700 focus:ring-2 focus:ring-blue-600 focus:ring-inset">
+            <option value="all">All Table Types</option>
+            <option value="Indoor">Indoor</option>
+            <option value="Outdoor">Outdoor</option>
+            <option value="Bar">Bar</option>
+            <option value="Booth">Booth</option>
+            <option value="Private">Private</option>
+          </select>
+        </div>
+      </div>
+
+      <div class="flex items-center mt-4 text-gray-500 text-sm dark:text-neutral-400">
+        <span class="mr-2">Sort by:</span>
+        <button @click="toggleSort('name')" class="flex items-center mr-3 hover:text-gray-700 dark:hover:text-gray-300 {{ sortBy() === 'name' ? 'font-semibold text-blue-600 dark:text-blue-400' : '' }}">
+          Name
+          <span :show="sortBy() === 'name'" class="ml-1">
+            <div :show="sortOrder() === 'asc'" class="h-4 w-4 i-hugeicons-arrow-up-01"></div>
+            <div :show="sortOrder() === 'desc'" class="h-4 w-4 i-hugeicons-arrow-down-02"></div>
+          </span>
+        </button>
+        <button @click="toggleSort('checkInTime')" class="flex items-center mr-3 hover:text-gray-700 dark:hover:text-gray-300 {{ sortBy() === 'checkInTime' ? 'font-semibold text-blue-600 dark:text-blue-400' : '' }}">
+          Check-in Time
+          <span :show="sortBy() === 'checkInTime'" class="ml-1">
+            <div :show="sortOrder() === 'asc'" class="h-4 w-4 i-hugeicons-arrow-up-01"></div>
+            <div :show="sortOrder() === 'desc'" class="h-4 w-4 i-hugeicons-arrow-down-02"></div>
+          </span>
+        </button>
+        <button @click="toggleSort('estimatedWaitMinutes')" class="flex items-center hover:text-gray-700 dark:hover:text-gray-300 {{ sortBy() === 'estimatedWaitMinutes' ? 'font-semibold text-blue-600 dark:text-blue-400' : '' }}">
+          Wait Time
+          <span :show="sortBy() === 'estimatedWaitMinutes'" class="ml-1">
+            <div :show="sortOrder() === 'asc'" class="h-4 w-4 i-hugeicons-arrow-up-01"></div>
+            <div :show="sortOrder() === 'desc'" class="h-4 w-4 i-hugeicons-arrow-down-02"></div>
+          </span>
+        </button>
+      </div>
+
+      <div :show="hasSelection" class="mt-4 p-4 bg-blue-50 dark:bg-blue-900/30 rounded-md">
+        <div class="flex items-center justify-between">
+          <div class="flex items-center">
+            <span class="font-medium text-blue-700 text-sm dark:text-blue-300">{{ selectedCount() }} parties selected</span>
+          </div>
+          <div class="flex space-x-3">
+            <button @click="openNotificationModal()" class="inline-flex items-center px-3 py-2 font-semibold text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md shadow-sm">
+              <div class="mr-1 h-4 w-4 i-hugeicons-notification-square"></div>
+              Send Updates
+            </button>
+            <button @click="bulkChangeStatus('Seated')" class="inline-flex items-center px-3 py-2 font-semibold text-sm text-white bg-green-600 hover:bg-green-500 rounded-md shadow-sm">
+              <div class="mr-1 h-4 w-4 i-hugeicons-checkmark-circle-02"></div>
+              Mark as Seated
+            </button>
+            <button @click="bulkChangeStatus('No Show')" class="inline-flex items-center px-3 py-2 font-semibold text-sm text-white bg-red-600 hover:bg-red-500 rounded-md shadow-sm">
+              <div class="mr-1 h-4 w-4 i-hugeicons-cancel-circle"></div>
+              Mark as No Show
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div class="overflow-hidden mt-6 ring-1 ring-black ring-opacity-5 sm:rounded-lg shadow">
+        <table class="min-w-full divide-gray-300 divide-y dark:divide-neutral-700">
+          <thead class="bg-gray-50 dark:bg-neutral-900">
+            <tr>
+              <th scope="col" class="relative pl-4 pr-3 py-3.5 sm:pl-6">
+                <input type="checkbox" @change="toggleSelectAll()" {{ selectAll() ? 'checked' : '' }} class="h-4 w-4 text-blue-600 border-gray-300 rounded dark:border-neutral-600 focus:ring-blue-600" />
+              </th>
+              <th scope="col" class="pl-4 pr-3 py-3.5 sm:pl-6 font-semibold text-gray-900 text-left text-sm dark:text-white">Party Details</th>
+              <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-white">Wait Time</th>
+              <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-white">Status</th>
+              <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-white">Check-in Time</th>
+              <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-white">Table Preference</th>
+              <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-white">Queue Position</th>
+              <th scope="col" class="relative pl-3 pr-4 py-3.5 sm:pr-6"><span class="sr-only">Actions</span></th>
+            </tr>
+          </thead>
+          <tbody class="bg-white dark:bg-neutral-800 divide-gray-200 divide-y dark:divide-neutral-700">
+            <tr :show="hasNoEntries" class="text-center">
+              <td colspan="8" class="py-10 text-gray-500 dark:text-neutral-400">No parties currently on the waitlist.</td>
+            </tr>
+            <template :for="entry in paginatedEntries">
+              <tr class="hover:bg-gray-50 dark:hover:bg-neutral-700">
+                <td class="pl-4 pr-3 py-4 sm:pl-6 text-sm whitespace-nowrap">
+                  <input type="checkbox" @change="toggleEntrySelection({{ entry.id }})" {{ isSelected(entry.id) ? 'checked' : '' }} class="h-4 w-4 text-blue-600 border-gray-300 rounded dark:border-neutral-600 focus:ring-blue-600" />
+                </td>
+                <td class="pl-4 pr-3 py-4 sm:pl-6 text-sm whitespace-nowrap">
+                  <div class="flex items-center">
+                    <div>
+                      <div class="font-medium text-gray-900 dark:text-white">{{ entry.name }} ({{ entry.partySize }} {{ entry.partySize === 1 ? 'person' : 'people' }})</div>
+                      <div class="text-gray-500 dark:text-neutral-400">{{ entry.phone || entry.email }}</div>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-3 py-4 text-sm whitespace-nowrap">
+                  <div class="font-medium text-gray-900 dark:text-white">{{ entry.estimatedWaitMinutes }} min</div>
+                  <div class="text-gray-500 dark:text-neutral-400">Quoted: {{ entry.quotedWaitMinutes }} min</div>
+                </td>
+                <td class="px-3 py-4 text-sm whitespace-nowrap">
+                  <span class="inline-flex items-center px-2.5 py-0.5 font-medium text-xs rounded-full {{ getStatusClass(entry.status) }}">{{ entry.status }}</span>
+                </td>
+                <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">{{ formatTime(entry.checkInTime) }}</td>
+                <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">{{ entry.tablePreference || 'No Preference' }}</td>
+                <td class="px-3 py-4 text-sm whitespace-nowrap">
+                  <span :show="{{ entry.status === 'Waiting' ? 'true' : 'false' }}" class="font-medium text-gray-900 dark:text-white">#{{ entry.queuePosition }}</span>
+                  <span :show="{{ entry.status !== 'Waiting' ? 'true' : 'false' }}" class="text-gray-500 dark:text-neutral-400">-</span>
+                </td>
+                <td class="relative pl-3 pr-4 py-4 sm:pr-6 font-medium text-right text-sm whitespace-nowrap">
+                  <div class="flex justify-end space-x-2">
+                    <button @click="openEditEntryModal({{ entry.id }})" class="text-gray-400 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300 transition-colors">
+                      <div class="h-5 w-5 i-hugeicons-edit-01"></div>
+                      <span class="sr-only">Edit</span>
+                    </button>
+                    <button :show="{{ entry.status === 'Waiting' ? 'true' : 'false' }}" @click="markAsSeated({{ entry.id }})" class="text-gray-400 dark:text-green-400 hover:text-green-900 dark:hover:text-green-300 transition-colors">
+                      <div class="h-5 w-5 i-hugeicons-checkmark-circle-02"></div>
+                      <span class="sr-only">Seat</span>
+                    </button>
+                    <button :show="{{ entry.status === 'Waiting' ? 'true' : 'false' }}" @click="markAsNoShow({{ entry.id }})" class="text-gray-400 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 transition-colors">
+                      <div class="h-5 w-5 i-hugeicons-cancel-circle"></div>
+                      <span class="sr-only">No Show</span>
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            </template>
+          </tbody>
+        </table>
+      </div>
+
+      <div class="flex items-center justify-between mt-5">
+        <div class="flex sm:hidden flex-1 justify-between">
+          <button @click="prevPage()" class="{{ currentPage() === 1 ? 'cursor-not-allowed opacity-50' : 'hover:bg-gray-50 dark:hover:bg-neutral-700' }} relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 dark:border-neutral-600 dark:bg-neutral-800 dark:text-white">Previous</button>
+          <button @click="nextPage()" class="{{ currentPage() === totalPages() ? 'cursor-not-allowed opacity-50' : 'hover:bg-gray-50 dark:hover:bg-neutral-700' }} relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 dark:border-neutral-600 dark:bg-neutral-800 dark:text-white">Next</button>
+        </div>
+        <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
+          <div>
+            <p class="text-gray-700 text-sm dark:text-neutral-300">
+              Showing <span class="font-medium">{{ rangeStart() }}</span> to <span class="font-medium">{{ rangeEnd() }}</span> of <span class="font-medium">{{ totalFiltered() }}</span> results
+            </p>
+          </div>
+          <div>
+            <nav class="inline-flex -space-x-px rounded-md shadow-sm isolate" aria-label="Pagination">
+              <button @click="goToPage(currentPage() - 1)" class="{{ currentPage() === 1 ? 'cursor-not-allowed opacity-50' : 'hover:bg-gray-50 dark:hover:bg-neutral-700' }} relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 dark:ring-neutral-600">
+                <span class="sr-only">Previous</span>
+                <div class="h-5 w-5 i-hugeicons-arrow-left-01"></div>
+              </button>
+              <template :for="page in pageNumbers">
+                <button @click="goToPage({{ page }})" class="{{ page === currentPage() ? 'relative z-10 inline-flex items-center bg-blue-600 px-4 py-2 text-sm font-semibold text-white focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600' : 'relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 dark:text-white dark:ring-neutral-600 dark:hover:bg-neutral-700' }} focus:z-20">{{ page }}</button>
+              </template>
+              <button @click="goToPage(currentPage() + 1)" class="{{ currentPage() === totalPages() ? 'cursor-not-allowed opacity-50' : 'hover:bg-gray-50 dark:hover:bg-neutral-700' }} relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 dark:ring-neutral-600">
+                <span class="sr-only">Next</span>
+                <div class="h-5 w-5 i-hugeicons-arrow-right-01"></div>
+              </button>
+            </nav>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Add/Edit Entry Modal -->
+  <div :show="showEntryModal" class="fixed inset-0 overflow-y-auto z-10">
+    <div class="flex items-end justify-center sm:items-center p-4 sm:p-0 min-h-full text-center">
+      <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" @click="closeEntryModal()"></div>
+      <div class="overflow-hidden relative pb-4 pt-5 px-4 sm:my-8 sm:p-6 sm:max-w-lg sm:w-full text-left bg-white dark:bg-neutral-800 rounded-lg shadow-xl transition-all transform">
+        <div>
+          <div class="mt-3 sm:mt-5 text-center">
+            <h3 class="font-semibold leading-6 text-gray-900 text-lg dark:text-white">{{ entryModalTitle() }}</h3>
+            <div class="mt-2">
+              <p class="text-gray-500 text-sm dark:text-neutral-400">{{ entryModalDescription() }}</p>
+            </div>
+          </div>
+        </div>
+
+        <div class="mt-5 sm:mt-6">
+          <form @submit.prevent="saveEntry()">
+            <div class="grid gap-x-4 gap-y-6 grid-cols-1 sm:grid-cols-6">
+              <div class="sm:col-span-3">
+                <label for="name" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Name</label>
+                <div class="mt-1">
+                  <input id="name" x-model="entryName" type="text" required class="block w-full sm:text-sm dark:text-white dark:bg-neutral-700 border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:ring-blue-500 shadow-sm" />
+                </div>
+              </div>
+
+              <div class="sm:col-span-3">
+                <label for="email" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Email</label>
+                <div class="mt-1">
+                  <input id="email" x-model="entryEmail" type="email" required class="block w-full sm:text-sm dark:text-white dark:bg-neutral-700 border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:ring-blue-500 shadow-sm" />
+                </div>
+              </div>
+
+              <div class="sm:col-span-3">
+                <label for="phone" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Phone (optional)</label>
+                <div class="mt-1">
+                  <input id="phone" x-model="entryPhone" type="tel" class="block w-full sm:text-sm dark:text-white dark:bg-neutral-700 border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:ring-blue-500 shadow-sm" />
+                </div>
+              </div>
+
+              <div class="sm:col-span-3">
+                <label for="partySize" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Party Size</label>
+                <div class="mt-1">
+                  <input id="partySize" x-model.number="entryPartySize" type="number" class="block w-full sm:text-sm dark:text-white dark:bg-neutral-700 border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:ring-blue-500 shadow-sm" />
+                </div>
+              </div>
+
+              <div class="sm:col-span-3">
+                <label for="notificationPreference" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Notification Preference</label>
+                <div class="mt-1">
+                  <select id="notificationPreference" x-model="entryNotificationPreference" class="block w-full sm:text-sm dark:text-white dark:bg-neutral-700 border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:ring-blue-500 shadow-sm">
+                    <option value="sms">sms</option>
+                    <option value="email">email</option>
+                    <option value="both">both</option>
+                  </select>
+                </div>
+              </div>
+
+              <div class="sm:col-span-3">
+                <label for="tablePreference" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Table Preference</label>
+                <div class="mt-1">
+                  <select id="tablePreference" x-model="entryTablePreference" class="block w-full sm:text-sm dark:text-white dark:bg-neutral-700 border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:ring-blue-500 shadow-sm">
+                    <option value="No Preference">No Preference</option>
+                    <option value="Indoor">Indoor</option>
+                    <option value="Outdoor">Outdoor</option>
+                    <option value="Bar">Bar</option>
+                    <option value="Booth">Booth</option>
+                    <option value="Private">Private</option>
+                  </select>
+                </div>
+              </div>
+
+              <div class="sm:col-span-6">
+                <label for="specialRequests" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Special Requests (optional)</label>
+                <div class="mt-1">
+                  <textarea id="specialRequests" x-model="entrySpecialRequests" rows="3" class="block w-full sm:text-sm dark:text-white dark:bg-neutral-700 border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:ring-blue-500 shadow-sm"></textarea>
+                </div>
+              </div>
+
+              <div class="sm:col-span-6">
+                <label for="notes" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Notes (optional)</label>
+                <div class="mt-1">
+                  <textarea id="notes" x-model="entryNotes" rows="3" class="block w-full sm:text-sm dark:text-white dark:bg-neutral-700 border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:ring-blue-500 shadow-sm"></textarea>
+                </div>
+              </div>
+            </div>
+
+            <div class="sm:grid sm:gap-3 sm:grid-cols-2 sm:grid-flow-row-dense mt-5 sm:mt-6">
+              <button type="submit" class="inline-flex justify-center sm:col-start-2 px-3 py-2 w-full font-semibold text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 shadow-sm">{{ entryModalSubmitLabel() }}</button>
+              <button type="button" @click="closeEntryModal()" class="inline-flex justify-center sm:col-start-1 mt-3 px-3 py-2 sm:mt-0 w-full font-semibold text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 hover:bg-gray-50 dark:hover:bg-neutral-600 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 shadow-sm">Cancel</button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Notification Modal -->
+  <div :show="showNotificationModal" class="fixed inset-0 overflow-y-auto z-10">
+    <div class="flex items-end justify-center sm:items-center p-4 sm:p-0 min-h-full text-center">
+      <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" @click="closeNotificationModal()"></div>
+      <div class="overflow-hidden relative pb-4 pt-5 px-4 sm:my-8 sm:p-6 sm:max-w-lg sm:w-full text-left bg-white dark:bg-neutral-800 rounded-lg shadow-xl transition-all transform">
+        <div>
+          <div class="mt-3 sm:mt-5 text-center">
+            <h3 class="font-semibold leading-6 text-gray-900 text-lg dark:text-white">Send Notification</h3>
+            <div class="mt-2">
+              <p class="text-gray-500 text-sm dark:text-neutral-400">Subject:</p>
+              <input x-model="notificationSubject" type="text" class="block w-full sm:text-sm dark:text-white dark:bg-neutral-700 border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:ring-blue-500 shadow-sm" />
+              <p class="mt-2 text-gray-500 text-sm dark:text-neutral-400">Message:</p>
+              <textarea x-model="notificationMessage" rows="3" class="block w-full sm:text-sm dark:text-white dark:bg-neutral-700 border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:ring-blue-500 shadow-sm"></textarea>
+            </div>
+          </div>
+        </div>
+
+        <div class="mt-5 sm:mt-6">
+          <button @click="sendNotifications()" class="inline-flex justify-center px-3 py-2 w-full font-semibold text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 shadow-sm">Send Notification</button>
+        </div>
+      </div>
+</PageLayout>
+<script client>
+
+interface WaitlistEntry {
+  id: number
+  name: string
+  email: string
+  phone: string | null
+  partySize: number
+  estimatedWaitMinutes: number
+  quotedWaitMinutes: number
+  queuePosition: number
+  notificationPreference: 'sms' | 'email' | 'both'
+  notes: string | null
+  status: string
+  dateAdded: string
+  notified: boolean
+  priority: number
+  lastNotified: string | null
+  tablePreference: string | null
+  specialRequests: string | null
+  checkInTime: string
+  estimatedSeatingTime: string | null
+  actualSeatingTime: string | null
+}
+
+interface ChartLike { destroy: () => void, update: () => void, data: { labels: string[], datasets: Array<{ data: number[] }> } }
+type ChartCtor = new (canvas: HTMLElement, config: { type: string, data: unknown, options?: unknown }) => ChartLike
+
+const statuses = ['all', 'Waiting', 'Seated', 'Cancelled', 'No Show']
+const tablePreferences = ['No Preference', 'Indoor', 'Outdoor', 'Bar', 'Booth', 'Private']
+
+function isoNow(): string {
+  return new Date().toISOString()
+}
+
+const waitlistEntries = state<WaitlistEntry[]>([
+  { id: 1, name: 'John Smith', email: 'john.smith@example.com', phone: '+1 (555) 123-4567', partySize: 4, estimatedWaitMinutes: 25, quotedWaitMinutes: 30, queuePosition: 1, notificationPreference: 'sms', notes: 'Birthday celebration', status: 'Waiting', dateAdded: '2024-01-10', notified: false, priority: 2, lastNotified: null, tablePreference: 'Booth', specialRequests: 'High chair needed', checkInTime: isoNow(), estimatedSeatingTime: null, actualSeatingTime: null },
+  { id: 2, name: 'Emily Johnson', email: 'emily.j@example.com', phone: '+1 (555) 987-6543', partySize: 2, estimatedWaitMinutes: 15, quotedWaitMinutes: 18, queuePosition: 2, notificationPreference: 'email', notes: null, status: 'Waiting', dateAdded: '2024-01-12', notified: false, priority: 1, lastNotified: null, tablePreference: null, specialRequests: null, checkInTime: isoNow(), estimatedSeatingTime: null, actualSeatingTime: null },
+  { id: 3, name: 'Michael Brown', email: 'michael.b@example.com', phone: null, partySize: 3, estimatedWaitMinutes: 20, quotedWaitMinutes: 24, queuePosition: 3, notificationPreference: 'both', notes: 'VIP customer, notify immediately when available', status: 'Seated', dateAdded: '2024-01-15', notified: true, priority: 3, lastNotified: '2024-01-15T12:30:00', tablePreference: 'Indoor', specialRequests: null, checkInTime: '2024-01-15T12:00:00', estimatedSeatingTime: '2024-01-15T12:30:00', actualSeatingTime: '2024-01-15T12:30:00' },
+  { id: 4, name: 'Sarah Wilson', email: 'sarah.w@example.com', phone: '+1 (555) 456-7890', partySize: 2, estimatedWaitMinutes: 10, quotedWaitMinutes: 12, queuePosition: 4, notificationPreference: 'sms', notes: 'Wants to be notified when back in stock', status: 'Waiting', dateAdded: '2024-01-18', notified: false, priority: 2, lastNotified: null, tablePreference: null, specialRequests: null, checkInTime: isoNow(), estimatedSeatingTime: null, actualSeatingTime: null },
+  { id: 5, name: 'David Lee', email: 'david.l@example.com', phone: '+1 (555) 234-5678', partySize: 3, estimatedWaitMinutes: 18, quotedWaitMinutes: 21, queuePosition: 5, notificationPreference: 'email', notes: 'Requested notification via SMS', status: 'Seated', dateAdded: '2024-01-20', notified: true, priority: 2, lastNotified: '2024-01-20T12:30:00', tablePreference: 'Bar', specialRequests: 'No onions please', checkInTime: '2024-01-20T12:00:00', estimatedSeatingTime: '2024-01-20T12:30:00', actualSeatingTime: '2024-01-20T12:30:00' },
+  { id: 6, name: 'Jennifer Martinez', email: 'jennifer.m@example.com', phone: null, partySize: 2, estimatedWaitMinutes: 12, quotedWaitMinutes: 14, queuePosition: 6, notificationPreference: 'both', notes: null, status: 'Waiting', dateAdded: '2024-01-22', notified: false, priority: 1, lastNotified: null, tablePreference: null, specialRequests: null, checkInTime: isoNow(), estimatedSeatingTime: null, actualSeatingTime: null },
+  { id: 7, name: 'Robert Taylor', email: 'robert.t@example.com', phone: '+1 (555) 876-5432', partySize: 4, estimatedWaitMinutes: 25, quotedWaitMinutes: 30, queuePosition: 7, notificationPreference: 'sms', notes: 'Wants to purchase multiple units when available', status: 'Waiting', dateAdded: '2024-01-25', notified: false, priority: 3, lastNotified: null, tablePreference: 'Booth', specialRequests: null, checkInTime: isoNow(), estimatedSeatingTime: null, actualSeatingTime: null },
+  { id: 8, name: 'Lisa Anderson', email: 'lisa.a@example.com', phone: '+1 (555) 345-6789', partySize: 2, estimatedWaitMinutes: 10, quotedWaitMinutes: 12, queuePosition: 8, notificationPreference: 'email', notes: null, status: 'Seated', dateAdded: '2024-01-28', notified: true, priority: 2, lastNotified: '2024-01-28T12:30:00', tablePreference: 'Indoor', specialRequests: null, checkInTime: '2024-01-28T12:00:00', estimatedSeatingTime: '2024-01-28T12:30:00', actualSeatingTime: '2024-01-28T12:30:00' },
+])
+
+const searchQuery = state('')
+const statusFilter = state('all')
+const partySizeFilter = state('all')
+const tablePreferenceFilter = state('all')
+const sortBy = state('checkInTime')
+const sortOrder = state<'asc' | 'desc'>('asc')
+
+const itemsPerPage = 10
+const currentPage = state(1)
+
+const showEntryModal = state(false)
+const isEditMode = state(false)
+const editingEntryId = state<number | null>(null)
+
+const entryName = state('')
+const entryEmail = state('')
+const entryPhone = state('')
+const entryPartySize = state(2)
+const entryNotificationPreference = state<'sms' | 'email' | 'both'>('sms')
+const entryTablePreference = state('No Preference')
+const entrySpecialRequests = state('')
+const entryNotes = state('')
+const entryPriority = state(1)
+
+const showNotificationModal = state(false)
+const notificationSubject = state('Table is Ready')
+const notificationMessage = state('Good news! Your table is ready. Please proceed to the host stand.')
+
+const selectedEntries = state<number[]>([])
+const selectAll = state(false)
+
+const trendData = state<Array<{ date: string, count: number }>>(generateTrendData())
+
+let charts: ChartLike[] = []
+
+const totalEntries = derived(() => waitlistEntries().length)
+const waitingEntries = derived(() => waitlistEntries().filter(e => e.status === 'Waiting').length)
+const seatedEntries = derived(() => waitlistEntries().filter(e => e.status === 'Seated').length)
+const noShowEntries = derived(() => waitlistEntries().filter(e => e.status === 'No Show').length)
+const seatingRate = derived(() => Math.round((seatedEntries() / Math.max(1, totalEntries())) * 100))
+
+const averageWait = derived(() => {
+  const completed = waitlistEntries().filter(e => e.status === 'Seated' && e.actualSeatingTime !== null)
+  if (completed.length === 0)
+    return 0
+  const totals = completed.map((e) => {
+    const checkIn = new Date(e.checkInTime).getTime()
+    const seating = new Date(e.actualSeatingTime as string).getTime()
+    return (seating - checkIn) / 60000
+  })
+  return Math.round(totals.reduce((a, b) => a + b, 0) / totals.length)
+})
+
+const filteredEntries = derived(() => {
+  const list = waitlistEntries()
+  const q = searchQuery().toLowerCase()
+  const sf = statusFilter()
+  const pf = partySizeFilter()
+  const tf = tablePreferenceFilter()
+  return list.filter((entry) => {
+    const matchesSearch = q === ''
+      || entry.name.toLowerCase().includes(q)
+      || (entry.phone !== null && entry.phone.includes(searchQuery()))
+      || entry.email.toLowerCase().includes(q)
+
+    let matchesPartySize = true
+    if (pf !== 'all') {
+      const [minStr, maxStr] = pf.split('-')
+      if (!minStr) {
+        matchesPartySize = false
+      }
+      else {
+        const min = Number.parseInt(minStr, 10)
+        if (maxStr) {
+          const max = Number.parseInt(maxStr, 10)
+          matchesPartySize = entry.partySize >= min && entry.partySize <= max
+        }
+        else {
+          matchesPartySize = entry.partySize >= min
+        }
+      }
+    }
+
+    const matchesStatus = sf === 'all' || entry.status === sf
+    const matchesTablePreference = tf === 'all' || entry.tablePreference === tf
+    return matchesSearch && matchesPartySize && matchesStatus && matchesTablePreference
+  })
+})
+
+const sortedEntries = derived(() => {
+  const list = [...filteredEntries()]
+  const sb = sortBy()
+  const so = sortOrder()
+  return list.sort((a, b) => {
+    if (sb === 'name')
+      return so === 'asc' ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name)
+    if (sb === 'checkInTime')
+      return so === 'asc'
+        ? new Date(a.checkInTime).getTime() - new Date(b.checkInTime).getTime()
+        : new Date(b.checkInTime).getTime() - new Date(a.checkInTime).getTime()
+    if (sb === 'estimatedWaitMinutes')
+      return so === 'asc' ? a.estimatedWaitMinutes - b.estimatedWaitMinutes : b.estimatedWaitMinutes - a.estimatedWaitMinutes
+    return 0
+  })
+})
+
+const paginatedEntries = derived(() => {
+  const start = (currentPage() - 1) * itemsPerPage
+  return sortedEntries().slice(start, start + itemsPerPage)
+})
+
+const totalPages = derived(() => Math.max(1, Math.ceil(sortedEntries().length / itemsPerPage)))
+const pageNumbers = derived(() => Array.from({ length: totalPages() }, (_, i) => i + 1))
+const totalFiltered = derived(() => filteredEntries().length)
+const rangeStart = derived(() => totalFiltered() === 0 ? 0 : (currentPage() - 1) * itemsPerPage + 1)
+const rangeEnd = derived(() => Math.min(currentPage() * itemsPerPage, totalFiltered()))
+const hasNoEntries = derived(() => paginatedEntries().length === 0)
+const hasSelection = derived(() => selectedEntries().length > 0)
+const selectedCount = derived(() => selectedEntries().length)
+
+function entryModalTitle(): string { return isEditMode() ? 'Edit Waitlist Entry' : 'Add to Waitlist' }
+function entryModalDescription(): string { return isEditMode() ? 'Update the details for this waitlist entry.' : 'Fill in the details to add a new party to the waitlist.' }
+function entryModalSubmitLabel(): string { return isEditMode() ? 'Save Changes' : 'Add to Waitlist' }
+
+function isSelected(id: number): boolean { return selectedEntries().includes(id) }
+
+function getStatusClass(status: string): string {
+  switch (status) {
+    case 'Waiting': return 'bg-blue-50 text-blue-700 ring-1 ring-inset ring-blue-600/20 dark:bg-blue-900/30 dark:text-blue-400'
+    case 'Seated': return 'bg-green-50 text-green-700 ring-1 ring-inset ring-green-600/20 dark:bg-green-900/30 dark:text-green-400'
+    default: return 'bg-gray-50 text-gray-700 ring-1 ring-inset ring-gray-600/20 dark:bg-neutral-900/30 dark:text-neutral-400'
+  }
+}
+
+function formatTime(isoString: string): string {
+  return new Date(isoString).toLocaleTimeString()
+}
+
+function calculateEstimatedWait(partySize: number): number {
+  const baseWait = 15
+  const queueFactor = waitlistEntries().filter(e => e.status === 'Waiting').length * 5
+  const partySizeFactor = Math.ceil(partySize / 2) * 5
+  return baseWait + queueFactor + partySizeFactor
+}
+
+function recomputeQueuePositions(list: WaitlistEntry[]): WaitlistEntry[] {
+  const waiting = list
+    .filter(e => e.status === 'Waiting')
+    .sort((a, b) => new Date(a.checkInTime).getTime() - new Date(b.checkInTime).getTime())
+  const positions = new Map<number, { position: number, estimated: number, estimatedSeatingTime: string }>()
+  waiting.forEach((entry, index) => {
+    const estimated = calculateEstimatedWait(entry.partySize)
+    positions.set(entry.id, {
+      position: index + 1,
+      estimated,
+      estimatedSeatingTime: new Date(new Date(entry.checkInTime).getTime() + estimated * 60000).toISOString(),
+    })
+  })
+  return list.map((entry) => {
+    const upd = positions.get(entry.id)
+    if (!upd)
+      return entry
+    return { ...entry, queuePosition: upd.position, estimatedWaitMinutes: upd.estimated, estimatedSeatingTime: upd.estimatedSeatingTime }
+  })
+}
+
+function toggleSort(field: string): void {
+  if (sortBy() === field)
+    sortOrder.set(sortOrder() === 'asc' ? 'desc' : 'asc')
+  else {
+    sortBy.set(field)
+    sortOrder.set('asc')
+  }
+}
+
+function nextPage(): void {
+  if (currentPage() < totalPages())
+    currentPage.update(p => p + 1)
+}
+
+function prevPage(): void {
+  if (currentPage() > 1)
+    currentPage.update(p => p - 1)
+}
+
+function goToPage(page: number): void {
+  if (page >= 1 && page <= totalPages())
+    currentPage.set(page)
+}
+
+function resetForm(): void {
+  entryName.set('')
+  entryEmail.set('')
+  entryPhone.set('')
+  entryPartySize.set(2)
+  entryNotificationPreference.set('sms')
+  entryTablePreference.set('No Preference')
+  entrySpecialRequests.set('')
+  entryNotes.set('')
+  entryPriority.set(1)
+}
+
+function openAddEntryModal(): void {
+  isEditMode.set(false)
+  editingEntryId.set(null)
+  resetForm()
+  showEntryModal.set(true)
+}
+
+function openEditEntryModal(id: number): void {
+  const target = waitlistEntries().find(e => e.id === id)
+  if (!target)
+    return
+  isEditMode.set(true)
+  editingEntryId.set(id)
+  entryName.set(target.name)
+  entryEmail.set(target.email)
+  entryPhone.set(target.phone ?? '')
+  entryPartySize.set(target.partySize)
+  entryNotificationPreference.set(target.notificationPreference)
+  entryTablePreference.set(target.tablePreference ?? 'No Preference')
+  entrySpecialRequests.set(target.specialRequests ?? '')
+  entryNotes.set(target.notes ?? '')
+  entryPriority.set(target.priority)
+  showEntryModal.set(true)
+}
+
+function closeEntryModal(): void {
+  showEntryModal.set(false)
+  editingEntryId.set(null)
+}
+
+function saveEntry(): void {
+  const now = new Date()
+  const editId = editingEntryId()
+  const list = waitlistEntries()
+  const id = isEditMode() && editId !== null ? editId : Math.max(0, ...list.map(e => e.id)) + 1
+  const partySize = entryPartySize()
+  const estimated = calculateEstimatedWait(partySize)
+  const tablePref = entryTablePreference()
+  const entry: WaitlistEntry = {
+    id,
+    name: entryName(),
+    email: entryEmail(),
+    phone: entryPhone() || null,
+    partySize,
+    estimatedWaitMinutes: estimated,
+    quotedWaitMinutes: Math.ceil(estimated * 1.2),
+    queuePosition: list.filter(e => e.status === 'Waiting').length + 1,
+    notificationPreference: entryNotificationPreference(),
+    notes: entryNotes() || null,
+    status: 'Waiting',
+    dateAdded: now.toISOString().split('T')[0] ?? '',
+    notified: false,
+    priority: entryPriority(),
+    lastNotified: null,
+    tablePreference: tablePref === 'No Preference' ? null : tablePref,
+    specialRequests: entrySpecialRequests() || null,
+    checkInTime: now.toISOString(),
+    estimatedSeatingTime: null,
+    actualSeatingTime: null,
+  }
+
+  const next = isEditMode() && editId !== null
+    ? list.map(e => e.id === editId ? entry : e)
+    : [...list, entry]
+  waitlistEntries.set(recomputeQueuePositions(next))
+
+  closeEntryModal()
+  refreshCharts()
+}
+
+function deleteEntry(id: number): void {
+  // eslint-disable-next-line no-alert
+  if (!confirm('Are you sure you want to delete this waitlist entry?'))
+    return
+  waitlistEntries.set(recomputeQueuePositions(waitlistEntries().filter(e => e.id !== id)))
+  refreshCharts()
+}
+
+function markAsSeated(id: number): void {
+  const next = waitlistEntries().map(e => e.id === id
+    ? { ...e, status: 'Seated', actualSeatingTime: new Date().toISOString() }
+    : e)
+  waitlistEntries.set(recomputeQueuePositions(next))
+  refreshCharts()
+}
+
+function markAsNoShow(id: number): void {
+  const next = waitlistEntries().map(e => e.id === id ? { ...e, status: 'No Show' } : e)
+  waitlistEntries.set(recomputeQueuePositions(next))
+  refreshCharts()
+}
+
+function toggleSelectAll(): void {
+  const next = !selectAll()
+  selectAll.set(next)
+  if (next)
+    selectedEntries.set(paginatedEntries().map(entry => entry.id))
+  else
+    selectedEntries.set([])
+}
+
+function toggleEntrySelection(id: number): void {
+  const list = selectedEntries()
+  if (list.includes(id))
+    selectedEntries.set(list.filter(x => x !== id))
+  else
+    selectedEntries.set([...list, id])
+
+  const visible = paginatedEntries()
+  selectAll.set(visible.length > 0 && visible.every(entry => selectedEntries().includes(entry.id)))
+}
+
+function openNotificationModal(): void {
+  if (selectedEntries().length === 0) {
+    // eslint-disable-next-line no-alert
+    alert('Please select at least one waitlist entry to notify')
+    return
+  }
+  notificationSubject.set('Table is Ready')
+  notificationMessage.set('Good news! Your table is ready. Please proceed to the host stand.')
+  showNotificationModal.set(true)
+}
+
+function closeNotificationModal(): void {
+  showNotificationModal.set(false)
+}
+
+function sendNotifications(): void {
+  const ids = new Set(selectedEntries())
+  const next = waitlistEntries().map(e => ids.has(e.id) ? { ...e, notified: true, status: 'Seated' } : e)
+  waitlistEntries.set(recomputeQueuePositions(next))
+  const count = selectedEntries().length
+  selectedEntries.set([])
+  selectAll.set(false)
+  showNotificationModal.set(false)
+  // eslint-disable-next-line no-alert
+  alert(`Notifications sent to ${count} customers`)
+  refreshCharts()
+}
+
+function exportWaitlist(): void {
+  // eslint-disable-next-line no-alert
+  alert('Waitlist data exported successfully')
+}
+
+function bulkChangeStatus(status: string): void {
+  if (selectedEntries().length === 0) {
+    // eslint-disable-next-line no-alert
+    alert('Please select at least one waitlist entry')
+    return
+  }
+  const ids = new Set(selectedEntries())
+  const next = waitlistEntries().map((e) => {
+    if (!ids.has(e.id))
+      return e
+    if (status === 'Seated')
+      return { ...e, status, notified: true, actualSeatingTime: e.actualSeatingTime ?? new Date().toISOString() }
+    return { ...e, status }
+  })
+  waitlistEntries.set(recomputeQueuePositions(next))
+  selectedEntries.set([])
+  selectAll.set(false)
+  refreshCharts()
+}
+
+function bulkDelete(): void {
+  if (selectedEntries().length === 0) {
+    // eslint-disable-next-line no-alert
+    alert('Please select at least one waitlist entry')
+    return
+  }
+  // eslint-disable-next-line no-alert
+  if (!confirm(`Are you sure you want to delete ${selectedEntries().length} waitlist entries?`))
+    return
+  const ids = new Set(selectedEntries())
+  waitlistEntries.set(recomputeQueuePositions(waitlistEntries().filter(e => !ids.has(e.id))))
+  selectedEntries.set([])
+  selectAll.set(false)
+  refreshCharts()
+}
+
+function generateTrendData(): Array<{ date: string, count: number }> {
+  const data: Array<{ date: string, count: number }> = []
+  const today = new Date()
+  for (let i = 29; i >= 0; i--) {
+    const d = new Date(today)
+    d.setDate(d.getDate() - i)
+    data.push({ date: d.toISOString().split('T')[0] ?? '', count: Math.floor(Math.random() * 5) })
+  }
+  return data
+}
+
+const chartColors = {
+  blue: { fill: 'rgba(59, 130, 246, 0.2)', stroke: 'rgba(59, 130, 246, 1)', point: 'rgba(59, 130, 246, 1)' },
+  green: { fill: 'rgba(16, 185, 129, 0.2)', stroke: 'rgba(16, 185, 129, 1)', point: 'rgba(16, 185, 129, 1)' },
+  purple: { fill: 'rgba(139, 92, 246, 0.2)', stroke: 'rgba(139, 92, 246, 1)', point: 'rgba(139, 92, 246, 1)' },
+  yellow: { fill: 'rgba(245, 158, 11, 0.2)', stroke: 'rgba(245, 158, 11, 1)', point: 'rgba(245, 158, 11, 1)' },
+  red: { fill: 'rgba(239, 68, 68, 0.2)', stroke: 'rgba(239, 68, 68, 1)', point: 'rgba(239, 68, 68, 1)' },
+}
+
+const baseChartOptions = {
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: {
+    legend: { display: true, position: 'bottom', labels: { usePointStyle: true, padding: 20, font: { size: 12 } } },
+    title: { display: false },
+  },
+}
+
+const baseChartOptionsWithScales = {
+  ...baseChartOptions,
+  scales: {
+    y: { beginAtZero: true, grid: { display: true, color: 'rgba(0, 0, 0, 0.05)' }, ticks: { precision: 0 } },
+    x: { grid: { display: false } },
+  },
+}
+
+function partySizeCounts(): number[] {
+  const list = waitlistEntries()
+  return [1, 2, 3, 4, 5, 6, 7].map((size) => {
+    if (size === 7)
+      return list.filter(e => e.partySize >= 7).length
+    return list.filter(e => e.partySize === size).length
+  })
+}
+
+function partySizeLabels(): string[] {
+  return [1, 2, 3, 4, 5, 6, '7+'].map(size => `${size} ${size === 1 ? 'person' : 'people'}`)
+}
+
+function tablePreferenceCounts(): number[] {
+  const list = waitlistEntries()
+  return tablePreferences.slice(1).map(pref => list.filter(e => e.tablePreference === pref).length)
+}
+
+function statusCounts(): number[] {
+  const list = waitlistEntries()
+  return statuses.slice(1).map(status => list.filter(e => e.status === status).length)
+}
+
+function refreshCharts(): void {
+  if (charts.length !== 4)
+    return
+  const [trend, product, source, status] = charts
+  if (trend) {
+    trend.data.labels = trendData().map(d => d.date)
+    if (trend.data.datasets[0])
+      trend.data.datasets[0].data = trendData().map(d => d.count)
+    trend.update()
+  }
+  if (product) {
+    product.data.labels = partySizeLabels()
+    if (product.data.datasets[0])
+      product.data.datasets[0].data = partySizeCounts()
+    product.update()
+  }
+  if (source) {
+    source.data.labels = tablePreferences.slice(1)
+    if (source.data.datasets[0])
+      source.data.datasets[0].data = tablePreferenceCounts()
+    source.update()
+  }
+  if (status) {
+    status.data.labels = statuses.slice(1)
+    if (status.data.datasets[0])
+      status.data.datasets[0].data = statusCounts()
+    status.update()
+  }
+}
+
+onMount(async () => {
+  const { Chart, registerables } = await import('@stacksjs/charts')
+  Chart.register(...registerables)
+  const Ctor = Chart as unknown as ChartCtor
+
+  const trend = useChart({
+    Chart: Ctor,
+    id: 'restaurant_trend_chart',
+    type: 'line',
+    data: {
+      labels: trendData().map(d => d.date),
+      datasets: [{
+        label: 'New Waitlist Entries',
+        data: trendData().map(d => d.count),
+        backgroundColor: chartColors.blue.fill,
+        borderColor: chartColors.blue.stroke,
+        borderWidth: 2,
+        pointBackgroundColor: chartColors.blue.point,
+        tension: 0.4,
+        fill: true,
+        pointRadius: 4,
+        pointHoverRadius: 6,
+      }],
+    },
+    options: {
+      ...baseChartOptionsWithScales,
+      plugins: { legend: { display: false }, title: { display: false } },
+    },
+  })
+
+  const product = useChart({
+    Chart: Ctor,
+    id: 'restaurant_product_chart',
+    type: 'bar',
+    data: {
+      labels: partySizeLabels(),
+      datasets: [{
+        label: 'Number of Parties',
+        data: partySizeCounts(),
+        backgroundColor: chartColors.blue.fill,
+        borderColor: chartColors.blue.stroke,
+        borderWidth: 2,
+        borderRadius: 6,
+        maxBarThickness: 40,
+        barPercentage: 0.5,
+      }],
+    },
+    options: {
+      ...baseChartOptionsWithScales,
+      plugins: { legend: { display: false }, title: { display: false } },
+    },
+  })
+
+  const source = useChart({
+    Chart: Ctor,
+    id: 'restaurant_source_chart',
+    type: 'doughnut',
+    data: {
+      labels: tablePreferences.slice(1),
+      datasets: [{
+        data: tablePreferenceCounts(),
+        backgroundColor: [chartColors.blue.fill, chartColors.green.fill, chartColors.purple.fill, chartColors.yellow.fill, chartColors.red.fill],
+        borderColor: [chartColors.blue.stroke, chartColors.green.stroke, chartColors.purple.stroke, chartColors.yellow.stroke, chartColors.red.stroke],
+        borderWidth: 2,
+        hoverOffset: 4,
+        spacing: 2,
+      }],
+    },
+    options: {
+      ...baseChartOptions,
+      cutout: '75%',
+      plugins: {
+        legend: { position: 'right', labels: { usePointStyle: true, padding: 20, font: { size: 11 } } },
+        title: { display: false },
+      },
+    },
+  })
+
+  const status = useChart({
+    Chart: Ctor,
+    id: 'restaurant_status_chart',
+    type: 'pie',
+    data: {
+      labels: statuses.slice(1),
+      datasets: [{
+        data: statusCounts(),
+        backgroundColor: [chartColors.blue.fill, chartColors.green.fill, chartColors.purple.fill, chartColors.red.fill],
+        borderColor: [chartColors.blue.stroke, chartColors.green.stroke, chartColors.purple.stroke, chartColors.red.stroke],
+        borderWidth: 2,
+        hoverOffset: 4,
+        spacing: 2,
+      }],
+    },
+    options: {
+      ...baseChartOptions,
+      plugins: {
+        legend: { position: 'right', labels: { usePointStyle: true, padding: 20, font: { size: 11 } } },
+        title: { display: false },
+      },
+    },
+  })
+
+  charts = [trend.instance, product.instance, source.instance, status.instance].filter((c): c is ChartLike => c !== null)
+})
+
+onDestroy(() => {
+  charts.forEach(c => c.destroy())
+  charts = []
+})
+</script>
+
+@endsection