@stacksjs/defaults 0.70.207 → 0.70.208

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

@@ -0,0 +1,317 @@
+@extends('layouts/default')
+
+@section('content')
+<div class="sm:flex sm:items-center sm:justify-between">
+        <PageHeader title="Units" description="Manage measurement units for your products" />
+        <div class="mt-4 sm:mt-0">
+          <button
+            type="button"
+            @click="openAddModal()"
+            class="inline-flex items-center px-3 py-2 font-semibold text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 shadow-sm"
+          >
+            <div class="mr-1 h-5 w-5 i-hugeicons-plus-sign"></div>
+            Add unit
+          </button>
+        </div>
+      </div>
+
+      <!-- Filters -->
+      <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between mt-6">
+        <div class="relative max-w-sm">
+          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+            <div class="h-5 w-5 text-gray-400 i-hugeicons-search-01"></div>
+          </div>
+          <input
+            x-model="searchQuery"
+            type="text"
+            class="block pl-10 pr-3 py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white placeholder:text-gray-400 dark:placeholder:text-neutral-500 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"
+            placeholder="Search units..."
+          />
+        </div>
+
+        <div class="flex flex-col gap-4 sm:flex-row">
+          <select
+            x-model="typeFilter"
+            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 Types</option>
+            <template :for="type in unitTypes">
+              <option value="{{ type }}">{{ type }}</option>
+            </template>
+          </select>
+
+          <select
+            x-model="defaultFilter"
+            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 Units</option>
+            <option value="default">Default Units</option>
+            <option value="not-default">Non-Default Units</option>
+          </select>
+        </div>
+      </div>
+
+      <!-- Units table -->
+      <div class="flow-root mt-6">
+        <div class="overflow-x-auto -mx-4 -my-2 sm:-mx-6 lg:-mx-8">
+          <div class="inline-block py-2 sm:px-6 lg:px-8 min-w-full align-middle">
+            <div class="overflow-hidden ring-1 ring-black ring-opacity-5 sm:rounded-lg shadow">
+              <table class="min-w-full divide-gray-300 divide-y dark:divide-neutral-700">
+                <thead class="bg-gray-50 dark:bg-neutral-700">
+                  <tr>
+                    <th scope="col" class="pl-4 pr-3 py-3.5 sm:pl-6 font-semibold text-gray-900 text-left text-sm dark:text-neutral-200">
+                      <button @click="toggleSort('name')" class="inline-flex items-center group">
+                        Name
+                        <span class="group-focus:visible group-hover:visible flex-none ml-2 text-gray-400 rounded">
+                          <div class="h-4 w-4 {{ sortBy() === 'name' ? (sortOrder() === 'asc' ? 'i-hugeicons-arrow-up-02' : 'i-hugeicons-arrow-down-02') : 'i-hugeicons-arrows-up-down' }}"></div>
+                        </span>
+                      </button>
+                    </th>
+                    <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-200">
+                      <button @click="toggleSort('abbreviation')" class="inline-flex items-center group">
+                        Abbreviation
+                        <span class="group-focus:visible group-hover:visible flex-none ml-2 text-gray-400 rounded">
+                          <div class="h-4 w-4 {{ sortBy() === 'abbreviation' ? (sortOrder() === 'asc' ? 'i-hugeicons-arrow-up-02' : 'i-hugeicons-arrow-down-02') : 'i-hugeicons-arrows-up-down' }}"></div>
+                        </span>
+                      </button>
+                    </th>
+                    <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-200">
+                      <button @click="toggleSort('type')" class="inline-flex items-center group">
+                        Type
+                        <span class="group-focus:visible group-hover:visible flex-none ml-2 text-gray-400 rounded">
+                          <div class="h-4 w-4 {{ sortBy() === 'type' ? (sortOrder() === 'asc' ? 'i-hugeicons-arrow-up-02' : 'i-hugeicons-arrow-down-02') : 'i-hugeicons-arrows-up-down' }}"></div>
+                        </span>
+                      </button>
+                    </th>
+                    <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-200">Description</th>
+                    <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-200">Default</th>
+                    <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-right text-sm dark:text-neutral-200">
+                      <button @click="toggleSort('createdAt')" class="inline-flex items-center text-right group">
+                        Created
+                        <span class="group-focus:visible group-hover:visible flex-none ml-2 text-gray-400 rounded">
+                          <div class="h-4 w-4 {{ sortBy() === 'createdAt' ? (sortOrder() === 'asc' ? 'i-hugeicons-arrow-up-02' : 'i-hugeicons-arrow-down-02') : 'i-hugeicons-arrows-up-down' }}"></div>
+                        </span>
+                      </button>
+                    </th>
+                    <th scope="col" class="relative pl-3 pr-4 py-3.5 sm:pr-6">
+                      <span class="sr-only">Actions</span>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody class="bg-white dark:bg-neutral-800 divide-gray-200 divide-y dark:divide-neutral-700">
+                  <template :for="unit in filteredUnits">
+                    <tr>
+                      <td class="pl-4 pr-3 py-4 sm:pl-6 font-medium text-gray-900 text-sm whitespace-nowrap dark:text-white">{{ unit.name }}</td>
+                      <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-300">{{ unit.abbreviation }}</td>
+                      <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-300">{{ unit.type }}</td>
+                      <td class="px-3 py-4 text-gray-500 text-sm dark:text-neutral-300">{{ unit.description }}</td>
+                      <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-300">
+                        @if(unit.isDefault)
+                          <div class="h-5 w-5 text-green-500 i-hugeicons-checkmark-circle-02"></div>
+                        @else
+                          <div class="h-5 w-5 text-gray-400 i-hugeicons-cancel-circle"></div>
+                        @endif
+                      </td>
+                      <td class="px-3 py-4 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300">{{ unit.createdAt }}</td>
+                      <td class="relative pl-3 pr-4 py-4 sm:pr-6 font-medium text-right text-sm whitespace-nowrap">
+                        <div class="flex items-center justify-end space-x-2">
+                          <button type="button" class="text-gray-400 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300 duration-150 transition-colors">
+                            <div class="h-5 w-5 i-hugeicons-edit-01"></div>
+                          </button>
+                          <button type="button" class="text-gray-400 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 duration-150 transition-colors">
+                            <div class="h-5 w-5 i-hugeicons-waste"></div>
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  </template>
+                  @if(filteredUnits().length === 0)
+                    <tr>
+                      <td colspan="7" class="px-6 py-4 text-center text-gray-500 text-sm dark:text-neutral-400">
+                        No units found matching your criteria
+                      </td>
+                    </tr>
+                  @endif
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Add Unit Modal -->
+  <div :show="showAddModal" 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 transition-opacity" @click="closeAddModal()"></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>
+          <div class="mt-3 sm:mt-5 text-center">
+            <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-white">Add New Unit</h3>
+            <div class="mt-4">
+              <div class="space-y-4">
+                <div class="grid gap-4 grid-cols-2">
+                  <div>
+                    <label for="unit-name" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Name</label>
+                    <div class="mt-2">
+                      <input type="text" id="unit-name" x-model="newName" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white placeholder:text-gray-400 dark:bg-neutral-700 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600 focus:ring-inset shadow-sm" />
+                    </div>
+                  </div>
+                  <div>
+                    <label for="unit-abbreviation" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Abbreviation</label>
+                    <div class="mt-2">
+                      <input type="text" id="unit-abbreviation" x-model="newAbbreviation" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white placeholder:text-gray-400 dark:bg-neutral-700 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600 focus:ring-inset shadow-sm" />
+                    </div>
+                  </div>
+                </div>
+                <div>
+                  <label for="unit-type" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Type</label>
+                  <div class="mt-2">
+                    <select id="unit-type" x-model="newType" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white placeholder:text-gray-400 dark:bg-neutral-700 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600 focus:ring-inset shadow-sm">
+                      <option value="">Select a type</option>
+                      <template :for="type in unitTypes">
+                        <option value="{{ type }}">{{ type }}</option>
+                      </template>
+                      <option value="Other">Other</option>
+                    </select>
+                  </div>
+                </div>
+                <div>
+                  <label for="unit-description" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Description</label>
+                  <div class="mt-2">
+                    <textarea id="unit-description" x-model="newDescription" rows="2" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white placeholder:text-gray-400 dark:bg-neutral-700 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600 focus:ring-inset shadow-sm"></textarea>
+                  </div>
+                </div>
+                <div class="flex items-center">
+                  <input id="unit-default" type="checkbox" x-model="newIsDefault" class="h-4 w-4 text-blue-600 dark:bg-neutral-700 border-gray-300 rounded dark:border-neutral-600 focus:ring-blue-600" />
+                  <label for="unit-default" class="block ml-2 text-gray-900 text-sm dark:text-neutral-200">Set as default for this type</label>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="sm:grid sm:gap-3 sm:grid-cols-2 sm:grid-flow-row-dense mt-5 sm:mt-6">
+          <button type="button" @click="addUnit()" class="inline-flex justify-center sm:col-start-2 px-3 py-2 w-full font-semibold text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 shadow-sm">Add</button>
+          <button type="button" @click="closeAddModal()" class="inline-flex justify-center sm:col-start-1 mt-3 px-3 py-2 sm:mt-0 w-full 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>
+      </div>
+</PageLayout>
+<script client>
+interface Unit {
+  id: number
+  name: string
+  abbreviation: string
+  type: string
+  description: string
+  isDefault: boolean
+  createdAt: string
+}
+
+const initialUnits: Unit[] = [
+  { id: 1, name: 'Slice', abbreviation: 'slice', type: 'Food', description: 'Individual slice of pizza or cake', isDefault: true, createdAt: '2023-05-15' },
+  { id: 2, name: 'Whole', abbreviation: 'whole', type: 'Food', description: 'Complete item (e.g., whole pizza, whole cake)', isDefault: false, createdAt: '2023-05-15' },
+  { id: 3, name: 'Milliliter', abbreviation: 'ml', type: 'Beverage', description: 'Volume measurement for beverages', isDefault: true, createdAt: '2023-06-02' },
+  { id: 4, name: 'Bottle', abbreviation: 'btl', type: 'Beverage', description: 'Standard bottle size (varies by product)', isDefault: false, createdAt: '2023-06-02' },
+  { id: 5, name: 'Piece', abbreviation: 'pc', type: 'General', description: 'Individual item count', isDefault: true, createdAt: '2023-06-10' },
+  { id: 6, name: 'Box', abbreviation: 'box', type: 'Package', description: 'Box containing multiple items', isDefault: true, createdAt: '2023-07-05' },
+  { id: 7, name: 'Serving', abbreviation: 'srv', type: 'Food', description: 'Individual portion size', isDefault: false, createdAt: '2023-07-12' },
+  { id: 8, name: 'Gram', abbreviation: 'g', type: 'Weight', description: 'Weight measurement for food items', isDefault: true, createdAt: '2023-08-03' },
+]
+
+const units = state(initialUnits)
+const searchQuery = state('')
+const sortBy = state<'name' | 'abbreviation' | 'type' | 'createdAt'>('name')
+const sortOrder = state<'asc' | 'desc'>('asc')
+const typeFilter = state<string>('all')
+const defaultFilter = state<'all' | 'default' | 'not-default'>('all')
+
+const showAddModal = state(false)
+const newName = state('')
+const newAbbreviation = state('')
+const newType = state<string>('')
+const newDescription = state('')
+const newIsDefault = state(false)
+
+function unitTypes(): string[] {
+  return Array.from(new Set(units().map(u => u.type))).sort()
+}
+
+const filteredUnits = derived(() => {
+  const q = searchQuery().toLowerCase()
+  const tFilter = typeFilter()
+  const dFilter = defaultFilter()
+  const by = sortBy()
+  const dir = sortOrder()
+
+  return units()
+    .filter((u) => {
+      const matchesSearch
+        = u.name.toLowerCase().includes(q)
+          || u.abbreviation.toLowerCase().includes(q)
+          || u.description.toLowerCase().includes(q)
+      const matchesType = tFilter === 'all' || u.type === tFilter
+      const matchesDefault
+        = dFilter === 'all'
+          || (dFilter === 'default' && u.isDefault)
+          || (dFilter === 'not-default' && !u.isDefault)
+      return matchesSearch && matchesType && matchesDefault
+    })
+    .sort((a, b) => {
+      let cmp = 0
+      if (by === 'name') cmp = a.name.localeCompare(b.name)
+      else if (by === 'type') cmp = a.type.localeCompare(b.type)
+      else if (by === 'abbreviation') cmp = a.abbreviation.localeCompare(b.abbreviation)
+      else if (by === 'createdAt') cmp = new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
+      return dir === 'asc' ? cmp : -cmp
+    })
+})
+
+function toggleSort(column: 'name' | 'abbreviation' | 'type' | 'createdAt'): void {
+  if (sortBy() === column) {
+    sortOrder.update(d => d === 'asc' ? 'desc' : 'asc')
+  }
+  else {
+    sortBy.set(column)
+    sortOrder.set('asc')
+  }
+}
+
+function openAddModal(): void {
+  newName.set('')
+  newAbbreviation.set('')
+  newType.set('')
+  newDescription.set('')
+  newIsDefault.set(false)
+  showAddModal.set(true)
+}
+
+function closeAddModal(): void {
+  showAddModal.set(false)
+}
+
+function addUnit(): void {
+  const list = units()
+  const id = list.length > 0 ? Math.max(...list.map(u => u.id)) + 1 : 1
+  const isDefault = newIsDefault()
+  const type = newType()
+  // If marking as default, clear default on other units of the same type.
+  const next = isDefault
+    ? list.map(u => u.type === type ? { ...u, isDefault: false } : u)
+    : list
+
+  units.set([...next, {
+    id,
+    name: newName(),
+    abbreviation: newAbbreviation(),
+    type,
+    description: newDescription(),
+    isDefault,
+    createdAt: new Date().toISOString().split('T')[0] || '',
+  }])
+  closeAddModal()
+}
+</script>
+
+@endsection

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

