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

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>