From 314df4ffc1a4479b65f82923c929c9296d08dd1a Mon Sep 17 00:00:00 2001
From: "Kevin A. Rosales Marquez" <krosales@aduanasoft.com.mx>
Date: Fri, 12 Dec 2025 17:23:58 -0600
Subject: [PATCH] Modulo/Creacion de endpoint para las tablas de facturas, asi
 como sus creaciones

---
 backend/api/v1/modules/a76/invoices/routes.py |   1 +
 .../invoices/data-table-actions.svelte        |  15 +-
 .../src/lib/components/sidebar/modules.ts     |  18 +-
 .../exportacion}/+page.server.ts              |   6 +-
 .../exportacion}/+page.svelte                 |   0
 .../exportacion/reparacion/+page.server.ts    | 114 +++++
 .../exportacion/reparacion/+page.svelte       | 382 +++++++++++++++++
 .../cambio_regimen/+page.server.ts            | 114 +++++
 .../importacion/cambio_regimen/+page.svelte   | 382 +++++++++++++++++
 .../cambio_regimen/new/+page.svelte           | 320 ++++++++++++++
 .../compras_mexicanas/+page.server.ts         | 114 +++++
 .../compras_mexicanas/+page.svelte            | 382 +++++++++++++++++
 .../compras_mexicanas/new/+page.svelte        | 320 ++++++++++++++
 .../importacion/definitiva/+page.server.ts    | 114 +++++
 .../importacion/definitiva/+page.svelte       | 390 ++++++++++++++++++
 .../importacion/definitiva/new/+page.svelte   | 320 ++++++++++++++
 .../importacion/temporal/+page.server.ts      | 114 +++++
 .../importacion/temporal/+page.svelte         | 382 +++++++++++++++++
 .../importacion/temporal/new/+page.svelte     | 320 ++++++++++++++
 19 files changed, 3794 insertions(+), 14 deletions(-)
 rename frontend/src/routes/dashboard/invoices/{ => exportacion/exportacion}/+page.server.ts (94%)
 rename frontend/src/routes/dashboard/invoices/{ => exportacion/exportacion}/+page.svelte (100%)
 create mode 100644 frontend/src/routes/dashboard/invoices/exportacion/reparacion/+page.server.ts
 create mode 100644 frontend/src/routes/dashboard/invoices/exportacion/reparacion/+page.svelte
 create mode 100644 frontend/src/routes/dashboard/invoices/importacion/cambio_regimen/+page.server.ts
 create mode 100644 frontend/src/routes/dashboard/invoices/importacion/cambio_regimen/+page.svelte
 create mode 100644 frontend/src/routes/dashboard/invoices/importacion/cambio_regimen/new/+page.svelte
 create mode 100644 frontend/src/routes/dashboard/invoices/importacion/compras_mexicanas/+page.server.ts
 create mode 100644 frontend/src/routes/dashboard/invoices/importacion/compras_mexicanas/+page.svelte
 create mode 100644 frontend/src/routes/dashboard/invoices/importacion/compras_mexicanas/new/+page.svelte
 create mode 100644 frontend/src/routes/dashboard/invoices/importacion/definitiva/+page.server.ts
 create mode 100644 frontend/src/routes/dashboard/invoices/importacion/definitiva/+page.svelte
 create mode 100644 frontend/src/routes/dashboard/invoices/importacion/definitiva/new/+page.svelte
 create mode 100644 frontend/src/routes/dashboard/invoices/importacion/temporal/+page.server.ts
 create mode 100644 frontend/src/routes/dashboard/invoices/importacion/temporal/+page.svelte
 create mode 100644 frontend/src/routes/dashboard/invoices/importacion/temporal/new/+page.svelte

diff --git a/backend/api/v1/modules/a76/invoices/routes.py b/backend/api/v1/modules/a76/invoices/routes.py
index a2160a6b..e81706a1 100644
--- a/backend/api/v1/modules/a76/invoices/routes.py
+++ b/backend/api/v1/modules/a76/invoices/routes.py
@@ -150,6 +150,7 @@ def get_invoice_details(
     status_code=201,
     summary="Add sales detail to an invoice",
 )
