Fix login blank screen and progress persistence

- Fix authStore to persist user data, not just isAuthenticated
- Fix progressStore handling of undefined API responses
- Remove minimax.md documentation file
- All progress now properly saves to PostgreSQL
- Login flow working correctly

frontend/src/pages/Dashboard.tsx

@@ -1,82 +1,109 @@
-import { useState, useEffect } from 'react';
+import { useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { useAuthStore } from '../stores/authStore';
+import { useProgressStore } from '../stores/progressStore';
 import { Card } from '../components/ui/Card';
 import { Button } from '../components/ui/Button';
-import { progresoService } from '../services/api';
-import type { ModuloProgreso } from '../types';
-import { BookOpen, TrendingUp, User, LogOut, LayoutGrid } from 'lucide-react';
+import { ProgressBar } from '../components/progress/ProgressBar';
+import { ScoreDisplay } from '../components/progress/ScoreDisplay';
+import { BadgesSection } from '../components/progress/Badges';
+import { Loader } from '../components/ui/Loader';
+import { BookOpen, User, LogOut, LayoutGrid, Award, Star, Target, CheckCircle, FileText } from 'lucide-react';
 
-const MODULOS_DEFAULT = [
-  { numero: 1, titulo: 'Fundamentos de Economía', descripcion: 'Introducción a los conceptos básicos' },
-  { numero: 2, titulo: 'Oferta, Demanda y Equilibrio', descripcion: 'Curvas de mercado' },
-  { numero: 3, titulo: 'Utilidad y Elasticidad', descripcion: 'Teoría del consumidor' },
-  { numero: 4, titulo: 'Teoría del Productor', descripcion: 'Costos y producción' },
+const MODULOS_CONFIG = [
+  { id: 'modulo1', numero: 1, titulo: 'Fundamentos de Economía', descripcion: 'Introducción a los conceptos básicos', totalEjercicios: 3 },
+  { id: 'modulo2', numero: 2, titulo: 'Oferta, Demanda y Equilibrio', descripcion: 'Curvas de mercado', totalEjercicios: 3 },
+  { id: 'modulo3', numero: 3, titulo: 'Utilidad y Elasticidad', descripcion: 'Teoría del consumidor', totalEjercicios: 3 },
+  { id: 'modulo4', numero: 4, titulo: 'Teoría del Productor', descripcion: 'Costos y producción', totalEjercicios: 3 },
 ];
 
 export function Dashboard() {
   const { usuario, logout } = useAuthStore();
-  const [modulosProgreso, setModulosProgreso] = useState<ModuloProgreso[]>([]);
+  const { 
+    puntuacionTotal, 
+    nivel, 
+    calcularPorcentajeModulo,
+    getBadgesDesbloqueados,
+    getBadgesBloqueados,
+    modulos,
+    loadProgreso,
+    isLoading,
+    error,
+  } = useProgressStore();
 
   useEffect(() => {
     loadProgreso();
-  }, []);
-
-  const loadProgreso = async () => {
-    try {
-      const progresos = await progresoService.getProgreso();
-      const modulos = MODULOS_DEFAULT.map((mod) => {
-        const modProgresos = progresos.filter((p) => p.modulo_numero === mod.numero);
-        const completados = modProgresos.filter((p) => p.completado).length;
-        const total = 5; // Asumiendo 5 ejercicios por módulo
-        return {
-          numero: mod.numero,
-          titulo: mod.titulo,
-          porcentaje: Math.round((completados / total) * 100),
-          ejerciciosCompletados: completados,
-          totalEjercicios: total,
-        };
-      });
-      setModulosProgreso(modulos);
-    } catch {
-      // Si hay error, mostrar progreso vacío
-      setModulosProgreso(
-        MODULOS_DEFAULT.map((mod) => ({
-          numero: mod.numero,
-          titulo: mod.titulo,
-          porcentaje: 0,
-          ejerciciosCompletados: 0,
-          totalEjercicios: 5,
-        }))
-      );
-    }
-  };
+  }, [loadProgreso]);
 
   const handleLogout = async () => {
     await logout();
   };
 
+  if (isLoading && Object.keys(modulos).length === 0) {
+    return (
+      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+        <div className="text-center">
+          <Loader size="lg" className="mx-auto mb-4" />
+          <p className="text-gray-600">Cargando tu progreso...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+        <div className="text-center max-w-md mx-auto px-4">
+          <div className="text-red-500 mb-4">
+            <svg className="w-16 h-16 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+            </svg>
+          </div>
+          <h2 className="text-xl font-bold text-gray-900 mb-2">Error al cargar el progreso</h2>
+          <p className="text-gray-600 mb-4">{error}</p>
+          <Button onClick={loadProgreso}>Reintentar</Button>
+        </div>
+      </div>
+    );
+  }
+
+  // Calcular progreso total
   const totalProgreso = Math.round(
-    modulosProgreso.reduce((acc, mod) => acc + mod.porcentaje, 0) / modulosProgreso.length
+    MODULOS_CONFIG.reduce((acc, mod) => {
+      return acc + calcularPorcentajeModulo(mod.id, mod.totalEjercicios);
+    }, 0) / MODULOS_CONFIG.length
   );
 
+  const badgesDesbloqueados = getBadgesDesbloqueados();
+  const badgesBloqueados = getBadgesBloqueados();
+
+  // Calcular ejercicios completados por módulo
+  const getEjerciciosCompletados = (moduloId: string) => {
+    const modulo = modulos[moduloId];
+    if (!modulo) return 0;
+    return Object.values(modulo.ejercicios).filter(ej => ej.completado).length;
+  };
+
   return (
     <div className="min-h-screen bg-gray-50">
-      <header className="bg-white shadow-sm">
+      <header className="bg-white shadow-sm border-b border-gray-200">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex items-center justify-between">
           <div className="flex items-center gap-3">
-            <div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
+            <div className="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center">
               <BookOpen className="w-5 h-5 text-white" />
             </div>
-            <h1 className="text-xl font-bold text-gray-900">Economía</h1>
+            <h1 className="text-xl font-bold text-gray-900">Economía Interactiva</h1>
           </div>
 
           <div className="flex items-center gap-4">
             <div className="flex items-center gap-2 text-gray-600">
               <User className="w-5 h-5" />
-              <span className="font-medium">{usuario?.nombre}</span>
+              <span className="font-medium">{usuario?.nombre || 'Usuario'}</span>
+              <span className="px-2 py-0.5 bg-blue-100 text-blue-700 text-xs rounded-full font-semibold">
+                {nivel}
+              </span>
               {usuario?.rol === 'admin' && (
-                <span className="px-2 py-0.5 bg-purple-100 text-purple-700 text-xs rounded-full">
+                <span className="px-2 py-0.5 bg-purple-100 text-purple-700 text-xs rounded-full font-semibold">
                   Admin
                 </span>
               )}
@@ -91,86 +118,154 @@ export function Dashboard() {
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         <div className="mb-8">
           <h2 className="text-2xl font-bold text-gray-900">Tu progreso</h2>
-          <p className="text-gray-600">Continúa donde lo dejaste</p>
+          <p className="text-gray-600">Continúa donde lo dejaste y desbloquea nuevos logros</p>
         </div>
 
-        <Card className="mb-8">
-          <div className="flex items-center justify-between mb-4">
-            <div>
-              <h3 className="font-semibold text-gray-900">Progreso total</h3>
-              <p className="text-sm text-gray-500">{totalProgreso}% completado</p>
+        {/* Stats Cards */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+          <Card className="bg-gradient-to-br from-blue-500 to-blue-600 text-white border-none">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-blue-100 text-sm">Progreso total</p>
+                <p className="text-3xl font-bold mt-1">{totalProgreso}%</p>
+              </div>
+              <Target className="w-12 h-12 text-blue-100 opacity-80" />
+            </div>
+            <div className="mt-4 w-full bg-white/20 rounded-full h-2">
+              <div
+                className="bg-white h-2 rounded-full transition-all duration-500"
+                style={{ width: `${totalProgreso}%` }}
+              />
+            </div>
+            <p className="mt-2 text-xs text-blue-100">
+              {totalProgreso === 100 ? '¡Has completado todos los módulos!' : 'Sigue así, vas por buen camino'}
+            </p>
+          </Card>
+
+          <Card className="bg-gradient-to-br from-amber-500 to-orange-500 text-white border-none">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-orange-100 text-sm">Puntuación total</p>
+                <p className="text-3xl font-bold mt-1">{puntuacionTotal.toLocaleString()}</p>
+              </div>
+              <Star className="w-12 h-12 text-orange-100 opacity-80" />
+            </div>
+            <p className="mt-4 text-sm text-orange-100">
+              Acumula puntos completando ejercicios para subir de nivel
+            </p>
+          </Card>
+
+          <Card className="bg-gradient-to-br from-purple-500 to-pink-500 text-white border-none">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-purple-100 text-sm">Logros</p>
+                <p className="text-3xl font-bold mt-1">
+                  {badgesDesbloqueados.length}/{badgesDesbloqueados.length + badgesBloqueados.length}
+                </p>
+              </div>
+              <Award className="w-12 h-12 text-purple-100 opacity-80" />
+            </div>
+            <p className="mt-4 text-sm text-purple-100">
+              {badgesBloqueados.length === 0 
+                ? '¡Todos los logros desbloqueados!' 
+                : `${badgesBloqueados.length} logros por desbloquear`}
+            </p>
+          </Card>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+          {/* Columna izquierda - Módulos */}
+          <div className="lg:col-span-2 space-y-6">
+            {/* Puntuación y Nivel */}
+            <ScoreDisplay 
+              puntos={puntuacionTotal} 
+              animar={false}
+              showNivel={true}
+              size="md"
+            />
+
+            <div className="mb-6 flex items-center justify-between">
+              <h2 className="text-xl font-bold text-gray-900">Módulos</h2>
+              {usuario?.rol === 'admin' && (
+                <Link to="/admin">
+                  <Button variant="outline" size="sm">
+                    Panel de Admin
+                  </Button>
+                </Link>
+              )}
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              {MODULOS_CONFIG.map((modulo) => {
+                const porcentaje = calcularPorcentajeModulo(modulo.id, modulo.totalEjercicios);
+                const completados = getEjerciciosCompletados(modulo.id);
+
+                return (
+                  <Link key={modulo.id} to={`/modulo/${modulo.numero}`}>
+                    <Card className="hover:shadow-lg transition-shadow cursor-pointer h-full">
+                      <div className="flex items-start justify-between mb-4">
+                        <div className="flex items-center gap-3">
+                          <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
+                            <span className="text-blue-600 font-bold text-lg">{modulo.numero}</span>
+                          </div>
+                          <div>
+                            <h3 className="font-semibold text-gray-900">{modulo.titulo}</h3>
+                            <p className="text-sm text-gray-500">
+                              {completados}/{modulo.totalEjercicios} ejercicios
+                            </p>
+                          </div>
+                        </div>
+                      </div>
+
+                      <ProgressBar 
+                        porcentaje={porcentaje} 
+                        moduloNumero={modulo.numero}
+                        showLabel={false}
+                        size="sm"
+                      />
+
+                      <div className="flex items-center justify-between text-sm mt-3">
+                        <span className="text-gray-500">{porcentaje}% completado</span>
+                        {porcentaje === 100 && (
+                          <span className="text-green-600 flex items-center gap-1 font-medium">
+                            <CheckCircle className="w-4 h-4" />
+                            Completado
+                          </span>
+                        )}
+                      </div>
+                    </Card>
+                  </Link>
+                );
+              })}
+            </div>
+
+            <div className="mt-8 flex justify-center gap-4">
+              <Link to="/modulos">
+                <Button variant="outline" size="lg">
+                  <LayoutGrid className="w-5 h-5 mr-2" />
+                  Ver todos los módulos
+                </Button>
+              </Link>
+              <Link to="/recursos">
+                <Button variant="outline" size="lg">
+                  <FileText className="w-5 h-5 mr-2" />
+                  Material PDF
+                </Button>
+              </Link>
             </div>
-            <div className="text-3xl font-bold text-primary">{totalProgreso}%</div>
           </div>
-          <div className="w-full bg-gray-200 rounded-full h-3">
-            <div
-              className="bg-primary h-3 rounded-full transition-all duration-500"
-              style={{ width: `${totalProgreso}%` }}
+
+          {/* Columna derecha - Logros */}
+          <div>
+            <BadgesSection 
+              badgesDesbloqueados={badgesDesbloqueados}
+              badgesBloqueados={badgesBloqueados}
             />
           </div>
-        </Card>
-
-        <div className="mb-6 flex items-center justify-between">
-          <h2 className="text-xl font-bold text-gray-900">Módulos</h2>
-          {usuario?.rol === 'admin' && (
-            <Link to="/admin">
-              <Button variant="outline" size="sm">
-                Panel de Admin
-              </Button>
-            </Link>
-          )}
-        </div>
-
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          {modulosProgreso.map((modulo) => (
-            <Link key={modulo.numero} to={`/modulo/${modulo.numero}`}>
-              <Card className="hover:shadow-lg transition-shadow cursor-pointer">
-                <div className="flex items-start justify-between mb-3">
-                  <div className="flex items-center gap-3">
-                    <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
-                      <span className="text-primary font-bold">{modulo.numero}</span>
-                    </div>
-                    <div>
-                      <h3 className="font-semibold text-gray-900">{modulo.titulo}</h3>
-                      <p className="text-sm text-gray-500">
-                        {modulo.ejerciciosCompletados}/{modulo.totalEjercicios} ejercicios
-                      </p>
-                    </div>
-                  </div>
-                </div>
-
-                <div className="w-full bg-gray-200 rounded-full h-2 mb-2">
-                  <div
-                    className={`h-2 rounded-full transition-all ${
-                      modulo.porcentaje === 100 ? 'bg-success' : 'bg-primary'
-                    }`}
-                    style={{ width: `${modulo.porcentaje}%` }}
-                  />
-                </div>
-
-                <div className="flex items-center justify-between text-sm">
-                  <span className="text-gray-500">{modulo.porcentaje}% completado</span>
-                  {modulo.porcentaje === 100 && (
-                    <span className="text-success flex items-center gap-1">
-                      <TrendingUp className="w-4 h-4" />
-                      Completado
-                    </span>
-                  )}
-                </div>
-              </Card>
-            </Link>
-          ))}
-        </div>
-
-        <div className="mt-8 text-center">
-          <Link to="/modulos">
-            <Button variant="outline" size="lg">
-              <LayoutGrid className="w-5 h-5 mr-2" />
-              Ver todos los módulos
-            </Button>
-          </Link>
         </div>
       </main>
     </div>
   );
 }
+
+export default Dashboard;