@stacksjs/defaults 0.70.207 → 0.70.208

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

@@ -0,0 +1,563 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Product Detail')
+<PageLayout variant="bare">
+  <div class="container mx-auto px-4 py-8">
+    <!-- Loading state -->
+    <div :show="loading" class="flex items-center justify-center h-64">
+      <div class="h-12 w-12 border-b-2 border-primary border-t-2 rounded-full animate-spin"></div>
+    </div>
+
+    <div :show="hasProduct" class="overflow-hidden bg-white dark:bg-neutral-800 rounded-lg shadow-md">
+      <!-- Header with back button and actions -->
+      <div class="flex items-center justify-between p-6 border-b border-gray-200 dark:border-neutral-700">
+        <div class="flex items-center">
+          <button @click="goBack()" class="mr-4 text-gray-500 dark:text-neutral-400 hover:text-gray-700 dark:hover:text-gray-200">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+            </svg>
+          </button>
+          <h1 class="font-bold text-2xl text-gray-900 dark:text-white">{{ productName() }}</h1>
+        </div>
+        <div class="flex space-x-2">
+          <button @click="editProduct()" class="px-4 py-2 text-white bg-primary hover:bg-primary-dark rounded-md transition-colors">Edit</button>
+          <button @click="deleteProduct()" class="px-4 py-2 text-white bg-red-500 hover:bg-red-600 rounded-md transition-colors">Delete</button>
+        </div>
+      </div>
+
+      <!-- Product content -->
+      <div class="grid gap-8 grid-cols-1 md:grid-cols-2 p-6">
+        <!-- Images and videos section -->
+        <div>
+          <div class="aspect-square overflow-hidden mb-4 bg-gray-100 dark:bg-neutral-700 rounded-lg">
+            <img src="{{ activeImage() }}" alt="{{ productName() }}" class="object-contain h-full w-full">
+          </div>
+
+          <div class="grid gap-2 grid-cols-5">
+            <template :for="(image, index) in productImages">
+              <div @click="selectImage({{ index }})" class="aspect-square overflow-hidden rounded-md cursor-pointer {{ activeImageIndex() === index ? 'ring-2 ring-primary' : '' }}">
+                <img src="{{ image }}" alt="{{ productName() }} thumbnail {{ index + 1 }}" class="object-cover h-full w-full">
+              </div>
+            </template>
+
+            <template :for="(video, index) in productVideos">
+              <div @click="openVideoModal('{{ video }}')" class="flex aspect-square overflow-hidden items-center justify-center bg-gray-200 dark:bg-neutral-600 rounded-md cursor-pointer">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-gray-500 dark:text-neutral-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+              </div>
+            </template>
+          </div>
+        </div>
+
+        <!-- Product details -->
+        <div>
+          <div class="mb-6">
+            <div class="flex items-center justify-between mb-2">
+              <h2 class="font-bold text-3xl text-gray-900 dark:text-white">{{ productName() }}</h2>
+              <span class="px-3 py-1 text-sm rounded-full {{ statusClass() }}">{{ productStatus() }}</span>
+            </div>
+            <p class="font-semibold text-2xl text-gray-900 dark:text-white">${{ productPriceFormatted() }}</p>
+          </div>
+
+          <div class="mb-6">
+            <h3 class="mb-2 font-semibold text-gray-900 text-lg dark:text-white">Description</h3>
+            <p class="text-gray-700 dark:text-neutral-300">{{ productDescription() }}</p>
+          </div>
+
+          <div class="grid gap-4 grid-cols-2 mb-6">
+            <div>
+              <h3 class="mb-2 font-semibold text-gray-900 text-lg dark:text-white">Details</h3>
+              <ul class="space-y-2">
+                <li class="flex justify-between">
+                  <span class="text-gray-600 dark:text-neutral-400">Category:</span>
+                  <span class="text-gray-900 dark:text-white">{{ productCategory() }}</span>
+                </li>
+                <li class="flex justify-between">
+                  <span class="text-gray-600 dark:text-neutral-400">Manufacturer:</span>
+                  <span class="text-gray-900 dark:text-white">{{ productManufacturer() }}</span>
+                </li>
+                <li class="flex justify-between">
+                  <span class="text-gray-600 dark:text-neutral-400">Stock:</span>
+                  <span class="text-gray-900 dark:text-white">{{ productStock() }} {{ productUnit() }}s</span>
+                </li>
+                <li class="flex justify-between">
+                  <span class="text-gray-600 dark:text-neutral-400">Tax Rate:</span>
+                  <span class="text-gray-900 dark:text-white">{{ productTaxRate() }}%</span>
+                </li>
+              </ul>
+            </div>
+
+            <div>
+              <h3 class="mb-2 font-semibold text-gray-900 text-lg dark:text-white">Variants</h3>
+              <div :show="hasVariants">
+                <template :for="variant in productVariants">
+                  <span class="inline-block mb-2 mr-2 px-3 py-1 text-gray-800 text-sm dark:text-neutral-200 bg-gray-100 dark:bg-neutral-700 rounded-full">{{ variant }}</span>
+                </template>
+              </div>
+              <p :show="noVariants" class="text-gray-600 dark:text-neutral-400">No variants available</p>
+            </div>
+          </div>
+
+          <div class="mb-6">
+            <h3 class="mb-2 font-semibold text-gray-900 text-lg dark:text-white">Specifications</h3>
+            <div class="p-4 bg-gray-50 dark:bg-neutral-700 rounded-lg">
+              <dl class="grid gap-x-4 gap-y-2 grid-cols-1 sm:grid-cols-2">
+                <template :for="entry in productSpecificationEntries">
+                  <div class="pb-2 sm:pb-0 border-b border-gray-200 dark:border-neutral-600">
+                    <dt class="font-medium text-gray-500 text-sm dark:text-neutral-400">{{ entry.key }}</dt>
+                    <dd class="mt-1 text-gray-900 text-sm dark:text-white">{{ entry.value }}</dd>
+                  </div>
+                </template>
+              </dl>
+            </div>
+          </div>
+
+          <!-- Similar Products Section -->
+          <div class="mb-6">
+            <div class="flex items-center justify-between mb-2">
+              <h3 class="font-semibold text-gray-900 text-lg dark:text-white">Similar Products</h3>
+              <button @click="openSimilarProductsDialog()" class="text-blue-600 text-sm dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">Manage</button>
+            </div>
+
+            <div :show="hasSimilarProducts" class="grid gap-4 grid-cols-2">
+              <template :for="similar in similarProducts">
+                <div class="flex overflow-hidden flex-col border border-gray-200 rounded-lg dark:border-neutral-700">
+                  <img src="{{ similar.images[0] }}" alt="{{ similar.name }}" class="object-cover h-32 w-full">
+                  <div class="p-3">
+                    <h4 class="font-medium text-gray-900 dark:text-white">{{ similar.name }}</h4>
+                    <p class="text-gray-500 text-sm dark:text-neutral-400">{{ similar.category }}</p>
+                    <p class="mt-1 font-semibold text-gray-900 text-sm dark:text-white">${{ similar.price.toFixed(2) }}</p>
+                  </div>
+                </div>
+              </template>
+            </div>
+            <p :show="noSimilarProducts" class="text-gray-600 text-sm dark:text-neutral-400">No similar products available</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div :show="notFound" class="p-8 text-center">
+      <p class="text-gray-600 text-xl dark:text-neutral-400">Product not found</p>
+      <button @click="goBack()" class="mt-4 px-4 py-2 text-white bg-primary hover:bg-primary-dark rounded-md transition-colors">Back to Products</button>
+    </div>
+
+    <!-- Video Modal -->
+    <div :show="showVideoModal" class="flex fixed inset-0 z-50 items-center justify-center bg-black bg-opacity-75">
+      <div class="relative max-w-4xl w-full bg-white dark:bg-neutral-800 rounded-lg shadow-xl">
+        <div class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-neutral-700">
+          <h3 class="font-semibold text-gray-900 text-lg dark:text-white">Product Video</h3>
+          <button @click="closeVideoModal()" class="text-gray-500 dark:text-neutral-400 hover:text-gray-700 dark:hover:text-gray-200">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+        <div class="p-6">
+          <div class="flex aspect-video items-center justify-center bg-black">
+            <p class="text-white">Video would play here: {{ activeVideoUrl }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Edit Product Dialog -->
+    <div :show="showEditDialog" class="flex fixed inset-0 z-50 items-center justify-center bg-black/50">
+      <div class="fixed inset-0" aria-hidden="true" @click="closeEditDialog()"></div>
+      <div class="relative z-10 mx-auto p-6 max-w-2xl w-full bg-white dark:bg-neutral-800 rounded-xl shadow-xl">
+        <div class="flex items-center justify-between mb-4">
+          <h3 class="font-medium text-gray-900 text-lg dark:text-white">Edit Product</h3>
+          <button class="p-1 text-gray-400 dark:text-neutral-300 hover:text-gray-500 dark:hover:text-gray-100 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" @click="closeEditDialog()">
+            <div class="h-5 w-5 i-hugeicons-cancel-01"></div>
+          </button>
+        </div>
+
+        <div class="space-y-4">
+          <div class="grid gap-4 grid-cols-1 md:grid-cols-2">
+            <div>
+              <label for="edit-name" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Name</label>
+              <input id="edit-name" x-model="editName" type="text" 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="edit-price" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Price</label>
+              <input id="edit-price" x-model.number="editPrice" type="number" 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>
+              <label for="edit-category" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Category</label>
+              <input id="edit-category" x-model="editCategory" type="text" 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="edit-stock" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Stock</label>
+              <input id="edit-stock" x-model.number="editStock" type="number" 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="edit-status" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Status</label>
+              <select id="edit-status" x-model="editStatus" 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="Low Stock">Low Stock</option>
+                <option value="Out of Stock">Out of Stock</option>
+              </select>
+            </div>
+            <div>
+              <label for="edit-manufacturer" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Manufacturer</label>
+              <input id="edit-manufacturer" x-model="editManufacturer" type="text" 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>
+            <label for="edit-description" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Description</label>
+            <textarea id="edit-description" x-model="editDescription" rows="4" 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="flex justify-end mt-6 space-x-3">
+            <button @click="closeEditDialog()" class="px-4 py-2 font-medium text-gray-700 text-sm dark:text-white bg-white dark:bg-neutral-700 hover:bg-gray-50 dark:hover:bg-neutral-600 border border-gray-300 rounded-md dark:border-neutral-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 shadow-sm">Cancel</button>
+            <button @click="saveProduct()" class="px-4 py-2 font-medium text-sm text-white bg-blue-600 hover:bg-blue-700 border border-transparent rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 shadow-sm">Save Changes</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Similar Products Dialog -->
+    <div :show="showSimilarProductsDialog" class="flex fixed inset-0 z-50 items-center justify-center bg-black/50">
+      <div class="fixed inset-0" aria-hidden="true" @click="closeSimilarProductsDialog()"></div>
+      <div class="relative z-10 mx-auto p-6 max-w-2xl w-full bg-white dark:bg-neutral-800 rounded-xl shadow-xl">
+        <div class="flex items-center justify-between mb-4">
+          <h3 class="font-medium text-gray-900 text-lg dark:text-white">Manage Similar Products</h3>
+          <button class="p-1 text-gray-400 dark:text-neutral-300 hover:text-gray-500 dark:hover:text-gray-100 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" @click="closeSimilarProductsDialog()">
+            <div class="h-5 w-5 i-hugeicons-cancel-01"></div>
+          </button>
+        </div>
+
+        <div class="space-y-4">
+          <p class="text-gray-500 text-sm dark:text-neutral-400">
+            Select products that are similar to <strong>{{ productName() }}</strong>. These will be shown as recommendations.
+          </p>
+
+          <div class="overflow-y-auto max-h-96 border border-gray-200 rounded-md dark:border-neutral-700">
+            <ul class="divide-gray-200 divide-y dark:divide-neutral-700">
+              <template :for="similar in otherProducts">
+                <li class="flex items-center px-4 py-3 hover:bg-gray-50 dark:hover:bg-neutral-700">
+                  <input id="similar-product-{{ similar.id }}" type="checkbox" value="{{ similar.id }}" @change="toggleSimilarProduct({{ similar.id }})" {{ isSimilarProductSelected(similar.id) ? 'checked' : '' }} class="h-4 w-4 text-blue-600 border-gray-300 rounded dark:border-neutral-600 focus:ring-blue-500" />
+                  <label for="similar-product-{{ similar.id }}" class="flex items-center ml-3 cursor-pointer">
+                    <img src="{{ similar.images[0] }}" alt="" class="object-cover flex-shrink-0 h-10 w-10 rounded-md">
+                    <div class="ml-3">
+                      <p class="font-medium text-gray-900 text-sm dark:text-white">{{ similar.name }}</p>
+                      <p class="text-gray-500 text-sm dark:text-neutral-400">{{ similar.category }} - ${{ similar.price.toFixed(2) }}</p>
+                    </div>
+                  </label>
+                </li>
+              </template>
+            </ul>
+          </div>
+
+          <div class="flex justify-end mt-6 space-x-3">
+            <button @click="closeSimilarProductsDialog()" class="px-4 py-2 font-medium text-gray-700 text-sm dark:text-white bg-white dark:bg-neutral-700 hover:bg-gray-50 dark:hover:bg-neutral-600 border border-gray-300 rounded-md dark:border-neutral-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 shadow-sm">Cancel</button>
+            <button @click="saveSimilarProducts()" class="px-4 py-2 font-medium text-sm text-white bg-blue-600 hover:bg-blue-700 border border-transparent rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 shadow-sm">Save Changes</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</PageLayout>
+
+<script client>
+interface ProductDetail {
+  id: number
+  name: string
+  price: number
+  description: string
+  category: string
+  stock: number
+  status: string
+  images: string[]
+  videos: string[]
+  manufacturer: string
+  variants: string[]
+  unit: string
+  taxRate: number
+  specifications: Record<string, string>
+  similarProducts?: number[]
+}
+
+const route = useRoute()
+
+const product = state<ProductDetail | null>(null)
+const loading = state(true)
+const activeImageIndex = state(0)
+const showVideoModal = state(false)
+const activeVideoUrl = state('')
+
+const showEditDialog = state(false)
+const showSimilarProductsDialog = state(false)
+
+const editName = state('')
+const editPrice = state(0)
+const editCategory = state('')
+const editStock = state(0)
+const editStatus = state('Active')
+const editManufacturer = state('')
+const editDescription = state('')
+const editSimilarProductIds = state<number[]>([])
+
+const allProducts = state<ProductDetail[]>([])
+
+const hasProduct = derived(() => !loading() && product() !== null)
+const notFound = derived(() => !loading() && product() === null)
+
+function productName(): string { return product()?.name ?? '' }
+function productDescription(): string { return product()?.description ?? '' }
+function productCategory(): string { return product()?.category ?? '' }
+function productManufacturer(): string { return product()?.manufacturer ?? '' }
+function productStock(): number { return product()?.stock ?? 0 }
+function productUnit(): string { return product()?.unit ?? '' }
+function productTaxRate(): number { return product()?.taxRate ?? 0 }
+function productStatus(): string { return product()?.status ?? '' }
+function productPriceFormatted(): string { return (product()?.price ?? 0).toFixed(2) }
+function productImages(): string[] { return product()?.images ?? [] }
+function productVideos(): string[] { return product()?.videos ?? [] }
+function productVariants(): string[] { return product()?.variants ?? [] }
+
+function activeImage(): string {
+  const images = productImages()
+  return images[activeImageIndex()] ?? ''
+}
+
+const hasVariants = derived(() => productVariants().length > 0)
+const noVariants = derived(() => !hasVariants())
+
+function productSpecificationEntries(): Array<{ key: string, value: string }> {
+  const specs = product()?.specifications ?? {}
+  return Object.entries(specs).map(([key, value]) => ({ key, value }))
+}
+
+const similarProducts = derived(() => {
+  const current = product()
+  const ids = current?.similarProducts
+  if (!current || !ids || !ids.length)
+    return []
+  return allProducts().filter(p => ids.includes(p.id))
+})
+
+const hasSimilarProducts = derived(() => similarProducts().length > 0)
+const noSimilarProducts = derived(() => !hasSimilarProducts())
+
+function otherProducts(): ProductDetail[] {
+  const currentId = product()?.id
+  return allProducts().filter(p => p.id !== currentId)
+}
+
+function isSimilarProductSelected(id: number): boolean {
+  return editSimilarProductIds().includes(id)
+}
+
+function statusClass(): string {
+  const s = productStatus()
+  if (s === 'Active')
+    return 'bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100'
+  if (s === 'Low Stock')
+    return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-100'
+  if (s === 'Out of Stock')
+    return 'bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100'
+  return ''
+}
+
+function selectImage(index: number): void {
+  activeImageIndex.set(index)
+}
+
+function openVideoModal(videoUrl: string): void {
+  activeVideoUrl.set(videoUrl)
+  showVideoModal.set(true)
+}
+
+function closeVideoModal(): void {
+  showVideoModal.set(false)
+  activeVideoUrl.set('')
+}
+
+function goBack(): void {
+  navigate('/commerce/products')
+}
+
+function editProduct(): void {
+  const current = product()
+  if (!current)
+    return
+  editName.set(current.name)
+  editPrice.set(current.price)
+  editCategory.set(current.category)
+  editStock.set(current.stock)
+  editStatus.set(current.status)
+  editManufacturer.set(current.manufacturer)
+  editDescription.set(current.description)
+  showEditDialog.set(true)
+}
+
+function closeEditDialog(): void {
+  showEditDialog.set(false)
+}
+
+function saveProduct(): void {
+  const current = product()
+  if (!current)
+    return
+  product.set({
+    ...current,
+    name: editName(),
+    price: editPrice(),
+    category: editCategory(),
+    stock: editStock(),
+    status: editStatus(),
+    manufacturer: editManufacturer(),
+    description: editDescription(),
+  })
+  // eslint-disable-next-line no-console
+  console.log('[success] Product updated successfully')
+  closeEditDialog()
+}
+
+function openSimilarProductsDialog(): void {
+  const current = product()
+  if (!current)
+    return
+  editSimilarProductIds.set([...(current.similarProducts ?? [])])
+  showSimilarProductsDialog.set(true)
+}
+
+function closeSimilarProductsDialog(): void {
+  showSimilarProductsDialog.set(false)
+}
+
+function toggleSimilarProduct(id: number): void {
+  const ids = editSimilarProductIds()
+  if (ids.includes(id))
+    editSimilarProductIds.set(ids.filter(x => x !== id))
+  else
+    editSimilarProductIds.set([...ids, id])
+}
+
+function saveSimilarProducts(): void {
+  const current = product()
+  if (!current)
+    return
+  product.set({ ...current, similarProducts: editSimilarProductIds() })
+  // eslint-disable-next-line no-console
+  console.log('[success] Similar products updated successfully')
+  closeSimilarProductsDialog()
+}
+
+function deleteProduct(): void {
+  // eslint-disable-next-line no-console
+  console.log('[error] Delete functionality would be implemented here')
+}
+
+onMount(() => {
+  setTimeout(() => {
+    const productId = Number.parseInt(route.params.id as string, 10) || 1
+
+    allProducts.set([
+      {
+        id: 1,
+        name: 'Margherita Pizza',
+        price: 12.99,
+        description: 'Classic Italian pizza with tomato sauce, fresh mozzarella, basil, and extra virgin olive oil.',
+        category: 'Pizza',
+        stock: 78,
+        status: 'Active',
+        images: ['https://images.unsplash.com/photo-1604382354936-07c5d9983bd3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80'],
+        videos: [],
+        manufacturer: 'Pizza Palace',
+        variants: ['Size', 'Crust Type'],
+        unit: 'Whole',
+        taxRate: 7,
+        specifications: {},
+        similarProducts: [2, 5],
+      },
+      {
+        id: 2,
+        name: 'Classic Cheeseburger',
+        price: 9.99,
+        description: 'Juicy beef patty with melted cheese, lettuce, tomato, and special sauce.',
+        category: 'Burgers',
+        stock: 124,
+        status: 'Active',
+        images: ['https://images.unsplash.com/photo-1568901346375-23c9450c58cd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80'],
+        videos: [],
+        manufacturer: 'Burger Bistro',
+        variants: ['Size', 'Protein', 'Toppings'],
+        unit: 'Piece',
+        taxRate: 7,
+        specifications: {},
+        similarProducts: [1],
+      },
+      {
+        id: 5,
+        name: 'Fettuccine Alfredo',
+        price: 13.99,
+        description: 'Creamy pasta with parmesan cheese sauce.',
+        category: 'Pasta',
+        stock: 210,
+        status: 'Active',
+        images: ['https://images.unsplash.com/photo-1645112411341-6c4fd023882c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80'],
+        videos: [],
+        manufacturer: 'Pasta Paradise',
+        variants: ['Size', 'Protein'],
+        unit: 'Serving',
+        taxRate: 7,
+        specifications: {},
+        similarProducts: [1],
+      },
+    ])
+
+    product.set({
+      id: productId,
+      name: 'Margherita Pizza',
+      price: 12.99,
+      description: 'Classic Italian pizza with tomato sauce, fresh mozzarella, basil, and extra virgin olive oil. Made with our signature hand-tossed dough and baked in a wood-fired oven for the perfect crispy yet chewy crust.',
+      category: 'Pizza',
+      stock: 78,
+      status: 'Active',
+      images: [
+        'https://images.unsplash.com/photo-1604382354936-07c5d9983bd3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
+        'https://images.unsplash.com/photo-1593560708920-61dd98c46a4e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
+        'https://images.unsplash.com/photo-1574071318508-1cdbab80d002?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
+      ],
+      videos: [
+        'https://example.com/videos/margherita-pizza.mp4',
+        'https://example.com/videos/pizza-preparation.mp4',
+      ],
+      manufacturer: 'Pizza Palace',
+      variants: ['Size', 'Crust Type'],
+      unit: 'Whole',
+      taxRate: 7,
+      specifications: {
+        Calories: '250 per slice',
+        'Preparation Time': '15-20 minutes',
+        Ingredients: 'Dough, Tomato Sauce, Fresh Mozzarella, Basil, Olive Oil, Salt',
+        Allergens: 'Wheat, Dairy',
+        Dietary: 'Vegetarian',
+        'Serving Size': '8 slices per pizza',
+      },
+      similarProducts: [2, 5],
+    })
+    loading.set(false)
+  }, 1000)
+})
+</script>
+
+<style>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
+
+@endsection