From e84a030aec93932b9a68657a4d79b37d8d18d59c Mon Sep 17 00:00:00 2001
From: Kevin_Ramirez <kramirez@aduanasoft.com.mx>
Date: Fri, 2 Jan 2026 16:18:51 -0600
Subject: [PATCH] Se integro el modulo parcial de clases en mercancias

---
 frontend/messages/en.json                     |   5 +
 frontend/messages/es.json                     |   5 +
 .../components/dashboard/classes/columns.ts   |   1 +
 .../classes/data-table-actions.svelte         |   3 +-
 .../src/lib/components/sidebar/modules.ts     |  16 +
 .../dashboard/goods/classes/+page.server.ts   |  63 ++++
 .../dashboard/goods/classes/+page.svelte      | 239 +++++++++++++
 .../goods/classes/edit/[[id]]/+page.svelte    | 335 ++++++++++++++++++
 .../routes/dashboard/goods/parts/+page.svelte |   1 +
 9 files changed, 667 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/routes/dashboard/goods/classes/+page.server.ts
 create mode 100644 frontend/src/routes/dashboard/goods/classes/+page.svelte
 create mode 100644 frontend/src/routes/dashboard/goods/classes/edit/[[id]]/+page.svelte
 create mode 100644 frontend/src/routes/dashboard/goods/parts/+page.svelte

diff --git a/frontend/messages/en.json b/frontend/messages/en.json
index d4274cd5..541dac72 100644
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -63,6 +63,11 @@
 			"back_flush": "Back Flush",
 			"crossing_notice": "Crossing Notice"
 		},
+		"goods": {
+			"title": "Goods",
+			"classes": "Classes", 
+			"parts": "Parts"
+		},
 		"pedimentos": {
 			"title": "Pedimentos",
 			"pedimento_management": "Pedimento Management",
diff --git a/frontend/messages/es.json b/frontend/messages/es.json
index 083691bc..9e2a85c5 100644
--- a/frontend/messages/es.json
+++ b/frontend/messages/es.json
@@ -63,6 +63,11 @@
 			"back_flush": "Back Flush",
 			"crossing_notice": "Aviso de cruce"
 		},
