Change .js files into .jsx files

AnderssonProgramming · AnderssonProgramming · commit f0ef6525e1cf · 2025-03-29T20:58:50.000-05:00
diff --git a/src/App.js b/src/App.js
@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from "react";
 import { BrowserRouter as Router, Route, Routes, Navigate } from "react-router-dom";
 import Home from './pages/Home/Home.js';
-import LoginPage from './pages/Login/LoginPage.js';
-import AdministratorHome from './pages/Administrator/AdministratorHome.js'; // Importa el componente
+import LoginPage from './pages/Login/LoginPage.jsx';
+import AdministratorHome from './pages/Administrator/AdministratorHome.jsx'; // Importa el componente
 
 import './App.css';
 
diff --git a/src/components/Admin/FilterSection.jsx b/src/components/Admin/FilterSection.jsx
@@ -210,4 +210,4 @@ const SearchButton = styled.button`
   cursor: pointer;
 `;
 
-export default FilterSection;
+export default FilterSection;
diff --git a/src/components/Admin/Header.jsx b/src/components/Admin/Header.jsx
@@ -111,4 +111,4 @@ const SubHeading = styled.p`
   padding: 0 210px;
   letter-spacing: -0.28px;
   margin-top: 20px;
-`;
+`;
diff --git a/src/components/Admin/Sidebar.jsx b/src/components/Admin/Sidebar.jsx
@@ -68,5 +68,4 @@ const NavText = styled.span`
   flex-shrink: 1;
   width: 127px;
   font-weight: bold; /* Texto en negrilla */
-`;
-
+`;
diff --git a/src/components/Admin/charts/DemandaChart.jsx b/src/components/Admin/charts/DemandaChart.jsx
@@ -1,4 +1,3 @@
-// src/components/Admin/charts/DemandaChart.js
 import React, { useEffect, useRef } from "react";
 import * as d3 from "d3";
 
@@ -29,50 +28,51 @@ const DemandaChart = ({ reservas }) => {
     }));
 
     // Usamos d3.hierarchy para crear una estructura para el pack layout.
-    const root = d3.hierarchy({ children: data })
-      .sum(d => d.count);
+    const root = d3.hierarchy({ children: data }).sum((d) => d.count);
 
     // Configurar el pack layout
-    const pack = d3.pack()
-      .size([width, height])
-      .padding(10);
+    const pack = d3.pack().size([width, height]).padding(10);
 
     const nodes = pack(root).leaves();
 
     // Escala de colores
     const color = d3.scaleOrdinal(d3.schemeSet3);
 
     // Dibujar las burbujas
-    const node = svg.selectAll("g")
+    const node = svg
+      .selectAll("g")
       .data(nodes)
       .enter()
       .append("g")
-      .attr("transform", d => `translate(${d.x}, ${d.y})`);
+      .attr("transform", (d) => `translate(${d.x}, ${d.y})`);
 
-    node.append("circle")
+    node
+      .append("circle")
       .attr("r", 0)
       .attr("fill", (d, i) => color(i))
       .transition()
       .duration(800)
-      .attr("r", d => d.r);
+      .attr("r", (d) => d.r);
 
     // Agregar etiquetas dentro de cada burbuja (nombre del salón y cantidad)
-    node.append("text")
+    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("font-size", (d) => Math.min((2 * d.r) / d.data.salon.length, 18))
       .attr("fill", "#000")
-      .text(d => d.data.salon);
+      .text((d) => d.data.salon);
 
-    node.append("text")
+    node
+      .append("text")
       .attr("text-anchor", "middle")
       .attr("dy", "1em")
       .attr("font-size", "12px")
       .attr("fill", "#000")
-      .text(d => d.data.count);
+      .text((d) => d.data.count);
   }, [reservas]);
 
   return <svg ref={chartRef}></svg>;
 };
 
-export default DemandaChart;
+export default DemandaChart;
diff --git a/src/components/Admin/charts/DiaSalonChart.jsx b/src/components/Admin/charts/DiaSalonChart.jsx
@@ -1,4 +1,3 @@
-// src/components/Admin/charts/DiaSalonChart.js
 import React, { useEffect, useRef } from "react";
 import * as d3 from "d3";
 
