feat: Implement AppShellWithMenu component; refactor pages to utilize new layout structure and enhance styling

frontend/src/pages/404.tsx

@@ -2,42 +2,48 @@ import { Box, Title, Text, Button, Group, Stack, Image, Center } from '@mantine/
 import { IconArrowLeft } from '@tabler/icons-react';
 import { Link } from 'react-router-dom';
 import { MantineCardWithShader } from '../components/HoloShader'; // Ajusta ruta si es necesario
+import { AppShellWithMenu } from '../components/Appshell';
 
 
 export function Error_404() {
   return (
-    <Box style={{ display: 'flex', height: '100vh' }}>
+    <AppShellWithMenu>
+      <Box   style={{
+    flex: 1,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'flex-start', // alinea arriba
+    padding: '2rem',
+    paddingTop: '0.5rem', // agrega espacio desde arriba si deseas
+  }}>
+        <Box style={{ flex: 1, display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '2rem' }}>
+          <Stack align="center" maw={500} mx="auto">
 
-      <Box style={{ flex: 1, display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '2rem' }}>
-        
-        <Stack align="center" maw={500} mx="auto">
+              <MantineCardWithShader />
+            <Title order={1}>
+              Página no encontrada
+            </Title>
 
+            <Text size="lg">
+              Parece que la página que estás buscando no existe o fue removida. Pero no te preocupes, puedes volver al inicio fácilmente.
+            </Text>
 
-            <MantineCardWithShader />
-
-
-          <Title order={1}>
-            Página no encontrada
-          </Title>
-
-          <Text size="lg">
-            Parece que la página que estás buscando no existe o fue removida. Pero no te preocupes, puedes volver al inicio fácilmente.
-          </Text>
-
-          <Group mt="md">
-            <Button
-              component={Link}
-              to="/"
-              size="md"
-              variant="gradient"
-              gradient={{ from: 'blue', to: 'cyan' }}
-              leftSection={<IconArrowLeft size={18} />}
-            >
-              Volver al inicio
-            </Button>
-          </Group>
-        </Stack>
+            <Group mt="md">
+              <Button
+                component={Link}
+                to="/"
+                size="md"
+                variant="gradient"
+                gradient={{ from: 'blue', to: 'cyan' }}
+                leftSection={<IconArrowLeft size={18} />}
+              >
+                Volver al inicio
+              </Button>
+            </Group>
+          </Stack>
+        </Box>
       </Box>
-    </Box>
+    </AppShellWithMenu>
+    
   );
 }

frontend/src/pages/Analitica.tsx

@@ -2,19 +2,14 @@ import { ColorSchemeToggle } from '../components/ColorSchemeToggle/ColorSchemeTo
 import { Welcome } from '../components/Welcome/Welcome';
 import MiBoton from '../components/botoncito';
 import { Center, Box } from '@mantine/core';
-import { DoubleNavbar } from '../components/DoubleNavbar';
-
+import { AppShellWithMenu } from '../components/Appshell';
 
 
 
 export function Prueba_1() {
   return (
-    <Box style={{ display: 'flex', height: '100vh' }}>
-      <DoubleNavbar /> {/* Sidebar fijo a la izquierda */}
+    <AppShellWithMenu>
 
-      {/* Contenido principal */}
-
-
-    </Box>
+    </AppShellWithMenu>
   );
 }

frontend/src/pages/Consulta_api.tsx

