add: añadir enrutado para separar la sección "basico" y "avanzado"

frontend/package-lock.json

@@ -12,6 +12,7 @@
         "axios": "^1.13.6",
         "react": "^19.2.4",
         "react-dom": "^19.2.4",
+        "react-router-dom": "^7.13.2",
         "recharts": "^3.8.0",
         "tailwindcss": "^4.2.2"
       },
@@ -1529,6 +1530,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cookie": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
+      "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -3093,6 +3107,44 @@
         }
       }
     },
+    "node_modules/react-router": {
+      "version": "7.13.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.13.2.tgz",
+      "integrity": "sha512-tX1Aee+ArlKQP+NIUd7SE6Li+CiGKwQtbS+FfRxPX6Pe4vHOo6nr9d++u5cwg+Z8K/x8tP+7qLmujDtfrAoUJA==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.13.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.13.2.tgz",
+      "integrity": "sha512-aR7SUORwTqAW0JDeiWF07e9SBE9qGpByR9I8kJT5h/FrBKxPMS6TiC7rmVO+gC0q52Bx7JnjWe8Z1sR9faN4YA==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.13.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/recharts": {
       "version": "3.8.0",
       "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.8.0.tgz",
@@ -3209,6 +3261,12 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
+      "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
+      "license": "MIT"
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",

frontend/package.json

@@ -14,6 +14,7 @@
     "axios": "^1.13.6",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
+    "react-router-dom": "^7.13.2",
     "recharts": "^3.8.0",
     "tailwindcss": "^4.2.2"
   },

frontend/src/App.jsx

@@ -1,10 +1,8 @@
-import BasicMode from './pages/BasicMode';
+import { AppRouter } from './routers/AppRouter';
 
 function App() {
   return (
-    <div className="min-h-screen bg-slate-50 p-8 font-sans text-slate-800 flex flex-col items-center">
+    <AppRouter />
-      <BasicMode/>
-    </div>
   );
 }
 

frontend/src/components/ValueFunctionChart.jsx

@@ -1,43 +1,43 @@
 import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
 
 export default function ValueFunctionChart({ result }) {
-  if (!result) return null;
+    if (!result) return null;
 
   return (
     <div className="w-full max-w-4xl mt-12 p-8 bg-white rounded-2xl shadow-xl border border-slate-100">
-      <h3 className="text-2xl font-bold text-slate-800 mb-8 text-center">
+        <h3 className="text-2xl font-bold text-slate-800 mb-8 text-center">
-        Función de Valor: {result.criterion_name}
+            Función de Valor: {result.criterion_name}
-      </h3>
+        </h3>
       
-      <div className="w-full mt-4">
+        <div className="w-full mt-4">
-        <ResponsiveContainer width="100%" height={400}>
+            <ResponsiveContainer width="100%" height={400}>
-          <LineChart
+            <LineChart
-            data={Object.entries(result.values).map(([label, value]) => ({
+                data={Object.entries(result.values).map(([label, value]) => ({
-              nombre: label,
+                nombre: label,
-              valor: value
+                valor: value
-            }))}
+                }))}
-            margin={{ top: 20, right: 30, left: 20, bottom: 20 }}
+                margin={{ top: 20, right: 30, left: 20, bottom: 20 }}
-          >
+            >
-            <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
+                <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
-            <XAxis dataKey="nombre" tick={{ fill: '#475569', fontWeight: 600 }} dy={10} />
+                <XAxis dataKey="nombre" tick={{ fill: '#475569', fontWeight: 600 }} dy={10} />
-            <YAxis domain={[0, 1]} tick={{ fill: '#475569' }} dx={-10} />
+                <YAxis domain={[0, 1]} tick={{ fill: '#475569' }} dx={-10} />
-            <Tooltip
+                <Tooltip
-              contentStyle={{ borderRadius: '12px', border: 'none', boxShadow: '0 10px 15px -3px rgb(0 0 0 / 0.1)' }}
+                    contentStyle={{ borderRadius: '12px', border: 'none', boxShadow: '0 10px 15px -3px rgb(0 0 0 / 0.1)' }}
-              formatter={(value) => [value.toFixed(4), 'Valor DoC']}
+                    formatter={(value) => [value.toFixed(4), 'Valor DoC']}
-              labelStyle={{ fontWeight: 'bold', color: '#1e293b', marginBottom: '4px' }}
+                    labelStyle={{ fontWeight: 'bold', color: '#1e293b', marginBottom: '4px' }}
-            />
+                />
-            <Line
+                <Line
-              type="monotone"
+                    type="monotone"
-              dataKey="valor"
+                    dataKey="valor"
-              stroke="#2563eb"
+                    stroke="#2563eb"
-              strokeWidth={4}
+                    strokeWidth={4}
-              activeDot={{ r: 8, strokeWidth: 0 }}
+                    activeDot={{ r: 8, strokeWidth: 0 }}
-              dot={{ r: 6, fill: '#2563eb', stroke: '#ffffff', strokeWidth: 2 }}
+                    dot={{ r: 6, fill: '#2563eb', stroke: '#ffffff', strokeWidth: 2 }}
-              animationDuration={1500}
+                    animationDuration={1500}
-            />
+                />
-          </LineChart>
+            </LineChart>
-        </ResponsiveContainer>
+            </ResponsiveContainer>
-      </div>
+        </div>
     </div>
   );
 }

frontend/src/components/layout/MainLayout.jsx

@@ -0,0 +1,49 @@
+import { Outlet, NavLink } from 'react-router-dom';
+
+export const MainLayout = () => {
+  return (
+    <div className="min-h-screen bg-slate-50 p-8 font-sans text-slate-800 flex flex-col items-center">
+      
+        <header className="text-center mb-8 flex flex-col items-center gap-6">
+            <h1 className="text-4xl font-extrabold text-slate-900 tracking-tight">
+            Método <span className="text-blue-600">Deck of Cards</span>
+            </h1>
+        </header>
+
+        <div className="flex justify-center mb-10 w-full">
+            <div className="bg-slate-200/60 p-1.5 rounded-2xl flex gap-2 shadow-inner">
+            <NavLink
+                to="/basico"
+                className={({ isActive }) =>
+                `px-8 py-3 rounded-xl font-bold transition-all duration-300 ${
+                    isActive
+                    ? 'bg-white text-blue-600 shadow-md transform scale-105' 
+                    : 'text-slate-500 hover:text-slate-700 hover:bg-slate-300/50'
+                }`
+                }
+            >
+                DoC Clásico
+            </NavLink>
+            
+            <NavLink
+                to="/avanzado"
+                className={({ isActive }) =>
+                `px-8 py-3 rounded-xl font-bold transition-all duration-300 ${
+                    isActive
+                    ? 'bg-white text-blue-600 shadow-md transform scale-105' 
+                    : 'text-slate-500 hover:text-slate-700 hover:bg-slate-300/50'
+                }`
+                }
+            >
+                DoC-MF Avanzado
+            </NavLink>
+            </div>
+        </div>
+
+        <main className="w-full flex flex-col items-center">
+            <Outlet />
+        </main>
+
+    </div>
+  );
+};

frontend/src/pages/AdvancedMode.jsx

@@ -0,0 +1,7 @@
+export default function AdvancedMode() {
+  return (
+    <h1>
+        En construcción
+    </h1>
+  );
+}

frontend/src/routers/AppRouter.jsx

@@ -0,0 +1,21 @@
+import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import BasicMode from '../pages/BasicMode';
+import AdvancedMode from '../pages/AdvancedMode';
+import { MainLayout } from '../components/layout/MainLayout';
+
+export const AppRouter = () => {
+  return (
+    <Router>
+        <Routes>
+
+            <Route element={<MainLayout />}>
+                <Route path="/basico" element={<BasicMode />} />
+                <Route path="/avanzado" element={<AdvancedMode />} />
+            </Route>
+
+            <Route path="/*" element={<Navigate to="/basico" />} />
+
+        </Routes>
+    </Router>
+  );
+};