Movidos botones de Actualizar Est y Desactualizar

frontend/src/lib/components/dashboard/invoices/columns.ts

@@ -1,7 +1,6 @@
 import type { ColumnDef } from "@tanstack/table-core";
-import { renderComponent, renderSnippet } from "$lib/components/ui/data-table/index.js";
+import { renderSnippet } from "$lib/components/ui/data-table/index.js";
 import { createRawSnippet } from "svelte";
-import DataTableActions from "./data-table-actions.svelte";
 import type { Invoice } from '$lib/api/dashboard/a76/invoices';
 import { getInvoiceTypeColor } from "$lib/utils";
 
@@ -18,29 +17,71 @@ export function createColumns(
 	onSuccess?: () => void
 ): ColumnDef<Invoice>[] {
 	return [
-		// 0. NUEVA COLUMNA: Checkbox visual (el estado real lo maneja la opacidad)
+		// Checkbox visual
 		{
 			id: "select",
 			header: ({ table }) => {
-				return renderSnippet(
-					createRawSnippet(() => ({
-						render: () => `<div class="w-4"></div>`
-					}))
-				);
+				const isAllSelected = table.getIsAllPageRowsSelected();
+				const isSomeSelected = table.getIsSomePageRowsSelected();
+
+				const selectAllSnippet = createRawSnippet<[
+					{ checked: boolean; indeterminate: boolean; onchange: (e: Event) => void }
+				]>((getProps) => {
+					const { checked, indeterminate, onchange } = getProps();
+					return {
+						render: () => `<div class="w-4">
+							<input 
+								type="checkbox" 
+								class="h-4 w-4 cursor-pointer" 
+								${checked ? 'checked' : ''} 
+								${indeterminate ? 'indeterminate="true"' : ''} 
+							/>
+						</div>`,
+						setup: (node) => {
+							const input = node.querySelector('input') as HTMLInputElement;
+							if (input) {
+								input.indeterminate = indeterminate;
+								input.addEventListener('change', onchange);
+							}
+						}
+					};
+				});
+
+				return renderSnippet(selectAllSnippet, {
+					checked: isAllSelected,
+					indeterminate: isSomeSelected && !isAllSelected,
+					onchange: (e: Event) => {
+						table.toggleAllPageRowsSelected(!!(e.target as HTMLInputElement).checked);
+					}
+				});
 			},
 			cell: ({ row }) => {
 				const isSelected = row.getIsSelected();
 
-				const checkboxSnippet = createRawSnippet<[{ selected: boolean }]>((getProps) => {
-					const { selected } = getProps();
+				const checkboxSnippet = createRawSnippet<[
+					{ selected: boolean; onchange: (e: Event) => void }
+				]>((getProps) => {
+					const { selected, onchange } = getProps();
 					return {
 						render: () => `<div class="flex items-center justify-center">
-							<input type="checkbox" class="h-4 w-4" ${selected ? 'checked' : ''} />
-						</div>`
+							<input type="checkbox" class="h-4 w-4 cursor-pointer" ${selected ? 'checked' : ''} />
+						</div>`,
+						setup: (node) => {
+							const input = node.querySelector('input') as HTMLInputElement;
+							if (input) {
+								input.addEventListener('change', onchange);
+							}
+						}
 					};
 				});
 
-				return renderSnippet(checkboxSnippet, { selected: isSelected });
+				return renderSnippet(checkboxSnippet, {
+					selected: isSelected,
+					onchange: (e: Event) => {
+						e.stopPropagation(); // Evitar que el clic en el checkbox dispare el rowClick
+						row.toggleSelected(!!(e.target as HTMLInputElement).checked);
+					}
+				});
 			},
 			enableSorting: false,
 			enableHiding: false,
@@ -298,16 +339,6 @@ export function createColumns(
 				return renderSnippet(relDocSnippet, { relDoc });
 			}
 		},
-		// 2. MODIFICAMOS AQUÍ: Pasamos onDownload al componente
-		{
-			id: "actions",
-			cell: ({ row }) => {
-				return renderComponent(DataTableActions, {
-					invoice: row.original,
-					onSuccess
-				});
-			}
-		}
 	];
 }
 

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

@@ -1,11 +1,8 @@
 <script lang="ts" generics="TData, TValue">
 	import { onMount } from 'svelte';
-	import {
-		type ColumnDef,
-		getCoreRowModel
-	} from "@tanstack/table-core";
-	import { createSvelteTable, FlexRender } from "$lib/components/ui/data-table/index.js";
-	import * as Table from "$lib/components/ui/table/index.js";
+	import { type ColumnDef, getCoreRowModel } from '@tanstack/table-core';
+	import { createSvelteTable, FlexRender } from '$lib/components/ui/data-table/index.js';
+	import * as Table from '$lib/components/ui/table/index.js';
 
 	type DataTableProps<TData, TValue> = {
 		columns: ColumnDef<TData, TValue>[];
@@ -14,7 +11,7 @@
 		hasMore: boolean;
 		loadMore: () => void;
 		// Props para selección
-		selectedId?: number | null;
+		selectedIds?: number[];
 		onRowClick?: (row: TData) => void;
 	};
 
@@ -24,7 +21,7 @@
 		loading,
 		hasMore,
 		loadMore,
-		selectedId = null,
+		selectedIds = [],
 		onRowClick
 	}: DataTableProps<TData, TValue> = $props();
 
@@ -37,12 +34,17 @@
 		getRowId: (row: any) => row.id?.toString(), // Usar ID para identificar filas
 		state: {
 			get rowSelection() {
-				// Mapear el ID seleccionado al formato que espera TanStack Table
-				return selectedId ? { [selectedId]: true } : {};
+				// Mapear los IDs seleccionados al formato que espera TanStack Table
+				const selection: Record<string, boolean> = {};
+				selectedIds.forEach((id) => {
+					selection[id.toString()] = true;
+				});
+				return selection;
 			}
 		},
 		enableRowSelection: true,
-		enableMultiRowSelection: false, // Solo permitir una selección a la vez
+		enableMultiRowSelection: true
+
 		// No necesitamos onRowSelectionChange porque controlamos el estado desde fuera
 	});
 
@@ -75,7 +77,7 @@
 </script>
 
 <div class="w-full">
-	<div class="rounded-md border max-h-[600px] overflow-y-auto" bind:this={scrollContainer}>
+	<div class="max-h-[600px] overflow-y-auto rounded-md border" bind:this={scrollContainer}>
 		<Table.Root>
 			<Table.Header class="bg-background">
 				{#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
@@ -95,17 +97,16 @@
 			</Table.Header>
 			<Table.Body>
 				{#each table.getRowModel().rows as row (row.id)}
-					<Table.Row 
-						data-state={row.getIsSelected() && "selected"}
-						class="cursor-pointer transition-colors {row.getIsSelected() ? 'bg-gray-300 dark:bg-gray-600' : 'hover:bg-gray-100 dark:hover:bg-gray-700'}"
+					<Table.Row
+						data-state={row.getIsSelected() && 'selected'}
+						class="cursor-pointer transition-colors {row.getIsSelected()
+							? 'bg-gray-300 dark:bg-gray-600'
+							: 'hover:bg-gray-100 dark:hover:bg-gray-700'}"
 						onclick={() => onRowClick && onRowClick(row.original)}
 					>
 						{#each row.getVisibleCells() as cell (cell.id)}
 							<Table.Cell>
-								<FlexRender
-									content={cell.column.columnDef.cell}
-									context={cell.getContext()}
-								/>
+								<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
 							</Table.Cell>
 						{/each}
 					</Table.Row>
@@ -116,7 +117,7 @@
 						</Table.Cell>
 					</Table.Row>
 				{/each}
-				
+
 				<!-- Loading Trigger - Se activa cuando es visible -->
 				{#if hasMore}
 					<Table.Row>
@@ -124,13 +125,13 @@
 							<div bind:this={loadingTrigger}>
 								{#if loading}
 									<div class="flex items-center justify-center gap-2">
-										<div class="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent"></div>
-										<span class="text-muted-foreground text-sm">Cargando más...</span>
+										<div
+											class="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent"
+										></div>
+										<span class="text-sm text-muted-foreground">Cargando más...</span>
 									</div>
 								{:else}
-									<div class="text-muted-foreground text-sm">
-										Desplázate para cargar más
-									</div>
+									<div class="text-sm text-muted-foreground">Desplázate para cargar más</div>
 								{/if}
 							</div>
 						</Table.Cell>

frontend/src/lib/components/dashboard/invoices/delete-dialog.svelte

@@ -1,44 +1,63 @@
 <script lang="ts">
-	import { Button } from "$lib/components/ui/button";
-	import * as AlertDialog from "$lib/components/ui/alert-dialog";
-	import { invoicesApi, type Invoice } from "$lib/api/dashboard/a76/invoices";
-	import { companyStore } from "$lib/stores/company.svelte";
+	import { Button } from '$lib/components/ui/button';
+	import * as AlertDialog from '$lib/components/ui/alert-dialog';
+	import { invoicesApi, type Invoice } from '$lib/api/dashboard/a76/invoices';
+	import { companyStore } from '$lib/stores/company.svelte';
 	import { LoaderCircle } from 'lucide-svelte';
 
 	interface Props {
-		invoice: Invoice;
+		invoice?: Invoice | null;
+		invoicesToDelete?: Invoice[];
 		onClose: () => void;
 		onSuccess?: () => void;
 	}
 
-	let { invoice, onClose, onSuccess }: Props = $props();
+	let { invoice = null, invoicesToDelete = [], onClose, onSuccess }: Props = $props();
 	let open = $state(true);
 
+	let isMultiDelete = $derived(invoicesToDelete.length > 1);
+	let isSingleDelete = $derived(invoicesToDelete.length <= 1 && invoice !== null);
+
 	let loading = $state(false);
 	let error = $state<string | null>(null);
 
 	async function handleDelete() {
-		if (!invoice || !companyStore.activeCompany) return;
+		const itemsToDelete = invoicesToDelete.length > 0 ? invoicesToDelete : invoice ? [invoice] : [];
+		if (itemsToDelete.length === 0 || !companyStore.activeCompany) return;
 
 		loading = true;
 		error = null;
 
-		try {
-			const response = await invoicesApi.delete(invoice.id, companyStore.activeCompany.id);
+		let successCount = 0;
+		let failCount = 0;
 
-			if (response.error) {
-				error = response.error;
-				return;
+		try {
+			for (const item of itemsToDelete) {
+				const response = await invoicesApi.delete(item.id, companyStore.activeCompany.id);
+
+				if (response.error) {
+					failCount++;
+					console.error(`Error deleting invoice ${item.id}:`, response.error);
+				} else {
+					successCount++;
+				}
 			}
 
-			// Éxito
-			onClose();
-			if (onSuccess) {
-				onSuccess();
+			if (failCount > 0) {
+				error = `Se eliminaron ${successCount} facturas, pero fallaron ${failCount}. Revisa la consola para más detalles.`;
+				if (successCount === 0) return; // Si todas fallaron, no cerramos
+			}
+
+			// Si al menos una tuvo éxito (o todas), refrescamos
+			if (successCount > 0) {
+				onClose();
+				if (onSuccess) {
+					onSuccess();
+				}
 			}
 		} catch (e) {
-			error = e instanceof Error ? e.message : "Error al eliminar";
-			console.error("Error deleting:", e);
+			error = e instanceof Error ? e.message : 'Error al eliminar';
+			console.error('Error deleting:', e);
 		} finally {
 			loading = false;
 		}
@@ -59,9 +78,17 @@
 		<AlertDialog.Header>
 			<AlertDialog.Title>¿Estás seguro?</AlertDialog.Title>
 			<AlertDialog.Description class="space-y-2">
-				<p>Esta acción no se puede deshacer. Se eliminará permanentemente esta factura:</p>
-				{#if invoice}
-					<div class="mt-2 rounded-lg bg-muted p-3 space-y-2">
+				{#if isMultiDelete}
+					<p>
+						Esta acción no se puede deshacer. Se eliminarán permanentemente <strong
+							>{invoicesToDelete.length}</strong
+						> facturas seleccionadas.
+					</p>
+				{:else}
+					<p>Esta acción no se puede deshacer. Se eliminará permanentemente esta factura:</p>
+				{/if}
+				{#if isSingleDelete && invoice}
+					<div class="mt-2 space-y-2 rounded-lg bg-muted p-3">
 						<div class="flex items-center justify-between text-sm">
 							<span class="font-medium">ID:</span>
 							<span class="font-semibold">{invoice.id}</span>
@@ -73,8 +100,11 @@
 						<div class="flex items-center justify-between text-sm">
 							<span class="font-medium">Tipo:</span>
 							<span class="text-xs">
-								{invoice.operation_type === 'imp' ? 'Importación' : 
-								 invoice.operation_type === 'exp' ? 'Exportación' : 'N/A'}
+								{invoice.operation_type === 'imp'
+									? 'Importación'
+									: invoice.operation_type === 'exp'
+										? 'Exportación'
+										: 'N/A'}
 							</span>
 						</div>
 						<div class="flex items-center justify-between text-sm">
@@ -88,7 +118,9 @@
 					</div>
 				{/if}
 				{#if error}
-					<div class="mt-2 rounded-lg border border-destructive bg-destructive/10 p-3 text-sm text-destructive">
+					<div
+						class="mt-2 rounded-lg border border-destructive bg-destructive/10 p-3 text-sm text-destructive"
+					>
 						{error}
 					</div>
 				{/if}
@@ -99,7 +131,7 @@
 			<AlertDialog.Action
 				onclick={handleDelete}
 				disabled={loading}
-				class="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+				class="text-destructive-foreground bg-destructive hover:bg-destructive/90"
 			>
 				{#if loading}
 					<LoaderCircle class="mr-2 h-4 w-4 animate-spin" />