fix: edit table and migrations

bo/src/components/admin/AddProduct.vue

@@ -0,0 +1,118 @@
+<template>
+    <div class="space-y-6">
+
+        <!-- Header bar -->
+        <div class="flex items-center justify-between flex-wrap gap-3">
+            <div class="flex items-center gap-3">
+                <UIcon name="i-lucide-arrow-left"
+                    class="cursor-pointer text-(--text-sky-light) dark:text-(--text-sky-dark) text-xl"
+                    @click="$router.back()" />
+                <h1 class="text-2xl font-bold text-black dark:text-white">
+                    {{ isEditMode ? 'Edit Product' : 'Add Product' }}
+                </h1>
+            </div>
+
+            <div class="flex items-center gap-3">
+                <div class="flex items-center gap-2">
+                    <span class="text-sm text-gray-500 dark:text-gray-400">Active</span>
+                    <USwitch v-model="store.form.active" color="success" />
+                </div>
+                <UButton variant="outline" color="neutral" @click="handleCancel">Cancel</UButton>
+                <UButton color="info" :loading="store.saving" @click="handleSave">
+                    <UIcon name="i-lucide-save" class="text-base" />
+                    Save
+                </UButton>
+            </div>
+        </div>
+
+        <!-- Alerts -->
+        <UAlert v-if="store.error" color="error" variant="subtle" :title="store.error" icon="i-lucide-alert-circle" />
+        <UAlert v-if="store.successMessage" color="success" variant="subtle" :title="store.successMessage"
+            icon="i-lucide-check-circle" />
+
+        <!-- Tabs -->
+        <UTabs :items="tabs" color="info" :ui="{ root: 'gap-6' }">
+            <template #general>
+                <ProductTabGeneral />
+            </template>
+            <template #pricing>
+                <ProductTabPricing />
+            </template>
+            <template #quantities>
+                <ProductTabQuantities />
+            </template>
+            <template #shipping>
+                <ProductTabShipping />
+            </template>
+            <template #seo>
+                <ProductTabSeo />
+            </template>
+            <template #options>
+                <ProductTabOptions />
+            </template>
+            <template #variants>
+                <ProductTabVariants :is-edit-mode="isEditMode" />
+            </template>
+        </UTabs>
+
+    </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAddProductStore } from '@/stores/admin/addProduct'
+import ProductTabGeneral from './product/TabGeneral.vue'
+import ProductTabPricing from './product/TabPricing.vue'
+import ProductTabQuantities from './product/TabQuantities.vue'
+import ProductTabShipping from './product/TabShipping.vue'
+import ProductTabSeo from './product/TabSeo.vue'
+import ProductTabOptions from './product/TabOptions.vue'
+import ProductTabVariants from './product/TabVariants.vue'
+
+const props = defineProps<{
+    productId?: number
+}>()
+
+const router = useRouter()
+const store = useAddProductStore()
+const isEditMode = computed(() => !!props.productId)
+
+const tabs = computed(() => [
+    { label: 'General', slot: 'general' },
+    { label: 'Pricing', slot: 'pricing' },
+    { label: 'Quantities', slot: 'quantities' },
+    { label: 'Shipping', slot: 'shipping' },
+    { label: 'SEO', slot: 'seo' },
+    { label: 'Options', slot: 'options' },
+    ...(isEditMode.value ? [{ label: 'Variants', slot: 'variants' }] : []),
+])
+
+onMounted(async () => {
+    store.resetForm()
+    if (isEditMode.value && props.productId) {
+        await store.loadProduct(props.productId)
+        await store.loadVariants(props.productId)
+    }
+})
+
+async function handleSave() {
+    if (!store.form.name.trim()) {
+        store.error = 'Product name is required.'
+        return
+    }
+    if (isEditMode.value && props.productId) {
+        await store.updateProduct(props.productId)
+    } else {
+        const newId = await store.createProduct()
+        if (newId) {
+            router.push({ name: 'admin-product-edit', params: { product_id: newId } })
+        }
+    }
+}
+
+function handleCancel() {
+    store.resetForm()
+    router.push({ name: 'admin-products' })
+}
+</script>

bo/src/components/admin/product/TabGeneral.vue