@@ -1,137 +1,12 @@
-import { useState } from 'react';
-import {
-  TextInput,
-  Textarea,
-  Button,
-  Box,
-  Center,
-  Stack,
-  Badge,
-  Group,
-} from '@mantine/core';
-import { MetodoSelect } from '../components/MetodoSelect'; // 👈 Importación del nuevo componente
-import { useEffect } from 'react';
-
-
+import { Box } from '@mantine/core';
+import { LlamadorAPI } from '../components/LlamadorAPI';
+import { AppShellWithMenu } from '../components/Appshell';
 
 
 export function Consulta_API() {
-  const [direccion, setDireccion] = useState('http://localhost:8000/api/saludo');
-  const [metodo, setMetodo] = useState('GET');
-  const [contenido, setContenido] = useState('');
-  const [respuesta, setRespuesta] = useState('');
-  const [codigoRespuesta, setCodigoRespuesta] = useState<number | null>(null);
-
-  const colorCodigo = (status: number): string => {
-    if (status >= 200 && status < 300) return 'green';
-    if (status >= 300 && status < 400) return 'yellow';
-    if (status >= 400 && status < 500) return 'orange';
-    return 'red';
-  };
-
-  const llamarAPI = async () => {
-    try {
-      const options: RequestInit = {
-        method: metodo,
-        mode: 'cors',
-        headers: {},
-      };
-
-      if (metodo !== 'GET') {
-        options.headers = {
-          'Content-Type': 'application/json',
-        };
-        try {
-          JSON.parse(contenido);
-          options.body = contenido;
-        } catch (err) {
-          setRespuesta('Error: El contenido no es un JSON válido');
-          setCodigoRespuesta(null);
-          return;
-        }
-      }
-
-      const res = await fetch(direccion, options);
-      setCodigoRespuesta(res.status);
-
-      const contentType = res.headers.get('content-type');
-
-      if (contentType?.includes('application/json')) {
-        const data = await res.json();
-        const formatted = JSON.stringify(data, null, 2);
-        setRespuesta(formatted);
-      } else {
-        const text = await res.text();
-        setRespuesta(text);
-      }
-    } catch (error: any) {
-      console.error('Error en la API:', error);
-      setRespuesta(`Error: ${error.message || error}`);
-      setCodigoRespuesta(null);
-    }
-  };
-
-
-  useEffect(() => {
-    const handler = (e: KeyboardEvent) => {
-      if (e.ctrlKey && e.key === 'Enter') {
-        e.preventDefault();
-        llamarAPI();
-      }
-    };
-  
-    window.addEventListener('keydown', handler);
-    return () => window.removeEventListener('keydown', handler);
-  }, [metodo, direccion, contenido]);
-
-
   return (
-    <Box style={{ display: 'flex', height: '100vh' }}>
-  
-      <Box style={{ flex: 1, padding: 40 }}>
-        <Center style={{ height: '100%' }}>
-          <Stack style={{ width: 600 }}>
-            <TextInput
-              label="Dirección"
-              placeholder="http://localhost:8000/api/..."
-              value={direccion}
-              onChange={(e) => setDireccion(e.currentTarget.value)}
-            />
-  
-            <MetodoSelect metodo={metodo} setMetodo={setMetodo} />
-  
-            <Textarea
-              label="Contenido (JSON)"
-              placeholder='{"contenido": "Hola"}'
-              value={contenido}
-              onChange={(e) => setContenido(e.currentTarget.value)}
-              autosize
-              minRows={3}
-            />
-  
-            <Button onClick={llamarAPI} color="blue">
-              Enviar solicitud
-            </Button>
-  
-            {codigoRespuesta !== null && (
-              <Group>
-                <Badge color={colorCodigo(codigoRespuesta)} size="lg">
-                  Código: {codigoRespuesta}
-                </Badge>
-              </Group>
-            )}
-  
-            <Textarea
-              label="Respuesta de la API"
-              value={respuesta}
-              readOnly
-              autosize
-              minRows={6}
-            />
-          </Stack>
-        </Center>
-      </Box>
-    </Box>
+    <AppShellWithMenu>
+      <LlamadorAPI />
+    </AppShellWithMenu>
   );
-  
-}
+}

frontend/src/pages/Home.page.tsx

@@ -1,16 +1,10 @@
-import { ColorSchemeToggle } from '../components/ColorSchemeToggle/ColorSchemeToggle';
-import { Welcome } from '../components/Welcome/Welcome';
-import MiBoton from '../components/botoncito';
-import { Center, Box } from '@mantine/core';
-import { MantineCardWithShader } from '../components/HoloShader';
-
-
+import { AppShellWithMenu } from '../components/Appshell';
 
 
 export function HomePage() {
   return (
-    <Box style={{ display: 'flex', height: '100vh' }}>
+    <AppShellWithMenu>
 
-    </Box>
+    </AppShellWithMenu>
   );
 }

frontend/src/pages/Plantilla.tsx

@@ -0,0 +1,10 @@
+import { AppShellWithMenu } from '../components/Appshell';
+
+
+export function Plantilla() {
+  return (
+    <AppShellWithMenu>
+
+    </AppShellWithMenu>
+  );
+}

frontend/src/pages/Prueba_appshell.tsx

@@ -3,11 +3,15 @@ import { Welcome } from '../components/Welcome/Welcome';
 import MiBoton from '../components/botoncito';
 import { Center, Box } from '@mantine/core';
 import { MantineCardWithShader } from '../components/HoloShader';
-import {AppShellWithMenu } from '../components/Appshell_collapse';
-
+import { AppShellWithMenu } from '../components/Appshell';
 
 export function Prueba_appshell() {
   return (
-    <AppShellWithMenu />
+    <AppShellWithMenu>
+
+
+
+      
+    </AppShellWithMenu>
   );
 }