feat: Enhance application structure with new Prueba_appshell page and responsive navbar; update dependencies

frontend/package-lock.json

@@ -28,6 +28,7 @@
         "@types/node": "^22.13.11",
         "@types/react": "^19.0.12",
         "@types/react-dom": "^19.0.4",
+        "@types/three": "^0.176.0",
         "@vitejs/plugin-react": "^4.3.4",
         "eslint": "^9.23.0",
         "eslint-config-mantine": "^4.0.3",
@@ -533,6 +534,13 @@
         "@csstools/css-tokenizer": "^3.0.3"
       }
     },
+    "node_modules/@dimforge/rapier3d-compat": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@dimforge/rapier3d-compat/-/rapier3d-compat-0.12.0.tgz",
+      "integrity": "sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
     "node_modules/@dual-bundle/import-meta-resolve": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/@dual-bundle/import-meta-resolve/-/import-meta-resolve-4.1.0.tgz",
@@ -2215,6 +2223,13 @@
         "@testing-library/dom": ">=7.21.4"
       }
     },
+    "node_modules/@tweenjs/tween.js": {
+      "version": "23.1.3",
+      "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.3.tgz",
+      "integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/aria-query": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
@@ -2333,6 +2348,29 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/stats.js": {
+      "version": "0.17.4",
+      "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.4.tgz",
+      "integrity": "sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/three": {
+      "version": "0.176.0",
+      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.176.0.tgz",
+      "integrity": "sha512-FwfPXxCqOtP7EdYMagCFePNKoG1AGBDUEVKtluv2BTVRpSt7b+X27xNsirPCTCqY1pGYsPUzaM3jgWP7dXSxlw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@dimforge/rapier3d-compat": "^0.12.0",
+        "@tweenjs/tween.js": "~23.1.3",
+        "@types/stats.js": "*",
+        "@types/webxr": "*",
+        "@webgpu/types": "*",
+        "fflate": "~0.8.2",
+        "meshoptimizer": "~0.18.1"
+      }
+    },
     "node_modules/@types/webxr": {
       "version": "0.5.22",
       "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.22.tgz",
@@ -2688,6 +2726,13 @@
         "url": "https://opencollective.com/vitest"
       }
     },
+    "node_modules/@webgpu/types": {
+      "version": "0.1.60",
+      "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.60.tgz",
+      "integrity": "sha512-8B/tdfRFKdrnejqmvq95ogp8tf52oZ51p3f4QD5m5Paey/qlX4Rhhy5Y8tgFMi7Ms70HzcMMw3EQjH/jdhTwlA==",
+      "dev": true,
+      "license": "BSD-3-Clause"
+    },
     "node_modules/accepts": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-2.0.0.tgz",
@@ -4635,6 +4680,13 @@
         }
       }
     },
+    "node_modules/fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/file-entry-cache": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -6307,6 +6359,13 @@
         "node": ">= 8"
       }
     },