@@ -66,4 +65,4 @@ const DiaSalonChart = ({ reservas }) => {
   return <svg ref={chartRef}></svg>;
 };
 
-export default DiaSalonChart;
+export default DiaSalonChart;
diff --git a/src/components/Admin/charts/EstadoChart.jsx b/src/components/Admin/charts/EstadoChart.jsx
@@ -1,4 +1,4 @@
-// src/components/Admin/charts/EstadoChart.js
+// src/components/Admin/charts/EstadoChart.jsx
 import React, { useEffect, useRef } from "react";
 import * as d3 from "d3";
 
@@ -77,4 +77,4 @@ const EstadoChart = ({ reservas }) => {
   return <svg ref={chartRef}></svg>;
 };
 
-export default EstadoChart;
+export default EstadoChart;
diff --git a/src/components/Admin/charts/MesSalonChart.jsx b/src/components/Admin/charts/MesSalonChart.jsx
@@ -1,4 +1,4 @@
-// src/components/Admin/charts/MesSalonChart.js
+// src/components/Admin/charts/MesSalonChart.jsx
 import React, { useEffect, useRef } from "react";
 import * as d3 from "d3";
 
@@ -70,4 +70,4 @@ const MesSalonChart = ({ reservas }) => {
   return <svg ref={chartRef}></svg>;
 };
 
-export default MesSalonChart;
+export default MesSalonChart;
diff --git a/src/components/Admin/charts/PromedioPrioridadChart.jsx b/src/components/Admin/charts/PromedioPrioridadChart.jsx
@@ -1,4 +1,4 @@
-// src/components/Admin/charts/PromedioPrioridadChart.js
+// src/components/Admin/charts/PromedioPrioridadChart.jsx
 import React, { useEffect, useRef } from "react";
 import * as d3 from "d3";
 
@@ -84,4 +84,4 @@ const PromedioPrioridadChart = ({ data }) => {
   return <svg ref={chartRef}></svg>;
 };
 
-export default PromedioPrioridadChart;
+export default PromedioPrioridadChart;
diff --git a/src/components/Admin/charts/RangoFechasChart.jsx b/src/components/Admin/charts/RangoFechasChart.jsx
@@ -1,4 +1,3 @@
-// src/components/Admin/charts/RangoFechasChart.js
 import React, { useEffect, useRef } from "react";
 import * as d3 from "d3";
 
@@ -80,4 +79,4 @@ const RangoFechasChart = ({ reservas }) => {
   return <svg ref={chartRef}></svg>;
 };
 
-export default RangoFechasChart;
+export default RangoFechasChart;
diff --git a/src/components/Admin/charts/TotalSalonChart.jsx b/src/components/Admin/charts/TotalSalonChart.jsx
@@ -1,4 +1,4 @@
-// src/components/Admin/charts/TotalSalonChart.js
+// src/components/Admin/charts/TotalSalonChart.jsx
 import React, { useEffect, useRef } from "react";
 import * as d3 from "d3";
 
@@ -144,4 +144,4 @@ const TotalSalonChart = ({ reservas }) => {
   return <svg ref={chartRef}></svg>;
 };
 
-export default TotalSalonChart;
+export default TotalSalonChart;
diff --git a/src/components/Admin/filters/DemandaFilter.jsx b/src/components/Admin/filters/DemandaFilter.jsx
@@ -1,4 +1,4 @@
-// src/components/Admin/filters/DemandaFilter.js
+// src/components/Admin/filters/DemandaFilter.jsx
 import React from "react";
 import styled from "styled-components";
 
@@ -28,4 +28,4 @@ const SearchButton = styled.button`
   font-size: 16px;
   font-weight: bold;
   cursor: pointer;
-`;
+`;
diff --git a/src/components/Admin/filters/DiaSalonFilter.jsx b/src/components/Admin/filters/DiaSalonFilter.jsx
@@ -1,4 +1,4 @@
-// src/components/Admin/filters/DiaSalonFilter.js
+// src/components/Admin/filters/DiaSalonFilter.jsx
 import React, { useState } from "react";
 import styled from "styled-components";
 
@@ -67,4 +67,4 @@ const Button = styled.button`
   border: none;
   border-radius: 8px;
   cursor: pointer;