@@ -0,0 +1,278 @@
+<template>
+    <div class="space-y-5">
+        {{ addProductStore.form }}
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <UFormField label="Product name" name="productName">
+                <UInput v-model="addProductStore.form.product.name" placeholder="Enter product name" class="w-full" />
+            </UFormField>
+            <UFormField label="Reference (SKU)" name="productReference">
+                <UInput v-model="addProductStore.form.product.reference" placeholder="e.g. REF-001" class="w-full" />
+            </UFormField>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <UFormField label="Podsumowanie">
+                <ProductEditor v-model="addProductStore.form.product.description_short" />
+            </UFormField>
+            <UFormField label="Description">
+                <ProductEditor v-model="addProductStore.form.product.description" />
+            </UFormField>
+        </div>
+
+        <fieldset
+            class="rounded-xl border border-(--border-light) dark:border-(--border-dark) p-4 space-y-3 bg-white dark:bg-neutral-900">
+            <legend class="px-1 block font-medium text-default text-[16px]">Images</legend>
+            {{ addProductStore.images }}
+
+            <div class="flex items-start gap-3 flex-wrap">
+                <div v-for="(img, idx) in addProductStore.images" :key="idx" class="relative group shrink-0">
+                    <div class="relative w-36 h-36 rounded-xl overflow-hidden border-2 transition-colors" :class="img.cover
+                        ? 'border-sky-500'
+                        : 'border-(--border-light) dark:border-(--border-dark)'">
+
+                        <img :src="img.previewUrl" @error="onImgError"
+                            class="w-full h-full object-contain bg-white dark:bg-neutral-900" />
+
+                        <div v-if="img.uploading" class="absolute inset-0 flex items-center justify-center bg-black/50">
+                            <UIcon name="svg-spinners:ring-resize" class="text-2xl text-white" />
+                        </div>
+
+                        <div v-else-if="img.error"
+                            class="absolute bottom-0 left-0 right-0 bg-red-500/80 text-white text-[10px] px-1 py-0.5 text-center truncate">
+                            {{ img.error }}
+                        </div>
+
+
+                        <div v-if="img.cover"
+                            class="absolute top-1.5 left-1.5 bg-sky-500 text-white text-[10px] font-semibold px-1.5 py-0.5 rounded-full leading-none">
+                            ★ Cover
+                        </div>
+
+                        <div v-if="!img.uploading"
+                            class="absolute inset-0 flex flex-col items-center justify-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity bg-black/50">
+                            <button v-if="!img.cover" type="button"
+                                class="flex items-center gap-1 px-2 py-1 rounded-md bg-white/20 hover:bg-sky-500 text-white text-xs font-medium transition-colors"
+                                @click.stop="addProductStore.setCover(idx)">
+                                <UIcon name="i-lucide-star" class="text-sm" />
+                                Set cover
+                            </button>
+                            <button type="button"
+                                class="flex items-center gap-1 px-2 py-1 rounded-md bg-white/20 hover:bg-red-500 text-white text-xs font-medium transition-colors"
+                                @click.stop="addProductStore.removeImage(idx)">
+                                <UIcon name="i-lucide-trash-2" class="text-sm" />
+                                Remove
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <label
+                    class="w-36 h-36 shrink-0 flex flex-col items-center justify-center gap-1 rounded-xl border-2 border-dashed border-(--border-light) dark:border-(--border-dark) cursor-pointer hover:border-sky-400 hover:text-sky-400 transition-colors text-gray-400"
+                    @dragover.prevent @drop.prevent="onDrop">
+                    <UIcon name="i-lucide-plus" class="text-2xl" />
+                    <span class="text-xs">Add image</span>
+                    <input type="file" accept="image/*" multiple class="hidden" @change="onFileChange" />
+                </label>
+            </div>
+        </fieldset>
+
+        <div class="space-y-2">
+            <p class="text-sm font-medium text-black dark:text-white">Powiązany produkt</p>
+
+            <UInput v-model="relatedSearch" placeholder="Search and add Powiązany produkt" icon="i-lucide-search"
+                class="w-full" />
+
+            <div v-if="addProductStore.relatedProducts.length > 0"
+                class="rounded-lg border border-(--border-light) dark:border-(--border-dark) overflow-hidden">
+                <div v-for="p in addProductStore.relatedProducts" :key="p.id_product"
+                    class="flex items-center justify-between px-3 py-2 text-sm text-black dark:text-white border-b border-(--border-light) dark:border-(--border-dark) last:border-0">
+                    <span>{{ p.name }}</span>
+                    <button type="button" @click="removeRelated(p.id_product)"
+                        class="text-gray-400 hover:text-red-500 transition-colors ml-2">
+                        <UIcon name="i-lucide-x" class="text-base" />
+                    </button>
+                </div>
+            </div>
+
+            <USelect :items="relatedResults" value-key="product_id" />
+            <div v-if="relatedResults.length > 0"
+                class="rounded-lg border border-(--border-light) dark:border-(--border-dark) overflow-hidden bg-white dark:bg-neutral-900">
+                <button v-for="p in relatedResults" :key="p.id_product" type="button"
+                    class="w-full text-left px-3 py-2 text-sm text-black dark:text-white hover:bg-gray-50 dark:hover:bg-neutral-800 transition-colors border-b border-(--border-light) dark:border-(--border-dark) last:border-0"
+                    @click="addRelated(p)">
+                    {{ p.name }}
+                    <span class="text-gray-400 ml-1">{{ p.reference }}</span>
+                </button>
+            </div>
+
+        </div>
+
+        <fieldset
+            class="rounded-xl border border-(--border-light) dark:border-(--border-dark) p-4 space-y-3 bg-white dark:bg-neutral-900">
+            <legend class="px-1 block font-medium text-default text-[16px]">Kategorie</legend>
+
+            <UInput v-model="categorySearch" placeholder="Search" class="w-52" icon="i-lucide-search" />
+            <div v-if="addProductStore.selectedCategories.length > 0"
+                class="rounded-lg border border-(--border-light) dark:border-(--border-dark) p-2 min-h-10 flex flex-wrap gap-2">
+                <span v-for="cat in addProductStore.selectedCategories" :key="cat.id_category"
+                    class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium bg-sky-100 dark:bg-sky-900 text-sky-700 dark:text-sky-300">
+                    {{ cat.name }}
+                    <button type="button" @click="removeCategory(cat.id_category)"
+                        class="text-sky-500 hover:text-sky-700 dark:hover:text-sky-200 leading-none ml-0.5">
+                        <UIcon name="i-lucide-x" />
+                    </button>
+                </span>
+            </div>
+
+            <div class="space-y-0.5 overflow-y-auto flex">
+                <UNavigationMenu orientation="vertical" type="multiple" :items="filteredCategories" :ui="{
+                    root: 'w-auto'
+                }">
+                    <template #item="{ item }">
+                        <div
+                            class="flex items-center gap-2.5 cursor-pointer rounded px-1.5 py-1 hover:bg-gray-50 dark:hover:bg-neutral-800 transition-colors"
+                            @click.stop="toggleCategory({ id_category: item.params?.category_id, name: item.label as string })">
+                            <UCheckbox :model-value="isCategorySelected(item.params?.category_id)"
+                                color="info" />
+                            <span class="text-sm text-black dark:text-white">{{ item.label }}</span>
+                        </div>
+                    </template>
+                </UNavigationMenu>
+            </div>
+
+            <UButton size="xs" variant="outline" color="neutral" icon="i-lucide-plus">
+                Add new category
+            </UButton>
+        </fieldset>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useAddProductStore } from '@/stores/admin/addProduct'
+import type { ProductCategory, ProductRelated } from '@/types/product'
+import errorImg from '@/assets/error.svg'
+import { useFetchJson } from '@/composable/useFetchJson'
+import { watch } from 'vue'
+import type { NavigationMenuItem } from '@nuxt/ui'
+
+const addProductStore = useAddProductStore()
+
+const loading = ref(false)
+
+function onImgError(e: Event) {
+    const target = e.target as HTMLImageElement
+    target.src = errorImg
+}
+
+function onFileChange(e: Event) {
+    const files = (e.target as HTMLInputElement).files
+    if (files && files.length > 0) addProductStore.addImageFiles(files)
+        ; (e.target as HTMLInputElement).value = ''
+}
+
+function onDrop(e: DragEvent) {
+    const files = e.dataTransfer?.files
+    if (files && files.length > 0) addProductStore.addImageFiles(files)
+}
+
+// categories
+const categorySearch = ref('')
+const allCategories = computed(() => adaptCategory(addProductStore.categories))
+function adaptCategory(menu: NavigationMenuItem[]) {
+    for (const item of menu) {
+        if (item.children && item.children.length > 0) {
+            item.open = true
+            adaptCategory(item.children);
+
+            item.children.unshift({
+                label: item.label,
+                icon: 'i-lucide-book-open',
+                params: item.params,
+            })
+        } else {
+            item.icon = 'i-lucide-file-text'
+        }
+    }
+    return menu;
+}
+
+//there have to be request on filter category (but have to  return like parent => children =>)
+const filteredCategories = computed(() => {
+    const q = categorySearch.value.trim().toLowerCase()
+    if (!q) return allCategories.value
+    return allCategories.value.filter(c => c.name.toLowerCase().includes(q))
+})
+
+function isCategorySelected(id: number) {
+    return addProductStore.selectedCategories.some(c => c.id_category === id)
+}
+
+function toggleCategory(cat: ProductCategory) {
+    console.log(cat);
+    
+    if (isCategorySelected(cat.id_category)) {
+        removeCategory(cat.id_category)
+    } else {
+        addProductStore.selectedCategories.push(cat)
+    }
+}
+
+function removeCategory(id: number) {
+    const idx = addProductStore.selectedCategories.findIndex(c => c.id_category === id)
+    if (idx !== -1) addProductStore.selectedCategories.splice(idx, 1)
+}
+
+// related products
+const relatedSearch = ref('')
+const relatedResults = ref<ProductRelated[]>([])
+
+let searchTimer: ReturnType<typeof setTimeout> | null = null
+watch(relatedSearch, (q) => {
+    if (searchTimer) clearTimeout(searchTimer)
+    if (!q.trim()) { relatedResults.value = []; return }
+    searchTimer = setTimeout(async () => {
+        await fetchProducts(q)
+    }, 1000)
+})
+
+function addRelated(product: ProductRelated) {
+    if (!addProductStore.relatedProducts.some(p => p.id_product === product.id_product)) {
+        addProductStore.relatedProducts.push(product)
+    }
+    relatedSearch.value = ''
+    relatedResults.value = []
+}
+
+function removeRelated(id: number) {
+    const idx = addProductStore.relatedProducts.findIndex(p => p.id_product === id)
+    if (idx !== -1) addProductStore.relatedProducts.splice(idx, 1)
+}
+
+const products = ref()
+async function fetchProducts(q: string) {
+    if (!q.trim()) {
+        products.value = []
+        return
+    }
+
+    loading.value = true
+    relatedResults.value = []
+    try {
+        const query = `name=~${q.trim()}`
+        const result = await useFetchJson(
+            `/api/v1/restricted/product/list?${query}`
+        )
+
+        relatedResults.value = (result.items ?? result) as ProductRelated[]
+    } catch (e) {
+        console.log(e);
+
+    } finally {
+        loading.value = false
+    }
+}
+
+await addProductStore.loadCategories()    
+</script>

