Feature/Integracion de navegacion free mouse a pedimentos

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

@@ -1,6 +1,9 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { paymentMethodsApi, type PaymentMethod } from '$lib/api/dashboard/refrence_data/payment_methods';
+	import {
+		paymentMethodsApi,
+		type PaymentMethod
+	} from '$lib/api/dashboard/refrence_data/payment_methods';
 	import DataTable from '$lib/components/dashboard/reference_data/payment_methods/data-table.svelte';
 	import { createColumns } from '$lib/components/dashboard/reference_data/payment_methods/columns.js';
 	import CreateEditDialog from '$lib/components/dashboard/reference_data/payment_methods/create-edit-dialog.svelte';
@@ -9,10 +12,11 @@
 	import type { PageData } from './$types';
 	import { browser } from '$app/environment';
 	import { Plus, RefreshCw } from 'lucide-svelte';
+	import { useShortcuts } from '$lib/hooks/use-shortcuts';
 
 	// Los datos iniciales vienen del servidor
 	let { data }: { data: PageData } = $props();
-	
+
 	// Estado para el diálogo de crear
 	let showCreateDialog = $state(false);
 
@@ -60,12 +64,12 @@
 		loading = true;
 		error = null;
 
-		try {			
+		try {
 			const response = await paymentMethodsApi.list(currentPage + 1, pageSize);
 
 			if (response.error) {
 				console.error('📊 [Page] Error en loadMore:', response.error, 'Status:', response.status);
-				
+
 				// Si es un error de autenticación (401 o 403) y no se pudo refrescar, mostrar mensaje específico
 				if (response.status === 401 || response.status === 403) {
 					error = 'Sesión expirada. Recargando página...';
@@ -79,7 +83,7 @@
 				return;
 			}
 
-			if (response.data?.items) {				
+			if (response.data?.items) {
 				// Agregar los nuevos items al array existente
 				allItems = [...allItems, ...response.data.items];
 				currentPage++;
@@ -107,6 +111,20 @@
 		reloadData();
 	}
 
+	// Keyboard Shortcuts
+	useShortcuts('Métodos de Pago', [
+		{
+			key: 'Alt+Shift+N',
+			description: 'Nuevo Método',
+			action: handleCreateClick
+		},
+		{
+			key: 'Alt+Shift+R',
+			description: 'Actualizar Lista',
+			action: reloadData
+		}
+	]);
+
 	// Crear columnas con el callback onSuccess
 	const columns = createColumns(handleSuccess);
 </script>
@@ -116,9 +134,7 @@
 	<div class="flex items-center justify-between">
 		<div>
 			<h1 class="text-3xl font-bold tracking-tight">Métodos de Pago</h1>
-			<p class="text-muted-foreground">
-				Gestiona las formas de pago disponibles en el sistema
-			</p>
+			<p class="text-muted-foreground">Gestiona las formas de pago disponibles en el sistema</p>
 		</div>
 		<Button onclick={handleCreateClick}>
 			<Plus class="mr-2" size={16} />
@@ -154,13 +170,7 @@
 		</Card.Header>
 		<Card.Content>
 			<!-- TanStack DataTable con Infinite Scroll -->
-			<DataTable
-				data={allItems}
-				{columns}
-				{loading}
-				{hasMore}
-				{loadMore}
-			/>
+			<DataTable data={allItems} {columns} {loading} {hasMore} {loadMore} />
 		</Card.Content>
 	</Card.Root>
 </div>