@stacksjs/defaults 0.70.206 → 0.70.208

package/views/dashboard/commerce/delivery/drivers.stx

@@ -0,0 +1,397 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - Delivery Drivers')
+<div class="py-6">
+  <div class="mx-auto px-4 sm:px-6 md:px-8 max-w-7xl">
+    <TabNavigation modelValue="drivers" :tabs="tabs" />
+
+    <!-- Stats section -->
+    <div class="grid gap-5 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 mt-6">
+      <div class="overflow-hidden relative pt-5 px-4 sm:pt-6 sm:px-6 bg-white dark:bg-neutral-800 rounded-lg shadow">
+        <dt>
+          <div class="absolute p-3 bg-blue-500 rounded-md">
+            <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
+            </svg>
+          </div>
+          <p class="ml-16 font-medium text-gray-500 text-sm truncate dark:text-neutral-400">Total Drivers</p>
+        </dt>
+        <dd class="flex items-baseline ml-16 pb-6 sm:pb-7">
+          <p class="font-semibold text-2xl text-gray-900 dark:text-white">{{ totalDrivers() }}</p>
+          <p class="flex items-baseline ml-2 font-semibold text-green-600 text-sm">
+            <svg class="flex-shrink-0 self-center h-5 w-5 text-green-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <path fill-rule="evenodd" d="M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z" clip-rule="evenodd" />
+            </svg>
+            <span class="sr-only"> Increased by </span>
+            2
+          </p>
+        </dd>
+      </div>
+
+      <div class="overflow-hidden relative pt-5 px-4 sm:pt-6 sm:px-6 bg-white dark:bg-neutral-800 rounded-lg shadow">
+        <dt>
+          <div class="absolute p-3 bg-green-500 rounded-md">
+            <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 18.75a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 01-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h1.125c.621 0 1.129-.504 1.09-1.124a17.902 17.902 0 00-3.213-9.193 2.056 2.056 0 00-1.58-.86H14.25M16.5 18.75h-2.25m0-11.177v-.958c0-.568-.422-1.048-.987-1.106a48.554 48.554 0 00-10.026 0 1.106 1.106 0 00-.987 1.106v7.635m12-6.677v6.677m0 4.5v-4.5m0 0h-12" />
+            </svg>
+          </div>
+          <p class="ml-16 font-medium text-gray-500 text-sm truncate dark:text-neutral-400">Active Drivers</p>
+        </dt>
+        <dd class="flex items-baseline ml-16 pb-6 sm:pb-7">
+          <p class="font-semibold text-2xl text-gray-900 dark:text-white">{{ activeDrivers() }}</p>
+          <p class="flex items-baseline ml-2 font-semibold text-green-600 text-sm">
+            <svg class="flex-shrink-0 self-center h-5 w-5 text-green-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <path fill-rule="evenodd" d="M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z" clip-rule="evenodd" />
+            </svg>
+            <span class="sr-only"> Increased by </span>
+            1
+          </p>
+        </dd>
+      </div>
+
+      <div class="overflow-hidden relative pt-5 px-4 sm:pt-6 sm:px-6 bg-white dark:bg-neutral-800 rounded-lg shadow">
+        <dt>
+          <div class="absolute p-3 bg-blue-500 rounded-md">
+            <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
+            </svg>
+          </div>
+          <p class="ml-16 font-medium text-gray-500 text-sm truncate dark:text-neutral-400">Average Rating</p>
+        </dt>
+        <dd class="flex items-baseline ml-16 pb-6 sm:pb-7">
+          <p class="font-semibold text-2xl text-gray-900 dark:text-white">{{ averageRating() }}</p>
+          <p class="flex items-baseline ml-2 font-semibold text-green-600 text-sm">
+            <svg class="flex-shrink-0 self-center h-5 w-5 text-green-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <path fill-rule="evenodd" d="M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z" clip-rule="evenodd" />
+            </svg>
+            <span class="sr-only"> Increased by </span>
+            0.2
+          </p>
+        </dd>
+      </div>
+    </div>
+
+    <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 Drivers</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 Driver
+          </button>
+        </div>
+        <div class="mt-4">
+          <div class="w-full md:w-96"><SearchFilter placeholder="Search drivers..." @search="handleSearch" /></div>
+        </div>
+      </div>
+
+      <DriversTable :drivers="paginatedDrivers" @view-routes="viewDriverRoutes" @edit="openEditModal" @delete="handleDeleteDriver" />
+
+      <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 Driver 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 Driver</h3>
+            <div class="mt-4">
+              <div class="space-y-4">
+                <div>
+                  <label for="driver-name" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Name</label>
+                  <div class="mt-2">
+                    <input type="text" id="driver-name" x-model="newName" 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="driver-phone" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Phone</label>
+                  <div class="mt-2">
+                    <input type="tel" id="driver-phone" x-model="newPhone" placeholder="Enter phone number" 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="driver-vehicle" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Vehicle Number</label>
+                  <div class="mt-2">
+                    <input type="text" id="driver-vehicle" x-model="newVehicleNumber" placeholder="Enter vehicle number" 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="driver-license" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">License</label>
+                  <div class="mt-2">
+                    <input type="text" id="driver-license" x-model="newLicense" placeholder="Enter license number" 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="driver-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="driver-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="On Delivery">On Delivery</option>
+                      <option value="On Break">On Break</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="addDriver()" 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 Driver</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 Driver 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 Driver</h3>
+            <div class="mt-4">
+              <div class="space-y-4">
+                <div>
+                  <label for="edit-driver-name" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Name</label>
+                  <div class="mt-2">
+                    <input type="text" id="edit-driver-name" x-model="newName" 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-driver-phone" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Phone</label>
+                  <div class="mt-2">
+                    <input type="tel" id="edit-driver-phone" x-model="newPhone" placeholder="Enter phone number" 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-driver-vehicle" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Vehicle Number</label>
+                  <div class="mt-2">
+                    <input type="text" id="edit-driver-vehicle" x-model="newVehicleNumber" placeholder="Enter vehicle number" 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-driver-license" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">License</label>
+                  <div class="mt-2">
+                    <input type="text" id="edit-driver-license" x-model="newLicense" placeholder="Enter license number" 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-driver-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-driver-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="On Delivery">On Delivery</option>
+                      <option value="On Break">On Break</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="saveDriver()" 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 { useDrivers } from '../../../../functions/commerce/shippings/drivers'
+// Shared tab nav config — formerly duplicated in every delivery page's
+// `<script server>` block (stacksjs/stacks#1838).
+import { deliveryTabs as tabs } from './tabs'
+
+interface Driver {
+  id?: number
+  user_id: number
+  name: string
+  phone: string
+  vehicle_number: string
+  license: string
+  status: string | string[]
+}
+
+const { drivers, createDriver, fetchDrivers, updateDriver, deleteDriver } = useDrivers()
+
+const showAddModal = state(false)
+const showEditModal = state(false)
+const editingDriver = state<Driver | null>(null)
+
+const newUserId = state(0)
+const newName = state('')
+const newPhone = state('')
+const newVehicleNumber = state('')
+const newLicense = state('')
+const newStatus = state('Active')
+
+const searchQuery = state('')
+const currentPage = state(1)
+const itemsPerPage = state(5)
+
+function statusOf(driver: Driver): string {
+  if (typeof driver.status === 'string')
+    return driver.status
+  if (Array.isArray(driver.status))
+    return driver.status[0] || 'Active'
+  return 'Active'
+}
+
+const filteredDrivers = derived(() => {
+  const list = (drivers.value as Driver[]) || []
+  const q = searchQuery().toLowerCase()
+  if (!q)
+    return list
+  return list.filter(d =>
+    d.name.toLowerCase().includes(q)
+    || d.phone.toLowerCase().includes(q)
+    || d.vehicle_number.toLowerCase().includes(q)
+    || d.license.toLowerCase().includes(q)
+    || statusOf(d).toLowerCase().includes(q),
+  )
+})
+
+const paginatedDrivers = derived(() => {
+  const start = (currentPage() - 1) * itemsPerPage()
+  return filteredDrivers().slice(start, start + itemsPerPage())
+})
+
+const totalItems = derived(() => filteredDrivers().length)
+const totalDrivers = derived(() => ((drivers.value as Driver[]) || []).length)
+const activeDrivers = derived(() => ((drivers.value as Driver[]) || []).filter((d) => {
+  const s = statusOf(d)
+  return s === 'Active' || s === 'On Delivery'
+}).length)
+const averageRating = derived(() => totalDrivers() > 0 ? '4.7' : '0.0')
+
+function resetForm(): void {
+  newUserId.set(0)
+  newName.set('')
+  newPhone.set('')
+  newVehicleNumber.set('')
+  newLicense.set('')
+  newStatus.set('Active')
+}
+
+function openAddModal(): void {
+  resetForm()
+  showAddModal.set(true)
+}
+
+function closeAddModal(): void {
+  showAddModal.set(false)
+}
+
+function openEditModal(driver: Driver): void {
+  editingDriver.set(driver)
+  newUserId.set(driver.user_id)
+  newName.set(driver.name)
+  newPhone.set(driver.phone)
+  newVehicleNumber.set(driver.vehicle_number)
+  newLicense.set(driver.license)
+  newStatus.set(statusOf(driver))
+  showEditModal.set(true)
+}
+
+function closeEditModal(): void {
+  showEditModal.set(false)
+  editingDriver.set(null)
+}
+
+async function addDriver(): Promise<void> {
+  try {
+    await createDriver({
+      user_id: newUserId(),
+      name: newName(),
+      phone: newPhone(),
+      vehicle_number: newVehicleNumber(),
+      license: newLicense(),
+      status: newStatus(),
+    } as Driver)
+    closeAddModal()
+  }
+  catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('Failed to create driver:', error)
+  }
+}
+
+async function saveDriver(): Promise<void> {
+  const target = editingDriver()
+  if (!target)
+    return
+  try {
+    await updateDriver({
+      ...target,
+      user_id: newUserId(),
+      name: newName(),
+      phone: newPhone(),
+      vehicle_number: newVehicleNumber(),
+      license: newLicense(),
+      status: newStatus(),
+    })
+    closeEditModal()
+  }
+  catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('Failed to update driver:', error)
+  }
+}
+
+function handleSearch(query: string): void {
+  searchQuery.set(query)
+  currentPage.set(1)
+}
+
+async function handleDeleteDriver(driver: Driver): Promise<void> {
+  // eslint-disable-next-line no-alert
+  if (!confirm('Are you sure you want to delete this driver?'))
+    return
+  try {
+    await deleteDriver(driver.id as number)
+  }
+  catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('Failed to delete driver:', error)
+  }
+}
+
+function viewDriverRoutes(driver: Driver): void {
+  // eslint-disable-next-line no-alert
+  alert(`View routes for driver: ${driver.name}`)
+}
+
+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 fetchDrivers()
+})
+</script>
+
+@endsection

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

@@ -0,0 +1,18 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - Commerce Delivery')
+<PageLayout>
+  <PageHeader title="Delivery" />
+  <!-- Default landing inside delivery; the child routes mount via the layout. -->
+  <p class="text-gray-500 dark:text-neutral-400">Redirecting…</p>
+</PageLayout>
+
+<script client>
+// Redirect to shipping methods by default. `navigate` is auto-imported.
+onMount(() => {
+  navigate('/commerce/delivery/shipping-methods')
+})
+</script>
+
+@endsection