@stacksjs/defaults 0.70.229 → 0.70.231

package/resources/components/Dashboard/Commerce/Delivery/DeliveryPagination.stx

@@ -0,0 +1,128 @@
+<script client>
+const currentPage = useReactiveProp('current-page', 1)
+const totalItems = useReactiveProp('total-items', 0)
+const itemsPerPage = useReactiveProp('items-per-page', 10)
+const maxDisplayedPages = useReactiveProp('max-displayed-pages', 5)
+const emit = defineEmits()
+
+const totalPages = derived(() => Math.ceil(totalItems() / Math.max(1, itemsPerPage())))
+const startItem = derived(() => totalItems() === 0 ? 0 : ((currentPage() - 1) * itemsPerPage()) + 1)
+const endItem = derived(() => Math.min(currentPage() * itemsPerPage(), totalItems()))
+const displayedPages = derived<(number | string)[]>(() => {
+  const count = totalPages()
+  const limit = Math.max(3, maxDisplayedPages())
+  if (count <= limit)
+    return Array.from({ length: count }, (_, index) => index + 1)
+
+  const pages: (number | string)[] = [1]
+  const half = Math.floor(limit / 2)
+  if (currentPage() - half > 2)
+    pages.push('...')
+
+  const start = Math.max(2, currentPage() - half)
+  const end = Math.min(count - 1, currentPage() + half)
+  for (let page = start; page <= end; page++)
+    pages.push(page)
+
+  if (currentPage() + half < count - 1)
+    pages.push('...')
+  pages.push(count)
+  return pages
+})
+
+function isCurrent(page: number | string): boolean {
+  return typeof page === 'number' && page === currentPage()
+}
+
+function emitPrevious(): void {
+  emit('select', Math.max(1, currentPage() - 1))
+  emit('prev')
+}
+
+function emitNext(): void {
+  emit('select', Math.min(totalPages(), currentPage() + 1))
+  emit('next')
+}
+
+function emitPage(page: number | string): void {
+  if (typeof page === 'number') {
+    emit('select', page)
+    emit('page', page)
+  }
+}
+</script>
+
+<div class="flex items-center justify-between">
+  <div class="flex sm:hidden flex-1 justify-between">
+    <Button
+      variant="secondary"
+      @click="emitPrevious()"
+      :disabled="currentPage() <= 1"
+    >
+      Previous
+    </Button>
+    <Button
+      variant="secondary"
+      @click="emitNext()"
+      :disabled="currentPage() >= totalPages()"
+    >
+      Next
+    </Button>
+  </div>
+
+  <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
+    <p class="text-gray-700 text-sm dark:text-neutral-300">
+      Showing
+      <span class="font-medium tabular-nums">{{ startItem() }}</span>
+      to
+      <span class="font-medium tabular-nums">{{ endItem() }}</span>
+      of
+      <span class="font-medium tabular-nums">{{ totalItems() }}</span>
+      results
+    </p>
+
+    <nav class="inline-flex -space-x-px rounded-md shadow-sm isolate" aria-label="Pagination">
+      <Button
+        variant="secondary"
+        iconOnly
+        @click="emitPrevious()"
+        :disabled="currentPage() <= 1"
+        ariaLabel="Previous page"
+      >
+        <span class="h-5 w-5 i-hugeicons-arrow-left-01"></span>
+      </Button>
+
+      <template :for="page in displayedPages">
+        <Button
+          :if="page !== '...' && isCurrent(page)"
+          @click="emitPage(page)"
+        >
+          <span aria-current="page">{{ page }}</span>
+        </Button>
+        <Button
+          :if="page !== '...' && !isCurrent(page)"
+          variant="secondary"
+          @click="emitPage(page)"
+        >
+          {{ page }}
+        </Button>
+        <span
+          :if="page === '...'"
+          class="inline-flex relative items-center px-4 py-2 font-semibold text-gray-500 text-sm dark:text-neutral-400 bg-white dark:bg-neutral-800 ring-1 ring-gray-300 ring-inset dark:ring-neutral-700"
+        >
+          ...
+        </span>
+      </template>
+
+      <Button
+        variant="secondary"
+        iconOnly
+        @click="emitNext()"
+        :disabled="currentPage() >= totalPages()"
+        ariaLabel="Next page"
+      >
+        <span class="h-5 w-5 i-hugeicons-arrow-right-01"></span>
+      </Button>
+    </nav>
+  </div>
+</div>

