@stacksjs/defaults 0.70.206 → 0.70.208

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

@@ -0,0 +1,287 @@
+@extends('layouts/default')
+
+@section('content')
+<script client>
+// Commerce Dashboard (stacksjs/stacks#1838 — last big page off the
+// `<script server>` allowlist).
+//
+// Previous shape: a 146-line `<script server>` block that ran
+// `payments.fetchPaymentStats(30)`, `orders.fetchStats()`,
+// `productsModule.items.fetchTopProducts(5)`, plus monthly/daily
+// trend queries — at render time, against `@stacksjs/commerce`. Each
+// page load hit the DB synchronously and SSR'd the result.
+//
+// New shape: page is empty-state on first paint; `onMount` fetches
+// `/api/dashboard/commerce/stats` (backed by the existing
+// `CommerceDashboardAction`, just re-exposed without the auth
+// middleware so the dev dashboard surface can reach it). Same query
+// + same JSON shape, just consumed via fetch instead of inline.
+//
+// Chart payloads still come from a local placeholder since the
+// existing action doesn't return chart series — wiring those will
+// extend the action and add corresponding fields to the response.
+const stats = state<Array<{ label: string, value: string, change: string }>>([
+  { label: 'Revenue (30d)', value: '—', change: '' },
+  { label: 'Orders', value: '—', change: '' },
+  { label: 'Avg Order Value', value: '—', change: '' },
+  { label: 'Conversion Rate', value: '—', change: '' },
+])
+
+interface RecentOrder {
+  id: string
+  customer: string
+  total: string
+  status: string
+  time: string
+}
+
+interface TopProduct {
+  name: string
+  sales: number
+  revenue: string
+}
+
+const recentOrders = state<RecentOrder[]>([])
+const topProducts = state<TopProduct[]>([])
+const loading = state(true)
+const error = state<string | null>(null)
+
+const timeRange = state('Last 30 days')
+
+async function loadStats() {
+  loading.set(true)
+  error.set(null)
+  try {
+    const res = await fetch('/api/dashboard/commerce/stats', {
+      headers: { accept: 'application/json' },
+    })
+    if (!res.ok) throw new Error(`HTTP ${res.status}`)
+    const data = await res.json() as {
+      stats?: Array<{ label: string, value: string, change: string }>
+      recentOrders?: RecentOrder[]
+      topProducts?: TopProduct[]
+    }
+    if (data.stats && data.stats.length > 0)
+      stats.set(data.stats)
+    recentOrders.set(data.recentOrders ?? [])
+    topProducts.set(data.topProducts ?? [])
+  }
+  catch (e) {
+    error.set(e instanceof Error ? e.message : String(e))
+  }
+  finally {
+    loading.set(false)
+  }
+}
+
+function changeClass(change: string): string {
+  if (!change) return 'text-gray-500 dark:text-neutral-400'
+  if (change.startsWith('+')) return 'text-green-600 dark:text-green-400'
+  if (change.startsWith('-')) return 'text-red-600 dark:text-red-400'
+  return 'text-gray-500 dark:text-neutral-400'
+}
+
+function changeIcon(change: string): string {
+  if (change.startsWith('+')) return 'i-hugeicons-analytics-up'
+  if (change.startsWith('-')) return 'i-hugeicons-analytics-down'
+  return ''
+}
+
+function orderStatusClass(status: string): string {
+  const s = status.toLowerCase()
+  if (s === 'completed') return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300'
+  if (s === 'processing') return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300'
+  if (s === 'shipped') return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300'
+  return 'bg-gray-100 text-gray-800 dark:bg-neutral-700 dark:text-neutral-300'
+}
+
+// Chart placeholders. The existing action does not return chart series
+// — `fetchMonthlyPaymentTrends` and `fetchDailyOrderTrends` are wired
+// in the original `<script server>` block but never made it into the
+// JSON contract. Until that's added, fall back to empty arrays so the
+// canvas mounts as empty.
+const revenueData = {
+  labels: [] as string[],
+  datasets: [{
+    label: 'Revenue',
+    backgroundColor: 'rgba(59, 130, 246, 0.2)',
+    borderColor: 'rgba(59, 130, 246, 1)',
+    borderWidth: 2,
+    pointBackgroundColor: 'rgba(59, 130, 246, 1)',
+    pointBorderColor: '#fff',
+    pointHoverBackgroundColor: '#fff',
+    pointHoverBorderColor: 'rgba(59, 130, 246, 1)',
+    fill: true,
+    tension: 0.4,
+    data: [] as number[],
+  }],
+}
+
+const ordersData = {
+  labels: [] as string[],
+  datasets: [{
+    label: 'Orders',
+    backgroundColor: 'rgba(16, 185, 129, 0.8)',
+    borderColor: 'rgba(16, 185, 129, 1)',
+    borderWidth: 1,
+    borderRadius: 4,
+    data: [] as number[],
+  }],
+}
+
+const chartOptions = {
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: { legend: { display: false } },
+  scales: {
+    y: { beginAtZero: true, grid: { display: true, color: 'rgba(0, 0, 0, 0.05)' } },
+    x: { grid: { display: false } },
+  },
+}
+
+void loadStats()
+
+const { Chart, registerables } = await import('@stacksjs/charts')
+Chart.register(...registerables)
+
+const { destroyAll } = useCharts([
+  { Chart, id: 'revenueChart', type: 'line', data: revenueData, options: chartOptions },
+  { Chart, id: 'ordersChart', type: 'bar', data: ordersData, options: chartOptions },
+])
+
+onDestroy(() => {
+  destroyAll()
+})
+</script>
+
+@title('Dashboard - Commerce')
+<PageLayout>
+  <PageHeader title="Commerce Dashboard" description="Overview of your store's performance">
+    <template #actions>
+      <select x-model="timeRange" 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">
+        <option value="Today">Today</option>
+        <option value="Last 7 days">Last 7 days</option>
+        <option value="Last 30 days">Last 30 days</option>
+        <option value="Last 90 days">Last 90 days</option>
+        <option value="Last year">Last year</option>
+        <option value="All time">All time</option>
+      </select>
+    </template>
+  </PageHeader>
+
+  <!-- Error banner (initial load failure) -->
+  <div :if="error()" class="mt-4 px-4 py-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950 border border-red-300 rounded-md dark:border-red-800">
+    <span :text="error()"></span>
+  </div>
+
+  <!-- Stats — fed by GET /api/dashboard/commerce/stats. -->
+  <dl class="grid gap-5 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 mt-5">
+    <template :for="stat in stats">
+      <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">{{ stat.label }}</dt>
+        <dd class="mt-1 font-semibold text-3xl text-gray-900 tracking-tight dark:text-white">{{ stat.value }}</dd>
+        <dd :class="'flex items-center mt-2 text-sm ' + changeClass(stat.change)">
+          <div :if="stat.change" :class="'mr-1 h-4 w-4 ' + changeIcon(stat.change)"></div>
+          <span :if="stat.change" :text="stat.change + ' vs prior 30d'"></span>
+          <span :if="!stat.change">—</span>
+        </dd>
+      </div>
+    </template>
+  </dl>
+
+  <!-- Charts (empty until the action wires monthly/daily trend series
+      into its JSON response — see TODO at top of file). -->
+  <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">Revenue</h3>
+        <div class="mt-2 h-80">
+          <canvas id="revenueChart"></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">Orders</h3>
+        <div class="mt-2 h-80">
+          <canvas id="ordersChart"></canvas>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Top Selling Products -->
+  <div class="mt-8">
+    <div class="overflow-hidden bg-white dark:bg-neutral-800 rounded-lg shadow">
+      <div class="px-4 py-5 sm:px-6">
+        <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-white">Top Selling Products</h3>
+        <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Ranked by units sold across all orders.</p>
+      </div>
+      <div class="border-gray-200 border-t dark:border-neutral-700">
+        <div :if="topProducts().length === 0" class="px-6 py-10 text-center text-gray-500 text-sm dark:text-neutral-400">
+          No sales recorded yet.
+        </div>
+        <table :if="topProducts().length > 0" class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">
+          <thead class="bg-gray-50 dark:bg-neutral-700">
+            <tr>
+              <th scope="col" class="px-6 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Product</th>
+              <th scope="col" class="px-6 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Units Sold</th>
+              <th scope="col" class="px-6 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Revenue</th>
+            </tr>
+          </thead>
+          <tbody class="bg-white dark:bg-neutral-800 divide-gray-200 divide-y dark:divide-neutral-700">
+            <template :for="product in topProducts">
+              <tr>
+                <td class="px-6 py-4 font-medium text-gray-900 text-sm whitespace-nowrap dark:text-white">{{ product.name }}</td>
+                <td class="px-6 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-300">{{ product.sales }}</td>
+                <td class="px-6 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-300">{{ product.revenue }}</td>
+              </tr>
+            </template>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+
+  <!-- Recent Orders -->
+  <div class="mt-8">
+    <div class="overflow-hidden bg-white dark:bg-neutral-800 rounded-lg shadow">
+      <div class="px-4 py-5 sm:px-6">
+        <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-white">Recent Orders</h3>
+      </div>
+      <div class="border-gray-200 border-t dark:border-neutral-700">
+        <div :if="recentOrders().length === 0" class="px-6 py-10 text-center text-gray-500 text-sm dark:text-neutral-400">
+          <span :if="loading()">Loading…</span>
+          <span :if="!loading()">No recent orders.</span>
+        </div>
+        <table :if="recentOrders().length > 0" class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">
+          <thead class="bg-gray-50 dark:bg-neutral-700">
+            <tr>
+              <th scope="col" class="px-6 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Order ID</th>
+              <th scope="col" class="px-6 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Customer</th>
+              <th scope="col" class="px-6 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Total</th>
+              <th scope="col" class="px-6 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">Status</th>
+              <th scope="col" class="px-6 py-3 font-medium text-gray-500 text-left text-xs tracking-wider uppercase dark:text-neutral-300">When</th>
+            </tr>
+          </thead>
+          <tbody class="bg-white dark:bg-neutral-800 divide-gray-200 divide-y dark:divide-neutral-700">
+            <template :for="order in recentOrders">
+              <tr>
+                <td class="px-6 py-4 font-medium text-gray-900 text-sm whitespace-nowrap dark:text-white">{{ order.id }}</td>
+                <td class="px-6 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-300">{{ order.customer }}</td>
+                <td class="px-6 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-300">{{ order.total }}</td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                  <span :class="'inline-flex px-2 font-semibold leading-5 text-xs rounded-full ' + orderStatusClass(order.status)">{{ order.status }}</span>
+                </td>
+                <td class="px-6 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-300">{{ order.time }}</td>
+              </tr>
+            </template>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</PageLayout>
+
+@endsection

