@stacksjs/defaults 0.70.358 → 0.70.363

package/resources/components/Dashboard/Ci/CiRunHistoryDrawer.stx

@@ -0,0 +1,127 @@
+<script client>
+import { ciStore } from '~/storage/framework/defaults/views/dashboard/stores/ci'
+
+const ci = ciStore
+const target = derived(() => ci.drilldown())
+const runs = derived(() => ci.drilldownRuns())
+const loading = derived(() => ci.loadingDrilldown())
+const error = derived(() => ci.drilldownError())
+const expandedRunId = derived(() => ci.expandedRunId())
+const jobsByRunId = derived(() => ci.drilldownJobsByRunId())
+const loadingJobsRunId = derived(() => ci.loadingJobsForRunId())
+const title = derived(() => target()?.fullName || 'Run history')
+
+function runRowClass(conclusion, status) {
+  const base = 'px-3 py-2 -mx-3 border-l-2 cursor-pointer hover:bg-zinc-50 dark:hover:bg-zinc-900 transition-colors '
+  if (status !== 'completed') return base + 'border-yellow-400'
+  if (conclusion === 'success') return base + 'border-emerald-400'
+  if (conclusion === 'failure' || conclusion === 'timed_out') return base + 'border-red-400'
+  if (conclusion === 'cancelled') return base + 'border-zinc-400'
+  return base + 'border-zinc-200 dark:border-zinc-800'
+}
+
+function runStatusBadge(conclusion, status) {
+  if (status !== 'completed') return { label: status, cls: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-300' }
+  if (conclusion === 'success') return { label: 'success', cls: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300' }
+  if (conclusion === 'failure') return { label: 'failure', cls: 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300' }
+  return { label: conclusion || 'unknown', cls: 'bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300' }
+}
+
+function formatDuration(ms) {
+  if (ms == null) return ''
+  const seconds = Math.floor(ms / 1000)
+  if (seconds < 60) return seconds + 's'
+  const minutes = Math.floor(seconds / 60)
+  const remainder = seconds % 60
+  if (minutes < 60) return minutes + 'm' + (remainder ? ' ' + remainder + 's' : '')
+  const hours = Math.floor(minutes / 60)
+  return hours + 'h ' + (minutes % 60) + 'm'
+}
+
+function timeAgo(dateStr) {
+  if (!dateStr) return ''
+  const diff = Date.now() - new Date(dateStr).getTime()
+  const minutes = Math.floor(diff / 60000)
+  if (minutes < 60) return minutes + 'm ago'
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return hours + 'h ago'
+  return Math.floor(hours / 24) + 'd ago'
+}
+
+function truncate(value, length) {
+  if (!value) return ''
+  return value.length > length ? value.slice(0, length) + '...' : value
+}
+
+function jobsForRun(runId) {
+  return jobsByRunId()[runId] || []
+}
+
+function failedJobs(runId) {
+  return jobsForRun(runId).filter(job => job.conclusion && job.conclusion !== 'success' && job.conclusion !== 'skipped' && job.conclusion !== 'neutral')
+}
+</script>
+
+<Drawer
+  :isOpen="Boolean(target())"
+  :title="title()"
+  description="Run history"
+  size="lg"
+  @close="ci.closeDrilldown()"
+>
+  <div :if="error()" class="mt-4 mx-5 px-4 py-3 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900/40">
+    <p class="text-red-700 text-xs dark:text-red-300" :text="error()"></p>
+  </div>
+
+  <div :if="loading() && runs().length === 0" class="px-5 py-12 text-center">
+    <span aria-hidden="true" class="mx-auto h-6 w-6 text-violet-500 animate-spin i-hugeicons-loading-03"></span>
+    <p class="mt-2 text-zinc-500 text-xs">Fetching recent runs...</p>
+  </div>
+
+  <ul :if="runs().length > 0" class="px-5 py-3">
+    <li :for="run in runs" class="border-b border-zinc-100 dark:border-zinc-900 last:border-0">
+      <div @click="ci.toggleRunJobs(run.id)" :class="runRowClass(run.conclusion, run.status)">
+        <div class="flex gap-3 items-start justify-between">
+          <div class="flex-1 min-w-0">
+            <div class="flex gap-2 items-center">
+              <span :class="`px-1.5 py-0.5 text-[10px] font-medium rounded ${runStatusBadge(run.conclusion, run.status).cls}`" :text="runStatusBadge(run.conclusion, run.status).label"></span>
+              <span class="font-medium text-sm text-zinc-800 truncate dark:text-zinc-200" :text="run.name"></span>
+            </div>
+            <p :if="run.commitMessage" class="mt-1 text-zinc-500 text-xs truncate" :text="truncate(run.commitMessage, 80)"></p>
+            <div class="flex gap-2 items-center mt-1 text-[10px] text-zinc-400">
+              <span class="font-mono" :text="run.headShaShort"></span>
+              <span :if="run.headBranch" :text="run.headBranch"></span>
+              <span :if="run.commitAuthor">·</span>
+              <span :if="run.commitAuthor" :text="run.commitAuthor"></span>
+              <span>·</span>
+              <span :text="timeAgo(run.updatedAt)"></span>
+              <span :if="run.durationMs">·</span>
+              <span :if="run.durationMs" :text="formatDuration(run.durationMs)"></span>
+            </div>
+          </div>
+          <a :href="run.url" target="_blank" rel="noreferrer" @click.stop class="flex-shrink-0 no-underline text-violet-600 text-xs dark:text-violet-400 hover:underline">View ↗</a>
+        </div>
+      </div>
+
+      <div :if="expandedRunId() === run.id" class="px-3 py-2 bg-zinc-50 dark:bg-zinc-900/50 border-t border-zinc-100 dark:border-zinc-900">
+        <div :if="loadingJobsRunId() === run.id" class="py-2 text-zinc-500 text-xs">Loading jobs...</div>
+        <div :if="loadingJobsRunId() !== run.id && jobsForRun(run.id).length === 0" class="py-1 italic text-zinc-400 text-xs">No job detail.</div>
+        <div :if="loadingJobsRunId() !== run.id && failedJobs(run.id).length > 0" class="space-y-1.5">
+          <p class="text-[10px] text-zinc-500 tracking-wide uppercase">Failed jobs</p>
+          <a :for="job in failedJobs(run.id)" :href="job.url" target="_blank" rel="noreferrer" @click.stop class="flex gap-1.5 items-center no-underline text-red-700 text-xs dark:text-red-400 hover:underline">
+            <span aria-hidden="true" class="h-2.5 w-2.5 i-hugeicons-cancel-circle"></span>
+            <span :text="job.name"></span>
+            <span :if="job.durationMs" class="text-zinc-400" :text="'(' + formatDuration(job.durationMs) + ')'"></span>
+          </a>
+        </div>
+        <div :if="loadingJobsRunId() !== run.id && jobsForRun(run.id).length > 0 && failedJobs(run.id).length === 0" class="py-1 text-zinc-500 text-xs">
+          All <span :text="jobsForRun(run.id).length"></span> jobs passed.
+        </div>
+      </div>
+    </li>
+  </ul>
+
+  <div :if="!loading() && !error() && runs().length === 0" class="px-5 py-12 text-center">
+    <p class="text-zinc-500 text-sm">No recent runs.</p>
+  </div>
+</Drawer>

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

@@ -5,13 +5,15 @@ const open = useReactiveProp('open', false)
 const record = useReactiveProp('record', null as CommerceCategoryRecord | null)
 const busy = useReactiveProp('busy', false)
 const emit = defineEmits()
+const description = derived(() => `Delete "${record()?.name || 'Unnamed category'}" permanently? Linked products and child categories may prevent deletion.`)
 </script>
 
-<div :if="open()" class="flex fixed inset-0 z-50 items-center justify-center p-4 dashboard-modal-layer">
-  <button type="button" aria-label="Close delete category dialog" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="category-delete-title" class="relative p-6 max-w-md w-full bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl">
-    <h2 id="category-delete-title" class="font-semibold text-gray-900 text-lg dark:text-white">Delete category</h2>
-    <p class="mt-2 text-gray-500 text-sm dark:text-neutral-400">Delete "{{ record()?.name || 'Unnamed category' }}" permanently? Linked products and child categories may prevent deletion.</p>
-    <footer class="flex gap-2 justify-end mt-6"><Button variant="secondary" :disabled="busy()" @click="emit('close')">Cancel</Button><Button variant="danger" :loading="busy()" @click="emit('confirm')">Delete category</Button></footer>
-  </section>
-</div>
+<ConfirmDialog
+  :isOpen="open()"
+  title="Delete category"
+  :description="description()"
+  confirmLabel="Delete category"
+  :busy="busy()"
+  @close="emit('close')"
+  @confirm="emit('confirm')"
+/>

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

@@ -35,20 +35,25 @@ function deleteRecord(): void {
 }
 </script>
 
-<div :if="open()" class="flex fixed inset-0 z-50 items-center justify-center p-4 dashboard-modal-layer">
-  <button type="button" aria-label="Close category details" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="category-details-title" class="relative max-w-xl w-full bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl">
-    <div class="p-6">
-      <div class="flex gap-4 items-start justify-between"><div><h2 id="category-details-title" class="font-semibold text-gray-900 text-lg dark:text-white">{{ record()?.name || 'Category' }}</h2><p class="mt-1 font-mono text-gray-400 text-sm dark:text-neutral-500">{{ record()?.slug || 'No slug' }}</p></div><span class="px-2 py-1 font-semibold text-gray-700 text-xs dark:text-neutral-200 bg-gray-100 dark:bg-neutral-700 rounded-full">{{ record()?.isActive ? 'Active' : 'Inactive' }}</span></div>
-      <p class="mt-5 text-gray-600 text-sm whitespace-pre-wrap dark:text-neutral-300">{{ record()?.description || 'No description recorded.' }}</p>
-      <dl class="grid gap-4 grid-cols-2 mt-6">
-        <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Parent</dt><dd class="mt-1 text-gray-900 text-sm dark:text-white">{{ parentName() }}</dd></div>
-        <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Display order</dt><dd class="mt-1 font-mono text-gray-900 text-sm dark:text-white">{{ record()?.displayOrder || 0 }}</dd></div>
-        <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Direct children</dt><dd class="mt-1 text-gray-900 text-sm dark:text-white">{{ children().length }}</dd></div>
-        <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Record ID</dt><dd class="mt-1 font-mono text-gray-900 text-sm dark:text-white">{{ record()?.id || 'Not recorded' }}</dd></div>
-        <div class="col-span-2"><dt class="text-gray-400 text-xs dark:text-neutral-500">Image URL</dt><dd class="mt-1 break-all text-gray-900 text-sm dark:text-white">{{ record()?.imageUrl || 'Not configured' }}</dd></div>
-      </dl>
-    </div>
-    <footer class="flex gap-2 justify-between px-6 py-4 bg-gray-50 dark:bg-neutral-900/50 border-gray-200 border-t dark:border-neutral-700"><Button variant="danger" @click="deleteRecord()">Delete</Button><div class="flex gap-2"><Button variant="secondary" @click="emit('close')">Close</Button><Button @click="editRecord()">Edit category</Button></div></footer>
-  </section>
-</div>
+<Modal
+  :isOpen="open()"
+  :title="record()?.name || 'Category'"
+  :description="record()?.slug || 'No slug'"
+  size="lg"
+  @close="emit('close')"
+>
+  <template #header-trailing>
+    <span class="px-2 py-1 font-semibold text-gray-700 text-xs dark:text-neutral-200 bg-gray-100 dark:bg-neutral-700 rounded-full">{{ record()?.isActive ? 'Active' : 'Inactive' }}</span>
+  </template>
+  <p class="text-gray-600 text-sm whitespace-pre-wrap dark:text-neutral-300">{{ record()?.description || 'No description recorded.' }}</p>
+  <dl class="grid gap-4 grid-cols-2 mt-6">
+    <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Parent</dt><dd class="mt-1 text-gray-900 text-sm dark:text-white">{{ parentName() }}</dd></div>
+    <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Display order</dt><dd class="mt-1 font-mono text-gray-900 text-sm dark:text-white">{{ record()?.displayOrder || 0 }}</dd></div>
+    <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Direct children</dt><dd class="mt-1 text-gray-900 text-sm dark:text-white">{{ children().length }}</dd></div>
+    <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Record ID</dt><dd class="mt-1 font-mono text-gray-900 text-sm dark:text-white">{{ record()?.id || 'Not recorded' }}</dd></div>
+    <div class="col-span-2"><dt class="text-gray-400 text-xs dark:text-neutral-500">Image URL</dt><dd class="mt-1 break-all text-gray-900 text-sm dark:text-white">{{ record()?.imageUrl || 'Not configured' }}</dd></div>
+  </dl>
+  <template #footer>
+    <div class="flex gap-2 justify-between w-full"><Button variant="danger" @click="deleteRecord()">Delete</Button><div class="flex gap-2"><Button variant="secondary" @click="emit('close')">Close</Button><Button @click="editRecord()">Edit category</Button></div></div>
+  </template>
+</Modal>

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

@@ -120,17 +120,18 @@ function errorMessages(): string[] {
 }
 </script>
 
-<div :if="open()" class="flex fixed inset-0 z-50 items-center justify-center p-4 dashboard-modal-layer">
-  <button type="button" aria-label="Close category dialog" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="category-dialog-title" class="overflow-y-auto relative max-h-[90dvh] max-w-2xl w-full bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl">
-    <form @submit.prevent="submit">
-      <div class="p-6">
-        <h2 id="category-dialog-title" class="font-semibold text-gray-900 text-lg dark:text-white">{{ mode() === 'edit' ? 'Edit category' : 'Add category' }}</h2>
-        <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Store hierarchy fields declared by the Category model.</p>
-        <ul :if="errorMessages().length > 0" class="mt-5 p-3 space-y-1 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">
+<Modal
+  :isOpen="open()"
+  :title="mode() === 'edit' ? 'Edit category' : 'Add category'"
+  description="Store hierarchy fields declared by the Category model."
+  size="lg"
+  @close="emit('close')"
+>
+    <form id="category-form" @submit.prevent="submit">
+        <ul :if="errorMessages().length > 0" class="mb-5 p-3 space-y-1 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">
           <template :for="message in errorMessages()" :key="message"><li>{{ message }}</li></template>
         </ul>
-        <div class="grid gap-4 grid-cols-1 sm:grid-cols-2 mt-5">
+        <div class="grid gap-4 grid-cols-1 sm:grid-cols-2">
           <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Name</span><input x-model="name" type="text" maxlength="50" required class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" /></label>
           <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Slug</span><input x-model="slug" type="text" required spellcheck="false" class="mt-1 px-3 py-2 w-full font-mono text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" @input="markSlugTouched" @blur="normalizeSlug" /></label>
           <label class="block sm:col-span-2"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Description</span><textarea x-model="description" rows="3" class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700"></textarea></label>
@@ -139,8 +140,8 @@ function errorMessages(): string[] {
           <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Display order</span><input x-model="displayOrder" type="number" min="0" step="1" required class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" /></label>
           <label class="flex gap-3 items-center sm:col-span-2 p-3 border border-gray-200 rounded-lg dark:border-neutral-700"><input x-model="isActive" type="checkbox" class="h-4 w-4 text-blue-600 border-gray-300 rounded" /><span><span class="block font-medium text-gray-700 text-sm dark:text-neutral-200">Active in the storefront</span><span class="block mt-0.5 text-gray-400 text-xs dark:text-neutral-500">Availability is independent from the hierarchy.</span></span></label>
         </div>
-      </div>
-      <footer class="flex gap-2 justify-end px-6 py-4 bg-gray-50 dark:bg-neutral-900/50 border-gray-200 border-t dark:border-neutral-700"><Button variant="secondary" :disabled="busy()" @click="emit('close')">Cancel</Button><Button type="submit" :loading="busy()" :disabled="!valid()">{{ mode() === 'edit' ? 'Save category' : 'Add category' }}</Button></footer>
     </form>
-  </section>
-</div>
+  <template #footer>
+    <div class="flex gap-2 justify-end w-full"><Button variant="secondary" :disabled="busy()" @click="emit('close')">Cancel</Button><Button type="submit" form="category-form" :loading="busy()" :disabled="!valid()">{{ mode() === 'edit' ? 'Save category' : 'Add category' }}</Button></div>
+  </template>
+</Modal>

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

@@ -5,12 +5,15 @@ const open = useReactiveProp('open', false)
 const record = useReactiveProp('record', null as CouponRecord | null)
 const busy = useReactiveProp('busy', false)
 const emit = defineEmits()
+const description = derived(() => `Delete "${record()?.code || 'Unnamed coupon'}" permanently? Recorded order relationships may prevent deletion.`)
 </script>
 
-<div :if="open()" class="flex fixed inset-0 z-50 items-center justify-center p-4 dashboard-modal-layer">
-  <button type="button" aria-label="Close delete coupon dialog" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="coupon-delete-title" class="relative p-6 max-w-md w-full bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl">
-    <h2 id="coupon-delete-title" class="font-semibold text-gray-900 text-lg dark:text-white">Delete coupon</h2><p class="mt-2 text-gray-500 text-sm dark:text-neutral-400">Delete "{{ record()?.code || 'Unnamed coupon' }}" permanently? Recorded order relationships may prevent deletion.</p>
-    <footer class="flex gap-2 justify-end mt-6"><Button variant="secondary" :disabled="busy()" @click="emit('close')">Cancel</Button><Button variant="danger" :loading="busy()" @click="emit('confirm')">Delete coupon</Button></footer>
-  </section>
-</div>
+<ConfirmDialog
+  :isOpen="open()"
+  title="Delete coupon"
+  :description="description()"
+  confirmLabel="Delete coupon"
+  :busy="busy()"
+  @close="emit('close')"
+  @confirm="emit('confirm')"
+/>

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

@@ -32,22 +32,28 @@ function deleteRecord(): void {
 }
 </script>
 
-<div :if="open()" class="flex fixed inset-0 z-50 items-center justify-center p-4 dashboard-modal-layer">
-  <button type="button" aria-label="Close coupon details" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="coupon-details-title" class="relative max-w-xl w-full bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl">
-    <div class="p-6"><div class="flex gap-4 items-start justify-between"><div><h2 id="coupon-details-title" class="font-mono font-semibold text-gray-900 text-lg dark:text-white">{{ record()?.code || 'Coupon' }}</h2><p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">{{ record()?.description || 'No description recorded.' }}</p></div><span class="px-2 py-1 font-semibold text-gray-700 text-xs dark:text-neutral-200 bg-gray-100 dark:bg-neutral-700 rounded-full">{{ record()?.status || 'Not recorded' }}</span></div>
-      <dl class="grid gap-4 grid-cols-2 mt-6">
-        <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Discount</dt><dd class="mt-1 font-semibold text-gray-900 text-sm dark:text-white">{{ discount(record()) }}</dd></div>
-        <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Availability</dt><dd class="mt-1 text-gray-900 text-sm dark:text-white">{{ record()?.isActive ? 'Enabled' : 'Disabled' }}</dd></div>
-        <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Usage</dt><dd class="mt-1 font-mono text-gray-900 text-sm dark:text-white">{{ record()?.usageCount || 0 }} / {{ record()?.usageLimit || 'No limit' }}</dd></div>
-        <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Minimum order</dt><dd class="mt-1 text-gray-900 text-sm dark:text-white">{{ record()?.minOrderAmount ? money(record()?.minOrderAmount || 0) : 'No minimum' }}</dd></div>
-        <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Maximum discount</dt><dd class="mt-1 text-gray-900 text-sm dark:text-white">{{ record()?.maxDiscountAmount ? money(record()?.maxDiscountAmount || 0) : 'No maximum' }}</dd></div>
-        <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Product relation ID</dt><dd class="mt-1 font-mono text-gray-900 text-sm dark:text-white">{{ record()?.productId || 'Not linked' }}</dd></div>
-        <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Free product reference</dt><dd class="mt-1 font-mono text-gray-900 text-sm dark:text-white">{{ record()?.freeProductId || 'Not configured' }}</dd></div>
-        <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Start date</dt><dd class="mt-1 text-gray-900 text-sm dark:text-white">{{ record()?.startDate || 'Not recorded' }}</dd></div>
-        <div><dt class="text-gray-400 text-xs dark:text-neutral-500">End date</dt><dd class="mt-1 text-gray-900 text-sm dark:text-white">{{ record()?.endDate || 'Not recorded' }}</dd></div>
-      </dl>
-    </div>
-    <footer class="flex gap-2 justify-between px-6 py-4 bg-gray-50 dark:bg-neutral-900/50 border-gray-200 border-t dark:border-neutral-700"><Button variant="danger" @click="deleteRecord()">Delete</Button><div class="flex gap-2"><Button variant="secondary" @click="emit('close')">Close</Button><Button @click="editRecord()">Edit coupon</Button></div></footer>
-  </section>
-</div>
+<Modal
+  :isOpen="open()"
+  :title="record()?.code || 'Coupon'"
+  :description="record()?.description || 'No description recorded.'"
+  size="lg"
+  @close="emit('close')"
+>
+  <template #header-trailing>
+    <span class="px-2 py-1 font-semibold text-gray-700 text-xs dark:text-neutral-200 bg-gray-100 dark:bg-neutral-700 rounded-full">{{ record()?.status || 'Not recorded' }}</span>
+  </template>
+  <dl class="grid gap-4 grid-cols-2">
+    <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Discount</dt><dd class="mt-1 font-semibold text-gray-900 text-sm dark:text-white">{{ discount(record()) }}</dd></div>
+    <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Availability</dt><dd class="mt-1 text-gray-900 text-sm dark:text-white">{{ record()?.isActive ? 'Enabled' : 'Disabled' }}</dd></div>
+    <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Usage</dt><dd class="mt-1 font-mono text-gray-900 text-sm dark:text-white">{{ record()?.usageCount || 0 }} / {{ record()?.usageLimit || 'No limit' }}</dd></div>
+    <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Minimum order</dt><dd class="mt-1 text-gray-900 text-sm dark:text-white">{{ record()?.minOrderAmount ? money(record()?.minOrderAmount || 0) : 'No minimum' }}</dd></div>
+    <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Maximum discount</dt><dd class="mt-1 text-gray-900 text-sm dark:text-white">{{ record()?.maxDiscountAmount ? money(record()?.maxDiscountAmount || 0) : 'No maximum' }}</dd></div>
+    <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Product relation ID</dt><dd class="mt-1 font-mono text-gray-900 text-sm dark:text-white">{{ record()?.productId || 'Not linked' }}</dd></div>
+    <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Free product reference</dt><dd class="mt-1 font-mono text-gray-900 text-sm dark:text-white">{{ record()?.freeProductId || 'Not configured' }}</dd></div>
+    <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Start date</dt><dd class="mt-1 text-gray-900 text-sm dark:text-white">{{ record()?.startDate || 'Not recorded' }}</dd></div>
+    <div><dt class="text-gray-400 text-xs dark:text-neutral-500">End date</dt><dd class="mt-1 text-gray-900 text-sm dark:text-white">{{ record()?.endDate || 'Not recorded' }}</dd></div>
+  </dl>
+  <template #footer>
+    <div class="flex gap-2 justify-between w-full"><Button variant="danger" @click="deleteRecord()">Delete</Button><div class="flex gap-2"><Button variant="secondary" @click="emit('close')">Close</Button><Button @click="editRecord()">Edit coupon</Button></div></div>
+  </template>
+</Modal>

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

@@ -87,15 +87,18 @@ function errorMessages(): string[] {
 }
 </script>
 
-<div :if="open()" class="flex fixed inset-0 z-50 items-center justify-center p-4 dashboard-modal-layer">
-  <button type="button" aria-label="Close coupon dialog" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="coupon-dialog-title" class="overflow-y-auto relative max-h-[90dvh] max-w-2xl w-full bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl">
-    <form @submit.prevent="submit">
-      <div class="p-6"><h2 id="coupon-dialog-title" class="font-semibold text-gray-900 text-lg dark:text-white">{{ mode() === 'edit' ? 'Edit coupon' : 'Add coupon' }}</h2><p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Store fields declared by the Coupon model.</p>
-        <ul :if="errorMessages().length > 0" class="mt-5 p-3 space-y-1 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">
+<Modal
+  :isOpen="open()"
+  :title="mode() === 'edit' ? 'Edit coupon' : 'Add coupon'"
+  description="Store fields declared by the Coupon model."
+  size="lg"
+  @close="emit('close')"
+>
+    <form id="coupon-form" @submit.prevent="submit">
+        <ul :if="errorMessages().length > 0" class="mb-5 p-3 space-y-1 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">
           <template :for="message in errorMessages()" :key="message"><li>{{ message }}</li></template>
         </ul>
-        <div class="grid gap-4 grid-cols-1 sm:grid-cols-2 mt-5">
+        <div class="grid gap-4 grid-cols-1 sm:grid-cols-2">
           <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Code</span><input x-model="code" type="text" maxlength="50" required spellcheck="false" class="mt-1 px-3 py-2 w-full font-mono text-gray-900 text-sm uppercase dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" /></label>
           <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Status</span><select x-model="status" class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700"><option value="Active">Active</option><option value="Scheduled">Scheduled</option><option value="Expired">Expired</option></select></label>
           <label class="block sm:col-span-2"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Description</span><textarea x-model="description" rows="3" class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700"></textarea></label>
@@ -109,8 +112,8 @@ function errorMessages(): string[] {
           <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">End date</span><input x-model="endDate" type="date" class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" /></label>
           <label class="flex gap-3 items-center sm:col-span-2 p-3 border border-gray-200 rounded-lg dark:border-neutral-700"><input x-model="isActive" type="checkbox" class="h-4 w-4 text-blue-600 border-gray-300 rounded" /><span><span class="block font-medium text-gray-700 text-sm dark:text-neutral-200">Enabled for redemption</span><span class="block mt-0.5 text-gray-400 text-xs dark:text-neutral-500">Availability is stored separately from lifecycle status.</span></span></label>
         </div>
-      </div>
-      <footer class="flex gap-2 justify-end px-6 py-4 bg-gray-50 dark:bg-neutral-900/50 border-gray-200 border-t dark:border-neutral-700"><Button variant="secondary" :disabled="busy()" @click="emit('close')">Cancel</Button><Button type="submit" :loading="busy()" :disabled="!valid()">{{ mode() === 'edit' ? 'Save coupon' : 'Add coupon' }}</Button></footer>
     </form>
-  </section>
-</div>
+  <template #footer>
+    <div class="flex gap-2 justify-end w-full"><Button variant="secondary" :disabled="busy()" @click="emit('close')">Cancel</Button><Button type="submit" form="coupon-form" :loading="busy()" :disabled="!valid()">{{ mode() === 'edit' ? 'Save coupon' : 'Add coupon' }}</Button></div>
+  </template>
+</Modal>

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

@@ -5,13 +5,15 @@ const open = useReactiveProp('open', false)
 const record = useReactiveProp('record', null as CommerceCustomerRecord | null)
 const busy = useReactiveProp('busy', false)
 const emit = defineEmits()
+const description = derived(() => `Delete "${record()?.name || 'Unnamed customer'}" permanently? Linked orders, reviews, payments, and gift cards may prevent deletion.`)
 </script>
 
-<div :if="open()" class="flex fixed inset-0 z-50 items-center justify-center p-4 dashboard-modal-layer">
-  <button type="button" aria-label="Close delete customer dialog" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="customer-delete-title" class="relative p-6 max-w-md w-full bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl">
-    <h2 id="customer-delete-title" class="font-semibold text-gray-900 text-lg dark:text-white">Delete customer</h2>
-    <p class="mt-2 text-gray-500 text-sm dark:text-neutral-400">Delete "{{ record()?.name || 'Unnamed customer' }}" permanently? Linked orders, reviews, payments, and gift cards may prevent deletion.</p>
-    <footer class="flex gap-2 justify-end mt-6"><Button variant="secondary" :disabled="busy()" @click="emit('close')">Cancel</Button><Button variant="danger" :loading="busy()" @click="emit('confirm')">Delete customer</Button></footer>
-  </section>
-</div>
+<ConfirmDialog
+  :isOpen="open()"
+  title="Delete customer"
+  :description="description()"
+  confirmLabel="Delete customer"
+  :busy="busy()"
+  @close="emit('close')"
+  @confirm="emit('confirm')"
+/>

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

@@ -46,19 +46,27 @@ function deleteRecord(): void {
 }
 </script>
 
-<div :if="open()" class="flex fixed inset-0 z-50 items-center justify-center p-4 dashboard-modal-layer">
-  <button type="button" aria-label="Close customer details" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="customer-details-title" class="relative max-w-xl w-full bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl">
-    <div class="p-6">
-      <div class="flex gap-4 items-start justify-between"><div class="flex gap-3 items-center"><span class="flex items-center justify-center h-11 w-11 font-semibold text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40 rounded-lg">{{ (record()?.name || '?').slice(0, 1).toUpperCase() }}</span><div><h2 id="customer-details-title" class="font-semibold text-gray-900 text-lg dark:text-white">{{ record()?.name || 'Customer' }}</h2><p class="mt-1 text-gray-400 text-sm dark:text-neutral-500">{{ record()?.email || 'No email recorded' }}</p></div></div><span class="px-2 py-1 font-semibold text-gray-700 text-xs dark:text-neutral-200 bg-gray-100 dark:bg-neutral-700 rounded-full">{{ record()?.status || 'Unknown' }}</span></div>
-      <dl class="grid gap-4 grid-cols-2 mt-6">
-        <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Phone</dt><dd class="mt-1 text-gray-900 text-sm dark:text-white">{{ record()?.phone || 'Not recorded' }}</dd></div>
-        <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Recorded spend</dt><dd class="mt-1 font-medium text-gray-900 text-sm dark:text-white">{{ formatMoney(record()?.totalSpent || 0) }}</dd></div>
-        <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Last order</dt><dd class="mt-1 text-gray-900 text-sm dark:text-white">{{ formatDate(record()?.lastOrder || '') }}</dd></div>
-        <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Record ID</dt><dd class="mt-1 font-mono text-gray-900 text-sm dark:text-white">{{ record()?.id || 'Not recorded' }}</dd></div>
-        <div class="col-span-2"><dt class="text-gray-400 text-xs dark:text-neutral-500">Avatar URL</dt><dd class="mt-1 break-all text-gray-900 text-sm dark:text-white">{{ record()?.avatar || 'Not configured' }}</dd></div>
-      </dl>
-    </div>
-    <footer class="flex gap-2 justify-between px-6 py-4 bg-gray-50 dark:bg-neutral-900/50 border-gray-200 border-t dark:border-neutral-700"><Button variant="danger" @click="deleteRecord()">Delete</Button><div class="flex gap-2"><Button variant="secondary" @click="emit('close')">Close</Button><Button @click="editRecord()">Edit customer</Button></div></footer>
-  </section>
-</div>
+<Modal
+  :isOpen="open()"
+  :title="record()?.name || 'Customer'"
+  :description="record()?.email || 'No email recorded'"
+  size="lg"
+  @close="emit('close')"
+>
+  <template #header-leading>
+    <span class="flex items-center justify-center h-11 w-11 font-semibold text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40 rounded-lg">{{ (record()?.name || '?').slice(0, 1).toUpperCase() }}</span>
+  </template>
+  <template #header-trailing>
+    <span class="px-2 py-1 font-semibold text-gray-700 text-xs dark:text-neutral-200 bg-gray-100 dark:bg-neutral-700 rounded-full">{{ record()?.status || 'Unknown' }}</span>
+  </template>
+  <dl class="grid gap-4 grid-cols-2">
+    <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Phone</dt><dd class="mt-1 text-gray-900 text-sm dark:text-white">{{ record()?.phone || 'Not recorded' }}</dd></div>
+    <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Recorded spend</dt><dd class="mt-1 font-medium text-gray-900 text-sm dark:text-white">{{ formatMoney(record()?.totalSpent || 0) }}</dd></div>
+    <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Last order</dt><dd class="mt-1 text-gray-900 text-sm dark:text-white">{{ formatDate(record()?.lastOrder || '') }}</dd></div>
+    <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Record ID</dt><dd class="mt-1 font-mono text-gray-900 text-sm dark:text-white">{{ record()?.id || 'Not recorded' }}</dd></div>
+    <div class="col-span-2"><dt class="text-gray-400 text-xs dark:text-neutral-500">Avatar URL</dt><dd class="mt-1 break-all text-gray-900 text-sm dark:text-white">{{ record()?.avatar || 'Not configured' }}</dd></div>
+  </dl>
+  <template #footer>
+    <div class="flex gap-2 justify-between w-full"><Button variant="danger" @click="deleteRecord()">Delete</Button><div class="flex gap-2"><Button variant="secondary" @click="emit('close')">Close</Button><Button @click="editRecord()">Edit customer</Button></div></div>
+  </template>
+</Modal>

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

@@ -79,17 +79,18 @@ function errorMessages(): string[] {
 }
 </script>
 
-<div :if="open()" class="flex fixed inset-0 z-50 items-center justify-center p-4 dashboard-modal-layer">
-  <button type="button" aria-label="Close customer dialog" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="customer-dialog-title" class="overflow-y-auto relative max-h-[90dvh] max-w-2xl w-full bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl">
-    <form @submit.prevent="submit">
-      <div class="p-6">
-        <h2 id="customer-dialog-title" class="font-semibold text-gray-900 text-lg dark:text-white">{{ mode() === 'edit' ? 'Edit customer' : 'Add customer' }}</h2>
-        <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Store fields declared by the native Customer model.</p>
-        <ul :if="errorMessages().length > 0" class="mt-5 p-3 space-y-1 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">
+<Modal
+  :isOpen="open()"
+  :title="mode() === 'edit' ? 'Edit customer' : 'Add customer'"
+  description="Store fields declared by the native Customer model."
+  size="lg"
+  @close="emit('close')"
+>
+    <form id="customer-form" @submit.prevent="submit">
+        <ul :if="errorMessages().length > 0" class="mb-5 p-3 space-y-1 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">
           <template :for="message in errorMessages()" :key="message"><li>{{ message }}</li></template>
         </ul>
-        <div class="grid gap-4 grid-cols-1 sm:grid-cols-2 mt-5">
+        <div class="grid gap-4 grid-cols-1 sm:grid-cols-2">
           <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Name</span><input x-model="name" type="text" minlength="2" maxlength="255" required class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" /></label>
           <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Email</span><input x-model="email" type="email" required class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" /></label>
           <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Phone <span class="font-normal text-gray-400 dark:text-neutral-500">(optional)</span></span><input x-model="phone" type="tel" maxlength="50" class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" /></label>
@@ -98,8 +99,8 @@ function errorMessages(): string[] {
           <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Last order</span><input x-model="lastOrder" type="date" class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" /></label>
           <label class="block sm:col-span-2"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Avatar URL</span><input x-model="avatar" type="url" placeholder="https://cdn.example.com/customers/avatar.jpg" required class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" /><span class="block mt-1 text-gray-400 text-xs dark:text-neutral-500">Use a persisted HTTP asset URL. The dashboard uses initials when rendering the table.</span></label>
         </div>
-      </div>
-      <footer class="flex gap-2 justify-end px-6 py-4 bg-gray-50 dark:bg-neutral-900/50 border-gray-200 border-t dark:border-neutral-700"><Button variant="secondary" :disabled="busy()" @click="emit('close')">Cancel</Button><Button type="submit" :loading="busy()" :disabled="!valid()">{{ mode() === 'edit' ? 'Save customer' : 'Add customer' }}</Button></footer>
     </form>
-  </section>
-</div>
+  <template #footer>
+    <div class="flex gap-2 justify-end w-full"><Button variant="secondary" :disabled="busy()" @click="emit('close')">Cancel</Button><Button type="submit" form="customer-form" :loading="busy()" :disabled="!valid()">{{ mode() === 'edit' ? 'Save customer' : 'Add customer' }}</Button></div>
+  </template>
+</Modal>

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

@@ -5,13 +5,15 @@ const open = useReactiveProp('open', false)
 const record = useReactiveProp('record', null as GiftCardRecord | null)
 const busy = useReactiveProp('busy', false)
 const emit = defineEmits()
+const description = derived(() => `Delete "${record()?.code || 'Unnamed gift card'}" permanently? Recorded customer or order relationships may prevent deletion.`)
 </script>
 
-<div :if="open()" class="flex fixed inset-0 z-50 items-center justify-center p-4 dashboard-modal-layer">
-  <button type="button" aria-label="Close delete gift card dialog" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="gift-card-delete-title" class="relative p-6 max-w-md w-full bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl">
-    <h2 id="gift-card-delete-title" class="font-semibold text-gray-900 text-lg dark:text-white">Delete gift card</h2>
-    <p class="mt-2 text-gray-500 text-sm dark:text-neutral-400">Delete "{{ record()?.code || 'Unnamed gift card' }}" permanently? Recorded customer or order relationships may prevent deletion.</p>
-    <footer class="flex gap-2 justify-end mt-6"><Button variant="secondary" :disabled="busy()" @click="emit('close')">Cancel</Button><Button variant="danger" :loading="busy()" @click="emit('confirm')">Delete gift card</Button></footer>
-  </section>
-</div>
+<ConfirmDialog
+  :isOpen="open()"
+  title="Delete gift card"
+  :description="description()"
+  confirmLabel="Delete gift card"
+  :busy="busy()"
+  @close="emit('close')"
+  @confirm="emit('confirm')"
+/>

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

@@ -38,15 +38,17 @@ function deleteRecord(): void {
 }
 </script>
 
-<div :if="open()" class="flex fixed inset-0 z-50 items-center justify-center p-4 dashboard-modal-layer">
-  <button type="button" aria-label="Close gift card details" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
-  <section role="dialog" aria-modal="true" aria-labelledby="gift-card-details-title" class="overflow-y-auto relative max-h-[90dvh] max-w-2xl w-full bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl">
-    <div class="p-6">
-      <div class="flex gap-4 items-start justify-between">
-        <div><h2 id="gift-card-details-title" class="font-mono font-semibold text-gray-900 text-lg dark:text-white">{{ record()?.code || 'Gift card' }}</h2><p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">{{ record()?.recipientName || 'No recipient assigned' }}</p></div>
-        <span class="px-2 py-1 font-semibold text-gray-700 text-xs dark:text-neutral-200 bg-gray-100 dark:bg-neutral-700 rounded-full">{{ record()?.status || 'Not recorded' }}</span>
-      </div>
-      <dl class="grid gap-4 grid-cols-1 sm:grid-cols-2 mt-6">
+<Modal
+  :isOpen="open()"
+  :title="record()?.code || 'Gift card'"
+  :description="record()?.recipientName || 'No recipient assigned'"
+  size="lg"
+  @close="emit('close')"
+>
+  <template #header-trailing>
+    <span class="px-2 py-1 font-semibold text-gray-700 text-xs dark:text-neutral-200 bg-gray-100 dark:bg-neutral-700 rounded-full">{{ record()?.status || 'Not recorded' }}</span>
+  </template>
+      <dl class="grid gap-4 grid-cols-1 sm:grid-cols-2">
         <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Current balance</dt><dd class="mt-1 font-semibold text-gray-900 text-sm dark:text-white">{{ money(record()?.currentBalance || 0, record()?.currency || 'USD') }}</dd></div>
         <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Initial balance</dt><dd class="mt-1 text-gray-900 text-sm dark:text-white">{{ money(record()?.initialBalance || 0, record()?.currency || 'USD') }}</dd></div>
         <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Availability</dt><dd class="mt-1 text-gray-900 text-sm dark:text-white">{{ record()?.isActive ? 'Enabled' : 'Disabled' }}</dd></div>
@@ -59,10 +61,10 @@ function deleteRecord(): void {
         <div><dt class="text-gray-400 text-xs dark:text-neutral-500">Last used date</dt><dd class="mt-1 text-gray-900 text-sm dark:text-white">{{ dateTime(record()?.lastUsedDate || '') }}</dd></div>
         <div class="sm:col-span-2"><dt class="text-gray-400 text-xs dark:text-neutral-500">Personal message</dt><dd class="mt-1 text-gray-900 text-sm whitespace-pre-wrap dark:text-white">{{ record()?.personalMessage || 'No message recorded.' }}</dd></div>
       </dl>
-    </div>
-    <footer class="flex gap-2 justify-between px-6 py-4 bg-gray-50 dark:bg-neutral-900/50 border-gray-200 border-t dark:border-neutral-700">
+  <template #footer>
+    <div class="flex gap-2 justify-between w-full">
       <Button variant="danger" @click="deleteRecord()">Delete</Button>
       <div class="flex gap-2"><Button variant="secondary" @click="emit('close')">Close</Button><Button @click="editRecord()">Edit gift card</Button></div>
-    </footer>
-  </section>
-</div>
+    </div>
+  </template>
+</Modal>