@stacksjs/defaults 0.75.279 → 0.75.280

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

@@ -29,8 +29,6 @@ const records = state<ShippingMethodRecord[]>([])
 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<ShippingMethodRecord | null>(null)
@@ -51,11 +49,6 @@ function filteredRecords(): ShippingMethodRecord[] {
   ].some(value => String(value || '').toLowerCase().includes(query)))
 }
 
-function paginatedRecords(): ShippingMethodRecord[] {
-  const start = (page() - 1) * perPage()
-  return filteredRecords().slice(start, start + perPage())
-}
-
 function activeCount(): number {
   return records().filter(record => record.status === 'active').length
 }
@@ -80,9 +73,6 @@ async function loadMethods(): Promise<void> {
     if (!Array.isArray(data))
       throw new TypeError('Shipping methods response was not an array.')
     records.set(data)
-    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))
@@ -95,7 +85,6 @@ async function loadMethods(): Promise<void> {
 
 function handleSearch(value: string): void {
   search.set(value)
-  page.set(1)
 }
 
 function openCreate(): void {
@@ -184,9 +173,6 @@ async function confirmDelete(): Promise<void> {
     })
     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', 'Shipping method deleted', { detail: current.name })
   }
   catch (error) {
@@ -197,10 +183,6 @@ async function confirmDelete(): Promise<void> {
   }
 }
 
-function goToPage(value: number): void {
-  page.set(value)
-}
-
 onMount(() => {
   void loadMethods()
 })
