@stacksjs/defaults 0.70.207 → 0.70.208

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

@@ -0,0 +1,942 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - Marketing Waitlist')
+<PageLayout>
+      <div class="sm:flex sm:items-center sm:justify-between">
+        <PageHeader title="Waitlist" description="Manage your product waitlist and notify customers when products become available" />
+        <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">Total Waitlist</dt>
+          <dd class="mt-1 font-semibold text-3xl text-gray-900 tracking-tight dark:text-white">{{ totalEntries() }}</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() }} 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">Notified</dt>
+          <dd class="mt-1 font-semibold text-3xl text-gray-900 tracking-tight dark:text-white">{{ notifiedEntries() }}</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-notification-square"></div>
+            <span>Customers notified</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">Purchased</dt>
+          <dd class="mt-1 font-semibold text-3xl text-gray-900 tracking-tight dark:text-white">{{ purchasedEntries() }}</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-shopping-cart-02"></div>
+            <span>Completed purchases</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">Conversion Rate</dt>
+          <dd class="mt-1 font-semibold text-3xl text-gray-900 tracking-tight dark:text-white">{{ conversionRate() }}%</dd>
+          <dd class="flex items-center mt-2 text-sm text-yellow-600 dark:text-yellow-400">
+            <div class="mr-1 h-4 w-4 i-hugeicons-analytics-up"></div>
+            <span>Purchase rate</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">Waitlist Entries</h3>
+            <div class="mt-2 h-80">
+              <canvas id="waitlist_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">Order Quantities</h3>
+            <div class="mt-2 h-80">
+              <canvas id="waitlist_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">Source Distribution</h3>
+            <div class="mt-2 h-80">
+              <canvas id="waitlist_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="waitlist_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="Notified">Notified</option>
+            <option value="Purchased">Purchased</option>
+            <option value="Cancelled">Cancelled</option>
+          </select>
+
+          <select x-model="sourceFilter" 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 Sources</option>
+            <option value="Website">Website</option>
+            <option value="Mobile App">Mobile App</option>
+            <option value="In-Store">In-Store</option>
+            <option value="Social Media">Social Media</option>
+            <option value="Email Campaign">Email Campaign</option>
+            <option value="Referral">Referral</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('dateAdded')" class="flex items-center mr-3 hover:text-gray-700 dark:hover:text-gray-300 {{ sortBy() === 'dateAdded' ? 'font-semibold text-blue-600 dark:text-blue-400' : '' }}">
+          Date Added
+          <span :show="sortBy() === 'dateAdded'" 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('quantity')" class="flex items-center hover:text-gray-700 dark:hover:text-gray-300 {{ sortBy() === 'quantity' ? 'font-semibold text-blue-600 dark:text-blue-400' : '' }}">
+          Quantity
+          <span :show="sortBy() === 'quantity'" 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('Notified')" 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 Notified
+            </button>
+            <button @click="bulkChangeStatus('Purchased')" class="inline-flex items-center px-3 py-2 font-semibold text-sm text-white bg-purple-600 hover:bg-purple-500 rounded-md shadow-sm">
+              <div class="mr-1 h-4 w-4 i-hugeicons-shopping-cart-02"></div>
+              Mark as Purchased
+            </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">Customer Details</th>
+              <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-white">Quantity</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">Date Added</th>
+              <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-white">Source</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="7" class="py-10 text-gray-500 dark:text-neutral-400">No entries in 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.quantity }} {{ entry.quantity === 1 ? 'unit' : 'units' }})</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.quantity }}</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">{{ formatDate(entry.dateAdded) }}</td>
+                <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">{{ entry.source }}</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="markAsNotified({{ 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-notification-square"></div>
+                      <span class="sr-only">Notify</span>
+                    </button>
+                    <button :show="{{ entry.status === 'Notified' ? 'true' : 'false' }}" @click="markAsPurchased({{ entry.id }})" class="text-gray-400 dark:text-purple-400 hover:text-purple-900 dark:hover:text-purple-300 transition-colors">
+                      <div class="h-5 w-5 i-hugeicons-shopping-cart-02"></div>
+                      <span class="sr-only">Purchase</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="quantity" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Party Size</label>
+                <div class="mt-1">
+                  <input id="quantity" x-model.number="entryQuantity" 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="source" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Source</label>
+                <div class="mt-1">
+                  <input id="source" x-model="entrySource" 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" />
+                </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
+  productId: number
+  quantity: number
+  notificationPreference: 'sms' | 'email' | 'both'
+  notes: string | null
+  status: string
+  dateAdded: string
+  notified: boolean
+  priority: number
+  lastNotified: string | null
+  source: string
+}
+
+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 sources = ['all', 'Website', 'Mobile App', 'In-Store', 'Social Media', 'Email Campaign', 'Referral']
+const statuses = ['all', 'Waiting', 'Notified', 'Purchased', 'Cancelled']
+
+const waitlistEntries = state<WaitlistEntry[]>([
+  { id: 1, name: 'John Smith', email: 'john.smith@example.com', phone: '+1 (555) 123-4567', productId: 1, quantity: 4, notificationPreference: 'sms', notes: 'Interested in bulk purchase', status: 'Waiting', dateAdded: '2024-01-10', notified: false, priority: 2, lastNotified: null, source: 'Website' },
+  { id: 2, name: 'Emily Johnson', email: 'emily.j@example.com', phone: '+1 (555) 987-6543', productId: 2, quantity: 2, notificationPreference: 'email', notes: null, status: 'Waiting', dateAdded: '2024-01-12', notified: false, priority: 1, lastNotified: null, source: 'Website' },
+  { id: 3, name: 'Michael Brown', email: 'michael.b@example.com', phone: null, productId: 3, quantity: 3, notificationPreference: 'both', notes: 'VIP customer, notify immediately when available', status: 'Purchased', dateAdded: '2024-01-15', notified: true, priority: 3, lastNotified: '2024-01-15T12:30:00', source: 'Mobile App' },
+  { id: 4, name: 'Sarah Wilson', email: 'sarah.w@example.com', phone: '+1 (555) 456-7890', productId: 4, quantity: 2, notificationPreference: 'sms', notes: 'Wants to be notified when back in stock', status: 'Waiting', dateAdded: '2024-01-18', notified: false, priority: 2, lastNotified: null, source: 'Website' },
+  { id: 5, name: 'David Lee', email: 'david.l@example.com', phone: '+1 (555) 234-5678', productId: 5, quantity: 3, notificationPreference: 'email', notes: 'Requested notification via SMS', status: 'Purchased', dateAdded: '2024-01-20', notified: true, priority: 2, lastNotified: '2024-01-20T12:30:00', source: 'Mobile App' },
+  { id: 6, name: 'Jennifer Martinez', email: 'jennifer.m@example.com', phone: null, productId: 6, quantity: 2, notificationPreference: 'both', notes: null, status: 'Waiting', dateAdded: '2024-01-22', notified: false, priority: 1, lastNotified: null, source: 'Website' },
+  { id: 7, name: 'Robert Taylor', email: 'robert.t@example.com', phone: '+1 (555) 876-5432', productId: 7, quantity: 4, notificationPreference: 'sms', notes: 'Wants to purchase multiple units when available', status: 'Waiting', dateAdded: '2024-01-25', notified: false, priority: 3, lastNotified: null, source: 'Website' },
+  { id: 8, name: 'Lisa Anderson', email: 'lisa.a@example.com', phone: '+1 (555) 345-6789', productId: 8, quantity: 2, notificationPreference: 'email', notes: null, status: 'Purchased', dateAdded: '2024-01-28', notified: true, priority: 2, lastNotified: '2024-01-28T12:30:00', source: 'Website' },
+])
+
+const searchQuery = state('')
+const statusFilter = state('all')
+const partySizeFilter = state('all')
+const sourceFilter = state('all')
+const sortBy = state('dateAdded')
+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 entryQuantity = state(2)
+const entryNotificationPreference = state<'sms' | 'email' | 'both'>('sms')
+const entrySource = state('Website')
+const entryNotes = state('')
+const entryPriority = state(1)
+
+const showNotificationModal = state(false)
+const notificationSubject = state('Product Now Available')
+const notificationMessage = state('Good news! The product you were waiting for is now available for purchase.')
+
+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 notifiedEntries = derived(() => waitlistEntries().filter(e => e.status === 'Notified').length)
+const purchasedEntries = derived(() => waitlistEntries().filter(e => e.status === 'Purchased').length)
+const conversionRate = derived(() => {
+  const total = totalEntries()
+  return total > 0 ? Math.round((purchasedEntries() / total) * 100) : 0
+})
+
+const filteredEntries = derived(() => {
+  const list = waitlistEntries()
+  const q = searchQuery().toLowerCase()
+  const sf = statusFilter()
+  const pf = partySizeFilter()
+  const srcF = sourceFilter()
+  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 matchesQuantity = true
+    if (pf !== 'all') {
+      const [minStr, maxStr] = pf.split('-')
+      if (!minStr) {
+        matchesQuantity = false
+      }
+      else {
+        const min = Number.parseInt(minStr, 10)
+        if (maxStr) {
+          const max = Number.parseInt(maxStr, 10)
+          matchesQuantity = entry.quantity >= min && entry.quantity <= max
+        }
+        else {
+          matchesQuantity = entry.quantity >= min
+        }
+      }
+    }
+
+    const matchesStatus = sf === 'all' || entry.status === sf
+    const matchesSource = srcF === 'all' || entry.source === srcF
+    return matchesSearch && matchesQuantity && matchesStatus && matchesSource
+  })
+})
+
+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 === 'dateAdded')
+      return so === 'asc'
+        ? new Date(a.dateAdded).getTime() - new Date(b.dateAdded).getTime()
+        : new Date(b.dateAdded).getTime() - new Date(a.dateAdded).getTime()
+    if (sb === 'quantity')
+      return so === 'asc' ? a.quantity - b.quantity : b.quantity - a.quantity
+    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 customer 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 'Notified': return 'bg-green-50 text-green-700 ring-1 ring-inset ring-green-600/20 dark:bg-green-900/30 dark:text-green-400'
+    case 'Purchased': return 'bg-purple-50 text-purple-700 ring-1 ring-inset ring-purple-600/20 dark:bg-purple-900/30 dark:text-purple-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 formatDate(date: string): string {
+  return new Date(date).toLocaleDateString()
+}
+
+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('')
+  entryQuantity.set(2)
+  entryNotificationPreference.set('sms')
+  entrySource.set('Website')
+  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 ?? '')
+  entryQuantity.set(target.quantity)
+  entryNotificationPreference.set(target.notificationPreference)
+  entrySource.set(target.source)
+  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 formattedDate = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`
+  const editId = editingEntryId()
+  const list = waitlistEntries()
+  const id = isEditMode() && editId !== null ? editId : Math.max(0, ...list.map(e => e.id)) + 1
+  const entry: WaitlistEntry = {
+    id,
+    name: entryName(),
+    email: entryEmail(),
+    phone: entryPhone() || null,
+    productId: Math.floor(Math.random() * 1000),
+    quantity: entryQuantity(),
+    notificationPreference: entryNotificationPreference(),
+    notes: entryNotes() || null,
+    status: 'Waiting',
+    dateAdded: formattedDate,
+    notified: false,
+    priority: entryPriority(),
+    lastNotified: null,
+    source: entrySource(),
+  }
+
+  if (isEditMode() && editId !== null)
+    waitlistEntries.set(list.map(e => e.id === editId ? entry : e))
+  else
+    waitlistEntries.set([...list, entry])
+
+  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(waitlistEntries().filter(e => e.id !== id))
+  refreshCharts()
+}
+
+function markAsNotified(id: number): void {
+  waitlistEntries.set(waitlistEntries().map(e => e.id === id ? { ...e, status: 'Notified', notified: true } : e))
+  refreshCharts()
+}
+
+function markAsPurchased(id: number): void {
+  waitlistEntries.set(waitlistEntries().map(e => e.id === id ? { ...e, status: 'Purchased' } : e))
+  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('Product Now Available')
+  notificationMessage.set('Good news! The product you were waiting for is now available for purchase.')
+  showNotificationModal.set(true)
+}
+
+function closeNotificationModal(): void {
+  showNotificationModal.set(false)
+}
+
+function sendNotifications(): void {
+  const ids = new Set(selectedEntries())
+  waitlistEntries.set(waitlistEntries().map(e => ids.has(e.id) ? { ...e, notified: true, status: 'Notified' } : e))
+  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())
+  waitlistEntries.set(waitlistEntries().map((e) => {
+    if (!ids.has(e.id))
+      return e
+    if (status === 'Notified')
+      return { ...e, status, notified: true }
+    return { ...e, status }
+  }))
+  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(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.quantity >= 7).length
+    return list.filter(e => e.quantity === size).length
+  })
+}
+
+function partySizeLabels(): string[] {
+  return [1, 2, 3, 4, 5, 6, '7+'].map(size => `${size} ${size === 1 ? 'unit' : 'units'}`)
+}
+
+function sourceCounts(): number[] {
+  const list = waitlistEntries()
+  return sources.slice(1).map(source => list.filter(e => e.source === source).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 = sources.slice(1)
+    if (source.data.datasets[0])
+      source.data.datasets[0].data = sourceCounts()
+    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: 'waitlist_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: 'waitlist_product_chart',
+    type: 'bar',
+    data: {
+      labels: partySizeLabels(),
+      datasets: [{
+        label: 'Number of Orders',
+        data: partySizeCounts(),
+        backgroundColor: chartColors.blue.fill,
+        borderColor: chartColors.blue.stroke,
+        borderWidth: 2,
+        borderRadius: 6,
+        maxBarThickness: 60,
+        barPercentage: 0.7,
+      }],
+    },
+    options: {
+      ...baseChartOptionsWithScales,
+      plugins: { legend: { display: false }, title: { display: false } },
+    },
+  })
+
+  const source = useChart({
+    Chart: Ctor,
+    id: 'waitlist_source_chart',
+    type: 'doughnut',
+    data: {
+      labels: sources.slice(1),
+      datasets: [{
+        data: sourceCounts(),
+        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: 'waitlist_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