@stacksjs/defaults 0.70.207 → 0.70.208

package/views/dashboard/commerce/delivery/shipping-rates.stx

@@ -0,0 +1,338 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - Shipping Rates')
+<div class="py-6">
+  <div class="mx-auto px-4 sm:px-6 md:px-8 max-w-7xl">
+    <TabNavigation modelValue="rates" :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">Shipping Rates</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 Rate
+          </button>
+        </div>
+        <div class="mt-4">
+          <div class="w-full md:w-96"><SearchFilter placeholder="Search shipping rates..." @search="handleSearch" /></div>
+        </div>
+      </div>
+
+      <ShippingRatesTable :rates="paginatedShippingRates" @edit="openEditModal" @delete="handleDeleteRate" />
+
+      <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 Shipping Rate 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 Shipping Rate</h3>
+            <div class="mt-4">
+              <div class="space-y-4">
+                <div>
+                  <label for="rate-method" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Method</label>
+                  <div class="mt-2">
+                    <select id="rate-method" x-model.number="newMethodId" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white 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">
+                      <option value="">Select a shipping method</option>
+                      <template :for="method in methodOptions">
+                        <option value="{{ method.id }}">{{ method.name }}</option>
+                      </template>
+                    </select>
+                  </div>
+                </div>
+                <div>
+                  <label for="rate-zone" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Zone</label>
+                  <div class="mt-2">
+                    <select id="rate-zone" x-model.number="newZoneId" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white 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">
+                      <option value="">Select a shipping zone</option>
+                      <template :for="zone in zoneOptions">
+                        <option value="{{ zone.id }}">{{ zone.name }}</option>
+                      </template>
+                    </select>
+                  </div>
+                </div>
+                <div class="grid gap-4 grid-cols-2">
+                  <div>
+                    <label for="rate-weight-from" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Weight From</label>
+                    <div class="mt-2">
+                      <input type="number" id="rate-weight-from" x-model.number="newWeightFrom" 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="rate-weight-to" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Weight To</label>
+                    <div class="mt-2">
+                      <input type="number" id="rate-weight-to" x-model.number="newWeightTo" placeholder="10" 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>
+                  <label for="rate-rate" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Rate (in cents)</label>
+                  <div class="mt-2">
+                    <input type="number" id="rate-rate" x-model.number="newRate" placeholder="599" 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 class="sm:grid sm:gap-3 sm:grid-cols-2 sm:grid-flow-row-dense mt-5 sm:mt-6">
+          <button type="button" @click="addShippingRate()" 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 Rate</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 Shipping Rate 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 Shipping Rate</h3>
+            <div class="mt-4">
+              <div class="space-y-4">
+                <div>
+                  <label for="edit-rate-method" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Method</label>
+                  <div class="mt-2">
+                    <select id="edit-rate-method" x-model.number="newMethodId" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white 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">
+                      <option value="">Select a shipping method</option>
+                      <template :for="method in methodOptions">
+                        <option value="{{ method.id }}">{{ method.name }}</option>
+                      </template>
+                    </select>
+                  </div>
+                </div>
+                <div>
+                  <label for="edit-rate-zone" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Zone</label>
+                  <div class="mt-2">
+                    <select id="edit-rate-zone" x-model.number="newZoneId" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white 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">
+                      <option value="">Select a shipping zone</option>
+                      <template :for="zone in zoneOptions">
+                        <option value="{{ zone.id }}">{{ zone.name }}</option>
+                      </template>
+                    </select>
+                  </div>
+                </div>
+                <div class="grid gap-4 grid-cols-2">
+                  <div>
+                    <label for="edit-rate-weight-from" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Weight From</label>
+                    <div class="mt-2">
+                      <input type="number" id="edit-rate-weight-from" x-model.number="newWeightFrom" 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-rate-weight-to" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Weight To</label>
+                    <div class="mt-2">
+                      <input type="number" id="edit-rate-weight-to" x-model.number="newWeightTo" placeholder="10" 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>
+                  <label for="edit-rate-rate" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Rate (in cents)</label>
+                  <div class="mt-2">
+                    <input type="number" id="edit-rate-rate" x-model.number="newRate" placeholder="599" 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 class="sm:grid sm:gap-3 sm:grid-cols-2 sm:grid-flow-row-dense mt-5 sm:mt-6">
+          <button type="button" @click="saveShippingRate()" 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 { useShippingMethods } from '../../../../functions/commerce/shippings/shipping-methods'
+// Shared tab nav config — formerly duplicated in every delivery page's
+// `<script server>` block (stacksjs/stacks#1838).
+import { deliveryTabs as tabs } from './tabs'
+import { useShippingRates } from '../../../../functions/commerce/shippings/shipping-rates'
+import { useShippingZones } from '../../../../functions/commerce/shippings/shipping-zones'
+
+interface ShippingRate {
+  id?: number
+  shipping_method_id: number
+  shipping_zone_id: number
+  weight_from: number
+  weight_to: number
+  rate: number
+  method?: string
+  zone?: string
+}
+
+const { shippingRates, createShippingRate, fetchShippingRates, updateShippingRate, deleteShippingRate } = useShippingRates()
+const { shippingMethods, fetchShippingMethods } = useShippingMethods()
+const { shippingZones, fetchShippingZones } = useShippingZones()
+
+const showAddModal = state(false)
+const showEditModal = state(false)
+const editingRate = state<ShippingRate | null>(null)
+
+const newMethodId = state(0)
+const newZoneId = state(0)
+const newWeightFrom = state(0)
+const newWeightTo = state(0)
+const newRate = state(0)
+
+const searchQuery = state('')
+const currentPage = state(1)
+const itemsPerPage = state(5)
+
+function methodOptions(): Array<{ id: number, name: string }> {
+  return (shippingMethods.value as Array<{ id: number, name: string }>) || []
+}
+
+function zoneOptions(): Array<{ id: number, name: string }> {
+  return (shippingZones.value as Array<{ id: number, name: string }>) || []
+}
+
+const filteredShippingRates = derived(() => {
+  const list = (shippingRates.value as ShippingRate[]) || []
+  const q = searchQuery().toLowerCase()
+  if (!q)
+    return list
+  return list.filter(r =>
+    (r.method?.toLowerCase().includes(q) ?? false)
+    || (r.zone?.toLowerCase().includes(q) ?? false)
+    || r.weight_from.toString().includes(q)
+    || r.weight_to.toString().includes(q)
+    || r.rate.toString().includes(q),
+  )
+})
+
+const paginatedShippingRates = derived(() => {
+  const start = (currentPage() - 1) * itemsPerPage()
+  return filteredShippingRates().slice(start, start + itemsPerPage())
+})
+
+const totalItems = derived(() => filteredShippingRates().length)
+
+function resetForm(): void {
+  newMethodId.set(0)
+  newZoneId.set(0)
+  newWeightFrom.set(0)
+  newWeightTo.set(0)
+  newRate.set(0)
+}
+
+function openAddModal(): void {
+  resetForm()
+  showAddModal.set(true)
+}
+
+function closeAddModal(): void {
+  showAddModal.set(false)
+}
+
+function openEditModal(rate: ShippingRate): void {
+  editingRate.set(rate)
+  newMethodId.set(rate.shipping_method_id)
+  newZoneId.set(rate.shipping_zone_id)
+  newWeightFrom.set(rate.weight_from)
+  newWeightTo.set(rate.weight_to)
+  newRate.set(rate.rate)
+  showEditModal.set(true)
+}
+
+function closeEditModal(): void {
+  showEditModal.set(false)
+  editingRate.set(null)
+}
+
+async function addShippingRate(): Promise<void> {
+  try {
+    await createShippingRate({
+      shipping_method_id: newMethodId(),
+      shipping_zone_id: newZoneId(),
+      weight_from: newWeightFrom(),
+      weight_to: newWeightTo(),
+      rate: newRate(),
+    } as ShippingRate)
+    closeAddModal()
+  }
+  catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('Failed to create shipping rate:', error)
+  }
+}
+
+async function saveShippingRate(): Promise<void> {
+  const target = editingRate()
+  if (!target)
+    return
+  try {
+    await updateShippingRate({
+      ...target,
+      shipping_method_id: newMethodId(),
+      shipping_zone_id: newZoneId(),
+      weight_from: newWeightFrom(),
+      weight_to: newWeightTo(),
+      rate: newRate(),
+    })
+    closeEditModal()
+  }
+  catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('Failed to update shipping rate:', error)
+  }
+}
+
+function handleSearch(query: string): void {
+  searchQuery.set(query)
+  currentPage.set(1)
+}
+
+async function handleDeleteRate(rate: ShippingRate): Promise<void> {
+  // eslint-disable-next-line no-alert
+  if (!confirm('Are you sure you want to delete this shipping rate?'))
+    return
+  try {
+    await deleteShippingRate(rate.id as number)
+  }
+  catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('Failed to delete shipping rate:', error)
+  }
+}
+
+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 Promise.all([
+    fetchShippingRates(),
+    fetchShippingMethods(),
+    fetchShippingZones(),
+  ])
+})
+</script>
+
+@endsection