+
 def create_invoice_detail(
     invoice_id: int = Path(..., description="Invoice ID"),
     detail_data: schemas.InvoiceSalesDetailsCreate = ...,
diff --git a/frontend/src/lib/components/dashboard/invoices/data-table-actions.svelte b/frontend/src/lib/components/dashboard/invoices/data-table-actions.svelte
index 13367343..4b5f2e65 100644
--- a/frontend/src/lib/components/dashboard/invoices/data-table-actions.svelte
+++ b/frontend/src/lib/components/dashboard/invoices/data-table-actions.svelte
@@ -3,6 +3,7 @@
 	import { Button } from '$lib/components/ui/button';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
 	import { Ellipsis, Eye, Pencil, Trash2 } from 'lucide-svelte';
+	import { goto } from '$app/navigation';
 
 	interface Props {
 		invoice: Invoice;
@@ -14,13 +15,14 @@
 		window.dispatchEvent(new CustomEvent('invoiceView', { detail: invoice }));
 	}
 
-	function dispatchEdit() {
-		window.dispatchEvent(new CustomEvent('invoiceEdit', { detail: invoice }));
-	}
-
 	function dispatchDelete() {
 		window.dispatchEvent(new CustomEvent('invoiceDelete', { detail: invoice }));
 	}
+
+	function dispatchEdit() {
+        window.dispatchEvent(new CustomEvent('invoiceEdit', { detail: invoice }));
+    }
+
 </script>
 
 <DropdownMenu.Root>
@@ -35,18 +37,21 @@
 	<DropdownMenu.Content align="end">
 		<DropdownMenu.Label>Acciones</DropdownMenu.Label>
 		<DropdownMenu.Separator />
+		
 		<DropdownMenu.Item onclick={dispatchView}>
 			<Eye class="mr-2 h-4 w-4" />
 			Ver Detalles
 		</DropdownMenu.Item>
+
 		<DropdownMenu.Item onclick={dispatchEdit}>
 			<Pencil class="mr-2 h-4 w-4" />
 			Editar
 		</DropdownMenu.Item>
+
 		<DropdownMenu.Separator />
 		<DropdownMenu.Item onclick={dispatchDelete} class="text-destructive">
 			<Trash2 class="mr-2 h-4 w-4" />
 			Eliminar
 		</DropdownMenu.Item>
 	</DropdownMenu.Content>
-</DropdownMenu.Root>
+</DropdownMenu.Root>
\ No newline at end of file
diff --git a/frontend/src/lib/components/sidebar/modules.ts b/frontend/src/lib/components/sidebar/modules.ts
index cbc38c14..328f53dc 100644
--- a/frontend/src/lib/components/sidebar/modules.ts
+++ b/frontend/src/lib/components/sidebar/modules.ts
@@ -323,19 +323,23 @@ export function getSidebarData(): SidebarData {
 				items: [
 					{
 						title: m["sidebar.import_invoices.temporary"](),
-						url: "/dashboard/invoices?operation_type=imp&invoice_type=TEM",
+						//url: "/dashboard/invoices?operation_type=imp&invoice_type=TEM"
+						url: "/dashboard/invoices/importacion/temporal",
 					},
 					{
 						title: m["sidebar.import_invoices.definitive"](),
-						url: "/dashboard/invoices?operation_type=imp&invoice_type=DEF",
+						//url: "/dashboard/invoices?operation_type=imp&invoice_type=DEF",
+						url: "/dashboard/invoices/importacion/definitiva",
 					},
 					{
 						title: m["sidebar.import_invoices.mexican_purchases"](),
-						url: "/dashboard/invoices?operation_type=imp&invoice_type=MEX",
+						//url: "/dashboard/invoices?operation_type=imp&invoice_type=MEX",
+						url: "/dashboard/invoices/importacion/compras_mexicanas",
 					},
 					{
 						title: m["sidebar.import_invoices.regime_change"](),
-						url: "/dashboard/invoices?operation_type=imp&invoice_type=CR",
+						//url: "/dashboard/invoices?operation_type=imp&invoice_type=CR",
+						url: "/dashboard/invoices/importacion/cambio_regimen",
 					}
 				],
 			},
@@ -346,11 +350,13 @@ export function getSidebarData(): SidebarData {
 				items: [
 					{
 						title: m["sidebar.export_invoices.exportation"](),
-						url: "/dashboard/invoices?operation_type=exp",
+						//url: "/dashboard/invoices?operation_type=exp",
+						url: "/dashboard/invoices/exportacion/exportacion",
 					},
 					{
 						title: m["sidebar.export_invoices.repair"](),
-						url: "/dashboard/invoices?operation_type=exp&invoice_type=REPAR",
+						//url: "/dashboard/invoices?operation_type=exp&invoice_type=REPAR",
+						url: "/dashboard/invoices/exportacion/reparacion",
 					},					
 				],
 			},
diff --git a/frontend/src/routes/dashboard/invoices/+page.server.ts b/frontend/src/routes/dashboard/invoices/exportacion/exportacion/+page.server.ts
similarity index 94%
rename from frontend/src/routes/dashboard/invoices/+page.server.ts
rename to frontend/src/routes/dashboard/invoices/exportacion/exportacion/+page.server.ts
index 4e3b8795..54f3eb0b 100644
--- a/frontend/src/routes/dashboard/invoices/+page.server.ts
+++ b/frontend/src/routes/dashboard/invoices/exportacion/exportacion/+page.server.ts
@@ -1,4 +1,4 @@
-import type { PageServerLoad } from './$types';
+import type { PageServerLoad } from '../$types';
 import { redirect } from '@sveltejs/kit';
 import { 
 	getAuthTokens, 
@@ -43,8 +43,8 @@ export const load: PageServerLoad = async ({ fetch, cookies, url, parent }) => {
 		}
 
 		// Obtener filtro de tipo de operación
-		const operationType = url.searchParams.get('operation_type');
-		const invoiceType = url.searchParams.get('invoice_type');
+		const operationType = 'exp'
+		const invoiceType =  'exp'
 		
 		// Construir parámetros de consulta
 		const params = new URLSearchParams({
diff --git a/frontend/src/routes/dashboard/invoices/+page.svelte b/frontend/src/routes/dashboard/invoices/exportacion/exportacion/+page.svelte
similarity index 100%
rename from frontend/src/routes/dashboard/invoices/+page.svelte
rename to frontend/src/routes/dashboard/invoices/exportacion/exportacion/+page.svelte
diff --git a/frontend/src/routes/dashboard/invoices/exportacion/reparacion/+page.server.ts b/frontend/src/routes/dashboard/invoices/exportacion/reparacion/+page.server.ts
new file mode 100644
index 00000000..4feb09c2
--- /dev/null
+++ b/frontend/src/routes/dashboard/invoices/exportacion/reparacion/+page.server.ts
@@ -0,0 +1,114 @@
+import type { PageServerLoad } from '../$types';
+import { redirect } from '@sveltejs/kit';
+import { 
+	getAuthTokens, 
+	authenticatedFetch 
+} from '$lib/server/api';
+
+export const load: PageServerLoad = async ({ fetch, cookies, url, parent }) => {
+	// Esperar a que el layout padre valide/refresque el token
+	const parentData = await parent();
+	
+	// Verificar autenticación
+	const { accessToken } = getAuthTokens(cookies);
+	
+	if (!accessToken) {
+		throw redirect(302, '/login');
+	}
+
+	try {
+		// Obtener company_id de múltiples fuentes (en orden de prioridad):
+		// 1. URL query param (permite cambiar vía navegación)
+		// 2. Cookie active_company_id (setted por el team-switcher)
+		// 3. Primera compañía del usuario (fallback)
+		const companyIdParam = url.searchParams.get('company_id');
+		const cookieCompanyId = cookies.get('active_company_id');
+		
+		const companyId = companyIdParam 
+			? parseInt(companyIdParam)
+			: cookieCompanyId
+				? parseInt(cookieCompanyId)
+				: parentData.companies?.[0]?.id;
+		
+		// Si aún no hay companyId, mostrar error
+		if (!companyId) {
+			return {
+				items: [],
+				total: 0,
+				page: 1,
+				page_size: 50,
+				error: 'No se encontró una compañía seleccionada',
+				companies: parentData.companies || []
+			};
+		}
+
+		// Obtener filtro de tipo de operación
+		const operationType = 'exp'
+		const invoiceType =  'REPAR'
+		
+		// Construir parámetros de consulta
+		const params = new URLSearchParams({
+			company_id: companyId.toString(),
+			page: '1',
+			page_size: '50'
+		});
+
+		// Agregar filtro de tipo si existe y no es 'all'
+		if (operationType && operationType !== 'all') {
+			params.append('operation_type', operationType);
+		}
+		
+		// Agregar filtro de invoice_type si existe
+		if (invoiceType) {
+			params.append('invoice_type', invoiceType);
+		}
+		
+		// Usar authenticatedFetch para manejar automáticamente el refresh de tokens
+		const response = await authenticatedFetch(
+			`v1/a76/invoices?${params.toString()}`,
+			{},
+			cookies,
+			fetch,
+			'/login'
+		);
+
+		if (!response.ok) {
+			return {
+				items: [],
+				total: 0,
+				page: 1,
+				page_size: 50,
+				error: 'Error al cargar facturas',
+				companies: parentData.companies || [],
+				currentCompanyId: companyId,
+				operationType: operationType || 'all',
+				invoiceType: invoiceType || null
+			};
+		}
+
+		const data = await response.json();
+
+		return {
+			items: data.items || [],
+			total: data.total || 0,
+			page: data.page || 1,
+			page_size: data.page_size || 50,
+			companies: parentData.companies || [],
+			currentCompanyId: companyId,
+			operationType: operationType || 'all',
+			invoiceType: invoiceType || null
+		};
+	} catch (error) {
+		console.error('Error loading invoices:', error);
+		return {
+			items: [],
+			total: 0,
+			page: 1,
+			page_size: 50,
+			error: 'Error al cargar facturas',
+			companies: parentData.companies || [],
+			operationType: 'all',
+			invoiceType: null
+		};
+	}
+};
diff --git a/frontend/src/routes/dashboard/invoices/exportacion/reparacion/+page.svelte b/frontend/src/routes/dashboard/invoices/exportacion/reparacion/+page.svelte
new file mode 100644
index 00000000..0a837d10
--- /dev/null
+++ b/frontend/src/routes/dashboard/invoices/exportacion/reparacion/+page.svelte
@@ -0,0 +1,382 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { invoicesApi, type Invoice } from '$lib/api/dashboard/a76/invoices';
+	import { invoiceTypesApi, type InvoiceType } from '$lib/api/dashboard/refrence_data/invoice_types';
+	import DataTable from '$lib/components/dashboard/invoices/data-table.svelte';
+	import { createColumns } from '$lib/components/dashboard/invoices/columns.js';
+	import CreateEditDialog from '$lib/components/dashboard/invoices/create-edit-dialog.svelte';
+	import DetailsDialog from '$lib/components/dashboard/invoices/details-dialog.svelte';
+	import DeleteDialog from '$lib/components/dashboard/invoices/delete-dialog.svelte';
+	import * as Card from '$lib/components/ui/card';
+	import { Button } from '$lib/components/ui/button';
+	import * as Select from '$lib/components/ui/select';
+	import { Plus, RefreshCw } from 'lucide-svelte';
+	import { goto, invalidate } from '$app/navigation';
+	import { browser } from '$app/environment';
+	import { companyStore } from '$lib/stores/company.svelte';
+
+	// Recibir data del servidor
+	interface PageData {
+		items: Invoice[];
+		total: number;
+		page: number;
+		page_size: number;
+		error?: string;
+		companies: any[];
+		currentCompanyId?: number;
+		operationType?: string;
+		invoiceType?: string | null;
+	}
+
+	let { data }: { data: PageData } = $props();
+
+	// Estado para los diálogos
+	let showCreateDialog = $state(false);
+	let showDetailsDialog = $state(false);
+	let showDeleteDialog = $state(false);
+	let selectedInvoice = $state<Invoice | null>(null);
+
+	// Estado para el filtro de tipo (inicializado desde data del servidor)
+	let selectedType = $state<string>(data.operationType || 'all');
+	let selectedInvoiceType = $state<string | null>(data.invoiceType || null);
+	let availableInvoiceTypes = $state<InvoiceType[]>([]);
+	let loadingInvoiceTypes = $state(false);
+
+	// Actualizar URL cuando cambia el filtro
+	function handleTypeChange(value: string) {
+		selectedType = value;
+		const url = new URL(window.location.href);
+		if (value === 'all') {
+			url.searchParams.delete('operation_type');
+			url.searchParams.delete('invoice_type');
+			selectedInvoiceType = null;
+		} else {
+			url.searchParams.set('operation_type', value);
+			// Mantener invoice_type si existe
+			if (selectedInvoiceType) {
+				url.searchParams.set('invoice_type', selectedInvoiceType);
+			}
+		}
+		goto(url.toString(), { keepFocus: true, noScroll: true });
+	}
+
+	// Actualizar URL cuando cambia el filtro de invoice_type
+	function handleInvoiceTypeChange(value: string) {
+		selectedInvoiceType = value === 'all' ? null : value;
+		const url = new URL(window.location.href);
+		if (!selectedInvoiceType) {
+			url.searchParams.delete('invoice_type');
+		} else {
+			url.searchParams.set('invoice_type', selectedInvoiceType);
+		}
+		if (selectedType !== 'all') {
+			url.searchParams.set('operation_type', selectedType);
+		}
+		goto(url.toString(), { keepFocus: true, noScroll: true });
+	}
+
+	// Cargar tipos de factura disponibles según operation_type
+	async function loadInvoiceTypes(operationType: string) {
+		if (operationType === 'all') {
+			availableInvoiceTypes = [];
+			return;
+		}
+
+		loadingInvoiceTypes = true;
+		try {
+			const response = await invoiceTypesApi.list(1, 100, operationType);
+			if (response.data) {
+				availableInvoiceTypes = response.data.items;
+			}
+		} catch (e) {
+			console.error('Error loading invoice types:', e);
+			availableInvoiceTypes = [];
+		} finally {
+			loadingInvoiceTypes = false;
+		}
+	}
+
+	// Efecto para cargar tipos de factura cuando cambia selectedType
+	$effect(() => {
+		loadInvoiceTypes(selectedType);
+	});
+
+	// Sincronizar token de cookies a localStorage al montar el componente
+	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) => {
+				invalidate('app:invoices');
+			};
+
+			// Escuchar eventos de facturas
+			const handleInvoiceView = (event: CustomEvent<Invoice>) => {
+				handleView(event.detail);
+			};
+
+			const handleInvoiceEdit = (event: CustomEvent<Invoice>) => {
+				handleEdit(event.detail);
+			};
+
+			const handleInvoiceDelete = (event: CustomEvent<Invoice>) => {
+				handleDelete(event.detail);
+			};
+
+			window.addEventListener('companyChanged', handleCompanyChange as EventListener);
+			window.addEventListener('invoiceView', handleInvoiceView as EventListener);
+			window.addEventListener('invoiceEdit', handleInvoiceEdit as EventListener);
+			window.addEventListener('invoiceDelete', handleInvoiceDelete as EventListener);
+
+			return () => {
+				window.removeEventListener('companyChanged', handleCompanyChange as EventListener);
+				window.removeEventListener('invoiceView', handleInvoiceView as EventListener);
+				window.removeEventListener('invoiceEdit', handleInvoiceEdit as EventListener);
+				window.removeEventListener('invoiceDelete', handleInvoiceDelete as EventListener);
+			};
+		}
+	});
+
+	// Estado para infinite scroll - inicializar con data del servidor
+	let allItems = $state<Invoice[]>(data.items || []);
+	let currentPage = $state(data.page || 1);
+	let pageSize = $state(data.page_size || 50);
+	let totalItems = $state(data.total || 0);
+	let loading = $state(false);
+	let hasMore = $derived(allItems.length < totalItems);
+	let error = $state<string | null>(data.error || null);
+
+	// Actualizar datos cuando cambia data del servidor
+	$effect(() => {
+		allItems = data.items || [];
+		currentPage = data.page || 1;
+		totalItems = data.total || 0;
+		error = data.error || null;
+		selectedInvoiceType = data.invoiceType || null;
+		selectedType = data.operationType || 'all';
+	});
+
+	async function loadMore() {
+		if (loading || !hasMore || !companyStore.activeCompany) return;
+
+		loading = true;
+		error = null;
+
+		try {
+			const filters: any = {};
+			if (selectedType !== 'all') {
+				filters.operation_type = selectedType;
+			}
+			if (selectedInvoiceType) {
+				filters.invoice_type = selectedInvoiceType;
+			}
+			
+			const response = await invoicesApi.list(
+				companyStore.activeCompany.id,
+				currentPage + 1,
+				pageSize,
+				Object.keys(filters).length > 0 ? filters : undefined
+			);
+
+			if (response.error) {
+				console.error('Error en loadMore:', response.error, 'Status:', response.status);
+				
+				if (response.status === 401 || response.status === 403) {
+					error = 'Sesión expirada. Recargando página...';
+					setTimeout(() => {
+						window.location.reload();
+					}, 2000);
+				} else {
+					error = response.error;
+				}
+				return;
+			}
+
+			if (response.data?.items) {
+				allItems = [...allItems, ...response.data.items];
+				currentPage++;
+				totalItems = response.data.total;
+			}
+		} catch (e) {
+			error = 'Error cargando más datos';
+			console.error('Error loading more:', e);
+		} finally {
+			loading = false;
+		}
+	}
+
+	async function reloadData() {
+		// Invalidar datos para que el servidor recargue
+		await invalidate('app:invoices');
+	}
+
+	function handleCreateClick() {
+		selectedInvoice = null;
+		showCreateDialog = true;
+	}
+
+	function handleView(invoice: Invoice) {
+		selectedInvoice = invoice;
+		showDetailsDialog = true;
+	}
+
+	function handleEdit(invoice: Invoice) {
+		selectedInvoice = invoice;
+		showCreateDialog = true;
+	}
+
+	function handleDelete(invoice: Invoice) {
+		selectedInvoice = invoice;
+		showDeleteDialog = true;
+	}
+
+	function handleSuccess() {
+		reloadData();
+	}
+
+	// Crear columnas
+	const columns = createColumns();
+</script>
+
+<div class="space-y-6">
+	<!-- Header -->
+	<div class="flex items-center justify-between">
+		<div>
+			<h1 class="text-3xl font-bold tracking-tight">Facturas</h1>
+			<p class="text-muted-foreground">
+				Gestiona las facturas de importación y exportación
+			</p>
+		</div>
+		<Button onclick={handleCreateClick}>
+			<Plus class="mr-2" size={16} />
+			Nueva Factura
+		</Button>
+	</div>
+
+	<!-- Error Message -->
+	{#if error}
+		<Card.Root class="border-destructive">
+			<Card.Header>
+				<Card.Title class="text-destructive">Error</Card.Title>
+				<Card.Description>{error}</Card.Description>
+			</Card.Header>
+		</Card.Root>
+	{/if}
+
+	<!-- Data Table -->
+	<Card.Root>
+		<Card.Header>
+			<div class="flex items-center justify-between">
+				<div>
+					<Card.Title>Listado de Facturas</Card.Title>
+					<Card.Description>
+						Mostrando {allItems.length} de {totalItems} registros
+						{#if companyStore.activeCompany}
+							- Compañía: {companyStore.activeCompany.name}
+						{/if}
+					</Card.Description>
+				</div>
+				<div class="flex items-center gap-2">
+					<Select.Root type="single" value={selectedType} onValueChange={handleTypeChange}>
+						<Select.Trigger class="w-[180px]">
+							{selectedType === 'all' ? 'Todas' : selectedType === 'imp' ? 'Importación' : 'Exportación'}
+						</Select.Trigger>
+						<Select.Content>
+							<Select.Item value="all">Todas</Select.Item>
+							<Select.Item value="imp">Importación</Select.Item>
+							<Select.Item value="exp">Exportación</Select.Item>
+						</Select.Content>
+					</Select.Root>
+					
+					{#if selectedType !== 'all' && availableInvoiceTypes.length > 0}
+						<Select.Root 
+							type="single" 
+							value={selectedInvoiceType || 'all'} 
+							onValueChange={handleInvoiceTypeChange}
+							disabled={loadingInvoiceTypes}
+						>
+							<Select.Trigger class="w-[250px]">
+								<span class="truncate">
+									{#if loadingInvoiceTypes}
+										Cargando...
+									{:else if selectedInvoiceType}
+										{(() => {
+											const found = availableInvoiceTypes.find(t => t.key === selectedInvoiceType);
+											return found ? `${found.key} - ${found.description}` : selectedInvoiceType;
+										})()}
+									{:else}
+										Todos los tipos
+									{/if}
+								</span>
+							</Select.Trigger>
+							<Select.Content>
+								<Select.Item value="all">Todos los tipos</Select.Item>
+								{#each availableInvoiceTypes as invType}
+									<Select.Item value={invType.key}>
+										<span class="block truncate max-w-[300px]" title={`${invType.key} - ${invType.description}`}>
+											{invType.key} - {invType.description}
+										</span>
+									</Select.Item>
+								{/each}
+							</Select.Content>
+						</Select.Root>
+					{/if}
+					
+					<Button variant="outline" onclick={reloadData}>
+						<RefreshCw class="mr-2" size={16} />
+						Actualizar
+					</Button>
+				</div>
+			</div>
+		</Card.Header>
+		<Card.Content>
+			<DataTable
+				data={allItems}
+				{columns}
+				{loading}
+				{hasMore}
+				{loadMore}
+			/>
+		</Card.Content>
+	</Card.Root>
+</div>
+
+<!-- Diálogos -->
+<CreateEditDialog 
+	bind:open={showCreateDialog} 
+	bind:item={selectedInvoice}
+	defaultOperationType={selectedType !== 'all' ? selectedType as 'imp' | 'exp' : undefined}
+	defaultInvoiceType={selectedInvoiceType || undefined}
+	onSuccess={handleSuccess} 
+/>
+
+<DetailsDialog 
+	bind:open={showDetailsDialog} 
+	invoice={selectedInvoice}
+/>
+
+<DeleteDialog 
+	bind:open={showDeleteDialog} 
+	item={selectedInvoice}
+	onSuccess={handleSuccess}
+/>
diff --git a/frontend/src/routes/dashboard/invoices/importacion/cambio_regimen/+page.server.ts b/frontend/src/routes/dashboard/invoices/importacion/cambio_regimen/+page.server.ts
new file mode 100644
index 00000000..fb3159d9
--- /dev/null
+++ b/frontend/src/routes/dashboard/invoices/importacion/cambio_regimen/+page.server.ts
@@ -0,0 +1,114 @@
+import type { PageServerLoad } from '../../$types';
+import { redirect } from '@sveltejs/kit';
+import { 
+	getAuthTokens, 
+	authenticatedFetch 
+} from '$lib/server/api';
+
+export const load: PageServerLoad = async ({ fetch, cookies, url, parent }) => {
+	// Esperar a que el layout padre valide/refresque el token
+	const parentData = await parent();
+	
+	// Verificar autenticación
+	const { accessToken } = getAuthTokens(cookies);
+	
+	if (!accessToken) {
+		throw redirect(302, '/login');
+	}
+
+	try {
+		// Obtener company_id de múltiples fuentes (en orden de prioridad):
+		// 1. URL query param (permite cambiar vía navegación)
+		// 2. Cookie active_company_id (setted por el team-switcher)
+		// 3. Primera compañía del usuario (fallback)
+		const companyIdParam = url.searchParams.get('company_id');
+		const cookieCompanyId = cookies.get('active_company_id');
+		
+		const companyId = companyIdParam 
+			? parseInt(companyIdParam)
+			: cookieCompanyId
+				? parseInt(cookieCompanyId)
+				: parentData.companies?.[0]?.id;
+		
+		// Si aún no hay companyId, mostrar error
+		if (!companyId) {
+			return {
+				items: [],
+				total: 0,
+				page: 1,
+				page_size: 50,
+				error: 'No se encontró una compañía seleccionada',
+				companies: parentData.companies || []
+			};
+		}
+
+		// Obtener filtro de tipo de operación
+		const operationType = 'imp'
+		const invoiceType = 'CR'
+		
+		// Construir parámetros de consulta
+		const params = new URLSearchParams({
+			company_id: companyId.toString(),
+			page: '1',
+			page_size: '50'
+		});
+
+		// Agregar filtro de tipo si existe y no es 'all'
+		if (operationType && operationType !== 'all') {
+			params.append('operation_type', operationType);
+		}
+		
+		// Agregar filtro de invoice_type si existe
+		if (invoiceType) {
+			params.append('invoice_type', invoiceType);
+		}
+		
+		// Usar authenticatedFetch para manejar automáticamente el refresh de tokens
+		const response = await authenticatedFetch(
+			`v1/a76/invoices?${params.toString()}`,
+			{},
+			cookies,
+			fetch,
+			'/login'
+		);
+
+		if (!response.ok) {
+			return {
+				items: [],
+				total: 0,
+				page: 1,
+				page_size: 50,
+				error: 'Error al cargar facturas',
+				companies: parentData.companies || [],
+				currentCompanyId: companyId,
+				operationType: operationType || 'all',
+				invoiceType: invoiceType || null
+			};
+		}
+
+		const data = await response.json();
+
+		return {
+			items: data.items || [],
+			total: data.total || 0,
+			page: data.page || 1,
+			page_size: data.page_size || 50,
+			companies: parentData.companies || [],
+			currentCompanyId: companyId,
+			operationType: operationType || 'all',
+			invoiceType: invoiceType || null
+		};
+	} catch (error) {
+		console.error('Error loading invoices:', error);
+		return {
+			items: [],
+			total: 0,
+			page: 1,
+			page_size: 50,
+			error: 'Error al cargar facturas',
+			companies: parentData.companies || [],
+			operationType: 'all',
+			invoiceType: null
+		};
+	}
+};
diff --git a/frontend/src/routes/dashboard/invoices/importacion/cambio_regimen/+page.svelte b/frontend/src/routes/dashboard/invoices/importacion/cambio_regimen/+page.svelte
new file mode 100644
index 00000000..c0d0b0cf
--- /dev/null
+++ b/frontend/src/routes/dashboard/invoices/importacion/cambio_regimen/+page.svelte
@@ -0,0 +1,382 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { invoicesApi, type Invoice } from '$lib/api/dashboard/a76/invoices';
+	import { invoiceTypesApi, type InvoiceType } from '$lib/api/dashboard/refrence_data/invoice_types';
+	import DataTable from '$lib/components/dashboard/invoices/data-table.svelte';
+	import { createColumns } from '$lib/components/dashboard/invoices/columns.js';
+	import CreateEditDialog from '$lib/components/dashboard/invoices/create-edit-dialog.svelte';
+	import DetailsDialog from '$lib/components/dashboard/invoices/details-dialog.svelte';
+	import DeleteDialog from '$lib/components/dashboard/invoices/delete-dialog.svelte';
+	import * as Card from '$lib/components/ui/card';
+	import { Button } from '$lib/components/ui/button';
+	import * as Select from '$lib/components/ui/select';
+	import { Plus, RefreshCw } from 'lucide-svelte';
+	import { goto, invalidate } from '$app/navigation';
+	import { browser } from '$app/environment';
+	import { companyStore } from '$lib/stores/company.svelte';
+
+	// Recibir data del servidor
+	interface PageData {
+		items: Invoice[];
+		total: number;
+		page: number;
+		page_size: number;
+		error?: string;
+		companies: any[];
+		currentCompanyId?: number;
+		operationType?: string;
+		invoiceType?: string | null;
+	}
+
+	let { data }: { data: PageData } = $props();
+
+	// Estado para los diálogos
+	let showCreateDialog = $state(false);
+	let showDetailsDialog = $state(false);
+	let showDeleteDialog = $state(false);
+	let selectedInvoice = $state<Invoice | null>(null);
+
+	// Estado para el filtro de tipo (inicializado desde data del servidor)
+	let selectedType = $state<string>(data.operationType || 'all');
+	let selectedInvoiceType = $state<string | null>(data.invoiceType || null);
+	let availableInvoiceTypes = $state<InvoiceType[]>([]);
+	let loadingInvoiceTypes = $state(false);
+
+	// Actualizar URL cuando cambia el filtro
+	function handleTypeChange(value: string) {
+		selectedType = value;
+		const url = new URL(window.location.href);
+		if (value === 'all') {
+			url.searchParams.delete('operation_type');
+			url.searchParams.delete('invoice_type');
+			selectedInvoiceType = null;
+		} else {
+			url.searchParams.set('operation_type', value);
+			// Mantener invoice_type si existe
+			if (selectedInvoiceType) {
+				url.searchParams.set('invoice_type', selectedInvoiceType);
+			}
+		}
+		goto(url.toString(), { keepFocus: true, noScroll: true });
+	}
+
+	// Actualizar URL cuando cambia el filtro de invoice_type
+	function handleInvoiceTypeChange(value: string) {
+		selectedInvoiceType = value === 'all' ? null : value;
+		const url = new URL(window.location.href);
+		if (!selectedInvoiceType) {
+			url.searchParams.delete('invoice_type');
+		} else {
+			url.searchParams.set('invoice_type', selectedInvoiceType);
+		}
+		if (selectedType !== 'all') {
+			url.searchParams.set('operation_type', selectedType);
+		}
+		goto(url.toString(), { keepFocus: true, noScroll: true });
+	}
+
+	// Cargar tipos de factura disponibles según operation_type
+	async function loadInvoiceTypes(operationType: string) {
+		if (operationType === 'all') {
+			availableInvoiceTypes = [];
+			return;
+		}
+
+		loadingInvoiceTypes = true;
+		try {
+			const response = await invoiceTypesApi.list(1, 100, operationType);
+			if (response.data) {
+				availableInvoiceTypes = response.data.items;
+			}
+		} catch (e) {
+			console.error('Error loading invoice types:', e);
+			availableInvoiceTypes = [];
+		} finally {
+			loadingInvoiceTypes = false;
+		}
+	}
+
+	// Efecto para cargar tipos de factura cuando cambia selectedType
+	$effect(() => {
+		loadInvoiceTypes(selectedType);
+	});
+
+	// Sincronizar token de cookies a localStorage al montar el componente
+	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) => {
+				invalidate('app:invoices');
+			};
+
+			// Escuchar eventos de facturas
+			const handleInvoiceView = (event: CustomEvent<Invoice>) => {
+				handleView(event.detail);
+			};
+
+			const handleInvoiceEdit = (event: CustomEvent<Invoice>) => {
+				handleEdit(event.detail);
+			};
+
+			const handleInvoiceDelete = (event: CustomEvent<Invoice>) => {
+				handleDelete(event.detail);
+			};
+
+			window.addEventListener('companyChanged', handleCompanyChange as EventListener);
+			window.addEventListener('invoiceView', handleInvoiceView as EventListener);
+			window.addEventListener('invoiceEdit', handleInvoiceEdit as EventListener);
+			window.addEventListener('invoiceDelete', handleInvoiceDelete as EventListener);
+
+			return () => {
+				window.removeEventListener('companyChanged', handleCompanyChange as EventListener);
+				window.removeEventListener('invoiceView', handleInvoiceView as EventListener);
+				window.removeEventListener('invoiceEdit', handleInvoiceEdit as EventListener);
+				window.removeEventListener('invoiceDelete', handleInvoiceDelete as EventListener);
+			};
+		}
+	});
+
+	// Estado para infinite scroll - inicializar con data del servidor
+	let allItems = $state<Invoice[]>(data.items || []);
+	let currentPage = $state(data.page || 1);
+	let pageSize = $state(data.page_size || 50);
+	let totalItems = $state(data.total || 0);
+	let loading = $state(false);
+	let hasMore = $derived(allItems.length < totalItems);
+	let error = $state<string | null>(data.error || null);
+
+	// Actualizar datos cuando cambia data del servidor
+	$effect(() => {
+		allItems = data.items || [];
+		currentPage = data.page || 1;
+		totalItems = data.total || 0;
+		error = data.error || null;
+		selectedInvoiceType = data.invoiceType || null;
+		selectedType = data.operationType || 'all';
+	});
+
+	async function loadMore() {
+		if (loading || !hasMore || !companyStore.activeCompany) return;
+
+		loading = true;
+		error = null;
+
+		try {
+			const filters: any = {};
+			if (selectedType !== 'all') {
+				filters.operation_type = selectedType;
+			}
+			if (selectedInvoiceType) {
+				filters.invoice_type = selectedInvoiceType;
+			}
+			
+			const response = await invoicesApi.list(
+				companyStore.activeCompany.id,
+				currentPage + 1,
+				pageSize,
+				Object.keys(filters).length > 0 ? filters : undefined
+			);
+
+			if (response.error) {
+				console.error('Error en loadMore:', response.error, 'Status:', response.status);
+				
+				if (response.status === 401 || response.status === 403) {
+					error = 'Sesión expirada. Recargando página...';
+					setTimeout(() => {
+						window.location.reload();
+					}, 2000);
+				} else {
+					error = response.error;
+				}
+				return;
+			}
+
+			if (response.data?.items) {
+				allItems = [...allItems, ...response.data.items];
+				currentPage++;
+				totalItems = response.data.total;
+			}
+		} catch (e) {
+			error = 'Error cargando más datos';
+			console.error('Error loading more:', e);
+		} finally {
+			loading = false;
+		}
+	}
+
+	async function reloadData() {
+		// Invalidar datos para que el servidor recargue
+		await invalidate('app:invoices');
+	}
+
+	function handleCreateClick() {
+		selectedInvoice = null;
+		showCreateDialog = true;
+	}
+
+	function handleView(invoice: Invoice) {
+		selectedInvoice = invoice;
+		showDetailsDialog = true;
+	}
+
+	function handleEdit(invoice: Invoice) {
+		selectedInvoice = invoice;
+		showCreateDialog = true;
+	}
+
+	function handleDelete(invoice: Invoice) {
+		selectedInvoice = invoice;
+		showDeleteDialog = true;
+	}
+
+	function handleSuccess() {
+		reloadData();
+	}
+
+	// Crear columnas
+	const columns = createColumns();
+</script>
+
+<div class="space-y-6">
+	<!-- Header -->
+	<div class="flex items-center justify-between">
+		<div>
+			<h1 class="text-3xl font-bold tracking-tight">Facturas</h1>
+			<p class="text-muted-foreground">
+				Gestiona las facturas de importación y exportación
+			</p>
+		</div>
+		<Button href="/dashboard/invoices/importacion/cambio_regimen/new">
+			<Plus class="mr-2" size={16} />
+			Nueva Factura
+		</Button>
+	</div>
+
+	<!-- Error Message -->
+	{#if error}
+		<Card.Root class="border-destructive">
+			<Card.Header>
+				<Card.Title class="text-destructive">Error</Card.Title>
+				<Card.Description>{error}</Card.Description>
+			</Card.Header>
+		</Card.Root>
+	{/if}
+
+	<!-- Data Table -->
+	<Card.Root>
+		<Card.Header>
+			<div class="flex items-center justify-between">
+				<div>
+					<Card.Title>Listado de Facturas</Card.Title>
+					<Card.Description>
+						Mostrando {allItems.length} de {totalItems} registros
+						{#if companyStore.activeCompany}
+							- Compañía: {companyStore.activeCompany.name}
+						{/if}
+					</Card.Description>
+				</div>
+				<div class="flex items-center gap-2">
+					<Select.Root type="single" value={selectedType} onValueChange={handleTypeChange}>
+						<Select.Trigger class="w-[180px]">
+							{selectedType === 'all' ? 'Todas' : selectedType === 'imp' ? 'Importación' : 'Exportación'}
+						</Select.Trigger>
+						<Select.Content>
+							<Select.Item value="all">Todas</Select.Item>
+							<Select.Item value="imp">Importación</Select.Item>
+							<Select.Item value="exp">Exportación</Select.Item>
+						</Select.Content>
+					</Select.Root>
+					
+					{#if selectedType !== 'all' && availableInvoiceTypes.length > 0}
+						<Select.Root 
+							type="single" 
+							value={selectedInvoiceType || 'all'} 
+							onValueChange={handleInvoiceTypeChange}
+							disabled={loadingInvoiceTypes}
+						>
+							<Select.Trigger class="w-[250px]">
+								<span class="truncate">
+									{#if loadingInvoiceTypes}
+										Cargando...
+									{:else if selectedInvoiceType}
+										{(() => {
+											const found = availableInvoiceTypes.find(t => t.key === selectedInvoiceType);
+											return found ? `${found.key} - ${found.description}` : selectedInvoiceType;
+										})()}
+									{:else}
+										Todos los tipos
+									{/if}
+								</span>
+							</Select.Trigger>
+							<Select.Content>
+								<Select.Item value="all">Todos los tipos</Select.Item>
+								{#each availableInvoiceTypes as invType}
+									<Select.Item value={invType.key}>
+										<span class="block truncate max-w-[300px]" title={`${invType.key} - ${invType.description}`}>
+											{invType.key} - {invType.description}
+										</span>
+									</Select.Item>
+								{/each}
+							</Select.Content>
+						</Select.Root>
+					{/if}
+					
+					<Button variant="outline" onclick={reloadData}>
+						<RefreshCw class="mr-2" size={16} />
+						Actualizar
+					</Button>
+				</div>
+			</div>
+		</Card.Header>
+		<Card.Content>
+			<DataTable
+				data={allItems}
+				{columns}
+				{loading}
+				{hasMore}
+				{loadMore}
+			/>
+		</Card.Content>
+	</Card.Root>
+</div>
+
+<!-- Diálogos -->
+<CreateEditDialog 
+	bind:open={showCreateDialog} 
+	bind:item={selectedInvoice}
+	defaultOperationType={selectedType !== 'all' ? selectedType as 'imp' | 'exp' : undefined}
+	defaultInvoiceType={selectedInvoiceType || undefined}
+	onSuccess={handleSuccess} 
+/>
+
+<DetailsDialog 
+	bind:open={showDetailsDialog} 
+	invoice={selectedInvoice}
+/>
+
+<DeleteDialog 
+	bind:open={showDeleteDialog} 
+	item={selectedInvoice}
+	onSuccess={handleSuccess}
+/>
diff --git a/frontend/src/routes/dashboard/invoices/importacion/cambio_regimen/new/+page.svelte b/frontend/src/routes/dashboard/invoices/importacion/cambio_regimen/new/+page.svelte
new file mode 100644
index 00000000..76f88411
--- /dev/null
+++ b/frontend/src/routes/dashboard/invoices/importacion/cambio_regimen/new/+page.svelte
@@ -0,0 +1,320 @@
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    import { Button } from "$lib/components/ui/button";
+    import { Input } from "$lib/components/ui/input";
+    import { Label } from "$lib/components/ui/label";
+    import * as Select from "$lib/components/ui/select";
+    import * as Tabs from "$lib/components/ui/tabs";
+    import * as Card from "$lib/components/ui/card"; // Usamos Card para enmarcar
+    import { invoicesApi, type CreateInvoiceData } from "$lib/api/dashboard/a76/invoices";
+    import { companyStore } from "$lib/stores/company.svelte";
+    import { LoaderCircle, ArrowLeft, Save } from 'lucide-svelte';
+
+    // DATOS FIJOS PARA ESTA CARPETA (DEFINITIVA)
+    const FIXED_OP_TYPE = "imp";
+    const FIXED_INV_TYPE = "CR";
+
+    // ESTADO DEL FORMULARIO
+    let loading = $state(false);
+    let error = $state<string | null>(null);
+
+    let formData = $state({
+        // Header fields
+        operation_type: FIXED_OP_TYPE as "imp" | "exp",
+        invoice_type: FIXED_INV_TYPE,
+        invoice_number: "",
+        project_number: "",
+        purchase_order: "",
+        related_doc_id: null as number | null,
+        invoice_date: new Date().toISOString().split('T')[0], // Fecha de hoy por defecto
+        traffic_light_status: "",
+        observation_es: "",
+        observation_en: "",
+        comments_status: "",
+        cfdi_uuid: "",
+        path_pdf: "",
+        path_xml: "",
+        // Compliance MX fields
+        pedimento: "",
+        pedimento_code: "",
+        remesa: null as number | null,
+        aduana: "",
+        customs_broker_id: "",
+        provider_id: "",
+        sold_to_id: "",
+        shipped_to_id: "",
+        shipped_by_id: "",
+        is_mixed: false,
+        waste_type: "",
+        appendix_17: null as number | null,
+        edocument: "",
+        // Financials fields
+        currency: "MXN",
+        exchange_rate: null as number | null,
+        value_mn: null as number | null,
+        value_me: null as number | null,
+        customs_value_mn: null as number | null,
+        freight: null as number | null,
+        insurance: null as number | null,
+        iva_mn: null as number | null,
+        iva_factor: null as number | null,
+        total_quantity: null as number | null,
+        gross_weight: null as number | null,
+        net_weight: null as number | null,
+        bundle_count: null as number | null
+    });
+
+    async function handleSubmit(e: Event) {
+        e.preventDefault();
+        
+        if (!companyStore.activeCompany) {
+            error = "No hay compañía seleccionada";
+            return;
+        }
+
+        loading = true;
+        error = null;
+
+        try {
+            // Construimos el Payload
+            const payload: CreateInvoiceData = {
+                ...formData,
+                // Aseguramos que se envíen los fijos
+                operation_type: FIXED_OP_TYPE, 
+                invoice_type: FIXED_INV_TYPE
+            };
+
+            const response = await invoicesApi.create(companyStore.activeCompany.id, payload);
+
+            if (response.error) {
+                if (response.status === 401) {
+                    error = 'Sesión expirada. Recargando...';
+                    setTimeout(() => window.location.reload(), 1500);
+                } else {
+                    error = response.error;
+                }
+                return;
+            }
+
+            // ÉXITO: Volvemos a la lista
+            goto('/dashboard/invoices/importacion/cambio_regimen');
+
+        } catch (e) {
+            error = e instanceof Error ? e.message : "Error al guardar";
+            console.error("Error saving:", e);
+        } finally {
+            loading = false;
+        }
+    }
+</script>
+
+<div class="max-w-5xl mx-auto py-6 px-4 space-y-6">
+    
+    <div class="flex items-center gap-4">
+        <Button variant="outline" size="icon" href="/dashboard/invoices/importacion/cambio_regimen">
+            <ArrowLeft class="h-4 w-4" />
+        </Button>
+        <div>
+            <h1 class="text-2xl font-bold tracking-tight">Nueva Factura Cambio Regimen</h1>
+            <p class="text-muted-foreground">Ingresa los datos para registrar la importación.</p>
+        </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}
+
+    <form onsubmit={handleSubmit} class="space-y-6">
+        <Card.Root>
+            <Card.Content class="p-6">
+                
+                <Tabs.Root value="general" class="w-full">
+                    <Tabs.List class="grid w-full grid-cols-3 mb-6">
+                        <Tabs.Trigger value="general">General</Tabs.Trigger>
+                        <Tabs.Trigger value="compliance">Cumplimiento</Tabs.Trigger>
+                        <Tabs.Trigger value="financials">Financieros</Tabs.Trigger>
+                    </Tabs.List>
+
+                    <Tabs.Content value="general" class="space-y-4">
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            
+                            <div class="space-y-2">
+                                <Label>Tipo de Operación</Label>
+                                <div class="px-3 py-2 bg-muted rounded-md text-sm font-medium">Importación</div>
+                            </div>
+                            
+                            <div class="space-y-2">
+                                <Label>Tipo de Factura</Label>
+                                <div class="px-3 py-2 bg-muted rounded-md text-sm font-medium">CAMBIO REGIMEN (CR)</div>
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="invoice_number">Número de Factura *</Label>
+                                <Input id="invoice_number" bind:value={formData.invoice_number} required placeholder="Número de factura" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="project_number">Número de Proyecto</Label>
+                                <Input id="project_number" bind:value={formData.project_number} placeholder="Número de proyecto" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="purchase_order">Orden de Compra</Label>
+                                <Input id="purchase_order" bind:value={formData.purchase_order} placeholder="Orden de compra" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="invoice_date">Fecha de Factura *</Label>
+                                <Input id="invoice_date" type="date" bind:value={formData.invoice_date} required />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="traffic_light_status">Semáforo</Label>
+                                <Input id="traffic_light_status" bind:value={formData.traffic_light_status} placeholder="Estado del semáforo" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="cfdi_uuid">CFDI UUID</Label>
+                                <Input id="cfdi_uuid" bind:value={formData.cfdi_uuid} placeholder="UUID del CFDI" />
+                            </div>
+                        </div>
+
+                        <div class="grid grid-cols-1 gap-4 pt-4">
+                            <div class="space-y-2">
+                                <Label for="observation_es">Observaciones (Español)</Label>
+                                <Input id="observation_es" bind:value={formData.observation_es} placeholder="Observaciones en español" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="observation_en">Observaciones (Inglés)</Label>
+                                <Input id="observation_en" bind:value={formData.observation_en} placeholder="Observaciones en inglés" />
+                            </div>
+                        </div>
+                    </Tabs.Content>
+
+                    <Tabs.Content value="compliance" class="space-y-4">
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            <div class="space-y-2">
+                                <Label for="pedimento">Pedimento</Label>
+                                <Input id="pedimento" bind:value={formData.pedimento} placeholder="Número de pedimento" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="pedimento_code">Código de Pedimento</Label>
+                                <Input id="pedimento_code" bind:value={formData.pedimento_code} placeholder="R1, K1, etc." />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="remesa">Remesa</Label>
+                                <Input id="remesa" type="number" bind:value={formData.remesa} placeholder="Número de remesa" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="aduana">Aduana</Label>
+                                <Input id="aduana" bind:value={formData.aduana} placeholder="Código de aduana" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="customs_broker_id">Agente Aduanal</Label>
+                                <Input id="customs_broker_id" bind:value={formData.customs_broker_id} placeholder="ID del agente aduanal" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="provider_id">Proveedor</Label>
+                                <Input id="provider_id" bind:value={formData.provider_id} placeholder="ID del proveedor" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="edocument">E-Document</Label>
+                                <Input id="edocument" bind:value={formData.edocument} placeholder="Número de e-document" />
+                            </div>
+
+                            <div class="space-y-2 flex items-center gap-2 pt-8">
+                                <input id="is_mixed" type="checkbox" bind:checked={formData.is_mixed} class="h-4 w-4" />
+                                <Label for="is_mixed" class="!mt-0">Operación Mixta</Label>
+                            </div>
+                        </div>
+                    </Tabs.Content>
+
+                    <Tabs.Content value="financials" class="space-y-4">
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            <div class="space-y-2">
+                                <Label for="currency">Moneda</Label>
+                                <Input id="currency" bind:value={formData.currency} placeholder="MXN, USD, etc." />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="exchange_rate">Tipo de Cambio</Label>
+                                <Input id="exchange_rate" type="number" step="0.000001" bind:value={formData.exchange_rate} placeholder="Tipo de cambio" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="value_mn">Valor MN</Label>
+                                <Input id="value_mn" type="number" step="0.01" bind:value={formData.value_mn} placeholder="Valor MN" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="value_me">Valor ME</Label>
+                                <Input id="value_me" type="number" step="0.01" bind:value={formData.value_me} placeholder="Valor ME" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="customs_value_mn">Valor Aduana MN</Label>
+                                <Input id="customs_value_mn" type="number" step="0.01" bind:value={formData.customs_value_mn} placeholder="Valor Aduana MN" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="freight">Flete</Label>
+                                <Input id="freight" type="number" step="0.01" bind:value={formData.freight} placeholder="Costo Flete" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="insurance">Seguro</Label>
+                                <Input id="insurance" type="number" step="0.01" bind:value={formData.insurance} placeholder="Costo Seguro" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="total_quantity">Cantidad Total</Label>
+                                <Input id="total_quantity" type="number" step="0.01" bind:value={formData.total_quantity} placeholder="Cantidad Total" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="gross_weight">Peso Bruto</Label>
+                                <Input id="gross_weight" type="number" step="0.01" bind:value={formData.gross_weight} placeholder="Peso Bruto" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="net_weight">Peso Neto</Label>
+                                <Input id="net_weight" type="number" step="0.01" bind:value={formData.net_weight} placeholder="Peso Neto" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="bundle_count">Número de Bultos</Label>
+                                <Input id="bundle_count" type="number" bind:value={formData.bundle_count} placeholder="Num. Bultos" />
+                            </div>
+                        </div>
+                    </Tabs.Content>
+
+                </Tabs.Root>
+
+            </Card.Content>
+            
+            <Card.Footer class="flex justify-end gap-4 border-t bg-muted/20 p-6">
+                <Button variant="outline" href="/dashboard/invoices/importacion/cambio_regimen">
+                    Cancelar
+                </Button>
+                <Button type="submit" disabled={loading}>
+                    {#if loading}
+                        <LoaderCircle class="mr-2 h-4 w-4 animate-spin" />
+                        Guardando...
+                    {:else}
+                        <Save class="mr-2 h-4 w-4" />
+                        Guardar Factura
+                    {/if}
+                </Button>
+            </Card.Footer>
+        </Card.Root>
+    </form>
+</div>
\ No newline at end of file
diff --git a/frontend/src/routes/dashboard/invoices/importacion/compras_mexicanas/+page.server.ts b/frontend/src/routes/dashboard/invoices/importacion/compras_mexicanas/+page.server.ts
new file mode 100644
index 00000000..a8794bcf
--- /dev/null
+++ b/frontend/src/routes/dashboard/invoices/importacion/compras_mexicanas/+page.server.ts
@@ -0,0 +1,114 @@
+import type { PageServerLoad } from '../../$types';
+import { redirect } from '@sveltejs/kit';
+import { 
+	getAuthTokens, 
+	authenticatedFetch 
+} from '$lib/server/api';
+
+export const load: PageServerLoad = async ({ fetch, cookies, url, parent }) => {
+	// Esperar a que el layout padre valide/refresque el token
+	const parentData = await parent();
+	
+	// Verificar autenticación
+	const { accessToken } = getAuthTokens(cookies);
+	
+	if (!accessToken) {
+		throw redirect(302, '/login');
+	}
+
+	try {
+		// Obtener company_id de múltiples fuentes (en orden de prioridad):
+		// 1. URL query param (permite cambiar vía navegación)
+		// 2. Cookie active_company_id (setted por el team-switcher)
+		// 3. Primera compañía del usuario (fallback)
+		const companyIdParam = url.searchParams.get('company_id');
+		const cookieCompanyId = cookies.get('active_company_id');
+		
+		const companyId = companyIdParam 
+			? parseInt(companyIdParam)
+			: cookieCompanyId
+				? parseInt(cookieCompanyId)
+				: parentData.companies?.[0]?.id;
+		
+		// Si aún no hay companyId, mostrar error
+		if (!companyId) {
+			return {
+				items: [],
+				total: 0,
+				page: 1,
+				page_size: 50,
+				error: 'No se encontró una compañía seleccionada',
+				companies: parentData.companies || []
+			};
+		}
+
+		// Obtener filtro de tipo de operación
+		const operationType = 'imp'
+		const invoiceType = 'MEX'
+		
+		// Construir parámetros de consulta
+		const params = new URLSearchParams({
+			company_id: companyId.toString(),
+			page: '1',
+			page_size: '50'
+		});
+
+		// Agregar filtro de tipo si existe y no es 'all'
+		if (operationType && operationType !== 'all') {
+			params.append('operation_type', operationType);
+		}
+		
+		// Agregar filtro de invoice_type si existe
+		if (invoiceType) {
+			params.append('invoice_type', invoiceType);
+		}
+		
+		// Usar authenticatedFetch para manejar automáticamente el refresh de tokens
+		const response = await authenticatedFetch(
+			`v1/a76/invoices?${params.toString()}`,
+			{},
+			cookies,
+			fetch,
+			'/login'
+		);
+
+		if (!response.ok) {
+			return {
+				items: [],
+				total: 0,
+				page: 1,
+				page_size: 50,
+				error: 'Error al cargar facturas',
+				companies: parentData.companies || [],
+				currentCompanyId: companyId,
+				operationType: operationType || 'all',
+				invoiceType: invoiceType || null
+			};
+		}
+
+		const data = await response.json();
+
+		return {
+			items: data.items || [],
+			total: data.total || 0,
+			page: data.page || 1,
+			page_size: data.page_size || 50,
+			companies: parentData.companies || [],
+			currentCompanyId: companyId,
+			operationType: operationType || 'all',
+			invoiceType: invoiceType || null
+		};
+	} catch (error) {
+		console.error('Error loading invoices:', error);
+		return {
+			items: [],
+			total: 0,
+			page: 1,
+			page_size: 50,
+			error: 'Error al cargar facturas',
+			companies: parentData.companies || [],
+			operationType: 'all',
+			invoiceType: null
+		};
+	}
+};
diff --git a/frontend/src/routes/dashboard/invoices/importacion/compras_mexicanas/+page.svelte b/frontend/src/routes/dashboard/invoices/importacion/compras_mexicanas/+page.svelte
new file mode 100644
index 00000000..87cdb207
--- /dev/null
+++ b/frontend/src/routes/dashboard/invoices/importacion/compras_mexicanas/+page.svelte
@@ -0,0 +1,382 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { invoicesApi, type Invoice } from '$lib/api/dashboard/a76/invoices';
+	import { invoiceTypesApi, type InvoiceType } from '$lib/api/dashboard/refrence_data/invoice_types';
+	import DataTable from '$lib/components/dashboard/invoices/data-table.svelte';
+	import { createColumns } from '$lib/components/dashboard/invoices/columns.js';
+	import CreateEditDialog from '$lib/components/dashboard/invoices/create-edit-dialog.svelte';
+	import DetailsDialog from '$lib/components/dashboard/invoices/details-dialog.svelte';
+	import DeleteDialog from '$lib/components/dashboard/invoices/delete-dialog.svelte';
+	import * as Card from '$lib/components/ui/card';
+	import { Button } from '$lib/components/ui/button';
+	import * as Select from '$lib/components/ui/select';
+	import { Plus, RefreshCw } from 'lucide-svelte';
+	import { goto, invalidate } from '$app/navigation';
+	import { browser } from '$app/environment';
+	import { companyStore } from '$lib/stores/company.svelte';
+
+	// Recibir data del servidor
+	interface PageData {
+		items: Invoice[];
+		total: number;
+		page: number;
+		page_size: number;
+		error?: string;
+		companies: any[];
+		currentCompanyId?: number;
+		operationType?: string;
+		invoiceType?: string | null;
+	}
+
+	let { data }: { data: PageData } = $props();
+
+	// Estado para los diálogos
+	let showCreateDialog = $state(false);
+	let showDetailsDialog = $state(false);
+	let showDeleteDialog = $state(false);
+	let selectedInvoice = $state<Invoice | null>(null);
+
+	// Estado para el filtro de tipo (inicializado desde data del servidor)
+	let selectedType = $state<string>(data.operationType || 'all');
+	let selectedInvoiceType = $state<string | null>(data.invoiceType || null);
+	let availableInvoiceTypes = $state<InvoiceType[]>([]);
+	let loadingInvoiceTypes = $state(false);
+
+	// Actualizar URL cuando cambia el filtro
+	function handleTypeChange(value: string) {
+		selectedType = value;
+		const url = new URL(window.location.href);
+		if (value === 'all') {
+			url.searchParams.delete('operation_type');
+			url.searchParams.delete('invoice_type');
+			selectedInvoiceType = null;
+		} else {
+			url.searchParams.set('operation_type', value);
+			// Mantener invoice_type si existe
+			if (selectedInvoiceType) {
+				url.searchParams.set('invoice_type', selectedInvoiceType);
+			}
+		}
+		goto(url.toString(), { keepFocus: true, noScroll: true });
+	}
+
+	// Actualizar URL cuando cambia el filtro de invoice_type
+	function handleInvoiceTypeChange(value: string) {
+		selectedInvoiceType = value === 'all' ? null : value;
+		const url = new URL(window.location.href);
+		if (!selectedInvoiceType) {
+			url.searchParams.delete('invoice_type');
+		} else {
+			url.searchParams.set('invoice_type', selectedInvoiceType);
+		}
+		if (selectedType !== 'all') {
+			url.searchParams.set('operation_type', selectedType);
+		}
+		goto(url.toString(), { keepFocus: true, noScroll: true });
+	}
+
+	// Cargar tipos de factura disponibles según operation_type
+	async function loadInvoiceTypes(operationType: string) {
+		if (operationType === 'all') {
+			availableInvoiceTypes = [];
+			return;
+		}
+
+		loadingInvoiceTypes = true;
+		try {
+			const response = await invoiceTypesApi.list(1, 100, operationType);
+			if (response.data) {
+				availableInvoiceTypes = response.data.items;
+			}
+		} catch (e) {
+			console.error('Error loading invoice types:', e);
+			availableInvoiceTypes = [];
+		} finally {
+			loadingInvoiceTypes = false;
+		}
+	}
+
+	// Efecto para cargar tipos de factura cuando cambia selectedType
+	$effect(() => {
+		loadInvoiceTypes(selectedType);
+	});
+
+	// Sincronizar token de cookies a localStorage al montar el componente
+	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) => {
+				invalidate('app:invoices');
+			};
+
+			// Escuchar eventos de facturas
+			const handleInvoiceView = (event: CustomEvent<Invoice>) => {
+				handleView(event.detail);
+			};
+
+			const handleInvoiceEdit = (event: CustomEvent<Invoice>) => {
+				handleEdit(event.detail);
+			};
+
+			const handleInvoiceDelete = (event: CustomEvent<Invoice>) => {
+				handleDelete(event.detail);
+			};
+
+			window.addEventListener('companyChanged', handleCompanyChange as EventListener);
+			window.addEventListener('invoiceView', handleInvoiceView as EventListener);
+			window.addEventListener('invoiceEdit', handleInvoiceEdit as EventListener);
+			window.addEventListener('invoiceDelete', handleInvoiceDelete as EventListener);
+
+			return () => {
+				window.removeEventListener('companyChanged', handleCompanyChange as EventListener);
+				window.removeEventListener('invoiceView', handleInvoiceView as EventListener);
+				window.removeEventListener('invoiceEdit', handleInvoiceEdit as EventListener);
+				window.removeEventListener('invoiceDelete', handleInvoiceDelete as EventListener);
+			};
+		}
+	});
+
+	// Estado para infinite scroll - inicializar con data del servidor
+	let allItems = $state<Invoice[]>(data.items || []);
+	let currentPage = $state(data.page || 1);
+	let pageSize = $state(data.page_size || 50);
+	let totalItems = $state(data.total || 0);
+	let loading = $state(false);
+	let hasMore = $derived(allItems.length < totalItems);
+	let error = $state<string | null>(data.error || null);
+
+	// Actualizar datos cuando cambia data del servidor
+	$effect(() => {
+		allItems = data.items || [];
+		currentPage = data.page || 1;
+		totalItems = data.total || 0;
+		error = data.error || null;
+		selectedInvoiceType = data.invoiceType || null;
+		selectedType = data.operationType || 'all';
+	});
+
+	async function loadMore() {
+		if (loading || !hasMore || !companyStore.activeCompany) return;
+
+		loading = true;
+		error = null;
+
+		try {
+			const filters: any = {};
+			if (selectedType !== 'all') {
+				filters.operation_type = selectedType;
+			}
+			if (selectedInvoiceType) {
+				filters.invoice_type = selectedInvoiceType;
+			}
+			
+			const response = await invoicesApi.list(
+				companyStore.activeCompany.id,
+				currentPage + 1,
+				pageSize,
+				Object.keys(filters).length > 0 ? filters : undefined
+			);
+
+			if (response.error) {
+				console.error('Error en loadMore:', response.error, 'Status:', response.status);
+				
+				if (response.status === 401 || response.status === 403) {
+					error = 'Sesión expirada. Recargando página...';
+					setTimeout(() => {
+						window.location.reload();
+					}, 2000);
+				} else {
+					error = response.error;
+				}
+				return;
+			}
+
+			if (response.data?.items) {
+				allItems = [...allItems, ...response.data.items];
+				currentPage++;
+				totalItems = response.data.total;
+			}
+		} catch (e) {
+			error = 'Error cargando más datos';
+			console.error('Error loading more:', e);
+		} finally {
+			loading = false;
+		}
+	}
+
+	async function reloadData() {
+		// Invalidar datos para que el servidor recargue
+		await invalidate('app:invoices');
+	}
+
+	function handleCreateClick() {
+		selectedInvoice = null;
+		showCreateDialog = true;
+	}
+
+	function handleView(invoice: Invoice) {
+		selectedInvoice = invoice;
+		showDetailsDialog = true;
+	}
+
+	function handleEdit(invoice: Invoice) {
+		selectedInvoice = invoice;
+		showCreateDialog = true;
+	}
+
+	function handleDelete(invoice: Invoice) {
+		selectedInvoice = invoice;
+		showDeleteDialog = true;
+	}
+
+	function handleSuccess() {
+		reloadData();
+	}
+
+	// Crear columnas
+	const columns = createColumns();
+</script>
+
+<div class="space-y-6">
+	<!-- Header -->
+	<div class="flex items-center justify-between">
+		<div>
+			<h1 class="text-3xl font-bold tracking-tight">Facturas</h1>
+			<p class="text-muted-foreground">
+				Gestiona las facturas de importación y exportación
+			</p>
+		</div>
+		<Button href="/dashboard/invoices/importacion/compras_mexicanas/new">
+			<Plus class="mr-2" size={16} />
+			Nueva Factura
+		</Button>
+	</div>
+
+	<!-- Error Message -->
+	{#if error}
+		<Card.Root class="border-destructive">
+			<Card.Header>
+				<Card.Title class="text-destructive">Error</Card.Title>
+				<Card.Description>{error}</Card.Description>
+			</Card.Header>
+		</Card.Root>
+	{/if}
+
+	<!-- Data Table -->
+	<Card.Root>
+		<Card.Header>
+			<div class="flex items-center justify-between">
+				<div>
+					<Card.Title>Listado de Facturas</Card.Title>
+					<Card.Description>
+						Mostrando {allItems.length} de {totalItems} registros
+						{#if companyStore.activeCompany}
+							- Compañía: {companyStore.activeCompany.name}
+						{/if}
+					</Card.Description>
+				</div>
+				<div class="flex items-center gap-2">
+					<Select.Root type="single" value={selectedType} onValueChange={handleTypeChange}>
+						<Select.Trigger class="w-[180px]">
+							{selectedType === 'all' ? 'Todas' : selectedType === 'imp' ? 'Importación' : 'Exportación'}
+						</Select.Trigger>
+						<Select.Content>
+							<Select.Item value="all">Todas</Select.Item>
+							<Select.Item value="imp">Importación</Select.Item>
+							<Select.Item value="exp">Exportación</Select.Item>
+						</Select.Content>
+					</Select.Root>
+					
+					{#if selectedType !== 'all' && availableInvoiceTypes.length > 0}
+						<Select.Root 
+							type="single" 
+							value={selectedInvoiceType || 'all'} 
+							onValueChange={handleInvoiceTypeChange}
+							disabled={loadingInvoiceTypes}
+						>
+							<Select.Trigger class="w-[250px]">
+								<span class="truncate">
+									{#if loadingInvoiceTypes}
+										Cargando...
+									{:else if selectedInvoiceType}
+										{(() => {
+											const found = availableInvoiceTypes.find(t => t.key === selectedInvoiceType);
+											return found ? `${found.key} - ${found.description}` : selectedInvoiceType;
+										})()}
+									{:else}
+										Todos los tipos
+									{/if}
+								</span>
+							</Select.Trigger>
+							<Select.Content>
+								<Select.Item value="all">Todos los tipos</Select.Item>
+								{#each availableInvoiceTypes as invType}
+									<Select.Item value={invType.key}>
+										<span class="block truncate max-w-[300px]" title={`${invType.key} - ${invType.description}`}>
+											{invType.key} - {invType.description}
+										</span>
+									</Select.Item>
+								{/each}
+							</Select.Content>
+						</Select.Root>
+					{/if}
+					
+					<Button variant="outline" onclick={reloadData}>
+						<RefreshCw class="mr-2" size={16} />
+						Actualizar
+					</Button>
+				</div>
+			</div>
+		</Card.Header>
+		<Card.Content>
+			<DataTable
+				data={allItems}
+				{columns}
+				{loading}
+				{hasMore}
+				{loadMore}
+			/>
+		</Card.Content>
+	</Card.Root>
+</div>
+
+<!-- Diálogos -->
+<CreateEditDialog 
+	bind:open={showCreateDialog} 
+	bind:item={selectedInvoice}
+	defaultOperationType={selectedType !== 'all' ? selectedType as 'imp' | 'exp' : undefined}
+	defaultInvoiceType={selectedInvoiceType || undefined}
+	onSuccess={handleSuccess} 
+/>
+
+<DetailsDialog 
+	bind:open={showDetailsDialog} 
+	invoice={selectedInvoice}
+/>
+
+<DeleteDialog 
+	bind:open={showDeleteDialog} 
+	item={selectedInvoice}
+	onSuccess={handleSuccess}
+/>
diff --git a/frontend/src/routes/dashboard/invoices/importacion/compras_mexicanas/new/+page.svelte b/frontend/src/routes/dashboard/invoices/importacion/compras_mexicanas/new/+page.svelte
new file mode 100644
index 00000000..488312d0
--- /dev/null
+++ b/frontend/src/routes/dashboard/invoices/importacion/compras_mexicanas/new/+page.svelte
@@ -0,0 +1,320 @@
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    import { Button } from "$lib/components/ui/button";
+    import { Input } from "$lib/components/ui/input";
+    import { Label } from "$lib/components/ui/label";
+    import * as Select from "$lib/components/ui/select";
+    import * as Tabs from "$lib/components/ui/tabs";
+    import * as Card from "$lib/components/ui/card"; // Usamos Card para enmarcar
+    import { invoicesApi, type CreateInvoiceData } from "$lib/api/dashboard/a76/invoices";
+    import { companyStore } from "$lib/stores/company.svelte";
+    import { LoaderCircle, ArrowLeft, Save } from 'lucide-svelte';
+
+    // DATOS FIJOS PARA ESTA CARPETA (COMPRAS MEXICANAS)
+    const FIXED_OP_TYPE = "imp";
+    const FIXED_INV_TYPE = "MEX";
+
+    // ESTADO DEL FORMULARIO
+    let loading = $state(false);
+    let error = $state<string | null>(null);
+
+    let formData = $state({
+        // Header fields
+        operation_type: FIXED_OP_TYPE as "imp" | "exp",
+        invoice_type: FIXED_INV_TYPE,
+        invoice_number: "",
+        project_number: "",
+        purchase_order: "",
+        related_doc_id: null as number | null,
+        invoice_date: new Date().toISOString().split('T')[0], // Fecha de hoy por defecto
+        traffic_light_status: "",
+        observation_es: "",
+        observation_en: "",
+        comments_status: "",
+        cfdi_uuid: "",
+        path_pdf: "",
+        path_xml: "",
+        // Compliance MX fields
+        pedimento: "",
+        pedimento_code: "",
+        remesa: null as number | null,
+        aduana: "",
+        customs_broker_id: "",
+        provider_id: "",
+        sold_to_id: "",
+        shipped_to_id: "",
+        shipped_by_id: "",
+        is_mixed: false,
+        waste_type: "",
+        appendix_17: null as number | null,
+        edocument: "",
+        // Financials fields
+        currency: "MXN",
+        exchange_rate: null as number | null,
+        value_mn: null as number | null,
+        value_me: null as number | null,
+        customs_value_mn: null as number | null,
+        freight: null as number | null,
+        insurance: null as number | null,
+        iva_mn: null as number | null,
+        iva_factor: null as number | null,
+        total_quantity: null as number | null,
+        gross_weight: null as number | null,
+        net_weight: null as number | null,
+        bundle_count: null as number | null
+    });
+
+    async function handleSubmit(e: Event) {
+        e.preventDefault();
+        
+        if (!companyStore.activeCompany) {
+            error = "No hay compañía seleccionada";
+            return;
+        }
+
+        loading = true;
+        error = null;
+
+        try {
+            // Construimos el Payload
+            const payload: CreateInvoiceData = {
+                ...formData,
+                // Aseguramos que se envíen los fijos
+                operation_type: FIXED_OP_TYPE, 
+                invoice_type: FIXED_INV_TYPE
+            };
+
+            const response = await invoicesApi.create(companyStore.activeCompany.id, payload);
+
+            if (response.error) {
+                if (response.status === 401) {
+                    error = 'Sesión expirada. Recargando...';
+                    setTimeout(() => window.location.reload(), 1500);
+                } else {
+                    error = response.error;
+                }
+                return;
+            }
+
+            // ÉXITO: Volvemos a la lista
+            goto('/dashboard/invoices/importacion/compras_mexicanas');
+
+        } catch (e) {
+            error = e instanceof Error ? e.message : "Error al guardar";
+            console.error("Error saving:", e);
+        } finally {
+            loading = false;
+        }
+    }
+</script>
+
+<div class="max-w-5xl mx-auto py-6 px-4 space-y-6">
+    
+    <div class="flex items-center gap-4">
+        <Button variant="outline" size="icon" href="/dashboard/invoices/importacion/compras_mexicanas">
+            <ArrowLeft class="h-4 w-4" />
+        </Button>
+        <div>
+            <h1 class="text-2xl font-bold tracking-tight">Nueva Factura</h1>
+            <p class="text-muted-foreground">Ingresa los datos para registrar la importación.</p>
+        </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}
+
+    <form onsubmit={handleSubmit} class="space-y-6">
+        <Card.Root>
+            <Card.Content class="p-6">
+                
+                <Tabs.Root value="general" class="w-full">
+                    <Tabs.List class="grid w-full grid-cols-3 mb-6">
+                        <Tabs.Trigger value="general">General</Tabs.Trigger>
+                        <Tabs.Trigger value="compliance">Cumplimiento</Tabs.Trigger>
+                        <Tabs.Trigger value="financials">Financieros</Tabs.Trigger>
+                    </Tabs.List>
+
+                    <Tabs.Content value="general" class="space-y-4">
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            
+                            <div class="space-y-2">
+                                <Label>Tipo de Operación</Label>
+                                <div class="px-3 py-2 bg-muted rounded-md text-sm font-medium">Importación</div>
+                            </div>
+                            
+                            <div class="space-y-2">
+                                <Label>Tipo de Factura</Label>
+                                <div class="px-3 py-2 bg-muted rounded-md text-sm font-medium">COMPRAS MEXICANAS (MEX)</div>
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="invoice_number">Número de Factura *</Label>
+                                <Input id="invoice_number" bind:value={formData.invoice_number} required placeholder="Número de factura" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="project_number">Número de Proyecto</Label>
+                                <Input id="project_number" bind:value={formData.project_number} placeholder="Número de proyecto" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="purchase_order">Orden de Compra</Label>
+                                <Input id="purchase_order" bind:value={formData.purchase_order} placeholder="Orden de compra" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="invoice_date">Fecha de Factura *</Label>
+                                <Input id="invoice_date" type="date" bind:value={formData.invoice_date} required />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="traffic_light_status">Semáforo</Label>
+                                <Input id="traffic_light_status" bind:value={formData.traffic_light_status} placeholder="Estado del semáforo" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="cfdi_uuid">CFDI UUID</Label>
+                                <Input id="cfdi_uuid" bind:value={formData.cfdi_uuid} placeholder="UUID del CFDI" />
+                            </div>
+                        </div>
+
+                        <div class="grid grid-cols-1 gap-4 pt-4">
+                            <div class="space-y-2">
+                                <Label for="observation_es">Observaciones (Español)</Label>
+                                <Input id="observation_es" bind:value={formData.observation_es} placeholder="Observaciones en español" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="observation_en">Observaciones (Inglés)</Label>
+                                <Input id="observation_en" bind:value={formData.observation_en} placeholder="Observaciones en inglés" />
+                            </div>
+                        </div>
+                    </Tabs.Content>
+
+                    <Tabs.Content value="compliance" class="space-y-4">
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            <div class="space-y-2">
+                                <Label for="pedimento">Pedimento</Label>
+                                <Input id="pedimento" bind:value={formData.pedimento} placeholder="Número de pedimento" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="pedimento_code">Código de Pedimento</Label>
+                                <Input id="pedimento_code" bind:value={formData.pedimento_code} placeholder="R1, K1, etc." />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="remesa">Remesa</Label>
+                                <Input id="remesa" type="number" bind:value={formData.remesa} placeholder="Número de remesa" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="aduana">Aduana</Label>
+                                <Input id="aduana" bind:value={formData.aduana} placeholder="Código de aduana" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="customs_broker_id">Agente Aduanal</Label>
+                                <Input id="customs_broker_id" bind:value={formData.customs_broker_id} placeholder="ID del agente aduanal" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="provider_id">Proveedor</Label>
+                                <Input id="provider_id" bind:value={formData.provider_id} placeholder="ID del proveedor" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="edocument">E-Document</Label>
+                                <Input id="edocument" bind:value={formData.edocument} placeholder="Número de e-document" />
+                            </div>
+
+                            <div class="space-y-2 flex items-center gap-2 pt-8">
+                                <input id="is_mixed" type="checkbox" bind:checked={formData.is_mixed} class="h-4 w-4" />
+                                <Label for="is_mixed" class="!mt-0">Operación Mixta</Label>
+                            </div>
+                        </div>
+                    </Tabs.Content>
+
+                    <Tabs.Content value="financials" class="space-y-4">
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            <div class="space-y-2">
+                                <Label for="currency">Moneda</Label>
+                                <Input id="currency" bind:value={formData.currency} placeholder="MXN, USD, etc." />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="exchange_rate">Tipo de Cambio</Label>
+                                <Input id="exchange_rate" type="number" step="0.000001" bind:value={formData.exchange_rate} placeholder="Tipo de cambio" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="value_mn">Valor MN</Label>
+                                <Input id="value_mn" type="number" step="0.01" bind:value={formData.value_mn} placeholder="Valor MN" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="value_me">Valor ME</Label>
+                                <Input id="value_me" type="number" step="0.01" bind:value={formData.value_me} placeholder="Valor ME" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="customs_value_mn">Valor Aduana MN</Label>
+                                <Input id="customs_value_mn" type="number" step="0.01" bind:value={formData.customs_value_mn} placeholder="Valor Aduana MN" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="freight">Flete</Label>
+                                <Input id="freight" type="number" step="0.01" bind:value={formData.freight} placeholder="Costo Flete" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="insurance">Seguro</Label>
+                                <Input id="insurance" type="number" step="0.01" bind:value={formData.insurance} placeholder="Costo Seguro" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="total_quantity">Cantidad Total</Label>
+                                <Input id="total_quantity" type="number" step="0.01" bind:value={formData.total_quantity} placeholder="Cantidad Total" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="gross_weight">Peso Bruto</Label>
+                                <Input id="gross_weight" type="number" step="0.01" bind:value={formData.gross_weight} placeholder="Peso Bruto" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="net_weight">Peso Neto</Label>
+                                <Input id="net_weight" type="number" step="0.01" bind:value={formData.net_weight} placeholder="Peso Neto" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="bundle_count">Número de Bultos</Label>
+                                <Input id="bundle_count" type="number" bind:value={formData.bundle_count} placeholder="Num. Bultos" />
+                            </div>
+                        </div>
+                    </Tabs.Content>
+
+                </Tabs.Root>
+
+            </Card.Content>
+            
+            <Card.Footer class="flex justify-end gap-4 border-t bg-muted/20 p-6">
+                <Button variant="outline" href="/dashboard/invoices/importacion/campra_mexicanas">
+                    Cancelar
+                </Button>
+                <Button type="submit" disabled={loading}>
+                    {#if loading}
+                        <LoaderCircle class="mr-2 h-4 w-4 animate-spin" />
+                        Guardando...
+                    {:else}
+                        <Save class="mr-2 h-4 w-4" />
+                        Guardar Factura
+                    {/if}
+                </Button>
+            </Card.Footer>
+        </Card.Root>
+    </form>
+</div>
\ No newline at end of file
diff --git a/frontend/src/routes/dashboard/invoices/importacion/definitiva/+page.server.ts b/frontend/src/routes/dashboard/invoices/importacion/definitiva/+page.server.ts
new file mode 100644
index 00000000..d00d94fe
--- /dev/null
+++ b/frontend/src/routes/dashboard/invoices/importacion/definitiva/+page.server.ts
@@ -0,0 +1,114 @@
+import type { PageServerLoad } from '../../$types';
+import { redirect } from '@sveltejs/kit';
+import { 
+	getAuthTokens, 
+	authenticatedFetch 
+} from '$lib/server/api';
+
+export const load: PageServerLoad = async ({ fetch, cookies, url, parent }) => {
+	// Esperar a que el layout padre valide/refresque el token
+	const parentData = await parent();
+	
+	// Verificar autenticación
+	const { accessToken } = getAuthTokens(cookies);
+	
+	if (!accessToken) {
+		throw redirect(302, '/login');
+	}
+
+	try {
+		// Obtener company_id de múltiples fuentes (en orden de prioridad):
+		// 1. URL query param (permite cambiar vía navegación)
+		// 2. Cookie active_company_id (setted por el team-switcher)
+		// 3. Primera compañía del usuario (fallback)
+		const companyIdParam = url.searchParams.get('company_id');
+		const cookieCompanyId = cookies.get('active_company_id');
+		
+		const companyId = companyIdParam 
+			? parseInt(companyIdParam)
+			: cookieCompanyId
+				? parseInt(cookieCompanyId)
+				: parentData.companies?.[0]?.id;
+		
+		// Si aún no hay companyId, mostrar error
+		if (!companyId) {
+			return {
+				items: [],
+				total: 0,
+				page: 1,
+				page_size: 50,
+				error: 'No se encontró una compañía seleccionada',
+				companies: parentData.companies || []
+			};
+		}
+
+		// Obtener filtro de tipo de operación
+		const operationType = 'imp'
+		const invoiceType = 'DEF'
+		
+		// Construir parámetros de consulta
+		const params = new URLSearchParams({
+			company_id: companyId.toString(),
+			page: '1',
+			page_size: '50'
+		});
+
+		// Agregar filtro de tipo si existe y no es 'all'
+		if (operationType && operationType !== 'all') {
+			params.append('operation_type', operationType);
+		}
+		
+		// Agregar filtro de invoice_type si existe
+		if (invoiceType) {
+			params.append('invoice_type', invoiceType);
+		}
+		
+		// Usar authenticatedFetch para manejar automáticamente el refresh de tokens
+		const response = await authenticatedFetch(
+			`v1/a76/invoices?${params.toString()}`,
+			{},
+			cookies,
+			fetch,
+			'/login'
+		);
+
+		if (!response.ok) {
+			return {
+				items: [],
+				total: 0,
+				page: 1,
+				page_size: 50,
+				error: 'Error al cargar facturas',
+				companies: parentData.companies || [],
+				currentCompanyId: companyId,
+				operationType: operationType || 'all',
+				invoiceType: invoiceType || null
+			};
+		}
+
+		const data = await response.json();
+
+		return {
+			items: data.items || [],
+			total: data.total || 0,
+			page: data.page || 1,
+			page_size: data.page_size || 50,
+			companies: parentData.companies || [],
+			currentCompanyId: companyId,
+			operationType: operationType || 'all',
+			invoiceType: invoiceType || null
+		};
+	} catch (error) {
+		console.error('Error loading invoices:', error);
+		return {
+			items: [],
+			total: 0,
+			page: 1,
+			page_size: 50,
+			error: 'Error al cargar facturas',
+			companies: parentData.companies || [],
+			operationType: 'all',
+			invoiceType: null
+		};
+	}
+};
diff --git a/frontend/src/routes/dashboard/invoices/importacion/definitiva/+page.svelte b/frontend/src/routes/dashboard/invoices/importacion/definitiva/+page.svelte
new file mode 100644
index 00000000..17f52848
--- /dev/null
+++ b/frontend/src/routes/dashboard/invoices/importacion/definitiva/+page.svelte
@@ -0,0 +1,390 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { invoicesApi, type Invoice } from '$lib/api/dashboard/a76/invoices';
+	import { invoiceTypesApi, type InvoiceType } from '$lib/api/dashboard/refrence_data/invoice_types';
+	import DataTable from '$lib/components/dashboard/invoices/data-table.svelte';
+	import { createColumns } from '$lib/components/dashboard/invoices/columns.js';
+	import CreateEditDialog from '$lib/components/dashboard/invoices/create-edit-dialog.svelte';
+	import DetailsDialog from '$lib/components/dashboard/invoices/details-dialog.svelte';
+	import DeleteDialog from '$lib/components/dashboard/invoices/delete-dialog.svelte';
+	import * as Card from '$lib/components/ui/card';
+	import { Button } from '$lib/components/ui/button';
+	import * as Select from '$lib/components/ui/select';
+	import { Plus, RefreshCw } from 'lucide-svelte';
+	import { goto, invalidate } from '$app/navigation';
+	import { browser } from '$app/environment';
+	import { companyStore } from '$lib/stores/company.svelte';
+
+	// Recibir data del servidor
+	interface PageData {
+		items: Invoice[];
+		total: number;
+		page: number;
+		page_size: number;
+		error?: string;
+		companies: any[];
+		currentCompanyId?: number;
+		operationType?: string;
+		invoiceType?: string | null;
+	}
+
+	let { data }: { data: PageData } = $props();
+
+	// Estado para los diálogos
+	let showCreateDialog = $state(false);
+	let showDetailsDialog = $state(false);
+	let showDeleteDialog = $state(false);
+	let selectedInvoice = $state<Invoice | null>(null);
+
+	// Estado para el filtro de tipo (inicializado desde data del servidor)
+	let selectedType = $state<string>(data.operationType || 'all');
+	let selectedInvoiceType = $state<string | null>(data.invoiceType || null);
+	let availableInvoiceTypes = $state<InvoiceType[]>([]);
+	let loadingInvoiceTypes = $state(false);
+
+	// Actualizar URL cuando cambia el filtro
+	function handleTypeChange(value: string) {
+		selectedType = value;
+		const url = new URL(window.location.href);
+		if (value === 'all') {
+			url.searchParams.delete('operation_type');
+			url.searchParams.delete('invoice_type');
+			selectedInvoiceType = null;
+		} else {
+			url.searchParams.set('operation_type', value);
+			// Mantener invoice_type si existe
+			if (selectedInvoiceType) {
+				url.searchParams.set('invoice_type', selectedInvoiceType);
+			}
+		}
+		goto(url.toString(), { keepFocus: true, noScroll: true });
+	}
+
+	// Actualizar URL cuando cambia el filtro de invoice_type
+	function handleInvoiceTypeChange(value: string) {
+		selectedInvoiceType = value === 'all' ? null : value;
+		const url = new URL(window.location.href);
+		if (!selectedInvoiceType) {
+			url.searchParams.delete('invoice_type');
+		} else {
+			url.searchParams.set('invoice_type', selectedInvoiceType);
+		}
+		if (selectedType !== 'all') {
+			url.searchParams.set('operation_type', selectedType);
+		}
+		goto(url.toString(), { keepFocus: true, noScroll: true });
+	}
+
+	// Cargar tipos de factura disponibles según operation_type
+	async function loadInvoiceTypes(operationType: string) {
+		if (operationType === 'all') {
+			availableInvoiceTypes = [];
+			return;
+		}
+
+		loadingInvoiceTypes = true;
+		try {
+			const response = await invoiceTypesApi.list(1, 100, operationType);
+			if (response.data) {
+				availableInvoiceTypes = response.data.items;
+			}
+		} catch (e) {
+			console.error('Error loading invoice types:', e);
+			availableInvoiceTypes = [];
+		} finally {
+			loadingInvoiceTypes = false;
+		}
+	}
+
+	// Efecto para cargar tipos de factura cuando cambia selectedType
+	$effect(() => {
+		loadInvoiceTypes(selectedType);
+	});
+
+	// Sincronizar token de cookies a localStorage al montar el componente
+	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) => {
+				invalidate('app:invoices');
+			};
+
+			// Escuchar eventos de facturas
+			const handleInvoiceView = (event: CustomEvent<Invoice>) => {
+				handleView(event.detail);
+			};
+
+			const handleInvoiceEdit = (event: CustomEvent<Invoice>) => {
+        // Esta es la función que realmente abre la ventana emergente
+			selectedInvoice = event.detail; // Carga los datos
+			showCreateDialog = true;        // Abre el modal
+				};
+
+					window.addEventListener('invoiceEdit', handleInvoiceEdit as EventListener);
+					
+					return () => {
+						window.removeEventListener('invoiceEdit', handleInvoiceEdit as EventListener);
+					};
+
+			const handleInvoiceDelete = (event: CustomEvent<Invoice>) => {
+				handleDelete(event.detail);
+			};
+
+			window.addEventListener('companyChanged', handleCompanyChange as EventListener);
+			window.addEventListener('invoiceView', handleInvoiceView as EventListener);
+			window.addEventListener('invoiceEdit', handleInvoiceEdit as EventListener);
+			window.addEventListener('invoiceDelete', handleInvoiceDelete as EventListener);
+
+			return () => {
+				window.removeEventListener('companyChanged', handleCompanyChange as EventListener);
+				window.removeEventListener('invoiceView', handleInvoiceView as EventListener);
+				window.removeEventListener('invoiceEdit', handleInvoiceEdit as EventListener);
+				window.removeEventListener('invoiceDelete', handleInvoiceDelete as EventListener);
+			};
+		}
+	});
+
+	// Estado para infinite scroll - inicializar con data del servidor
+	let allItems = $state<Invoice[]>(data.items || []);
+	let currentPage = $state(data.page || 1);
+	let pageSize = $state(data.page_size || 50);
+	let totalItems = $state(data.total || 0);
+	let loading = $state(false);
+	let hasMore = $derived(allItems.length < totalItems);
+	let error = $state<string | null>(data.error || null);
+
+	// Actualizar datos cuando cambia data del servidor
+	$effect(() => {
+		allItems = data.items || [];
+		currentPage = data.page || 1;
+		totalItems = data.total || 0;
+		error = data.error || null;
+		selectedInvoiceType = data.invoiceType || null;
+		selectedType = data.operationType || 'all';
+	});
+
+	async function loadMore() {
+		if (loading || !hasMore || !companyStore.activeCompany) return;
+
+		loading = true;
+		error = null;
+
+		try {
+			const filters: any = {};
+			if (selectedType !== 'all') {
+				filters.operation_type = selectedType;
+			}
+			if (selectedInvoiceType) {
+				filters.invoice_type = selectedInvoiceType;
+			}
+			
+			const response = await invoicesApi.list(
+				companyStore.activeCompany.id,
+				currentPage + 1,
+				pageSize,
+				Object.keys(filters).length > 0 ? filters : undefined
+			);
+
+			if (response.error) {
+				console.error('Error en loadMore:', response.error, 'Status:', response.status);
+				
+				if (response.status === 401 || response.status === 403) {
+					error = 'Sesión expirada. Recargando página...';
+					setTimeout(() => {
+						window.location.reload();
+					}, 2000);
+				} else {
+					error = response.error;
+				}
+				return;
+			}
+
+			if (response.data?.items) {
+				allItems = [...allItems, ...response.data.items];
+				currentPage++;
+				totalItems = response.data.total;
+			}
+		} catch (e) {
+			error = 'Error cargando más datos';
+			console.error('Error loading more:', e);
+		} finally {
+			loading = false;
+		}
+	}
+
+	async function reloadData() {
+		// Invalidar datos para que el servidor recargue
+		await invalidate('app:invoices');
+	}
+
+	function handleCreateClick() {
+		selectedInvoice = null;
+		showCreateDialog = true;
+	}
+
+	function handleView(invoice: Invoice) {
+		selectedInvoice = invoice;
+		showDetailsDialog = true;
+	}
+
+	function handleEdit(invoice: Invoice) {
+		selectedInvoice = invoice;
+		showCreateDialog = true;
+	}
+
+	function handleDelete(invoice: Invoice) {
+		selectedInvoice = invoice;
+		showDeleteDialog = true;
+	}
+
+	function handleSuccess() {
+		reloadData();
+	}
+
+	// Crear columnas
+	const columns = createColumns();
+</script>
+
+<div class="space-y-6">
+	<!-- Header -->
+	<div class="flex items-center justify-between">
+		<div>
+			<h1 class="text-3xl font-bold tracking-tight">Facturas</h1>
+			<p class="text-muted-foreground">
+				Gestiona las facturas de importación y exportación
+			</p>
+		</div>
+		<Button href="/dashboard/invoices/importacion/definitiva/new">
+			<Plus class="mr-2" size={16} />
+			Nueva Factura
+		</Button>
+	</div>
+
+	<!-- Error Message -->
+	{#if error}
+		<Card.Root class="border-destructive">
+			<Card.Header>
+				<Card.Title class="text-destructive">Error</Card.Title>
+				<Card.Description>{error}</Card.Description>
+			</Card.Header>
+		</Card.Root>
+	{/if}
+
+	<!-- Data Table -->
+	<Card.Root>
+		<Card.Header>
+			<div class="flex items-center justify-between">
+				<div>
+					<Card.Title>Listado de Facturas</Card.Title>
+					<Card.Description>
+						Mostrando {allItems.length} de {totalItems} registros
+						{#if companyStore.activeCompany}
+							- Compañía: {companyStore.activeCompany.name}
+						{/if}
+					</Card.Description>
+				</div>
+				<div class="flex items-center gap-2">
+					<Select.Root type="single" value={selectedType} onValueChange={handleTypeChange}>
+						<Select.Trigger class="w-[180px]">
+							{selectedType === 'all' ? 'Todas' : selectedType === 'imp' ? 'Importación' : 'Exportación'}
+						</Select.Trigger>
+						<Select.Content>
+							<Select.Item value="all">Todas</Select.Item>
+							<Select.Item value="imp">Importación</Select.Item>
+							<Select.Item value="exp">Exportación</Select.Item>
+						</Select.Content>
+					</Select.Root>
+					
+					{#if selectedType !== 'all' && availableInvoiceTypes.length > 0}
+						<Select.Root 
+							type="single" 
+							value={selectedInvoiceType || 'all'} 
+							onValueChange={handleInvoiceTypeChange}
+							disabled={loadingInvoiceTypes}
+						>
+							<Select.Trigger class="w-[250px]">
+								<span class="truncate">
+									{#if loadingInvoiceTypes}
+										Cargando...
+									{:else if selectedInvoiceType}
+										{(() => {
+											const found = availableInvoiceTypes.find(t => t.key === selectedInvoiceType);
+											return found ? `${found.key} - ${found.description}` : selectedInvoiceType;
+										})()}
+									{:else}
+										Todos los tipos
+									{/if}
+								</span>
+							</Select.Trigger>
+							<Select.Content>
+								<Select.Item value="all">Todos los tipos</Select.Item>
+								{#each availableInvoiceTypes as invType}
+									<Select.Item value={invType.key}>
+										<span class="block truncate max-w-[300px]" title={`${invType.key} - ${invType.description}`}>
+											{invType.key} - {invType.description}
+										</span>
+									</Select.Item>
+								{/each}
+							</Select.Content>
+						</Select.Root>
+					{/if}
+					
+					<Button variant="outline" onclick={reloadData}>
+						<RefreshCw class="mr-2" size={16} />
+						Actualizar
+					</Button>
+				</div>
+			</div>
+		</Card.Header>
+		<Card.Content>
+			<DataTable
+				data={allItems}
+				{columns}
+				{loading}
+				{hasMore}
+				{loadMore}
+			/>
+		</Card.Content>
+	</Card.Root>
+</div>
+
+<!-- Diálogos -->
+<CreateEditDialog 
+	bind:open={showCreateDialog} 
+	bind:item={selectedInvoice}
+	defaultOperationType={selectedType !== 'all' ? selectedType as 'imp' | 'exp' : undefined}
+	defaultInvoiceType={selectedInvoiceType || undefined}
+	onSuccess={handleSuccess} 
+/>
+
+<DetailsDialog 
+	bind:open={showDetailsDialog} 
+	invoice={selectedInvoice}
+/>
+
+<DeleteDialog 
+	bind:open={showDeleteDialog} 
+	item={selectedInvoice}
+	onSuccess={handleSuccess}
+/>
diff --git a/frontend/src/routes/dashboard/invoices/importacion/definitiva/new/+page.svelte b/frontend/src/routes/dashboard/invoices/importacion/definitiva/new/+page.svelte
new file mode 100644
index 00000000..57e4fc64
--- /dev/null
+++ b/frontend/src/routes/dashboard/invoices/importacion/definitiva/new/+page.svelte
@@ -0,0 +1,320 @@
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    import { Button } from "$lib/components/ui/button";
+    import { Input } from "$lib/components/ui/input";
+    import { Label } from "$lib/components/ui/label";
+    import * as Select from "$lib/components/ui/select";
+    import * as Tabs from "$lib/components/ui/tabs";
+    import * as Card from "$lib/components/ui/card"; // Usamos Card para enmarcar
+    import { invoicesApi, type CreateInvoiceData } from "$lib/api/dashboard/a76/invoices";
+    import { companyStore } from "$lib/stores/company.svelte";
+    import { LoaderCircle, ArrowLeft, Save } from 'lucide-svelte';
+
+    // DATOS FIJOS PARA ESTA CARPETA (DEFINITIVA)
+    const FIXED_OP_TYPE = "imp";
+    const FIXED_INV_TYPE = "DEF";
+
+    // ESTADO DEL FORMULARIO
+    let loading = $state(false);
+    let error = $state<string | null>(null);
+
+    let formData = $state({
+        // Header fields
+        operation_type: FIXED_OP_TYPE as "imp" | "exp",
+        invoice_type: FIXED_INV_TYPE,
+        invoice_number: "",
+        project_number: "",
+        purchase_order: "",
+        related_doc_id: null as number | null,
+        invoice_date: new Date().toISOString().split('T')[0], // Fecha de hoy por defecto
+        traffic_light_status: "",
+        observation_es: "",
+        observation_en: "",
+        comments_status: "",
+        cfdi_uuid: "",
+        path_pdf: "",
+        path_xml: "",
+        // Compliance MX fields
+        pedimento: "",
+        pedimento_code: "",
+        remesa: null as number | null,
+        aduana: "",
+        customs_broker_id: "",
+        provider_id: "",
+        sold_to_id: "",
+        shipped_to_id: "",
+        shipped_by_id: "",
+        is_mixed: false,
+        waste_type: "",
+        appendix_17: null as number | null,
+        edocument: "",
+        // Financials fields
+        currency: "MXN",
+        exchange_rate: null as number | null,
+        value_mn: null as number | null,
+        value_me: null as number | null,
+        customs_value_mn: null as number | null,
+        freight: null as number | null,
+        insurance: null as number | null,
+        iva_mn: null as number | null,
+        iva_factor: null as number | null,
+        total_quantity: null as number | null,
+        gross_weight: null as number | null,
+        net_weight: null as number | null,
+        bundle_count: null as number | null
+    });
+
+    async function handleSubmit(e: Event) {
+        e.preventDefault();
+        
+        if (!companyStore.activeCompany) {
+            error = "No hay compañía seleccionada";
+            return;
+        }
+
+        loading = true;
+        error = null;
+
+        try {
+            // Construimos el Payload
+            const payload: CreateInvoiceData = {
+                ...formData,
+                // Aseguramos que se envíen los fijos
+                operation_type: FIXED_OP_TYPE, 
+                invoice_type: FIXED_INV_TYPE
+            };
+
+            const response = await invoicesApi.create(companyStore.activeCompany.id, payload);
+
+            if (response.error) {
+                if (response.status === 401) {
+                    error = 'Sesión expirada. Recargando...';
+                    setTimeout(() => window.location.reload(), 1500);
+                } else {
+                    error = response.error;
+                }
+                return;
+            }
+
+            // ÉXITO: Volvemos a la lista
+            goto('/dashboard/invoices/importacion/definitiva');
+
+        } catch (e) {
+            error = e instanceof Error ? e.message : "Error al guardar";
+            console.error("Error saving:", e);
+        } finally {
+            loading = false;
+        }
+    }
+</script>
+
+<div class="max-w-5xl mx-auto py-6 px-4 space-y-6">
+    
+    <div class="flex items-center gap-4">
+        <Button variant="outline" size="icon" href="/dashboard/invoices/importacion/definitiva">
+            <ArrowLeft class="h-4 w-4" />
+        </Button>
+        <div>
+            <h1 class="text-2xl font-bold tracking-tight">Nueva Factura Definitiva</h1>
+            <p class="text-muted-foreground">Ingresa los datos para registrar la importación.</p>
+        </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}
+
+    <form onsubmit={handleSubmit} class="space-y-6">
+        <Card.Root>
+            <Card.Content class="p-6">
+                
+                <Tabs.Root value="general" class="w-full">
+                    <Tabs.List class="grid w-full grid-cols-3 mb-6">
+                        <Tabs.Trigger value="general">General</Tabs.Trigger>
+                        <Tabs.Trigger value="compliance">Cumplimiento</Tabs.Trigger>
+                        <Tabs.Trigger value="financials">Financieros</Tabs.Trigger>
+                    </Tabs.List>
+
+                    <Tabs.Content value="general" class="space-y-4">
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            
+                            <div class="space-y-2">
+                                <Label>Tipo de Operación</Label>
+                                <div class="px-3 py-2 bg-muted rounded-md text-sm font-medium">Importación</div>
+                            </div>
+                            
+                            <div class="space-y-2">
+                                <Label>Tipo de Factura</Label>
+                                <div class="px-3 py-2 bg-muted rounded-md text-sm font-medium">Definitiva (DEF)</div>
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="invoice_number">Número de Factura *</Label>
+                                <Input id="invoice_number" bind:value={formData.invoice_number} required placeholder="Número de factura" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="project_number">Número de Proyecto</Label>
+                                <Input id="project_number" bind:value={formData.project_number} placeholder="Número de proyecto" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="purchase_order">Orden de Compra</Label>
+                                <Input id="purchase_order" bind:value={formData.purchase_order} placeholder="Orden de compra" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="invoice_date">Fecha de Factura *</Label>
+                                <Input id="invoice_date" type="date" bind:value={formData.invoice_date} required />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="traffic_light_status">Semáforo</Label>
+                                <Input id="traffic_light_status" bind:value={formData.traffic_light_status} placeholder="Estado del semáforo" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="cfdi_uuid">CFDI UUID</Label>
+                                <Input id="cfdi_uuid" bind:value={formData.cfdi_uuid} placeholder="UUID del CFDI" />
+                            </div>
+                        </div>
+
+                        <div class="grid grid-cols-1 gap-4 pt-4">
+                            <div class="space-y-2">
+                                <Label for="observation_es">Observaciones (Español)</Label>
+                                <Input id="observation_es" bind:value={formData.observation_es} placeholder="Observaciones en español" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="observation_en">Observaciones (Inglés)</Label>
+                                <Input id="observation_en" bind:value={formData.observation_en} placeholder="Observaciones en inglés" />
+                            </div>
+                        </div>
+                    </Tabs.Content>
+
+                    <Tabs.Content value="compliance" class="space-y-4">
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            <div class="space-y-2">
+                                <Label for="pedimento">Pedimento</Label>
+                                <Input id="pedimento" bind:value={formData.pedimento} placeholder="Número de pedimento" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="pedimento_code">Código de Pedimento</Label>
+                                <Input id="pedimento_code" bind:value={formData.pedimento_code} placeholder="R1, K1, etc." />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="remesa">Remesa</Label>
+                                <Input id="remesa" type="number" bind:value={formData.remesa} placeholder="Número de remesa" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="aduana">Aduana</Label>
+                                <Input id="aduana" bind:value={formData.aduana} placeholder="Código de aduana" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="customs_broker_id">Agente Aduanal</Label>
+                                <Input id="customs_broker_id" bind:value={formData.customs_broker_id} placeholder="ID del agente aduanal" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="provider_id">Proveedor</Label>
+                                <Input id="provider_id" bind:value={formData.provider_id} placeholder="ID del proveedor" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="edocument">E-Document</Label>
+                                <Input id="edocument" bind:value={formData.edocument} placeholder="Número de e-document" />
+                            </div>
+
+                            <div class="space-y-2 flex items-center gap-2 pt-8">
+                                <input id="is_mixed" type="checkbox" bind:checked={formData.is_mixed} class="h-4 w-4" />
+                                <Label for="is_mixed" class="!mt-0">Operación Mixta</Label>
+                            </div>
+                        </div>
+                    </Tabs.Content>
+
+                    <Tabs.Content value="financials" class="space-y-4">
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            <div class="space-y-2">
+                                <Label for="currency">Moneda</Label>
+                                <Input id="currency" bind:value={formData.currency} placeholder="MXN, USD, etc." />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="exchange_rate">Tipo de Cambio</Label>
+                                <Input id="exchange_rate" type="number" step="0.000001" bind:value={formData.exchange_rate} placeholder="Tipo de cambio" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="value_mn">Valor MN</Label>
+                                <Input id="value_mn" type="number" step="0.01" bind:value={formData.value_mn} placeholder="Valor MN" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="value_me">Valor ME</Label>
+                                <Input id="value_me" type="number" step="0.01" bind:value={formData.value_me} placeholder="Valor ME" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="customs_value_mn">Valor Aduana MN</Label>
+                                <Input id="customs_value_mn" type="number" step="0.01" bind:value={formData.customs_value_mn} placeholder="Valor Aduana MN" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="freight">Flete</Label>
+                                <Input id="freight" type="number" step="0.01" bind:value={formData.freight} placeholder="Costo Flete" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="insurance">Seguro</Label>
+                                <Input id="insurance" type="number" step="0.01" bind:value={formData.insurance} placeholder="Costo Seguro" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="total_quantity">Cantidad Total</Label>
+                                <Input id="total_quantity" type="number" step="0.01" bind:value={formData.total_quantity} placeholder="Cantidad Total" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="gross_weight">Peso Bruto</Label>
+                                <Input id="gross_weight" type="number" step="0.01" bind:value={formData.gross_weight} placeholder="Peso Bruto" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="net_weight">Peso Neto</Label>
+                                <Input id="net_weight" type="number" step="0.01" bind:value={formData.net_weight} placeholder="Peso Neto" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="bundle_count">Número de Bultos</Label>
+                                <Input id="bundle_count" type="number" bind:value={formData.bundle_count} placeholder="Num. Bultos" />
+                            </div>
+                        </div>
+                    </Tabs.Content>
+
+                </Tabs.Root>
+
+            </Card.Content>
+            
+            <Card.Footer class="flex justify-end gap-4 border-t bg-muted/20 p-6">
+                <Button variant="outline" href="/dashboard/invoices/importacion/definitiva">
+                    Cancelar
+                </Button>
+                <Button type="submit" disabled={loading}>
+                    {#if loading}
+                        <LoaderCircle class="mr-2 h-4 w-4 animate-spin" />
+                        Guardando...
+                    {:else}
+                        <Save class="mr-2 h-4 w-4" />
+                        Guardar Factura
+                    {/if}
+                </Button>
+            </Card.Footer>
+        </Card.Root>
+    </form>
+</div>
\ No newline at end of file
diff --git a/frontend/src/routes/dashboard/invoices/importacion/temporal/+page.server.ts b/frontend/src/routes/dashboard/invoices/importacion/temporal/+page.server.ts
new file mode 100644
index 00000000..83708beb
--- /dev/null
+++ b/frontend/src/routes/dashboard/invoices/importacion/temporal/+page.server.ts
@@ -0,0 +1,114 @@
+import type { PageServerLoad } from '../$types';
+import { redirect } from '@sveltejs/kit';
+import { 
+	getAuthTokens, 
+	authenticatedFetch 
+} from '$lib/server/api';
+
+export const load: PageServerLoad = async ({ fetch, cookies, url, parent }) => {
+	// Esperar a que el layout padre valide/refresque el token
+	const parentData = await parent();
+	
+	// Verificar autenticación
+	const { accessToken } = getAuthTokens(cookies);
+	
+	if (!accessToken) {
+		throw redirect(302, '/login');
+	}
+
+	try {
+		// Obtener company_id de múltiples fuentes (en orden de prioridad):
+		// 1. URL query param (permite cambiar vía navegación)
+		// 2. Cookie active_company_id (setted por el team-switcher)
+		// 3. Primera compañía del usuario (fallback)
+		const companyIdParam = url.searchParams.get('company_id');
+		const cookieCompanyId = cookies.get('active_company_id');
+		
+		const companyId = companyIdParam 
+			? parseInt(companyIdParam)
+			: cookieCompanyId
+				? parseInt(cookieCompanyId)
+				: parentData.companies?.[0]?.id;
+		
+		// Si aún no hay companyId, mostrar error
+		if (!companyId) {
+			return {
+				items: [],
+				total: 0,
+				page: 1,
+				page_size: 50,
+				error: 'No se encontró una compañía seleccionada',
+				companies: parentData.companies || []
+			};
+		}
+
+		// Obtener filtro de tipo de operación
+		const operationType = 'imp'
+		const invoiceType =  'TEM'
+		
+		// Construir parámetros de consulta
+		const params = new URLSearchParams({
+			company_id: companyId.toString(),
+			page: '1',
+			page_size: '50'
+		});
+
+		// Agregar filtro de tipo si existe y no es 'all'
+		if (operationType && operationType !== 'all') {
+			params.append('operation_type', operationType);
+		}
+		
+		// Agregar filtro de invoice_type si existe
+		if (invoiceType) {
+			params.append('invoice_type', invoiceType);
+		}
+		
+		// Usar authenticatedFetch para manejar automáticamente el refresh de tokens
+		const response = await authenticatedFetch(
+			`v1/a76/invoices?${params.toString()}`,
+			{},
+			cookies,
+			fetch,
+			'/login'
+		);
+
+		if (!response.ok) {
+			return {
+				items: [],
+				total: 0,
+				page: 1,
+				page_size: 50,
+				error: 'Error al cargar facturas',
+				companies: parentData.companies || [],
+				currentCompanyId: companyId,
+				operationType: operationType || 'all',
+				invoiceType: invoiceType || null
+			};
+		}
+
+		const data = await response.json();
+
+		return {
+			items: data.items || [],
+			total: data.total || 0,
+			page: data.page || 1,
+			page_size: data.page_size || 50,
+			companies: parentData.companies || [],
+			currentCompanyId: companyId,
+			operationType: operationType || 'all',
+			invoiceType: invoiceType || null
+		};
+	} catch (error) {
+		console.error('Error loading invoices:', error);
+		return {
+			items: [],
+			total: 0,
+			page: 1,
+			page_size: 50,
+			error: 'Error al cargar facturas',
+			companies: parentData.companies || [],
+			operationType: 'all',
+			invoiceType: null
+		};
+	}
+};
diff --git a/frontend/src/routes/dashboard/invoices/importacion/temporal/+page.svelte b/frontend/src/routes/dashboard/invoices/importacion/temporal/+page.svelte
new file mode 100644
index 00000000..d9a1ca87
--- /dev/null
+++ b/frontend/src/routes/dashboard/invoices/importacion/temporal/+page.svelte
@@ -0,0 +1,382 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { invoicesApi, type Invoice } from '$lib/api/dashboard/a76/invoices';
+	import { invoiceTypesApi, type InvoiceType } from '$lib/api/dashboard/refrence_data/invoice_types';
+	import DataTable from '$lib/components/dashboard/invoices/data-table.svelte';
+	import { createColumns } from '$lib/components/dashboard/invoices/columns.js';
+	import CreateEditDialog from '$lib/components/dashboard/invoices/create-edit-dialog.svelte';
+	import DetailsDialog from '$lib/components/dashboard/invoices/details-dialog.svelte';
+	import DeleteDialog from '$lib/components/dashboard/invoices/delete-dialog.svelte';
+	import * as Card from '$lib/components/ui/card';
+	import { Button } from '$lib/components/ui/button';
+	import * as Select from '$lib/components/ui/select';
+	import { Plus, RefreshCw } from 'lucide-svelte';
+	import { goto, invalidate } from '$app/navigation';
+	import { browser } from '$app/environment';
+	import { companyStore } from '$lib/stores/company.svelte';
+
+	// Recibir data del servidor
+	interface PageData {
+		items: Invoice[];
+		total: number;
+		page: number;
+		page_size: number;
+		error?: string;
+		companies: any[];
+		currentCompanyId?: number;
+		operationType?: string;
+		invoiceType?: string | null;
+	}
+
+	let { data }: { data: PageData } = $props();
+
+	// Estado para los diálogos
+	let showCreateDialog = $state(false);
+	let showDetailsDialog = $state(false);
+	let showDeleteDialog = $state(false);
+	let selectedInvoice = $state<Invoice | null>(null);
+
+	// Estado para el filtro de tipo (inicializado desde data del servidor)
+	let selectedType = $state<string>(data.operationType || 'all');
+	let selectedInvoiceType = $state<string | null>(data.invoiceType || null);
+	let availableInvoiceTypes = $state<InvoiceType[]>([]);
+	let loadingInvoiceTypes = $state(false);
+
+	// Actualizar URL cuando cambia el filtro
+	function handleTypeChange(value: string) {
+		selectedType = value;
+		const url = new URL(window.location.href);
+		if (value === 'all') {
+			url.searchParams.delete('operation_type');
+			url.searchParams.delete('invoice_type');
+			selectedInvoiceType = null;
+		} else {
+			url.searchParams.set('operation_type', value);
+			// Mantener invoice_type si existe
+			if (selectedInvoiceType) {
+				url.searchParams.set('invoice_type', selectedInvoiceType);
+			}
+		}
+		goto(url.toString(), { keepFocus: true, noScroll: true });
+	}
+
+	// Actualizar URL cuando cambia el filtro de invoice_type
+	function handleInvoiceTypeChange(value: string) {
+		selectedInvoiceType = value === 'all' ? null : value;
+		const url = new URL(window.location.href);
+		if (!selectedInvoiceType) {
+			url.searchParams.delete('invoice_type');
+		} else {
+			url.searchParams.set('invoice_type', selectedInvoiceType);
+		}
+		if (selectedType !== 'all') {
+			url.searchParams.set('operation_type', selectedType);
+		}
+		goto(url.toString(), { keepFocus: true, noScroll: true });
+	}
+
+	// Cargar tipos de factura disponibles según operation_type
+	async function loadInvoiceTypes(operationType: string) {
+		if (operationType === 'all') {
+			availableInvoiceTypes = [];
+			return;
+		}
+
+		loadingInvoiceTypes = true;
+		try {
+			const response = await invoiceTypesApi.list(1, 100, operationType);
+			if (response.data) {
+				availableInvoiceTypes = response.data.items;
+			}
+		} catch (e) {
+			console.error('Error loading invoice types:', e);
+			availableInvoiceTypes = [];
+		} finally {
+			loadingInvoiceTypes = false;
+		}
+	}
+
+	// Efecto para cargar tipos de factura cuando cambia selectedType
+	$effect(() => {
+		loadInvoiceTypes(selectedType);
+	});
+
+	// Sincronizar token de cookies a localStorage al montar el componente
+	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) => {
+				invalidate('app:invoices');
+			};
+
+			// Escuchar eventos de facturas
+			const handleInvoiceView = (event: CustomEvent<Invoice>) => {
+				handleView(event.detail);
+			};
+
+			const handleInvoiceEdit = (event: CustomEvent<Invoice>) => {
+				handleEdit(event.detail);
+			};
+
+			const handleInvoiceDelete = (event: CustomEvent<Invoice>) => {
+				handleDelete(event.detail);
+			};
+
+			window.addEventListener('companyChanged', handleCompanyChange as EventListener);
+			window.addEventListener('invoiceView', handleInvoiceView as EventListener);
+			window.addEventListener('invoiceEdit', handleInvoiceEdit as EventListener);
+			window.addEventListener('invoiceDelete', handleInvoiceDelete as EventListener);
+
+			return () => {
+				window.removeEventListener('companyChanged', handleCompanyChange as EventListener);
+				window.removeEventListener('invoiceView', handleInvoiceView as EventListener);
+				window.removeEventListener('invoiceEdit', handleInvoiceEdit as EventListener);
+				window.removeEventListener('invoiceDelete', handleInvoiceDelete as EventListener);
+			};
+		}
+	});
+
+	// Estado para infinite scroll - inicializar con data del servidor
+	let allItems = $state<Invoice[]>(data.items || []);
+	let currentPage = $state(data.page || 1);
+	let pageSize = $state(data.page_size || 50);
+	let totalItems = $state(data.total || 0);
+	let loading = $state(false);
+	let hasMore = $derived(allItems.length < totalItems);
+	let error = $state<string | null>(data.error || null);
+
+	// Actualizar datos cuando cambia data del servidor
+	$effect(() => {
+		allItems = data.items || [];
+		currentPage = data.page || 1;
+		totalItems = data.total || 0;
+		error = data.error || null;
+		selectedInvoiceType = data.invoiceType || null;
+		selectedType = data.operationType || 'all';
+	});
+
+	async function loadMore() {
+		if (loading || !hasMore || !companyStore.activeCompany) return;
+
+		loading = true;
+		error = null;
+
+		try {
+			const filters: any = {};
+			if (selectedType !== 'all') {
+				filters.operation_type = selectedType;
+			}
+			if (selectedInvoiceType) {
+				filters.invoice_type = selectedInvoiceType;
+			}
+			
+			const response = await invoicesApi.list(
+				companyStore.activeCompany.id,
+				currentPage + 1,
+				pageSize,
+				Object.keys(filters).length > 0 ? filters : undefined
+			);
+
+			if (response.error) {
+				console.error('Error en loadMore:', response.error, 'Status:', response.status);
+				
+				if (response.status === 401 || response.status === 403) {
+					error = 'Sesión expirada. Recargando página...';
+					setTimeout(() => {
+						window.location.reload();
+					}, 2000);
+				} else {
+					error = response.error;
+				}
+				return;
+			}
+
+			if (response.data?.items) {
+				allItems = [...allItems, ...response.data.items];
+				currentPage++;
+				totalItems = response.data.total;
+			}
+		} catch (e) {
+			error = 'Error cargando más datos';
+			console.error('Error loading more:', e);
+		} finally {
+			loading = false;
+		}
+	}
+
+	async function reloadData() {
+		// Invalidar datos para que el servidor recargue
+		await invalidate('app:invoices');
+	}
+
+	function handleCreateClick() {
+		selectedInvoice = null;
+		showCreateDialog = true;
+	}
+
+	function handleView(invoice: Invoice) {
+		selectedInvoice = invoice;
+		showDetailsDialog = true;
+	}
+
+	function handleEdit(invoice: Invoice) {
+		selectedInvoice = invoice;
+		showCreateDialog = true;
+	}
+
+	function handleDelete(invoice: Invoice) {
+		selectedInvoice = invoice;
+		showDeleteDialog = true;
+	}
+
+	function handleSuccess() {
+		reloadData();
+	}
+
+	// Crear columnas
+	const columns = createColumns();
+</script>
+
+<div class="space-y-6">
+	<!-- Header -->
+	<div class="flex items-center justify-between">
+		<div>
+			<h1 class="text-3xl font-bold tracking-tight">Facturas</h1>
+			<p class="text-muted-foreground">
+				Gestiona las facturas de importación y exportación
+			</p>
+		</div>
+		<Button href="/dashboard/invoices/importacion/temporal/new">
+			<Plus class="mr-2" size={16} />
+			Nueva Factura
+		</Button>
+	</div>
+
+	<!-- Error Message -->
+	{#if error}
+		<Card.Root class="border-destructive">
+			<Card.Header>
+				<Card.Title class="text-destructive">Error</Card.Title>
+				<Card.Description>{error}</Card.Description>
+			</Card.Header>
+		</Card.Root>
+	{/if}
+
+	<!-- Data Table -->
+	<Card.Root>
+		<Card.Header>
+			<div class="flex items-center justify-between">
+				<div>
+					<Card.Title>Listado de Facturas</Card.Title>
+					<Card.Description>
+						Mostrando {allItems.length} de {totalItems} registros
+						{#if companyStore.activeCompany}
+							- Compañía: {companyStore.activeCompany.name}
+						{/if}
+					</Card.Description>
+				</div>
+				<div class="flex items-center gap-2">
+					<Select.Root type="single" value={selectedType} onValueChange={handleTypeChange}>
+						<Select.Trigger class="w-[180px]">
+							{selectedType === 'all' ? 'Todas' : selectedType === 'imp' ? 'Importación' : 'Exportación'}
+						</Select.Trigger>
+						<Select.Content>
+							<Select.Item value="all">Todas</Select.Item>
+							<Select.Item value="imp">Importación</Select.Item>
+							<Select.Item value="exp">Exportación</Select.Item>
+						</Select.Content>
+					</Select.Root>
+					
+					{#if selectedType !== 'all' && availableInvoiceTypes.length > 0}
+						<Select.Root 
+							type="single" 
+							value={selectedInvoiceType || 'all'} 
+							onValueChange={handleInvoiceTypeChange}
+							disabled={loadingInvoiceTypes}
+						>
+							<Select.Trigger class="w-[250px]">
+								<span class="truncate">
+									{#if loadingInvoiceTypes}
+										Cargando...
+									{:else if selectedInvoiceType}
+										{(() => {
+											const found = availableInvoiceTypes.find(t => t.key === selectedInvoiceType);
+											return found ? `${found.key} - ${found.description}` : selectedInvoiceType;
+										})()}
+									{:else}
+										Todos los tipos
+									{/if}
+								</span>
+							</Select.Trigger>
+							<Select.Content>
+								<Select.Item value="all">Todos los tipos</Select.Item>
+								{#each availableInvoiceTypes as invType}
+									<Select.Item value={invType.key}>
+										<span class="block truncate max-w-[300px]" title={`${invType.key} - ${invType.description}`}>
+											{invType.key} - {invType.description}
+										</span>
+									</Select.Item>
+								{/each}
+							</Select.Content>
+						</Select.Root>
+					{/if}
+					
+					<Button variant="outline" onclick={reloadData}>
+						<RefreshCw class="mr-2" size={16} />
+						Actualizar
+					</Button>
+				</div>
+			</div>
+		</Card.Header>
+		<Card.Content>
+			<DataTable
+				data={allItems}
+				{columns}
+				{loading}
+				{hasMore}
+				{loadMore}
+			/>
+		</Card.Content>
+	</Card.Root>
+</div>
+
+<!-- Diálogos -->
+<CreateEditDialog 
+	bind:open={showCreateDialog} 
+	bind:item={selectedInvoice}
+	defaultOperationType={selectedType !== 'all' ? selectedType as 'imp' | 'exp' : undefined}
+	defaultInvoiceType={selectedInvoiceType || undefined}
+	onSuccess={handleSuccess} 
+/>
+
+<DetailsDialog 
+	bind:open={showDetailsDialog} 
+	invoice={selectedInvoice}
+/>
+
+<DeleteDialog 
+	bind:open={showDeleteDialog} 
+	item={selectedInvoice}
+	onSuccess={handleSuccess}
+/>
diff --git a/frontend/src/routes/dashboard/invoices/importacion/temporal/new/+page.svelte b/frontend/src/routes/dashboard/invoices/importacion/temporal/new/+page.svelte
new file mode 100644
index 00000000..fae289e8
--- /dev/null
+++ b/frontend/src/routes/dashboard/invoices/importacion/temporal/new/+page.svelte
@@ -0,0 +1,320 @@
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    import { Button } from "$lib/components/ui/button";
+    import { Input } from "$lib/components/ui/input";
+    import { Label } from "$lib/components/ui/label";
+    import * as Select from "$lib/components/ui/select";
+    import * as Tabs from "$lib/components/ui/tabs";
+    import * as Card from "$lib/components/ui/card"; // Usamos Card para enmarcar
+    import { invoicesApi, type CreateInvoiceData } from "$lib/api/dashboard/a76/invoices";
+    import { companyStore } from "$lib/stores/company.svelte";
+    import { LoaderCircle, ArrowLeft, Save } from 'lucide-svelte';
+
+    // DATOS FIJOS PARA ESTA CARPETA (Temporal Importación)
+    const FIXED_OP_TYPE = "imp";
+    const FIXED_INV_TYPE = "TEM";
+
+    // ESTADO DEL FORMULARIO
+    let loading = $state(false);
+    let error = $state<string | null>(null);
+
+    let formData = $state({
+        // Header fields
+        operation_type: FIXED_OP_TYPE as "imp" | "exp",
+        invoice_type: FIXED_INV_TYPE,
+        invoice_number: "",
+        project_number: "",
+        purchase_order: "",
+        related_doc_id: null as number | null,
+        invoice_date: new Date().toISOString().split('T')[0], // Fecha de hoy por defecto
+        traffic_light_status: "",
+        observation_es: "",
+        observation_en: "",
+        comments_status: "",
+        cfdi_uuid: "",
+        path_pdf: "",
+        path_xml: "",
+        // Compliance MX fields
+        pedimento: "",
+        pedimento_code: "",
+        remesa: null as number | null,
+        aduana: "",
+        customs_broker_id: "",
+        provider_id: "",
+        sold_to_id: "",
+        shipped_to_id: "",
+        shipped_by_id: "",
+        is_mixed: false,
+        waste_type: "",
+        appendix_17: null as number | null,
+        edocument: "",
+        // Financials fields
+        currency: "MXN",
+        exchange_rate: null as number | null,
+        value_mn: null as number | null,
+        value_me: null as number | null,
+        customs_value_mn: null as number | null,
+        freight: null as number | null,
+        insurance: null as number | null,
+        iva_mn: null as number | null,
+        iva_factor: null as number | null,
+        total_quantity: null as number | null,
+        gross_weight: null as number | null,
+        net_weight: null as number | null,
+        bundle_count: null as number | null
+    });
+
+    async function handleSubmit(e: Event) {
+        e.preventDefault();
+        
+        if (!companyStore.activeCompany) {
+            error = "No hay compañía seleccionada";
+            return;
+        }
+
+        loading = true;
+        error = null;
+
+        try {
+            // Construimos el Payload
+            const payload: CreateInvoiceData = {
+                ...formData,
+                // Aseguramos que se envíen los fijos
+                operation_type: FIXED_OP_TYPE, 
+                invoice_type: FIXED_INV_TYPE
+            };
+
+            const response = await invoicesApi.create(companyStore.activeCompany.id, payload);
+
+            if (response.error) {
+                if (response.status === 401) {
+                    error = 'Sesión expirada. Recargando...';
+                    setTimeout(() => window.location.reload(), 1500);
+                } else {
+                    error = response.error;
+                }
+                return;
+            }
+
+            // ÉXITO: Volvemos a la lista
+            goto('/dashboard/invoices/importacion/temporal');
+
+        } catch (e) {
+            error = e instanceof Error ? e.message : "Error al guardar";
+            console.error("Error saving:", e);
+        } finally {
+            loading = false;
+        }
+    }
+</script>
+
+<div class="max-w-5xl mx-auto py-6 px-4 space-y-6">
+    
+    <div class="flex items-center gap-4">
+        <Button variant="outline" size="icon" href="/dashboard/invoices/importacion/temporal">
+            <ArrowLeft class="h-4 w-4" />
+        </Button>
+        <div>
+            <h1 class="text-2xl font-bold tracking-tight">Nueva Factura Temporal</h1>
+            <p class="text-muted-foreground">Ingresa los datos para registrar la importación.</p>
+        </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}
+
+    <form onsubmit={handleSubmit} class="space-y-6">
+        <Card.Root>
+            <Card.Content class="p-6">
+                
+                <Tabs.Root value="general" class="w-full">
+                    <Tabs.List class="grid w-full grid-cols-3 mb-6">
+                        <Tabs.Trigger value="general">General</Tabs.Trigger>
+                        <Tabs.Trigger value="compliance">Cumplimiento</Tabs.Trigger>
+                        <Tabs.Trigger value="financials">Financieros</Tabs.Trigger>
+                    </Tabs.List>
+
+                    <Tabs.Content value="general" class="space-y-4">
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            
+                            <div class="space-y-2">
+                                <Label>Tipo de Operación</Label>
+                                <div class="px-3 py-2 bg-muted rounded-md text-sm font-medium">Importación</div>
+                            </div>
+                            
+                            <div class="space-y-2">
+                                <Label>Tipo de Factura</Label>
+                                <div class="px-3 py-2 bg-muted rounded-md text-sm font-medium">Temporal (TEM)</div>
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="invoice_number">Número de Factura *</Label>
+                                <Input id="invoice_number" bind:value={formData.invoice_number} required placeholder="Número de factura" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="project_number">Número de Proyecto</Label>
+                                <Input id="project_number" bind:value={formData.project_number} placeholder="Número de proyecto" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="purchase_order">Orden de Compra</Label>
+                                <Input id="purchase_order" bind:value={formData.purchase_order} placeholder="Orden de compra" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="invoice_date">Fecha de Factura *</Label>
+                                <Input id="invoice_date" type="date" bind:value={formData.invoice_date} required />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="traffic_light_status">Semáforo</Label>
+                                <Input id="traffic_light_status" bind:value={formData.traffic_light_status} placeholder="Estado del semáforo" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="cfdi_uuid">CFDI UUID</Label>
+                                <Input id="cfdi_uuid" bind:value={formData.cfdi_uuid} placeholder="UUID del CFDI" />
+                            </div>
+                        </div>
+
+                        <div class="grid grid-cols-1 gap-4 pt-4">
+                            <div class="space-y-2">
+                                <Label for="observation_es">Observaciones (Español)</Label>
+                                <Input id="observation_es" bind:value={formData.observation_es} placeholder="Observaciones en español" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="observation_en">Observaciones (Inglés)</Label>
+                                <Input id="observation_en" bind:value={formData.observation_en} placeholder="Observaciones en inglés" />
+                            </div>
+                        </div>
+                    </Tabs.Content>
+
+                    <Tabs.Content value="compliance" class="space-y-4">
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            <div class="space-y-2">
+                                <Label for="pedimento">Pedimento</Label>
+                                <Input id="pedimento" bind:value={formData.pedimento} placeholder="Número de pedimento" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="pedimento_code">Código de Pedimento</Label>
+                                <Input id="pedimento_code" bind:value={formData.pedimento_code} placeholder="R1, K1, etc." />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="remesa">Remesa</Label>
+                                <Input id="remesa" type="number" bind:value={formData.remesa} placeholder="Número de remesa" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="aduana">Aduana</Label>
+                                <Input id="aduana" bind:value={formData.aduana} placeholder="Código de aduana" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="customs_broker_id">Agente Aduanal</Label>
+                                <Input id="customs_broker_id" bind:value={formData.customs_broker_id} placeholder="ID del agente aduanal" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="provider_id">Proveedor</Label>
+                                <Input id="provider_id" bind:value={formData.provider_id} placeholder="ID del proveedor" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="edocument">E-Document</Label>
+                                <Input id="edocument" bind:value={formData.edocument} placeholder="Número de e-document" />
+                            </div>
+
+                            <div class="space-y-2 flex items-center gap-2 pt-8">
+                                <input id="is_mixed" type="checkbox" bind:checked={formData.is_mixed} class="h-4 w-4" />
+                                <Label for="is_mixed" class="!mt-0">Operación Mixta</Label>
+                            </div>
+                        </div>
+                    </Tabs.Content>
+
+                    <Tabs.Content value="financials" class="space-y-4">
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            <div class="space-y-2">
+                                <Label for="currency">Moneda</Label>
+                                <Input id="currency" bind:value={formData.currency} placeholder="MXN, USD, etc." />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="exchange_rate">Tipo de Cambio</Label>
+                                <Input id="exchange_rate" type="number" step="0.000001" bind:value={formData.exchange_rate} placeholder="Tipo de cambio" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="value_mn">Valor MN</Label>
+                                <Input id="value_mn" type="number" step="0.01" bind:value={formData.value_mn} placeholder="Valor MN" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="value_me">Valor ME</Label>
+                                <Input id="value_me" type="number" step="0.01" bind:value={formData.value_me} placeholder="Valor ME" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="customs_value_mn">Valor Aduana MN</Label>
+                                <Input id="customs_value_mn" type="number" step="0.01" bind:value={formData.customs_value_mn} placeholder="Valor Aduana MN" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="freight">Flete</Label>
+                                <Input id="freight" type="number" step="0.01" bind:value={formData.freight} placeholder="Costo Flete" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="insurance">Seguro</Label>
+                                <Input id="insurance" type="number" step="0.01" bind:value={formData.insurance} placeholder="Costo Seguro" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="total_quantity">Cantidad Total</Label>
+                                <Input id="total_quantity" type="number" step="0.01" bind:value={formData.total_quantity} placeholder="Cantidad Total" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="gross_weight">Peso Bruto</Label>
+                                <Input id="gross_weight" type="number" step="0.01" bind:value={formData.gross_weight} placeholder="Peso Bruto" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="net_weight">Peso Neto</Label>
+                                <Input id="net_weight" type="number" step="0.01" bind:value={formData.net_weight} placeholder="Peso Neto" />
+                            </div>
+
+                            <div class="space-y-2">
+                                <Label for="bundle_count">Número de Bultos</Label>
+                                <Input id="bundle_count" type="number" bind:value={formData.bundle_count} placeholder="Num. Bultos" />
+                            </div>
+                        </div>
+                    </Tabs.Content>
+
+                </Tabs.Root>
+
+            </Card.Content>
+            
+            <Card.Footer class="flex justify-end gap-4 border-t bg-muted/20 p-6">
+                <Button variant="outline" href="/dashboard/invoices/importacion/temporal">
+                    Cancelar
+                </Button>
+                <Button type="submit" disabled={loading}>
+                    {#if loading}
+                        <LoaderCircle class="mr-2 h-4 w-4 animate-spin" />
+                        Guardando...
+                    {:else}
+                        <Save class="mr-2 h-4 w-4" />
+                        Guardar Factura
+                    {/if}
+                </Button>
+            </Card.Footer>
+        </Card.Root>
+    </form>
+</div>
\ No newline at end of file