@decido/plugin-chameleon 1.0.0

package/src/views/DatabaseAdminView.tsx

@@ -0,0 +1,707 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { toast } from 'sonner';
+import { 
+    Database, TableProperties, RefreshCw, Plus, Edit2, Trash2, X, 
+    Check, Search, Filter, ServerCrash, DatabaseZap, LayoutGrid, 
+    ChevronRight, AlertCircle, Loader2, ArrowUpDown, Server
+} from 'lucide-react';
+
+const baseUrl = (import.meta as any).env?.VITE_API_BASE_URL || 'http://localhost:3001';
+
+type SortConfig = { key: string; direction: 'asc' | 'desc' } | null;
+
+export const DatabaseAdminView = () => {
+    // Dynamic Schema & Tables State
+    const [connectors] = useState<{id: string, name: string}[]>([
+        { id: 'postgres', name: 'PostgreSQL Core' },
+        { id: 'google_sheets', name: 'Google Sheets MCP' }
+    ]);
+    const [activeConnector, setActiveConnector] = useState('postgres');
+    const [tables, setTables] = useState<string[]>([]);
+    const [activeTable, setActiveTable] = useState<string | null>(null);
+    
+    // UI states
+    const [isTablesLoading, setIsTablesLoading] = useState(true);
+    const [isDataLoading, setIsDataLoading] = useState(false);
+    const [data, setData] = useState<any[]>([]);
+    const [searchTerm, setSearchTerm] = useState('');
+    const [sortConfig, setSortConfig] = useState<SortConfig>(null);
+    const [connectionError, setConnectionError] = useState<string | null>(null);
+    
+    // Schema View States
+    const [viewMode, setViewMode] = useState<'data' | 'schema'>('data');
+    const [schemaData, setSchemaData] = useState<any[]>([]);
+    const [isSchemaLoading, setIsSchemaLoading] = useState(false);
+    
+    // Form & Modal States
+    const [isFormOpen, setIsFormOpen] = useState(false);
+    const [editRecord, setEditRecord] = useState<any>(null);
+    const [isCreating, setIsCreating] = useState(false);
+    const [isSaving, setIsSaving] = useState(false);
+
+    // 1. Fetch available tables dynamically from the backend
+    const fetchSchema = async () => {
+        setIsTablesLoading(true);
+        setConnectionError(null);
+        try {
+            const res = await fetch(`${baseUrl}/api/dataway/resources?connectorId=${activeConnector}`, {
+                headers: { 'x-api-key': 'dev_ak_chameleon_studio_99x' }
+            });
+            if (!res.ok) throw new Error('API Endpoint /api/dataway/resources no disponible');
+            
+            const result = await res.json();
+            const tableList = Array.isArray(result.resources) ? result.resources : [];
+            setTables(tableList);
+            
+            if (tableList.length > 0) setActiveTable(tableList[0]);
+            else setActiveTable(null);
+        } catch (error: any) {
+            console.error('[DB Admin] Failed to load schema:', error);
+            setConnectionError(error.message);
+        } finally {
+            setIsTablesLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        fetchSchema();
+    }, [activeConnector]);
+
+    // 2. Fetch specific table data using Universal Dataway
+    const fetchTableData = async (tableName: string, silent = false) => {
+        if (!silent) setIsDataLoading(true);
+        setSearchTerm(''); // Reset search on table change
+        setSortConfig(null);
+        try {
+            // Using generic Dataway routing instead of direct DB endpoints
+            const res = await fetch(`${baseUrl}/api/dataway/query`, {
+                method: 'POST',
+                headers: { 
+                    'x-api-key': 'dev_ak_chameleon_studio_99x',
+                    'Content-Type': 'application/json' 
+                },
+                body: JSON.stringify({
+                    connectorId: activeConnector,
+                    resource: tableName,
+                    type: activeConnector === 'postgres' ? 'table' : 'range'
+                })
+            });
+            if (!res.ok) throw new Error(`El backend Dataway rechazó la lectura de la tabla ${tableName}`);
+            
+            const result = await res.json();
+            setData(Array.isArray(result.data) ? result.data : []);
+        } catch (error: any) {
+            toast.error(`Acceso Denegado a ${tableName}`, { description: error.message });
+            setData([]); // NO MOCKS.
+        } finally {
+            setIsDataLoading(false);
+        }
+    };
+
+    const fetchTableSchema = async (tableName: string) => {
+        setIsSchemaLoading(true);
+        try {
+            const res = await fetch(`${baseUrl}/api/dataway/schema?connectorId=${activeConnector}&resource=${tableName}`, {
+                headers: { 'x-api-key': 'dev_ak_chameleon_studio_99x' }
+            });
+            if (!res.ok) throw new Error(`El Dataway backend rechazó el esquema de ${tableName}`);
+            
+            const result = await res.json();
+            setSchemaData(result.schema || []);
+        } catch (error: any) {
+            toast.error(`Error de Esquema Dataway`, { description: error.message });
+            setSchemaData([]);
+        } finally {
+            setIsSchemaLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        if (activeTable) {
+            fetchTableData(activeTable);
+            fetchTableSchema(activeTable);
+            setViewMode('data'); // Reset to data view on table change
+        }
+    }, [activeTable]);
+
+    // 3. Handle Sort
+    const handleSort = (key: string) => {
+        let direction: 'asc' | 'desc' = 'asc';
+        if (sortConfig && sortConfig.key === key && sortConfig.direction === 'asc') {
+            direction = 'desc';
+        }
+        setSortConfig({ key, direction });
+    };
+
+    // Derived processed data
+    const processedData = useMemo(() => {
+        let sortableItems = [...data];
+        
+        // Search Filter
+        if (searchTerm) {
+            const lowercasedFilter = searchTerm.toLowerCase();
+            sortableItems = sortableItems.filter(item => {
+                return Object.keys(item).some(key =>
+                    String(item[key]).toLowerCase().includes(lowercasedFilter)
+                );
+            });
+        }
+        
+        // Sorting
+        if (sortConfig !== null) {
+            sortableItems.sort((a, b) => {
+                const aVal = a[sortConfig.key];
+                const bVal = b[sortConfig.key];
+                
+                if (aVal < bVal) return sortConfig.direction === 'asc' ? -1 : 1;
+                if (aVal > bVal) return sortConfig.direction === 'asc' ? 1 : -1;
+                return 0;
+            });
+        }
+        
+        return sortableItems;
+    }, [data, searchTerm, sortConfig]);
+
+    // Ocultar ID, created_at u otros metadatos complejos en columnas automáticas si lo deseamos, 
+    // pero por defecto, en un DDBB Admin pro, queremos ver todo (o truncado)
+    const columns = data.length > 0 ? Object.keys(data[0]) : [];
+
+    // 4. CRUD Actions
+    const handleSave = async (record: any) => {
+        if (!activeTable) return;
+        setIsSaving(true);
+        const isNew = isCreating;
+        const method = isNew ? 'POST' : 'PUT';
+        const url = isNew 
+          ? `${baseUrl}/api/db/${activeTable}` 
+          : `${baseUrl}/api/db/${activeTable}/${record.id}`;
+
+        try {
+            const payload = { ...record };
+            if (isNew) delete payload.id; // Evitar enviar ID en POST si es autoincremental/UUID
+
+            const res = await fetch(url, {
+                method,
+                headers: {
+                    'Content-Type': 'application/json',
+                    'x-api-key': 'dev_ak_chameleon_studio_99x'
+                },
+                body: JSON.stringify(payload)
+            });
+            
+            if (!res.ok) {
+                const err = await res.json().catch(() => ({}));
+                throw new Error(err.message || err.error || 'Error desconocido al guardar en base de datos');
+            }
+            
+            toast.success(`Registro ${isNew ? 'creado' : 'actualizado'} en la tabla ${activeTable}`);
+            setIsFormOpen(false);
+            
+            // Reload from server source of truth
+            fetchTableData(activeTable, true);
+        } catch (error: any) {
+            toast.error('Error de Integridad', { description: error.message });
+        } finally {
+            setIsSaving(false);
+        }
+    };
+
+    const handleDelete = async (id: string | number) => {
+        if (!activeTable) return;
+        if (!confirm('¿Atención: Esta acción es destructiva y permanente. ¿Confirmar eliminación?')) return;
+
+        try {
+            const res = await fetch(`${baseUrl}/api/db/${activeTable}/${id}`, {
+                method: 'DELETE',
+                headers: { 'x-api-key': 'dev_ak_chameleon_studio_99x' }
+            });
+            
+            if (!res.ok) throw new Error('No se pudo eliminar el registro (violación de Foreign Key o ruta no implementada)');
+            
+            toast.success('Registro eliminado exitosamente');
+            // Optimistic update
+            setData(prev => prev.filter(r => r.id !== id));
+        } catch (error: any) {
+            toast.error('Fallo al Eliminar', { description: error.message });
+        }
+    };
+
+    const openEditModal = (record: any) => {
+        setEditRecord({ ...record });
+        setIsCreating(false);
+        setIsFormOpen(true);
+    };
+
+    const openCreateModal = () => {
+        const structuralRecord: any = {};
+        if (columns.length > 0) {
+            columns.forEach(col => {
+                if (col !== 'id' && col !== 'created_at' && col !== 'updated_at') {
+                    structuralRecord[col] = '';
+                }
+            });
+        }
+        setEditRecord(structuralRecord);
+        setIsCreating(true);
+        setIsFormOpen(true);
+    };
+
+    const inferInputType = (val: any) => {
+        if (typeof val === 'boolean') return 'checkbox';
+        if (typeof val === 'number') return 'number';
+        return 'text';
+    };
+
+    return (
+        <div className="w-full h-full flex flex-row overflow-hidden" style={{
+            '--bg-primary': 'var(--ds-surface-primary, #ffffff)',
+            '--bg-elevated': 'var(--ds-surface-secondary, #f8fafc)',
+            '--bg-surface': 'var(--ds-surface-tertiary, #f1f5f9)',
+            '--border-color': 'var(--ds-border-default, #e2e8f0)',
+            '--text-primary': 'var(--ds-text-primary, #0f172a)',
+            '--text-secondary': 'var(--ds-text-secondary, #64748b)',
+            '--brand-primary': 'var(--ds-accent-blue, #3b82f6)',
+            '--brand-primary-hover': 'var(--ds-accent-blue-hover, #2563eb)',
+        } as React.CSSProperties}>
+            
+            {/* Sidebar de Estructura */}
+            <div className="w-72 border-r border-[var(--border-color)] bg-[var(--bg-elevated)] flex flex-col h-full z-10 shadow-[2px_0_10px_rgba(0,0,0,0.02)]">
+                <div className="p-6 border-b border-[var(--border-color)] flex flex-col gap-4 bg-[var(--bg-primary)]">
+                    <div className="flex items-center gap-3">
+                        <div className="p-2 bg-[var(--brand-primary)]/10 rounded-xl">
+                            <DatabaseZap className="w-6 h-6 text-[var(--brand-primary)]" />
+                        </div>
+                        <div>
+                            <h2 className="font-extrabold text-[var(--text-primary)] tracking-tight text-lg leading-none">Data Studio</h2>
+                            <p className="text-[11px] font-medium text-[var(--text-secondary)] uppercase tracking-wider mt-1">Dataway Core</p>
+                        </div>
+                    </div>
+                    
+                    <select 
+                        value={activeConnector}
+                        onChange={(e) => setActiveConnector(e.target.value)}
+                        className="w-full bg-[var(--bg-surface)] border border-[var(--border-color)] text-[var(--text-primary)] text-sm font-bold rounded-lg px-3 py-2 outline-none cursor-pointer hover:border-[var(--brand-primary)]/50 focus:border-[var(--brand-primary)] focus:ring-2 focus:ring-[var(--brand-primary)]/20 transition-all shadow-sm"
+                    >
+                        {connectors.map(c => (
+                            <option key={c.id} value={c.id}>{c.name}</option>
+                        ))}
+                    </select>
+                </div>
+                
+                <div className="p-4 flex-1 overflow-y-auto w-full space-y-1.5 custom-scrollbar">
+                    <h3 className="text-xs font-bold text-[var(--text-secondary)] tracking-wider uppercase mb-3 px-2 flex items-center justify-between">
+                        Esquema Púbico
+                        <button onClick={fetchSchema} className="hover:text-[var(--text-primary)] transition-colors p-1 rounded-md hover:bg-[var(--bg-surface)]">
+                            <RefreshCw className="w-3 h-3" />
+                        </button>
+                    </h3>
+
+                    {isTablesLoading ? (
+                        <div className="space-y-2 px-2">
+                            {[1,2,3,4].map(skeleton => (
+                                <div key={skeleton} className="h-10 bg-[var(--bg-surface)] rounded-lg animate-pulse w-full"></div>
+                            ))}
+                        </div>
+                    ) : connectionError ? (
+                        <div className="p-4 mx-2 bg-red-50 text-red-600 rounded-xl border border-red-100 flex flex-col items-center text-center gap-2">
+                            <ServerCrash className="w-6 h-6" />
+                            <p className="text-sm font-semibold">Backend Offline</p>
+                            <p className="text-xs opacity-80">{connectionError}</p>
+                        </div>
+                    ) : tables.length === 0 ? (
+                        <div className="p-4 text-center text-[var(--text-secondary)] text-sm">
+                            No se descubrieron tablas vía /api/db/tables.
+                        </div>
+                    ) : (
+                        tables.map(table => (
+                            <button
+                                key={table}
+                                onClick={() => setActiveTable(table)}
+                                className={`w-full flex items-center justify-between px-3 py-2.5 rounded-xl text-sm font-semibold transition-all duration-200 group ${
+                                    activeTable === table 
+                                    ? 'bg-gradient-to-r from-[var(--brand-primary)] to-[var(--brand-primary-hover)] text-white shadow-md shadow-blue-500/20' 
+                                    : 'text-[var(--text-secondary)] hover:bg-[var(--bg-surface)] hover:text-[var(--text-primary)]'
+                                }`}
+                            >
+                                <div className="flex items-center gap-3">
+                                    <TableProperties className={`w-4 h-4 ${activeTable === table ? 'text-blue-100' : 'text-slate-400 group-hover:text-slate-600'}`} />
+                                    <span className="capitalize">{table}</span>
+                                </div>
+                                {activeTable === table && <ChevronRight className="w-4 h-4 opacity-70" />}
+                            </button>
+                        ))
+                    )}
+                </div>
+            </div>
+
+            {/* Panel Principal */}
+            <div className="flex-1 bg-[var(--bg-surface)] flex flex-col h-full min-w-0 relative">
+                {/* Header Superior */}
+                <header className="px-8 py-6 bg-[var(--bg-primary)] border-b border-[var(--border-color)] flex items-center justify-between sticky top-0 z-20 shadow-sm">
+                    <div className="flex flex-col">
+                        <div className="flex items-center gap-2 text-[var(--text-secondary)] text-xs font-bold uppercase tracking-wider mb-1">
+                            <Server className="w-3.5 h-3.5" />
+                            <span>{connectors.find(c => c.id === activeConnector)?.name} / {activeTable || '...'}</span>
+                        </div>
+                        <h1 className="text-3xl font-extrabold text-[var(--text-primary)] capitalize tracking-tight flex items-center gap-3">
+                            {activeTable || 'Selecciona un Recurso'}
+                            {isDataLoading && <Loader2 className="w-5 h-5 animate-spin text-[var(--brand-primary)]" />}
+                        </h1>
+                    </div>
+                    
+                    {activeTable && (
+                        <div className="flex gap-4 items-center">
+                            {/* Toggle Mode Segmented Control */}
+                            <div className="flex bg-[var(--bg-elevated)] border border-[var(--border-color)] rounded-lg p-1 shadow-sm h-[42px] items-center mr-2">
+                                <button onClick={() => setViewMode('data')}
+                                    className={`px-4 py-1.5 text-xs font-bold rounded-md transition-all duration-200 ${
+                                        viewMode === 'data'
+                                            ? 'bg-[var(--bg-primary)] text-[var(--text-primary)] shadow-sm border border-[var(--border-color)]'
+                                            : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)] border border-transparent'
+                                    }`}>
+                                    Registros
+                                </button>
+                                <button onClick={() => setViewMode('schema')}
+                                    className={`px-4 py-1.5 text-xs font-bold rounded-md transition-all duration-200 ${
+                                        viewMode === 'schema'
+                                            ? 'bg-[var(--bg-primary)] text-[var(--brand-primary)] shadow-sm border border-[var(--brand-primary)]/30'
+                                            : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)] border border-transparent'
+                                    }`}>
+                                    Estructura
+                                </button>
+                            </div>
+
+                            <div className="relative group">
+                                <Search className="w-4 h-4 text-[var(--text-secondary)] absolute left-3.5 top-1/2 -translate-y-1/2 group-focus-within:text-[var(--brand-primary)] transition-colors" />
+                                <input 
+                                    type="text"
+                                    placeholder={`Buscar en ${activeTable}...`}
+                                    value={searchTerm}
+                                    onChange={(e) => setSearchTerm(e.target.value)}
+                                    className="pl-10 pr-4 py-2.5 rounded-xl border border-[var(--border-color)] bg-[var(--bg-elevated)] text-[var(--text-primary)] text-sm font-medium outline-none focus:ring-2 focus:ring-[var(--brand-primary)]/20 focus:border-[var(--brand-primary)] transition-all w-72 shadow-inner"
+                                />
+                            </div>
+                            <div className="h-8 w-px bg-[var(--border-color)] mx-2"></div>
+                            <button 
+                                onClick={() => fetchTableData(activeTable)}
+                                disabled={isDataLoading}
+                                className="p-2.5 text-[var(--text-secondary)] hover:bg-[var(--bg-surface)] hover:text-[var(--text-primary)] rounded-xl transition-all disabled:opacity-50 border border-transparent hover:border-[var(--border-color)]"
+                                title="Recargar Data"
+                            >
+                                <RefreshCw className={`w-[18px] h-[18px] ${isDataLoading ? 'animate-spin' : ''}`} />
+                            </button>
+                            <button 
+                                onClick={openCreateModal}
+                                disabled={tables.length === 0}
+                                className="flex items-center gap-2 bg-[var(--brand-primary)] hover:bg-[var(--brand-primary-hover)] text-white px-5 py-2.5 rounded-xl font-bold text-sm shadow-lg shadow-[var(--brand-primary)]/25 transition-all active:scale-95 disabled:opacity-50 disabled:grayscale"
+                            >
+                                <Plus className="w-[18px] h-[18px]" />
+                                Insertar Fila
+                            </button>
+                        </div>
+                    )}
+                </header>
+
+                {/* Área de Grilla de Datos */}
+                <div className="flex-1 overflow-hidden p-6 relative flex flex-col">
+                    {!activeTable ? (
+                        <div className="m-auto flex flex-col items-center justify-center opacity-40">
+                            <LayoutGrid className="w-16 h-16 mb-4" />
+                            <h2 className="text-xl font-bold">Sin Datos Activos</h2>
+                            <p className="text-sm">Selecciona una tabla en el panel lateral.</p>
+                        </div>
+                    ) : (
+                        <div className="flex-1 bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-2xl shadow-sm overflow-hidden flex flex-col relative">
+                            {/* Pro Data Grid */}
+                            <div className="overflow-auto flex-1 custom-scrollbar">
+                                {viewMode === 'schema' ? (
+                                    <table className="w-full text-left text-sm whitespace-nowrap">
+                                        <thead className="bg-[var(--bg-elevated)] sticky top-0 z-10 shadow-[0_1px_2px_rgba(0,0,0,0.05)]">
+                                            <tr>
+                                                <th className="px-6 py-4 text-xs font-bold text-[var(--text-secondary)] uppercase tracking-wider">Columna</th>
+                                                <th className="px-6 py-4 text-xs font-bold text-[var(--text-secondary)] uppercase tracking-wider">Tipo de Dato</th>
+                                                <th className="px-6 py-4 text-xs font-bold text-[var(--text-secondary)] uppercase tracking-wider">Nulabilidad</th>
+                                                <th className="px-6 py-4 text-xs font-bold text-[var(--text-secondary)] uppercase tracking-wider">Valor por Defecto</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody className="divide-y divide-[var(--border-color)] text-[var(--text-primary)] font-medium">
+                                            {isSchemaLoading ? (
+                                                <tr>
+                                                    <td colSpan={4} className="h-48 text-center text-[var(--text-secondary)]">
+                                                        <div className="flex flex-col items-center gap-3">
+                                                            <Loader2 className="w-8 h-8 animate-spin text-[var(--brand-primary)]" />
+                                                            <span>Cargando esquema estructural...</span>
+                                                        </div>
+                                                    </td>
+                                                </tr>
+                                            ) : (
+                                                schemaData.map((col: any) => (
+                                                    <motion.tr 
+                                                        initial={{ opacity: 0 }}
+                                                        animate={{ opacity: 1 }}
+                                                        key={col.name}
+                                                        className="hover:bg-[var(--bg-surface)]/70 transition-colors"
+                                                    >
+                                                        <td className="px-6 py-3">
+                                                            <span className="font-bold text-[var(--text-primary)]">{col.name}</span>
+                                                        </td>
+                                                        <td className="px-6 py-3">
+                                                            <span className="font-mono text-[11px] text-blue-600 bg-blue-50 px-2 py-1 rounded-md">
+                                                                {col.type}
+                                                            </span>
+                                                        </td>
+                                                        <td className="px-6 py-3">
+                                                            {col.is_nullable === 'YES' 
+                                                                ? <span className="opacity-60 text-[11px] font-bold uppercase">Nullable</span>
+                                                                : <span className="text-red-600 bg-red-50 px-2 py-0.5 rounded text-[10px] font-bold uppercase">Not Null</span>
+                                                            }
+                                                        </td>
+                                                        <td className="px-6 py-3">
+                                                            {col.default_value ? (
+                                                                <span className="font-mono text-[11px] text-purple-600 bg-purple-50 px-2 py-1 rounded-md">
+                                                                    {col.default_value}
+                                                                </span>
+                                                            ) : <span className="text-gray-400 italic">None</span>}
+                                                        </td>
+                                                    </motion.tr>
+                                                ))
+                                            )}
+                                        </tbody>
+                                    </table>
+                                ) : (
+                                <table className="w-full text-left text-sm whitespace-nowrap">
+                                    <thead className="bg-[var(--bg-elevated)] sticky top-0 z-10 shadow-[0_1px_2px_rgba(0,0,0,0.05)]">
+                                        <tr>
+                                            {columns.map(col => (
+                                                <th 
+                                                    key={col} 
+                                                    onClick={() => handleSort(col)}
+                                                    className="px-6 py-4 cursor-pointer hover:bg-[var(--bg-surface)] transition-colors group select-none"
+                                                >
+                                                    <div className="flex items-center gap-2 text-xs font-bold text-[var(--text-secondary)] uppercase tracking-wider">
+                                                        {col}
+                                                        <ArrowUpDown className={`w-3.5 h-3.5 ${sortConfig?.key === col ? 'text-[var(--brand-primary)]' : 'opacity-0 group-hover:opacity-50 transition-opacity'}`} />
+                                                    </div>
+                                                </th>
+                                            ))}
+                                            <th className="px-6 py-4 w-24 sticky right-0 bg-[var(--bg-elevated)] backdrop-blur-md shadow-[-4px_0_10px_rgba(0,0,0,0.02)]">
+                                                <span className="sr-only">Actions</span>
+                                            </th>
+                                        </tr>
+                                    </thead>
+                                    <tbody className="divide-y divide-[var(--border-color)] text-[var(--text-primary)] font-medium">
+                                        {processedData.length === 0 ? (
+                                            <tr>
+                                                <td colSpan={columns.length + 1} className="h-48 text-center text-[var(--text-secondary)]">
+                                                    {isDataLoading ? (
+                                                        <div className="flex flex-col items-center gap-3">
+                                                            <Loader2 className="w-8 h-8 animate-spin text-[var(--brand-primary)]" />
+                                                            <span>Consultando {activeTable}...</span>
+                                                        </div>
+                                                    ) : (
+                                                        <div className="flex flex-col items-center gap-3 opacity-60">
+                                                            <Database className="w-10 h-10" />
+                                                            <span>La consulta retornó 0 filas.</span>
+                                                        </div>
+                                                    )}
+                                                </td>
+                                            </tr>
+                                        ) : (
+                                            processedData.map((row, i) => (
+                                                <motion.tr 
+                                                    initial={{ opacity: 0 }}
+                                                    animate={{ opacity: 1 }}
+                                                    transition={{ duration: 0.2, delay: Math.min(i * 0.02, 0.5) }}
+                                                    key={row.id || i}
+                                                    className="hover:bg-[var(--bg-surface)]/70 transition-colors group"
+                                                >
+                                                    {columns.map(col => {
+                                                        const val = row[col];
+                                                        const isObject = typeof val === 'object' && val !== null;
+                                                        const isBoolean = typeof val === 'boolean';
+                                                        
+                                                        return (
+                                                            <td key={col} className="px-6 py-3 max-w-[250px] truncate text-ellipsis">
+                                                                {isBoolean ? (
+                                                                    <span className={`px-2 py-1 rounded-md text-[10px] font-bold uppercase tracking-wider ${val ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>
+                                                                        {val ? 'TRUE' : 'FALSE'}
+                                                                    </span>
+                                                                ) : isObject ? (
+                                                                    <span className="font-mono text-[11px] text-emerald-600 bg-emerald-50 px-2 py-1 rounded-md">
+                                                                        {JSON.stringify(val)}
+                                                                    </span>
+                                                                ) : (
+                                                                    <span title={String(val)}>{val !== null && val !== undefined ? String(val) : <span className="text-gray-400 italic">null</span>}</span>
+                                                                )}
+                                                            </td>
+                                                        );
+                                                    })}
+                                                    <td className="px-6 py-3 text-right sticky right-0 bg-[var(--bg-primary)] group-hover:bg-[#f8fafc] transition-colors shadow-[-4px_0_10px_rgba(0,0,0,0.02)] border-l border-transparent group-hover:border-[var(--border-color)]">
+                                                        <div className="flex items-center justify-end gap-1 opacity-10 md:opacity-0 group-hover:opacity-100 transition-opacity">
+                                                            <button 
+                                                                onClick={() => openEditModal(row)} 
+                                                                className="p-1.5 hover:bg-blue-100 text-blue-600 rounded-md transition-colors tooltip-trigger"
+                                                                title="Editar Registro"
+                                                            >
+                                                                <Edit2 className="w-4 h-4" />
+                                                            </button>
+                                                            <button 
+                                                                onClick={() => handleDelete(row.id)} 
+                                                                className="p-1.5 hover:bg-red-100 text-red-600 rounded-md transition-colors tooltip-trigger"
+                                                                title="Eliminar Permanente"
+                                                            >
+                                                                <Trash2 className="w-4 h-4" />
+                                                            </button>
+                                                        </div>
+                                                    </td>
+                                                </motion.tr>
+                                            ))
+                                        )}
+                                    </tbody>
+                                </table>
+                                )}
+                            </div>
+                            
+                            {/* Footer del Grid */}
+                            <div className="px-6 py-3 border-t border-[var(--border-color)] bg-[var(--bg-elevated)] text-xs font-semibold text-[var(--text-secondary)] flex justify-between items-center z-10">
+                                <span>Total Records: {processedData.length}</span>
+                                <span className="uppercase tracking-wider">Macia Platform v2.0 - Core Gateway</span>
+                            </div>
+                        </div>
+                    )}
+                </div>
+            </div>
+
+            {/* Modal Glassmórfico de Edición/Creación Pro */}
+            <AnimatePresence>
+                {isFormOpen && (
+                    <motion.div 
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        exit={{ opacity: 0 }}
+                        className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-[var(--text-primary)]/40 backdrop-blur-md"
+                    >
+                        <motion.div 
+                            initial={{ scale: 0.95, opacity: 0, y: 20 }}
+                            animate={{ scale: 1, opacity: 1, y: 0 }}
+                            exit={{ scale: 0.95, opacity: 0, y: -20 }}
+                            transition={{ type: "spring", bounce: 0, duration: 0.3 }}
+                            className="bg-[var(--bg-primary)] border border-white/20 rounded-3xl shadow-[0_20px_60px_-10px_rgba(0,0,0,0.3)] w-full max-w-2xl overflow-hidden flex flex-col relative"
+                        >
+                            {/* Gradiente sutil en el header */}
+                            <div className="absolute top-0 left-0 w-full h-32 bg-gradient-to-br from-blue-500/10 to-purple-500/5 pointer-events-none"></div>
+
+                            <div className="px-8 py-5 border-b border-[var(--border-color)] flex justify-between items-center relative z-10 bg-[var(--bg-primary)]/80 backdrop-blur-lg">
+                                <div>
+                                    <h3 className="font-extrabold text-xl text-[var(--text-primary)] tracking-tight">
+                                        {isCreating ? 'Insertar Documento' : 'Modificar Documento'}
+                                    </h3>
+                                    <p className="text-xs text-[var(--text-secondary)] font-medium mt-0.5">
+                                        Tabla destino: <span className="uppercase tracking-wider bg-[var(--bg-surface)] px-1.5 py-0.5 rounded text-[var(--brand-primary)]">{activeTable}</span>
+                                    </p>
+                                </div>
+                                <button onClick={() => setIsFormOpen(false)} className="p-2 bg-[var(--bg-surface)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--border-color)] rounded-xl transition-all">
+                                    <X className="w-5 h-5" />
+                                </button>
+                            </div>
+
+                            <div className="p-8 space-y-5 max-h-[65vh] overflow-y-auto custom-scrollbar relative z-10">
+                                {editRecord && Object.keys(editRecord).map((key) => {
+                                    // Protect immutable fields based on Decido OS Postgres patterns
+                                    const isImmutable = (!isCreating && key === 'id') || key === 'created_at' || key === 'updated_at';
+                                    const val = editRecord[key];
+                                    const inferredType = inferInputType(val);
+
+                                    return (
+                                        <div key={key} className="flex flex-col gap-1.5">
+                                            <label className="text-[11px] font-bold text-[var(--text-secondary)] uppercase tracking-wider pl-1 flex justify-between">
+                                                {key}
+                                                {isImmutable && <span className="opacity-50 font-mono lowercase">auto-generated</span>}
+                                            </label>
+                                            
+                                            {isImmutable ? (
+                                                <input 
+                                                    disabled 
+                                                    value={val || 'Depende del Motor DB'} 
+                                                    className="w-full px-4 py-3 rounded-xl border border-[var(--border-color)] bg-[var(--bg-surface)] text-[var(--text-secondary)] font-mono text-xs cursor-not-allowed opacity-70" 
+                                                />
+                                            ) : typeof val === 'boolean' ? (
+                                                <select 
+                                                    value={String(val)} 
+                                                    onChange={e => setEditRecord({ ...editRecord, [key]: e.target.value === 'true' })}
+                                                    className="w-full px-4 py-3 rounded-xl border border-[var(--border-color)] bg-[var(--bg-primary)] text-[var(--text-primary)] focus:ring-2 focus:ring-[var(--brand-primary)]/20 focus:border-[var(--brand-primary)] text-sm font-medium outline-none transition-all cursor-pointer shadow-sm"
+                                                >
+                                                    <option value="true">Verdadero (TRUE)</option>
+                                                    <option value="false">Falso (FALSE)</option>
+                                                </select>
+                                            ) : typeof val === 'object' && val !== null ? (
+                                                <textarea
+                                                    rows={4}
+                                                    value={JSON.stringify(val, null, 2)}
+                                                    onChange={e => {
+                                                        try {
+                                                            const parsed = JSON.parse(e.target.value);
+                                                            setEditRecord({ ...editRecord, [key]: parsed });
+                                                        } catch (err) {
+                                                            // Provide a mechanism to handle invalid JSON edits later if needed,
+                                                            // but for now, just allow arbitrary text entry representing the JSON blob.
+                                                            setEditRecord({ ...editRecord, [key]: e.target.value });
+                                                        }
+                                                    }}
+                                                    className="w-full px-4 py-3 rounded-xl border border-[var(--border-color)] bg-[var(--bg-primary)] font-mono text-xs focus:ring-2 focus:ring-[var(--brand-primary)]/20 focus:border-[var(--brand-primary)] outline-none transition-all shadow-sm"
+                                                />
+                                            ) : (
+                                                <input 
+                                                    type={inferredType}
+                                                    value={val !== null ? val : ''}
+                                                    onChange={e => setEditRecord({ ...editRecord, [key]: inferredType === 'number' ? Number(e.target.value) : e.target.value })}
+                                                    className="w-full px-4 py-3 rounded-xl border border-[var(--border-color)] bg-[var(--bg-primary)] text-[var(--text-primary)] focus:ring-2 focus:ring-[var(--brand-primary)]/20 focus:border-[var(--brand-primary)] text-sm font-medium outline-none transition-all shadow-sm"
+                                                    placeholder={`Ingresar ${key}...`}
+                                                />
+                                            )}
+                                        </div>
+                                    )
+                                })}
+                            </div>
+
+                            <div className="px-8 py-5 border-t border-[var(--border-color)] bg-[var(--bg-surface)] flex justify-end gap-3 rounded-b-3xl relative z-10">
+                                <button 
+                                    onClick={() => setIsFormOpen(false)} 
+                                    className="px-5 py-2.5 rounded-xl text-sm font-bold text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--border-color)] transition-all"
+                                >
+                                    Descartar
+                                </button>
+                                <button 
+                                    onClick={() => handleSave(editRecord)} 
+                                    disabled={isSaving}
+                                    className="flex items-center gap-2 px-6 py-2.5 rounded-xl text-sm font-extrabold text-white bg-gradient-to-r from-[var(--brand-primary)] to-[var(--brand-primary-hover)] shadow-lg shadow-[var(--brand-primary)]/30 transition-all active:scale-95 disabled:opacity-70"
+                                >
+                                    {isSaving ? <Loader2 className="w-[18px] h-[18px] animate-spin" /> : <Check className="w-[18px] h-[18px]" />}
+                                    {isSaving ? 'Sincronizando...' : 'Confirmar Cambios'}
+                                </button>
+                            </div>
+                        </motion.div>
+                    </motion.div>
+                )}
+            </AnimatePresence>
+
+            <style>{`
+                .custom-scrollbar::-webkit-scrollbar {
+                    width: 6px;
+                    height: 6px;
+                }
+                .custom-scrollbar::-webkit-scrollbar-track {
+                    background: transparent;
+                }
+                .custom-scrollbar::-webkit-scrollbar-thumb {
+                    background: var(--border-color);
+                    border-radius: 10px;
+                }
+                .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+                    background: var(--text-secondary);
+                }
+            `}</style>
+        </div>
+    );
+};