Initial commit - ACME demo version

2026-02-04 11:08:21 +01:00
commit 1bb0765766
180 changed files with 52249 additions and 0 deletions
--- a/frontend/components/DashboardTabs.tsx
+++ b/frontend/components/DashboardTabs.tsx
@@ -0,0 +1,107 @@
+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 = '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} />;
+      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;