@stacksjs/defaults 0.70.207 → 0.70.208

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

@@ -0,0 +1,308 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - Food Vendors')
+<PageLayout>
+      <div class="sm:flex sm:items-center sm:justify-between">
+        <PageHeader title="Manufacturers" description="Manage your product manufacturers" />
+        <div class="mt-4 sm:mt-0">
+          <button
+            type="button"
+            @click="openAddModal()"
+            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 manufacturer
+          </button>
+        </div>
+      </div>
+
+      <!-- Filters -->
+      <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"
+            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"
+            placeholder="Search manufacturers..."
+          />
+        </div>
+
+        <div class="flex flex-col gap-4 sm:flex-row">
+          <select
+            x-model="featuredFilter"
+            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 Manufacturers</option>
+            <option value="featured">Featured Only</option>
+            <option value="not-featured">Not Featured</option>
+          </select>
+
+          <select
+            x-model="countryFilter"
+            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 Countries</option>
+            <template :for="country in countries">
+              <option value="{{ country }}">{{ country }}</option>
+            </template>
+          </select>
+        </div>
+      </div>
+
+      <!-- Manufacturers table -->
+      <div class="flow-root mt-6">
+        <div class="overflow-x-auto -mx-4 -my-2 sm:-mx-6 lg:-mx-8">
+          <div class="inline-block py-2 sm:px-6 lg:px-8 min-w-full align-middle">
+            <div class="overflow-hidden 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-neutral-200">
+                      <button @click="toggleSort('name')" class="inline-flex items-center group">
+                        Manufacturer
+                        <span class="group-focus:visible group-hover:visible flex-none ml-2 text-gray-400 rounded">
+                          <div class="h-4 w-4 {{ sortBy() === 'name' ? (sortOrder() === 'asc' ? 'i-hugeicons-arrow-up-02' : 'i-hugeicons-arrow-down-02') : 'i-hugeicons-arrows-up-down' }}"></div>
+                        </span>
+                      </button>
+                    </th>
+                    <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-200">Description</th>
+                    <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-200">
+                      <button @click="toggleSort('country')" class="inline-flex items-center group">
+                        Country
+                        <span class="group-focus:visible group-hover:visible flex-none ml-2 text-gray-400 rounded">
+                          <div class="h-4 w-4 {{ sortBy() === 'country' ? (sortOrder() === 'asc' ? 'i-hugeicons-arrow-up-02' : 'i-hugeicons-arrow-down-02') : 'i-hugeicons-arrows-up-down' }}"></div>
+                        </span>
+                      </button>
+                    </th>
+                    <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-200">
+                      <button @click="toggleSort('productCount')" class="inline-flex items-center group">
+                        Products
+                        <span class="group-focus:visible group-hover:visible flex-none ml-2 text-gray-400 rounded">
+                          <div class="h-4 w-4 {{ sortBy() === 'productCount' ? (sortOrder() === 'asc' ? 'i-hugeicons-arrow-up-02' : 'i-hugeicons-arrow-down-02') : 'i-hugeicons-arrows-up-down' }}"></div>
+                        </span>
+                      </button>
+                    </th>
+                    <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-200">Featured</th>
+                    <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-right text-sm dark:text-neutral-200">
+                      <button @click="toggleSort('createdAt')" class="inline-flex items-center text-right group">
+                        Created
+                        <span class="group-focus:visible group-hover:visible flex-none ml-2 text-gray-400 rounded">
+                          <div class="h-4 w-4 {{ sortBy() === 'createdAt' ? (sortOrder() === 'asc' ? 'i-hugeicons-arrow-up-02' : 'i-hugeicons-arrow-down-02') : 'i-hugeicons-arrows-up-down' }}"></div>
+                        </span>
+                      </button>
+                    </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">
+                  <template :for="manufacturer in filteredManufacturers">
+                    <tr>
+                      <td class="pl-4 pr-3 py-4 sm:pl-6 font-medium text-gray-900 text-sm whitespace-nowrap dark:text-white">{{ manufacturer.name }}</td>
+                      <td class="px-3 py-4 text-gray-500 text-sm dark:text-neutral-300">{{ manufacturer.description }}</td>
+                      <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-300">{{ manufacturer.country }}</td>
+                      <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-300">{{ manufacturer.productCount }}</td>
+                      <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-300">
+                        @if(manufacturer.featured)
+                          <div class="h-5 w-5 text-green-500 i-hugeicons-checkmark-circle-02"></div>
+                        @else
+                          <div class="h-5 w-5 text-gray-400 i-hugeicons-cancel-circle"></div>
+                        @endif
+                      </td>
+                      <td class="px-3 py-4 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300">{{ manufacturer.createdAt }}</td>
+                      <td class="relative pl-3 pr-4 py-4 sm:pr-6 font-medium text-right text-sm whitespace-nowrap">
+                        <div class="flex items-center justify-end space-x-2">
+                          <button type="button" class="text-gray-400 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300 duration-150 transition-colors">
+                            <div class="h-5 w-5 i-hugeicons-edit-01"></div>
+                          </button>
+                          <button type="button" class="text-gray-400 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 duration-150 transition-colors">
+                            <div class="h-5 w-5 i-hugeicons-waste"></div>
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  </template>
+                  @if(filteredManufacturers().length === 0)
+                    <tr>
+                      <td colspan="7" class="px-6 py-4 text-center text-gray-500 text-sm dark:text-neutral-400">
+                        No manufacturers found matching your criteria
+                      </td>
+                    </tr>
+                  @endif
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Add Manufacturer Modal -->
+  <div :show="showAddModal" 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="closeAddModal()"></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-base text-gray-900 dark:text-white">Add New Manufacturer</h3>
+            <div class="mt-4">
+              <div class="space-y-4">
+                <div>
+                  <label for="manufacturer-name" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Name</label>
+                  <div class="mt-2">
+                    <input type="text" id="manufacturer-name" x-model="newName" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white placeholder:text-gray-400 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" />
+                  </div>
+                </div>
+                <div>
+                  <label for="manufacturer-description" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Description</label>
+                  <div class="mt-2">
+                    <textarea id="manufacturer-description" x-model="newDescription" rows="3" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white placeholder:text-gray-400 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>
+                <div>
+                  <label for="manufacturer-country" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Country</label>
+                  <div class="mt-2">
+                    <input type="text" id="manufacturer-country" x-model="newCountry" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white placeholder:text-gray-400 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" />
+                  </div>
+                </div>
+                <div>
+                  <label for="manufacturer-website" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Website</label>
+                  <div class="mt-2">
+                    <input type="url" id="manufacturer-website" x-model="newWebsite" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white placeholder:text-gray-400 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" />
+                  </div>
+                </div>
+                <div class="flex items-center">
+                  <input id="manufacturer-featured" type="checkbox" x-model="newFeatured" class="h-4 w-4 text-blue-600 dark:bg-neutral-700 border-gray-300 rounded dark:border-neutral-600 focus:ring-blue-600" />
+                  <label for="manufacturer-featured" class="block ml-2 text-gray-900 text-sm dark:text-neutral-200">Featured manufacturer</label>
+                </div>
+              </div>
+            </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="button" @click="addManufacturer()" 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">Add</button>
+          <button type="button" @click="closeAddModal()" 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>
+      </div>
+</PageLayout>
+<script client>
+interface Manufacturer {
+  id: number
+  name: string
+  slug: string
+  description: string
+  productCount: number
+  featured: boolean
+  country: string
+  website: string
+  createdAt: string
+}
+
+const initialManufacturers: Manufacturer[] = [
+  { id: 1, name: 'Pizza Palace', slug: 'pizza-palace', description: 'Authentic Italian pizzeria with handcrafted pizzas and fresh ingredients', productCount: 24, featured: true, country: 'United States', website: 'https://pizzapalace.foodmarket.org', createdAt: '2023-05-10' },
+  { id: 2, name: 'Burger Bistro', slug: 'burger-bistro', description: 'Gourmet burgers made with locally sourced ingredients', productCount: 18, featured: true, country: 'United States', website: 'https://burgerbistro.foodmarket.org', createdAt: '2023-05-15' },
+  { id: 3, name: 'Sushi Supreme', slug: 'sushi-supreme', description: 'Premium sushi and Japanese cuisine prepared by master chefs', productCount: 32, featured: true, country: 'United States', website: 'https://sushisupreme.foodmarket.org', createdAt: '2023-06-01' },
+  { id: 4, name: 'Taco Tiempo', slug: 'taco-tiempo', description: 'Authentic Mexican street food with fresh, bold flavors', productCount: 22, featured: false, country: 'United States', website: 'https://tacotime.foodmarket.org', createdAt: '2023-06-10' },
+  { id: 5, name: 'Pasta Paradise', slug: 'pasta-paradise', description: 'Handmade pasta and traditional Italian recipes', productCount: 16, featured: false, country: 'United States', website: 'https://pastaparadise.foodmarket.org', createdAt: '2023-06-20' },
+  { id: 6, name: 'Healthy Harvest', slug: 'healthy-harvest', description: 'Nutritious, plant-based meals for health-conscious customers', productCount: 28, featured: true, country: 'United States', website: 'https://healthyharvest.foodmarket.org', createdAt: '2023-07-05' },
+  { id: 7, name: 'Sweet Sensations', slug: 'sweet-sensations', description: 'Artisanal desserts, cakes, and pastries for every occasion', productCount: 35, featured: false, country: 'United States', website: 'https://sweetsensations.foodmarket.org', createdAt: '2023-07-15' },
+  { id: 8, name: 'Beverage Boutique', slug: 'beverage-boutique', description: 'Specialty coffees, teas, smoothies, and craft beverages', productCount: 19, featured: false, country: 'United States', website: 'https://beverageboutique.foodmarket.org', createdAt: '2023-08-01' },
+]
+
+const manufacturers = state(initialManufacturers)
+const searchQuery = state('')
+const sortBy = state<'name' | 'productCount' | 'country' | 'createdAt'>('name')
+const sortOrder = state<'asc' | 'desc'>('asc')
+const featuredFilter = state<'all' | 'featured' | 'not-featured'>('all')
+const countryFilter = state<string>('all')
+
+const showAddModal = state(false)
+const newName = state('')
+const newDescription = state('')
+const newFeatured = state(false)
+const newCountry = state('')
+const newWebsite = state('')
+
+function countries(): string[] {
+  return Array.from(new Set(manufacturers().map(m => m.country))).sort()
+}
+
+const filteredManufacturers = derived(() => {
+  const q = searchQuery().toLowerCase()
+  const fFilter = featuredFilter()
+  const cFilter = countryFilter()
+  const by = sortBy()
+  const dir = sortOrder()
+
+  return manufacturers()
+    .filter((m) => {
+      const matchesSearch
+        = m.name.toLowerCase().includes(q)
+          || m.description.toLowerCase().includes(q)
+      const matchesFeatured
+        = fFilter === 'all'
+          || (fFilter === 'featured' && m.featured)
+          || (fFilter === 'not-featured' && !m.featured)
+      const matchesCountry = cFilter === 'all' || m.country === cFilter
+      return matchesSearch && matchesFeatured && matchesCountry
+    })
+    .sort((a, b) => {
+      let cmp = 0
+      if (by === 'name') cmp = a.name.localeCompare(b.name)
+      else if (by === 'productCount') cmp = a.productCount - b.productCount
+      else if (by === 'country') cmp = a.country.localeCompare(b.country)
+      else if (by === 'createdAt') cmp = new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
+      return dir === 'asc' ? cmp : -cmp
+    })
+})
+
+function toggleSort(column: 'name' | 'productCount' | 'country' | 'createdAt'): void {
+  if (sortBy() === column) {
+    sortOrder.update(d => d === 'asc' ? 'desc' : 'asc')
+  }
+  else {
+    sortBy.set(column)
+    sortOrder.set('asc')
+  }
+}
+
+function openAddModal(): void {
+  newName.set('')
+  newDescription.set('')
+  newFeatured.set(false)
+  newCountry.set('')
+  newWebsite.set('')
+  showAddModal.set(true)
+}
+
+function closeAddModal(): void {
+  showAddModal.set(false)
+}
+
+function addManufacturer(): void {
+  const list = manufacturers()
+  const id = list.length > 0 ? Math.max(...list.map(m => m.id)) + 1 : 1
+  const name = newName()
+  manufacturers.set([...list, {
+    id,
+    name,
+    slug: name.toLowerCase().replace(/\s+/g, '-'),
+    description: newDescription(),
+    productCount: 0,
+    featured: newFeatured(),
+    country: newCountry(),
+    website: newWebsite(),
+    createdAt: new Date().toISOString().split('T')[0] || '',
+  }])
+  closeAddModal()
+}
+</script>
+
+@endsection

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