-`;
+`;
diff --git a/src/components/Admin/filters/EstadoFilter.jsx b/src/components/Admin/filters/EstadoFilter.jsx
@@ -1,4 +1,4 @@
-// src/components/Admin/filters/EstadoFilter.js
+// src/components/Admin/filters/EstadoFilter.jsx
 import React from "react";
 import styled from "styled-components";
 
@@ -25,4 +25,4 @@ const SearchButton = styled.button`
   border-radius: 8px;
   font-size: 16px;
   cursor: pointer;
-`;
+`;
diff --git a/src/components/Admin/filters/MesSalonFilter.jsx b/src/components/Admin/filters/MesSalonFilter.jsx
@@ -1,4 +1,4 @@
-// src/components/Admin/filters/MesSalonFilter.js
+// src/components/Admin/filters/MesSalonFilter.jsx
 import React, { useState } from "react";
 import styled from "styled-components";
 
@@ -68,4 +68,4 @@ const Button = styled.button`
   border: none;
   border-radius: 8px;
   cursor: pointer;
-`;
+`;
diff --git a/src/components/Admin/filters/PrioridadFilter.jsx b/src/components/Admin/filters/PrioridadFilter.jsx
@@ -1,4 +1,4 @@
-// src/components/Admin/filters/PrioridadFilter.js
+// src/components/Admin/filters/PrioridadFilter.jsx
 import React from "react";
 import styled from "styled-components";
 
@@ -27,4 +27,4 @@ const Button = styled.button`
   cursor: pointer;
   font-weight: bold;
   font-size: 16px;
-`;
+`;
diff --git a/src/components/Admin/filters/RangoFechasFilter.jsx b/src/components/Admin/filters/RangoFechasFilter.jsx
@@ -1,4 +1,4 @@
-// src/components/Admin/filters/RangoFechasFilter.js
+// src/components/Admin/filters/RangoFechasFilter.jsx
 import React, { useState } from "react";
 import styled from "styled-components";
 
@@ -66,4 +66,4 @@ const Button = styled.button`
   border: none;
   border-radius: 8px;
   cursor: pointer;
-`;
+`;
diff --git a/src/components/Admin/filters/TotalSalonFilter.jsx b/src/components/Admin/filters/TotalSalonFilter.jsx
@@ -1,4 +1,4 @@
-// src/components/Admin/filters/TotalSalonFilter.js
+// src/components/Admin/filters/TotalSalonFilter.jsx
 import React, { useState, useEffect } from "react";
 import styled from "styled-components";
 import { getSalones } from "../../../api/salon"; // Ajusta la ruta según tu estructura
@@ -78,4 +78,4 @@ const Button = styled.button`
   border-radius: 8px;
   font-size: 16px;
   cursor: pointer;
-`;
+`;
diff --git a/src/components/Login/FormInput.jsx b/src/components/Login/FormInput.jsx
@@ -56,4 +56,4 @@ const InputUnderline = styled.div`
   background-color: #aaba70;
 `;
 
-export default FormInput;
+export default FormInput;
diff --git a/src/components/Login/ImageSection.jsx b/src/components/Login/ImageSection.jsx
@@ -52,4 +52,4 @@ const SchoolLogo = styled.img`
   }
 `;
 
-export default ImageSection;
+export default ImageSection;
diff --git a/src/components/Login/LoginForm.jsx b/src/components/Login/LoginForm.jsx
@@ -123,4 +123,4 @@ const CvdsLogo = styled.img`
   margin: 130px auto 0;
 `;
 
-export default LoginForm;
+export default LoginForm;
diff --git a/src/pages/Administrator/AdministratorHome.jsx b/src/pages/Administrator/AdministratorHome.jsx
@@ -1,4 +1,4 @@
-// src/pages/Admin/AdministratorHome.js
+// src/pages/Admin/AdministratorHome.jsx
 import React, { useState } from "react";
 import styled from "styled-components";
 import { Header } from "../../components/Admin/Header";
@@ -190,4 +190,4 @@ const ConsultaItem = styled.li`
   &:hover {
     background-color: #dfe5d7;
   }