package/resources/components/Dashboard/Commerce/Delivery/DeliveryRouteDeleteDialog.stx

@@ -0,0 +1,28 @@
+<script client>
+interface DeliveryRouteRecord {
+  id: number
+  driver: string
+}
+
+const open = useReactiveProp('open', false)
+const record = useReactiveProp('record', null as DeliveryRouteRecord | null)
+const busy = useReactiveProp('busy', false)
+const error = useReactiveProp('error', '')
+const emit = defineEmits()
+</script>
+
+<div :if="open() && record()" class="flex fixed inset-0 z-50 items-center justify-center p-4 dashboard-modal-layer">
+  <button type="button" aria-label="Close route delete confirmation" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
+  <section role="alertdialog" aria-modal="true" aria-labelledby="delivery-route-delete-title" class="relative max-w-md w-full bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl">
+    <div class="p-6">
+      <div class="flex items-center justify-center h-10 w-10 text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-950/40 rounded-full"><span class="h-5 w-5 i-hugeicons-delete-02"></span></div>
+      <h2 id="delivery-route-delete-title" class="mt-4 font-semibold text-gray-900 text-lg dark:text-white">Delete delivery route?</h2>
+      <p class="mt-2 text-gray-500 text-sm dark:text-neutral-400">Delete route #{{ record()?.id }} for {{ record()?.driver }} permanently.</p>
+      <div :if="error()" class="mt-4 p-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">{{ error() }}</div>
+    </div>
+    <footer class="flex gap-2 justify-end px-6 py-4 bg-gray-50 dark:bg-neutral-900/50 border-gray-200 border-t dark:border-neutral-700">
+      <Button :disabled="busy()" variant="secondary" @click="emit('close')">Cancel</Button>
+      <Button :loading="busy()" variant="danger" @click="emit('confirm')">Delete route</Button>
+    </footer>
+  </section>
+</div>

package/resources/components/Dashboard/Commerce/Delivery/DeliveryRouteDialog.stx