@@ -225,11 +207,7 @@ onMount(() => {
       <div><h2 class="font-semibold text-gray-900 dark:text-white">Configured methods</h2><p class="mt-0.5 text-gray-500 text-xs dark:text-neutral-400">{{ filteredRecords().length }} matching records</p></div>
       <SearchFilter placeholder="Search shipping methods" 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 shipping methods</div>
-    <ShippingMethodsTable :if="!loading()" :methods="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>
+    <ShippingMethodsTable :methods="filteredRecords()" :loading="loading()" :page-reset-key="search()" @edit="openEdit" @delete="requestDelete" />
   </section>
 </div>
 

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

@@ -1,5 +1,6 @@
+@import('../../UI/Table')
+
 <script client>
-import { formatCurrency as formatMinorUnits } from '@stacksjs/commerce/money'
 interface ShippingZoneSummary {
   id: number
   name: string
@@ -16,96 +17,60 @@ interface ShippingMethodRow {
 }
 
 const methods = useReactiveProp('methods', [] as ShippingMethodRow[])
+const loading = useReactiveProp('loading', false)
+/** The parent's search: a change returns to the first page. */
+const pageResetKey = useReactiveProp<unknown>('pageResetKey', '')
 const emit = defineEmits()
 
-// Shipping amounts are stored as integer cents, in USD.
-function formatCurrency(cents?: number | null): string {
-  if (cents === null || cents === undefined)
-    return 'Not available'
+/** Shipping amounts are stored as integer cents, in USD: currency columns fixed to it. */
+const COLUMNS = [
+  { key: 'name', label: 'Name', sortable: true, class: 'font-medium text-stone-800 whitespace-nowrap dark:text-white' },
+  { key: 'description', label: 'Description', emptyText: 'No description', class: 'max-w-xs truncate' },
+  { key: 'base_rate', label: 'Base rate', type: 'currency' as const, currency: 'USD', sortable: true, emptyText: 'Not available', class: 'tabular-nums whitespace-nowrap' },
+  { key: 'free_shipping', label: 'Free shipping', type: 'currency' as const, currency: 'USD', sortable: true, emptyText: 'No minimum', class: 'tabular-nums whitespace-nowrap' },
+  { key: 'zoneCount', label: 'Zones', type: 'number' as const, sortable: true, class: 'tabular-nums' },
+  {
+    key: 'status',
+    label: 'Status',
+    type: 'badge' as const,
+    sortable: true,
+    badgeClasses: {
+      active: 'bg-emerald-50 text-emerald-700 dark:bg-emerald-400/10 dark:text-emerald-300',
+      draft: 'bg-amber-50 text-amber-700 dark:bg-amber-400/10 dark:text-amber-300',
+    },
+  },
+]
 
-  return formatMinorUnits(cents, 'USD', 'en-US')
-}
+const ROW_ACTIONS = [
+  { action: 'edit', label: 'Edit', icon: 'i-hugeicons-edit-01' },
+  { action: 'delete', label: 'Delete', icon: 'i-hugeicons-waste', class: 'text-red-500' },
+]
 
-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'
+const rows = derived(() => methods().map(method => ({
+  ...method,
+  zoneCount: method.shipping_zones?.length || 0,
+})))
 
-  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.charAt(0).toUpperCase() + status.slice(1)
+function handleRowAction(payload: { action: string, row: ShippingMethodRow }): void {
+  emit(payload.action, payload.row)
 }
 </script>
 
-<div class="overflow-x-auto border border-stone-200/80 rounded-xl dark:border-neutral-700 shadow-sm">
-  <table class="min-w-full divide-stone-100 divide-y dark:divide-neutral-700">
-    <thead class="bg-stone-50/80 dark:bg-neutral-800">
-      <tr>
-        <th scope="col" class="pl-6 pr-3 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Name</th>
-        <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Description</th>
-        <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Base Rate</th>
-        <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Free Shipping</th>
-        <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Zones</th>
-        <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Status</th>
-        <th scope="col" class="relative pl-3 pr-6 py-3.5">
-          <span class="sr-only">Actions</span>
-        </th>
-      </tr>
-    </thead>
-    <tbody class="bg-white dark:bg-neutral-800 divide-stone-100 divide-y dark:divide-neutral-700">
-      <template :for="method in methods">
-        <tr class="hover:bg-stone-50/50 dark:hover:bg-neutral-700/50 transition-colors">
-          <td class="pl-6 pr-3 py-3.5 font-medium text-sm text-stone-800 whitespace-nowrap dark:text-white">
-            {{ method.name }}
-          </td>
-          <td class="px-4 py-3.5 max-w-xs text-sm text-stone-500 truncate dark:text-neutral-300">
-            {{ method.description || 'No description' }}
-          </td>
-          <td class="px-4 py-3.5 tabular-nums text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
-            {{ formatCurrency(method.base_rate) }}
-          </td>
-          <td class="px-4 py-3.5 tabular-nums text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
-            {{ method.free_shipping === null || method.free_shipping === undefined ? 'No minimum' : formatCurrency(method.free_shipping) }}
-          </td>
-          <td class="px-4 py-3.5 tabular-nums text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
-            {{ method.shipping_zones?.length || 0 }}
-          </td>
-          <td class="px-4 py-3.5 text-sm whitespace-nowrap">
-            <span :class="'inline-flex px-2.5 py-1 font-medium text-xs ring-1 ring-inset rounded-full ' + statusClass(method.status)">
-              {{ formatStatus(method.status) }}
-            </span>
-          </td>
-          <td class="relative pl-3 pr-6 py-3.5 font-medium text-right text-sm whitespace-nowrap">
-            <Button
-              variant="ghost"
-              size="sm"
-              iconOnly
-              @click="emit('edit', method)"
-              :ariaLabel="'Edit ' + method.name"
-            >
-              <span class="block h-4 w-4 text-blue-500 i-hugeicons-edit-01"></span>
-            </Button>
-            <Button
-              variant="ghost"
-              size="sm"
-              iconOnly
-              @click="emit('delete', method)"
-              :ariaLabel="'Delete ' + method.name"
-            >
-              <span class="block h-4 w-4 text-red-500 i-hugeicons-waste"></span>
-            </Button>
-          </td>
-        </tr>
-      </template>
-
-      <tr :if="methods().length === 0">
-        <td colspan="7" class="px-6 py-12 text-center text-sm text-stone-500 dark:text-neutral-400">
-          No shipping methods found.
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
+{{--
+  No `searchable` or `filterable`: the parent dashboard owns the search box.
+  Table pages the whole filtered list the parent passes, and stays mounted
+  while it loads.
+--}}
+<Table
+  :page-reset-key="pageResetKey()"
+  :columns="COLUMNS"
+  :data="rows()"
+  :loading="loading()"
+  :row-actions="ROW_ACTIONS"
+  action-label-key="name"
+  paginated
+  :page-size="10"
+  empty-title="No shipping methods found"
+  empty-description="Add a method, or adjust the search."
+  @row-action="handleRowAction"
+/>

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

@@ -44,8 +44,6 @@ const {
   loading,
   loadError,
   search,
-  page,
-  perPage,
   editorOpen,
   editorMode,
   editing,
@@ -55,8 +53,6 @@ const {
   deleteBusy,
   deleteError,
   filteredRecords,
-  paginatedRecords,
-  goToPage,
   handleSearch,
   openCreate,
   openEdit,
@@ -65,7 +61,6 @@ const {
   closeDelete,
   upsert,
   remove,
-  clampPage,
 } = useRecordsDashboard<ShippingRateRecord>({ filter: matchesQuery })
 
 const methods = state<ShippingResourceOption[]>([])
@@ -122,7 +117,6 @@ async function loadRates(): Promise<void> {
     methods.set(methodData)
     zones.set(zoneData)
     records.set(rateData.map(withRelations))
-    clampPage()
   }
   catch (error) {
     loadError.set(error instanceof Error ? error.message : String(error))
@@ -179,7 +173,6 @@ async function confirmDelete(): Promise<void> {
     })
     remove(current)
     deleting.set(null)
-    clampPage()
     pushToast('success', 'Shipping rate deleted', {
       detail: `${current.shipping_method?.name || 'Method'} for ${current.shipping_zone?.name || 'zone'}`,
     })
@@ -217,11 +210,7 @@ onMount(() => {
       <div><h2 class="font-semibold text-gray-900 dark:text-white">Configured weight bands</h2><p class="mt-0.5 text-gray-500 text-xs dark:text-neutral-400">{{ filteredRecords().length }} matching records</p></div>
       <SearchFilter placeholder="Search shipping rates" 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 shipping rates</div>
-    <ShippingRatesTable :if="!loading()" :rates="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>
+    <ShippingRatesTable :rates="filteredRecords()" :loading="loading()" :page-reset-key="search()" @edit="openEdit" @delete="requestDelete" />
   </section>
 </div>
 

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

@@ -1,5 +1,6 @@
+@import('../../UI/Table')
+
 <script client>
-import { formatCurrency as formatMinorUnits } from '@stacksjs/commerce/money'
 interface ResourceSummary {
   id: number
   name: string
@@ -17,84 +18,70 @@ interface ShippingRateRow {
 }
 
 const rates = useReactiveProp('rates', [] as ShippingRateRow[])
+const loading = useReactiveProp('loading', false)
+/** The parent's search: a change returns to the first page. */
+const pageResetKey = useReactiveProp<unknown>('pageResetKey', '')
 const emit = defineEmits()
 
-// Shipping amounts are stored as integer cents, in USD.
-function formatCurrency(cents: number): string {
-  return formatMinorUnits(cents, 'USD', 'en-US')
-}
-
 function formatWeight(weight: number): string {
   return `${new Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(weight)} kg`
 }
 
-function actionLabel(action: string, rate: ShippingRateRow): string {
+/**
+ * Shipping amounts are stored as integer cents, in USD, so the rate is a
+ * currency column with that code. Weights carry their unit and sort by the number.
+ */
+const COLUMNS = [
+  { key: 'methodLabel', label: 'Method', sortable: true, class: 'font-medium text-stone-800 whitespace-nowrap dark:text-white' },
+  { key: 'zoneLabel', label: 'Zone', sortable: true, class: 'whitespace-nowrap' },
+  { key: 'weight_from', label: 'From', sortable: true, slotted: true },
+  { key: 'weight_to', label: 'To', sortable: true, slotted: true },
+  { key: 'rate', label: 'Rate', type: 'currency' as const, currency: 'USD', sortable: true, class: 'font-medium tabular-nums text-stone-800 whitespace-nowrap dark:text-white' },
+]
+
+const ROW_ACTIONS = [
+  { action: 'edit', label: 'Edit', icon: 'i-hugeicons-edit-01' },
+  { action: 'delete', label: 'Delete', icon: 'i-hugeicons-waste', class: 'text-red-500' },
+]
+
+const rows = derived(() => rates().map((rate) => {
   const method = rate.shipping_method?.name || `method ${rate.shipping_method_id}`
   const zone = rate.shipping_zone?.name || `zone ${rate.shipping_zone_id}`
-  return `${action} ${method} rate for ${zone}, ${formatWeight(rate.weight_from)} to ${formatWeight(rate.weight_to)}`
+  return {
+    ...rate,
+    methodLabel: rate.shipping_method?.name || `Method #${rate.shipping_method_id}`,
+    zoneLabel: rate.shipping_zone?.name || `Zone #${rate.shipping_zone_id}`,
+    fromLabel: formatWeight(rate.weight_from),
+    toLabel: formatWeight(rate.weight_to),
+    actionName: `${method} rate for ${zone}, ${formatWeight(rate.weight_from)} to ${formatWeight(rate.weight_to)}`,
+  }
+}))
+
+function handleRowAction(payload: { action: string, row: ShippingRateRow }): void {
+  emit(payload.action, payload.row)
 }
 </script>
 
-<div class="overflow-x-auto border border-stone-200/80 rounded-xl dark:border-neutral-700 shadow-sm">
-  <table class="min-w-full divide-stone-100 divide-y dark:divide-neutral-700">
-    <thead class="bg-stone-50/80 dark:bg-neutral-800">
-      <tr>
-        <th scope="col" class="pl-6 pr-3 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Method</th>
-        <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Zone</th>
-        <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Weight From</th>
-        <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Weight To</th>
-        <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Rate</th>
-        <th scope="col" class="relative pl-3 pr-6 py-3.5">
-          <span class="sr-only">Actions</span>
-        </th>
-      </tr>
-    </thead>
-    <tbody class="bg-white dark:bg-neutral-800 divide-stone-100 divide-y dark:divide-neutral-700">
-      <template :for="rate in rates" :key="rate.id">
-        <tr class="hover:bg-stone-50/50 dark:hover:bg-neutral-700/50 transition-colors">
-          <td class="pl-6 pr-3 py-3.5 font-medium text-sm text-stone-800 whitespace-nowrap dark:text-white">
-            {{ rate.shipping_method?.name || 'Method #' + rate.shipping_method_id }}
-          </td>
-          <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
-            {{ rate.shipping_zone?.name || 'Zone #' + rate.shipping_zone_id }}
-          </td>
-          <td class="px-4 py-3.5 tabular-nums text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
-            {{ formatWeight(rate.weight_from) }}
-          </td>
-          <td class="px-4 py-3.5 tabular-nums text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
-            {{ formatWeight(rate.weight_to) }}
-          </td>
-          <td class="px-4 py-3.5 font-medium tabular-nums text-sm text-stone-800 whitespace-nowrap dark:text-white">
-            {{ formatCurrency(rate.rate) }}
-          </td>
-          <td class="relative pl-3 pr-6 py-3.5 font-medium text-right text-sm whitespace-nowrap">
-            <Button
-              variant="ghost"
-              size="sm"
-              iconOnly
-              @click="emit('edit', rate)"
-              :ariaLabel="actionLabel('Edit', rate)"
-            >
-              <span class="block h-4 w-4 text-blue-500 i-hugeicons-edit-01"></span>
-            </Button>
-            <Button
-              variant="ghost"
-              size="sm"
-              iconOnly
-              @click="emit('delete', rate)"
-              :ariaLabel="actionLabel('Delete', rate)"
-            >
-              <span class="block h-4 w-4 text-red-500 i-hugeicons-waste"></span>
-            </Button>
-          </td>
-        </tr>
-      </template>
-
-      <tr :if="rates().length === 0">
-        <td colspan="6" class="px-6 py-12 text-center text-sm text-stone-500 dark:text-neutral-400">
-          No shipping rates found.
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
+{{--
+  No `searchable` or `filterable`: the parent dashboard owns the search box.
+  Table pages the whole filtered list the parent passes, and stays mounted
+  while it loads.
+--}}
+<Table
+  :page-reset-key="pageResetKey()"
+  :columns="COLUMNS"
+  :data="rows()"
+  :loading="loading()"
+  :row-actions="ROW_ACTIONS"
+  action-label-key="actionName"
+  paginated
+  :page-size="10"
+  empty-title="No shipping rates found"
+  empty-description="Add a rate, or adjust the search."
+  @row-action="handleRowAction"
+>
+  <template #cell="{ row, column }">
+    <span :if="column.key === 'weight_from'" class="tabular-nums whitespace-nowrap" x-text="row.fromLabel"></span>
+    <span :if="column.key === 'weight_to'" class="tabular-nums whitespace-nowrap" x-text="row.toLabel"></span>
+  </template>
+</Table>

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

@@ -47,8 +47,6 @@ const {
   loading,
   loadError,
   search,
-  page,
-  perPage,
   editorOpen,
   editorMode,
   editing,
@@ -58,8 +56,6 @@ const {
   deleteBusy,
   deleteError,
   filteredRecords,
-  paginatedRecords,
-  goToPage,
   handleSearch,
   openCreate,
   openEdit,
@@ -68,7 +64,6 @@ const {
   closeDelete,
   upsert,
   remove,
-  clampPage,
 } = useRecordsDashboard<ShippingZoneRecord>({ filter: matchesQuery })
 
 const methods = state<ShippingMethodOption[]>([])
@@ -130,7 +125,6 @@ async function loadZones(): Promise<void> {
       throw new TypeError('Shipping zone resources were not returned as arrays.')
     methods.set(methodData)
     records.set(zoneData.map(withMethod))
-    clampPage()
   }
   catch (error) {
     loadError.set(error instanceof Error ? error.message : String(error))
@@ -187,7 +181,6 @@ async function confirmDelete(): Promise<void> {
     })
     remove(current)
     deleting.set(null)
-    clampPage()
     pushToast('success', 'Shipping zone deleted', { detail: current.name })
   }
   catch (error) {
@@ -223,11 +216,7 @@ onMount(() => {
       <div><h2 class="font-semibold text-gray-900 dark:text-white">Configured coverage</h2><p class="mt-0.5 text-gray-500 text-xs dark:text-neutral-400">{{ filteredRecords().length }} matching records</p></div>
       <SearchFilter placeholder="Search shipping zones" 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 shipping zones</div>
-    <ShippingZonesTable :if="!loading()" :zones="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>
+    <ShippingZonesTable :zones="filteredRecords()" :loading="loading()" :page-reset-key="search()" @edit="openEdit" @delete="requestDelete" />
   </section>
 </div>