@stacksjs/defaults 0.70.229 → 0.70.231

package/resources/components/Dashboard/Commerce/CommerceVariantsDashboard.stx

@@ -0,0 +1,245 @@
+<script client>
+import type {
+  ProductVariantOption,
+  ProductVariantRecord,
+  ProductVariantSummary,
+} from '../../../../app/Actions/Dashboard/Commerce/product-variant-records'
+import { DashboardApiError, dashboardApi } from '../../../../functions/dashboard-api'
+import { pushToast } from '../../../../functions/toasts'
+
+interface ProductVariantIndexResponse {
+  records: ProductVariantRecord[]
+  products: ProductVariantOption[]
+  summary: ProductVariantSummary
+}
+
+interface ProductVariantWritePayload {
+  variant: string
+  type: string
+  description: string
+  options: string[]
+  status: 'active' | 'inactive' | 'draft'
+  productId: number | null
+}
+
+const emptySummary: ProductVariantSummary = { total: 0, active: 0, draft: 0, linkedProducts: 0 }
+const records = state<ProductVariantRecord[]>([])
+const products = state<ProductVariantOption[]>([])
+const summary = state<ProductVariantSummary>({ ...emptySummary })
+const search = state('')
+const statusFilter = state('all')
+const typeFilter = state('all')
+const productFilter = state('all')
+const sort = state('variant')
+const loading = state(true)
+const loadError = state('')
+const dialogOpen = state(false)
+const dialogMode = state<'add' | 'edit'>('add')
+const editingRecord = state<ProductVariantRecord | null>(null)
+const deletingRecord = state<ProductVariantRecord | null>(null)
+const saving = state(false)
+const deleting = state(false)
+const validationErrors = state<Record<string, string>>({})
+
+function variantTypes(): string[] {
+  return [...new Set(records().map(record => record.type).filter(Boolean))].sort()
+}
+
+function visibleRecords(): ProductVariantRecord[] {
+  const query = search().trim().toLowerCase()
+  const status = statusFilter()
+  const type = typeFilter()
+  const product = productFilter()
+  return [...records()]
+    .filter((record) => {
+      if (status !== 'all' && record.status !== status)
+        return false
+      if (type !== 'all' && record.type !== type)
+        return false
+      if (product !== 'all' && record.productId !== product)
+        return false
+      return !query || [
+        record.variant,
+        record.type,
+        record.description,
+        record.productName,
+        ...record.options,
+      ].some(value => value.toLowerCase().includes(query))
+    })
+    .sort((left, right) => {
+      if (sort() === 'options')
+        return right.options.length - left.options.length || left.variant.localeCompare(right.variant)
+      if (sort() === 'product')
+        return left.productName.localeCompare(right.productName) || left.variant.localeCompare(right.variant)
+      if (sort() === 'newest')
+        return Number(right.id) - Number(left.id)
+      return left.variant.localeCompare(right.variant)
+    })
+}
+
+function metricCards(): Array<{ label: string, value: string }> {
+  return [
+    { label: 'Product variants', value: String(summary().total) },
+    { label: 'Active', value: String(summary().active) },
+    { label: 'Draft', value: String(summary().draft) },
+    { label: 'Linked products', value: String(summary().linkedProducts) },
+  ]
+}
+
+async function loadVariants(): Promise<void> {
+  loading.set(true)
+  loadError.set('')
+  try {
+    const data = await dashboardApi<ProductVariantIndexResponse>('/api/dashboard/commerce/variants')
+    records.set(Array.isArray(data.records) ? data.records : [])
+    products.set(Array.isArray(data.products) ? data.products : [])
+    summary.set(data.summary ?? { ...emptySummary })
+  }
+  catch (error) {
+    loadError.set('Product variant records could not be loaded.')
+    pushToast('error', 'Could not load product variants', {
+      detail: error instanceof Error ? error.message : String(error),
+    })
+  }
+  finally {
+    loading.set(false)
+  }
+}
+
+function openAdd(): void {
+  dialogMode.set('add')
+  editingRecord.set(null)
+  validationErrors.set({})
+  dialogOpen.set(true)
+}
+
+function openEdit(record: ProductVariantRecord): void {
+  dialogMode.set('edit')
+  editingRecord.set(record)
+  validationErrors.set({})
+  dialogOpen.set(true)
+}
+
+function closeDialog(): void {
+  if (!saving()) {
+    dialogOpen.set(false)
+    editingRecord.set(null)
+    validationErrors.set({})
+  }
+}
+
+async function saveVariant(payload: ProductVariantWritePayload): Promise<void> {
+  const current = editingRecord()
+  const editing = dialogMode() === 'edit' && current !== null
+  saving.set(true)
+  validationErrors.set({})
+  try {
+    await dashboardApi(editing ? `/api/dashboard/commerce/variants/${current.id}` : '/api/dashboard/commerce/variants', {
+      method: editing ? 'PATCH' : 'POST',
+      body: {
+        variant: payload.variant,
+        type: payload.type,
+        description: payload.description,
+        options: JSON.stringify(payload.options),
+        status: payload.status,
+        productId: payload.productId,
+      },
+    })
+    dialogOpen.set(false)
+    editingRecord.set(null)
+    pushToast('success', editing ? 'Product variant updated' : 'Product variant added')
+    await loadVariants()
+  }
+  catch (error) {
+    if (error instanceof DashboardApiError)
+      validationErrors.set(error.fields ?? {})
+    pushToast('error', 'Could not save product variant', {
+      detail: error instanceof Error ? error.message : String(error),
+    })
+  }
+  finally {
+    saving.set(false)
+  }
+}
+
+function openDelete(record: ProductVariantRecord): void {
+  deletingRecord.set(record)
+}
+
+function closeDelete(): void {
+  if (!deleting())
+    deletingRecord.set(null)
+}
+
+async function deleteVariant(): Promise<void> {
+  const current = deletingRecord()
+  if (!current)
+    return
+  deleting.set(true)
+  try {
+    await dashboardApi(`/api/dashboard/commerce/variants/${current.id}`, { method: 'DELETE' })
+    deletingRecord.set(null)
+    pushToast('success', 'Product variant deleted')
+    await loadVariants()
+  }
+  catch (error) {
+    pushToast('error', 'Could not delete product variant', {
+      detail: error instanceof Error ? error.message : String(error),
+    })
+  }
+  finally {
+    deleting.set(false)
+  }
+}
+
+onMount(() => {
+  void loadVariants()
+})
+</script>
+
+<div class="space-y-6">
+  <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">Product variants</h1>
+      <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Manage native ProductVariant records, option sets, and product relationships.</p>
+    </div>
+    <div class="flex gap-2">
+      <Button variant="secondary" :loading="loading()" @click="loadVariants"><span :if="!loading()" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button>
+      <Button @click="openAdd()"><span class="h-4 w-4 i-hugeicons-add-01"></span>Add variant</Button>
+    </div>
+  </header>
+
+  <div :if="loadError()" class="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">{{ loadError() }}</div>
+
+  <section aria-label="Product variant metrics" class="grid gap-3 grid-cols-2 lg: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>
+      </article>
+    </template>
+  </section>
+
+  <section class="space-y-3">
+    <div class="grid gap-3 grid-cols-1 sm:grid-cols-2 xl:grid-cols-5">
+      <label class="relative sm:col-span-2">
+        <span class="sr-only">Search product variants</span>
+        <span class="flex absolute inset-y-0 left-0 items-center pl-3 text-gray-400 pointer-events-none"><span class="h-4 w-4 i-hugeicons-search-01"></span></span>
+        <input x-model="search" type="search" placeholder="Search product variants" class="pl-9 pr-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-700" />
+      </label>
+      <label><span class="sr-only">Variant status</span><select x-model="statusFilter" class="px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-700"><option value="all">All statuses</option><option value="active">Active</option><option value="inactive">Inactive</option><option value="draft">Draft</option></select></label>
+      <label><span class="sr-only">Variant type</span><select x-model="typeFilter" class="px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-700"><option value="all">All types</option><template :for="type in variantTypes()" :key="type"><option :value="type">{{ type }}</option></template></select></label>
+      <label><span class="sr-only">Variant product</span><select x-model="productFilter" class="px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-700"><option value="all">All products</option><template :for="product in products()" :key="product.id"><option :value="product.id">{{ product.name }}</option></template></select></label>
+    </div>
+
+    <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+      <p class="text-gray-500 text-sm dark:text-neutral-400">{{ visibleRecords().length }} matching product variants</p>
+      <label class="flex gap-2 items-center text-gray-500 text-sm dark:text-neutral-400">Sort<select x-model="sort" class="px-3 py-1.5 text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-700"><option value="variant">Name</option><option value="options">Most options</option><option value="product">Product</option><option value="newest">Newest</option></select></label>
+    </div>
+
+    <CommerceVariantsTable :records="visibleRecords()" :loading="loading()" @edit="openEdit" @delete="openDelete" />
+  </section>
+</div>
+
+<CommerceVariantDialog :open="dialogOpen()" :mode="dialogMode()" :record="editingRecord()" :products="products()" :types="variantTypes()" :busy="saving()" :errors="validationErrors()" @submit="saveVariant" @close="closeDialog()" />
+<CommerceVariantDeleteDialog :open="Boolean(deletingRecord())" :record="deletingRecord()" :busy="deleting()" @confirm="deleteVariant()" @close="closeDelete()" />

