Refactor application structure and components

- Moved components to a new layout directory for better organization.
- Updated App component to include GroupView and adjust routing.
- Removed unused components (App.jsx, Card.jsx, CardContainer.jsx, Header.jsx, MenuButton.jsx, SideMenu.jsx, ThemeButton.jsx).
- Introduced LoadingIcon component for loading states.
- Updated PollutionMap, SummaryCards, and HistoryCharts components to accept groupId as a prop.
- Modified API endpoint configurations in settings.prod.json for better clarity and consistency.
- Enhanced chart options in historyChartConfig for improved visual representation.
- Updated favicon and logo images.

frontend/src/pages/Dashboard.jsx

@@ -4,32 +4,16 @@ import SummaryCards from '@/components/SummaryCards.jsx'
 
 import { useParams } from 'react-router-dom';
 
-/**
- * Dashboard.jsx
- * 
- * Este archivo define el componente Dashboard, que es el panel de control de un device.
- * 
- * Importaciones:
- * - PollutionMap: Un componente que muestra un mapa de la contaminación.
- * - HistoryCharts: Un componente que muestra gráficos históricos de la contaminación.
- * - SummaryCards: Un componente que muestra tarjetas resumen con información relevante.
- * 
- * Funcionalidad:
- * - El componente Home utiliza una estructura de JSX para organizar y renderizar los componentes importados.
- * - El componente Dashboard contiene los componentes SummaryCards, PollutionMap y HistoryCharts.
- * 
- */
-
 const Dashboard = () => {
-    const { deviceId } = useParams();
+    const { groupId, deviceId } = useParams();
 
     return (
         <main className='container justify-content-center'>
-            <SummaryCards deviceId={deviceId} />
-            <PollutionMap deviceId={deviceId}/>
-            <HistoryCharts deviceId={deviceId} />
+            <SummaryCards groupId={groupId} deviceId={deviceId} />
+            <PollutionMap groupId={groupId} deviceId={deviceId} />
+            <HistoryCharts groupId={groupId} deviceId={deviceId} />
         </main>
     );
-}
+};
 
 export default Dashboard;

frontend/src/pages/GroupView.jsx

@@ -0,0 +1,49 @@
+import CardContainer from "@/components/layout/CardContainer";
+import LoadingIcon from "@/components/LoadingIcon";
+
+import { useParams } from "react-router-dom";
+import { useConfig } from "@/hooks/useConfig";
+import { useDataContext } from "@/hooks/useDataContext";
+
+import { DataProvider } from "@/context/DataContext";
+
+const GroupView = () => {
+    const { groupId } = useParams();
+    const { config, configLoading } = useConfig();
+
+    if (configLoading || !config) return <p className="text-center my-5"><LoadingIcon /></p>;
+
+    const replacedEndpoint = config.appConfig.endpoints.GET_GROUP_DEVICES.replace(':groupId', groupId);
+    const reqConfig = {
+        baseUrl: `${config.appConfig.endpoints.DATA_URL}${replacedEndpoint}`,
+    };
+
+    return (
+        <DataProvider config={reqConfig}>
+            <GroupViewContent />
+        </DataProvider>
+    );   
+}
+
+const GroupViewContent = () => {
+    const { data, dataLoading, dataError } = useDataContext();
+    const { groupId } = useParams();
+
+    if (dataLoading) return <p className="text-center my-5"><LoadingIcon /></p>;
+    if (dataError) return <p className="text-center my-5">Error al cargar datos: {dataError}</p>;
+
+    return (
+        <CardContainer
+            links
+            cards={data.map(device => ({
+                title: device.deviceName,
+                status: `ID: ${device.deviceId}`,
+                to: `/groups/${groupId}/devices/${device.deviceId}`,
+                styleMode: "override",
+                className: "col-12 col-md-6 col-lg-4",
+            }))}
+        />
+    );
+}
+
+export default GroupView;