@stacksjs/defaults 0.75.231 → 0.75.236

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

@@ -1,5 +1,6 @@
 <script client>
 import { dashboardApi } from '../../../../../functions/dashboard-api'
+import { useRecordsDashboard } from '../../../../../functions/dashboard-list'
 import { pushToast } from '../../../../../functions/toasts'
 
 type LicenseKeyStatus = 'active' | 'inactive' | 'unassigned'
@@ -42,21 +43,48 @@ interface LicenseKeyPayload {
 }
 
 const emptyOptions: LicenseKeyOptions = { customers: [], products: [], orders: [] }
-const records = state<LicenseKeyRecord[]>([])
+function matchesQuery(records: LicenseKeyRecord[], query: string): LicenseKeyRecord[] {
+  return records.filter(record => [
+    record.key,
+    record.template,
+    record.status,
+    record.customer?.label,
+    record.customer?.detail,
+    record.product?.label,
+    record.order?.label,
+  ].some(value => String(value || '').toLowerCase().includes(query)))
+}
+
+const {
+  records,
+  loading,
+  loadError,
+  search,
+  page,
+  perPage,
+  editorOpen,
+  editorMode,
+  editing,
+  saving,
+  editorError,
+  deleting,
+  deleteBusy,
+  deleteError,
+  filteredRecords,
+  paginatedRecords,
+  goToPage,
+  handleSearch,
+  openCreate,
+  openEdit,
+  closeEditor,
+  requestDelete,
+  closeDelete,
+  upsert,
+  remove,
+  clampPage,
+} = useRecordsDashboard<LicenseKeyRecord>({ filter: matchesQuery })
+
 const options = state<LicenseKeyOptions>(emptyOptions)
-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<LicenseKeyRecord | null>(null)
-const saving = state(false)
-const editorError = state('')
-const deleting = state<LicenseKeyRecord | null>(null)
-const deleteBusy = state(false)
-const deleteError = state('')
 
 function optionFor(items: RelatedSummary[], id?: number | null): RelatedSummary | null {
   return id ? items.find(item => item.id === id) || null : null
@@ -78,26 +106,6 @@ function dateTime(value: string): number {
   return new Date(value.replace(' ', 'T')).getTime()
 }
 
-function filteredRecords(): LicenseKeyRecord[] {
-  const query = search().trim().toLowerCase()
-  if (!query)
-    return records()
-  return records().filter(record => [
-    record.key,
-    record.template,
-    record.status,
-    record.customer?.label,
-    record.customer?.detail,
-    record.product?.label,
-    record.order?.label,
-  ].some(value => String(value || '').toLowerCase().includes(query)))
-}
-
-function paginatedRecords(): LicenseKeyRecord[] {
-  const start = (page() - 1) * perPage()
-  return filteredRecords().slice(start, start + perPage())
-}
-
 function metricCards(): Array<{ label: string, value: string, detail: string }> {
   const expiryCutoff = Date.now() + (30 * 24 * 60 * 60 * 1000)
   const expiring = records().filter((record) => {
@@ -124,9 +132,7 @@ async function loadKeys(): Promise<void> {
       throw new TypeError('License key resources were not returned in the expected shape.')
     options.set(optionData)
     records.set(keyData.map(withRelationships))
-    const lastPage = Math.max(1, Math.ceil(filteredRecords().length / perPage()))
-    if (page() > lastPage)
-      page.set(lastPage)
+    clampPage()
   }
   catch (error) {
     loadError.set(error instanceof Error ? error.message : String(error))
@@ -137,33 +143,6 @@ async function loadKeys(): Promise<void> {
   }
 }
 
-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: LicenseKeyRecord): 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)
 }
@@ -183,14 +162,7 @@ async function saveKey(payload: LicenseKeyPayload): Promise<void> {
       },
     )
     const hydrated = withRelationships(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())))
-    }
+    upsert(hydrated, current)
     editorOpen.set(false)
     editing.set(null)
     pushToast('success', current ? 'License key updated' : 'License key added', { detail: hydrated.key })
@@ -203,18 +175,6 @@ async function saveKey(payload: LicenseKeyPayload): Promise<void> {
   }
 }
 
-function requestDelete(record: LicenseKeyRecord): 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)
@@ -225,11 +185,9 @@ async function confirmDelete(): Promise<void> {
     await dashboardApi(`/api/dashboard/commerce/license-keys/${current.id}`, {
       method: 'DELETE',
     })
-    records.set(records().filter(record => record.id !== current.id))
+    remove(current)
     deleting.set(null)
-    const lastPage = Math.max(1, Math.ceil(filteredRecords().length / perPage()))
-    if (page() > lastPage)
-      page.set(lastPage)
+    clampPage()
     pushToast('success', 'License key deleted', { detail: current.key })
   }
   catch (error) {
@@ -240,10 +198,6 @@ async function confirmDelete(): Promise<void> {
   }
 }
 