@@ -0,0 +1,247 @@
+@extends('layouts/default')
+
+@section('content')
+<div class="p-6 space-y-6">
+
+  <PageHeader title="Orders" description="Manage commerce orders">
+    <template #actions>
+      <Button variant="primary" @click="openAddModal()">
+        <div class="h-4 w-4 i-hugeicons-plus-sign"></div>
+        Add Order
+      </Button>
+    </template>
+  </PageHeader>
+
+  <div class="bg-white dark:bg-neutral-800/90 border border-black/5 rounded-xl dark:border-white/5">
+    <!-- Filters -->
+    <div class="p-4 border-b border-neutral-200/60 dark:border-white/5">
+      <FilterBar :searchPlaceholder="'Search orders...'" :searchValue="searchQuery" :itemsPerPage="itemsPerPage">
+        <Select
+          placeholder="All Statuses"
+          :options="statuses.map(s => ({ value: s, label: s === 'all' ? 'All Statuses' : s }))"
+          size="sm"
+        />
+      </FilterBar>
+    </div>
+
+    <!-- Orders Table -->
+    <OrdersTable
+      :orders="paginatedOrders"
+      :searchQuery="searchQuery"
+      :statusFilter="statusFilter"
+      :sortBy="sortBy"
+      :sortOrder="sortOrder"
+      :currentPage="currentPage"
+      :itemsPerPage="itemsPerPage"
+      :statuses="statuses"
+      @toggle-sort="toggleSort"
+    />
+
+    <!-- Pagination -->
+    <div class="p-4 border-neutral-200/60 border-t dark:border-white/5">
+      <Pagination
+        :currentPage="currentPage"
+        :totalPages="totalPages"
+        :totalItems="totalItems"
+        :itemsPerPage="itemsPerPage"
+        showItemsPerPage
+      />
+    </div>
+  </div>
+
+  <!-- Add Order Modal -->
+  <Modal :isOpen="showAddModal" title="Add New Order" @close="closeAddModal">
+    <form @submit.prevent="addOrder()" class="space-y-4">
+      <Input label="Customer ID" name="customer_id" type="number" placeholder="Enter customer ID" :value="newCustomerId" required />
+      <Input label="Total Amount" name="total_amount" type="number" placeholder="0.00" :value="newTotalAmount" required />
+      <Select
+        label="Order Type"
+        :options="orderTypes"
+        :value="newOrderType"
+      />
+      <Select
+        label="Status"
+        :options="newOrderStatusOptions"
+        :value="newStatus"
+      />
+      <div class="flex gap-2 justify-end pt-4 border-neutral-200 border-t dark:border-neutral-700">
+        <Button variant="secondary" @click.prevent="closeAddModal()">Cancel</Button>
+        <Button variant="primary" type="submit">Add Order</Button>
+      </div>
+    </form>
+  </Modal>
+
+  <!-- Delete Confirmation -->
+  <ConfirmDialog
+    :isOpen="showDeleteModal"
+    title="Delete Order"
+    description="Are you sure you want to delete this order? This action cannot be undone."
+    confirmLabel="Delete Order"
+    variant="danger"
+    @confirm="confirmDelete"
+    @cancel="closeDeleteModal"
+  />
+</div>
+
+<script client>
+import { useOrders } from '../../../../functions/commerce/orders'
+// Filter options — moved out of the former `<script server>` block
+// (stacksjs/stacks#1838).
+const statuses = ['all', 'Completed', 'Processing', 'Shipped', 'Cancelled', 'Refunded'] as const
+const orderTypes = [
+  { value: 'delivery', label: 'Delivery' },
+  { value: 'pickup', label: 'Pickup' },
+  { value: 'dine-in', label: 'Dine-in' },
+] as const
+
+interface Order {
+  id: number
+  customer_id: number
+  total_amount: number
+  status: string
+  order_type: string
+  coupon_id?: number
+}
+
+const { orders, createOrder, fetchOrders, deleteOrder } = useOrders()
+
+const statusFilter = state<string>('all')
+const sortBy = state<'date' | 'total_amount' | 'customer_id'>('date')
+const sortOrder = state<'asc' | 'desc'>('desc')
+const searchQuery = state('')
+const currentPage = state(1)
+const itemsPerPage = state(10)
+
+// Modal state.
+const showAddModal = state(false)
+const showDeleteModal = state(false)
+const orderToDelete = state<Order | null>(null)
+
+// New-order form fields — flat signals keep each x-model binding 1:1.
+const newCustomerId = state(1)
+const newTotalAmount = state(0)
+const newStatus = state<'Completed' | 'Processing' | 'Shipped' | 'Cancelled' | 'Refunded'>('Processing')
+const newOrderType = state<'delivery' | 'pickup' | 'dine-in'>('delivery')
+
+// Status list for the modal excludes the 'all' filter sentinel.
+const newOrderStatusOptions = derived(() =>
+  ['Completed', 'Processing', 'Shipped', 'Cancelled', 'Refunded']
+    .map(s => ({ value: s, label: s })),
+)
+
+const filteredOrders = derived(() => {
+  const q = searchQuery().toLowerCase()
+  const filter = statusFilter()
+  const by = sortBy()
+  const dir = sortOrder()
+
+  return (orders.value as Order[])
+    .filter((o) => {
+      const matchesSearch
+        = o.id.toString().toLowerCase().includes(q)
+          || o.customer_id.toString().toLowerCase().includes(q)
+          || o.order_type.toLowerCase().includes(q)
+      const matchesStatus = filter === 'all' || o.status === filter
+      return matchesSearch && matchesStatus
+    })
+    .sort((a, b) => {
+      let cmp = 0
+      if (by === 'total_amount')
+        cmp = a.total_amount - b.total_amount
+      else if (by === 'customer_id')
+        cmp = a.customer_id - b.customer_id
+      return dir === 'asc' ? cmp : -cmp
+    })
+})
+
+const paginatedOrders = derived(() => {
+  const start = (currentPage() - 1) * itemsPerPage()
+  return filteredOrders().slice(start, start + itemsPerPage())
+})
+
+const totalItems = derived(() => filteredOrders().length)
+const totalPages = derived(() => Math.ceil(totalItems() / itemsPerPage()))
+
+function toggleSort(column: 'date' | 'total_amount' | 'customer_id'): void {
+  if (sortBy() === column) {
+    sortOrder.update(d => d === 'asc' ? 'desc' : 'asc')
+  }
+  else {
+    sortBy.set(column)
+    sortOrder.set('desc')
+  }
+}
+
+function openAddModal(): void {
+  newCustomerId.set(1)
+  newTotalAmount.set(0)
+  newStatus.set('Processing')
+  newOrderType.set('delivery')
+  showAddModal.set(true)
+}
+
+function closeAddModal(): void {
+  showAddModal.set(false)
+}
+
+function closeDeleteModal(): void {
+  showDeleteModal.set(false)
+  orderToDelete.set(null)
+}
+
+async function addOrder(): Promise<void> {
+  const list = orders.value as Order[]
+  const id = list.length > 0 ? Math.max(...list.map(o => o.id || 0)) + 1 : 1
+  const optimistic: Order = {
+    id,
+    customer_id: newCustomerId(),
+    coupon_id: 0,
+    status: newStatus(),
+    total_amount: newTotalAmount(),
+    order_type: newOrderType(),
+  }
+  orders.value = [optimistic, ...list]
+
+  try {
+    const created = await createOrder(optimistic)
+    if (created) {
+      closeAddModal()
+    }
+    else {
+      orders.value = (orders.value as Order[]).filter(o => o.id !== id)
+    }
+  }
+  catch {
+    orders.value = (orders.value as Order[]).filter(o => o.id !== id)
+  }
+}
+
+async function confirmDelete(): Promise<void> {
+  const target = orderToDelete()
+  if (!target)
+    return
+
+  const id = target.id
+  const list = orders.value as Order[]
+  orders.value = list.filter(o => o.id !== id)
+
+  try {
+    const ok = await deleteOrder(id)
+    if (ok) {
+      closeDeleteModal()
+    }
+    else {
+      orders.value = [...orders.value, target]
+    }
+  }
+  catch {
+    orders.value = [...orders.value, target]
+  }
+}
+
+onMount(async () => {
+  await fetchOrders()
+})
+</script>
+
+@endsection