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
This commit is contained in:
Renato
364
frontend/src/pages/modulos/Modulo1Page.tsx
Normal file
364
frontend/src/pages/modulos/Modulo1Page.tsx
Normal file
@@ -0,0 +1,364 @@
|
||||
// @ts-nocheck
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useParams, Link } from 'react-router-dom';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
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, BookOpen, Trophy, ChevronRight } from 'lucide-react';
|
||||
|
||||
// Importar contenido del módulo 1
|
||||
import { introduccion, agentes, factores } from '../../content/modulo1';
|
||||
import { ejercicios as modulo1Ejercicios } from '../../content/modulo1/ejercicios';
|
||||
|
||||
// Importar componentes de ejercicios
|
||||
import { SimuladorDisyuntivas, QuizBienes, FlujoCircular } from '../../components/exercises/modulo1';
|
||||
|
||||
const TABS = ['Contenido', 'Ejercicios'] as const;
|
||||
type Tab = typeof TABS[number];
|
||||
|
||||
interface EjercicioConfig {
|
||||
id: string;
|
||||
titulo: string;
|
||||
descripcion: string;
|
||||
componente: React.ReactNode;
|
||||
}
|
||||
|
||||
export function Modulo1Page() {
|
||||
const { numero } = useParams<{ numero: string }>();
|
||||
const [activeTab, setActiveTab] = useState<Tab>('Contenido');
|
||||
const [activeSeccion, setActiveSeccion] = useState<'introduccion' | 'agentes' | 'factores'>('introduccion');
|
||||
const [activeEjercicio, setActiveEjercicio] = useState<string | null>(null);
|
||||
const [progresos, setProgresos] = useState<Progreso[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
// Cargar progreso al montar
|
||||
useEffect(() => {
|
||||
loadProgreso();
|
||||
}, []);
|
||||
|
||||
const loadProgreso = async () => {
|
||||
try {
|
||||
const data = await progresoService.getProgreso();
|
||||
setProgresos(data);
|
||||
} catch {
|
||||
// Silenciar error
|
||||
}
|
||||
};
|
||||
|
||||
const getProgresoForEjercicio = (ejercicioId: string) => {
|
||||
return progresos.find(
|
||||
(p) => p.modulo_numero === 1 && p.ejercicio_id === ejercicioId
|
||||
);
|
||||
};
|
||||
|
||||
const handleCompleteEjercicio = async (ejercicioId: string, puntuacion: number) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
await progresoService.saveProgreso(ejercicioId, puntuacion);
|
||||
await loadProgreso();
|
||||
} catch {
|
||||
// Silenciar error
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Configuración de ejercicios con sus componentes
|
||||
const ejerciciosConfig: EjercicioConfig[] = [
|
||||
{
|
||||
id: 'simulador-disyuntivas',
|
||||
titulo: modulo1Ejercicios.ejercicios[0].titulo,
|
||||
descripcion: modulo1Ejercicios.ejercicios[0].descripcion,
|
||||
componente: (
|
||||
<SimuladorDisyuntivas
|
||||
ejercicioId="simulador-disyuntivas"
|
||||
onComplete={(puntuacion) => handleCompleteEjercicio('simulador-disyuntivas', puntuacion)}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 'quiz-clasificacion-bienes',
|
||||
titulo: modulo1Ejercicios.ejercicios[1].titulo,
|
||||
descripcion: modulo1Ejercicios.ejercicios[1].descripcion,
|
||||
componente: (
|
||||
<QuizBienes
|
||||
ejercicioId="quiz-clasificacion-bienes"
|
||||
onComplete={(puntuacion) => handleCompleteEjercicio('quiz-clasificacion-bienes', puntuacion)}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 'juego-flujo-circular',
|
||||
titulo: modulo1Ejercicios.ejercicios[2].titulo,
|
||||
descripcion: modulo1Ejercicios.ejercicios[2].descripcion,
|
||||
componente: (
|
||||
<FlujoCircular
|
||||
ejercicioId="juego-flujo-circular"
|
||||
onComplete={(puntuacion) => handleCompleteEjercicio('juego-flujo-circular', puntuacion)}
|
||||
/>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const seccionesContenido = {
|
||||
introduccion: {
|
||||
titulo: introduccion.titulo,
|
||||
data: introduccion,
|
||||
},
|
||||
agentes: {
|
||||
titulo: agentes.titulo,
|
||||
data: agentes,
|
||||
},
|
||||
factores: {
|
||||
titulo: factores.titulo,
|
||||
data: factores,
|
||||
},
|
||||
};
|
||||
|
||||
const currentSeccion = seccionesContenido[activeSeccion];
|
||||
|
||||
// Calcular progreso del módulo
|
||||
const ejerciciosCompletados = ejerciciosConfig.filter(
|
||||
(e) => getProgresoForEjercicio(e.id)?.completado
|
||||
).length;
|
||||
const porcentajeProgreso = Math.round((ejerciciosCompletados / ejerciciosConfig.length) * 100);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Header */}
|
||||
<header className="bg-white shadow-sm sticky top-0 z-10">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<Link to="/modulos" className="inline-flex items-center text-blue-600 hover:underline">
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Volver a Módulos
|
||||
</Link>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-gray-600">Progreso:</span>
|
||||
<div className="w-32 bg-gray-200 rounded-full h-2">
|
||||
<div
|
||||
className="bg-green-500 h-2 rounded-full transition-all"
|
||||
style={{ width: `${porcentajeProgreso}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-sm font-medium text-gray-700">{porcentajeProgreso}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Título del módulo */}
|
||||
<div className="bg-gradient-to-r from-blue-600 to-blue-800 text-white">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-16 h-16 bg-white/20 rounded-xl flex items-center justify-center text-3xl font-bold">
|
||||
1
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">Módulo 1: Fundamentos de Economía</h1>
|
||||
<p className="text-blue-100 mt-1">
|
||||
Introducción a los conceptos básicos, agentes económicos y factores de producción
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
||||
<div className="flex gap-2 border-b border-gray-200">
|
||||
{TABS.map((tab) => (
|
||||
<button
|
||||
key={tab}
|
||||
onClick={() => {
|
||||
setActiveTab(tab);
|
||||
setActiveEjercicio(null);
|
||||
}}
|
||||
className={`px-6 py-3 font-medium text-sm transition-colors relative ${
|
||||
activeTab === tab
|
||||
? 'text-blue-600'
|
||||
: 'text-gray-500 hover:text-gray-700'
|
||||
}`}
|
||||
>
|
||||
{tab === 'Contenido' && <BookOpen className="w-4 h-4 inline mr-2" />}
|
||||
{tab === 'Ejercicios' && <Trophy className="w-4 h-4 inline mr-2" />}
|
||||
{tab}
|
||||
{activeTab === tab && (
|
||||
<motion.div
|
||||
layoutId="activeTab"
|
||||
className="absolute bottom-0 left-0 right-0 h-0.5 bg-blue-600"
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Contenido según tab activo */}
|
||||
<AnimatePresence mode="wait">
|
||||
{activeTab === 'Contenido' ? (
|
||||
<motion.div
|
||||
key="contenido"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
className="mt-6 grid grid-cols-1 lg:grid-cols-4 gap-6"
|
||||
>
|
||||
{/* Navegación de secciones */}
|
||||
<div className="lg:col-span-1">
|
||||
<Card className="sticky top-24">
|
||||
<h3 className="font-semibold text-gray-900 mb-4">Secciones</h3>
|
||||
<nav className="space-y-2">
|
||||
{(Object.keys(seccionesContenido) as Array<keyof typeof seccionesContenido>).map((key) => (
|
||||
<button
|
||||
key={key}
|
||||
onClick={() => setActiveSeccion(key)}
|
||||
className={`w-full text-left px-3 py-2 rounded-lg text-sm transition-colors flex items-center justify-between ${
|
||||
activeSeccion === key
|
||||
? 'bg-blue-50 text-blue-700 font-medium'
|
||||
: 'text-gray-600 hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
{seccionesContenido[key].titulo}
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Contenido de la sección */}
|
||||
<div className="lg:col-span-3 space-y-6">
|
||||
<Card>
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6">{currentSeccion.titulo}</h2>
|
||||
<div className="space-y-6">
|
||||
{currentSeccion.data.contenido.map((seccion, index) => (
|
||||
<div key={index} className="border-b border-gray-100 last:border-0 pb-6 last:pb-0">
|
||||
<h3 className="text-lg font-semibold text-gray-800 mb-3">{seccion.titulo}</h3>
|
||||
<div className="prose prose-blue max-w-none">
|
||||
{seccion.contenido.split('\n\n').map((parrafo, pIndex) => (
|
||||
<p key={pIndex} className="text-gray-600 mb-4 leading-relaxed whitespace-pre-line">
|
||||
{parrafo}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Ejercicios relacionados con la sección */}
|
||||
{currentSeccion.data.ejercicios && currentSeccion.data.ejercicios.length > 0 && (
|
||||
<Card className="bg-blue-50 border-blue-200">
|
||||
<h3 className="font-semibold text-blue-900 mb-3">Ejercicios Relacionados</h3>
|
||||
<p className="text-blue-700 text-sm mb-4">
|
||||
Practica lo aprendido con estos ejercicios interactivos
|
||||
</p>
|
||||
<Button
|
||||
onClick={() => setActiveTab('Ejercicios')}
|
||||
variant="outline"
|
||||
className="border-blue-300 text-blue-700 hover:bg-blue-100"
|
||||
>
|
||||
<Play className="w-4 h-4 mr-2" />
|
||||
Ir a Ejercicios
|
||||
</Button>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div
|
||||
key="ejercicios"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
className="mt-6"
|
||||
>
|
||||
{activeEjercicio ? (
|
||||
// Vista de ejercicio activo
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<Button variant="ghost" onClick={() => setActiveEjercicio(null)}>
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Volver a ejercicios
|
||||
</Button>
|
||||
{loading && <span className="text-sm text-gray-500">Guardando progreso...</span>}
|
||||
</div>
|
||||
{ejerciciosConfig.find((e) => e.id === activeEjercicio)?.componente}
|
||||
</div>
|
||||
) : (
|
||||
// Lista de ejercicios
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{ejerciciosConfig.map((ejercicio, index) => {
|
||||
const progreso = getProgresoForEjercicio(ejercicio.id);
|
||||
const completado = progreso?.completado || false;
|
||||
|
||||
return (
|
||||
<Card
|
||||
key={ejercicio.id}
|
||||
className="hover:shadow-lg transition-shadow cursor-pointer"
|
||||
onClick={() => setActiveEjercicio(ejercicio.id)}
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<div
|
||||
className={`w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0 ${
|
||||
completado ? 'bg-green-100 text-green-600' : 'bg-blue-100 text-blue-600'
|
||||
}`}
|
||||
>
|
||||
{completado ? (
|
||||
<CheckCircle className="w-6 h-6" />
|
||||
) : (
|
||||
<span className="text-xl font-bold">{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 mt-1">{ejercicio.descripcion}</p>
|
||||
{completado && progreso && (
|
||||
<div className="mt-3 flex items-center gap-2">
|
||||
<span className="text-xs bg-green-100 text-green-700 px-2 py-1 rounded-full">
|
||||
Completado
|
||||
</span>
|
||||
<span className="text-xs text-gray-500">
|
||||
{progreso.puntuacion} pts
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<Button className="w-full mt-4" size="sm">
|
||||
<Play className="w-4 h-4 mr-2" />
|
||||
{completado ? 'Repetir' : 'Comenzar'}
|
||||
</Button>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Mensaje de completado */}
|
||||
{ejerciciosCompletados === ejerciciosConfig.length && ejerciciosConfig.length > 0 && (
|
||||
<Card className="mt-6 bg-green-50 border-green-200">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
|
||||
<Trophy className="w-6 h-6 text-green-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-green-900">¡Felicitaciones!</h3>
|
||||
<p className="text-green-700 text-sm">
|
||||
Has completado todos los ejercicios de este módulo.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Modulo1Page;
|
||||
499
frontend/src/pages/modulos/Modulo2Page.tsx
Normal file
499
frontend/src/pages/modulos/Modulo2Page.tsx
Normal file
@@ -0,0 +1,499 @@
|
||||
// @ts-nocheck
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useParams, Link } from 'react-router-dom';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
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, BookOpen, Trophy, ChevronRight } from 'lucide-react';
|
||||
|
||||
// Importar contenido del módulo 2
|
||||
import { default as demandaContent } from '../../content/modulo2/demanda';
|
||||
import { default as ofertaContent } from '../../content/modulo2/oferta';
|
||||
import { default as equilibrioContent } from '../../content/modulo2/equilibrio';
|
||||
|
||||
// Importar componentes de ejercicios
|
||||
import { ConstructorCurvas, SimuladorPrecios, IdentificarShocks } from '../../components/exercises/modulo2';
|
||||
|
||||
const TABS = ['Contenido', 'Ejercicios'] as const;
|
||||
type Tab = typeof TABS[number];
|
||||
|
||||
interface EjercicioConfig {
|
||||
id: string;
|
||||
titulo: string;
|
||||
descripcion: string;
|
||||
componente: React.ReactNode;
|
||||
}
|
||||
|
||||
export function Modulo2Page() {
|
||||
const { numero } = useParams<{ numero: string }>();
|
||||
const [activeTab, setActiveTab] = useState<Tab>('Contenido');
|
||||
const [activeSeccion, setActiveSeccion] = useState<'demanda' | 'oferta' | 'equilibrio'>('demanda');
|
||||
const [activeEjercicio, setActiveEjercicio] = useState<string | null>(null);
|
||||
const [progresos, setProgresos] = useState<Progreso[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
loadProgreso();
|
||||
}, []);
|
||||
|
||||
const loadProgreso = async () => {
|
||||
try {
|
||||
const data = await progresoService.getProgreso();
|
||||
setProgresos(data);
|
||||
} catch {
|
||||
// Silenciar error
|
||||
}
|
||||
};
|
||||
|
||||
const getProgresoForEjercicio = (ejercicioId: string) => {
|
||||
return progresos.find(
|
||||
(p) => p.modulo_numero === 2 && p.ejercicio_id === ejercicioId
|
||||
);
|
||||
};
|
||||
|
||||
const handleCompleteEjercicio = async (ejercicioId: string, puntuacion: number) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
await progresoService.saveProgreso(ejercicioId, puntuacion);
|
||||
await loadProgreso();
|
||||
} catch {
|
||||
// Silenciar error
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Configuración de ejercicios
|
||||
const ejerciciosConfig: EjercicioConfig[] = [
|
||||
{
|
||||
id: 'constructor-curvas',
|
||||
titulo: 'Constructor de Curvas de Oferta y Demanda',
|
||||
descripcion: 'Construye curvas de oferta y demanda arrastrando puntos para entender sus pendientes y movimientos.',
|
||||
componente: (
|
||||
<ConstructorCurvas
|
||||
ejercicioId="constructor-curvas"
|
||||
onComplete={(puntuacion) => handleCompleteEjercicio('constructor-curvas', puntuacion)}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 'simulador-precios',
|
||||
titulo: 'Simulador de Precios Intervenidos',
|
||||
descripcion: 'Ajusta precios máximos y mínimos para observar sus efectos en el mercado: escasez, superávit, y pérdida de bienestar.',
|
||||
componente: (
|
||||
<SimuladorPrecios
|
||||
ejercicioId="simulador-precios"
|
||||
onComplete={(puntuacion) => handleCompleteEjercicio('simulador-precios', puntuacion)}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 'identificar-shocks',
|
||||
titulo: 'Identificador de Shocks del Mercado',
|
||||
descripcion: 'Analiza escenarios económicos reales e identifica si afectan la oferta, la demanda, ambas, y cómo cambian precio y cantidad de equilibrio.',
|
||||
componente: (
|
||||
<IdentificarShocks
|
||||
ejercicioId="identificar-shocks"
|
||||
onComplete={(puntuacion) => handleCompleteEjercicio('identificar-shocks', puntuacion)}
|
||||
/>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
// Estructura de contenido del módulo 2
|
||||
const seccionesContenido = {
|
||||
demanda: {
|
||||
titulo: 'Ley de la Demanda',
|
||||
contenido: [
|
||||
{
|
||||
titulo: demandaContent.definicion.titulo,
|
||||
texto: demandaContent.definicion.definicion,
|
||||
elementos: demandaContent.definicion.elementosClave,
|
||||
},
|
||||
{
|
||||
titulo: demandaContent.ley.titulo,
|
||||
texto: demandaContent.ley.enunciado,
|
||||
efectos: demandaContent.ley.efectos,
|
||||
},
|
||||
{
|
||||
titulo: 'Factores que Desplazan la Demanda',
|
||||
texto: 'Los siguientes factores causan desplazamientos de la curva de demanda:',
|
||||
factores: demandaContent.factores,
|
||||
},
|
||||
],
|
||||
},
|
||||
oferta: {
|
||||
titulo: 'Ley de la Oferta',
|
||||
contenido: [
|
||||
{
|
||||
titulo: ofertaContent.definicion.titulo,
|
||||
texto: ofertaContent.definicion.definicion,
|
||||
elementos: ofertaContent.definicion.elementosClave,
|
||||
},
|
||||
{
|
||||
titulo: ofertaContent.ley.titulo,
|
||||
texto: ofertaContent.ley.enunciado,
|
||||
razones: ofertaContent.ley.razones,
|
||||
},
|
||||
{
|
||||
titulo: 'Factores que Desplazan la Oferta',
|
||||
texto: 'Los siguientes factores causan desplazamientos de la curva de oferta:',
|
||||
factores: ofertaContent.factores,
|
||||
},
|
||||
],
|
||||
},
|
||||
equilibrio: {
|
||||
titulo: 'Equilibrio de Mercado',
|
||||
contenido: [
|
||||
{
|
||||
titulo: equilibrioContent.definicion.titulo,
|
||||
texto: equilibrioContent.definicion.definicion,
|
||||
caracteristicas: equilibrioContent.definicion.caracteristicas,
|
||||
},
|
||||
{
|
||||
titulo: 'Excedentes del Mercado',
|
||||
texto: 'En el equilibrio se generan beneficios para consumidores y productores:',
|
||||
excedentes: [
|
||||
equilibrioContent.excedentes.excedenteConsumidor,
|
||||
equilibrioContent.excedentes.excedenteProductor,
|
||||
],
|
||||
},
|
||||
{
|
||||
titulo: 'Controles de Precio',
|
||||
texto: 'Los gobiernos pueden intervenir el mercado estableciendo precios máximos o mínimos:',
|
||||
controles: [
|
||||
equilibrioContent.controles.precioMaximo,
|
||||
equilibrioContent.controles.precioMinimo,
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
const currentSeccion = seccionesContenido[activeSeccion];
|
||||
|
||||
// Calcular progreso
|
||||
const ejerciciosCompletados = ejerciciosConfig.filter(
|
||||
(e) => getProgresoForEjercicio(e.id)?.completado
|
||||
).length;
|
||||
const porcentajeProgreso = Math.round((ejerciciosCompletados / ejerciciosConfig.length) * 100);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Header */}
|
||||
<header className="bg-white shadow-sm sticky top-0 z-10">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<Link to="/modulos" className="inline-flex items-center text-blue-600 hover:underline">
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Volver a Módulos
|
||||
</Link>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-gray-600">Progreso:</span>
|
||||
<div className="w-32 bg-gray-200 rounded-full h-2">
|
||||
<div
|
||||
className="bg-green-500 h-2 rounded-full transition-all"
|
||||
style={{ width: `${porcentajeProgreso}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-sm font-medium text-gray-700">{porcentajeProgreso}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Título del módulo */}
|
||||
<div className="bg-gradient-to-r from-green-600 to-green-800 text-white">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-16 h-16 bg-white/20 rounded-xl flex items-center justify-center text-3xl font-bold">
|
||||
2
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">Módulo 2: Oferta, Demanda y Equilibrio</h1>
|
||||
<p className="text-green-100 mt-1">
|
||||
Curvas de oferta y demanda, equilibrio de mercado y controles de precio
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
||||
<div className="flex gap-2 border-b border-gray-200">
|
||||
{TABS.map((tab) => (
|
||||
<button
|
||||
key={tab}
|
||||
onClick={() => {
|
||||
setActiveTab(tab);
|
||||
setActiveEjercicio(null);
|
||||
}}
|
||||
className={`px-6 py-3 font-medium text-sm transition-colors relative ${
|
||||
activeTab === tab
|
||||
? 'text-blue-600'
|
||||
: 'text-gray-500 hover:text-gray-700'
|
||||
}`}
|
||||
>
|
||||
{tab === 'Contenido' && <BookOpen className="w-4 h-4 inline mr-2" />}
|
||||
{tab === 'Ejercicios' && <Trophy className="w-4 h-4 inline mr-2" />}
|
||||
{tab}
|
||||
{activeTab === tab && (
|
||||
<motion.div
|
||||
layoutId="activeTab2"
|
||||
className="absolute bottom-0 left-0 right-0 h-0.5 bg-blue-600"
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Contenido según tab activo */}
|
||||
<AnimatePresence mode="wait">
|
||||
{activeTab === 'Contenido' ? (
|
||||
<motion.div
|
||||
key="contenido"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
className="mt-6 grid grid-cols-1 lg:grid-cols-4 gap-6"
|
||||
>
|
||||
{/* Navegación de secciones */}
|
||||
<div className="lg:col-span-1">
|
||||
<Card className="sticky top-24">
|
||||
<h3 className="font-semibold text-gray-900 mb-4">Secciones</h3>
|
||||
<nav className="space-y-2">
|
||||
{(Object.keys(seccionesContenido) as Array<keyof typeof seccionesContenido>).map((key) => (
|
||||
<button
|
||||
key={key}
|
||||
onClick={() => setActiveSeccion(key)}
|
||||
className={`w-full text-left px-3 py-2 rounded-lg text-sm transition-colors flex items-center justify-between ${
|
||||
activeSeccion === key
|
||||
? 'bg-green-50 text-green-700 font-medium'
|
||||
: 'text-gray-600 hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
{seccionesContenido[key].titulo}
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Contenido de la sección */}
|
||||
<div className="lg:col-span-3 space-y-6">
|
||||
<Card>
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6">{currentSeccion.titulo}</h2>
|
||||
<div className="space-y-6">
|
||||
{currentSeccion.contenido.map((item, index) => (
|
||||
<div key={index} className="border-b border-gray-100 last:border-0 pb-6 last:pb-0">
|
||||
<h3 className="text-lg font-semibold text-gray-800 mb-3">{item.titulo}</h3>
|
||||
<p className="text-gray-600 mb-4 leading-relaxed">{item.texto}</p>
|
||||
|
||||
{/* Mostrar elementos clave si existen */}
|
||||
{item.elementos && (
|
||||
<ul className="list-disc list-inside space-y-2 text-gray-600">
|
||||
{item.elementos.map((el: any, i: number) => (
|
||||
<li key={i}>
|
||||
<strong>{el.elemento}:</strong> {el.descripcion}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
|
||||
{/* Mostrar efectos/razones si existen */}
|
||||
{item.efectos && (
|
||||
<div className="space-y-3">
|
||||
{item.efectos.map((efecto: any, i: number) => (
|
||||
<div key={i} className="bg-gray-50 p-3 rounded-lg">
|
||||
<h4 className="font-medium text-gray-800">{efecto.nombre}</h4>
|
||||
<p className="text-sm text-gray-600">{efecto.descripcion}</p>
|
||||
<p className="text-sm text-blue-600 mt-1">Ejemplo: {efecto.ejemplo}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Mostrar razones si existen */}
|
||||
{item.razones && (
|
||||
<div className="space-y-3">
|
||||
{item.razones.map((razon: any, i: number) => (
|
||||
<div key={i} className="bg-gray-50 p-3 rounded-lg">
|
||||
<h4 className="font-medium text-gray-800">{razon.nombre}</h4>
|
||||
<p className="text-sm text-gray-600">{razon.descripcion}</p>
|
||||
<p className="text-sm text-green-600 mt-1">Ejemplo: {razon.ejemplo}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Mostrar factores si existen */}
|
||||
{item.factores && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
{item.factores.map((factor: any, i: number) => (
|
||||
<div key={i} className="bg-blue-50 p-3 rounded-lg border border-blue-100">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="text-lg">{factor.icono}</span>
|
||||
<h4 className="font-medium text-blue-900">{factor.nombre}</h4>
|
||||
</div>
|
||||
<p className="text-sm text-blue-700">{factor.descripcion}</p>
|
||||
<p className="text-sm text-blue-600 mt-1 italic">{factor.ejemplo}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Mostrar características si existen */}
|
||||
{item.caracteristicas && (
|
||||
<ul className="list-disc list-inside space-y-2 text-gray-600">
|
||||
{item.caracteristicas.map((car: any, i: number) => (
|
||||
<li key={i}>
|
||||
<strong>{car.caracteristica}:</strong> {car.explicacion}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
|
||||
{/* Mostrar excedentes si existen */}
|
||||
{item.excedentes && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
{item.excedentes.map((exc: any, i: number) => (
|
||||
<div key={i} className="bg-purple-50 p-3 rounded-lg border border-purple-100">
|
||||
<h4 className="font-medium text-purple-900">{exc.nombre}</h4>
|
||||
<p className="text-sm text-purple-700">{exc.definicion}</p>
|
||||
<p className="text-sm text-purple-600 mt-1">Fórmula: {exc.formula}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Mostrar controles si existen */}
|
||||
{item.controles && (
|
||||
<div className="space-y-3">
|
||||
{item.controles.map((control: any, i: number) => (
|
||||
<div key={i} className="bg-orange-50 p-3 rounded-lg border border-orange-100">
|
||||
<h4 className="font-medium text-orange-900">{control.nombre}</h4>
|
||||
<p className="text-sm text-orange-700">{control.definicion}</p>
|
||||
<p className="text-sm text-orange-600 mt-1">
|
||||
Condición: {control.condicionEfectivo}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-green-50 border-green-200">
|
||||
<h3 className="font-semibold text-green-900 mb-3">Ejercicios Relacionados</h3>
|
||||
<p className="text-green-700 text-sm mb-4">
|
||||
Pon a prueba tus conocimientos con ejercicios interactivos sobre oferta, demanda y equilibrio
|
||||
</p>
|
||||
<Button
|
||||
onClick={() => setActiveTab('Ejercicios')}
|
||||
variant="outline"
|
||||
className="border-green-300 text-green-700 hover:bg-green-100"
|
||||
>
|
||||
<Play className="w-4 h-4 mr-2" />
|
||||
Ir a Ejercicios
|
||||
</Button>
|
||||
</Card>
|
||||
</div>
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div
|
||||
key="ejercicios"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
className="mt-6"
|
||||
>
|
||||
{activeEjercicio ? (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<Button variant="ghost" onClick={() => setActiveEjercicio(null)}>
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Volver a ejercicios
|
||||
</Button>
|
||||
{loading && <span className="text-sm text-gray-500">Guardando progreso...</span>}
|
||||
</div>
|
||||
{ejerciciosConfig.find((e) => e.id === activeEjercicio)?.componente}
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{ejerciciosConfig.map((ejercicio, index) => {
|
||||
const progreso = getProgresoForEjercicio(ejercicio.id);
|
||||
const completado = progreso?.completado || false;
|
||||
|
||||
return (
|
||||
<Card
|
||||
key={ejercicio.id}
|
||||
className="hover:shadow-lg transition-shadow cursor-pointer"
|
||||
onClick={() => setActiveEjercicio(ejercicio.id)}
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<div
|
||||
className={`w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0 ${
|
||||
completado ? 'bg-green-100 text-green-600' : 'bg-green-100 text-green-600'
|
||||
}`}
|
||||
>
|
||||
{completado ? (
|
||||
<CheckCircle className="w-6 h-6" />
|
||||
) : (
|
||||
<span className="text-xl font-bold">{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 mt-1">{ejercicio.descripcion}</p>
|
||||
{completado && progreso && (
|
||||
<div className="mt-3 flex items-center gap-2">
|
||||
<span className="text-xs bg-green-100 text-green-700 px-2 py-1 rounded-full">
|
||||
Completado
|
||||
</span>
|
||||
<span className="text-xs text-gray-500">
|
||||
{progreso.puntuacion} pts
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<Button className="w-full mt-4" size="sm">
|
||||
<Play className="w-4 h-4 mr-2" />
|
||||
{completado ? 'Repetir' : 'Comenzar'}
|
||||
</Button>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{ejerciciosCompletados === ejerciciosConfig.length && ejerciciosConfig.length > 0 && (
|
||||
<Card className="mt-6 bg-green-50 border-green-200">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
|
||||
<Trophy className="w-6 h-6 text-green-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-green-900">¡Felicitaciones!</h3>
|
||||
<p className="text-green-700 text-sm">
|
||||
Has completado todos los ejercicios de este módulo.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Modulo2Page;
|
||||
610
frontend/src/pages/modulos/Modulo3Page.tsx
Normal file
610
frontend/src/pages/modulos/Modulo3Page.tsx
Normal file
@@ -0,0 +1,610 @@
|
||||
// @ts-nocheck
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useParams, Link } from 'react-router-dom';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
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, BookOpen, Trophy, ChevronRight } from 'lucide-react';
|
||||
|
||||
// Importar contenido del módulo 3
|
||||
import { conceptosElasticidad } from '../../content/modulo3/conceptos';
|
||||
import { tiposElasticidad } from '../../content/modulo3/tipos';
|
||||
import { clasificacionBienes } from '../../content/modulo3/clasificacion';
|
||||
import { ejercicios as modulo3Ejercicios } from '../../content/modulo3/ejercicios';
|
||||
|
||||
// Importar componentes de ejercicios
|
||||
import { CalculadoraElasticidad, ClasificadorBienes, EjerciciosExamen } from '../../components/exercises/modulo3';
|
||||
|
||||
const TABS = ['Contenido', 'Ejercicios'] as const;
|
||||
type Tab = typeof TABS[number];
|
||||
|
||||
interface EjercicioConfig {
|
||||
id: string;
|
||||
titulo: string;
|
||||
descripcion: string;
|
||||
componente: React.ReactNode;
|
||||
}
|
||||
|
||||
interface ContenidoItem {
|
||||
titulo: string;
|
||||
texto: string;
|
||||
interpretacion?: string;
|
||||
formula?: { latex?: string; ecuacion?: string } | string;
|
||||
interpretaciones?: Array<{
|
||||
rango: string;
|
||||
clasificacion: string;
|
||||
significado?: string;
|
||||
descripcion?: string;
|
||||
ejemplo?: string;
|
||||
}>;
|
||||
factores?: Array<{
|
||||
factor?: string;
|
||||
nombre?: string;
|
||||
efecto?: string;
|
||||
descripcion?: string;
|
||||
explicacion?: string;
|
||||
}>;
|
||||
reglas?: Array<{
|
||||
elasticidad: string;
|
||||
efectoPrecioArriba: string;
|
||||
efectoPrecioAbajo: string;
|
||||
}>;
|
||||
clasificacion?: Array<{
|
||||
tipo: string;
|
||||
descripcion: string;
|
||||
condicion: string;
|
||||
subtipos?: Array<{ tipo: string; rango: string }>;
|
||||
}>;
|
||||
categorias?: Array<{
|
||||
tipo: string;
|
||||
descripcion: string;
|
||||
condicion: string;
|
||||
ejemplos?: string[];
|
||||
}>;
|
||||
matriz?: Array<{
|
||||
combinacion: string;
|
||||
ejemplo: string;
|
||||
caracteristicas: string;
|
||||
}>;
|
||||
determinantes?: string[];
|
||||
}
|
||||
|
||||
export function Modulo3Page() {
|
||||
const { numero } = useParams<{ numero: string }>();
|
||||
const [activeTab, setActiveTab] = useState<Tab>('Contenido');
|
||||
const [activeSeccion, setActiveSeccion] = useState<'conceptos' | 'tipos' | 'clasificacion'>('conceptos');
|
||||
const [activeEjercicio, setActiveEjercicio] = useState<string | null>(null);
|
||||
const [progresos, setProgresos] = useState<Progreso[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
loadProgreso();
|
||||
}, []);
|
||||
|
||||
const loadProgreso = async () => {
|
||||
try {
|
||||
const data = await progresoService.getProgreso();
|
||||
setProgresos(data);
|
||||
} catch {
|
||||
// Silenciar error
|
||||
}
|
||||
};
|
||||
|
||||
const getProgresoForEjercicio = (ejercicioId: string) => {
|
||||
return progresos.find(
|
||||
(p) => p.modulo_numero === 3 && p.ejercicio_id === ejercicioId
|
||||
);
|
||||
};
|
||||
|
||||
const handleCompleteEjercicio = async (ejercicioId: string, puntuacion: number) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
await progresoService.saveProgreso(ejercicioId, puntuacion);
|
||||
await loadProgreso();
|
||||
} catch {
|
||||
// Silenciar error
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Configuración de ejercicios
|
||||
const ejerciciosConfig: EjercicioConfig[] = [
|
||||
{
|
||||
id: 'calculadora-elasticidad',
|
||||
titulo: 'Calculadora de Elasticidad',
|
||||
descripcion: 'Calcula paso a paso la elasticidad precio, ingreso y cruzada con ejemplos prácticos.',
|
||||
componente: (
|
||||
<CalculadoraElasticidad
|
||||
ejercicioId="calculadora-elasticidad"
|
||||
onComplete={(puntuacion) => handleCompleteEjercicio('calculadora-elasticidad', puntuacion)}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 'clasificador-bienes',
|
||||
titulo: 'Clasificador de Bienes',
|
||||
descripcion: 'Clasifica bienes según su elasticidad ingreso y cruzada. Identifica normales, inferiores, lujos, sustitutos y complementos.',
|
||||
componente: (
|
||||
<ClasificadorBienes
|
||||
ejercicioId="clasificador-bienes"
|
||||
onComplete={(puntuacion) => handleCompleteEjercicio('clasificador-bienes', puntuacion)}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 'ejercicios-examen',
|
||||
titulo: 'Ejercicios Tipo Examen',
|
||||
descripcion: 'Resuelve problemas integradores de elasticidad con dificultad de examen.',
|
||||
componente: (
|
||||
<EjerciciosExamen
|
||||
ejercicioId="ejercicios-examen"
|
||||
onComplete={(puntuacion) => handleCompleteEjercicio('ejercicios-examen', puntuacion)}
|
||||
/>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
// Estructura de contenido del módulo 3
|
||||
const seccionesContenido: {
|
||||
conceptos: { titulo: string; contenido: ContenidoItem[] };
|
||||
tipos: { titulo: string; contenido: ContenidoItem[] };
|
||||
clasificacion: { titulo: string; contenido: ContenidoItem[] };
|
||||
} = {
|
||||
conceptos: {
|
||||
titulo: 'Conceptos Fundamentales',
|
||||
contenido: [
|
||||
{
|
||||
titulo: conceptosElasticidad.definicionElasticidad.titulo,
|
||||
texto: conceptosElasticidad.definicionElasticidad.definicion,
|
||||
interpretacion: conceptosElasticidad.definicionElasticidad.interpretacionIntuitiva,
|
||||
formula: conceptosElasticidad.definicionElasticidad.formulaGeneral,
|
||||
},
|
||||
{
|
||||
titulo: conceptosElasticidad.elasticidadPrecioDemanda.titulo,
|
||||
texto: conceptosElasticidad.elasticidadPrecioDemanda.definicion,
|
||||
interpretaciones: conceptosElasticidad.elasticidadPrecioDemanda.interpretacion,
|
||||
},
|
||||
{
|
||||
titulo: conceptosElasticidad.determinantesElasticidad.titulo,
|
||||
texto: 'Los siguientes factores determinan la elasticidad de un bien:',
|
||||
factores: conceptosElasticidad.determinantesElasticidad.factores,
|
||||
},
|
||||
{
|
||||
titulo: conceptosElasticidad.relacionIngresoTotal.titulo,
|
||||
texto: conceptosElasticidad.relacionIngresoTotal.definicion,
|
||||
reglas: conceptosElasticidad.relacionIngresoTotal.reglas,
|
||||
},
|
||||
],
|
||||
},
|
||||
tipos: {
|
||||
titulo: 'Tipos de Elasticidad',
|
||||
contenido: [
|
||||
{
|
||||
titulo: 'Elasticidad Precio de la Demanda (Ed)',
|
||||
texto: tiposElasticidad.tipos[0].descripcion,
|
||||
formula: tiposElasticidad.tipos[0].formula,
|
||||
determinantes: tiposElasticidad.tipos[0].determinantes,
|
||||
},
|
||||
{
|
||||
titulo: 'Elasticidad Ingreso de la Demanda (Ei)',
|
||||
texto: tiposElasticidad.tipos[1].descripcion,
|
||||
formula: tiposElasticidad.tipos[1].formula,
|
||||
clasificacion: tiposElasticidad.tipos[1].clasificacionBienes,
|
||||
},
|
||||
{
|
||||
titulo: 'Elasticidad Cruzada (Exy)',
|
||||
texto: tiposElasticidad.tipos[2].descripcion,
|
||||
formula: tiposElasticidad.tipos[2].formula,
|
||||
categorias: tiposElasticidad.tipos[2].clasificacionBienes,
|
||||
},
|
||||
{
|
||||
titulo: 'Elasticidad Precio de la Oferta (Es)',
|
||||
texto: tiposElasticidad.tipos[3].descripcion,
|
||||
formula: tiposElasticidad.tipos[3].formula,
|
||||
interpretacion: tiposElasticidad.tipos[3].interpretacion,
|
||||
},
|
||||
],
|
||||
},
|
||||
clasificacion: {
|
||||
titulo: 'Clasificación de Bienes',
|
||||
contenido: [
|
||||
{
|
||||
titulo: 'Según Elasticidad Ingreso',
|
||||
texto: clasificacionBienes.clasificacionPorIngreso.descripcion,
|
||||
formula: clasificacionBienes.clasificacionPorIngreso.formulaReferencia,
|
||||
categorias: clasificacionBienes.clasificacionPorIngreso.categorias,
|
||||
},
|
||||
{
|
||||
titulo: 'Según Elasticidad Cruzada',
|
||||
texto: clasificacionBienes.clasificacionPorElasticidadCruzada.descripcion,
|
||||
formula: clasificacionBienes.clasificacionPorElasticidadCruzada.formulaReferencia,
|
||||
categorias: clasificacionBienes.clasificacionPorElasticidadCruzada.categorias,
|
||||
},
|
||||
{
|
||||
titulo: 'Matriz de Clasificación Completa',
|
||||
texto: clasificacionBienes.matrizClasificacionCompleta.descripcion,
|
||||
matriz: clasificacionBienes.matrizClasificacionCompleta.matriz,
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
const currentSeccion = seccionesContenido[activeSeccion];
|
||||
|
||||
// Calcular progreso
|
||||
const ejerciciosCompletados = ejerciciosConfig.filter(
|
||||
(e) => getProgresoForEjercicio(e.id)?.completado
|
||||
).length;
|
||||
const porcentajeProgreso = Math.round((ejerciciosCompletados / ejerciciosConfig.length) * 100);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Header */}
|
||||
<header className="bg-white shadow-sm sticky top-0 z-10">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<Link to="/modulos" className="inline-flex items-center text-blue-600 hover:underline">
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Volver a Módulos
|
||||
</Link>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-gray-600">Progreso:</span>
|
||||
<div className="w-32 bg-gray-200 rounded-full h-2">
|
||||
<div
|
||||
className="bg-green-500 h-2 rounded-full transition-all"
|
||||
style={{ width: `${porcentajeProgreso}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-sm font-medium text-gray-700">{porcentajeProgreso}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Título del módulo */}
|
||||
<div className="bg-gradient-to-r from-purple-600 to-purple-800 text-white">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-16 h-16 bg-white/20 rounded-xl flex items-center justify-center text-3xl font-bold">
|
||||
3
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">Módulo 3: Elasticidad</h1>
|
||||
<p className="text-purple-100 mt-1">
|
||||
Tipos de elasticidad, clasificación de bienes y análisis de sensibilidad
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
||||
<div className="flex gap-2 border-b border-gray-200">
|
||||
{TABS.map((tab) => (
|
||||
<button
|
||||
key={tab}
|
||||
onClick={() => {
|
||||
setActiveTab(tab);
|
||||
setActiveEjercicio(null);
|
||||
}}
|
||||
className={`px-6 py-3 font-medium text-sm transition-colors relative ${
|
||||
activeTab === tab
|
||||
? 'text-blue-600'
|
||||
: 'text-gray-500 hover:text-gray-700'
|
||||
}`}
|
||||
>
|
||||
{tab === 'Contenido' && <BookOpen className="w-4 h-4 inline mr-2" />}
|
||||
{tab === 'Ejercicios' && <Trophy className="w-4 h-4 inline mr-2" />}
|
||||
{tab}
|
||||
{activeTab === tab && (
|
||||
<motion.div
|
||||
layoutId="activeTab3"
|
||||
className="absolute bottom-0 left-0 right-0 h-0.5 bg-blue-600"
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Contenido según tab activo */}
|
||||
<AnimatePresence mode="wait">
|
||||
{activeTab === 'Contenido' ? (
|
||||
<motion.div
|
||||
key="contenido"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
className="mt-6 grid grid-cols-1 lg:grid-cols-4 gap-6"
|
||||
>
|
||||
{/* Navegación de secciones */}
|
||||
<div className="lg:col-span-1">
|
||||
<Card className="sticky top-24">
|
||||
<h3 className="font-semibold text-gray-900 mb-4">Secciones</h3>
|
||||
<nav className="space-y-2">
|
||||
{(Object.keys(seccionesContenido) as Array<keyof typeof seccionesContenido>).map((key) => (
|
||||
<button
|
||||
key={key}
|
||||
onClick={() => setActiveSeccion(key)}
|
||||
className={`w-full text-left px-3 py-2 rounded-lg text-sm transition-colors flex items-center justify-between ${
|
||||
activeSeccion === key
|
||||
? 'bg-purple-50 text-purple-700 font-medium'
|
||||
: 'text-gray-600 hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
{seccionesContenido[key].titulo}
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Contenido de la sección */}
|
||||
<div className="lg:col-span-3 space-y-6">
|
||||
<Card>
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6">{currentSeccion.titulo}</h2>
|
||||
<div className="space-y-6">
|
||||
{currentSeccion.contenido.map((item, index) => (
|
||||
<div key={index} className="border-b border-gray-100 last:border-0 pb-6 last:pb-0">
|
||||
<h3 className="text-lg font-semibold text-gray-800 mb-3">{item.titulo}</h3>
|
||||
<p className="text-gray-600 mb-4 leading-relaxed">{item.texto}</p>
|
||||
|
||||
{/* Mostrar interpretación si existe */}
|
||||
{item.interpretacion && (
|
||||
<div className="bg-blue-50 p-4 rounded-lg mb-4">
|
||||
<p className="text-blue-800 text-sm">{item.interpretacion}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Mostrar fórmula si existe */}
|
||||
{item.formula && (
|
||||
<div className="bg-gray-100 p-4 rounded-lg mb-4">
|
||||
<pre className="text-sm text-gray-800 overflow-x-auto">
|
||||
{item.formula.latex || item.formula.ecuacion || item.formula}
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Mostrar interpretaciones de elasticidad */}
|
||||
{item.interpretaciones && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
{item.interpretaciones.map((interp: any, i: number) => (
|
||||
<div key={i} className={`p-3 rounded-lg border ${
|
||||
interp.rango === '|Ed| > 1' || interp.rango === 'Es > 1'
|
||||
? 'bg-green-50 border-green-200'
|
||||
: interp.rango === '|Ed| < 1' || interp.rango === 'Es < 1'
|
||||
? 'bg-yellow-50 border-yellow-200'
|
||||
: 'bg-blue-50 border-blue-200'
|
||||
}`}>
|
||||
<h4 className="font-medium text-gray-800">{interp.clasificacion}</h4>
|
||||
<p className="text-sm text-gray-600">{interp.significado || interp.descripcion}</p>
|
||||
{interp.ejemplo && (
|
||||
<p className="text-sm text-gray-500 mt-1">Ejemplo: {interp.ejemplo}</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Mostrar factores determinantes */}
|
||||
{item.factores && (
|
||||
<div className="space-y-2">
|
||||
{item.factores.map((factor: any, i: number) => (
|
||||
<div key={i} className="flex items-start gap-3 p-3 bg-gray-50 rounded-lg">
|
||||
<div className="flex-1">
|
||||
<h4 className="font-medium text-gray-800">{factor.factor || factor.nombre}</h4>
|
||||
<p className="text-sm text-gray-600">{factor.efecto || factor.descripcion}</p>
|
||||
{factor.explicacion && (
|
||||
<p className="text-sm text-gray-500 mt-1">{factor.explicacion}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Mostrar reglas de ingreso total */}
|
||||
{item.reglas && (
|
||||
<div className="space-y-3">
|
||||
{item.reglas.map((regla: any, i: number) => (
|
||||
<div key={i} className="bg-purple-50 p-3 rounded-lg border border-purple-200">
|
||||
<h4 className="font-medium text-purple-900">{regla.elasticidad}</h4>
|
||||
<div className="text-sm text-purple-700 mt-1 space-y-1">
|
||||
<p>Precio ↑: {regla.efectoPrecioArriba}</p>
|
||||
<p>Precio ↓: {regla.efectoPrecioAbajo}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Mostrar clasificación de bienes por ingreso */}
|
||||
{item.clasificacion && item.titulo?.includes('Ingreso') && (
|
||||
<div className="space-y-3">
|
||||
{item.clasificacion.map((cat: any, i: number) => (
|
||||
<div key={i} className={`p-3 rounded-lg border ${
|
||||
cat.condicion?.includes('> 0') && !cat.condicion?.includes('<')
|
||||
? 'bg-green-50 border-green-200'
|
||||
: 'bg-red-50 border-red-200'
|
||||
}`}>
|
||||
<h4 className="font-medium text-gray-800">{cat.tipo}</h4>
|
||||
<p className="text-sm text-gray-600">{cat.descripcion}</p>
|
||||
<p className="text-sm font-medium mt-1">Condición: {cat.condicion}</p>
|
||||
{cat.subtipos && (
|
||||
<div className="mt-2 space-y-1">
|
||||
{cat.subtipos.map((sub: any, j: number) => (
|
||||
<div key={j} className="text-sm text-gray-600 pl-3 border-l-2 border-gray-300">
|
||||
<strong>{sub.tipo}:</strong> {sub.rango}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Mostrar clasificación por elasticidad cruzada */}
|
||||
{item.categorias && item.titulo?.includes('Cruzada') && (
|
||||
<div className="space-y-3">
|
||||
{item.categorias.map((cat: any, i: number) => (
|
||||
<div key={i} className={`p-3 rounded-lg border ${
|
||||
cat.condicion?.includes('> 0')
|
||||
? 'bg-green-50 border-green-200'
|
||||
: cat.condicion?.includes('< 0')
|
||||
? 'bg-red-50 border-red-200'
|
||||
: 'bg-gray-50 border-gray-200'
|
||||
}`}>
|
||||
<h4 className="font-medium text-gray-800">{cat.tipo}</h4>
|
||||
<p className="text-sm text-gray-600">{cat.descripcion}</p>
|
||||
<p className="text-sm font-medium mt-1">Exy {cat.condicion}</p>
|
||||
{cat.ejemplos && (
|
||||
<p className="text-sm text-gray-500 mt-1">
|
||||
Ejemplos: {cat.ejemplos.slice(0, 3).join(', ')}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Mostrar matriz de clasificación */}
|
||||
{item.matriz && (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full text-sm">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th className="px-3 py-2 text-left font-medium text-gray-700">Combinación</th>
|
||||
<th className="px-3 py-2 text-left font-medium text-gray-700">Ejemplo</th>
|
||||
<th className="px-3 py-2 text-left font-medium text-gray-700">Características</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-100">
|
||||
{item.matriz.map((fila: any, i: number) => (
|
||||
<tr key={i}>
|
||||
<td className="px-3 py-2 font-medium text-gray-800">{fila.combinacion}</td>
|
||||
<td className="px-3 py-2 text-gray-600">{fila.ejemplo}</td>
|
||||
<td className="px-3 py-2 text-gray-600">{fila.caracteristicas}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-purple-50 border-purple-200">
|
||||
<h3 className="font-semibold text-purple-900 mb-3">Ejercicios Relacionados</h3>
|
||||
<p className="text-purple-700 text-sm mb-4">
|
||||
Practica el cálculo y clasificación de elasticidad con ejercicios interactivos
|
||||
</p>
|
||||
<Button
|
||||
onClick={() => setActiveTab('Ejercicios')}
|
||||
variant="outline"
|
||||
className="border-purple-300 text-purple-700 hover:bg-purple-100"
|
||||
>
|
||||
<Play className="w-4 h-4 mr-2" />
|
||||
Ir a Ejercicios
|
||||
</Button>
|
||||
</Card>
|
||||
</div>
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div
|
||||
key="ejercicios"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
className="mt-6"
|
||||
>
|
||||
{activeEjercicio ? (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<Button variant="ghost" onClick={() => setActiveEjercicio(null)}>
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Volver a ejercicios
|
||||
</Button>
|
||||
{loading && <span className="text-sm text-gray-500">Guardando progreso...</span>}
|
||||
</div>
|
||||
{ejerciciosConfig.find((e) => e.id === activeEjercicio)?.componente}
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{ejerciciosConfig.map((ejercicio, index) => {
|
||||
const progreso = getProgresoForEjercicio(ejercicio.id);
|
||||
const completado = progreso?.completado || false;
|
||||
|
||||
return (
|
||||
<Card
|
||||
key={ejercicio.id}
|
||||
className="hover:shadow-lg transition-shadow cursor-pointer"
|
||||
onClick={() => setActiveEjercicio(ejercicio.id)}
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<div
|
||||
className={`w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0 ${
|
||||
completado ? 'bg-green-100 text-green-600' : 'bg-purple-100 text-purple-600'
|
||||
}`}
|
||||
>
|
||||
{completado ? (
|
||||
<CheckCircle className="w-6 h-6" />
|
||||
) : (
|
||||
<span className="text-xl font-bold">{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 mt-1">{ejercicio.descripcion}</p>
|
||||
{completado && progreso && (
|
||||
<div className="mt-3 flex items-center gap-2">
|
||||
<span className="text-xs bg-green-100 text-green-700 px-2 py-1 rounded-full">
|
||||
Completado
|
||||
</span>
|
||||
<span className="text-xs text-gray-500">
|
||||
{progreso.puntuacion} pts
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<Button className="w-full mt-4" size="sm">
|
||||
<Play className="w-4 h-4 mr-2" />
|
||||
{completado ? 'Repetir' : 'Comenzar'}
|
||||
</Button>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{ejerciciosCompletados === ejerciciosConfig.length && ejerciciosConfig.length > 0 && (
|
||||
<Card className="mt-6 bg-green-50 border-green-200">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
|
||||
<Trophy className="w-6 h-6 text-green-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-green-900">¡Felicitaciones!</h3>
|
||||
<p className="text-green-700 text-sm">
|
||||
Has completado todos los ejercicios de este módulo.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Modulo3Page;
|
||||
423
frontend/src/pages/modulos/Modulo4Page.tsx
Normal file
423
frontend/src/pages/modulos/Modulo4Page.tsx
Normal file
@@ -0,0 +1,423 @@
|
||||
// @ts-nocheck
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useParams, Link } from 'react-router-dom';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
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, BookOpen, Trophy, ChevronRight } from 'lucide-react';
|
||||
|
||||
// Importar contenido del módulo 4
|
||||
import { produccion } from '../../content/modulo4/produccion';
|
||||
import { costos } from '../../content/modulo4/costos';
|
||||
import { mercado } from '../../content/modulo4/mercado';
|
||||
|
||||
// Importar componentes de ejercicios
|
||||
import { CalculadoraCostos, SimuladorProduccion, VisualizadorExcedentes } from '../../components/exercises/modulo4';
|
||||
|
||||
const TABS = ['Contenido', 'Ejercicios'] as const;
|
||||
type Tab = typeof TABS[number];
|
||||
|
||||
interface EjercicioConfig {
|
||||
id: string;
|
||||
titulo: string;
|
||||
descripcion: string;
|
||||
componente: React.ReactNode;
|
||||
}
|
||||
|
||||
export function Modulo4Page() {
|
||||
const { numero: _numero } = useParams<{ numero: string }>();
|
||||
const [activeTab, setActiveTab] = useState<Tab>('Contenido');
|
||||
const [activeSeccion, setActiveSeccion] = useState<'produccion' | 'costos' | 'mercado'>('produccion');
|
||||
const [activeEjercicio, setActiveEjercicio] = useState<string | null>(null);
|
||||
const [progresos, setProgresos] = useState<Progreso[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
loadProgreso();
|
||||
}, []);
|
||||
|
||||
const loadProgreso = async () => {
|
||||
try {
|
||||
const data = await progresoService.getProgreso();
|
||||
setProgresos(data);
|
||||
} catch {
|
||||
// Silenciar error
|
||||
}
|
||||
};
|
||||
|
||||
const getProgresoForEjercicio = (ejercicioId: string) => {
|
||||
return progresos.find(
|
||||
(p) => p.modulo_numero === 4 && p.ejercicio_id === ejercicioId
|
||||
);
|
||||
};
|
||||
|
||||
const handleCompleteEjercicio = async (ejercicioId: string, puntuacion: number) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
await progresoService.saveProgreso(ejercicioId, puntuacion);
|
||||
await loadProgreso();
|
||||
} catch {
|
||||
// Silenciar error
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Configuración de ejercicios
|
||||
const ejerciciosConfig: EjercicioConfig[] = [
|
||||
{
|
||||
id: 'calculadora-costos',
|
||||
titulo: 'Calculadora de Costos',
|
||||
descripcion: 'Ingresa CF, CV para cada nivel de producción y calcula automáticamente todos los costos medios y marginales.',
|
||||
componente: (
|
||||
<CalculadoraCostos
|
||||
ejercicioId="calculadora-costos"
|
||||
onComplete={() => handleCompleteEjercicio('calculadora-costos', 100)}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 'simulador-produccion',
|
||||
titulo: 'Simulador de Producción',
|
||||
descripcion: 'Dado un precio de mercado y curva de costos, encuentra la cantidad óptima y determina si debes producir o cerrar.',
|
||||
componente: (
|
||||
<SimuladorProduccion
|
||||
ejercicioId="simulador-produccion"
|
||||
onComplete={() => handleCompleteEjercicio('simulador-produccion', 100)}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 'visualizador-excedentes',
|
||||
titulo: 'Visualizador de Excedentes',
|
||||
descripcion: 'Interactúa con el gráfico para ver cómo cambia el excedente del productor al variar el precio y la cantidad.',
|
||||
componente: (
|
||||
<VisualizadorExcedentes
|
||||
ejercicioId="visualizador-excedentes"
|
||||
onComplete={() => handleCompleteEjercicio('visualizador-excedentes', 100)}
|
||||
/>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
// Estructura de contenido del módulo 4
|
||||
const seccionesContenido = {
|
||||
produccion: {
|
||||
titulo: produccion.titulo,
|
||||
contenido: produccion.contenido,
|
||||
},
|
||||
costos: {
|
||||
titulo: costos.titulo,
|
||||
contenido: costos.contenido,
|
||||
},
|
||||
mercado: {
|
||||
titulo: mercado.titulo,
|
||||
contenido: mercado.contenido,
|
||||
},
|
||||
};
|
||||
|
||||
const currentSeccion = seccionesContenido[activeSeccion];
|
||||
|
||||
// Calcular progreso
|
||||
const ejerciciosCompletados = ejerciciosConfig.filter(
|
||||
(e) => getProgresoForEjercicio(e.id)?.completado
|
||||
).length;
|
||||
const porcentajeProgreso = Math.round((ejerciciosCompletados / ejerciciosConfig.length) * 100);
|
||||
|
||||
// Función auxiliar para renderizar contenido markdown-like
|
||||
const renderContenido = (texto: string) => {
|
||||
const partes = texto.split(/(\*\*.*?\*\*|\$.*?\$|`.*?`|\n\n)/);
|
||||
return partes.map((parte, index) => {
|
||||
if (parte.startsWith('**') && parte.endsWith('**')) {
|
||||
return <strong key={index}>{parte.slice(2, -2)}</strong>;
|
||||
}
|
||||
if (parte.startsWith('$') && parte.endsWith('$')) {
|
||||
return <code key={index} className="bg-gray-100 px-1 rounded">{parte.slice(1, -1)}</code>;
|
||||
}
|
||||
if (parte.startsWith('`') && parte.endsWith('`')) {
|
||||
return <code key={index} className="bg-gray-100 px-1 rounded text-red-600">{parte.slice(1, -1)}</code>;
|
||||
}
|
||||
if (parte === '\n\n') {
|
||||
return <br key={index} />;
|
||||
}
|
||||
return <span key={index}>{parte}</span>;
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Header */}
|
||||
<header className="bg-white shadow-sm sticky top-0 z-10">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<Link to="/modulos" className="inline-flex items-center text-blue-600 hover:underline">
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Volver a Módulos
|
||||
</Link>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-gray-600">Progreso:</span>
|
||||
<div className="w-32 bg-gray-200 rounded-full h-2">
|
||||
<div
|
||||
className="bg-green-500 h-2 rounded-full transition-all"
|
||||
style={{ width: `${porcentajeProgreso}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-sm font-medium text-gray-700">{porcentajeProgreso}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Título del módulo */}
|
||||
<div className="bg-gradient-to-r from-orange-600 to-orange-800 text-white">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-16 h-16 bg-white/20 rounded-xl flex items-center justify-center text-3xl font-bold">
|
||||
4
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">Módulo 4: Teoría del Productor</h1>
|
||||
<p className="text-orange-100 mt-1">
|
||||
Producción, costos y competencia perfecta
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
||||
<div className="flex gap-2 border-b border-gray-200">
|
||||
{TABS.map((tab) => (
|
||||
<button
|
||||
key={tab}
|
||||
onClick={() => {
|
||||
setActiveTab(tab);
|
||||
setActiveEjercicio(null);
|
||||
}}
|
||||
className={`px-6 py-3 font-medium text-sm transition-colors relative ${
|
||||
activeTab === tab
|
||||
? 'text-blue-600'
|
||||
: 'text-gray-500 hover:text-gray-700'
|
||||
}`}
|
||||
>
|
||||
{tab === 'Contenido' && <BookOpen className="w-4 h-4 inline mr-2" />}
|
||||
{tab === 'Ejercicios' && <Trophy className="w-4 h-4 inline mr-2" />}
|
||||
{tab}
|
||||
{activeTab === tab && (
|
||||
<motion.div
|
||||
layoutId="activeTab4"
|
||||
className="absolute bottom-0 left-0 right-0 h-0.5 bg-blue-600"
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Contenido según tab activo */}
|
||||
<AnimatePresence mode="wait">
|
||||
{activeTab === 'Contenido' ? (
|
||||
<motion.div
|
||||
key="contenido"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
className="mt-6 grid grid-cols-1 lg:grid-cols-4 gap-6"
|
||||
>
|
||||
{/* Navegación de secciones */}
|
||||
<div className="lg:col-span-1">
|
||||
<Card className="sticky top-24">
|
||||
<h3 className="font-semibold text-gray-900 mb-4">Secciones</h3>
|
||||
<nav className="space-y-2">
|
||||
{(Object.keys(seccionesContenido) as Array<keyof typeof seccionesContenido>).map((key) => (
|
||||
<button
|
||||
key={key}
|
||||
onClick={() => setActiveSeccion(key)}
|
||||
className={`w-full text-left px-3 py-2 rounded-lg text-sm transition-colors flex items-center justify-between ${
|
||||
activeSeccion === key
|
||||
? 'bg-orange-50 text-orange-700 font-medium'
|
||||
: 'text-gray-600 hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
{seccionesContenido[key].titulo}
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Contenido de la sección */}
|
||||
<div className="lg:col-span-3 space-y-6">
|
||||
<Card>
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6">{currentSeccion.titulo}</h2>
|
||||
<div className="space-y-6">
|
||||
{currentSeccion.contenido.map((seccion, index) => (
|
||||
<div key={index} className="border-b border-gray-100 last:border-0 pb-6 last:pb-0">
|
||||
<h3 className="text-lg font-semibold text-gray-800 mb-3">{seccion.titulo}</h3>
|
||||
<div className="prose prose-orange max-w-none">
|
||||
{seccion.contenido.split('\n\n').map((parrafo, pIndex) => {
|
||||
// Detectar si es una tabla
|
||||
if (parrafo.includes('|') && parrafo.includes('---')) {
|
||||
const lineas = parrafo.split('\n').filter(l => l.trim() && !l.includes('---'));
|
||||
if (lineas.length >= 2) {
|
||||
return (
|
||||
<div key={pIndex} className="overflow-x-auto my-4">
|
||||
<table className="min-w-full text-sm border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-gray-50">
|
||||
{lineas[0].split('|').filter(Boolean).map((cell, cIndex) => (
|
||||
<th key={cIndex} className="px-3 py-2 text-left font-medium border">
|
||||
{cell.trim()}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{lineas.slice(1).map((linea, lIndex) => (
|
||||
<tr key={lIndex} className="border-b">
|
||||
{linea.split('|').filter(Boolean).map((cell, cIndex) => (
|
||||
<td key={cIndex} className="px-3 py-2 border">
|
||||
{cell.trim()}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Detectar si es código
|
||||
if (parrafo.startsWith('```')) {
|
||||
return (
|
||||
<pre key={pIndex} className="bg-gray-900 text-white p-4 rounded-lg overflow-x-auto my-4">
|
||||
<code>{parrafo.replace(/```/g, '').trim()}</code>
|
||||
</pre>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<p key={pIndex} className="text-gray-600 mb-4 leading-relaxed whitespace-pre-line">
|
||||
{renderContenido(parrafo)}
|
||||
</p>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-orange-50 border-orange-200">
|
||||
<h3 className="font-semibold text-orange-900 mb-3">Ejercicios Relacionados</h3>
|
||||
<p className="text-orange-700 text-sm mb-4">
|
||||
Practica con simuladores interactivos de costos, producción y excedentes
|
||||
</p>
|
||||
<Button
|
||||
onClick={() => setActiveTab('Ejercicios')}
|
||||
variant="outline"
|
||||
className="border-orange-300 text-orange-700 hover:bg-orange-100"
|
||||
>
|
||||
<Play className="w-4 h-4 mr-2" />
|
||||
Ir a Ejercicios
|
||||
</Button>
|
||||
</Card>
|
||||
</div>
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div
|
||||
key="ejercicios"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
className="mt-6"
|
||||
>
|
||||
{activeEjercicio ? (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<Button variant="ghost" onClick={() => setActiveEjercicio(null)}>
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Volver a ejercicios
|
||||
</Button>
|
||||
{loading && <span className="text-sm text-gray-500">Guardando progreso...</span>}
|
||||
</div>
|
||||
{ejerciciosConfig.find((e) => e.id === activeEjercicio)?.componente}
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{ejerciciosConfig.map((ejercicio, index) => {
|
||||
const progreso = getProgresoForEjercicio(ejercicio.id);
|
||||
const completado = progreso?.completado || false;
|
||||
|
||||
return (
|
||||
<Card
|
||||
key={ejercicio.id}
|
||||
className="hover:shadow-lg transition-shadow cursor-pointer"
|
||||
onClick={() => setActiveEjercicio(ejercicio.id)}
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<div
|
||||
className={`w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0 ${
|
||||
completado ? 'bg-green-100 text-green-600' : 'bg-orange-100 text-orange-600'
|
||||
}`}
|
||||
>
|
||||
{completado ? (
|
||||
<CheckCircle className="w-6 h-6" />
|
||||
) : (
|
||||
<span className="text-xl font-bold">{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 mt-1">{ejercicio.descripcion}</p>
|
||||
{completado && progreso && (
|
||||
<div className="mt-3 flex items-center gap-2">
|
||||
<span className="text-xs bg-green-100 text-green-700 px-2 py-1 rounded-full">
|
||||
Completado
|
||||
</span>
|
||||
<span className="text-xs text-gray-500">
|
||||
{progreso.puntuacion} pts
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<Button className="w-full mt-4" size="sm">
|
||||
<Play className="w-4 h-4 mr-2" />
|
||||
{completado ? 'Repetir' : 'Comenzar'}
|
||||
</Button>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{ejerciciosCompletados === ejerciciosConfig.length && ejerciciosConfig.length > 0 && (
|
||||
<Card className="mt-6 bg-green-50 border-green-200">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
|
||||
<Trophy className="w-6 h-6 text-green-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-green-900">¡Felicitaciones!</h3>
|
||||
<p className="text-green-700 text-sm">
|
||||
Has completado todos los ejercicios de este módulo.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Modulo4Page;
|
||||
4
frontend/src/pages/modulos/index.ts
Normal file
4
frontend/src/pages/modulos/index.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export { Modulo1Page } from './Modulo1Page';
|
||||
export { Modulo2Page } from './Modulo2Page';
|
||||
export { Modulo3Page } from './Modulo3Page';
|
||||
export { Modulo4Page } from './Modulo4Page';
|
||||
Reference in New Issue
Block a user