feat: Implement Code Pedimento Regimens Data Table

- Added columns definition for Code Pedimento Regimens including ID, Pedimento Code, Regimen Code, Type, and Actions. - Created DataTableActions component for handling actions on each row. - Developed data-table component to manage pagination and rendering of the data table. - Introduced helper functions for rendering components and snippets in table cells. - Integrated API call in the server-side load function to fetch Code Pedimento Regimens data with pagination support. - Updated package.json to include lucide-svelte dependency for icons.
2025-11-02 13:15:05 -06:00
parent f29e219cf8
commit 2b735c27b8
30 changed files with 1390 additions and 69 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -22,6 +22,7 @@ wheels/
 *.egg-info/
 .installed.cfg
 *.egg
+.pnpm-store/

 # Environment
 .env
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -29,6 +29,7 @@
 		"@tailwindcss/forms": "^0.5.10",
 		"@tailwindcss/typography": "^0.5.19",
 		"@tailwindcss/vite": "^4.1.14",
+		"@tanstack/table-core": "^8.21.3",
 		"@types/node": "^20",
 		"@vitest/browser": "^3.2.4",
 		"bits-ui": "^2.14.2",
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -48,6 +48,9 @@ importers:
      '@tailwindcss/vite':
        specifier: ^4.1.14
        version: 4.1.14(vite@7.1.10(@types/node@20.19.22)(jiti@2.6.1)(lightningcss@1.30.1))
+      '@tanstack/table-core':
+        specifier: ^8.21.3
+        version: 8.21.3
      '@types/node':
        specifier: ^20
        version: 20.19.22
@@ -723,6 +726,10 @@ packages:
    peerDependencies:
      vite: ^5.2.0 || ^6 || ^7

+  '@tanstack/table-core@8.21.3':
+    resolution: {integrity: sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==}
+    engines: {node: '>=12'}
+
  '@testing-library/dom@10.4.1':
    resolution: {integrity: sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==}
    engines: {node: '>=18'}
@@ -2492,6 +2499,8 @@ snapshots:
      tailwindcss: 4.1.14
      vite: 7.1.10(@types/node@20.19.22)(jiti@2.6.1)(lightningcss@1.30.1)

+  '@tanstack/table-core@8.21.3': {}
+
  '@testing-library/dom@10.4.1':
    dependencies:
      '@babel/code-frame': 7.27.1
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -42,36 +42,36 @@

 .dark {
  --background: oklch(0.141 0.005 285.823);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.21 0.006 285.885);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.21 0.006 285.885);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.546 0.245 262.881);
-  --primary-foreground: oklch(0.379 0.146 265.522);
-  --secondary: oklch(0.274 0.006 286.033);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.274 0.006 286.033);
-  --muted-foreground: oklch(0.705 0.015 286.067);
-  --accent: oklch(0.274 0.006 286.033);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.488 0.243 264.376);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.21 0.006 285.885);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.546 0.245 262.881);
-  --sidebar-primary-foreground: oklch(0.379 0.146 265.522);
-  --sidebar-accent: oklch(0.274 0.006 286.033);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.488 0.243 264.376);
+	--foreground: oklch(0.985 0 0);
+	--card: oklch(0.21 0.006 285.885);
+	--card-foreground: oklch(0.985 0 0);
+	--popover: oklch(0.21 0.006 285.885);
+	--popover-foreground: oklch(0.985 0 0);
+	--primary: oklch(0.546 0.245 262.881);
+	--primary-foreground: oklch(0.98 0.01 262.881);
+	--secondary: oklch(0.274 0.006 286.033);
+	--secondary-foreground: oklch(0.985 0 0);
+	--muted: oklch(0.274 0.006 286.033);
+	--muted-foreground: oklch(0.705 0.015 286.067);
+	--accent: oklch(0.274 0.006 286.033);
+	--accent-foreground: oklch(0.985 0 0);
+	--destructive: oklch(0.704 0.191 22.216);
+	--border: oklch(1 0 0 / 10%);
+	--input: oklch(1 0 0 / 15%);
+	--ring: oklch(0.488 0.243 264.376);
+	--chart-1: oklch(0.488 0.243 264.376);
+	--chart-2: oklch(0.696 0.17 162.48);
+	--chart-3: oklch(0.769 0.188 70.08);
+	--chart-4: oklch(0.627 0.265 303.9);
+	--chart-5: oklch(0.645 0.246 16.439);
+	--sidebar: oklch(0.21 0.006 285.885);
+	--sidebar-foreground: oklch(0.985 0 0);
+	--sidebar-primary: oklch(0.546 0.245 262.881);
+	--sidebar-primary-foreground: oklch(0.379 0.146 265.522);
+	--sidebar-accent: oklch(0.274 0.006 286.033);
+	--sidebar-accent-foreground: oklch(0.985 0 0);
+	--sidebar-border: oklch(1 0 0 / 10%);
+	--sidebar-ring: oklch(0.488 0.243 264.376);
 }


