Files
autotest/docs/project-status.html
2026-05-26 00:42:42 +02:00

206 lines
11 KiB
HTML

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Autotest • Seguimiento del Proyecto</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
body { font-family: 'Inter', system_ui, sans-serif; }
.font-display { font-family: 'Space Grotesk', 'Inter', system_ui, sans-serif; }
.section-title { font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: #64748b; }
.progress-bar { height: 8px; background: linear-gradient(to right, #f97316, #fb923c); border-radius: 9999px; }
.milestone { transition: all 0.2s ease; }
.milestone:hover { transform: translateX(4px); }
</style>
</head>
<body class="bg-slate-950 text-slate-200">
<div class="max-w-5xl mx-auto px-6 py-8">
<!-- Header -->
<div class="flex items-center justify-between mb-8">
<div class="flex items-center gap-4">
<div class="w-12 h-12 bg-orange-500 rounded-2xl flex items-center justify-center">
<i class="fa-solid fa-robot text-white text-4xl"></i>
</div>
<div>
<h1 class="text-4xl font-display tracking-tighter">Autotest</h1>
<p class="text-slate-400 -mt-1">Seguimiento del proyecto</p>
</div>
</div>
<div class="text-right">
<div class="text-sm text-slate-400">Última actualización</div>
<div class="font-medium">Finales de mayo 2026</div>
</div>
</div>
<!-- Overall Status -->
<div class="bg-slate-900 border border-slate-800 rounded-3xl p-8 mb-8">
<div class="flex items-center justify-between mb-3">
<div>
<div class="section-title">Estado actual</div>
<div class="text-4xl font-semibold tracking-tighter mt-1">Reestructuración + Simplificación completada</div>
</div>
<div class="text-right">
<div class="text-5xl font-semibold text-emerald-400">76%</div>
<div class="text-xs text-slate-400">del núcleo del proyecto</div>
</div>
</div>
<div class="h-3 bg-slate-800 rounded-full mt-4 overflow-hidden">
<div class="progress-bar" style="width: 76%"></div>
</div>
<div class="flex justify-between text-xs text-slate-500 mt-2">
<div>Reestructuración + Modelo simplificado</div>
<div>UI pulida + Test Plans maduros</div>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<!-- Completado -->
<div>
<div class="flex items-center gap-2 mb-4 px-1">
<i class="fa-solid fa-check-double text-emerald-400"></i>
<div class="section-title">Completado</div>
</div>
<div class="space-y-3">
<div class="milestone bg-slate-900 border border-emerald-900/50 rounded-2xl p-5">
<div class="flex items-start justify-between">
<div>
<div class="font-semibold">Reestructuración profunda de datos</div>
<div class="text-sm text-slate-400 mt-1">Eliminación de duplicados (167 → 86 testcases limpios) + estructura clara <span class="font-mono">testcases/{core,pbx}/</span></div>
</div>
<div class="text-emerald-400 text-xs font-medium">Mayor</div>
</div>
</div>
<div class="milestone bg-slate-900 border border-emerald-900/50 rounded-2xl p-5">
<div class="flex items-start justify-between">
<div>
<div class="font-semibold">Simplificación del modelo de automatización</div>
<div class="text-sm text-slate-400 mt-1">Decisión ahora a nivel de <strong>testcase</strong> (no por paso). Añadido campo <code>notes</code> por paso.</div>
</div>
<div class="text-emerald-400 text-xs font-medium">Mayor</div>
</div>
</div>
<div class="milestone bg-slate-900 border border-emerald-900/50 rounded-2xl p-5">
<div class="flex items-start justify-between">
<div>
<div class="font-semibold">Nueva UI jerárquica (vista de pájaro)</div>
<div class="text-sm text-slate-400 mt-1">Módulo → Grupos → Testcases. Eliminada barra de filtros antigua.</div>
</div>
<div class="text-emerald-400 text-xs font-medium">Mayor</div>
</div>
</div>
<div class="milestone bg-slate-900 border border-emerald-900/50 rounded-2xl p-5">
<div class="flex items-start justify-between">
<div>
<div class="font-semibold">Test Plans mejorados</div>
<div class="text-sm text-slate-400 mt-1"><code>automation_summary</code> automático + borrado de planes desde la UI</div>
</div>
</div>
</div>
<div class="milestone bg-slate-900 border border-emerald-900/50 rounded-2xl p-5">
<div class="flex items-start justify-between">
<div>
<div class="font-semibold">Tema Aura (Dalton Menezes)</div>
<div class="text-sm text-slate-400 mt-1">Actualización visual + centralización parcial de estilos</div>
</div>
</div>
</div>
<div class="milestone bg-slate-900 border border-emerald-900/50 rounded-2xl p-5">
<div class="flex items-start justify-between">
<div>
<div class="font-semibold">Mejoras de UX</div>
<div class="text-sm text-slate-400 mt-1">Título clickeable, feedback en botón Save, toggle en grupos</div>
</div>
</div>
</div>
</div>
</div>
<!-- Pendiente -->
<div>
<div class="flex items-center gap-2 mb-4 px-1">
<i class="fa-solid fa-list-check text-amber-400"></i>
<div class="section-title">Pendiente</div>
</div>
<div class="space-y-3">
<div class="bg-slate-900 border border-amber-900/50 rounded-2xl p-5">
<div class="flex items-center justify-between mb-2">
<div class="font-semibold">Creación cómoda de nuevos Test Cases</div>
<span class="text-[10px] px-2 py-0.5 bg-amber-500/10 text-amber-400 rounded-full">Alta</span>
</div>
<div class="text-sm text-slate-400">
Actualmente hay que crear los YAMLs manualmente. Falta un flujo bueno desde la interfaz.
</div>
</div>
<div class="bg-slate-900 border border-amber-900/50 rounded-2xl p-5">
<div class="flex items-center justify-between mb-2">
<div class="font-semibold">Exportación de planes (HTML + Playwright)</div>
<span class="text-[10px] px-2 py-0.5 bg-amber-500/10 text-amber-400 rounded-full">Alta</span>
</div>
<div class="text-sm text-slate-400">
Generar entregables reales a partir de un Test Plan.
</div>
</div>
<div class="bg-slate-900 border border-slate-700 rounded-2xl p-5">
<div class="font-semibold mb-1">Limpieza legacy profunda</div>
<div class="text-sm text-slate-400">Eliminar completamente la dependencia del JSON antiguo y los scripts que lo usan.</div>
</div>
<div class="bg-slate-900 border border-slate-700 rounded-2xl p-5">
<div class="font-semibold mb-1">Mejoras en Docker + CI</div>
<div class="text-sm text-slate-400">Healthcheck, variables de entorno, logging, y pipeline básico.</div>
</div>
<div class="bg-slate-900 border border-slate-700 rounded-2xl p-5">
<div class="font-semibold mb-1">Centralización de estilos</div>
<div class="text-sm text-slate-400">Mover estilos dispersos (muchos inline + Tailwind arbitrario) a un fichero CSS más mantenible.</div>
</div>
</div>
</div>
</div>
<!-- Quick Start -->
<div class="mt-8 bg-slate-900 border border-slate-800 rounded-3xl p-8">
<div class="section-title mb-3">Cómo ejecutar el proyecto</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<div class="text-xs text-emerald-400 font-medium mb-2">RECOMENDADO</div>
<div class="bg-slate-950 border border-slate-800 rounded-2xl p-4 font-mono text-sm">
docker compose up -d --build
</div>
<div class="text-xs text-slate-400 mt-1.5">Accede en <span class="font-medium">http://localhost:4321</span></div>
</div>
<div>
<div class="text-xs text-slate-400 font-medium mb-2">LOCAL (sin Docker)</div>
<div class="bg-slate-950 border border-slate-800 rounded-2xl p-4 font-mono text-sm">
npm run web
</div>
</div>
</div>
</div>
<div class="mt-6 text-center text-xs text-slate-500">
Proyecto en muy buen estado.<br>
Base técnica sólida + UX mucho más clara.<br>
Próximo foco recomendado: <span class="text-amber-400 font-medium">Creación fácil de nuevos Test Cases</span> + Exportación de planes.
</div>
</div>
</body>
</html>