119 lines
4.4 KiB
TypeScript
119 lines
4.4 KiB
TypeScript
import { useState } from 'react';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import { ArrowLeft, ShieldCheck, Info } from 'lucide-react';
|
|
import { DashboardHeader, TabId } from './DashboardHeader';
|
|
import { ExecutiveSummaryTab } from './tabs/ExecutiveSummaryTab';
|
|
import { DimensionAnalysisTab } from './tabs/DimensionAnalysisTab';
|
|
import { AgenticReadinessTab } from './tabs/AgenticReadinessTab';
|
|
import { RoadmapTab } from './tabs/RoadmapTab';
|
|
import { MetodologiaDrawer } from './MetodologiaDrawer';
|
|
import type { AnalysisData } from '../types';
|
|
|
|
interface DashboardTabsProps {
|
|
data: AnalysisData;
|
|
title?: string;
|
|
onBack?: () => void;
|
|
}
|
|
|
|
export function DashboardTabs({
|
|
data,
|
|
title = 'AIR EUROPA - Beyond CX Analytics',
|
|
onBack
|
|
}: DashboardTabsProps) {
|
|
const [activeTab, setActiveTab] = useState<TabId>('executive');
|
|
const [metodologiaOpen, setMetodologiaOpen] = useState(false);
|
|
|
|
const renderTabContent = () => {
|
|
switch (activeTab) {
|
|
case 'executive':
|
|
return <ExecutiveSummaryTab data={data} onTabChange={setActiveTab} />;
|
|
case 'dimensions':
|
|
return <DimensionAnalysisTab data={data} />;
|
|
case 'readiness':
|
|
return <AgenticReadinessTab data={data} onTabChange={setActiveTab} />;
|
|
case 'roadmap':
|
|
return <RoadmapTab data={data} />;
|
|
default:
|
|
return <ExecutiveSummaryTab data={data} />;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-slate-50">
|
|
{/* Back button */}
|
|
{onBack && (
|
|
<div className="bg-white border-b border-slate-200">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 py-2">
|
|
<button
|
|
onClick={onBack}
|
|
className="flex items-center gap-2 text-sm text-slate-600 hover:text-slate-800 transition-colors"
|
|
>
|
|
<ArrowLeft className="w-4 h-4" />
|
|
<span className="hidden sm:inline">Volver al formulario</span>
|
|
<span className="sm:hidden">Volver</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Sticky Header with Tabs */}
|
|
<DashboardHeader
|
|
title={title}
|
|
activeTab={activeTab}
|
|
onTabChange={setActiveTab}
|
|
/>
|
|
|
|
{/* Tab Content */}
|
|
<main className="max-w-7xl mx-auto px-4 sm:px-6 py-4 sm:py-6">
|
|
<AnimatePresence mode="wait">
|
|
<motion.div
|
|
key={activeTab}
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: -10 }}
|
|
transition={{ duration: 0.2 }}
|
|
>
|
|
{renderTabContent()}
|
|
</motion.div>
|
|
</AnimatePresence>
|
|
</main>
|
|
|
|
{/* Footer */}
|
|
<footer className="border-t border-slate-200 bg-white mt-8">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 py-3 sm:py-4">
|
|
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 text-sm text-slate-500">
|
|
<span className="hidden sm:inline">Beyond Diagnosis - Contact Center Analytics Platform</span>
|
|
<span className="sm:hidden text-xs">Beyond Diagnosis</span>
|
|
<div className="flex flex-wrap items-center gap-2 sm:gap-3">
|
|
<span className="text-xs sm:text-sm">
|
|
{data.tier ? data.tier.toUpperCase() : 'GOLD'} |
|
|
{data.source === 'backend' ? 'Genesys' : data.source || 'synthetic'}
|
|
</span>
|
|
<span className="hidden sm:inline text-slate-300">|</span>
|
|
{/* Badge Metodología */}
|
|
<button
|
|
onClick={() => setMetodologiaOpen(true)}
|
|
className="inline-flex items-center gap-1 sm:gap-1.5 px-2 sm:px-3 py-1 sm:py-1.5 bg-green-100 text-green-800 rounded-full text-[10px] sm:text-xs font-medium hover:bg-green-200 transition-colors cursor-pointer"
|
|
>
|
|
<ShieldCheck className="w-3 h-3 sm:w-3.5 sm:h-3.5" />
|
|
<span className="hidden md:inline">Metodología de Transformación de Datos aplicada</span>
|
|
<span className="md:hidden">Metodología</span>
|
|
<Info className="w-2.5 h-2.5 sm:w-3 sm:h-3 opacity-60" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
{/* Drawer de Metodología */}
|
|
<MetodologiaDrawer
|
|
isOpen={metodologiaOpen}
|
|
onClose={() => setMetodologiaOpen(false)}
|
|
data={data}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default DashboardTabs;
|