bo/src/components/admin/product/TabOptions.vue

@@ -0,0 +1,47 @@
+<template>
+    <div class="card-section space-y-6">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
+            <UFormField label="Visibility">
+                <USelect v-model="store.form.visibility" :options="visibilityOptions" value-key="value"
+                    label-key="label" class="w-full" />
+            </UFormField>
+
+            <UFormField label="Condition">
+                <USelect v-model="store.form.condition" :options="conditionOptions" value-key="value"
+                    label-key="label" class="w-full" />
+            </UFormField>
+
+            <UFormField label="EAN-13 / JAN barcode">
+                <UInput v-model="store.form.ean13" placeholder="4006381333931" :maxlength="13" class="w-full" />
+            </UFormField>
+
+            <UFormField label="UPC barcode">
+                <UInput v-model="store.form.upc" placeholder="012345678905" :maxlength="12" class="w-full" />
+            </UFormField>
+
+            <UFormField label="ISBN">
+                <UInput v-model="store.form.isbn" placeholder="978-3-16-148410-0" :maxlength="32"
+                    class="w-full" />
+            </UFormField>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useAddProductStore } from '@/stores/admin/addProduct'
+
+const store = useAddProductStore()
+
+const visibilityOptions = [
+    { value: 'both', label: 'Everywhere (catalog & search)' },
+    { value: 'catalog', label: 'Catalog only' },
+    { value: 'search', label: 'Search only' },
+    { value: 'none', label: 'Hidden' },
+]
+
+const conditionOptions = [
+    { value: 'new', label: 'New' },
+    { value: 'used', label: 'Used' },
+    { value: 'refurbished', label: 'Refurbished' },
+]
+</script>

