@stacksjs/defaults 0.70.229 → 0.70.231

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

@@ -0,0 +1,301 @@
+<script client>
+import type {
+  ProductUnitOption,
+  ProductUnitRecord,
+  ProductUnitSummary,
+} from '../../../../app/Actions/Dashboard/Commerce/product-unit-records'
+import { DashboardApiError, dashboardApi } from '../../../../functions/dashboard-api'
+import { pushToast } from '../../../../functions/toasts'
+
+interface ProductUnitIndexResponse {
+  records: ProductUnitRecord[]
+  products: ProductUnitOption[]
+  summary: ProductUnitSummary
+}
+
+interface ProductUnitWritePayload {
+  name: string
+  abbreviation: string
+  type: string
+  description: string
+  isDefault: boolean
+  productId: number | null
+}
+
+const emptySummary: ProductUnitSummary = { total: 0, defaults: 0, types: 0, linkedProducts: 0, defaultConflicts: 0 }
+const records = state<ProductUnitRecord[]>([])
+const products = state<ProductUnitOption[]>([])
+const summary = state<ProductUnitSummary>({ ...emptySummary })
+const search = state('')
+const typeFilter = state('all')
+const defaultFilter = state('all')
+const sort = state('name')
+const loading = state(true)
+const loadError = state('')
+const dialogOpen = state(false)
+const dialogMode = state<'add' | 'edit'>('add')
+const editingRecord = state<ProductUnitRecord | null>(null)
+const deletingRecord = state<ProductUnitRecord | null>(null)
+const saving = state(false)
+const deleting = state(false)
+const validationErrors = state<Record<string, string>>({})
+
+function unitTypes(): string[] {
+  return [...new Set(records().map(record => record.type).filter(Boolean))].sort()
+}
+
+function visibleRecords(): ProductUnitRecord[] {
+  const query = search().trim().toLowerCase()
+  const type = typeFilter()
+  const defaultState = defaultFilter()
+
+  return [...records()]
+    .filter((record) => {
+      if (type !== 'all' && record.type !== type)
+        return false
+      if (defaultState === 'default' && !record.isDefault)
+        return false
+      if (defaultState === 'not-default' && record.isDefault)
+        return false
+      return !query || [
+        record.name,
+        record.abbreviation,
+        record.type,
+        record.description,
+        record.productName,
+      ].some(value => value.toLowerCase().includes(query))
+    })
+    .sort((left, right) => {
+      if (sort() === 'type')
+        return left.type.localeCompare(right.type) || left.name.localeCompare(right.name)
+      if (sort() === 'product')
+        return left.productName.localeCompare(right.productName) || left.name.localeCompare(right.name)
+      if (sort() === 'newest')
+        return Number(right.id) - Number(left.id)
+      return left.name.localeCompare(right.name)
+    })
+}
+
+function metricCards(): Array<{ label: string, value: string }> {
+  return [
+    { label: 'Product units', value: String(summary().total) },
+    { label: 'Defaults', value: String(summary().defaults) },
+    { label: 'Unit types', value: String(summary().types) },
+    { label: 'Linked products', value: String(summary().linkedProducts) },
+  ]
+}
+
+async function loadUnits(): Promise<void> {
+  loading.set(true)
+  loadError.set('')
+  try {
+    const data = await dashboardApi<ProductUnitIndexResponse>('/api/dashboard/commerce/units')
+    records.set(Array.isArray(data.records) ? data.records : [])
+    products.set(Array.isArray(data.products) ? data.products : [])
+    summary.set(data.summary ?? { ...emptySummary })
+  }
+  catch (error) {
+    loadError.set('Product unit records could not be loaded.')
+    pushToast('error', 'Could not load product units', {
+      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: ProductUnitRecord): 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 saveUnit(payload: ProductUnitWritePayload): Promise<void> {
+  const current = editingRecord()
+  const editing = dialogMode() === 'edit' && current !== null
+  const path = editing
+    ? `/api/dashboard/commerce/units/${current.id}`
+    : '/api/dashboard/commerce/units'
+  const body = {
+    name: payload.name,
+    abbreviation: payload.abbreviation,
+    type: payload.type,
+    description: payload.description,
+    productId: payload.productId,
+    isDefault: payload.isDefault,
+  }
+
+  saving.set(true)
+  validationErrors.set({})
+  try {
+    await dashboardApi(path, {
+      method: editing ? 'PATCH' : 'POST',
+      body,
+    })
+
+    dialogOpen.set(false)
+    editingRecord.set(null)
+    pushToast('success', editing ? 'Product unit updated' : 'Product unit added')
+    await loadUnits()
+  }
+  catch (error) {
+    if (error instanceof DashboardApiError)
+      validationErrors.set(error.fields ?? {})
+    pushToast('error', 'Could not save product unit', {
+      detail: error instanceof Error ? error.message : String(error),
+    })
+  }
+  finally {
+    saving.set(false)
+  }
+}
+
+function openDelete(record: ProductUnitRecord): void {
+  deletingRecord.set(record)
+}
+
+function closeDelete(): void {
+  if (!deleting())
+    deletingRecord.set(null)
+}
+
+async function deleteUnit(): Promise<void> {
+  const current = deletingRecord()
+  if (!current)
+    return
+  deleting.set(true)
+  try {
+    await dashboardApi(`/api/dashboard/commerce/units/${current.id}`, { method: 'DELETE' })
+    deletingRecord.set(null)
+    pushToast('success', 'Product unit deleted')
+    await loadUnits()
+  }
+  catch (error) {
+    pushToast('error', 'Could not delete product unit', {
+      detail: error instanceof Error ? error.message : String(error),
+    })
+  }
+  finally {
+    deleting.set(false)
+  }
+}
+
+onMount(() => {
+  void loadUnits()
+})
+</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">Units</h1>
+      <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Manage native ProductUnit records and their product relationships.</p>
+    </div>
+    <div class="flex gap-2">
+      <Button variant="secondary" :loading="loading()" @click="loadUnits">
+        <span :if="!loading()" class="h-4 w-4 i-hugeicons-refresh"></span>
+        Refresh
+      </Button>
+      <Button @click="openAdd()">
+        <span class="h-4 w-4 i-hugeicons-add-01"></span>
+        Add unit
+      </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>
+  <div :if="summary().defaultConflicts > 0" class="flex gap-3 items-start p-4 text-amber-800 text-sm dark:text-amber-200 bg-amber-50 dark:bg-amber-950/30 border border-amber-200 rounded-lg dark:border-amber-900">
+    <span class="shrink-0 mt-0.5 h-5 w-5 i-hugeicons-alert-02"></span>
+    <p>{{ summary().defaultConflicts }} unit {{ summary().defaultConflicts === 1 ? 'type has' : 'types have' }} competing defaults. Save the intended default to normalize that type.</p>
+  </div>
+
+  <section aria-label="Product unit metrics" class="grid gap-3 grid-cols-2 lg:grid-cols-4">
+    <template :for="item in metricCards()" :key="item.label">
+      <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
+        <p class="text-gray-500 text-xs dark:text-neutral-400">{{ item.label }}</p>
+        <p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ item.value }}</p>
+      </article>
+    </template>
+  </section>
+
+  <section class="space-y-3">
+    <div class="grid gap-3 grid-cols-1 sm:grid-cols-2 xl:grid-cols-4">
+      <label class="relative sm:col-span-2">
+        <span class="sr-only">Search product units</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 product units" 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">Unit type</span>
+        <select x-model="typeFilter" 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">All unit types</option>
+          <template :for="type in unitTypes()" :key="type">
+            <option :value="type">{{ type }}</option>
+          </template>
+        </select>
+      </label>
+      <label>
+        <span class="sr-only">Default state</span>
+        <select x-model="defaultFilter" 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">All units</option>
+          <option value="default">Defaults only</option>
+          <option value="not-default">Not default</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">{{ visibleRecords().length }} matching product units</p>
+      <label class="flex gap-2 items-center text-gray-500 text-sm dark:text-neutral-400">
+        Sort
+        <select x-model="sort" class="px-3 py-1.5 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="type">Type</option>
+          <option value="product">Product</option>
+          <option value="newest">Newest</option>
+        </select>
+      </label>
+    </div>
+
+    <CommerceUnitsTable :records="visibleRecords()" :loading="loading()" @edit="openEdit" @delete="openDelete" />
+  </section>
+</div>
+
+<CommerceUnitDialog
+  :open="dialogOpen()"
+  :mode="dialogMode()"
+  :record="editingRecord()"
+  :products="products()"
+  :types="unitTypes()"
+  :busy="saving()"
+  :errors="validationErrors()"
+  @submit="saveUnit"
+  @close="closeDialog()"
+/>
+
+<CommerceUnitDeleteDialog
+  :open="Boolean(deletingRecord())"
+  :record="deletingRecord()"
+  :busy="deleting()"
+  @confirm="deleteUnit()"
+  @close="closeDelete()"
+/>

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

@@ -0,0 +1,71 @@
+<script client>
+import type { ProductUnitRecord } from '../../../../app/Actions/Dashboard/Commerce/product-unit-records'
+
+const records = useReactiveProp('records', [] as ProductUnitRecord[])
+const loading = useReactiveProp('loading', false)
+const emit = defineEmits()
+
+function formatDate(value: string): string {
+  if (!value)
+    return 'Unknown'
+  const date = new Date(value)
+  return Number.isNaN(date.getTime())
+    ? value
+    : new Intl.DateTimeFormat(undefined, { dateStyle: 'medium' }).format(date)
+}
+</script>
+
+<div class="overflow-hidden bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
+  <div :if="loading() && records().length === 0" class="flex items-center justify-center py-16 text-gray-500 text-sm dark:text-neutral-400">
+    <span class="mr-2 h-5 w-5 animate-spin i-hugeicons-loading-03"></span>
+    Loading product units
+  </div>
+
+  <div :else-if="records().length === 0" class="px-6 py-16 text-center">
+    <span class="inline-block h-8 w-8 text-gray-400 i-hugeicons-package"></span>
+    <p class="mt-3 font-medium text-gray-900 text-sm dark:text-white">No product units found</p>
+    <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Adjust the filters or add a ProductUnit record.</p>
+  </div>
+
+  <div :else 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/50">
+        <tr>
+          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Unit</th>
+          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Type</th>
+          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Product</th>
+          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Description</th>
+          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Created</th>
+          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-right text-xs dark:text-neutral-300"><span class="sr-only">Actions</span></th>
+        </tr>
+      </thead>
+      <tbody class="divide-gray-200 divide-y dark:divide-neutral-700">
+        <template :for="record in records()" :key="record.id">
+          <tr class="align-top">
+            <td class="px-4 py-4">
+              <div class="flex gap-2 items-center">
+                <p class="font-medium text-gray-900 text-sm dark:text-white">{{ record.name }}</p>
+                <span :if="record.isDefault" class="px-2 py-0.5 font-medium text-emerald-700 text-xs dark:text-emerald-300 bg-emerald-50 dark:bg-emerald-950/40 rounded-full">Default</span>
+              </div>
+              <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ record.abbreviation }}</p>
+            </td>
+            <td class="px-4 py-4 text-gray-600 text-sm whitespace-nowrap dark:text-neutral-300">{{ record.type }}</td>
+            <td class="px-4 py-4 text-gray-600 text-sm dark:text-neutral-300">{{ record.productName || 'Unassigned' }}</td>
+            <td class="px-4 py-4 max-w-sm text-gray-600 text-sm dark:text-neutral-300">{{ record.description || 'No description' }}</td>
+            <td class="px-4 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">{{ formatDate(record.createdAt) }}</td>
+            <td class="px-4 py-4">
+              <div class="flex gap-1 justify-end">
+                <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-01"></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/CommerceVariantDeleteDialog.stx

