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
2025-11-02 14:20:30 -06:00
parent 19472b840c
commit 206e81ef05
28 changed files with 969 additions and 77 deletions
--- 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
@@ -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();
--- a/frontend/src/lib/components/dashboard/reference_data/code_pedimento_regimens/create-edit-dialog.svelte
+++ b/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>
--- 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
@@ -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} />
--- a/frontend/src/lib/components/dashboard/reference_data/code_pedimento_regimens/delete-dialog.svelte
+++ b/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>
--- a/frontend/src/lib/components/dashboard/reference_data/code_pedimento_regimens/details-dialog.svelte
+++ b/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>
--- a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
+++ b/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}
+/>
--- a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
+++ b/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}
+/>
--- a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
+++ b/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>
--- a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
+++ b/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}
+/>
--- a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
+++ b/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>
--- a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
+++ b/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>
--- a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
+++ b/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}
+/>
--- a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
+++ b/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}
+/>
--- a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-trigger.svelte
+++ b/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} />
--- a/frontend/src/lib/components/ui/alert-dialog/index.ts
+++ b/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,
+};
--- a/frontend/src/lib/components/ui/dialog/dialog-close.svelte
+++ b/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} />
--- a/frontend/src/lib/components/ui/dialog/dialog-content.svelte
+++ b/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>
--- a/frontend/src/lib/components/ui/dialog/dialog-description.svelte
+++ b/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}
+/>
--- a/frontend/src/lib/components/ui/dialog/dialog-footer.svelte
+++ b/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>
--- a/frontend/src/lib/components/ui/dialog/dialog-header.svelte
+++ b/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>
--- a/frontend/src/lib/components/ui/dialog/dialog-overlay.svelte
+++ b/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}
+/>
--- a/frontend/src/lib/components/ui/dialog/dialog-title.svelte
+++ b/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}
+/>
--- a/frontend/src/lib/components/ui/dialog/dialog-trigger.svelte
+++ b/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} />
--- a/frontend/src/lib/components/ui/dialog/index.ts
+++ b/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,
+};