From b76bd71265c2c4d5e5686aaf42f58b79d0031ead Mon Sep 17 00:00:00 2001
From: Kevin_Ramirez <kramirez@aduanasoft.com.mx>
Date: Mon, 9 Feb 2026 11:30:08 -0600
Subject: [PATCH 1/2] Modulo de tipo de cambio inteligente

---
 .../exchange_rate/exchange-rate-guard.svelte  |  97 +++--
 .../invoices/edit/invoice-top-fields.svelte   | 376 +++++++++---------
 .../dashboard/invoices/edit/[id]/+page.svelte |  34 +-
 3 files changed, 272 insertions(+), 235 deletions(-)

diff --git a/frontend/src/lib/components/dashboard/exchange_rate/exchange-rate-guard.svelte b/frontend/src/lib/components/dashboard/exchange_rate/exchange-rate-guard.svelte
index 8f113fc1..4f703c02 100644
--- a/frontend/src/lib/components/dashboard/exchange_rate/exchange-rate-guard.svelte
+++ b/frontend/src/lib/components/dashboard/exchange_rate/exchange-rate-guard.svelte
@@ -1,59 +1,56 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
-    import { companyStore } from '$lib/stores/company.svelte';
-    import { getExchangeRates } from '$lib/api/dashboard/a76/general_catalogs/exchange-rate';
-    import CreateEditDialog from './create-edit-dialog.svelte';
+	import { onMount } from 'svelte';
+	import { companyStore } from '$lib/stores/company.svelte';
+	import { getExchangeRates } from '$lib/api/dashboard/a76/general_catalogs/exchange-rate';
+	import { page } from '$app/state';
+	import CreateEditDialog from './create-edit-dialog.svelte';
 
-    let open = $state(false);
-    let checked = $state(false);
+	let open = $state(false);
+	let checked = $state(false);
 
-    async function checkExchangeRate() {
-        console.log('[ExchangeRateGuard] Checking...', companyStore.activeCompany);
-        if (!companyStore.activeCompany?.id) {
-            console.log('[ExchangeRateGuard] No active company');
-            return;
-        }
+	async function checkExchangeRate() {
+		console.log('[ExchangeRateGuard] Checking...', companyStore.activeCompany);
+		if (!companyStore.activeCompany?.id) {
+			console.log('[ExchangeRateGuard] No active company');
+			return;
+		}
 
-        // Use local date instead of UTC
-        const today = new Date().toLocaleDateString('fr-CA'); // YYYY-MM-DD
-        console.log('[ExchangeRateGuard] Date:', today);
-        
-        try {
-            const response = await getExchangeRates(companyStore.activeCompany.id, {
-                date: today,
-                page_size: 1
-            });
-            console.log('[ExchangeRateGuard] Response (stringified):', JSON.stringify(response, null, 2));
+		// Use local date instead of UTC
+		const today = new Date().toLocaleDateString('fr-CA'); // YYYY-MM-DD
+		console.log('[ExchangeRateGuard] Date:', today);
 
-            // api.get returns { data: ..., status: ... } and types now reflect that
-            const items = response.data?.items || [];
-            
-            if (items.length === 0) {
-                console.log('[ExchangeRateGuard] No rate found, opening modal');
-                open = true;
-            }
-        } catch (error) {
-            console.error('[ExchangeRateGuard] Error checking exchange rate:', error);
-        } finally {
-            checked = true;
-        }
-    }
+		try {
+			const response = await getExchangeRates(companyStore.activeCompany.id, {
+				date: today,
+				page_size: 1
+			});
+			console.log('[ExchangeRateGuard] Response (stringified):', JSON.stringify(response, null, 2));
 
-    $effect(() => {
-        if (companyStore.activeCompany?.id && !checked) {
-            checkExchangeRate();
-        }
-    });
+			// api.get returns { data: ..., status: ... } and types now reflect that
+			const items = response.data?.items || [];
 
-    function handleSuccess() {
-        
-        console.log('Exchange rate created successfully via guard');
-        checked = true; 
-    }
+			if (items.length === 0) {
+				console.log('[ExchangeRateGuard] No rate found, opening modal');
+				open = true;
+			}
+		} catch (error) {
+			console.error('[ExchangeRateGuard] Error checking exchange rate:', error);
+		} finally {
+			checked = true;
+		}
+	}
+
+	$effect(() => {
+		const isDashboard = page.url.pathname === '/dashboard' || page.url.pathname === '/dashboard/';
+		if (companyStore.activeCompany?.id && !checked && isDashboard) {
+			checkExchangeRate();
+		}
+	});
+
+	function handleSuccess() {
+		console.log('Exchange rate created successfully via guard');
+		checked = true;
+	}
 </script>
 
-<CreateEditDialog 
-    bind:open 
-    onSuccess={handleSuccess}
-    overlayClass="bg-black/20"
-/>
+<CreateEditDialog bind:open onSuccess={handleSuccess} overlayClass="bg-black/20" />
diff --git a/frontend/src/lib/components/dashboard/invoices/edit/invoice-top-fields.svelte b/frontend/src/lib/components/dashboard/invoices/edit/invoice-top-fields.svelte
index e3549f05..eec4e626 100644
--- a/frontend/src/lib/components/dashboard/invoices/edit/invoice-top-fields.svelte
+++ b/frontend/src/lib/components/dashboard/invoices/edit/invoice-top-fields.svelte
@@ -1,196 +1,214 @@
 <script lang="ts">
-    import { Input } from '$lib/components/ui/input';
-    import { Label } from '$lib/components/ui/label';
-    import * as Select from '$lib/components/ui/select';
-    import { Switch } from '$lib/components/ui/switch';
-    import type { Invoice } from '$lib/api/dashboard/a76/invoices';
-    import type { InvoiceType } from '$lib/api/dashboard/refrence_data/invoice_types';
-    import type { Pedimento } from '$lib/api/dashboard/a76/pedimentos';
+	import { Input } from '$lib/components/ui/input';
+	import { Label } from '$lib/components/ui/label';
+	import * as Select from '$lib/components/ui/select';
+	import { Switch } from '$lib/components/ui/switch';
+	import type { Invoice } from '$lib/api/dashboard/a76/invoices';
+	import type { InvoiceType } from '$lib/api/dashboard/refrence_data/invoice_types';
+	import type { Pedimento } from '$lib/api/dashboard/a76/pedimentos';
 
-    let {
-        invoice,
-        formData = $bindable(),
-        invoiceTypes = [],
-        pedimentos = [],
-        defaultOperationType = undefined,
-        defaultInvoiceType = undefined,
-    }: {
-        invoice: Invoice | null;
-        formData?: any;
-        invoiceTypes?: InvoiceType[];
-        pedimentos?: Pedimento[];
-        defaultOperationType?: string | null;
-        defaultInvoiceType?: string | null;
-    } = $props();
+	let {
+		invoice,
+		formData = $bindable(),
+		invoiceTypes = [],
+		pedimentos = [],
+		defaultOperationType = undefined,
+		defaultInvoiceType = undefined
+	}: {
+		invoice: Invoice | null;
+		formData?: any;
+		invoiceTypes?: InvoiceType[];
+		pedimentos?: Pedimento[];
+		defaultOperationType?: string | null;
+		defaultInvoiceType?: string | null;
+	} = $props();
 
-    function handlePedimentoChange(pedimentoId: string) {
-        if (!pedimentoId) return;
-        
-        const selectedPedimento = pedimentos.find(p => p.id === parseInt(pedimentoId));
-        if (!selectedPedimento) return;
+	function handlePedimentoChange(pedimentoId: string) {
+		if (!pedimentoId) return;
 
-        // Actualizar los campos del pedimento en formData
-        formData.fecha_pedimento_del = selectedPedimento.pedimento_dates?.start_date || '';
-        formData.fecha_pedimento_al = selectedPedimento.pedimento_dates?.end_date || '';
-        formData.clave_pedimento = selectedPedimento.pedimento_code || '';
-        formData.regimen_pedimento = selectedPedimento.regime || '';
-        
-        // Construir el número de pedimento completo
-        const pedimentoNumber = `${selectedPedimento.customs_office?.slice(0,2) || ''}-${selectedPedimento.license || ''}-${selectedPedimento.pedimento_number || ''}`.replace(/^-+|-+$/g, '');
-        formData.pedimento = pedimentoNumber;
-    }
+		const selectedPedimento = pedimentos.find((p) => p.id === parseInt(pedimentoId));
+		if (!selectedPedimento) return;
 
-    $effect(() => {
-        if (formData?.pedimento_id && pedimentos.length > 0 && !formData.pedimento) {
-            handlePedimentoChange(formData.pedimento_id);
-        }
-    });
+		// Actualizar los campos del pedimento en formData
+		formData.fecha_pedimento_del = selectedPedimento.pedimento_dates?.start_date || '';
+		formData.fecha_pedimento_al = selectedPedimento.pedimento_dates?.end_date || '';
+		formData.clave_pedimento = selectedPedimento.pedimento_code || '';
+		formData.regimen_pedimento = selectedPedimento.regime || '';
 
-    // Efecto para actualizar operation_type cuando cambia defaultOperationType
-    $effect(() => {
-        if (formData && defaultOperationType !== undefined && defaultOperationType !== null) {
-            // Si operation_type está vacío, null, o undefined, actualizarlo con defaultOperationType
-            if (!formData.operation_type) {
-                formData.operation_type = defaultOperationType;
-            }
-        }
-    });
+		// Construir el número de pedimento completo
+		const pedimentoNumber =
+			`${selectedPedimento.customs_office?.slice(0, 2) || ''}-${selectedPedimento.license || ''}-${selectedPedimento.pedimento_number || ''}`.replace(
+				/^-+|-+$/g,
+				''
+			);
+		formData.pedimento = pedimentoNumber;
+	}
 
-    if (!formData) {
-        let operationType: string | null = null;
-        if (invoice?.operation_type) {
-            operationType = invoice.operation_type;
-        } else if (defaultOperationType !== undefined) {
-            operationType = defaultOperationType ?? null;
-        }
+	$effect(() => {
+		if (formData?.pedimento_id && pedimentos.length > 0 && !formData.pedimento) {
+			handlePedimentoChange(formData.pedimento_id);
+		}
+	});
 
-        formData = {
-            is_pedimento_pending: false,
-            pedimento_id: invoice?.compliance_mx?.pedimento_id || '',            
-            remesa: invoice?.compliance_mx?.remesa || '',
-            invoice_number: invoice?.invoice_number || '',
-            invoice_date: invoice?.invoice_date || new Date().toISOString().split('T')[0],
-            emission_date: new Date().toISOString().split('T')[0],
-            operation_type: operationType,
-            invoice_type: invoice?.invoice_type || (defaultInvoiceType ?? ''),
-            // Campos del pedimento (se llenarán al seleccionar un pedimento)
-            fecha_pedimento_del: '',
-            fecha_pedimento_al: '',
-            clave_pedimento: '',
-            regimen_pedimento: '',
-        };
-    } else {
-        // Si formData ya existe pero operation_type está vacío, usar defaultOperationType
-        if (!formData.operation_type && defaultOperationType !== undefined && defaultOperationType !== null) {
-            formData.operation_type = defaultOperationType;
-        }
-    }
+	// Efecto para actualizar operation_type cuando cambia defaultOperationType
+	$effect(() => {
+		if (formData && defaultOperationType !== undefined && defaultOperationType !== null) {
+			// Si operation_type está vacío, null, o undefined, actualizarlo con defaultOperationType
+			if (!formData.operation_type) {
+				formData.operation_type = defaultOperationType;
+			}
+		}
+	});
+
+	if (!formData) {
+		let operationType: string | null = null;
+		if (invoice?.operation_type) {
+			operationType = invoice.operation_type;
+		} else if (defaultOperationType !== undefined) {
+			operationType = defaultOperationType ?? null;
+		}
+
+		formData = {
+			is_pedimento_pending: false,
+			pedimento_id: invoice?.compliance_mx?.pedimento_id || '',
+			remesa: invoice?.compliance_mx?.remesa || '',
+			invoice_number: invoice?.invoice_number || '',
+			invoice_date:
+				invoice?.invoice_date || (invoice ? '' : new Date().toISOString().split('T')[0]),
+			emission_date: invoice?.emission_date || new Date().toISOString().split('T')[0],
+			operation_type: operationType,
+			invoice_type: invoice?.invoice_type || (defaultInvoiceType ?? ''),
+			// Campos del pedimento (se llenarán al seleccionar un pedimento)
+			fecha_pedimento_del: '',
+			fecha_pedimento_al: '',
+			clave_pedimento: '',
+			regimen_pedimento: ''
+		};
+	} else {
+		// Si formData ya existe pero operation_type está vacío, usar defaultOperationType
+		if (
+			!formData.operation_type &&
+			defaultOperationType !== undefined &&
+			defaultOperationType !== null
+		) {
+			formData.operation_type = defaultOperationType;
+		}
+	}
 </script>
 
 <!-- Datos Principales en una fila compacta (reusable across tabs) -->
