@stacksjs/defaults 0.70.206 → 0.70.208

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

@@ -0,0 +1,370 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - Commerce Products')
+<div class="p-6 space-y-6">
+
+  <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>
+
+<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