@stacksjs/defaults 0.75.231 → 0.75.236

package/resources/components/Dashboard/Auth/ResetPassword.stx

@@ -43,121 +43,107 @@ function handleSubmit(): void {
 }
 </script>
 
-<div class="flex items-center justify-center px-4 py-12 min-h-screen">
-  <div class="max-w-sm w-full">
-    <!-- Logo/Brand -->
-    <div class="mb-8 text-center">
-      <div class="inline-flex items-center justify-center mb-4 h-12 w-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl shadow-blue-500/25 shadow-lg">
-        <span class="h-7 w-7 text-white i-hugeicons-cube"></span>
+<AuthCard :title="title()" :subtitle="subtitle()">
+
+  <!-- Form Card -->
+  <div class="p-6 bg-white dark:bg-neutral-900 border border-neutral-200/60 rounded-2xl dark:border-neutral-800 shadow-black/5 shadow-xl dark:shadow-black/20">
+    <div :if="checking()">
+      <div class="py-4 text-center">
+        <div class="inline-flex items-center justify-center mb-4 h-12 w-12 bg-neutral-100 dark:bg-neutral-800 rounded-full">
+          <div class="h-6 w-6 text-neutral-500 animate-spin i-hugeicons-loading-03"></div>
+        </div>
+        <p class="text-neutral-500 text-sm dark:text-neutral-400">Checking your link</p>
       </div>
-      <h1 class="font-semibold text-2xl text-neutral-900 dark:text-white">
-        {{ title() }}
-      </h1>
-      <p class="mt-2 text-neutral-500 text-sm dark:text-neutral-400">
-        {{ subtitle() }}
-      </p>
     </div>
 
-    <!-- Form Card -->
-    <div class="p-6 bg-white dark:bg-neutral-900 border border-neutral-200/60 rounded-2xl dark:border-neutral-800 shadow-black/5 shadow-xl dark:shadow-black/20">
-      <div :if="checking()">
-        <div class="py-4 text-center">
-          <div class="inline-flex items-center justify-center mb-4 h-12 w-12 bg-neutral-100 dark:bg-neutral-800 rounded-full">
-            <div class="h-6 w-6 text-neutral-500 animate-spin i-hugeicons-loading-03"></div>
-          </div>
-          <p class="text-neutral-500 text-sm dark:text-neutral-400">Checking your link</p>
+    <div :else-if="invalid()">
+      <div class="py-4 text-center">
+        <div class="inline-flex items-center justify-center mb-4 h-12 w-12 bg-red-100 dark:bg-red-900/30 rounded-full">
+          <div class="h-6 w-6 text-red-600 dark:text-red-400 i-hugeicons-alert-circle"></div>
         </div>
+        <h2 class="mb-2 font-medium text-lg text-neutral-900 dark:text-white">
+          This link no longer works
+        </h2>
+        <p class="mb-6 text-neutral-500 text-sm dark:text-neutral-400">
+          Reset links expire, and each one can be used only once. Ask for a fresh link and it will arrive in a moment.
+        </p>
+        <Button href="/forgot-password">
+          Send a new link
+        </Button>
       </div>
+    </div>
 
-      <div :else-if="invalid()">
-        <div class="py-4 text-center">
-          <div class="inline-flex items-center justify-center mb-4 h-12 w-12 bg-red-100 dark:bg-red-900/30 rounded-full">
-            <div class="h-6 w-6 text-red-600 dark:text-red-400 i-hugeicons-alert-circle"></div>
-          </div>
-          <h2 class="mb-2 font-medium text-lg text-neutral-900 dark:text-white">
-            This link no longer works
-          </h2>
-          <p class="mb-6 text-neutral-500 text-sm dark:text-neutral-400">
-            Reset links expire, and each one can be used only once. Ask for a fresh link and it will arrive in a moment.
-          </p>
-          <Button href="/forgot-password">
-            Send a new link
-          </Button>
+    <div :else-if="success()">
+      <div class="py-4 text-center">
+        <div class="inline-flex items-center justify-center mb-4 h-12 w-12 bg-green-100 dark:bg-green-900/30 rounded-full">
+          <div class="h-6 w-6 text-green-600 dark:text-green-400 i-hugeicons-checkmark-circle-02"></div>
         </div>
