@stacksjs/defaults 0.70.229 → 0.70.231

package/views/dashboard/commerce/products/index.stx

@@ -1,370 +1,10 @@
 @extends('layouts/default')
 
 @section('content')
-@title('Dashboard - Commerce Products')
-<div class="p-6 space-y-6">
+@title('Dashboard - Products')
 
-  <PageHeader title="Products" description="Manage commerce products">
-    <template #actions>
-      <Button variant="primary" @click="openAddProductModal()">
-        <div class="h-4 w-4 i-hugeicons-plus-sign"></div>
-        Add Product
-      </Button>
-    </template>
-  </PageHeader>
-
-  <div class="overflow-hidden bg-white dark:bg-neutral-800 rounded-lg shadow">
-    <div class="px-4 py-5 sm:px-6 border-b border-gray-200 dark:border-neutral-700">
-      <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between mt-4">
-        <div class="w-full md:w-96"><SearchFilter placeholder="Search products..." @search="handleSearch" /></div>
-        <div class="flex flex-col gap-4 sm:flex-row">
-          <select x-model="categoryFilter" class="block pl-3 pr-10 py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white dark:bg-neutral-800 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-700 focus:ring-2 focus:ring-blue-600 focus:ring-inset">
-            <option value="all">All Categories</option>
-            <template :for="category in categoryFilterOptions">
-              <option value="{{ category.name }}">{{ category.name }} ({{ category.count }})</option>
-            </template>
-          </select>
-
-          <div class="flex rounded-md shadow-sm">
-            <button type="button" @click="setViewMode('grid')" class="inline-flex relative focus:z-10 items-center px-3 py-2 font-semibold text-sm ring-1 ring-gray-300 ring-inset rounded-l-md dark:ring-neutral-700 {{ viewMode === 'grid' ? 'bg-blue-600 text-white' : 'bg-white dark:bg-neutral-800 text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-neutral-700' }}">
-              <div class="h-5 w-5 i-hugeicons-grid"></div>
-            </button>
-            <button type="button" @click="setViewMode('list')" class="inline-flex relative focus:z-10 items-center -ml-px px-3 py-2 font-semibold text-sm ring-1 ring-gray-300 ring-inset rounded-r-md dark:ring-neutral-700 {{ viewMode === 'list' ? 'bg-blue-600 text-white' : 'bg-white dark:bg-neutral-800 text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-neutral-700' }}">
-              <div class="h-5 w-5 i-hugeicons-right-to-left-list-number"></div>
-            </button>
-          </div>
-
-          <select x-model.number="itemsPerPage" class="block pl-3 pr-10 py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white dark:bg-neutral-800 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-700 focus:ring-2 focus:ring-blue-600 focus:ring-inset">
-            <option value="5">5 per page</option>
-            <option value="10">10 per page</option>
-            <option value="25">25 per page</option>
-            <option value="50">50 per page</option>
-          </select>
-        </div>
-      </div>
-    </div>
-
-    <ProductsTable
-      :products="paginatedProducts"
-      :searchQuery="searchQuery"
-      :categoryFilter="categoryFilter"
-      :sortBy="sortBy"
-      :sortOrder="sortOrder"
-      :currentPage="currentPage"
-      :itemsPerPage="itemsPerPage"
-      :categories="categoryNames"
-      @toggle-sort="toggleSort"
-      @change-page="handlePageChange"
-      @previous-page="handlePrevPage"
-      @next-page="handleNextPage"
-      @view-product="viewProduct"
-      @edit-product="editProduct"
-    />
-
-    <div class="px-4 py-3 bg-gray-50 dark:bg-neutral-900 border-gray-200 border-t dark:border-neutral-700">
-      <Pagination :currentPage="currentPage" :totalItems="totalItems" :itemsPerPage="itemsPerPage" @prev="handlePrevPage" @next="handleNextPage" @page="handlePageChange" />
-    </div>
-  </div>
-
-  <!-- Add Product Modal -->
-  <div :show="showProductModal" class="fixed inset-0 overflow-y-auto z-10">
-    <div class="flex items-end justify-center sm:items-center p-4 sm:p-0 min-h-full text-center">
-      <div class="fixed inset-0 bg-gray-500 bg-opacity-75 dark:bg-neutral-900 dark:bg-opacity-75 transition-opacity" @click="closeProductModal()"></div>
-
-      <div class="overflow-hidden relative pb-4 pt-5 px-4 sm:my-8 sm:p-6 sm:max-w-lg sm:w-full text-left bg-white dark:bg-neutral-800 rounded-lg shadow-xl transition-all transform">
-        <div class="absolute right-0 top-0 pr-4 pt-4">
-          <button type="button" @click="closeProductModal()" class="text-gray-400 dark:text-neutral-500 hover:text-gray-500 dark:hover:text-gray-400 bg-white dark:bg-neutral-800 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
-            <span class="sr-only">Close</span>
-            <div class="h-6 w-6 i-hugeicons-can"></div>
-          </button>
-        </div>
-        <div class="sm:flex sm:items-start">
-          <div class="mt-3 sm:ml-4 sm:mt-0 w-full text-center sm:text-left">
-            <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-white">Add New Product</h3>
-            <div class="mt-4">
-              <form @submit.prevent="addProduct()" class="space-y-4">
-                <div>
-                  <label for="product-name" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Name</label>
-                  <input type="text" id="product-name" x-model="newName" required class="block mt-1 w-full sm:text-sm dark:text-white dark:bg-neutral-700 border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:ring-blue-500 shadow-sm" />
-                </div>
-                <div>
-                  <label for="product-description" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Description</label>
-                  <textarea id="product-description" x-model="newDescription" rows="3" class="block mt-1 w-full sm:text-sm dark:text-white dark:bg-neutral-700 border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:ring-blue-500 shadow-sm"></textarea>
-                </div>
-                <div class="grid gap-4 grid-cols-2">
-                  <div>
-                    <label for="product-price" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Price ($)</label>
-                    <input type="number" id="product-price" x-model.number="newPrice" min="0" step="0.01" required class="block mt-1 w-full sm:text-sm dark:text-white dark:bg-neutral-700 border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:ring-blue-500 shadow-sm" />
-                  </div>
-                  <div>
-                    <label for="product-sale-price" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Sale Price ($)</label>
-                    <input type="number" id="product-sale-price" x-model.number="newSalePrice" min="0" step="0.01" class="block mt-1 w-full sm:text-sm dark:text-white dark:bg-neutral-700 border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:ring-blue-500 shadow-sm" />
-                  </div>
-                </div>
-                <div class="grid gap-4 grid-cols-2">
-                  <div>
-                    <label for="product-category" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Category</label>
-                    <select id="product-category" x-model.number="newCategoryId" required class="block mt-1 w-full sm:text-sm dark:text-white dark:bg-neutral-700 border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:ring-blue-500 shadow-sm">
-                      <option value="0">Select a category</option>
-                      <template :for="category in categoryOptions">
-                        <option value="{{ category.id }}">{{ category.name }}</option>
-                      </template>
-                    </select>
-                  </div>
-                  <div>
-                    <label for="product-manufacturer" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Manufacturer</label>
-                    <select id="product-manufacturer" x-model.number="newManufacturerId" required class="block mt-1 w-full sm:text-sm dark:text-white dark:bg-neutral-700 border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:ring-blue-500 shadow-sm">
-                      <option value="0">Select a manufacturer</option>
-                      <template :for="manufacturer in manufacturerOptions">
-                        <option value="{{ manufacturer.id }}">{{ manufacturer.name }}</option>
-                      </template>
-                    </select>
-                  </div>
-                </div>
-                <div class="grid gap-4 grid-cols-2">
-                  <div>
-                    <label for="product-inventory" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Inventory</label>
-                    <input type="number" id="product-inventory" x-model.number="newInventory" min="0" required class="block mt-1 w-full sm:text-sm dark:text-white dark:bg-neutral-700 border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:ring-blue-500 shadow-sm" />
-                  </div>
-                  <div>
-                    <label for="product-status" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Status</label>
-                    <select id="product-status" x-model="newStatus" class="block mt-1 w-full sm:text-sm dark:text-white dark:bg-neutral-700 border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:ring-blue-500 shadow-sm">
-                      <option value="Active">Active</option>
-                      <option value="Inactive">Inactive</option>
-                      <option value="Draft">Draft</option>
-                      <option value="Archived">Archived</option>
-                    </select>
-                  </div>
-                </div>
-                <div class="mt-4">
-                  <div class="flex items-center">
-                    <input id="product-featured" type="checkbox" x-model="newFeatured" class="h-4 w-4 text-blue-600 border-gray-300 rounded dark:border-neutral-600 focus:ring-blue-500" />
-                    <label for="product-featured" class="block ml-2 font-medium text-gray-700 text-sm dark:text-neutral-300">Featured product</label>
-                  </div>
-                </div>
-                <div>
-                  <label for="product-image" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Image URL</label>
-                  <input type="text" id="product-image" x-model="newImageUrl" class="block mt-1 w-full sm:text-sm dark:text-white dark:bg-neutral-700 border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:ring-blue-500 shadow-sm" />
-                </div>
-
-                <div class="sm:flex sm:flex-row-reverse mt-5 sm:mt-4">
-                  <button type="submit" class="inline-flex justify-center px-3 py-2 sm:ml-3 w-full sm:w-auto font-semibold text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md shadow-sm">Add Product</button>
-                  <button type="button" @click="closeProductModal()" class="inline-flex justify-center mt-3 px-3 py-2 sm:mt-0 w-full sm:w-auto font-semibold text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 hover:bg-gray-50 dark:hover:bg-neutral-600 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 shadow-sm">Cancel</button>
-                </div>
-              </form>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+<div class="p-4 lg:p-8 min-h-[100dvh] dark:bg-neutral-900">
+  <CommerceProductsDashboard />
 </div>
 