bo/src/components/admin/product/TabPricing.vue

@@ -0,0 +1,26 @@
+<template>
+    <div class="card-section space-y-6">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
+            <UFormField label="Price (net)">
+                <UInputNumber v-model="store.form.price" :min="0" :step="0.01"
+                    :format-options="{ minimumFractionDigits: 2 }" class="w-full" />
+            </UFormField>
+
+            <UFormField label="Wholesale price (net)">
+                <UInputNumber v-model="store.form.wholesale_price" :min="0" :step="0.01"
+                    :format-options="{ minimumFractionDigits: 2 }" class="w-full" />
+            </UFormField>
+        </div>
+
+        <div class="flex items-center gap-3">
+            <USwitch v-model="store.form.on_sale" color="warning" />
+            <span class="text-sm text-black dark:text-white">Show "On Sale" badge on this product</span>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useAddProductStore } from '@/stores/admin/addProduct'
+
+const store = useAddProductStore()
+</script>

bo/src/components/admin/product/TabQuantities.vue

@@ -0,0 +1,30 @@
+<template>
+    <div class="card-section space-y-6">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
+            <UFormField label="Stock quantity">
+                <UInputNumber v-model="store.form.quantity" :min="0" class="w-full" />
+            </UFormField>
+
+            <UFormField label="Minimum order quantity">
+                <UInputNumber v-model="store.form.minimal_quantity" :min="1" class="w-full" />
+            </UFormField>
+        </div>
+
+        <UFormField label="When out of stock">
+            <USelect v-model="store.form.out_of_stock" :options="outOfStockOptions" value-key="value"
+                label-key="label" class="w-72" />
+        </UFormField>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useAddProductStore } from '@/stores/admin/addProduct'
+
+const store = useAddProductStore()
+
+const outOfStockOptions = [
+    { value: 0, label: 'Deny orders' },
+    { value: 1, label: 'Allow orders' },
+    { value: 2, label: 'Use shop default' },
+]
+</script>

