feat(P2603): sistema de bitácoras web dtic-BITACORAs - React 18 + Node.js + PostgreSQL

dtic-BITACORAs/frontend/src/App.tsx

@@ -0,0 +1,223 @@
+import React, { useState, useEffect, useCallback } from 'react';
+
+const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:3002';
+
+interface Entrada {
+    id: number;
+    inicio: string;
+    fin: string | null;
+    descripcion: string;
+    estado: string;
+    modo: string;
+    es_ia: boolean;
+    nodo_nombre: string;
+    nodo_ip: string;
+}
+
+interface NodoGroup {
+    nodo: string;
+    ip: string;
+    entradas: Entrada[];
+}
+
+interface Bitacora {
+    id: number;
+    fecha: string;
+    resumen: string;
+    nodos: NodoGroup[];
+}
+
+interface Nodo {
+    id: number;
+    nombre: string;
+    ip: string;
+}
+
+function App() {
+    const [fecha, setFecha] = useState(new Date().toISOString().split('T')[0]);
+    const [bitacora, setBitacora] = useState<Bitacora | null>(null);
+    const [nodos, setNodos] = useState<Nodo[]>([]);
+    const [loading, setLoading] = useState(true);
+
+    // Form state
+    const [newInicio, setNewInicio] = useState('');
+    const [newFin, setNewFin] = useState('');
+    const [newDesc, setNewDesc] = useState('');
+    const [newEstado, setNewEstado] = useState('⏳');
+    const [newModo, setNewModo] = useState('P');
+    const [newNodoId, setNewNodoId] = useState('');
+    const [newEsIa, setNewEsIa] = useState(false);
+
+    const fetchBitacora = useCallback(async () => {
+        setLoading(true);
+        try {
+            const res = await fetch(`${API_URL}/api/bitacoras/${fecha}/completa`);
+            const data = await res.json();
+            setBitacora(data);
+        } catch (err) { console.error('Error:', err); }
+        setLoading(false);
+    }, [fecha]);
+
+    const fetchNodos = async () => {
+        try {
+            const res = await fetch(`${API_URL}/api/nodos`);
+            setNodos(await res.json());
+        } catch (err) { console.error('Error:', err); }
+    };
+
+    useEffect(() => { fetchBitacora(); }, [fetchBitacora]);
+    useEffect(() => { fetchNodos(); }, []);
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!bitacora || !newDesc || !newInicio || !newNodoId) return;
+        try {
+            await fetch(`${API_URL}/api/entradas`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    inicio: newInicio, fin: newFin || null, descripcion: newDesc,
+                    estado: newEstado, modo: newModo, es_ia: newEsIa,
+                    bitacora_id: bitacora.id, nodo_id: parseInt(newNodoId)
+                })
+            });
+            setNewDesc(''); setNewInicio(''); setNewFin('');
+            fetchBitacora();
+        } catch (err) { console.error('Error:', err); }
+    };
+
+    const handleDelete = async (id: number) => {
+        await fetch(`${API_URL}/api/entradas/${id}`, { method: 'DELETE' });
+        fetchBitacora();
+    };
+
+    const totalEntradas = bitacora?.nodos?.reduce((sum, n) => sum + n.entradas.length, 0) || 0;
+    const totalNodos = bitacora?.nodos?.length || 0;
+
+    return (
+        <div className="app">
+            <nav className="navbar">
+                <div className="navbar-brand">
+                    <i className="fas fa-book-open"></i>
+                    dtic-BITACORAs
+                    <span className="badge badge-gradient">v1.0</span>
+                </div>
+                <a href={`${API_URL}/api/bitacoras/${fecha}/export`} target="_blank" rel="noopener"
+                    className="btn btn-sm btn-primary">
+                    <i className="fas fa-file-export"></i> Exportar MD
+                </a>
+            </nav>
+
+            <main className="main">
+                {/* Date Selector */}
+                <div className="date-selector">
+                    <button className="btn btn-sm btn-primary" onClick={() => {
+                        const d = new Date(fecha); d.setDate(d.getDate() - 1); setFecha(d.toISOString().split('T')[0]);
+                    }}><i className="fas fa-chevron-left"></i></button>
+                    <input type="date" value={fecha} onChange={e => setFecha(e.target.value)} />
+                    <button className="btn btn-sm btn-primary" onClick={() => {
+                        const d = new Date(fecha); d.setDate(d.getDate() + 1); setFecha(d.toISOString().split('T')[0]);
+                    }}><i className="fas fa-chevron-right"></i></button>
+                </div>
+
+                {/* Stats */}
+                <div className="stats-bar">
+                    <div className="stat-card">
+                        <div className="stat-value">{totalEntradas}</div>
+                        <div className="stat-label">Entradas</div>
+                    </div>
+                    <div className="stat-card">
+                        <div className="stat-value">{totalNodos}</div>
+                        <div className="stat-label">Nodos Activos</div>
+                    </div>
+                    <div className="stat-card">
+                        <div className="stat-value">{bitacora?.nodos?.reduce((s, n) => s + n.entradas.filter(e => e.estado === '✅').length, 0) || 0}</div>
+                        <div className="stat-label">Completadas</div>
+                    </div>
+                    <div className="stat-card">
+                        <div className="stat-value">{bitacora?.nodos?.reduce((s, n) => s + n.entradas.filter(e => e.estado === '⏳').length, 0) || 0}</div>
+                        <div className="stat-label">En Proceso</div>
+                    </div>
+                </div>
+
+                {/* New Entry Form */}
+                <div className="card" style={{ marginBottom: '2rem' }}>
+                    <div className="card-header"><i className="fas fa-plus-circle"></i> Nueva Entrada</div>
+                    <form className="form-inline" onSubmit={handleSubmit}>
+                        <input type="time" className="input-time" value={newInicio} onChange={e => setNewInicio(e.target.value)} placeholder="I" required />
+                        <input type="time" className="input-time" value={newFin} onChange={e => setNewFin(e.target.value)} placeholder="F" />
+                        <input type="text" className="input-desc" value={newDesc} onChange={e => setNewDesc(e.target.value)} placeholder="Descripción..." required />
+                        <select value={newNodoId} onChange={e => setNewNodoId(e.target.value)} required>
+                            <option value="">Nodo...</option>
+                            {nodos.map(n => <option key={n.id} value={n.id}>{n.nombre}</option>)}
+                        </select>
+                        <select value={newEstado} onChange={e => setNewEstado(e.target.value)}>
+                            <option value="⏳">⏳</option><option value="✅">✅</option>
+                            <option value="⚠️">⚠️</option><option value="❌">❌</option><option value="👁️">👁️</option>
+                        </select>
+                        <select value={newModo} onChange={e => setNewModo(e.target.value)}>
+                            <option value="P">[P] Presencial</option><option value="R">[R] Remoto</option>
+                        </select>
+                        <label style={{ display: 'flex', alignItems: 'center', gap: '0.3rem', color: 'var(--text-secondary)', fontSize: '0.85rem' }}>
+                            <input type="checkbox" checked={newEsIa} onChange={e => setNewEsIa(e.target.checked)} /> IA
+                        </label>
+                        <button type="submit" className="btn btn-primary"><i className="fas fa-save"></i> Guardar</button>
+                    </form>
+                </div>
+
+                {/* Loading */}
+                {loading && <div style={{ textAlign: 'center', padding: '2rem', color: 'var(--text-muted)' }}><i className="fas fa-spinner fa-spin fa-2x"></i></div>}
+
+                {/* Entries by Node */}
+                {bitacora?.nodos?.map((nodoGroup, idx) => (
+                    <div key={idx} className="nodo-section card" style={{ marginBottom: '1.5rem' }}>
+                        <div className="nodo-title">
+                            <i className="fas fa-server"></i>
+                            {nodoGroup.nodo}
+                            {nodoGroup.ip && <span className="nodo-ip">({nodoGroup.ip})</span>}
+                            <span className="badge badge-gradient" style={{ marginLeft: 'auto' }}>{nodoGroup.entradas.length}</span>
+                        </div>
+                        <table className="table-ifde">
+                            <thead>
+                                <tr>
+                                    <th className="col-time">I</th>
+                                    <th className="col-time">F</th>
+                                    <th>Descripción</th>
+                                    <th className="col-status">E</th>
+                                    <th style={{ width: '40px' }}></th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {nodoGroup.entradas.map(e => (
+                                    <tr key={e.id}>
+                                        <td className="col-time">{e.inicio?.substring(0, 5)}</td>
+                                        <td className="col-time">{e.fin ? e.fin.substring(0, 5) : '—'}</td>
+                                        <td className="col-desc">
+                                            {e.es_ia && <span className="ia-tag">IA</span>}
+                                            {e.descripcion}
+                                        </td>
+                                        <td className="col-status">[{e.modo}] {e.estado}</td>
+                                        <td>
+                                            <button className="btn btn-sm btn-danger" onClick={() => handleDelete(e.id)} title="Eliminar">
+                                                <i className="fas fa-trash-alt"></i>
+                                            </button>
+                                        </td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+                ))}
+
+                {!loading && totalEntradas === 0 && (
+                    <div style={{ textAlign: 'center', padding: '3rem', color: 'var(--text-muted)' }}>
+                        <i className="fas fa-inbox fa-3x" style={{ marginBottom: '1rem', display: 'block' }}></i>
+                        Sin entradas para esta fecha. ¡Creá la primera!
+                    </div>
+                )}
+            </main>
+        </div>
+    );
+}
+
+export default App;

dtic-BITACORAs/frontend/src/index.css

@@ -0,0 +1,242 @@
+/* dtic-BITACORAs — Estética del Dashboard P2601 */
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+:root {
+  --primary: #667eea;
+  --secondary: #764ba2;
+  --gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  --success: #10b981;
+  --warning: #f59e0b;
+  --danger: #ef4444;
+  --info: #3b82f6;
+  --bg: #0f172a;
+  --bg-card: #1e293b;
+  --bg-card-hover: #334155;
+  --bg-input: #1e293b;
+  --text: #f1f5f9;
+  --text-secondary: #94a3b8;
+  --text-muted: #64748b;
+  --border: #334155;
+  --radius: 12px;
+  --shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  min-height: 100vh;
+}
+
+/* Layout */
+.app { min-height: 100vh; display: flex; flex-direction: column; }
+
+.navbar {
+  background: rgba(15, 23, 42, 0.8);
+  backdrop-filter: blur(20px);
+  border-bottom: 1px solid var(--border);
+  padding: 1rem 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.navbar-brand {
+  font-size: 1.4rem;
+  font-weight: 700;
+  background: var(--gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.navbar-brand i { -webkit-text-fill-color: initial; color: var(--primary); }
+
+.badge {
+  display: inline-block;
+  padding: 0.2rem 0.6rem;
+  border-radius: 20px;
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+}
+
+.badge-gradient { background: var(--gradient); color: white; }
+
+/* Main content */
+.main { flex: 1; padding: 2rem; max-width: 1400px; margin: 0 auto; width: 100%; }
+
+/* Cards */
+.card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1.5rem;
+  transition: var(--transition);
+  animation: fadeIn 0.5s ease-out;
+}
+
+.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--primary); }
+
+.card-header {
+  background: var(--gradient);
+  color: white;
+  padding: 1rem 1.5rem;
+  border-radius: var(--radius) var(--radius) 0 0;
+  margin: -1.5rem -1.5rem 1.5rem;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+/* Table I-F-D-E */
+.table-ifde { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
+.table-ifde th {
+  background: rgba(102, 126, 234, 0.15);
+  color: var(--primary);
+  padding: 0.75rem 1rem;
+  text-align: left;
+  font-weight: 600;
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  border-bottom: 2px solid var(--border);
+}
+.table-ifde td {
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--border);
+  vertical-align: top;
+}
+.table-ifde tr:hover td { background: rgba(102, 126, 234, 0.05); }
+.table-ifde .col-time { width: 60px; font-family: 'JetBrains Mono', monospace; color: var(--text-secondary); font-size: 0.85rem; }
+.table-ifde .col-status { width: 80px; text-align: center; }
+.table-ifde .col-desc { color: var(--text); }
+.table-ifde .ia-tag {
+  background: rgba(102, 126, 234, 0.2);
+  color: var(--primary);
+  padding: 0.1rem 0.4rem;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  margin-right: 0.3rem;
+}
+
+/* Nodo section */
+.nodo-section { margin-bottom: 2rem; }
+.nodo-title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 2px solid var(--border);
+}
+.nodo-title i { color: var(--primary); }
+.nodo-ip { color: var(--text-muted); font-size: 0.8rem; font-weight: 400; }
+
+/* Form inline */
+.form-inline { display: flex; gap: 0.5rem; align-items: center; padding: 1rem; background: rgba(102, 126, 234, 0.05); border-radius: var(--radius); margin-top: 1rem; flex-wrap: wrap; }
+.form-inline input, .form-inline select {
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  color: var(--text);
+  padding: 0.5rem 0.75rem;
+  border-radius: 8px;
+  font-size: 0.85rem;
+  font-family: inherit;
+  transition: var(--transition);
+}
+.form-inline input:focus, .form-inline select:focus {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
+}
+.form-inline .input-time { width: 80px; }
+.form-inline .input-desc { flex: 1; min-width: 200px; }
+
+/* Buttons */
+.btn {
+  padding: 0.5rem 1rem;
+  border-radius: 8px;
+  border: none;
+  font-weight: 500;
+  cursor: pointer;
+  transition: var(--transition);
+  font-size: 0.85rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+}
+.btn:hover { transform: translateY(-1px); }
+.btn-primary { background: var(--gradient); color: white; }
+.btn-primary:hover { box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); }
+.btn-sm { padding: 0.3rem 0.6rem; font-size: 0.75rem; }
+.btn-danger { background: var(--danger); color: white; }
+.btn-success { background: var(--success); color: white; }
+
+/* Date selector */
+.date-selector {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 2rem;
+}
+.date-selector input[type="date"] {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  color: var(--text);
+  padding: 0.6rem 1rem;
+  border-radius: 8px;
+  font-size: 1rem;
+  font-family: inherit;
+}
+.date-selector input[type="date"]:focus {
+  outline: none;
+  border-color: var(--primary);
+}
+
+/* Stats bar */
+.stats-bar { display: flex; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; }
+.stat-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1rem 1.5rem;
+  flex: 1;
+  min-width: 150px;
+  text-align: center;
+  transition: var(--transition);
+}
+.stat-card:hover { border-color: var(--primary); }
+.stat-value { font-size: 2rem; font-weight: 700; background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
+.stat-label { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.3rem; text-transform: uppercase; letter-spacing: 0.05em; }
+
+/* Animations */
+@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+
+/* Scrollbar */
+::-webkit-scrollbar { width: 8px; }
+::-webkit-scrollbar-track { background: var(--bg); }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
+::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
+
+/* Responsive */
+@media (max-width: 768px) {
+  .main { padding: 1rem; }
+  .navbar { padding: 0.75rem 1rem; }
+  .stats-bar { flex-direction: column; }
+  .form-inline { flex-direction: column; }
+  .form-inline .input-desc { min-width: 100%; }
+}

dtic-BITACORAs/frontend/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>
+);