refactor: replace Dialog components with Sheet components and improve layout in various dialogs
This commit is contained in:
@@ -27,6 +27,8 @@
|
||||
});
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
console.log('Countries data received:', data);
|
||||
console.log('First country sample:', data[0]);
|
||||
if (Array.isArray(data)) {
|
||||
countries = data;
|
||||
} else if (data.items && Array.isArray(data.items)) {
|
||||
@@ -35,7 +37,8 @@
|
||||
console.error('Unexpected data format:', data);
|
||||
countries = [];
|
||||
}
|
||||
filteredCountries = countries;
|
||||
filteredCountries = countries;
|
||||
console.log('Total countries loaded:', countries.length);
|
||||
} else {
|
||||
error = `Error: ${response.status} - ${response.statusText}`;
|
||||
console.error('Error response:', await response.text());
|
||||
@@ -80,7 +83,7 @@
|
||||
</script>
|
||||
|
||||
<Dialog.Root bind:open>
|
||||
<Dialog.Content class="max-w-4xl w-full max-h-[85vh] p-0 flex flex-col">
|
||||
<Dialog.Content class="!max-w-[70vw] w-[70vw] max-h-[90vh] p-0 flex flex-col">
|
||||
<Dialog.Header class="px-6 py-4 border-b">
|
||||
<Dialog.Title class="text-lg font-semibold">CATALOGO DE PAISES</Dialog.Title>
|
||||
</Dialog.Header>
|
||||
@@ -88,7 +91,11 @@
|
||||
<div class="px-6 py-3 border-b bg-zinc-50 dark:bg-zinc-900">
|
||||
<div class="flex items-center gap-2">
|
||||
<Search class="w-4 h-4 text-zinc-400" />
|
||||
<Input bind:value={searchTerm} placeholder="Buscando..." class="flex-1 h-9" />
|
||||
<Input
|
||||
bind:value={searchTerm}
|
||||
placeholder="Buscando..."
|
||||
class="flex-1 h-9"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -106,7 +113,9 @@
|
||||
<table class="w-full text-sm">
|
||||
<thead class="bg-zinc-900 dark:bg-zinc-800 text-white">
|
||||
<tr>
|
||||
<th class="px-3 py-2 text-left font-semibold border-r border-zinc-700">Clave M3</th>
|
||||
<th class="px-3 py-2 text-left font-semibold border-r border-zinc-700"
|
||||
>Clave M3</th
|
||||
>
|
||||
<th class="px-3 py-2 text-left font-semibold border-r border-zinc-700"
|
||||
>Clave Mexicana</th
|
||||
>
|
||||
@@ -125,11 +134,11 @@
|
||||
class="border-b hover:bg-zinc-100 dark:hover:bg-zinc-800 cursor-pointer transition-colors"
|
||||
onclick={() => handleSelect(country)}
|
||||
>
|
||||
<td class="px-3 py-2 border-r">{country.m3_key || ''}</td>
|
||||
<td class="px-3 py-2 border-r">{country.mex_key || ''}</td>
|
||||
<td class="px-3 py-2 border-r">{country.description_es || ''}</td>
|
||||
<td class="px-3 py-2 border-r text-center">{country.ame_key || ''}</td>
|
||||
<td class="px-3 py-2">{country.description_en || ''}</td>
|
||||
<td class="px-3 py-2 border-r">{country.m3_key || ''}</td>
|
||||
<td class="px-3 py-2 border-r">{country.mex_key || ''}</td>
|
||||
<td class="px-3 py-2 border-r">{country.description_es || ''}</td>
|
||||
<td class="px-3 py-2 border-r text-center">{country.ame_key || ''}</td>
|
||||
<td class="px-3 py-2">{country.description_en || ''}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
{#if filteredCountries.length === 0}
|
||||
@@ -143,9 +152,7 @@
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="mt-4 flex items-center justify-between text-sm text-zinc-600 dark:text-zinc-400"
|
||||
>
|
||||
<div class="mt-4 flex items-center justify-between text-sm text-zinc-600 dark:text-zinc-400">
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="px-3 py-1 border rounded hover:bg-zinc-100 dark:hover:bg-zinc-800">
|
||||
<<
|
||||
|
||||
@@ -1,13 +1,11 @@
|
||||
<script lang="ts">
|
||||
import * as Dialog from '$lib/components/ui/dialog';
|
||||
import * as Sheet from '$lib/components/ui/sheet';
|
||||
import * as Tabs from '$lib/components/ui/tabs';
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import { Separator } from '$lib/components/ui/separator';
|
||||
import { Loader2, Package, Save, X, FileText } from 'lucide-svelte';
|
||||
import type { Invoice } from '$lib/api/dashboard/a76/invoices';
|
||||
import type { Item } from '$lib/api/dashboard/a76/items';
|
||||
import { useShortcuts } from '$lib/hooks/use-shortcuts';
|
||||
import { obtenerAtajosPestanasItemFa } from '$lib/config/shortcuts/dashboard/invoices/item/fixed_asset';
|
||||
|
||||
// Child components
|
||||
import MainData from './main-data.svelte';
|
||||
@@ -26,8 +24,6 @@
|
||||
invoice,
|
||||
onSave,
|
||||
onCancel,
|
||||
|
||||
isTargetingPreset = false,
|
||||
isSaving = false
|
||||
}: {
|
||||
open: boolean;
|
||||
@@ -36,87 +32,38 @@
|
||||
invoice: Invoice | null;
|
||||
onSave: () => void;
|
||||
onCancel?: () => void;
|
||||
|
||||
isTargetingPreset?: boolean;
|
||||
isSaving?: boolean;
|
||||
} = $props();
|
||||
|
||||
// Acceso directo a la primera línea para evitar repeticiones en el HTML
|
||||
let line = $derived(editingItem.lines?.[0]);
|
||||
|
||||
let activeTab = $state('generales');
|
||||
|
||||
const tabMapping: Record<string, string> = {
|
||||
'tab1': 'generales',
|
||||
'tab2': 'continuacion',
|
||||
'tab3': 'series',
|
||||
'tab4': 'etiquetado',
|
||||
'tab5': 'identificadores'
|
||||
};
|
||||
|
||||
useShortcuts(
|
||||
'Invoice Item Form (Fixed Asset)',
|
||||
obtenerAtajosPestanasItemFa({
|
||||
cambiarPestana: (target) => {
|
||||
const tab = tabMapping[target];
|
||||
if (tab) activeTab = tab;
|
||||
},
|
||||
manejarGuardar: onSave,
|
||||
manejarCancelar: () => onCancel?.()
|
||||
})
|
||||
);
|
||||
</script>
|
||||
|
||||
<Dialog.Root bind:open={open}>
|
||||
<Dialog.Content class="sm:max-w-6xl max-h-[90vh] p-0 overflow-hidden z-[100] [&>button]:hidden">
|
||||
<div class="bg-white dark:bg-zinc-950 border-b dark:border-zinc-800 px-4 py-3 shadow-sm flex items-start justify-between gap-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="bg-zinc-900 p-1 rounded">
|
||||
<Package class="w-3.5 h-3.5 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<Dialog.Title class="text-sm font-semibold text-zinc-900 dark:text-zinc-100 leading-tight flex items-center gap-2">
|
||||
{#if isTargetingPreset}
|
||||
{isEditMode ? 'Editar Item de Plantilla' : 'Nuevo Item para Plantilla'}
|
||||
{:else}
|
||||
<Sheet.Root bind:open={open}>
|
||||
<Sheet.Content side="right" class="w-full sm:max-w-[95vw] lg:max-w-[85vw] xl:max-w-[75vw] p-0 flex flex-col h-full bg-slate-50 dark:bg-black">
|
||||
|
||||
<header class="bg-white dark:bg-zinc-950 border-b dark:border-zinc-800 px-3 py-1.5 shadow-sm shrink-0">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="bg-zinc-900 p-1 rounded">
|
||||
<Package class="w-3.5 h-3.5 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<Sheet.Title class="text-sm font-semibold text-zinc-900 dark:text-zinc-100 leading-tight">
|
||||
{isEditMode ? 'Editar Partida' : 'Nueva Partida - Activo Fijo'}
|
||||
{/if}
|
||||
{#if editingItem.lines && editingItem.lines.length > 1}
|
||||
<span class="px-1.5 py-0.5 rounded-full bg-blue-100 dark:bg-blue-900/30 text-[10px] text-blue-700 dark:text-blue-300 font-bold border border-blue-200 dark:border-blue-800">
|
||||
{editingItem.lines.length} lines
|
||||
</span>
|
||||
{/if}
|
||||
</Dialog.Title>
|
||||
{#if !isTargetingPreset}
|
||||
</Sheet.Title>
|
||||
<p class="text-[10px] text-muted-foreground flex items-center gap-1.5">
|
||||
Factura: <span class="font-medium text-zinc-700 dark:text-zinc-300">{invoice?.invoice_number || 'N/A'}</span>
|
||||
</p>
|
||||
{:else}
|
||||
<p class="text-[10px] text-muted-foreground flex items-center gap-1.5">
|
||||
<span class="font-medium text-blue-600 dark:text-blue-400 uppercase tracking-wider">Modo Plantilla</span>
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
|
||||
<Button variant="outline" size="sm" onclick={() => onCancel?.()} disabled={isSaving} class="h-7 text-xs px-2">
|
||||
Cancelar
|
||||
<Button variant="ghost" size="icon" onclick={() => onCancel?.()} class="h-7 w-7 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-zinc-800">
|
||||
<X class="w-3.5 h-3.5" />
|
||||
</Button>
|
||||
<Button size="sm" onclick={onSave} disabled={isSaving} class="h-7 text-xs px-2 bg-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700 text-white">
|
||||
{#if isSaving}
|
||||
<Loader2 class="w-3 h-3 mr-1 animate-spin" />
|
||||
Guardando...
|
||||
{:else}
|
||||
<Save class="w-3 h-3 mr-1" />
|
||||
{isEditMode ? 'Actualizar' : 'Crear'}
|
||||
{/if}
|
||||
</Button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="p-3 overflow-y-auto max-h-[calc(90vh-88px)] bg-slate-50/70 dark:bg-black">
|
||||
<div class="flex-1 overflow-y-auto px-2 py-1.5">
|
||||
<div class="space-y-2">
|
||||
|
||||
{#if line}
|
||||
@@ -152,7 +99,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Tabs.Root bind:value={activeTab} class="w-full">
|
||||
<Tabs.Root value="generales" class="w-full">
|
||||
<Tabs.List class="grid w-full grid-cols-5 bg-zinc-100 dark:bg-zinc-800/50 rounded p-0.5 gap-0.5">
|
||||
<Tabs.Trigger value="generales" class="text-xs font-medium py-1.5 px-2 rounded transition-all data-[state=active]:bg-white dark:data-[state=active]:bg-zinc-700 data-[state=active]:shadow-sm data-[state=active]:text-black dark:data-[state=active]:text-white">
|
||||
General
|
||||
@@ -216,5 +163,23 @@
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</Dialog.Content>
|
||||
</Dialog.Root>
|
||||
|
||||
<footer class="bg-white dark:bg-zinc-950 border-t border-zinc-200 dark:border-zinc-800 px-3 py-1.5 shadow-sm shrink-0">
|
||||
<div class="flex items-center justify-end gap-1.5">
|
||||
<Button variant="outline" size="sm" onclick={() => onCancel?.()} disabled={isSaving} class="h-7 text-xs px-2">
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button size="sm" onclick={onSave} disabled={isSaving} class="h-7 text-xs px-2 bg-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700 text-white">
|
||||
{#if isSaving}
|
||||
<Loader2 class="w-3 h-3 mr-1 animate-spin" />
|
||||
Guardando...
|
||||
{:else}
|
||||
<Save class="w-3 h-3 mr-1" />
|
||||
{isEditMode ? 'Actualizar' : 'Crear'}
|
||||
{/if}
|
||||
</Button>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</Sheet.Content>
|
||||
</Sheet.Root>
|
||||
@@ -24,12 +24,11 @@
|
||||
|
||||
const filteredParts = $derived(
|
||||
searchQuery
|
||||
? parts.filter(
|
||||
(p) =>
|
||||
p.part_number?.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
p.description_spanish?.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
p.description_english?.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
)
|
||||
? parts.filter(p =>
|
||||
p.part_number?.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
p.description_spanish?.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
p.description_english?.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
)
|
||||
: parts
|
||||
);
|
||||
|
||||
@@ -53,12 +52,15 @@
|
||||
|
||||
isSearching = true;
|
||||
try {
|
||||
const response = await fetch(`/api-sveltekit/parts?company_id=${activeCompanyId}&limit=100`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
const response = await fetch(
|
||||
`/api-sveltekit/parts?company_id=${activeCompanyId}&limit=100`,
|
||||
{
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
}
|
||||
});
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Error al buscar números de parte');
|
||||
@@ -85,9 +87,8 @@
|
||||
function handleScroll(e: Event) {
|
||||
const target = e.target as HTMLDivElement;
|
||||
const threshold = 100;
|
||||
const scrolledToBottom =
|
||||
target.scrollHeight - target.scrollTop - target.clientHeight < threshold;
|
||||
|
||||
const scrolledToBottom = target.scrollHeight - target.scrollTop - target.clientHeight < threshold;
|
||||
|
||||
if (scrolledToBottom && displayedParts.length < filteredParts.length) {
|
||||
currentPage++;
|
||||
loadMoreParts();
|
||||
@@ -103,10 +104,12 @@
|
||||
</script>
|
||||
|
||||
<Dialog.Root bind:open>
|
||||
<Dialog.Content class="max-w-5xl w-full max-h-[90vh] p-0 flex flex-col">
|
||||
<Dialog.Content class="!max-w-[50vw] w-[50vw] max-h-[80vh] flex flex-col">
|
||||
<Dialog.Header>
|
||||
<Dialog.Title>Seleccionar Número de Parte</Dialog.Title>
|
||||
<Dialog.Description>Busca y selecciona un número de parte para la partida</Dialog.Description>
|
||||
<Dialog.Description>
|
||||
Busca y selecciona un número de parte para la partida
|
||||
</Dialog.Description>
|
||||
</Dialog.Header>
|
||||
|
||||
<div class="flex gap-2 mb-4">
|
||||
@@ -145,18 +148,15 @@
|
||||
</Table.Row>
|
||||
{:else}
|
||||
{#each displayedParts as part}
|
||||
<Table.Row
|
||||
class="cursor-pointer hover:bg-muted/50"
|
||||
onclick={() => handleSelect(part)}
|
||||
>
|
||||
<Table.Row class="cursor-pointer hover:bg-muted/50" onclick={() => handleSelect(part)}>
|
||||
<Table.Cell class="font-medium">{part.part_number}</Table.Cell>
|
||||
<Table.Cell>{part.description_spanish || '-'}</Table.Cell>
|
||||
<Table.Cell class="text-muted-foreground"
|
||||
>{part.description_english || '-'}</Table.Cell
|
||||
>
|
||||
<Table.Cell class="text-muted-foreground">{part.description_english || '-'}</Table.Cell>
|
||||
<Table.Cell class="text-muted-foreground">{part.part_class || '-'}</Table.Cell>
|
||||
<Table.Cell>
|
||||
<Button variant="ghost" size="sm" class="h-8">Seleccionar</Button>
|
||||
<Button variant="ghost" size="sm" class="h-8">
|
||||
Seleccionar
|
||||
</Button>
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
{/each}
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
let loadingMore = $state(false);
|
||||
let searchTerm = $state('');
|
||||
let error = $state('');
|
||||
|
||||
|
||||
// Pagination state
|
||||
let currentPage = $state(1);
|
||||
let totalPages = $state(1);
|
||||
@@ -34,7 +34,7 @@
|
||||
loadingMore = true;
|
||||
}
|
||||
error = '';
|
||||
|
||||
|
||||
try {
|
||||
const params = new URLSearchParams({
|
||||
page: page.toString(),
|
||||
@@ -45,10 +45,11 @@
|
||||
const response = await fetch(`/api-sveltekit/tariff-fractions?${params}`, {
|
||||
credentials: 'include'
|
||||
});
|
||||
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
|
||||
const data = await response.json();
|
||||
console.log('Tariff fractions data received:', data);
|
||||
|
||||
if (data.items && Array.isArray(data.items)) {
|
||||
if (append) {
|
||||
fractions = [...fractions, ...data.items];
|
||||
@@ -57,7 +58,8 @@
|
||||
}
|
||||
currentPage = data.page;
|
||||
totalPages = data.pages;
|
||||
hasMore = currentPage < totalPages;
|
||||
hasMore = currentPage < totalPages;
|
||||
console.log(`Loaded page ${currentPage}/${totalPages}, total items: ${fractions.length}`);
|
||||
} else {
|
||||
console.error('Unexpected data format:', data);
|
||||
if (!append) fractions = [];
|
||||
@@ -77,10 +79,10 @@
|
||||
|
||||
function handleScroll(e: Event) {
|
||||
if (!scrollContainer || loading || loadingMore || !hasMore) return;
|
||||
|
||||
|
||||
const target = e.target as HTMLDivElement;
|
||||
const scrollBottom = target.scrollHeight - target.scrollTop - target.clientHeight;
|
||||
|
||||
|
||||
// Load more when within 200px of bottom
|
||||
if (scrollBottom < 200) {
|
||||
loadFractions(currentPage + 1, true);
|
||||
@@ -118,7 +120,7 @@
|
||||
</script>
|
||||
|
||||
<Dialog.Root bind:open>
|
||||
<Dialog.Content class="max-w-4xl w-full max-h-[80vh] flex flex-col px-6">
|
||||
<Dialog.Content class="!max-w-[80vw] w-[80vw] max-h-[90vh] p-0 flex flex-col">
|
||||
<Dialog.Header class="px-6 py-4 border-b">
|
||||
<Dialog.Title class="text-lg font-semibold">FRACCIONES ARANCELARIAS</Dialog.Title>
|
||||
</Dialog.Header>
|
||||
@@ -137,7 +139,11 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div bind:this={scrollContainer} onscroll={handleScroll} class="flex-1 overflow-auto px-6 py-4">
|
||||
<div
|
||||
bind:this={scrollContainer}
|
||||
onscroll={handleScroll}
|
||||
class="flex-1 overflow-auto px-6 py-4"
|
||||
>
|
||||
{#if loading}
|
||||
<div class="flex items-center justify-center py-20">
|
||||
<Loader2 class="w-8 h-8 animate-spin text-zinc-900 dark:text-zinc-100" />
|
||||
@@ -151,12 +157,18 @@
|
||||
<table class="w-full text-sm">
|
||||
<thead class="bg-zinc-900 dark:bg-zinc-800 text-white sticky top-0">
|
||||
<tr>
|
||||
<th class="px-3 py-2 text-left font-semibold border-r border-zinc-700">Código</th>
|
||||
<th class="px-3 py-2 text-left font-semibold border-r border-zinc-700">Fracción</th>
|
||||
<th class="px-3 py-2 text-left font-semibold border-r border-zinc-700"
|
||||
>Código</th
|
||||
>
|
||||
<th class="px-3 py-2 text-left font-semibold border-r border-zinc-700"
|
||||
>Fracción</th
|
||||
>
|
||||
<th class="px-3 py-2 text-left font-semibold border-r border-zinc-700"
|
||||
>Descripción</th
|
||||
>
|
||||
<th class="px-3 py-2 text-left font-semibold border-r border-zinc-700">NICO</th>
|
||||
<th class="px-3 py-2 text-left font-semibold border-r border-zinc-700"
|
||||
>NICO</th
|
||||
>
|
||||
<th class="px-3 py-2 text-left font-semibold">UMT</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@@ -192,7 +204,9 @@
|
||||
{/if}
|
||||
|
||||
{#if !hasMore && fractions.length > 0}
|
||||
<div class="text-center py-4 text-sm text-zinc-500">Todos los resultados cargados</div>
|
||||
<div class="text-center py-4 text-sm text-zinc-500">
|
||||
Todos los resultados cargados
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -27,7 +27,8 @@
|
||||
credentials: 'include'
|
||||
});
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
const data = await response.json();
|
||||
console.log('Units data received:', data);
|
||||
// El backend puede devolver { items: [...] } o directamente un array
|
||||
if (Array.isArray(data)) {
|
||||
units = data;
|
||||
@@ -83,7 +84,7 @@
|
||||
</script>
|
||||
|
||||
<Dialog.Root bind:open>
|
||||
<Dialog.Content class="max-w-4xl w-full max-h-[90vh] p-0 flex flex-col">
|
||||
<Dialog.Content class="!max-w-[70vw] w-[70vw] max-h-[90vh] p-0 flex flex-col">
|
||||
<Dialog.Header class="px-6 py-4 border-b">
|
||||
<Dialog.Title class="text-lg font-semibold">CATALOGOS DE UNIDADES DE MEDIDA</Dialog.Title>
|
||||
</Dialog.Header>
|
||||
@@ -91,7 +92,11 @@
|
||||
<div class="px-6 py-3 border-b bg-zinc-50 dark:bg-zinc-900">
|
||||
<div class="flex items-center gap-2">
|
||||
<Search class="w-4 h-4 text-zinc-400" />
|
||||
<Input bind:value={searchTerm} placeholder="Buscando..." class="flex-1 h-9" />
|
||||
<Input
|
||||
bind:value={searchTerm}
|
||||
placeholder="Buscando..."
|
||||
class="flex-1 h-9"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -109,7 +114,9 @@
|
||||
<table class="w-full text-sm">
|
||||
<thead class="bg-zinc-900 dark:bg-zinc-800 text-white">
|
||||
<tr>
|
||||
<th class="px-3 py-2 text-left font-semibold border-r border-zinc-700">U.M.</th>
|
||||
<th class="px-3 py-2 text-left font-semibold border-r border-zinc-700"
|
||||
>U.M.</th
|
||||
>
|
||||
<th class="px-3 py-2 text-left font-semibold border-r border-zinc-700"
|
||||
>Descripción Español</th
|
||||
>
|
||||
@@ -150,9 +157,7 @@
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="mt-4 flex items-center justify-between text-sm text-zinc-600 dark:text-zinc-400"
|
||||
>
|
||||
<div class="mt-4 flex items-center justify-between text-sm text-zinc-600 dark:text-zinc-400">
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="px-3 py-1 border rounded hover:bg-zinc-100 dark:hover:bg-zinc-800">
|
||||
<<
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import * as Dialog from '$lib/components/ui/dialog';
|
||||
import * as Sheet from '$lib/components/ui/sheet';
|
||||
import * as Tabs from '$lib/components/ui/tabs';
|
||||
import { Input } from '$lib/components/ui/input';
|
||||
import { Label } from '$lib/components/ui/label';
|
||||
@@ -60,25 +60,29 @@
|
||||
// Initialize missing nested objects if they don't exist
|
||||
$effect(() => {
|
||||
if (open && editingItem) {
|
||||
if (!editingItem.lines) editingItem.lines = [{}];
|
||||
if (!editingItem.lines[0].quantity) editingItem.lines[0].quantity = {};
|
||||
if (!editingItem.lines[0].financial) editingItem.lines[0].financial = {};
|
||||
if (!editingItem.lines[0].customs) editingItem.lines[0].customs = {};
|
||||
if (!editingItem.lines[0].description) editingItem.lines[0].description = {};
|
||||
if (!editingItem.lines) editingItem.lines = [{ line_number: 1 } as any];
|
||||
if (editingItem.lines[0] && !editingItem.lines[0].quantity)
|
||||
editingItem.lines[0].quantity = {} as any;
|
||||
if (editingItem.lines[0] && !editingItem.lines[0].financial)
|
||||
editingItem.lines[0].financial = {} as any;
|
||||
if (editingItem.lines[0] && !editingItem.lines[0].customs)
|
||||
editingItem.lines[0].customs = {} as any;
|
||||
if (editingItem.lines[0] && !editingItem.lines[0].description)
|
||||
editingItem.lines[0].description = {} as any;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<Dialog.Root bind:open>
|
||||
<Dialog.Content class="sm:max-w-5xl max-h-[90vh] p-0 overflow-hidden z-[100] [&>button]:hidden">
|
||||
<Sheet.Root bind:open>
|
||||
<Sheet.Content side="right" class="w-[50vw] overflow-hidden p-0 sm:max-w-none">
|
||||
<div
|
||||
class="px-6 py-4 border-b bg-white dark:bg-zinc-950 flex items-start justify-between gap-3"
|
||||
class="flex items-start justify-between gap-3 border-b bg-white px-6 py-4 dark:bg-zinc-950"
|
||||
>
|
||||
<div class="space-y-1">
|
||||
<Dialog.Title class="text-lg font-semibold">
|
||||
<Sheet.Title class="text-lg font-semibold">
|
||||
{isEditMode ? 'Editar Item' : 'Agregar Nuevo Item'} - SCAII (Inventario)
|
||||
</Dialog.Title>
|
||||
<Dialog.Description class="text-sm text-muted-foreground">
|
||||
</Sheet.Title>
|
||||
<Sheet.Description class="text-sm text-muted-foreground">
|
||||
{isEditMode
|
||||
? 'Modifica los campos del inventario y guarda los cambios.'
|
||||
: 'Completa la información del nuevo item de inventario.'}
|
||||
@@ -87,13 +91,13 @@
|
||||
{editingItem.lines.length} items en esta partida
|
||||
</Badge>
|
||||
{/if}
|
||||
</Dialog.Description>
|
||||
</Sheet.Description>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<Button variant="outline" onclick={() => onCancel?.()} disabled={isSaving}>Cancelar</Button>
|
||||
<Button onclick={onSave} disabled={isSaving}>
|
||||
{#if isSaving}
|
||||
<Loader2 class="w-4 h-4 mr-2 animate-spin" />
|
||||
<Loader2 class="mr-2 h-4 w-4 animate-spin" />
|
||||
Guardando...
|
||||
{:else}
|
||||
{isEditMode ? 'Guardar Cambios' : 'Agregar Item'}
|
||||
@@ -102,7 +106,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 overflow-auto max-h-[calc(90vh-96px)] bg-slate-50/60 dark:bg-black">
|
||||
<div class="max-h-[calc(90vh-96px)] overflow-auto bg-slate-50/60 p-6 dark:bg-black">
|
||||
<Tabs.Root bind:value={activeTab} class="mt-0">
|
||||
<Tabs.List class="grid w-full grid-cols-4">
|
||||
<Tabs.Trigger value="general">General</Tabs.Trigger>
|
||||
@@ -112,13 +116,13 @@
|
||||
</Tabs.List>
|
||||
|
||||
<!-- Tab: General -->
|
||||
<Tabs.Content value="general" class="space-y-4 mt-4">
|
||||
<Tabs.Content value="general" class="mt-4 space-y-4">
|
||||
<!-- Información de la Factura (Solo lectura) -->
|
||||
{#if !isTargetingPreset}
|
||||
<div class="rounded-lg border bg-muted/50 p-4 space-y-3">
|
||||
<div class="space-y-3 rounded-lg border bg-muted/50 p-4">
|
||||
<h4 class="text-sm font-medium">Información de la Factura (SCAII - Inventario)</h4>
|
||||
{#if !invoice?.id}
|
||||
<div class="text-sm text-amber-600 bg-amber-50 dark:bg-amber-950/20 p-3 rounded">
|
||||
<div class="rounded bg-amber-50 p-3 text-sm text-amber-600 dark:bg-amber-950/20">
|
||||
⚠️ Esta factura aún no se ha guardado. Los items se asociarán cuando guardes la
|
||||
factura.
|
||||
</div>
|
||||
@@ -139,7 +143,7 @@
|
||||
</div>
|
||||
<div class="col-span-2">
|
||||
<span class="text-muted-foreground">Sistema:</span>
|
||||
<span class="ml-2 font-medium bg-blue-100 dark:bg-blue-900/30 px-2 py-1 rounded"
|
||||
<span class="ml-2 rounded bg-blue-100 px-2 py-1 font-medium dark:bg-blue-900/30"
|
||||
>SCAII (Inventory)</span
|
||||
>
|
||||
</div>
|
||||
@@ -207,7 +211,7 @@
|
||||
</Tabs.Content>
|
||||
|
||||
<!-- Tab: Clasificación -->
|
||||
<Tabs.Content value="clasificacion" class="space-y-4 mt-4">
|
||||
<Tabs.Content value="clasificacion" class="mt-4 space-y-4">
|
||||
<div class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="tariff_fraction">Fracción Arancelaria</Label>
|
||||
@@ -223,21 +227,21 @@
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="product_type">Tipo de Producto</Label>
|
||||
{#if line}
|
||||
{#if line?.description}
|
||||
<Input
|
||||
id="product_type"
|
||||
placeholder="Materia prima, producto terminado, etc."
|
||||
bind:value={line.description.extra_description_2}
|
||||
bind:value={(line.description as any).extra_description_2}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<Label for="material_type">Tipo de Material</Label>
|
||||
{#if line}
|
||||
{#if line?.description}
|
||||
<Input
|
||||
id="material_type"
|
||||
placeholder="Metal, plástico, etc."
|
||||
bind:value={line.description.extra_description_3}
|
||||
bind:value={(line.description as any).extra_description_3}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -262,7 +266,7 @@
|
||||
</Tabs.Content>
|
||||
|
||||
<!-- Tab: Cantidades -->
|
||||
<Tabs.Content value="cantidades" class="space-y-4 mt-4">
|
||||
<Tabs.Content value="cantidades" class="mt-4 space-y-4">
|
||||
<div class="space-y-4">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
@@ -350,7 +354,7 @@
|
||||
id="packages"
|
||||
type="number"
|
||||
placeholder="0"
|
||||
bind:value={line.quantity.packages}
|
||||
bind:value={(line.quantity as any).packages}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -360,7 +364,7 @@
|
||||
<Input
|
||||
id="package_type"
|
||||
placeholder="Caja, pallet, etc."
|
||||
bind:value={line.quantity.package_type}
|
||||
bind:value={(line.quantity as any).package_type}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -374,7 +378,7 @@
|
||||
id="imported_quantity"
|
||||
type="number"
|
||||
placeholder="0"
|
||||
bind:value={line.quantity.quantity_imported}
|
||||
bind:value={(line.quantity as any).quantity_imported}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -385,7 +389,8 @@
|
||||
id="remaining_quantity"
|
||||
type="number"
|
||||
placeholder="0"
|
||||
value={(line.quantity.quantity || 0) - (line.quantity.quantity_imported || 0)}
|
||||
value={(line.quantity.quantity || 0) -
|
||||
((line.quantity as any).quantity_imported || 0)}
|
||||
disabled
|
||||
/>
|
||||
{/if}
|
||||
@@ -395,7 +400,7 @@
|
||||
</Tabs.Content>
|
||||
|
||||
<!-- Tab: Otros -->
|
||||
<Tabs.Content value="otros" class="space-y-4 mt-4">
|
||||
<Tabs.Content value="otros" class="mt-4 space-y-4">
|
||||
<div class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="brand">Marca</Label>
|
||||
@@ -435,7 +440,7 @@
|
||||
{#if line?.description}
|
||||
<textarea
|
||||
id="observations"
|
||||
class="flex min-h-[80px] w-full 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"
|
||||
class="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
|
||||
placeholder="Notas adicionales sobre el inventario..."
|
||||
bind:value={line.description.extra_description}
|
||||
></textarea>
|
||||
@@ -445,5 +450,5 @@
|
||||
</Tabs.Content>
|
||||
</Tabs.Root>
|
||||
</div>
|
||||
</Dialog.Content>
|
||||
</Dialog.Root>
|
||||
</Sheet.Content>
|
||||
</Sheet.Root>
|
||||
|
||||
Reference in New Issue
Block a user