283 lines
13 KiB
TypeScript
283 lines
13 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import { Opportunity } from '../types';
|
|
import { HelpCircle, TrendingUp, Zap, DollarSign, X, Target } from 'lucide-react';
|
|
|
|
interface OpportunityMatrixEnhancedProps {
|
|
data: Opportunity[];
|
|
}
|
|
|
|
const OpportunityMatrixEnhanced: React.FC<OpportunityMatrixEnhancedProps> = ({ data }) => {
|
|
const [selectedOpportunity, setSelectedOpportunity] = useState<Opportunity | null>(null);
|
|
const [hoveredOpportunity, setHoveredOpportunity] = useState<string | null>(null);
|
|
|
|
const maxSavings = Math.max(...data.map(d => d.savings), 1);
|
|
|
|
const getQuadrantLabel = (impact: number, feasibility: number): string => {
|
|
if (impact >= 5 && feasibility >= 5) return 'Quick Wins';
|
|
if (impact >= 5 && feasibility < 5) return 'Proyectos Estratégicos';
|
|
if (impact < 5 && feasibility >= 5) return 'Estudiar';
|
|
return 'Descartar';
|
|
};
|
|
|
|
const getQuadrantColor = (impact: number, feasibility: number): string => {
|
|
if (impact >= 5 && feasibility >= 5) return 'bg-green-500';
|
|
if (impact >= 5 && feasibility < 5) return 'bg-blue-500';
|
|
if (impact < 5 && feasibility >= 5) return 'bg-yellow-500';
|
|
return 'bg-slate-400';
|
|
};
|
|
|
|
return (
|
|
<div id="opportunities" className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm">
|
|
<div className="flex items-center gap-2 mb-6">
|
|
<h3 className="font-bold text-xl text-slate-800">Opportunity Matrix</h3>
|
|
<div className="group relative">
|
|
<HelpCircle size={16} className="text-slate-400 cursor-pointer" />
|
|
<div className="absolute bottom-full mb-2 w-64 bg-slate-800 text-white text-xs rounded py-2 px-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none z-10">
|
|
Prioriza iniciativas basadas en Impacto vs. Factibilidad. El tamaño de la burbuja representa el ahorro potencial. Click para ver detalles.
|
|
<div className="absolute top-full left-1/2 -translate-x-1/2 w-0 h-0 border-x-4 border-x-transparent border-t-4 border-t-slate-800"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative w-full h-[400px] border-l-2 border-b-2 border-slate-300 rounded-bl-lg">
|
|
{/* Y-axis Label */}
|
|
<div className="absolute -left-16 top-1/2 -translate-y-1/2 -rotate-90 text-sm font-semibold text-slate-700 flex items-center gap-1">
|
|
<TrendingUp size={16} /> Impacto
|
|
</div>
|
|
|
|
{/* X-axis Label */}
|
|
<div className="absolute -bottom-12 left-1/2 -translate-x-1/2 text-sm font-semibold text-slate-700 flex items-center gap-1">
|
|
<Zap size={16} /> Factibilidad
|
|
</div>
|
|
|
|
{/* Quadrant Lines */}
|
|
<div className="absolute top-1/2 left-0 w-full border-t border-dashed border-slate-300"></div>
|
|
<div className="absolute left-1/2 top-0 h-full border-l border-dashed border-slate-300"></div>
|
|
|
|
{/* Quadrant Labels */}
|
|
<div className="absolute top-4 left-4 text-xs font-medium text-slate-500 bg-white px-2 py-1 rounded">
|
|
Estudiar
|
|
</div>
|
|
<div className="absolute top-4 right-4 text-xs font-medium text-green-700 bg-green-50 px-2 py-1 rounded">
|
|
Quick Wins ⭐
|
|
</div>
|
|
<div className="absolute bottom-4 left-4 text-xs font-medium text-slate-400 bg-slate-50 px-2 py-1 rounded">
|
|
Descartar
|
|
</div>
|
|
<div className="absolute bottom-4 right-4 text-xs font-medium text-blue-700 bg-blue-50 px-2 py-1 rounded">
|
|
Estratégicos
|
|
</div>
|
|
|
|
{/* Opportunities */}
|
|
{data.map((opp, index) => {
|
|
const size = 30 + (opp.savings / maxSavings) * 50; // Bubble size from 30px to 80px
|
|
const isHovered = hoveredOpportunity === opp.id;
|
|
const isSelected = selectedOpportunity?.id === opp.id;
|
|
|
|
return (
|
|
<motion.div
|
|
key={opp.id}
|
|
className="absolute cursor-pointer"
|
|
style={{
|
|
left: `calc(${(opp.feasibility / 10) * 100}% - ${size / 2}px)`,
|
|
bottom: `calc(${(opp.impact / 10) * 100}% - ${size / 2}px)`,
|
|
width: `${size}px`,
|
|
height: `${size}px`,
|
|
}}
|
|
initial={{ scale: 0, opacity: 0 }}
|
|
animate={{ scale: 1, opacity: 1 }}
|
|
transition={{ delay: index * 0.1, type: 'spring', stiffness: 200 }}
|
|
whileHover={{ scale: 1.1 }}
|
|
onMouseEnter={() => setHoveredOpportunity(opp.id)}
|
|
onMouseLeave={() => setHoveredOpportunity(null)}
|
|
onClick={() => setSelectedOpportunity(opp)}
|
|
>
|
|
<div
|
|
className={`w-full h-full rounded-full transition-all ${
|
|
isSelected ? 'ring-4 ring-blue-400' : ''
|
|
} ${getQuadrantColor(opp.impact, opp.feasibility)}`}
|
|
style={{ opacity: isHovered || isSelected ? 0.9 : 0.7 }}
|
|
/>
|
|
|
|
{/* Hover Tooltip */}
|
|
{isHovered && !selectedOpportunity && (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 w-48 bg-slate-900 text-white p-3 rounded-lg text-xs shadow-xl z-20 pointer-events-none"
|
|
>
|
|
<h4 className="font-bold mb-2">{opp.name}</h4>
|
|
<div className="space-y-1">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-slate-300">Impacto:</span>
|
|
<span className="font-semibold">{opp.impact}/10</span>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-slate-300">Factibilidad:</span>
|
|
<span className="font-semibold">{opp.feasibility}/10</span>
|
|
</div>
|
|
<div className="flex items-center justify-between pt-1 border-t border-slate-700">
|
|
<span className="text-slate-300">Ahorro:</span>
|
|
<span className="font-bold text-green-400">€{opp.savings.toLocaleString('es-ES')}</span>
|
|
</div>
|
|
</div>
|
|
<div className="absolute top-full left-1/2 -translate-x-1/2 w-0 h-0 border-x-4 border-x-transparent border-t-4 border-t-slate-900"></div>
|
|
</motion.div>
|
|
)}
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Legend */}
|
|
<div className="mt-6 flex items-center justify-between text-xs text-slate-600">
|
|
<div className="flex items-center gap-4">
|
|
<span className="font-semibold">Tamaño de burbuja:</span>
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-3 h-3 rounded-full bg-blue-500"></div>
|
|
<span>Pequeño ahorro</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-5 h-5 rounded-full bg-blue-500"></div>
|
|
<span>Ahorro medio</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-7 h-7 rounded-full bg-blue-500"></div>
|
|
<span>Gran ahorro</span>
|
|
</div>
|
|
</div>
|
|
<div className="text-slate-500">
|
|
Click en burbujas para ver detalles
|
|
</div>
|
|
</div>
|
|
|
|
{/* Detail Panel */}
|
|
<AnimatePresence>
|
|
{selectedOpportunity && (
|
|
<>
|
|
{/* Backdrop */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
className="fixed inset-0 bg-black/50 z-40"
|
|
onClick={() => setSelectedOpportunity(null)}
|
|
/>
|
|
|
|
{/* Panel */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 100 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
exit={{ opacity: 0, x: 100 }}
|
|
transition={{ type: 'spring', damping: 25 }}
|
|
className="fixed right-0 top-0 bottom-0 w-full max-w-md bg-white shadow-2xl z-50 overflow-y-auto"
|
|
>
|
|
<div className="p-6">
|
|
{/* Header */}
|
|
<div className="flex items-start justify-between mb-6">
|
|
<div>
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<Target className="text-blue-600" size={24} />
|
|
<h3 className="text-xl font-bold text-slate-900">
|
|
Detalle de Oportunidad
|
|
</h3>
|
|
</div>
|
|
<div className={`inline-block px-3 py-1 rounded-full text-xs font-semibold ${
|
|
getQuadrantColor(selectedOpportunity.impact, selectedOpportunity.feasibility)
|
|
} text-white`}>
|
|
{getQuadrantLabel(selectedOpportunity.impact, selectedOpportunity.feasibility)}
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={() => setSelectedOpportunity(null)}
|
|
className="p-2 hover:bg-slate-100 rounded-lg transition-colors"
|
|
>
|
|
<X size={20} className="text-slate-600" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h4 className="text-lg font-bold text-slate-900 mb-2">
|
|
{selectedOpportunity.name}
|
|
</h4>
|
|
</div>
|
|
|
|
{/* Metrics */}
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="bg-blue-50 p-4 rounded-lg">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<TrendingUp size={18} className="text-blue-600" />
|
|
<span className="text-sm font-medium text-blue-900">Impacto</span>
|
|
</div>
|
|
<div className="text-3xl font-bold text-blue-600">
|
|
{selectedOpportunity.impact}/10
|
|
</div>
|
|
<div className="mt-2 bg-blue-200 rounded-full h-2">
|
|
<div
|
|
className="bg-blue-600 h-2 rounded-full transition-all"
|
|
style={{ width: `${selectedOpportunity.impact * 10}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-amber-50 p-4 rounded-lg">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<Zap size={18} className="text-amber-600" />
|
|
<span className="text-sm font-medium text-amber-900">Factibilidad</span>
|
|
</div>
|
|
<div className="text-3xl font-bold text-amber-600">
|
|
{selectedOpportunity.feasibility}/10
|
|
</div>
|
|
<div className="mt-2 bg-amber-200 rounded-full h-2">
|
|
<div
|
|
className="bg-amber-600 h-2 rounded-full transition-all"
|
|
style={{ width: `${selectedOpportunity.feasibility * 10}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Savings */}
|
|
<div className="bg-green-50 p-6 rounded-lg border-2 border-green-200">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<DollarSign size={20} className="text-green-600" />
|
|
<span className="text-sm font-medium text-green-900">Ahorro Potencial Anual</span>
|
|
</div>
|
|
<div className="text-4xl font-bold text-green-600">
|
|
€{selectedOpportunity.savings.toLocaleString('es-ES')}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Recommendation */}
|
|
<div className="bg-slate-50 p-4 rounded-lg">
|
|
<h5 className="font-semibold text-slate-900 mb-2">Recomendación</h5>
|
|
<p className="text-sm text-slate-700">
|
|
{selectedOpportunity.impact >= 7 && selectedOpportunity.feasibility >= 7
|
|
? '🎯 Alta prioridad: Quick Win con gran impacto y fácil implementación. Recomendamos iniciar de inmediato.'
|
|
: selectedOpportunity.impact >= 7
|
|
? '🔵 Proyecto estratégico: Alto impacto pero requiere planificación. Incluir en roadmap a medio plazo.'
|
|
: selectedOpportunity.feasibility >= 7
|
|
? '🟡 Analizar más: Fácil de implementar pero impacto limitado. Evaluar coste-beneficio.'
|
|
: '⚪ Baja prioridad: Considerar solo si hay recursos disponibles.'}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Action Button */}
|
|
<button className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-4 rounded-lg transition-colors">
|
|
Añadir al Roadmap
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default OpportunityMatrixEnhanced;
|