108 lines
3.6 KiB
TypeScript
108 lines
3.6 KiB
TypeScript
import { useState } from 'react';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import { ArrowLeft } from 'lucide-react';
|
|
import { DashboardHeader, TabId } from './DashboardHeader';
|
|
import { formatDateMonthYear } from '../utils/formatters';
|
|
import { ExecutiveSummaryTab } from './tabs/ExecutiveSummaryTab';
|
|
import { DimensionAnalysisTab } from './tabs/DimensionAnalysisTab';
|
|
import { AgenticReadinessTab } from './tabs/AgenticReadinessTab';
|
|
import { RoadmapTab } from './tabs/RoadmapTab';
|
|
import { Law10Tab } from './tabs/Law10Tab';
|
|
import { MetodologiaDrawer } from './MetodologiaDrawer';
|
|
import type { AnalysisData } from '../types';
|
|
|
|
interface DashboardTabsProps {
|
|
data: AnalysisData;
|
|
title?: string;
|
|
onBack?: () => void;
|
|
}
|
|
|
|
export function DashboardTabs({
|
|
data,
|
|
title = 'CLIENTE DEMO - 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} />;
|
|
case 'law10':
|
|
return <Law10Tab 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}
|
|
onMetodologiaClick={() => setMetodologiaOpen(true)}
|
|
/>
|
|
|
|
{/* 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>
|
|
<span className="text-xs sm:text-sm text-slate-400 italic">{formatDateMonthYear()}</span>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
{/* Drawer de Metodología */}
|
|
<MetodologiaDrawer
|
|
isOpen={metodologiaOpen}
|
|
onClose={() => setMetodologiaOpen(false)}
|
|
data={data}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default DashboardTabs;
|