@@ -0,0 +1,153 @@
+<script client>
+interface DriverOption {
+  id: number
+  name: string
+  vehicle_number: string
+  status: 'active' | 'on_delivery' | 'on_break'
+}
+
+interface DeliveryRouteRecord {
+  id: number
+  driver: string
+  driver_id?: number | null
+  vehicle: string
+  stops: number
+  delivery_time: number
+  total_distance: number
+  last_active: string | number
+}
+
+const open = useReactiveProp('open', false)
+const mode = useReactiveProp('mode', 'create')
+const record = useReactiveProp('record', null as DeliveryRouteRecord | null)
+const drivers = useReactiveProp('drivers', [] as DriverOption[])
+const busy = useReactiveProp('busy', false)
+const error = useReactiveProp('error', '')
+const emit = defineEmits()
+const driverId = state('')
+const stops = state('0')
+const deliveryTime = state('0')
+const totalDistance = state('0')
+const lastActive = state('')
+let hydrationKey = ''
+
+function currentDateTimeLocal(): string {
+  const now = new Date()
+  return new Date(now.getTime() - now.getTimezoneOffset() * 60_000).toISOString().slice(0, 16)
+}
+
+function toDateTimeLocal(value?: string | number): string {
+  if (value === undefined || value === null || value === '')
+    return currentDateTimeLocal()
+
+  const numeric = typeof value === 'number' || /^\d+$/.test(String(value))
+  const date = numeric
+    ? new Date(Number(value))
+    : new Date(String(value).replace(' ', 'T'))
+  if (Number.isNaN(date.getTime()))
+    return currentDateTimeLocal()
+
+  return new Date(date.getTime() - date.getTimezoneOffset() * 60_000).toISOString().slice(0, 16)
+}
+
+function toUnixTimestamp(value: string): number {
+  return new Date(value).getTime()
+}
+
+effect(() => {
+  if (!open()) {
+    hydrationKey = ''
+    return
+  }
+  const current = record()
+  const nextKey = `${mode()}:${current?.id || 'new'}`
+  if (hydrationKey === nextKey)
+    return
+  hydrationKey = nextKey
+  driverId.set(current?.driver_id ? String(current.driver_id) : '')
+  stops.set(String(current?.stops ?? 0))
+  deliveryTime.set(String(current?.delivery_time ?? 0))
+  totalDistance.set(String(current?.total_distance ?? 0))
+  lastActive.set(toDateTimeLocal(current?.last_active))
+})
+
+function selectedDriver(): DriverOption | undefined {
+  const id = Number(driverId())
+  return drivers().find(driver => driver.id === id)
+}
+
+function submit(): void {
+  const driver = selectedDriver()
+  const parsedStops = Number(stops())
+  const parsedDeliveryTime = Number(deliveryTime())
+  const parsedDistance = Number(totalDistance())
+
+  if (!driver) {
+    emit('invalid', 'Select a persisted driver.')
+    return
+  }
+  if (!Number.isInteger(parsedStops) || parsedStops < 0) {
+    emit('invalid', 'Stops must be a whole number of zero or more.')
+    return
+  }
+  if (!Number.isInteger(parsedDeliveryTime) || parsedDeliveryTime < 0) {
+    emit('invalid', 'Delivery time must be a whole number of minutes.')
+    return
+  }
+  if (!Number.isInteger(parsedDistance) || parsedDistance < 0) {
+    emit('invalid', 'Distance must be a whole number of miles.')
+    return
+  }
+  if (!lastActive()) {
+    emit('invalid', 'Last active time is required.')
+    return
+  }
+
+  emit('submit', {
+    driver: driver.name,
+    driverId: driver.id,
+    vehicle: driver.vehicle_number,
+    stops: parsedStops,
+    deliveryTime: parsedDeliveryTime,
+    totalDistance: parsedDistance,
+    lastActive: toUnixTimestamp(lastActive()),
+  })
+}
+</script>
+
+<div :if="open()" class="flex fixed inset-0 z-50 items-center justify-center p-4 dashboard-modal-layer">
+  <button type="button" aria-label="Close delivery route dialog" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
+  <section role="dialog" aria-modal="true" aria-labelledby="delivery-route-dialog-title" class="overflow-y-auto relative max-h-[92dvh] max-w-xl w-full bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl">
+    <form @submit.prevent="submit()">
+      <div class="p-6">
+        <h2 id="delivery-route-dialog-title" class="font-semibold text-gray-900 text-lg dark:text-white">{{ mode() === 'edit' ? 'Edit delivery route' : 'Add delivery route' }}</h2>
+        <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Assign a persisted driver and record the operational route metrics.</p>
+        <div :if="error()" class="mt-4 p-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">{{ error() }}</div>
+
+        <div class="mt-5 space-y-4">
+          <label class="block">
+            <span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Driver</span>
+            <select x-model="driverId" required class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700">
+              <option value="">Select a driver</option>
+              <template :for="driver in drivers()" :key="driver.id"><option :value="driver.id">{{ driver.name }} - {{ driver.vehicle_number }}</option></template>
+            </select>
+          </label>
+          <div :if="selectedDriver()" class="flex gap-3 items-center p-3 text-gray-600 text-sm dark:text-neutral-300 bg-gray-50 dark:bg-neutral-900/60 border border-gray-200 rounded-lg dark:border-neutral-700">
+            <span class="h-5 w-5 text-blue-600 i-hugeicons-delivery-truck-02"></span>
+            <span><strong class="text-gray-900 dark:text-white">{{ selectedDriver()?.vehicle_number }}</strong> will be stored as the route vehicle snapshot.</span>
+          </div>
+          <div class="grid gap-4 grid-cols-1 sm:grid-cols-3">
+            <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Stops</span><input x-model="stops" type="number" required min="0" step="1" inputmode="numeric" class="mt-1 px-3 py-2 w-full tabular-nums text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" /></label>
+            <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Time, minutes</span><input x-model="deliveryTime" type="number" required min="0" step="1" inputmode="numeric" class="mt-1 px-3 py-2 w-full tabular-nums text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" /></label>
+            <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Distance, miles</span><input x-model="totalDistance" type="number" required min="0" step="1" inputmode="numeric" class="mt-1 px-3 py-2 w-full tabular-nums text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" /></label>
+          </div>
+          <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Last active</span><input x-model="lastActive" type="datetime-local" required class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" /></label>
+        </div>
+      </div>
+      <footer class="flex gap-2 justify-end px-6 py-4 bg-gray-50 dark:bg-neutral-900/50 border-gray-200 border-t dark:border-neutral-700">
+        <Button :disabled="busy()" variant="secondary" @click="emit('close')">Cancel</Button>
+        <Button type="submit" :loading="busy()">{{ mode() === 'edit' ? 'Save changes' : 'Add route' }}</Button>
+      </footer>
+    </form>
+  </section>
+</div>

