@stacksjs/defaults 0.70.228 → 0.70.230

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

@@ -2,337 +2,9 @@
 
 @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 class="p-4 lg:p-8 min-h-[100dvh] dark:bg-neutral-900">
+  <ShippingRatesDashboard />
 </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

@@ -2,301 +2,9 @@
 
 @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 class="p-4 lg:p-8 min-h-[100dvh] dark:bg-neutral-900">
+  <ShippingZonesDashboard />
 </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