feat: add commercial classifications management and integrate SAT code products in product form

src/components/layout/Sidebar.vue

@@ -28,6 +28,11 @@ const menuItems = ref<MenuItem[]>([
             { label: 'Documentos del Modelo', icon: 'pi pi-file', to: '/catalog/model-documents' }
         ]
     },
+    {
+        label: 'Productos',
+        icon: 'pi pi-shopping-cart',
+        to: '/products'
+    },
     {
         label: 'Requisiciones',
         icon: 'pi pi-file-edit',
@@ -61,11 +66,6 @@ const menuItems = ref<MenuItem[]>([
             { label: 'Departamentos', icon: 'pi pi-briefcase', to: '/rh/departments' }
         ]
     },
-    {
-        label: 'Productos',
-        icon: 'pi pi-shopping-cart',
-        to: '/products'
-    },
     {
         label: 'Puntos de venta',
         icon: 'pi pi-cog',

src/modules/catalog/components/ClassificationsComercial.vue

@@ -1,5 +0,0 @@
-<template>
-    <p>
-        Clasificaciones Comerciales
-    </p>
-</template>

src/modules/catalog/components/comercial-classification/ClassificationsComercial.vue

@@ -0,0 +1,660 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue';
+import { useConfirm } from 'primevue/useconfirm';
+import { useToast } from 'primevue/usetoast';
+import Button from 'primevue/button';
+import Card from 'primevue/card';
+import Column from 'primevue/column';
+import ConfirmDialog from 'primevue/confirmdialog';
+import DataTable from 'primevue/datatable';
+import Dialog from 'primevue/dialog';
+import Dropdown from 'primevue/dropdown';
+import InputText from 'primevue/inputtext';
+import Textarea from 'primevue/textarea';
+import InputSwitch from 'primevue/inputswitch';
+import ProgressSpinner from 'primevue/progressspinner';
+import Toast from 'primevue/toast';
+import { useComercialClassificationStore } from '../../stores/comercialClassificationStore';
+import type { ComercialClassification } from '../../types/comercialClassification';
+
+const confirm = useConfirm();
+const toast = useToast();
+const classificationStore = useComercialClassificationStore();
+
+interface Category {
+    id: number;
+    code: string;
+    name: string;
+    description: string;
+    parent_id: number | null;
+    is_active: number;
+    created_at: string;
+    subcategories: Category[];
+}
+
+const selectedCategory = ref<Category | null>(null);
+const showCreateModal = ref(false);
+const isSubmitting = ref(false);
+const isEditMode = ref(false);
+const editingId = ref<number | null>(null);
+
+// Computed properties from store
+const loading = computed(() => classificationStore.loading);
+const categories = computed(() => transformClassifications(classificationStore.classifications));
+
+// Form data
+const formData = ref({
+    code: '',
+    name: '',
+    description: '',
+    parent_id: null as number | null,
+    is_active: 1 as number
+});
+
+// Computed para el switch (convierte number a boolean y viceversa)
+const isActiveSwitch = computed({
+    get: () => formData.value.is_active === 1,
+    set: (value: boolean) => {
+        formData.value.is_active = value ? 1 : 0;
+    }
+});
+
+// Transform API data to component structure
+const transformClassifications = (classifications: ComercialClassification[]): Category[] => {
+    return classifications.map(cls => ({
+        id: cls.id,
+        code: cls.code,
+        name: cls.name,
+        description: cls.description || '',
+        parent_id: cls.parent_id,
+        is_active: cls.is_active,
+        created_at: cls.created_at,
+        subcategories: cls.children ? cls.children.map(child => ({
+            id: child.id,
+            code: child.code,
+            name: child.name,
+            description: child.description || '',
+            parent_id: child.parent_id,
+            is_active: child.is_active,
+            created_at: child.created_at,
+            subcategories: []
+        })) : []
+    }));
+};
+
+const loadClassifications = async () => {
+    try {
+        await classificationStore.fetchClassifications();
+        
+        // Select first category by default
+        if (categories.value.length > 0 && categories.value[0]) {
+            selectedCategory.value = categories.value[0];
+        }
+    } catch (error) {
+        console.error('Error loading classifications:', error);
+        toast.add({
+            severity: 'error',
+            summary: 'Error',
+            detail: 'No se pudieron cargar las clasificaciones comerciales.',
+            life: 3000
+        });
+    }
+};
+
+const selectCategory = (category: Category) => {
+    selectedCategory.value = category;
+};
+
+const addNewCategory = () => {
+    // Reset form
+    isEditMode.value = false;
+    editingId.value = null;
+    formData.value = {
+        code: '',
+        name: '',
+        description: '',
+        parent_id: null,
+        is_active: 1
+    };
+    showCreateModal.value = true;
+};
+
+const closeModal = () => {
+    showCreateModal.value = false;
+    isEditMode.value = false;
+    editingId.value = null;
+};
+
+const createClassification = async () => {
+    try {
+        isSubmitting.value = true;
+        
+        if (isEditMode.value && editingId.value) {
+            // Update existing classification
+            await classificationStore.updateClassification(editingId.value, formData.value);
+            
+            toast.add({
+                severity: 'success',
+                summary: 'Clasificación Actualizada',
+                detail: `La clasificación "${formData.value.name}" ha sido actualizada exitosamente.`,
+                life: 3000
+            });
+            
+            // Actualizar la categoría seleccionada si fue la que se editó
+            if (selectedCategory.value?.id === editingId.value) {
+                const updatedCategory = categories.value.find(c => c.id === editingId.value);
+                if (updatedCategory) {
+                    selectedCategory.value = updatedCategory;
+                }
+            }
+        } else {
+            // Create new classification
+            await classificationStore.createClassification(formData.value);
+            
+            toast.add({
+                severity: 'success',
+                summary: 'Clasificación Creada',
+                detail: `La clasificación "${formData.value.name}" ha sido creada exitosamente.`,
+                life: 3000
+            });
+            
+            // Si se creó una subclasificación, actualizar la vista de la categoría padre
+            if (formData.value.parent_id && selectedCategory.value?.id === formData.value.parent_id) {
+                const parentCategory = categories.value.find(c => c.id === formData.value.parent_id);
+                if (parentCategory) {
+                    selectedCategory.value = parentCategory;
+                }
+            }
+        }
+        
+        showCreateModal.value = false;
+        isEditMode.value = false;
+        editingId.value = null;
+        // Reset form
+        formData.value = {
+            code: '',
+            name: '',
+            description: '',
+            parent_id: null,
+            is_active: 1
+        };
+    } catch (error) {
+        console.error('Error saving classification:', error);
+        toast.add({
+            severity: 'error',
+            summary: 'Error',
+            detail: isEditMode.value 
+                ? 'No se pudo actualizar la clasificación. Por favor, intenta nuevamente.'
+                : 'No se pudo crear la clasificación. Por favor, intenta nuevamente.',
+            life: 3000
+        });
+    } finally {
+        isSubmitting.value = false;
+    }
+};
+
+const addSubcategory = () => {
+    if (selectedCategory.value) {
+        isEditMode.value = false;
+        editingId.value = null;
+        formData.value = {
+            code: '',
+            name: '',
+            description: '',
+            parent_id: selectedCategory.value.id,
+            is_active: 1
+        };
+        showCreateModal.value = true;
+    }
+};
+
+const editCategory = () => {
+    if (!selectedCategory.value) return;
+    
+    isEditMode.value = true;
+    editingId.value = selectedCategory.value.id;
+    formData.value = {
+        code: selectedCategory.value.code,
+        name: selectedCategory.value.name,
+        description: selectedCategory.value.description,
+        parent_id: selectedCategory.value.parent_id,
+        is_active: selectedCategory.value.is_active
+    };
+    showCreateModal.value = true;
+};
+
+const deleteCategory = () => {
+    if (!selectedCategory.value) return;
+    
+    confirm.require({
+        message: `¿Estás seguro de eliminar la clasificación comercial "${selectedCategory.value.name}"?`,
+        header: 'Confirmar Eliminación',
+        icon: 'pi pi-exclamation-triangle',
+        rejectLabel: 'Cancelar',
+        acceptLabel: 'Eliminar',
+        rejectClass: 'p-button-secondary p-button-outlined',
+        acceptClass: 'p-button-danger',
+        accept: async () => {
+            try {
+                const categoryName = selectedCategory.value!.name;
+                const categoryId = selectedCategory.value!.id;
+                await classificationStore.deleteClassification(categoryId);
+                
+                toast.add({
+                    severity: 'success',
+                    summary: 'Clasificación Eliminada',
+                    detail: `La clasificación "${categoryName}" ha sido eliminada exitosamente.`,
+                    life: 3000
+                });
+                
+                // Seleccionar otra categoría o limpiar la selección
+                if (categories.value.length > 0) {
+                    selectedCategory.value = categories.value[0] || null;
+                } else {
+                    selectedCategory.value = null;
+                }
+            } catch (error) {
+                console.error('Error deleting classification:', error);
+                toast.add({
+                    severity: 'error',
+                    summary: 'Error al Eliminar',
+                    detail: 'No se pudo eliminar la clasificación. Puede estar en uso.',
+                    life: 3000
+                });
+            }
+        }
+    });
+};
+
+const editSubcategory = (subcategory: Category) => {
+    isEditMode.value = true;
+    editingId.value = subcategory.id;
+    formData.value = {
+        code: subcategory.code,
+        name: subcategory.name,
+        description: subcategory.description,
+        parent_id: subcategory.parent_id,
+        is_active: subcategory.is_active
+    };
+    showCreateModal.value = true;
+};
+
+const deleteSubcategory = (subcategory: Category) => {
+    confirm.require({
+        message: `¿Estás seguro de eliminar la subclasificación "${subcategory.name}"?`,
+        header: 'Confirmar Eliminación',
+        icon: 'pi pi-exclamation-triangle',
+        rejectLabel: 'Cancelar',
+        acceptLabel: 'Eliminar',
+        rejectClass: 'p-button-secondary p-button-outlined',
+        acceptClass: 'p-button-danger',
+        accept: async () => {
+            try {
+                await classificationStore.deleteClassification(subcategory.id);
+                
+                toast.add({
+                    severity: 'success',
+                    summary: 'Subclasificación Eliminada',
+                    detail: `La subclasificación "${subcategory.name}" ha sido eliminada exitosamente.`,
+                    life: 3000
+                });
+                
+                // Actualizar la vista de la categoría padre para reflejar los cambios
+                if (selectedCategory.value) {
+                    const updatedParent = categories.value.find(c => c.id === selectedCategory.value!.id);
+                    if (updatedParent) {
+                        selectedCategory.value = updatedParent;
+                    }
+                }
+            } catch (error) {
+                console.error('Error deleting subcategory:', error);
+                toast.add({
+                    severity: 'error',
+                    summary: 'Error al Eliminar',
+                    detail: 'No se pudo eliminar la subclasificación.',
+                    life: 3000
+                });
+            }
+        }
+    });
+};
+
+onMounted(() => {
+    loadClassifications();
+});
+</script>
+
+<template>
+    <div class="space-y-6">
+        <!-- Toast Notifications -->
+        <Toast position="bottom-right" />
+
+        <!-- Confirm Dialog -->
+        <ConfirmDialog></ConfirmDialog>
+
+        <!-- Page Heading -->
+        <div class="flex flex-wrap items-center justify-between gap-3">
+            <h1 class="text-2xl font-bold leading-tight tracking-tight text-surface-900 dark:text-white">
+                Clasificaciones Comerciales
+            </h1>
+        </div>
+
+        <!-- Two-Panel Layout -->
+        <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
+            <!-- Left Panel (Category List) -->
+            <Card class="lg:col-span-1">
+                <template #content>
+                    <div class="flex flex-col gap-4">
+                        <!-- Add Category Button -->
+                        <Button
+                            label="Nueva Clasificación"
+                            icon="pi pi-plus"
+                            class="w-full"
+                            @click="addNewCategory"
+                        />
+
+                        <!-- Categories List -->
+                        <div v-if="loading" class="flex items-center justify-center py-8">
+                            <ProgressSpinner style="width: 50px; height: 50px" />
+                        </div>
+                        <div v-else-if="categories.length === 0" class="flex flex-col items-center justify-center py-8 text-center">
+                            <i class="pi pi-inbox text-4xl text-surface-300 dark:text-surface-600 mb-4"></i>
+                            <p class="text-sm text-surface-500 dark:text-surface-400">
+                                No hay clasificaciones comerciales creadas
+                            </p>
+                        </div>
+                        <div v-else class="flex flex-col gap-1">
+                            <div
+                                v-for="category in categories"
+                                :key="category.id"
+                                :class="[
+                                    'flex cursor-pointer items-center justify-between gap-4 rounded-lg px-4 py-3 transition-colors',
+                                    selectedCategory?.id === category.id
+                                        ? 'bg-primary/10 text-primary'
+                                        : 'hover:bg-surface-100 dark:hover:bg-surface-800'
+                                ]"
+                                @click="selectCategory(category)"
+                            >
+                                <div class="flex items-center gap-4">
+                                    <div
+                                        :class="[
+                                            'flex size-10 shrink-0 items-center justify-center rounded-lg',
+                                            selectedCategory?.id === category.id
+                                                ? 'bg-primary/20 text-primary'
+                                                : 'bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-400'
+                                        ]"
+                                    >
+                                        <i class="pi pi-shopping-bag"></i>
+                                    </div>
+                                    <div class="flex-1 min-w-0">
+                                        <p
+                                            :class="[
+                                                'truncate text-base',
+                                                selectedCategory?.id === category.id
+                                                    ? 'font-semibold text-primary'
+                                                    : 'font-normal text-surface-800 dark:text-surface-300'
+                                            ]"
+                                        >
+                                            {{ category.name }}
+                                        </p>
+                                        <p class="text-xs text-surface-500 dark:text-surface-400 truncate">
+                                            {{ category.code }}
+                                        </p>
+                                    </div>
+                                </div>
+                                <div :class="selectedCategory?.id === category.id ? 'text-primary' : 'text-surface-400'">
+                                    <i class="pi pi-chevron-right"></i>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </Card>
+
+            <!-- Right Panel (Details View) -->
+            <Card v-if="!selectedCategory" class="lg:col-span-2">
+                <template #content>
+                    <div class="flex flex-col items-center justify-center py-16">
+                        <i class="pi pi-shopping-bag text-6xl text-surface-300 dark:text-surface-600 mb-4"></i>
+                        <h3 class="text-xl font-semibold text-surface-700 dark:text-surface-300 mb-2">
+                            Selecciona una clasificación
+                        </h3>
+                        <p class="text-sm text-surface-500 dark:text-surface-400">
+                            Elige una clasificación comercial de la lista para ver sus detalles
+                        </p>
+                    </div>
+                </template>
+            </Card>
+
+            <Card v-else class="lg:col-span-2">
+                <template #content>
+                    <div class="flex flex-col gap-6">
+                        <!-- Header -->
+                        <div class="flex flex-wrap items-start justify-between gap-4">
+                            <div class="flex-1">
+                                <p class="text-xs font-medium uppercase tracking-wider text-surface-500 dark:text-surface-400">
+                                    Detalles de la Clasificación Comercial
+                                </p>
+                                <h3 class="text-xl font-bold text-surface-900 dark:text-white mt-1">
+                                    {{ selectedCategory.name }}
+                                </h3>
+                                <p class="mt-1 text-sm font-mono text-surface-600 dark:text-surface-400">
+                                    Código: {{ selectedCategory.code }}
+                                </p>
+                            </div>
+                            <div class="flex items-center gap-2">
+                                <Button
+                                    icon="pi pi-pencil"
+                                    outlined
+                                    rounded
+                                    @click="editCategory"
+                                    v-tooltip.top="'Editar'"
+                                />
+                                <Button
+                                    icon="pi pi-trash"
+                                    severity="danger"
+                                    outlined
+                                    rounded
+                                    @click="deleteCategory"
+                                    v-tooltip.top="'Eliminar'"
+                                />
+                            </div>
+                        </div>
+
+                        <!-- Subcategory Section -->
+                        <div class="flex flex-col">
+                            <div class="mb-4 flex items-center justify-between">
+                                <h4 class="font-semibold text-surface-800 dark:text-surface-200">
+                                    Subclasificaciones ({{ selectedCategory.subcategories.length }})
+                                </h4>
+                                <Button
+                                    label="Agregar Subclasificación"
+                                    icon="pi pi-plus"
+                                    size="small"
+                                    @click="addSubcategory"
+                                />
+                            </div>
+
+                            <!-- Subcategory Table -->
+                            <DataTable
+                                :value="selectedCategory.subcategories"
+                                stripedRows
+                                responsiveLayout="scroll"
+                            >
+                                <Column field="name" header="Nombre" sortable>
+                                    <template #body="slotProps">
+                                        <span class="font-medium text-surface-900 dark:text-white">
+                                            {{ slotProps.data.name }}
+                                        </span>
+                                    </template>
+                                </Column>
+
+                                <Column field="code" header="Código" sortable>
+                                    <template #body="slotProps">
+                                        <span class="text-surface-500 dark:text-surface-400 font-mono">
+                                            {{ slotProps.data.code }}
+                                        </span>
+                                    </template>
+                                </Column>
+
+                                <Column field="created_at" header="Fecha de Creación" sortable>
+                                    <template #body="slotProps">
+                                        <span class="text-surface-500 dark:text-surface-400">
+                                            {{ new Date(slotProps.data.created_at).toLocaleDateString('es-MX', { 
+                                                year: 'numeric', 
+                                                month: 'short', 
+                                                day: 'numeric',
+                                                hour: '2-digit',
+                                                minute: '2-digit'
+                                            }) }}
+                                        </span>
+                                    </template>
+                                </Column>
+
+                                <Column header="Acciones" headerStyle="text-align: right" bodyStyle="text-align: right">
+                                    <template #body="slotProps">
+                                        <div class="flex items-center justify-end gap-2">
+                                            <Button
+                                                icon="pi pi-pencil"
+                                                text
+                                                rounded
+                                                size="small"
+                                                @click="editSubcategory(slotProps.data)"
+                                            />
+                                            <Button
+                                                icon="pi pi-trash"
+                                                text
+                                                rounded
+                                                size="small"
+                                                severity="danger"
+                                                @click="deleteSubcategory(slotProps.data)"
+                                            />
+                                        </div>
+                                    </template>
+                                </Column>
+
+                                <template #empty>
+                                    <div class="flex flex-col items-center justify-center py-8 text-center">
+                                        <i class="pi pi-inbox text-4xl text-surface-300 dark:text-surface-600 mb-4"></i>
+                                        <h3 class="text-lg font-semibold text-surface-900 dark:text-surface-0">
+                                            No hay subclasificaciones
+                                        </h3>
+                                        <p class="text-sm text-surface-500 dark:text-surface-400 mt-2">
+                                            Agrega subclasificaciones para organizar mejor esta categoría
+                                        </p>
+                                    </div>
+                                </template>
+                            </DataTable>
+                        </div>
+                    </div>
+                </template>
+            </Card>
+        </div>
+
+        <!-- Create/Edit Classification Modal -->
+        <Dialog
+            v-model:visible="showCreateModal"
+            modal
+            :header="isEditMode ? 'Editar Clasificación Comercial' : 'Nueva Clasificación Comercial'"
+            :style="{ width: '500px' }"
+        >
+            <div class="flex flex-col gap-4 py-4">
+                <!-- Code -->
+                <div>
+                    <label for="code" class="block text-sm font-medium mb-2">
+                        Código <span class="text-red-500">*</span>
+                    </label>
+                    <InputText
+                        id="code"
+                        v-model="formData.code"
+                        class="w-full"
+                        placeholder="Ej: COM-001"
+                    />
+                </div>
+
+                <!-- Name -->
+                <div>
+                    <label for="name" class="block text-sm font-medium mb-2">
+                        Nombre <span class="text-red-500">*</span>
+                    </label>
+                    <InputText
+                        id="name"
+                        v-model="formData.name"
+                        class="w-full"
+                        placeholder="Ej: PRODUCTOS DE CONSUMO"
+                    />
+                </div>
+
+                <!-- Description -->
+                <div>
+                    <label for="description" class="block text-sm font-medium mb-2">
+                        Descripción
+                    </label>
+                    <Textarea
+                        id="description"
+                        v-model="formData.description"
+                        rows="3"
+                        class="w-full"
+                        placeholder="Descripción de la clasificación comercial"
+                    />
+                </div>
+
+                <!-- Parent Category -->
+                <div>
+                    <label for="parent" class="block text-sm font-medium mb-2">
+                        Clasificación Padre (Opcional)
+                    </label>
+                    <Dropdown
+                        id="parent"
+                        v-model="formData.parent_id"
+                        :options="categories"
+                        optionLabel="name"
+                        optionValue="id"
+                        placeholder="Seleccionar clasificación padre..."
+                        class="w-full"
+                        showClear
+                    />
+                    <small class="text-surface-500 dark:text-surface-400">
+                        Deja vacío para crear una clasificación raíz
+                    </small>
+                </div>
+
+                <!-- Active Status -->
+                <div>
+                    <div class="flex items-center justify-between">
+                        <div>
+                            <label for="is_active" class="block text-sm font-medium mb-1">
+                                Estado
+                            </label>
+                            <small class="text-surface-500 dark:text-surface-400">
+                                Activa o desactiva esta clasificación comercial
+                            </small>
+                        </div>
+                        <InputSwitch
+                            id="is_active"
+                            v-model="isActiveSwitch"
+                        />
+                    </div>
+                </div>
+            </div>
+
+            <template #footer>
+                <div class="flex justify-end gap-2">
+                    <Button
+                        label="Cancelar"
+                        severity="secondary"
+                        outlined
+                        @click="closeModal"
+                        :disabled="isSubmitting"
+                    />
+                    <Button
+                        :label="isEditMode ? 'Actualizar' : 'Crear'"
+                        @click="createClassification"
+                        :loading="isSubmitting"
+                        :disabled="!formData.code || !formData.name"
+                    />
+                </div>
+            </template>
+        </Dialog>
+    </div>
+</template>

