feature/mejora-tabla-buscador

frontend/src/lib/components/dashboard/invoices/data-table.svelte

@@ -99,7 +99,7 @@
 </script>
 
 <div class="w-full">
-	<div class="max-h-[600px] overflow-y-auto rounded-md border" bind:this={scrollContainer}>
+	<div class="min-h-[400px] max-h-[calc(100vh-310px)] overflow-y-auto rounded-md border" bind:this={scrollContainer}>
 		<Table.Root>
 			<Table.Header class="bg-background">
 				{#each table.getHeaderGroups() as headerGroup (headerGroup.id)}

frontend/src/routes/dashboard/invoices/+page.svelte

@@ -64,8 +64,8 @@
 		operation_type: (data.filters?.operation_type || '') as '' | OperationType,
 		invoice_type: data.filters?.invoice_type || '',
 		invoice_number: data.filters?.invoice_number || '',
-		project_number: data.filters?.project_number || '',
-		year: data.filters?.year || ''
+		year_from: data.filters?.year_from || '',
+		year_to: data.filters?.year_to || ''
 	});
 	
 	let sorting = $state<import("@tanstack/table-core").SortingState>([]);
@@ -81,15 +81,15 @@
 			const urlOperationType = searchParams.get('operation_type');
 			const urlInvoiceType = searchParams.get('invoice_type');
 			const urlInvoiceNumber = searchParams.get('invoice_number');
-			const urlProjectNumber = searchParams.get('project_number');
-			const urlYear = searchParams.get('year');
+			const urlYearFrom = searchParams.get('year_from');
+			const urlYearTo = searchParams.get('year_to');
 
 			// Actualizar filtros si hay cambios en la URL
 			filters.operation_type = (urlOperationType || '') as '' | OperationType;
 			filters.invoice_type = urlInvoiceType || '';
 			filters.invoice_number = urlInvoiceNumber || '';
-			filters.project_number = urlProjectNumber || '';
-			filters.year = urlYear || '';
+			filters.year_from = urlYearFrom || '';
+			filters.year_to = urlYearTo || '';
 		}
 	});
 
@@ -118,8 +118,8 @@
 			if (filters.operation_type) params.set('operation_type', filters.operation_type);
 			if (filters.invoice_type) params.set('invoice_type', filters.invoice_type);
 			if (filters.invoice_number) params.set('invoice_number', filters.invoice_number);
-			if (filters.project_number) params.set('project_number', filters.project_number);
-			if (filters.year) params.set('year', filters.year);
+			if (filters.year_from) params.set('year_from', filters.year_from);
+			if (filters.year_to) params.set('year_to', filters.year_to);
 
 			const queryString = params.toString();
 			const newUrl = queryString ? `?${queryString}` : window.location.pathname;
@@ -140,8 +140,8 @@
 			operation_type: filters.operation_type,
 			invoice_type: filters.invoice_type,
 			invoice_number: filters.invoice_number,
-			project_number: filters.project_number,
-			year: filters.year
+			year_from: filters.year_from,
+			year_to: filters.year_to
 		};
 		const currentFiltersKey = JSON.stringify(currentFilters);
 
@@ -257,8 +257,8 @@
 				operation_type: filters.operation_type || undefined,
 				invoice_type: filters.invoice_type || undefined,
 				invoice_number: filters.invoice_number || undefined,
-				project_number: filters.project_number || undefined,
-				year: filters.year || undefined,
+				year_from: filters.year_from || undefined,
+				year_to: filters.year_to || undefined,
 				sort_by: sorting.length > 0 ? sorting[0].id : undefined,
 				sort_order: sorting.length > 0 ? (sorting[0].desc ? 'desc' : 'asc') : undefined
 			};
@@ -316,8 +316,8 @@
 				operation_type: filters.operation_type || undefined,
 				invoice_type: filters.invoice_type || undefined,
 				invoice_number: filters.invoice_number || undefined,
-				project_number: filters.project_number || undefined,
-				year: filters.year || undefined,
+				year_from: filters.year_from || undefined,
+				year_to: filters.year_to || undefined,
 				sort_by: sorting.length > 0 ? sorting[0].id : undefined,
 				sort_order: sorting.length > 0 ? (sorting[0].desc ? 'desc' : 'asc') : undefined
 			};
@@ -356,8 +356,8 @@
 			operation_type: '',
 			invoice_type: '',
 			invoice_number: '',
-			project_number: '',
-			year: ''
+			year_from: '',
+			year_to: ''
 		};
 		applyFilters();
 	}
@@ -376,8 +376,8 @@
 				operation_type: filters.operation_type || undefined,
 				invoice_type: filters.invoice_type || undefined,
 				invoice_number: filters.invoice_number || undefined,
-				project_number: filters.project_number || undefined,
-				year: filters.year || undefined,
+				year_from: filters.year_from || undefined,
+				year_to: filters.year_to || undefined,
 				sort_by: sorting.length > 0 ? sorting[0].id : undefined,
 				sort_order: sorting.length > 0 ? (sorting[0].desc ? 'desc' : 'asc') : undefined
 			};
@@ -889,7 +889,7 @@
 			>
 		</Card.Header>
 		<Card.Content>
-			<div class="grid grid-cols-1 gap-4 md:grid-cols-5">
+			<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
 				<div class="space-y-2">
 					<Label for="filter-operation-type">Tipo de Operación</Label>
 					<select
@@ -915,29 +915,6 @@
 						{/each}
 					</select>
 				</div>
-
-				<div class="space-y-2">
-					<Label for="filter-invoice-number">Número de Factura</Label>
-					<Input
-						id="filter-invoice-number"
-						bind:value={filters.invoice_number}
-						placeholder="Ej: INV-2024-001"
-					/>
-				</div>
-
-				<div class="space-y-2">
-					<Label for="filter-project-number">Número de Proyecto</Label>
-					<Input
-						id="filter-project-number"
-						bind:value={filters.project_number}
-						placeholder="Ej: PROJ-001"
-					/>
-				</div>
-
-				<div class="space-y-2">
-					<Label for="filter-year">Año</Label>
-					<Input id="filter-year" bind:value={filters.year} placeholder="Ej: 2024" maxlength={4} />
-				</div>
 			</div>
 		</Card.Content>
 	</Card.Root>
@@ -960,9 +937,27 @@
 						Mostrando {allItems.length} de {totalItems} registros
 					</Card.Description>
 				</div>
-				<div class="flex items-center gap-2">
-					<Button variant="outline" onclick={reloadData}>
-						<RefreshCw class="mr-2" size={16} />
+				<div class="flex flex-wrap items-center gap-2">
+					<Input
+						bind:value={filters.invoice_number}
+						placeholder="No. Factura"
+						class="w-32 lg:w-48 h-9"
+					/>
+					<Input
+						bind:value={filters.year_from}
+						placeholder="Año inicio"
+						class="w-24 h-9"
+						maxlength={4}
+					/>
+					<span class="text-sm text-muted-foreground">-</span>
+					<Input
+						bind:value={filters.year_to}
+						placeholder="Año fin"
+						class="w-24 h-9"
+						maxlength={4}
+					/>
+					<Button variant="outline" size="sm" class="h-9" onclick={reloadData}>
+						<RefreshCw class="mr-2 h-4 w-4" />
 						Actualizar
 					</Button>
 				</div>