-`;
+`;
diff --git a/src/pages/Administrator/consultaModal/ConsultaModalDemanda.jsx b/src/pages/Administrator/consultaModal/ConsultaModalDemanda.jsx
@@ -89,4 +89,4 @@ const ErrorMessage = styled.div`
   color: red;
   font-weight: bold;
   margin: 10px 0;
-`;
+`;
diff --git a/src/pages/Administrator/consultaModal/ConsultaModalDiaSalon.jsx b/src/pages/Administrator/consultaModal/ConsultaModalDiaSalon.jsx
@@ -9,7 +9,7 @@ import { getReservas } from "../../../api/reserva"; // Asegúrate de que la ruta
 const ConsultaModalDiaSalon = ({ onClose }) => {
     const [reservas, setReservas] = useState([]);
     const [errorMsg, setErrorMsg] = useState("");
-  
+
     const handleBuscar = async (filtros) => {
       try {
         setErrorMsg("");
@@ -29,7 +29,7 @@ const ConsultaModalDiaSalon = ({ onClose }) => {
         setErrorMsg(error.message || "Error consultando reservas");
       }
     };
-  
+
     return createPortal(
       <Overlay>
         <ModalContainer>
@@ -47,9 +47,9 @@ const ConsultaModalDiaSalon = ({ onClose }) => {
       document.body
     );
   };
-  
+
   export default ConsultaModalDiaSalon;
-  
+
   /* Estilos del modal */
   const Overlay = styled.div`
     position: fixed;
@@ -63,32 +63,32 @@ const ConsultaModalDiaSalon = ({ onClose }) => {
     justify-content: center;
     z-index: 10000;
   `;
-  
+
   const ModalContainer = styled.div`
     background-color: #fff;
     width: 700px;
     max-width: 90%;
     border-radius: 8px;
     padding: 20px;
   `;
-  
+
   const ModalHeader = styled.div`
     display: flex;
     justify-content: space-between;
     align-items: center;
   `;
-  
+
   const CloseButton = styled.button`
     background: transparent;
     border: none;
     font-size: 22px;
     cursor: pointer;
   `;
-  
+
   const ModalBody = styled.div`
     margin-top: 10px;
   `;
-  
+
   const ErrorMessage = styled.div`
     color: red;
     font-weight: bold;
diff --git a/src/pages/Administrator/consultaModal/ConsultaModalEstado.jsx b/src/pages/Administrator/consultaModal/ConsultaModalEstado.jsx
@@ -1,4 +1,4 @@
-// src/components/Admin/consultaModal/ConsultaModalEstado.js
+// src/components/Admin/consultaModal/ConsultaModalEstado.jsx
 import React, { useState } from "react";
 import styled from "styled-components";
 import { createPortal } from "react-dom";
@@ -89,4 +89,4 @@ const ErrorMessage = styled.div`
   color: red;
   font-weight: bold;
   margin: 10px 0;
-`;
+`;
diff --git a/src/pages/Administrator/consultaModal/ConsultaModalMesSalon.jsx b/src/pages/Administrator/consultaModal/ConsultaModalMesSalon.jsx
diff --git a/src/pages/Administrator/consultaModal/ConsultaModalPrioridad.jsx b/src/pages/Administrator/consultaModal/ConsultaModalPrioridad.jsx
diff --git a/src/pages/Administrator/consultaModal/ConsultaModalRangoFechas.jsx b/src/pages/Administrator/consultaModal/ConsultaModalRangoFechas.jsx
diff --git a/src/pages/Administrator/consultaModal/ConsultaModalTotalSalon.jsx b/src/pages/Administrator/consultaModal/ConsultaModalTotalSalon.jsx
diff --git a/src/pages/Home/Home.jsx b/src/pages/Home/Home.jsx
diff --git a/src/pages/Login/LoginPage.jsx b/src/pages/Login/LoginPage.jsx