package/resources/components/Dashboard/Commerce/CommerceVariantsTable.stx

@@ -0,0 +1,34 @@
+<script client>
+import type { ProductVariantRecord } from '../../../../app/Actions/Dashboard/Commerce/product-variant-records'
+
+const records = useReactiveProp('records', [] as ProductVariantRecord[])
+const loading = useReactiveProp('loading', false)
+const emit = defineEmits()
+
+function formatDate(value: string): string {
+  const date = new Date(value)
+  return !value || Number.isNaN(date.getTime()) ? 'Unknown' : new Intl.DateTimeFormat(undefined, { dateStyle: 'medium' }).format(date)
+}
+</script>
+
+<div class="overflow-hidden bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
+  <div :if="loading() && records().length === 0" class="flex items-center justify-center py-16 text-gray-500 text-sm dark:text-neutral-400"><span class="mr-2 h-5 w-5 animate-spin i-hugeicons-loading-03"></span>Loading product variants</div>
+  <div :else-if="records().length === 0" class="px-6 py-16 text-center"><span class="inline-block h-8 w-8 text-gray-400 i-hugeicons-layer"></span><p class="mt-3 font-medium text-gray-900 text-sm dark:text-white">No product variants found</p><p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Adjust the filters or add a ProductVariant record.</p></div>
+  <div :else class="overflow-x-auto">
+    <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">
+      <thead class="bg-gray-50 dark:bg-neutral-900/50"><tr><th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Variant</th><th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Product</th><th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Options</th><th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Status</th><th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Created</th><th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-right text-xs dark:text-neutral-300"><span class="sr-only">Actions</span></th></tr></thead>
+      <tbody class="divide-gray-200 divide-y dark:divide-neutral-700">
+        <template :for="record in records()" :key="record.id">
+          <tr class="align-top">
+            <td class="px-4 py-4"><p class="font-medium text-gray-900 text-sm dark:text-white">{{ record.variant }}</p><p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ record.type }}</p><p class="mt-2 max-w-sm text-gray-500 text-xs dark:text-neutral-400">{{ record.description }}</p></td>
+            <td class="px-4 py-4 text-gray-600 text-sm dark:text-neutral-300">{{ record.productName || 'Unassigned' }}</td>
+            <td class="px-4 py-4 max-w-sm"><div class="flex flex-wrap gap-1"><template :for="option in record.options.slice(0, 4)" :key="option"><span class="px-2 py-0.5 text-blue-700 text-xs dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40 rounded-full">{{ option }}</span></template><span :if="record.options.length > 4" class="px-2 py-0.5 text-gray-600 text-xs dark:text-neutral-300 bg-gray-100 dark:bg-neutral-700 rounded-full">+{{ record.options.length - 4 }}</span><span :if="record.options.length === 0" class="text-gray-400 text-xs">No options</span></div></td>
+            <td class="px-4 py-4"><span :class="'inline-flex px-2 py-1 font-medium text-xs rounded-full ' + (record.status === 'active' ? 'text-emerald-700 dark:text-emerald-300 bg-emerald-50 dark:bg-emerald-950/40' : record.status === 'draft' ? 'text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-950/40' : 'text-gray-600 dark:text-neutral-300 bg-gray-100 dark:bg-neutral-700')">{{ record.status }}</span></td>
+            <td class="px-4 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">{{ formatDate(record.createdAt) }}</td>
+            <td class="px-4 py-4"><div class="flex gap-1 justify-end"><Button variant="ghost" size="sm" iconOnly :ariaLabel="'Edit ' + record.variant" @click="emit('edit', record)"><span class="block h-4 w-4 text-blue-500 i-hugeicons-edit-01"></span></Button><Button variant="ghost" size="sm" iconOnly :ariaLabel="'Delete ' + record.variant" @click="emit('delete', record)"><span class="block h-4 w-4 text-red-500 i-hugeicons-delete-02"></span></Button></div></td>
+          </tr>
+        </template>
+      </tbody>
+    </table>
+  </div>
+</div>

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