+        <h2 class="mb-2 font-medium text-lg text-neutral-900 dark:text-white">
+          Password changed
+        </h2>
+        <p class="mb-6 text-neutral-500 text-sm dark:text-neutral-400">
+          You can sign in with your new password now.
+        </p>
+        <Button href="/login">
+          Go to sign in
+        </Button>
       </div>
+    </div>
 
-      <div :else-if="success()">
-        <div class="py-4 text-center">
-          <div class="inline-flex items-center justify-center mb-4 h-12 w-12 bg-green-100 dark:bg-green-900/30 rounded-full">
-            <div class="h-6 w-6 text-green-600 dark:text-green-400 i-hugeicons-checkmark-circle-02"></div>
-          </div>
-          <h2 class="mb-2 font-medium text-lg text-neutral-900 dark:text-white">
-            Password changed
-          </h2>
-          <p class="mb-6 text-neutral-500 text-sm dark:text-neutral-400">
-            You can sign in with your new password now.
-          </p>
-          <Button href="/login">
-            Go to sign in
-          </Button>
+    <div :else>
+      <div :if="error()" role="alert" class="mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 rounded-lg dark:border-red-800">
+        <div class="flex gap-2 items-center">
+          <div class="h-4 w-4 text-red-600 dark:text-red-400 i-hugeicons-alert-circle"></div>
+          <p class="text-red-600 text-sm dark:text-red-400">{{ error() }}</p>
         </div>
       </div>
 
-      <div :else>
-        <div :if="error()" role="alert" class="mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 rounded-lg dark:border-red-800">
-          <div class="flex gap-2 items-center">
-            <div class="h-4 w-4 text-red-600 dark:text-red-400 i-hugeicons-alert-circle"></div>
-            <p class="text-red-600 text-sm dark:text-red-400">{{ error() }}</p>
-          </div>
+      <form @submit.prevent="handleSubmit">
+        <div class="mb-4">
+          <Input
+            type="password"
+            label="New password"
+            placeholder="At least 8 characters"
+            autocomplete="new-password"
+            v-model:value="password"
+            required
+            :disabled="isLoading()"
+          />
         </div>
 
-        <form @submit.prevent="handleSubmit">
-          <div class="mb-4">
-            <Input
-              type="password"
-              label="New password"
-              placeholder="At least 8 characters"
-              autocomplete="new-password"
-              v-model:value="password"
-              required
-              :disabled="isLoading()"
-            />
-          </div>
-
-          <div class="mb-6">
-            <Input
-              type="password"
-              label="Confirm new password"
-              placeholder="Repeat your new password"
-              autocomplete="new-password"
-              v-model:value="confirmation"
-              :error="mismatch() ? 'Both passwords must match' : ''"
-              required
-              :disabled="isLoading()"
-            />
-          </div>
-
-          <Button
-            type="submit"
-            variant="primary"
-            size="lg"
-            fullWidth
-            :loading="isLoading()"
-            :disabled="!canSubmit()"
-          >
-            <span :if="isLoading()">Saving...</span>
-            <span :if="!isLoading()">Change password</span>
-          </Button>
-        </form>
-      </div>
-    </div>
+        <div class="mb-6">
+          <Input
+            type="password"
+            label="Confirm new password"
+            placeholder="Repeat your new password"
+            autocomplete="new-password"
+            v-model:value="confirmation"
+            :error="mismatch() ? 'Both passwords must match' : ''"
+            required
+            :disabled="isLoading()"
+          />
+        </div>
 
-    <!-- Back to Login -->
-    <p class="mt-6 text-center text-neutral-500 text-sm dark:text-neutral-400">
-      <a href="/login" class="inline-flex gap-1 items-center font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300">
-        <div class="h-4 w-4 i-hugeicons-arrow-left-01"></div>
-        Back to sign in
-      </a>
-    </p>
+        <Button
+          type="submit"
+          variant="primary"
+          size="lg"
+          fullWidth
+          :loading="isLoading()"
+          :disabled="!canSubmit()"
+        >
+          <span :if="isLoading()">Saving...</span>
+          <span :if="!isLoading()">Change password</span>
+        </Button>
+      </form>
+    </div>
   </div>