-function goToPage(value: number): void {
-  page.set(value)
-}
-
 onMount(() => {
   void loadKeys()
 })
@@ -252,22 +206,16 @@ onMount(() => {
 <div class="space-y-6">
   <TabNavigation model-value="license" />
 
-  <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">License keys</h1>
-      <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Generate unique software licenses and manage their commerce assignments.</p>
-    </div>
-    <div class="flex gap-2">
-      <Button :loading="loading()" variant="secondary" @click="loadKeys()"><span :if="!loading()" aria-hidden="true" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button>
-      <Button :disabled="loading()" @click="openCreate()"><span aria-hidden="true" class="h-4 w-4 i-hugeicons-add-01"></span>Add key</Button>
-    </div>
-  </header>
+  <PageHeader title="License keys" description="Generate unique software licenses and manage their commerce assignments.">
+  <div class="flex gap-2">
+    <Button :loading="loading()" variant="secondary" @click="loadKeys()"><span :if="!loading()" aria-hidden="true" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button>
+    <Button :disabled="loading()" @click="openCreate()"><span aria-hidden="true" class="h-4 w-4 i-hugeicons-add-01"></span>Add key</Button>
+  </div>
+  </PageHeader>
 
   <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="loadKeys()">Retry</Button></div>
 
-  <section aria-label="License key 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>
+  <MetricCards label="License key metrics" columns="grid-cols-1 sm:grid-cols-2 xl:grid-cols-4" :items="metricCards()" />
 
   <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">

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

@@ -209,22 +209,16 @@ onMount(() => {
 <div class="space-y-6">
   <TabNavigation model-value="methods" />
 
-  <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">Shipping methods</h1>
-      <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Manage persisted rates, activation state, and shipping-zone coverage.</p>
-    </div>
-    <div class="flex gap-2">
-      <Button :loading="loading()" variant="secondary" @click="loadMethods()"><span :if="!loading()" aria-hidden="true" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button>
-      <Button @click="openCreate()"><span aria-hidden="true" class="h-4 w-4 i-hugeicons-add-01"></span>Add method</Button>
-    </div>
-  </header>
+  <PageHeader title="Shipping methods" description="Manage persisted rates, activation state, and shipping-zone coverage.">
+  <div class="flex gap-2">
+    <Button :loading="loading()" variant="secondary" @click="loadMethods()"><span :if="!loading()" aria-hidden="true" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button>
+    <Button @click="openCreate()"><span aria-hidden="true" class="h-4 w-4 i-hugeicons-add-01"></span>Add method</Button>
+  </div>
+  </PageHeader>
 
   <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="loadMethods()">Retry</Button></div>
 
-  <section aria-label="Shipping method metrics" class="grid gap-3 grid-cols-1 sm:grid-cols-3">
-    <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>
+  <MetricCards label="Shipping method metrics" columns="grid-cols-1 sm:grid-cols-3" :items="metricCards()" />
 
   <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">

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

@@ -1,5 +1,6 @@
 <script client>
 import { dashboardApi } from '../../../../../functions/dashboard-api'
+import { useRecordsDashboard } from '../../../../../functions/dashboard-list'
 import { pushToast } from '../../../../../functions/toasts'
 import { formatCurrency, minorToInput } from '@stacksjs/commerce/money'
 
@@ -28,22 +29,47 @@ interface ShippingRatePayload {
   rate: number
 }
 
-const records = state<ShippingRateRecord[]>([])
+function matchesQuery(records: ShippingRateRecord[], query: string): ShippingRateRecord[] {
+  return records.filter(record => [
+    record.shipping_method?.name,
+    record.shipping_zone?.name,
+    record.weight_from,
+    record.weight_to,
+    minorToInput(record.rate, 'USD'),
+  ].some(value => String(value ?? '').toLowerCase().includes(query)))
+}
+
+const {
+  records,
+  loading,
+  loadError,
+  search,
+  page,
+  perPage,
+  editorOpen,
+  editorMode,
+  editing,
+  saving,
+  editorError,
+  deleting,
+  deleteBusy,
+  deleteError,
+  filteredRecords,
+  paginatedRecords,
+  goToPage,
+  handleSearch,
+  openCreate,
+  openEdit,
+  closeEditor,
+  requestDelete,
+  closeDelete,
+  upsert,
+  remove,
+  clampPage,
+} = useRecordsDashboard<ShippingRateRecord>({ filter: matchesQuery })
+
 const methods = state<ShippingResourceOption[]>([])
 const zones = state<ShippingResourceOption[]>([])
-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<ShippingRateRecord | null>(null)
-const saving = state(false)
-const editorError = state('')
-const deleting = state<ShippingRateRecord | null>(null)
-const deleteBusy = state(false)
-const deleteError = state('')
 
 function methodFor(id: number): ShippingResourceOption | undefined {
   return methods().find(method => method.id === id)
@@ -61,24 +87,6 @@ function withRelations(record: ShippingRateRecord): ShippingRateRecord {
   }
 }
 
-function filteredRecords(): ShippingRateRecord[] {
-  const query = search().trim().toLowerCase()
-  if (!query)
-    return records()
-  return records().filter(record => [
-    record.shipping_method?.name,
-    record.shipping_zone?.name,
-    record.weight_from,
-    record.weight_to,
-    minorToInput(record.rate, 'USD'),
-  ].some(value => String(value ?? '').toLowerCase().includes(query)))
-}
-
-function paginatedRecords(): ShippingRateRecord[] {
-  const start = (page() - 1) * perPage()
-  return filteredRecords().slice(start, start + perPage())
-}
-
 function uniqueZoneCount(): number {
   return new Set(records().map(record => record.shipping_zone_id)).size
 }
@@ -114,9 +122,7 @@ async function loadRates(): Promise<void> {
     methods.set(methodData)
     zones.set(zoneData)
     records.set(rateData.map(withRelations))
-    const lastPage = Math.max(1, Math.ceil(filteredRecords().length / perPage()))
-    if (page() > lastPage)
-      page.set(lastPage)
+    clampPage()
   }
   catch (error) {
     loadError.set(error instanceof Error ? error.message : String(error))
@@ -127,33 +133,6 @@ async function loadRates(): Promise<void> {
   }
 }
 
-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: ShippingRateRecord): 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)
 }
@@ -173,14 +152,7 @@ async function saveRate(payload: ShippingRatePayload): Promise<void> {
       },
     )
     const hydrated = withRelations(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())))