-<script client>
-import { useProducts } from '../../../../functions/commerce/products'
-import { useCategories } from '../../../../functions/commerce/products/categories'
-import { useManufacturers } from '../../../../functions/commerce/products/manufacturers'
-
-interface Product {
-  id?: number
-  uuid?: string
-  name: string
-  description: string
-  price?: number
-  image_url?: string
-  is_available?: number
-  inventory_count?: number
-  preparation_time?: number
-  allergens?: string
-  nutritional_info?: string
-  category_id?: number
-  manufacturer_id?: number
-  created_at?: string
-  category?: { id?: number, name?: string }
-  manufacturer?: { id?: number, name?: string }
-}
-
-interface Category { id: number, name: string }
-interface Manufacturer { id: number, name: string }
-
-const { products, createProduct, fetchProducts } = useProducts()
-const { categories, fetchCategories } = useCategories()
-const { manufacturers, fetchManufacturers } = useManufacturers()
-
-const viewMode = state('list')
-const categoryFilter = state('all')
-const sortBy = state('name')
-const sortOrder = state<'asc' | 'desc'>('asc')
-
-const searchQuery = state('')
-const currentPage = state(1)
-const itemsPerPage = state(5)
-
-const showProductModal = state(false)
-
-const newName = state('')
-const newDescription = state('')
-const newPrice = state(0)
-const newSalePrice = state<number | null>(null)
-const newCategoryId = state(0)
-const newManufacturerId = state(0)
-const newImageUrl = state('')
-const newInventory = state(0)
-const newStatus = state('Active')
-const newFeatured = state(false)
-
-function categoryOptions(): Category[] {
-  return ((categories.value as Category[]) || [])
-}
-
-function manufacturerOptions(): Manufacturer[] {
-  return ((manufacturers.value as Manufacturer[]) || [])
-}
-
-const filteredProducts = derived(() => {
-  const list = (products.value as Product[]) || []
-  const query = searchQuery().toLowerCase()
-  const cat = categoryFilter()
-  return list
-    .filter((product) => {
-      const matchesSearch = product.name.toLowerCase().includes(query)
-        || product.description.toLowerCase().includes(query)
-        || (product.category?.name || '').toLowerCase().includes(query)
-      const matchesCategory = cat === 'all' || (product.category?.name || '') === cat
-      return matchesSearch && matchesCategory
-    })
-    .sort((a, b) => {
-      let comparison = 0
-      const sb = sortBy()
-      if (sb === 'name')
-        comparison = a.name.localeCompare(b.name)
-      else if (sb === 'price')
-        comparison = (a.price || 0) - (b.price || 0)
-      else if (sb === 'inventory')
-        comparison = (a.inventory_count || 0) - (b.inventory_count || 0)
-      else if (sb === 'dateAdded') {
-        const dateA = a.created_at ? new Date(a.created_at).getTime() : 0
-        const dateB = b.created_at ? new Date(b.created_at).getTime() : 0
-        comparison = dateA - dateB
-      }
-      return sortOrder() === 'asc' ? comparison : -comparison
-    })
-})
-
-const paginatedProducts = derived(() => {
-  const start = (currentPage() - 1) * itemsPerPage()
-  return filteredProducts().slice(start, start + itemsPerPage())
-})
-
-const totalItems = derived(() => filteredProducts().length)
-
-const categoryFilterOptions = derived(() => {
-  const list = (products.value as Product[]) || []
-  const counts = list.reduce((acc, product) => {
-    const name = product.category?.name || 'Unknown'
-    acc[name] = (acc[name] || 0) + 1
-    return acc
-  }, {} as Record<string, number>)
-  return Object.entries(counts).map(([name, count]) => ({ name, count }))
-})
-
-const categoryNames = derived(() => categoryFilterOptions().map(c => c.name))
-
-function setViewMode(mode: string): void {
-  viewMode.set(mode)
-}
-
-function handleSearch(query: string): void {
-  searchQuery.set(query)
-  currentPage.set(1)
-}
-
-function handlePrevPage(): void {
-  if (currentPage() > 1)
-    currentPage.update(p => p - 1)
-}
-
-function handleNextPage(): void {
-  const totalPages = Math.ceil(totalItems() / itemsPerPage())
-  if (currentPage() < totalPages)
-    currentPage.update(p => p + 1)
-}
-
-function handlePageChange(page: number): void {
-  currentPage.set(page)
-}
-
-function toggleSort(column: string): void {
-  if (sortBy() === column) {
-    sortOrder.set(sortOrder() === 'asc' ? 'desc' : 'asc')
-  }
-  else {
-    sortBy.set(column)
-    sortOrder.set('asc')
-  }
-}
-
-function viewProduct(product: Product): void {
-  navigate(`/dashboard/commerce/products/${product.id}`)
-}
-
-function editProduct(product: Product): void {
-  navigate(`/dashboard/commerce/products/${product.id}?edit=true`)
-}
-
-function resetForm(): void {
-  newName.set('')
-  newDescription.set('')
-  newPrice.set(0)
-  newSalePrice.set(null)
-  newCategoryId.set(0)
-  newManufacturerId.set(0)
-  newImageUrl.set('')
-  newInventory.set(0)
-  newStatus.set('Active')
-  newFeatured.set(false)
-}
-
-function openAddProductModal(): void {
-  resetForm()
-  showProductModal.set(true)
-}
-
-function closeProductModal(): void {
-  showProductModal.set(false)
-}
-
-async function addProduct(): Promise<void> {
-  try {
-    await createProduct({
-      name: newName(),
-      description: newDescription(),
-      price: newPrice(),
-      image_url: newImageUrl(),
-      is_available: newStatus() === 'Active' ? 1 : 0,
-      inventory_count: newInventory(),
-      preparation_time: 0,
-      allergens: '',
-      nutritional_info: '',
-      category_id: newCategoryId(),
-      manufacturer_id: newManufacturerId(),
-    })
-    closeProductModal()
-    await fetchProducts()
-  }
-  catch (error) {
-    // eslint-disable-next-line no-console
-    console.error('Failed to create product:', error)
-  }
-}
-
-onMount(async () => {
-  await Promise.all([
-    fetchProducts(),
-    fetchCategories(),
-    fetchManufacturers(),
-  ])
-})
-</script>
-
 @endsection