bo/src/components/admin/product/TabSeo.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="card-section space-y-6">
+        <p class="text-sm text-gray-400">
+            Leave blank to automatically use the product name. Helps search engines find your product.
+        </p>
+
+        <UFormField label="Meta title" hint="Recommended: max 70 characters">
+            <UInput v-model="store.form.meta_title" placeholder="Leave blank to use product name"
+                :maxlength="128" class="w-full" />
+        </UFormField>
+
+        <UFormField label="Meta description" hint="Recommended: max 160 characters">
+            <UTextarea v-model="store.form.meta_description"
+                placeholder="Brief description shown in search results" :rows="3" :maxlength="512"
+                class="w-full" />
+        </UFormField>
+
+        <UFormField label="URL slug">
+            <UInput v-model="store.form.link_rewrite" placeholder="auto-generated-from-name" class="w-full" />
+            <template #hint>
+                <span class="text-xs text-gray-400">Lowercase letters, numbers and hyphens only.</span>
+            </template>
+        </UFormField>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useAddProductStore } from '@/stores/admin/addProduct'
+
+const store = useAddProductStore()
+</script>

bo/src/components/admin/product/TabShipping.vue

@@ -0,0 +1,32 @@
+<template>
+    <div class="card-section space-y-6">
+        <p class="text-sm text-gray-400">
+            Package dimensions are used to calculate shipping costs.
+        </p>
+
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-5">
+            <UFormField label="Width (cm)">
+                <UInputNumber v-model="store.form.width" :min="0" :step="0.01" class="w-full" />
+            </UFormField>
+            <UFormField label="Height (cm)">
+                <UInputNumber v-model="store.form.height" :min="0" :step="0.01" class="w-full" />
+            </UFormField>
+            <UFormField label="Depth (cm)">
+                <UInputNumber v-model="store.form.depth" :min="0" :step="0.01" class="w-full" />
+            </UFormField>
+            <UFormField label="Weight (kg)">
+                <UInputNumber v-model="store.form.weight" :min="0" :step="0.001" class="w-full" />
+            </UFormField>
+        </div>
+
+        <UFormField label="Delivery days" hint="Days to ship from local warehouse to customer">
+            <UInputNumber v-model="store.form.delivery_days" :min="0" class="w-40" />
+        </UFormField>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useAddProductStore } from '@/stores/admin/addProduct'
+
+const store = useAddProductStore()
+</script>

bo/src/components/admin/product/TabVariants.vue

