feat(P2603): sistema de bitácoras web dtic-BITACORAs - React 18 + Node.js + PostgreSQL
This commit is contained in:
Ricardo Monla
@@ -0,0 +1,7 @@
|
||||
FROM node:18-alpine
|
||||
WORKDIR /app
|
||||
COPY package*.json ./
|
||||
RUN npm install
|
||||
COPY . .
|
||||
EXPOSE 3001
|
||||
CMD ["npm", "run", "dev"]
|
||||
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "dtic-bitacoras-api",
|
||||
"version": "1.0.0",
|
||||
"description": "API REST para dtic-BITACORAs",
|
||||
"main": "src/server.js",
|
||||
"scripts": {
|
||||
"start": "node src/server.js",
|
||||
"dev": "nodemon src/server.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"cors": "^2.8.5",
|
||||
"express": "^4.18.2",
|
||||
"helmet": "^7.1.0",
|
||||
"pg": "^8.11.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"nodemon": "^3.0.2"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
module.exports = (pool) => {
|
||||
const router = require('express').Router();
|
||||
|
||||
// GET /api/bitacoras — Listar bitácoras (opcionalmente por fecha)
|
||||
router.get('/', async (req, res) => {
|
||||
const { fecha } = req.query;
|
||||
if (fecha) {
|
||||
const { rows } = await pool.query('SELECT * FROM bitacoras.bitacoras WHERE fecha = $1', [fecha]);
|
||||
if (rows.length === 0) {
|
||||
// Auto-crear bitácora del día
|
||||
const insert = await pool.query(
|
||||
'INSERT INTO bitacoras.bitacoras (fecha) VALUES ($1) RETURNING *', [fecha]
|
||||
);
|
||||
return res.json(insert.rows[0]);
|
||||
}
|
||||
return res.json(rows[0]);
|
||||
}
|
||||
const { rows } = await pool.query('SELECT * FROM bitacoras.bitacoras ORDER BY fecha DESC LIMIT 30');
|
||||
res.json(rows);
|
||||
});
|
||||
|
||||
// GET /api/bitacoras/:fecha/completa — Bitácora completa con entradas agrupadas por nodo
|
||||
router.get('/:fecha/completa', async (req, res) => {
|
||||
const { fecha } = req.params;
|
||||
|
||||
// Obtener o crear bitácora
|
||||
let bitacora;
|
||||
const bResult = await pool.query('SELECT * FROM bitacoras.bitacoras WHERE fecha = $1', [fecha]);
|
||||
if (bResult.rows.length === 0) {
|
||||
const insert = await pool.query('INSERT INTO bitacoras.bitacoras (fecha) VALUES ($1) RETURNING *', [fecha]);
|
||||
bitacora = insert.rows[0];
|
||||
} else {
|
||||
bitacora = bResult.rows[0];
|
||||
}
|
||||
|
||||
// Obtener entradas con datos del nodo
|
||||
const { rows: entradas } = await pool.query(`
|
||||
SELECT e.*, n.nombre as nodo_nombre, n.ip as nodo_ip
|
||||
FROM bitacoras.entradas e
|
||||
LEFT JOIN bitacoras.nodos n ON e.nodo_id = n.id
|
||||
WHERE e.bitacora_id = $1
|
||||
ORDER BY e.inicio DESC
|
||||
`, [bitacora.id]);
|
||||
|
||||
// Agrupar por nodo
|
||||
const porNodo = {};
|
||||
entradas.forEach(e => {
|
||||
const nodo = e.nodo_nombre || 'sin-nodo';
|
||||
if (!porNodo[nodo]) porNodo[nodo] = { nodo: nodo, ip: e.nodo_ip, entradas: [] };
|
||||
porNodo[nodo].entradas.push(e);
|
||||
});
|
||||
|
||||
res.json({ ...bitacora, nodos: Object.values(porNodo) });
|
||||
});
|
||||
|
||||
// GET /api/bitacoras/:fecha/export — Exportar a Markdown
|
||||
router.get('/:fecha/export', async (req, res) => {
|
||||
const { fecha } = req.params;
|
||||
const bResult = await pool.query('SELECT * FROM bitacoras.bitacoras WHERE fecha = $1', [fecha]);
|
||||
if (bResult.rows.length === 0) return res.status(404).json({ error: 'Bitácora no encontrada' });
|
||||
|
||||
const bitacora = bResult.rows[0];
|
||||
const { rows: entradas } = await pool.query(`
|
||||
SELECT e.*, n.nombre as nodo_nombre
|
||||
FROM bitacoras.entradas e
|
||||
LEFT JOIN bitacoras.nodos n ON e.nodo_id = n.id
|
||||
WHERE e.bitacora_id = $1
|
||||
ORDER BY n.nombre, e.inicio DESC
|
||||
`, [bitacora.id]);
|
||||
|
||||
// Generar Markdown compatible con ADN
|
||||
const [y, m, d] = fecha.split('-');
|
||||
let md = `# Bitácora de Operaciones - ${d}/${m}/${y}\n\n`;
|
||||
md += `## 📂 Actividades Detalladas\n\n`;
|
||||
|
||||
const porNodo = {};
|
||||
entradas.forEach(e => {
|
||||
const nodo = e.nodo_nombre || 'sin-nodo';
|
||||
if (!porNodo[nodo]) porNodo[nodo] = [];
|
||||
porNodo[nodo].push(e);
|
||||
});
|
||||
|
||||
Object.entries(porNodo).forEach(([nodo, entries]) => {
|
||||
md += `### ${nodo}\n\n`;
|
||||
md += `| I | F | Descripción | E |\n`;
|
||||
md += `| :--- | :--- | :--- | :--- |\n`;
|
||||
entries.forEach(e => {
|
||||
const inicio = e.inicio ? e.inicio.substring(0, 5) : '-';
|
||||
const fin = e.fin ? e.fin.substring(0, 5) : '-';
|
||||
const ia = e.es_ia ? '(IA) ' : '';
|
||||
const estado = `[${e.modo}] ${e.estado}`;
|
||||
md += `| ${inicio} | ${fin} | ${ia}${e.descripcion} | ${estado} |\n`;
|
||||
});
|
||||
md += '\n';
|
||||
});
|
||||
|
||||
res.set('Content-Type', 'text/markdown');
|
||||
res.send(md);
|
||||
});
|
||||
|
||||
return router;
|
||||
};
|
||||
@@ -0,0 +1,46 @@
|
||||
module.exports = (pool) => {
|
||||
const router = require('express').Router();
|
||||
|
||||
// GET /api/entradas — Listar entradas (filtro por bitacora_id o nodo_id)
|
||||
router.get('/', async (req, res) => {
|
||||
const { bitacora_id, nodo_id } = req.query;
|
||||
let query = 'SELECT e.*, n.nombre as nodo_nombre FROM bitacoras.entradas e LEFT JOIN bitacoras.nodos n ON e.nodo_id = n.id WHERE 1=1';
|
||||
const params = [];
|
||||
if (bitacora_id) { params.push(bitacora_id); query += ` AND e.bitacora_id = $${params.length}`; }
|
||||
if (nodo_id) { params.push(nodo_id); query += ` AND e.nodo_id = $${params.length}`; }
|
||||
query += ' ORDER BY e.inicio DESC';
|
||||
const { rows } = await pool.query(query, params);
|
||||
res.json(rows);
|
||||
});
|
||||
|
||||
// POST /api/entradas — Crear entrada
|
||||
router.post('/', async (req, res) => {
|
||||
const { inicio, fin, descripcion, estado, modo, es_ia, bitacora_id, nodo_id } = req.body;
|
||||
const { rows } = await pool.query(`
|
||||
INSERT INTO bitacoras.entradas (inicio, fin, descripcion, estado, modo, es_ia, bitacora_id, nodo_id)
|
||||
VALUES ($1, $2, $3, $4, $5, $6, $7, $8) RETURNING *
|
||||
`, [inicio, fin || null, descripcion, estado || '⏳', modo || 'P', es_ia || false, bitacora_id, nodo_id]);
|
||||
res.status(201).json(rows[0]);
|
||||
});
|
||||
|
||||
// PUT /api/entradas/:id — Actualizar entrada
|
||||
router.put('/:id', async (req, res) => {
|
||||
const { id } = req.params;
|
||||
const { inicio, fin, descripcion, estado, modo, es_ia } = req.body;
|
||||
const { rows } = await pool.query(`
|
||||
UPDATE bitacoras.entradas SET inicio=$1, fin=$2, descripcion=$3, estado=$4, modo=$5, es_ia=$6
|
||||
WHERE id=$7 RETURNING *
|
||||
`, [inicio, fin, descripcion, estado, modo, es_ia, id]);
|
||||
if (rows.length === 0) return res.status(404).json({ error: 'Entrada no encontrada' });
|
||||
res.json(rows[0]);
|
||||
});
|
||||
|
||||
// DELETE /api/entradas/:id — Eliminar entrada
|
||||
router.delete('/:id', async (req, res) => {
|
||||
const { rowCount } = await pool.query('DELETE FROM bitacoras.entradas WHERE id = $1', [req.params.id]);
|
||||
if (rowCount === 0) return res.status(404).json({ error: 'Entrada no encontrada' });
|
||||
res.json({ message: 'Entrada eliminada' });
|
||||
});
|
||||
|
||||
return router;
|
||||
};
|
||||
@@ -0,0 +1,21 @@
|
||||
module.exports = (pool) => {
|
||||
const router = require('express').Router();
|
||||
|
||||
// GET /api/nodos — Listar todos los nodos
|
||||
router.get('/', async (req, res) => {
|
||||
const { rows } = await pool.query('SELECT * FROM bitacoras.nodos WHERE activo = true ORDER BY nombre');
|
||||
res.json(rows);
|
||||
});
|
||||
|
||||
// POST /api/nodos — Crear nodo
|
||||
router.post('/', async (req, res) => {
|
||||
const { nombre, ip, tipo, descripcion } = req.body;
|
||||
const { rows } = await pool.query(
|
||||
'INSERT INTO bitacoras.nodos (nombre, ip, tipo, descripcion) VALUES ($1, $2, $3, $4) RETURNING *',
|
||||
[nombre, ip, tipo, descripcion]
|
||||
);
|
||||
res.status(201).json(rows[0]);
|
||||
});
|
||||
|
||||
return router;
|
||||
};
|
||||
@@ -0,0 +1,40 @@
|
||||
const express = require('express');
|
||||
const cors = require('cors');
|
||||
const helmet = require('helmet');
|
||||
const { Pool } = require('pg');
|
||||
|
||||
const app = express();
|
||||
const PORT = process.env.PORT || 3001;
|
||||
|
||||
// Middleware
|
||||
app.use(helmet());
|
||||
app.use(cors({ origin: process.env.CORS_ORIGIN || '*' }));
|
||||
app.use(express.json());
|
||||
|
||||
// Database pool
|
||||
const pool = new Pool({ connectionString: process.env.DATABASE_URL });
|
||||
|
||||
// Health check
|
||||
app.get('/health', async (req, res) => {
|
||||
try {
|
||||
await pool.query('SELECT 1');
|
||||
res.json({ status: 'ok', timestamp: new Date().toISOString() });
|
||||
} catch (err) {
|
||||
res.status(500).json({ status: 'error', message: err.message });
|
||||
}
|
||||
});
|
||||
|
||||
// Routes
|
||||
app.use('/api/nodos', require('./routes/nodos')(pool));
|
||||
app.use('/api/bitacoras', require('./routes/bitacoras')(pool));
|
||||
app.use('/api/entradas', require('./routes/entradas')(pool));
|
||||
|
||||
// Error handler
|
||||
app.use((err, req, res, next) => {
|
||||
console.error('Error:', err.message);
|
||||
res.status(500).json({ error: err.message });
|
||||
});
|
||||
|
||||
app.listen(PORT, () => {
|
||||
console.log(`🔐 dtic-BITACORAs API corriendo en puerto ${PORT}`);
|
||||
});
|
||||
@@ -0,0 +1,47 @@
|
||||
services:
|
||||
postgres:
|
||||
image: postgres:15-alpine
|
||||
environment:
|
||||
POSTGRES_USER: dtic_user
|
||||
POSTGRES_PASSWORD: dtic_pass_2026
|
||||
POSTGRES_DB: dtic_bitacoras
|
||||
ports:
|
||||
- "5433:5432"
|
||||
volumes:
|
||||
- postgres_data:/var/lib/postgresql/data
|
||||
- ./docker/init.sql:/docker-entrypoint-initdb.d/init.sql
|
||||
healthcheck:
|
||||
test: ["CMD-SHELL", "pg_isready -U dtic_user -d dtic_bitacoras"]
|
||||
interval: 5s
|
||||
timeout: 5s
|
||||
retries: 5
|
||||
|
||||
api:
|
||||
build: ./backend
|
||||
ports:
|
||||
- "3002:3001"
|
||||
environment:
|
||||
NODE_ENV: development
|
||||
PORT: 3001
|
||||
DATABASE_URL: postgres://dtic_user:dtic_pass_2026@postgres:5432/dtic_bitacoras
|
||||
JWT_SECRET: dtic_bitacoras_secret_2026
|
||||
CORS_ORIGIN: "*"
|
||||
depends_on:
|
||||
postgres:
|
||||
condition: service_healthy
|
||||
volumes:
|
||||
- ./backend/src:/app/src
|
||||
|
||||
frontend:
|
||||
build: ./frontend
|
||||
ports:
|
||||
- "5174:5173"
|
||||
environment:
|
||||
VITE_API_URL: http://localhost:3002
|
||||
depends_on:
|
||||
- api
|
||||
volumes:
|
||||
- ./frontend/src:/app/src
|
||||
|
||||
volumes:
|
||||
postgres_data:
|
||||
@@ -0,0 +1,91 @@
|
||||
-- dtic-BITACORAs - Esquema de Base de Datos
|
||||
-- Formato I-F-D-E (Inicio, Fin, Descripción, Estado)
|
||||
|
||||
CREATE SCHEMA IF NOT EXISTS bitacoras;
|
||||
|
||||
-- Nodos del sistema (servidores, VMs, PCs)
|
||||
CREATE TABLE bitacoras.nodos (
|
||||
id SERIAL PRIMARY KEY,
|
||||
nombre VARCHAR(50) NOT NULL UNIQUE,
|
||||
ip VARCHAR(45),
|
||||
tipo VARCHAR(20) DEFAULT 'servidor',
|
||||
descripcion TEXT,
|
||||
activo BOOLEAN DEFAULT true,
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
||||
);
|
||||
|
||||
-- Bitácoras diarias
|
||||
CREATE TABLE bitacoras.bitacoras (
|
||||
id SERIAL PRIMARY KEY,
|
||||
fecha DATE NOT NULL UNIQUE,
|
||||
resumen TEXT,
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
||||
);
|
||||
|
||||
-- Temas (agrupadores de entradas por nodo)
|
||||
CREATE TABLE bitacoras.temas (
|
||||
id SERIAL PRIMARY KEY,
|
||||
id_tema VARCHAR(20) NOT NULL,
|
||||
titulo VARCHAR(200) NOT NULL,
|
||||
estado VARCHAR(10) DEFAULT '⏳',
|
||||
descripcion TEXT,
|
||||
bitacora_id INTEGER REFERENCES bitacoras.bitacoras(id) ON DELETE CASCADE,
|
||||
nodo_id INTEGER REFERENCES bitacoras.nodos(id),
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
||||
);
|
||||
|
||||
-- Entradas cronológicas (formato I-F-D-E)
|
||||
CREATE TABLE bitacoras.entradas (
|
||||
id SERIAL PRIMARY KEY,
|
||||
inicio TIME NOT NULL,
|
||||
fin TIME,
|
||||
descripcion TEXT NOT NULL,
|
||||
estado VARCHAR(10) DEFAULT '⏳',
|
||||
modo CHAR(1) DEFAULT 'P' CHECK (modo IN ('P', 'R')),
|
||||
es_ia BOOLEAN DEFAULT false,
|
||||
tema_id INTEGER REFERENCES bitacoras.temas(id) ON DELETE CASCADE,
|
||||
bitacora_id INTEGER REFERENCES bitacoras.bitacoras(id) ON DELETE CASCADE,
|
||||
nodo_id INTEGER REFERENCES bitacoras.nodos(id),
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
||||
);
|
||||
|
||||
-- Índices
|
||||
CREATE INDEX idx_bitacoras_fecha ON bitacoras.bitacoras(fecha);
|
||||
CREATE INDEX idx_entradas_bitacora ON bitacoras.entradas(bitacora_id);
|
||||
CREATE INDEX idx_entradas_nodo ON bitacoras.entradas(nodo_id);
|
||||
CREATE INDEX idx_temas_bitacora ON bitacoras.temas(bitacora_id);
|
||||
|
||||
-- Trigger para updated_at
|
||||
CREATE OR REPLACE FUNCTION bitacoras.update_timestamp()
|
||||
RETURNS TRIGGER AS $$
|
||||
BEGIN
|
||||
NEW.updated_at = CURRENT_TIMESTAMP;
|
||||
RETURN NEW;
|
||||
END;
|
||||
$$ LANGUAGE plpgsql;
|
||||
|
||||
CREATE TRIGGER trg_nodos_updated BEFORE UPDATE ON bitacoras.nodos
|
||||
FOR EACH ROW EXECUTE FUNCTION bitacoras.update_timestamp();
|
||||
CREATE TRIGGER trg_bitacoras_updated BEFORE UPDATE ON bitacoras.bitacoras
|
||||
FOR EACH ROW EXECUTE FUNCTION bitacoras.update_timestamp();
|
||||
CREATE TRIGGER trg_temas_updated BEFORE UPDATE ON bitacoras.temas
|
||||
FOR EACH ROW EXECUTE FUNCTION bitacoras.update_timestamp();
|
||||
CREATE TRIGGER trg_entradas_updated BEFORE UPDATE ON bitacoras.entradas
|
||||
FOR EACH ROW EXECUTE FUNCTION bitacoras.update_timestamp();
|
||||
|
||||
-- Datos semilla: Nodos del proyecto
|
||||
INSERT INTO bitacoras.nodos (nombre, ip, tipo, descripcion) VALUES
|
||||
('srv-ns8', '10.0.10.8', 'servidor', 'Nodo central de gestión, GIT y Dashboard'),
|
||||
('srv-dasu', '10.0.10.205', 'hipervisor', 'Hipervisor Proxmox VE (DASUTEN)'),
|
||||
('dc-dasuten', '10.0.100.10', 'vm', 'Controlador de Dominio AD DS + DNS'),
|
||||
('sql-dasuten', '10.0.100.11', 'vm', 'Motor SQL Server 2019 Core'),
|
||||
('pcv-dasu0', '10.0.100.12', 'vm', 'VM de pruebas Win 10 LTSC'),
|
||||
('pc-dasu0', NULL, 'pc', 'PC física cliente oficina DASUTeN'),
|
||||
('srv-pmox1', '10.0.10.201', 'hipervisor', 'Pool master Proxmox'),
|
||||
('srv-pmox2', '10.0.10.202', 'hipervisor', 'Nodo Proxmox secundario'),
|
||||
('srv-pmox3', '10.0.10.203', 'hipervisor', 'Nodo Proxmox terciario (64GB RAM)'),
|
||||
('srv-xen1', '10.0.10.23', 'hipervisor', 'Citrix XenServer 7.0 (Legacy)');
|
||||
@@ -0,0 +1,7 @@
|
||||
FROM node:18-alpine
|
||||
WORKDIR /app
|
||||
COPY package*.json ./
|
||||
RUN npm install
|
||||
COPY . .
|
||||
EXPOSE 5173
|
||||
CMD ["npm", "run", "dev"]
|
||||
@@ -0,0 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="dtic-BITACORAs - Sistema de Bitácoras de Operaciones DTIC UTNLR" />
|
||||
<title>dtic-BITACORAs | DTIC UTNLR</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"name": "dtic-bitacoras-frontend",
|
||||
"version": "1.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite --host",
|
||||
"build": "tsc && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.2.43",
|
||||
"@types/react-dom": "^18.2.17",
|
||||
"@vitejs/plugin-react": "^4.2.1",
|
||||
"typescript": "^5.2.2",
|
||||
"vite": "^5.1.0"
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
@@ -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%; }
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": [
|
||||
"ES2020",
|
||||
"DOM",
|
||||
"DOM.Iterable"
|
||||
],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
"strict": true,
|
||||
"noUnusedLocals": false,
|
||||
"noUnusedParameters": false,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": [
|
||||
"src"
|
||||
],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.node.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"skipLibCheck": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": [
|
||||
"vite.config.ts"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
server: { host: true, port: 5173 },
|
||||
define: { 'import.meta.env.VERSION': JSON.stringify(require('./package.json').version) }
|
||||
});
|
||||
Reference in New Issue
Block a user