@stacksjs/defaults 0.70.229 → 0.70.231

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

@@ -0,0 +1,64 @@
+<script client>
+import type { CommerceCustomerRecord } from '../../../../app/Actions/Dashboard/Commerce/commerce-customer-records'
+
+const open = useReactiveProp('open', false)
+const record = useReactiveProp('record', null as CommerceCustomerRecord | null)
+const currency = useReactiveProp('currency', 'USD')
+const emit = defineEmits()
+
+function formatMoney(value: number): string {
+  try {
+    return new Intl.NumberFormat(undefined, { style: 'currency', currency: currency() }).format(value)
+  }
+  catch {
+    return `${value.toFixed(2)} ${currency()}`
+  }
+}
+
+function formatDate(value: string): string {
+  if (!value)
+    return 'Not recorded'
+  const normalized = /^\d{4}-\d{2}-\d{2}$/.test(value)
+    ? `${value}T00:00:00`
+    : /^\d{4}-\d{2}-\d{2} \d/.test(value)
+      ? `${value.replace(' ', 'T')}Z`
+      : value
+  const date = new Date(normalized)
+  return Number.isNaN(date.getTime())
+    ? value
+    : new Intl.DateTimeFormat(undefined, { dateStyle: 'long' }).format(date)
+}
+
+function editRecord(): void {
+  const current = record()
+  if (!current)
+    return
+  emit('edit', current)
+  emit('close')
+}
+
+function deleteRecord(): void {
+  const current = record()
+  if (!current)
+    return
+  emit('delete', current)
+  emit('close')
+}
+</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>

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

