@stacksjs/defaults 0.70.229 → 0.70.230

package/views/dashboard/commerce/pos/index.stx

@@ -1,653 +1,10 @@
 @extends('layouts/default')
 
 @section('content')
-@title('Self-Service Menu')
-<PageLayout>
-      <!-- Header -->
-      <div class="sm:flex sm:items-center sm:justify-between">
-        <PageHeader title="Self-Service Menu" description="Device {{ tableNumber }} - Browse and order directly from your device" />
-        <div class="flex gap-4 items-center mt-4 sm:mt-0">
-          <div>
-            <label for="table-select" class="sr-only">Select Device</label>
-            <select id="table-select" x-model.number="tableNumber" class="block pl-3 pr-10 py-1.5 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">
-              @foreach(availableTables as table)
-                <option value="{{ table }}">Device {{ table }}</option>
-              @endforeach
-            </select>
-          </div>
+@title('Dashboard - Point of Sale')
 
-          <button type="button" @click="scrollToOrder()" class="inline-flex relative 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-shopping-cart-02"></div>
-            View Receipt
-            <span :show="hasOrderItems" class="flex absolute items-center justify-center h-5 w-5 font-bold text-white text-xs bg-red-600 rounded-full -right-2 -top-2">{{ orderItemsCount() }}</span>
-          </button>
-        </div>
-      </div>
-
-      <!-- Summary cards -->
-      <div class="grid gap-5 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 mt-6">
-        <div class="overflow-hidden bg-white dark:bg-neutral-800 rounded-lg shadow">
-          <div class="p-5">
-            <div class="flex items-center">
-              <div class="flex-shrink-0">
-                <div class="p-2 h-10 w-10 bg-blue-100 dark:bg-blue-900 rounded-md">
-                  <div class="h-6 w-6 text-blue-600 dark:text-blue-300 i-hugeicons-package"></div>
-                </div>
-              </div>
-              <div class="flex-1 ml-5 w-0">
-                <dl>
-                  <dt class="font-medium text-gray-500 text-sm truncate dark:text-neutral-400">Total Items</dt>
-                  <dd>
-                    <div class="font-medium text-gray-900 text-lg dark:text-white">{{ totalMenuItems() }}</div>
-                  </dd>
-                </dl>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="overflow-hidden bg-white dark:bg-neutral-800 rounded-lg shadow">
-          <div class="p-5">
-            <div class="flex items-center">
-              <div class="flex-shrink-0">
-                <div class="p-2 h-10 w-10 bg-yellow-100 dark:bg-yellow-900 rounded-md">
-                  <div class="h-6 w-6 text-yellow-600 dark:text-yellow-300 i-hugeicons-tablet"></div>
-                </div>
-              </div>
-              <div class="flex-1 ml-5 w-0">
-                <dl>
-                  <dt class="font-medium text-gray-500 text-sm truncate dark:text-neutral-400">Device</dt>
-                  <dd>
-                    <div class="font-medium text-gray-900 text-lg dark:text-white">{{ tableNumber }}</div>
-                  </dd>
-                </dl>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Category navigation -->
-      <div class="overflow-x-auto mt-6 pb-2">
-        <div class="inline-flex space-x-2">
-          <button @click="setCategoryFilter('all')" class="px-4 py-2 font-medium text-sm rounded-full transition {{ categoryFilter() === 'all' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-800 dark:text-white dark:bg-neutral-700 hover:bg-gray-200 dark:hover:bg-neutral-600' }}">All</button>
-          <template :for="category in categories">
-            <button @click="setCategoryFilter('{{ category.name }}')" class="px-4 py-2 font-medium text-sm rounded-full transition {{ categoryFilter() === category.name ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-800 dark:text-white dark:bg-neutral-700 hover:bg-gray-200 dark:hover:bg-neutral-600' }}">{{ category.name }}</button>
-          </template>
-        </div>
-      </div>
-
-      <!-- Search bar -->
-      <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between mt-4">
-        <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 menu..." 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 rounded-md shadow-sm">
-          <button type="button" @click="setViewMode('grid')" class="relative inline-flex items-center rounded-l-md px-3 py-2 text-sm font-semibold ring-1 ring-inset focus:z-10 {{ viewMode() === 'grid' ? 'bg-blue-600 text-white ring-blue-600' : 'bg-white text-gray-900 ring-gray-300 hover:bg-gray-50 dark:bg-neutral-800 dark:text-white dark:ring-neutral-700 dark:hover:bg-neutral-700' }}">
-            <div class="h-5 w-5 i-hugeicons-grid"></div>
-          </button>
-          <button type="button" @click="setViewMode('list')" class="relative -ml-px inline-flex items-center rounded-r-md px-3 py-2 text-sm font-semibold ring-1 ring-inset focus:z-10 {{ viewMode() === 'list' ? 'bg-blue-600 text-white ring-blue-600' : 'bg-white text-gray-900 ring-gray-300 hover:bg-gray-50 dark:bg-neutral-800 dark:text-white dark:ring-neutral-700 dark:hover:bg-neutral-700' }}">
-            <div class="h-5 w-5 i-hugeicons-right-to-left-list-number"></div>
-          </button>
-        </div>
-      </div>
-
-      <!-- Menu items grid view -->
-      <div :show="isGrid" class="mt-6">
-        <div :show="hasNoMenuItems" class="py-12 text-center">
-          <div class="mx-auto h-12 w-12 text-gray-400 i-hugeicons-box-01"></div>
-          <h3 class="mt-2 font-semibold text-gray-900 text-sm dark:text-white">No menu items found</h3>
-          <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Try adjusting your search or category filter.</p>
-        </div>
-        <div :show="hasMenuItems" class="grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-          <template :for="item in filteredMenuItems">
-            <div class="overflow-hidden relative bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700 shadow-sm hover:shadow-md transition group {{ !item.available ? 'opacity-70' : '' }}">
-              <div class="aspect-square overflow-hidden relative bg-gray-200 dark:bg-neutral-700">
-                <img src="{{ item.imageUrl }}" alt="{{ item.name }}" class="object-cover h-full w-full duration-300 transition-transform group-hover:scale-105" />
-                <span :show="{{ !item.available ? 'true' : 'false' }}" class="absolute right-2 top-2 px-2 py-0.5 font-medium text-red-700 text-xs dark:text-red-400 bg-red-50 dark:bg-red-900/30 ring-1 ring-inset ring-red-600/20 rounded-full">Unavailable</span>
-                <span :show="{{ item.featured ? 'true' : 'false' }}" class="absolute left-2 top-2 px-2 py-0.5 font-medium text-xs text-yellow-700 dark:text-yellow-400 bg-yellow-50 dark:bg-yellow-900/30 ring-1 ring-inset ring-yellow-600/20 rounded-full">Popular</span>
-              </div>
-
-              <div class="p-4">
-                <div class="flex items-center justify-between">
-                  <h3 class="font-medium text-gray-900 text-sm dark:text-white">{{ item.name }}</h3>
-                  <div class="flex items-center">
-                    <div class="h-4 w-4 text-yellow-400 i-hugeicons-star"></div>
-                    <span class="ml-1 text-gray-600 text-sm dark:text-neutral-400">{{ item.rating }}</span>
-                  </div>
-                </div>
-
-                <p class="mt-1 line-clamp-2 text-gray-500 text-sm dark:text-neutral-400">{{ item.description }}</p>
-
-                <div class="flex flex-wrap gap-1 mt-2">
-                  <template :for="allergy in item.allergies">
-                    <span class="{{ getAllergyClass(allergy) }} inline-flex items-center px-2 py-0.5 font-medium text-xs rounded-full">{{ allergy }}</span>
-                  </template>
-                </div>
-
-                <div class="flex items-center justify-between mt-2">
-                  <div>
-                    <span :show="{{ item.salePrice !== null ? 'true' : 'false' }}" class="font-medium text-gray-900 text-sm dark:text-white">${{ item.salePrice !== null ? item.salePrice.toFixed(2) : '' }}</span>
-                    <span class="{{ item.salePrice !== null ? 'line-through ml-2 text-sm text-gray-500 dark:text-neutral-400' : 'text-sm font-medium text-gray-900 dark:text-white' }}">${{ item.price.toFixed(2) }}</span>
-                  </div>
-                  <span class="text-gray-500 text-xs dark:text-neutral-400">{{ item.preparationTime }}</span>
-                </div>
-
-                <button @click="addToOrderById({{ item.id }})" {{ !item.available ? 'disabled' : '' }} class="mt-3 px-3 py-2 w-full font-semibold text-center 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 disabled:opacity-50 disabled:cursor-not-allowed">Add to Order</button>
-              </div>
-            </div>
-          </template>
-        </div>
-      </div>
-
-      <!-- Menu items list view -->
-      <div :show="isList" 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-700">
-            <tr>
-              <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">Item</th>
-              <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-white">Category</th>
-              <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-white">Price</th>
-              <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-white">Prep Time</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="hasNoMenuItems">
-              <td colspan="5" class="py-4 text-center text-gray-500 text-sm dark:text-neutral-400">No menu items found. Try adjusting your search or category filter.</td>
-            </tr>
-            <template :for="item in filteredMenuItems">
-              <tr class="hover:bg-gray-50 dark:hover:bg-neutral-700 {{ !item.available ? 'opacity-70' : '' }}">
-                <td class="pl-4 pr-3 py-4 sm:pl-6 text-sm whitespace-nowrap">
-                  <div class="flex items-center">
-                    <div class="flex-shrink-0 h-10 w-10">
-                      <img src="{{ item.imageUrl }}" alt="{{ item.name }}" class="object-cover h-10 w-10 rounded-md" />
-                    </div>
-                    <div class="ml-4">
-                      <div class="font-medium text-gray-900 dark:text-white">{{ item.name }}</div>
-                      <div class="mt-1 max-w-xs line-clamp-1 text-gray-500 text-xs dark:text-neutral-400">{{ item.description }}</div>
-                    </div>
-                  </div>
-                </td>
-                <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">{{ item.category }}</td>
-                <td class="px-3 py-4 text-sm whitespace-nowrap">
-                  <div :show="{{ item.salePrice !== null ? 'true' : 'false' }}">
-                    <div class="font-medium text-gray-900 dark:text-white">${{ item.salePrice !== null ? item.salePrice.toFixed(2) : '' }}</div>
-                    <div class="line-through text-gray-500 text-xs dark:text-neutral-400">${{ item.price.toFixed(2) }}</div>
-                  </div>
-                  <div :show="{{ item.salePrice === null ? 'true' : 'false' }}">
-                    <div class="font-medium text-gray-900 dark:text-white">${{ item.price.toFixed(2) }}</div>
-                  </div>
-                </td>
-                <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">{{ item.preparationTime }}</td>
-                <td class="relative pl-3 pr-4 py-4 sm:pr-6 font-medium text-right text-sm whitespace-nowrap">
-                  <button @click="addToOrderById({{ item.id }})" {{ !item.available ? 'disabled' : '' }} class="px-2.5 py-1.5 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 disabled:opacity-50 disabled:cursor-not-allowed">Add</button>
-                </td>
-              </tr>
-            </template>
-          </tbody>
-        </table>
-      </div>
-
-      <!-- Current Order section (cart) -->
-      <div id="order-section" class="overflow-hidden mt-8 bg-white dark:bg-neutral-800 rounded-lg shadow-sm">
-        <div class="p-4 receipt-container">
-          <div class="mx-auto p-4 max-w-sm bg-white dark:bg-neutral-800 shadow-md receipt">
-            <h1 class="mb-3 font-bold text-center text-xl dark:text-white logo">Self-Service Menu</h1>
-            <div class="mb-2 font-mono text-center text-sm dark:text-neutral-300 address">Device #{{ tableNumber }} - Local Location</div>
-            <div class="flex justify-between mb-2 font-mono text-xs dark:text-neutral-400 transactionDetails">
-              <div class="detail">REG#01</div>
-              <div class="detail">TRN#{{ orderId }}</div>
-              <div class="detail">DEV#{{ tableNumber }}</div>
-            </div>
-            <div class="mb-2 font-mono text-center text-xs dark:text-neutral-400 transactionDetails">{{ currentDateTime() }}</div>
-            <div class="my-2 break font-mono text-center text-xs dark:text-neutral-400">*************************************</div>
-
-            <div :show="hasNoOrderItems" class="p-6 text-center">
-              <div class="mx-auto h-12 w-12 text-gray-400 i-hugeicons-receipt"></div>
-              <h3 class="mt-2 font-semibold text-gray-900 text-sm dark:text-white">Your receipt is empty</h3>
-              <p class="mt-1 font-mono text-gray-500 text-sm dark:text-neutral-400">Add items from the menu to get started.</p>
-            </div>
-
-            <div :show="hasOrderItems">
-              <template :for="(item, index) in orderItems">
-                <div class="flex justify-between my-1 font-mono text-xs dark:text-neutral-300 transactionDetails">
-                  <div class="detail">{{ item.quantity }}</div>
-                  <div class="flex-grow mx-2 detail">{{ item.name }}</div>
-                  <div class="detail">${{ (item.price * item.quantity).toFixed(2) }}</div>
-                </div>
-              </template>
-
-              <template :for="(item, index) in orderItems">
-                <div class="mb-2 mt-0">
-                  <p :show="{{ item.specialInstructions ? 'true' : 'false' }}" class="pl-5 font-mono text-gray-500 text-xs dark:text-neutral-400">{{ item.specialInstructions }}</p>
-                </div>
-              </template>
-
-              <div class="mb-2 mt-2 pt-2 border-dashed border-gray-200 border-t dark:border-neutral-700 item-actions">
-                <div class="flex items-center justify-between mb-1">
-                  <span class="font-mono text-gray-700 text-xs dark:text-neutral-300">Edit Items:</span>
-                </div>
-                <template :for="(item, index) in orderItems">
-                  <div class="flex items-center justify-between mb-1 px-1 py-1 text-xs bg-gray-50 dark:bg-neutral-700 rounded">
-                    <div class="flex items-center">
-                      <span class="font-mono">{{ item.name }}</span>
-                    </div>
-                    <div class="flex items-center">
-                      <button @click="updateItemQuantity({{ index }}, {{ item.quantity - 1 }})" class="p-1 text-gray-400 dark:text-neutral-500 focus:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 rounded-full focus:outline-none">
-                        <div class="h-4 w-4 i-hugeicons-minus"></div>
-                      </button>
-                      <span class="mx-1 font-mono text-gray-700 dark:text-neutral-300">{{ item.quantity }}</span>
-                      <button @click="updateItemQuantity({{ index }}, {{ item.quantity + 1 }})" class="p-1 text-gray-400 dark:text-neutral-500 focus:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 rounded-full focus:outline-none">
-                        <div class="h-4 w-4 i-hugeicons-plus-sign"></div>
-                      </button>
-                      <button @click="openSpecialInstructionsModal({{ index }})" class="ml-1 p-1 text-gray-400 dark:text-neutral-500 focus:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 rounded-full focus:outline-none">
-                        <div class="h-4 w-4 i-hugeicons-edit-01"></div>
-                      </button>
-                      <button @click="removeFromOrder({{ index }})" class="ml-1 p-1 text-gray-400 dark:text-neutral-500 focus:text-red-500 hover:text-red-500 dark:hover:text-red-400 rounded-full focus:outline-none">
-                        <div class="h-4 w-4 i-hugeicons-waste"></div>
-                      </button>
-                    </div>
-                  </div>
-                </template>
-              </div>
-
-              <div class="my-2 break font-mono text-center text-xs dark:text-neutral-400">*************************************</div>
-
-              <div class="flex justify-between my-1 font-mono text-xs dark:text-neutral-300 paymentDetails">
-                <div class="font-bold detail">SUBTOTAL</div>
-                <div class="font-bold detail">${{ orderTotalFormatted() }}</div>
-              </div>
-              <div class="flex justify-between my-1 font-mono text-xs dark:text-neutral-300 paymentDetails">
-                <div class="detail">TAX</div>
-                <div class="detail">${{ orderTaxFormatted() }}</div>
-              </div>
-              <div class="flex justify-between my-1 pt-1 font-bold font-mono text-xs dark:text-neutral-300 border-dashed border-gray-200 border-t dark:border-neutral-700 paymentDetails">
-                <div class="detail">TOTAL</div>
-                <div class="detail">${{ orderGrandTotalFormatted() }}</div>
-              </div>
-
-              <div class="my-4 text-center receiptBarcode">
-                <div class="font-mono text-3xl dark:text-neutral-300 barcode">|||||||||||||||||||</div>
-                <div class="font-mono text-xs dark:text-neutral-400">{{ barcodeValue() }}</div>
-              </div>
-
-              <div class="mb-3 font-mono text-center text-xs dark:text-neutral-400 returnPolicy">Thank you for your purchase!</div>
-
-              <div class="mt-4">
-                <button @click="placeOrder()" class="flex justify-center px-4 py-3 w-full font-medium text-sm text-white bg-blue-600 hover:bg-blue-700 border border-transparent rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-neutral-800 shadow-sm">Complete Purchase</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Special Instructions Modal -->
-  <div :show="showSpecialInstructionsModal" 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 dark:bg-neutral-900 dark:bg-opacity-75 transition-opacity" @click="closeSpecialInstructionsModal()"></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 class="absolute right-0 top-0 pr-4 pt-4">
-          <button type="button" @click="closeSpecialInstructionsModal()" class="text-gray-400 dark:text-neutral-500 hover:text-gray-500 dark:hover:text-gray-400 bg-white dark:bg-neutral-800 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
-            <span class="sr-only">Close</span>
-            <div class="h-6 w-6 i-hugeicons-can"></div>
-          </button>
-        </div>
-        <div class="sm:flex sm:items-start">
-          <div class="mt-3 sm:ml-4 sm:mt-0 w-full text-center sm:text-left">
-            <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-white">Special Instructions</h3>
-            <div class="mt-4">
-              <textarea x-model="tempSpecialInstructions" rows="4" placeholder="Any special requests for this item?" class="block 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-700 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600 focus:ring-inset shadow-sm"></textarea>
-            </div>
-            <div class="sm:flex sm:flex-row-reverse mt-5 sm:mt-4">
-              <button type="button" @click="saveSpecialInstructions()" class="inline-flex justify-center px-3 py-2 sm:ml-3 w-full sm:w-auto font-semibold text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md shadow-sm">Save</button>
-              <button type="button" @click="closeSpecialInstructionsModal()" class="inline-flex justify-center mt-3 px-3 py-2 sm:mt-0 w-full sm:w-auto 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>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Order Confirmation Modal -->
-  <div :show="orderPlaced" 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 dark:bg-neutral-900 dark:bg-opacity-75 transition-opacity" @click="dismissOrderConfirmation()"></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="flex items-center justify-center mx-auto h-12 w-12 bg-green-100 dark:bg-green-900 rounded-full">
-            <div class="h-6 w-6 text-green-600 dark:text-green-300 i-hugeicons-check"></div>
-          </div>
-          <div class="mt-3 sm:mt-5 text-center">
-            <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-white">Purchase Complete!</h3>
-            <div class="mt-2">
-              <p class="text-gray-500 text-sm dark:text-neutral-400">Your purchase on device {{ summaryTableNumber() }} has been confirmed.</p>
-            </div>
-            <div class="mt-4 pt-4 border-gray-200 border-t dark:border-neutral-700">
-              <h4 class="font-medium font-mono text-gray-900 text-sm dark:text-white">Receipt Summary</h4>
-
-              <div class="mx-auto p-4 max-w-sm font-mono">
-                <div class="mb-2 text-center text-gray-500 text-xs dark:text-neutral-400">{{ currentDateTime() }}</div>
-                <div class="my-2 break text-center text-xs dark:text-neutral-400">*************************************</div>
-
-                <template :for="(item, index) in summaryItems">
-                  <div class="flex justify-between my-1 text-gray-700 text-sm dark:text-neutral-300">
-                    <div class="flex">
-                      <span class="mr-2">{{ item.quantity }}</span>
-                      <span>{{ item.name }}</span>
-                    </div>
-                    <span>${{ (item.price * item.quantity).toFixed(2) }}</span>
-                  </div>
-                </template>
-
-                <div class="my-2 break text-center text-xs dark:text-neutral-400">*************************************</div>
-
-                <div class="flex justify-between mt-2 font-bold text-sm">
-                  <span class="text-gray-900 dark:text-white">TOTAL</span>
-                  <span class="text-gray-900 dark:text-white">${{ summaryTotal() }}</span>
-                </div>
-
-                <div class="my-4 text-center receiptBarcode">
-                  <div class="text-2xl dark:text-neutral-300 barcode">|||||||||||||||||||</div>
-                  <div class="text-xs dark:text-neutral-400">{{ barcodeValue() }}</div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="mt-5 sm:mt-6">
-          <button type="button" @click="dismissOrderConfirmation()" 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">Continue Browsing</button>
-        </div>
-      </div>
-</PageLayout>
-<script client>
-interface MenuItem {
-  id: number
-  name: string
-  description: string
-  price: number
-  salePrice: number | null
-  category: string
-  tags: string[]
-  imageUrl: string
-  available: boolean
-  featured: boolean
-  rating: number
-  reviewCount: number
-  preparationTime: string
-  allergies: string[]
-}
-
-interface OrderItem {
-  menuItemId: number
-  name: string
-  price: number
-  quantity: number
-  specialInstructions: string
-  modifiers: string[]
-}
-
-interface CategoryEntry {
-  id: number
-  name: string
-  slug: string
-  count: number
-}
-
-interface OrderSummary {
-  id: number
-  tableNumber: number
-  items: OrderItem[]
-  totalAmount: number
-}
-
-const menuItems = state<MenuItem[]>([
-  { id: 1, name: 'Classic Cheeseburger', description: 'Juicy beef patty with melted cheese, lettuce, tomato, and special sauce on a brioche bun', price: 12.99, salePrice: null, category: 'Burgers', tags: ['beef', 'cheese', 'popular'], imageUrl: 'https://images.unsplash.com/photo-1568901346375-23c9450c58cd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&h=500&q=80', available: true, featured: true, rating: 4.8, reviewCount: 243, preparationTime: '15 min', allergies: ['dairy'] },
-  { id: 2, name: 'Margherita Pizza', description: 'Classic pizza with tomato sauce, fresh mozzarella, basil, and olive oil on a thin crust', price: 14.99, salePrice: 12.99, category: 'Pizza', tags: ['vegetarian', 'italian', 'popular'], imageUrl: 'https://images.unsplash.com/photo-1604382354936-07c5d9983bd3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&h=500&q=80', available: true, featured: true, rating: 4.7, reviewCount: 189, preparationTime: '20 min', allergies: ['gluten', 'dairy'] },
-  { id: 3, name: 'Chicken Caesar Salad', description: 'Crisp romaine lettuce with grilled chicken, parmesan cheese, croutons, and Caesar dressing', price: 11.99, salePrice: null, category: 'Salads', tags: ['chicken', 'healthy'], imageUrl: 'https://images.unsplash.com/photo-1550304943-4f24f54ddde9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&h=500&q=80', available: true, featured: false, rating: 4.5, reviewCount: 124, preparationTime: '10 min', allergies: ['dairy', 'egg'] },
-  { id: 4, name: 'Spicy Ramen Bowl', description: 'Authentic Japanese ramen with spicy broth, sliced pork, soft-boiled egg, and fresh vegetables', price: 15.99, salePrice: null, category: 'Asian', tags: ['spicy', 'japanese', 'popular'], imageUrl: 'https://images.unsplash.com/photo-1569718212165-3a8278d5f624?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&h=500&q=80', available: true, featured: true, rating: 4.9, reviewCount: 201, preparationTime: '15 min', allergies: ['egg', 'soy', 'gluten'] },
-  { id: 5, name: 'Veggie Wrap', description: 'Fresh vegetables, hummus, and feta cheese wrapped in a spinach tortilla', price: 9.99, salePrice: 8.49, category: 'Wraps', tags: ['vegetarian', 'healthy'], imageUrl: 'https://images.unsplash.com/photo-1626700051175-6818013e1d4f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&h=500&q=80', available: true, featured: false, rating: 4.4, reviewCount: 98, preparationTime: '5 min', allergies: ['dairy', 'gluten'] },
-  { id: 6, name: 'BBQ Pulled Pork Sandwich', description: 'Slow-cooked pulled pork with BBQ sauce, coleslaw, and pickles on a brioche bun', price: 13.99, salePrice: null, category: 'Sandwiches', tags: ['pork', 'bbq'], imageUrl: 'https://images.unsplash.com/photo-1513185041617-8ab03f83d6c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&h=500&q=80', available: true, featured: false, rating: 4.6, reviewCount: 156, preparationTime: '12 min', allergies: ['gluten'] },
-  { id: 7, name: 'Chocolate Brownie Sundae', description: 'Warm chocolate brownie topped with vanilla ice cream, chocolate sauce, and whipped cream', price: 8.99, salePrice: null, category: 'Desserts', tags: ['chocolate', 'sweet', 'popular'], imageUrl: 'https://images.unsplash.com/photo-1563805042-7684c019e1cb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&h=500&q=80', available: true, featured: true, rating: 4.9, reviewCount: 178, preparationTime: '8 min', allergies: ['dairy', 'egg', 'gluten'] },
-  { id: 8, name: 'Iced Caramel Macchiato', description: 'Espresso with vanilla syrup, milk, and caramel drizzle over ice', price: 5.99, salePrice: null, category: 'Beverages', tags: ['coffee', 'cold'], imageUrl: 'https://images.unsplash.com/photo-1461023058943-07fcbe16d735?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&h=500&q=80', available: true, featured: false, rating: 4.7, reviewCount: 143, preparationTime: '3 min', allergies: ['dairy'] },
-  { id: 9, name: 'Chicken Wings (12 pc)', description: 'Crispy chicken wings with your choice of sauce: Buffalo, BBQ, or Honey Garlic', price: 16.99, salePrice: 14.99, category: 'Appetizers', tags: ['chicken', 'spicy', 'popular'], imageUrl: 'https://images.unsplash.com/photo-1608039755401-742074f0548d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&h=500&q=80', available: true, featured: true, rating: 4.8, reviewCount: 215, preparationTime: '18 min', allergies: [] },
-  { id: 10, name: 'Vegetable Stir Fry', description: 'Fresh vegetables stir-fried with tofu in a savory sauce, served with steamed rice', price: 13.49, salePrice: null, category: 'Asian', tags: ['vegetarian', 'healthy'], imageUrl: 'https://images.unsplash.com/photo-1512621776951-a57141f2eefd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&h=500&q=80', available: true, featured: false, rating: 4.5, reviewCount: 87, preparationTime: '15 min', allergies: ['soy'] },
-  { id: 11, name: 'Beef Tacos (3 pc)', description: 'Soft corn tortillas filled with seasoned beef, lettuce, cheese, and pico de gallo', price: 10.99, salePrice: null, category: 'Mexican', tags: ['beef', 'spicy'], imageUrl: 'https://images.unsplash.com/photo-1551504734-5ee1c4a1479b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&h=500&q=80', available: true, featured: false, rating: 4.6, reviewCount: 132, preparationTime: '10 min', allergies: ['dairy'] },
-  { id: 12, name: 'Strawberry Cheesecake', description: 'Creamy New York-style cheesecake topped with fresh strawberry sauce', price: 7.99, salePrice: null, category: 'Desserts', tags: ['sweet', 'popular'], imageUrl: 'https://images.unsplash.com/photo-1565958011703-44f9829ba187?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&h=500&q=80', available: true, featured: true, rating: 4.9, reviewCount: 167, preparationTime: '0 min', allergies: ['dairy', 'gluten'] },
-])
-
-const availableTables = Array.from({ length: 20 }, (_, i) => i + 1)
-
-const tableNumber = state(1)
-const searchQuery = state('')
-const categoryFilter = state('all')
-const viewMode = state('grid')
-
-const orderId = state(1)
-const orderItems = state<OrderItem[]>([])
-const orderPlaced = state(false)
-const orderSummary = state<OrderSummary | null>(null)
-
-const showSpecialInstructionsModal = state(false)
-const currentEditingItemIndex = state(-1)
-const tempSpecialInstructions = state('')
-
-const categories = derived(() => {
-  const map = new Map<string, number>()
-  menuItems().forEach((item) => {
-    map.set(item.category, (map.get(item.category) || 0) + 1)
-  })
-  return Array.from(map.entries()).map(([name, count], index) => ({
-    id: index + 1,
-    name,
-    slug: name.toLowerCase().replace(/\s+/g, '-'),
-    count,
-  } satisfies CategoryEntry))
-})
-
-const filteredMenuItems = derived(() => {
-  const list = menuItems()
-  const q = searchQuery().toLowerCase()
-  const cf = categoryFilter()
-  return list.filter((item) => {
-    const matchesSearch = item.name.toLowerCase().includes(q)
-      || item.description.toLowerCase().includes(q)
-      || item.tags.some(tag => tag.toLowerCase().includes(q))
-    const matchesCategory = cf === 'all' || item.category === cf
-    return matchesSearch && matchesCategory
-  })
-})
-
-const totalMenuItems = derived(() => menuItems().length)
-const hasNoMenuItems = derived(() => filteredMenuItems().length === 0)
-const hasMenuItems = derived(() => filteredMenuItems().length > 0)
-const isGrid = derived(() => viewMode() === 'grid')
-const isList = derived(() => viewMode() === 'list')
-const orderItemsCount = derived(() => orderItems().length)
-const hasOrderItems = derived(() => orderItems().length > 0)
-const hasNoOrderItems = derived(() => orderItems().length === 0)
-
-const orderTotal = derived(() => orderItems().reduce((sum, item) => sum + item.price * item.quantity, 0))
-const orderTotalFormatted = derived(() => orderTotal().toFixed(2))
-const orderTaxFormatted = derived(() => (orderTotal() * 0.0825).toFixed(2))
-const orderGrandTotalFormatted = derived(() => (orderTotal() * 1.0825).toFixed(2))
-
-function currentDateTime(): string {
-  const now = new Date()
-  return `${now.toLocaleDateString()} ${now.toLocaleTimeString()}`
-}
-
-function barcodeValue(): string {
-  return Date.now().toString().substring(0, 12)
-}
-
-function summaryTableNumber(): number { return orderSummary()?.tableNumber ?? 0 }
-function summaryItems(): OrderItem[] { return orderSummary()?.items ?? [] }
-function summaryTotal(): string { return (orderSummary()?.totalAmount ?? 0).toFixed(2) }
-
-function setCategoryFilter(value: string): void {
-  categoryFilter.set(value)
-}
-
-function setViewMode(mode: string): void {
-  viewMode.set(mode)
-}
-
-function findMenuItem(id: number): MenuItem | undefined {
-  return menuItems().find(item => item.id === id)
-}
-
-function addToOrderById(id: number, quantity = 1): void {
-  const target = findMenuItem(id)
-  if (!target || !target.available)
-    return
-  const items = [...orderItems()]
-  const existing = items.find(i => i.menuItemId === id)
-  if (existing) {
-    existing.quantity += quantity
-    orderItems.set(items)
-    return
-  }
-  items.push({
-    menuItemId: id,
-    name: target.name,
-    price: target.salePrice !== null ? target.salePrice : target.price,
-    quantity,
-    specialInstructions: '',
-    modifiers: [],
-  })
-  orderItems.set(items)
-}
-
-function removeFromOrder(index: number): void {
-  const items = [...orderItems()]
-  items.splice(index, 1)
-  orderItems.set(items)
-}
-
-function updateItemQuantity(index: number, quantity: number): void {
-  if (quantity <= 0) {
-    removeFromOrder(index)
-    return
-  }
-  const items = [...orderItems()]
-  const item = items[index]
-  if (!item)
-    return
-  item.quantity = quantity
-  orderItems.set(items)
-}
-
-function openSpecialInstructionsModal(index: number): void {
-  const item = orderItems()[index]
-  if (!item)
-    return
-  currentEditingItemIndex.set(index)
-  tempSpecialInstructions.set(item.specialInstructions)
-  showSpecialInstructionsModal.set(true)
-}
-
-function closeSpecialInstructionsModal(): void {
-  showSpecialInstructionsModal.set(false)
-  currentEditingItemIndex.set(-1)
-}
-
-function saveSpecialInstructions(): void {
-  const idx = currentEditingItemIndex()
-  if (idx >= 0) {
-    const items = [...orderItems()]
-    const item = items[idx]
-    if (item) {
-      item.specialInstructions = tempSpecialInstructions()
-      orderItems.set(items)
-    }
-  }
-  closeSpecialInstructionsModal()
-}
-
-function placeOrder(): void {
-  if (orderItems().length === 0) {
-    // eslint-disable-next-line no-alert
-    alert('Please add items to your order')
-    return
-  }
-  const items = orderItems()
-  orderSummary.set({
-    id: orderId(),
-    tableNumber: tableNumber(),
-    items: items.map(i => ({ ...i })),
-    totalAmount: orderTotal(),
-  })
-  orderPlaced.set(true)
-
-  setTimeout(() => {
-    orderItems.set([])
-    orderId.update(id => id + 1)
-    orderPlaced.set(false)
-    orderSummary.set(null)
-  }, 10000)
-}
-
-function dismissOrderConfirmation(): void {
-  orderPlaced.set(false)
-}
-
-function getAllergyClass(allergy: string): string {
-  switch (allergy) {
-    case 'dairy': 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 'gluten': return 'bg-yellow-50 text-yellow-700 ring-1 ring-inset ring-yellow-600/20 dark:bg-yellow-900/30 dark:text-yellow-400'
-    case 'egg': 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 'soy': return 'bg-purple-50 text-purple-700 ring-1 ring-inset ring-purple-600/20 dark:bg-purple-900/30 dark:text-purple-400'
-    case 'nuts': return 'bg-red-50 text-red-700 ring-1 ring-inset ring-red-600/20 dark:bg-red-900/30 dark:text-red-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 scrollToOrder(): void {
-  const orderElement = document.getElementById('order-section')
-  if (orderElement)
-    orderElement.scrollIntoView({ behavior: 'smooth' })
-}
-</script>
-
-<style scoped>
-.receipt-container {
-  background: #f1f1f1;
-  padding: 20px 10px;
-}
-
-.receipt {
-  font-family: 'Courier New', monospace;
-  background: #fff;
-  box-shadow: 5px 5px 19px #ccc;
-}
-
-.barcode {
-  font-family: 'Libre Barcode 128', monospace, 'Courier New';
-  font-size: 42px;
-  text-align: center;
-}
-
-.dark .receipt {
-  box-shadow: 5px 5px 19px #111;
-}
-
-.break {
-  text-align: center;
-  font-weight: bold;
-}
-
-@media print {
-  .receipt {
-    box-shadow: none;
-  }
-}
-</style>
+<div class="p-4 lg:p-8 min-h-[100dvh] dark:bg-neutral-900">
+  <CommercePosDashboard />
+</div>
 
 @endsection