Refactor frontend components and contexts for improved structure and functionality

- Removed unnecessary comments and documentation from CardContainer, Header, HistoryCharts, MenuButton, PollutionMap, SideMenu, SummaryCards, and ThemeButton components.
- Updated import paths to use aliasing for cleaner code.
- Replaced the old context implementations (ConfigContext, DataContext, ThemeContext) with new hooks and context structure for better state management.
- Introduced a new axios instance for API calls to streamline requests.
- Added new utility functions for date and error parsing.
- Updated the main entry point and pages to reflect new context and component structures.
- Created new configuration files for development and production environments.
- Enhanced data fetching logic with improved error handling and loading states.

frontend/src/context/ConfigContext.jsx

@@ -0,0 +1,41 @@
+import { createContext, useState, useEffect } from "react";
+import PropTypes from "prop-types";
+
+const ConfigContext = createContext();
+
+export const ConfigProvider = ({ children }) => {
+  const [config, setConfig] = useState(null);
+  const [configLoading, setLoading] = useState(true);
+  const [configError, setError] = useState(null);
+
+  useEffect(() => {
+    const fetchConfig = async () => {
+      try {
+        const response = import.meta.env.MODE === 'production'
+          ? await fetch("/config/settings.prod.json")
+          : await fetch("/config/settings.dev.json");
+        if (!response.ok) throw new Error("Error al cargar settings.*.json");
+        const json = await response.json();
+        setConfig(json);
+      } catch (err) {
+        setError(err.message);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchConfig();
+  }, []);
+
+  return (
+    <ConfigContext.Provider value={{ config, configLoading, configError }}>
+      {children}
+    </ConfigContext.Provider>
+  );
+};
+
+ConfigProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export {ConfigContext};

frontend/src/context/DataContext.jsx

@@ -0,0 +1,23 @@
+import { createContext } from "react";
+import PropTypes from "prop-types";
+import { useData } from "@/hooks/useData";
+
+export const DataContext = createContext();
+
+export const DataProvider = ({ config, children }) => {
+  const data = useData(config);
+  
+  return (
+    <DataContext.Provider value={data}>
+      {children}
+    </DataContext.Provider>
+  );
+};
+
+DataProvider.propTypes = {
+  config: PropTypes.shape({
+    baseUrl: PropTypes.string.isRequired,
+    params: PropTypes.object,
+  }).isRequired,
+  children: PropTypes.node.isRequired,
+};

frontend/src/context/ThemeContext.jsx

@@ -0,0 +1,31 @@
+import { createContext, useEffect, useState } from "react";
+
+export const ThemeContext = createContext();
+
+export const ThemeProvider = ({ children }) => {
+  const [theme, setTheme] = useState(() => {
+    return (
+      localStorage.getItem("theme") ||
+      (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light")
+    );
+  });
+
+  useEffect(() => {
+    const root = document.documentElement;
+    document.body.classList.remove("light", "dark");
+    document.body.classList.add(theme);
+    root.classList.remove("light", "dark");
+    root.classList.add(theme);
+    localStorage.setItem("theme", theme);
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme((prev) => (prev === "light" ? "dark" : "light"));
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};