docs: armonización masiva de bitácoras, categorización de nodos y diagnóstico srv-dasu

servicios/bitacoras/frontend/src/pages/Estadoproyecto.tsx

@@ -1,4 +1,67 @@
+import React from 'react';
+
+interface Milestone {
+  id: string;
+  title: string;
+  description: string;
+  status: 'completed' | 'in_progress' | 'pending';
+  date?: string;
+  icon: string;
+}
+
+const milestones: Milestone[] = [
+  {
+    id: 'DIGI01',
+    title: 'Gestión Clases POSG.EMIA',
+    description: 'Descarga, upload a YouTube y difusión de grabaciones.',
+    status: 'completed',
+    date: '2026-03-02',
+    icon: 'fas fa-video'
+  },
+  {
+    id: 'S01',
+    title: 'Estandarización de Recursos (Raíz)',
+    description: 'Unificación de dtic-NOTAs y dtic-DIGIs en la raíz del proyecto.',
+    status: 'completed',
+    date: '2026-03-03',
+    icon: 'fas fa-folder-tree'
+  },
+  {
+    id: 'S02',
+    title: 'Unificación dtic-BKPs v6.0',
+    description: 'Consolidación de herramientas de backup y jubilación de ns8-bkps.',
+    status: 'completed',
+    date: '2026-03-03',
+    icon: 'fas fa-database'
+  },
+  {
+    id: 'P2601',
+    title: 'Proyecto DASUTEN - VM sql-dasuten',
+    description: 'Instalación de motor SQL, restauración de DB y software de gestión.',
+    status: 'in_progress',
+    icon: 'fas fa-server'
+  },
+  {
+    id: 'P2602',
+    title: 'Proyecto Backups DTIC',
+    description: 'Automatización y hardening de copias de seguridad remotas.',
+    status: 'pending',
+    icon: 'fas fa-shield-halved'
+  }
+];
+
 const Estadoproyecto = () => {
+  const getStatusBadge = (status: Milestone['status']) => {
+    switch (status) {
+      case 'completed':
+        return <span className="badge bg-success"><i className="fas fa-check-circle me-1"></i>Completado</span>;
+      case 'in_progress':
+        return <span className="badge bg-primary"><i className="fas fa-spinner fa-spin me-1"></i>En Progreso</span>;
+      default:
+        return <span className="badge bg-secondary"><i className="fas fa-clock me-1"></i>Pendiente</span>;
+    }
+  };
+
   return (
     <div className="container mt-4">
       {/* Header */}
@@ -8,24 +71,77 @@ const Estadoproyecto = () => {
             <i className="fas fa-project-diagram fa-2x text-primary me-3"></i>
             <div>
               <h1 className="h3 mb-0">Estado del Proyecto</h1>
-              <p className="text-muted mb-0">Monitorea el estado general de los proyectos</p>
+              <p className="text-muted mb-0">Hoja de ruta y seguimiento de hitos del DTIC</p>
             </div>
           </div>
         </div>
       </div>
 
       <div className="row">
-        <div className="col-12">
+        {/* Resumen de Progreso */}
+        <div className="col-lg-4 mb-4">
+          <div className="card h-100">
+            <div className="card-header">
+              <i className="fas fa-tachometer-alt me-2"></i>Resumen General
+            </div>
+            <div className="card-body">
+              <div className="mb-4">
+                <label className="form-label d-flex justify-content-between">
+                  <span>Progreso de Etapa Actual</span>
+                  <span>65%</span>
+                </label>
+                <div className="progress" style={{ height: '10px' }}>
+                  <div className="progress-bar bg-primary" role="progressbar" style={{ width: '65%' }}></div>
+                </div>
+              </div>
+              <ul className="list-group list-group-flush">
+                <li className="list-group-item d-flex justify-content-between align-items-center bg-transparent">
+                  Hitos Completados
+                  <span className="badge bg-success rounded-pill">3</span>
+                </li>
+                <li className="list-group-item d-flex justify-content-between align-items-center bg-transparent">
+                  En Ejecución (P2601)
+                  <span className="badge bg-primary rounded-pill">1</span>
+                </li>
+                <li className="list-group-item d-flex justify-content-between align-items-center bg-transparent">
+                  Próximos (P2602)
+                  <span className="badge bg-secondary rounded-pill">1</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+
+        {/* Timeline de Hitos */}
+        <div className="col-lg-8">
           <div className="card">
-            <div className="card-body text-center py-5">
-              <h3>Módulo de Estado del Proyecto</h3>
-              <p className="text-muted">Funcionalidad en desarrollo</p>
+            <div className="card-header">
+              <i className="fas fa-list-check me-2"></i>Línea de Tiempo de Hitos
+            </div>
+            <div className="card-body">
+              <div className="timeline">
+                {milestones.map((m) => (
+                  <div key={m.id} className={`mb-4 p-3 border-start border-4 ${m.status === 'completed' ? 'border-success' : m.status === 'in_progress' ? 'border-primary' : 'border-secondary'} bg-light rounded-end`}>
+                    <div className="d-flex justify-content-between align-items-start">
+                      <div>
+                        <h5 className="mb-1">
+                          <i className={`${m.icon} me-2 text-muted`}></i>
+                          {m.id}: {m.title}
+                        </h5>
+                        <p className="mb-1 text-secondary">{m.description}</p>
+                        {m.date && <small className="text-muted"><i className="fas fa-calendar-alt me-1"></i>{m.date}</small>}
+                      </div>
+                      {getStatusBadge(m.status)}
+                    </div>
+                  </div>
+                ))}
+              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default Estadoproyecto
+export default Estadoproyecto;