@@ -0,0 +1,120 @@
+<template>
+    <div class="card-section space-y-4">
+
+        <div v-if="store.loading" class="flex justify-center py-10">
+            <UIcon name="svg-spinners:ring-resize" class="text-3xl text-primary" />
+        </div>
+
+        <div v-else-if="store.variants.length === 0" class="flex flex-col items-center gap-3 py-10 text-gray-400">
+            <UIcon name="i-lucide-layers" class="text-4xl" />
+            <p class="text-sm text-center">
+                {{ isEditMode ? 'No variants found for this product.' : 'Save the product first, then variants will appear here.' }}
+            </p>
+        </div>
+
+        <template v-else>
+            <p class="text-sm text-gray-400">
+                Each variant is a combination of attributes (e.g. Color: Red / Size: M).
+                Edit price offset, stock and other details per variant independently.
+            </p>
+
+            <div v-for="variant in store.variants" :key="variant.id_product_attribute"
+                class="border border-(--border-light) dark:border-(--border-dark) rounded-xl p-4 space-y-4">
+
+                <!-- Variant header -->
+                <div class="flex items-center justify-between flex-wrap gap-2">
+                    <div class="flex items-center gap-2">
+                        <span class="font-semibold text-black dark:text-white text-sm">
+                            {{ variant.attribute_label || `Variant #${variant.id_product_attribute}` }}
+                        </span>
+                        <UBadge v-if="variant.default_on" color="success" variant="subtle" size="sm">
+                            Default
+                        </UBadge>
+                    </div>
+
+                    <UButton size="sm" color="info"
+                        :loading="!!store.variantSaving[variant.id_product_attribute!]"
+                        @click="handleSaveVariant(variant)">
+                        Save variant
+                    </UButton>
+                </div>
+
+                <UAlert v-if="store.variantErrors[variant.id_product_attribute!]" color="error"
+                    variant="subtle" :title="store.variantErrors[variant.id_product_attribute!]" />
+
+                <!-- Variant fields -->
+                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+                    <UFormField label="Reference">
+                        <UInput v-model="variant.reference" placeholder="REF-001-A" class="w-full" />
+                    </UFormField>
+
+                    <UFormField label="EAN-13">
+                        <UInput v-model="variant.ean13" placeholder="4006381333931" :maxlength="13"
+                            class="w-full" />
+                    </UFormField>
+
+                    <UFormField label="Price offset">
+                        <UInputNumber v-model="variant.price" :step="0.01"
+                            :format-options="{ minimumFractionDigits: 2 }" class="w-full" />
+                    </UFormField>
+
+                    <UFormField label="Wholesale price">
+                        <UInputNumber v-model="variant.wholesale_price" :min="0" :step="0.01"
+                            :format-options="{ minimumFractionDigits: 2 }" class="w-full" />
+                    </UFormField>
+
+                    <UFormField label="Stock quantity">
+                        <UInputNumber v-model="variant.quantity" :min="0" class="w-full" />
+                    </UFormField>
+
+                    <UFormField label="Min. quantity">
+                        <UInputNumber v-model="variant.minimal_quantity" :min="1" class="w-full" />
+                    </UFormField>
+
+                    <UFormField label="Weight offset (kg)">
+                        <UInputNumber v-model="variant.weight" :step="0.001" class="w-full" />
+                    </UFormField>
+
+                    <UFormField label="">
+                        <div class="flex items-center gap-2 pt-6">
+                            <USwitch v-model="variant.default_on" color="success"
+                                @update:model-value="onSetDefault(variant)" />
+                            <span class="text-sm text-black dark:text-white">Set as default</span>
+                        </div>
+                    </UFormField>
+                </div>
+            </div>
+        </template>
+
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useAddProductStore } from '@/stores/admin/addProduct'
+import type { ProductVariantForm } from '@/types/product'
+
+const props = defineProps<{ isEditMode: boolean }>()
+
+const store = useAddProductStore()
+
+async function handleSaveVariant(variant: ProductVariantForm) {
+    if (!variant.id_product_attribute) return
+    await store.saveVariant(variant.id_product_attribute, {
+        reference: variant.reference,
+        ean13: variant.ean13,
+        price: variant.price,
+        wholesale_price: variant.wholesale_price,
+        quantity: variant.quantity,
+        minimal_quantity: variant.minimal_quantity,
+        weight: variant.weight,
+        default_on: variant.default_on,
+    })
+}
+
+function onSetDefault(selected: ProductVariantForm) {
+    if (!selected.default_on) return
+    store.variants.forEach(v => {
+        if (v.id_product_attribute !== selected.id_product_attribute) v.default_on = false
+    })
+}
+</script>