refactor: update API endpoints and improve company ID handling in various components

frontend/src/lib/components/dashboard/reference_data/incoterms/data-table.svelte

@@ -1,123 +1,106 @@
 <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 { Button } from "$lib/components/ui/button";
+	import { goto } from "$app/navigation";
+	import { page } from "$app/stores";
 
 	type DataTableProps<TData, TValue> = {
 		columns: ColumnDef<TData, TValue>[];
 		data: TData[];
-		loading: boolean;
-		hasMore: boolean;
-		loadMore: () => void;
+		pageCount: number;
+		totalItems: number;
 	};
 
 	let {
 		data,
 		columns,
-		loading,
-		hasMore,
-		loadMore
+		pageCount,
+		totalItems
 	}: DataTableProps<TData, TValue> = $props();
 
 	const table = createSvelteTable({
-		get data() {
-			return data;
-		},
-		columns,
-		getCoreRowModel: getCoreRowModel()
+		get data() { return data; },
+		get columns() { return columns; },
+		getCoreRowModel: getCoreRowModel(),
+		manualPagination: true,
+		get pageCount() { return pageCount; },
 	});
 
-	let scrollContainer = $state<HTMLDivElement>();
-	let loadingTrigger = $state<HTMLDivElement>();
+	function handlePageChange(newPage: number) {
+		const url = new URL($page.url);
+		url.searchParams.set('page', newPage.toString());
+		goto(url, { keepFocus: true, noScroll: true });
+	}
 
-	// Intersection Observer para detectar cuando el usuario llega al final
-	onMount(() => {
-		const observer = new IntersectionObserver(
-			(entries) => {
-				const [entry] = entries;
-				if (entry.isIntersecting && hasMore && !loading) {
-					loadMore();
-				}
-			},
-			{
-				root: scrollContainer,
-				threshold: 0.1
-			}
-		);
-
-		if (loadingTrigger) {
-			observer.observe(loadingTrigger);
-		}
-
-		return () => {
-			observer.disconnect();
-		};
-	});
+	const currentPage = $derived(Number($page.url.searchParams.get('page') || 1));
 </script>
 
-<div class="w-full">
-	<div class="rounded-md border max-h-[600px] overflow-y-auto" bind:this={scrollContainer}>
-		<Table.Root>
-			<Table.Header class="bg-background">
-				{#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
-					<Table.Row>
-						{#each headerGroup.headers as header (header.id)}
-							<Table.Head>
-								{#if !header.isPlaceholder}
-									<FlexRender
-										content={header.column.columnDef.header}
-										context={header.getContext()}
-									/>
-								{/if}
-							</Table.Head>
-						{/each}
-					</Table.Row>
-				{/each}
-			</Table.Header>
-			<Table.Body>
-				{#each table.getRowModel().rows as row (row.id)}
-					<Table.Row data-state={row.getIsSelected() && "selected"}>
-						{#each row.getVisibleCells() as cell (cell.id)}
-							<Table.Cell>
+<div class="rounded-md border">
+	<Table.Root>
+		<Table.Header>
+			{#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
+				<Table.Row>
+					{#each headerGroup.headers as header (header.id)}
+						<Table.Head>
+							{#if !header.isPlaceholder}
 								<FlexRender
-									content={cell.column.columnDef.cell}
-									context={cell.getContext()}
+									content={header.column.columnDef.header}
+									context={header.getContext()}
 								/>
-							</Table.Cell>
-						{/each}
-					</Table.Row>
-				{:else}
-					<Table.Row>
-						<Table.Cell colspan={columns.length} class="h-24 text-center">
-							No hay resultados.
+							{/if}
+						</Table.Head>
+					{/each}
+				</Table.Row>
+			{/each}
+		</Table.Header>
+		<Table.Body>
+			{#each table.getRowModel().rows as row (row.id)}
+				<Table.Row data-state={row.getIsSelected() && "selected"}>
+					{#each row.getVisibleCells() as cell (cell.id)}
+						<Table.Cell>
+							<FlexRender
+								content={cell.column.columnDef.cell}
+								context={cell.getContext()}
+							/>
 						</Table.Cell>
-					</Table.Row>
-				{/each}
-				
-				<!-- Loading Trigger - Se activa cuando es visible -->
-				{#if hasMore}
-					<Table.Row>
-						<Table.Cell colspan={columns.length} class="h-20 text-center">
-							<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>
-								{:else}
-									<div class="text-muted-foreground text-sm">
-										Desplázate para cargar más
-									</div>
-								{/if}
-							</div>
-						</Table.Cell>
-					</Table.Row>
-				{/if}
-			</Table.Body>
-		</Table.Root>
+					{/each}
+				</Table.Row>
+			{:else}
+				<Table.Row>
+					<Table.Cell colspan={columns.length} class="h-24 text-center">
+						No hay resultados.
+					</Table.Cell>
+				</Table.Row>
+			{/each}
+		</Table.Body>
+	</Table.Root>
+</div>
+
+<div class="flex items-center justify-end space-x-2 py-4 px-2">
+	<div class="flex-1 text-sm text-muted-foreground">
+		Total: {totalItems} registros
+	</div>
+	<div class="space-x-2">
+		<Button
+			variant="outline"
+			size="sm"
+			onclick={() => handlePageChange(currentPage - 1)}
+			disabled={currentPage <= 1}
+		>
+			Anterior
+		</Button>
+		<Button
+			variant="outline"
+			size="sm"
+			onclick={() => handlePageChange(currentPage + 1)}
+			disabled={currentPage >= pageCount}
+		>
+			Siguiente
+		</Button>
 	</div>
 </div>