@@ -0,0 +1,105 @@
+<script client>
+import type { CommerceCustomerRecord } from '../../../../app/Actions/Dashboard/Commerce/commerce-customer-records'
+
+const open = useReactiveProp('open', false)
+const mode = useReactiveProp('mode', 'add')
+const record = useReactiveProp('record', null as CommerceCustomerRecord | null)
+const currency = useReactiveProp('currency', 'USD')
+const busy = useReactiveProp('busy', false)
+const errors = useReactiveProp('errors', {} as Record<string, string>)
+const emit = defineEmits()
+const name = state('')
+const email = state('')
+const phone = state('')
+const totalSpent = state('0')
+const lastOrder = state('')
+const status = state<'Active' | 'Inactive'>('Active')
+const avatar = state('')
+let hydrationKey = ''
+
+effect(() => {
+  if (!open()) {
+    hydrationKey = ''
+    return
+  }
+  const current = record()
+  const key = `${mode()}:${current?.id || 'new'}`
+  if (hydrationKey === key)
+    return
+  hydrationKey = key
+  name.set(current?.name || '')
+  email.set(current?.email || '')
+  phone.set(current?.phone || '')
+  totalSpent.set(String(current?.totalSpent ?? 0))
+  lastOrder.set(current?.lastOrder.slice(0, 10) || '')
+  status.set(current?.status === 'Inactive' ? 'Inactive' : 'Active')
+  avatar.set(current?.avatar || '')
+})
+
+function validAvatar(): boolean {
+  try {
+    const result = new URL(avatar().trim())
+    return result.protocol === 'https:' || result.protocol === 'http:'
+  }
+  catch {
+    return false
+  }
+}
+
+function valid(): boolean {
+  const spend = Number(totalSpent())
+  return Boolean(
+    name().trim().length >= 2
+    && email().trim()
+    && Number.isFinite(spend)
+    && spend >= 0
+    && validAvatar()
+  )
+}
+
+function submit(): void {
+  if (!valid())
+    return
+  emit('submit', {
+    name: name().trim(),
+    email: email().trim(),
+    phone: phone().trim(),
+    totalSpent: Number(totalSpent()),
+    lastOrder: lastOrder() || undefined,
+    status: status(),
+    avatar: avatar().trim(),
+  })
+}
+
+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}`
+  })
+}
+</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">
+          <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">
+          <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>
+          <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="Inactive">Inactive</option></select></label>
+          <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Recorded spend ({{ currency() }})</span><input x-model="totalSpent" type="number" min="0" step="0.01" 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">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>

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

@@ -0,0 +1,318 @@
+<script client>
+import type {
+  CommerceCustomerRecord,
+  CommerceCustomerSummary,
+} from '../../../../app/Actions/Dashboard/Commerce/commerce-customer-records'
+import { DashboardApiError, dashboardApi } from '../../../../functions/dashboard-api'
+import { pushToast } from '../../../../functions/toasts'
+
+interface CustomerIndexResponse {
+  records: CommerceCustomerRecord[]
+  summary: CommerceCustomerSummary
+  currency: string
+}
+
+interface CustomerWritePayload {
+  name: string
+  email: string
+  phone: string
+  totalSpent: number
+  lastOrder?: string
+  status: 'Active' | 'Inactive'
+  avatar: string
+}
+
+const emptySummary: CommerceCustomerSummary = {
+  total: 0,
+  active: 0,
+  inactive: 0,
+  totalSpent: 0,
+  averageSpent: 0,
+}
+const records = state<CommerceCustomerRecord[]>([])
+const summary = state<CommerceCustomerSummary>({ ...emptySummary })
+const currency = state('USD')
+const search = state('')
+const statusFilter = state('all')
+const sort = state('name')
+const page = state(1)
+const pageSize = 15
+const loading = state(true)
+const loadError = state('')
+const dialogOpen = state(false)
+const dialogMode = state<'add' | 'edit'>('add')
+const editingRecord = state<CommerceCustomerRecord | null>(null)
+const detailsRecord = state<CommerceCustomerRecord | null>(null)
+const deletingRecord = state<CommerceCustomerRecord | null>(null)
+const saving = state(false)
+const deleting = state(false)
+const validationErrors = state<Record<string, string>>({})
+
+function timestamp(value: string): number {
+  if (!value)
+    return 0
+  const normalized = /^\d{4}-\d{2}-\d{2} \d/.test(value)
+    ? `${value.replace(' ', 'T')}Z`
+    : value
+  const result = new Date(normalized).getTime()
+  return Number.isFinite(result) ? result : 0
+}
+
+function formatMoney(value: number): string {
+  try {
+    return new Intl.NumberFormat(undefined, {
+      style: 'currency',
+      currency: currency(),
+      maximumFractionDigits: 2,
+    }).format(value)
+  }
+  catch {
+    return `${value.toFixed(2)} ${currency()}`
+  }
+}
+
+function filteredRecords(): CommerceCustomerRecord[] {
+  const query = search().trim().toLowerCase()
+  const selectedStatus = statusFilter()
+  return [...records()]
+    .filter((record) => {
+      if (selectedStatus !== 'all' && record.status !== selectedStatus)
+        return false
+      return !query || [record.name, record.email, record.phone]
+        .some(value => value.toLowerCase().includes(query))
+    })
+    .sort((left, right) => {
+      if (sort() === 'spend-high')
+        return right.totalSpent - left.totalSpent || left.name.localeCompare(right.name)
+      if (sort() === 'recent-order')
+        return timestamp(right.lastOrder) - timestamp(left.lastOrder) || left.name.localeCompare(right.name)
+      if (sort() === 'newest')
+        return Number(right.id) - Number(left.id)
+      return left.name.localeCompare(right.name)
+    })
+}
+
+function pageCount(): number {
+  return Math.max(1, Math.ceil(filteredRecords().length / pageSize))
+}
+
+function visibleRecords(): CommerceCustomerRecord[] {
+  const selectedPage = Math.min(page(), pageCount())
+  return filteredRecords().slice((selectedPage - 1) * pageSize, selectedPage * pageSize)
+}
+
+function matchingLabel(): string {
+  const count = filteredRecords().length
+  return `${count} matching ${count === 1 ? 'customer' : 'customers'}`
+}
+
+function metricCards(): Array<{ label: string, value: string, detail: string }> {
+  const current = summary()
+  return [
+    { label: 'Customers', value: String(current.total), detail: 'Persisted Customer records' },
+    { label: 'Active', value: String(current.active), detail: `${current.inactive} inactive` },
+    { label: 'Recorded spend', value: formatMoney(current.totalSpent), detail: 'Across all customers' },
+    { label: 'Average spend', value: formatMoney(current.averageSpent), detail: `Configured in ${currency()}` },
+  ]
+}
+
+function exportHref(): string {
+  const rows = filteredRecords().map(record => [
+    record.name,
+    record.email,
+    record.phone,
+    record.status,
+    String(record.totalSpent),
+    record.lastOrder,
+    record.avatar,
+  ])
+  const escape = (value: string): string => `"${value.replaceAll('"', '""')}"`
+  const csv = [
+    ['Name', 'Email', 'Phone', 'Status', `Total spent (${currency()})`, 'Last order', 'Avatar URL'],
+    ...rows,
+  ].map(row => row.map(escape).join(',')).join('\n')
+  return `data:text/csv;charset=utf-8,${encodeURIComponent(`\uFEFF${csv}`)}`
+}
+
+effect(() => {
+  search()
+  statusFilter()
+  sort()
+  page.set(1)
+})
+
+async function loadCustomers(): Promise<void> {
+  loading.set(true)
+  loadError.set('')
+  try {
+    const data = await dashboardApi<CustomerIndexResponse>('/api/dashboard/commerce/customers')
+    records.set(Array.isArray(data.records) ? data.records : [])
+    summary.set(data.summary ?? { ...emptySummary })
+    currency.set(data.currency || 'USD')
+    page.set(Math.min(page(), Math.max(1, Math.ceil((data.records?.length || 0) / pageSize))))
+  }
+  catch (error) {
+    loadError.set('Customer records could not be loaded.')
+    pushToast('error', 'Could not load customers', {
+      detail: error instanceof Error ? error.message : String(error),
+    })
+  }
+  finally {
+    loading.set(false)
+  }
+}
+
+function openAdd(): void {
+  dialogMode.set('add')
+  editingRecord.set(null)
+  validationErrors.set({})
+  dialogOpen.set(true)
+}
+
+function openEdit(record: CommerceCustomerRecord): void {
+  detailsRecord.set(null)
+  dialogMode.set('edit')
+  editingRecord.set(record)
+  validationErrors.set({})
+  dialogOpen.set(true)
+}
+
+function closeDialog(): void {
+  if (saving())
+    return
+  dialogOpen.set(false)
+  editingRecord.set(null)
+  validationErrors.set({})
+}
+
+async function saveCustomer(payload: CustomerWritePayload): Promise<void> {
+  const current = editingRecord()
+  const editing = dialogMode() === 'edit' && current !== null
+  saving.set(true)
+  validationErrors.set({})
+  try {
+    await dashboardApi(editing ? `/api/dashboard/commerce/customers/${current.id}` : '/api/dashboard/commerce/customers', {
+      method: editing ? 'PATCH' : 'POST',
+      body: payload,
+    })
+    dialogOpen.set(false)
+    editingRecord.set(null)
+    pushToast('success', editing ? 'Customer updated' : 'Customer added')
+    await loadCustomers()
+  }
+  catch (error) {
+    if (error instanceof DashboardApiError)
+      validationErrors.set(error.fields ?? {})
+    pushToast('error', 'Could not save customer', {
+      detail: error instanceof Error ? error.message : String(error),
+    })
+  }
+  finally {
+    saving.set(false)
+  }
+}
+
+function openDetails(record: CommerceCustomerRecord): void {
+  detailsRecord.set(record)
+}
+
+function closeDetails(): void {
+  detailsRecord.set(null)
+}
+
+function openDelete(record: CommerceCustomerRecord): void {
+  deletingRecord.set(record)
+}
+
+function closeDelete(): void {
+  if (!deleting())
+    deletingRecord.set(null)
+}
+
+async function deleteCustomer(): Promise<void> {
+  const current = deletingRecord()
+  if (!current)
+    return
+  deleting.set(true)
+  try {
+    await dashboardApi(`/api/dashboard/commerce/customers/${current.id}`, { method: 'DELETE' })
+    deletingRecord.set(null)
+    detailsRecord.set(null)
+    pushToast('success', 'Customer deleted', { detail: current.name })
+    await loadCustomers()
+  }
+  catch (error) {
+    pushToast('error', 'Could not delete customer', {
+      detail: error instanceof Error ? error.message : String(error),
+    })
+  }
+  finally {
+    deleting.set(false)
+  }
+}
+
+function previousPage(): void {
+  page.set(Math.max(1, page() - 1))
+}
+
+function nextPage(): void {
+  page.set(Math.min(pageCount(), page() + 1))
+}
+
+onMount(() => {
+  void loadCustomers()
+})
+</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>
+
+  <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>
+
+  <section class="space-y-3">
+    <div class="grid gap-3 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
+      <label class="relative sm:col-span-2">
+        <span class="sr-only">Search customers</span>
+        <span class="flex absolute inset-y-0 left-0 items-center pl-3 text-gray-400 pointer-events-none"><span class="h-4 w-4 i-hugeicons-search-01"></span></span>
+        <input x-model="search" type="search" placeholder="Search names, email, or phone" class="pl-9 pr-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-700" />
+      </label>
+      <label><span class="sr-only">Customer status</span><select x-model="statusFilter" class="px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-700"><option value="all">Any status</option><option value="Active">Active</option><option value="Inactive">Inactive</option><option value="Unknown">Unknown</option></select></label>
+      <label><span class="sr-only">Sort customers</span><select x-model="sort" class="px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-700"><option value="name">Name</option><option value="spend-high">Highest spend</option><option value="recent-order">Most recent order</option><option value="newest">Newest record</option></select></label>
+    </div>
+
+    <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+      <p class="text-gray-500 text-sm dark:text-neutral-400">{{ matchingLabel() }}</p>
+      <div class="flex gap-2 items-center">
+        <Button variant="secondary" size="sm" :disabled="page() <= 1" @click="previousPage()">Previous</Button>
+        <span class="text-gray-500 text-sm dark:text-neutral-400">Page {{ Math.min(page(), pageCount()) }} of {{ pageCount() }}</span>
+        <Button variant="secondary" size="sm" :disabled="page() >= pageCount()" @click="nextPage()">Next</Button>
+      </div>
+    </div>
+
+    <CommerceCustomersTable :records="visibleRecords()" :loading="loading()" :currency="currency()" @view="openDetails" @edit="openEdit" @delete="openDelete" />
+  </section>
+</div>
+
+<CommerceCustomerDialog :open="dialogOpen()" :mode="dialogMode()" :record="editingRecord()" :currency="currency()" :busy="saving()" :errors="validationErrors()" @submit="saveCustomer" @close="closeDialog()" />
+<CommerceCustomerDetailsDialog :open="Boolean(detailsRecord())" :record="detailsRecord()" :currency="currency()" @edit="openEdit" @delete="openDelete" @close="closeDetails()" />
+<CommerceCustomerDeleteDialog :open="Boolean(deletingRecord())" :record="deletingRecord()" :busy="deleting()" @confirm="deleteCustomer()" @close="closeDelete()" />

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