-</div>
+
+  <!-- Back to Login -->
+  <p class="mt-6 text-center text-neutral-500 text-sm dark:text-neutral-400">
+    <a href="/login" class="inline-flex gap-1 items-center font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300">
+      <div class="h-4 w-4 i-hugeicons-arrow-left-01"></div>
+      Back to sign in
+    </a>
+  </p>
+</AuthCard>

package/resources/components/Dashboard/Buddy/BuddyAssistant.stx

@@ -84,21 +84,17 @@ onMount(() => {
 </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">Buddy</h1>
-      <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Ask framework questions through your configured Stacks AI provider.</p>
-    </div>
-    <div class="flex gap-2 items-center">
-      <span :class="'inline-flex items-center px-2.5 py-1 font-medium text-xs rounded-full ' + (chatState()?.configured ? 'text-green-700 bg-green-100 dark:text-green-300 dark:bg-green-950' : 'text-amber-700 bg-amber-100 dark:text-amber-300 dark:bg-amber-950')">
-        <span :class="'mr-1.5 h-1.5 w-1.5 rounded-full ' + (chatState()?.configured ? 'bg-green-500' : 'bg-amber-500')"></span>
-        {{ providerName() }} {{ chatState()?.configured ? 'ready' : 'needs configuration' }}
-      </span>
-      <Button :if="messages().length > 0" variant="secondary" size="sm" @click="clearHistory">
-        Clear
-      </Button>
-    </div>
-  </header>
+  <PageHeader title="Buddy" description="Ask framework questions through your configured Stacks AI provider.">
+  <div class="flex gap-2 items-center">
+    <span :class="'inline-flex items-center px-2.5 py-1 font-medium text-xs rounded-full ' + (chatState()?.configured ? 'text-green-700 bg-green-100 dark:text-green-300 dark:bg-green-950' : 'text-amber-700 bg-amber-100 dark:text-amber-300 dark:bg-amber-950')">
+      <span :class="'mr-1.5 h-1.5 w-1.5 rounded-full ' + (chatState()?.configured ? 'bg-green-500' : 'bg-amber-500')"></span>
+      {{ providerName() }} {{ chatState()?.configured ? 'ready' : 'needs configuration' }}
+    </span>
+    <Button :if="messages().length > 0" variant="secondary" size="sm" @click="clearHistory">
+      Clear
+    </Button>
+  </div>
+  </PageHeader>
 
   <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() }}

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

@@ -5,6 +5,7 @@ import type {
 } from '../../../../app/Actions/Dashboard/Commerce/commerce-category-records'
 import { DashboardApiError, dashboardApi } from '../../../../functions/dashboard-api'
 import { pushToast } from '../../../../functions/toasts'
+import { pageControls } from '../../../../functions/dashboard-list'
 
 interface CategoryIndexResponse {
   records: CommerceCategoryRecord[]
@@ -230,13 +231,7 @@ async function deleteCategory(): Promise<void> {
   }
 }
 