+		"goods": {
+			"title": "Mercancías",
+			"classes": "Clases", 
+			"parts": "Partes"
+		},
         "pedimentos": {
 			"title": "Pedimentos",
 			"pedimento_management": "Gestión de Pedimentos",
diff --git a/frontend/src/lib/components/dashboard/classes/columns.ts b/frontend/src/lib/components/dashboard/classes/columns.ts
index f5535b3c..69f88da4 100644
--- a/frontend/src/lib/components/dashboard/classes/columns.ts
+++ b/frontend/src/lib/components/dashboard/classes/columns.ts
@@ -166,6 +166,7 @@ export function createColumns(onSuccess?: () => void): ColumnDef<A76Class>[] {
 		},
 		{
 			id: "actions",
+			header: "Acciones",
 			cell: ({ row }) => {
 				return renderComponent(DataTableActions, { item: row.original, onSuccess });
 			}
diff --git a/frontend/src/lib/components/dashboard/classes/data-table-actions.svelte b/frontend/src/lib/components/dashboard/classes/data-table-actions.svelte
index 51f21088..ad2ad6b6 100644
--- a/frontend/src/lib/components/dashboard/classes/data-table-actions.svelte
+++ b/frontend/src/lib/components/dashboard/classes/data-table-actions.svelte
@@ -5,6 +5,7 @@
 	import { companyStore } from "$lib/stores/company.svelte";
 	import { EllipsisVertical, Pencil, LoaderCircle, Trash2 } from 'lucide-svelte';
 	import CreateEditDialog from "./create-edit-dialog.svelte";
+	import { goto } from "$app/navigation";
 
 	let {
 		item,
@@ -88,7 +89,7 @@
 	<DropdownMenu.Content align="end" class="w-[160px]">
 		<DropdownMenu.Label>Acciones</DropdownMenu.Label>
 		<DropdownMenu.Separator />
-		<DropdownMenu.Item onclick={handleEdit}>
+		<DropdownMenu.Item onclick={() => { goto(`/dashboard/goods/classes/edit/${item.id}`); }} >
 			<Pencil size={16} class="mr-2" />
 			Editar
 		</DropdownMenu.Item>
diff --git a/frontend/src/lib/components/sidebar/modules.ts b/frontend/src/lib/components/sidebar/modules.ts
index a8d965bd..4adf7499 100644
--- a/frontend/src/lib/components/sidebar/modules.ts
+++ b/frontend/src/lib/components/sidebar/modules.ts
@@ -13,6 +13,7 @@ import {
   Users, 
 } from 'lucide-svelte';
 import * as m from "$lib/paraglide/messages.js";
+import { Title } from '../ui/alert';
 
 export interface NavItem {
 	title: string;
@@ -285,6 +286,21 @@ export function getSidebarData(): SidebarData {
 					},
 				],
 			},
+			{
+				title: m["sidebar.goods.title"](),
+				url: "#",
+				icon: Package,
+				items: [
+					{
+						title: m["sidebar.goods.classes"](),
+						url: "/dashboard/goods/classes",
+					}, 
+					{
+						title: m["sidebar.goods.parts"](),
+						url: "/dashboard/goods/parts",
+					}
+				],
+			},
 			{
 				title: m["sidebar.pedimentos.title"](),
 				url: "#",
diff --git a/frontend/src/routes/dashboard/goods/classes/+page.server.ts b/frontend/src/routes/dashboard/goods/classes/+page.server.ts
new file mode 100644
index 00000000..f3302213
--- /dev/null
+++ b/frontend/src/routes/dashboard/goods/classes/+page.server.ts
@@ -0,0 +1,63 @@
+import type { PageServerLoad } from './$types';
+import { getAuthTokens, authenticatedFetch } from '$lib/server/api';
+
+export const load: PageServerLoad = async ({ cookies, fetch, url, parent }) => {
+    await parent();
+    const { accessToken } = getAuthTokens(cookies);
+
+    if (!accessToken) {
+        // Cambiamos el objeto de retorno vacío a "classes"
+        return { error: 'No authenticated', classes: { items: [], total: 0, page: 1, page_size: 50, pages: 0 } };
+    }
+
+    try {
+        const page = Number(url.searchParams.get('page')) || 1;
+        const pageSize = Number(url.searchParams.get('pageSize')) || 50;
+        
+        // --- ZONA DE CAMBIOS DE FILTROS ---
+        const filters: Record<string, string> = {};
+        
+        // En tu modelo el campo se llama "class_code", así que buscamos eso o 'code'
+        const classCode = url.searchParams.get('class_code') || url.searchParams.get('code');
+        const description = url.searchParams.get('description'); // Este sirve para description_es o description_en
+
+        if (classCode) filters.class_code = classCode; // Ajustado al modelo
+        if (description) filters.description = description;
+        // ----------------------------------
+
+        const parentData = await parent();
+        const cookieCompanyId = cookies.get('active_company_id');
+        const companyId = cookieCompanyId 
+            ? parseInt(cookieCompanyId)
+            : parentData.companies?.[0]?.id;
+
+        if (!companyId) {
+            return {
+                error: 'No se encontró una compañía seleccionada',
+                classes: { items: [], total: 0, page: 1, page_size: 50, pages: 0 }
+            };
+        }
+
+        const queryParams = new URLSearchParams({ 
+            company_id: companyId.toString(),
+            page: page.toString(), 
+            page_size: pageSize.toString(), 
+            ...filters 
+        });
+
+        // --- ZONA DE CAMBIO DE ENDPOINT ---
+        // Asumiendo que tu endpoint sigue el estándar REST y se llama 'classes'
+        const response = await authenticatedFetch(`v1/a76/classes?${queryParams.toString()}`, { method: 'GET' }, cookies, fetch);
+
+        if (!response.ok) {
+            return { error: 'Failed to load', classes: { items: [], total: 0, page, page_size: pageSize, pages: 0 } };
+        }
+
+        // Retornamos "classes" para que coincida con lo que espera tu frontend
+        return { classes: await response.json() };
+
+    } catch (error) {
+        console.error('Error loading classes:', error);
+        return { error: 'Error loading', classes: { items: [], total: 0, page: 1, page_size: 50, pages: 0 } };
+    }
+};
\ No newline at end of file
diff --git a/frontend/src/routes/dashboard/goods/classes/+page.svelte b/frontend/src/routes/dashboard/goods/classes/+page.svelte
new file mode 100644
index 00000000..7669e858
--- /dev/null
+++ b/frontend/src/routes/dashboard/goods/classes/+page.svelte
@@ -0,0 +1,239 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    // import { classesApi } from '$lib/api/dashboard/a76/classes'; // <--- TODO: Descomentar cuando crees el archivo API
+    import DataTable from '$lib/components/dashboard/classes/data-table.svelte';
+    import { createColumns } from '$lib/components/dashboard/classes/columns.js';
+    import * as Card from '$lib/components/ui/card';
+    import { Button } from '$lib/components/ui/button';
+    import { Input } from '$lib/components/ui/input';
+    import { Label } from '$lib/components/ui/label';
+    import type { PageData } from './$types';
+    import { browser } from '$app/environment';
+    import { companyStore } from '$lib/stores/company.svelte';
+    import { Plus, Search, Trash2 } from 'lucide-svelte';
+
+    // 1. Recibimos la data del servidor (+page.server.ts)
+    let { data }: { data: PageData } = $props();    
+
+    // 2. Ajustamos el estado para Clases
+    let classesList = $state(data.classes?.items || []); 
+    let listLoading = $state(false);
+    let listError = $state<string | null>(data.error || null);
+
+    // Estado para búsqueda
+    let searchCode = $state(''); 
+    let searchedClass = $state<any | null>(null);
+    let searchLoading = $state(false);
+    let searchError = $state<string | null>(null);
+
+    onMount(() => {
+        if (browser) {
+            const getCookie = (name: string): string | null => {
+                const value = `; ${document.cookie}`;
+                const parts = value.split(`; ${name}=`);
+                if (parts.length === 2) return parts.pop()?.split(';').shift() || null;
+                return null;
+            };
+
+            const cookieToken = getCookie('access_token');
+            const localToken = localStorage.getItem('access_token');
+
+            if (cookieToken && cookieToken !== localToken) {
+                localStorage.setItem('access_token', cookieToken);
+            }
+
+            const cookieRefreshToken = getCookie('refresh_token');
+            const localRefreshToken = localStorage.getItem('refresh_token');
+
+            if (cookieRefreshToken && cookieRefreshToken !== localRefreshToken) {
+                localStorage.setItem('refresh_token', cookieRefreshToken);
+            }
+
+            // Escuchar cambios de compañía
+            const handleCompanyChange = (event: CustomEvent) => {               
+                reloadData();
+            };
+
+            window.addEventListener('companyChanged', handleCompanyChange as EventListener);
+
+            return () => {
+                window.removeEventListener('companyChanged', handleCompanyChange as EventListener);
+            };
+        }
+    });
+
+    async function handleSearch() {
+        if (!searchCode.trim()) {
+            searchError = 'Por favor ingresa un código de clase';
+            return;
+        }
+
+        searchLoading = true;
+        searchError = null;
+        searchedClass = null;
+
+        try {
+            // TODO: Usar tu API real aquí: const response = await classesApi.get(searchCode.trim());
+            console.log("Buscando clase:", searchCode);
+            
+            // MOCK TEMPORAL (Borrar esto cuando tengas el API):
+            const response = { error: null, data: null, status: 200 }; 
+            
+            if (response.error) {
+                searchError = response.error;
+                return;
+            }
+
+            if (response.data) {
+                searchedClass = response.data;
+            } else {
+                 // Simular no encontrado si usas el mock
+                 // searchError = 'No encontrado (Mock)';
+            }
+        } catch (e) {
+            searchError = 'Error al buscar la clase';
+            console.error('Error searching class:', e);
+        } finally {
+            searchLoading = false;
+        }
+    }
+
+    async function reloadData() {
+        searchCode = '';
+        searchedClass = null;
+        searchError = null;
+        
+        if (!companyStore.activeCompany) return;
+        
+        listLoading = true;
+        listError = null;
+
+        try {
+            // TODO: Usar tu API real aquí: await classesApi.list(...)
+            // Por ahora recargamos la página completa para traer datos frescos del server
+            window.location.reload(); 
+            
+        } catch (e) {
+            listError = 'Error recargando datos';
+            console.error('Error reloading:', e);
+        } finally {
+            listLoading = false;
+        }
+    }
+
+    function handleSuccess() {
+        reloadData();
+    }
+
+    // Asegúrate de que columns.js tenga los campos correctos (class_code, description, etc)
+    const columns = createColumns(handleSuccess);
+    
+    // Array reactivo
+    const classesData = $derived(searchedClass ? [searchedClass] : classesList);
+</script>
+
+<div class="space-y-6">
+    <div class="flex items-center justify-between">
+        <div>
+            <h1 class="text-3xl font-bold tracking-tight">Catálogo de Clases</h1>
+            <p class="text-muted-foreground">
+                Gestiona las clases de material (SCAII / SCAF)
+            </p>
+        </div>
+        <Button href="/dashboard/goods/classes/edit" >
+            <Plus class="mr-2" size={16} />
+            Nueva Clase
+        </Button>
+    </div>
+
+    <Card.Root>
+        <Card.Header>
+            <Card.Title>Buscar Clase</Card.Title>
+        </Card.Header>
+        <Card.Content>
+            <form onsubmit={(e) => { e.preventDefault(); handleSearch(); }} class="space-y-4">
+                <div class="flex gap-4">
+                    <div class="flex-1 space-y-2">
+                        <Label for="search-key">Código de Clase</Label>
+                        <Input
+                            id="search-key"
+                            bind:value={searchCode}
+                            placeholder="Ej: ACERO"
+                            maxlength={10} 
+                            disabled={searchLoading}
+                        />
+                    </div>
+                    <div class="flex items-end gap-2">
+                        <Button type="submit" disabled={searchLoading}>
+                            {#if searchLoading}
+                                <div class="flex items-center gap-2">
+                                    <div class="h-4 w-4 animate-spin rounded-full border-2 border-primary-foreground border-t-transparent"></div>
+                                    Buscando...
+                                </div>
+                            {:else}
+                                <Search class="mr-2" size={16} />
+                                Buscar
+                            {/if}
+                        </Button>
+                        {#if searchedClass}
+                            <Button type="button" variant="outline" onclick={reloadData}>
+                                <Trash2 class="mr-2" size={16} />
+                                Limpiar
+                            </Button>
+                        {/if}
+                    </div>
+                </div>
+
+                {#if searchError}
+                    <div class="rounded-lg border border-destructive bg-destructive/10 p-3 text-sm text-destructive">
+                        {searchError}
+                    </div>
+                {/if}
+            </form>
+        </Card.Content>
+    </Card.Root>
+
+    <Card.Root>
+        <Card.Header>
+            <div class="flex items-center justify-between">
+                <div>
+                    <Card.Title>
+                        {#if searchedClass}
+                            Resultado de la Búsqueda
+                        {:else}
+                            Listado de Clases
+                        {/if}
+                    </Card.Title>
+                    <Card.Description>
+                        {#if searchedClass}
+                            Se encontró 1 Clase
+                        {:else if listLoading}
+                            Cargando Clases...
+                        {:else}
+                            Total: {classesList.length} registro{classesList.length !== 1 ? 's' : ''}
+                        {/if}
+                    </Card.Description>
+                </div>
+            </div>
+        </Card.Header>
+        <Card.Content>
+            {#if listError}
+                <div class="rounded-lg border border-destructive bg-destructive/10 p-4 text-sm text-destructive">
+                    {listError}
+                </div>
+            {:else if listLoading}
+                <div class="flex items-center justify-center py-8">
+                    <div class="flex items-center gap-2 text-muted-foreground">
+                        <div class="h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent"></div>
+                        Cargando Clases...
+                    </div>
+                </div>
+            {:else}
+                <DataTable
+                    data={classesData}
+                    {columns}
+                />
+            {/if}
+        </Card.Content>
+    </Card.Root>
+</div>
\ No newline at end of file
diff --git a/frontend/src/routes/dashboard/goods/classes/edit/[[id]]/+page.svelte b/frontend/src/routes/dashboard/goods/classes/edit/[[id]]/+page.svelte
new file mode 100644
index 00000000..be859091
--- /dev/null
+++ b/frontend/src/routes/dashboard/goods/classes/edit/[[id]]/+page.svelte
@@ -0,0 +1,335 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { goto } from '$app/navigation';
+    import { onMount } from 'svelte';
+    
+    // Componentes UI
+    import { Button } from '$lib/components/ui/button';
+    import { Input } from '$lib/components/ui/input';
+    import { Label } from '$lib/components/ui/label';
+    import { Textarea } from '$lib/components/ui/textarea';
+    import * as Tabs from '$lib/components/ui/tabs';
+    import * as Card from '$lib/components/ui/card';
+    import { ArrowLeft, LoaderCircle, Save } from 'lucide-svelte';
+
+    // Stores y APIs
+    import { companyStore } from '$lib/stores/company.svelte';
+    import { 
+        classesApi, 
+        type A76ClassCreate, 
+        type A76ClassUpdate 
+    } from '$lib/api/dashboard/a76/classes';
+    import { materialTypesApi, type MaterialType } from "$lib/api/dashboard/refrence_data/material_types";
+    
+    // --- 1. LÓGICA DE IDENTIFICACIÓN ---
+    let id = $derived($page.params.id === 'new' ? null : Number($page.params.id));
+    let isEdit = $derived(!!id);
+    let title = $derived(isEdit ? "Editar Clase" : "Nueva Clase");
+
+    // --- 2. ESTADOS ---
+    let loading = $state(false);
+    let error = $state<string | null>(null);
+    
+    // Catálogos
+    let materialTypes = $state<MaterialType[]>([]);
+    let loadingCatalogs = $state(false);
+
+    // Formulario Inicial
+    function getEmptyForm(): A76ClassCreate {
+        return {
+            company_id: 0,
+            client_id: 0, // Se llenará manual
+            class_code: '',
+            description_es: '',
+            description_en: '',
+            material_key: '',
+            unit_of_measure: 'KG', 
+            fraction: '',
+            us_fraction: '',
+            sub_key: '',
+            physical_review: 0,
+            iva_exempt_fraction: ''
+        };
+    }
+
+    let formData = $state<A76ClassCreate>(getEmptyForm());
+
+    // --- 3. CARGA DE DATOS (Mount) ---
+    onMount(async () => {
+        const companyId = companyStore.activeCompany?.id;
+        if (!companyId) return;
+
+        loadingCatalogs = true;
+        
+        // Ejecutamos las cargas en paralelo
+        await Promise.all([
+            loadMaterialTypes(companyId),
+            id ? loadClassData(id, companyId) : Promise.resolve() 
+        ]);
+
+        loadingCatalogs = false;
+    });
+
+    // Carga de Catálogos
+    async function loadMaterialTypes(companyId: number) {
+        try {
+            const response = await materialTypesApi.list(1, 100); 
+            if (response.data) materialTypes = response.data.items;
+        } catch (e) {
+            console.error('Error loading material types:', e);
+        }
+    }
+
+    // Carga del Registro a Editar
+    async function loadClassData(classId: number, companyId: number) {
+        loading = true;
+        try {
+            const response = await classesApi.get(classId, companyId);
+
+            if (response.error) {
+                error = response.error;
+                return;
+            }
+
+            if (response.data) {
+                const data = response.data;
+                formData = {
+                    company_id: data.company_id,
+                    client_id: data.client_id,
+                    class_code: data.class_code,
+                    description_es: data.description_es || '',
+                    description_en: data.description_en || '',
+                    material_key: data.material_key || '',
+                    unit_of_measure: data.unit_of_measure,
+                    fraction: data.fraction,
+                    us_fraction: data.us_fraction,
+                    sub_key: data.sub_key,
+                    physical_review: data.physical_review,
+                    iva_exempt_fraction: data.iva_exempt_fraction
+                };
+            }
+        } catch (e) {
+            error = "No se pudo cargar la información de la Clase";
+            console.error(e);
+        } finally {
+            loading = false;
+        }
+    }
+
+    // --- 4. GUARDADO ---
+    async function handleSubmit() {
+        error = null;
+        const activeCompanyId = companyStore.activeCompany?.id;
+
+        // Validaciones
+        if (!activeCompanyId) { error = 'Selecciona una compañía'; return; }
+        if (!formData.client_id) { error = 'Debes ingresar un ID de Cliente válido'; return; } // Validación manual
+        if (!formData.class_code?.trim()) { error = 'La Clave de Clase es requerida'; return; }
+        if (!formData.fraction?.trim()) { error = 'La Fracción es requerida'; return; }
+
+        loading = true;
+        try {
+            formData.company_id = activeCompanyId;
+
+            const cleanData = {
+                ...formData,
+                description_es: formData.description_es || null,
+                description_en: formData.description_en || null,
+                material_key: formData.material_key || null,
+            };
+
+            if (isEdit && id) {
+                const updatePayload: A76ClassUpdate = cleanData;
+                const response = await classesApi.update(id, updatePayload, activeCompanyId);
+                if (response.error) throw new Error(response.error);
+            } else {
+                const response = await classesApi.create(cleanData, activeCompanyId);
+                if (response.error) throw new Error(response.error);
+            }
+            
+            goto('/dashboard/goods/classes'); 
+        } catch (e: any) {
+            error = e.message || 'Error al guardar';
+        } finally {
+            loading = false;
+        }
+    }
+
+    // Opciones estáticas para Unidades
+    const unitOptions = [
+        { value: 'KG', label: 'Kilogramos (KG)' },
+        { value: 'LB', label: 'Libras (LB)' },
+        { value: 'MT', label: 'Metros (MT)' },
+        { value: 'PZ', label: 'Piezas (PZ)' },
+        { value: 'LT', label: 'Litros (LT)' },
+        { value: 'M3', label: 'Metros Cúbicos (M3)' },
+        { value: 'TON', label: 'Toneladas (TON)' },
+        { value: 'KGM', label: 'Kilogramo (KGM)' }, 
+        { value: 'H87', label: 'Pieza (H87)' },
+        { value: 'EA', label: 'Elemento (EA)' }
+    ];
+</script>
+
+<div class="w-full mx-auto max-w-6xl py-6 px-4 space-y-6 pb-48">
+    <div class="flex items-center gap-4">
+        <Button variant="outline" size="icon" href="/dashboard/goods/classes">
+            <ArrowLeft class="h-4 w-4" />
+        </Button>
+        <div>
+            <h1 class="text-2xl font-bold tracking-tight">{title}</h1>
+        </div>
+    </div>
+
+    {#if error}
+        <div class="p-4 rounded-md bg-destructive/10 text-destructive border border-destructive/20 text-sm font-medium">
+            ⚠️ {error}
+        </div>
+    {/if}
+
+    {#key id}
+        <form onsubmit={(e) => { e.preventDefault(); handleSubmit(); }} class="space-y-6">
+            <Card.Root>
+                <Card.Content class="p-6">
+                    <Tabs.Root value="general" class="w-full">
+                        <div class="min-h-[400px]">
+                            
+                            <Tabs.Content value="general" class="space-y-4 pt-4">
+                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                    <div class="grid gap-2">
+                                        <Label for="class_code" class="required">Clave de Clase</Label>
+                                        <Input id="class_code" bind:value={formData.class_code} maxlength={8} placeholder="Ej. ACERO" />
+                                        <p class="text-xs text-muted-foreground">Máximo 8 caracteres.</p>
+                                    </div>
+
+                                    <div class="grid gap-2">
+                                        <Label for="client_id" class="required">ID Cliente</Label>
+                                        <Input 
+                                            type="number" 
+                                            id="client_id" 
+                                            bind:value={formData.client_id} 
+                                            placeholder="Ingresa el ID del cliente" 
+                                        />
+                                    </div>
+                                </div>
+
+                                <div class="grid gap-2">
+                                    <Label for="desc_es">Descripción (Español)</Label>
+                                    <Textarea id="desc_es" bind:value={formData.description_es} class="min-h-[80px]" maxlength={500} />
+                                </div>
+
+                                <div class="grid gap-2">
+                                    <Label for="desc_en">Descripción (Inglés)</Label>
+                                    <Textarea id="desc_en" bind:value={formData.description_en} class="min-h-[80px]" maxlength={500} />
+                                </div>
+                            </Tabs.Content>
+
+                            <Tabs.Content value="technical" class="space-y-4 pt-4">
+                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                    
+                                    <div class="grid gap-2">
+                                        <Label for="material_key">Tipo de Material</Label>
+                                        {#if loadingCatalogs}
+                                            <div class="h-9 w-full animate-pulse rounded-md bg-muted"></div>
+                                        {:else}
+                                            <select 
+                                                id="material_key"
+                                                bind:value={formData.material_key}
+                                                class="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+                                            >
+                                                <option value="">Sin tipo específico</option>
+                                                {#each materialTypes as mt}
+                                                    <option value={mt.key}>
+                                                        {mt.key} - {mt.description}
+                                                    </option>
+                                                {/each}
+                                            </select>
+                                        {/if}
+                                    </div>
+
+                                    <div class="grid gap-2">
+                                        <Label for="uom" class="required">Unidad de Medida</Label>
+                                        <select 
+                                            id="uom"
+                                            bind:value={formData.unit_of_measure}
+                                            class="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+                                        >
+                                            {#each unitOptions as unit}
+                                                <option value={unit.value}>{unit.label}</option>
+                                            {/each}
+                                        </select>
+                                    </div>
+                                </div>
+                                
+                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                    <div class="grid gap-2">
+                                        <Label for="fraction" class="required">Fracción Arancelaria (MX)</Label>
+                                        <Input id="fraction" bind:value={formData.fraction} maxlength={10} placeholder="Ej: 12345678" />
+                                    </div>
+                                    <div class="grid gap-2">
+                                        <Label for="us_fraction" class="required">Fracción Arancelaria (US)</Label>
+                                        <Input id="us_fraction" bind:value={formData.us_fraction} maxlength={16} placeholder="Ej: 12345678" />
+                                    </div>
+                                </div>
+                            </Tabs.Content>
+
+                            <Tabs.Content value="others" class="space-y-4 pt-4">
+                                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                                    <div class="grid gap-2">
+                                        <Label for="sub_key" class="required">Subclave</Label>
+                                        <Input id="sub_key" bind:value={formData.sub_key} maxlength={5} />
+                                    </div>
+                                    <div class="grid gap-2">
+                                        <Label for="iva_exempt" class="required">Fracción Exenta IVA</Label>
+                                        <Input id="iva_exempt" bind:value={formData.iva_exempt_fraction} maxlength={4} />
+                                    </div>
+                                    
+                                    <div class="grid gap-2">
+                                        <Label for="phys_rev">Revisión Física</Label>
+                                        <select 
+                                            id="phys_rev"
+                                            bind:value={formData.physical_review}
+                                            class="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+                                        >
+                                            <option value={0}>No</option>
+                                            <option value={1}>Sí</option>
+                                        </select>
+                                    </div>
+                                </div>
+                            </Tabs.Content>
+                        </div>
+
+                        <Tabs.List class="grid grid-cols-3 fixed bottom-24 left-1/2 -translate-x-1/2 w-[95%] max-w-xl z-40 shadow-2xl bg-background border p-1 rounded-xl">
+                            <Tabs.Trigger value="general">General</Tabs.Trigger>
+                            <Tabs.Trigger value="technical">Clasificación</Tabs.Trigger>
+                            <Tabs.Trigger value="others">Otros</Tabs.Trigger>
+                        </Tabs.List>
+                    </Tabs.Root>
+                </Card.Content>
+            </Card.Root>
+
+            <div class="fixed bottom-0 right-0 left-0 md:left-64 p-4 border-t bg-background/95 backdrop-blur z-50 flex justify-end gap-4 shadow-inner">
+                <div class="max-w-6xl mx-auto flex justify-end gap-4 px-4 w-full">
+                    <Button type="button" variant="ghost" href="/dashboard/goods/classes" disabled={loading}>
+                        Cancelar
+                    </Button>
+                    <Button type="submit" disabled={loading || loadingCatalogs} class="min-w-[140px]">
+                        {#if loading}
+                            <LoaderCircle class="mr-2 h-4 w-4 animate-spin" />
+                            Guardando...
+                        {:else}
+                            <Save class="mr-2 h-4 w-4" />
+                            {isEdit ? 'Actualizar' : 'Guardar'}
+                        {/if}
+                    </Button>
+                </div>
+            </div>
+        </form>
+    {/key}
+</div>
+
+<style>
+    :global(.required::after) {
+        content: " *";
+        color: hsl(var(--destructive));
+    }
+</style>
\ No newline at end of file
diff --git a/frontend/src/routes/dashboard/goods/parts/+page.svelte b/frontend/src/routes/dashboard/goods/parts/+page.svelte
new file mode 100644
index 00000000..ecbec7e4
--- /dev/null
+++ b/frontend/src/routes/dashboard/goods/parts/+page.svelte
@@ -0,0 +1 @@
+<h1>Pagina de partes</h1>
\ No newline at end of file