fix: Integración completa con parámetros de seguridad y despliegue

Se realizó la integración completa del frontend con la API, incluyendo la implementación de parámetros de seguridad para la autenticación y autorización de las solicitudes. También se configuraron los procesos de despliegue, asegurando que la aplicación esté lista para ser desplegada en producción. Nota: El manejo de excepciones en el frontend aún no ha sido implementado, por lo que los errores no se gestionan adecuadamente, pendiente funcionalidad de editar salon.

Author: LePeanutButter

.github/workflows/ci-cd.yml

@@ -12,7 +12,7 @@ on:
 env:
   AZURE_WEBAPP_NAME: elysiumFrontEnd
   AZURE_WEBAPP_PACKAGE_PATH: '.'
-  NODE_VERSION: '22.x'
+  NODE_VERSION: '18.x'
 
 jobs:
   build-and-deploy:

package-lock.json

@@ -15,7 +15,7 @@
     "react": "^19.0.0",
     "react-datepicker": "^8.2.1",
     "react-day-picker": "^9.6.4",
-    "react-dom": "^19.0.0",
+    "react-dom": "^19.1.0",
     "react-native": "^0.78.1",
     "react-router-dom": "^7.4.1",
     "react-scripts": "^5.0.1",

package.json

@@ -186,8 +186,8 @@ function AppRoutes({ user, setUser }) {
                   <Routes>
                     {user.isAdmin ? (
                       <>
-                        <Route path="/administrador" element={<AdministratorHome token={localStorage.getItem("token")} />} />
-                        <Route path="/administrador/salones" element={<GestionarSalones />} />
+                        <Route path="/administrador" element={<AdministratorHome />} />
+                        <Route path="/administrador/salones" element={<GestionarSalones user={user} />} />
                         <Route path="/administrador/usuarios" element={<GestionarUsuarios />} />
                         <Route path="*" element={<Navigate to="/administrador" />} />
                       </>

src/App.js

@@ -15,7 +15,7 @@ const SALON_API = "/salones";
  */
 export async function getSalones(filtros = {}) {
     try {
-        const response = await api.get(SALON_API, { params: filtros });
+        const response = await api.get(SALON_API, filtros );
         return response.data;
     } catch (error) {
         throw new Error(error.response.data.message);
@@ -66,7 +66,7 @@ export async function getDisponible(mnemonico) {
  */
 export async function agregarSalon(salon) {
     try {
-        const response = await api.post(SALON_API, { params: salon });
+        const response = await api.post(SALON_API, salon );
         return response.data;
     } catch (error) {
         throw new Error(error.response.data.message);
@@ -82,8 +82,7 @@ export async function agregarSalon(salon) {
  */
 export async function actualizarSalon(mnemonico, salon) {
     try {
-        const response = await api.patch(`${SALON_API}/${mnemonico}`, { params: salon });
-        return response.data;
+        await api.patch(`${SALON_API}/${mnemonico}`, salon );
     } catch (error) {
         throw new Error(error.response.data.message);
     }

src/api/salon.jsx

@@ -5,74 +5,59 @@ const DemandaChart = ({ reservas }) => {
   const chartRef = useRef(null);
 
   useEffect(() => {
-    const svg = d3.select(chartRef.current);
+    const container = chartRef.current;
+    const svg = d3.select(container);
     svg.selectAll("*").remove(); // Limpia el SVG
 
     if (!reservas || reservas.length === 0) return;
 
-    const width = 600;
-    const height = 500;
+    const containerWidth = container.clientWidth || 600; // Usa el tamaño del contenedor
+    const containerHeight = containerWidth * 0.7; // Relación de aspecto
 
-    svg.attr("width", width).attr("height", height);
+    svg
+      .attr("viewBox", `0 0 ${containerWidth} ${containerHeight}`)
+      .attr("preserveAspectRatio", "xMidYMid meet"); // Mantiene proporción
 
     // Agrupar reservas por salón
-    const reservasPorSalon = d3.rollup(
-      reservas,
-      (v) => v.length,
-      (d) => d.idSalon
-    );
-    // Convertir a arreglo de objetos
-    const data = Array.from(reservasPorSalon, ([salon, count]) => ({
-      salon,
-      count,
-    }));
-
-    // Usamos d3.hierarchy para crear una estructura para el pack layout.
-    const root = d3.hierarchy({ children: data }).sum((d) => d.count);
+    const reservasPorSalon = d3.rollup(reservas, (v) => v.length, (d) => d.idSalon);
+    const data = Array.from(reservasPorSalon, ([salon, count]) => ({ salon, count }));
 
-    // Configurar el pack layout
-    const pack = d3.pack().size([width, height]).padding(10);
+    const root = d3.hierarchy({ children: data }).sum((d) => d.count);
+    const pack = d3.pack().size([containerWidth, containerHeight]).padding(10);
 
     const nodes = pack(root).leaves();
-
-    // Escala de colores
     const color = d3.scaleOrdinal(d3.schemeSet3);
 
-    // Dibujar las burbujas
     const node = svg
       .selectAll("g")
       .data(nodes)
       .enter()
       .append("g")
       .attr("transform", (d) => `translate(${d.x}, ${d.y})`);
 
-    node
-      .append("circle")
-      .attr("r", 0)
-      .attr("fill", (d, i) => color(i))
-      .transition()
-      .duration(800)
-      .attr("r", (d) => d.r);
-
-    // Agregar etiquetas dentro de cada burbuja (nombre del salón y cantidad)
-    node
-      .append("text")
-      .attr("text-anchor", "middle")
-      .attr("dy", "-0.3em")
+    node.append("circle").attr("r", 0).attr("fill", (d, i) => color(i))
+      .transition().duration(800).attr("r", (d) => d.r);
+
+    node.append("text").attr("text-anchor", "middle").attr("dy", "-0.3em")
       .attr("font-size", (d) => Math.min((2 * d.r) / d.data.salon.length, 18))
-      .attr("fill", "#000")
-      .text((d) => d.data.salon);
-
-    node
-      .append("text")
-      .attr("text-anchor", "middle")
-      .attr("dy", "1em")
-      .attr("font-size", "12px")
-      .attr("fill", "#000")
-      .text((d) => d.data.count);
+      .attr("fill", "#000").text((d) => d.data.salon);
+
+    node.append("text").attr("text-anchor", "middle").attr("dy", "1em")
+      .attr("font-size", "12px").attr("fill", "#000").text((d) => d.data.count);
+
+    // Función para actualizar el gráfico cuando se cambia el tamaño de la ventana
+    const updateSize = () => {
+      const newWidth = container.clientWidth || 600;
+      const newHeight = newWidth * 0.7;
+      svg.attr("viewBox", `0 0 ${newWidth} ${newHeight}`);
+    };
+
+    window.addEventListener("resize", updateSize);
+    updateSize(); // Llama la función al inicio
+
   }, [reservas]);
 
-  return <svg ref={chartRef}></svg>;
+  return <svg ref={chartRef} style={{ width: "100%", height: "auto" }}></svg>;
 };
 
-export default DemandaChart;
+export default DemandaChart;

src/assets/icons/calendar-lines-svgrepo-com.svg

@@ -5,26 +5,28 @@ const DiaSalonChart = ({ reservas }) => {
   const chartRef = useRef(null);
 
   useEffect(() => {
-    const svg = d3.select(chartRef.current);
+    const container = chartRef.current;
+    const svg = d3.select(container);
     svg.selectAll("*").remove(); // Limpia el contenido del SVG
 
     if (!reservas || reservas.length === 0) return;
 
-    const width = 500;
-    const height = 500;
-    const radius = Math.min(width, height) / 2;
-    svg.attr("width", width).attr("height", height);
+    // Ajustar tamaño dinámico según el contenedor
+    const containerWidth = container.clientWidth || 500;
+    const containerHeight = containerWidth * 0.7; // Mantener proporción
+
+    svg
+      .attr("viewBox", `0 0 ${containerWidth} ${containerHeight}`)
+      .attr("preserveAspectRatio", "xMidYMid meet");
+
+    const radius = Math.min(containerWidth, containerHeight) / 2;
 
     const g = svg
       .append("g")
-      .attr("transform", `translate(${width / 2}, ${height / 2})`);
+      .attr("transform", `translate(${containerWidth / 2}, ${containerHeight / 2})`);
 
     // Agrupar reservas por salón
-    const reservasPorSalon = d3.rollup(
-      reservas,
-      (v) => v.length,
-      (d) => d.idSalon
-    );
+    const reservasPorSalon = d3.rollup(reservas, (v) => v.length, (d) => d.idSalon);
     const data = Array.from(reservasPorSalon, ([salon, count]) => ({ salon, count }));
 
     // Configurar el pie chart
@@ -33,15 +35,14 @@ const DiaSalonChart = ({ reservas }) => {
     const color = d3.scaleOrdinal(d3.schemeCategory10);
 
     const arcs = g
-      .selectAll("arc")
+      .selectAll(".arc")
       .data(pie(data))
       .enter()
       .append("g")
       .attr("class", "arc");
 
     arcs
       .append("path")
-      .attr("d", arc)
       .attr("fill", (d, i) => color(i))
       .transition()
       .duration(800)
@@ -52,17 +53,28 @@ const DiaSalonChart = ({ reservas }) => {
         };
       });
 
-    // Agregar etiquetas para cada salón
+    // Agregar etiquetas dentro de cada sección del gráfico
     arcs
       .append("text")
       .attr("transform", (d) => `translate(${arc.centroid(d)})`)
       .attr("text-anchor", "middle")
       .attr("font-size", "12px")
       .attr("fill", "#fff")
       .text((d) => d.data.salon);
+
+    // Función para ajustar el tamaño cuando la pantalla cambie
+    const updateSize = () => {
+      const newWidth = container.clientWidth || 500;
+      const newHeight = newWidth * 0.7;
+      svg.attr("viewBox", `0 0 ${newWidth} ${newHeight}`);
+    };
+
+    window.addEventListener("resize", updateSize);
+    updateSize(); // Llama a la función al inicio
+
   }, [reservas]);
 
-  return <svg ref={chartRef}></svg>;
+  return <svg ref={chartRef} style={{ width: "100%", height: "auto" }}></svg>;
 };
 
 export default DiaSalonChart;

src/components/Admin/charts/DemandaChart.jsx

@@ -1,59 +1,48 @@
-// src/components/Admin/charts/EstadoChart.jsx
 import React, { useEffect, useRef } from "react";
 import * as d3 from "d3";
 
 const EstadoChart = ({ reservas }) => {
   const chartRef = useRef(null);
 
   useEffect(() => {
-    const svg = d3.select(chartRef.current);
+    const container = chartRef.current;
+    const svg = d3.select(container);
     svg.selectAll("*").remove(); // Limpia el SVG
 
     if (!reservas || reservas.length === 0) return;
 
-    const width = 500;
-    const height = 500;
-    const radius = Math.min(width, height) / 2;
-    svg.attr("width", width).attr("height", height);
+    // Ajustar tamaño dinámico según el contenedor
+    const containerWidth = container.clientWidth || 500;
+    const containerHeight = containerWidth * 0.7; // Mantener proporción
+
+    svg
+      .attr("viewBox", `0 0 ${containerWidth} ${containerHeight}`)
+      .attr("preserveAspectRatio", "xMidYMid meet");
+
+    const radius = Math.min(containerWidth, containerHeight) / 2;
 
     const g = svg
       .append("g")
-      .attr("transform", `translate(${width / 2}, ${height / 2})`);
-
-    // Agrupar reservas por estado (suponiendo que la propiedad 'estado' es una cadena, ej: "ACTIVA" o "INACTIVA")
-    const reservasPorEstado = d3.rollup(
-      reservas,
-      (v) => v.length,
-      (d) => d.estado
-    );
-    const data = Array.from(reservasPorEstado, ([estado, count]) => ({
-      estado,
-      count,
-    }));
+      .attr("transform", `translate(${containerWidth / 2}, ${containerHeight / 2})`);
+
+    // Agrupar reservas por estado
+    const reservasPorEstado = d3.rollup(reservas, (v) => v.length, (d) => d.estado);
+    const data = Array.from(reservasPorEstado, ([estado, count]) => ({ estado, count }));
 
     // Configurar el pie/donut chart
     const pie = d3.pie().value((d) => d.count);
-    const arc = d3
-      .arc()
-      .innerRadius(radius * 0.5) // Radio interior para efecto donut
-      .outerRadius(radius);
-      
-    // Escala de colores con una paleta profesional (usamos d3.schemeSet2)
-    const color = d3
-      .scaleOrdinal()
-      .domain(data.map((d) => d.estado))
-      .range(d3.schemeSet2);
+    const arc = d3.arc().innerRadius(radius * 0.5).outerRadius(radius);
+    const color = d3.scaleOrdinal().domain(data.map((d) => d.estado)).range(d3.schemeSet2);
 
     const arcs = g
-      .selectAll("arc")
+      .selectAll(".arc")
       .data(pie(data))
       .enter()
       .append("g")
       .attr("class", "arc");
 
     arcs
       .append("path")
-      .attr("d", arc)
       .attr("fill", (d) => color(d.data.estado))
       .transition()
       .duration(800)
@@ -72,9 +61,20 @@ const EstadoChart = ({ reservas }) => {
       .attr("font-size", "14px")
       .attr("fill", "#000")
       .text((d) => `${d.data.estado}: ${d.data.count}`);
+
+    // Función para ajustar el tamaño cuando la pantalla cambie
+    const updateSize = () => {
+      const newWidth = container.clientWidth || 500;
+      const newHeight = newWidth * 0.7;
+      svg.attr("viewBox", `0 0 ${newWidth} ${newHeight}`);
+    };
+
+    window.addEventListener("resize", updateSize);
+    updateSize(); // Llama a la función al inicio
+
   }, [reservas]);
 
-  return <svg ref={chartRef}></svg>;
+  return <svg ref={chartRef} style={{ width: "100%", height: "auto" }}></svg>;
 };
 
 export default EstadoChart;