@@ -0,0 +1,65 @@
+<script client>
+import type { CommerceCustomerRecord } from '../../../../app/Actions/Dashboard/Commerce/commerce-customer-records'
+
+const records = useReactiveProp('records', [] as CommerceCustomerRecord[])
+const loading = useReactiveProp('loading', false)
+const currency = useReactiveProp('currency', 'USD')
+const emit = defineEmits()
+
+function formatMoney(value: number): string {
+  try {
+    return new Intl.NumberFormat(undefined, { style: 'currency', currency: currency() }).format(value)
+  }
+  catch {
+    return `${value.toFixed(2)} ${currency()}`
+  }
+}
+
+function formatDate(value: string): string {
+  if (!value)
+    return 'No order recorded'
+  const normalized = /^\d{4}-\d{2}-\d{2}$/.test(value)
+    ? `${value}T00:00:00`
+    : /^\d{4}-\d{2}-\d{2} \d/.test(value)
+      ? `${value.replace(' ', 'T')}Z`
+      : value
+  const date = new Date(normalized)
+  return Number.isNaN(date.getTime())
+    ? value
+    : new Intl.DateTimeFormat(undefined, { dateStyle: 'medium' }).format(date)
+}
+
+function statusClass(record: CommerceCustomerRecord): string {
+  if (record.status === 'Active')
+    return 'bg-green-50 text-green-700 dark:bg-green-950/40 dark:text-green-300'
+  if (record.status === 'Inactive')
+    return 'bg-gray-100 text-gray-600 dark:bg-neutral-700 dark:text-neutral-300'
+  return 'bg-amber-50 text-amber-700 dark:bg-amber-950/40 dark:text-amber-300'
+}
+</script>
+
+<div class="overflow-hidden bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
+  <div :if="loading()" class="flex items-center justify-center py-16 text-gray-500 text-sm dark:text-neutral-400"><span class="mr-2 h-4 w-4 animate-spin i-hugeicons-loading-03"></span>Loading customers</div>
+  <div :if="!loading() && records().length === 0" class="py-16 text-center">
+    <div class="mb-3 mx-auto h-8 w-8 text-gray-400 i-hugeicons-user-group"></div>
+    <p class="font-medium text-gray-900 text-sm dark:text-white">No customers found</p>
+    <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">Adjust the filters or add a native Customer record.</p>
+  </div>
+  <div :if="!loading() && records().length > 0" class="overflow-x-auto">
+    <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">
+      <thead class="bg-gray-50 dark:bg-neutral-900/60"><tr><th class="px-4 py-3 font-semibold text-gray-500 text-left text-xs tracking-wide uppercase dark:text-neutral-400">Customer</th><th class="px-4 py-3 font-semibold text-gray-500 text-left text-xs tracking-wide uppercase dark:text-neutral-400">Contact</th><th class="px-4 py-3 font-semibold text-gray-500 text-left text-xs tracking-wide uppercase dark:text-neutral-400">Recorded spend</th><th class="px-4 py-3 font-semibold text-gray-500 text-left text-xs tracking-wide uppercase dark:text-neutral-400">Last order</th><th class="px-4 py-3 font-semibold text-gray-500 text-left text-xs tracking-wide uppercase dark:text-neutral-400">Status</th><th class="px-4 py-3"><span class="sr-only">Actions</span></th></tr></thead>
+      <tbody class="divide-gray-100 divide-y dark:divide-neutral-700">
+        <template :for="record in records()" :key="record.id">
+          <tr class="hover:bg-gray-50/70 dark:hover:bg-neutral-900/40">
+            <td class="px-4 py-3"><div class="flex gap-3 items-center"><span class="flex items-center justify-center shrink-0 h-9 w-9 font-semibold text-blue-700 text-sm dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40 rounded-md">{{ (record.name || '?').slice(0, 1).toUpperCase() }}</span><div class="min-w-0"><Button variant="ghost" size="xs" @click="emit('view', record)">{{ record.name || 'Unnamed customer' }}</Button><p class="mt-1 font-mono text-gray-400 text-xs dark:text-neutral-500">ID {{ record.id || 'not recorded' }}</p></div></div></td>
+            <td class="px-4 py-3"><p class="text-gray-700 text-sm dark:text-neutral-200">{{ record.email || 'No email recorded' }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">{{ record.phone || 'No phone recorded' }}</p></td>
+            <td class="px-4 py-3 font-medium text-gray-700 text-sm dark:text-neutral-200">{{ formatMoney(record.totalSpent) }}</td>
+            <td class="px-4 py-3 text-gray-700 text-sm dark:text-neutral-200">{{ formatDate(record.lastOrder) }}</td>
+            <td class="px-4 py-3"><span :class="'inline-flex px-2 py-1 font-medium text-xs rounded-full ' + statusClass(record)">{{ record.status }}</span></td>
+            <td class="px-4 py-3"><div class="flex gap-1 justify-end"><Button variant="ghost" size="sm" iconOnly :ariaLabel="'View ' + record.name" @click="emit('view', record)"><span class="block h-4 w-4 text-blue-500 i-hugeicons-view"></span></Button><Button variant="ghost" size="sm" iconOnly :ariaLabel="'Edit ' + record.name" @click="emit('edit', record)"><span class="block h-4 w-4 text-blue-500 i-hugeicons-edit-02"></span></Button><Button variant="ghost" size="sm" iconOnly :ariaLabel="'Delete ' + record.name" @click="emit('delete', record)"><span class="block h-4 w-4 text-red-500 i-hugeicons-delete-02"></span></Button></div></td>
+          </tr>
+        </template>
+      </tbody>
+    </table>
+  </div>
+</div>

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

@@ -0,0 +1,52 @@
+<script client>
+import type { GiftCardSummary } from '../../../../app/Actions/Dashboard/Commerce/gift-card-records'
+
+const { summary } = defineProps<{ summary: GiftCardSummary }>()
+
+function money(value: number, currency: string): string {
+  try {
+    return new Intl.NumberFormat(undefined, { style: 'currency', currency }).format(value)
+  }
+  catch {
+    return `${currency} ${value.toFixed(2)}`
+  }
+}
+</script>
+
+<section aria-label="Gift card breakdowns" class="grid gap-3 grid-cols-1 xl:grid-cols-3">
+  <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
+    <h2 class="font-semibold text-gray-900 text-sm dark:text-white">Status distribution</h2>
+    <dl class="mt-4 space-y-3 text-sm">
+      <div class="flex justify-between"><dt class="text-gray-500 dark:text-neutral-400">Active</dt><dd class="font-medium text-gray-900 dark:text-white">{{ summary.statuses.ACTIVE }}</dd></div>
+      <div class="flex justify-between"><dt class="text-gray-500 dark:text-neutral-400">Used</dt><dd class="font-medium text-gray-900 dark:text-white">{{ summary.statuses.USED }}</dd></div>
+      <div class="flex justify-between"><dt class="text-gray-500 dark:text-neutral-400">Expired</dt><dd class="font-medium text-gray-900 dark:text-white">{{ summary.statuses.EXPIRED }}</dd></div>
+      <div class="flex justify-between"><dt class="text-gray-500 dark:text-neutral-400">Deactivated</dt><dd class="font-medium text-gray-900 dark:text-white">{{ summary.statuses.DEACTIVATED }}</dd></div>
+    </dl>
+  </article>
+
+  <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
+    <h2 class="font-semibold text-gray-900 text-sm dark:text-white">Outstanding by currency</h2>
+    <div :if="summary.currencies.length === 0" class="mt-4 text-gray-500 text-sm dark:text-neutral-400">No balances recorded.</div>
+    <ul :if="summary.currencies.length > 0" class="mt-4 space-y-3">
+      <template :for="item in summary.currencies" :key="item.currency">
+        <li class="flex gap-4 justify-between text-sm">
+          <span class="text-gray-500 dark:text-neutral-400">{{ item.currency }} <span class="text-gray-400 text-xs dark:text-neutral-500">({{ item.cards }})</span></span>
+          <span class="font-medium text-gray-900 dark:text-white">{{ money(item.currentBalance, item.currency) }}</span>
+        </li>
+      </template>
+    </ul>
+  </article>
+
+  <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
+    <h2 class="font-semibold text-gray-900 text-sm dark:text-white">Redeemed by currency</h2>
+    <div :if="summary.currencies.length === 0" class="mt-4 text-gray-500 text-sm dark:text-neutral-400">No redemption value recorded.</div>
+    <ul :if="summary.currencies.length > 0" class="mt-4 space-y-3">
+      <template :for="item in summary.currencies" :key="item.currency">
+        <li class="flex gap-4 justify-between text-sm">
+          <span class="text-gray-500 dark:text-neutral-400">{{ item.currency }}</span>
+          <span class="font-medium text-gray-900 dark:text-white">{{ money(item.redeemedBalance, item.currency) }}</span>
+        </li>
+      </template>
+    </ul>
+  </article>
+</section>

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

@@ -0,0 +1,17 @@
+<script client>
+import type { GiftCardRecord } from '../../../../app/Actions/Dashboard/Commerce/gift-card-records'
+
+const open = useReactiveProp('open', false)
+const record = useReactiveProp('record', null as GiftCardRecord | null)
+const busy = useReactiveProp('busy', false)
+const emit = defineEmits()
+</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>