@nocios/crudify-ui 1.3.0 → 1.3.2

package/mejoras_npm_lib.md

@@ -1,790 +0,0 @@
-# 📊 **REPORTE PROFUNDO DE ANÁLISIS - CRUDIA-UI & NPM-CRUDIFY-UI**
-
-## 🎯 **TABLA DE EVALUACIÓN PRINCIPAL**
-
-| **Criterio**                         | **Crudia-UI** | **npm-crudify-ui** | **Promedio Sistema** |
-| ------------------------------------ | ------------- | ------------------ | -------------------- |
-| **🔒 Robustez**                      | **78%**       | **85%**            | **82%**              |
-| **🛡️ Seguridad**                     | **82%**       | **76%**            | **79%**              |
-| **⚡ Simplicidad de Implementación** | **71%**       | **89%**            | **80%**              |
-| **📊 Puntuación General**            | **77%**       | **83%**            | **80%**              |
-
----
-
-## 🔍 **ANÁLISIS DETALLADO POR CATEGORÍA**
-
-### 🔒 **ROBUSTEZ**
-
-| **Aspecto**                | **Crudia-UI** | **npm-crudify-ui** | **Evaluación**                   |
-| -------------------------- | ------------- | ------------------ | -------------------------------- |
-| **Manejo de Errores**      | 85%           | 90%                | ✅ Excelente sistema multicapa   |
-| **Inicialización**         | 70%           | 95%                | ✅ Singleton robusto en librería |
-| **Estado Consistente**     | 75%           | 80%                | ⚠️ Posibles inconsistencias      |
-| **Recuperación de Fallos** | 80%           | 85%                | ✅ Buenos mecanismos             |
-| **Concurrencia**           | 70%           | 90%                | ✅ Thread-safe en librería       |
-
-**Fortalezas:**
-
-- ✅ **npm-crudify-ui**: Sistema de inicialización singleton thread-safe
-- ✅ **Ambos**: Error boundaries multicapa
-- ✅ **Crudia-UI**: Caching inteligente con expiración
-
-**Debilidades:**
-
-- ❌ **Crudia-UI**: Múltiples instancias de crudify pueden causar conflictos
-- ❌ **npm-crudify-ui**: Logging excesivo en producción
-
-### 🛡️ **SEGURIDAD**
-
-| **Aspecto**               | **Crudia-UI** | **npm-crudify-ui** | **Evaluación**                             |
-| ------------------------- | ------------- | ------------------ | ------------------------------------------ |
-| **Autenticación**         | 90%           | 80%                | ✅ JWT sólido, fingerprinting cuestionable |
-| **Autorización**          | 75%           | 70%                | ⚠️ Falta RBAC completo                     |
-| **Validación Input**      | 95%           | 85%                | ✅ Excelente en crudia-ui                  |
-| **Almacenamiento Seguro** | 85%           | 75%                | ⚠️ Claves predecibles                      |
-| **Protección XSS/CSRF**   | 90%           | 70%                | ⚠️ Falta CSRF en librería                  |
-| **Gestión de Tokens**     | 80%           | 80%                | ⚠️ Sin refresh tokens                      |
-
-**Fortalezas:**
-
-- ✅ **Crudia-UI**: Validación exhaustiva de inputs con DOMPurify
-- ✅ **Ambos**: Almacenamiento encriptado de tokens
-- ✅ **Crudia-UI**: SecureString para manejo de passwords
-
-**Vulnerabilidades Identificadas:**
-
-- 🔴 **Alto Riesgo**: Error traces pueden filtrar información sensible
-- 🟡 **Medio Riesgo**: Claves de encriptación basadas en fingerprinting predecible
-- 🟡 **Medio Riesgo**: Sin protección CSRF explícita
-- 🟡 **Medio Riesgo**: Falta timeout de sesión automático
-
-### ⚡ **SIMPLICIDAD DE IMPLEMENTACIÓN**
-
-| **Aspecto**              | **Crudia-UI** | **npm-crudify-ui** | **Evaluación**                    |
-| ------------------------ | ------------- | ------------------ | --------------------------------- |
-| **Setup Inicial**        | 60%           | 95%                | ✅ Librería muy simple de usar    |
-| **Configuración**        | 70%           | 85%                | ✅ Múltiples fuentes automáticas  |
-| **API Consistency**      | 75%           | 90%                | ✅ Hooks bien diseñados           |
-| **TypeScript Support**   | 85%           | 95%                | ✅ Excelente tipado               |
-| **Learning Curve**       | 65%           | 85%                | ⚠️ Curva pronunciada en crudia-ui |
-| **Developer Experience** | 70%           | 90%                | ✅ Buena experiencia en librería  |
-
-**Fortalezas:**
-
-- ✅ **npm-crudify-ui**: Un solo provider unifica todo
-- ✅ **npm-crudify-ui**: Hooks especializados para diferentes casos
-- ✅ **Ambos**: TypeScript first-class support
-
-**Complejidades:**
-
-- ❌ **Crudia-UI**: Múltiples providers requieren configuración manual
-- ❌ **Crudia-UI**: Patrón complejo de inicialización distribuida
-
----
-
-## 🎯 **LISTADO DE MEJORAS PRIORITARIAS**
-
-### 🔴 **PRIORIDAD ALTA (Implementar Inmediatamente)**
-
-#### **Seguridad Crítica**
-
-1. **🛡️ Sanitización de Errores en Producción**
-
-   ```typescript
-   // En lugar de:
-   console.error("Error:", error.stack);
-
-   // Implementar:
-   const sanitizedError = process.env.NODE_ENV === "production" ? { message: error.message, code: error.code } : error;
-   ```
-
-2. **🔐 Mejora del Sistema de Encriptación**
-
-   ```typescript
-   // Reemplazar fingerprinting predecible con:
-   private async generateSecureKey(): Promise<string> {
-     const entropy = new Uint8Array(32);
-     crypto.getRandomValues(entropy);
-     const key = await crypto.subtle.importKey(/* ... */);
-     return key;
-   }
-   ```
-
-3. **⏱️ Timeout de Sesión Automático**
-   ```typescript
-   const SESSION_TIMEOUT = 30 * 60 * 1000; // 30 minutos
-   useEffect(() => {
-     const timeout = setTimeout(() => {
-       tokenManager.clearToken();
-       redirectToLogin();
-     }, SESSION_TIMEOUT);
-     return () => clearTimeout(timeout);
-   }, [lastActivity]);
-   ```
-
-#### **Robustez**
-
-4. **📝 Logging Condicional**
-
-   ```typescript
-   const logger = {
-     debug: (msg: string, data?: any) => {
-       if (process.env.NODE_ENV === "development") {
-         console.log(`🔄 ${msg}`, data);
-       }
-     },
-   };
-   ```
-
-5. **🔄 Sistema de Refresh Tokens**
-
-   ```typescript
-   interface TokenPair {
-     accessToken: string;
-     refreshToken: string;
-     expiresAt: number;
-   }
-
-   async function refreshTokenIfNeeded(): Promise<string> {
-     if (tokenExpiresSoon()) {
-       return await refreshAccessToken();
-     }
-     return currentToken;
-   }
-   ```
-
-### 🟡 **PRIORIDAD MEDIA (Siguientes 4-6 Semanas)**
-
-#### **Arquitectura y Performance**
-
-6. **⚡ React Error Boundaries en Librería**
-
-   ```tsx
-   export function CrudifyErrorBoundary({ children }: { children: ReactNode }) {
-     return (
-       <ErrorBoundary FallbackComponent={CrudifyErrorFallback} onError={handleCrudifyError}>
-         {children}
-       </ErrorBoundary>
-     );
-   }
-   ```
-
-7. **🎯 Optimización de Re-renders**
-
-   ```typescript
-   const MemoizedComponent = memo(Component);
-   const expensiveValue = useMemo(() => computeExpensive(data), [data]);
-   ```
-
-8. **📦 Bundle Size Optimization**
-
-   ```typescript
-   // Hacer MUI opcional:
-   export const OptionalMuiComponents = {
-     get DataGrid() {
-       return import("@mui/x-data-grid");
-     },
-     get Icons() {
-       return import("@mui/icons-material");
-     },
-   };
-   ```
-
-9. **🔍 Sistema de Testing Comprehensivo**
-   ```typescript
-   describe("CrudifyDataProvider", () => {
-     it("should initialize correctly", async () => {
-       const { result } = renderHook(() => useCrudifyData(), {
-         wrapper: TestProviderWrapper,
-       });
-       await waitFor(() => {
-         expect(result.current.isReady).toBe(true);
-       });
-     });
-   });
-   ```
-
-#### **Seguridad Avanzada**
-
-10. **🛡️ Implementación CSRF Protection**
-
-    ```typescript
-    const csrfToken = await getCsrfToken();
-    const response = await crudify.request({
-      headers: { "X-CSRF-Token": csrfToken },
-    });
-    ```
-
-11. **👥 Role-Based Access Control (RBAC)**
-    ```typescript
-    export function usePermission(action: string, resource: string) {
-      const { user } = useCrudifyAuth();
-      return user?.permissions?.includes(`${action}:${resource}`) ?? false;
-    }
-    ```
-
-### 🟢 **PRIORIDAD BAJA (Futuras Iteraciones)**
-
-#### **Developer Experience**
-
-12. **📚 JSDoc Comprehensivo**
-
-    ````typescript
-    /**
-     * Hook for managing CRUD operations with automatic initialization handling
-     * @example
-     * ```tsx
-     * const { readItems, loading } = useCrudifyData();
-     * const items = await readItems('products', { active: true });
-     * ```
-     */
-    export function useCrudifyData(): UseCrudifyDataReturn;
-    ````
-
-13. **🔧 DevTools Integration**
-
-    ```typescript
-    const CrudifyDevTools = () => {
-      const context = useCrudifyDataContext();
-      return <DevToolsPanel context={context} />;
-    };
-    ```
-
-14. **📖 Migration Guide Automático**
-    ```typescript
-    export function createMigrationHelper() {
-      return {
-        detectLegacyUsage: () => {
-          /* scan for old patterns */
-        },
-        suggestUpgrades: () => {
-          /* provide upgrade paths */
-        },
-      };
-    }
-    ```
-
-#### **Extensibilidad**
-
-15. **🔌 Plugin System**
-
-    ```typescript
-    interface CrudifyPlugin {
-      name: string;
-      version: string;
-      install: (crudify: CrudifyInstance) => void;
-    }
-
-    crudify.use(auditPlugin);
-    crudify.use(cachePlugin);
-    ```
-
-16. **🌐 Advanced Internationalization**
-    ```typescript
-    export function useCrudifyI18n() {
-      return {
-        t: (key: string) => i18n.t(`crudify.${key}`),
-        formatError: (error: CrudifyError) => formatLocalizedError(error),
-      };
-    }
-    ```
-
----
-
-## 📈 **PROYECCIÓN DE MEJORAS**
-
-### **Con Mejoras Prioritarias Implementadas:**
-
-| **Criterio**       | **Estado Actual** | **Proyección Post-Mejoras** | **Mejora** |
-| ------------------ | ----------------- | --------------------------- | ---------- |
-| **🔒 Robustez**    | 82%               | **92%**                     | +10%       |
-| **🛡️ Seguridad**   | 79%               | **91%**                     | +12%       |
-| **⚡ Simplicidad** | 80%               | **87%**                     | +7%        |
-| **📊 General**     | 80%               | **90%**                     | +10%       |
-
-### **Cronograma Sugerido:**
-
-- **📅 Semana 1-2**: Implementar mejoras de seguridad crítica (#1-3)
-- **📅 Semana 3-4**: Robustez y logging (#4-5)
-- **📅 Mes 2**: Performance y testing (#6-9)
-- **📅 Mes 3**: Seguridad avanzada (#10-11)
-- **📅 Trimestre 2**: Extensibilidad y DX (#12-16)
-
----
-
-## 🎉 **CONCLUSIÓN**
-
-El sistema **crudia-ui + npm-crudify-ui** presenta una **arquitectura sólida** con un **80% de calidad general**. Las principales fortalezas son el sistema de providers unificado, la robusta gestión de estados y la excelente integración TypeScript.
-
-**🚀 Con las mejoras prioritarias implementadas, el sistema alcanzaría un 90% de calidad**, posicionándolo como una solución enterprise-ready para aplicaciones CRUD complejas.
-
----
-
-## 📋 **ANÁLISIS TÉCNICO DETALLADO**
-
-### **Crudia-UI - Fortalezas Identificadas:**
-
-**Arquitectura:**
-
-- React Context API usado apropiadamente para estado global
-- Módulo de caching con expiración (5-10 minutos)
-- Persistencia de preferencias de usuario para grid state
-- Debounced data loading para prevenir llamadas API excesivas
-
-**Seguridad:**
-
-- Validación JWT con verificación de expiración
-- Almacenamiento encriptado usando encrypted session storage
-- Token expiration automatic cleanup
-- Browser fingerprinting para claves de encriptación
-- Validación comprehensiva para todos los tipos de input
-- Prevención XSS usando DOMPurify
-- Validación de email, password, teléfono, URL con reglas de seguridad
-- Validación de file upload (tamaño, tipo)
-- Prevención SQL injection através de consultas parametrizadas
-
-**Manejo de Errores:**
-
-- Multi-level error boundaries (aplicación, ruta, componente)
-- Sistema comprehensivo de reporte de errores
-- Browser fingerprinting para contexto de errores
-- Utilidades de limpieza de datos sensibles
-- Diferencias entre manejo de errores en desarrollo vs producción
-
-### **npm-crudify-ui - Fortalezas Identificadas:**
-
-**Inicialización:**
-
-- Patrón Singleton para coordinación global
-- Inicialización thread-safe
-- Sistema de configuración con múltiples fuentes (props → env → cookies → defaults)
-- Detección de cambios de configuración y re-inicialización automática
-- Verificación comprehensiva de métodos crudify post-inicialización
-
-**Arquitectura de Hooks:**
-
-- Sistema de hooks en capas (alto nivel y bajo nivel)
-- Hooks especializados: useCrudifyAuth, useCrudifyData, useCrudifyUser, useCrudifyConfig
-- Verificación automática de inicialización previniendo llamadas API prematuras
-- Error boundaries y degradación elegante
-
-**Gestión de Estado:**
-
-- Sincronización cross-tab para estado de autenticación
-- Migración automática de localStorage a sessionStorage
-- Limpieza automática de tokens expirados
-- Sistema de configuración con resolución de prioridades
-
-### **Vulnerabilidades Específicas Identificadas:**
-
-**Alto Riesgo:**
-
-1. **Information Disclosure**: Error stack traces pueden contener paths sensibles y data
-2. **Predictable Encryption**: Claves de encriptación basadas en browser fingerprint
-
-**Medio Riesgo:**
-
-1. **Missing CSRF Protection**: No hay manejo explícito de tokens CSRF
-2. **Session Management**: No hay logout automático por inactividad
-3. **Input Validation**: Algunos edge cases en validación de números
-
-**Bajo Riesgo:**
-
-1. **Console Logging**: Data sensible visible en modo desarrollo
-2. **Error Reporting**: Información detallada del sistema enviada a servicio externo
-3. **Dependencies**: Algunas dependencias podrían actualizarse para patches de seguridad
-
----
-
-## 🔧 **IMPLEMENTACIÓN DETALLADA DE MEJORAS**
-
-### **1. Sistema de Logging Condicional (PRIORIDAD ALTA)**
-
-**Archivo a modificar:** `src/core/Logger.ts` (nuevo)
-
-```typescript
-export enum LogLevel {
-  ERROR = 0,
-  WARN = 1,
-  INFO = 2,
-  DEBUG = 3,
-}
-
-export class CrudifyLogger {
-  private static instance: CrudifyLogger;
-  private logLevel: LogLevel;
-
-  constructor() {
-    this.logLevel = process.env.NODE_ENV === "production" ? LogLevel.ERROR : LogLevel.DEBUG;
-  }
-
-  static getInstance(): CrudifyLogger {
-    if (!CrudifyLogger.instance) {
-      CrudifyLogger.instance = new CrudifyLogger();
-    }
-    return CrudifyLogger.instance;
-  }
-
-  private shouldLog(level: LogLevel): boolean {
-    return level <= this.logLevel;
-  }
-
-  private sanitizeForProduction(data: any): any {
-    if (this.logLevel === LogLevel.ERROR) {
-      // En producción, solo mostrar información esencial
-      if (data instanceof Error) {
-        return {
-          message: data.message,
-          name: data.name,
-          code: (data as any).code,
-        };
-      }
-      // Remover información sensible
-      return typeof data === "object" ? "[Object]" : "[Data]";
-    }
-    return data;
-  }
-
-  error(message: string, data?: any): void {
-    if (this.shouldLog(LogLevel.ERROR)) {
-      console.error(`❌ ${message}`, this.sanitizeForProduction(data));
-    }
-  }
-
-  warn(message: string, data?: any): void {
-    if (this.shouldLog(LogLevel.WARN)) {
-      console.warn(`⚠️ ${message}`, this.sanitizeForProduction(data));
-    }
-  }
-
-  info(message: string, data?: any): void {
-    if (this.shouldLog(LogLevel.INFO)) {
-      console.info(`ℹ️ ${message}`, this.sanitizeForProduction(data));
-    }
-  }
-
-  debug(message: string, data?: any): void {
-    if (this.shouldLog(LogLevel.DEBUG)) {
-      console.log(`🔄 ${message}`, data);
-    }
-  }
-}
-
-export const logger = CrudifyLogger.getInstance();
-```
-
-**Uso en archivos existentes:**
-
-```typescript
-// Reemplazar todos los console.log/error con:
-import { logger } from "../core/Logger";
-
-// En lugar de:
-console.log("🔄 useCrudifyInstance - waitForReady: Starting wait");
-
-// Usar:
-logger.debug("useCrudifyInstance - waitForReady: Starting wait");
-```
-
-### **2. Mejora del Sistema de Encriptación (PRIORIDAD ALTA)**
-
-**Archivo a modificar:** `src/components/CrudifyLogin/utils/secureStorage.ts`
-
-```typescript
-export class EnhancedSecureStorage {
-  private static instance: EnhancedSecureStorage;
-  private encryptionKey: string | null = null;
-
-  static getInstance(): EnhancedSecureStorage {
-    if (!EnhancedSecureStorage.instance) {
-      EnhancedSecureStorage.instance = new EnhancedSecureStorage();
-    }
-    return EnhancedSecureStorage.instance;
-  }
-
-  private async generateSecureEncryptionKey(): Promise<string> {
-    try {
-      // Usar Web Crypto API para generar clave segura
-      const keyMaterial = await crypto.subtle.generateKey({ name: "PBKDF2" }, false, ["deriveBits", "deriveKey"]);
-
-      // Combinar con datos del dispositivo de forma más segura
-      const deviceInfo = await this.getSecureDeviceInfo();
-
-      const key = await crypto.subtle.deriveKey(
-        {
-          name: "PBKDF2",
-          salt: new TextEncoder().encode(deviceInfo),
-          iterations: 100000,
-          hash: "SHA-256",
-        },
-        keyMaterial,
-        { name: "AES-GCM", length: 256 },
-        true,
-        ["encrypt", "decrypt"]
-      );
-
-      const exported = await crypto.subtle.exportKey("raw", key);
-      return Array.from(new Uint8Array(exported))
-        .map((b) => b.toString(16).padStart(2, "0"))
-        .join("");
-    } catch (error) {
-      // Fallback a método anterior si Web Crypto API no está disponible
-      logger.warn("Web Crypto API not available, using fallback method");
-      return this.generateFallbackKey();
-    }
-  }
-
-  private async getSecureDeviceInfo(): Promise<string> {
-    const info = [
-      navigator.userAgent,
-      navigator.language,
-      screen.colorDepth,
-      screen.width,
-      screen.height,
-      new Date().getTimezoneOffset(),
-      "crudify-secure-v2",
-    ];
-
-    // Agregar información adicional si está disponible
-    if ("serviceWorker" in navigator) {
-      info.push("sw-available");
-    }
-
-    return info.join("|");
-  }
-
-  private generateFallbackKey(): string {
-    // Método de fallback mejorado
-    const entropy = Math.random().toString(36) + Date.now().toString(36);
-    const deviceInfo = [navigator.userAgent, navigator.language, new Date().getTimezoneOffset(), "crudify-fallback"].join("|");
-
-    return CryptoJS.SHA256(deviceInfo + entropy).toString();
-  }
-
-  async getEncryptionKey(): Promise<string> {
-    if (!this.encryptionKey) {
-      this.encryptionKey = await this.generateSecureEncryptionKey();
-    }
-    return this.encryptionKey;
-  }
-
-  async setSecureItem(key: string, value: string, ttl?: number): Promise<void> {
-    try {
-      const encryptionKey = await this.getEncryptionKey();
-
-      const data = {
-        value,
-        timestamp: Date.now(),
-        ttl: ttl || 24 * 60 * 60 * 1000, // 24 horas por defecto
-        version: "2.0", // Para futuras migraciones
-      };
-
-      const encrypted = CryptoJS.AES.encrypt(JSON.stringify(data), encryptionKey).toString();
-
-      sessionStorage.setItem(`crudify_secure_${key}`, encrypted);
-      logger.debug(`Secure item stored: ${key}`);
-    } catch (error) {
-      logger.error("Failed to store secure item", error);
-      throw new Error("Failed to store secure data");
-    }
-  }
-
-  async getSecureItem(key: string): Promise<string | null> {
-    try {
-      const encryptionKey = await this.getEncryptionKey();
-      const encrypted = sessionStorage.getItem(`crudify_secure_${key}`);
-
-      if (!encrypted) {
-        return null;
-      }
-
-      const decrypted = CryptoJS.AES.decrypt(encrypted, encryptionKey);
-      const decryptedString = decrypted.toString(CryptoJS.enc.Utf8);
-
-      if (!decryptedString) {
-        logger.warn(`Failed to decrypt item: ${key}`);
-        this.removeSecureItem(key);
-        return null;
-      }
-
-      const data = JSON.parse(decryptedString);
-
-      // Verificar TTL
-      if (data.ttl && Date.now() - data.timestamp > data.ttl) {
-        logger.debug(`Expired item removed: ${key}`);
-        this.removeSecureItem(key);
-        return null;
-      }
-
-      return data.value;
-    } catch (error) {
-      logger.error("Failed to retrieve secure item", error);
-      this.removeSecureItem(key);
-      return null;
-    }
-  }
-
-  removeSecureItem(key: string): void {
-    sessionStorage.removeItem(`crudify_secure_${key}`);
-    logger.debug(`Secure item removed: ${key}`);
-  }
-
-  clearAllSecureItems(): void {
-    const keysToRemove: string[] = [];
-    for (let i = 0; i < sessionStorage.length; i++) {
-      const key = sessionStorage.key(i);
-      if (key && key.startsWith("crudify_secure_")) {
-        keysToRemove.push(key);
-      }
-    }
-
-    keysToRemove.forEach((key) => sessionStorage.removeItem(key));
-    logger.debug(`Cleared ${keysToRemove.length} secure items`);
-  }
-}
-
-export const enhancedSecureStorage = EnhancedSecureStorage.getInstance();
-```
-
-### **3. Sistema de Timeout de Sesión (PRIORIDAD ALTA)**
-
-**Archivo a modificar:** `src/hooks/useSessionTimeout.ts` (nuevo)
-
-```typescript
-import { useEffect, useCallback, useRef } from "react";
-import { logger } from "../core/Logger";
-import { useCrudifyAuth } from "./useCrudifyAuth";
-
-interface UseSessionTimeoutOptions {
-  timeoutMinutes?: number;
-  warningMinutes?: number;
-  onWarning?: () => void;
-  onTimeout?: () => void;
-}
-
-export function useSessionTimeout(options: UseSessionTimeoutOptions = {}) {
-  const { timeoutMinutes = 30, warningMinutes = 5, onWarning, onTimeout } = options;
-
-  const { logout, isAuthenticated } = useCrudifyAuth();
-  const timeoutRef = useRef<NodeJS.Timeout>();
-  const warningRef = useRef<NodeJS.Timeout>();
-  const lastActivityRef = useRef<number>(Date.now());
-
-  const resetTimeout = useCallback(() => {
-    if (!isAuthenticated) return;
-
-    lastActivityRef.current = Date.now();
-
-    // Limpiar timeouts existentes
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-    }
-    if (warningRef.current) {
-      clearTimeout(warningRef.current);
-    }
-
-    // Configurar warning
-    const warningMs = (timeoutMinutes - warningMinutes) * 60 * 1000;
-    if (warningMs > 0 && onWarning) {
-      warningRef.current = setTimeout(() => {
-        logger.warn("Session timeout warning triggered");
-        onWarning();
-      }, warningMs);
-    }
-
-    // Configurar timeout
-    const timeoutMs = timeoutMinutes * 60 * 1000;
-    timeoutRef.current = setTimeout(() => {
-      logger.info("Session timeout reached, logging out");
-      if (onTimeout) {
-        onTimeout();
-      }
-      logout();
-    }, timeoutMs);
-
-    logger.debug(`Session timeout reset: ${timeoutMinutes} minutes`);
-  }, [isAuthenticated, timeoutMinutes, warningMinutes, onWarning, onTimeout, logout]);
-
-  const handleUserActivity = useCallback(() => {
-    resetTimeout();
-  }, [resetTimeout]);
-
-  useEffect(() => {
-    if (!isAuthenticated) {
-      // Limpiar timeouts si no está autenticado
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-      if (warningRef.current) {
-        clearTimeout(warningRef.current);
-      }
-      return;
-    }
-
-    // Configurar listeners para actividad del usuario
-    const events = ["mousedown", "mousemove", "keypress", "scroll", "touchstart", "click"];
-
-    events.forEach((event) => {
-      document.addEventListener(event, handleUserActivity, true);
-    });
-
-    // Inicializar timeout
-    resetTimeout();
-
-    // Cleanup
-    return () => {
-      events.forEach((event) => {
-        document.removeEventListener(event, handleUserActivity, true);
-      });
-
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-      if (warningRef.current) {
-        clearTimeout(warningRef.current);
-      }
-    };
-  }, [isAuthenticated, handleUserActivity, resetTimeout]);
-
-  return {
-    lastActivity: lastActivityRef.current,
-    resetTimeout: handleUserActivity,
-    timeRemaining: () => {
-      const elapsed = Date.now() - lastActivityRef.current;
-      const remaining = timeoutMinutes * 60 * 1000 - elapsed;
-      return Math.max(0, remaining);
-    },
-  };
-}
-```
-
-**Integración en CrudifyDataProvider:**
-
-```typescript
-// En CrudifyDataProvider.tsx agregar:
-import { useSessionTimeout } from "../hooks/useSessionTimeout";
-
-export const CrudifyDataProvider: React.FC<CrudifyDataProviderProps> = ({ children, ...config }) => {
-  // ... código existente ...
-
-  // Agregar session timeout
-  useSessionTimeout({
-    timeoutMinutes: 30,
-    warningMinutes: 5,
-    onWarning: () => {
-      // Mostrar notificación de advertencia
-      console.warn("Su sesión expirará en 5 minutos");
-    },
-    onTimeout: () => {
-      // Mostrar notificación de logout
-      console.info("Sesión expirada por inactividad");
-    },
-  });
-
-  // ... resto del código ...
-};
-```
-
----
-
-Estas son las implementaciones detalladas para las 3 mejoras de mayor prioridad. ¿Te gustaría que continúe con las siguientes mejoras o que implemente alguna de estas específicamente?