src/modules/catalog/services/sat-code-products.services.ts

@@ -0,0 +1,18 @@
+import api from "../../../services/api";
+
+export interface SatCodeProduct {
+    id: number;
+    code: string;
+    description: string;
+}
+
+export interface SatCodeProductResponse {
+    data: SatCodeProduct[];
+}
+
+export const satCodeProductsService = {
+    async getSatCodeProducts(search: string = ''): Promise<SatCodeProductResponse> {
+        const response = await api.get(`/api/sat/products?search=${search}`);
+        return response.data;
+    }
+};

src/modules/products/components/ProductForm.vue

@@ -5,8 +5,10 @@ import InputText from 'primevue/inputtext';
 import Textarea from 'primevue/textarea';
 import Button from 'primevue/button';
 import FileUpload from 'primevue/fileupload';
+import Dropdown from 'primevue/dropdown';
 import { useComercialClassificationStore } from '../../catalog/stores/comercialClassificationStore';
 import { useUnitOfMeasureStore } from '../../catalog/stores/unitOfMeasureStore';
+import { satCodeProductsService, type SatCodeProduct } from '../../catalog/services/sat-code-products.services';
 import type { Product, CreateProductData } from '../types/product';
 
 // Props
@@ -39,14 +41,22 @@ const formData = ref<CreateProductData>({
     description: '',
     unit_of_measure_id: 0,
     suggested_sale_price: 0,
-    attributes: {},
+    attributes: null,
     is_active: true,
+    is_serial: false,
+    sat_code_product_id: null,
     classifications: []
 });
 
 // Temporary string for price input
 const priceInput = ref<string>('0');
 
+// SAT Code Products
+const satCodeProducts = ref<SatCodeProduct[]>([]);
+const loadingSatCodeProducts = ref(false);
+const searchSatQuery = ref('');
+let searchSatTimeout: ReturnType<typeof setTimeout> | null = null;
+
 // Attributes management
 interface AttributeValue {
     id: string;
@@ -131,6 +141,67 @@ const toggleClassification = (classificationId: number) => {
 
 const loadingClassifications = computed(() => clasificationsStore.loading);
 
+// Options para el dropdown de SAT
+const satCodeProductOptions = computed(() => 
+    satCodeProducts.value.map(product => ({
+        label: `${product.code} - ${product.description}`,
+        value: product.id
+    }))
+);
+
+const satEmptyMessage = computed(() => {
+    if (props.isEditing && satCodeProducts.value.length === 1) {
+        return 'Escribe para buscar otro código SAT...';
+    }
+    return 'No se encontraron códigos. Escribe para buscar.';
+});
+
+// Load SAT Code Products
+const loadSatCodeProducts = async (search: string) => {
+    // Solo buscar si hay texto
+    if (!search || search.trim().length === 0) {
+        // Si estamos editando y hay un código actual, mantenerlo
+        if (props.product?.sat_code_product) {
+            satCodeProducts.value = [props.product.sat_code_product];
+        } else {
+            satCodeProducts.value = [];
+        }
+        return;
+    }
+    
+    try {
+        loadingSatCodeProducts.value = true;
+        const response = await satCodeProductsService.getSatCodeProducts(search);
+        satCodeProducts.value = response.data;
+    } catch (error) {
+        console.error('Error loading SAT code products:', error);
+        // Si hay error y estamos editando, mantener el código actual
+        if (props.product?.sat_code_product) {
+            satCodeProducts.value = [props.product.sat_code_product];
+        } else {
+            satCodeProducts.value = [];
+        }
+    } finally {
+        loadingSatCodeProducts.value = false;
+    }
+};
+
+// Debounced search for SAT codes
+const handleSatSearchChange = (event: any) => {
+    const query = event.value || '';
+    searchSatQuery.value = query;
+    
+    // Limpiar timeout anterior
+    if (searchSatTimeout) {
+        clearTimeout(searchSatTimeout);
+    }
+    
+    // Aplicar debounce de 500ms
+    searchSatTimeout = setTimeout(() => {
+        loadSatCodeProducts(query);
+    }, 500);
+};
+
 // Load classifications on mount
 onMounted(async () => {
     console.log('🔄 ProductForm mounted, loading classifications and units of measure...');
@@ -159,9 +230,16 @@ watch(() => props.product, (newProduct) => {
             suggested_sale_price: newProduct.suggested_sale_price,
             attributes: newProduct.attributes || {},
             is_active: newProduct.is_active,
+            is_serial: newProduct.is_serial || false,
+            sat_code_product_id: newProduct.sat_code_product_id || null,
             classifications: newProduct.classifications?.map(c => c.id) || []
         };
 
+        // Precargar el código SAT actual en el dropdown
+        if (newProduct.sat_code_product) {
+            satCodeProducts.value = [newProduct.sat_code_product];
+        }
+
         priceInput.value = newProduct.suggested_sale_price.toString();
 
         // Convert attributes object to array format
@@ -349,6 +427,48 @@ const onUpload = (event: any) => {
                                 />
                             </div>
 
+                            <!-- SAT Code Product -->
+                            <div class="sm:col-span-2">
+                                <label for="sat-code-product" class="block text-sm font-medium mb-2">
+                                    Código SAT de Producto
+                                </label>
+                                <Dropdown
+                                    id="sat-code-product"
+                                    v-model="formData.sat_code_product_id"
+                                    :options="satCodeProductOptions"
+                                    optionLabel="label"
+                                    optionValue="value"
+                                    :loading="loadingSatCodeProducts"
+                                    placeholder="Escribe para buscar un código SAT..."
+                                    class="w-full"
+                                    :filter="true"
+                                    filterPlaceholder="Buscar código SAT"
+                                    :showClear="true"
+                                    @filter="handleSatSearchChange"
+                                    :emptyFilterMessage="satEmptyMessage"
+                                />
+                                <small class="text-surface-500 dark:text-surface-400">
+                                    Código del catálogo SAT para facturación
+                                </small>
+                            </div>
+
+                            <!-- Is Serial -->
+                            <div class="sm:col-span-2">
+                                <label class="flex items-center space-x-3 cursor-pointer">
+                                    <input
+                                        type="checkbox"
+                                        v-model="formData.is_serial"
+                                        class="w-5 h-5 rounded border-surface-300 dark:border-surface-600 text-primary focus:ring-primary/50"
+                                    />
+                                    <span class="text-sm font-medium">
+                                        Producto requiere número de serie
+                                    </span>
+                                </label>
+                                <p class="text-xs text-surface-500 mt-1 ml-8">
+                                    Marca esta opción si cada unidad del producto debe tener un número de serie único
+                                </p>
+                            </div>
+
                             <!-- Description -->
                             <div class="sm:col-span-2">
                                 <label for="description" class="block text-sm font-medium mb-2">
@@ -369,7 +489,7 @@ const onUpload = (event: any) => {
                 <!-- Product Attributes Card -->
                 <Card>
                     <template #title>
-                        <h2 class="text-lg font-bold">Atributos del Producto</h2>
+                        <h2 class="text-lg font-bold">Características del Producto</h2>
                     </template>
                     <template #content>
                         <div class="space-y-6">
@@ -381,7 +501,7 @@ const onUpload = (event: any) => {
                             >
                                 <div class="flex items-center justify-between mb-4">
                                     <label class="block text-sm font-medium">
-                                        Nombre del Atributo
+                                        Nombre de la característica
                                     </label>
                                     <Button
                                         icon="pi pi-trash"
@@ -399,7 +519,7 @@ const onUpload = (event: any) => {
                                 />
 
                                 <label class="block text-sm font-medium mb-2">
-                                    Valores del Atributo
+                                    Valores de la característica
                                 </label>
 
                                 <!-- Attribute values -->
@@ -434,7 +554,7 @@ const onUpload = (event: any) => {
 
                             <!-- Add attribute button -->
                             <Button
-                                label="Agregar Otro Atributo"
+                                label="Agregar Otra Característica"
                                 icon="pi pi-plus"
                                 severity="secondary"
                                 outlined

src/modules/products/components/ProductsIndex.vue

@@ -282,6 +282,16 @@ onMounted(() => {
                         </template>
                     </Column>
 
+                    <!-- Is Serial -->
+                    <Column field="is_serial" header="N° Serie" sortable style="min-width: 100px">
+                        <template #body="slotProps">
+                            <Tag
+                                :value="slotProps.data.is_serial ? 'Sí' : 'No'"
+                                :severity="slotProps.data.is_serial ? 'info' : 'secondary'"
+                            />
+                        </template>
+                    </Column>
+
                     <!-- Actions -->
                     <Column header="Acciones" headerStyle="text-align: right" bodyStyle="text-align: right" style="min-width: 120px">
                         <template #body="slotProps">

src/modules/products/types/product.d.ts

@@ -2,6 +2,8 @@
  * Product Type Definitions
  */
 
+import type { SatCodeProduct } from '../../catalog/services/sat-code-products.services';
+
 export interface Product {
     id: number;
     code: string;
@@ -13,6 +15,9 @@ export interface Product {
     suggested_sale_price: number;
     attributes?: Record<string, string[]>;
     is_active: boolean;
+    is_serial: boolean;
+    sat_code_product_id?: number | null;
+    sat_code_product?: SatCodeProduct;
     created_at: string;
     updated_at: string;
     deleted_at?: string | null;
@@ -28,8 +33,10 @@ export interface CreateProductData {
     description?: string;
     unit_of_measure_id: number;
     suggested_sale_price: number;
-    attributes?: Record<string, string[]>;
+    attributes?: Record<string, string[]> | null;
     is_active?: boolean;
+    is_serial?: boolean;
+    sat_code_product_id?: number | null;
     classifications?: number[];
 }
 
@@ -41,8 +48,10 @@ export interface UpdateProductData {
     description?: string;
     unit_of_measure_id?: number;
     suggested_sale_price?: number;
-    attributes?: Record<string, string[]>;
+    attributes?: Record<string, string[]> | null;
     is_active?: boolean;
+    is_serial?: boolean;
+    sat_code_product_id?: number | null;
     classifications?: number[];
 }
 

src/router/index.ts

@@ -9,7 +9,6 @@ import WarehouseForm from '../modules/warehouse/components/WarehouseForm.vue';
 import WarehouseDetails from '../modules/warehouse/components/WarehouseDetails.vue';
 import WarehouseClassification from '../modules/warehouse/components/WarehouseClassification.vue';
 import Units from '../modules/catalog/components/units/Units.vue';
-import ComercialClassification from '../modules/catalog/components/ComercialClassification.vue';
 import ProductsIndex from '../modules/products/components/ProductsIndex.vue';
 import ProductForm from '../modules/products/components/ProductForm.vue';
 import StoresIndex from '../modules/stores/components/StoresIndex.vue';
@@ -30,6 +29,7 @@ import WarehouseAddInventory from '../modules/warehouse/components/WarehouseAddI
 import ModelDocuments from '../modules/catalog/components/ModelDocuments.vue';
 import Requisitions from '../modules/requisitions/Requisitions.vue';
 import CreateRequisition from '../modules/requisitions/CreateRequisition.vue';
+import ClassificationsComercial from '../modules/catalog/components/comercial-classification/ClassificationsComercial.vue';
 
 const routes: RouteRecordRaw[] = [
     {
@@ -150,7 +150,7 @@ const routes: RouteRecordRaw[] = [
                     {
                         path: 'classifications-comercial',
                         name: 'ClassificationsComercial',
-                        component: ComercialClassification,
+                        component: ClassificationsComercial,
                         meta: {
                             title: 'Clasificaciones Comerciales',
                             requiresAuth: true