--- a/frontend/src/app.html
+++ b/frontend/src/app.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="%paraglide.lang%">
+<html lang="%paraglide.lang%" class="dark">
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -32,7 +32,8 @@ async function fetchApi<T = any>(
 	try {
 		const response = await fetch(`${API_BASE_URL}${endpoint}`, {
 			...options,
-			headers
+			headers,
+			credentials: 'include' // Importante: envía cookies con cada request
 		});

 		const data = await response.json();
--- a/frontend/src/lib/api/dashboard/refrence_data/code_pedimento_regimens.ts
+++ b/frontend/src/lib/api/dashboard/refrence_data/code_pedimento_regimens.ts
@@ -0,0 +1,73 @@
+/**
+ * API Client para Code Pedimento Regimens
+ * Gestiona las operaciones CRUD para las relaciones entre códigos de pedimento y regímenes
+ */
+import { api } from '$lib/api';
+
+export interface CodePedimentoRegimen {
+	id: number;
+	pedimento_code: string;
+	regimen_code: string | null;
+	type_code: string | null;
+}
+
+export interface CodePedimentoRegimenListResponse {
+	items: CodePedimentoRegimen[];
+	total: number;
+	page: number;
+	page_size: number;
+}
+
+export interface CreateCodePedimentoRegimenData {
+	pedimento_code: string;
+	regimen_code?: string;
+	type_code?: string;
+}
+
+export interface UpdateCodePedimentoRegimenData {
+	pedimento_code?: string;
+	regimen_code?: string;
+	type_code?: string;
+}
+
+/**
+ * API para Code Pedimento Regimens
+ */
+export const codePedimentoRegimensApi = {
+	/**
+	 * Lista todos los code pedimento regimens con paginación
+	 * @param page - Número de página (por defecto 1)
+	 * @param pageSize - Tamaño de página (por defecto 50)
+	 */
+	list: (page = 1, pageSize = 50) =>
+		api.get<CodePedimentoRegimenListResponse>(
+			`/v1/code-pedimento-regimens?page=${page}&page_size=${pageSize}`
+		),
+
+	/**
+	 * Obtiene un code pedimento regimen por ID
+	 * @param id - ID del code pedimento regimen
+	 */
+	get: (id: number) => api.get<CodePedimentoRegimen>(`/v1/code-pedimento-regimens/${id}`),
+
+	/**
+	 * Crea un nuevo code pedimento regimen
+	 * @param data - Datos del code pedimento regimen a crear
+	 */
+	create: (data: CreateCodePedimentoRegimenData) =>
+		api.post<CodePedimentoRegimen>('/v1/code-pedimento-regimens', data),
+
+	/**
+	 * Actualiza un code pedimento regimen existente
+	 * @param id - ID del code pedimento regimen a actualizar
+	 * @param data - Datos a actualizar
+	 */
+	update: (id: number, data: UpdateCodePedimentoRegimenData) =>
+		api.put<CodePedimentoRegimen>(`/v1/code-pedimento-regimens/${id}`, data),
+
+	/**
+	 * Elimina un code pedimento regimen
+	 * @param id - ID del code pedimento regimen a eliminar
+	 */
+	delete: (id: number) => api.delete(`/v1/code-pedimento-regimens/${id}`)
+};
--- a/frontend/src/lib/components/dashboard/reference_data/code_pedimento_regimens/columns.ts
+++ b/frontend/src/lib/components/dashboard/reference_data/code_pedimento_regimens/columns.ts
@@ -0,0 +1,85 @@
+import type { ColumnDef } from "@tanstack/table-core";
+import { renderComponent, renderSnippet } from "$lib/components/ui/data-table/index.js";
+import { createRawSnippet } from "svelte";
+import DataTableActions from "./data-table-actions.svelte";
+
+export type CodePedimentoRegimen = {
+	id: number;
+	pedimento_code: string;
+	regimen_code: string | null;
+	type_code: string | null;
+};
+
+export const columns: ColumnDef<CodePedimentoRegimen>[] = [
+	{
+		accessorKey: "id",
+		header: "ID",
+		cell: ({ row }) => {
+			const idSnippet = createRawSnippet<[{ id: number }]>((getId) => {
+				const { id } = getId();
+				return {
+					render: () => `<div class="font-medium">${id}</div>`
+				};
+			});
+			return renderSnippet(idSnippet, { id: row.original.id });
+		}
+	},
+	{
+		accessorKey: "pedimento_code",
+		header: "Código Pedimento",
+		cell: ({ row }) => {
+			const codeSnippet = createRawSnippet<[{ code: string }]>((getCode) => {
+				const { code } = getCode();
+				return {
+					render: () =>
+						`<code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">${code}</code>`
+				};
+			});
+			return renderSnippet(codeSnippet, { code: row.original.pedimento_code });
+		}
+	},
+	{
+		accessorKey: "regimen_code",
+		header: "Código Régimen",
+		cell: ({ row }) => {
+			const regimenSnippet = createRawSnippet<[{ code: string | null }]>((getCode) => {
+				const { code } = getCode();
+				if (code) {
+					return {
+						render: () =>
+							`<code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">${code}</code>`
+					};
+				}
+				return {
+					render: () => `<span class="text-muted-foreground">N/A</span>`
+				};
+			});
+			return renderSnippet(regimenSnippet, { code: row.original.regimen_code });
+		}
+	},
+	{
+		accessorKey: "type_code",
+		header: "Tipo",
+		cell: ({ row }) => {
+			const typeSnippet = createRawSnippet<[{ type: string | null }]>((getType) => {
+				const { type } = getType();
+				if (type) {
+					return {
+						render: () =>
+							`<span class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2">${type}</span>`
+					};
+				}
+				return {
+					render: () => `<span class="text-muted-foreground">N/A</span>`
+				};
+			});
+			return renderSnippet(typeSnippet, { type: row.original.type_code });
+		}
+	},
+	{
+		id: "actions",
+		cell: ({ row }) => {
+			return renderComponent(DataTableActions, { item: row.original });
+		}
+	}
+];
--- a/frontend/src/lib/components/dashboard/reference_data/code_pedimento_regimens/data-table-actions.svelte
+++ b/frontend/src/lib/components/dashboard/reference_data/code_pedimento_regimens/data-table-actions.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import EllipsisIcon from "@lucide/svelte/icons/ellipsis";
+	import { Button } from "$lib/components/ui/button/index.js";
+	import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
+	import type { CodePedimentoRegimen } from "./columns.js";
+
+	let { item }: { item: CodePedimentoRegimen } = $props();
+</script>
+
+<DropdownMenu.Root>
+	<DropdownMenu.Trigger>
+		{#snippet child({ props })}
+			<Button {...props} variant="ghost" size="icon" class="relative size-8 p-0">
+				<span class="sr-only">Abrir menú</span>
+				<EllipsisIcon class="size-4" />
+			</Button>
+		{/snippet}
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content align="end">
+		<DropdownMenu.Group>
+			<DropdownMenu.Label>Acciones</DropdownMenu.Label>
+			<DropdownMenu.Item onclick={() => navigator.clipboard.writeText(item.id.toString())}>
+				Copiar ID
+			</DropdownMenu.Item>
+		</DropdownMenu.Group>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Item>Ver detalles</DropdownMenu.Item>
+		<DropdownMenu.Item>Editar</DropdownMenu.Item>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Item class="text-destructive">Eliminar</DropdownMenu.Item>
+	</DropdownMenu.Content>
+</DropdownMenu.Root>
--- a/frontend/src/lib/components/dashboard/reference_data/code_pedimento_regimens/data-table.svelte
+++ b/frontend/src/lib/components/dashboard/reference_data/code_pedimento_regimens/data-table.svelte
@@ -0,0 +1,139 @@
+<script lang="ts" generics="TData, TValue">
+	import {
+		type ColumnDef,
+		type PaginationState,
+		getCoreRowModel,
+		getPaginationRowModel
+	} 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/index.js";
+
+	type DataTableProps<TData, TValue> = {
+		columns: ColumnDef<TData, TValue>[];
+		data: TData[];
+		totalItems: number;
+		currentPage: number;
+		pageSize: number;
+		onPageChange: (page: number) => void;
+	};
+
+	let {
+		data,
+		columns,
+		totalItems,
+		currentPage,
+		pageSize,
+		onPageChange
+	}: DataTableProps<TData, TValue> = $props();
+
+	let pagination = $state<PaginationState>({
+		pageIndex: currentPage - 1,
+		pageSize: pageSize
+	});
+
+	const table = createSvelteTable({
+		get data() {
+			return data;
+		},
+		columns,
+		getCoreRowModel: getCoreRowModel(),
+		getPaginationRowModel: getPaginationRowModel(),
+		manualPagination: true,
+		pageCount: Math.ceil(totalItems / pageSize),
+		state: {
+			get pagination() {
+				return pagination;
+			}
+		}
+	});
+
+	$effect(() => {
+		pagination = {
+			pageIndex: currentPage - 1,
+			pageSize: pageSize
+		};
+	});
+
+	function handlePreviousPage() {
+		if (currentPage > 1) {
+			onPageChange(currentPage - 1);
+		}
+	}
+
+	function handleNextPage() {
+		const totalPages = Math.ceil(totalItems / pageSize);
+		if (currentPage < totalPages) {
+			onPageChange(currentPage + 1);
+		}
+	}
+</script>
+
+<div class="w-full">
+	<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={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>
+								<FlexRender
+									content={cell.column.columnDef.cell}
+									context={cell.getContext()}
+								/>
+							</Table.Cell>
+						{/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-between space-x-2 py-4">
+		<div class="text-muted-foreground text-sm">
+			Mostrando {data.length} de {totalItems} registro(s)
+		</div>
+		<div class="flex items-center space-x-2">
+			<div class="text-muted-foreground text-sm">
+				Página {currentPage} de {Math.ceil(totalItems / pageSize)}
+			</div>
+			<Button
+				variant="outline"
+				size="sm"
+				onclick={handlePreviousPage}
+				disabled={currentPage === 1}
+			>
+				Anterior
+			</Button>
+			<Button
+				variant="outline"
+				size="sm"
+				onclick={handleNextPage}
+				disabled={currentPage >= Math.ceil(totalItems / pageSize)}
+			>
+				Siguiente
+			</Button>
+		</div>
+	</div>
+</div>
--- a/frontend/src/lib/components/sidebar/modules.ts
+++ b/frontend/src/lib/components/sidebar/modules.ts
@@ -68,7 +68,7 @@ export const sidebarData: SidebarData = {
 			icon: SquareTerminalIcon,
 			items: [
 				{
-					title: "",
+					title: "Codigos de Pedimento y Régimen",
 					url: "/dashboard/reference_data/code_pedimento_regimens",
 				},
 				{
--- a/frontend/src/lib/components/ui/data-table/data-table.svelte.ts
+++ b/frontend/src/lib/components/ui/data-table/data-table.svelte.ts
@@ -0,0 +1,142 @@
+import {
+	type RowData,
+	type TableOptions,
+	type TableOptionsResolved,
+	type TableState,
+	createTable,
+} from "@tanstack/table-core";
+
+/**
+ * Creates a reactive TanStack table object for Svelte.
+ * @param options Table options to create the table with.
+ * @returns A reactive table object.
+ * @example
+ * ```svelte
+ * <script>
+ *   const table = createSvelteTable({ ... })
+ * </script>
+ *
+ * <table>
+ *   <thead>
+ *     {#each table.getHeaderGroups() as headerGroup}
+ *       <tr>
+ *         {#each headerGroup.headers as header}
+ *           <th colspan={header.colSpan}>
+ *         	   <FlexRender content={header.column.columnDef.header} context={header.getContext()} />
+ *         	 </th>
+ *         {/each}
+ *       </tr>
+ *     {/each}
+ *   </thead>
+ * 	 <!-- ... -->
+ * </table>
+ * ```
+ */
+export function createSvelteTable<TData extends RowData>(options: TableOptions<TData>) {
+	const resolvedOptions: TableOptionsResolved<TData> = mergeObjects(
+		{
+			state: {},
+			onStateChange() {},
+			renderFallbackValue: null,
+			mergeOptions: (
+				defaultOptions: TableOptions<TData>,
+				options: Partial<TableOptions<TData>>
+			) => {
+				return mergeObjects(defaultOptions, options);
+			},
+		},
+		options
+	);
+
+	const table = createTable(resolvedOptions);
+	let state = $state<Partial<TableState>>(table.initialState);
+
+	function updateOptions() {
+		table.setOptions((prev) => {
+			return mergeObjects(prev, options, {
+				state: mergeObjects(state, options.state || {}),
+
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any
+				onStateChange: (updater: any) => {
+					if (updater instanceof Function) state = updater(state);
+					else state = mergeObjects(state, updater);
+
+					options.onStateChange?.(updater);
+				},
+			});
+		});
+	}
+
+	updateOptions();
+
+	$effect.pre(() => {
+		updateOptions();
+	});
+
+	return table;
+}
+
+type MaybeThunk<T extends object> = T | (() => T | null | undefined);
+type Intersection<T extends readonly unknown[]> = (T extends [infer H, ...infer R]
+	? H & Intersection<R>
+	: unknown) & {};
+
+/**
+ * Lazily merges several objects (or thunks) while preserving
+ * getter semantics from every source.
+ *
+ * Proxy-based to avoid known WebKit recursion issue.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function mergeObjects<Sources extends readonly MaybeThunk<any>[]>(
+	...sources: Sources
+): Intersection<{ [K in keyof Sources]: Sources[K] }> {
+	const resolve = <T extends object>(src: MaybeThunk<T>): T | undefined =>
+		typeof src === "function" ? (src() ?? undefined) : src;
+
+	const findSourceWithKey = (key: PropertyKey) => {
+		for (let i = sources.length - 1; i >= 0; i--) {
+			const obj = resolve(sources[i]);
+			if (obj && key in obj) return obj;
+		}
+		return undefined;
+	};
+
+	return new Proxy(Object.create(null), {
+		get(_, key) {
+			const src = findSourceWithKey(key);
+
+			return src?.[key as never];
+		},
+
+		has(_, key) {
+			return !!findSourceWithKey(key);
+		},
+
+		ownKeys(): (string | symbol)[] {
+			// eslint-disable-next-line svelte/prefer-svelte-reactivity
+			const all = new Set<string | symbol>();
+			for (const s of sources) {
+				const obj = resolve(s);
+				if (obj) {
+					for (const k of Reflect.ownKeys(obj) as (string | symbol)[]) {
+						all.add(k);
+					}
+				}
+			}
+			return [...all];
+		},
+
+		getOwnPropertyDescriptor(_, key) {
+			const src = findSourceWithKey(key);
+			if (!src) return undefined;
+			return {
+				configurable: true,
+				enumerable: true,
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any
+				value: (src as any)[key],
+				writable: true,
+			};
+		},
+	}) as Intersection<{ [K in keyof Sources]: Sources[K] }>;
+}
--- a/frontend/src/lib/components/ui/data-table/flex-render.svelte
+++ b/frontend/src/lib/components/ui/data-table/flex-render.svelte
@@ -0,0 +1,40 @@
+<script
+	lang="ts"
+	generics="TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>"
+>
+	import type { CellContext, ColumnDefTemplate, HeaderContext } from "@tanstack/table-core";
+	import { RenderComponentConfig, RenderSnippetConfig } from "./render-helpers.js";
+	import type { Attachment } from "svelte/attachments";
+	type Props = {
+		/** The cell or header field of the current cell's column definition. */
+		content?: TContext extends HeaderContext<TData, TValue>
+			? ColumnDefTemplate<HeaderContext<TData, TValue>>
+			: TContext extends CellContext<TData, TValue>
+				? ColumnDefTemplate<CellContext<TData, TValue>>
+				: never;
+		/** The result of the `getContext()` function of the header or cell */
+		context: TContext;
+
+		/** Used to pass attachments that can't be gotten through context */
+		attach?: Attachment;
+	};
+
+	let { content, context, attach }: Props = $props();
+</script>
+
+{#if typeof content === "string"}
+	{content}
+{:else if content instanceof Function}
+	<!-- It's unlikely that a CellContext will be passed to a Header -->
+	<!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
+	{@const result = content(context as any)}
+	{#if result instanceof RenderComponentConfig}
+		{@const { component: Component, props } = result}
+		<Component {...props} {attach} />
+	{:else if result instanceof RenderSnippetConfig}
+		{@const { snippet, params } = result}
+		{@render snippet({ ...params, attach })}
+	{:else}
+		{result}
+	{/if}
+{/if}
--- a/frontend/src/lib/components/ui/data-table/index.ts
+++ b/frontend/src/lib/components/ui/data-table/index.ts
@@ -0,0 +1,3 @@
+export { default as FlexRender } from "./flex-render.svelte";
+export { renderComponent, renderSnippet } from "./render-helpers.js";
+export { createSvelteTable } from "./data-table.svelte.js";
--- a/frontend/src/lib/components/ui/data-table/render-helpers.ts
+++ b/frontend/src/lib/components/ui/data-table/render-helpers.ts
@@ -0,0 +1,111 @@
+import type { Component, ComponentProps, Snippet } from "svelte";
+
+/**
+ * A helper class to make it easy to identify Svelte components in
+ * `columnDef.cell` and `columnDef.header` properties.
+ *
+ * > NOTE: This class should only be used internally by the adapter. If you're
+ * reading this and you don't know what this is for, you probably don't need it.
+ *
+ * @example
+ * ```svelte
+ * {@const result = content(context as any)}
+ * {#if result instanceof RenderComponentConfig}
+ *   {@const { component: Component, props } = result}
+ *   <Component {...props} />
+ * {/if}
+ * ```
+ */
+export class RenderComponentConfig<TComponent extends Component> {
+	component: TComponent;
+	props: ComponentProps<TComponent> | Record<string, never>;
+	constructor(
+		component: TComponent,
+		props: ComponentProps<TComponent> | Record<string, never> = {}
+	) {
+		this.component = component;
+		this.props = props;
+	}
+}
+
+/**
+ * A helper class to make it easy to identify Svelte Snippets in `columnDef.cell` and `columnDef.header` properties.
+ *
+ * > NOTE: This class should only be used internally by the adapter. If you're
+ * reading this and you don't know what this is for, you probably don't need it.
+ *
+ * @example
+ * ```svelte
+ * {@const result = content(context as any)}
+ * {#if result instanceof RenderSnippetConfig}
+ *   {@const { snippet, params } = result}
+ *   {@render snippet(params)}
+ * {/if}
+ * ```
+ */
+export class RenderSnippetConfig<TProps> {
+	snippet: Snippet<[TProps]>;
+	params: TProps;
+	constructor(snippet: Snippet<[TProps]>, params: TProps) {
+		this.snippet = snippet;
+		this.params = params;
+	}
+}
+
+/**
+ * A helper function to help create cells from Svelte components through ColumnDef's `cell` and `header` properties.
+ *
+ * This is only to be used with Svelte Components - use `renderSnippet` for Svelte Snippets.
+ *
+ * @param component A Svelte component
+ * @param props The props to pass to `component`
+ * @returns A `RenderComponentConfig` object that helps svelte-table know how to render the header/cell component.
+ * @example
+ * ```ts
+ * // +page.svelte
+ * const defaultColumns = [
+ *   columnHelper.accessor('name', {
+ *     header: header => renderComponent(SortHeader, { label: 'Name', header }),
+ *   }),
+ *   columnHelper.accessor('state', {
+ *     header: header => renderComponent(SortHeader, { label: 'State', header }),
+ *   }),
+ * ]
+ * ```
+ * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
+ */
+export function renderComponent<
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	T extends Component<any>,
+	Props extends ComponentProps<T>,
+>(component: T, props: Props = {} as Props) {
+	return new RenderComponentConfig(component, props);
+}
+
+/**
+ * A helper function to help create cells from Svelte Snippets through ColumnDef's `cell` and `header` properties.
+ *
+ * The snippet must only take one parameter.
+ *
+ * This is only to be used with Snippets - use `renderComponent` for Svelte Components.
+ *
+ * @param snippet
+ * @param params
+ * @returns - A `RenderSnippetConfig` object that helps svelte-table know how to render the header/cell snippet.
+ * @example
+ * ```ts
+ * // +page.svelte
+ * const defaultColumns = [
+ *   columnHelper.accessor('name', {
+ *     cell: cell => renderSnippet(nameSnippet, { name: cell.row.name }),
+ *   }),
+ *   columnHelper.accessor('state', {
+ *     cell: cell => renderSnippet(stateSnippet, { state: cell.row.state }),
+ *   }),
+ * ]
+ * ```
+ * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
+ */
+export function renderSnippet<TProps>(snippet: Snippet<[TProps]>, params: TProps = {} as TProps) {
+	return new RenderSnippetConfig(snippet, params);
+}
--- a/frontend/src/lib/components/ui/table/index.ts
+++ b/frontend/src/lib/components/ui/table/index.ts
@@ -0,0 +1,28 @@
+import Root from "./table.svelte";
+import Body from "./table-body.svelte";
+import Caption from "./table-caption.svelte";
+import Cell from "./table-cell.svelte";
+import Footer from "./table-footer.svelte";
+import Head from "./table-head.svelte";
+import Header from "./table-header.svelte";
+import Row from "./table-row.svelte";
+
+export {
+	Root,
+	Body,
+	Caption,
+	Cell,
+	Footer,
+	Head,
+	Header,
+	Row,
+	//
+	Root as Table,
+	Body as TableBody,
+	Caption as TableCaption,
+	Cell as TableCell,
+	Footer as TableFooter,
+	Head as TableHead,
+	Header as TableHeader,
+	Row as TableRow,
+};
--- a/frontend/src/lib/components/ui/table/table-body.svelte
+++ b/frontend/src/lib/components/ui/table/table-body.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
+</script>
+
+<tbody
+	bind:this={ref}
+	data-slot="table-body"
+	class={cn("[&_tr:last-child]:border-0", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</tbody>
--- a/frontend/src/lib/components/ui/table/table-caption.svelte
+++ b/frontend/src/lib/components/ui/table/table-caption.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<caption
+	bind:this={ref}
+	data-slot="table-caption"
+	class={cn("text-muted-foreground mt-4 text-sm", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</caption>
--- a/frontend/src/lib/components/ui/table/table-cell.svelte
+++ b/frontend/src/lib/components/ui/table/table-cell.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLTdAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLTdAttributes> = $props();
+</script>
+
+<td
+	bind:this={ref}
+	data-slot="table-cell"
+	class={cn(
+		"whitespace-nowrap bg-clip-padding p-2 align-middle [&:has([role=checkbox])]:pr-0",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</td>
--- a/frontend/src/lib/components/ui/table/table-footer.svelte
+++ b/frontend/src/lib/components/ui/table/table-footer.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
+</script>
+
+<tfoot
+	bind:this={ref}
+	data-slot="table-footer"
+	class={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</tfoot>
--- a/frontend/src/lib/components/ui/table/table-head.svelte
+++ b/frontend/src/lib/components/ui/table/table-head.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLThAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLThAttributes> = $props();
+</script>
+
+<th
+	bind:this={ref}
+	data-slot="table-head"
+	class={cn(
+		"text-foreground h-10 whitespace-nowrap bg-clip-padding px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</th>
--- a/frontend/src/lib/components/ui/table/table-header.svelte
+++ b/frontend/src/lib/components/ui/table/table-header.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
+</script>
+
+<thead
+	bind:this={ref}
+	data-slot="table-header"
+	class={cn("[&_tr]:border-b", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</thead>
--- a/frontend/src/lib/components/ui/table/table-row.svelte
+++ b/frontend/src/lib/components/ui/table/table-row.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableRowElement>> = $props();
+</script>
+
+<tr
+	bind:this={ref}
+	data-slot="table-row"
+	class={cn(
+		"hover:[&,&>svelte-css-wrapper]:[&>th,td]:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</tr>
--- a/frontend/src/lib/components/ui/table/table.svelte
+++ b/frontend/src/lib/components/ui/table/table.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { HTMLTableAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLTableAttributes> = $props();
+</script>
+
+<div data-slot="table-container" class="relative w-full overflow-x-auto">
+	<table
+		bind:this={ref}
+		data-slot="table"
+		class={cn("w-full caption-bottom text-sm", className)}
+		{...restProps}
+	>
+		{@render children?.()}
+	</table>
+</div>
--- a/frontend/src/routes/dashboard/+layout.svelte
+++ b/frontend/src/routes/dashboard/+layout.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
 	import { setContext } from 'svelte';
 	import type { LayoutData } from './$types';
+	import AppSidebar from "$lib/components/sidebar/app-sidebar.svelte";
+	import * as Breadcrumb from "$lib/components/ui/breadcrumb/index.js";
+	import { Separator } from "$lib/components/ui/separator/index.js";
+	import * as Sidebar from "$lib/components/ui/sidebar/index.js";

 	let { data, children }: { data: LayoutData; children: any } = $props();

@@ -8,4 +12,31 @@
 	setContext('user', data.user);
 </script>

-{@render children()}
+<Sidebar.Provider>
+	<AppSidebar />
+	<Sidebar.Inset>
+		<header
+			class="group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear"
+		>
+			<div class="flex items-center gap-2 px-4">
+				<Sidebar.Trigger class="-ml-1" />
+				<Separator orientation="vertical" class="mr-2 data-[orientation=vertical]:h-4" />
+				<Breadcrumb.Root>
+					<Breadcrumb.List>
+						<Breadcrumb.Item class="hidden md:block">
+							<Breadcrumb.Link href="/dashboard">Dashboard</Breadcrumb.Link>
+						</Breadcrumb.Item>
+						<Breadcrumb.Separator class="hidden md:block" />
+						<Breadcrumb.Item>
+							<Breadcrumb.Page>Inicio</Breadcrumb.Page>
+						</Breadcrumb.Item>
+					</Breadcrumb.List>
+				</Breadcrumb.Root>
+			</div>
+		</header>
+		<div class="flex flex-1 flex-col gap-4 p-4 pt-0">
+			<!-- Contenido de cada página -->
+			{@render children()}
+		</div>
+	</Sidebar.Inset>
+</Sidebar.Provider>
--- a/frontend/src/routes/dashboard/+page.svelte
+++ b/frontend/src/routes/dashboard/+page.svelte
@@ -1,39 +1,129 @@
 <script lang="ts">
-	import AppSidebar from "$lib/components/sidebar/app-sidebar.svelte";
-	import * as Breadcrumb from "$lib/components/ui/breadcrumb/index.js";
-	import { Separator } from "$lib/components/ui/separator/index.js";
-	import * as Sidebar from "$lib/components/ui/sidebar/index.js";
+	import * as Card from "$lib/components/ui/card";
 </script>

-<Sidebar.Provider>
-	<AppSidebar />
-	<Sidebar.Inset>
-		<header
-			class="group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear"
-		>
-			<div class="flex items-center gap-2 px-4">
-				<Sidebar.Trigger class="-ml-1" />
-				<Separator orientation="vertical" class="mr-2 data-[orientation=vertical]:h-4" />
-				<Breadcrumb.Root>
-					<Breadcrumb.List>
-						<Breadcrumb.Item class="hidden md:block">
-							<Breadcrumb.Link href="##">Building Your Application</Breadcrumb.Link>
-						</Breadcrumb.Item>
-						<Breadcrumb.Separator class="hidden md:block" />
-						<Breadcrumb.Item>
-							<Breadcrumb.Page>Data Fetching</Breadcrumb.Page>
-						</Breadcrumb.Item>
-					</Breadcrumb.List>
-				</Breadcrumb.Root>
+<div class="space-y-6">
+	<!-- Welcome Section -->
+	<div class="flex flex-col gap-2">
+		<h1 class="text-3xl font-bold tracking-tight">Bienvenido al Dashboard</h1>
+		<p class="text-muted-foreground">
+			Sistema de gestión de comercio exterior conforme a Anexos 24, 31 y 22 del SAT
+		</p>
+	</div>
+
+	<!-- Stats Cards -->
+	<div class="grid gap-4 md:grid-cols-3">
+		<Card.Root>
+			<Card.Header>
+				<Card.Title class="text-sm font-medium">Total de Pedimentos</Card.Title>
+			</Card.Header>
+			<Card.Content>
+				<div class="text-2xl font-bold">0</div>
+				<p class="text-xs text-muted-foreground">Registros activos</p>
+			</Card.Content>
+		</Card.Root>
+
+		<Card.Root>
+			<Card.Header>
+				<Card.Title class="text-sm font-medium">Datos de Referencia</Card.Title>
+			</Card.Header>
+			<Card.Content>
+				<div class="text-2xl font-bold">12</div>
+				<p class="text-xs text-muted-foreground">Catálogos disponibles</p>
+			</Card.Content>
+		</Card.Root>
+
+		<Card.Root>
+			<Card.Header>
+				<Card.Title class="text-sm font-medium">Licencia Activa</Card.Title>
+			</Card.Header>
+			<Card.Content>
+				<div class="text-2xl font-bold">✓</div>
+				<p class="text-xs text-muted-foreground">Cuenta verificada</p>
+			</Card.Content>
+		</Card.Root>
+	</div>
+
+	<!-- Main Content Area -->
+	<Card.Root>
+		<Card.Header>
+			<Card.Title>Accesos Rápidos</Card.Title>
+			<Card.Description>Accede a las funciones más utilizadas del sistema</Card.Description>
+		</Card.Header>
+		<Card.Content>
+			<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+				<a
+					href="/dashboard/reference_data/code_pedimento_regimens"
+					class="flex flex-col items-center justify-center rounded-lg border p-6 hover:bg-accent transition-colors"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						width="24"
+						height="24"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						class="mb-2"
+					>
+						<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+						<polyline points="14 2 14 8 20 8" />
+						<line x1="16" x2="8" y1="13" y2="13" />
+						<line x1="16" x2="8" y1="17" y2="17" />
+						<polyline points="10 9 9 9 8 9" />
+					</svg>
+					<span class="font-medium">Código Pedimento - Regímenes</span>
+					<span class="text-xs text-muted-foreground">Gestionar relaciones</span>
+				</a>
+
+				<div
+					class="flex flex-col items-center justify-center rounded-lg border p-6 opacity-50 cursor-not-allowed"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						width="24"
+						height="24"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						class="mb-2"
+					>
+						<rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
+						<line x1="3" x2="21" y1="9" y2="9" />
+						<line x1="9" x2="9" y1="21" y2="9" />
+					</svg>
+					<span class="font-medium">Catálogo de Tipos</span>
+					<span class="text-xs text-muted-foreground">Próximamente</span>
+				</div>
+
+				<div
+					class="flex flex-col items-center justify-center rounded-lg border p-6 opacity-50 cursor-not-allowed"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						width="24"
+						height="24"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						class="mb-2"
+					>
+						<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
+						<polyline points="3.27 6.96 12 12.01 20.73 6.96" />
+						<line x1="12" x2="12" y1="22.08" y2="12" />
+					</svg>
+					<span class="font-medium">Reportes</span>
+					<span class="text-xs text-muted-foreground">Próximamente</span>
+				</div>
 			</div>
-		</header>
-		<div class="flex flex-1 flex-col gap-4 p-4 pt-0">
-			<div class="grid auto-rows-min gap-4 md:grid-cols-3">
-				<div class="bg-muted/50 aspect-video rounded-xl"></div>
-				<div class="bg-muted/50 aspect-video rounded-xl"></div>
-				<div class="bg-muted/50 aspect-video rounded-xl"></div>
-			</div>
-			<div class="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min"></div>
-		</div>
-	</Sidebar.Inset>
-</Sidebar.Provider>
+		</Card.Content>
+	</Card.Root>
+</div>
--- a/frontend/src/routes/dashboard/reference_data/code_pedimento_regimens/+page.server.ts
+++ b/frontend/src/routes/dashboard/reference_data/code_pedimento_regimens/+page.server.ts
@@ -0,0 +1,89 @@
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ cookies, fetch, url }) => {
+	const token = cookies.get('access_token');
+	
+	if (!token) {
+		return {
+			error: 'No authenticated',
+			items: [],
+			total: 0,
+			page: 1,
+			page_size: 50
+		};
+	}
+
+	try {
+		// Obtener parámetros de paginación de la URL
+		const page = parseInt(url.searchParams.get('page') || '1');
+		const pageSize = parseInt(url.searchParams.get('page_size') || '50');
+
+		// Configurar la URL de la API para SSR
+		let apiUrl = process.env.INTERNAL_API_URL;
+		if (!apiUrl) {
+			apiUrl = import.meta.env.VITE_API_URL;
+			// Reemplazar 'localhost' con 'backend' para llamadas desde el servidor (SSR)
+			apiUrl = apiUrl?.replace('localhost', 'backend').replace('127.0.0.1', 'backend');
+		}
+		
+		// Normalizar la URL
+		const baseUrl = apiUrl?.endsWith('/') ? apiUrl : `${apiUrl}/`;
+
+		console.log('📊 [Code Pedimento Regimens] Fetching data:', {
+			url: `${baseUrl}v1/code-pedimento-regimens`,
+			page,
+			pageSize
+		});
+
+		const response = await fetch(
+			`${baseUrl}v1/code-pedimento-regimens?page=${page}&page_size=${pageSize}`,
+			{
+				headers: {
+					'Authorization': `Bearer ${token}`,
+					'Content-Type': 'application/json'
+				}
+			}
+		);
+
+		if (!response.ok) {
+			const errorText = await response.text();
+			console.error('📊 [Code Pedimento Regimens] API Error:', {
+				status: response.status,
+				statusText: response.statusText,
+				error: errorText
+			});
+			
+			return {
+				error: `Error ${response.status}: ${response.statusText}`,
+				items: [],
+				total: 0,
+				page: page,
+				page_size: pageSize
+			};
+		}
+
+		const data = await response.json();
+		
+		console.log('📊 [Code Pedimento Regimens] Data loaded:', {
+			total: data.total,
+			itemsCount: data.items?.length
+		});
+
+		return {
+			items: data.items || [],
+			total: data.total || 0,
+			page: data.page || page,
+			page_size: data.page_size || pageSize,
+			error: null
+		};
+	} catch (error) {
+		console.error('📊 [Code Pedimento Regimens] Load error:', error);
+		return {
+			error: 'Error loading data',
+			items: [],
+			total: 0,
+			page: 1,
+			page_size: 50
+		};
+	}
+};
--- a/frontend/src/routes/dashboard/reference_data/code_pedimento_regimens/+page.svelte
+++ b/frontend/src/routes/dashboard/reference_data/code_pedimento_regimens/+page.svelte
@@ -0,0 +1,113 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import type { CodePedimentoRegimen } from '$lib/api/dashboard/refrence_data/code_pedimento_regimens';
+	import DataTable from '$lib/components/dashboard/reference_data/code_pedimento_regimens/data-table.svelte';
+	import { columns } from '$lib/components/dashboard/reference_data/code_pedimento_regimens/columns.js';
+	import * as Card from '$lib/components/ui/card';
+	import { Button } from '$lib/components/ui/button';
+	import type { PageData } from './$types';
+
+	// Los datos vienen del servidor a través del +page.server.ts
+	let { data }: { data: PageData } = $props();
+
+	// Desestructurar los datos
+	let items: CodePedimentoRegimen[] = $derived(data.items || []);
+	let totalItems = $derived(data.total || 0);
+	let currentPage = $derived(data.page || 1);
+	let pageSize = $derived(data.page_size || 50);
+	let error = $derived(data.error || null);
+
+	function handlePageChange(page: number) {
+		// Navegar a la misma página con los parámetros de paginación
+		const url = new URL(window.location.href);
+		url.searchParams.set('page', page.toString());
+		url.searchParams.set('page_size', pageSize.toString());
+		goto(url.toString());
+	}
+
+	function reloadData() {
+		// Forzar recarga de la página para obtener datos frescos
+		window.location.reload();
+	}
+</script>
+
+<div class="space-y-6">
+	<!-- Header -->
+	<div class="flex items-center justify-between">
+		<div>
+			<h1 class="text-3xl font-bold tracking-tight">Código Pedimento - Regímenes</h1>
+			<p class="text-muted-foreground">
+				Gestiona las relaciones entre códigos de pedimento y regímenes
+			</p>
+		</div>
+		<Button>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="16"
+				height="16"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				class="mr-2"
+			>
+				<path d="M5 12h14" />
+				<path d="M12 5v14" />
+			</svg>
+			Nuevo Registro
+		</Button>
+	</div>
+
+	<!-- Error Message -->
+	{#if error}
+		<Card.Root class="border-destructive">
+			<Card.Header>
+				<Card.Title class="text-destructive">Error</Card.Title>
+				<Card.Description>{error}</Card.Description>
+			</Card.Header>
+		</Card.Root>
+	{/if}
+
+	<!-- Data Table -->
+	<Card.Root>
+		<Card.Header>
+			<div class="flex items-center justify-between">
+				<div>
+					<Card.Title>Listado de Relaciones</Card.Title>
+					<Card.Description>Total de registros: {totalItems}</Card.Description>
+				</div>
+				<Button variant="outline" onclick={reloadData}>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						width="16"
+						height="16"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						class="mr-2"
+					>
+						<path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" />
+						<path d="M21 3v5h-5" />
+					</svg>
+					Actualizar
+				</Button>
+			</div>
+		</Card.Header>
+		<Card.Content>
+			<!-- TanStack DataTable -->
+			<DataTable
+				data={items}
+				{columns}
+				{totalItems}
+				{currentPage}
+				{pageSize}
+				onPageChange={handlePageChange}
+			/>
+		</Card.Content>
+	</Card.Root>
+</div>
--- a/package.json
+++ b/package.json
@@ -0,0 +1,5 @@
+{
+	"dependencies": {
+		"lucide-svelte": "^0.552.0"
+	}
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -0,0 +1,157 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    dependencies:
+      lucide-svelte:
+        specifier: ^0.552.0
+        version: 0.552.0(svelte@5.43.2)
+
+packages:
+
+  '@jridgewell/gen-mapping@0.3.13':
+    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
+
+  '@jridgewell/remapping@2.3.5':
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
+
+  '@jridgewell/resolve-uri@3.1.2':
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/sourcemap-codec@1.5.5':
+    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
+
+  '@sveltejs/acorn-typescript@1.0.6':
+    resolution: {integrity: sha512-4awhxtMh4cx9blePWl10HRHj8Iivtqj+2QdDCSMDzxG+XKa9+VCNupQuCuvzEhYPzZSrX+0gC+0lHA/0fFKKQQ==}
+    peerDependencies:
+      acorn: ^8.9.0
+
+  '@types/estree@1.0.8':
+    resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
+
+  acorn@8.15.0:
+    resolution: {integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
+  aria-query@5.3.2:
+    resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
+    engines: {node: '>= 0.4'}
+
+  axobject-query@4.1.0:
+    resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
+    engines: {node: '>= 0.4'}
+
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
+  esm-env@1.2.2:
+    resolution: {integrity: sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==}
+
+  esrap@2.1.2:
+    resolution: {integrity: sha512-DgvlIQeowRNyvLPWW4PT7Gu13WznY288Du086E751mwwbsgr29ytBiYeLzAGIo0qk3Ujob0SDk8TiSaM5WQzNg==}
+
+  is-reference@3.0.3:
+    resolution: {integrity: sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==}
+
+  locate-character@3.0.0:
+    resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==}
+
+  lucide-svelte@0.552.0:
+    resolution: {integrity: sha512-zynJ64KOsuQG3I4tSqfvvl7Kc9x4mWkppbxsuyrbegQwma9HFhBp4aE6HuQNF4c3pS0AHWHki5CAMs5m3QXA5w==}
+    peerDependencies:
+      svelte: ^3 || ^4 || ^5.0.0-next.42
+
+  magic-string@0.30.21:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
+
+  svelte@5.43.2:
+    resolution: {integrity: sha512-ro1umEzX8rT5JpCmlf0PPv7ncD8MdVob9e18bhwqTKNoLjS8kDvhVpaoYVPc+qMwDAOfcwJtyY7ZFSDbOaNPgA==}
+    engines: {node: '>=18'}
+
+  zimmerframe@1.1.4:
+    resolution: {integrity: sha512-B58NGBEoc8Y9MWWCQGl/gq9xBCe4IiKM0a2x7GZdQKOW5Exr8S1W24J6OgM1njK8xCRGvAJIL/MxXHf6SkmQKQ==}
+
+snapshots:
+
+  '@jridgewell/gen-mapping@0.3.13':
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/remapping@2.3.5':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/sourcemap-codec@1.5.5': {}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  '@sveltejs/acorn-typescript@1.0.6(acorn@8.15.0)':
+    dependencies:
+      acorn: 8.15.0
+
+  '@types/estree@1.0.8': {}
+
+  acorn@8.15.0: {}
+
+  aria-query@5.3.2: {}
+
+  axobject-query@4.1.0: {}
+
+  clsx@2.1.1: {}
+
+  esm-env@1.2.2: {}
+
+  esrap@2.1.2:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  is-reference@3.0.3:
+    dependencies:
+      '@types/estree': 1.0.8
+
+  locate-character@3.0.0: {}
+
+  lucide-svelte@0.552.0(svelte@5.43.2):
+    dependencies:
+      svelte: 5.43.2
+
+  magic-string@0.30.21:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  svelte@5.43.2:
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      '@jridgewell/sourcemap-codec': 1.5.5
+      '@sveltejs/acorn-typescript': 1.0.6(acorn@8.15.0)
+      '@types/estree': 1.0.8
+      acorn: 8.15.0
+      aria-query: 5.3.2
+      axobject-query: 4.1.0
+      clsx: 2.1.1
+      esm-env: 1.2.2
+      esrap: 2.1.2
+      is-reference: 3.0.3
+      locate-character: 3.0.0
+      magic-string: 0.30.21
+      zimmerframe: 1.1.4
+
+  zimmerframe@1.1.4: {}