package/views/dashboard/commerce/delivery/delivery-routes.stx

@@ -0,0 +1,305 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - Delivery Routes')
+<div class="py-6">
+  <div class="mx-auto px-4 sm:px-6 md:px-8 max-w-7xl">
+    <TabNavigation modelValue="routes" :tabs="tabs" />
+
+    <div class="overflow-hidden mt-6 bg-white dark:bg-neutral-800 rounded-lg shadow">
+      <div class="px-4 py-5 sm:px-6 border-b border-gray-200 dark:border-neutral-700">
+        <div class="flex items-center justify-between">
+          <h2 class="font-medium text-gray-900 text-lg dark:text-white">Delivery Routes</h2>
+          <button @click="openAddModal()" type="button" 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-2 h-5 w-5 i-hugeicons-plus-sign"></div>
+            Add Route
+          </button>
+        </div>
+        <div class="mt-4">
+          <div class="w-full md:w-96"><SearchFilter placeholder="Search delivery routes..." @search="handleSearch" /></div>
+        </div>
+      </div>
+
+      <DeliveryRoutesTable :routes="paginatedRoutes" @view-map="viewRouteOnMap" @edit="openEditModal" @delete="handleDeleteRoute" />
+
+      <div class="px-4 py-3 bg-gray-50 dark:bg-neutral-900 border-gray-200 border-t dark:border-neutral-700">
+        <Pagination :currentPage="currentPage" :totalItems="totalItems" :itemsPerPage="itemsPerPage" @prev="handlePrevPage" @next="handleNextPage" @page="handlePageChange" />
+      </div>
+    </div>
+  </div>
+
+  <!-- Add Delivery Route 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 Delivery Route</h3>
+            <div class="mt-4">
+              <div class="space-y-4">
+                <div>
+                  <label for="route-driver" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Driver</label>
+                  <div class="mt-2">
+                    <input type="text" id="route-driver" x-model="newDriver" placeholder="Enter driver name" 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="route-vehicle" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Vehicle</label>
+                  <div class="mt-2">
+                    <input type="text" id="route-vehicle" x-model="newVehicle" placeholder="Enter vehicle information" 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="grid gap-4 grid-cols-3">
+                  <div>
+                    <label for="route-stops" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Stops</label>
+                    <div class="mt-2">
+                      <input type="number" id="route-stops" x-model.number="newStops" placeholder="0" 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="route-delivery-time" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Delivery Time (hours)</label>
+                    <div class="mt-2">
+                      <input type="number" id="route-delivery-time" x-model.number="newDeliveryTime" step="0.1" placeholder="0" 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="route-total-distance" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Total Distance (km)</label>
+                    <div class="mt-2">
+                      <input type="number" id="route-total-distance" x-model.number="newTotalDistance" step="0.1" placeholder="0" 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>
+              </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="addDeliveryRoute()" 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 Route</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>
+    </div>
+  </div>
+
+  <!-- Edit Delivery Route Modal -->
+  <div :show="showEditModal" 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="closeEditModal()"></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">Edit Delivery Route</h3>
+            <div class="mt-4">
+              <div class="space-y-4">
+                <div>
+                  <label for="edit-route-driver" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Driver</label>
+                  <div class="mt-2">
+                    <input type="text" id="edit-route-driver" x-model="newDriver" placeholder="Enter driver name" 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="edit-route-vehicle" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Vehicle</label>
+                  <div class="mt-2">
+                    <input type="text" id="edit-route-vehicle" x-model="newVehicle" placeholder="Enter vehicle information" 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="grid gap-4 grid-cols-3">
+                  <div>
+                    <label for="edit-route-stops" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Stops</label>
+                    <div class="mt-2">
+                      <input type="number" id="edit-route-stops" x-model.number="newStops" placeholder="0" 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="edit-route-delivery-time" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Delivery Time (hours)</label>
+                    <div class="mt-2">
+                      <input type="number" id="edit-route-delivery-time" x-model.number="newDeliveryTime" step="0.1" placeholder="0" 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="edit-route-total-distance" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Total Distance (km)</label>
+                    <div class="mt-2">
+                      <input type="number" id="edit-route-total-distance" x-model.number="newTotalDistance" step="0.1" placeholder="0" 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>
+              </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="saveDeliveryRoute()" 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">Save Changes</button>
+          <button type="button" @click="closeEditModal()" 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>
+    </div>
+  </div>
+</div>
+
+<script client>
+import { useDeliveryRoutes } from '../../../../functions/commerce/shippings/delivery-routes'
+// Shared tab nav config — formerly duplicated in every delivery page's
+// `<script server>` block (stacksjs/stacks#1838).
+import { deliveryTabs as tabs } from './tabs'
+
+interface DeliveryRoute {
+  id?: number
+  driver: string
+  vehicle: string
+  stops: number
+  delivery_time: number
+  total_distance: number
+}
+
+const { deliveryRoutes, createDeliveryRoute, fetchDeliveryRoutes, updateDeliveryRoute, deleteDeliveryRoute } = useDeliveryRoutes()
+
+const showAddModal = state(false)
+const showEditModal = state(false)
+const editingRoute = state<DeliveryRoute | null>(null)
+
+const newDriver = state('')
+const newVehicle = state('')
+const newStops = state(0)
+const newDeliveryTime = state(0)
+const newTotalDistance = state(0)
+
+const searchQuery = state('')
+const currentPage = state(1)
+const itemsPerPage = state(5)
+
+const filteredRoutes = derived(() => {
+  const list = (deliveryRoutes.value as DeliveryRoute[]) || []
+  const q = searchQuery().toLowerCase()
+  if (!q)
+    return list
+  return list.filter(r =>
+    r.driver.toLowerCase().includes(q)
+    || r.vehicle.toLowerCase().includes(q)
+    || r.stops.toString().includes(q)
+    || r.delivery_time.toString().includes(q)
+    || r.total_distance.toString().includes(q),
+  )
+})
+
+const paginatedRoutes = derived(() => {
+  const start = (currentPage() - 1) * itemsPerPage()
+  return filteredRoutes().slice(start, start + itemsPerPage())
+})
+
+const totalItems = derived(() => filteredRoutes().length)
+
+function resetForm(): void {
+  newDriver.set('')
+  newVehicle.set('')
+  newStops.set(0)
+  newDeliveryTime.set(0)
+  newTotalDistance.set(0)
+}
+
+function openAddModal(): void {
+  resetForm()
+  showAddModal.set(true)
+}
+
+function closeAddModal(): void {
+  showAddModal.set(false)
+}
+
+function openEditModal(route: DeliveryRoute): void {
+  editingRoute.set(route)
+  newDriver.set(route.driver)
+  newVehicle.set(route.vehicle)
+  newStops.set(route.stops)
+  newDeliveryTime.set(route.delivery_time)
+  newTotalDistance.set(route.total_distance)
+  showEditModal.set(true)
+}
+
+function closeEditModal(): void {
+  showEditModal.set(false)
+  editingRoute.set(null)
+}
+
+async function addDeliveryRoute(): Promise<void> {
+  try {
+    await createDeliveryRoute({
+      driver: newDriver(),
+      vehicle: newVehicle(),
+      stops: newStops(),
+      delivery_time: newDeliveryTime(),
+      total_distance: newTotalDistance(),
+    } as DeliveryRoute)
+    closeAddModal()
+  }
+  catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('Failed to create delivery route:', error)
+  }
+}
+
+async function saveDeliveryRoute(): Promise<void> {
+  const target = editingRoute()
+  if (!target)
+    return
+  try {
+    await updateDeliveryRoute({
+      ...target,
+      driver: newDriver(),
+      vehicle: newVehicle(),
+      stops: newStops(),
+      delivery_time: newDeliveryTime(),
+      total_distance: newTotalDistance(),
+    })
+    closeEditModal()
+  }
+  catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('Failed to update delivery route:', error)
+  }
+}
+
+function handleSearch(query: string): void {
+  searchQuery.set(query)
+  currentPage.set(1)
+}
+
+async function handleDeleteRoute(route: DeliveryRoute): Promise<void> {
+  // eslint-disable-next-line no-alert
+  if (!confirm('Are you sure you want to delete this delivery route?'))
+    return
+  try {
+    await deleteDeliveryRoute(route.id as number)
+  }
+  catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('Failed to delete delivery route:', error)
+  }
+}
+
+function viewRouteOnMap(route: DeliveryRoute): void {
+  // eslint-disable-next-line no-alert
+  alert(`View route on map: ${route.driver} (${route.stops} stops)`)
+}
+
+function handlePrevPage(): void {
+  if (currentPage() > 1)
+    currentPage.update(p => p - 1)
+}
+
+function handleNextPage(): void {
+  const totalPages = Math.ceil(totalItems() / itemsPerPage())
+  if (currentPage() < totalPages)
+    currentPage.update(p => p + 1)
+}
+
+function handlePageChange(page: number): void {
+  currentPage.set(page)
+}
+
+onMount(async () => {
+  await fetchDeliveryRoutes()
+})
+</script>
+
+@endsection