-function previousPage(): void {
-  page.set(Math.max(1, page() - 1))
-}
-
-function nextPage(): void {
-  page.set(Math.min(pageCount(), page() + 1))
-}
+const { previousPage, nextPage } = pageControls(page, pageCount)
 
 onMount(() => {
   void loadCategories()
@@ -244,29 +239,17 @@ onMount(() => {
 </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 Categories</h1>
-      <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Manage the native Category hierarchy, display order, and storefront availability.</p>
-    </div>
-    <div class="flex flex-wrap gap-2">
-      <Button variant="secondary" :loading="loading()" @click="loadCategories()"><span :if="!loading()" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button>
-      <Button tag="a" variant="secondary" :href="exportHref()" :download="'product-categories-' + new Date().toISOString().slice(0, 10) + '.csv'"><span class="h-4 w-4 i-hugeicons-download-04"></span>Export filtered</Button>
-      <Button @click="openAdd()"><span class="h-4 w-4 i-hugeicons-add-01"></span>Add category</Button>
-    </div>
-  </header>
+  <PageHeader title="Product Categories" description="Manage the native Category hierarchy, display order, and storefront availability.">
+  <div class="flex flex-wrap gap-2">
+    <Button variant="secondary" :loading="loading()" @click="loadCategories()"><span :if="!loading()" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button>
+    <Button tag="a" variant="secondary" :href="exportHref()" :download="'product-categories-' + new Date().toISOString().slice(0, 10) + '.csv'"><span class="h-4 w-4 i-hugeicons-download-04"></span>Export filtered</Button>
+    <Button @click="openAdd()"><span class="h-4 w-4 i-hugeicons-add-01"></span>Add category</Button>
+  </div>
+  </PageHeader>
 
   <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 category 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>
-        <p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">{{ item.detail }}</p>
-      </article>
-    </template>
-  </section>
+  <MetricCards label="Product category metrics" columns="grid-cols-2 lg:grid-cols-4" :items="metricCards()" />
 
   <CommerceCategoryHierarchy :records="records()" />
 

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

@@ -1,5 +1,6 @@
 <script client>
 import type { CommerceCategoryRecord } from '../../../../app/Actions/Dashboard/Commerce/commerce-category-records'
+import { formErrorMessages } from '../../../../functions/dashboard-form'
 
 const open = useReactiveProp('open', false)
 const mode = useReactiveProp('mode', 'add')
@@ -113,10 +114,7 @@ function submit(): void {
 }
 
 function errorMessages(): string[] {
-  return Object.entries(errors()).map(([field, message]) => {
-    const label = field.replace(/([a-z])([A-Z])/g, '$1 $2').replaceAll('_', ' ')
-    return `${label.charAt(0).toUpperCase()}${label.slice(1)}: ${message}`
-  })
+  return formErrorMessages(errors())
 }
 </script>
 

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

@@ -5,6 +5,7 @@ import type {
   CouponStatus,
 } from '../../../../app/Actions/Dashboard/Commerce/coupon-records'
 import { minorToInput, moneyInputError, moneyInputStep, parseMoneyInput } from '@stacksjs/commerce/money'
+import { formErrorMessages } from '../../../../functions/dashboard-form'
 
 const open = useReactiveProp('open', false)
 const mode = useReactiveProp('mode', 'add')
@@ -104,10 +105,7 @@ function submit(): void {
 }
 
 function errorMessages(): string[] {
-  return Object.entries(errors()).map(([field, message]) => {
-    const label = field.replace(/([a-z])([A-Z])/g, '$1 $2').replaceAll('_', ' ')
-    return `${label.charAt(0).toUpperCase()}${label.slice(1)}: ${message}`
-  })
+  return formErrorMessages(errors())
 }
 </script>
 

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

@@ -8,6 +8,7 @@ import type {
 import { DashboardApiError, dashboardApi } from '../../../../functions/dashboard-api'
 import { pushToast } from '../../../../functions/toasts'
 import { minorToInput } from '@stacksjs/commerce/money'
+import { pageControls } from '../../../../functions/dashboard-list'
 
 interface CouponIndexResponse {
   records: CouponRecord[]
@@ -241,13 +242,7 @@ async function deleteCoupon(): Promise<void> {
   }
 }
 
-function previousPage(): void {
-  page.set(Math.max(1, page() - 1))
-}
-
-function nextPage(): void {
-  page.set(Math.min(pageCount(), page() + 1))
-}
+const { previousPage, nextPage } = pageControls(page, pageCount)
 
 onMount(() => {
   void loadCoupons()
@@ -255,29 +250,17 @@ onMount(() => {
 </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">Coupons</h1>
-      <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Manage native Coupon records, availability, limits, and redemption state.</p>
-    </div>
-    <div class="flex flex-wrap gap-2">
-      <Button variant="secondary" :loading="loading()" @click="loadCoupons()"><span :if="!loading()" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button>
-      <Button tag="a" variant="secondary" :href="exportHref()" :download="'coupons-' + new Date().toISOString().slice(0, 10) + '.csv'"><span class="h-4 w-4 i-hugeicons-download-04"></span>Export filtered</Button>
-      <Button @click="openAdd()"><span class="h-4 w-4 i-hugeicons-add-01"></span>Add coupon</Button>
-    </div>
-  </header>
+  <PageHeader title="Coupons" description="Manage native Coupon records, availability, limits, and redemption state.">
+  <div class="flex flex-wrap gap-2">
+    <Button variant="secondary" :loading="loading()" @click="loadCoupons()"><span :if="!loading()" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button>
+    <Button tag="a" variant="secondary" :href="exportHref()" :download="'coupons-' + new Date().toISOString().slice(0, 10) + '.csv'"><span class="h-4 w-4 i-hugeicons-download-04"></span>Export filtered</Button>
+    <Button @click="openAdd()"><span class="h-4 w-4 i-hugeicons-add-01"></span>Add coupon</Button>
+  </div>
+  </PageHeader>
 
   <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="Coupon 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>
-        <p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">{{ item.detail }}</p>
-      </article>
-    </template>
-  </section>
+  <MetricCards label="Coupon metrics" columns="grid-cols-2 lg:grid-cols-4" :items="metricCards()" />
 
   <CommerceCouponBreakdown :records="records()" />
 

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

@@ -1,6 +1,7 @@
 <script client>
 import type { CommerceCustomerRecord } from '../../../../app/Actions/Dashboard/Commerce/commerce-customer-records'
 import { minorToInput, moneyInputError, moneyInputStep, parseMoneyInput } from '@stacksjs/commerce/money'
+import { formErrorMessages } from '../../../../functions/dashboard-form'
 
 const open = useReactiveProp('open', false)
 const mode = useReactiveProp('mode', 'add')
@@ -72,10 +73,7 @@ function submit(): void {
 }
 
 function errorMessages(): string[] {
-  return Object.entries(errors()).map(([field, message]) => {
-    const label = field.replace(/([a-z])([A-Z])/g, '$1 $2').replaceAll('_', ' ')
-    return `${label.charAt(0).toUpperCase()}${label.slice(1)}: ${message}`
-  })
+  return formErrorMessages(errors())
 }
 </script>
 

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

@@ -6,6 +6,7 @@ import type {
 import { DashboardApiError, dashboardApi } from '../../../../functions/dashboard-api'
 import { pushToast } from '../../../../functions/toasts'
 import { formatCurrency, minorToInput } from '@stacksjs/commerce/money'
+import { pageControls } from '../../../../functions/dashboard-list'
 
 interface CustomerIndexResponse {
   records: CommerceCustomerRecord[]
@@ -243,13 +244,7 @@ async function deleteCustomer(): Promise<void> {
   }
 }
 
-function previousPage(): void {
-  page.set(Math.max(1, page() - 1))
-}
-
-function nextPage(): void {
-  page.set(Math.min(pageCount(), page() + 1))
-}
+const { previousPage, nextPage } = pageControls(page, pageCount)
 
 onMount(() => {
   void loadCustomers()
@@ -257,29 +252,17 @@ onMount(() => {
 </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">Customers</h1>
-      <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Manage native Customer records, contact details, status, and recorded spend.</p>
-    </div>
-    <div class="flex flex-wrap gap-2">
-      <Button variant="secondary" :loading="loading()" @click="loadCustomers()"><span :if="!loading()" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button>
-      <Button tag="a" variant="secondary" :href="exportHref()" :download="'customers-' + new Date().toISOString().slice(0, 10) + '.csv'"><span class="h-4 w-4 i-hugeicons-download-04"></span>Export filtered</Button>
-      <Button @click="openAdd()"><span class="h-4 w-4 i-hugeicons-add-01"></span>Add customer</Button>
-    </div>
-  </header>
+  <PageHeader title="Customers" description="Manage native Customer records, contact details, status, and recorded spend.">
+  <div class="flex flex-wrap gap-2">
+    <Button variant="secondary" :loading="loading()" @click="loadCustomers()"><span :if="!loading()" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button>
+    <Button tag="a" variant="secondary" :href="exportHref()" :download="'customers-' + new Date().toISOString().slice(0, 10) + '.csv'"><span class="h-4 w-4 i-hugeicons-download-04"></span>Export filtered</Button>
+    <Button @click="openAdd()"><span class="h-4 w-4 i-hugeicons-add-01"></span>Add customer</Button>
+  </div>
+  </PageHeader>
 
   <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="Customer 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>
-        <p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">{{ item.detail }}</p>
-      </article>
-    </template>
-  </section>
+  <MetricCards label="Customer metrics" columns="grid-cols-2 lg:grid-cols-4" :items="metricCards()" />
 
   <section class="space-y-3">
     <div class="grid gap-3 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">

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

@@ -1,6 +1,7 @@
 <script client>
 import type { GiftCardRecord, GiftCardStatus } from '../../../../app/Actions/Dashboard/Commerce/gift-card-records'
 import { minorToInput, moneyInputError, moneyInputStep, parseMoneyInput } from '@stacksjs/commerce/money'
+import { formErrorMessages } from '../../../../functions/dashboard-form'
 
 const open = useReactiveProp('open', false)
 const mode = useReactiveProp('mode', 'add')
@@ -148,10 +149,7 @@ function submit(): void {
 }
 
 function errorMessages(): string[] {
-  return Object.entries(errors()).map(([field, message]) => {
-    const label = field.replace(/([a-z])([A-Z])/g, '$1 $2').replaceAll('_', ' ')
-    return `${label.charAt(0).toUpperCase()}${label.slice(1)}: ${message}`
-  })
+  return formErrorMessages(errors())
 }
 </script>
 

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

@@ -7,6 +7,7 @@ import type {
 import { DashboardApiError, dashboardApi } from '../../../../functions/dashboard-api'
 import { pushToast } from '../../../../functions/toasts'
 import { minorToInput } from '@stacksjs/commerce/money'
+import { pageControls } from '../../../../functions/dashboard-list'
 
 interface GiftCardIndexResponse {
   records: GiftCardRecord[]
@@ -257,13 +258,7 @@ async function deleteGiftCard(): Promise<void> {
   }
 }
 
-function previousPage(): void {
-  page.set(Math.max(1, page() - 1))
-}
-
-function nextPage(): void {
-  page.set(Math.min(pageCount(), page() + 1))
-}
+const { previousPage, nextPage } = pageControls(page, pageCount)
 
 onMount(() => {
   void loadGiftCards()
@@ -271,29 +266,17 @@ onMount(() => {
 </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">Gift Cards</h1>
-      <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Manage native GiftCard balances, recipients, delivery, and lifecycle state.</p>
-    </div>
-    <div class="flex flex-wrap gap-2">
-      <Button variant="secondary" :loading="loading()" @click="loadGiftCards()"><span :if="!loading()" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button>
-      <Button tag="a" variant="secondary" :href="exportHref()" :download="'gift-cards-' + new Date().toISOString().slice(0, 10) + '.csv'"><span class="h-4 w-4 i-hugeicons-download-04"></span>Export filtered</Button>
-      <Button @click="openAdd()"><span class="h-4 w-4 i-hugeicons-add-01"></span>Add gift card</Button>
-    </div>
-  </header>
+  <PageHeader title="Gift Cards" description="Manage native GiftCard balances, recipients, delivery, and lifecycle state.">
+  <div class="flex flex-wrap gap-2">
+    <Button variant="secondary" :loading="loading()" @click="loadGiftCards()"><span :if="!loading()" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button>
+    <Button tag="a" variant="secondary" :href="exportHref()" :download="'gift-cards-' + new Date().toISOString().slice(0, 10) + '.csv'"><span class="h-4 w-4 i-hugeicons-download-04"></span>Export filtered</Button>
+    <Button @click="openAdd()"><span class="h-4 w-4 i-hugeicons-add-01"></span>Add gift card</Button>
+  </div>
+  </PageHeader>
 
   <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="Gift card 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>
-        <p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">{{ item.detail }}</p>
-      </article>
-    </template>
-  </section>
+  <MetricCards label="Gift card metrics" columns="grid-cols-2 lg:grid-cols-4" :items="metricCards()" />
 
   <CommerceGiftCardBreakdown :summary="summary()" />
 

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

@@ -1,5 +1,6 @@
 <script client>
 import type { ManufacturerRecord } from '../../../../app/Actions/Dashboard/Commerce/manufacturer-records'
+import { formErrorMessages } from '../../../../functions/dashboard-form'
 
 const open = useReactiveProp('open', false)
 const mode = useReactiveProp('mode', 'add')
@@ -41,10 +42,7 @@ function submit(): void {
 }
 
 function errorMessages(): string[] {
-  return Object.entries(errors()).map(([field, message]) => {
-    const label = field.replace(/([a-z])([A-Z])/g, '$1 $2').replaceAll('_', ' ')
-    return `${label.charAt(0).toUpperCase()}${label.slice(1)}: ${message}`
-  })
+  return formErrorMessages(errors())
 }
 </script>