-    }
+    upsert(hydrated, current)
     editorOpen.set(false)
     editing.set(null)
     pushToast('success', current ? 'Shipping rate updated' : 'Shipping rate added', {
@@ -195,18 +167,6 @@ async function saveRate(payload: ShippingRatePayload): Promise<void> {
   }
 }
 
-function requestDelete(record: ShippingRateRecord): 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)
@@ -217,11 +177,9 @@ async function confirmDelete(): Promise<void> {
     await dashboardApi(`/api/dashboard/commerce/shipping-rates/${current.id}`, {
       method: 'DELETE',
     })
-    records.set(records().filter(record => record.id !== current.id))
+    remove(current)
     deleting.set(null)
-    const lastPage = Math.max(1, Math.ceil(filteredRecords().length / perPage()))
-    if (page() > lastPage)
-      page.set(lastPage)
+    clampPage()
     pushToast('success', 'Shipping rate deleted', {
       detail: `${current.shipping_method?.name || 'Method'} for ${current.shipping_zone?.name || 'zone'}`,
     })
@@ -234,10 +192,6 @@ async function confirmDelete(): Promise<void> {
   }
 }
 
-function goToPage(value: number): void {
-  page.set(value)
-}
-
 onMount(() => {
   void loadRates()
 })
@@ -246,23 +200,17 @@ onMount(() => {
 <div class="space-y-6">
   <TabNavigation model-value="rates" />
 
-  <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">Shipping rates</h1>
-      <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Price method and zone combinations across exact weight bands.</p>
-    </div>
-    <div class="flex gap-2">
-      <Button :loading="loading()" variant="secondary" @click="loadRates()"><span :if="!loading()" aria-hidden="true" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button>
-      <Button :disabled="loading() || methods().length === 0 || zones().length === 0" @click="openCreate()"><span aria-hidden="true" class="h-4 w-4 i-hugeicons-add-01"></span>Add rate</Button>
-    </div>
-  </header>
+  <PageHeader title="Shipping rates" description="Price method and zone combinations across exact weight bands.">
+  <div class="flex gap-2">
+    <Button :loading="loading()" variant="secondary" @click="loadRates()"><span :if="!loading()" aria-hidden="true" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button>
+    <Button :disabled="loading() || methods().length === 0 || zones().length === 0" @click="openCreate()"><span aria-hidden="true" class="h-4 w-4 i-hugeicons-add-01"></span>Add rate</Button>
+  </div>
+  </PageHeader>
 
   <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="loadRates()">Retry</Button></div>
   <div :if="!loading() && (!methods().length || !zones().length)" 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 at least one shipping method and one shipping zone before creating a rate.</div>
 
-  <section aria-label="Shipping rate 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>
+  <MetricCards label="Shipping rate metrics" columns="grid-cols-1 sm:grid-cols-2 xl:grid-cols-4" :items="metricCards()" />
 
   <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">