+    "node_modules/meshoptimizer": {
+      "version": "0.18.1",
+      "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.18.1.tgz",
+      "integrity": "sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/micromatch": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",

frontend/package.json

@@ -40,6 +40,7 @@
     "@types/node": "^22.13.11",
     "@types/react": "^19.0.12",
     "@types/react-dom": "^19.0.4",
+    "@types/three": "^0.176.0",
     "@vitejs/plugin-react": "^4.3.4",
     "eslint": "^9.23.0",
     "eslint-config-mantine": "^4.0.3",

frontend/src/Router.tsx

@@ -2,6 +2,7 @@ import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import { HomePage } from './pages/Home.page';
 import { Consulta_API } from './pages/Consulta_api';
 import { Error_404 } from './pages/404'; // Ajusta si está en otra carpeta
+import { Prueba_appshell } from './pages/Prueba_appshell'; // Ajusta si está en otra carpeta
 
 const router = createBrowserRouter([
   {
@@ -12,6 +13,10 @@ const router = createBrowserRouter([
     path: '/Consulta_API',
     element: <Consulta_API />,
   },
+  {
+    path: '/prueba_appshell',
+    element: <Prueba_appshell />,
+  },
   {
     path: '*',
     element: <Error_404 />,

frontend/src/components/Appshell_collapse.tsx

@@ -0,0 +1,41 @@
+import { useDisclosure } from '@mantine/hooks';
+import { AppShell, Burger, Group, Skeleton } from '@mantine/core';
+
+
+export function CollapseDesktop() {
+  const [mobileOpened, { toggle: toggleMobile }] = useDisclosure();
+  const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);
+
+  return (
+    <AppShell
+      header={{ height: 60 }}
+      navbar={{
+        width: 300,
+        breakpoint: 'sm',
+        collapsed: { mobile: !mobileOpened, desktop: !desktopOpened },
+      }}
+      padding="md"
+    >
+      <AppShell.Header>
+        <Group h="100%" px="md">
+          <Burger opened={mobileOpened} onClick={toggleMobile} hiddenFrom="sm" size="sm" />
+          <Burger opened={desktopOpened} onClick={toggleDesktop} visibleFrom="sm" size="sm" />
+          <img
+                src="/src/favicon.svg"
+                alt="Logo"
+                style={{ width: 30, height: 30 }}
+            />
+        </Group>
+      </AppShell.Header>
+      <AppShell.Navbar p="md">
+        Navbar
+        {Array(15)
+          .fill(0)
+          .map((_, index) => (
+            <Skeleton key={index} h={28} mt="sm" animate={false} />
+          ))}
+      </AppShell.Navbar>
+      <AppShell.Main>Main</AppShell.Main>
+    </AppShell>
+  );
+}

frontend/src/components/DoubleNavbar.tsx

@@ -15,8 +15,9 @@ import {
   UnstyledButton,
   ActionIcon,
 } from '@mantine/core';
+import { useDisclosure, useMediaQuery } from '@mantine/hooks';
 import { Link, useLocation } from 'react-router-dom';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import classes from './DoubleNavbar.module.css';
 
 const mainLinksdata = [
@@ -33,6 +34,7 @@ const submenuLinks: Record<string, { label: string; to: string }[]> = {
   Home: [
     { label: 'Inicio', to: '/' },
     { label: 'Consulta Api', to: '/Consulta_API' },
+    { label: 'Prueba_appshell', to: '/prueba_appshell' },
   ],
   Dashboard: [
     { label: 'Resumen', to: '/dashboard/resumen' },
@@ -64,10 +66,15 @@ const submenuLinks: Record<string, { label: string; to: string }[]> = {
 
 export function DoubleNavbar() {
   const location = useLocation();
-  const [collapsed, setCollapsed] = useState(false);
+  const isMobile = useMediaQuery('(max-width: 768px)');
+
+  const [mobileOpened, { toggle: toggleMobile, close: closeMobile }] = useDisclosure(false);
+  const [desktopOpened, { toggle: toggleDesktop, open: openDesktop }] = useDisclosure(true);
+
+  const isCollapsed = useMemo(() => (isMobile ? !mobileOpened : !desktopOpened), [isMobile, mobileOpened, desktopOpened]);
+
   const [manualActiveTab, setManualActiveTab] = useState<string | null>(null);
 
-  // Detectar cuál pestaña es activa por la ruta actual
   const matchedMain = Object.entries(submenuLinks).find(([mainKey, items]) =>
     items.some((item) => location.pathname.startsWith(item.to))
   );
@@ -87,7 +94,10 @@ export function DoubleNavbar() {
       key={link.label}
     >
       <UnstyledButton
-        onClick={() => setManualActiveTab(link.label)}
+        onClick={() => {
+          setManualActiveTab(link.label);
+          if (isMobile) closeMobile();
+        }}
         className={classes.mainLink}
         data-active={link.label === active || undefined}
       >
@@ -102,22 +112,29 @@ export function DoubleNavbar() {
       data-active={activeLink === item.label || undefined}
       to={item.to}
       key={item.label}
-      style={{ display: collapsed ? 'none' : 'block' }}
+      style={{ display: isCollapsed ? 'none' : 'block' }}
+      onClick={() => {
+        if (isMobile) closeMobile();
+      }}
     >
       {item.label}
     </Link>
   ));
 
-  // Resetea pestaña seleccionada si la ruta cambia (opcional)
+  // Restaurar pestaña al cambiar ruta (opcional pero útil)
   useEffect(() => {
     setManualActiveTab(null);
   }, [location.pathname]);
 
+  // Abrir navbar de escritorio si cambia a pantalla grande
+  useEffect(() => {
+    if (!isMobile) openDesktop();
+  }, [isMobile, openDesktop]);
+
   return (
-    <nav className={`${classes.navbar} ${collapsed ? classes.collapsed : ''}`}>
+    <nav className={`${classes.navbar} ${isCollapsed ? classes.collapsed : ''}`}>
       <div className={classes.wrapper}>
         <div className={classes.aside}>
-          {/* Sección superior: logo + mainLinks */}
           <div className={classes.topSection}>
             <div className={classes.logo}>
               <img
@@ -126,23 +143,21 @@ export function DoubleNavbar() {
                 style={{ width: 30, height: 30 }}
               />
             </div>
-
             {mainLinks}
           </div>
 
-          {/* Botón de colapsar separado abajo */}
           <ActionIcon
             variant="subtle"
-            onClick={() => setCollapsed((c) => !c)}
+            onClick={() => (isMobile ? toggleMobile() : toggleDesktop())}
             className={classes.collapseButton}
             size="lg"
           >
-            {collapsed ? <IconArrowBarRight size={20} /> : <IconArrowBarLeft size={20} />}
+            {isCollapsed ? <IconArrowBarRight size={20} /> : <IconArrowBarLeft size={20} />}
           </ActionIcon>
         </div>
 
         <div className={classes.main}>
-          {!collapsed && (
+          {!isCollapsed && (
             <Title order={4} className={classes.title}>
               {active}
             </Title>
@@ -152,4 +167,4 @@ export function DoubleNavbar() {
       </div>
     </nav>
   );
-}
+}

frontend/src/components/HoloShader.tsx

@@ -58,7 +58,7 @@ extend({ HoloShaderMaterial });
 
 // 🎥 Plano con el shader
 function HoloPlane({ color }: { color: [number, number, number] }) {
-  const mat = useRef<any>();
+  const mat = useRef<any>(null);
   const { size } = useThree();
 
   useFrame(({ clock }) => {

frontend/src/pages/Home.page.tsx

@@ -18,10 +18,6 @@ export function HomePage() {
         <Welcome />
         <ColorSchemeToggle />
 
-
-        <Center mt="md">
-          <MiBoton />
-        </Center>
       </Box>
     </Box>
   );

frontend/src/pages/Prueba_appshell.tsx

@@ -0,0 +1,14 @@
+import { ColorSchemeToggle } from '../components/ColorSchemeToggle/ColorSchemeToggle';
+import { Welcome } from '../components/Welcome/Welcome';
+import MiBoton from '../components/botoncito';
+import { Center, Box } from '@mantine/core';
+import { DoubleNavbar } from '../components/DoubleNavbar';
+import { MantineCardWithShader } from '../components/HoloShader';
+import { CollapseDesktop } from '../components/Appshell_collapse';
+
+
+export function Prueba_appshell() {
+  return (
+    <CollapseDesktop />
+  );
+}

frontend/yarn.lock

@@ -222,6 +222,11 @@
   resolved "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-5.0.0.tgz"
   integrity sha512-PCqQV3c4CoVm3kdPhyeZ07VmBRdH2EpMFA/pd9OASpOEC3aXNGoqPDAZ80D0cLpMBxnmk0+yNhGsEx31hq7Gtw==
 
+"@dimforge/rapier3d-compat@^0.12.0":
+  version "0.12.0"
+  resolved "https://registry.npmjs.org/@dimforge/rapier3d-compat/-/rapier3d-compat-0.12.0.tgz"
+  integrity sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow==
+
 "@dual-bundle/import-meta-resolve@^4.1.0":
   version "4.1.0"
   resolved "https://registry.npmjs.org/@dual-bundle/import-meta-resolve/-/import-meta-resolve-4.1.0.tgz"
@@ -675,6 +680,11 @@
   resolved "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.6.1.tgz"
   integrity sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==
 
+"@tweenjs/tween.js@~23.1.3":
+  version "23.1.3"
+  resolved "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.3.tgz"
+  integrity sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==
+
 "@types/aria-query@^5.0.1":
   version "5.0.4"
   resolved "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz"
@@ -757,6 +767,24 @@
   resolved "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.6.tgz"
   integrity sha512-A4STmOXPhMUtHH+S6ymgE2GiBSMqf4oTvcQZMcHzokuTLVYzXTB8ttjcgxOVaAp2lGwEdzZ0J+cRbbeevQj1UQ==
 
+"@types/stats.js@*":
+  version "0.17.4"
+  resolved "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.4.tgz"
+  integrity sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA==
+
+"@types/three@^0.176.0":
+  version "0.176.0"
+  resolved "https://registry.npmjs.org/@types/three/-/three-0.176.0.tgz"
+  integrity sha512-FwfPXxCqOtP7EdYMagCFePNKoG1AGBDUEVKtluv2BTVRpSt7b+X27xNsirPCTCqY1pGYsPUzaM3jgWP7dXSxlw==
+  dependencies:
+    "@dimforge/rapier3d-compat" "^0.12.0"
+    "@tweenjs/tween.js" "~23.1.3"
+    "@types/stats.js" "*"
+    "@types/webxr" "*"
+    "@webgpu/types" "*"
+    fflate "~0.8.2"
+    meshoptimizer "~0.18.1"
+
 "@types/webxr@*":
   version "0.5.22"
   resolved "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.22.tgz"
@@ -913,6 +941,11 @@
     loupe "^3.1.3"
     tinyrainbow "^2.0.0"
 
+"@webgpu/types@*":
+  version "0.1.60"
+  resolved "https://registry.npmjs.org/@webgpu/types/-/types-0.1.60.tgz"
+  integrity sha512-8B/tdfRFKdrnejqmvq95ogp8tf52oZ51p3f4QD5m5Paey/qlX4Rhhy5Y8tgFMi7Ms70HzcMMw3EQjH/jdhTwlA==
+
 accepts@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/accepts/-/accepts-2.0.0.tgz"
@@ -2056,6 +2089,11 @@ fdir@^6.4.4:
   resolved "https://registry.npmjs.org/fdir/-/fdir-6.4.4.tgz"
   integrity sha512-1NZP+GK4GfuAv3PqKvxQRDMjdSRZjnkq7KfhlNrCNNlZ0ygQFpebfrnfnq/W7fpUnAv9aGWmY1zKx7FYL3gwhg==
 
+fflate@~0.8.2:
+  version "0.8.2"
+  resolved "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz"
+  integrity sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==
+
 file-entry-cache@^10.0.8:
   version "10.0.8"
   resolved "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-10.0.8.tgz"
@@ -2983,6 +3021,11 @@ merge2@^1.3.0, merge2@^1.4.1:
   resolved "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
+meshoptimizer@~0.18.1:
+  version "0.18.1"
+  resolved "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.18.1.tgz"
+  integrity sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==
+
 micromatch@^4.0.8:
   version "4.0.8"
   resolved "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz"