From 8dca19413ba31bba216124601e1b836ff26d50dc Mon Sep 17 00:00:00 2001
From: AlexeerCT <alexeer.ct@ejemplo.com>
Date: Thu, 8 Jan 2026 21:14:08 -0600
Subject: [PATCH] feat: add Fixed Asset Classes management page with CRUD
 functionality

---
 backend/api/v1/modules/a76/classes/dto.py     |    4 -
 backend/api/v1/modules/a76/classes/models.py  |   13 +-
 backend/api/v1/modules/a76/classes/routes.py  |   23 -
 backend/api/v1/modules/a76/classes/service.py |  112 +-
 frontend/src/lib/api/dashboard/a76/classes.ts |   13 +-
 .../goods/classes/create-edit-dialog.svelte   |   48 +-
 .../classes/forms/FixedAssetClassForm.svelte  | 1177 +++++++++++++++++
 .../goods/fixed-asset-classes/+page.svelte    |  871 ++++++++++++
 8 files changed, 2078 insertions(+), 183 deletions(-)
 create mode 100644 frontend/src/lib/components/dashboard/goods/classes/forms/FixedAssetClassForm.svelte
 create mode 100644 frontend/src/routes/dashboard/goods/fixed-asset-classes/+page.svelte

diff --git a/backend/api/v1/modules/a76/classes/dto.py b/backend/api/v1/modules/a76/classes/dto.py
index 9b5a92a8..7fc3ccc0 100644
--- a/backend/api/v1/modules/a76/classes/dto.py
+++ b/backend/api/v1/modules/a76/classes/dto.py
@@ -13,7 +13,6 @@ from pydantic import BaseModel, ConfigDict, Field
 class ClassCreateDTO(BaseModel):
     """DTO para crear una clase"""
 
-    client_id: int = Field(..., description="Client key")
     class_code: str = Field(..., max_length=8, description="Class code")
     description_es: str = Field(
         ..., max_length=500, description="Description in Spanish (required)"
@@ -127,7 +126,6 @@ class ClassResponseDTO(BaseModel):
     id: int
     tenant_id: int
     company_id: int
-    client_id: int
     class_code: str
     description_es: Optional[str] = None
     description_en: Optional[str] = None
@@ -164,7 +162,6 @@ class ClassResponseDTOFA(ClassResponseDTO):
 class ClassBasicDTO(BaseModel):
     """DTO para información básica de clase"""
 
-    client_id: int
     class_code: str
     description_es: Optional[str] = None
     description_en: Optional[str] = None
@@ -190,7 +187,6 @@ class ClassListDTO(BaseModel):
 class ClassSearchDTO(BaseModel):
     """DTO para búsqueda de clases"""
 
-    client_id: Optional[int] = Field(None, description="Filter by client key")
     class_code: Optional[str] = Field(None, description="Search by class code")
     description: Optional[str] = Field(None, description="Search in descriptions")
     material_key: Optional[str] = Field(None, description="Filter by material key")
diff --git a/backend/api/v1/modules/a76/classes/models.py b/backend/api/v1/modules/a76/classes/models.py
index a5d1c851..58459b11 100644
--- a/backend/api/v1/modules/a76/classes/models.py
+++ b/backend/api/v1/modules/a76/classes/models.py
@@ -31,9 +31,6 @@ class Class(Base, TenantScopedMixin, TimestampMixin):
     __tablename__ = "classes"
     __table_args__ = (
         PrimaryKeyConstraint("id", name="classes_pkey"),
-        ForeignKeyConstraint(
-            ["client_id"], ["a76.clients_and_providers.id"], name="fk_classes_client"
-        ),
         ForeignKeyConstraint(
             ["material_key"],
             ["public.material_types.key"],
@@ -47,15 +44,13 @@ class Class(Base, TenantScopedMixin, TimestampMixin):
         UniqueConstraint(
             "tenant_id",
             "company_id",
-            "client_id",
             "class_code",
-            name="ufa_classes_client_id_class_code",
+            name="uq_classes_tenant_company_code",
         ),
         {"schema": "a76"},
     )
 
     id: Mapped[int] = mapped_column(Integer, primary_key=True)
-    client_id: Mapped[int] = mapped_column(Integer)
 
     # Unique constraint compuesta
     class_code: Mapped[str] = mapped_column(String(8))  # CLASE
@@ -98,11 +93,11 @@ class Class(Base, TenantScopedMixin, TimestampMixin):
 
     # Inverse relationship with GParts that have this class
     parts: Mapped[list["Part"]] = relationship(
-        primaryjoin="and_(Class.client_id == Part.client_id, Class.class_code == Part.part_class)",
-        foreign_keys="[Part.client_id, Part.part_class]",
+        primaryjoin="and_(Class.class_code == Part.part_class)",
+        foreign_keys="[Part.part_class]",
         viewonly=True,
         back_populates="part_class_info",
     )
 
     def __repr__(self) -> str:
-        return f"<Class(client_id={self.client_id}, class_code='{self.class_code}', description='{self.description_es}')>"
+        return f"<Class(class_code='{self.class_code}', description='{self.description_es}')>"
diff --git a/backend/api/v1/modules/a76/classes/routes.py b/backend/api/v1/modules/a76/classes/routes.py
index df1779ed..fb3d3d65 100644
--- a/backend/api/v1/modules/a76/classes/routes.py
+++ b/backend/api/v1/modules/a76/classes/routes.py
@@ -31,29 +31,6 @@ crud_routes = TenantCRUDRoutes(
 
 router = crud_routes.router
 
-
-@router.post(
-    "/seed",
-    summary="Seed Fixed Asset Classes",
-    description="Initialize fixed asset class catalog with default data",
-)
-async def seed_classes(
-    company_id: int = Query(..., description="Company ID"),
-    client_id: int = Query(..., description="Client ID"),
-    db: Session = Depends(get_core_db),
-    current_user: Dict[str, Any] = Depends(get_current_user),
-):
-    """Seed initial data for fixed asset classes"""
-    tenant_id = validate_access_to_resource(db, company_id, current_user)
-    
-    count = ClassService.seed_initial_data(db, tenant_id, company_id, client_id)
-    
-    return {
-        "message": f"Successfully created {count} fixed asset classes",
-        "count": count,
-    }
-
-
 @router.post(
     "/fa",
     response_model=ClassResponseDTOFA,
diff --git a/backend/api/v1/modules/a76/classes/service.py b/backend/api/v1/modules/a76/classes/service.py
index 9f124632..d8ecc25f 100644
--- a/backend/api/v1/modules/a76/classes/service.py
+++ b/backend/api/v1/modules/a76/classes/service.py
@@ -46,8 +46,6 @@ class ClassService:
         )
 
         if filters:
-            if filters.get("client_id"):
-                query = query.filter(Class.client_id == filters["client_id"])
             if filters.get("class_code"):
                 query = query.filter(
                     Class.class_code.ilike(f"%{filters['class_code']}%")
@@ -106,7 +104,6 @@ class ClassService:
         existing = db.query(Class).filter(
             Class.tenant_id == tenant_id,
             Class.company_id == company_id,
-            Class.client_id == data_dict["client_id"],
             Class.class_code == data_dict["class_code"]
         ).first()
         
@@ -177,16 +174,15 @@ class ClassService:
         if "class_code" in update_data and update_data["class_code"]:
             new_code = update_data["class_code"]
             # Check if another class with this code exists (excluding current class)
-            # The unique constraint is on (tenant_id, company_id, client_id, class_code)
+            # The unique constraint is on (tenant_id, company_id, class_code)
             existing_class = db.query(Class).filter(
                 Class.class_code == new_code,
                 Class.tenant_id == tenant_id,
                 Class.company_id == company_id,
-                Class.client_id == class_obj.client_id,  # Same client
                 Class.id != class_id  # Exclude current class
             ).first()
             
-            logger.info(f"Checking for duplicate class_code '{new_code}' for client {class_obj.client_id}")
+            logger.info(f"Checking for duplicate class_code '{new_code}'")
             if existing_class:
                 logger.warning(f"Duplicate class_code found: {existing_class.id}")
                 raise HTTPException(
@@ -265,7 +261,7 @@ class ClassService:
         
         # Extract base class fields
         base_fields = {
-            "client_id", "class_code", "description_es", "description_en",
+            "class_code", "description_es", "description_en",
             "material_key", "unit_of_measure", "fraction", "us_fraction",
             "sub_key", "physical_review", "iva_exempt_fraction"
         }
@@ -300,7 +296,6 @@ class ClassService:
                 "id": base_class.id,
                 "tenant_id": base_class.tenant_id,
                 "company_id": base_class.company_id,
-                "client_id": base_class.client_id,
                 "class_code": base_class.class_code,
                 "description_es": base_class.description_es,
                 "description_en": base_class.description_en,
@@ -352,62 +347,6 @@ class ClassService:
                 detail=f"Error al crear clase de activo fijo: {error_msg}"
             )
 
-    @staticmethod
-    def seed_initial_data(
-        db: Session, tenant_id: int, company_id: int, client_id: int
-    ) -> int:
-        """
-        Seed initial fixed asset class data
-        Returns: number of records created
-        """
-        from .seed import seed
-        
-        created_count = 0
-        for record in seed:
-            (
-                class_code,
-                description_es,
-                description_en,
-                material_key,
-                unit_of_measure,
-                fraction,
-                us_fraction,
-                bom,
-            ) = record
-
-            # Check if already exists
-            existing = (
-                db.query(Class)
-                .filter(
-                    Class.tenant_id == tenant_id,
-                    Class.company_id == company_id,
-                    Class.client_id == client_id,
-                    Class.class_code == class_code,
-                )
-                .first()
-            )
-
-            if not existing:
-                class_obj = Class(
-                    tenant_id=tenant_id,
-                    company_id=company_id,
-                    client_id=client_id,
-                    class_code=class_code,
-                    description_es=description_es,
-                    description_en=description_en,
-                    material_key=material_key if material_key else None,
-                    unit_of_measure=unit_of_measure if unit_of_measure else None,
-                    fraction=fraction if fraction else None,
-                    us_fraction=us_fraction if us_fraction else None,
-                )
-                db.add(class_obj)
-                created_count += 1
-
-        if created_count > 0:
-            db.commit()
-
-        return created_count
-
     def __init__(self, db: Session):
         self.db = db
 
@@ -430,7 +369,6 @@ class ClassService:
                 self.db.query(Class)
                 .filter(
                     and_(
-                        Class.client_id == class_data.client_id,
                         Class.class_code == class_data.class_code,
                     )
                 )
@@ -440,12 +378,11 @@ class ClassService:
             if existing:
                 raise HTTPException(
                     status_code=400,
-                    detail=f"Class with client_id '{class_data.client_id}' and class_code '{class_data.class_code}' already exists",
+                    detail=f"Class with class_code '{class_data.class_code}' already exists",
                 )
 
             # Crear clase
             db_class = Class(
-                client_id=class_data.client_id,
                 class_code=class_data.class_code,
                 description_spanish=class_data.description_spanish,
                 description_english=class_data.description_english,
@@ -469,7 +406,7 @@ class ClassService:
             logger.error(f"IntegrityError creating class: {str(e)}")
             raise HTTPException(
                 status_code=400,
-                detail="Class with this client_id and class_code already exists",
+                detail="Class with this class_code already exists",
             )
         except HTTPException:
             raise
@@ -478,12 +415,11 @@ class ClassService:
             logger.error(f"Error creating class: {str(e)}")
             raise HTTPException(status_code=500, detail="Error creating class")
 
-    def get_class(self, client_id: int, class_code: str) -> Optional[ClassResponseDTO]:
+    def get_class(self, class_code: str) -> Optional[ClassResponseDTO]:
         """
         Obtiene una clase por clave compuesta
 
         Args:
-            client_id: Clave del cliente
             class_code: Código de clase
 
         Returns:
@@ -491,7 +427,7 @@ class ClassService:
         """
         class_obj = (
             self.db.query(Class)
-            .filter(and_(Class.client_id == client_id, Class.class_code == class_code))
+            .filter(and_(Class.class_code == class_code))
             .first()
         )
 
@@ -520,9 +456,6 @@ class ClassService:
 
         # Aplicar filtros si se proporcionan
         if search_params:
-            if search_params.client_id:
-                query = query.filter(Class.client_id == search_params.client_id)
-
             if search_params.class_code:
                 query = query.filter(
                     Class.class_code.ilike(f"%{search_params.class_code}%")
@@ -569,13 +502,12 @@ class ClassService:
         )
 
     def update_class(
-        self, client_id: int, class_code: str, class_data: ClassUpdateDTO
+        self, class_code: str, class_data: ClassUpdateDTO
     ) -> Optional[ClassResponseDTO]:
         """
         Actualiza una clase
 
         Args:
-            client_id: Clave del cliente
             class_code: Código de clase
             class_data: Datos a actualizar
 
@@ -584,7 +516,7 @@ class ClassService:
         """
         class_obj = (
             self.db.query(Class)
-            .filter(and_(Class.client_id == client_id, Class.class_code == class_code))
+            .filter(and_(Class.class_code == class_code))
             .first()
         )
 
@@ -604,15 +536,14 @@ class ClassService:
 
         except Exception as e:
             self.db.rollback()
-            logger.error(f"Error updating class {client_id}-{class_code}: {str(e)}")
+            logger.error(f"Error updating class {class_code}: {str(e)}")
             raise HTTPException(status_code=500, detail="Error updating class")
 
-    def delete_class(self, client_id: int, class_code: str) -> bool:
+    def delete_class(self, class_code: str) -> bool:
         """
         Elimina una clase
 
         Args:
-            client_id: Clave del cliente
             class_code: Código de clase
 
         Returns:
@@ -620,7 +551,7 @@ class ClassService:
         """
         class_obj = (
             self.db.query(Class)
-            .filter(and_(Class.client_id == client_id, Class.class_code == class_code))
+            .filter(and_(Class.class_code == class_code))
             .first()
         )
 
@@ -633,7 +564,7 @@ class ClassService:
             return True
         except Exception as e:
             self.db.rollback()
-            logger.error(f"Error deleting class {client_id}-{class_code}: {str(e)}")
+            logger.error(f"Error deleting class {class_code}: {str(e)}")
             raise HTTPException(status_code=500, detail="Error deleting class")
 
     def search_by_fraction(self, fraction: str) -> List[ClassBasicDTO]:
@@ -643,19 +574,6 @@ class ClassService:
         )
         return [ClassBasicDTO.model_validate(class_obj) for class_obj in classes]
 
-    def search_by_client(
-        self, client_id: int, skip: int = 0, limit: int = 100
-    ) -> List[ClassBasicDTO]:
-        """Obtiene todas las clases de un cliente específico"""
-        classes = (
-            self.db.query(Class)
-            .filter(Class.client_id == client_id)
-            .offset(skip)
-            .limit(limit)
-            .all()
-        )
-        return [ClassBasicDTO.model_validate(class_obj) for class_obj in classes]
-
     def search_by_material(self, material_key: str) -> List[ClassBasicDTO]:
         """Busca clases por clave de material"""
         classes = (
@@ -678,9 +596,6 @@ class ClassService:
         """Obtiene estadísticas básicas de clases"""
         total_classes = self.db.query(Class).count()
 
-        # Contar por clientes
-        clients_count = self.db.query(Class.client_id).distinct().count()
-
         # Contar por revisión física
         physical_review_stats = {}
         for i in range(3):  # Asumiendo valores 0, 1, 2
@@ -695,7 +610,6 @@ class ClassService:
 
         return {
             "total_classes": total_classes,
-            "clients_with_classes": clients_count,
             "classes_with_fraction": with_fraction,
             "classes_with_us_fraction": with_us_fraction,
             **physical_review_stats,
diff --git a/frontend/src/lib/api/dashboard/a76/classes.ts b/frontend/src/lib/api/dashboard/a76/classes.ts
index 9473979a..fc787b97 100644
--- a/frontend/src/lib/api/dashboard/a76/classes.ts
+++ b/frontend/src/lib/api/dashboard/a76/classes.ts
@@ -7,7 +7,6 @@ export interface A76Class {
     id: number;
     tenant_id: number;
     company_id: number;
-    client_id: number;
     class_code: string;
     description_es: string | null;
     description_en: string | null;
@@ -26,7 +25,6 @@ export interface A76Class {
 // DTO para crear (match con tu formulario)
 export interface A76ClassCreate {
     company_id: number;
-    client_id: number;
     class_code: string;
     description_es?: string | null;
     description_en?: string | null;
@@ -94,7 +92,14 @@ export const classesApi = {
 	/**
 	 * Inicializar datos semilla de clases de activo fijo
 	 */
-	seed: (company_id: number, client_id: number): Promise<ApiResponse<{ message: string; count: number }>> => {
-		return api.post(`/v1/a76/classes/seed?company_id=${company_id}&client_id=${client_id}`, {});
+	seed: (company_id: number): Promise<ApiResponse<{ message: string; count: number }>> => {
+		return api.post(`/v1/a76/classes/seed?company_id=${company_id}`, {});
+	},
+
+	/**
+	 * Crear una clase de activo fijo (crea tanto A76Class como FAClass en una transacción)
+	 */
+	createFA: (data: any, company_id: number): Promise<ApiResponse<any>> => {
+		return api.post(`/v1/a76/classes/fa?company_id=${company_id}`, data);
 	}
 };
\ No newline at end of file
diff --git a/frontend/src/lib/components/dashboard/goods/classes/create-edit-dialog.svelte b/frontend/src/lib/components/dashboard/goods/classes/create-edit-dialog.svelte
index aaaaafa4..15119178 100644
--- a/frontend/src/lib/components/dashboard/goods/classes/create-edit-dialog.svelte
+++ b/frontend/src/lib/components/dashboard/goods/classes/create-edit-dialog.svelte
@@ -7,7 +7,7 @@
 	import * as Select from "$lib/components/ui/select";
 	import { classesApi, type A76Class, type A76ClassCreate, type A76ClassUpdate } from "$lib/api/dashboard/a76/classes";
 	import { materialTypesApi, type MaterialType } from "$lib/api/dashboard/refrence_data/material_types";
-	import { clientsProvidersApi, type ClientProviderBasic } from "$lib/api/dashboard/a76/clients-providers";
+	import { clientsProvidersApi, type ClientProvider } from "$lib/api/dashboard/a76/clients-providers";
 	import { companyStore } from "$lib/stores/company.svelte";
 	import { onMount } from 'svelte';
 
@@ -27,7 +27,6 @@
 
 	// Estado del formulario
 	let formData = $state({
-		client_id: item?.client_id || null,
 		class_code: item?.class_code || '',
 		description_es: item?.description_es || '',
 		description_en: item?.description_en || '',
@@ -44,7 +43,7 @@
 	let error = $state<string | null>(null);
 	let materialTypes = $state<MaterialType[]>([]);
 	let loadingMaterialTypes = $state(false);
-	let clients = $state<ClientProviderBasic[]>([]);
+	let clients = $state<ClientProvider[]>([]);
 	let loadingClients = $state(false);
 	
 	// Variables para controlar los selects
@@ -73,9 +72,9 @@
 		// Cargar clientes
 		loadingClients = true;
 		try {
-			const response = await clientsProvidersApi.listClients(companyId, 0, 500);
+			const response = await clientsProvidersApi.list(companyId, 1, 500);
 			if (response.data) {
-				clients = response.data;
+				clients = response.data.items;
 			}
 		} catch (e) {
 			console.error('Error loading clients:', e);
@@ -88,7 +87,6 @@
 	$effect(() => {
 		if (item) {
 			formData = {
-				client_id: item.client_id,
 				class_code: item.class_code,
 				description_es: item.description_es || '',
 				description_en: item.description_en || '',
@@ -107,7 +105,6 @@
 		} else {
 			// Reset para modo crear
 			formData = {
-				client_id: null,
 				class_code: '',
 				description_es: '',
 				description_en: '',
@@ -142,12 +139,6 @@
 			error = 'No hay compañía seleccionada';
 			return;
 		}
-
-		// Validaciones básicas
-		if (!formData.client_id) {
-			error = 'Debes seleccionar un cliente';
-			return;
-		}
 		if (!formData.class_code.trim()) {
 			error = 'El código de clase es requerido';
 			return;
@@ -178,7 +169,6 @@
 			if (isEdit && item) {
 				// Actualizar
 				const updateData: A76ClassUpdate = {
-					client_id: formData.client_id!,
 					class_code: formData.class_code,
 					description_es: formData.description_es || null,
 					description_en: formData.description_en || null,
@@ -192,10 +182,8 @@
 				};
 				response = await classesApi.update(item.id, updateData, companyId);
 			} else {
-				// Crear con el client_id seleccionado
 				const createData: A76ClassCreate = {
 					company_id: companyId,
-					client_id: formData.client_id!,
 					class_code: formData.class_code,
 					description_es: formData.description_es || null,
 					description_en: formData.description_en || null,
@@ -303,34 +291,6 @@
 				</div>
 			{/if}
 
-			<!-- Cliente -->
-			<div class="space-y-2">
-				<Label for="client_id" class="required">Cliente</Label>
-				{#if loadingClients}
-					<div class="flex items-center gap-2 text-sm text-muted-foreground">
-						<div class="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent"></div>
-						Cargando clientes...
-					</div>
-				{:else if clients.length > 0}
-					<select 
-						bind:value={formData.client_id}
-						disabled={loading}
-						class="border-input bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
-					>
-						<option value="">Selecciona un cliente</option>
-						{#each clients as client}
-							<option value={client.id}>
-								{client.name} ({client.rfc})
-							</option>
-						{/each}
-					</select>
-				{:else}
-					<div class="text-sm text-muted-foreground">
-						No hay clientes disponibles
-					</div>
-				{/if}
-			</div>
-
 			<!-- Código de Clase -->
 			<div class="space-y-2">
 				<Label for="class_code" class="required">Código de Clase</Label>
diff --git a/frontend/src/lib/components/dashboard/goods/classes/forms/FixedAssetClassForm.svelte b/frontend/src/lib/components/dashboard/goods/classes/forms/FixedAssetClassForm.svelte
new file mode 100644
index 00000000..16632751
--- /dev/null
+++ b/frontend/src/lib/components/dashboard/goods/classes/forms/FixedAssetClassForm.svelte
@@ -0,0 +1,1177 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import { Input } from '$lib/components/ui/input';
+	import { Label } from '$lib/components/ui/label';
+	import * as Dialog from '$lib/components/ui/dialog';
+	import { Folder } from 'lucide-svelte';
+	import { toast } from 'svelte-sonner';
+	import { materialTypesApi, type MaterialType } from '$lib/api/dashboard/refrence_data/material_types';
+	import { getTariffFractions, type TariffFraction } from '$lib/api/dashboard/a76/general_catalogs/tariff-fractions';
+	import { getUSTariffFractions, type USTariffFraction } from '$lib/api/dashboard/a76/general_catalogs/us-tariff-fractions';
+	import { getDepreciationCatalog, type DepreciationCatalog } from '$lib/api/dashboard/a76/general_catalogs/depreciation-catalog';
+	import { getFDACatalog, type FDACatalog } from '$lib/api/dashboard/a76/general_catalogs/fda-catalog';
+	import { companyStore } from '$lib/stores/company.svelte';
+
+	interface Props {
+		onSave?: (data: any) => void;
+		onCancel?: () => void;
+		initialData?: any;
+		externalError?: string;
+		onClearError?: () => void;
+	}
+
+	let { onSave, onCancel, initialData, externalError = '', onClearError }: Props = $props();
+
+	// Tipo para unidad de medida con todos los campos
+	interface UnitOfMeasure {
+		code: string;
+		description: string;
+		descriptionEnglish: string;
+		claveMexicana: string;
+		claveAmericana: string;
+		claveACE: string;
+		claveOMA: string;
+	}
+
+	// Datos de unidades de medida
+	const unitsOfMeasureData: UnitOfMeasure[] = [
+		{ code: 'BARR', description: 'BARRIL', descriptionEnglish: 'BARREL', claveMexicana: '8', claveAmericana: 'BBL', claveACE: '', claveOMA: 'BLL' },
+		{ code: 'BD FT', description: 'PIE TABLA', descriptionEnglish: 'BD FEET', claveMexicana: '5', claveAmericana: 'FT', claveACE: '', claveOMA: 'BFT' },
+		{ code: 'BOLS', description: 'BOLSA', descriptionEnglish: 'BAG', claveMexicana: '6', claveAmericana: 'PCS', claveACE: '', claveOMA: 'BG' },
+		{ code: 'KGS', description: 'KILOGRAMOS', descriptionEnglish: 'KGS', claveMexicana: '1', claveAmericana: 'KG2', claveACE: '', claveOMA: 'KGM' },
+		{ code: 'PZA', description: 'PIEZA', descriptionEnglish: 'PCS', claveMexicana: '6', claveAmericana: 'PCS', claveACE: '', claveOMA: 'C62_1' },
+	];
+
+	// Estado del formulario
+	let formData = $state({
+		class_code: initialData?.class_code || '',
+		description_es: initialData?.description_es || '',
+		description_en: initialData?.description_en || '',
+		material_key: initialData?.material_key || '',
+		unit_of_measure: initialData?.unit_of_measure || '',
+		fraction: initialData?.fraction || '',
+		us_fraction: initialData?.us_fraction || '',
+		annual_depreciation_rate: initialData?.annual_depreciation_rate || '',
+		fda_key: initialData?.fda_key || '',
+		eccn_code: initialData?.eccn_code || '',
+		iva_exempt_fraction: initialData?.iva_exempt_fraction || false,
+		physical_review: initialData?.physical_review || false,
+		carta_porte_code: initialData?.carta_porte_code || '',
+		// Campos de tarifas de importación/exportación
+		import_tariff_code: initialData?.import_tariff_code || '',
+		import_tariff_type: initialData?.import_tariff_type || '',
+		export_tariff_code: initialData?.export_tariff_code || '',
+		export_tariff_type: initialData?.export_tariff_type || '',
+		// Campos calculados/display
+		material_description: '',
+		unit_of_measure_description: '',
+		unit_measure_key: '',
+		fraction_umt: '',
+		fraction_uma_key: '',
+		us_fraction_ad_valorem: '',
+		us_fraction_fixed_rate: ''
+	});
+
+	// Reactively update formData when initialData changes
+	$effect(() => {
+		if (initialData) {
+			// Tomar snapshot para evitar referencias reactivas
+			const snap = $state.snapshot(initialData);
+			
+			// Usar ?? para manejar null/undefined correctamente (evita que inputs pasen de controlado a no controlado)
+			formData.class_code = snap.class_code ?? '';
+			formData.description_es = snap.description_es ?? '';
+			formData.description_en = snap.description_en ?? '';
+			formData.material_key = snap.material_key ?? '';
+			formData.unit_of_measure = snap.unit_of_measure ?? '';
+			formData.fraction = snap.fraction ?? '';
+			formData.us_fraction = snap.us_fraction ?? '';
+			// Mapear depreciation_rate a annual_depreciation_rate si existe (números pueden ser null)
+			formData.annual_depreciation_rate = snap.depreciation_rate ?? snap.annual_depreciation_rate ?? null;
+			// Mapear fda_code a fda_key si existe
+			formData.fda_key = snap.fda_code ?? snap.fda_key ?? '';
+			formData.eccn_code = snap.eccn_code ?? '';
+			formData.iva_exempt_fraction = snap.iva_exempt_fraction ?? false;
+			formData.physical_review = snap.physical_review ?? false;
+			formData.carta_porte_code = snap.carta_porte_code ?? '';
+			formData.import_tariff_code = snap.import_tariff_code ?? '';
+			formData.import_tariff_type = snap.import_tariff_type ?? '';
+			formData.export_tariff_code = snap.export_tariff_code ?? '';
+			formData.export_tariff_type = snap.export_tariff_type ?? '';
+			
+			console.log('FormData updated with initialData snapshot:', formData);
+		} else {
+			// Reset form when initialData is null (new class)
+			formData.class_code = '';
+			formData.description_es = '';
+			formData.description_en = '';
+			formData.material_key = '';
+			formData.unit_of_measure = '';
+			formData.fraction = '';
+			formData.us_fraction = '';
+			formData.annual_depreciation_rate = '';
+			formData.fda_key = '';
+			formData.eccn_code = '';
+			formData.iva_exempt_fraction = false;
+			formData.physical_review = false;
+			formData.carta_porte_code = '';
+			formData.import_tariff_code = '';
+			formData.import_tariff_type = '';
+			formData.export_tariff_code = '';
+			formData.export_tariff_type = '';
+			
+			console.log('FormData reset for new class');
+		}
+	});
+
+	// Estado de validación
+	let validationErrors = $state<Record<string, string>>({});
+	let showErrors = $state(false);
+
+	// Estado de diálogos
+	let showMaterialDialog = $state(false);
+	let materialTypes = $state<MaterialType[]>([]);
+	let searchMaterial = $state('');
+
+	let showUnitDialog = $state(false);
+	let searchUnit = $state('');
+
+	let showFractionDialog = $state(false);
+	let tariffFractions = $state<TariffFraction[]>([]);
+	let searchFraction = $state('');
+	let currentPage = $state(1);
+	let totalFractions = $state(0);
+	let hasMoreFractions = $state(true);
+	let isLoadingFractions = $state(false);
+	let searchTimeout: ReturnType<typeof setTimeout>;
+
+	let showUSFractionDialog = $state(false);
+	let usTariffFractions = $state<USTariffFraction[]>([]);
+	let searchUSFraction = $state('');
+	let currentUSPage = $state(1);
+	let totalUSFractions = $state(0);
+	let hasMoreUSFractions = $state(true);
+	let isLoadingUSFractions = $state(false);
+
+	let showDepreciationDialog = $state(false);
+	let depreciationCatalog = $state<DepreciationCatalog[]>([]);
+	let searchDepreciation = $state('');
+	let currentDepreciationPage = $state(1);
+	let totalDepreciation = $state(0);
+	let hasMoreDepreciation = $state(true);
+	let isLoadingDepreciation = $state(false);
+
+	let showFDADialog = $state(false);
+	let fdaCatalog = $state<FDACatalog[]>([]);
+	let searchFDA = $state('');
+	let currentFDAPage = $state(1);
+	let totalFDA = $state(0);
+	let hasMoreFDA = $state(true);
+	let isLoadingFDA = $state(false);
+
+	let showCartaPorteDialog = $state(false);
+	let cartaPorteCatalog = $state<any[]>([]);
+	let searchCartaPorte = $state('');
+
+	// Computed values
+	let filteredMaterialTypes = $derived(
+		searchMaterial
+			? materialTypes.filter(
+					(m) =>
+						m.key.toLowerCase().includes(searchMaterial.toLowerCase()) ||
+						m.description.toLowerCase().includes(searchMaterial.toLowerCase())
+				)
+			: materialTypes
+	);
+
+	let filteredUnits = $derived(
+		searchUnit
+			? unitsOfMeasureData.filter(
+					(u) =>
+						u.code.toLowerCase().includes(searchUnit.toLowerCase()) ||
+						u.description.toLowerCase().includes(searchUnit.toLowerCase())
+				)
+			: unitsOfMeasureData
+	);
+
+	// Funciones
+	async function openMaterialSearch() {
+		showMaterialDialog = true;
+		searchMaterial = '';
+		if (materialTypes.length === 0) {
+			try {
+				const companyId = companyStore.activeCompany?.id;
+				if (!companyId) return;
+				const response = await materialTypesApi.list(1, 1000);
+				if (response.data) {
+					materialTypes = response.data.items;
+				}
+			} catch (error) {
+				console.error('Error cargando material types:', error);
+			}
+		}
+	}
+
+	function selectMaterial(material: MaterialType) {
+		formData.material_key = material.key;
+		formData.material_description = material.description;
+		showMaterialDialog = false;
+		searchMaterial = '';
+	}
+
+	async function openUnitOfMeasureSearch() {
+		showUnitDialog = true;
+		searchUnit = '';
+	}
+
+	function selectUnit(unit: UnitOfMeasure) {
+		formData.unit_of_measure = unit.code;
+		formData.unit_of_measure_description = unit.description;
+		formData.unit_measure_key = unit.claveMexicana;
+		showUnitDialog = false;
+		searchUnit = '';
+	}
+
+	async function openFractionSearch() {
+		showFractionDialog = true;
+		searchFraction = '';
+		tariffFractions = [];
+		currentPage = 1;
+		totalFractions = 0;
+		hasMoreFractions = true;
+		await loadFractions('', 1);
+	}
+
+	async function loadFractions(search: string, page: number = currentPage) {
+		const companyId = companyStore.activeCompany?.id;
+		if (!companyId || isLoadingFractions) return;
+
+		isLoadingFractions = true;
+		try {
+			const filters = search ? { search } : {};
+			const pageSize = 100;
+			
+			const response = await getTariffFractions(page, pageSize, companyId, filters);
+			
+			if (response.data) {
+				if (page === 1) {
+					tariffFractions = [...response.data.items];
+				} else {
+					tariffFractions = [...tariffFractions, ...response.data.items];
+				}
+				
+				totalFractions = response.data.total;
+				currentPage = page;
+				hasMoreFractions = tariffFractions.length < response.data.total;
+			}
+		} catch (error) {
+			console.error('Error cargando fracciones arancelarias:', error);
+		} finally {
+			isLoadingFractions = false;
+		}
+	}
+
+	function selectFraction(fraction: TariffFraction) {
+		formData.fraction = fraction.fraction;
+		formData.fraction_umt = (fraction.umt ?? '') as string;
+		formData.fraction_uma_key = (fraction.nico ?? '') as string;
+		// Actualizar tarifa de importación
+		formData.import_tariff_code = fraction.fraction || '';
+		formData.import_tariff_type = (fraction.umt ?? '') as string;
+		showFractionDialog = false;
+		searchFraction = '';
+	}
+
+	async function openUSFractionSearch() {
+		showUSFractionDialog = true;
+		searchUSFraction = '';
+		usTariffFractions = [];
+		currentUSPage = 1;
+		totalUSFractions = 0;
+		hasMoreUSFractions = true;
+		await loadUSFractions('', 1);
+	}
+
+	async function loadUSFractions(search: string, page: number = currentUSPage) {
+		const companyId = companyStore.activeCompany?.id;
+		if (!companyId || isLoadingUSFractions) return;
+
+		isLoadingUSFractions = true;
+		try {
+			const filters = search ? { search } : {};
+			const pageSize = 100;
+			
+			const response = await getUSTariffFractions(page, pageSize, companyId, filters);
+			
+			if (response.data) {
+				if (page === 1) {
+					usTariffFractions = [...response.data.items];
+				} else {
+					usTariffFractions = [...usTariffFractions, ...response.data.items];
+				}
+				
+				totalUSFractions = response.data.total;
+				currentUSPage = page;
+				hasMoreUSFractions = usTariffFractions.length < response.data.total;
+			}
+		} catch (error) {
+			console.error('Error cargando fracciones americanas:', error);
+		} finally {
+			isLoadingUSFractions = false;
+		}
+	}
+
+	function selectUSFraction(fraction: USTariffFraction) {
+		formData.us_fraction = fraction.code;
+		formData.us_fraction_ad_valorem = fraction.ad_valorem?.toString() || '0.00';
+		formData.us_fraction_fixed_rate = fraction.fixed_cost?.toString() || '0.00000000';
+		// Actualizar tarifa de exportación
+		formData.export_tariff_code = fraction.code || '';
+		formData.export_tariff_type = 'HTS'; // Harmonized Tariff Schedule
+		showUSFractionDialog = false;
+		searchUSFraction = '';
+	}
+
+	async function openDepreciationSearch() {
+		showDepreciationDialog = true;
+		searchDepreciation = '';
+		depreciationCatalog = [];
+		currentDepreciationPage = 1;
+		totalDepreciation = 0;
+		hasMoreDepreciation = true;
+		await loadDepreciation('', 1);
+	}
+
+	async function loadDepreciation(search: string, page: number = currentDepreciationPage) {
+		const companyId = companyStore.activeCompany?.id;
+		if (!companyId || isLoadingDepreciation) return;
+
+		isLoadingDepreciation = true;
+		try {
+			const filters = search ? { search } : {};
+			const pageSize = 100;
+			
+			const response = await getDepreciationCatalog(page, pageSize, companyId, filters);
+			
+			if (response.data) {
+				if (page === 1) {
+					depreciationCatalog = [...response.data.items];
+				} else {
+					depreciationCatalog = [...depreciationCatalog, ...response.data.items];
+				}
+				
+				totalDepreciation = response.data.total;
+				currentDepreciationPage = page;
+				hasMoreDepreciation = depreciationCatalog.length < response.data.total;
+			}
+		} catch (error) {
+			console.error('Error cargando catálogo de depreciación:', error);
+		} finally {
+			isLoadingDepreciation = false;
+		}
+	}
+
+	function selectDepreciation(item: DepreciationCatalog) {
+		formData.annual_depreciation_rate = item.depreciation_rate?.toString() || '';
+		showDepreciationDialog = false;
+		searchDepreciation = '';
+	}
+
+	async function openFDASearch() {
+		showFDADialog = true;
+		searchFDA = '';
+		fdaCatalog = [];
+		currentFDAPage = 1;
+		totalFDA = 0;
+		hasMoreFDA = true;
+		await loadFDA('', 1);
+	}
+
+	async function loadFDA(search: string, page: number = currentFDAPage) {
+		const companyId = companyStore.activeCompany?.id;
+		if (!companyId || isLoadingFDA) return;
+
+		isLoadingFDA = true;
+		try {
+			const filters = search ? { search } : {};
+			const pageSize = 100;
+			
+			const response = await getFDACatalog(page, pageSize, companyId, filters);
+			
+			if (response.data) {
+				if (page === 1) {
+					fdaCatalog = [...response.data.items];
+				} else {
+					fdaCatalog = [...fdaCatalog, ...response.data.items];
+				}
+				
+				totalFDA = response.data.total;
+				currentFDAPage = page;
+				hasMoreFDA = fdaCatalog.length < response.data.total;
+			}
+		} catch (error) {
+			console.error('Error cargando catálogo FDA:', error);
+		} finally {
+			isLoadingFDA = false;
+		}
+	}
+
+	function selectFDA(item: FDACatalog) {
+		formData.fda_key = item.fda_key || '';
+		showFDADialog = false;
+		searchFDA = '';
+	}
+
+	async function openCartaPorteSearch() {
+		showCartaPorteDialog = true;
+		searchCartaPorte = '';
+	}
+
+	// Función de validación
+	function validateForm(): boolean {
+		const errors: Record<string, string> = {};
+		
+		if (!formData.class_code?.trim()) {
+			errors.class_code = 'El código de clase es obligatorio';
+		}
+		
+		if (!formData.description_es?.trim()) {
+			errors.description_es = 'La descripción en español es obligatoria';
+		}
+		
+		if (!formData.material_key?.trim()) {
+			errors.material_key = 'El tipo de activo fijo es obligatorio';
+		}
+		
+		if (!formData.unit_of_measure?.trim()) {
+			errors.unit_of_measure = 'La unidad de medida comercial es obligatoria';
+		}
+		
+		if (!formData.fraction?.trim()) {
+			errors.fraction = 'La fracción arancelaria es obligatoria';
+		}
+		
+		validationErrors = errors;
+		return Object.keys(errors).length === 0;
+	}
+
+	// Validar campo individual (para validación en blur)
+	function validateField(fieldName: string) {
+		if (!showErrors) return; // Solo validar si ya se intentó guardar
+		
+		const errors = { ...validationErrors };
+		
+		switch (fieldName) {
+			case 'class_code':
+				if (!formData.class_code?.trim()) {
+					errors.class_code = 'El código de clase es obligatorio';
+				} else {
+					delete errors.class_code;
+				}
+				break;
+			case 'description_es':
+				if (!formData.description_es?.trim()) {
+					errors.description_es = 'La descripción en español es obligatoria';
+				} else {
+					delete errors.description_es;
+				}
+				break;
+			case 'material_key':
+				if (!formData.material_key?.trim()) {
+					errors.material_key = 'El tipo de activo fijo es obligatorio';
+				} else {
+					delete errors.material_key;
+				}
+				break;
+			case 'unit_of_measure':
+				if (!formData.unit_of_measure?.trim()) {
+					errors.unit_of_measure = 'La unidad de medida comercial es obligatoria';
+				} else {
+					delete errors.unit_of_measure;
+				}
+				break;
+			case 'fraction':
+				if (!formData.fraction?.trim()) {
+					errors.fraction = 'La fracción arancelaria es obligatoria';
+				} else {
+					delete errors.fraction;
+				}
+				break;
+		}
+		
+		validationErrors = errors;
+	}
+
+	function handleSave() {
+		// Activar visualización de errores
+		showErrors = true;
+		
+		// Validar formulario
+		if (!validateForm()) {
+			console.log('Validación fallida:', validationErrors);
+			toast.error('Por favor, complete todos los campos obligatorios');
+			return;
+		}
+		
+		// Tomamos una copia muerta de los datos actuales
+		const dataToSave = $state.snapshot(formData); 
+		
+		console.log('Enviando datos al padre:', dataToSave);
+		
+		// Ejecutamos el onSave pasándole la copia
+		if (onSave) {
+			onSave(dataToSave); 
+		}
+	}
+	
+	function handleCancel() {
+		if (onCancel) {
+			onCancel();
+		}
+	}
+
+	// Escuchar el evento de guardado del padre
+	if (typeof document !== 'undefined') {
+		document.addEventListener('save-form', handleSave);
+	}
+</script>
+
+<div class="space-y-3">
+	<!-- Clase y Requiere Revisión Física -->
+	<div class="flex gap-4 items-end">
+		<div class="flex-1 space-y-2">
+			<Label for="class_code" class="font-bold">
+				Clase: <span class="text-red-500">*</span>
+			</Label>
+			<Input
+				id="class_code"
+				bind:value={formData.class_code}
+				placeholder="Ingrese código de clase"
+				class="uppercase {validationErrors.class_code ? 'border-red-500 focus-visible:ring-red-500' : ''}"
+				maxlength={8}
+				oninput={() => {
+					// Limpiar error local si existe
+					if (validationErrors.class_code) {
+						const errors = { ...validationErrors };
+						delete errors.class_code;
+						validationErrors = errors;
+					}
+				}}
+				onblur={() => validateField('class_code')}
+			/>
+			{#if validationErrors.class_code}
+				<p class="text-sm text-red-500 mt-1">{validationErrors.class_code}</p>
+			{/if}
+		</div>
+		<div class="flex items-center space-x-2 pb-2">
+			<input
+				id="physical_review"
+				type="checkbox"
+				bind:checked={formData.physical_review}
+				class="h-4 w-4 rounded border-gray-300"
+			/>
+			<Label for="physical_review" class="!m-0 cursor-pointer font-normal">
+				Requiere Revisión Física
+			</Label>
+		</div>
+	</div>
+
+	<!-- Descripción en Español -->
+	<div class="space-y-2">
+		<Label for="description_es" class="font-bold">
+			Descripción en Español: <span class="text-red-500">*</span>
+		</Label>
+		<Input
+			id="description_es"
+			bind:value={formData.description_es}
+			placeholder="Descripción en español"
+			class={validationErrors.description_es ? 'border-red-500 focus-visible:ring-red-500' : ''}
+			maxlength={500}
+			onblur={() => validateField('description_es')}
+		/>
+		{#if validationErrors.description_es}
+			<p class="text-sm text-red-500 mt-1">{validationErrors.description_es}</p>
+		{/if}
+	</div>
+
+	<!-- Descripción en Inglés -->
+	<div class="space-y-2">
+		<Label for="description_en">Descripción en Inglés:</Label>
+		<Input
+			id="description_en"
+			bind:value={formData.description_en}
+			placeholder="Descripción en inglés"
+			maxlength={500}
+		/>
+	</div>
+
+	<!-- Tipo de Activo Fijo -->
+	<div class="space-y-2">
+		<Label for="material_key" class="font-bold">
+			Tipo de Activo Fijo: <span class="text-red-500">*</span>
+		</Label>
+		<div class="flex gap-2 items-center">
+			<Input
+				id="material_key"
+				bind:value={formData.material_key}
+				placeholder="Código"
+				class="flex-1 uppercase {validationErrors.material_key ? 'border-red-500 focus-visible:ring-red-500' : ''}"
+				maxlength={10}
+				onblur={() => validateField('material_key')}
+			/>
+			<Button type="button" variant="outline" size="icon" onclick={openMaterialSearch}>
+				<Folder class="h-4 w-4" />
+			</Button>
+			<span class="text-blue-600 hover:underline cursor-pointer">
+				{formData.material_description || ''}
+			</span>
+		</div>
+		{#if validationErrors.material_key}
+			<p class="text-sm text-red-500 mt-1">{validationErrors.material_key}</p>
+		{/if}
+	</div>
+
+	<!-- U.M. Comercial -->
+	<div class="space-y-2">
+		<Label for="unit_of_measure" class="font-bold">
+			U.M. Comercial: <span class="text-red-500">*</span>
+		</Label>
+		<div class="flex gap-2 items-center">
+			<Input
+				id="unit_of_measure"
+				bind:value={formData.unit_of_measure}
+				placeholder="UM"
+				class="flex-1 uppercase {validationErrors.unit_of_measure ? 'border-red-500 focus-visible:ring-red-500' : ''}"
+				maxlength={5}
+				onblur={() => validateField('unit_of_measure')}
+			/>
+			<Button type="button" variant="outline" size="icon" onclick={openUnitOfMeasureSearch}>
+				<Folder class="h-4 w-4" />
+			</Button>
+			<span class="text-blue-600 hover:underline cursor-pointer">
+				{formData.unit_of_measure_description || ''}
+			</span>
+			<span class="text-sm text-muted-foreground ml-auto">
+				Clave U.M.A: {formData.unit_measure_key || ''}
+			</span>
+		</div>
+		{#if validationErrors.unit_of_measure}
+			<p class="text-sm text-red-500 mt-1">{validationErrors.unit_of_measure}</p>
+		{/if}
+	</div>
+
+	<!-- Fracción Arancelaria -->
+	<div class="space-y-2">
+		<Label for="fraction" class="font-bold">
+			Fracción Arancelaria: <span class="text-red-500">*</span>
+		</Label>
+		<div class="flex gap-2 items-center">
+			<Input
+				id="fraction"
+				bind:value={formData.fraction}
+				placeholder="Fracción"
+				class="flex-1 {validationErrors.fraction ? 'border-red-500 focus-visible:ring-red-500' : ''}"
+				maxlength={10}
+				onblur={() => validateField('fraction')}
+			/>
+			<Button type="button" variant="outline" size="icon" onclick={openFractionSearch}>
+				<Folder class="h-4 w-4" />
+			</Button>
+			<span class="text-sm text-muted-foreground">
+				U.M.T: {formData.fraction_umt || ''}
+			</span>
+			<span class="text-sm text-muted-foreground ml-auto">
+				Clave U.M.A: {formData.fraction_uma_key || ''}
+			</span>
+		</div>
+		{#if validationErrors.fraction}
+			<p class="text-sm text-red-500 mt-1">{validationErrors.fraction}</p>
+		{/if}
+	</div>
+
+	<!-- Fracción Americana -->
+	<div class="space-y-2">
+		<Label for="us_fraction">Fracción Americana:</Label>
+		<div class="flex gap-2 items-center">
+			<Input
+				id="us_fraction"
+				bind:value={formData.us_fraction}
+				placeholder="Fracción americana"
+				class="flex-1"
+				maxlength={16}
+			/>
+			<Button type="button" variant="outline" size="icon" onclick={openUSFractionSearch}>
+				<Folder class="h-4 w-4" />
+			</Button>
+			<span class="text-sm text-muted-foreground">
+				Ad/valorem: {formData.us_fraction_ad_valorem || '0.00'}
+			</span>
+			<span class="text-sm text-muted-foreground ml-auto">
+				Tasa Fija: {formData.us_fraction_fixed_rate || '0.00000000'}
+			</span>
+		</div>
+	</div>
+
+	<!-- Tasa Anual de depreciación -->
+	<div class="space-y-2">
+		<Label for="annual_depreciation_rate">Tasa Anual de depreciación:</Label>
+		<div class="flex gap-2 items-center">
+			<Input
+				id="annual_depreciation_rate"
+				type="number"
+				bind:value={formData.annual_depreciation_rate}
+				placeholder="0.00"
+				class="flex-1"
+				step="0.01"
+			/>
+			<span class="text-sm">%</span>
+			<Button type="button" variant="outline" size="icon" onclick={openDepreciationSearch}>
+				<Folder class="h-4 w-4" />
+			</Button>
+			<div class="flex items-center gap-2 ml-4">
+				<Label for="eccn" class="whitespace-nowrap">ECCN:</Label>
+				<Input
+					id="eccn"
+					bind:value={formData.eccn_code}
+					placeholder="ECCN"
+					class="w-32"
+				/>
+			</div>
+		</div>
+	</div>
+
+	<!-- Clave FDA -->
+	<div class="space-y-2">
+		<Label for="fda_key">Clave FDA:</Label>
+		<div class="flex gap-2">
+			<Input
+				id="fda_key"
+				bind:value={formData.fda_key}
+				placeholder="Clave FDA"
+				class="flex-1"
+			/>
+			<Button type="button" variant="outline" size="icon" onclick={openFDASearch}>
+				<Folder class="h-4 w-4" />
+			</Button>
+		</div>
+	</div>
+
+	<!-- Fracción Exenta de IVA -->
+	<div class="space-y-2">
+		<Label class="font-bold">Fracción Exenta de IVA:</Label>
+		<div class="flex gap-8">
+			<div class="flex items-center space-x-2">
+				<input
+					id="iva_exempt_yes"
+					type="radio"
+					name="iva_exempt"
+					checked={formData.iva_exempt_fraction === true}
+					onchange={() => (formData.iva_exempt_fraction = true)}
+					class="h-4 w-4"
+				/>
+				<Label for="iva_exempt_yes" class="!m-0 cursor-pointer font-normal">Sí</Label>
+			</div>
+			<div class="flex items-center space-x-2">
+				<input
+					id="iva_exempt_no"
+					type="radio"
+					name="iva_exempt"
+					checked={formData.iva_exempt_fraction === false}
+					onchange={() => (formData.iva_exempt_fraction = false)}
+					class="h-4 w-4"
+				/>
+				<Label for="iva_exempt_no" class="!m-0 cursor-pointer font-normal">No</Label>
+			</div>
+		</div>
+	</div>
+
+	<!-- Código Carta Porte -->
+	<div class="space-y-2">
+		<Label for="carta_porte_code">Código Carta Porte:</Label>
+		<div class="flex gap-2">
+			<Input
+				id="carta_porte_code"
+				bind:value={formData.carta_porte_code}
+				placeholder="Código carta porte"
+				class="flex-1"
+			/>
+			<Button type="button" variant="outline" size="icon" onclick={openCartaPorteSearch}>
+			<Folder class="h-4 w-4" />
+			</Button>
+		</div>
+	</div>
+</div>
+
+<!-- Diálogos -->
+<!-- Dialog: Material Types -->
+<Dialog.Root bind:open={showMaterialDialog}>
+	<Dialog.Content class="max-w-2xl">
+		<Dialog.Header>
+			<Dialog.Title>CATALOGO DE ACTIVO FIJO</Dialog.Title>
+		</Dialog.Header>
+		<div class="space-y-4">
+			<div>
+				<Label for="search_material">Buscando:</Label>
+				<Input
+					id="search_material"
+					bind:value={searchMaterial}
+					placeholder="Buscar por clave o descripción..."
+					class="mt-1"
+				/>
+			</div>
+			<div class="border rounded-md max-h-96 overflow-auto">
+				<table class="w-full">
+					<thead class="bg-white dark:bg-black text-gray-900 dark:text-white border-b sticky top-0">
+						<tr>
+							<th class="px-4 py-2 text-left font-semibold">Clave</th>
+							<th class="px-4 py-2 text-left font-semibold">Descripción</th>
+						</tr>
+					</thead>
+					<tbody>
+						{#each filteredMaterialTypes as material (material.key)}
+							<tr
+								class="border-b hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors"
+								onclick={() => selectMaterial(material)}
+							>
+								<td class="px-4 py-2">{material.key}</td>
+								<td class="px-4 py-2">{material.description}</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</div>
+		</div>
+		<Dialog.Footer>
+			<Button variant="outline" onclick={() => (showMaterialDialog = false)}>Cerrar</Button>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>
+
+<!-- Dialog: Unidades de Medida -->
+<Dialog.Root bind:open={showUnitDialog}>
+	<Dialog.Content class="max-w-4xl">
+		<Dialog.Header>
+			<Dialog.Title>UNIDADES DE MEDIDA</Dialog.Title>
+		</Dialog.Header>
+		<div class="space-y-4">
+			<div>
+				<Label for="search_unit">Buscando:</Label>
+				<Input
+					id="search_unit"
+					bind:value={searchUnit}
+					placeholder="Buscar por código o descripción..."
+					class="mt-1"
+				/>
+			</div>
+			<div class="border rounded-md max-h-96 overflow-auto">
+				<table class="w-full text-sm">
+					<thead class="bg-white dark:bg-black text-gray-900 dark:text-white border-b sticky top-0">
+						<tr>
+							<th class="px-3 py-2 text-left font-semibold">Código</th>
+							<th class="px-3 py-2 text-left font-semibold">Descripción</th>
+							<th class="px-3 py-2 text-left font-semibold">Description (English)</th>
+							<th class="px-3 py-2 text-left font-semibold">Clave Mexicana</th>
+						</tr>
+					</thead>
+					<tbody>
+						{#each filteredUnits as unit (unit.code)}
+							<tr
+								class="border-b hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors"
+								onclick={() => selectUnit(unit)}
+							>
+								<td class="px-3 py-2">{unit.code}</td>
+								<td class="px-3 py-2">{unit.description}</td>
+								<td class="px-3 py-2">{unit.descriptionEnglish}</td>
+								<td class="px-3 py-2">{unit.claveMexicana}</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</div>
+		</div>
+		<Dialog.Footer>
+			<Button variant="outline" onclick={() => (showUnitDialog = false)}>Cerrar</Button>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>
+
+<!-- Dialog: Buscar fracción arancelaria -->
+<Dialog.Root bind:open={showFractionDialog}>
+	<Dialog.Content class="!max-w-[70vw] !w-[70vw]">
+		<Dialog.Header>
+			<Dialog.Title>CATALOGO DE FRACCIONES SITAR - SCAII</Dialog.Title>
+		</Dialog.Header>
+		<div class="space-y-4">
+			<div>
+				<Label for="search_fraction">Buscando:</Label>
+				<Input
+					id="search_fraction"
+					bind:value={searchFraction}
+					placeholder="Buscar por fracción, descripción, NICO..."
+					class="mt-1"
+				/>
+			</div>
+			<div class="border rounded-md max-h-[600px] overflow-y-auto overflow-x-auto">
+				<table class="w-full">
+					<thead class="bg-white dark:bg-black text-gray-900 dark:text-white border-b sticky top-0">
+						<tr>
+							<th class="px-4 py-2 text-left font-semibold whitespace-nowrap">Fracción</th>
+							<th class="px-4 py-2 text-left font-semibold whitespace-nowrap">NICO</th>
+							<th class="px-4 py-2 text-left font-semibold whitespace-nowrap">Descripción</th>
+							<th class="px-4 py-2 text-left font-semibold whitespace-nowrap">U.M.T</th>
+						</tr>
+					</thead>
+					<tbody>
+						{#each tariffFractions as fraction (fraction.code)}
+							<tr
+								class="border-b hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors"
+								onclick={() => selectFraction(fraction)}
+							>
+								<td class="px-4 py-2 whitespace-nowrap">{fraction.fraction}</td>
+								<td class="px-4 py-2 whitespace-nowrap">{fraction.nico}</td>
+								<td class="px-4 py-2">{fraction.description}</td>
+								<td class="px-4 py-2 whitespace-nowrap">{fraction.umt}</td>
+							</tr>
+						{:else}
+							<tr>
+								<td colspan="4" class="px-4 py-8 text-center text-muted-foreground">
+									{#if isLoadingFractions}
+										Cargando fracciones...
+									{:else}
+										No hay fracciones disponibles
+									{/if}
+								</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</div>
+		</div>
+		<Dialog.Footer>
+			<Button variant="outline" onclick={() => (showFractionDialog = false)}>Cerrar</Button>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>
+
+<!-- Dialog: Buscar fracción americana -->
+<Dialog.Root bind:open={showUSFractionDialog}>
+	<Dialog.Content class="!max-w-[70vw] !w-[70vw]">
+		<Dialog.Header>
+			<Dialog.Title>CATALOGO DE FRACCIONES AMERICANAS</Dialog.Title>
+		</Dialog.Header>
+		<div class="space-y-4">
+			<div>
+				<Label for="search_us_fraction">Buscando:</Label>
+				<Input
+					id="search_us_fraction"
+					bind:value={searchUSFraction}
+					placeholder="Buscar por fracción, descripción..."
+					class="mt-1"
+				/>
+			</div>
+			<div class="border rounded-md max-h-[600px] overflow-y-auto overflow-x-auto">
+				<table class="w-full">
+					<thead class="bg-white dark:bg-black text-gray-900 dark:text-white border-b sticky top-0">
+						<tr>
+							<th class="px-4 py-2 text-left font-semibold whitespace-nowrap">Código</th>
+							<th class="px-4 py-2 text-left font-semibold whitespace-nowrap">Prefijo</th>
+							<th class="px-4 py-2 text-left font-semibold whitespace-nowrap">Ad valorem</th>
+							<th class="px-4 py-2 text-left font-semibold whitespace-nowrap">Costo Fijo</th>
+							<th class="px-4 py-2 text-left font-semibold whitespace-nowrap">Descripción</th>
+						</tr>
+					</thead>
+					<tbody>
+						{#each usTariffFractions as fraction (fraction.id)}
+							<tr
+								class="border-b hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors"
+								onclick={() => selectUSFraction(fraction)}
+							>
+								<td class="px-4 py-2 whitespace-nowrap">{fraction.code}</td>
+								<td class="px-4 py-2 whitespace-nowrap">{fraction.prefix || ''}</td>
+								<td class="px-4 py-2 whitespace-nowrap">{fraction.ad_valorem || '0.00'}</td>
+								<td class="px-4 py-2 whitespace-nowrap">{fraction.fixed_cost || '0.00'}</td>
+								<td class="px-4 py-2">{fraction.description || ''}</td>
+							</tr>
+						{:else}
+							<tr>
+								<td colspan="5" class="px-4 py-8 text-center text-muted-foreground">
+									{#if isLoadingUSFractions}
+										Cargando fracciones...
+									{:else}
+										No hay fracciones disponibles
+									{/if}
+								</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</div>
+		</div>
+		<Dialog.Footer>
+			<Button variant="outline" onclick={() => (showUSFractionDialog = false)}>Cerrar</Button>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>
+
+<!-- Dialog: Buscar depreciación -->
+<Dialog.Root bind:open={showDepreciationDialog}>
+	<Dialog.Content class="!max-w-[70vw] !w-[70vw]">
+		<Dialog.Header>
+			<Dialog.Title>CATALOGO DE DEPRECIACION</Dialog.Title>
+		</Dialog.Header>
+		<div class="space-y-4">
+			<div>
+				<Label for="search_depreciation">Buscando:</Label>
+				<Input
+					id="search_depreciation"
+					bind:value={searchDepreciation}
+					placeholder="Buscar por fracción o descripción..."
+					class="mt-1"
+				/>
+			</div>
+			<div class="border rounded-md max-h-[600px] overflow-y-auto overflow-x-auto">
+				<table class="w-full">
+					<thead class="bg-white dark:bg-black text-gray-900 dark:text-white border-b sticky top-0">
+						<tr>
+							<th class="px-4 py-2 text-left font-semibold">Fracción</th>
+							<th class="px-4 py-2 text-left font-semibold">Descripción</th>
+							<th class="px-4 py-2 text-left font-semibold">% Depreciación</th>
+						</tr>
+					</thead>
+					<tbody>
+						{#each depreciationCatalog as item (item.id)}
+							<tr
+								class="border-b hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors"
+								onclick={() => selectDepreciation(item)}
+							>
+								<td class="px-4 py-2">{item.fraction}</td>
+								<td class="px-4 py-2">{item.description}</td>
+								<td class="px-4 py-2">{item.depreciation_rate}%</td>
+							</tr>
+						{:else}
+							<tr>
+								<td colspan="3" class="px-4 py-8 text-center text-muted-foreground">
+									{#if isLoadingDepreciation}
+										Cargando...
+									{:else}
+										No hay registros disponibles
+									{/if}
+								</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</div>
+		</div>
+		<Dialog.Footer>
+			<Button variant="outline" onclick={() => (showDepreciationDialog = false)}>Cerrar</Button>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>
+
+<!-- Dialog: Buscar FDA -->
+<Dialog.Root bind:open={showFDADialog}>
+	<Dialog.Content class="!max-w-[70vw] !w-[70vw]">
+		<Dialog.Header>
+			<Dialog.Title>CATALOGO FDA</Dialog.Title>
+		</Dialog.Header>
+		<div class="space-y-4">
+			<div>
+				<Label for="search_fda">Buscando:</Label>
+				<Input
+					id="search_fda"
+					bind:value={searchFDA}
+					placeholder="Buscar por clave FDA o descripción..."
+					class="mt-1"
+				/>
+			</div>
+			<div class="border rounded-md max-h-[600px] overflow-y-auto overflow-x-auto">
+				<table class="w-full">
+					<thead class="bg-white dark:bg-black text-gray-900 dark:text-white border-b sticky top-0">
+						<tr>
+							<th class="px-4 py-2 text-left font-semibold">Clave FDA</th>
+							<th class="px-4 py-2 text-left font-semibold">Descripción</th>
+						</tr>
+					</thead>
+					<tbody>
+						{#each fdaCatalog as item (item.id)}
+							<tr
+								class="border-b hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors"
+								onclick={() => selectFDA(item)}
+							>
+								<td class="px-4 py-2">{item.fda_key}</td>
+								<td class="px-4 py-2">{item.description}</td>
+							</tr>
+						{:else}
+							<tr>
+								<td colspan="2" class="px-4 py-8 text-center text-muted-foreground">
+									{#if isLoadingFDA}
+										Cargando...
+									{:else}
+										No hay registros disponibles
+									{/if}
+								</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</div>
+		</div>
+		<Dialog.Footer>
+			<Button variant="outline" onclick={() => (showFDADialog = false)}>Cerrar</Button>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>
+
+<!-- Dialog: Buscar Carta Porte -->
+<Dialog.Root bind:open={showCartaPorteDialog}>
+	<Dialog.Content class="!max-w-[70vw] !w-[70vw]">
+		<Dialog.Header>
+			<Dialog.Title>CATALOGO DE CARTA PORTE</Dialog.Title>
+		</Dialog.Header>
+		<div class="space-y-4">
+			<div>
+				<Label for="search_carta_porte">Buscando:</Label>
+				<Input
+					id="search_carta_porte"
+					bind:value={searchCartaPorte}
+					placeholder="Buscar por código..."
+					class="mt-1"
+				/>
+			</div>
+			<div class="border rounded-md max-h-[600px] overflow-y-auto overflow-x-auto">
+				<table class="w-full">
+					<thead class="bg-white dark:bg-black text-gray-900 dark:text-white border-b sticky top-0">
+						<tr>
+							<th class="px-4 py-2 text-left font-semibold">Código</th>
+							<th class="px-4 py-2 text-left font-semibold">Descripción</th>
+						</tr>
+					</thead>
+					<tbody>
+						{#each cartaPorteCatalog as item (item.id)}
+							<tr
+								class="border-b hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors"
+								onclick={() => {
+									formData.carta_porte_code = item.code;
+									showCartaPorteDialog = false;
+								}}
+							>
+								<td class="px-4 py-2">{item.code}</td>
+								<td class="px-4 py-2">{item.description}</td>
+							</tr>
+						{:else}
+							<tr>
+								<td colspan="2" class="px-4 py-8 text-center text-muted-foreground">
+									No hay registros disponibles
+								</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</div>
+		</div>
+		<Dialog.Footer>
+			<Button variant="outline" onclick={() => (showCartaPorteDialog = false)}>Cerrar</Button>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>
diff --git a/frontend/src/routes/dashboard/goods/fixed-asset-classes/+page.svelte b/frontend/src/routes/dashboard/goods/fixed-asset-classes/+page.svelte
new file mode 100644
index 00000000..2224b5a7
--- /dev/null
+++ b/frontend/src/routes/dashboard/goods/fixed-asset-classes/+page.svelte
@@ -0,0 +1,871 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import { Input } from '$lib/components/ui/input';
+	import { Label } from '$lib/components/ui/label';
+	import * as Dialog from '$lib/components/ui/dialog';
+	import FixedAssetClassForm from '$lib/components/dashboard/goods/classes/forms/FixedAssetClassForm.svelte';
+	import { Folder, Save, Plus, RefreshCw } from 'lucide-svelte';
+	import { toast } from 'svelte-sonner';
+	import { classesApi, type A76Class } from '$lib/api/dashboard/a76/classes';
+	import { faClassesApi, type FAClass } from '$lib/api/dashboard/a24/fa_classes';
+	import { companyStore } from '$lib/stores/company.svelte';
+	import { onMount } from 'svelte';
+
+	// Tipo extendido que combina A76Class y FAClass
+	interface FixedAssetClassExtended extends A76Class {
+		fa_class_id?: number;
+		depreciation_rate?: number | null;
+		fda_code?: string | null;
+		class_enabled?: boolean | null;
+	}
+
+	// Estado de la lista de clases
+	let classes = $state<FixedAssetClassExtended[]>([]);
+	let selectedClass = $state<FixedAssetClassExtended | null>(null);
+	let isLoading = $state(false);
+	let searchTerm = $state('');
+	let searchDescription = $state('');
+	let searchType = $state('');
+	let searchFraction = $state('');
+	let showInsertDialog = $state(false);
+	let showDeleteDialog = $state(false);
+	let validationError = $state<string>('');
+	let isSaving = $state(false);
+
+	// Estado del formulario
+	let formData = $state({
+		class_code: '',
+		description_es: '',
+		description_en: '',
+		material_key: '',
+		unit_of_measure: '',
+		fraction: '',
+		us_fraction: '',
+		unit_measure_trade: '',
+		bom: ''
+	});
+
+	// Clases filtradas según búsqueda
+	const filteredClasses = $derived(
+		classes.filter((c) => {
+			// Filtro por código de clase
+			const matchesCode = !searchTerm || 
+				c.class_code.toLowerCase().includes(searchTerm.toLowerCase());
+			
+			// Filtro por descripción (español o inglés)
+			const matchesDescription = !searchDescription || 
+				(c.description_es?.toLowerCase().includes(searchDescription.toLowerCase()) ?? false) ||
+				(c.description_en?.toLowerCase().includes(searchDescription.toLowerCase()) ?? false);
+			
+			// Filtro por tipo de material
+			const matchesType = !searchType || 
+				(c.material_key?.toLowerCase().includes(searchType.toLowerCase()) ?? false);
+			
+			// Filtro por fracción arancelaria
+			const matchesFraction = !searchFraction || 
+				(c.fraction?.toLowerCase().includes(searchFraction.toLowerCase()) ?? false);
+			
+			return matchesCode && matchesDescription && matchesType && matchesFraction;
+		})
+	);
+
+	// Reactively load classes when company changes
+	$effect(() => {
+		const companyId = companyStore.activeCompany?.id;
+		if (companyId) {
+			loadClasses();
+		}
+	});
+
+	async function loadClasses() {
+		const companyId = companyStore.activeCompany?.id;
+		if (!companyId) {
+			console.log('No company selected, skipping load');
+			return;
+		}
+
+		isLoading = true;
+		try {
+			console.log('Cargando clases para company:', companyId);
+			const response = await classesApi.list({
+				company_id: companyId,
+				page: 1,
+				page_size: 1000
+			});
+
+			if (!response.data) return;
+
+			// Para cada clase base, intentar cargar sus datos de activo fijo
+			const classesWithFA = await Promise.all(
+				response.data.items.map(async (baseClass) => {
+					try {
+						const faResponse = await faClassesApi.list({
+							company_id: companyId,
+							class_id: baseClass.id,
+							page: 1,
+							page_size: 1
+						});
+
+						const faData = faResponse.data?.items[0];
+
+						return {
+							...baseClass,
+							fa_class_id: faData?.id,
+							depreciation_rate: faData?.depreciation_rate,
+							fda_code: faData?.fda_code,
+							class_enabled: faData?.class_enabled
+						} as FixedAssetClassExtended;
+					} catch (error) {
+						// Si no tiene FA class, solo retornar la clase base
+						return baseClass as FixedAssetClassExtended;
+					}
+				})
+			);
+
+			classes = classesWithFA;
+			console.log('Clases cargadas:', classes.length);
+		} catch (error) {
+			console.error('Error cargando clases:', error);
+			toast.error('Error al cargar las clases de activo fijo');
+		} finally {
+			isLoading = false;
+		}
+	}
+
+	function selectClass(cls: A76Class) {
+		selectedClass = cls;
+		formData = {
+			class_code: cls.class_code,
+			description_es: cls.description_es || '',
+			description_en: cls.description_en || '',
+			material_key: cls.material_key || '',
+			unit_of_measure: cls.unit_of_measure || '',
+			fraction: cls.fraction || '',
+			us_fraction: cls.us_fraction || '',
+			unit_measure_trade: '',
+			bom: ''
+		};
+	}
+
+	async function saveFixedAssetClass(formData: any) {
+		console.log('=== INICIO saveFixedAssetClass ===');
+		const companyId = companyStore.activeCompany?.id;
+		
+		// CAMBIO: Usar $state.snapshot para obtener una copia real, no reactiva
+		const data = $state.snapshot(formData);
+        console.log('saveFixedAssetClass called with data:', data);
+		
+		if (!companyId) {
+			toast.error('No hay empresa seleccionada');
+			throw new Error('No hay empresa seleccionada');
+		}
+
+		// Validar campos obligatorios
+		const missingFields: string[] = [];
+		
+		if (!data.class_code?.trim()) {
+			missingFields.push('Código de clase');
+		}
+		if (!data.description_es?.trim()) {
+			missingFields.push('Descripción en español');
+		}
+		if (!data.material_key?.trim()) {
+			missingFields.push('Tipo de activo fijo');
+		}
+		if (!data.unit_of_measure?.trim()) {
+			missingFields.push('Unidad de medida comercial');
+		}
+		if (!data.fraction?.trim()) {
+			missingFields.push('Fracción arancelaria');
+		}
+
+	if (missingFields.length > 0) {
+		const fieldsList = missingFields.join(', ');
+		validationError = `Debe completar los siguientes campos obligatorios: ${fieldsList}`;
+		toast.error(validationError, {
+			duration: 8000
+		});
+		throw new Error(`Campos obligatorios faltantes: ${fieldsList}`);
+	}
+
+	// Limpiar error de validación si todo está bien
+	validationError = '';
+
+	try {
+		// Usar el endpoint combinado /fa que crea ambos registros en una transacción
+		const payload = {
+			class_code: data.class_code.trim(),
+			description_es: data.description_es.trim(),
+			description_en: data.description_en?.trim() || '',
+			material_key: data.material_key.trim(),
+			unit_of_measure: data.unit_of_measure.trim(),
+			fraction: data.fraction.trim(),
+			us_fraction: data.us_fraction?.trim() || '',
+			sub_key: data.sub_key || '',
+			physical_review: data.physical_review ? 1 : 0,
+			iva_exempt_fraction: data.iva_exempt_fraction || '',
+			// FA-specific fields
+			import_tariff_code: data.import_tariff_code || null,
+			import_tariff_type: data.import_tariff_type || null,
+			export_tariff_code: data.export_tariff_code || null,
+			export_tariff_type: data.export_tariff_type || null,
+			depreciation_rate: data.annual_depreciation_rate || null,
+			fda_code: data.fda_key || null,
+			eccn_code: data.eccn_code || null,
+			class_enabled: true
+		};
+		
+		console.log('Sending payload:', payload);
+		
+		const response = await classesApi.createFA(payload, companyId);
+
+		if (response.error) {
+			console.error('Server error:', response.error);
+			
+			// Manejar diferentes formatos de error
+			let errorMessage = response.error;
+			let isDuplicateError = false;
+			
+			// Detectar si es un error de código duplicado
+			if (errorMessage.includes('código') && errorMessage.includes('ya está en uso')) {
+				isDuplicateError = true;
+			}
+			
+			// Mensaje más específico para errores de duplicado
+			console.log('isDuplicateError:', isDuplicateError);
+			if (isDuplicateError) {
+				validationError = `⚠️ ${errorMessage}\n\nPor favor, cambie el código de clase a uno diferente.`;
+			} else {
+				validationError = `⚠️ ${errorMessage}`;
+			}
+			
+			console.log('MENSAJE ASIGNADO (save):', validationError);
+			toast.error(errorMessage, { duration: 8000 });
+			throw new Error(errorMessage);
+		}
+
+		validationError = '';
+		toast.success('✅ Clase de activo fijo creada correctamente');
+		return response.data;
+
+	} catch (error: any) {
+		console.error('Error saving fixed asset class:', error);
+		// El toast ya se mostró arriba, solo re-lanzar el error
+		throw error;
+		}
+	}
+
+	async function updateFixedAssetClass(formData: any) {
+    console.log('=== INICIO updateFixedAssetClass ===');
+    const companyId = companyStore.activeCompany?.id;
+    
+    // CAMBIO 1: Usar $state.snapshot para obtener una copia real, no reactiva
+    // Esto garantiza que aunque el hijo borre el formulario, 'data' mantenga los valores
+    const data = $state.snapshot(formData);
+    
+    console.log('updateFixedAssetClass called with snapshot data:', data);
+    
+    if (!companyId || !selectedClass) {
+        toast.error('No hay empresa o clase seleccionada');
+        return;
+    }
+
+    // CAMBIO 2: Validar sobre 'data' (la copia muerta)
+    const missingFields: string[] = [];
+    if (!data.class_code?.trim()) missingFields.push('Código de clase');
+    if (!data.description_es?.trim()) missingFields.push('Descripción en español');
+    if (!data.material_key?.trim()) missingFields.push('Tipo de activo fijo');
+    if (!data.unit_of_measure?.trim()) missingFields.push('Unidad de medida comercial');
+    if (!data.fraction?.trim()) missingFields.push('Fracción arancelaria');
+    
+    if (missingFields.length > 0) {
+        const errorMsg = `Campos obligatorios faltantes: ${missingFields.join(', ')}`;
+        validationError = `⚠️ ${errorMsg}`;
+        toast.error(errorMsg);
+        // Lanzamos el error para que el 'onSave' del Dialog no cierre la ventana
+        throw new Error(errorMsg);
+    }
+    
+    validationError = '';
+
+    try {
+        // CAMBIO 3: Usar siempre 'data' para los payloads
+        const a76Response = await classesApi.update(selectedClass.id, {
+            class_code: data.class_code.trim(),
+            description_es: data.description_es.trim(),
+            description_en: data.description_en?.trim() || '',
+            material_key: data.material_key.trim(),
+            unit_of_measure: data.unit_of_measure.trim(),
+            fraction: data.fraction.trim(),
+            us_fraction: data.us_fraction || '',
+            physical_review: data.physical_review ? 1 : 0,
+            iva_exempt_fraction: data.iva_exempt_fraction || ''
+        }, companyId);
+
+        if (selectedClass.fa_class_id) {
+            await faClassesApi.update(selectedClass.fa_class_id, {
+                depreciation_rate: data.annual_depreciation_rate || null,
+                fda_code: data.fda_key || null
+            }, companyId);
+        } else {
+            await faClassesApi.create({
+                class_id: selectedClass.id,
+                depreciation_rate: data.annual_depreciation_rate || null,
+                fda_code: data.fda_key || null,
+                class_enabled: true
+            }, companyId);
+        }
+
+        toast.success('Clase actualizada correctamente');
+        return { a76: a76Response.data };
+
+    } catch (error: any) {
+    	console.error('Error updating fixed asset class:', error);
+			console.error('Error response:', error?.response);
+			console.error('Error response data:', error?.response?.data);
+			console.error('Error response detail:', error?.response?.data?.detail);
+			console.error('Error type:', typeof error?.response?.data?.detail);
+			
+			let errorMessage = 'Error al actualizar la clase';
+			let isDuplicateError = false;
+			
+			// Extract error message from response
+			if (error?.response?.data?.detail) {
+				if (Array.isArray(error.response.data.detail)) {
+					errorMessage = error.response.data.detail.map((e: any) => 
+						`${e.loc ? e.loc.join(' → ') : ''}: ${e.msg || e}`
+					).join(', ');
+				} else if (typeof error.response.data.detail === 'string') {
+					errorMessage = error.response.data.detail;
+					// Detectar si es un error de código duplicado
+					if (errorMessage.includes('código') && errorMessage.includes('ya está en uso')) {
+						isDuplicateError = true;
+					}
+				} else {
+					errorMessage = JSON.stringify(error.response.data.detail);
+				}
+			} else if (error?.message) {
+				errorMessage = error.message;
+			}
+			
+			console.error('Final error message:', errorMessage);
+			console.error('Is duplicate error:', isDuplicateError);
+			
+			// Mensaje más específico para errores de duplicado
+			console.log('isDuplicateError:', isDuplicateError);
+			if (isDuplicateError) {
+				validationError = `⚠️ ${errorMessage}\n\nPor favor, cambie el código de clase a uno diferente.`;
+			} else {
+				validationError = `⚠️ ${errorMessage}`;
+			}
+			
+			console.log('MENSAJE ASIGNADO (update):', validationError);
+			toast.error(errorMessage, { duration: 8000 });
+			
+			console.error('Toast shown, about to throw error');
+        throw error;
+    }
+}
+	function handleNew() {
+		selectedClass = null;
+		formData = {
+			class_code: '',
+			description_es: '',
+			description_en: '',
+			material_key: '',
+			unit_of_measure: '',
+			fraction: '',
+			us_fraction: '',
+			unit_measure_trade: '',
+			bom: ''
+		};
+	}
+
+	async function handleRefresh() {
+		await loadClasses();
+		toast.success('Clases actualizadas');
+	}
+
+	function handleDelete() {
+		if (!selectedClass) {
+			toast.error('Selecciona una clase para borrar');
+			return;
+		}
+		showDeleteDialog = true;
+	}
+
+	async function confirmDelete() {
+		if (!selectedClass) return;
+		
+		const companyId = companyStore.activeCompany?.id;
+		if (!companyId) {
+			toast.error('No hay empresa seleccionada');
+			return;
+		}
+
+		const classToDelete = selectedClass;
+		
+		try {
+			// El backend ahora elimina automáticamente la extensión FA si existe
+			await classesApi.delete(classToDelete.id, companyId);
+
+			toast.success(`Clase ${classToDelete.class_code} eliminada correctamente`);
+			
+			// Recargar lista
+			await loadClasses();
+			
+			selectedClass = null;
+			showDeleteDialog = false;
+			formData = {
+				class_code: '',
+				description_es: '',
+				description_en: '',
+				material_key: '',
+				unit_of_measure: '',
+				fraction: '',
+				us_fraction: '',
+				unit_measure_trade: '',
+				bom: ''
+			};
+		} catch (error) {
+			console.error('Error deleting class:', error);
+			toast.error('Error al eliminar la clase');
+		}
+	}
+</script>
+
+<div class="flex flex-col h-[calc(100vh-4rem)] p-4 gap-4 pb-15">
+	<!-- Título -->
+	<div class="flex flex-col gap-1">
+		<h1 class="text-2xl font-bold">CATALOGO DE CLASES DE ACTIVO FIJO</h1>
+		<p class="text-sm text-muted-foreground">
+			Gestiona y consulta las clases de activo fijo 
+		</p>
+	</div>
+
+	<!-- Contenedor principal con grid y detalles -->
+	<div class="flex-1 flex gap-4 overflow-hidden">
+		<!-- Panel izquierdo: Grid/Tabla de clases -->
+		<div class="flex-1 flex flex-col gap-4 overflow-hidden">
+			<!-- Sección de Filtros -->
+			<div class="border rounded-lg bg-card">
+				<div class="p-4 space-y-4">
+					<div class="flex items-center justify-between">
+						<h2 class="text-sm font-semibold">Filtros</h2>
+						<span class="text-xs text-muted-foreground">
+							Filtra las clases por diferentes criterios (los filtros se aplican automáticamente)
+						</span>
+					</div>
+					<div class="grid grid-cols-4 gap-4">
+						<div class="space-y-2">
+							<Label class="text-xs">Clase</Label>
+							<Input
+								bind:value={searchTerm}
+								placeholder="Ej: AF001"
+								class="h-9"
+							/>
+						</div>
+						<div class="space-y-2">
+							<Label class="text-xs">Descripción</Label>
+							<Input
+								bind:value={searchDescription}
+								placeholder="Buscar descripción..."
+								class="h-9"
+							/>
+						</div>
+						<div class="space-y-2">
+							<Label class="text-xs">Tipo</Label>
+							<Input
+								bind:value={searchType}
+								placeholder="MP, SC, DESP..."
+								class="h-9"
+							/>
+						</div>
+						<div class="space-y-2">
+							<Label class="text-xs">Fracción</Label>
+							<Input
+								bind:value={searchFraction}
+								placeholder="Fracción arancelaria"
+								class="h-9"
+							/>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<!-- Tabla de clases -->
+			<div class="flex-1 flex flex-col border rounded-lg overflow-hidden">
+				<div class="flex items-center justify-between p-3 border-b bg-white dark:bg-muted/50">
+					<h2 class="text-sm font-semibold">Listado de Clases</h2>
+					<div class="flex items-center gap-2">
+						<span class="text-xs text-muted-foreground">
+							Mostrando de {filteredClasses.length} registros
+						</span>
+					<Button variant="outline" size="sm" onclick={handleRefresh}>
+							<RefreshCw class="h-4 w-4 mr-2" />
+							Actualizar
+						</Button>
+					</div>
+				</div>
+
+			<!-- Tabla de clases -->
+			<div class="flex-1 overflow-auto">
+				<table class="w-full text-sm">
+					<thead class="bg-white dark:bg-black text-gray-900 dark:text-white sticky top-0 z-10 border-b">
+						<tr>
+							<th class="px-2 py-2 text-left w-8">
+								<input type="checkbox" class="h-4 w-4" />
+							</th>
+							<th class="px-2 py-2 text-left">Clase</th>
+							<th class="px-2 py-2 text-left">Descripción Español</th>
+							<th class="px-2 py-2 text-left">Descripción Inglés</th>
+							<th class="px-2 py-2 text-left">Tipo</th>
+							<th class="px-2 py-2 text-left">U.M</th>
+							<th class="px-2 py-2 text-left">Fracción</th>					<th class="px-2 py-2 text-left">U.M.T.</th>							<th class="px-2 py-2 text-left">Fracción US</th>
+						</tr>
+					</thead>
+					<tbody>
+						{#if isLoading}
+							<tr>
+								<td colspan="10" class="text-center py-8 text-muted-foreground">Cargando...</td>
+							</tr>
+						{:else if filteredClasses.length === 0}
+							<tr>
+								<td colspan="10" class="text-center py-8 text-muted-foreground">
+									No hay clases de activo fijo registradas
+								</td>
+							</tr>
+						{:else}
+							{#each filteredClasses as cls (cls.id)}
+								<tr
+									class="border-b cursor-pointer transition-colors {selectedClass?.id ===
+									cls.id
+										? 'bg-gray-300 dark:bg-gray-600'
+										: 'hover:bg-gray-100 dark:hover:bg-gray-700'}"
+									onclick={() => selectClass(cls)}
+								>
+									<td class="px-2 py-1">
+										<input
+											type="checkbox"
+											checked={selectedClass?.id === cls.id}
+											class="h-4 w-4"
+										/>
+									</td>
+								<td class="px-2 py-1">
+									<span class="inline-flex items-center rounded-md bg-blue-50 dark:bg-blue-900/30 px-2 py-1 text-xs font-mono font-bold text-blue-700 dark:text-blue-400 border border-blue-200 dark:border-blue-800">
+										{cls.class_code}
+									</span>
+								</td>
+								<td class="px-2 py-1 font-medium text-sm">{cls.description_es || ''}</td>
+								<td class="px-2 py-1">{cls.description_en || ''}</td>
+								<td class="px-2 py-1">
+									<span class="px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider {cls.material_key === 'MP' ? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400' : cls.material_key === 'SC' ? 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-400' : cls.material_key === 'DESP' ? 'bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400' : 'bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-400'}">
+										{cls.material_key || ''}
+									</span>
+								</td>
+								<td class="px-2 py-1 text-muted-foreground">{cls.unit_of_measure || ''}</td>
+								<td class="px-2 py-1 font-mono text-xs text-orange-600 dark:text-orange-400">{cls.fraction || ''}</td>					<td class="px-2 py-1 text-xs text-muted-foreground">-</td>									<td class="px-2 py-1">{cls.us_fraction || '-'}</td>
+								</tr>
+							{/each}
+						{/if}
+					</tbody>
+				</table>
+			</div>
+		</div>
+	</div>
+
+		<!-- Panel derecho: Detalles y edición -->
+			<div class="w-96 flex-none flex flex-col border rounded-xl bg-muted/30 shadow-sm overflow-hidden">
+				<div class="p-4 border-b">
+					<p class="text-[10px] uppercase tracking-widest opacity-80 text-muted-foreground">Código de Clase</p>
+					<h2 class="text-3xl font-black font-mono tracking-tighter">
+						{formData.class_code || '---'}
+					</h2>
+				</div>
+
+				<div class="flex-1 overflow-auto p-5 space-y-6 bg-card">
+					<div class="space-y-3">
+						<div>
+							<Label class="text-[10px] uppercase text-muted-foreground font-bold">Descripción ES</Label>
+							<p class="text-sm font-semibold leading-tight">{formData.description_es || 'Sin descripción'}</p>
+						</div>
+						<div class="pt-2 border-t border-dashed">
+							<Label class="text-[10px] uppercase text-muted-foreground font-bold">Description EN</Label>
+							<p class="text-sm italic text-muted-foreground">{formData.description_en || 'No translation available'}</p>
+						</div>
+					</div>
+
+					<div class="grid grid-cols-2 gap-4 pt-4 border-t">
+						<div class="space-y-1">
+							<Label class="text-[10px] uppercase text-muted-foreground font-bold">Tipo Activo</Label>
+							<div class="flex items-center gap-2">
+								<Folder class="h-3 w-3 text-blue-500" />
+								<span class="text-sm font-bold">{formData.material_key || '-'}</span>
+							</div>
+						</div>
+						<div class="space-y-1">
+							<Label class="text-[10px] uppercase text-muted-foreground font-bold">U.M. Com.</Label>
+							<span class="text-sm font-bold">{formData.unit_of_measure || '-'}</span>
+						</div>
+					</div>
+
+					<div class="p-3 bg-orange-50 dark:bg-orange-950/20 rounded-lg border border-orange-100 dark:border-orange-900">
+						<Label class="text-[10px] uppercase text-orange-600 dark:text-orange-400 font-bold">Fracción Arancelaria</Label>
+						<p class="text-lg font-mono font-bold text-orange-700 dark:text-orange-300">
+							{formData.fraction || '0000.00.00'}
+						</p>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+
+<!-- Footer fijo con botones de acción -->
+<div class="fixed bottom-0 left-0 right-0 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80 border-t shadow-lg z-[5]">
+	<div class="px-4 py-4 max-w-[1400px] mx-auto">
+		<!-- Botones de acción -->
+		<div class="flex justify-end gap-2">
+			<Button size="sm" onclick={() => {
+				selectedClass = null;
+				validationError = '';
+				showInsertDialog = true;
+			}}>
+				<Plus class="h-4 w-4 mr-1" />
+				Insertar
+			</Button>
+			<Button variant="outline" size="sm" onclick={() => {
+				if (!selectedClass) {
+					toast.error('Selecciona una clase para editar');
+					return;
+				}
+				validationError = '';
+				showInsertDialog = true;
+			}} disabled={!selectedClass}>Editar</Button>
+			<Button variant="outline" size="sm" onclick={handleDelete} disabled={!selectedClass}>Borrar</Button>
+		</div>
+	</div>
+</div>
+
+<!-- Dialog para Insertar/Editar Clase de Activo Fijo -->
+<Dialog.Root bind:open={showInsertDialog}>
+	<Dialog.Content class="!max-w-[1600px] !w-[1600px] !h-[90vh] p-0 overflow-hidden flex flex-col">
+		<Dialog.Header class="p-6 pb-4 border-b">
+			<Dialog.Title>{selectedClass ? 'Editar' : 'Nueva'} Clase de Activo Fijo</Dialog.Title>
+		</Dialog.Header>
+		
+		<!-- Mensaje de error de validación -->
+		{#if validationError}
+			<div class="mx-6 mt-4 p-4 bg-red-50 border border-red-200 rounded-lg">
+				<div class="flex items-start gap-3">
+					<div class="flex-shrink-0 w-5 h-5 rounded-full bg-red-500 text-white flex items-center justify-center text-sm font-bold mt-0.5">
+						!
+					</div>
+					<div class="flex-1">
+						<h3 class="text-sm font-semibold text-red-800 mb-1">Error de Validación</h3>
+						<p class="text-sm text-red-700 whitespace-pre-line">{validationError}</p>
+					</div>
+					<button 
+						onclick={() => validationError = ''} 
+						class="flex-shrink-0 text-red-400 hover:text-red-600"
+					 aria-label="Cerrar mensaje de error">
+						<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+						</svg>
+					</button>
+				</div>
+			</div>
+		{/if}
+		
+		<div class="flex-1 overflow-auto p-6">
+			<FixedAssetClassForm 
+				initialData={selectedClass}
+				externalError={validationError}
+				onClearError={() => validationError = ''}
+				onSave={async (data: Partial<FixedAssetClassExtended>) => {
+					// Evitar múltiples clics
+					if (isSaving) {
+						console.log('⚠️ Ya está guardando, ignorando clic');
+						return;
+					}
+					isSaving = true;
+					validationError = '';
+					
+					console.log('========================================');
+					console.log('=== INICIO ONSAVE ===');
+					console.log('Datos recibidos:', data);
+					console.log('selectedClass:', selectedClass);
+					console.log('========================================');
+					
+					try {
+						const cleanData = $state.snapshot(data);
+						const companyId = companyStore.activeCompany?.id;
+						
+						if (!companyId) {
+							throw new Error('No hay empresa seleccionada');
+						}
+
+						let response;
+						
+						if (selectedClass?.id) {
+							// === ACTUALIZACIÓN ===
+							console.log('🔄 MODO: ACTUALIZACIÓN');
+							console.log('ID de clase:', selectedClass.id);
+							
+							response = await classesApi.update(selectedClass.id, {
+								class_code: cleanData.class_code?.trim() || '',
+								description_es: cleanData.description_es?.trim() || '',
+								description_en: cleanData.description_en?.trim() || '',
+								material_key: cleanData.material_key?.trim() || '',
+								unit_of_measure: cleanData.unit_of_measure?.trim() || '',
+								fraction: cleanData.fraction?.trim() || '',
+								us_fraction: cleanData.us_fraction || '',
+								physical_review: cleanData.physical_review ? 1 : 0,
+								iva_exempt_fraction: cleanData.iva_exempt_fraction || ''
+							}, companyId);
+							
+							// ¡IMPORTANTE! fetchApi NO lanza excepciones, retorna { error, status }
+							if (response.error) {
+								console.error('❌ Error en respuesta de actualización:', response);
+								throw new Error(response.error);
+							}
+							
+							console.log('✅ Actualización exitosa');
+						} else {
+							// === CREACIÓN ===
+							console.log('➕ MODO: CREACIÓN');
+							
+							const payload = {							
+								class_code: cleanData.class_code?.trim() || '',
+								description_es: cleanData.description_es?.trim() || '',
+								description_en: cleanData.description_en?.trim() || '',
+								material_key: cleanData.material_key?.trim() || '',
+								unit_of_measure: cleanData.unit_of_measure?.trim() || '',
+								fraction: cleanData.fraction?.trim() || '',
+								us_fraction: cleanData.us_fraction?.trim() || '',
+								sub_key: cleanData.sub_key || '',
+								physical_review: cleanData.physical_review ? 1 : 0,
+								iva_exempt_fraction: cleanData.iva_exempt_fraction || '',
+								depreciation_rate: cleanData.depreciation_rate || null,
+								fda_code: cleanData.fda_code || null,
+								class_enabled: true
+							};
+							
+							console.log('Payload:', payload);
+							
+							response = await classesApi.createFA(payload, companyId);
+							
+							if (response.error) {
+								console.error('❌ Error del servidor:', response.error);
+								throw new Error(response.error);
+							}
+							
+							console.log('✅ Creación exitosa');
+						}
+
+						// === ÉXITO TOTAL ===
+						console.log('✅ GUARDADO EXITOSO - Cerrando diálogo');
+						const wasUpdate = !!selectedClass?.id;
+						await loadClasses();
+						showInsertDialog = false;
+						selectedClass = null;
+						validationError = '';
+						toast.success(wasUpdate ? 'Clase actualizada correctamente' : 'Clase creada correctamente');
+						
+					} catch (error: any) {
+						// === ERROR ===
+						console.error('========================================');
+						console.error('❌ ERROR CAPTURADO');
+						console.error('Error:', error);
+						console.error('Error.response:', error?.response);
+						console.error('Error.response.data:', error?.response?.data);
+						console.error('Error.detail:', error?.detail);
+						console.error('========================================');
+						
+						let errorMsg = 'Error al guardar';
+						
+						// Primero intentar con error.detail (fetch directo)
+						if (error?.detail) {
+							if (typeof error.detail === 'string') {
+								errorMsg = error.detail;
+							} else if (Array.isArray(error.detail)) {
+								errorMsg = error.detail.map((e: any) => e.msg || e).join(', ');
+							}
+						}
+						// Luego con error.response.data.detail (axios)
+						else if (error?.response?.data?.detail) {
+							if (typeof error.response.data.detail === 'string') {
+								errorMsg = error.response.data.detail;
+							} else if (Array.isArray(error.response.data.detail)) {
+								errorMsg = error.response.data.detail.map((e: any) => e.msg || e).join(', ');
+							}
+						}
+						// Por último el mensaje genérico
+						else if (error?.message) {
+							errorMsg = error.message;
+						}
+						
+						console.error('📝 Mensaje de error extraído:', errorMsg);
+						
+						validationError = errorMsg;
+						console.error('🔴 validationError asignado:', validationError);
+						console.error('🔴 showInsertDialog permanece:', showInsertDialog);
+						console.error('========================================');
+						
+						// NO cerramos el diálogo, permanece abierto
+					} finally {
+						isSaving = false;
+						console.log('✅ isSaving = false');
+					}
+				}}
+				onCancel={() => { 
+					showInsertDialog = false;
+					selectedClass = null;
+				}}
+			/>
+		</div>
+		<Dialog.Footer class="p-6 pt-4 border-t">
+			<Button variant="outline" onclick={() => {
+				validationError = ''; 
+				showInsertDialog = false;
+				selectedClass = null;
+			}}>Cancelar</Button>
+			<Button type="button" disabled={isSaving} onclick={() => {
+				// Trigger the form's handleSave by getting a reference via DOM
+				const saveEvent = new CustomEvent('save-form');
+				document.dispatchEvent(saveEvent);
+			}}>
+				{#if isSaving}
+					<RefreshCw class="h-4 w-4 mr-2 animate-spin" />
+					Guardando...
+				{:else}
+					<Save class="h-4 w-4 mr-2" />
+					Guardar
+				{/if}
+			</Button>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>
+
+<!-- Dialog de confirmación para borrar -->
+<Dialog.Root bind:open={showDeleteDialog}>
+	<Dialog.Content class="max-w-md">
+		<Dialog.Header>
+			<Dialog.Title>¿Confirmar eliminación?</Dialog.Title>
+		</Dialog.Header>
+		<div class="py-4">
+			<p class="text-sm text-muted-foreground">
+				¿Estás seguro que deseas eliminar la clase <strong class="text-foreground">{selectedClass?.class_code}</strong>?
+			</p>
+			<p class="text-sm text-muted-foreground mt-2">
+				{selectedClass?.description_es}
+			</p>
+			<p class="text-sm text-destructive mt-4">
+				Esta acción no se puede deshacer.
+			</p>
+		</div>
+		<Dialog.Footer>
+			<Button variant="outline" onclick={() => showDeleteDialog = false}>Cancelar</Button>
+			<Button variant="destructive" onclick={confirmDelete}>Eliminar</Button>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>