Files
plantillas-proyectos/frontend/src/lib/components/dashboard/pedimentos/edit/other-data-tab-form.svelte
2025-12-23 14:15:05 -06:00

2275 lines
67 KiB
Svelte

<script lang="ts">
import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card';
import { Button } from '$lib/components/ui/button';
import { Input } from '$lib/components/ui/input';
import { Label } from '$lib/components/ui/label';
import * as Select from '$lib/components/ui/select';
import { Checkbox } from '$lib/components/ui/checkbox';
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow
} from '$lib/components/ui/table';
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogFooter
} from '$lib/components/ui/dialog';
import {
Calculator,
FileText,
RotateCw,
AlertCircle,
FileCheck,
FileX,
Download,
ChevronsLeft,
ChevronLeft,
ChevronRight,
ChevronsRight,
Plus,
Pencil,
Trash2,
Printer,
Upload,
Truck,
Car,
Package,
Search
} from 'lucide-svelte';
interface OtrosDatosFormData {
// Parámetros de cálculo
tipo_calculo: string;
dta_por_operacion_ag_facturas: boolean;
dta_por_numero_vehiculos: boolean;
paga_iva: boolean;
paga_prevalidacion: boolean;
// Opciones de cálculo
aplicar_dta_8_millar_partida: boolean;
incluir_eci: boolean;
deducible_recargos: boolean;
cuota_fija_adicional_vehiculo: boolean;
cuota_fija_adicional_fp: string;
// Actualización Pedimento Normal
actualizar_iva: boolean;
actualizar_advalorem: boolean;
actualizar_dta: boolean;
actualizar_cc: boolean;
actualizar_ieps: boolean;
// Parámetros de Pedimento
es_embajada: boolean;
embajada_dta: string;
regla_3_1_21_factores: boolean;
cambio_tarifa_anterior: string;
// Actualización en Rectificación
actualizar_iva_rect: boolean;
actualizar_advalorem_rect: boolean;
actualizar_dta_rect: boolean;
actualizar_cc_rect: boolean;
actualizar_ieps_rect: boolean;
calcular_recargos_diferencias: boolean;
// Parámetro de cambio de DTA
proveedor_nacional_modifico_dta: boolean;
// Opciones de cálculo de valor
calculo_valor_aduana_v2: boolean;
calculo_2_decimales_valor_unitario: boolean;
calcular_valor_aduana_base_partidas: boolean;
// Contribuciones para Recargo
recargo_igi: boolean;
recargo_iva: boolean;
recargo_ieps: boolean;
recargo_isan: boolean;
recargo_cc: boolean;
// Factor Incrementable Manual
factor_incrementable_manual: string;
// Otros
agregar_entidad_federativa_proveedor: boolean;
}
let {
formData = $bindable({
tipo_calculo: 'ninguno',
dta_por_operacion_ag_facturas: false,
dta_por_numero_vehiculos: false,
paga_iva: false,
paga_prevalidacion: false,
aplicar_dta_8_millar_partida: false,
incluir_eci: false,
deducible_recargos: false,
cuota_fija_adicional_vehiculo: false,
cuota_fija_adicional_fp: '0',
actualizar_iva: false,
actualizar_advalorem: false,
actualizar_dta: false,
actualizar_cc: false,
actualizar_ieps: false,
es_embajada: false,
embajada_dta: '0.00',
regla_3_1_21_factores: false,
cambio_tarifa_anterior: '',
actualizar_iva_rect: false,
actualizar_advalorem_rect: false,
actualizar_dta_rect: false,
actualizar_cc_rect: false,
actualizar_ieps_rect: false,
calcular_recargos_diferencias: false,
proveedor_nacional_modifico_dta: false,
calculo_valor_aduana_v2: false,
calculo_2_decimales_valor_unitario: false,
calcular_valor_aduana_base_partidas: false,
recargo_igi: false,
recargo_iva: false,
recargo_ieps: false,
recargo_isan: false,
recargo_cc: false,
factor_incrementable_manual: '0.00000000000000000000',
agregar_entidad_federativa_proveedor: false
})
}: {
formData: OtrosDatosFormData;
} = $props();
// Estados para vista de bitácora
let showBitacora = $state(false);
let currentBitacoraPage = $state(0);
let bitacoraPageSize = 10;
// Estados para vista de Partes II
let showPartesII = $state(false);
let currentPartesIIPage = $state(0);
let partesIIPageSize = 10;
let selectedEmbarques = $state<number[]>([]);
// Estados para diálogo de embarque
let isEmbarqueDialogOpen = $state(false);
let editingEmbarqueIndex = $state<number | null>(null);
// Estados para diálogo de mercancía
let isMercanciaDialogOpen = $state(false);
let editingMercanciaIndex = $state<number | null>(null);
// Interfaz para mercancía del embarque
interface Mercancia {
descripcion: string;
cantidad_umc: number;
cantidad_umt: number;
peso: number;
}
// Lista de mercancías
let mercancias = $state<Mercancia[]>([]);
// Estado de la mercancía actual
let currentMercancia = $state<Mercancia>({
descripcion: '',
cantidad_umc: 0,
cantidad_umt: 0,
peso: 0
});
// Interfaz para embarque parcial
interface EmbarqueParcial {
numero: string;
peso: number;
operacion_granel: boolean;
identificacion: string;
num_contenedor: string;
operacion_ferrocarril: boolean;
candados_fiscales: string;
bl: string;
total_bls: string;
operacion_maritima: boolean;
cantidad_transportes: number;
cantidad_partidas: number;
suma_cantidad_umc: number;
cantidad_embarques: number;
cantidad_mercancias: number;
suma_cantidad_umc_embarques: number;
clave_recinto: string;
}
// Estado del embarque actual
let currentEmbarque = $state<EmbarqueParcial>({
numero: '',
peso: 0,
operacion_granel: false,
identificacion: '',
num_contenedor: '',
operacion_ferrocarril: false,
candados_fiscales: '',
bl: '',
total_bls: '',
operacion_maritima: false,
cantidad_transportes: 0,
cantidad_partidas: 0,
suma_cantidad_umc: 0,
cantidad_embarques: 1,
cantidad_mercancias: 0,
suma_cantidad_umc_embarques: 0,
clave_recinto: '0'
});
// Variable para rastrear vista activa
let activeView = $state<'calculos' | 'bitacora' | 'partesII' | 'rectificacion' | 'rectificacionII' | 'notas' | 'seleccionAutomatizada' | 'multas'>('calculos');
// Estados para vista de Rectificación
let showRectificacion = $state(false);
let rectificacionFormData = $state({
es_rectificacion: '',
pedimento_original: '00-0000:0000000',
clave_pedimento_original: '',
fecha_pago_original: '',
anio_impresion_rect: '',
aduana_seccion_original: '',
patente_original: '',
utilizar_fecha_pago_original: false,
calculo_manual_contribuciones: false
});
let liquidacionDiferencias = $state<
{ gravamen: string; forma_pago: string; importe: string }[]
>([]);
// Estados para diálogo de diferencias en contribuciones
let isDiferenciasDialogOpen = $state(false);
let editingDiferenciaIndex = $state<number | null>(null);
interface DiferenciaContribucion {
contribucion: string;
forma_pago: string;
importe: number;
}
let currentDiferencia = $state<DiferenciaContribucion>({
contribucion: '',
forma_pago: '',
importe: 0
});
// Estados para vista de Rectificación II
let showRectificacionII = $state(false);
let rectificacionIIFormData = $state({
causa: '',
motivo: ''
});
// Estados para vista de Notas
let showNotas = $state(false);
let currentNotasPage = $state(0);
let notasPageSize = 10;
let notasPedimento = $state<
{ usuario: string; fecha: string; hora: string; comentario: string }[]
>([]);
// Estados para diálogo de notas
let isNotaDialogOpen = $state(false);
let editingNotaIndex = $state<number | null>(null);
interface NotaPedimento {
comentario: string;
}
let currentNota = $state<NotaPedimento>({
comentario: ''
});
// Estados para vista de Selección Automatizada
let showSeleccionAutomatizada = $state(false);
let seleccionAutomatizadaFormData = $state({
fecha_cruce: '',
primera_revision: '',
comentario_primera_revision: '',
segunda_revision: '',
comentario_segunda_revision: ''
});
// Estados para vista de Multas
let showMultas = $state(false);
let multasFormData = $state({
cargo: ''
});
// Datos de ejemplo para bitácora (en producción vendrían del servidor)
let bitacoraMovimientos = $state([
{
modulo: 'wPedimento',
pedimento: '16-3633:100:267',
movimiento: 'Agregar Pedimento 16-3633',
usuario: 'aleandro',
fecha: '24/11/2025',
hora: '03:01PM'
},
{
modulo: 'wPedimento',
pedimento: '16-3633:100:267',
movimiento: 'Inicio Pedimento 16-3633 sc',
usuario: 'aleandro',
fecha: '24/11/2025',
hora: '03:13PM'
},
{
modulo: 'wPedimento',
pedimento: '16-3633:100:267',
movimiento: 'Agregar Pedimento 16-3633 sc',
usuario: 'aleandro',
fecha: '24/11/2025',
hora: '03:13PM'
}
]);
const totalBitacoraPages = $derived(
Math.ceil(bitacoraMovimientos.length / bitacoraPageSize)
);
const paginatedBitacoraMovimientos = $derived(
bitacoraMovimientos.slice(
currentBitacoraPage * bitacoraPageSize,
(currentBitacoraPage + 1) * bitacoraPageSize
)
);
// Datos de ejemplo para Partes II (embarques parciales)
let embarquesParciales = $state([
{ numero: 1, identificacion: 'EMB001', precintos: 'P001, P002' },
{ numero: 2, identificacion: 'EMB002', precintos: 'P003' },
{ numero: 3, identificacion: 'EMB003', precintos: 'P004, P005, P006' }
]);
const totalPartesIIPages = $derived(Math.ceil(embarquesParciales.length / partesIIPageSize));
const paginatedEmbarquesParciales = $derived(
embarquesParciales.slice(
currentPartesIIPage * partesIIPageSize,
(currentPartesIIPage + 1) * partesIIPageSize
)
);
const totalNotasPages = $derived(Math.ceil(notasPedimento.length / notasPageSize));
const visibleNotas = $derived(
notasPedimento.slice(
currentNotasPage * notasPageSize,
(currentNotasPage + 1) * notasPageSize
)
);
function handleCalculos() {
showBitacora = false;
showPartesII = false;
showRectificacion = false;
showRectificacionII = false;
showNotas = false;
showSeleccionAutomatizada = false;
showMultas = false;
activeView = 'calculos';
}
function handleBitacora() {
showPartesII = false;
showRectificacion = false;
showRectificacionII = false;
showNotas = false;
showSeleccionAutomatizada = false;
showMultas = false;
showBitacora = !showBitacora;
if (showBitacora) {
currentBitacoraPage = 0;
activeView = 'bitacora';
} else {
activeView = 'calculos';
}
}
function handleExportarBitacora() {
alert('Exportar Bitácora no implementado');
}
function goToBitacoraFirstPage() {
currentBitacoraPage = 0;
}
function goToBitacoraPreviousPage() {
if (currentBitacoraPage > 0) currentBitacoraPage--;
}
function goToBitacoraNextPage() {
if (currentBitacoraPage < totalBitacoraPages - 1) currentBitacoraPage++;
}
function goToBitacoraLastPage() {
currentBitacoraPage = totalBitacoraPages - 1;
}
function handlePatesII() {
showBitacora = false;
showRectificacion = false;
showRectificacionII = false;
showNotas = false;
showSeleccionAutomatizada = false;
showMultas = false;
showPartesII = !showPartesII;
if (showPartesII) {
currentPartesIIPage = 0;
selectedEmbarques = [];
activeView = 'partesII';
} else {
activeView = 'calculos';
}
}
function goToPartesIIFirstPage() {
currentPartesIIPage = 0;
}
function goToPartesIIPreviousPage() {
if (currentPartesIIPage > 0) currentPartesIIPage--;
}
function goToPartesIINextPage() {
if (currentPartesIIPage < totalPartesIIPages - 1) currentPartesIIPage++;
}
function goToPartesIILastPage() {
currentPartesIIPage = totalPartesIIPages - 1;
}
function handleNuevoEmbarque() {
currentEmbarque = {
numero: '',
peso: 0,
operacion_granel: false,
identificacion: '',
num_contenedor: '',
operacion_ferrocarril: false,
candados_fiscales: '',
bl: '',
total_bls: '',
operacion_maritima: false,
cantidad_transportes: 0,
cantidad_partidas: 0,
suma_cantidad_umc: 0,
cantidad_embarques: 1,
cantidad_mercancias: 0,
suma_cantidad_umc_embarques: 0,
clave_recinto: '0'
};
isEmbarqueDialogOpen = true;
}
function toggleSelectAll() {
if (selectedEmbarques.length === embarquesParciales.length) {
selectedEmbarques = [];
} else {
selectedEmbarques = embarquesParciales.map((_, i) => i);
}
}
function handleEditarEmbarque() {
alert('Editar Embarque no implementado');
}
function saveEmbarque() {
// Aquí se guardaría el embarque
isEmbarqueDialogOpen = false;
}
function handleNuevaMercancia() {
currentMercancia = {
descripcion: '',
cantidad_umc: 0,
cantidad_umt: 0,
peso: 0
};
editingMercanciaIndex = null;
isMercanciaDialogOpen = true;
}
function saveMercancia() {
if (editingMercanciaIndex !== null) {
mercancias[editingMercanciaIndex] = { ...currentMercancia };
} else {
mercancias.push({ ...currentMercancia });
}
isMercanciaDialogOpen = false;
}
function handleEditarMercancia(index: number) {
currentMercancia = { ...mercancias[index] };
editingMercanciaIndex = index;
isMercanciaDialogOpen = true;
}
function handleBorrarMercancia(index: number) {
mercancias.splice(index, 1);
}
function handleNuevaDiferencia() {
currentDiferencia = {
contribucion: '',
forma_pago: '',
importe: 0
};
editingDiferenciaIndex = null;
isDiferenciasDialogOpen = true;
}
function saveDiferencia() {
const newItem = {
gravamen: currentDiferencia.contribucion,
forma_pago: currentDiferencia.forma_pago,
importe: currentDiferencia.importe.toString()
};
if (editingDiferenciaIndex !== null) {
liquidacionDiferencias[editingDiferenciaIndex] = newItem;
} else {
liquidacionDiferencias.push(newItem);
}
isDiferenciasDialogOpen = false;
}
function handleNuevaNota() {
currentNota = {
comentario: ''
};
editingNotaIndex = null;
isNotaDialogOpen = true;
}
function saveNota() {
const now = new Date();
const newNota = {
usuario: 'Usuario Actual', // En producción vendría del contexto de autenticación
fecha: now.toLocaleDateString('es-MX'),
hora: now.toLocaleTimeString('es-MX', { hour: '2-digit', minute: '2-digit' }),
comentario: currentNota.comentario
};
if (editingNotaIndex !== null) {
notasPedimento[editingNotaIndex] = newNota;
} else {
notasPedimento.push(newNota);
}
isNotaDialogOpen = false;
}
function handleBorrarEmbarque() {
alert('Borrar Embarque no implementado');
}
function handleImprimirEmbarque() {
alert('Imprimir no implementado');
}
function handleImportarExcel() {
alert('Importar de Excel no implementado');
}
function handleTraerContenedores() {
alert('Traer Contenedores no implementado');
}
function handleTraerVehiculos() {
alert('Traer Vehículos no implementado');
}
function handleTraerTransportes() {
alert('Traer Transportes no implementado');
}
function handleRectificacion() {
showBitacora = false;
showPartesII = false;
showRectificacionII = false;
showNotas = false;
showSeleccionAutomatizada = false;
showMultas = false;
showRectificacion = !showRectificacion;
if (showRectificacion) {
activeView = 'rectificacion';
} else {
activeView = 'calculos';
}
}
function handleRectificacionII() {
showBitacora = false;
showPartesII = false;
showRectificacion = false;
showNotas = false;
showSeleccionAutomatizada = false;
showMultas = false;
showRectificacionII = !showRectificacionII;
if (showRectificacionII) {
activeView = 'rectificacionII';
} else {
activeView = 'calculos';
}
}
function handleNotas() {
showBitacora = false;
showPartesII = false;
showRectificacion = false;
showRectificacionII = false;
showSeleccionAutomatizada = false;
showMultas = false;
showNotas = !showNotas;
if (showNotas) {
currentNotasPage = 0;
activeView = 'notas';
} else {
activeView = 'calculos';
}
}
function goToNotasFirstPage() {
currentNotasPage = 0;
}
function goToNotasPreviousPage() {
if (currentNotasPage > 0) currentNotasPage--;
}
function goToNotasNextPage() {
if (currentNotasPage < totalNotasPages - 1) currentNotasPage++;
}
function goToNotasLastPage() {
currentNotasPage = totalNotasPages - 1;
}
function handleSeleccionAutomatizada() {
showBitacora = false;
showPartesII = false;
showRectificacion = false;
showRectificacionII = false;
showNotas = false;
showMultas = false;
showSeleccionAutomatizada = !showSeleccionAutomatizada;
if (showSeleccionAutomatizada) {
activeView = 'seleccionAutomatizada';
} else {
activeView = 'calculos';
}
}
function handleExpDocumentos() {
showBitacora = false;
showPartesII = false;
showRectificacion = false;
showRectificacionII = false;
showNotas = false;
showSeleccionAutomatizada = false;
showMultas = false;
activeView = 'calculos';
alert('Exp. Documentos a Expediente no implementado');
}
function handleMultas() {
showBitacora = false;
showPartesII = false;
showRectificacion = false;
showRectificacionII = false;
showNotas = false;
showSeleccionAutomatizada = false;
showMultas = !showMultas;
if (showMultas) {
activeView = 'multas';
} else {
activeView = 'calculos';
}
}
</script>
<div class="grid grid-cols-1 lg:grid-cols-[1fr_auto] gap-4">
<!-- Panel principal con formularios -->
<div class="space-y-4">
{#if !showBitacora && !showPartesII && !showRectificacion && !showRectificacionII && !showNotas && !showSeleccionAutomatizada && !showMultas}
<!-- Opciones para el cálculo del Pedimento -->
<Card>
<CardHeader>
<CardTitle class="text-base">Opciones para el cálculo del Pedimento</CardTitle>
</CardHeader>
<CardContent class="space-y-6">
<!-- Primera fila: Parámetros de cálculo y Parámetros de Pedimento -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Parámetros de cálculo -->
<div class="space-y-3">
<h3 class="text-sm font-semibold">Parámetros de cálculo:</h3>
<div class="space-y-2">
<div class="space-y-1.5">
<Label for="tipo_calculo" class="text-xs">Tipo de Cálculo</Label>
<Select.Root
type="single"
value={formData?.tipo_calculo}
onValueChange={(v) => {
if (formData && v) formData.tipo_calculo = v;
}}
>
<Select.Trigger id="tipo_calculo" class="h-8">
<span class="truncate">
{formData?.tipo_calculo === 'ninguno'
? 'Ninguno'
: formData?.tipo_calculo === 'normal'
? 'Normal'
: formData?.tipo_calculo === 'simplificado'
? 'Simplificado'
: 'Seleccionar'}
</span>
</Select.Trigger>
<Select.Content>
<Select.Item value="ninguno">Ninguno</Select.Item>
<Select.Item value="normal">Normal</Select.Item>
<Select.Item value="simplificado">Simplificado</Select.Item>
</Select.Content>
</Select.Root>
</div>
<div class="flex items-center gap-2">
<Checkbox
id="dta_operacion"
bind:checked={formData.dta_por_operacion_ag_facturas}
/>
<Label for="dta_operacion" class="text-xs font-normal cursor-pointer">
DTA Por Operación (Ag. Facturas)
</Label>
</div>
<div class="flex items-center gap-2">
<Checkbox
id="dta_vehiculos"
bind:checked={formData.dta_por_numero_vehiculos}
/>
<Label for="dta_vehiculos" class="text-xs font-normal cursor-pointer">
DTA por Número de Vehículos
</Label>
</div>
<div class="flex items-center gap-2">
<Checkbox id="paga_iva" bind:checked={formData.paga_iva} />
<Label for="paga_iva" class="text-xs font-normal cursor-pointer">Paga IVA</Label>
</div>
<div class="flex items-center gap-2">
<Checkbox id="paga_prev" bind:checked={formData.paga_prevalidacion} />
<Label for="paga_prev" class="text-xs font-normal cursor-pointer">
Paga Prevalidación
</Label>
</div>
</div>
<div class="space-y-2 border-t pt-3 mt-3">
<div class="flex items-center gap-2">
<Checkbox
id="aplicar_dta"
bind:checked={formData.aplicar_dta_8_millar_partida}
/>
<Label for="aplicar_dta" class="text-xs font-normal cursor-pointer">
Aplicar DTA 8 al millar por Partida
</Label>
</div>
<div class="flex items-center gap-2">
<Checkbox id="incluir_eci" bind:checked={formData.incluir_eci} />
<Label for="incluir_eci" class="text-xs font-normal cursor-pointer">
Incluir ECI
</Label>
</div>
<div class="flex items-center gap-2">
<Checkbox id="deducible_rec" bind:checked={formData.deducible_recargos} />
<Label for="deducible_rec" class="text-xs font-normal cursor-pointer">
Deducible Recargos
</Label>
</div>
<div class="flex items-center gap-2">
<Checkbox
id="cuota_fija_veh"
bind:checked={formData.cuota_fija_adicional_vehiculo}
/>
<Label for="cuota_fija_veh" class="text-xs font-normal cursor-pointer">
Cuota Fija Adicional por Vehículo
</Label>
</div>
<div class="flex items-center gap-2">
<Label for="cuota_fp" class="text-xs whitespace-nowrap">Cuota Fija Adicional F.P.:</Label>
<Input
id="cuota_fp"
type="number"
step="0.01"
bind:value={formData.cuota_fija_adicional_fp}
class="h-7 w-24"
/>
</div>
</div>
</div>
<!-- Parámetros de Pedimento -->
<div class="space-y-3">
<h3 class="text-sm font-semibold">Parámetros de Pedimento:</h3>
<div class="space-y-2">
<div class="flex items-center gap-2">
<Checkbox id="es_embajada" bind:checked={formData.es_embajada} />
<Label for="es_embajada" class="text-xs font-normal cursor-pointer">
Es Embajada
</Label>
</div>
<div class="flex items-center gap-2">
<Label for="embajada_dta" class="text-xs whitespace-nowrap">Embajada DTA:</Label>
<Input
id="embajada_dta"
type="number"
step="0.01"
bind:value={formData.embajada_dta}
class="h-7 w-24"
/>
</div>
<div class="flex items-center gap-2">
<Checkbox id="regla_3121" bind:checked={formData.regla_3_1_21_factores} />
<Label for="regla_3121" class="text-xs font-normal cursor-pointer">
Regla 3.1.21 (Factores)
</Label>
</div>
<div class="flex items-center gap-2">
<Label for="cambio_tarifa" class="text-xs whitespace-nowrap">
Cambio de Tarifa anterior:
</Label>
<Input
id="cambio_tarifa"
type="date"
bind:value={formData.cambio_tarifa_anterior}
class="h-7 w-40"
/>
</div>
</div>
</div>
</div>
<!-- Segunda fila: Parámetros de actualización -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 border-t pt-4">
<!-- Parámetros para actualización en Pedimento Normal -->
<div class="space-y-3">
<h3 class="text-sm font-semibold">Parámetros para actualización en Pedimento Normal:</h3>
<div class="space-y-2">
<div class="flex items-center gap-2">
<Checkbox id="act_iva" bind:checked={formData.actualizar_iva} />
<Label for="act_iva" class="text-xs font-normal cursor-pointer">
Actualizar IVA
</Label>
</div>
<div class="flex items-center gap-2">
<Checkbox id="act_adv" bind:checked={formData.actualizar_advalorem} />
<Label for="act_adv" class="text-xs font-normal cursor-pointer">
Actualizar Advalorem
</Label>
</div>
<div class="flex items-center gap-2">
<Checkbox id="act_dta" bind:checked={formData.actualizar_dta} />
<Label for="act_dta" class="text-xs font-normal cursor-pointer">
Actualizar DTA
</Label>
</div>
<div class="flex items-center gap-2">
<Checkbox id="act_cc" bind:checked={formData.actualizar_cc} />
<Label for="act_cc" class="text-xs font-normal cursor-pointer">
Actualizar C.C
</Label>
</div>
<div class="flex items-center gap-2">
<Checkbox id="act_ieps" bind:checked={formData.actualizar_ieps} />
<Label for="act_ieps" class="text-xs font-normal cursor-pointer">
Actualizar IEPS
</Label>
</div>
</div>
</div>
<!-- Parámetros de actualización en Rectificación -->
<div class="space-y-3">
<h3 class="text-sm font-semibold">Parámetros de actualización en Rectificación:</h3>
<div class="space-y-2">
<div class="flex items-center gap-2">
<Checkbox id="act_iva_rect" bind:checked={formData.actualizar_iva_rect} />
<Label for="act_iva_rect" class="text-xs font-normal cursor-pointer">
Actualizar IVA
</Label>
</div>
<div class="flex items-center gap-2">
<Checkbox id="act_adv_rect" bind:checked={formData.actualizar_advalorem_rect} />
<Label for="act_adv_rect" class="text-xs font-normal cursor-pointer">
Actualizar Advalorem
</Label>
</div>
<div class="flex items-center gap-2">
<Checkbox id="act_dta_rect" bind:checked={formData.actualizar_dta_rect} />
<Label for="act_dta_rect" class="text-xs font-normal cursor-pointer">
Actualizar DTA
</Label>
</div>
<div class="flex items-center gap-2">
<Checkbox id="act_cc_rect" bind:checked={formData.actualizar_cc_rect} />
<Label for="act_cc_rect" class="text-xs font-normal cursor-pointer">
Actualizar C.C
</Label>
</div>
<div class="flex items-center gap-2">
<Checkbox id="act_ieps_rect" bind:checked={formData.actualizar_ieps_rect} />
<Label for="act_ieps_rect" class="text-xs font-normal cursor-pointer">
Actualizar IEPS
</Label>
</div>
<div class="flex items-center gap-2">
<Checkbox
id="calc_recargos"
bind:checked={formData.calcular_recargos_diferencias}
/>
<Label for="calc_recargos" class="text-xs font-normal cursor-pointer">
Calcular recargos sobre diferencias
</Label>
</div>
</div>
</div>
</div>
<!-- Tercera fila: Otras opciones -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 border-t pt-4">
<!-- Parámetro de cambio de DTA -->
<div class="space-y-3">
<h3 class="text-sm font-semibold">Parámetro de cambio de DTA:</h3>
<div class="flex items-center gap-2">
<Checkbox
id="prov_nacional"
bind:checked={formData.proveedor_nacional_modifico_dta}
/>
<Label for="prov_nacional" class="text-xs font-normal cursor-pointer">
Proveedor Naconal [Modificó también DTA]
</Label>
</div>
<div class="space-y-2 mt-4">
<div class="flex items-center gap-2">
<Checkbox id="calc_v2" bind:checked={formData.calculo_valor_aduana_v2} />
<Label for="calc_v2" class="text-xs font-normal cursor-pointer">
Calculo del Valor Aduana Version 2.0
</Label>
</div>
<div class="flex items-center gap-2">
<Checkbox
id="calc_2dec"
bind:checked={formData.calculo_2_decimales_valor_unitario}
/>
<Label for="calc_2dec" class="text-xs font-normal cursor-pointer">
Calculo con 2 decimales de valor unitario
</Label>
</div>
<div class="flex items-center gap-2">
<Checkbox
id="calc_base_part"
bind:checked={formData.calcular_valor_aduana_base_partidas}
/>
<Label for="calc_base_part" class="text-xs font-normal cursor-pointer">
Calcular Valor Aduana a Base de Partidas
</Label>
</div>
</div>
</div>
<!-- Contribuciones tomadas para el Recargo -->
<div class="space-y-3">
<h3 class="text-sm font-semibold">
Contribuciones tomadas para el Recargo en Pedimento Normal:
</h3>
<div class="space-y-2">
<div class="flex items-center gap-2">
<Checkbox id="rec_igi" bind:checked={formData.recargo_igi} />
<Label for="rec_igi" class="text-xs font-normal cursor-pointer">
Recargo IGI
</Label>
</div>
<div class="flex items-center gap-2">
<Checkbox id="rec_iva" bind:checked={formData.recargo_iva} />
<Label for="rec_iva" class="text-xs font-normal cursor-pointer">
Recargo IVA
</Label>
</div>
<div class="flex items-center gap-2">
<Checkbox id="rec_ieps" bind:checked={formData.recargo_ieps} />
<Label for="rec_ieps" class="text-xs font-normal cursor-pointer">
Recargo IEPS
</Label>
</div>
<div class="flex items-center gap-2">
<Checkbox id="rec_isan" bind:checked={formData.recargo_isan} />
<Label for="rec_isan" class="text-xs font-normal cursor-pointer">
Recargo ISAN
</Label>
</div>
<div class="flex items-center gap-2">
<Checkbox id="rec_cc" bind:checked={formData.recargo_cc} />
<Label for="rec_cc" class="text-xs font-normal cursor-pointer">Recargo C.C</Label>
</div>
</div>
</div>
</div>
<!-- Factor Incrementable y otros -->
<div class="border-t pt-4 space-y-3">
<div class="flex items-center gap-2">
<Label for="factor_inc" class="text-xs whitespace-nowrap">
Factor Incrementable Manual:
</Label>
<Input
id="factor_inc"
type="text"
bind:value={formData.factor_incrementable_manual}
class="h-7 font-mono text-xs"
placeholder="0.00000000000000000000"
/>
</div>
<div class="flex items-center gap-2">
<Checkbox
id="agregar_entidad"
bind:checked={formData.agregar_entidad_federativa_proveedor}
/>
<Label for="agregar_entidad" class="text-xs font-normal cursor-pointer">
Agregar entidad federativa de proveedor, registro 505, campo 10
</Label>
</div>
</div>
</CardContent>
</Card>
{:else if showBitacora}
<!-- Vista de Bitácora -->
<Card>
<CardHeader>
<CardTitle class="text-base">Registro de movimientos sobre el Pedimento</CardTitle>
</CardHeader>
<CardContent class="space-y-4">
<div class="border rounded-lg overflow-hidden">
<Table>
<TableHeader>
<TableRow>
<TableHead class="w-[120px]">Módulo</TableHead>
<TableHead class="w-[150px]">Pedimento</TableHead>
<TableHead>Movimiento</TableHead>
<TableHead class="w-[100px]">Usuario</TableHead>
<TableHead class="w-[110px]">Fecha</TableHead>
<TableHead class="w-[90px]">Hora</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{#if bitacoraMovimientos.length === 0}
<TableRow>
<TableCell colspan={6} class="text-center text-muted-foreground py-8">
No hay movimientos registrados
</TableCell>
</TableRow>
{:else if paginatedBitacoraMovimientos.length === 0}
<TableRow>
<TableCell colspan={6} class="text-center text-muted-foreground py-8">
No hay datos en esta página
</TableCell>
</TableRow>
{:else}
{#each paginatedBitacoraMovimientos as movimiento}
<TableRow>
<TableCell class="font-medium">{movimiento.modulo}</TableCell>
<TableCell>{movimiento.pedimento}</TableCell>
<TableCell>{movimiento.movimiento}</TableCell>
<TableCell>{movimiento.usuario}</TableCell>
<TableCell>{movimiento.fecha}</TableCell>
<TableCell>{movimiento.hora}</TableCell>
</TableRow>
{/each}
{/if}
</TableBody>
</Table>
</div>
<!-- Controles de paginación -->
{#if bitacoraMovimientos.length > 0}
<div class="flex items-center justify-center gap-2 border-t pt-3">
<Button
size="sm"
variant="outline"
onclick={goToBitacoraFirstPage}
disabled={currentBitacoraPage === 0}
class="w-8 h-8 p-0"
>
<ChevronsLeft size={16} />
</Button>
<Button
size="sm"
variant="outline"
onclick={goToBitacoraPreviousPage}
disabled={currentBitacoraPage === 0}
class="w-8 h-8 p-0"
>
<ChevronLeft size={16} />
</Button>
<span class="text-sm text-muted-foreground px-2">
Página {currentBitacoraPage + 1} de {totalBitacoraPages || 1}
</span>
<Button
size="sm"
variant="outline"
onclick={goToBitacoraNextPage}
disabled={currentBitacoraPage >= totalBitacoraPages - 1}
class="w-8 h-8 p-0"
>
<ChevronRight size={16} />
</Button>
<Button
size="sm"
variant="outline"
onclick={goToBitacoraLastPage}
disabled={currentBitacoraPage >= totalBitacoraPages - 1}
class="w-8 h-8 p-0"
>
<ChevronsRight size={16} />
</Button>
</div>
{/if}
<!-- Botón de exportar -->
<div class="border-t pt-3">
<Button size="sm" variant="outline" onclick={handleExportarBitacora}>
<Download class="mr-2" size={14} />
Exportar Bitácora
</Button>
</div>
</CardContent>
</Card>
{:else if showPartesII}
<!-- Vista de Partes II (Embarques Parciales) -->
<div class="grid grid-cols-1 lg:grid-cols-[1fr_auto] gap-4">
<!-- Tabla de embarques -->
<Card>
<CardHeader>
<CardTitle class="text-base">Embarques Parciales</CardTitle>
</CardHeader>
<CardContent class="space-y-4">
<div class="border rounded-lg overflow-hidden">
<Table>
<TableHeader>
<TableRow>
<TableHead class="w-[50px]">
<Checkbox
checked={selectedEmbarques.length === embarquesParciales.length &&
embarquesParciales.length > 0}
onclick={toggleSelectAll}
/>
</TableHead>
<TableHead class="w-[100px]">Número</TableHead>
<TableHead>Identificación</TableHead>
<TableHead>Precintos</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{#if embarquesParciales.length === 0}
<TableRow>
<TableCell colspan={4} class="text-center text-muted-foreground py-8">
No hay embarques registrados
</TableCell>
</TableRow>
{:else if paginatedEmbarquesParciales.length === 0}
<TableRow>
<TableCell colspan={4} class="text-center text-muted-foreground py-8">
No hay datos en esta página
</TableCell>
</TableRow>
{:else}
{#each paginatedEmbarquesParciales as embarque, index}
<TableRow>
<TableCell>
<Checkbox
checked={selectedEmbarques.includes(
currentPartesIIPage * partesIIPageSize + index
)}
onclick={() => {
const globalIndex = currentPartesIIPage * partesIIPageSize + index;
if (selectedEmbarques.includes(globalIndex)) {
selectedEmbarques = selectedEmbarques.filter((i) => i !== globalIndex);
} else {
selectedEmbarques = [...selectedEmbarques, globalIndex];
}
}}
/>
</TableCell>
<TableCell class="font-medium">{embarque.numero}</TableCell>
<TableCell>{embarque.identificacion}</TableCell>
<TableCell>{embarque.precintos}</TableCell>
</TableRow>
{/each}
{/if}
</TableBody>
</Table>
</div>
<!-- Controles de paginación -->
{#if embarquesParciales.length > 0}
<div class="flex items-center justify-center gap-2 border-t pt-3">
<Button
size="sm"
variant="outline"
onclick={goToPartesIIFirstPage}
disabled={currentPartesIIPage === 0}
class="w-8 h-8 p-0"
>
<ChevronsLeft size={16} />
</Button>
<Button
size="sm"
variant="outline"
onclick={goToPartesIIPreviousPage}
disabled={currentPartesIIPage === 0}
class="w-8 h-8 p-0"
>
<ChevronLeft size={16} />
</Button>
<span class="text-sm text-muted-foreground px-2">
Página {currentPartesIIPage + 1} de {totalPartesIIPages || 1}
</span>
<Button
size="sm"
variant="outline"
onclick={goToPartesIINextPage}
disabled={currentPartesIIPage >= totalPartesIIPages - 1}
class="w-8 h-8 p-0"
>
<ChevronRight size={16} />
</Button>
<Button
size="sm"
variant="outline"
onclick={goToPartesIILastPage}
disabled={currentPartesIIPage >= totalPartesIIPages - 1}
class="w-8 h-8 p-0"
>
<ChevronsRight size={16} />
</Button>
</div>
{/if}
<!-- Botones de acción -->
<div class="flex flex-wrap gap-2 border-t pt-3">
<Button size="sm" variant="outline" onclick={toggleSelectAll}>
Seleccionar/Des Todo
</Button>
<Button size="sm" onclick={handleNuevoEmbarque}>
<Plus class="mr-1.5" size={14} />
Nuevo
</Button>
<Button
size="sm"
variant="outline"
disabled={embarquesParciales.length === 0}
onclick={handleEditarEmbarque}
>
<Pencil class="mr-1.5" size={14} />
Editar
</Button>
<Button
size="sm"
variant="destructive"
disabled={selectedEmbarques.length === 0}
onclick={handleBorrarEmbarque}
>
<Trash2 class="mr-1.5" size={14} />
Borrar
</Button>
<Button size="sm" variant="outline" onclick={handleImprimirEmbarque}>
<Printer class="mr-1.5" size={14} />
Imprimir
</Button>
<Button size="sm" variant="outline" onclick={handleImportarExcel}>
<Upload class="mr-1.5" size={14} />
Importar de Excel
</Button>
</div>
</CardContent>
</Card>
<!-- Panel derecho con estadísticas y botones -->
<div class="lg:w-80 space-y-4">
<!-- Estadísticas -->
<Card>
<CardContent class="p-4 space-y-4">
<div class="space-y-2">
<div class="flex justify-between items-center">
<Label class="text-xs">Cantidad de Transportes:</Label>
<Input value="0" readonly class="w-20 h-7 text-right" />
</div>
</div>
<div class="space-y-2 border-t pt-3">
<h4 class="text-xs font-semibold">Partidas del Pedimento</h4>
<div class="flex justify-between items-center">
<Label class="text-xs">Cantidad de Partidas:</Label>
<Input value="0" readonly class="w-20 h-7 text-right" />
</div>
<div class="flex justify-between items-center">
<Label class="text-xs">Suma de cantidad UMC:</Label>
<Input value="0.000" readonly class="w-24 h-7 text-right" />
</div>
</div>
<div class="space-y-2 border-t pt-3">
<h4 class="text-xs font-semibold">Embarques</h4>
<div class="flex justify-between items-center">
<Label class="text-xs">Cantidad de Embarques:</Label>
<Input value="0" readonly class="w-20 h-7 text-right" />
</div>
<div class="flex justify-between items-center">
<Label class="text-xs">Cantidad de Mercancias:</Label>
<Input value="0" readonly class="w-20 h-7 text-right" />
</div>
<div class="flex justify-between items-center">
<Label class="text-xs">Suma de cantidad UMC:</Label>
<Input value="0.000" readonly class="w-24 h-7 text-right" />
</div>
</div>
<div class="space-y-2 border-t pt-3">
<Button
size="sm"
variant="outline"
class="w-full justify-start"
onclick={handleTraerContenedores}
>
<Package class="mr-2" size={14} />
Traer Contenedores
</Button>
<Button
size="sm"
variant="outline"
class="w-full justify-start"
onclick={handleTraerVehiculos}
>
<Car class="mr-2" size={14} />
Traer Vehículos
</Button>
<Button
size="sm"
variant="outline"
class="w-full justify-start"
onclick={handleTraerTransportes}
>
<Truck class="mr-2" size={14} />
Traer Transportes
</Button>
</div>
</CardContent>
</Card>
</div>
</div>
{/if}
<!-- Vista de Rectificación -->
{#if showRectificacion}
<Card>
<CardHeader>
<CardTitle>Rectificación</CardTitle>
</CardHeader>
<CardContent>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
<div class="space-y-2">
<Label for="es-rectificacion">Es Rectificación</Label>
<Select.Root
type="single"
value={rectificacionFormData.es_rectificacion}
onValueChange={(v) => {
if (v) rectificacionFormData.es_rectificacion = v;
}}
>
<Select.Trigger id="es-rectificacion" class="w-full">
<span class="truncate">
{rectificacionFormData.es_rectificacion === 'si'
? 'Sí'
: rectificacionFormData.es_rectificacion === 'no'
? 'No'
: 'Seleccionar'}
</span>
</Select.Trigger>
<Select.Content>
<Select.Item value="si"></Select.Item>
<Select.Item value="no">No</Select.Item>
</Select.Content>
</Select.Root>
</div>
<div class="space-y-2">
<Label for="clave-pedimento-original">Clave de pedimento original</Label>
<Input
id="clave-pedimento-original"
bind:value={rectificacionFormData.clave_pedimento_original}
/>
</div>
<div class="space-y-2">
<Label for="pedimento-original"
>Pedimento Original <span class="text-xs text-muted-foreground"
>(VWnSAAI)</span
></Label
>
<Input
id="pedimento-original"
bind:value={rectificacionFormData.pedimento_original}
/>
</div>
<div class="space-y-2">
<Label for="fecha-pago-original">Fecha de pago original</Label>
<Input
id="fecha-pago-original"
type="date"
bind:value={rectificacionFormData.fecha_pago_original}
/>
</div>
<div class="space-y-2">
<Label for="aduana-seccion-original">Aduana/Sección Original</Label>
<Input
id="aduana-seccion-original"
bind:value={rectificacionFormData.aduana_seccion_original}
/>
</div>
<div class="space-y-2">
<Label for="anio-impresion-rect"
>Año para impresión de pedimento de Rect</Label
>
<Input
id="anio-impresion-rect"
bind:value={rectificacionFormData.anio_impresion_rect}
/>
</div>
<div class="space-y-2">
<Label for="patente-original">Patente Original</Label>
<Input
id="patente-original"
bind:value={rectificacionFormData.patente_original}
/>
</div>
</div>
<div class="mb-6">
<div class="flex items-center space-x-2">
<Checkbox
id="utilizar-fecha-pago"
checked={rectificacionFormData.utilizar_fecha_pago_original}
onclick={() => {
rectificacionFormData.utilizar_fecha_pago_original =
!rectificacionFormData.utilizar_fecha_pago_original;
}}
/>
<Label for="utilizar-fecha-pago" class="text-sm font-normal">
Utilizar fecha de pago original para el cálculo del FI y recargos de la
rectificación
</Label>
</div>
</div>
<!-- Cuadro de liquidación -->
<div class="border rounded-lg p-4">
<div class="flex items-center justify-between mb-4">
<h3 class="font-semibold">Cuadro de liquidación para diferencias en contribuciones</h3>
<div class="flex items-center space-x-2">
<Checkbox
id="calculo-manual"
checked={rectificacionFormData.calculo_manual_contribuciones}
onclick={() => {
rectificacionFormData.calculo_manual_contribuciones =
!rectificacionFormData.calculo_manual_contribuciones;
}}
/>
<Label for="calculo-manual" class="text-sm font-normal">
Cálculo manual de contribuciones
</Label>
</div>
</div>
<!-- Tabla de liquidación -->
<div class="border rounded-md mb-4">
<Table>
<TableHeader>
<TableRow>
<TableHead>Gravamen</TableHead>
<TableHead>Forma de pago</TableHead>
<TableHead>Importe</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{#if liquidacionDiferencias.length === 0}
<TableRow>
<TableCell colspan={3} class="text-center text-muted-foreground">
No hay registros
</TableCell>
</TableRow>
{:else}
{#each liquidacionDiferencias as item}
<TableRow>
<TableCell>{item.gravamen}</TableCell>
<TableCell>{item.forma_pago}</TableCell>
<TableCell>{item.importe}</TableCell>
</TableRow>
{/each}
{/if}
</TableBody>
</Table>
</div>
<!-- Botones de acción -->
<div class="flex gap-2">
<Button size="sm" onclick={handleNuevaDiferencia}>
<Plus class="mr-2" size={14} />
Nuevo
</Button>
<Button size="sm" variant="outline" onclick={() => alert('Editar no implementado')}>
<Pencil class="mr-2" size={14} />
Editar
</Button>
<Button size="sm" variant="outline" onclick={() => alert('Borrar no implementado')}>
<Trash2 class="mr-2" size={14} />
Borrar
</Button>
</div>
</div>
</CardContent>
</Card>
{/if}
<!-- Vista de Rectificación II -->
{#if showRectificacionII}
<Card>
<CardHeader>
<CardTitle>Causa de la Rectificación</CardTitle>
</CardHeader>
<CardContent>
<div class="space-y-4">
<div class="space-y-2">
<Label for="causa">Causa:</Label>
<textarea
id="causa"
bind:value={rectificacionIIFormData.causa}
class="w-full min-h-[120px] rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 resize-y"
placeholder="Ingrese la causa de la rectificación"
></textarea>
</div>
<div class="space-y-2">
<Label for="motivo">Motivo:</Label>
<textarea
id="motivo"
bind:value={rectificacionIIFormData.motivo}
class="w-full min-h-[120px] rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 resize-y"
placeholder="Ingrese el motivo de la rectificación"
></textarea>
</div>
</div>
</CardContent>
</Card>
{/if}
<!-- Vista de Notas del Pedimento -->
{#if showNotas}
<Card>
<CardHeader>
<CardTitle>Notas del Pedimento</CardTitle>
</CardHeader>
<CardContent>
<!-- Tabla de Notas -->
<div class="border rounded-md mb-4">
<Table>
<TableHeader>
<TableRow>
<TableHead>Usuario</TableHead>
<TableHead colspan={2}>Creada</TableHead>
<TableHead>Comentario</TableHead>
</TableRow>
<TableRow class="border-t">
<TableHead class="h-0 p-0 border-0"></TableHead>
<TableHead class="text-xs">Fecha</TableHead>
<TableHead class="text-xs">Hora</TableHead>
<TableHead class="h-0 p-0 border-0"></TableHead>
</TableRow>
</TableHeader>
<TableBody>
{#if notasPedimento.length === 0}
<TableRow>
<TableCell colspan={4} class="text-center text-muted-foreground h-32">
No hay notas registradas
</TableCell>
</TableRow>
{:else}
{#each visibleNotas as nota}
<TableRow>
<TableCell>{nota.usuario}</TableCell>
<TableCell>{nota.fecha}</TableCell>
<TableCell>{nota.hora}</TableCell>
<TableCell>{nota.comentario}</TableCell>
</TableRow>
{/each}
{/if}
</TableBody>
</Table>
</div>
<!-- Paginación -->
<div class="flex items-center justify-between mb-4">
<div class="flex items-center gap-1">
<Button
size="sm"
variant="outline"
onclick={goToNotasFirstPage}
disabled={currentNotasPage === 0}
>
<ChevronsLeft size={14} />
</Button>
<Button
size="sm"
variant="outline"
onclick={goToNotasPreviousPage}
disabled={currentNotasPage === 0}
>
<ChevronLeft size={14} />
</Button>
<span class="text-sm px-3">
Página {currentNotasPage + 1} de {totalNotasPages || 1}
</span>
<Button
size="sm"
variant="outline"
onclick={goToNotasNextPage}
disabled={currentNotasPage >= totalNotasPages - 1}
>
<ChevronRight size={14} />
</Button>
<Button
size="sm"
variant="outline"
onclick={goToNotasLastPage}
disabled={currentNotasPage >= totalNotasPages - 1}
>
<ChevronsRight size={14} />
</Button>
</div>
</div>
<!-- Botones de acción -->
<div class="flex gap-2">
<Button size="sm" onclick={handleNuevaNota}>
<Plus class="mr-2" size={14} />
Nuevo
</Button>
<Button size="sm" variant="outline" onclick={() => alert('Editar no implementado')}>
<Pencil class="mr-2" size={14} />
Editar
</Button>
<Button size="sm" variant="outline" onclick={() => alert('Borrar no implementado')}>
<Trash2 class="mr-2" size={14} />
Borrar
</Button>
</div>
</CardContent>
</Card>
{/if}
<!-- Vista de Selección Automatizada -->
{#if showSeleccionAutomatizada}
<Card>
<CardHeader>
<CardTitle>Selección Automatizada</CardTitle>
</CardHeader>
<CardContent>
<div class="space-y-6">
<div class="space-y-2">
<Label for="fecha-cruce">Fecha de Cruce:</Label>
<Input
id="fecha-cruce"
type="date"
bind:value={seleccionAutomatizadaFormData.fecha_cruce}
/>
</div>
<div class="space-y-2">
<Label for="primera-revision">1era Revisión</Label>
<Select.Root
type="single"
value={seleccionAutomatizadaFormData.primera_revision}
onValueChange={(v) => {
if (v) seleccionAutomatizadaFormData.primera_revision = v;
}}
>
<Select.Trigger id="primera-revision" class="w-full">
<span class="truncate">
{seleccionAutomatizadaFormData.primera_revision || 'Seleccionar'}
</span>
</Select.Trigger>
<Select.Content>
<Select.Item value="Rojo">Rojo</Select.Item>
<Select.Item value="Verde">Verde</Select.Item>
</Select.Content>
</Select.Root>
</div>
<div class="space-y-2">
<Label for="comentario-primera">Comentario 1era revisión:</Label>
<textarea
id="comentario-primera"
bind:value={seleccionAutomatizadaFormData.comentario_primera_revision}
class="w-full min-h-[100px] rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 resize-y"
placeholder="Ingrese el comentario de la primera revisión"
></textarea>
</div>
<div class="space-y-2">
<Label for="segunda-revision">2a Revisión</Label>
<Select.Root
type="single"
value={seleccionAutomatizadaFormData.segunda_revision}
onValueChange={(v) => {
if (v) seleccionAutomatizadaFormData.segunda_revision = v;
}}
>
<Select.Trigger id="segunda-revision" class="w-full">
<span class="truncate">
{seleccionAutomatizadaFormData.segunda_revision || 'Seleccionar'}
</span>
</Select.Trigger>
<Select.Content>
<Select.Item value="Rojo">Rojo</Select.Item>
<Select.Item value="Verde">Verde</Select.Item>
</Select.Content>
</Select.Root>
</div>
<div class="space-y-2">
<Label for="comentario-segunda">Comentario 2a revisión:</Label>
<textarea
id="comentario-segunda"
bind:value={seleccionAutomatizadaFormData.comentario_segunda_revision}
class="w-full min-h-[100px] rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 resize-y"
placeholder="Ingrese el comentario de la segunda revisión"
></textarea>
</div>
</div>
</CardContent>
</Card>
{/if}
<!-- Vista de Multas -->
{#if showMultas}
<Card>
<CardHeader>
<CardTitle>Multas</CardTitle>
</CardHeader>
<CardContent>
<div class="space-y-2">
<Label for="cargo-multa">Cargo</Label>
<Select.Root
type="single"
value={multasFormData.cargo}
onValueChange={(v) => {
if (v) multasFormData.cargo = v;
}}
>
<Select.Trigger id="cargo-multa" class="w-full">
<span class="truncate">
{multasFormData.cargo || 'Seleccionar'}
</span>
</Select.Trigger>
<Select.Content>
<Select.Item value="cargo oficina">cargo oficina</Select.Item>
<Select.Item value="cargo cliente">cargo cliente</Select.Item>
</Select.Content>
</Select.Root>
</div>
</CardContent>
</Card>
{/if}
</div>
<!-- Panel de botones laterales -->
<div class="lg:w-48">
<Card>
<CardContent class="p-3 space-y-2">
<Button
size="sm"
variant={activeView === 'calculos' ? 'default' : 'outline'}
class="w-full justify-start"
onclick={handleCalculos}
>
<Calculator class="mr-2" size={14} />
Cálculos
</Button>
<Button
size="sm"
variant={activeView === 'bitacora' ? 'default' : 'outline'}
class="w-full justify-start"
onclick={handleBitacora}
>
<FileText class="mr-2" size={14} />
Bitácora
</Button>
<Button
size="sm"
variant={activeView === 'partesII' ? 'default' : 'outline'}
class="w-full justify-start"
onclick={handlePatesII}
>
<FileCheck class="mr-2" size={14} />
Partes II
</Button>
<Button
size="sm"
variant={activeView === 'rectificacion' ? 'default' : 'outline'}
class="w-full justify-start"
onclick={handleRectificacion}
>
<RotateCw class="mr-2" size={14} />
Rectificación
</Button>
<Button
size="sm"
variant={activeView === 'rectificacionII' ? 'default' : 'outline'}
class="w-full justify-start"
onclick={handleRectificacionII}
>
<RotateCw class="mr-2" size={14} />
Rectificación II
</Button>
<Button size="sm" variant={activeView === 'notas' ? 'default' : 'outline'} class="w-full justify-start" onclick={handleNotas}>
<FileText class="mr-2" size={14} />
Notas
</Button>
<Button
size="sm"
variant={activeView === 'seleccionAutomatizada' ? 'default' : 'outline'}
class="w-full justify-start text-xs whitespace-normal h-auto py-2"
onclick={handleSeleccionAutomatizada}
>
<AlertCircle class="mr-2 flex-shrink-0" size={14} />
<span class="text-left">Selección Automatizada</span>
</Button>
<Button
size="sm"
variant="outline"
class="w-full justify-start text-xs whitespace-normal h-auto py-2"
onclick={handleExpDocumentos}
>
<FileText class="mr-2 flex-shrink-0" size={14} />
<span class="text-left">Exp. Documentos</span>
</Button>
<Button size="sm" variant={activeView === 'multas' ? 'default' : 'outline'} class="w-full justify-start" onclick={handleMultas}>
<FileX class="mr-2" size={14} />
Multas
</Button>
</CardContent>
</Card>
</div>
</div>
<!-- Dialog para Embarque Parcial de Mercancías -->
<Dialog bind:open={isEmbarqueDialogOpen}>
<DialogContent class="w-[98vw] h-[95vh] max-w-none flex flex-col p-6">
<DialogHeader>
<DialogTitle>Embarque Parcial de Mercancías</DialogTitle>
</DialogHeader>
<div class="flex-1 overflow-y-auto space-y-6 pr-2">
<!-- Fila 1: Número, Peso, Checkbox -->
<div class="grid grid-cols-[200px_200px_1fr] gap-6">
<div class="space-y-2">
<Label for="numero">Número:</Label>
<Input id="numero" bind:value={currentEmbarque.numero} />
</div>
<div class="space-y-2">
<Label for="peso">Peso:</Label>
<Input
id="peso"
type="number"
step="0.001"
bind:value={currentEmbarque.peso}
placeholder="0.000"
/>
</div>
<div class="flex items-end pb-2">
<Checkbox bind:checked={currentEmbarque.operacion_granel} />
<Label class="ml-2 text-sm">Operación de Mercancías a Granel</Label>
</div>
</div>
<!-- Fila 2: Identificación, Núm. Contenedor, Checkbox -->
<div class="grid grid-cols-[200px_200px_1fr] gap-6">
<div class="space-y-2">
<Label for="identificacion">Identificación:</Label>
<Input id="identificacion" bind:value={currentEmbarque.identificacion} />
</div>
<div class="space-y-2">
<Label for="num_contenedor">Núm. de Contenedor:</Label>
<Input id="num_contenedor" bind:value={currentEmbarque.num_contenedor} />
</div>
<div class="flex items-end pb-2">
<Checkbox bind:checked={currentEmbarque.operacion_ferrocarril} />
<Label class="ml-2 text-sm">Operación al amparo de la Regla 1.9.12 (Ferrocarril)</Label>
</div>
</div>
<!-- Fila 3: Candados, BL, Total BL'S, Checkbox -->
<div class="grid grid-cols-[200px_200px_200px_1fr] gap-6">
<div class="space-y-2">
<Label for="candados_fiscales">Candados Fiscales:</Label>
<Input id="candados_fiscales" bind:value={currentEmbarque.candados_fiscales} />
</div>
<div class="space-y-2">
<Label for="bl">BL:</Label>
<Input id="bl" bind:value={currentEmbarque.bl} />
</div>
<div class="space-y-2">
<Label for="total_bls">Total BL'S:</Label>
<Input id="total_bls" bind:value={currentEmbarque.total_bls} />
</div>
<div class="flex items-end pb-2">
<Checkbox bind:checked={currentEmbarque.operacion_maritima} />
<Label class="ml-2 text-sm">Operación Marítima</Label>
</div>
</div>
<!-- Sección: Mercancías del Embarque -->
<div class="border rounded-lg p-4 bg-muted/20">
<div class="flex justify-between items-center mb-4">
<h3 class="text-sm font-semibold">Mercancías del Embarque</h3>
<div class="flex gap-2">
<Button size="sm" onclick={handleNuevaMercancia}>
<Plus size={14} />
</Button>
<Button size="sm" variant="outline">
<Pencil size={14} />
</Button>
<Button size="sm" variant="outline">
<Trash2 size={14} />
</Button>
</div>
</div>
<!-- Tabla -->
<div class="border rounded-lg overflow-hidden mb-4 bg-background">
<Table>
<TableHeader>
<TableRow>
<TableHead class="w-[50px]">#</TableHead>
<TableHead>Descripción de Mercancía</TableHead>
<TableHead class="text-right w-[150px]">Cantidad UMC</TableHead>
<TableHead class="text-right w-[150px]">Cantidad UMT</TableHead>
<TableHead class="text-right w-[150px]">Peso</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{#if mercancias.length === 0}
<TableRow>
<TableCell colspan={5} class="text-center text-muted-foreground py-8">
No hay mercancías registradas
</TableCell>
</TableRow>
{:else}
{#each mercancias as mercancia, index}
<TableRow>
<TableCell>{index + 1}</TableCell>
<TableCell>{mercancia.descripcion}</TableCell>
<TableCell class="text-right">{mercancia.cantidad_umc.toFixed(3)}</TableCell>
<TableCell class="text-right">{mercancia.cantidad_umt.toFixed(3)}</TableCell>
<TableCell class="text-right">{mercancia.peso.toFixed(3)}</TableCell>
</TableRow>
{/each}
{/if}
</TableBody>
</Table>
</div>
<!-- Controles de paginación -->
<div class="flex items-center justify-center gap-2 mb-4">
<Button size="sm" variant="outline" class="w-8 h-8 p-0">
<ChevronsLeft size={16} />
</Button>
<Button size="sm" variant="outline" class="w-8 h-8 p-0">
<ChevronLeft size={16} />
</Button>
<Button size="sm" variant="outline" class="w-8 h-8 p-0">
<ChevronRight size={16} />
</Button>
<Button size="sm" variant="outline" class="w-8 h-8 p-0">
<ChevronsRight size={16} />
</Button>
</div>
<!-- Estadísticas en 6 columnas -->
<div class="grid grid-cols-6 gap-4 border-t pt-4">
<div class="space-y-1">
<Label class="text-xs">Cantidad de Transportes:</Label>
<Input
type="number"
bind:value={currentEmbarque.cantidad_transportes}
readonly
class="text-right h-9 text-sm"
/>
</div>
<div class="space-y-1">
<Label class="text-xs">Cantidad de Partidas:</Label>
<Input
type="number"
bind:value={currentEmbarque.cantidad_partidas}
readonly
class="text-right h-9 text-sm"
/>
</div>
<div class="space-y-1">
<Label class="text-xs">Suma cantidad UMC:</Label>
<Input
type="number"
step="0.001"
value={currentEmbarque.suma_cantidad_umc.toFixed(3)}
readonly
class="text-right h-9 text-sm"
/>
</div>
<div class="space-y-1">
<Label class="text-xs">Cantidad de Embarques:</Label>
<Input
type="number"
bind:value={currentEmbarque.cantidad_embarques}
readonly
class="text-right h-9 text-sm"
/>
</div>
<div class="space-y-1">
<Label class="text-xs">Cantidad de Mercancías:</Label>
<Input
type="number"
bind:value={currentEmbarque.cantidad_mercancias}
readonly
class="text-right h-9 text-sm"
/>
</div>
<div class="space-y-1">
<Label class="text-xs">Suma cantidad UMC:</Label>
<Input
type="number"
step="0.001"
value={currentEmbarque.suma_cantidad_umc_embarques.toFixed(3)}
readonly
class="text-right h-9 text-sm"
/>
</div>
</div>
<!-- Clave Recinto Fiscalizado -->
<div class="grid grid-cols-6 gap-4 mt-4">
<div class="space-y-1">
<Label class="text-xs">Clave Recinto Fiscalizado:</Label>
<div class="flex gap-2">
<Input bind:value={currentEmbarque.clave_recinto} class="h-9" />
<Button size="sm" variant="outline" class="h-9 w-9 p-0">
<Search size={14} />
</Button>
</div>
</div>
</div>
</div>
</div>
<DialogFooter class="mt-4">
<Button variant="outline" onclick={() => (isEmbarqueDialogOpen = false)}>Cancelar</Button>
<Button onclick={saveEmbarque}>Aceptar</Button>
</DialogFooter>
</DialogContent>
</Dialog>
<!-- Dialog anidado para Mercancías del Embarque Parcial -->
<Dialog bind:open={isMercanciaDialogOpen}>
<DialogContent class="max-w-lg z-[100]">
<DialogHeader>
<DialogTitle>Mercancías del Embarque Parcial</DialogTitle>
</DialogHeader>
<div class="space-y-4 py-4">
<div class="space-y-2">
<Label for="descripcion">Descripción de Mercancía:</Label>
<textarea
id="descripcion"
bind:value={currentMercancia.descripcion}
class="w-full min-h-[120px] rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 resize-none"
placeholder="Ingrese la descripción de la mercancía"
></textarea>
</div>
<div class="grid grid-cols-3 gap-4">
<div class="space-y-2">
<Label for="cantidad_umc">Cantidad UMC:</Label>
<Input
id="cantidad_umc"
type="number"
step="0.001"
bind:value={currentMercancia.cantidad_umc}
placeholder="0.000"
class="text-right"
/>
</div>
<div class="space-y-2">
<Label for="cantidad_umt">Cantidad UMT:</Label>
<Input
id="cantidad_umt"
type="number"
step="0.001"
bind:value={currentMercancia.cantidad_umt}
placeholder="0.000"
class="text-right"
/>
</div>
<div class="space-y-2">
<Label for="peso_mercancia">Peso:</Label>
<Input
id="peso_mercancia"
type="number"
step="0.001"
bind:value={currentMercancia.peso}
placeholder="0.000"
class="text-right"
/>
</div>
</div>
</div>
<DialogFooter>
<Button variant="outline" onclick={() => (isMercanciaDialogOpen = false)}>Cancelar</Button>
<Button onclick={saveMercancia}>Aceptar</Button>
</DialogFooter>
</DialogContent>
</Dialog>
<!-- Dialog para Diferencias en contribuciones -->
<Dialog bind:open={isDiferenciasDialogOpen}>
<DialogContent class="max-w-md">
<DialogHeader>
<DialogTitle>Diferencias en contribuciones</DialogTitle>
</DialogHeader>
<div class="space-y-4 py-4">
<div class="space-y-2">
<Label for="contribucion">Contribución:</Label>
<Input
id="contribucion"
bind:value={currentDiferencia.contribucion}
placeholder="Ej: IVA"
/>
</div>
<div class="space-y-2">
<Label for="forma_pago_dif">Forma de pago:</Label>
<Input
id="forma_pago_dif"
bind:value={currentDiferencia.forma_pago}
placeholder="Ej: Efectivo, Transferencia"
/>
</div>
<div class="space-y-2">
<Label for="importe_dif">Importe:</Label>
<Input
id="importe_dif"
type="number"
step="0.01"
bind:value={currentDiferencia.importe}
placeholder="0.00"
class="text-right"
/>
</div>
</div>
<DialogFooter>
<Button variant="outline" onclick={() => (isDiferenciasDialogOpen = false)}>Cancelar</Button>
<Button onclick={saveDiferencia}>Aceptar</Button>
</DialogFooter>
</DialogContent>
</Dialog>
<!-- Dialog para Notas del Pedimento -->
<Dialog bind:open={isNotaDialogOpen}>
<DialogContent class="max-w-md">
<DialogHeader>
<DialogTitle>Notas del Pedimento</DialogTitle>
</DialogHeader>
<div class="space-y-4 py-4">
<div class="space-y-2">
<Label for="comentario_nota">Comentario:</Label>
<textarea
id="comentario_nota"
bind:value={currentNota.comentario}
class="w-full min-h-[150px] rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 resize-none"
placeholder="Ingrese el comentario de la nota"
></textarea>
</div>
</div>
<DialogFooter>
<Button variant="outline" onclick={() => (isNotaDialogOpen = false)}>Cancelar</Button>
<Button onclick={saveNota}>Aceptar</Button>
</DialogFooter>
</DialogContent>
</Dialog>