@stacksjs/defaults 0.75.233 → 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

@@ -239,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/CommerceCouponsDashboard.stx

@@ -250,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/CommerceCustomersDashboard.stx

@@ -252,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/CommerceGiftCardsDashboard.stx

@@ -266,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/CommerceManufacturersDashboard.stx

@@ -175,33 +175,22 @@ 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">Manufacturers</h1>
-      <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Manage native Manufacturer records and their product relationships.</p>
-    </div>
-    <div class="flex gap-2">
-      <Button variant="secondary" :loading="loading()" @click="loadManufacturers">
-        <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 manufacturer
-      </Button>
-    </div>
-  </header>
+  <PageHeader title="Manufacturers" description="Manage native Manufacturer records and their product relationships.">
+  <div class="flex gap-2">
+    <Button variant="secondary" :loading="loading()" @click="loadManufacturers">
+      <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 manufacturer
+    </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="Manufacturer 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>
+  <MetricCards label="Manufacturer 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 xl:grid-cols-4">

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

@@ -293,29 +293,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">Orders</h1>
-      <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Manage native Order records, customer assignments, totals, and fulfillment state.</p>
-    </div>
-    <div class="flex flex-wrap gap-2">
-      <Button variant="secondary" :loading="loading()" @click="loadOrders()"><span :if="!loading()" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button>
-      <Button tag="a" variant="secondary" :href="exportHref()" :download="'orders-' + 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 order</Button>
-    </div>
-  </header>
+  <PageHeader title="Orders" description="Manage native Order records, customer assignments, totals, and fulfillment state.">
+  <div class="flex flex-wrap gap-2">
+    <Button variant="secondary" :loading="loading()" @click="loadOrders()"><span :if="!loading()" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button>
+    <Button tag="a" variant="secondary" :href="exportHref()" :download="'orders-' + 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 order</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="Order metrics" class="grid gap-3 grid-cols-2 lg:grid-cols-5">
-    <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="Order metrics" columns="grid-cols-2 lg:grid-cols-5" :items="metricCards()" />
 
   <section :if="summary().currencyTotals.length > 0" aria-label="Order currency totals" class="flex flex-wrap gap-2 items-center">
     <span class="text-gray-500 text-xs dark:text-neutral-400">Recorded order value</span>

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

@@ -62,27 +62,23 @@ onMount(() => {
 </script>
 
 <div class="space-y-8">
-  <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">Commerce Dashboard</h1>
-      <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Persisted order performance for {{ rangeLabel().toLowerCase() }}.</p>
-    </div>
-    <div class="flex gap-2">
-      <Button variant="secondary" :loading="loading()" @click="loadDashboard">
-        <span :if="!loading()" class="h-4 w-4 i-hugeicons-refresh"></span>
-        Refresh
-      </Button>
-      <label class="sr-only" for="commerce-dashboard-range">Reporting range</label>
-      <select id="commerce-dashboard-range" x-model="range" class="block pl-3 pr-10 py-2 text-gray-900 sm:leading-6 sm:text-sm dark:text-white dark:bg-neutral-800 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-700 focus:ring-2 focus:ring-blue-600" @change="reloadSelectedRange($event)">
-        <option value="today">Today</option>
-        <option value="7d">Last 7 days</option>
-        <option value="30d">Last 30 days</option>
-        <option value="90d">Last 90 days</option>
-        <option value="year">Last year</option>
-        <option value="all">All time</option>
-      </select>
-    </div>
-  </header>
+  <PageHeader title="Commerce Dashboard" :description="`Persisted order performance for ${rangeLabel().toLowerCase()}.`">
+  <div class="flex gap-2">
+    <Button variant="secondary" :loading="loading()" @click="loadDashboard">
+      <span :if="!loading()" class="h-4 w-4 i-hugeicons-refresh"></span>
+      Refresh
+    </Button>
+    <label class="sr-only" for="commerce-dashboard-range">Reporting range</label>
+    <select id="commerce-dashboard-range" x-model="range" class="block pl-3 pr-10 py-2 text-gray-900 sm:leading-6 sm:text-sm dark:text-white dark:bg-neutral-800 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-700 focus:ring-2 focus:ring-blue-600" @change="reloadSelectedRange($event)">
+      <option value="today">Today</option>
+      <option value="7d">Last 7 days</option>
+      <option value="30d">Last 30 days</option>
+      <option value="90d">Last 90 days</option>
+      <option value="year">Last year</option>
+      <option value="all">All time</option>
+    </select>
+  </div>
+  </PageHeader>
 
   <div :if="loadError()" class="px-4 py-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-300 rounded-md dark:border-red-800">
     {{ loadError() }}

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

@@ -170,28 +170,16 @@ 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">Payments</h1>
-      <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Inspect native Payment records, export the current view, and record confirmed refunds.</p>
-    </div>
-    <div class="flex flex-wrap gap-2">
-      <Button variant="secondary" :loading="loading()" @click="loadPayments"><span :if="!loading()" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button>
-      <Button tag="a" :href="exportHref()" :download="exportFilename()"><span class="h-4 w-4 i-hugeicons-download-04"></span>Export current view</Button>
-    </div>
-  </header>
+  <PageHeader title="Payments" description="Inspect native Payment records, export the current view, and record confirmed refunds.">
+  <div class="flex flex-wrap gap-2">
+    <Button variant="secondary" :loading="loading()" @click="loadPayments"><span :if="!loading()" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button>
+    <Button tag="a" :href="exportHref()" :download="exportFilename()"><span class="h-4 w-4 i-hugeicons-download-04"></span>Export current view</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="Payment 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="Payment metrics" columns="grid-cols-2 lg:grid-cols-4" :items="metricCards()" />
 
   <CommercePaymentsBreakdown :records="visibleRecords()" />