-<div class="grid grid-cols-12 gap-3 items-end pb-3">
-    <div class="col-span-1 space-y-1">
-        <Label for="operation_type" class="text-xs">Tipo de Operación<span class="text-red-500">*</span></Label>
-        <Select.Root
-            type="single"
-            value={formData.operation_type || ''}
-            onValueChange={(v) => {
-                formData.operation_type = v;
-            }}
-        >
-            <Select.Trigger id="operation_type" class="h-8 text-sm">
-                <span class="truncate">
-                    {formData.operation_type 
-                        ? (formData.operation_type === 'exp' ? 'Exp' : 'Imp')
-                        : '...'}
-                </span>
-            </Select.Trigger>
-            <Select.Content>
-                <Select.Item value="exp">Exportación</Select.Item>
-                <Select.Item value="imp">Importación</Select.Item>
-            </Select.Content>
-        </Select.Root>
-    </div>
-    <div class="col-span-1 space-y-1">
-        <Label for="operation_type" class="text-xs">Tipo de factura <span class="text-red-500">*</span></Label>
-        <Select.Root
-            type="single"
-            value={formData.invoice_type || ''}
-            onValueChange={(v) => {
-                formData.invoice_type = v ?? '';
-            }}
-        >
-            <Select.Trigger id="invoice_type" class="h-7 text-xs">
-                <span class="truncate">
-                    {formData.invoice_type 
-                        ? `${formData.invoice_type}`
-                        : '...'}
-                </span>
-            </Select.Trigger>
-            <Select.Content class="max-h-[300px]">
-                {#each invoiceTypes as type}
-                    <Select.Item value={type.key}>
-                        {type.key} - {type.description}
-                    </Select.Item>
-                {/each}
-            </Select.Content>
-        </Select.Root>
-    </div>   
+<div class="grid grid-cols-12 items-end gap-3 pb-3">
+	<div class="col-span-1 space-y-1">
+		<Label for="operation_type" class="text-xs"
+			>Tipo de Operación<span class="text-red-500">*</span></Label
+		>
+		<Select.Root
+			type="single"
+			value={formData.operation_type || ''}
+			onValueChange={(v) => {
+				formData.operation_type = v;
+			}}
+		>
+			<Select.Trigger id="operation_type" class="h-8 text-sm">
+				<span class="truncate">
+					{formData.operation_type ? (formData.operation_type === 'exp' ? 'Exp' : 'Imp') : '...'}
+				</span>
+			</Select.Trigger>
+			<Select.Content>
+				<Select.Item value="exp">Exportación</Select.Item>
+				<Select.Item value="imp">Importación</Select.Item>
+			</Select.Content>
+		</Select.Root>
+	</div>
+	<div class="col-span-1 space-y-1">
+		<Label for="operation_type" class="text-xs"
+			>Tipo de factura <span class="text-red-500">*</span></Label
+		>
+		<Select.Root
+			type="single"
+			value={formData.invoice_type || ''}
+			onValueChange={(v) => {
+				formData.invoice_type = v ?? '';
+			}}
+		>
+			<Select.Trigger id="invoice_type" class="h-7 text-xs">
+				<span class="truncate">
+					{formData.invoice_type ? `${formData.invoice_type}` : '...'}
+				</span>
+			</Select.Trigger>
+			<Select.Content class="max-h-[300px]">
+				{#each invoiceTypes as type}
+					<Select.Item value={type.key}>
+						{type.key} - {type.description}
+					</Select.Item>
+				{/each}
+			</Select.Content>
+		</Select.Root>
+	</div>
 
-    <div class="col-span-1 space-y-1 pb-1 items-center flex flex-col">
-        <Label for="is_pedimento_pending" class="text-xs">Pedimento Pendiente?</Label>
-        <Switch 
-            id="is_pedimento_pending" 
-            checked={formData.is_pedimento_pending}
-            onCheckedChange={(checked) => {
-                formData.is_pedimento_pending = checked;
-            }}
-        />   
-    </div>
-    <div class="col-span-2 space-y-1">
-        <Label for="pedimento" class="text-xs">Pedimento</Label>
-        <Select.Root
-            type="single"
-            value={formData.pedimento_id ? String(formData.pedimento_id) : ''}
-            onValueChange={(v) => {
-                formData.pedimento_id = v ? parseInt(v) : null;
-                if (v) {
-                    handlePedimentoChange(v);
-                }
-            }}
-        >
-            <Select.Trigger id="pedimento" class="h-8 text-sm">
-                <span class="truncate">
-                    {formData.pedimento || 'Selecciona pedimento...'}
-                </span>
-            </Select.Trigger>
-            <Select.Content class="max-h-[300px]">
-                {#each pedimentos as pedimento}
-                    <Select.Item value={String(pedimento.id)}>
-                        {pedimento.customs_office?.slice(0, 2)}-{pedimento.license}-{pedimento.pedimento_number}
-                    </Select.Item>
-                {/each}
-            </Select.Content>
-        </Select.Root>
-    </div>
+	<div class="col-span-1 flex flex-col items-center space-y-1 pb-1">
+		<Label for="is_pedimento_pending" class="text-xs">Pedimento Pendiente?</Label>
+		<Switch
+			id="is_pedimento_pending"
+			checked={formData.is_pedimento_pending}
+			onCheckedChange={(checked) => {
+				formData.is_pedimento_pending = checked;
+			}}
+		/>
+	</div>
+	<div class="col-span-2 space-y-1">
+		<Label for="pedimento" class="text-xs">Pedimento</Label>
+		<Select.Root
+			type="single"
+			value={formData.pedimento_id ? String(formData.pedimento_id) : ''}
+			onValueChange={(v) => {
+				formData.pedimento_id = v ? parseInt(v) : null;
+				if (v) {
+					handlePedimentoChange(v);
+				}
+			}}
+		>
+			<Select.Trigger id="pedimento" class="h-8 text-sm">
+				<span class="truncate">
+					{formData.pedimento || 'Selecciona pedimento...'}
+				</span>
+			</Select.Trigger>
+			<Select.Content class="max-h-[300px]">
+				{#each pedimentos as pedimento}
+					<Select.Item value={String(pedimento.id)}>
+						{pedimento.customs_office?.slice(0, 2)}-{pedimento.license}-{pedimento.pedimento_number}
+					</Select.Item>
+				{/each}
+			</Select.Content>
+		</Select.Root>
+	</div>
 
-    <div class="col-span-1 space-y-1">
-        <Label for="remesa" class="text-xs">Remesa</Label>
-        <Input id="remesa" bind:value={formData.remesa} class="h-8 text-sm" />
-    </div>
+	<div class="col-span-1 space-y-1">
+		<Label for="remesa" class="text-xs">Remesa</Label>
+		<Input id="remesa" bind:value={formData.remesa} class="h-8 text-sm" />
+	</div>
 
-    <div class="col-span-2 space-y-1">
-        <Label for="invoice_number" class="text-xs">Núm. Factura <span class="text-red-500">*</span></Label>
-        <Input id="invoice_number" bind:value={formData.invoice_number} class="h-8 text-sm font-medium" required />
-    </div>
+	<div class="col-span-2 space-y-1">
+		<Label for="invoice_number" class="text-xs"
+			>Núm. Factura <span class="text-red-500">*</span></Label
+		>
+		<Input
+			id="invoice_number"
+			bind:value={formData.invoice_number}
+			class="h-8 text-sm font-medium"
+			required
+		/>
+	</div>
 
-    <div class="col-span-2 space-y-1">
-        <Label for="invoice_date" class="text-xs">Fecha Factura <span class="text-red-500">*</span></Label>
-        <Input id="invoice_date" type="date" bind:value={formData.invoice_date} class="h-8 text-sm" />
-    </div>
+	<div class="col-span-2 space-y-1">
+		<Label for="invoice_date" class="text-xs"
+			>Fecha Factura <span class="text-red-500">*</span></Label
+		>
+		<Input id="invoice_date" type="date" bind:value={formData.invoice_date} class="h-8 text-sm" />
+	</div>
 
-    <div class="col-span-2 space-y-1">
-        <Label for="emission_date" class="text-xs">Fecha Emisión</Label>
-        <Input id="emission_date" type="date" bind:value={formData.emission_date} class="h-8 text-sm" />
-    </div>
+	<div class="col-span-2 space-y-1">
+		<Label for="emission_date" class="text-xs">Fecha Emisión</Label>
+		<Input id="emission_date" type="date" bind:value={formData.emission_date} class="h-8 text-sm" />
+	</div>
 </div>
diff --git a/frontend/src/routes/dashboard/invoices/edit/[id]/+page.svelte b/frontend/src/routes/dashboard/invoices/edit/[id]/+page.svelte
index a28a8c3f..c59dd75e 100644
--- a/frontend/src/routes/dashboard/invoices/edit/[id]/+page.svelte
+++ b/frontend/src/routes/dashboard/invoices/edit/[id]/+page.svelte
@@ -109,6 +109,9 @@
 		data.invoice?.financials?.exchange_rate ?? null
 	);
 
+	// Guardar la fecha inicial para detectar cambios manuales
+	let initialInvoiceDate = data.invoice?.invoice_date || '';
+
 	let showExchangeRateDialog = $state(false);
 	let missingExchangeRateDate = $state('');
 
@@ -149,13 +152,32 @@
 
 	// Efecto para actualizar el tipo de cambio cuando cambia la fecha de factura
 	$effect(() => {
-		if (mounted && companyStore?.activeCompany?.id && InvoiceTopFieldsFormData?.invoice_date) {
-			getExchangeRateByDate(InvoiceTopFieldsFormData.invoice_date, companyStore.activeCompany.id)
+		const currentDate = InvoiceTopFieldsFormData?.invoice_date;
+
+		// Solo proceder si:
+		// 1. Tenemos datos cargados y compañía activa
+		// 2. Es una factura nueva (isCreate)
+		// 3. O la fecha es distinta a la original (el usuario la cambió)
+		// 4. O no tenemos ningún tipo de cambio todavía
+
+		const shouldFetch =
+			mounted &&
+			companyStore?.activeCompany?.id &&
+			currentDate &&
+			(data.isCreate || currentDate !== initialInvoiceDate || !calculatedExchangeRate);
+
+		if (shouldFetch) {
+			getExchangeRateByDate(currentDate, companyStore.activeCompany.id)
 				.then((rate) => {
 					if (rate) {
 						calculatedExchangeRate = rate.value;
 					} else {
-						calculatedExchangeRate = 0;
+						// Si no hay en catálogo, pero YA teníamos uno en la factura (y no cambió fecha), NO poner 0
+						if (currentDate === initialInvoiceDate && data.invoice?.financials?.exchange_rate) {
+							calculatedExchangeRate = data.invoice.financials.exchange_rate;
+						} else {
+							calculatedExchangeRate = 0;
+						}
 					}
 				})
 				.catch((err) => console.error('Error auto-updating exchange rate:', err));
@@ -293,7 +315,7 @@
 							: null}
 						Nueva Factura
 						{#if invoiceTypeInfo}
-							<span class="text-muted-foreground font-normal text-2xl">
+							<span class="text-2xl font-normal text-muted-foreground">
 								- {invoiceTypeInfo.description}
 							</span>
 						{/if}
@@ -420,9 +442,9 @@
 	}}
 />
 <div
-	class="fixed bottom-0 left-0 right-0 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80 border-t shadow-lg z-[5] group-has-data-[state=collapsed]/sidebar-wrapper:ml-[calc(var(--sidebar-width-icon))] ml-[calc(var(--sidebar-width))]"
+	class="fixed right-0 bottom-0 left-0 z-[5] ml-[calc(var(--sidebar-width))] border-t bg-background/95 shadow-lg backdrop-blur group-has-data-[state=collapsed]/sidebar-wrapper:ml-[calc(var(--sidebar-width-icon))] supports-[backdrop-filter]:bg-background/80"
 >
-	<div class="px-4 py-4 space-y-4 max-w-[1400px] mx-auto">
+	<div class="mx-auto max-w-[1400px] space-y-4 px-4 py-4">
 		<!-- Tabs Navigation -->
 		<Tabs.Root bind:value={activeTab}>
 			<div class="w-full overflow-x-auto pb-2">

From 99d81e66b96abec27209d41f0b98bf02be3a1f6d Mon Sep 17 00:00:00 2001
From: Kevin_Ramirez <kramirez@aduanasoft.com.mx>
Date: Mon, 9 Feb 2026 13:39:03 -0600
Subject: [PATCH 2/2] Tipo de cambio actualizado

---
 .../exchange_rate/create-edit-dialog.svelte   |  570 ++++----
 .../exchange_rate/exchange-rate-guard.svelte  |   38 +-
 .../invoices/edit/general-tab-form.svelte     | 1197 +++++++++--------
 frontend/src/lib/stores/ui.svelte.ts          |   17 +
 frontend/src/routes/dashboard/+layout.svelte  |   20 +-
 .../dashboard/invoices/edit/[id]/+page.svelte |   75 +-
 6 files changed, 1042 insertions(+), 875 deletions(-)
 create mode 100644 frontend/src/lib/stores/ui.svelte.ts

diff --git a/frontend/src/lib/components/dashboard/exchange_rate/create-edit-dialog.svelte b/frontend/src/lib/components/dashboard/exchange_rate/create-edit-dialog.svelte
index f85eec38..babfe641 100644
--- a/frontend/src/lib/components/dashboard/exchange_rate/create-edit-dialog.svelte
+++ b/frontend/src/lib/components/dashboard/exchange_rate/create-edit-dialog.svelte
@@ -1,287 +1,327 @@
 <script lang="ts">
-    import { Button } from "$lib/components/ui/button";
-    import * as Dialog from "$lib/components/ui/dialog";
-    import * as AlertDialog from "$lib/components/ui/alert-dialog";
-    import { Input } from "$lib/components/ui/input";
-    import { Label } from "$lib/components/ui/label";
-    import { toast } from "svelte-sonner";
-    import { 
-        createExchangeRate, 
-        updateExchangeRate, 
-        type ExchangeRate,
-        getDofExchangeRate
-    } from "$lib/api/dashboard/a76/general_catalogs/exchange-rate"; 
-    import { companyStore } from "$lib/stores/company.svelte";
-    import { Scale, BadgeDollarSign, Info, AlertCircle, ArrowRight, CloudDownload } from "lucide-svelte";
-    import { fly, scale } from 'svelte/transition';
-    import { cubicOut } from 'svelte/easing';
+	import { Button } from '$lib/components/ui/button';
+	import * as Dialog from '$lib/components/ui/dialog';
+	import * as AlertDialog from '$lib/components/ui/alert-dialog';
+	import { Input } from '$lib/components/ui/input';
+	import { Label } from '$lib/components/ui/label';
+	import { toast } from 'svelte-sonner';
+	import {
+		createExchangeRate,
+		updateExchangeRate,
+		type ExchangeRate,
+		getDofExchangeRate
+	} from '$lib/api/dashboard/a76/general_catalogs/exchange-rate';
+	import { companyStore } from '$lib/stores/company.svelte';
+	import {
+		Scale,
+		BadgeDollarSign,
+		Info,
+		AlertCircle,
+		ArrowRight,
+		CloudDownload
+	} from 'lucide-svelte';
+	import { fly, scale } from 'svelte/transition';
+	import { cubicOut } from 'svelte/easing';
 
-    let {
-        open = $bindable(false),
-        item = null,
-        onSuccess,
-        overlayClass = "bg-black/80 backdrop-blur-sm",
-        initialDate = ""
-    }: {
-        open: boolean;
-        item?: ExchangeRate | null;
-        onSuccess?: () => void;
-        overlayClass?: string;
-        initialDate?: string;
-    } = $props();
+	let {
+		open = $bindable(false),
+		item = null,
+		onSuccess,
+		overlayClass = 'bg-black/80 backdrop-blur-sm',
+		initialDate = ''
+	}: {
+		open: boolean;
+		item?: ExchangeRate | null;
+		onSuccess?: () => void;
+		overlayClass?: string;
+		initialDate?: string;
+	} = $props();
 
-    const isEdit = $derived(!!item);
-    const isMissingRateContext = $derived(!isEdit && initialDate);
-    const title = $derived(
-        isEdit ? "Editar Tipo de Cambio" : 
-        isMissingRateContext ? "Tipo de Cambio Requerido" : "Nuevo Tipo de Cambio"
-    );
+	const isEdit = $derived(!!item);
+	const isMissingRateContext = $derived(!isEdit && initialDate);
+	const title = $derived(
+		isEdit
+			? 'Editar Tipo de Cambio'
+			: isMissingRateContext
+				? 'Tipo de Cambio Requerido'
+				: 'Nuevo Tipo de Cambio'
+	);
 
-    let formData = $state({
-        date: '',
-        value: null as number | null,
-        local_currency: '',
-        foreign_currency: ''
-    });
+	let formData = $state({
+		date: '',
+		value: null as number | null,
+		local_currency: '',
+		foreign_currency: ''
+	});
 
-    let loading = $state(false);
-    let scraping = $state(false);
-    let error = $state<string | null>(null);
-    let showConfirmation = $state(false);
+	let loading = $state(false);
+	let scraping = $state(false);
+	let error = $state<string | null>(null);
+	let showConfirmation = $state(false);
 
-    // Cargar datos al abrir
-    $effect(() => {
-        if (open) {
-            if (item && item.date) {
-                const formattedDate = item.date.includes('T') ? item.date.split('T')[0] : item.date;
-                formData = {
-                    date: formattedDate,
-                    value: item.value,
-                    local_currency: item.local_currency || '',
-                    foreign_currency: item.foreign_currency || ''
-                };
-            } else {
-                formData = {
-                    date: initialDate || new Date().toISOString().split('T')[0],
-                    value: null,
-                    local_currency: 'MXN',
-                    foreign_currency: 'USD'
-                };
-                
-                // Si es modo contexto (falta dato) y tenemos fecha, intentar cargar automáticamente del DOF
-                if (initialDate && !item) {
-                     // Opcional: Auto-consultar
-                     // fetchFromDof(initialDate);
-                }
-            }
-            error = null;
-        }
-    });
+	// Cargar datos al abrir
+	$effect(() => {
+		if (open) {
+			if (item && item.date) {
+				const formattedDate = item.date.includes('T') ? item.date.split('T')[0] : item.date;
+				formData = {
+					date: formattedDate,
+					value: item.value,
+					local_currency: item.local_currency || '',
+					foreign_currency: item.foreign_currency || ''
+				};
+			} else {
+				formData = {
+					date: initialDate || new Date().toISOString().split('T')[0],
+					value: null,
+					local_currency: 'MXN',
+					foreign_currency: 'USD'
+				};
 
-    async function fetchFromDof(date: string) {
-        if (!date) return;
-        scraping = true;
-        error = null;
-        try {
-            const response = await getDofExchangeRate(date);
-            // The API returns an ApiResponse object, so we need to access response.data
-            // response.data contains { success: boolean, value: number, message: string }
-            if (response.data?.success && response.data?.value) {
-                formData.value = response.data.value;
-                toast.success(`Tipo de cambio obtenido del DOF: ${response.data.value}`);
-            } else {
-                toast.error(response.data?.message || response.error || 'No se pudo obtener el dato del DOF');
-                // No bloquear, permitir manual
-            }
-        } catch (e) {
-            console.error(e);
-            toast.error('Error al consultar el servicio del DOF');
-        } finally {
-            scraping = false;
-        }
-    }
+				// Si es modo contexto (falta dato) y tenemos fecha, intentar cargar automáticamente del DOF
+				if (initialDate && !item) {
+					// Opcional: Auto-consultar
+					// fetchFromDof(initialDate);
+				}
+			}
+			error = null;
+		}
+	});
 
-    function handleSubmit() {
-        error = null;
-        try {
-            const companyId = companyStore.activeCompany?.id;
-            if (!companyId) throw new Error('No hay una compañía seleccionada');
-            if (!formData.date) throw new Error('La fecha es requerida');
-            if (formData.value === null) throw new Error('El valor es requerido');
-            
-            showConfirmation = true;
-        } catch (e) {
-            error = e instanceof Error ? e.message : 'Error al validar';
-        }
-    }
+	async function fetchFromDof(date: string) {
+		if (!date) return;
+		scraping = true;
+		error = null;
+		try {
+			const response = await getDofExchangeRate(date);
+			// The API returns an ApiResponse object, so we need to access response.data
+			// response.data contains { success: boolean, value: number, message: string }
+			if (response.data?.success && response.data?.value) {
+				formData.value = response.data.value;
+				toast.success(`Tipo de cambio obtenido del DOF: ${response.data.value}`);
+			} else {
+				toast.error(
+					response.data?.message || response.error || 'No se pudo obtener el dato del DOF'
+				);
+				// No bloquear, permitir manual
+			}
+		} catch (e) {
+			console.error(e);
+			toast.error('Error al consultar el servicio del DOF');
+		} finally {
+			scraping = false;
+		}
+	}
 
-    async function confirmSubmit() {
-        loading = true;
-        error = null;
-        try {
-            const companyId = companyStore.activeCompany?.id;
-            if (!companyId) throw new Error('No hay una compañía seleccionada');
+	function handleSubmit() {
+		error = null;
+		try {
+			const companyId = companyStore.activeCompany?.id;
+			if (!companyId) throw new Error('No hay una compañía seleccionada');
+			if (!formData.date) throw new Error('La fecha es requerida');
+			if (formData.value === null) throw new Error('El valor es requerido');
 
-            const dataToSend = {
-                date: formData.date, 
-                value: Number(formData.value),
-                local_currency: formData.local_currency?.trim().toUpperCase() || null,
-                foreign_currency: formData.foreign_currency?.trim().toUpperCase() || null
-            };
+			showConfirmation = true;
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Error al validar';
+		}
+	}
 
-            if (isEdit && item) {
-                await updateExchangeRate(item.id, dataToSend, companyId);
-                toast.success('Tipo de cambio actualizado correctamente');
-            } else {
-                await createExchangeRate(dataToSend, companyId);
-                toast.success('Tipo de cambio creado correctamente');
-            }
+	async function confirmSubmit() {
+		loading = true;
+		error = null;
+		try {
+			const companyId = companyStore.activeCompany?.id;
+			if (!companyId) throw new Error('No hay una compañía seleccionada');
 
-            showConfirmation = false;
-            open = false;
-            if (onSuccess) onSuccess();
-        } catch (e) {
-            error = e instanceof Error ? e.message : 'Error al guardar';
-            showConfirmation = false;
-        } finally {
-            loading = false;
-        }
-    }
+			const dataToSend = {
+				date: formData.date,
+				value: Number(formData.value),
+				local_currency: formData.local_currency?.trim().toUpperCase() || null,
+				foreign_currency: formData.foreign_currency?.trim().toUpperCase() || null
+			};
+
+			if (isEdit && item) {
+				await updateExchangeRate(item.id, dataToSend, companyId);
+				toast.success('Tipo de cambio actualizado correctamente');
+			} else {
+				await createExchangeRate(dataToSend, companyId);
+				toast.success('Tipo de cambio creado correctamente');
+			}
+
+			showConfirmation = false;
+			open = false;
+			if (onSuccess) onSuccess();
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Error al guardar';
+			showConfirmation = false;
+		} finally {
+			loading = false;
+		}
+	}
 </script>
 
 <Dialog.Root bind:open>
-    <Dialog.Portal>
-        <Dialog.Overlay class="fixed inset-0 z-[9999] {overlayClass}" />
-        
-        <Dialog.Content 
-            class="fixed left-[50%] top-[50%] z-[10000] w-full max-w-[480px] translate-x-[-50%] translate-y-[-50%] border-0 bg-transparent shadow-2xl p-0 sm:rounded-xl overflow-hidden"
-        >
-            <div class="bg-background flex flex-col h-full rounded-xl overflow-hidden border border-border">
-                
-                {#if isMissingRateContext}
-                    <div class="bg-amber-50 dark:bg-amber-950/40 p-5 flex gap-4 border-b border-amber-100 dark:border-amber-900/50">
-                        <div class="bg-amber-100 dark:bg-amber-900/60 p-2.5 rounded-full h-fit shadow-sm shrink-0">
-                            <AlertCircle class="text-amber-600 dark:text-amber-400" size={24} />
-                        </div>
-                        <div class="space-y-1">
-                            <h3 class="font-semibold text-amber-900 dark:text-amber-100 text-lg leading-tight">
-                                {title}
-                            </h3>
-                            <p class="text-sm text-amber-800/80 dark:text-amber-200/80 leading-relaxed">
-                                Para continuar con el guardado, es necesario registrar el tipo de cambio oficial para esta fecha.
-                            </p>
-                        </div>
-                    </div>
-                {:else}
-                    <Dialog.Header class="p-6 pb-2">
-                        <Dialog.Title class="flex items-center gap-2 text-xl">
-                            <BadgeDollarSign class="text-primary" />
-                            {title}
-                        </Dialog.Title>
-                    </Dialog.Header>
-                {/if}
+	<Dialog.Portal>
+		<Dialog.Overlay class="fixed inset-0 z-[9999] {overlayClass}" />
 
-                <form onsubmit={(e) => { e.preventDefault(); handleSubmit(); }} class="p-6 pt-4 space-y-6">
-                    {#if error}
-                        <div class="rounded-lg bg-destructive/10 border border-destructive/20 p-3 flex gap-3 text-sm text-destructive" transition:fly={{ y: -10 }}>
-                            <AlertCircle size={16} class="mt-0.5 shrink-0" />
-                            <span class="font-medium">{error}</span>
-                        </div>
-                    {/if}
+		<Dialog.Content
+			class="fixed top-[50%] left-[50%] z-[10000] w-full max-w-[480px] translate-x-[-50%] translate-y-[-50%] overflow-hidden border-0 bg-transparent p-0 shadow-2xl sm:rounded-xl"
+		>
+			<div
+				class="flex h-full flex-col overflow-hidden rounded-xl border border-border bg-background"
+			>
+				{#if isMissingRateContext}
+					<div
+						class="flex gap-4 border-b border-amber-100 bg-amber-50 p-5 dark:border-amber-900/50 dark:bg-amber-950/40"
+					>
+						<div
+							class="h-fit shrink-0 rounded-full bg-amber-100 p-2.5 shadow-sm dark:bg-amber-900/60"
+						>
+							<AlertCircle class="text-amber-600 dark:text-amber-400" size={24} />
+						</div>
+						<div class="space-y-1">
+							<h3 class="text-lg leading-tight font-semibold text-amber-900 dark:text-amber-100">
+								{title}
+							</h3>
+							<p class="text-sm leading-relaxed text-amber-800/80 dark:text-amber-200/80">
+								Para continuar con el guardado, es necesario registrar el tipo de cambio oficial
+								para esta fecha.
+							</p>
+						</div>
+					</div>
+				{:else}
+					<Dialog.Header class="p-6 pb-2">
+						<Dialog.Title class="flex items-center gap-2 text-xl">
+							<BadgeDollarSign class="text-primary" />
+							{title}
+						</Dialog.Title>
+					</Dialog.Header>
+				{/if}
 
-                    <div class="grid gap-5">
-                        <div class="grid gap-2">
-                            <Label for="date" class="text-sm font-medium text-muted-foreground ml-1">Fecha Aplicable</Label>
-                            <div class="relative">
-                                <Input 
-                                    id="date" 
-                                    type="date" 
-                                    bind:value={formData.date} 
-                                    disabled={loading} 
-                                    required 
-                                    class="pl-3 h-11 text-base bg-muted/30 focus:bg-background transition-colors"
-                                />
-                                {#if isMissingRateContext}
-                                    <div class="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-amber-600 font-medium bg-amber-100 px-2 py-0.5 rounded-full">
-                                        Requerida
-                                    </div>
-                                {/if}
-                            </div>
-                        </div>
+				<form
+					onsubmit={(e) => {
+						e.preventDefault();
+						handleSubmit();
+					}}
+					class="space-y-6 p-6 pt-4"
+				>
+					{#if error}
+						<div
+							class="flex gap-3 rounded-lg border border-destructive/20 bg-destructive/10 p-3 text-sm text-destructive"
+							transition:fly={{ y: -10 }}
+						>
+							<AlertCircle size={16} class="mt-0.5 shrink-0" />
+							<span class="font-medium">{error}</span>
+						</div>
+					{/if}
 
-                        <div class="grid gap-2">
-                             <div class="flex items-center justify-between">
-                                <Label for="value" class="text-sm font-medium text-muted-foreground ml-1">Tipo de Cambio (MXN/USD)</Label>
-                                <Button 
-                                    type="button" 
-                                    variant="ghost" 
-                                    size="sm" 
-                                    class="h-6 text-xs text-primary hover:text-primary/80 px-2 -mr-2"
-                                    disabled={scraping || loading || !formData.date}
-                                    onclick={() => fetchFromDof(formData.date)}
-                                >
-                                    {#if scraping}
-                                        <span class="animate-spin mr-1.5">⟳</span> Consultando...
-                                    {:else}
-                                        <CloudDownload size={14} class="mr-1.5" /> Consultar DOF
-                                    {/if}
-                                </Button>
-                            </div>
-                            <div class="relative group">
-                                <div class="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground font-semibold">$</div>
-                                <Input 
-                                    id="value" 
-                                    type="number" 
-                                    step="0.0001" 
-                                    bind:value={formData.value} 
-                                    disabled={loading} 
-                                    required 
-                                    placeholder="0.0000"
-                                    class="pl-7 h-11 text-lg font-mono tracking-wide focus:ring-2 ring-primary/20 transition-all group-hover:border-primary/50"
-                                    autofocus
-                                />
-                            </div>
-                            <p class="text-[11px] text-muted-foreground text-right px-1">
-                                Ej. 24.1234
-                            </p>
-                        </div>
-                    </div>
+					<div class="grid gap-5">
+						<div class="grid gap-2">
+							<Label for="date" class="ml-1 text-sm font-medium text-muted-foreground"
+								>Fecha Aplicable</Label
+							>
+							<div class="relative">
+								<Input
+									id="date"
+									type="date"
+									bind:value={formData.date}
+									disabled={loading}
+									required
+									class="h-11 bg-muted/30 pl-3 text-base transition-colors focus:bg-background"
+								/>
+								{#if isMissingRateContext}
+									<div
+										class="absolute top-1/2 right-3 -translate-y-1/2 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-600"
+									>
+										Requerida
+									</div>
+								{/if}
+							</div>
+						</div>
 
-                    <Dialog.Footer class="grid grid-cols-4 gap-2 pt-2">
-                        <Button type="button" variant="outline" class="w-full text-xs" disabled>
-                            Cargar TC
-                        </Button>
-                        <Button type="button" variant="outline" class="w-full text-xs" disabled>
-                            Ayuda
-                        </Button>
-                        <Button type="button" variant="ghost" onclick={() => open = false} disabled={loading} class="w-full hover:bg-muted/50">
-                            Cancelar
-                        </Button>
-                        <Button type="submit" disabled={loading} class="w-full shadow-sm font-medium">
-                            {#if loading}
-                                <span class="animate-spin mr-2">⟳</span>
-                            {:else}
-                                Ok
-                            {/if}
-                        </Button>
-                    </Dialog.Footer>
-                </form>
-            </div>
-        </Dialog.Content>
-    </Dialog.Portal>
+						<div class="grid gap-2">
+							<div class="flex items-center justify-between">
+								<Label for="value" class="ml-1 text-sm font-medium text-muted-foreground"
+									>Tipo de Cambio (MXN/USD)</Label
+								>
+								<Button
+									type="button"
+									variant="ghost"
+									size="sm"
+									class="-mr-2 h-6 px-2 text-xs text-primary hover:text-primary/80"
+									disabled={scraping || loading || !formData.date}
+									onclick={() => fetchFromDof(formData.date)}
+								>
+									{#if scraping}
+										<span class="mr-1.5 animate-spin">⟳</span> Consultando...
+									{:else}
+										<CloudDownload size={14} class="mr-1.5" /> Consultar DOF
+									{/if}
+								</Button>
+							</div>
+							<div class="group relative">
+								<div
+									class="absolute top-1/2 left-3 -translate-y-1/2 font-semibold text-muted-foreground"
+								>
+									$
+								</div>
+								<Input
+									id="value"
+									type="number"
+									step="0.0001"
+									bind:value={formData.value}
+									disabled={loading}
+									required
+									placeholder="0.0000"
+									class="h-11 pl-7 font-mono text-lg tracking-wide ring-primary/20 transition-all group-hover:border-primary/50 focus:ring-2"
+									autofocus
+								/>
+							</div>
+							<p class="px-1 text-right text-[11px] text-muted-foreground">Ej. 24.1234</p>
+						</div>
+					</div>
+
+					<Dialog.Footer class="grid grid-cols-4 gap-2 pt-2">
+						<Button type="button" variant="outline" class="w-full text-xs" disabled>
+							Cargar TC
+						</Button>
+						<Button type="button" variant="outline" class="w-full text-xs" disabled>Ayuda</Button>
+						<Button
+							type="button"
+							variant="ghost"
+							onclick={() => (open = false)}
+							disabled={loading}
+							class="w-full hover:bg-muted/50"
+						>
+							Cancelar
+						</Button>
+						<Button type="submit" disabled={loading} class="w-full font-medium shadow-sm">
+							{#if loading}
+								<span class="mr-2 animate-spin">⟳</span>
+							{:else}
+								Ok
+							{/if}
+						</Button>
+					</Dialog.Footer>
+				</form>
+			</div>
+		</Dialog.Content>
+	</Dialog.Portal>
 </Dialog.Root>
 
 <AlertDialog.Root bind:open={showConfirmation}>
-    <AlertDialog.Content class="z-[10002]">
-        <AlertDialog.Header>
-            <AlertDialog.Title>¿Estás seguro?</AlertDialog.Title>
-            <AlertDialog.Description>
-                Se {isEdit ? 'actualizará' : 'creará'} el tipo de cambio con valor {formData.value} para el día {formData.date}.
-            </AlertDialog.Description>
-        </AlertDialog.Header>
-        <AlertDialog.Footer>
-            <AlertDialog.Cancel onclick={() => showConfirmation = false}>Cancelar</AlertDialog.Cancel>
-            <AlertDialog.Action onclick={confirmSubmit}>Confirmar</AlertDialog.Action>
-        </AlertDialog.Footer>
-    </AlertDialog.Content>
-</AlertDialog.Root>
\ No newline at end of file
+	<AlertDialog.Content class="z-[10002]">
+		<AlertDialog.Header>
+			<AlertDialog.Title>¿Estás seguro?</AlertDialog.Title>
+			<AlertDialog.Description>
+				Se {isEdit ? 'actualizará' : 'creará'} el tipo de cambio con valor {formData.value} para el día
+				{formData.date}.
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel onclick={() => (showConfirmation = false)}>Cancelar</AlertDialog.Cancel>
+			<AlertDialog.Action onclick={confirmSubmit}>Confirmar</AlertDialog.Action>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>
diff --git a/frontend/src/lib/components/dashboard/exchange_rate/exchange-rate-guard.svelte b/frontend/src/lib/components/dashboard/exchange_rate/exchange-rate-guard.svelte
index 4f703c02..c2c1796d 100644
--- a/frontend/src/lib/components/dashboard/exchange_rate/exchange-rate-guard.svelte
+++ b/frontend/src/lib/components/dashboard/exchange_rate/exchange-rate-guard.svelte
@@ -1,10 +1,16 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { companyStore } from '$lib/stores/company.svelte';
+	import { uiStore } from '$lib/stores/ui.svelte';
 	import { getExchangeRates } from '$lib/api/dashboard/a76/general_catalogs/exchange-rate';
-	import { page } from '$app/state';
 	import CreateEditDialog from './create-edit-dialog.svelte';
 
+	let {
+		overlayClass = 'bg-black/5'
+	}: {
+		overlayClass?: string;
+	} = $props();
+
 	let open = $state(false);
 	let checked = $state(false);
 
@@ -30,8 +36,13 @@
 			const items = response.data?.items || [];
 
 			if (items.length === 0) {
-				console.log('[ExchangeRateGuard] No rate found, opening modal');
-				open = true;
+				console.log('[ExchangeRateGuard] No rate found, attempting to open modal');
+				if (!uiStore.isExchangeRateDialogOpen) {
+					uiStore.isExchangeRateDialogOpen = true;
+					open = true;
+				} else {
+					console.log('[ExchangeRateGuard] Modal already open, skipping');
+				}
 			}
 		} catch (error) {
 			console.error('[ExchangeRateGuard] Error checking exchange rate:', error);
@@ -41,16 +52,31 @@
 	}
 
 	$effect(() => {
-		const isDashboard = page.url.pathname === '/dashboard' || page.url.pathname === '/dashboard/';
-		if (companyStore.activeCompany?.id && !checked && isDashboard) {
+		if (companyStore.activeCompany?.id && !checked) {
 			checkExchangeRate();
 		}
 	});
 
 	function handleSuccess() {
 		console.log('Exchange rate created successfully via guard');
+		uiStore.isExchangeRateDialogOpen = false;
 		checked = true;
 	}
+
+	$effect(() => {
+		// Sincronizar el estado global con el estado local
+		if (open) {
+			uiStore.isExchangeRateDialogOpen = true;
+		} else if (checked) {
+			// Solo limpiar si este componente ya hizo su check inicial
+			// y el estado local es cerrado.
+			// Usamos una pequeña comprobación para no pisar a otros si fuera necesario,
+			// pero como son excluyentes, esto debería bastar.
+			if (uiStore.isExchangeRateDialogOpen && !open) {
+				uiStore.isExchangeRateDialogOpen = false;
+			}
+		}
+	});
 </script>
 
-<CreateEditDialog bind:open onSuccess={handleSuccess} overlayClass="bg-black/20" />
+<CreateEditDialog bind:open onSuccess={handleSuccess} {overlayClass} />
diff --git a/frontend/src/lib/components/dashboard/invoices/edit/general-tab-form.svelte b/frontend/src/lib/components/dashboard/invoices/edit/general-tab-form.svelte
index f9c18642..1166b59a 100644
--- a/frontend/src/lib/components/dashboard/invoices/edit/general-tab-form.svelte
+++ b/frontend/src/lib/components/dashboard/invoices/edit/general-tab-form.svelte
@@ -1,4 +1,4 @@
-<script lang="ts">	
+<script lang="ts">
 	import { Input } from '$lib/components/ui/input';
 	import { Label } from '$lib/components/ui/label';
 	import * as Select from '$lib/components/ui/select';
@@ -14,7 +14,7 @@
 		[key: string]: any;
 	}
 
-	let { 
+	let {
 		invoice,
 		formData = $bindable(),
 		customsBrokers = [],
@@ -29,8 +29,8 @@
 		codePedimentoRegimens = [],
 		operationType = undefined,
 		defaultOperationType = undefined,
-		exchangeRate = undefined 
-	}: { 
+		exchangeRate = undefined
+	}: {
 		invoice: Invoice | null;
 		formData?: any;
 		invoiceTypes?: InvoiceType[];
@@ -51,12 +51,12 @@
 		exchangeRate?: number | null;
 	} = $props();
 
-    // Sync exchangeRate prop to formData
-    $effect(() => {
-        if (exchangeRate !== undefined && formData) {
-            formData.exchange_rate = exchangeRate;        
-        }
-    });
+	// Sync exchangeRate prop to formData
+	$effect(() => {
+		if (exchangeRate !== undefined && formData) {
+			formData.exchange_rate = exchangeRate;
+		}
+	});
 
 	if (!formData) {
 		if (invoice) {
@@ -71,12 +71,12 @@
 				shipped_to_id: invoice.compliance_mx?.shipped_to_id || null,
 				customs_broker_id: invoice.compliance_mx?.customs_broker_id || null,
 				customs_broker_us_id: invoice.compliance_mx?.customs_broker_us_id || null,
-				
+
 				// RIGHT fields
 				currency_type: invoice.financials?.currency_type || '',
-		        currency: invoice.financials?.currency || 'foreign', // foreign, local, manual
-                exchange_rate: invoice.financials?.exchange_rate || null, // Added exchange_rate				
-                weight_type: 'kgs',
+				currency: invoice.financials?.currency || 'foreign', // foreign, local, manual
+				exchange_rate: invoice.financials?.exchange_rate || null, // Added exchange_rate
+				weight_type: 'kgs',
 				iva_factor: invoice.financials?.iva_factor || null,
 				carrier_id: invoice.logistics?.carrier_id || null,
 				transport_id: invoice.logistics?.transport_id || '',
@@ -84,8 +84,8 @@
 				transport_type: invoice.logistics?.transport_type || '',
 				transport_num: invoice.logistics?.vehicle_num || '',
 				aduana: invoice.compliance_mx?.aduana || '',
-				document_type: invoice.document_type || '',
-			};            
+				document_type: invoice.document_type || ''
+			};
 		} else {
 			// Creando una nueva factura
 			formData = {
@@ -98,7 +98,7 @@
 				shipped_to_id: null,
 				customs_broker_id: null,
 				customs_broker_us_id: null,
-				
+
 				// RIGHT fields
 				currency_type: '',
 				currency: 'foreign', // foreign, local, manual
@@ -111,7 +111,7 @@
 				transport_type: '',
 				transport_num: '',
 				aduana: '',
-				document_type: '',
+				document_type: ''
 			};
 		}
 	} else {
@@ -160,59 +160,70 @@
 	const soldToHeaderOptions = $derived([
 		{ value: 'consignado_a', label: 'Consignado a' },
 		{ value: 'vendido_a', label: 'Vendido a' },
-		{ value: operationType === 1 ? 'exportado_a' : 'importador', label: operationType === 1 ? 'Exportado a' : 'Importador' }
+		{
+			value: operationType === 1 ? 'exportado_a' : 'importador',
+			label: operationType === 1 ? 'Exportado a' : 'Importador'
+		}
 	]);
 
 	const shippedToHeaderOptions = $derived(
 		operationType === 1
 			? [
-				{ value: 'enviado_por', label: 'Enviado Por' },
-				{ value: 'destinatario', label: 'Destinatario' },
-				{ value: 'vendido_por', label: 'Vendido Por' },
-				{ value: 'consignado_a', label: 'Consignado a' },
-				{ value: 'vendido_a', label: 'Vendido a' },
-				{ value: 'exportado_a', label: 'Exportado a' },
-				{ value: 'enviado_a', label: 'Enviado a' },
-				{ value: 'transferido_a', label: 'Transferido a' },
-				{ value: 'donado_a', label: 'Donado a' },
-				{ value: 'notificar_a', label: 'Notificar a' }
-			]
+					{ value: 'enviado_por', label: 'Enviado Por' },
+					{ value: 'destinatario', label: 'Destinatario' },
+					{ value: 'vendido_por', label: 'Vendido Por' },
+					{ value: 'consignado_a', label: 'Consignado a' },
+					{ value: 'vendido_a', label: 'Vendido a' },
+					{ value: 'exportado_a', label: 'Exportado a' },
+					{ value: 'enviado_a', label: 'Enviado a' },
+					{ value: 'transferido_a', label: 'Transferido a' },
+					{ value: 'donado_a', label: 'Donado a' },
+					{ value: 'notificar_a', label: 'Notificar a' }
+				]
 			: [
-				{ value: 'enviado_a', label: 'Enviado a' },
-				{ value: 'transferido_a', label: 'Transferido a' }
-			]
+					{ value: 'enviado_a', label: 'Enviado a' },
+					{ value: 'transferido_a', label: 'Transferido a' }
+				]
 	);
 
 	// Combinar clientes y proveedores para shipped_to, evitando duplicados de tipo "both"
 	const allClientsProviders = $derived.by(() => {
 		const uniqueMap = new Map();
-		
+
 		// Agregar todos los clientes
-		clients.forEach(c => {
+		clients.forEach((c) => {
 			uniqueMap.set(c.id, { ...c, type: c.client_or_provider });
 		});
-		
+
 		// Agregar proveedores solo si no existen (evita duplicados de "both")
-		providers.forEach(p => {
+		providers.forEach((p) => {
 			if (!uniqueMap.has(p.id)) {
 				uniqueMap.set(p.id, { ...p, type: p.client_or_provider });
 			}
 		});
-		
+
 		return Array.from(uniqueMap.values());
 	});
 
 	// Determinar tipo de código basado en operationType prop, defaultOperationType o invoice.operation_type
 	const typeCode = $derived(
-		operationType === 1 ? 'E' 
-		: operationType === 2 ? 'I'
-		: defaultOperationType === 1 ? 'E'
-		: defaultOperationType === 2 ? 'I'
-		: defaultOperationType === 'exp' ? 'E'
-		: defaultOperationType === 'imp' ? 'I'
-		: invoice?.operation_type === 'exp' ? 'E'
-		: invoice?.operation_type === 'imp' ? 'I'
-		: null
+		operationType === 1
+			? 'E'
+			: operationType === 2
+				? 'I'
+				: defaultOperationType === 1
+					? 'E'
+					: defaultOperationType === 2
+						? 'I'
+						: defaultOperationType === 'exp'
+							? 'E'
+							: defaultOperationType === 'imp'
+								? 'I'
+								: invoice?.operation_type === 'exp'
+									? 'E'
+									: invoice?.operation_type === 'imp'
+										? 'I'
+										: null
 	);
 
 	// Filtrar regímenes por tipo de operación (1='E' exp, 2='I' imp) y obtener valores únicos
@@ -220,22 +231,22 @@
 		!codePedimentoRegimens || codePedimentoRegimens.length === 0 || !typeCode
 			? []
 			: Array.from(
-				codePedimentoRegimens
-					.filter(r => r.type_code === typeCode)
-					.reduce((map, r) => {
-						if (r.regimen_code && !map.has(r.regimen_code)) {
-							map.set(r.regimen_code, r);
-						}
-						return map;
-					}, new Map<string, CodePedimentoRegimen>())
-					.values()
-			)
+					codePedimentoRegimens
+						.filter((r) => r.type_code === typeCode)
+						.reduce((map, r) => {
+							if (r.regimen_code && !map.has(r.regimen_code)) {
+								map.set(r.regimen_code, r);
+							}
+							return map;
+						}, new Map<string, CodePedimentoRegimen>())
+						.values()
+				)
 	);
 
 	// Efecto: Limpiar régimen si no existe en los regímenes filtrados al cambiar operation_type
 	$effect(() => {
 		if (formData.document_type && filteredRegimens.length > 0) {
-			const regimenExists = filteredRegimens.some(r => r.regimen_code === formData.document_type);
+			const regimenExists = filteredRegimens.some((r) => r.regimen_code === formData.document_type);
 			if (!regimenExists) {
 				formData.document_type = '';
 			}
@@ -245,532 +256,572 @@
 
 <!-- Layout de 2 columnas compacto -->
 <div class="grid grid-cols-2 gap-4">
-    <!-- Columna Izquierda: Clientes - Proveedores - Agente Aduanal -->
-    <div class="border rounded-md p-3 space-y-3">
-        <div class="space-y-2">
-            <h4 class="text-xs font-semibold text-muted-foreground uppercase">Datos del pedimento</h4>
-            <div class="grid grid-cols-4 gap-3 text-xs">
-                <div>
-                    <span class="text-muted-foreground">Fecha del:</span>
-                    <p class="font-medium">{formData.fecha_pedimento_del || '-'}</p>
-                </div>
-                <div>
-                    <span class="text-muted-foreground">Fecha al:</span>
-                    <p class="font-medium">{formData.fecha_pedimento_al || '-'}</p>
-                </div>
-                <div>
-                    <span class="text-muted-foreground">Clave:</span>
-                    <p class="font-medium">{formData.clave_pedimento || '-'}</p>
-                </div>
-                <div>
-                    <span class="text-muted-foreground">Régimen:</span>
-                    <p class="font-medium">{formData.regimen_pedimento || '-'}</p>
-                </div>
-            </div>
-        </div>
+	<!-- Columna Izquierda: Clientes - Proveedores - Agente Aduanal -->
+	<div class="space-y-3 rounded-md border p-3">
+		<div class="space-y-2">
+			<h4 class="text-xs font-semibold text-muted-foreground uppercase">Datos del pedimento</h4>
+			<div class="grid grid-cols-4 gap-3 text-xs">
+				<div>
+					<span class="text-muted-foreground">Fecha del:</span>
+					<p class="font-medium">{formData.fecha_pedimento_del || '-'}</p>
+				</div>
+				<div>
+					<span class="text-muted-foreground">Fecha al:</span>
+					<p class="font-medium">{formData.fecha_pedimento_al || '-'}</p>
+				</div>
+				<div>
+					<span class="text-muted-foreground">Clave:</span>
+					<p class="font-medium">{formData.clave_pedimento || '-'}</p>
+				</div>
+				<div>
+					<span class="text-muted-foreground">Régimen:</span>
+					<p class="font-medium">{formData.regimen_pedimento || '-'}</p>
+				</div>
+			</div>
+		</div>
 
-        <h4 class="text-xs font-semibold text-muted-foreground uppercase">Clientes - Proveedores - Agente Aduanal</h4>
-        <div class="grid grid-cols-4 gap-3 space-y-1.5">            
-            <Select.Root
-                type="single"
-                value={formData.provider_header || providerHeaderOptions[0]?.value || ''}
-                onValueChange={(v) => {
-                    formData.provider_header = v ?? '';
-                }}
-            >
-                <Select.Trigger id="provider_header" class="h-7 text-xs min-w-[125px] max-w-[250px]">
-                    <span class="truncate">
-                        {providerHeaderOptions.find(o => o.value === (formData.provider_header || providerHeaderOptions[0]?.value))?.label || 'Selecciona encabezado...'}
-                    </span>
-                </Select.Trigger>
-                <Select.Content>
-                    {#each providerHeaderOptions as option}
-                        <Select.Item value={option.value}>
-                            {option.label}
-                        </Select.Item>
-                    {/each}
-                </Select.Content>
-            </Select.Root>
-            <Select.Root
-                type="single"
-                value={formData.provider_id ? String(formData.provider_id) : ''}
-                onValueChange={(v) => {
-                    formData.provider_id = v ? parseInt(v) : null;
-                }}
-            >
-                <Select.Trigger id="provider_id" class="h-7 text-xs min-w-[120px] max-w-[250px]">
-                    <span class="truncate">
-                        {#if formData.provider_id}
-                            {providers.find(p => p.id === formData.provider_id)?.name || 'Selecciona...'}
-                        {:else}
-                            Selecciona...
-                        {/if}
-                    </span>
-                </Select.Trigger>
-                <Select.Content class="max-h-[300px]">
-                    {#each providers as provider}
-                        <Select.Item value={String(provider.id)}>
-                            {provider.name}
-                        </Select.Item>
-                    {/each}
-                </Select.Content>
-            </Select.Root>			
-            <span class="text-red-500">*</span>            
-        </div>
+		<h4 class="text-xs font-semibold text-muted-foreground uppercase">
+			Clientes - Proveedores - Agente Aduanal
+		</h4>
+		<div class="grid grid-cols-4 gap-3 space-y-1.5">
+			<Select.Root
+				type="single"
+				value={formData.provider_header || providerHeaderOptions[0]?.value || ''}
+				onValueChange={(v) => {
+					formData.provider_header = v ?? '';
+				}}
+			>
+				<Select.Trigger id="provider_header" class="h-7 max-w-[250px] min-w-[125px] text-xs">
+					<span class="truncate">
+						{providerHeaderOptions.find(
+							(o) => o.value === (formData.provider_header || providerHeaderOptions[0]?.value)
+						)?.label || 'Selecciona encabezado...'}
+					</span>
+				</Select.Trigger>
+				<Select.Content>
+					{#each providerHeaderOptions as option}
+						<Select.Item value={option.value}>
+							{option.label}
+						</Select.Item>
+					{/each}
+				</Select.Content>
+			</Select.Root>
+			<Select.Root
+				type="single"
+				value={formData.provider_id ? String(formData.provider_id) : ''}
+				onValueChange={(v) => {
+					formData.provider_id = v ? parseInt(v) : null;
+				}}
+			>
+				<Select.Trigger id="provider_id" class="h-7 max-w-[250px] min-w-[120px] text-xs">
+					<span class="truncate">
+						{#if formData.provider_id}
+							{providers.find((p) => p.id === formData.provider_id)?.name || 'Selecciona...'}
+						{:else}
+							Selecciona...
+						{/if}
+					</span>
+				</Select.Trigger>
+				<Select.Content class="max-h-[300px]">
+					{#each providers as provider}
+						<Select.Item value={String(provider.id)}>
+							{provider.name}
+						</Select.Item>
+					{/each}
+				</Select.Content>
+			</Select.Root>
+			<span class="text-red-500">*</span>
+		</div>
 
-        <div class="grid grid-cols-4 gap-3 space-y-1.5">            
-            <Select.Root
-                type="single"
-                value={formData.sold_to_header || soldToHeaderOptions[0]?.value || ''}
-                onValueChange={(v) => {
-                    formData.sold_to_header = v ?? '';
-                }}
-            >
-                <Select.Trigger id="sold_to_header" class="h-7 text-xs min-w-[125px] max-w-[250px]">
-                    <span class="truncate">
-                        {soldToHeaderOptions.find(o => o.value === (formData.sold_to_header || soldToHeaderOptions[0]?.value))?.label || 'Selecciona encabezado...'}
-                    </span>
-                </Select.Trigger>
-                <Select.Content>
-                    {#each soldToHeaderOptions as option}
-                        <Select.Item value={option.value}>
-                            {option.label}
-                        </Select.Item>
-                    {/each}
-                </Select.Content>
-            </Select.Root>
-            <Select.Root
-                type="single"
-                value={formData.sold_to_id ? String(formData.sold_to_id) : ''}
-                onValueChange={(v) => {
-                    formData.sold_to_id = v ? parseInt(v) : null;
-                }}
-            >
-                <Select.Trigger id="sold_to_id" class="h-7 text-xs min-w-[120px] max-w-[250px]">
-                    <span class="truncate">
-                        {#if formData.sold_to_id}
-                            {clients.find(c => c.id === formData.sold_to_id)?.name || 'Selecciona...'}
-                        {:else}
-                            Selecciona...
-                        {/if}
-                    </span>
-                </Select.Trigger>
-                <Select.Content class="max-h-[300px]">
-                    {#each clients as client}
-                        <Select.Item value={String(client.id)}>
-                            {client.name}
-                        </Select.Item>
-                    {/each}
-                </Select.Content>
-            </Select.Root>		
-            <span class="text-red-500">*</span>			
-        </div>
+		<div class="grid grid-cols-4 gap-3 space-y-1.5">
+			<Select.Root
+				type="single"
+				value={formData.sold_to_header || soldToHeaderOptions[0]?.value || ''}
+				onValueChange={(v) => {
+					formData.sold_to_header = v ?? '';
+				}}
+			>
+				<Select.Trigger id="sold_to_header" class="h-7 max-w-[250px] min-w-[125px] text-xs">
+					<span class="truncate">
+						{soldToHeaderOptions.find(
+							(o) => o.value === (formData.sold_to_header || soldToHeaderOptions[0]?.value)
+						)?.label || 'Selecciona encabezado...'}
+					</span>
+				</Select.Trigger>
+				<Select.Content>
+					{#each soldToHeaderOptions as option}
+						<Select.Item value={option.value}>
+							{option.label}
+						</Select.Item>
+					{/each}
+				</Select.Content>
+			</Select.Root>
+			<Select.Root
+				type="single"
+				value={formData.sold_to_id ? String(formData.sold_to_id) : ''}
+				onValueChange={(v) => {
+					formData.sold_to_id = v ? parseInt(v) : null;
+				}}
+			>
+				<Select.Trigger id="sold_to_id" class="h-7 max-w-[250px] min-w-[120px] text-xs">
+					<span class="truncate">
+						{#if formData.sold_to_id}
+							{clients.find((c) => c.id === formData.sold_to_id)?.name || 'Selecciona...'}
+						{:else}
+							Selecciona...
+						{/if}
+					</span>
+				</Select.Trigger>
+				<Select.Content class="max-h-[300px]">
+					{#each clients as client}
+						<Select.Item value={String(client.id)}>
+							{client.name}
+						</Select.Item>
+					{/each}
+				</Select.Content>
+			</Select.Root>
+			<span class="text-red-500">*</span>
+		</div>
 
-        <div class="grid grid-cols-4 gap-3 space-y-1.5">        
-            <Select.Root
-                type="single"
-                value={formData.shipped_to_header || shippedToHeaderOptions[0]?.value || ''}
-                onValueChange={(v) => {
-                    formData.shipped_to_header = v ?? '';
-                }}
-            >
-                <Select.Trigger id="shipped_to_header" class="h-7 text-xs min-w-[125px] max-w-[250px]">
-                    <span class="truncate">
-                        {shippedToHeaderOptions.find(o => o.value === (formData.shipped_to_header || shippedToHeaderOptions[0]?.value))?.label || 'Selecciona encabezado...'}
-                    </span>
-                </Select.Trigger>
-                <Select.Content class="max-h-[300px]">
-                    {#each shippedToHeaderOptions as option}
-                        <Select.Item value={option.value}>
-                            {option.label}
-                        </Select.Item>
-                    {/each}
-                </Select.Content>
-            </Select.Root>
-            <Select.Root
-                type="single"
-                value={formData.shipped_to_id ? String(formData.shipped_to_id) : ''}
-                onValueChange={(v) => {
-                    formData.shipped_to_id = v ? parseInt(v) : null;
-                }}
-            >
-                <Select.Trigger id="shipped_to_id" class="h-7 text-xs min-w-[120px] max-w-[250px]">
-                    <span class="truncate">
-                        {#if formData.shipped_to_id}
-                            {allClientsProviders.find(cp => cp.id === formData.shipped_to_id)?.name || 'Selecciona...'}
-                        {:else}
-                            Selecciona...
-                        {/if}
-                    </span>
-                </Select.Trigger>
-                <Select.Content class="max-h-[300px]">
-                    {#each allClientsProviders as cp}
-                        <Select.Item value={String(cp.id)}>
-                            {cp.name}
-                        </Select.Item>
-                    {/each}
-                </Select.Content>
-            </Select.Root>
-            <span class="text-red-500">*</span>
-        </div>
+		<div class="grid grid-cols-4 gap-3 space-y-1.5">
+			<Select.Root
+				type="single"
+				value={formData.shipped_to_header || shippedToHeaderOptions[0]?.value || ''}
+				onValueChange={(v) => {
+					formData.shipped_to_header = v ?? '';
+				}}
+			>
+				<Select.Trigger id="shipped_to_header" class="h-7 max-w-[250px] min-w-[125px] text-xs">
+					<span class="truncate">
+						{shippedToHeaderOptions.find(
+							(o) => o.value === (formData.shipped_to_header || shippedToHeaderOptions[0]?.value)
+						)?.label || 'Selecciona encabezado...'}
+					</span>
+				</Select.Trigger>
+				<Select.Content class="max-h-[300px]">
+					{#each shippedToHeaderOptions as option}
+						<Select.Item value={option.value}>
+							{option.label}
+						</Select.Item>
+					{/each}
+				</Select.Content>
+			</Select.Root>
+			<Select.Root
+				type="single"
+				value={formData.shipped_to_id ? String(formData.shipped_to_id) : ''}
+				onValueChange={(v) => {
+					formData.shipped_to_id = v ? parseInt(v) : null;
+				}}
+			>
+				<Select.Trigger id="shipped_to_id" class="h-7 max-w-[250px] min-w-[120px] text-xs">
+					<span class="truncate">
+						{#if formData.shipped_to_id}
+							{allClientsProviders.find((cp) => cp.id === formData.shipped_to_id)?.name ||
+								'Selecciona...'}
+						{:else}
+							Selecciona...
+						{/if}
+					</span>
+				</Select.Trigger>
+				<Select.Content class="max-h-[300px]">
+					{#each allClientsProviders as cp}
+						<Select.Item value={String(cp.id)}>
+							{cp.name}
+						</Select.Item>
+					{/each}
+				</Select.Content>
+			</Select.Root>
+			<span class="text-red-500">*</span>
+		</div>
 
-       
-        <div class="space-y-1.5">
-            <Label for="customs_broker_id" class="text-xs">Agente Aduanal Mex: <span class="text-red-500">*</span></Label>
-            <Select.Root
-                type="single"
-                value={formData.customs_broker_id ? String(formData.customs_broker_id) : ''}
-                onValueChange={(v) => {
-                    formData.customs_broker_id = v ? parseInt(v) : null;
-                }}
-            >
-                <Select.Trigger id="customs_broker_id" class="h-7 text-xs min-w-[150px] max-w-[300px]">
-                    <span class="truncate">
-                        {formData.customs_broker_id
-                            ? customsBrokers.find(cb => cb.id === formData.customs_broker_id)?.name || 'Selecciona...'
-                            : 'Selecciona...'}
-                    </span>
-                </Select.Trigger>
-                <Select.Content class="max-h-[300px]">
-                    {#each customsBrokers as broker}
-                        <Select.Item value={broker.id.toString()}>
-                            {broker.name}
-                        </Select.Item>
-                    {/each}
-                </Select.Content>
-            </Select.Root>            
-        </div>        
+		<div class="space-y-1.5">
+			<Label for="customs_broker_id" class="text-xs"
+				>Agente Aduanal Mex: <span class="text-red-500">*</span></Label
+			>
+			<Select.Root
+				type="single"
+				value={formData.customs_broker_id ? String(formData.customs_broker_id) : ''}
+				onValueChange={(v) => {
+					formData.customs_broker_id = v ? parseInt(v) : null;
+				}}
+			>
+				<Select.Trigger id="customs_broker_id" class="h-7 max-w-[300px] min-w-[150px] text-xs">
+					<span class="truncate">
+						{formData.customs_broker_id
+							? customsBrokers.find((cb) => cb.id === formData.customs_broker_id)?.name ||
+								'Selecciona...'
+							: 'Selecciona...'}
+					</span>
+				</Select.Trigger>
+				<Select.Content class="max-h-[300px]">
+					{#each customsBrokers as broker}
+						<Select.Item value={broker.id.toString()}>
+							{broker.name}
+						</Select.Item>
+					{/each}
+				</Select.Content>
+			</Select.Root>
+		</div>
 
-        <div class="space-y-1.5">
-            <Label for="customs_broker_us_id" class="text-xs">Agente Aduanal Ame:</Label>
-            <Select.Root
-                type="single"
-                value={formData.customs_broker_us_id ? String(formData.customs_broker_us_id) : ''}
-                onValueChange={(v) => {
-                    formData.customs_broker_us_id = v ? parseInt(v) : null;
-                }}
-            >
-                <Select.Trigger id="customs_broker_us_id" class=" min-w-[150px] h-7 text-xs">
-                    <span class="truncate">
-                        {formData.customs_broker_us_id 
-                            ? customsBrokers.find(cb => cb.id === formData.customs_broker_us_id)?.name || 'Selecciona...'
-                            : 'Selecciona...'}
-                    </span>
-                </Select.Trigger>
-                <Select.Content class="max-h-[300px]">
-                    {#each customsBrokers as broker}
-                        <Select.Item value={broker.id.toString()}>
-                            {broker.name}
-                        </Select.Item>
-                    {/each}
-                </Select.Content>
-            </Select.Root>
-        </div>        
-    </div>
+		<div class="space-y-1.5">
+			<Label for="customs_broker_us_id" class="text-xs">Agente Aduanal Ame:</Label>
+			<Select.Root
+				type="single"
+				value={formData.customs_broker_us_id ? String(formData.customs_broker_us_id) : ''}
+				onValueChange={(v) => {
+					formData.customs_broker_us_id = v ? parseInt(v) : null;
+				}}
+			>
+				<Select.Trigger id="customs_broker_us_id" class=" h-7 min-w-[150px] text-xs">
+					<span class="truncate">
+						{formData.customs_broker_us_id
+							? customsBrokers.find((cb) => cb.id === formData.customs_broker_us_id)?.name ||
+								'Selecciona...'
+							: 'Selecciona...'}
+					</span>
+				</Select.Trigger>
+				<Select.Content class="max-h-[300px]">
+					{#each customsBrokers as broker}
+						<Select.Item value={broker.id.toString()}>
+							{broker.name}
+						</Select.Item>
+					{/each}
+				</Select.Content>
+			</Select.Root>
+		</div>
+	</div>
 
-    <!-- Columna Derecha: Tipo de Moneda y Transportista -->
-    <div class="space-y-3">
-        <!-- Tipo de Moneda - Pesos Netos y Brutos -->
-        <div class="border rounded-md p-3 space-y-2">
-            <div class="flex justify-between">
-                <h4 class="text-xs font-semibold text-muted-foreground uppercase">Tipo de Moneda - Pesos Netos y Brutos</h4>
-                <h4 class="text-xs font-semibold text-muted-foreground uppercase">
-                    Tipo de cambio: 
-                    <span class="text-primary ml-1">
-                        {(exchangeRate !== undefined && exchangeRate !== null)
-                            ? (exchangeRate === 0 ? 'N/A' : Number(exchangeRate).toFixed(4))
-                            : (formData.exchange_rate ? Number(formData.exchange_rate).toFixed(4) : 'N/A')}
-                    </span>
-                </h4>
-            </div>
-            
-            <!-- Radio buttons para tipo de moneda -->
-            <div class="space-y-1.5">
-                <RadioGroup.Root bind:value={formData.currency} class="flex gap-4">
-                    <div class="flex items-center space-x-2">
-                        <RadioGroup.Item value="foreign" id="currency-foreign" class="h-4 w-4" />
-                        <Label for="currency-foreign" class="text-xs font-normal cursor-pointer">Extranjera (Dlls)</Label>
-                    </div>
-                    <div class="flex items-center space-x-2">
-                        <RadioGroup.Item value="local" id="currency-local" class="h-4 w-4" />
-                        <Label for="currency-local" class="text-xs font-normal cursor-pointer">Nacional (Pesos)</Label>
-                    </div>
-                    <div class="flex items-center space-x-2">
-                        <RadioGroup.Item value="manual" id="currency-manual" class="h-4 w-4" />
-                        <Label for="currency-manual" class="text-xs font-normal cursor-pointer">De Captura</Label>
-                    </div>
-                </RadioGroup.Root>
-            </div>
-            {#if formData.currency === 'manual'}
-                <div class="space-y-1.5">
-                    <Label for="currency_type" class="text-xs">Moneda:</Label>
-                    <Select.Root
-                        type="single"
-                        value={formData.currency_type || ''}
-                        onValueChange={(v) => {
-                            formData.currency_type = v ?? '';
-                        }}
-                    >
-                        <Select.Trigger id="currency_type" class="h-7 text-xs min-w-[80px]">
-                            <span class="truncate">
-                                {formData.currency_type || '...'}
-                            </span>
-                        </Select.Trigger>
-                        <Select.Content class="min-w-[80px] max-h-[300px]">
-                            {#each currencyTypes as currencyType}
-                                <Select.Item value={currencyType.code}>
-                                    {currencyType.code}
-                                </Select.Item>
-                            {/each}
-                        </Select.Content>
-                    </Select.Root>
-                </div>
-            {/if}
-            <div class="grid grid-cols-3 gap-2">                
-                <div class="space-y-1.5">
-                    <Label for="weight_type" class="text-xs">Tipo Peso:</Label>
-                    <Select.Root
-                        type="single"
-                        value={formData.weight_type || 'kgs'}
-                        onValueChange={(v) => {
-                            formData.weight_type = v ?? 'kgs';
-                        }}
-                    >
-                        <Select.Trigger id="weight_type" class="min-w-[150px] h-7 text-xs">
-                            <span class="truncate">
-                                {weightTypeOptions.find(w => w.value === formData.weight_type)?.label || 'Kilogramos (kg)'}
-                            </span>
-                        </Select.Trigger>
-                        <Select.Content>
-                            {#each weightTypeOptions as weightType}
-                                <Select.Item value={weightType.value}>
-                                    {weightType.label}
-                                </Select.Item>
-                            {/each}
-                        </Select.Content>
-                    </Select.Root>
-                </div>
+	<!-- Columna Derecha: Tipo de Moneda y Transportista -->
+	<div class="space-y-3">
+		<!-- Tipo de Moneda - Pesos Netos y Brutos -->
+		<div class="space-y-2 rounded-md border p-3">
+			<div class="flex justify-between">
+				<h4 class="text-xs font-semibold text-muted-foreground uppercase">
+					Tipo de Moneda - Pesos Netos y Brutos
+				</h4>
+				<h4 class="text-xs font-semibold text-muted-foreground uppercase">
+					Tipo de cambio:
+					<span class="ml-1 text-primary">
+						{exchangeRate !== undefined && exchangeRate !== null && exchangeRate !== 0
+							? Number(exchangeRate).toFixed(4)
+							: formData.exchange_rate && formData.exchange_rate !== 0
+								? Number(formData.exchange_rate).toFixed(4)
+								: 'N/A'}
+					</span>
+				</h4>
+			</div>
 
-                <div class="space-y-1.5">
-                    <Label for="iva_factor" class="text-xs">IVA:</Label>
-                    <Input id="iva_factor" type="number" step="0.0001" bind:value={formData.iva_factor} placeholder="0.16" class="h-7 text-xs" />
-                </div>
-            </div>
-        </div>
+			<!-- Radio buttons para tipo de moneda -->
+			<div class="space-y-1.5">
+				<RadioGroup.Root bind:value={formData.currency} class="flex gap-4">
+					<div class="flex items-center space-x-2">
+						<RadioGroup.Item value="foreign" id="currency-foreign" class="h-4 w-4" />
+						<Label for="currency-foreign" class="cursor-pointer text-xs font-normal"
+							>Extranjera (Dlls)</Label
+						>
+					</div>
+					<div class="flex items-center space-x-2">
+						<RadioGroup.Item value="local" id="currency-local" class="h-4 w-4" />
+						<Label for="currency-local" class="cursor-pointer text-xs font-normal"
+							>Nacional (Pesos)</Label
+						>
+					</div>
+					<div class="flex items-center space-x-2">
+						<RadioGroup.Item value="manual" id="currency-manual" class="h-4 w-4" />
+						<Label for="currency-manual" class="cursor-pointer text-xs font-normal"
+							>De Captura</Label
+						>
+					</div>
+				</RadioGroup.Root>
+			</div>
+			{#if formData.currency === 'manual'}
+				<div class="space-y-1.5">
+					<Label for="currency_type" class="text-xs">Moneda:</Label>
+					<Select.Root
+						type="single"
+						value={formData.currency_type || ''}
+						onValueChange={(v) => {
+							formData.currency_type = v ?? '';
+						}}
+					>
+						<Select.Trigger id="currency_type" class="h-7 min-w-[80px] text-xs">
+							<span class="truncate">
+								{formData.currency_type || '...'}
+							</span>
+						</Select.Trigger>
+						<Select.Content class="max-h-[300px] min-w-[80px]">
+							{#each currencyTypes as currencyType}
+								<Select.Item value={currencyType.code}>
+									{currencyType.code}
+								</Select.Item>
+							{/each}
+						</Select.Content>
+					</Select.Root>
+				</div>
+			{/if}
+			<div class="grid grid-cols-3 gap-2">
+				<div class="space-y-1.5">
+					<Label for="weight_type" class="text-xs">Tipo Peso:</Label>
+					<Select.Root
+						type="single"
+						value={formData.weight_type || 'kgs'}
+						onValueChange={(v) => {
+							formData.weight_type = v ?? 'kgs';
+						}}
+					>
+						<Select.Trigger id="weight_type" class="h-7 min-w-[150px] text-xs">
+							<span class="truncate">
+								{weightTypeOptions.find((w) => w.value === formData.weight_type)?.label ||
+									'Kilogramos (kg)'}
+							</span>
+						</Select.Trigger>
+						<Select.Content>
+							{#each weightTypeOptions as weightType}
+								<Select.Item value={weightType.value}>
+									{weightType.label}
+								</Select.Item>
+							{/each}
+						</Select.Content>
+					</Select.Root>
+				</div>
 
-        <!-- Transportista -->
-        <div class="border rounded-md p-3 space-y-2">
-            <h4 class="text-xs font-semibold text-muted-foreground uppercase">Transportista</h4>
-            
-            <div class="grid grid-cols-3 gap-2">
-                <div class="space-y-1.5">
-                    <Label for="carrier_id" class="text-xs">Transportista:</Label>
-                    <Select.Root
-                        type="single"
-                        value={formData.carrier_id ? String(formData.carrier_id) : ''}
-                        onValueChange={(v) => {
-                            formData.carrier_id = v || null;
-                        }}
-                    >
-                        <Select.Trigger id="carrier_id" class="h-7 text-xs min-w-[120px] max-w-[250px]">
-                            <span class="truncate">
-                                {#if formData.carrier_id}
-                                    {transporters.find(t => String(t.transporter_key) === String(formData.carrier_id))?.name || formData.carrier_id}
-                                {:else if transporters.length > 0}
-                                    Selecciona transportista...
-                                {:else}
-                                    Sin datos
-                                {/if}
-                            </span>
-                        </Select.Trigger>
-                        <Select.Content class="max-h-[300px]">
-                            {#each transporters as transporter}
-                                <Select.Item value={String(transporter.transporter_key)}>
-                                    {transporter.transporter_key}
-                                </Select.Item>
-                            {/each}
-                        </Select.Content>
-                    </Select.Root>
-                </div>
+				<div class="space-y-1.5">
+					<Label for="iva_factor" class="text-xs">IVA:</Label>
+					<Input
+						id="iva_factor"
+						type="number"
+						step="0.0001"
+						bind:value={formData.iva_factor}
+						placeholder="0.16"
+						class="h-7 text-xs"
+					/>
+				</div>
+			</div>
+		</div>
 
-                <div class="col-span-2 space-y-1.5">
-                    <Label for="transport_id" class="text-xs">Clave Transporte:</Label>
-                    <Select.Root
-                        type="single"
-                        value={formData.transport_id || ''}
-                        onValueChange={(v) => {
-                            formData.transport_id = v ?? '';
-                        }}
-                    >
-                        <Select.Trigger id="transport_id" class="h-7 text-xs min-w-[120px] max-w-[250px]">
-                            <span class="truncate">
-                                {#if formData.transport_id}
-                                    {vehicles.find(v => v.vehicle_key === formData.transport_id)?.vehicle_key || formData.transport_id}
-                                {:else if vehicles.length > 0}
-                                    Selecciona vehículo...
-                                {:else}
-                                    Sin datos
-                                {/if}
-                            </span>
-                        </Select.Trigger>
-                        <Select.Content class="max-h-[300px]">
-                            {#each vehicles as vehicle}
-                                <Select.Item value={vehicle.vehicle_key}>
-                                    {vehicle.vehicle_key} {vehicle.plate_number ? `- ${vehicle.plate_number}` : ''}
-                                </Select.Item>
-                            {/each}
-                        </Select.Content>
-                    </Select.Root>
-                </div>
-            </div>
-            
-            <div class="space-y-1.5">             
-                <Label for="driver_name" class="text-xs">Conductor:</Label>
-                <Select.Root
-                    type="single"
-                    value={formData.driver_name || ''}
-                    onValueChange={(v) => {
-                        formData.driver_name = v ?? '';
-                    }}
-                >
-                    <Select.Trigger id="driver_name" class="h-7 text-xs w-full">
-                        <span class="truncate">
-                            {#if formData.driver_name}
-                                {formData.driver_name}
-                            {:else if drivers.length > 0}
-                                Selecciona conductor...
-                            {:else}
-                                Sin datos
-                            {/if}
-                        </span>
-                    </Select.Trigger>
-                    <Select.Content class="max-h-[300px]">
-                        {#each drivers as driver}
-                            <Select.Item value={driver.driver_name}>
-                                {driver.driver_name}
-                            </Select.Item>
-                        {/each}
-                    </Select.Content>
-                </Select.Root>                
-            </div>
+		<!-- Transportista -->
+		<div class="space-y-2 rounded-md border p-3">
+			<h4 class="text-xs font-semibold text-muted-foreground uppercase">Transportista</h4>
 
-            <div class="grid grid-cols-4 gap-2">
-                <div class="space-y-1.5">
-                    <Label for="transport_type" class="text-xs">Tipo Transporte:</Label>
-                    <Select.Root
-                        type="single"
-                        value={formData.transport_type || 'none'}
-                        onValueChange={(v) => {
-                            formData.transport_type = v ?? 'none';
-                        }}
-                    >
-                        <Select.Trigger id="transport_type" class="h-7 text-xs min-w-[120px] max-w-[250px]">
-                            <span class="truncate">
-                                {transportTypeOptions.find(t => t.value === formData.transport_type)?.label || 'Ninguno'}
-                            </span>
-                        </Select.Trigger>
-                        <Select.Content>
-                            {#each transportTypeOptions as option}
-                                <Select.Item value={option.value}>
-                                    {option.label}
-                                </Select.Item>
-                            {/each}
-                        </Select.Content>
-                    </Select.Root>
-                </div>
+			<div class="grid grid-cols-3 gap-2">
+				<div class="space-y-1.5">
+					<Label for="carrier_id" class="text-xs">Transportista:</Label>
+					<Select.Root
+						type="single"
+						value={formData.carrier_id ? String(formData.carrier_id) : ''}
+						onValueChange={(v) => {
+							formData.carrier_id = v || null;
+						}}
+					>
+						<Select.Trigger id="carrier_id" class="h-7 max-w-[250px] min-w-[120px] text-xs">
+							<span class="truncate">
+								{#if formData.carrier_id}
+									{transporters.find(
+										(t) => String(t.transporter_key) === String(formData.carrier_id)
+									)?.name || formData.carrier_id}
+								{:else if transporters.length > 0}
+									Selecciona transportista...
+								{:else}
+									Sin datos
+								{/if}
+							</span>
+						</Select.Trigger>
+						<Select.Content class="max-h-[300px]">
+							{#each transporters as transporter}
+								<Select.Item value={String(transporter.transporter_key)}>
+									{transporter.transporter_key}
+								</Select.Item>
+							{/each}
+						</Select.Content>
+					</Select.Root>
+				</div>
 
-                <div class="space-y-1.5 col-span-3">
-                    <Label for="transport_num" class="text-xs">Placas:</Label>
-                    <Select.Root
-                        type="single"
-                        value={formData.transport_num || ''}
-                        onValueChange={(v) => {
-                            formData.transport_num = v ?? '';
-                        }}
-                    >
-                        <Select.Trigger id="transport_num" class="h-7 text-xs w-full">
-                            <span class="truncate">
-                                {#if formData.transport_num}
-                                    {trailers.find(t => t.trailer_number === formData.transport_num)?.plate_number || formData.transport_num}
-                                {:else if trailers.length > 0}
-                                    Selecciona remolque...
-                                {:else}
-                                    Sin datos
-                                {/if}
-                            </span>
-                        </Select.Trigger>
-                        <Select.Content class="max-h-[300px]">
-                            {#each trailers as trailer}
-                                <Select.Item value={trailer.trailer_number}>
-                                    {trailer.plate_number || trailer.trailer_number}
-                                </Select.Item>
-                            {/each}
-                        </Select.Content>
-                    </Select.Root>
-                </div>
-            </div>
+				<div class="col-span-2 space-y-1.5">
+					<Label for="transport_id" class="text-xs">Clave Transporte:</Label>
+					<Select.Root
+						type="single"
+						value={formData.transport_id || ''}
+						onValueChange={(v) => {
+							formData.transport_id = v ?? '';
+						}}
+					>
+						<Select.Trigger id="transport_id" class="h-7 max-w-[250px] min-w-[120px] text-xs">
+							<span class="truncate">
+								{#if formData.transport_id}
+									{vehicles.find((v) => v.vehicle_key === formData.transport_id)?.vehicle_key ||
+										formData.transport_id}
+								{:else if vehicles.length > 0}
+									Selecciona vehículo...
+								{:else}
+									Sin datos
+								{/if}
+							</span>
+						</Select.Trigger>
+						<Select.Content class="max-h-[300px]">
+							{#each vehicles as vehicle}
+								<Select.Item value={vehicle.vehicle_key}>
+									{vehicle.vehicle_key}
+									{vehicle.plate_number ? `- ${vehicle.plate_number}` : ''}
+								</Select.Item>
+							{/each}
+						</Select.Content>
+					</Select.Root>
+				</div>
+			</div>
 
-            <div class="space-y-1.5">
-                <Label for="aduana" class="text-xs">Aduana y Sección de Despacho:</Label>
-                <Select.Root
-                    type="single"
-                    value={formData.aduana || ''}
-                    onValueChange={(v) => {
-                        formData.aduana = v ?? '';
-                    }}
-                >
-                    <Select.Trigger id="aduana" class="h-7 text-xs w-full">
-                        <span class="truncate">
-                            {#if formData.aduana}
-                                {customsSections.find(cs => cs.customs_code === formData.aduana)?.section_name || formData.aduana}
-                            {:else if customsSections.length > 0}
-                                Selecciona aduana...
-                            {:else}
-                                Sin datos
-                            {/if}
-                        </span>
-                    </Select.Trigger>
-                    <Select.Content class="max-h-[300px]">
-                        {#each customsSections as section}
-                            <Select.Item value={section.customs_code}>
-                                {section.customs_code} - {section.section_name}
-                            </Select.Item>
-                        {/each}
-                    </Select.Content>
-                </Select.Root>
-            </div>
+			<div class="space-y-1.5">
+				<Label for="driver_name" class="text-xs">Conductor:</Label>
+				<Select.Root
+					type="single"
+					value={formData.driver_name || ''}
+					onValueChange={(v) => {
+						formData.driver_name = v ?? '';
+					}}
+				>
+					<Select.Trigger id="driver_name" class="h-7 w-full text-xs">
+						<span class="truncate">
+							{#if formData.driver_name}
+								{formData.driver_name}
+							{:else if drivers.length > 0}
+								Selecciona conductor...
+							{:else}
+								Sin datos
+							{/if}
+						</span>
+					</Select.Trigger>
+					<Select.Content class="max-h-[300px]">
+						{#each drivers as driver}
+							<Select.Item value={driver.driver_name}>
+								{driver.driver_name}
+							</Select.Item>
+						{/each}
+					</Select.Content>
+				</Select.Root>
+			</div>
 
-            <div class="space-y-1.5">
-                <Label for="document_type" class="text-xs">Clave de Régimen Aduanero: <span class="text-red-500">*</span></Label>
-                <Select.Root
-                    type="single"
-                    value={formData.document_type || ''}
-                    onValueChange={(v) => {
-                        formData.document_type = v ?? '';
-                    }}
-                >
-                    <Select.Trigger id="document_type" class="h-7 text-xs w-full">
-                        <span class="truncate">
-                            {#if formData.document_type}
-                                {codePedimentoRegimens.find(r => r.regimen_code === formData.document_type)?.regimen_code || formData.document_type}
-                            {:else if filteredRegimens.length > 0}
-                                Selecciona régimen...
-                            {:else if operationType}
-                                Sin regímenes para tipo {operationType}
-                            {:else}
-                                Selecciona tipo de operación primero
-                            {/if}
-                        </span>
-                    </Select.Trigger>
-                    <Select.Content class="max-h-[300px]">
-                        {#each filteredRegimens as regimen}
-                            <Select.Item value={regimen.regimen_code}>
-                                {regimen.regimen_code}
-                            </Select.Item>
-                        {/each}
-                    </Select.Content>
-                </Select.Root>
-            </div>
-        </div>
-    </div>
+			<div class="grid grid-cols-4 gap-2">
+				<div class="space-y-1.5">
+					<Label for="transport_type" class="text-xs">Tipo Transporte:</Label>
+					<Select.Root
+						type="single"
+						value={formData.transport_type || 'none'}
+						onValueChange={(v) => {
+							formData.transport_type = v ?? 'none';
+						}}
+					>
+						<Select.Trigger id="transport_type" class="h-7 max-w-[250px] min-w-[120px] text-xs">
+							<span class="truncate">
+								{transportTypeOptions.find((t) => t.value === formData.transport_type)?.label ||
+									'Ninguno'}
+							</span>
+						</Select.Trigger>
+						<Select.Content>
+							{#each transportTypeOptions as option}
+								<Select.Item value={option.value}>
+									{option.label}
+								</Select.Item>
+							{/each}
+						</Select.Content>
+					</Select.Root>
+				</div>
+
+				<div class="col-span-3 space-y-1.5">
+					<Label for="transport_num" class="text-xs">Placas:</Label>
+					<Select.Root
+						type="single"
+						value={formData.transport_num || ''}
+						onValueChange={(v) => {
+							formData.transport_num = v ?? '';
+						}}
+					>
+						<Select.Trigger id="transport_num" class="h-7 w-full text-xs">
+							<span class="truncate">
+								{#if formData.transport_num}
+									{trailers.find((t) => t.trailer_number === formData.transport_num)
+										?.plate_number || formData.transport_num}
+								{:else if trailers.length > 0}
+									Selecciona remolque...
+								{:else}
+									Sin datos
+								{/if}
+							</span>
+						</Select.Trigger>
+						<Select.Content class="max-h-[300px]">
+							{#each trailers as trailer}
+								<Select.Item value={trailer.trailer_number}>
+									{trailer.plate_number || trailer.trailer_number}
+								</Select.Item>
+							{/each}
+						</Select.Content>
+					</Select.Root>
+				</div>
+			</div>
+
+			<div class="space-y-1.5">
+				<Label for="aduana" class="text-xs">Aduana y Sección de Despacho:</Label>
+				<Select.Root
+					type="single"
+					value={formData.aduana || ''}
+					onValueChange={(v) => {
+						formData.aduana = v ?? '';
+					}}
+				>
+					<Select.Trigger id="aduana" class="h-7 w-full text-xs">
+						<span class="truncate">
+							{#if formData.aduana}
+								{customsSections.find((cs) => cs.customs_code === formData.aduana)?.section_name ||
+									formData.aduana}
+							{:else if customsSections.length > 0}
+								Selecciona aduana...
+							{:else}
+								Sin datos
+							{/if}
+						</span>
+					</Select.Trigger>
+					<Select.Content class="max-h-[300px]">
+						{#each customsSections as section}
+							<Select.Item value={section.customs_code}>
+								{section.customs_code} - {section.section_name}
+							</Select.Item>
+						{/each}
+					</Select.Content>
+				</Select.Root>
+			</div>
+
+			<div class="space-y-1.5">
+				<Label for="document_type" class="text-xs"
+					>Clave de Régimen Aduanero: <span class="text-red-500">*</span></Label
+				>
+				<Select.Root
+					type="single"
+					value={formData.document_type || ''}
+					onValueChange={(v) => {
+						formData.document_type = v ?? '';
+					}}
+				>
+					<Select.Trigger id="document_type" class="h-7 w-full text-xs">
+						<span class="truncate">
+							{#if formData.document_type}
+								{codePedimentoRegimens.find((r) => r.regimen_code === formData.document_type)
+									?.regimen_code || formData.document_type}
+							{:else if filteredRegimens.length > 0}
+								Selecciona régimen...
+							{:else if operationType}
+								Sin regímenes para tipo {operationType}
+							{:else}
+								Selecciona tipo de operación primero
+							{/if}
+						</span>
+					</Select.Trigger>
+					<Select.Content class="max-h-[300px]">
+						{#each filteredRegimens as regimen}
+							<Select.Item value={regimen.regimen_code}>
+								{regimen.regimen_code}
+							</Select.Item>
+						{/each}
+					</Select.Content>
+				</Select.Root>
+			</div>
+		</div>
+	</div>
 </div>
diff --git a/frontend/src/lib/stores/ui.svelte.ts b/frontend/src/lib/stores/ui.svelte.ts
new file mode 100644
index 00000000..36bd0e08
--- /dev/null
+++ b/frontend/src/lib/stores/ui.svelte.ts
@@ -0,0 +1,17 @@
+
+/**
+ * UI Store for managing global UI states
+ */
+class UIStore {
+    private _isExchangeRateDialogOpen = $state(false);
+
+    get isExchangeRateDialogOpen() {
+        return this._isExchangeRateDialogOpen;
+    }
+
+    set isExchangeRateDialogOpen(value: boolean) {
+        this._isExchangeRateDialogOpen = value;
+    }
+}
+
+export const uiStore = new UIStore();
diff --git a/frontend/src/routes/dashboard/+layout.svelte b/frontend/src/routes/dashboard/+layout.svelte
index 9891e638..95c9163b 100644
--- a/frontend/src/routes/dashboard/+layout.svelte
+++ b/frontend/src/routes/dashboard/+layout.svelte
@@ -2,18 +2,18 @@
 	import { setContext, onMount } from 'svelte';
 	import { invalidateAll } from '$app/navigation';
 	import type { LayoutData } from './$types';
-	import AppSidebar from "$lib/components/sidebar/app-sidebar.svelte";
-	import * as Breadcrumb from "$lib/components/ui/breadcrumb/index.js";
-	import { Separator } from "$lib/components/ui/separator/index.js";
-	import * as Sidebar from "$lib/components/ui/sidebar/index.js";
-	import { companyStore } from "$lib/stores/company.svelte";
-	import ExchangeRateGuard from "$lib/components/dashboard/exchange_rate/exchange-rate-guard.svelte";
+	import AppSidebar from '$lib/components/sidebar/app-sidebar.svelte';
+	import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
+	import { Separator } from '$lib/components/ui/separator/index.js';
+	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
+	import { companyStore } from '$lib/stores/company.svelte';
+	import ExchangeRateGuard from '$lib/components/dashboard/exchange_rate/exchange-rate-guard.svelte';
 
 	let { data, children }: { data: LayoutData; children: any } = $props();
 
 	// Hacer disponible el usuario en el contexto para los componentes hijos
 	setContext('user', data.user);
-	
+
 	// Inicializar el store con las compañías pre-cargadas desde el servidor
 	onMount(() => {
 		if (data.companies) {
@@ -36,7 +36,7 @@
 	<AppSidebar />
 	<Sidebar.Inset class="overflow-x-hidden">
 		<header
-			class="group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear"
+			class="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12"
 		>
 			<div class="flex items-center gap-2 px-4">
 				<Sidebar.Trigger class="-ml-1" />
@@ -56,11 +56,11 @@
 				-->
 			</div>
 		</header>
-		<div class="flex flex-1 flex-col gap-4 p-4 pt-0 overflow-x-hidden">
+		<div class="flex flex-1 flex-col gap-4 overflow-x-hidden p-4 pt-0">
 			<!-- Contenido de cada página -->
 			{@render children()}
 		</div>
 	</Sidebar.Inset>
 </Sidebar.Provider>
 
-<ExchangeRateGuard />
+<ExchangeRateGuard overlayClass="bg-black/5" />
diff --git a/frontend/src/routes/dashboard/invoices/edit/[id]/+page.svelte b/frontend/src/routes/dashboard/invoices/edit/[id]/+page.svelte
index c59dd75e..5d81cd1b 100644
--- a/frontend/src/routes/dashboard/invoices/edit/[id]/+page.svelte
+++ b/frontend/src/routes/dashboard/invoices/edit/[id]/+page.svelte
@@ -8,6 +8,7 @@
 	import { Badge } from '$lib/components/ui/badge';
 	import { Separator } from '$lib/components/ui/separator';
 	import { toast } from 'svelte-sonner';
+	import { uiStore } from '$lib/stores/ui.svelte';
 	import {
 		ArrowLeft,
 		FileText,
@@ -109,11 +110,22 @@
 		data.invoice?.financials?.exchange_rate ?? null
 	);
 
-	// Guardar la fecha inicial para detectar cambios manuales
-	let initialInvoiceDate = data.invoice?.invoice_date || '';
-
 	let showExchangeRateDialog = $state(false);
+
+	$effect(() => {
+		if (showExchangeRateDialog) {
+			uiStore.isExchangeRateDialogOpen = true;
+		} else {
+			// Solo limpiar si este componente tenía el modal abierto
+			if (uiStore.isExchangeRateDialogOpen && !showExchangeRateDialog) {
+				uiStore.isExchangeRateDialogOpen = false;
+			}
+		}
+	});
+
 	let missingExchangeRateDate = $state('');
+	let lastFetchedDate = $state('');
+	let originalInvoiceDate = $state(data.invoice?.invoice_date || '');
 
 	async function checkExchangeRate(date: string): Promise<boolean> {
 		if (!date || !companyStore?.activeCompany?.id) return true;
@@ -133,8 +145,13 @@
 
 			if (items.length === 0) {
 				console.log('No exchange rate found for', date);
-				missingExchangeRateDate = date;
-				showExchangeRateDialog = true;
+				if (!uiStore.isExchangeRateDialogOpen) {
+					missingExchangeRateDate = date;
+					showExchangeRateDialog = true;
+					uiStore.isExchangeRateDialogOpen = true;
+					return false;
+				}
+				// Si ya hay un modal abierto, no abrir este pero retornar false para indicar que falta
 				return false;
 			}
 			return true;
@@ -154,29 +171,38 @@
 	$effect(() => {
 		const currentDate = InvoiceTopFieldsFormData?.invoice_date;
 
-		// Solo proceder si:
-		// 1. Tenemos datos cargados y compañía activa
-		// 2. Es una factura nueva (isCreate)
-		// 3. O la fecha es distinta a la original (el usuario la cambió)
-		// 4. O no tenemos ningún tipo de cambio todavía
+		if (mounted && companyStore?.activeCompany?.id && currentDate) {
+			// No buscar si:
+			// 1. Ya tenemos un valor y la fecha es la original (evita sobreescribir al cargar)
+			const currentRate = calculatedExchangeRate;
+			if (
+				!data.isCreate &&
+				currentDate === originalInvoiceDate &&
+				typeof currentRate === 'number' &&
+				currentRate > 0
+			) {
+				return;
+			}
 
-		const shouldFetch =
-			mounted &&
-			companyStore?.activeCompany?.id &&
-			currentDate &&
-			(data.isCreate || currentDate !== initialInvoiceDate || !calculatedExchangeRate);
+			// 2. Ya buscamos para esta fecha recientemente
+			if (currentDate === lastFetchedDate) {
+				return;
+			}
 
-		if (shouldFetch) {
 			getExchangeRateByDate(currentDate, companyStore.activeCompany.id)
 				.then((rate) => {
+					lastFetchedDate = currentDate;
 					if (rate) {
 						calculatedExchangeRate = rate.value;
 					} else {
-						// Si no hay en catálogo, pero YA teníamos uno en la factura (y no cambió fecha), NO poner 0
-						if (currentDate === initialInvoiceDate && data.invoice?.financials?.exchange_rate) {
-							calculatedExchangeRate = data.invoice.financials.exchange_rate;
-						} else {
-							calculatedExchangeRate = 0;
+						calculatedExchangeRate = 0;
+						// Solo abrir modal si NO es la fecha de hoy (el guard global la maneja)
+						// Y si no hay otro modal de TC abierto ya
+						const today = new Date().toISOString().split('T')[0];
+						if (currentDate !== today && !uiStore.isExchangeRateDialogOpen) {
+							missingExchangeRateDate = currentDate;
+							showExchangeRateDialog = true;
+							uiStore.isExchangeRateDialogOpen = true;
 						}
 					}
 				})
@@ -429,7 +455,14 @@
 <ExchangeRateDialog
 	bind:open={showExchangeRateDialog}
 	initialDate={missingExchangeRateDate}
+	overlayClass="bg-black/5"
 	onSuccess={() => {
+		uiStore.isExchangeRateDialogOpen = false;
+		// Si es factura nueva y no tiene fecha, poner la de hoy
+		if (data.isCreate && !InvoiceTopFieldsFormData.invoice_date) {
+			InvoiceTopFieldsFormData.invoice_date = new Date().toISOString().split('T')[0];
+		}
+
 		// Actualizar el tipo de cambio mostrado
 		if (InvoiceTopFieldsFormData.invoice_date && companyStore?.activeCompany?.id) {
 			getExchangeRateByDate(