Initial commit: Plataforma de Economía
Features: - React 18 + TypeScript frontend with Vite - Go + Gin backend API - PostgreSQL database - JWT authentication with refresh tokens - User management (admin panel) - Docker containerization - Progress tracking system - 4 economic modules structure Fixed: - Login with username or email - User creation without required email - Database nullable timestamps - API response field naming
This commit is contained in:
Renato
176
frontend/src/pages/Dashboard.tsx
Normal file
176
frontend/src/pages/Dashboard.tsx
Normal file
@@ -0,0 +1,176 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useAuthStore } from '../stores/authStore';
|
||||
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';
|
||||
|
||||
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' },
|
||||
];
|
||||
|
||||
export function Dashboard() {
|
||||
const { usuario, logout } = useAuthStore();
|
||||
const [modulosProgreso, setModulosProgreso] = useState<ModuloProgreso[]>([]);
|
||||
|
||||
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,
|
||||
}))
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const handleLogout = async () => {
|
||||
await logout();
|
||||
};
|
||||
|
||||
const totalProgreso = Math.round(
|
||||
modulosProgreso.reduce((acc, mod) => acc + mod.porcentaje, 0) / modulosProgreso.length
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<header className="bg-white shadow-sm">
|
||||
<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">
|
||||
<BookOpen className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<h1 className="text-xl font-bold text-gray-900">Economía</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>
|
||||
{usuario?.rol === 'admin' && (
|
||||
<span className="px-2 py-0.5 bg-purple-100 text-purple-700 text-xs rounded-full">
|
||||
Admin
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" onClick={handleLogout}>
|
||||
<LogOut className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
</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}%` }}
|
||||
/>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
34
frontend/src/pages/Login.tsx
Normal file
34
frontend/src/pages/Login.tsx
Normal file
@@ -0,0 +1,34 @@
|
||||
import { Navigate } from 'react-router-dom';
|
||||
import { useAuthStore } from '../stores/authStore';
|
||||
import { LoginForm } from '../components/auth/LoginForm';
|
||||
import { BookOpen } from 'lucide-react';
|
||||
|
||||
export function Login() {
|
||||
const { isAuthenticated } = useAuthStore();
|
||||
|
||||
if (isAuthenticated) {
|
||||
return <Navigate to="/" replace />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-4">
|
||||
<div className="w-full max-w-md">
|
||||
<div className="text-center mb-8">
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 bg-primary rounded-2xl mb-4">
|
||||
<BookOpen className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h1 className="text-3xl font-bold text-gray-900">Plataforma de Economía</h1>
|
||||
<p className="text-gray-600 mt-2">Inicia sesión para continuar</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-2xl shadow-xl p-8">
|
||||
<LoginForm />
|
||||
</div>
|
||||
|
||||
<p className="text-center text-sm text-gray-500 mt-6">
|
||||
Sistema de aprendizaje interactivo
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
151
frontend/src/pages/Modulo.tsx
Normal file
151
frontend/src/pages/Modulo.tsx
Normal file
@@ -0,0 +1,151 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useParams, Link } from 'react-router-dom';
|
||||
import { Card } from '../components/ui/Card';
|
||||
import { Button } from '../components/ui/Button';
|
||||
import { progresoService } from '../services/api';
|
||||
import type { Progreso } from '../types';
|
||||
import { ArrowLeft, CheckCircle, Play } from 'lucide-react';
|
||||
|
||||
const MODULOS_INFO: Record<number, { titulo: string; descripcion: string }> = {
|
||||
1: { titulo: 'Fundamentos de Economía', descripcion: 'Introducción a los conceptos básicos de economía' },
|
||||
2: { titulo: 'Oferta, Demanda y Equilibrio', descripcion: 'Curvas de oferta y demanda en el mercado' },
|
||||
3: { titulo: 'Utilidad y Elasticidad', descripcion: 'Teoría del consumidor y elasticidades' },
|
||||
4: { titulo: 'Teoría del Productor', descripcion: 'Costos de producción y competencia perfecta' },
|
||||
};
|
||||
|
||||
const EJERCICIOS_MOCK = [
|
||||
{ id: 'e1', titulo: 'Conceptos básicos', descripcion: 'Repasa los fundamentos de la economía' },
|
||||
{ id: 'e2', titulo: 'Agentes económicos', descripcion: 'Identifica los diferentes agentes en la economía' },
|
||||
{ id: 'e3', titulo: 'Factores de producción', descripcion: 'Aprende sobre tierra, trabajo y capital' },
|
||||
{ id: 'e4', titulo: 'Flujo circular', descripcion: 'Comprende el flujo de bienes y dinero' },
|
||||
{ id: 'e5', titulo: 'Evaluación final', descripcion: 'Pon a prueba todo lo aprendido' },
|
||||
];
|
||||
|
||||
export function Modulo() {
|
||||
const { numero } = useParams<{ numero: string }>();
|
||||
const num = parseInt(numero || '1', 10);
|
||||
const [progresos, setProgresos] = useState<Progreso[]>([]);
|
||||
|
||||
const moduloInfo = MODULOS_INFO[num] || MODULOS_INFO[1];
|
||||
const ejercicios = EJERCICIOS_MOCK;
|
||||
|
||||
useEffect(() => {
|
||||
loadProgreso();
|
||||
}, [num]);
|
||||
|
||||
const loadProgreso = async () => {
|
||||
try {
|
||||
const data = await progresoService.getProgreso();
|
||||
setProgresos(data);
|
||||
} catch {
|
||||
// Silencio
|
||||
}
|
||||
};
|
||||
|
||||
const getProgresoForEjercicio = (ejercicioId: string) => {
|
||||
return progresos.find(
|
||||
(p) => p.modulo_numero === num && p.ejercicio_id === ejercicioId
|
||||
);
|
||||
};
|
||||
|
||||
const completados = ejercicios.filter(
|
||||
(e) => getProgresoForEjercicio(e.id)?.completado
|
||||
).length;
|
||||
const porcentaje = Math.round((completados / ejercicios.length) * 100);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<header className="bg-white shadow-sm">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||
<Link to="/" className="inline-flex items-center text-primary hover:underline">
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Volver al Dashboard
|
||||
</Link>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="w-14 h-14 bg-gradient-to-br from-primary to-blue-600 rounded-xl flex items-center justify-center text-white text-2xl font-bold shadow-lg">
|
||||
{num}
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">{moduloInfo.titulo}</h1>
|
||||
<p className="text-gray-600">{moduloInfo.descripcion}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card className="bg-gradient-to-r from-primary to-blue-600 text-white">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-blue-100">Tu progreso en este módulo</p>
|
||||
<p className="text-3xl font-bold mt-1">{porcentaje}%</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-blue-100">{completados}/{ejercicios.length} ejercicios</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 w-full bg-white/20 rounded-full h-2">
|
||||
<div
|
||||
className="bg-white h-2 rounded-full transition-all"
|
||||
style={{ width: `${porcentaje}%` }}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-4">Ejercicios</h2>
|
||||
|
||||
<div className="space-y-3">
|
||||
{ejercicios.map((ejercicio, index) => {
|
||||
const progreso = getProgresoForEjercicio(ejercicio.id);
|
||||
const completado = progreso?.completado || false;
|
||||
|
||||
return (
|
||||
<Card key={ejercicio.id} className="hover:shadow-md transition-shadow">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className={`w-10 h-10 rounded-full flex items-center justify-center ${
|
||||
completado ? 'bg-success text-white' : 'bg-gray-100 text-gray-500'
|
||||
}`}>
|
||||
{completado ? (
|
||||
<CheckCircle className="w-5 h-5" />
|
||||
) : (
|
||||
<span className="font-medium">{index + 1}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<h3 className="font-semibold text-gray-900">{ejercicio.titulo}</h3>
|
||||
<p className="text-sm text-gray-500">{ejercicio.descripcion}</p>
|
||||
</div>
|
||||
|
||||
<Button size="sm">
|
||||
<Play className="w-4 h-4 mr-2" />
|
||||
{completado ? 'Repetir' : 'Comenzar'}
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{porcentaje === 100 && (
|
||||
<Card className="mt-6 bg-success/10 border border-success">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 bg-success rounded-full flex items-center justify-center">
|
||||
<CheckCircle className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-success">¡Felicitaciones!</h3>
|
||||
<p className="text-sm text-gray-600">
|
||||
Has completado todos los ejercicios de este módulo.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
95
frontend/src/pages/Modulos.tsx
Normal file
95
frontend/src/pages/Modulos.tsx
Normal file
@@ -0,0 +1,95 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Card } from '../components/ui/Card';
|
||||
import { Button } from '../components/ui/Button';
|
||||
import { ArrowRight, ArrowLeft } from 'lucide-react';
|
||||
|
||||
const MODULOS = [
|
||||
{
|
||||
numero: 1,
|
||||
titulo: 'Fundamentos de Economía',
|
||||
descripcion: 'Aprende los conceptos básicos: definición de economía, agentes económicos, factores de producción y el flujo circular de la economía.',
|
||||
temas: ['Definición de economía', 'Agentes económicos', 'Factores de producción', 'Flujo circular'],
|
||||
},
|
||||
{
|
||||
numero: 2,
|
||||
titulo: 'Oferta, Demanda y Equilibrio',
|
||||
descripcion: 'Domina las curvas de oferta y demanda, aprende cómo se determinan los precios y entiende los controles de mercado.',
|
||||
temas: ['Curva de demanda', 'Curva de oferta', 'Equilibrio de mercado', 'Controles de precios'],
|
||||
},
|
||||
{
|
||||
numero: 3,
|
||||
titulo: 'Utilidad y Elasticidad',
|
||||
descripcion: 'Explora la teoría del consumidor, aprende a calcular elasticidades y clasifica diferentes tipos de bienes.',
|
||||
temas: ['Utilidad marginal', 'Elasticidad precio', 'Elasticidad ingreso', 'Clasificación de bienes'],
|
||||
},
|
||||
{
|
||||
numero: 4,
|
||||
titulo: 'Teoría del Productor',
|
||||
descripcion: 'Comprende los costos de producción, la toma de decisiones del productor y los fundamentos de la competencia perfecta.',
|
||||
temas: ['Costos de producción', 'Producción y costos', 'Competencia perfecta', 'Maximización de beneficios'],
|
||||
},
|
||||
];
|
||||
|
||||
export function Modulos() {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<header className="bg-white shadow-sm">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||
<Link to="/" className="inline-flex items-center text-primary hover:underline">
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Volver al Dashboard
|
||||
</Link>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<div className="text-center mb-12">
|
||||
<h1 className="text-3xl font-bold text-gray-900 mb-4">Módulos Educativos</h1>
|
||||
<p className="text-gray-600 max-w-2xl mx-auto">
|
||||
Explora los 4 módulos de economía. Cada uno contiene ejercicios interactivos
|
||||
para fortalecer tu comprensión de los conceptos.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{MODULOS.map((modulo) => (
|
||||
<Card key={modulo.numero} className="hover:shadow-lg transition-shadow">
|
||||
<div className="flex flex-col md:flex-row md:items-center gap-6">
|
||||
<div className="flex items-center gap-4 md:w-32">
|
||||
<div className="w-16 h-16 bg-gradient-to-br from-primary to-blue-600 rounded-2xl flex items-center justify-center text-white text-2xl font-bold shadow-lg">
|
||||
{modulo.numero}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-2">{modulo.titulo}</h2>
|
||||
<p className="text-gray-600 mb-4">{modulo.descripcion}</p>
|
||||
|
||||
<div className="flex flex-wrap gap-2 mb-4">
|
||||
{modulo.temas.map((tema) => (
|
||||
<span
|
||||
key={tema}
|
||||
className="px-3 py-1 bg-gray-100 text-gray-700 text-sm rounded-full"
|
||||
>
|
||||
{tema}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="md:text-right">
|
||||
<Link to={`/modulo/${modulo.numero}`}>
|
||||
<Button>
|
||||
Entrar
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
39
frontend/src/pages/admin/AdminPanel.tsx
Normal file
39
frontend/src/pages/admin/AdminPanel.tsx
Normal file
@@ -0,0 +1,39 @@
|
||||
import { Navigate } from 'react-router-dom';
|
||||
import { useAuthStore } from '../../stores/authStore';
|
||||
import { UserList } from '../../components/admin/UserList';
|
||||
import { ArrowLeft, Settings } from 'lucide-react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
export function AdminPanel() {
|
||||
const { usuario } = useAuthStore();
|
||||
|
||||
if (!usuario || usuario.rol !== 'admin') {
|
||||
return <Navigate to="/" replace />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<header className="bg-white shadow-sm">
|
||||
<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-4">
|
||||
<Link to="/" className="inline-flex items-center text-primary hover:underline">
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Volver
|
||||
</Link>
|
||||
<div className="h-6 w-px bg-gray-300" />
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 bg-secondary rounded-lg flex items-center justify-center">
|
||||
<Settings className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<h1 className="text-xl font-bold text-gray-900">Panel de Administración</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<UserList />
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user