feat: Add GridDashboard component and update routing; replace Prueba_appshell with Grid_Dashboard

frontend/src/Router.tsx

@@ -2,7 +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
+import { Grid_Dashboard } from './pages/Grid_dashboard'; // Ajusta si está en otra carpeta
 
 const router = createBrowserRouter([
   {
@@ -14,8 +14,8 @@ const router = createBrowserRouter([
     element: <Consulta_API />,
   },
   {
-    path: '/prueba_appshell',
-    element: <Prueba_appshell />,
+    path: '/Grid_Dashboard',
+    element: <Grid_Dashboard />,
   },
   {
     path: '*',

frontend/src/components/Appshell/Appshell.tsx

@@ -9,13 +9,12 @@ import {
   Title,
 } from '@mantine/core';
 
-  import { default as LogoIcon } from '../../assets/icons/favicon'; // ruta relativa ajusta según tu estructura
+  import { default as LogoIcon } from '../../assets/icons/favicon';
 
   import { useMantineTheme } from '@mantine/core';
 
-  import { mainLinksdata } from '../../data/navigationsLinks_1'; // ajusta la ruta
-  import { submenuLinks } from '../../data/submenuLinks_1'; // ajusta la ruta según tu estructura
-
+  import { mainLinksdata } from '../../data/navigationsLinks_1'; 
+  import { submenuLinks } from '../../data/submenuLinks_1'; 
   
   import { useDisclosure, useMediaQuery } from '@mantine/hooks';
   import { useEffect, useMemo, useState } from 'react';

frontend/src/components/Grid_dashboard.tsx

@@ -0,0 +1,114 @@
+import { Card, Text, Switch, Group, useMantineTheme, useComputedColorScheme } from '@mantine/core';
+import { Rnd } from 'react-rnd';
+import { useState } from 'react';
+
+const GRID_SIZE = 30;
+
+function hexToRgba(hex: string, alpha: number): string {
+  const sanitized = hex.replace('#', '');
+  const bigint = parseInt(sanitized, 16);
+
+  const r = (bigint >> 16) & 255;
+  const g = (bigint >> 8) & 255;
+  const b = bigint & 255;
+
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+interface CardData {
+  id: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+const initialCards: CardData[] = [
+  { id: '1', x: 0, y: 0, width: GRID_SIZE * 2, height: GRID_SIZE * 2 },
+  { id: '2', x: GRID_SIZE * 2, y: 0, width: GRID_SIZE * 3, height: GRID_SIZE * 2 },
+  { id: '3', x: GRID_SIZE * 3, y: 0, width: GRID_SIZE * 3, height: GRID_SIZE * 2 },
+];
+
+export const GridDashboard = () => {
+  const theme = useMantineTheme();
+  const colorScheme = useComputedColorScheme(); // ✅ directamente 'light' o 'dark'
+  const isDark = colorScheme === 'dark';
+
+  // Color de la rejilla adaptado al modo del tema
+  const gridBaseColor = isDark ? theme.colors.dark[4] : theme.colors.gray[3];
+  const gridColor = hexToRgba(gridBaseColor, 0.25); // Ajusta la opacidad aquí
+
+  const [cards, setCards] = useState<CardData[]>(initialCards);
+  const [showGrid, setShowGrid] = useState(true);
+
+  const updateCard = (id: string, updates: Partial<CardData>) => {
+    setCards((prev) =>
+      prev.map((card) => (card.id === id ? { ...card, ...updates } : card))
+    );
+  };
+
+  return (
+    <>
+      <Group p="md">
+        <Switch
+          checked={showGrid}
+          onChange={(event) => setShowGrid(event.currentTarget.checked)}
+          label="Mostrar cuadrícula"
+        />
+      </Group>
+
+      <div
+        style={{
+          width: '100%',
+          height: '700px',
+          backgroundSize: `${GRID_SIZE}px ${GRID_SIZE}px`,
+          backgroundImage: showGrid
+            ? `linear-gradient(to right, ${gridColor} 1px, transparent 1px),
+               linear-gradient(to bottom, ${gridColor} 1px, transparent 1px)`
+            : 'none',
+          position: 'relative',
+        }}
+      >
+        {cards.map((card) => (
+          <Rnd
+            key={card.id}
+            size={{
+              width: Math.round(card.width / GRID_SIZE) * GRID_SIZE,
+              height: Math.round(card.height / GRID_SIZE) * GRID_SIZE,
+            }}
+            position={{ x: card.x, y: card.y }}
+            minWidth={GRID_SIZE * 8}
+            minHeight={GRID_SIZE * 8}
+            bounds="parent"
+            grid={[GRID_SIZE, GRID_SIZE]}
+            onDragStop={(_, d) =>
+              updateCard(card.id, {
+                x: Math.round(d.x / GRID_SIZE) * GRID_SIZE,
+                y: Math.round(d.y / GRID_SIZE) * GRID_SIZE,
+              })
+            }
+            onResizeStop={(_, __, ref, ___, pos) =>
+              updateCard(card.id, {
+                width: Math.round(ref.offsetWidth / GRID_SIZE) * GRID_SIZE,
+                height: Math.round(ref.offsetHeight / GRID_SIZE) * GRID_SIZE,
+                x: Math.round(pos.x / GRID_SIZE) * GRID_SIZE,
+                y: Math.round(pos.y / GRID_SIZE) * GRID_SIZE,
+              })
+            }
+          >
+            <Card
+              shadow="sm"
+              padding="md"
+              radius="md"
+              withBorder
+              style={{ height: '100%', userSelect: 'none' }}
+            >
+              <Text fw={500}>Card {card.id}</Text>
+              <Text size="sm">Mueve o redimensiona</Text>
+            </Card>
+          </Rnd>
+        ))}
+      </div>
+    </>
+  );
+};

frontend/src/data/submenuLinks_1.ts

@@ -4,7 +4,7 @@ export const submenuLinks = {
     Home: [
       { label: 'Inicio', to: '/' },
       { label: 'Consulta Api', to: '/Consulta_API' },
-      { label: 'Prueba_appshell', to: '/prueba_appshell' },
+      { label: 'Grid_Dashboard', to: '/Grid_Dashboard' },
     ],
     Dashboard: [
       { label: 'Resumen', to: '/dashboard/resumen' },

frontend/src/pages/Grid_dashboard.tsx

@@ -0,0 +1,14 @@
+import { Grid } from '@mantine/core';
+import { AppShellWithMenu } from '../components/Appshell/Appshell';
+import { GridDashboard } from '../components/Grid_dashboard';
+
+export function Grid_Dashboard() {
+  return (
+    <AppShellWithMenu>
+
+
+      <GridDashboard></GridDashboard>
+      
+    </AppShellWithMenu>
+  );
+}

frontend/src/pages/Prueba_appshell.tsx

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