refactor: implement i18n in MetodologiaDrawer (phase 4)
Refactored MetodologiaDrawer to use react-i18next translations: - All 8 subsections (DataSummary, Pipeline, Taxonomy, KPI, CPI, BeforeAfter, SkillsMapping, Guarantees) - 100+ text strings replaced with t() calls - Month names in date formatting Added translation keys to es.json and en.json: - methodology section with 40+ new keys - CPI calculation components - Impact analysis labels - Skill mapping explanations Build verified successfully. https://claude.ai/code/session_4f888c33-8937-4db8-8a9d-ddc9ac51a725
This commit is contained in:
Claude
@@ -4,6 +4,7 @@ import {
|
||||
X, ShieldCheck, Database, RefreshCw, Tag, BarChart3,
|
||||
ArrowRight, BadgeCheck, Download, ArrowLeftRight, Layers
|
||||
} from 'lucide-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import type { AnalysisData, HeatmapDataPoint } from '../types';
|
||||
|
||||
interface MetodologiaDrawerProps {
|
||||
@@ -36,12 +37,12 @@ interface DataSummary {
|
||||
|
||||
// ========== SUBSECCIONES ==========
|
||||
|
||||
function DataSummarySection({ data }: { data: DataSummary }) {
|
||||
function DataSummarySection({ data, t }: { data: DataSummary; t: any }) {
|
||||
return (
|
||||
<div className="bg-slate-50 rounded-lg p-5">
|
||||
<h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
|
||||
<Database className="w-5 h-5 text-blue-600" />
|
||||
Datos Procesados
|
||||
{t('methodology.dataProcessed')}
|
||||
</h3>
|
||||
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
@@ -49,55 +50,55 @@ function DataSummarySection({ data }: { data: DataSummary }) {
|
||||
<div className="text-3xl font-bold text-blue-600">
|
||||
{data.totalRegistros.toLocaleString('es-ES')}
|
||||
</div>
|
||||
<div className="text-sm text-gray-600">Registros analizados</div>
|
||||
<div className="text-sm text-gray-600">{t('methodology.recordsAnalyzed')}</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg p-4 text-center shadow-sm">
|
||||
<div className="text-3xl font-bold text-blue-600">
|
||||
{data.mesesHistorico}
|
||||
</div>
|
||||
<div className="text-sm text-gray-600">Meses de histórico</div>
|
||||
<div className="text-sm text-gray-600">{t('methodology.monthsHistory')}</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg p-4 text-center shadow-sm">
|
||||
<div className="text-2xl font-bold text-blue-600">
|
||||
{data.fuente}
|
||||
</div>
|
||||
<div className="text-sm text-gray-600">Sistema origen</div>
|
||||
<div className="text-sm text-gray-600">{t('methodology.sourceSystem')}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-slate-500 mt-3 text-center">
|
||||
Periodo: {data.periodo}
|
||||
{t('methodology.periodRange', { period: data.periodo })}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PipelineSection() {
|
||||
function PipelineSection({ t }: { t: any }) {
|
||||
const steps = [
|
||||
{
|
||||
layer: 'Layer 0',
|
||||
name: 'Raw Data',
|
||||
desc: 'Ingesta y Normalización',
|
||||
name: t('methodology.pipeline.layer1'),
|
||||
desc: t('methodology.pipeline.layer1Desc'),
|
||||
color: 'bg-gray-100 border-gray-300'
|
||||
},
|
||||
{
|
||||
layer: 'Layer 1',
|
||||
name: 'Trusted Data',
|
||||
desc: 'Higiene y Clasificación',
|
||||
name: t('methodology.pipeline.layer2'),
|
||||
desc: t('methodology.pipeline.layer2Desc'),
|
||||
color: 'bg-yellow-50 border-yellow-300'
|
||||
},
|
||||
{
|
||||
layer: 'Layer 2',
|
||||
name: 'Business Insights',
|
||||
desc: 'Enriquecimiento',
|
||||
name: t('methodology.pipeline.layer3'),
|
||||
desc: t('methodology.pipeline.layer3Desc'),
|
||||
color: 'bg-green-50 border-green-300'
|
||||
},
|
||||
{
|
||||
layer: 'Output',
|
||||
name: 'Dashboard',
|
||||
desc: 'Visualización',
|
||||
name: t('methodology.pipeline.layer4'),
|
||||
desc: t('methodology.pipeline.layer4Desc'),
|
||||
color: 'bg-blue-50 border-blue-300'
|
||||
}
|
||||
];
|
||||
@@ -106,7 +107,7 @@ function PipelineSection() {
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
|
||||
<RefreshCw className="w-5 h-5 text-purple-600" />
|
||||
Pipeline de Transformación
|
||||
{t('methodology.pipeline.title')}
|
||||
</h3>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
@@ -125,42 +126,42 @@ function PipelineSection() {
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-gray-500 mt-3 italic">
|
||||
Arquitectura modular de 3 capas para garantizar trazabilidad y escalabilidad.
|
||||
{t('methodology.pipeline.description')}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TaxonomySection({ data }: { data: DataSummary['taxonomia'] }) {
|
||||
function TaxonomySection({ data, t }: { data: DataSummary['taxonomia']; t: any }) {
|
||||
const rows = [
|
||||
{
|
||||
status: 'VALID',
|
||||
status: t('methodology.taxonomy.valid'),
|
||||
pct: data.valid,
|
||||
def: 'Duración 10s - 3h. Interacciones reales.',
|
||||
def: t('methodology.taxonomy.validDef'),
|
||||
costes: true,
|
||||
aht: true,
|
||||
bgClass: 'bg-green-100 text-green-800'
|
||||
},
|
||||
{
|
||||
status: 'NOISE',
|
||||
status: t('methodology.taxonomy.noise'),
|
||||
pct: data.noise,
|
||||
def: 'Duración <10s (no abandono). Ruido técnico.',
|
||||
def: t('methodology.taxonomy.noiseDef'),
|
||||
costes: true,
|
||||
aht: false,
|
||||
bgClass: 'bg-yellow-100 text-yellow-800'
|
||||
},
|
||||
{
|
||||
status: 'ZOMBIE',
|
||||
status: t('methodology.taxonomy.zombie'),
|
||||
pct: data.zombie,
|
||||
def: 'Duración >3h. Error de sistema.',
|
||||
def: t('methodology.taxonomy.zombieDef'),
|
||||
costes: true,
|
||||
aht: false,
|
||||
bgClass: 'bg-red-100 text-red-800'
|
||||
},
|
||||
{
|
||||
status: 'ABANDON',
|
||||
status: t('methodology.taxonomy.abandon'),
|
||||
pct: data.abandon,
|
||||
def: 'Desconexión externa + Talk ≤5s.',
|
||||
def: t('methodology.taxonomy.abandonDef'),
|
||||
costes: false,
|
||||
aht: false,
|
||||
bgClass: 'bg-gray-100 text-gray-800'
|
||||
@@ -171,23 +172,22 @@ function TaxonomySection({ data }: { data: DataSummary['taxonomia'] }) {
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
|
||||
<Tag className="w-5 h-5 text-orange-600" />
|
||||
Taxonomía de Calidad de Datos
|
||||
{t('methodology.taxonomy.title')}
|
||||
</h3>
|
||||
|
||||
<p className="text-sm text-gray-600 mb-4">
|
||||
En lugar de eliminar registros, aplicamos "Soft Delete" con etiquetado de calidad
|
||||
para permitir doble visión: financiera (todos los costes) y operativa (KPIs limpios).
|
||||
{t('methodology.taxonomy.description')}
|
||||
</p>
|
||||
|
||||
<div className="overflow-hidden rounded-lg border border-slate-200">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th className="px-3 py-2 text-left font-semibold">Estado</th>
|
||||
<th className="px-3 py-2 text-right font-semibold">%</th>
|
||||
<th className="px-3 py-2 text-left font-semibold">Definición</th>
|
||||
<th className="px-3 py-2 text-center font-semibold">Costes</th>
|
||||
<th className="px-3 py-2 text-center font-semibold">AHT</th>
|
||||
<th className="px-3 py-2 text-left font-semibold">{t('methodology.taxonomy.state')}</th>
|
||||
<th className="px-3 py-2 text-right font-semibold">{t('methodology.taxonomy.percentage')}</th>
|
||||
<th className="px-3 py-2 text-left font-semibold">{t('methodology.taxonomy.definition')}</th>
|
||||
<th className="px-3 py-2 text-center font-semibold">{t('methodology.taxonomy.costs')}</th>
|
||||
<th className="px-3 py-2 text-center font-semibold">{t('methodology.taxonomy.aht')}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100">
|
||||
@@ -202,16 +202,16 @@ function TaxonomySection({ data }: { data: DataSummary['taxonomia'] }) {
|
||||
<td className="px-3 py-2 text-xs text-gray-600">{row.def}</td>
|
||||
<td className="px-3 py-2 text-center">
|
||||
{row.costes ? (
|
||||
<span className="text-green-600">✓ Suma</span>
|
||||
<span className="text-green-600">{t('methodology.taxonomy.sumYes')}</span>
|
||||
) : (
|
||||
<span className="text-red-600">✗ No</span>
|
||||
<span className="text-red-600">{t('methodology.taxonomy.sumNo')}</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-center">
|
||||
{row.aht ? (
|
||||
<span className="text-green-600">✓ Promedio</span>
|
||||
<span className="text-green-600">{t('methodology.taxonomy.avgYes')}</span>
|
||||
) : (
|
||||
<span className="text-red-600">✗ Excluye</span>
|
||||
<span className="text-red-600">{t('methodology.taxonomy.avgExclude')}</span>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
@@ -223,7 +223,7 @@ function TaxonomySection({ data }: { data: DataSummary['taxonomia'] }) {
|
||||
);
|
||||
}
|
||||
|
||||
function KPIRedefinitionSection({ kpis }: { kpis: DataSummary['kpis'] }) {
|
||||
function KPIRedefinitionSection({ kpis, t }: { kpis: DataSummary['kpis']; t: any }) {
|
||||
const formatTime = (seconds: number): string => {
|
||||
const mins = Math.floor(seconds / 60);
|
||||
const secs = seconds % 60;
|
||||
@@ -234,11 +234,11 @@ function KPIRedefinitionSection({ kpis }: { kpis: DataSummary['kpis'] }) {
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
|
||||
<BarChart3 className="w-5 h-5 text-indigo-600" />
|
||||
KPIs Redefinidos
|
||||
{t('methodology.kpis.title')}
|
||||
</h3>
|
||||
|
||||
<p className="text-sm text-gray-600 mb-4">
|
||||
Hemos redefinido los KPIs para eliminar los "puntos ciegos" de las métricas tradicionales.
|
||||
{t('methodology.kpis.description')}
|
||||
</p>
|
||||
|
||||
<div className="space-y-3">
|
||||
@@ -246,25 +246,25 @@ function KPIRedefinitionSection({ kpis }: { kpis: DataSummary['kpis'] }) {
|
||||
<div className="bg-red-50 border border-red-200 rounded-lg p-4">
|
||||
<div className="flex justify-between items-start">
|
||||
<div>
|
||||
<h4 className="font-semibold text-red-800">FCR Real vs FCR Técnico</h4>
|
||||
<h4 className="font-semibold text-red-800">{t('methodology.kpis.fcrTitle')}</h4>
|
||||
<p className="text-xs text-red-700 mt-1">
|
||||
El hallazgo más crítico del diagnóstico.
|
||||
{t('methodology.kpis.fcrSubtitle')}
|
||||
</p>
|
||||
</div>
|
||||
<span className="text-2xl font-bold text-red-600">{kpis.fcrReal}%</span>
|
||||
</div>
|
||||
<div className="mt-3 text-xs">
|
||||
<div className="flex justify-between py-1 border-b border-red-200">
|
||||
<span className="text-gray-600">FCR Técnico (sin transferencia):</span>
|
||||
<span className="text-gray-600">{t('methodology.kpis.fcrTechnical')}</span>
|
||||
<span className="font-medium">~{kpis.fcrTecnico}%</span>
|
||||
</div>
|
||||
<div className="flex justify-between py-1">
|
||||
<span className="text-gray-600">FCR Real (sin recontacto 7 días):</span>
|
||||
<span className="text-gray-600">{t('methodology.kpis.fcrReal')}</span>
|
||||
<span className="font-medium text-red-600">{kpis.fcrReal}%</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-[10px] text-red-600 mt-2 italic">
|
||||
💡 ~{kpis.fcrTecnico - kpis.fcrReal}% de "casos resueltos" generan segunda llamada, disparando costes ocultos.
|
||||
💡 {t('methodology.kpis.fcrGap', { diff: kpis.fcrTecnico - kpis.fcrReal })}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -272,15 +272,15 @@ function KPIRedefinitionSection({ kpis }: { kpis: DataSummary['kpis'] }) {
|
||||
<div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
|
||||
<div className="flex justify-between items-start">
|
||||
<div>
|
||||
<h4 className="font-semibold text-yellow-800">Tasa de Abandono Real</h4>
|
||||
<h4 className="font-semibold text-yellow-800">{t('methodology.kpis.abandonTitle')}</h4>
|
||||
<p className="text-xs text-yellow-700 mt-1">
|
||||
Fórmula: Desconexión Externa + Talk ≤5 segundos
|
||||
{t('methodology.kpis.abandonFormula')}
|
||||
</p>
|
||||
</div>
|
||||
<span className="text-2xl font-bold text-yellow-600">{kpis.abandonoReal.toFixed(1)}%</span>
|
||||
</div>
|
||||
<p className="text-[10px] text-yellow-600 mt-2 italic">
|
||||
💡 El umbral de 5s captura al cliente que cuelga al escuchar la locución o en el timbre.
|
||||
💡 {t('methodology.kpis.abandonDesc')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -288,15 +288,15 @@ function KPIRedefinitionSection({ kpis }: { kpis: DataSummary['kpis'] }) {
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
|
||||
<div className="flex justify-between items-start">
|
||||
<div>
|
||||
<h4 className="font-semibold text-blue-800">AHT Limpio</h4>
|
||||
<h4 className="font-semibold text-blue-800">{t('methodology.kpis.ahtTitle')}</h4>
|
||||
<p className="text-xs text-blue-700 mt-1">
|
||||
Excluye NOISE (<10s) y ZOMBIE (>3h) del promedio.
|
||||
{t('methodology.kpis.ahtDesc')}
|
||||
</p>
|
||||
</div>
|
||||
<span className="text-2xl font-bold text-blue-600">{formatTime(kpis.ahtLimpio)}</span>
|
||||
</div>
|
||||
<p className="text-[10px] text-blue-600 mt-2 italic">
|
||||
💡 El AHT sin filtrar estaba distorsionado por errores de sistema.
|
||||
💡 {t('methodology.kpis.ahtNote')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -304,7 +304,7 @@ function KPIRedefinitionSection({ kpis }: { kpis: DataSummary['kpis'] }) {
|
||||
);
|
||||
}
|
||||
|
||||
function CPICalculationSection({ totalCost, totalVolume, costPerHour = 20 }: { totalCost: number; totalVolume: number; costPerHour?: number }) {
|
||||
function CPICalculationSection({ totalCost, totalVolume, costPerHour = 20, t }: { totalCost: number; totalVolume: number; costPerHour?: number; t: any }) {
|
||||
// Productivity factor: agents are ~70% productive (rest is breaks, training, after-call work, etc.)
|
||||
const effectiveProductivity = 0.70;
|
||||
|
||||
@@ -316,128 +316,124 @@ function CPICalculationSection({ totalCost, totalVolume, costPerHour = 20 }: { t
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
|
||||
<BarChart3 className="w-5 h-5 text-emerald-600" />
|
||||
Coste por Interacción (CPI)
|
||||
{t('methodology.kpis.cpiTitle')}
|
||||
</h3>
|
||||
|
||||
<p className="text-sm text-gray-600 mb-4">
|
||||
El CPI se calcula dividiendo el <strong>coste total</strong> entre el <strong>volumen de interacciones</strong>.
|
||||
El coste total incluye <em>todas</em> las interacciones (noise, zombie y válidas) porque todas se facturan,
|
||||
y aplica un factor de productividad del {(effectiveProductivity * 100).toFixed(0)}%.
|
||||
{t('methodology.cpi.description', { productivity: (effectiveProductivity * 100).toFixed(0) })}
|
||||
</p>
|
||||
|
||||
{/* Fórmula visual */}
|
||||
<div className="bg-emerald-50 border border-emerald-200 rounded-lg p-4 mb-4">
|
||||
<div className="text-center mb-3">
|
||||
<span className="text-xs text-emerald-700 uppercase tracking-wider font-medium">Fórmula de Cálculo</span>
|
||||
<span className="text-xs text-emerald-700 uppercase tracking-wider font-medium">{t('methodology.kpis.cpiFormulaTitle')}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-center gap-2 text-lg font-mono flex-wrap">
|
||||
<span className="px-3 py-1 bg-white rounded border border-emerald-300">CPI</span>
|
||||
<span className="px-3 py-1 bg-white rounded border border-emerald-300">{t('methodology.kpis.cpiLabel')}</span>
|
||||
<span className="text-emerald-600">=</span>
|
||||
<span className="px-2 py-1 bg-blue-100 rounded text-blue-800 text-sm">Coste Total</span>
|
||||
<span className="text-emerald-600">÷</span>
|
||||
<span className="px-2 py-1 bg-amber-100 rounded text-amber-800 text-sm">Volumen Total</span>
|
||||
<span className="px-2 py-1 bg-blue-100 rounded text-blue-800 text-sm">{t('methodology.kpis.totalCost')}</span>
|
||||
<span className="text-emerald-600">{t('methodology.kpis.divide')}</span>
|
||||
<span className="px-2 py-1 bg-amber-100 rounded text-amber-800 text-sm">{t('methodology.kpis.totalVolume')}</span>
|
||||
</div>
|
||||
<p className="text-[10px] text-center text-emerald-600 mt-2">
|
||||
El coste total usa (AHT segundos ÷ 3600) × coste/hora × volumen ÷ productividad
|
||||
{t('methodology.kpis.cpiNote')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Cómo se calcula el coste total */}
|
||||
<div className="bg-slate-50 border border-slate-200 rounded-lg p-4 mb-4">
|
||||
<div className="text-sm font-semibold text-slate-700 mb-2">¿Cómo se calcula el Coste Total?</div>
|
||||
<div className="text-sm font-semibold text-slate-700 mb-2">{t('methodology.kpis.howCalculate')}</div>
|
||||
<div className="bg-white rounded p-3 mb-3">
|
||||
<div className="flex items-center justify-center gap-2 text-sm font-mono flex-wrap">
|
||||
<span className="text-slate-600">Coste =</span>
|
||||
<span className="text-slate-600">{t('methodology.kpis.costEquals')}</span>
|
||||
<span className="px-2 py-1 bg-blue-100 rounded text-blue-800 text-xs">(AHT seg ÷ 3600)</span>
|
||||
<span className="text-slate-400">×</span>
|
||||
<span className="px-2 py-1 bg-amber-100 rounded text-amber-800 text-xs">€{costPerHour}/h</span>
|
||||
<span className="text-slate-400">×</span>
|
||||
<span className="px-2 py-1 bg-gray-100 rounded text-gray-800 text-xs">Volumen</span>
|
||||
<span className="px-2 py-1 bg-gray-100 rounded text-gray-800 text-xs">{t('methodology.cpi.volume')}</span>
|
||||
<span className="text-slate-400">÷</span>
|
||||
<span className="px-2 py-1 bg-purple-100 rounded text-purple-800 text-xs">{(effectiveProductivity * 100).toFixed(0)}%</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs text-slate-600">
|
||||
El <strong>AHT</strong> está en segundos, se convierte a horas dividiendo por 3600.
|
||||
Incluye todas las interacciones que generan coste (noise + zombie + válidas).
|
||||
Solo se excluyen los abandonos porque no consumen tiempo de agente.
|
||||
{t('methodology.cpi.ahtExplanation')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Componentes del coste horario */}
|
||||
<div className="bg-amber-50 border border-amber-200 rounded-lg p-4">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="text-sm font-semibold text-amber-800">Coste por Hora del Agente (Fully Loaded)</div>
|
||||
<div className="text-sm font-semibold text-amber-800">{t('methodology.cpi.hourlyRate')}</div>
|
||||
<span className="text-xs bg-amber-200 text-amber-800 px-2 py-0.5 rounded-full font-medium">
|
||||
Valor introducido: €{costPerHour.toFixed(2)}/h
|
||||
{t('methodology.cpi.configuredValue', { value: costPerHour.toFixed(2) })}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-amber-700 mb-3">
|
||||
Este valor fue configurado en la pantalla de entrada de datos y debe incluir todos los costes asociados al agente:
|
||||
{t('methodology.cpi.includesAllCosts')}
|
||||
</p>
|
||||
<div className="grid grid-cols-2 gap-2 text-xs">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-amber-500">•</span>
|
||||
<span className="text-amber-700">Salario bruto del agente</span>
|
||||
<span className="text-amber-700">{t('methodology.cpi.cost1')}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-amber-500">•</span>
|
||||
<span className="text-amber-700">Costes de seguridad social</span>
|
||||
<span className="text-amber-700">{t('methodology.cpi.cost2')}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-amber-500">•</span>
|
||||
<span className="text-amber-700">Licencias de software</span>
|
||||
<span className="text-amber-700">{t('methodology.cpi.cost3')}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-amber-500">•</span>
|
||||
<span className="text-amber-700">Infraestructura y puesto</span>
|
||||
<span className="text-amber-700">{t('methodology.cpi.cost4')}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-amber-500">•</span>
|
||||
<span className="text-amber-700">Supervisión y QA</span>
|
||||
<span className="text-amber-700">{t('methodology.cpi.cost5')}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-amber-500">•</span>
|
||||
<span className="text-amber-700">Formación y overhead</span>
|
||||
<span className="text-amber-700">{t('methodology.cpi.cost6')}</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-[10px] text-amber-600 mt-3 italic">
|
||||
💡 Si necesita ajustar este valor, puede volver a la pantalla de entrada de datos y modificarlo.
|
||||
💡 {t('methodology.cpi.adjustNote')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function BeforeAfterSection({ kpis }: { kpis: DataSummary['kpis'] }) {
|
||||
function BeforeAfterSection({ kpis, t }: { kpis: DataSummary['kpis']; t: any }) {
|
||||
const rows = [
|
||||
{
|
||||
metric: 'FCR',
|
||||
metric: t('methodology.impact.fcr'),
|
||||
tradicional: `${kpis.fcrTecnico}%`,
|
||||
beyond: `${kpis.fcrReal}%`,
|
||||
beyondClass: 'text-red-600',
|
||||
impacto: 'Revela demanda fallida oculta'
|
||||
impacto: t('methodology.impact.revealsDemand')
|
||||
},
|
||||
{
|
||||
metric: 'Abandono',
|
||||
metric: t('methodology.impact.abandon'),
|
||||
tradicional: `~${kpis.abandonoTradicional}%`,
|
||||
beyond: `${kpis.abandonoReal.toFixed(1)}%`,
|
||||
beyondClass: 'text-yellow-600',
|
||||
impacto: 'Detecta frustración cliente real'
|
||||
impacto: t('methodology.impact.detectsFrustration')
|
||||
},
|
||||
{
|
||||
metric: 'Skills',
|
||||
tradicional: `${kpis.skillsTecnicos} técnicos`,
|
||||
beyond: `${kpis.skillsNegocio} líneas negocio`,
|
||||
metric: t('methodology.impact.skills'),
|
||||
tradicional: t('methodology.impact.technicalSkills', { count: kpis.skillsTecnicos }),
|
||||
beyond: t('methodology.impact.businessLines', { count: kpis.skillsNegocio }),
|
||||
beyondClass: 'text-blue-600',
|
||||
impacto: 'Visión ejecutiva accionable'
|
||||
impacto: t('methodology.impact.executiveVision')
|
||||
},
|
||||
{
|
||||
metric: 'AHT',
|
||||
tradicional: 'Distorsionado',
|
||||
beyond: 'Limpio',
|
||||
metric: t('methodology.impact.aht'),
|
||||
tradicional: t('methodology.impact.distorted'),
|
||||
beyond: t('methodology.impact.clean'),
|
||||
beyondClass: 'text-green-600',
|
||||
impacto: 'KPIs reflejan desempeño real'
|
||||
impacto: t('methodology.impact.reflectsPerformance')
|
||||
}
|
||||
];
|
||||
|
||||
@@ -445,17 +441,17 @@ function BeforeAfterSection({ kpis }: { kpis: DataSummary['kpis'] }) {
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
|
||||
<ArrowLeftRight className="w-5 h-5 text-teal-600" />
|
||||
Impacto de la Transformación
|
||||
{t('methodology.impact.title')}
|
||||
</h3>
|
||||
|
||||
<div className="overflow-hidden rounded-lg border border-slate-200">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th className="px-3 py-2 text-left font-semibold">Métrica</th>
|
||||
<th className="px-3 py-2 text-center font-semibold">Visión Tradicional</th>
|
||||
<th className="px-3 py-2 text-center font-semibold">Visión Beyond</th>
|
||||
<th className="px-3 py-2 text-left font-semibold">Impacto</th>
|
||||
<th className="px-3 py-2 text-left font-semibold">{t('methodology.impact.metric')}</th>
|
||||
<th className="px-3 py-2 text-center font-semibold">{t('methodology.impact.traditional')}</th>
|
||||
<th className="px-3 py-2 text-center font-semibold">{t('methodology.impact.beyond')}</th>
|
||||
<th className="px-3 py-2 text-left font-semibold">{t('methodology.impact.impact')}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100">
|
||||
@@ -473,53 +469,52 @@ function BeforeAfterSection({ kpis }: { kpis: DataSummary['kpis'] }) {
|
||||
|
||||
<div className="mt-4 p-3 bg-indigo-50 border border-indigo-200 rounded-lg">
|
||||
<p className="text-xs text-indigo-800">
|
||||
<strong>💡 Sin esta transformación,</strong> las decisiones de automatización
|
||||
se basarían en datos incorrectos, generando inversiones en los procesos equivocados.
|
||||
<strong>💡 {t('methodology.impact.withoutTransformation')}</strong> {t('methodology.impact.wrongInvestments')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SkillsMappingSection({ numSkillsNegocio }: { numSkillsNegocio: number }) {
|
||||
function SkillsMappingSection({ numSkillsNegocio, t }: { numSkillsNegocio: number; t: any }) {
|
||||
const mappings = [
|
||||
{
|
||||
lineaNegocio: 'Baggage & Handling',
|
||||
lineaNegocio: t('methodology.skillMapping.baggage'),
|
||||
keywords: 'HANDLING, EQUIPAJE, AHL (Lost & Found), DPR (Daños)',
|
||||
color: 'bg-amber-100 text-amber-800'
|
||||
},
|
||||
{
|
||||
lineaNegocio: 'Sales & Booking',
|
||||
lineaNegocio: t('methodology.skillMapping.sales'),
|
||||
keywords: 'COMPRA, VENTA, RESERVA, PAGO',
|
||||
color: 'bg-blue-100 text-blue-800'
|
||||
},
|
||||
{
|
||||
lineaNegocio: 'Loyalty (SUMA)',
|
||||
lineaNegocio: t('methodology.skillMapping.loyalty'),
|
||||
keywords: 'SUMA (Programa de Fidelización)',
|
||||
color: 'bg-purple-100 text-purple-800'
|
||||
},
|
||||
{
|
||||
lineaNegocio: 'B2B & Agencies',
|
||||
lineaNegocio: t('methodology.skillMapping.b2b'),
|
||||
keywords: 'AGENCIAS, AAVV, EMPRESAS, AVORIS, TOUROPERACION',
|
||||
color: 'bg-cyan-100 text-cyan-800'
|
||||
},
|
||||
{
|
||||
lineaNegocio: 'Changes & Post-Sales',
|
||||
lineaNegocio: t('methodology.skillMapping.changes'),
|
||||
keywords: 'MODIFICACION, CAMBIO, POSTVENTA, REFUND, REEMBOLSO',
|
||||
color: 'bg-orange-100 text-orange-800'
|
||||
},
|
||||
{
|
||||
lineaNegocio: 'Digital Support',
|
||||
lineaNegocio: t('methodology.skillMapping.digital'),
|
||||
keywords: 'WEB (Soporte a navegación)',
|
||||
color: 'bg-indigo-100 text-indigo-800'
|
||||
},
|
||||
{
|
||||
lineaNegocio: 'Customer Service',
|
||||
lineaNegocio: t('methodology.skillMapping.customer'),
|
||||
keywords: 'ATENCION, INFO, OTROS, GENERAL, PREMIUM',
|
||||
color: 'bg-green-100 text-green-800'
|
||||
},
|
||||
{
|
||||
lineaNegocio: 'Internal / Backoffice',
|
||||
lineaNegocio: t('methodology.skillMapping.internal'),
|
||||
keywords: 'COORD, BO_, HELPDESK, BACKOFFICE',
|
||||
color: 'bg-slate-100 text-slate-800'
|
||||
}
|
||||
@@ -529,13 +524,13 @@ function SkillsMappingSection({ numSkillsNegocio }: { numSkillsNegocio: number }
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
|
||||
<Layers className="w-5 h-5 text-violet-600" />
|
||||
Mapeo de Skills a Líneas de Negocio
|
||||
{t('methodology.skillMapping.title')}
|
||||
</h3>
|
||||
|
||||
{/* Resumen del mapeo */}
|
||||
<div className="bg-violet-50 border border-violet-200 rounded-lg p-4 mb-4">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm font-medium text-violet-800">Simplificación aplicada</span>
|
||||
<span className="text-sm font-medium text-violet-800">{t('methodology.skillMapping.simplificationApplied')}</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-2xl font-bold text-violet-600">980</span>
|
||||
<ArrowRight className="w-4 h-4 text-violet-400" />
|
||||
@@ -543,8 +538,7 @@ function SkillsMappingSection({ numSkillsNegocio }: { numSkillsNegocio: number }
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs text-violet-700">
|
||||
Se redujo la complejidad de <strong>980 skills técnicos</strong> a <strong>{numSkillsNegocio} Líneas de Negocio</strong>.
|
||||
Esta simplificación es vital para la visualización ejecutiva y la toma de decisiones estratégicas.
|
||||
{t('methodology.skillMapping.reductionDesc', { count: numSkillsNegocio })}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -553,8 +547,8 @@ function SkillsMappingSection({ numSkillsNegocio }: { numSkillsNegocio: number }
|
||||
<table className="w-full text-sm">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th className="px-3 py-2 text-left font-semibold">Línea de Negocio</th>
|
||||
<th className="px-3 py-2 text-left font-semibold">Keywords Detectadas (Lógica Fuzzy)</th>
|
||||
<th className="px-3 py-2 text-left font-semibold">{t('methodology.skillMapping.businessLine')}</th>
|
||||
<th className="px-3 py-2 text-left font-semibold">{t('methodology.skillMapping.keywords')}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100">
|
||||
@@ -575,34 +569,33 @@ function SkillsMappingSection({ numSkillsNegocio }: { numSkillsNegocio: number }
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-gray-500 mt-3 italic">
|
||||
💡 El mapeo utiliza lógica fuzzy para clasificar automáticamente cada skill técnico
|
||||
según las keywords detectadas en su nombre. Los skills no clasificados se asignan a "Customer Service".
|
||||
💡 {t('methodology.skillMapping.fuzzyLogicNote')}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function GuaranteesSection() {
|
||||
function GuaranteesSection({ t }: { t: any }) {
|
||||
const guarantees = [
|
||||
{
|
||||
icon: '✓',
|
||||
title: '100% Trazabilidad',
|
||||
desc: 'Todos los registros conservados (soft delete)'
|
||||
title: t('methodology.quality.traceability'),
|
||||
desc: t('methodology.quality.traceabilityDesc')
|
||||
},
|
||||
{
|
||||
icon: '✓',
|
||||
title: 'Fórmulas Documentadas',
|
||||
desc: 'Cada KPI tiene metodología auditable'
|
||||
title: t('methodology.quality.formulas'),
|
||||
desc: t('methodology.quality.formulasDesc')
|
||||
},
|
||||
{
|
||||
icon: '✓',
|
||||
title: 'Reconciliación Financiera',
|
||||
desc: 'Dataset original disponible para auditoría'
|
||||
title: t('methodology.quality.reconciliation'),
|
||||
desc: t('methodology.quality.reconciliationDesc')
|
||||
},
|
||||
{
|
||||
icon: '✓',
|
||||
title: 'Metodología Replicable',
|
||||
desc: 'Proceso reproducible para actualizaciones'
|
||||
title: t('methodology.quality.replicable'),
|
||||
desc: t('methodology.quality.replicableDesc')
|
||||
}
|
||||
];
|
||||
|
||||
@@ -610,7 +603,7 @@ function GuaranteesSection() {
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
|
||||
<BadgeCheck className="w-5 h-5 text-green-600" />
|
||||
Garantías de Calidad
|
||||
{t('methodology.quality.title')}
|
||||
</h3>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
@@ -631,6 +624,8 @@ function GuaranteesSection() {
|
||||
// ========== COMPONENTE PRINCIPAL ==========
|
||||
|
||||
export function MetodologiaDrawer({ isOpen, onClose, data }: MetodologiaDrawerProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
// Calcular datos del resumen desde AnalysisData
|
||||
const totalRegistros = data.heatmapData?.reduce((sum, h) => sum + h.volume, 0) || 0;
|
||||
const totalCost = data.heatmapData?.reduce((sum, h) => sum + (h.annual_cost || 0), 0) || 0;
|
||||
@@ -665,8 +660,8 @@ export function MetodologiaDrawer({ isOpen, onClose, data }: MetodologiaDrawerPr
|
||||
mesesHistorico,
|
||||
periodo: data.dateRange
|
||||
? `${data.dateRange.min} - ${data.dateRange.max}`
|
||||
: 'Enero - Diciembre 2025',
|
||||
fuente: data.source === 'backend' ? 'Genesys Cloud CX' : 'Dataset cargado',
|
||||
: t('methodology.defaultPeriod'),
|
||||
fuente: data.source === 'backend' ? t('methodology.sourceGenesys') : t('methodology.sourceDataset'),
|
||||
taxonomia: {
|
||||
valid: 94.2,
|
||||
noise: 3.1,
|
||||
@@ -686,17 +681,14 @@ export function MetodologiaDrawer({ isOpen, onClose, data }: MetodologiaDrawerPr
|
||||
|
||||
const handleDownloadPDF = () => {
|
||||
// Por ahora, abrir una URL placeholder o mostrar alert
|
||||
alert('Funcionalidad de descarga PDF en desarrollo. El documento estará disponible próximamente.');
|
||||
alert(t('methodology.pdfDevelopment'));
|
||||
// En producción: window.open('/documents/Beyond_Diagnostic_Protocolo_Datos.pdf', '_blank');
|
||||
};
|
||||
|
||||
const formatDate = (): string => {
|
||||
const now = new Date();
|
||||
const months = [
|
||||
'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
|
||||
'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
|
||||
];
|
||||
return `${months[now.getMonth()]} ${now.getFullYear()}`;
|
||||
const monthKey = `methodology.months.${['january', 'february', 'march', 'april', 'may', 'june', 'july', 'august', 'september', 'october', 'november', 'december'][now.getMonth()]}`;
|
||||
return `${t(monthKey)} ${now.getFullYear()}`;
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -724,7 +716,7 @@ export function MetodologiaDrawer({ isOpen, onClose, data }: MetodologiaDrawerPr
|
||||
<div className="sticky top-0 bg-white border-b border-slate-200 px-6 py-4 flex justify-between items-center flex-shrink-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<ShieldCheck className="text-green-600 w-6 h-6" />
|
||||
<h2 className="text-lg font-bold text-slate-800">Metodología de Transformación de Datos</h2>
|
||||
<h2 className="text-lg font-bold text-slate-800">{t('methodology.fullTitle')}</h2>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
@@ -736,18 +728,19 @@ export function MetodologiaDrawer({ isOpen, onClose, data }: MetodologiaDrawerPr
|
||||
|
||||
{/* Body - Scrollable */}
|
||||
<div className="flex-1 overflow-y-auto p-6 space-y-6">
|
||||
<DataSummarySection data={dataSummary} />
|
||||
<PipelineSection />
|
||||
<SkillsMappingSection numSkillsNegocio={dataSummary.kpis.skillsNegocio} />
|
||||
<TaxonomySection data={dataSummary.taxonomia} />
|
||||
<KPIRedefinitionSection kpis={dataSummary.kpis} />
|
||||
<DataSummarySection data={dataSummary} t={t} />
|
||||
<PipelineSection t={t} />
|
||||
<SkillsMappingSection numSkillsNegocio={dataSummary.kpis.skillsNegocio} t={t} />
|
||||
<TaxonomySection data={dataSummary.taxonomia} t={t} />
|
||||
<KPIRedefinitionSection kpis={dataSummary.kpis} t={t} />
|
||||
<CPICalculationSection
|
||||
totalCost={totalCost}
|
||||
totalVolume={totalCostVolume}
|
||||
costPerHour={data.staticConfig?.cost_per_hour || 20}
|
||||
t={t}
|
||||
/>
|
||||
<BeforeAfterSection kpis={dataSummary.kpis} />
|
||||
<GuaranteesSection />
|
||||
<BeforeAfterSection kpis={dataSummary.kpis} t={t} />
|
||||
<GuaranteesSection t={t} />
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
@@ -758,10 +751,10 @@ export function MetodologiaDrawer({ isOpen, onClose, data }: MetodologiaDrawerPr
|
||||
className="flex items-center gap-2 px-4 py-2 bg-[#6D84E3] text-white rounded-lg hover:bg-[#5A70C7] transition-colors text-sm font-medium"
|
||||
>
|
||||
<Download className="w-4 h-4" />
|
||||
Descargar Protocolo Completo (PDF)
|
||||
{t('methodology.downloadProtocol')}
|
||||
</button>
|
||||
<span className="text-xs text-gray-500">
|
||||
Beyond Diagnosis - Data Strategy Unit │ Certificado: {formatDate()}
|
||||
{t('methodology.certificate', { date: formatDate() })}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user