@@ -0,0 +1,319 @@
+@extends('layouts/default')
+
+@section('content')
+<div class="sm:flex sm:items-center sm:justify-between">
+        <PageHeader title="Variants" description="Manage product variants and options" />
+        <div class="mt-4 sm:mt-0">
+          <button
+            type="button"
+            @click="openAddModal()"
+            class="inline-flex items-center px-3 py-2 font-semibold text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 shadow-sm"
+          >
+            <div class="mr-1 h-5 w-5 i-hugeicons-plus-sign"></div>
+            Add variant type
+          </button>
+        </div>
+      </div>
+
+      <!-- Filters -->
+      <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between mt-6">
+        <div class="relative max-w-sm">
+          <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+            <div class="h-5 w-5 text-gray-400 i-hugeicons-search-01"></div>
+          </div>
+          <input
+            x-model="searchQuery"
+            type="text"
+            class="block pl-10 pr-3 py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white placeholder:text-gray-400 dark:placeholder:text-neutral-500 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"
+            placeholder="Search variants..."
+          />
+        </div>
+
+        <div class="flex flex-col gap-4 sm:flex-row">
+          <select
+            x-model="activeFilter"
+            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 Variants</option>
+            <option value="active">Active Only</option>
+            <option value="inactive">Inactive Only</option>
+          </select>
+        </div>
+      </div>
+
+      <!-- Variants table -->
+      <div class="flow-root mt-6">
+        <div class="overflow-x-auto -mx-4 -my-2 sm:-mx-6 lg:-mx-8">
+          <div class="inline-block py-2 sm:px-6 lg:px-8 min-w-full align-middle">
+            <div class="overflow-hidden ring-1 ring-black ring-opacity-5 sm:rounded-lg shadow">
+              <table class="min-w-full divide-gray-300 divide-y dark:divide-neutral-700">
+                <thead class="bg-gray-50 dark:bg-neutral-700">
+                  <tr>
+                    <th scope="col" class="pl-4 pr-3 py-3.5 sm:pl-6 font-semibold text-gray-900 text-left text-sm dark:text-neutral-200">
+                      <button @click="toggleSort('name')" class="inline-flex items-center group">
+                        Variant Type
+                        <span class="group-focus:visible group-hover:visible flex-none ml-2 text-gray-400 rounded">
+                          <div class="h-4 w-4 {{ sortBy() === 'name' ? (sortOrder() === 'asc' ? 'i-hugeicons-arrow-up-02' : 'i-hugeicons-arrow-down-02') : 'i-hugeicons-arrows-up-down' }}"></div>
+                        </span>
+                      </button>
+                    </th>
+                    <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-200">Description</th>
+                    <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-200">
+                      <button @click="toggleSort('optionCount')" class="inline-flex items-center group">
+                        Options
+                        <span class="group-focus:visible group-hover:visible flex-none ml-2 text-gray-400 rounded">
+                          <div class="h-4 w-4 {{ sortBy() === 'optionCount' ? (sortOrder() === 'asc' ? 'i-hugeicons-arrow-up-02' : 'i-hugeicons-arrow-down-02') : 'i-hugeicons-arrows-up-down' }}"></div>
+                        </span>
+                      </button>
+                    </th>
+                    <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-200">Status</th>
+                    <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-right text-sm dark:text-neutral-200">
+                      <button @click="toggleSort('createdAt')" class="inline-flex items-center text-right group">
+                        Created
+                        <span class="group-focus:visible group-hover:visible flex-none ml-2 text-gray-400 rounded">
+                          <div class="h-4 w-4 {{ sortBy() === 'createdAt' ? (sortOrder() === 'asc' ? 'i-hugeicons-arrow-up-02' : 'i-hugeicons-arrow-down-02') : 'i-hugeicons-arrows-up-down' }}"></div>
+                        </span>
+                      </button>
+                    </th>
+                    <th scope="col" class="relative pl-3 pr-4 py-3.5 sm:pr-6">
+                      <span class="sr-only">Actions</span>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody class="bg-white dark:bg-neutral-800 divide-gray-200 divide-y dark:divide-neutral-700">
+                  <template :for="variantType in filteredVariantTypes">
+                    <tr>
+                      <td class="pl-4 pr-3 py-4 font-medium text-gray-900 text-sm whitespace-nowrap dark:text-white">{{ variantType.name }}</td>
+                      <td class="px-3 py-4 text-gray-500 text-sm dark:text-neutral-300">{{ variantType.description }}</td>
+                      <td class="px-3 py-4 text-gray-500 text-sm dark:text-neutral-300">
+                        <div class="flex flex-wrap gap-1">
+                          <template :for="option in variantType.options.slice(0, 5)">
+                            <span class="inline-flex items-center px-2 py-1 font-medium text-blue-700 text-xs dark:text-blue-300 bg-blue-50 dark:bg-blue-900 rounded-full">
+                              {{ option }}
+                            </span>
+                          </template>
+                          @if(variantType.options.length > 5)
+                            <span class="inline-flex items-center px-2 py-1 font-medium text-gray-600 text-xs dark:text-neutral-300 bg-gray-50 dark:bg-neutral-700 rounded-full">
+                              +{{ variantType.options.length - 5 }} more
+                            </span>
+                          @endif
+                        </div>
+                      </td>
+                      <td class="px-3 py-4 text-sm whitespace-nowrap">
+                        <span class="inline-flex items-center px-2.5 py-0.5 font-medium text-xs rounded-full {{ variantType.active ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300' : 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300' }}">
+                          {{ variantType.active ? 'Active' : 'Inactive' }}
+                        </span>
+                      </td>
+                      <td class="px-3 py-4 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300">{{ variantType.createdAt }}</td>
+                      <td class="relative pl-3 pr-4 py-4 sm:pr-6 font-medium text-right text-sm whitespace-nowrap">
+                        <div class="flex items-center justify-end space-x-2">
+                          <button type="button" class="text-gray-400 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300 duration-150 transition-colors">
+                            <div class="h-5 w-5 i-hugeicons-edit-01"></div>
+                          </button>
+                          <button type="button" class="text-gray-400 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 duration-150 transition-colors">
+                            <div class="h-5 w-5 i-hugeicons-waste"></div>
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  </template>
+                  @if(filteredVariantTypes().length === 0)
+                    <tr>
+                      <td colspan="6" class="px-6 py-4 text-center text-gray-500 text-sm dark:text-neutral-400">
+                        No variant types found matching your criteria
+                      </td>
+                    </tr>
+                  @endif
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Add Variant Type Modal -->
+  <div :show="showAddModal" 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 transition-opacity" @click="closeAddModal()"></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>
+          <div class="mt-3 sm:mt-5 text-center">
+            <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-white">Add New Variant Type</h3>
+            <div class="mt-4">
+              <div class="space-y-4">
+                <div>
+                  <label for="variant-name" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Name</label>
+                  <div class="mt-2">
+                    <input type="text" id="variant-name" x-model="newName" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white placeholder:text-gray-400 dark:bg-neutral-700 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600 focus:ring-inset shadow-sm" />
+                  </div>
+                </div>
+                <div>
+                  <label for="variant-description" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Description</label>
+                  <div class="mt-2">
+                    <textarea id="variant-description" x-model="newDescription" rows="2" class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white placeholder:text-gray-400 dark:bg-neutral-700 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600 focus:ring-inset shadow-sm"></textarea>
+                  </div>
+                </div>
+                <div>
+                  <label class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Options</label>
+                  <div class="mt-2">
+                    <div class="flex flex-wrap gap-2 mb-2">
+                      <template :for="(option, index) in newOptions">
+                        <div class="inline-flex items-center px-2 py-1 font-medium text-blue-700 text-xs dark:text-blue-300 bg-blue-50 dark:bg-blue-900 rounded-full">
+                          {{ option }}
+                          <button
+                            type="button"
+                            class="ml-1 text-blue-400 dark:text-blue-300 hover:text-blue-600 dark:hover:text-blue-100"
+                            @click="removeOption(index)"
+                          >
+                            <div class="h-4 w-4 i-hugeicons-cancel-circle"></div>
+                          </button>
+                        </div>
+                      </template>
+                    </div>
+                    <div class="flex">
+                      <input
+                        type="text"
+                        x-model="newOption"
+                        placeholder="Add option"
+                        class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white placeholder:text-gray-400 dark:bg-neutral-700 border-0 ring-1 ring-gray-300 ring-inset rounded-l-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600 focus:ring-inset shadow-sm"
+                        @keyup.enter="addOption()"
+                      />
+                      <button
+                        type="button"
+                        @click="addOption()"
+                        class="inline-flex items-center px-3 py-2 font-semibold text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-r-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 shadow-sm"
+                      >
+                        Add
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div class="flex items-center">
+                  <input id="variant-active" type="checkbox" x-model="newActive" class="h-4 w-4 text-blue-600 dark:bg-neutral-700 border-gray-300 rounded dark:border-neutral-600 focus:ring-blue-600" />
+                  <label for="variant-active" class="block ml-2 text-gray-900 text-sm dark:text-neutral-200">Active</label>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="sm:grid sm:gap-3 sm:grid-cols-2 sm:grid-flow-row-dense mt-5 sm:mt-6">
+          <button type="button" @click="addVariantType()" class="inline-flex justify-center sm:col-start-2 px-3 py-2 w-full font-semibold text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 shadow-sm">Add</button>
+          <button type="button" @click="closeAddModal()" class="inline-flex justify-center sm:col-start-1 mt-3 px-3 py-2 sm:mt-0 w-full 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>
+      </div>
+</PageLayout>
+<script client>
+interface VariantType {
+  id: number
+  name: string
+  description: string
+  options: string[]
+  active: boolean
+  createdAt: string
+}
+
+const initialVariantTypes: VariantType[] = [
+  { id: 1, name: 'Size', description: 'Food portion size options', options: ['Small', 'Medium', 'Large', 'Family Size'], active: true, createdAt: '2023-05-10' },
+  { id: 2, name: 'Crust Type', description: 'Pizza crust options', options: ['Thin', 'Regular', 'Thick', 'Stuffed', 'Gluten-Free'], active: true, createdAt: '2023-05-15' },
+  { id: 3, name: 'Spice Level', description: 'Heat intensity options', options: ['Mild', 'Medium', 'Hot', 'Extra Hot'], active: true, createdAt: '2023-06-01' },
+  { id: 4, name: 'Protein', description: 'Protein options for dishes', options: ['Chicken', 'Beef', 'Pork', 'Tofu', 'Shrimp', 'None'], active: true, createdAt: '2023-06-10' },
+  { id: 5, name: 'Toppings', description: 'Additional toppings for dishes', options: ['Cheese', 'Mushrooms', 'Peppers', 'Onions', 'Olives', 'Bacon'], active: true, createdAt: '2023-06-20' },
+  { id: 6, name: 'Dietary', description: 'Dietary preference options', options: ['Vegetarian', 'Vegan', 'Gluten-Free', 'Dairy-Free', 'Keto', 'Low-Carb'], active: true, createdAt: '2023-07-05' },
+  { id: 7, name: 'Sauce', description: 'Sauce options for dishes', options: ['Marinara', 'Alfredo', 'BBQ', 'Buffalo', 'Sweet & Sour', 'None'], active: true, createdAt: '2023-07-15' },
+  { id: 8, name: 'Sweetness', description: 'Sweetness level options', options: ['Not Sweet', 'Slightly Sweet', 'Medium Sweet', 'Very Sweet'], active: true, createdAt: '2023-08-01' },
+]
+
+const variantTypes = state(initialVariantTypes)
+const searchQuery = state('')
+const sortBy = state<'name' | 'optionCount' | 'createdAt'>('name')
+const sortOrder = state<'asc' | 'desc'>('asc')
+const activeFilter = state<'all' | 'active' | 'inactive'>('all')
+
+const showAddModal = state(false)
+const newName = state('')
+const newDescription = state('')
+const newOptions = state<string[]>([])
+const newActive = state(true)
+const newOption = state('')
+
+const filteredVariantTypes = derived(() => {
+  const q = searchQuery().toLowerCase()
+  const aFilter = activeFilter()
+  const by = sortBy()
+  const dir = sortOrder()
+
+  return variantTypes()
+    .filter((v) => {
+      const matchesSearch
+        = v.name.toLowerCase().includes(q)
+          || v.description.toLowerCase().includes(q)
+          || v.options.some(o => o.toLowerCase().includes(q))
+      const matchesActive
+        = aFilter === 'all'
+          || (aFilter === 'active' && v.active)
+          || (aFilter === 'inactive' && !v.active)
+      return matchesSearch && matchesActive
+    })
+    .sort((a, b) => {
+      let cmp = 0
+      if (by === 'name') cmp = a.name.localeCompare(b.name)
+      else if (by === 'optionCount') cmp = a.options.length - b.options.length
+      else if (by === 'createdAt') cmp = new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
+      return dir === 'asc' ? cmp : -cmp
+    })
+})
+
+function toggleSort(column: 'name' | 'optionCount' | 'createdAt'): void {
+  if (sortBy() === column) {
+    sortOrder.update(d => d === 'asc' ? 'desc' : 'asc')
+  }
+  else {
+    sortBy.set(column)
+    sortOrder.set('asc')
+  }
+}
+
+function addOption(): void {
+  const o = newOption().trim()
+  if (!o)
+    return
+  newOptions.update(list => [...list, o])
+  newOption.set('')
+}
+
+function removeOption(index: number): void {
+  newOptions.update(list => list.filter((_, i) => i !== index))
+}
+
+function openAddModal(): void {
+  newName.set('')
+  newDescription.set('')
+  newOptions.set([])
+  newActive.set(true)
+  newOption.set('')
+  showAddModal.set(true)
+}
+
+function closeAddModal(): void {
+  showAddModal.set(false)
+}
+
+function addVariantType(): void {
+  const list = variantTypes()
+  const id = list.length > 0 ? Math.max(...list.map(v => v.id)) + 1 : 1
+  variantTypes.set([...list, {
+    id,
+    name: newName(),
+    description: newDescription(),
+    options: [...newOptions()],
+    active: newActive(),
+    createdAt: new Date().toISOString().split('T')[0] || '',
+  }])
+  closeAddModal()
+}
+</script>
+
+@endsection