feat(auth): synchronize access token from cookies to localStorage if not present

refactor(dashboard): create dynamic columns for CodePedimentoRegimen with onSuccess callback

feat(dashboard): implement create, edit, and delete dialogs for CodePedimentoRegimen

feat(dialogs): add reusable dialog components for confirmation and details display

style(alert-dialog): improve styling and structure for alert dialog components

style(dialog): enhance styling and structure for dialog components

backend/api/v1/modules/public/reference_data/code_pedimento_regimens/dto.py

@@ -3,7 +3,7 @@ from pydantic import ConfigDict
 from typing import Optional
 
 class CodePedimentoRegimenDTO(BaseModel):
-    id: int
+    id: Optional[int] = None
     pedimento_code: str = Field(..., min_length=1, max_length=3)
     regimen_code: Optional[str] = Field(None, min_length=1, max_length=3)
     type_code: Optional[str] = Field(None, min_length=1, max_length=1)

frontend/src/lib/api.ts

@@ -36,11 +36,31 @@ function onTokenRefreshed(token: string) {
 async function refreshToken(): Promise<string | null> {
 	if (!browser) return null;
 
-	const refreshTokenValue = localStorage.getItem('refresh_token');
+	let refreshTokenValue = localStorage.getItem('refresh_token');
+	
+	// Si no está en localStorage, intentar obtenerlo de las cookies
 	if (!refreshTokenValue) {
+		const getCookie = (name: string): string | null => {
+			const value = `; ${document.cookie}`;
+			const parts = value.split(`; ${name}=`);
+			if (parts.length === 2) return parts.pop()?.split(';').shift() || null;
+			return null;
+		};
+		
+		refreshTokenValue = getCookie('refresh_token');
+		if (refreshTokenValue) {
+			console.log('📝 [API] Refresh token encontrado en cookies, sincronizando a localStorage');
+			localStorage.setItem('refresh_token', refreshTokenValue);
+		}
+	}
+	
+	if (!refreshTokenValue) {
+		console.error('❌ [API] No hay refresh token disponible');
 		return null;
 	}
 
+	console.log('🔄 [API] Intentando refrescar token...');
+	
 	try {
 		const response = await fetch(`${API_BASE_URL}/v1/auth/refresh`, {
 			method: 'POST',
@@ -52,7 +72,7 @@ async function refreshToken(): Promise<string | null> {
 		});
 
 		if (!response.ok) {
-			console.error('❌ [API] Refresh token expirado o inválido');
+			console.error('❌ [API] Refresh token expirado o inválido, status:', response.status);
 			// Si el refresh token también está expirado, limpiar todo
 			localStorage.removeItem('access_token');
 			localStorage.removeItem('refresh_token');
@@ -69,6 +89,7 @@ async function refreshToken(): Promise<string | null> {
 		}
 
 		const data = await response.json();
+		console.log('✅ [API] Token refrescado correctamente');
 
 		// Guardar los nuevos tokens
 		if (data.access_token) {
@@ -116,6 +137,7 @@ async function fetchApi<T = any>(
 ): Promise<ApiResponse<T>> {
 	// Si ya estamos refrescando el token, esperar
 	if (isRefreshing && retryCount === 0) {
+		console.log('⏳ [API] Esperando refresh del token...');
 		return new Promise((resolve) => {
 			subscribeTokenRefresh((newToken) => {
 				resolve(fetchApi<T>(endpoint, options, 1));
@@ -124,6 +146,10 @@ async function fetchApi<T = any>(
 	}
 
 	const token = getToken();
+	
+	if (!token && !endpoint.includes('/auth/login')) {
+		console.warn('⚠️ [API] No hay token disponible para', endpoint);
+	}
 
 	const headers: Record<string, string> = {
 		'Content-Type': 'application/json',
@@ -143,6 +169,7 @@ async function fetchApi<T = any>(
 
 		// Si recibimos 401 o 403 y no es el endpoint de refresh, intentar refrescar el token
 		if ((response.status === 401 || response.status === 403) && !endpoint.includes('/auth/refresh') && retryCount === 0) {
+			console.log('🔄 [API] Recibido 401/403, intentando refrescar token...');
 			isRefreshing = true;
 
 			try {
@@ -150,11 +177,13 @@ async function fetchApi<T = any>(
 
 				if (newToken) {
 					// Token refrescado exitosamente
+					console.log('✅ [API] Token refrescado exitosamente');
 					onTokenRefreshed(newToken);
 					isRefreshing = false;
 					// Reintentar la petición original con el nuevo token
 					return await fetchApi<T>(endpoint, options, 1);
 				} else {
+					console.error('❌ [API] No se pudo refrescar el token');
 					isRefreshing = false;
 					// Retornar error 401 para que la capa superior lo maneje
 					return {
@@ -163,6 +192,7 @@ async function fetchApi<T = any>(
 					};
 				}
 			} catch (refreshError) {
+				console.error('❌ [API] Error al refrescar:', refreshError);
 				isRefreshing = false;
 				return {
 					error: 'Error al refrescar la sesión',

frontend/src/lib/auth.ts

@@ -410,7 +410,18 @@ export const getToken = (): string | null => {
 	
 	// Si no, intentar de localStorage
 	if (browser) {
-		return localStorage.getItem('access_token');
+		let token = localStorage.getItem('access_token');
+		
+		// Si no hay token en localStorage, intentar de las cookies
+		if (!token) {
+			token = getCookie('access_token');
+			// Si lo encontramos en cookies, sincronizarlo a localStorage
+			if (token) {
+				localStorage.setItem('access_token', token);
+			}
+		}
+		
+		return token;
 	}
 	
 	return null;

frontend/src/lib/components/dashboard/reference_data/code_pedimento_regimens/columns.ts

@@ -10,76 +10,81 @@ export type CodePedimentoRegimen = {
 	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) {
+export function createColumns(onSuccess?: () => void): ColumnDef<CodePedimentoRegimen>[] {
+	return [
+		{
+			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 {
-					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 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="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>`
+						render: () => `<span class="text-muted-foreground">N/A</span>`
 					};
-				}
-				return {
-					render: () => `<span class="text-muted-foreground">N/A</span>`
-				};
-			});
-			return renderSnippet(typeSnippet, { type: row.original.type_code });
+				});
+				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, onSuccess });
+			}
 		}
-	},
-	{
-		id: "actions",
-		cell: ({ row }) => {
-			return renderComponent(DataTableActions, { item: row.original });
-		}
-	}
-];
+	];
+}
+
+// Mantener compatibilidad hacia atrás
+export const columns = createColumns();

frontend/src/lib/components/dashboard/reference_data/code_pedimento_regimens/create-edit-dialog.svelte

@@ -0,0 +1,200 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button";
+	import * as Dialog from "$lib/components/ui/dialog";
+	import { Input } from "$lib/components/ui/input";
+	import { Label } from "$lib/components/ui/label";
+	import { codePedimentoRegimensApi, type CodePedimentoRegimen, type CreateCodePedimentoRegimenData, type UpdateCodePedimentoRegimenData } from "$lib/api/dashboard/refrence_data/code_pedimento_regimens";
+
+	let {
+		open = $bindable(false),
+		item = $bindable<CodePedimentoRegimen | null>(null),
+		onSuccess
+	}: {
+		open: boolean;
+		item?: CodePedimentoRegimen | null;
+		onSuccess?: () => void;
+	} = $props();
+
+	let formData = $state({
+		pedimento_code: "",
+		regimen_code: "",
+		type_code: ""
+	});
+
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+
+	// Actualizar formData cuando item cambia
+	$effect(() => {
+		if (item) {
+			formData = {
+				pedimento_code: item.pedimento_code,
+				regimen_code: item.regimen_code || "",
+				type_code: item.type_code || ""
+			};
+		} else {
+			formData = {
+				pedimento_code: "",
+				regimen_code: "",
+				type_code: ""
+			};
+		}
+	});
+
+	const isEditing = $derived(!!item);
+
+	async function handleSubmit(e: Event) {
+		e.preventDefault();
+		loading = true;
+		error = null;
+
+		try {
+			let response;
+			if (isEditing && item) {
+				const payload: UpdateCodePedimentoRegimenData = {
+					pedimento_code: formData.pedimento_code,
+					regimen_code: formData.regimen_code || undefined,
+					type_code: formData.type_code || undefined
+				};
+				response = await codePedimentoRegimensApi.update(item.id, payload);
+			} else {
+				const payload: CreateCodePedimentoRegimenData = {
+					pedimento_code: formData.pedimento_code,
+					regimen_code: formData.regimen_code || undefined,
+					type_code: formData.type_code || undefined
+				};
+				response = await codePedimentoRegimensApi.create(payload);
+			}
+
+			if (response.error) {
+				// Si es error de autenticación y ya se intentó refrescar, el API lo manejará
+				// pero mostramos un mensaje más claro
+				if (response.status === 401) {
+					error = 'Sesión expirada. Recargando página...';
+					setTimeout(() => {
+						window.location.reload();
+					}, 1500);
+				} else {
+					error = response.error;
+				}
+				return;
+			}
+
+			// Éxito
+			open = false;
+			if (onSuccess) {
+				onSuccess();
+			}
+		} catch (e) {
+			error = e instanceof Error ? e.message : "Error al guardar";
+			console.error("Error saving:", e);
+		} finally {
+			loading = false;
+		}
+	}
+
+	function handleOpenChange(newOpen: boolean) {
+		if (!newOpen) {
+			// Limpiar form al cerrar
+			formData = {
+				pedimento_code: "",
+				regimen_code: "",
+				type_code: ""
+			};
+			error = null;
+		}
+		open = newOpen;
+	}
+</script>
+
+<Dialog.Root bind:open onOpenChange={handleOpenChange}>
+	<Dialog.Content class="sm:max-w-[500px]">
+		<Dialog.Header>
+			<Dialog.Title>
+				{isEditing ? "Editar" : "Nuevo"} Código Pedimento - Régimen
+			</Dialog.Title>
+			<Dialog.Description>
+				{isEditing 
+					? "Modifica los datos de la relación código pedimento - régimen."
+					: "Completa los datos para crear una nueva relación."}
+			</Dialog.Description>
+		</Dialog.Header>
+
+		<form onsubmit={handleSubmit} class="space-y-4">
+			{#if error}
+				<div class="rounded-lg border border-destructive bg-destructive/10 p-3 text-sm text-destructive">
+					{error}
+				</div>
+			{/if}
+
+			<div class="space-y-2">
+				<Label for="pedimento_code">Código Pedimento *</Label>
+				<Input
+					id="pedimento_code"
+					bind:value={formData.pedimento_code}
+					placeholder="Ej: A1"
+					required
+					disabled={loading}
+				/>
+			</div>
+
+			<div class="space-y-2">
+				<Label for="regimen_code">Código Régimen</Label>
+				<Input
+					id="regimen_code"
+					bind:value={formData.regimen_code}
+					placeholder="Ej: IMD"
+					disabled={loading}
+				/>
+				<p class="text-xs text-muted-foreground">Opcional</p>
+			</div>
+
+			<div class="space-y-2">
+				<Label for="type_code">Tipo</Label>
+				<Input
+					id="type_code"
+					bind:value={formData.type_code}
+					placeholder="Ej: IMPORT"
+					disabled={loading}
+				/>
+				<p class="text-xs text-muted-foreground">Opcional</p>
+			</div>
+
+			<Dialog.Footer>
+				<Button
+					type="button"
+					variant="outline"
+					onclick={() => (open = false)}
+					disabled={loading}
+				>
+					Cancelar
+				</Button>
+				<Button type="submit" disabled={loading}>
+					{#if loading}
+						<svg
+							class="mr-2 h-4 w-4 animate-spin"
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+						>
+							<circle
+								class="opacity-25"
+								cx="12"
+								cy="12"
+								r="10"
+								stroke="currentColor"
+								stroke-width="4"
+							></circle>
+							<path
+								class="opacity-75"
+								fill="currentColor"
+								d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+							></path>
+						</svg>
+					{/if}
+					{isEditing ? "Guardar cambios" : "Crear"}
+				</Button>
+			</Dialog.Footer>
+		</form>
+	</Dialog.Content>
+</Dialog.Root>

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

@@ -3,8 +3,37 @@
 	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";
+	import CreateEditDialog from "./create-edit-dialog.svelte";
+	import DetailsDialog from "./details-dialog.svelte";
+	import DeleteDialog from "./delete-dialog.svelte";
 
-	let { item }: { item: CodePedimentoRegimen } = $props();
+	let { 
+		item,
+		onSuccess
+	}: { 
+		item: CodePedimentoRegimen;
+		onSuccess?: () => void;
+	} = $props();
+
+	let showDetailsDialog = $state(false);
+	let showEditDialog = $state(false);
+	let showDeleteDialog = $state(false);
+
+	function handleCopyId() {
+		navigator.clipboard.writeText(item.id.toString());
+	}
+
+	function handleViewDetails() {
+		showDetailsDialog = true;
+	}
+
+	function handleEdit() {
+		showEditDialog = true;
+	}
+
+	function handleDelete() {
+		showDeleteDialog = true;
+	}
 </script>
 
 <DropdownMenu.Root>
@@ -19,14 +48,19 @@
 	<DropdownMenu.Content align="end">
 		<DropdownMenu.Group>
 			<DropdownMenu.Label>Acciones</DropdownMenu.Label>
-			<DropdownMenu.Item onclick={() => navigator.clipboard.writeText(item.id.toString())}>
+			<DropdownMenu.Item onclick={handleCopyId}>
 				Copiar ID
 			</DropdownMenu.Item>
 		</DropdownMenu.Group>
 		<DropdownMenu.Separator />
-		<DropdownMenu.Item>Ver detalles</DropdownMenu.Item>
-		<DropdownMenu.Item>Editar</DropdownMenu.Item>
+		<DropdownMenu.Item onclick={handleViewDetails}>Ver detalles</DropdownMenu.Item>
+		<DropdownMenu.Item onclick={handleEdit}>Editar</DropdownMenu.Item>
 		<DropdownMenu.Separator />
-		<DropdownMenu.Item class="text-destructive">Eliminar</DropdownMenu.Item>
+		<DropdownMenu.Item class="text-destructive" onclick={handleDelete}>Eliminar</DropdownMenu.Item>
 	</DropdownMenu.Content>
 </DropdownMenu.Root>
+
+<!-- Dialogs -->
+<DetailsDialog bind:open={showDetailsDialog} {item} />
+<CreateEditDialog bind:open={showEditDialog} bind:item {onSuccess} />
+<DeleteDialog bind:open={showDeleteDialog} {item} {onSuccess} />

frontend/src/lib/components/dashboard/reference_data/code_pedimento_regimens/delete-dialog.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button";
+	import * as AlertDialog from "$lib/components/ui/alert-dialog";
+	import { codePedimentoRegimensApi, type CodePedimentoRegimen } from "$lib/api/dashboard/refrence_data/code_pedimento_regimens";
+
+	let {
+		open = $bindable(false),
+		item,
+		onSuccess
+	}: {
+		open: boolean;
+		item: CodePedimentoRegimen | null;
+		onSuccess?: () => void;
+	} = $props();
+
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+
+	async function handleDelete() {
+		if (!item) return;
+
+		loading = true;
+		error = null;
+
+		try {
+			const response = await codePedimentoRegimensApi.delete(item.id);
+
+			if (response.error) {
+				error = response.error;
+				return;
+			}
+
+			// Éxito
+			open = false;
+			if (onSuccess) {
+				onSuccess();
+			}
+		} catch (e) {
+			error = e instanceof Error ? e.message : "Error al eliminar";
+			console.error("Error deleting:", e);
+		} finally {
+			loading = false;
+		}
+	}
+
+	function handleOpenChange(newOpen: boolean) {
+		if (!newOpen) {
+			error = null;
+		}
+		open = newOpen;
+	}
+</script>
+
+<AlertDialog.Root bind:open onOpenChange={handleOpenChange}>
+	<AlertDialog.Content>
+		<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 este registro:</p>
+				{#if item}
+					<div class="mt-2 rounded-lg bg-muted p-3 space-y-1">
+						<div class="flex items-center justify-between text-sm">
+							<span class="font-medium">ID:</span>
+							<span class="font-mono">{item.id}</span>
+						</div>
+						<div class="flex items-center justify-between text-sm">
+							<span class="font-medium">Código Pedimento:</span>
+							<code class="font-mono">{item.pedimento_code}</code>
+						</div>
+						{#if item.regimen_code}
+							<div class="flex items-center justify-between text-sm">
+								<span class="font-medium">Código Régimen:</span>
+								<code class="font-mono">{item.regimen_code}</code>
+							</div>
+						{/if}
+					</div>
+				{/if}
+				{#if error}
+					<div class="mt-2 rounded-lg border border-destructive bg-destructive/10 p-3 text-sm text-destructive">
+						{error}
+					</div>
+				{/if}
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel disabled={loading}>Cancelar</AlertDialog.Cancel>
+			<AlertDialog.Action
+				onclick={handleDelete}
+				disabled={loading}
+				class="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+			>
+				{#if loading}
+					<svg
+						class="mr-2 h-4 w-4 animate-spin"
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+					>
+						<circle
+							class="opacity-25"
+							cx="12"
+							cy="12"
+							r="10"
+							stroke="currentColor"
+							stroke-width="4"
+						></circle>
+						<path
+							class="opacity-75"
+							fill="currentColor"
+							d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+						></path>
+					</svg>
+				{/if}
+				Eliminar
+			</AlertDialog.Action>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>

frontend/src/lib/components/dashboard/reference_data/code_pedimento_regimens/details-dialog.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button";
+	import * as Dialog from "$lib/components/ui/dialog";
+	import { Separator } from "$lib/components/ui/separator";
+	import type { CodePedimentoRegimen } from "$lib/api/dashboard/refrence_data/code_pedimento_regimens";
+
+	let {
+		open = $bindable(false),
+		item
+	}: {
+		open: boolean;
+		item: CodePedimentoRegimen | null;
+	} = $props();
+
+	function handleOpenChange(newOpen: boolean) {
+		open = newOpen;
+	}
+</script>
+
+<Dialog.Root bind:open onOpenChange={handleOpenChange}>
+	<Dialog.Content class="sm:max-w-[500px]">
+		<Dialog.Header>
+			<Dialog.Title>Detalles del Registro</Dialog.Title>
+			<Dialog.Description>
+				Información completa de la relación código pedimento - régimen
+			</Dialog.Description>
+		</Dialog.Header>
+
+		{#if item}
+			<div class="space-y-4 py-4">
+				<div class="space-y-2">
+					<div class="flex items-center justify-between">
+						<span class="text-sm font-medium text-muted-foreground">ID</span>
+						<span class="text-sm font-mono font-semibold">{item.id}</span>
+					</div>
+					<Separator />
+				</div>
+
+				<div class="space-y-2">
+					<div class="flex items-center justify-between">
+						<span class="text-sm font-medium text-muted-foreground">Código Pedimento</span>
+						<code class="relative rounded bg-muted px-2 py-1 font-mono text-sm">
+							{item.pedimento_code}
+						</code>
+					</div>
+					<Separator />
+				</div>
+
+				<div class="space-y-2">
+					<div class="flex items-center justify-between">
+						<span class="text-sm font-medium text-muted-foreground">Código Régimen</span>
+						{#if item.regimen_code}
+							<code class="relative rounded bg-muted px-2 py-1 font-mono text-sm">
+								{item.regimen_code}
+							</code>
+						{:else}
+							<span class="text-sm text-muted-foreground italic">No especificado</span>
+						{/if}
+					</div>
+					<Separator />
+				</div>
+
+				<div class="space-y-2">
+					<div class="flex items-center justify-between">
+						<span class="text-sm font-medium text-muted-foreground">Tipo</span>
+						{#if item.type_code}
+							<span class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold">
+								{item.type_code}
+							</span>
+						{:else}
+							<span class="text-sm text-muted-foreground italic">No especificado</span>
+						{/if}
+					</div>
+				</div>
+			</div>
+		{/if}
+
+		<Dialog.Footer>
+			<Button variant="outline" onclick={() => (open = false)}>
+				Cerrar
+			</Button>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>

frontend/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.ActionProps = $props();
+</script>
+
+<AlertDialogPrimitive.Action
+	bind:ref
+	data-slot="alert-dialog-action"
+	class={cn(buttonVariants(), className)}
+	{...restProps}
+/>

frontend/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.CancelProps = $props();
+</script>
+
+<AlertDialogPrimitive.Cancel
+	bind:ref
+	data-slot="alert-dialog-cancel"
+	class={cn(buttonVariants({ variant: "outline" }), className)}
+	{...restProps}
+/>

frontend/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import AlertDialogOverlay from "./alert-dialog-overlay.svelte";
+	import { cn, type WithoutChild, type WithoutChildrenOrChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		portalProps,
+		...restProps
+	}: WithoutChild<AlertDialogPrimitive.ContentProps> & {
+		portalProps?: WithoutChildrenOrChild<AlertDialogPrimitive.PortalProps>;
+	} = $props();
+</script>
+
+<AlertDialogPrimitive.Portal {...portalProps}>
+	<AlertDialogOverlay />
+	<AlertDialogPrimitive.Content
+		bind:ref
+		data-slot="alert-dialog-content"
+		class={cn(
+			"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed left-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+			className
+		)}
+		{...restProps}
+	/>
+</AlertDialogPrimitive.Portal>

frontend/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.DescriptionProps = $props();
+</script>
+
+<AlertDialogPrimitive.Description
+	bind:ref
+	data-slot="alert-dialog-description"
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+/>

frontend/src/lib/components/ui/alert-dialog/alert-dialog-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<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-dialog-footer"
+	class={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

frontend/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-dialog-header"
+	class={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

frontend/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.OverlayProps = $props();
+</script>
+
+<AlertDialogPrimitive.Overlay
+	bind:ref
+	data-slot="alert-dialog-overlay"
+	class={cn(
+		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+		className
+	)}
+	{...restProps}
+/>

frontend/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.TitleProps = $props();
+</script>
+
+<AlertDialogPrimitive.Title
+	bind:ref
+	data-slot="alert-dialog-title"
+	class={cn("text-lg font-semibold", className)}
+	{...restProps}
+/>

frontend/src/lib/components/ui/alert-dialog/alert-dialog-trigger.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: AlertDialogPrimitive.TriggerProps = $props();
+</script>
+
+<AlertDialogPrimitive.Trigger bind:ref data-slot="alert-dialog-trigger" {...restProps} />

frontend/src/lib/components/ui/alert-dialog/index.ts

@@ -0,0 +1,39 @@
+import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+import Trigger from "./alert-dialog-trigger.svelte";
+import Title from "./alert-dialog-title.svelte";
+import Action from "./alert-dialog-action.svelte";
+import Cancel from "./alert-dialog-cancel.svelte";
+import Footer from "./alert-dialog-footer.svelte";
+import Header from "./alert-dialog-header.svelte";
+import Overlay from "./alert-dialog-overlay.svelte";
+import Content from "./alert-dialog-content.svelte";
+import Description from "./alert-dialog-description.svelte";
+
+const Root = AlertDialogPrimitive.Root;
+const Portal = AlertDialogPrimitive.Portal;
+
+export {
+	Root,
+	Title,
+	Action,
+	Cancel,
+	Portal,
+	Footer,
+	Header,
+	Trigger,
+	Overlay,
+	Content,
+	Description,
+	//
+	Root as AlertDialog,
+	Title as AlertDialogTitle,
+	Action as AlertDialogAction,
+	Cancel as AlertDialogCancel,
+	Portal as AlertDialogPortal,
+	Footer as AlertDialogFooter,
+	Header as AlertDialogHeader,
+	Trigger as AlertDialogTrigger,
+	Overlay as AlertDialogOverlay,
+	Content as AlertDialogContent,
+	Description as AlertDialogDescription,
+};

frontend/src/lib/components/ui/dialog/dialog-close.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: DialogPrimitive.CloseProps = $props();
+</script>
+
+<DialogPrimitive.Close bind:ref data-slot="dialog-close" {...restProps} />

frontend/src/lib/components/ui/dialog/dialog-content.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import XIcon from "@lucide/svelte/icons/x";
+	import type { Snippet } from "svelte";
+	import * as Dialog from "./index.js";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		portalProps,
+		children,
+		showCloseButton = true,
+		...restProps
+	}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
+		portalProps?: DialogPrimitive.PortalProps;
+		children: Snippet;
+		showCloseButton?: boolean;
+	} = $props();
+</script>
+
+<Dialog.Portal {...portalProps}>
+	<Dialog.Overlay />
+	<DialogPrimitive.Content
+		bind:ref
+		data-slot="dialog-content"
+		class={cn(
+			"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed left-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		{#if showCloseButton}
+			<DialogPrimitive.Close
+				class="ring-offset-background focus:ring-ring rounded-xs focus:outline-hidden absolute end-4 top-4 opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
+			>
+				<XIcon />
+				<span class="sr-only">Close</span>
+			</DialogPrimitive.Close>
+		{/if}
+	</DialogPrimitive.Content>
+</Dialog.Portal>

frontend/src/lib/components/ui/dialog/dialog-description.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.DescriptionProps = $props();
+</script>
+
+<DialogPrimitive.Description
+	bind:ref
+	data-slot="dialog-description"
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+/>

frontend/src/lib/components/ui/dialog/dialog-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<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="dialog-footer"
+	class={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

frontend/src/lib/components/ui/dialog/dialog-header.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="dialog-header"
+	class={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

frontend/src/lib/components/ui/dialog/dialog-overlay.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.OverlayProps = $props();
+</script>
+
+<DialogPrimitive.Overlay
+	bind:ref
+	data-slot="dialog-overlay"
+	class={cn(
+		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+		className
+	)}
+	{...restProps}
+/>

frontend/src/lib/components/ui/dialog/dialog-title.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.TitleProps = $props();
+</script>
+
+<DialogPrimitive.Title
+	bind:ref
+	data-slot="dialog-title"
+	class={cn("text-lg font-semibold leading-none", className)}
+	{...restProps}
+/>

frontend/src/lib/components/ui/dialog/dialog-trigger.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: DialogPrimitive.TriggerProps = $props();
+</script>
+
+<DialogPrimitive.Trigger bind:ref data-slot="dialog-trigger" {...restProps} />

frontend/src/lib/components/ui/dialog/index.ts

@@ -0,0 +1,37 @@
+import { Dialog as DialogPrimitive } from "bits-ui";
+
+import Title from "./dialog-title.svelte";
+import Footer from "./dialog-footer.svelte";
+import Header from "./dialog-header.svelte";
+import Overlay from "./dialog-overlay.svelte";
+import Content from "./dialog-content.svelte";
+import Description from "./dialog-description.svelte";
+import Trigger from "./dialog-trigger.svelte";
+import Close from "./dialog-close.svelte";
+
+const Root = DialogPrimitive.Root;
+const Portal = DialogPrimitive.Portal;
+
+export {
+	Root,
+	Title,
+	Portal,
+	Footer,
+	Header,
+	Trigger,
+	Overlay,
+	Content,
+	Description,
+	Close,
+	//
+	Root as Dialog,
+	Title as DialogTitle,
+	Portal as DialogPortal,
+	Footer as DialogFooter,
+	Header as DialogHeader,
+	Trigger as DialogTrigger,
+	Overlay as DialogOverlay,
+	Content as DialogContent,
+	Description as DialogDescription,
+	Close as DialogClose,
+};

frontend/src/routes/dashboard/reference_data/code_pedimento_regimens/+page.svelte

@@ -2,7 +2,8 @@
 	import { onMount } from 'svelte';
 	import { codePedimentoRegimensApi, 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 { createColumns } from '$lib/components/dashboard/reference_data/code_pedimento_regimens/columns.js';
+	import CreateEditDialog from '$lib/components/dashboard/reference_data/code_pedimento_regimens/create-edit-dialog.svelte';
 	import * as Card from '$lib/components/ui/card';
 	import { Button } from '$lib/components/ui/button';
 	import type { PageData } from './$types';
@@ -10,6 +11,9 @@
 
 	// Los datos iniciales vienen del servidor
 	let { data }: { data: PageData } = $props();
+	
+	// Estado para el diálogo de crear
+	let showCreateDialog = $state(false);
 
 	// Sincronizar token de cookies a localStorage al montar el componente
 	onMount(() => {
@@ -92,6 +96,18 @@
 		// Reset y recargar desde el principio
 		window.location.reload();
 	}
+
+	function handleCreateClick() {
+		showCreateDialog = true;
+	}
+
+	function handleSuccess() {
+		// Recargar datos después de crear/editar/eliminar
+		reloadData();
+	}
+
+	// Crear columnas con el callback onSuccess
+	const columns = createColumns(handleSuccess);
 </script>
 
 <div class="space-y-6">
@@ -103,7 +119,7 @@
 				Gestiona las relaciones entre códigos de pedimento y regímenes
 			</p>
 		</div>
-		<Button>
+		<Button onclick={handleCreateClick}>
 			<svg
 				xmlns="http://www.w3.org/2000/svg"
 				width="16"
@@ -175,3 +191,6 @@
 		</Card.Content>
 	</Card.Root>
 </div>
+
+<!-- Diálogo de crear/editar -->
+<CreateEditDialog bind:open={showCreateDialog} onSuccess={handleSuccess} />