@stacksjs/defaults 0.70.229 → 0.70.231

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

@@ -0,0 +1,337 @@
+<script client>
+import type {
+  CommerceProductRecord,
+  CommerceProductSummary,
+  ProductOption,
+} from '../../../../app/Actions/Dashboard/Commerce/commerce-product-records'
+import { DashboardApiError, dashboardApi } from '../../../../functions/dashboard-api'
+import { pushToast } from '../../../../functions/toasts'
+
+interface ProductIndexResponse {
+  records: CommerceProductRecord[]
+  summary: CommerceProductSummary
+  categories: ProductOption[]
+  manufacturers: ProductOption[]
+  defaultCurrency: string
+}
+
+interface ProductWritePayload {
+  name: string
+  description: string
+  price: number
+  imageUrl: string
+  isAvailable: boolean
+  inventoryCount: number
+  preparationTime: number
+  allergens: string
+  nutritionalInfo: string
+  categoryId: number | null
+  manufacturerId: number | null
+}
+
+const emptySummary: CommerceProductSummary = {
+  total: 0,
+  available: 0,
+  unavailable: 0,
+  outOfStock: 0,
+  totalInventory: 0,
+}
+const records = state<CommerceProductRecord[]>([])
+const summary = state<CommerceProductSummary>({ ...emptySummary })
+const categories = state<ProductOption[]>([])
+const manufacturers = state<ProductOption[]>([])
+const defaultCurrency = state('USD')
+const search = state('')
+const categoryFilter = state('all')
+const availabilityFilter = state('all')
+const sort = state('newest')
+const page = state(1)
+const pageSize = 10
+const loading = state(true)
+const loadError = state('')
+const dialogOpen = state(false)
+const dialogMode = state<'add' | 'edit'>('add')
+const editingRecord = state<CommerceProductRecord | null>(null)
+const deletingRecord = state<CommerceProductRecord | 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 filteredRecords(): CommerceProductRecord[] {
+  const query = search().trim().toLowerCase()
+  const selectedCategory = categoryFilter()
+  const selectedAvailability = availabilityFilter()
+  return [...records()]
+    .filter((record) => {
+      if (selectedCategory !== 'all' && record.categoryId !== selectedCategory)
+        return false
+      if (selectedAvailability === 'available' && !record.isAvailable)
+        return false
+      if (selectedAvailability === 'unavailable' && record.isAvailable)
+        return false
+      if (selectedAvailability === 'out-of-stock' && record.inventoryCount !== 0)
+        return false
+      return !query || [
+        record.id,
+        record.name,
+        record.description,
+        record.categoryName,
+        record.manufacturerName,
+        ...record.allergens,
+      ].some(value => value.toLowerCase().includes(query))
+    })
+    .sort((left, right) => {
+      if (sort() === 'oldest')
+        return timestamp(left.createdAt) - timestamp(right.createdAt)
+      if (sort() === 'name')
+        return left.name.localeCompare(right.name)
+      if (sort() === 'price-high')
+        return right.price - left.price || left.name.localeCompare(right.name)
+      if (sort() === 'price-low')
+        return left.price - right.price || left.name.localeCompare(right.name)
+      if (sort() === 'inventory-high')
+        return right.inventoryCount - left.inventoryCount || left.name.localeCompare(right.name)
+      return timestamp(right.createdAt) - timestamp(left.createdAt) || Number(right.id) - Number(left.id)
+    })
+}
+
+function pageCount(): number {
+  return Math.max(1, Math.ceil(filteredRecords().length / pageSize))
+}
+
+function visibleRecords(): CommerceProductRecord[] {
+  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 ? 'product' : 'products'}`
+}
+
+function metricCards(): Array<{ label: string, value: string, detail: string }> {
+  const current = summary()
+  return [
+    { label: 'Products', value: String(current.total), detail: 'Persisted Product records' },
+    { label: 'Available', value: String(current.available), detail: 'Enabled for commerce' },
+    { label: 'Unavailable', value: String(current.unavailable), detail: 'Not currently offered' },
+    { label: 'Out of stock', value: String(current.outOfStock), detail: 'Zero recorded inventory' },
+    { label: 'Inventory', value: current.totalInventory.toLocaleString(), detail: 'Units across products' },
+  ]
+}
+
+function exportHref(): string {
+  const rows = filteredRecords().map(record => [
+    record.id,
+    record.name,
+    record.description,
+    String(record.price),
+    defaultCurrency(),
+    record.isAvailable ? 'Available' : 'Unavailable',
+    String(record.inventoryCount),
+    String(record.preparationTime),
+    record.categoryName,
+    record.manufacturerName,
+    record.allergens.join('; '),
+    String(record.variantCount),
+    String(record.unitCount),
+    String(record.reviewCount),
+    record.createdAt,
+  ])
+  const escape = (value: string): string => `"${value.replaceAll('"', '""')}"`
+  const csv = [
+    ['Product ID', 'Name', 'Description', 'Price', 'Currency', 'Availability', 'Inventory', 'Preparation minutes', 'Category', 'Manufacturer', 'Allergens', 'Variants', 'Units', 'Reviews', 'Created at'],
+    ...rows,
+  ].map(row => row.map(escape).join(',')).join('\n')
+  return `data:text/csv;charset=utf-8,${encodeURIComponent(`\uFEFF${csv}`)}`
+}
+
+effect(() => {
+  search()
+  categoryFilter()
+  availabilityFilter()
+  sort()
+  page.set(1)
+})
+
+async function loadProducts(): Promise<void> {
+  loading.set(true)
+  loadError.set('')
+  try {
+    const data = await dashboardApi<ProductIndexResponse>('/api/dashboard/commerce/products')
+    records.set(Array.isArray(data.records) ? data.records : [])
+    summary.set(data.summary ?? { ...emptySummary })
+    categories.set(Array.isArray(data.categories) ? data.categories : [])
+    manufacturers.set(Array.isArray(data.manufacturers) ? data.manufacturers : [])
+    defaultCurrency.set(data.defaultCurrency || 'USD')
+    page.set(Math.min(page(), Math.max(1, Math.ceil((data.records?.length || 0) / pageSize))))
+  }
+  catch (error) {
+    loadError.set('Product records could not be loaded.')
+    pushToast('error', 'Could not load products', {
+      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: CommerceProductRecord): void {
+  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 saveProduct(payload: ProductWritePayload): Promise<void> {
+  const current = editingRecord()
+  const editing = dialogMode() === 'edit' && current !== null
+  saving.set(true)
+  validationErrors.set({})
+  try {
+    await dashboardApi(editing ? `/api/dashboard/commerce/products/${current.id}` : '/api/dashboard/commerce/products', {
+      method: editing ? 'PATCH' : 'POST',
+      body: payload,
+    })
+    dialogOpen.set(false)
+    editingRecord.set(null)
+    pushToast('success', editing ? 'Product updated' : 'Product added')
+    await loadProducts()
+  }
+  catch (error) {
+    if (error instanceof DashboardApiError)
+      validationErrors.set(error.fields ?? {})
+    pushToast('error', 'Could not save product', {
+      detail: error instanceof Error ? error.message : String(error),
+    })
+  }
+  finally {
+    saving.set(false)
+  }
+}
+
+function viewProduct(record: CommerceProductRecord): void {
+  navigate(`/commerce/products/${record.id}`)
+}
+
+function openDelete(record: CommerceProductRecord): void {
+  deletingRecord.set(record)
+}
+
+function closeDelete(): void {
+  if (!deleting())
+    deletingRecord.set(null)
+}
+
+async function deleteProduct(): Promise<void> {
+  const current = deletingRecord()
+  if (!current)
+    return
+  deleting.set(true)
+  try {
+    await dashboardApi(`/api/dashboard/commerce/products/${current.id}`, { method: 'DELETE' })
+    deletingRecord.set(null)
+    pushToast('success', 'Product deleted', { detail: current.name })
+    await loadProducts()
+  }
+  catch (error) {
+    pushToast('error', 'Could not delete product', {
+      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 loadProducts()
+})
+</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">Products</h1>
+      <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Manage native Product records, commerce availability, inventory, and relationships.</p>
+    </div>
+    <div class="flex flex-wrap gap-2">
+      <Button variant="secondary" :loading="loading()" @click="loadProducts()"><span :if="!loading()" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button>
+      <Button tag="a" variant="secondary" :href="exportHref()" :download="'products-' + 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 product</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="Product 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>
+
+  <section class="space-y-3">
+    <div class="grid gap-3 grid-cols-1 sm:grid-cols-2 lg:grid-cols-5">
+      <label class="relative sm:col-span-2">
+        <span class="sr-only">Search products</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 name, category, manufacturer, or allergen" 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">Product category</span><select x-model="categoryFilter" 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 category</option><template :for="option in categories()" :key="option.id"><option :value="option.id">{{ option.label }}</option></template></select></label>
+      <label><span class="sr-only">Product availability</span><select x-model="availabilityFilter" 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 availability</option><option value="available">Available</option><option value="unavailable">Unavailable</option><option value="out-of-stock">Out of stock</option></select></label>
+      <label><span class="sr-only">Sort products</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="newest">Newest first</option><option value="oldest">Oldest first</option><option value="name">Name</option><option value="price-high">Highest price</option><option value="price-low">Lowest price</option><option value="inventory-high">Highest inventory</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>
+
+    <CommerceProductsTable :records="visibleRecords()" :loading="loading()" :currency="defaultCurrency()" @view="viewProduct" @edit="openEdit" @delete="openDelete" />
+  </section>
+</div>
+
+<CommerceProductDialog :open="dialogOpen()" :mode="dialogMode()" :record="editingRecord()" :categories="categories()" :manufacturers="manufacturers()" :currency="defaultCurrency()" :busy="saving()" :errors="validationErrors()" @submit="saveProduct" @close="closeDialog()" />
+<CommerceProductDeleteDialog :open="Boolean(deletingRecord())" :record="deletingRecord()" :busy="deleting()" @confirm="deleteProduct()" @close="closeDelete()" />

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

@@ -0,0 +1,54 @@
+<script client>
+import type { CommerceProductRecord } from '../../../../app/Actions/Dashboard/Commerce/commerce-product-records'
+
+const records = useReactiveProp('records', [] as CommerceProductRecord[])
+const loading = useReactiveProp('loading', false)
+const currency = useReactiveProp('currency', 'USD')
+const emit = defineEmits()
+
+function initials(name: string): string {
+  return name.split(/\s+/).filter(Boolean).slice(0, 2).map(part => part[0]?.toUpperCase() || '').join('') || 'PR'
+}
+
+function formatMoney(value: number): string {
+  try {
+    return new Intl.NumberFormat(undefined, { style: 'currency', currency: currency() }).format(value)
+  }
+  catch {
+    return `${value.toFixed(2)} ${currency()}`
+  }
+}
+
+function availabilityClass(record: CommerceProductRecord): string {
+  return record.isAvailable
+    ? 'bg-green-50 text-green-700 dark:bg-green-950/40 dark:text-green-300'
+    : 'bg-gray-100 text-gray-600 dark:bg-neutral-700 dark:text-neutral-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 products</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-package"></div>
+    <p class="font-medium text-gray-900 text-sm dark:text-white">No products found</p>
+    <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">Adjust the filters or add a native Product 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">Product</th><th class="px-4 py-3 font-semibold text-gray-500 text-left text-xs tracking-wide uppercase dark:text-neutral-400">Relationships</th><th class="px-4 py-3 font-semibold text-gray-500 text-left text-xs tracking-wide uppercase dark:text-neutral-400">Price</th><th class="px-4 py-3 font-semibold text-gray-500 text-left text-xs tracking-wide uppercase dark:text-neutral-400">Inventory</th><th class="px-4 py-3 font-semibold text-gray-500 text-left text-xs tracking-wide uppercase dark:text-neutral-400">Availability</th><th class="px-4 py-3 font-semibold text-gray-500 text-left text-xs tracking-wide uppercase dark:text-neutral-400">Related</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 min-w-56"><div class="flex gap-3 items-center"><div class="flex flex-none items-center justify-center h-9 w-9 font-semibold text-blue-700 text-xs dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40 rounded-md">{{ initials(record.name) }}</div><div class="min-w-0"><Button variant="ghost" size="xs" @click="emit('view', record)">{{ record.name || 'Unnamed product' }}</Button><p class="mt-1 max-w-52 text-gray-400 text-xs truncate dark:text-neutral-500">{{ record.description || 'No description' }}</p></div></div></td>
+            <td class="px-4 py-3 min-w-44"><p class="text-gray-700 text-sm dark:text-neutral-200">{{ record.categoryName }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">{{ record.manufacturerName }}</p></td>
+            <td class="px-4 py-3 font-medium text-gray-700 text-sm whitespace-nowrap dark:text-neutral-200">{{ formatMoney(record.price) }}</td>
+            <td class="px-4 py-3 min-w-28"><p :class="'font-medium text-sm ' + (record.inventoryCount === 0 ? 'text-red-600 dark:text-red-400' : 'text-gray-700 dark:text-neutral-200')">{{ record.inventoryCount.toLocaleString() }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">{{ record.preparationTime }} min prep</p></td>
+            <td class="px-4 py-3"><span :class="'inline-flex px-2 py-1 font-medium text-xs rounded-full ' + availabilityClass(record)">{{ record.isAvailable ? 'Available' : 'Unavailable' }}</span></td>
+            <td class="px-4 py-3 min-w-36 text-gray-500 text-xs dark:text-neutral-400"><p>{{ record.variantCount }} variants, {{ record.unitCount }} units</p><p class="mt-1">{{ record.reviewCount }} reviews</p></td>
+            <td class="px-4 py-3"><div class="flex gap-1 justify-end"><Button variant="ghost" size="sm" iconOnly :ariaLabel="'View product ' + 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 product ' + 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 product ' + 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/CommerceReviewDeleteDialog.stx

@@ -0,0 +1,27 @@
+<script client>
+import type { ReviewRecord } from '../../../../app/Actions/Dashboard/Commerce/review-records'
+
+const open = useReactiveProp('open', false)
+const review = useReactiveProp('review', null as ReviewRecord | 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 review dialog" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
+  <section role="dialog" aria-modal="true" aria-labelledby="review-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">
+    <div class="flex gap-4 items-start">
+      <span class="flex flex-shrink-0 items-center justify-center h-10 w-10 text-red-700 dark:text-red-300 bg-red-100 dark:bg-red-950/40 rounded-full">
+        <span class="h-5 w-5 i-hugeicons-waste"></span>
+      </span>
+      <div>
+        <h2 id="review-delete-title" class="font-semibold text-gray-900 text-lg dark:text-white">Delete review</h2>
+        <p class="mt-2 text-gray-500 text-sm dark:text-neutral-400">Delete "{{ review()?.title || 'Untitled review' }}" permanently? This cannot be undone.</p>
+      </div>
+    </div>
+    <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 review</Button>
+    </footer>
+  </section>
+</div>

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

@@ -0,0 +1,100 @@
+<script client>
+import type { ReviewRecord } from '../../../../app/Actions/Dashboard/Commerce/review-records'
+
+const open = useReactiveProp('open', false)
+const review = useReactiveProp('review', null as ReviewRecord | null)
+const busy = useReactiveProp('busy', false)
+const errors = useReactiveProp('errors', {} as Record<string, string>)
+const emit = defineEmits()
+const title = state('')
+const content = state('')
+const rating = state(5)
+const approved = state(false)
+const featured = state(false)
+let hydratedId = ''
+
+effect(() => {
+  const current = review()
+  if (!open() || !current) {
+    hydratedId = ''
+    return
+  }
+  if (hydratedId === current.id)
+    return
+  hydratedId = current.id
+  title.set(current.title)
+  content.set(current.content)
+  rating.set(current.rating)
+  approved.set(current.approved)
+  featured.set(current.featured)
+})
+
+function submit(): void {
+  if (!title().trim() || !content().trim())
+    return
+  emit('submit', {
+    title: title().trim(),
+    content: content().trim(),
+    rating: rating(),
+    isApproved: approved(),
+    isFeatured: featured(),
+  })
+}
+
+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 edit review dialog" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
+  <section role="dialog" aria-modal="true" aria-labelledby="review-edit-title" class="overflow-hidden relative max-w-xl 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="review-edit-title" class="font-semibold text-gray-900 text-lg dark:text-white">Edit review</h2>
+        <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">{{ review()?.customerName }} on {{ review()?.productName }}</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="mt-5 space-y-4">
+          <label class="block">
+            <span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Title</span>
+            <input x-model="title" type="text" maxlength="100" 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">Review</span>
+            <textarea x-model="content" rows="6" maxlength="2000" 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"></textarea>
+          </label>
+          <label class="block">
+            <span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Rating</span>
+            <select x-model.number="rating" 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="5">5 stars</option>
+              <option value="4">4 stars</option>
+              <option value="3">3 stars</option>
+              <option value="2">2 stars</option>
+              <option value="1">1 star</option>
+            </select>
+          </label>
+          <div class="grid gap-3 grid-cols-1 sm:grid-cols-2">
+            <label class="flex gap-3 items-center p-3 border border-gray-200 rounded-lg dark:border-neutral-700">
+              <input x-model="approved" type="checkbox" class="h-4 w-4 text-blue-600 border-gray-300 rounded" />
+              <span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Approved</span>
+            </label>
+            <label class="flex gap-3 items-center p-3 border border-gray-200 rounded-lg dark:border-neutral-700">
+              <input x-model="featured" type="checkbox" class="h-4 w-4 text-blue-600 border-gray-300 rounded" />
+              <span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Featured</span>
+            </label>
+          </div>
+        </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="!title().trim() || !content().trim()">Save review</Button>
+      </footer>
+    </form>
+  </section>
+</div>