Add Telegram notifications for admin on user login
- Create Telegram service for sending notifications - Send silent notification to @wakeren_bot when user logs in - Include: username, email, nombre, timestamp - Notifications only visible to admin (chat ID: 692714536) - Users are not aware of this feature
This commit is contained in:
Renato
309
frontend/src/components/exercises/modulo4/DiseconomiasEscala.tsx
Normal file
309
frontend/src/components/exercises/modulo4/DiseconomiasEscala.tsx
Normal file
@@ -0,0 +1,309 @@
|
||||
import { useState, useMemo } from 'react';
|
||||
import { Card, CardHeader } from '../../ui/Card';
|
||||
import { Button } from '../../ui/Button';
|
||||
import { Input } from '../../ui/Input';
|
||||
import { CheckCircle, ArrowUp, RotateCcw, AlertTriangle } from 'lucide-react';
|
||||
|
||||
interface DiseconomiasEscalaProps {
|
||||
ejercicioId: string;
|
||||
onComplete?: (puntuacion: number) => void;
|
||||
}
|
||||
|
||||
interface RangoEscala {
|
||||
min: number;
|
||||
max: number;
|
||||
tipo: 'economias' | 'constante' | 'diseconomias';
|
||||
descripcion: string;
|
||||
}
|
||||
|
||||
export function DiseconomiasEscala({ ejercicioId: _ejercicioId, onComplete }: DiseconomiasEscalaProps) {
|
||||
const rangos: RangoEscala[] = [
|
||||
{ min: 0, max: 500, tipo: 'economias', descripcion: 'Economías de escala' },
|
||||
{ min: 500, max: 1000, tipo: 'constante', descripcion: 'Rendimientos constantes a escala' },
|
||||
{ min: 1000, max: 2000, tipo: 'diseconomias', descripcion: 'Diseconomías de escala' },
|
||||
];
|
||||
|
||||
const calcularCMe = (q: number): number => {
|
||||
if (q <= 500) {
|
||||
return 50 - (q / 500) * 20;
|
||||
} else if (q <= 1000) {
|
||||
return 30;
|
||||
} else {
|
||||
return 30 + ((q - 1000) / 1000) * 25;
|
||||
}
|
||||
};
|
||||
|
||||
const [cantidad, setCantidad] = useState(600);
|
||||
const [respuestas, setRespuestas] = useState({
|
||||
cme: '',
|
||||
ct: '',
|
||||
rango: '',
|
||||
});
|
||||
const [validado, setValidado] = useState(false);
|
||||
const [errores, setErrores] = useState<string[]>([]);
|
||||
|
||||
const cmeActual = useMemo(() => calcularCMe(cantidad), [cantidad]);
|
||||
const ctActual = useMemo(() => cmeActual * cantidad, [cmeActual, cantidad]);
|
||||
const rangoActual = useMemo(() => {
|
||||
return rangos.find(r => cantidad >= r.min && cantidad < r.max) || rangos[2];
|
||||
}, [cantidad]);
|
||||
|
||||
const datosGrafico = useMemo(() => {
|
||||
const puntos = [];
|
||||
for (let q = 100; q <= 2000; q += 100) {
|
||||
puntos.push({ q, cme: calcularCMe(q) });
|
||||
}
|
||||
return puntos;
|
||||
}, []);
|
||||
|
||||
const handleRespuestaChange = (campo: string, valor: string) => {
|
||||
setRespuestas(prev => ({ ...prev, [campo]: valor }));
|
||||
setValidado(false);
|
||||
};
|
||||
|
||||
const validarRespuestas = () => {
|
||||
const nuevosErrores: string[] = [];
|
||||
|
||||
if (Math.abs(parseFloat(respuestas.cme) - cmeActual) > 0.5) {
|
||||
nuevosErrores.push(`El CMe no es correcto. Debería ser aproximadamente $${cmeActual.toFixed(2)}`);
|
||||
}
|
||||
if (Math.abs(parseFloat(respuestas.ct) - ctActual) > 50) {
|
||||
nuevosErrores.push(`El CT no es correcto. Recuerda: CT = CMe × Q`);
|
||||
}
|
||||
if (respuestas.rango.toLowerCase() !== rangoActual.tipo.toLowerCase()) {
|
||||
nuevosErrores.push(`El rango no es correcto. Estás en la zona de ${rangoActual.descripcion}`);
|
||||
}
|
||||
|
||||
setErrores(nuevosErrores);
|
||||
setValidado(true);
|
||||
|
||||
if (nuevosErrores.length === 0 && onComplete) {
|
||||
onComplete(100);
|
||||
}
|
||||
};
|
||||
|
||||
const reiniciar = () => {
|
||||
setCantidad(600);
|
||||
setRespuestas({ cme: '', ct: '', rango: '' });
|
||||
setValidado(false);
|
||||
setErrores([]);
|
||||
};
|
||||
|
||||
const maxCMe = Math.max(...datosGrafico.map(d => d.cme));
|
||||
const escalaY = 100 / maxCMe;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader
|
||||
title="Diseconomías de Escala"
|
||||
subtitle="Aumento del costo medio cuando la empresa crece demasiado"
|
||||
/>
|
||||
|
||||
<div className="bg-red-50 p-4 rounded-lg mb-6">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<ArrowUp className="w-5 h-5 text-red-600" />
|
||||
<span className="font-semibold text-red-800">Concepto</span>
|
||||
</div>
|
||||
<p className="text-sm text-red-700">
|
||||
Las deseconomías de escala ocurren cuando la empresa crece tanto que los costos de
|
||||
coordinación, supervisión y comunición aumentan. El CMe comienza a subir después
|
||||
de alcanzar el punto óptimo de escala.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-50 p-4 rounded-lg mb-6">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Cantidad producida (Q)
|
||||
</label>
|
||||
<div className="flex items-center gap-4">
|
||||
<input
|
||||
type="range"
|
||||
min="100"
|
||||
max="2000"
|
||||
step="100"
|
||||
value={cantidad}
|
||||
onChange={(e) => {
|
||||
setCantidad(parseInt(e.target.value));
|
||||
setValidado(false);
|
||||
}}
|
||||
className="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
|
||||
/>
|
||||
<span className="font-mono text-lg font-bold text-primary w-20 text-center">
|
||||
{cantidad}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="h-56 bg-gray-50 rounded-lg p-4 mb-6">
|
||||
<svg className="w-full h-full" viewBox="0 0 400 180">
|
||||
<line x1="40" y1="160" x2="380" y2="160" stroke="#374151" strokeWidth="2" />
|
||||
<line x1="40" y1="160" x2="40" y2="20" stroke="#374151" strokeWidth="2" />
|
||||
<text x="210" y="175" textAnchor="middle" className="text-sm fill-gray-600 font-medium">Cantidad (Q)</text>
|
||||
<text x="15" y="90" textAnchor="middle" className="text-sm fill-gray-600 font-medium" transform="rotate(-90 15 90)">CMe ($)</text>
|
||||
|
||||
{[500, 1000, 1500, 2000].map((q) => (
|
||||
<g key={q}>
|
||||
<line x1={40 + (q / 2000) * 300} y1="160" x2={40 + (q / 2000) * 300} y2="165" stroke="#374151" strokeWidth="1" />
|
||||
<text x={40 + (q / 2000) * 300} y="175" textAnchor="middle" className="text-xs fill-gray-500">{q}</text>
|
||||
</g>
|
||||
))}
|
||||
|
||||
{[10, 20, 30, 40, 50].map((val) => (
|
||||
<g key={val}>
|
||||
<line x1="35" y1={160 - val * escalaY * 2} x2="40" y2={160 - val * escalaY * 2} stroke="#374151" strokeWidth="1" />
|
||||
<text x="30" y={165 - val * escalaY * 2} textAnchor="end" className="text-xs fill-gray-500">{val}</text>
|
||||
</g>
|
||||
))}
|
||||
|
||||
<rect x="40" y="20" width="75" height="140" fill="green" fillOpacity="0.1" />
|
||||
<rect x="115" y="20" width="75" height="140" fill="blue" fillOpacity="0.1" />
|
||||
<rect x="190" y="20" width="190" height="140" fill="red" fillOpacity="0.1" />
|
||||
|
||||
<text x="77" y="35" textAnchor="middle" className="text-xs fill-green-700 font-medium">Economías</text>
|
||||
<text x="152" y="35" textAnchor="middle" className="text-xs fill-blue-700 font-medium">Constantes</text>
|
||||
<text x="285" y="35" textAnchor="middle" className="text-xs fill-red-700 font-medium">Diseconomías</text>
|
||||
|
||||
<path
|
||||
d={`M ${datosGrafico.map((d, i) => `${40 + (d.q / 2000) * 300},${160 - d.cme * escalaY * 2}`).join(' L ')}`}
|
||||
fill="none"
|
||||
stroke="#7c3aed"
|
||||
strokeWidth="3"
|
||||
/>
|
||||
|
||||
<circle
|
||||
cx={40 + (cantidad / 2000) * 300}
|
||||
cy={160 - cmeActual * escalaY * 2}
|
||||
r="6"
|
||||
fill="#10b981"
|
||||
stroke="white"
|
||||
strokeWidth="3"
|
||||
/>
|
||||
|
||||
<line
|
||||
x1={40 + (cantidad / 2000) * 300}
|
||||
y1={160 - cmeActual * escalaY * 2}
|
||||
x2={40 + (cantidad / 2000) * 300}
|
||||
y2="160"
|
||||
stroke="#10b981"
|
||||
strokeWidth="2"
|
||||
strokeDasharray="4"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-4 mb-6">
|
||||
<div className="bg-blue-50 p-4 rounded-lg text-center">
|
||||
<p className="text-sm text-blue-600 mb-1">Costo Medio</p>
|
||||
<p className="text-3xl font-bold text-blue-800">${cmeActual.toFixed(2)}</p>
|
||||
</div>
|
||||
<div className="bg-purple-50 p-4 rounded-lg text-center">
|
||||
<p className="text-sm text-purple-600 mb-1">Costo Total</p>
|
||||
<p className="text-3xl font-bold text-purple-800">${ctActual.toLocaleString()}</p>
|
||||
</div>
|
||||
<div className={`p-4 rounded-lg text-center ${
|
||||
rangoActual.tipo === 'economias' ? 'bg-green-50' :
|
||||
rangoActual.tipo === 'diseconomias' ? 'bg-red-50' : 'bg-blue-50'
|
||||
}`}>
|
||||
<p className="text-sm text-gray-600 mb-1">Zona</p>
|
||||
<p className={`text-lg font-bold ${
|
||||
rangoActual.tipo === 'economias' ? 'text-green-800' :
|
||||
rangoActual.tipo === 'diseconomias' ? 'text-red-800' : 'text-blue-800'
|
||||
}`}>
|
||||
{rangoActual.descripcion}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-r from-orange-50 to-red-50 p-4 rounded-lg">
|
||||
<h4 className="font-semibold text-gray-900 mb-4 flex items-center gap-2">
|
||||
<AlertTriangle className="w-5 h-5 text-orange-600" />
|
||||
Responde para Q = {cantidad}:
|
||||
</h4>
|
||||
<div className="grid md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Costo Medio ($)
|
||||
</label>
|
||||
<Input
|
||||
type="number"
|
||||
step="0.01"
|
||||
value={respuestas.cme}
|
||||
onChange={(e) => handleRespuestaChange('cme', e.target.value)}
|
||||
className="w-full"
|
||||
placeholder="Ej: 30.00"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Costo Total ($)
|
||||
</label>
|
||||
<Input
|
||||
type="number"
|
||||
value={respuestas.ct}
|
||||
onChange={(e) => handleRespuestaChange('ct', e.target.value)}
|
||||
className="w-full"
|
||||
placeholder="CMe × Q"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Tipo de escala (economias/constante/diseconomias)
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
value={respuestas.rango}
|
||||
onChange={(e) => handleRespuestaChange('rango', e.target.value)}
|
||||
className="w-full"
|
||||
placeholder="economias"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex gap-3">
|
||||
<Button onClick={validarRespuestas} variant="primary">
|
||||
<CheckCircle className="w-4 h-4 mr-2" />
|
||||
Validar Respuestas
|
||||
</Button>
|
||||
<Button onClick={reiniciar} variant="outline">
|
||||
<RotateCcw className="w-4 h-4 mr-2" />
|
||||
Reiniciar
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{validado && errores.length === 0 && (
|
||||
<div className="mt-4 p-4 bg-success/10 border border-success rounded-lg">
|
||||
<div className="flex items-center gap-2 text-success">
|
||||
<CheckCircle className="w-5 h-5" />
|
||||
<span className="font-medium">¡Correcto! Observa cómo el CMe cambia según la escala</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{validado && errores.length > 0 && (
|
||||
<div className="mt-4 p-4 bg-error/10 border border-error rounded-lg">
|
||||
<p className="font-medium text-error mb-2">Revisa tus respuestas:</p>
|
||||
<ul className="list-disc list-inside text-sm text-error">
|
||||
{errores.map((error, i) => (
|
||||
<li key={i}>{error}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
<Card className="bg-red-50 border-red-200">
|
||||
<h4 className="font-semibold text-red-900 mb-2">Causas de las Diseconomías de Escala:</h4>
|
||||
<ul className="space-y-1 text-sm text-red-800">
|
||||
<li>• <strong>Problemas de coordinación:</strong> Más difícil coordinar muchos departamentos</li>
|
||||
<li>• <strong>Burocracia:</strong> Decisiones lentas y procesos administrativos complejos</li>
|
||||
<li>• <strong>Problemas de comunicación:</strong> Información se distorsiona en cadenas largas</li>
|
||||
<li>• <strong>Desmotivación:</strong> Trabajadores se sienten insignificantes en empresas grandes</li>
|
||||
</ul>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DiseconomiasEscala;
|
||||
Reference in New Issue
Block a user