Cambios backend/frontend

frontend/src/App.jsx

@@ -11,6 +11,7 @@ import GroupView from '@/pages/GroupView.jsx'
 
 import { Routes, Route } from 'react-router-dom'
 import ContentWrapper from './components/layout/ContentWrapper'
+import Docs from './pages/Docs'
 
 const App = () => {
 
@@ -23,6 +24,7 @@ const App = () => {
           <Route path="/" element={<Groups />} />
           <Route path="/groups/:groupId" element={<GroupView />} />
           <Route path="/groups/:groupId/devices/:deviceId" element={<Dashboard />} />
+          <Route path="/docs" element={<Docs url={"/apidoc.json"} />} />
         </Routes>
       </ContentWrapper>
     </>

frontend/src/components/ApiDocs.jsx

@@ -0,0 +1,74 @@
+import PropTypes from 'prop-types';
+import { Accordion } from 'react-bootstrap';
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+const ApiDocs = ({ json }) => {
+  if (!json) return <p className="text-muted">No hay documentación disponible.</p>;
+
+  const renderEndpoints = (endpoints) => (
+    <Accordion>
+      {endpoints.map((ep, index) => (
+        <Accordion.Item eventKey={index.toString()} key={index}>
+          <Accordion.Header>
+            <span className={`badge bg-${getMethodColor(ep.method)} me-2 text-uppercase`}>{ep.method}</span>
+            <code>{ep.path}</code>
+          </Accordion.Header>
+          <Accordion.Body>
+            {ep.description && <p className="mb-2">{ep.description}</p>}
+
+            {ep.params?.length > 0 && (
+              <div className="d-flex flex-column gap-2 mt-3">
+                {ep.params.map((param, i) => (
+                  <div key={i} className="bg-light border rounded px-3 py-2">
+                    <div className="d-flex justify-content-between flex-wrap mb-1">
+                      <strong>{param.name}</strong>
+                      <span className="badge bg-secondary">{param.in}</span>
+                    </div>
+                    <div className="small text-muted">
+                      <div><strong>Tipo:</strong> {param.type}</div>
+                      <div><strong>¿Requerido?:</strong> {param.required ? 'Sí' : 'No'}</div>
+                      {param.description && <div><strong>Descripción:</strong> {param.description}</div>}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </Accordion.Body>
+        </Accordion.Item>
+      ))}
+    </Accordion>
+  );
+
+  return (
+    <div className="container p-4 bg-white rounded-4 border">
+      <h1 className="fw-bold mb-5 text-dark">{json.name} <small className="text-muted fs-5">v{json.version}</small></h1>
+
+      <h3 className="mb-3 text-dark">API de Lógica</h3>
+      {renderEndpoints(json.logic_api)}
+
+      <h3 className="mb-3 text-dark mt-5">API de Datos (Raw)</h3>
+      {renderEndpoints(json.raw_api)}
+    </div>
+  );
+};
+
+const getMethodColor = (method) => {
+  switch (method.toUpperCase()) {
+    case 'GET': return 'success';
+    case 'POST': return 'primary';
+    case 'PUT': return 'warning';
+    case 'DELETE': return 'danger';
+    default: return 'secondary';
+  }
+};
+
+ApiDocs.propTypes = {
+  json: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    version: PropTypes.string.isRequired,
+    logic_api: PropTypes.array,
+    raw_api: PropTypes.array
+  }).isRequired
+};
+
+export default ApiDocs;

frontend/src/components/SummaryCards.jsx

@@ -86,8 +86,8 @@ const SummaryCardsContent = () => {
 
 
     if (data) {
-        let coData = data[1];
-        let tempData = data[2];
+        let coData = data[2];
+        let tempData = data[1];
 
         CardsData[0].content = tempData.temperature + "°C";
         CardsData[0].status = "Temperatura actual";

frontend/src/pages/Docs.jsx

@@ -0,0 +1,34 @@
+import ApiDocs from '@/components/ApiDocs';
+import PropTypes from 'prop-types';
+import { useEffect, useState } from 'react';
+
+const Docs = ({ url }) => {
+    const [json, setJson] = useState(null);
+
+    useEffect(() => {
+        const fetchDocs = async () => {
+            try {
+                const response = await fetch(url);
+                if (!response.ok) {
+                    throw new Error('Network response was not ok');
+                }
+                const data = await response.json();
+                setJson(data);
+            } catch (error) {
+                console.error('Error fetching API docs:', error);
+            }
+        };
+
+        fetchDocs();
+    }, [url]);
+
+    return (
+      <ApiDocs json={json} />  
+    );
+}
+
+Docs.propTypes = {
+    url: PropTypes.string.isRequired,
+};
+
+export default Docs;

frontend/src/pages/Home.jsx

@@ -1,13 +0,0 @@
-import '@/css/Home.css';
-
-const Home = () => {
-    return (
-        <div className='container mt-5 text-center align-items-center justify-content-center'>
-            <h1 className="display-1 color-animated-bold mb-4">No sé que poner XD</h1>
-            <img className="img-fluid image-animated-bold" src="/images/etsii.gif" />
-        </div>
-    );
-}
-
-
-export default Home;