package/views/dashboard/commerce/delivery/shipping-zones.stx

@@ -0,0 +1,302 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - Shipping Zones')
+<div class="py-6">
+  <div class="mx-auto px-4 sm:px-6 md:px-8 max-w-7xl">
+    <TabNavigation modelValue="zones" :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">Shipping Zones</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 Zone
+          </button>
+        </div>
+        <div class="mt-4">
+          <div class="w-full md:w-96"><SearchFilter placeholder="Search shipping zones..." @search="handleSearch" /></div>
+        </div>
+      </div>
+
+      <ShippingZonesTable :zones="paginatedShippingZones" @edit="openEditModal" @delete="handleDeleteZone" />
+
+      <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 Shipping Zone 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 Shipping Zone</h3>
+            <div class="mt-4">
+              <div class="space-y-4">
+                <div>
+                  <label for="zone-name" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Zone Name</label>
+                  <div class="mt-2">
+                    <input type="text" id="zone-name" x-model="newName" placeholder="Enter zone 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="zone-countries" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Countries</label>
+                  <div class="mt-2">
+                    <textarea id="zone-countries" x-model="newCountries" rows="3" placeholder="Enter countries (comma-separated)" 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="zone-regions" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Regions</label>
+                  <div class="mt-2">
+                    <textarea id="zone-regions" x-model="newRegions" rows="3" placeholder="Enter regions (comma-separated)" 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="zone-postal-codes" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Postal Codes</label>
+                  <div class="mt-2">
+                    <textarea id="zone-postal-codes" x-model="newPostalCodes" rows="3" placeholder="Enter postal codes (comma-separated)" 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="zone-status" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Status</label>
+                  <div class="mt-2">
+                    <select id="zone-status" x-model="newStatus" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white 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">
+                      <option value="Active">Active</option>
+                      <option value="Inactive">Inactive</option>
+                    </select>
+                  </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="addShippingZone()" 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 Zone</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 Shipping Zone 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 Shipping Zone</h3>
+            <div class="mt-4">
+              <div class="space-y-4">
+                <div>
+                  <label for="edit-zone-name" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Zone Name</label>
+                  <div class="mt-2">
+                    <input type="text" id="edit-zone-name" x-model="newName" placeholder="Enter zone 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-zone-countries" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Countries</label>
+                  <div class="mt-2">
+                    <textarea id="edit-zone-countries" x-model="newCountries" rows="3" placeholder="Enter countries (comma-separated)" 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="edit-zone-regions" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Regions</label>
+                  <div class="mt-2">
+                    <textarea id="edit-zone-regions" x-model="newRegions" rows="3" placeholder="Enter regions (comma-separated)" 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="edit-zone-postal-codes" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Postal Codes</label>
+                  <div class="mt-2">
+                    <textarea id="edit-zone-postal-codes" x-model="newPostalCodes" rows="3" placeholder="Enter postal codes (comma-separated)" 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="edit-zone-status" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Status</label>
+                  <div class="mt-2">
+                    <select id="edit-zone-status" x-model="newStatus" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white 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">
+                      <option value="Active">Active</option>
+                      <option value="Inactive">Inactive</option>
+                    </select>
+                  </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="saveShippingZone()" 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 { useShippingZones } from '../../../../functions/commerce/shippings/shipping-zones'
+// Shared tab nav config — formerly duplicated in every delivery page's
+// `<script server>` block (stacksjs/stacks#1838).
+import { deliveryTabs as tabs } from './tabs'
+
+interface ShippingZone {
+  id?: number
+  name: string
+  countries?: string
+  regions?: string
+  postal_codes?: string
+  shipping_method_id: number
+  status: string
+}
+
+const { shippingZones, createShippingZone, fetchShippingZones, updateShippingZone, deleteShippingZone } = useShippingZones()
+
+const showAddModal = state(false)
+const showEditModal = state(false)
+const editingZone = state<ShippingZone | null>(null)
+
+const newName = state('')
+const newCountries = state('')
+const newRegions = state('')
+const newPostalCodes = state('')
+const newStatus = state('Active')
+
+const searchQuery = state('')
+const currentPage = state(1)
+const itemsPerPage = state(5)
+
+const filteredShippingZones = derived(() => {
+  const list = (shippingZones.value as ShippingZone[]) || []
+  const q = searchQuery().toLowerCase()
+  if (!q)
+    return list
+  return list.filter(z =>
+    z.name.toLowerCase().includes(q)
+    || (z.countries?.toLowerCase().includes(q) ?? false)
+    || (z.regions?.toLowerCase().includes(q) ?? false),
+  )
+})
+
+const paginatedShippingZones = derived(() => {
+  const start = (currentPage() - 1) * itemsPerPage()
+  return filteredShippingZones().slice(start, start + itemsPerPage())
+})
+
+const totalItems = derived(() => filteredShippingZones().length)
+
+function resetForm(): void {
+  newName.set('')
+  newCountries.set('')
+  newRegions.set('')
+  newPostalCodes.set('')
+  newStatus.set('Active')
+}
+
+function openAddModal(): void {
+  resetForm()
+  showAddModal.set(true)
+}
+
+function closeAddModal(): void {
+  showAddModal.set(false)
+}
+
+function openEditModal(zone: ShippingZone): void {
+  editingZone.set(zone)
+  newName.set(zone.name)
+  newCountries.set(zone.countries ?? '')
+  newRegions.set(zone.regions ?? '')
+  newPostalCodes.set(zone.postal_codes ?? '')
+  newStatus.set(zone.status)
+  showEditModal.set(true)
+}
+
+function closeEditModal(): void {
+  showEditModal.set(false)
+  editingZone.set(null)
+}
+
+async function addShippingZone(): Promise<void> {
+  try {
+    await createShippingZone({
+      name: newName(),
+      countries: newCountries(),
+      regions: newRegions(),
+      postal_codes: newPostalCodes(),
+      shipping_method_id: 1,
+      status: newStatus(),
+    } as ShippingZone)
+    closeAddModal()
+  }
+  catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('Failed to create shipping zone:', error)
+  }
+}
+
+async function saveShippingZone(): Promise<void> {
+  const target = editingZone()
+  if (!target)
+    return
+  try {
+    await updateShippingZone({
+      ...target,
+      name: newName(),
+      countries: newCountries(),
+      regions: newRegions(),
+      postal_codes: newPostalCodes(),
+      status: newStatus(),
+    })
+    closeEditModal()
+  }
+  catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('Failed to update shipping zone:', error)
+  }
+}
+
+function handleSearch(query: string): void {
+  searchQuery.set(query)
+  currentPage.set(1)
+}
+
+async function handleDeleteZone(zone: ShippingZone): Promise<void> {
+  // eslint-disable-next-line no-alert
+  if (!confirm(`Are you sure you want to delete ${zone.name}?`))
+    return
+  try {
+    await deleteShippingZone(zone.id as number)
+  }
+  catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('Failed to delete shipping zone:', error)
+  }
+}
+
+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 fetchShippingZones()
+})
+</script>
+
+@endsection

