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/DashboardNavigation.tsx
+++ b/frontend/components/DashboardNavigation.tsx
@@ -0,0 +1,123 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { 
+  LayoutDashboard, 
+  Grid3x3, 
+  Activity, 
+  Target, 
+  Map, 
+  DollarSign, 
+  BarChart,
+  Download,
+  Share2
+} from 'lucide-react';
+import clsx from 'clsx';
+
+interface NavItem {
+  id: string;
+  label: string;
+  icon: React.ElementType;
+}
+
+interface DashboardNavigationProps {
+  activeSection: string;
+  onSectionChange: (sectionId: string) => void;
+  onExport?: () => void;
+  onShare?: () => void;
+}
+
+const navItems: NavItem[] = [
+  { id: 'overview', label: 'Resumen', icon: LayoutDashboard },
+  { id: 'dimensions', label: 'Dimensiones', icon: Grid3x3 },
+  { id: 'heatmap', label: 'Heatmap', icon: Activity },
+  { id: 'opportunities', label: 'Oportunidades', icon: Target },
+  { id: 'roadmap', label: 'Roadmap', icon: Map },
+  { id: 'economics', label: 'Modelo Económico', icon: DollarSign },
+  { id: 'benchmark', label: 'Benchmark', icon: BarChart },
+];
+
+const DashboardNavigation: React.FC<DashboardNavigationProps> = ({
+  activeSection,
+  onSectionChange,
+  onExport,
+  onShare,
+}) => {
+  const scrollToSection = (sectionId: string) => {
+    onSectionChange(sectionId);
+    const element = document.getElementById(sectionId);
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  };
+
+  return (
+    <nav className="sticky top-0 bg-white border-b border-slate-200 z-50 shadow-sm">
+      <div className="max-w-screen-2xl mx-auto px-4 py-3">
+        <div className="flex items-center justify-between">
+          {/* Navigation Items */}
+          <div className="flex items-center gap-1 overflow-x-auto">
+            {navItems.map((item) => {
+              const Icon = item.icon;
+              const isActive = activeSection === item.id;
+              
+              return (
+                <motion.button
+                  key={item.id}
+                  onClick={() => scrollToSection(item.id)}
+                  className={clsx(
+                    'relative flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors whitespace-nowrap',
+                    isActive
+                      ? 'text-blue-600 bg-blue-50'
+                      : 'text-slate-600 hover:text-slate-900 hover:bg-slate-50'
+                  )}
+                  whileHover={{ scale: 1.02 }}
+                  whileTap={{ scale: 0.98 }}
+                >
+                  <Icon size={18} />
+                  <span>{item.label}</span>
+                  
+                  {isActive && (
+                    <motion.div
+                      className="absolute bottom-0 left-0 right-0 h-0.5 bg-blue-600"
+                      layoutId="activeIndicator"
+                      transition={{ type: 'spring', stiffness: 380, damping: 30 }}
+                    />
+                  )}
+                </motion.button>
+              );
+            })}
+          </div>
+
+          {/* Action Buttons */}
+          <div className="flex items-center gap-2 ml-4">
+            {onShare && (
+              <motion.button
+                onClick={onShare}
+                className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-slate-600 hover:text-slate-900 hover:bg-slate-50 rounded-lg transition-colors"
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+              >
+                <Share2 size={16} />
+                <span className="hidden sm:inline">Compartir</span>
+              </motion.button>
+            )}
+            
+            {onExport && (
+              <motion.button
+                onClick={onExport}
+                className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors shadow-sm"
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+              >
+                <Download size={16} />
+                <span className="hidden sm:inline">Exportar</span>
+              </motion.button>
+            )}
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default DashboardNavigation;