@@ -0,0 +1,330 @@
+<script client>
+import { dashboardApi } from '../../../../../functions/dashboard-api'
+import { pushToast } from '../../../../../functions/toasts'
+
+interface DeliveryStat {
+  label: string
+  value: string
+  detail: string
+}
+
+interface DeliveryRoute {
+  id: number
+  driver: string
+  vehicle: string
+  stops: number
+  duration: string
+  distance: string
+  lastActive: number
+}
+
+interface ShippingMethod {
+  id: number
+  name: string
+  status: string
+  baseRate: string
+  freeShipping: string
+}
+
+interface ShippingZone {
+  id: number
+  name: string
+  status: string
+  countries: number
+  regions: number
+}
+
+interface DriverSummary {
+  total: number
+  active: number
+  onDelivery: number
+  onBreak: number
+}
+
+interface DeliveryOverviewResponse {
+  stats: DeliveryStat[]
+  routes: DeliveryRoute[]
+  methods: ShippingMethod[]
+  zones: ShippingZone[]
+  drivers: DriverSummary
+}
+
+const stats = state<DeliveryStat[]>([])
+const routes = state<DeliveryRoute[]>([])
+const methods = state<ShippingMethod[]>([])
+const zones = state<ShippingZone[]>([])
+const drivers = state<DriverSummary>({
+  total: 0,
+  active: 0,
+  onDelivery: 0,
+  onBreak: 0,
+})
+const loading = state(true)
+const loadError = state('')
+
+function statIcon(label: string): string {
+  const icons: Record<string, string> = {
+    'Active Routes': 'i-hugeicons-route-02',
+    'Drivers on Delivery': 'i-hugeicons-delivery-truck-02',
+    'Average Route': 'i-hugeicons-clock-01',
+    'Active Zones': 'i-hugeicons-maps-global-02',
+  }
+  return icons[label] || 'i-hugeicons-chart'
+}
+
+function statusClass(status: string): string {
+  if (status === 'active')
+    return 'bg-emerald-50 text-emerald-700 ring-emerald-600/20 dark:bg-emerald-400/10 dark:text-emerald-300 dark:ring-emerald-400/20'
+  if (status === 'draft')
+    return 'bg-amber-50 text-amber-700 ring-amber-600/20 dark:bg-amber-400/10 dark:text-amber-300 dark:ring-amber-400/20'
+  return 'bg-stone-100 text-stone-600 ring-stone-500/20 dark:bg-white/5 dark:text-neutral-300 dark:ring-white/10'
+}
+
+function formatStatus(status: string): string {
+  return status
+    .replaceAll('_', ' ')
+    .replace(/\b\w/g, character => character.toUpperCase())
+}
+
+function formatRelativeTime(timestamp: number): string {
+  if (!timestamp)
+    return 'Not recorded'
+
+  const minutes = Math.max(0, Math.floor((Date.now() - timestamp) / 60000))
+  if (minutes < 1)
+    return 'Just now'
+  if (minutes < 60)
+    return `${minutes}m ago`
+
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24)
+    return `${hours}h ago`
+  return `${Math.floor(hours / 24)}d ago`
+}
+
+async function loadOverview(): Promise<void> {
+  loading.set(true)
+  loadError.set('')
+
+  try {
+    const data = await dashboardApi<DeliveryOverviewResponse>('/api/dashboard/commerce/delivery')
+    if (
+      !data
+      || !Array.isArray(data.stats)
+      || !Array.isArray(data.routes)
+      || !Array.isArray(data.methods)
+      || !Array.isArray(data.zones)
+      || !data.drivers
+    ) {
+      throw new TypeError('Delivery resources were not returned in the expected shape.')
+    }
+
+    stats.set(data.stats)
+    routes.set(data.routes)
+    methods.set(data.methods)
+    zones.set(data.zones)
+    drivers.set(data.drivers)
+  }
+  catch (error) {
+    loadError.set(error instanceof Error ? error.message : String(error))
+    pushToast('error', 'Could not load delivery overview', { detail: loadError() })
+  }
+  finally {
+    loading.set(false)
+  }
+}
+
+onMount(() => {
+  void loadOverview()
+})
+</script>
+
+<div class="space-y-6">
+  <TabNavigation model-value="overview" />
+
+  <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</h1>
+      <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Monitor active routes, driver availability, shipping methods, and coverage.</p>
+    </div>
+    <div class="flex gap-2">
+      <Button :loading="loading()" variant="secondary" @click="loadOverview()">
+        <span :if="!loading()" aria-hidden="true" class="h-4 w-4 i-hugeicons-refresh"></span>
+        Refresh
+      </Button>
+      <Button href="/commerce/delivery/delivery-routes">
+        <span aria-hidden="true" class="h-4 w-4 i-hugeicons-route-02"></span>
+        Manage routes
+      </Button>
+    </div>
+  </header>
+
+  <div :if="loadError()" role="alert" 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="loadOverview()">Retry</Button>
+  </div>
+
+  <div :if="loading()" aria-label="Loading delivery overview" class="space-y-6 animate-pulse">
+    <div class="grid gap-3 grid-cols-1 sm:grid-cols-2 xl:grid-cols-4">
+      <div class="h-28 bg-gray-200/70 dark:bg-neutral-800 rounded-lg"></div>
+      <div class="h-28 bg-gray-200/70 dark:bg-neutral-800 rounded-lg"></div>
+      <div class="h-28 bg-gray-200/70 dark:bg-neutral-800 rounded-lg"></div>
+      <div class="h-28 bg-gray-200/70 dark:bg-neutral-800 rounded-lg"></div>
+    </div>
+    <div class="grid gap-6 grid-cols-1 lg:grid-cols-3">
+      <div class="lg:col-span-2 h-80 bg-gray-200/70 dark:bg-neutral-800 rounded-xl"></div>
+      <div class="h-80 bg-gray-200/70 dark:bg-neutral-800 rounded-xl"></div>
+    </div>
+  </div>
+
+  <div :if="!loading() && !loadError()" class="space-y-6">
+    <section aria-label="Delivery metrics" class="grid gap-3 grid-cols-1 sm:grid-cols-2 xl:grid-cols-4">
+      <template :for="item in stats()" :key="item.label">
+        <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
+          <div class="flex items-start justify-between">
+            <p class="text-gray-500 text-xs dark:text-neutral-400">{{ item.label }}</p>
+            <span :class="'h-5 w-5 text-blue-600 dark:text-blue-400 ' + statIcon(item.label)"></span>
+          </div>
+          <p class="mt-2 font-semibold tabular-nums 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>
+
+    <div class="grid gap-6 grid-cols-1 lg:grid-cols-3">
+      <section class="overflow-hidden lg:col-span-2 bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700">
+        <div class="flex items-center justify-between px-5 py-4 border-b border-gray-200 dark:border-neutral-700">
+          <div>
+            <h2 class="font-semibold text-gray-900 dark:text-white">Routes active in 24 hours</h2>
+            <p class="mt-0.5 text-gray-500 text-xs dark:text-neutral-400">Most recently active persisted route plans.</p>
+          </div>
+          <a href="/commerce/delivery/delivery-routes" class="font-semibold text-blue-600 text-sm dark:text-blue-400 hover:text-blue-500">View all</a>
+        </div>
+
+        <div :if="routes().length === 0" class="px-6 py-14 text-center">
+          <span class="inline-block h-8 w-8 text-gray-400 i-hugeicons-route-02"></span>
+          <p class="mt-2 font-medium text-gray-800 text-sm dark:text-neutral-200">No active delivery routes</p>
+          <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Add a route or update its activity to include it here.</p>
+        </div>
+
+        <div :if="routes().length > 0" class="overflow-x-auto">
+          <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">
+            <thead class="bg-gray-50 dark:bg-neutral-900/40">
+              <tr>
+                <th scope="col" class="px-5 py-3 font-medium text-gray-500 text-left text-xs tracking-wide uppercase dark:text-neutral-400">Driver</th>
+                <th scope="col" class="px-4 py-3 font-medium text-gray-500 text-left text-xs tracking-wide uppercase dark:text-neutral-400">Plan</th>
+                <th scope="col" class="px-4 py-3 font-medium text-gray-500 text-left text-xs tracking-wide uppercase dark:text-neutral-400">Distance</th>
+                <th scope="col" class="px-5 py-3 font-medium text-gray-500 text-right text-xs tracking-wide uppercase dark:text-neutral-400">Last active</th>
+              </tr>
+            </thead>
+            <tbody class="divide-gray-100 divide-y dark:divide-neutral-700">
+              <template :for="route in routes()" :key="route.id">
+                <tr class="hover:bg-gray-50/70 dark:hover:bg-neutral-700/40">
+                  <td class="px-5 py-3.5">
+                    <p class="font-medium text-gray-900 text-sm dark:text-white">{{ route.driver }}</p>
+                    <p class="mt-0.5 text-gray-500 text-xs dark:text-neutral-400">{{ route.vehicle }}</p>
+                  </td>
+                  <td class="px-4 py-3.5 text-gray-600 text-sm whitespace-nowrap dark:text-neutral-300">
+                    <span class="font-medium tabular-nums text-gray-900 dark:text-white">{{ route.stops }}</span>
+                    {{ route.stops === 1 ? 'stop' : 'stops' }}
+                    <span class="mx-1 text-gray-300 dark:text-neutral-600">/</span>
+                    {{ route.duration }}
+                  </td>
+                  <td class="px-4 py-3.5 text-gray-600 text-sm whitespace-nowrap dark:text-neutral-300">{{ route.distance }}</td>
+                  <td class="px-5 py-3.5 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-400">{{ formatRelativeTime(route.lastActive) }}</td>
+                </tr>
+              </template>
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      <section class="p-5 text-white bg-stone-950 rounded-xl">
+        <div class="flex items-start justify-between">
+          <div>
+            <h2 class="font-semibold">Fleet availability</h2>
+            <p class="mt-1 text-sm text-stone-400">Current persisted driver statuses.</p>
+          </div>
+          <span class="h-5 w-5 text-blue-400 i-hugeicons-delivery-truck-02"></span>
+        </div>
+        <div class="mt-7">
+          <p class="font-semibold tabular-nums text-4xl tracking-tight">{{ drivers().total }}</p>
+          <p class="mt-1 text-sm text-stone-400">Drivers in the fleet</p>
+        </div>
+        <dl class="mt-7 space-y-3">
+          <div class="flex items-center justify-between py-2 border-b border-stone-800">
+            <dt class="flex gap-2 items-center text-sm text-stone-300"><span class="h-2 w-2 bg-emerald-400 rounded-full"></span>Available</dt>
+            <dd class="font-semibold tabular-nums">{{ drivers().active }}</dd>
+          </div>
+          <div class="flex items-center justify-between py-2 border-b border-stone-800">
+            <dt class="flex gap-2 items-center text-sm text-stone-300"><span class="h-2 w-2 bg-blue-400 rounded-full"></span>On delivery</dt>
+            <dd class="font-semibold tabular-nums">{{ drivers().onDelivery }}</dd>
+          </div>
+          <div class="flex items-center justify-between py-2">
+            <dt class="flex gap-2 items-center text-sm text-stone-300"><span class="h-2 w-2 bg-amber-400 rounded-full"></span>On break</dt>
+            <dd class="font-semibold tabular-nums">{{ drivers().onBreak }}</dd>
+          </div>
+        </dl>
+        <a href="/commerce/delivery/drivers" class="inline-flex gap-2 items-center mt-6 font-semibold text-blue-300 text-sm hover:text-blue-200">
+          Manage drivers
+          <span class="h-4 w-4 i-hugeicons-arrow-right-01"></span>
+        </a>
+      </section>
+    </div>
+
+    <div class="grid gap-6 grid-cols-1 lg:grid-cols-2">
+      <section class="overflow-hidden bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700">
+        <div class="flex items-center justify-between px-5 py-4 border-b border-gray-200 dark:border-neutral-700">
+          <div>
+            <h2 class="font-semibold text-gray-900 dark:text-white">Shipping methods</h2>
+            <p class="mt-0.5 text-gray-500 text-xs dark:text-neutral-400">Active methods are listed first.</p>
+          </div>
+          <a href="/commerce/delivery/shipping-methods" class="font-semibold text-blue-600 text-sm dark:text-blue-400 hover:text-blue-500">Manage</a>
+        </div>
+        <div :if="methods().length === 0" class="px-6 py-10 text-center text-gray-500 text-sm dark:text-neutral-400">No shipping methods configured.</div>
+        <ul :if="methods().length > 0" class="divide-gray-100 divide-y dark:divide-neutral-700">
+          <template :for="method in methods()" :key="method.id">
+            <li class="flex gap-4 items-center justify-between px-5 py-3.5">
+              <div class="min-w-0">
+                <div class="flex gap-2 items-center">
+                  <p class="font-medium text-gray-900 text-sm truncate dark:text-white">{{ method.name }}</p>
+                  <span :class="'inline-flex px-2 py-0.5 font-medium text-xs ring-1 ring-inset rounded-full ' + statusClass(method.status)">{{ formatStatus(method.status) }}</span>
+                </div>
+                <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">Free shipping: {{ method.freeShipping }}</p>
+              </div>
+              <p class="font-semibold tabular-nums text-gray-900 text-sm whitespace-nowrap dark:text-white">{{ method.baseRate }}</p>
+            </li>
+          </template>
+        </ul>
+      </section>
+
+      <section class="overflow-hidden bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700">
+        <div class="flex items-center justify-between px-5 py-4 border-b border-gray-200 dark:border-neutral-700">
+          <div>
+            <h2 class="font-semibold text-gray-900 dark:text-white">Shipping zones</h2>
+            <p class="mt-0.5 text-gray-500 text-xs dark:text-neutral-400">Active regional coverage is listed first.</p>
+          </div>
+          <a href="/commerce/delivery/shipping-zones" class="font-semibold text-blue-600 text-sm dark:text-blue-400 hover:text-blue-500">Manage</a>
+        </div>
+        <div :if="zones().length === 0" class="px-6 py-10 text-center text-gray-500 text-sm dark:text-neutral-400">No shipping zones configured.</div>
+        <ul :if="zones().length > 0" class="divide-gray-100 divide-y dark:divide-neutral-700">
+          <template :for="zone in zones()" :key="zone.id">
+            <li class="flex gap-4 items-center justify-between px-5 py-3.5">
+              <div class="min-w-0">
+                <div class="flex gap-2 items-center">
+                  <p class="font-medium text-gray-900 text-sm truncate dark:text-white">{{ zone.name }}</p>
+                  <span :class="'inline-flex px-2 py-0.5 font-medium text-xs ring-1 ring-inset rounded-full ' + statusClass(zone.status)">{{ formatStatus(zone.status) }}</span>
+                </div>
+                <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ zone.regions }} regional {{ zone.regions === 1 ? 'assignment' : 'assignments' }}</p>
+              </div>
+              <div class="text-right">
+                <p class="font-semibold tabular-nums text-gray-900 text-sm dark:text-white">{{ zone.countries }}</p>
+                <p class="text-gray-500 text-xs dark:text-neutral-400">countries</p>
+              </div>
+            </li>
+          </template>
+        </ul>
+      </section>
+    </div>
+  </div>
+</div>