package/views/dashboard/commerce/delivery/tabs.ts

@@ -0,0 +1,25 @@
+/**
+ * Shared TabNavigation config for every `/commerce/delivery/*` page.
+ *
+ * The seven sub-pages under this directory (shipping methods, zones,
+ * rates, digital delivery, license keys, delivery routes, drivers) all
+ * render the same top-tab bar. Lifting the array here lets each page
+ * import it once via `<script client>` instead of redeclaring the same
+ * list in every file (stacksjs/stacks#1838).
+ */
+
+export interface DeliveryTab {
+  name: string
+  value: string
+  href: string
+}
+
+export const deliveryTabs: readonly DeliveryTab[] = Object.freeze([
+  { name: 'Shipping Methods', value: 'methods', href: '/commerce/delivery/shipping-methods' },
+  { name: 'Shipping Zones', value: 'zones', href: '/commerce/delivery/shipping-zones' },
+  { name: 'Shipping Rates', value: 'rates', href: '/commerce/delivery/shipping-rates' },
+  { name: 'Digital Delivery', value: 'digital', href: '/commerce/delivery/digital-delivery' },
+  { name: 'License Keys', value: 'license', href: '/commerce/delivery/license-keys' },
+  { name: 'Delivery Routes', value: 'routes', href: '/commerce/delivery/delivery-routes' },
+  { name: 'Drivers', value: 'drivers', href: '/commerce/delivery/drivers' },
+])