package/resources/components/Dashboard/Commerce/Delivery/DeliveryRoutesDashboard.stx

@@ -0,0 +1,272 @@
+<script client>
+import { dashboardApi } from '../../../../../functions/dashboard-api'
+import { pushToast } from '../../../../../functions/toasts'
+
+interface DriverRecord {
+  id: number
+  name: string
+  vehicle_number: string
+  status: 'active' | 'on_delivery' | 'on_break'
+}
+
+interface DeliveryRouteRecord {
+  id: number
+  driver: string
+  driver_id?: number | null
+  driver_record?: DriverRecord
+  vehicle: string
+  stops: number
+  delivery_time: number
+  total_distance: number
+  last_active: string | number
+}
+
+interface DeliveryRoutePayload {
+  driver: string
+  driverId: number
+  vehicle: string
+  stops: number
+  deliveryTime: number
+  totalDistance: number
+  lastActive: number
+}
+
+const records = state<DeliveryRouteRecord[]>([])
+const drivers = state<DriverRecord[]>([])
+const loading = state(true)
+const loadError = state('')
+const search = state('')
+const page = state(1)
+const perPage = state(10)
+const editorOpen = state(false)
+const editorMode = state<'create' | 'edit'>('create')
+const editing = state<DeliveryRouteRecord | null>(null)
+const saving = state(false)
+const editorError = state('')
+const deleting = state<DeliveryRouteRecord | null>(null)
+const deleteBusy = state(false)
+const deleteError = state('')
+
+function driverFor(id?: number | null): DriverRecord | undefined {
+  return id ? drivers().find(driver => driver.id === id) : undefined
+}
+
+function withDriver(record: DeliveryRouteRecord): DeliveryRouteRecord {
+  return {
+    ...record,
+    driver_record: driverFor(record.driver_id) || record.driver_record,
+  }
+}
+
+function routeTime(value: string | number): number {
+  if (typeof value === 'number' || /^\d+$/.test(String(value)))
+    return Number(value)
+  return new Date(String(value).replace(' ', 'T')).getTime()
+}
+
+function filteredRecords(): DeliveryRouteRecord[] {
+  const query = search().trim().toLowerCase()
+  if (!query)
+    return records()
+  return records().filter(record => [
+    record.id,
+    record.driver,
+    record.driver_record?.name,
+    record.vehicle,
+    record.stops,
+    record.delivery_time,
+    record.total_distance,
+  ].some(value => String(value || '').toLowerCase().includes(query)))
+}
+
+function paginatedRecords(): DeliveryRouteRecord[] {
+  const start = (page() - 1) * perPage()
+  return filteredRecords().slice(start, start + perPage())
+}
+
+function metricCards(): Array<{ label: string, value: string, detail: string }> {
+  const totalStops = records().reduce((sum, record) => sum + record.stops, 0)
+  const totalDistance = records().reduce((sum, record) => sum + record.total_distance, 0)
+  const activeCutoff = Date.now() - (24 * 60 * 60 * 1000)
+  const activeRoutes = records().filter(record => routeTime(record.last_active) >= activeCutoff).length
+  return [
+    { label: 'Routes', value: records().length.toLocaleString(), detail: `${records().filter(record => record.driver_id).length} linked to drivers` },
+    { label: 'Stops', value: totalStops.toLocaleString(), detail: 'Across the current route plan' },
+    { label: 'Distance', value: `${totalDistance.toLocaleString()} mi`, detail: 'Planned route distance' },
+    { label: 'Active in 24h', value: activeRoutes.toLocaleString(), detail: 'Based on persisted activity time' },
+  ]
+}
+
+async function loadRoutes(): Promise<void> {
+  loading.set(true)
+  loadError.set('')
+  try {
+    const [routeData, driverData] = await Promise.all([
+      dashboardApi<DeliveryRouteRecord[]>('/api/dashboard/commerce/delivery-routes'),
+      dashboardApi<DriverRecord[]>('/api/dashboard/commerce/drivers'),
+    ])
+    if (!Array.isArray(routeData) || !Array.isArray(driverData))
+      throw new TypeError('Delivery route resources were not returned in the expected shape.')
+    drivers.set(driverData)
+    records.set(routeData.map(withDriver))
+    const lastPage = Math.max(1, Math.ceil(filteredRecords().length / perPage()))
+    if (page() > lastPage)
+      page.set(lastPage)
+  }
+  catch (error) {
+    loadError.set(error instanceof Error ? error.message : String(error))
+    pushToast('error', 'Could not load delivery routes', { detail: loadError() })
+  }
+  finally {
+    loading.set(false)
+  }
+}
+
+function handleSearch(value: string): void {
+  search.set(value)
+  page.set(1)
+}
+
+function openCreate(): void {
+  editing.set(null)
+  editorMode.set('create')
+  editorError.set('')
+  editorOpen.set(true)
+}
+
+function openEdit(record: DeliveryRouteRecord): void {
+  editing.set(record)
+  editorMode.set('edit')
+  editorError.set('')
+  editorOpen.set(true)
+}
+
+function closeEditor(): void {
+  if (saving())
+    return
+  editorOpen.set(false)
+  editing.set(null)
+  editorError.set('')
+}
+
+function setEditorError(message: string): void {
+  editorError.set(message)
+}
+
+async function saveRoute(payload: DeliveryRoutePayload): Promise<void> {
+  saving.set(true)
+  editorError.set('')
+  try {
+    const current = editing()
+    const updated = await dashboardApi<DeliveryRouteRecord>(
+      current
+        ? `/api/dashboard/commerce/delivery-routes/${current.id}`
+        : '/api/dashboard/commerce/delivery-routes',
+      {
+        method: current ? 'PATCH' : 'POST',
+        body: payload,
+      },
+    )
+    const hydrated = withDriver(updated)
+    if (current) {
+      records.set(records().map(record => record.id === current.id ? hydrated : record))
+    }
+    else {
+      const nextRecords = [...records(), hydrated]
+      records.set(nextRecords)
+      page.set(Math.max(1, Math.ceil(nextRecords.length / perPage())))
+    }
+    editorOpen.set(false)
+    editing.set(null)
+    pushToast('success', current ? 'Delivery route updated' : 'Delivery route added', { detail: `Route #${hydrated.id}` })
+  }
+  catch (error) {
+    editorError.set(error instanceof Error ? error.message : String(error))
+  }
+  finally {
+    saving.set(false)
+  }
+}
+
+function requestDelete(record: DeliveryRouteRecord): void {
+  deleting.set(record)
+  deleteError.set('')
+}
+
+function closeDelete(): void {
+  if (deleteBusy())
+    return
+  deleting.set(null)
+  deleteError.set('')
+}
+
+async function confirmDelete(): Promise<void> {
+  const current = deleting()
+  if (!current)
+    return
+  deleteBusy.set(true)
+  deleteError.set('')
+  try {
+    await dashboardApi(`/api/dashboard/commerce/delivery-routes/${current.id}`, {
+      method: 'DELETE',
+    })
+    records.set(records().filter(record => record.id !== current.id))
+    deleting.set(null)
+    const lastPage = Math.max(1, Math.ceil(filteredRecords().length / perPage()))
+    if (page() > lastPage)
+      page.set(lastPage)
+    pushToast('success', 'Delivery route deleted', { detail: `Route #${current.id}` })
+  }
+  catch (error) {
+    deleteError.set(error instanceof Error ? error.message : String(error))
+  }
+  finally {
+    deleteBusy.set(false)
+  }
+}
+
+function goToPage(value: number): void {
+  page.set(value)
+}
+
+onMount(() => {
+  void loadRoutes()
+})
+</script>
+
+<div class="space-y-6">
+  <TabNavigation model-value="routes" />
+
+  <header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+    <div>
+      <h1 class="font-bold text-2xl text-gray-900 dark:text-white">Delivery routes</h1>
+      <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Assign persisted drivers and track route workload, distance, and activity.</p>
+    </div>
+    <div class="flex gap-2">
+      <Button :loading="loading()" variant="secondary" @click="loadRoutes()"><span :if="!loading()" aria-hidden="true" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button>
+      <Button :disabled="loading() || drivers().length === 0" @click="openCreate()"><span aria-hidden="true" class="h-4 w-4 i-hugeicons-add-01"></span>Add route</Button>
+    </div>
+  </header>
+
+  <div :if="loadError()" class="flex gap-4 items-center justify-between p-4 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900"><span>{{ loadError() }}</span><Button variant="secondary" size="sm" @click="loadRoutes()">Retry</Button></div>
+  <div :if="!loading() && drivers().length === 0" class="p-4 text-amber-800 text-sm dark:text-amber-200 bg-amber-50 dark:bg-amber-950/30 border border-amber-200 rounded-lg dark:border-amber-900">Add a driver before creating a delivery route.</div>
+
+  <section aria-label="Delivery route metrics" class="grid gap-3 grid-cols-1 sm:grid-cols-2 xl:grid-cols-4">
+    <template :for="item in metricCards()" :key="item.label"><article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">{{ item.label }}</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ item.value }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">{{ item.detail }}</p></article></template>
+  </section>
+
+  <section class="overflow-hidden bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700">
+    <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between px-4 py-4 border-b border-gray-200 dark:border-neutral-700">
+      <div><h2 class="font-semibold text-gray-900 dark:text-white">Route plan</h2><p class="mt-0.5 text-gray-500 text-xs dark:text-neutral-400">{{ filteredRecords().length }} matching records</p></div>
+      <SearchFilter placeholder="Search delivery routes" class="w-full sm:w-80" @search="handleSearch" />
+    </div>
+    <div :if="loading()" class="flex items-center justify-center py-24 text-gray-500 text-sm dark:text-neutral-400"><span class="mr-2 h-4 w-4 animate-spin i-hugeicons-loading-03"></span>Loading delivery routes</div>
+    <DeliveryRoutesTable :if="!loading()" :routes="paginatedRecords()" @edit="openEdit" @delete="requestDelete" />
+    <div :if="!loading()" class="px-4 py-3 bg-gray-50 dark:bg-neutral-900/50 border-gray-200 border-t dark:border-neutral-700">
+      <DeliveryPagination :current-page="page()" :total-items="filteredRecords().length" :items-per-page="perPage()" @select="goToPage" />
+    </div>
+  </section>
+</div>
+
+<DeliveryRouteDialog :open="editorOpen()" :mode="editorMode()" :record="editing()" :drivers="drivers()" :busy="saving()" :error="editorError()" @submit="saveRoute" @invalid="setEditorError" @close="closeEditor()" />
+<DeliveryRouteDeleteDialog :open="Boolean(deleting())" :record="deleting()" :busy="deleteBusy()" :error="deleteError()" @confirm="confirmDelete()" @close="closeDelete()" />