@@ -0,0 +1,17 @@
+<script client>
+import type { ProductVariantRecord } from '../../../../app/Actions/Dashboard/Commerce/product-variant-records'
+
+const open = useReactiveProp('open', false)
+const record = useReactiveProp('record', null as ProductVariantRecord | 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 product variant dialog" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
+  <section role="dialog" aria-modal="true" aria-labelledby="product-variant-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="product-variant-delete-title" class="font-semibold text-gray-900 text-lg dark:text-white">Delete product variant?</h2>
+    <p class="mt-2 text-gray-600 text-sm dark:text-neutral-300"><span class="font-medium">{{ record()?.variant }}</span> will be permanently removed. <span :if="record()?.productName">The linked product {{ record()?.productName }} will remain.</span></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 product variant</Button></footer>
+  </section>
+</div>

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

@@ -0,0 +1,86 @@
+<script client>
+import type { ProductVariantOption, ProductVariantRecord } from '../../../../app/Actions/Dashboard/Commerce/product-variant-records'
+
+const open = useReactiveProp('open', false)
+const mode = useReactiveProp('mode', 'add')
+const record = useReactiveProp('record', null as ProductVariantRecord | null)
+const products = useReactiveProp('products', [] as ProductVariantOption[])
+const types = useReactiveProp('types', [] as string[])
+const busy = useReactiveProp('busy', false)
+const errors = useReactiveProp('errors', {} as Record<string, string>)
+const emit = defineEmits()
+const variant = state('')
+const type = state('')
+const description = state('')
+const options = state('')
+const status = state<'active' | 'inactive' | 'draft'>('active')
+const productId = state('')
+let hydrationKey = ''
+
+effect(() => {
+  if (!open()) {
+    hydrationKey = ''
+    return
+  }
+  const current = record()
+  const key = `${mode()}:${current?.id || 'new'}`
+  if (hydrationKey === key)
+    return
+  hydrationKey = key
+  variant.set(current?.variant || '')
+  type.set(current?.type || '')
+  description.set(current?.description || '')
+  options.set(current?.options.join(', ') || '')
+  status.set(current?.status || 'active')
+  productId.set(current?.productId || '')
+})
+
+function submit(): void {
+  if (!variant().trim() || !type().trim())
+    return
+  emit('submit', {
+    variant: variant().trim(),
+    type: type().trim(),
+    description: description().trim(),
+    options: options().split(/[,\n]/).map(option => option.trim()).filter(Boolean),
+    status: status(),
+    productId: productId() ? Number(productId()) : null,
+  })
+}
+
+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 product variant dialog" class="absolute inset-0 bg-black/45" @click="emit('close')"></button>
+  <section role="dialog" aria-modal="true" aria-labelledby="product-variant-dialog-title" class="relative max-w-lg 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="product-variant-dialog-title" class="font-semibold text-gray-900 text-lg dark:text-white">{{ mode() === 'edit' ? 'Edit product variant' : 'Add product variant' }}</h2>
+        <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Fields and product assignment follow the ProductVariant 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="mt-5 space-y-4">
+          <div class="grid gap-4 sm:grid-cols-2">
+            <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Variant</span><input x-model="variant" 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">Type</span><input x-model="type" type="text" list="product-variant-types" 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" /><datalist id="product-variant-types"><template :for="variantType in types()" :key="variantType"><option :value="variantType"></option></template></datalist></label>
+          </div>
+          <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Product</span><select x-model="productId" 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="">Unassigned</option><template :for="product in products()" :key="product.id"><option :value="product.id">{{ product.name }}</option></template></select></label>
+          <label class="block"><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>
+          <label class="block"><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Options</span><textarea x-model="options" rows="3" placeholder="Small, Medium, Large" 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><span class="block mt-1 text-gray-500 text-xs dark:text-neutral-400">Separate options with commas or new lines.</span></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><option value="draft">Draft</option></select></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="!variant().trim() || !type().trim()">{{ mode() === 'edit' ? 'Save product variant' : 'Add product variant' }}</Button>
+      </footer>
+    </form>
+  </section>
+</div>