refactor: Remove ValidationQuestionnaire and DimensionConnections from Law10Tab
- Removed ValidationQuestionnaire section (manual input form) - Removed DimensionConnections section (links to other tabs) - Removed unused imports (FileText, TrendingUp) - Removed onTabChange prop from Law10Tab component - Updated DashboardTabs.tsx to not pass onTabChange to Law10Tab Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
sujucu70
@@ -8,8 +8,6 @@ import {
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
HelpCircle,
|
||||
TrendingUp,
|
||||
FileText,
|
||||
Lightbulb,
|
||||
} from 'lucide-react';
|
||||
import type { AnalysisData, HeatmapDataPoint, DrilldownDataPoint } from '../../types';
|
||||
@@ -1491,273 +1489,11 @@ function DataMaturitySummary({ data }: { data: AnalysisData }) {
|
||||
);
|
||||
}
|
||||
|
||||
// Seccion: Cuestionario de Validacion
|
||||
function ValidationQuestionnaire() {
|
||||
return (
|
||||
<Card>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="p-2 bg-slate-100 rounded-lg">
|
||||
<FileText className="w-5 h-5 text-slate-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-900 text-lg">Cuestionario de Validacion</h3>
|
||||
<p className="text-sm text-gray-500">Completar manualmente para diagnostico completo</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-3 bg-amber-50 border border-amber-200 rounded-lg mb-4">
|
||||
<p className="text-sm text-gray-700">
|
||||
Los siguientes datos <strong>NO pueden extraerse</strong> de tu CDR actual.
|
||||
Por favor completa para el diagnostico completo:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* Pregunta 1 - Horario */}
|
||||
<div className="p-4 bg-gray-50 rounded-lg">
|
||||
<p className="font-medium text-gray-800 mb-3">1. Horario operativo actual:</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label className="text-xs text-gray-500 block mb-1">Lunes-Viernes:</label>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="text"
|
||||
defaultValue="08:00"
|
||||
className="w-20 px-2 py-1 text-sm border border-gray-300 rounded"
|
||||
disabled
|
||||
/>
|
||||
<span className="text-gray-500">a</span>
|
||||
<input
|
||||
type="text"
|
||||
defaultValue="22:00"
|
||||
className="w-20 px-2 py-1 text-sm border border-gray-300 rounded"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-gray-500 block mb-1">Sabados:</label>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="text"
|
||||
defaultValue="10:00"
|
||||
className="w-20 px-2 py-1 text-sm border border-gray-300 rounded"
|
||||
disabled
|
||||
/>
|
||||
<span className="text-gray-500">a</span>
|
||||
<input
|
||||
type="text"
|
||||
defaultValue="20:00"
|
||||
className="w-20 px-2 py-1 text-sm border border-gray-300 rounded"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-gray-500 block mb-1">Domingos:</label>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="text"
|
||||
defaultValue="10:00"
|
||||
className="w-20 px-2 py-1 text-sm border border-gray-300 rounded"
|
||||
disabled
|
||||
/>
|
||||
<span className="text-gray-500">a</span>
|
||||
<input
|
||||
type="text"
|
||||
defaultValue="20:00"
|
||||
className="w-20 px-2 py-1 text-sm border border-gray-300 rounded"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Pregunta 2 - Lenguas */}
|
||||
<div className="p-4 bg-gray-50 rounded-lg">
|
||||
<p className="font-medium text-gray-800 mb-3">2. ¿Ofreceis atencion en lenguas cooficiales?</p>
|
||||
<div className="flex flex-wrap gap-4">
|
||||
<label className="flex items-center gap-2 text-sm">
|
||||
<input type="checkbox" className="rounded" disabled />
|
||||
<span>Catalan</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2 text-sm">
|
||||
<input type="checkbox" className="rounded" disabled />
|
||||
<span>Euskera</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2 text-sm">
|
||||
<input type="checkbox" className="rounded" disabled />
|
||||
<span>Gallego</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2 text-sm">
|
||||
<input type="checkbox" className="rounded" disabled />
|
||||
<span>Aranes</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2 text-sm">
|
||||
<input type="checkbox" className="rounded" disabled />
|
||||
<span>Ninguna (solo castellano)</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Pregunta 3 - IVR */}
|
||||
<div className="p-4 bg-gray-50 rounded-lg">
|
||||
<p className="font-medium text-gray-800 mb-3">3. ¿El IVR ofrece siempre opcion de agente humano?</p>
|
||||
<div className="space-y-2">
|
||||
<label className="flex items-center gap-2 text-sm">
|
||||
<input type="radio" name="ivr" disabled />
|
||||
<span>Si, desde menu principal</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2 text-sm">
|
||||
<input type="radio" name="ivr" disabled />
|
||||
<span>Si, pero tras varios niveles</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2 text-sm">
|
||||
<input type="radio" name="ivr" disabled />
|
||||
<span>No en todos los flujos</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Pregunta 4 - Reclamaciones */}
|
||||
<div className="p-4 bg-gray-50 rounded-lg">
|
||||
<p className="font-medium text-gray-800 mb-3">4. ¿Gestionais reclamaciones en sistema separado del CDR?</p>
|
||||
<div className="space-y-2">
|
||||
<label className="flex items-center gap-2 text-sm">
|
||||
<input type="radio" name="reclamaciones" disabled />
|
||||
<span>Si (indicar sistema: <input type="text" className="ml-2 px-2 py-1 text-sm border border-gray-300 rounded w-40" placeholder="Nombre sistema" disabled />)</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2 text-sm">
|
||||
<input type="radio" name="reclamaciones" disabled />
|
||||
<span>No, solo registradas en CDR</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Pregunta 5 - ENAC */}
|
||||
<div className="p-4 bg-gray-50 rounded-lg">
|
||||
<p className="font-medium text-gray-800 mb-3">5. ¿Teneis contratado auditor ENAC?</p>
|
||||
<div className="space-y-2">
|
||||
<label className="flex items-center gap-2 text-sm">
|
||||
<input type="radio" name="enac" disabled />
|
||||
<span>Si (nombre: <input type="text" className="ml-2 px-2 py-1 text-sm border border-gray-300 rounded w-40" placeholder="Nombre auditor" disabled />)</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2 text-sm">
|
||||
<input type="radio" name="enac" disabled />
|
||||
<span>En proceso de contratacion</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2 text-sm">
|
||||
<input type="radio" name="enac" disabled />
|
||||
<span>No</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Nota */}
|
||||
<div className="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg">
|
||||
<p className="text-xs text-blue-800">
|
||||
<strong>Nota:</strong> Este cuestionario es informativo. Para habilitar la edicion y guardado,
|
||||
contacta con tu administrador de Beyond CX Analytics.
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// Seccion: Conexiones con otras dimensiones
|
||||
interface DimensionConnectionsProps {
|
||||
onTabChange?: (tab: string) => void;
|
||||
}
|
||||
|
||||
function DimensionConnections({ onTabChange }: DimensionConnectionsProps) {
|
||||
const connections = [
|
||||
{
|
||||
dimension: 'Dimension 2 (Eficiencia)',
|
||||
impact: 'AHT elevado impacta ASA',
|
||||
description: 'Reducir AHT mejora capacidad y reduce colas',
|
||||
tab: 'dimensions',
|
||||
color: 'purple',
|
||||
},
|
||||
{
|
||||
dimension: 'Dimension 3 (Efectividad)',
|
||||
impact: 'FCR bajo sugiere >15 dias',
|
||||
description: 'Mejorar FCR reduce tiempo total de resolucion',
|
||||
tab: 'dimensions',
|
||||
color: 'emerald',
|
||||
},
|
||||
{
|
||||
dimension: 'Agentic Readiness',
|
||||
impact: 'Automatizacion cubre gaps 24/7',
|
||||
description: 'Chatbots e IA pueden cubrir cobertura nocturna',
|
||||
tab: 'readiness',
|
||||
color: 'blue',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="p-2 bg-blue-100 rounded-lg">
|
||||
<TrendingUp className="w-5 h-5 text-blue-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-900 text-lg">Conexiones con Otras Dimensiones</h3>
|
||||
<p className="text-sm text-gray-500">Este analisis se integra con tu diagnostico operacional</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
{connections.map((conn, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className={cn(
|
||||
'p-4 rounded-lg border transition-colors cursor-pointer hover:border-blue-300',
|
||||
conn.color === 'purple' && 'bg-purple-50/50 border-purple-200',
|
||||
conn.color === 'emerald' && 'bg-emerald-50/50 border-emerald-200',
|
||||
conn.color === 'blue' && 'bg-blue-50/50 border-blue-200',
|
||||
)}
|
||||
onClick={() => onTabChange?.(conn.tab)}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="font-medium text-gray-800">{conn.dimension}</p>
|
||||
<p className={cn(
|
||||
'text-sm font-semibold',
|
||||
conn.color === 'purple' && 'text-purple-700',
|
||||
conn.color === 'emerald' && 'text-emerald-700',
|
||||
conn.color === 'blue' && 'text-blue-700',
|
||||
)}>{conn.impact}</p>
|
||||
<p className="text-xs text-gray-500 mt-1">{conn.description}</p>
|
||||
</div>
|
||||
<button
|
||||
className={cn(
|
||||
'px-3 py-1.5 text-xs font-medium rounded transition-colors',
|
||||
conn.color === 'purple' && 'bg-purple-100 text-purple-700 hover:bg-purple-200',
|
||||
conn.color === 'emerald' && 'bg-emerald-100 text-emerald-700 hover:bg-emerald-200',
|
||||
conn.color === 'blue' && 'bg-blue-100 text-blue-700 hover:bg-blue-200',
|
||||
)}
|
||||
>
|
||||
IR A ANALISIS →
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// COMPONENTE PRINCIPAL
|
||||
// ============================================
|
||||
|
||||
interface Law10TabPropsExtended extends Law10TabProps {
|
||||
onTabChange?: (tab: string) => void;
|
||||
}
|
||||
|
||||
export function Law10Tab({ data, onTabChange }: Law10TabPropsExtended) {
|
||||
export function Law10Tab({ data }: Law10TabProps) {
|
||||
// Evaluar compliance para cada requisito
|
||||
const complianceResults = {
|
||||
law07: evaluateLaw07Compliance(data),
|
||||
@@ -1788,12 +1524,6 @@ export function Law10Tab({ data, onTabChange }: Law10TabPropsExtended) {
|
||||
|
||||
{/* Madurez de Datos para Compliance */}
|
||||
<DataMaturitySummary data={data} />
|
||||
|
||||
{/* Cuestionario de Validacion */}
|
||||
<ValidationQuestionnaire />
|
||||
|
||||
{/* Conexiones con Otras Dimensiones */}
|
||||
<DimensionConnections onTabChange={onTabChange} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user