fixing style and spelling

app/Components/ActivosMantenimiento/Areas.tsx

@@ -1,6 +1,8 @@
 "use client";
 import { useState } from "react";
 
+import "@/app/globals.css"
+
 export default function Areas() {
   const [area, setArea] = useState(""); // Área seleccionada
   const [activo, setActivo] = useState(false); // Checkbox Activo
@@ -36,7 +38,7 @@ export default function Areas() {
   return (
     <form className="containerForm" onSubmit={handleActualizar}>
       <label className="label">Áreas disponibles:</label>
-      <div className="groupInput">
+      <div className="groupInput" style={{display:"flex", flexDirection:"column"}}>
         {/* Select de áreas */}
         <select value={area} onChange={(e) => setArea(e.target.value)}>
           <option value="">-- Áreas disponibles --</option>
@@ -48,13 +50,15 @@ export default function Areas() {
         </select>
 
         {/* Checkboxes */}
+        <div className="checkbox-grid">
+
         <div className="checkbox" style={{ marginTop: "10px" }}>
-          <label style={{ marginRight: "10px" }}>
+          <label style={{ marginRight: "10px"}}>
             <input
               type="checkbox"
               checked={activo}
               onChange={(e) => setActivo(e.target.checked)}
-            />
+              />
             Activo
           </label>
           <label>
@@ -62,10 +66,11 @@ export default function Areas() {
               type="checkbox"
               checked={mantenimiento}
               onChange={(e) => setMantenimiento(e.target.checked)}
-            />
+              />
             Mantenimiento
           </label>
         </div>
+              </div>
 
         {/* Botón Actualizar */}
         <button

app/Components/ActivosMantenimiento/Mesas.tsx

@@ -1,6 +1,8 @@
 "use client";
 import { useState } from "react";
 
+import "@/app/globals.css"
+
 function Mesas() {
   const [mesa, setMesa] = useState(""); // Mesa seleccionada
   const [mantenimiento, setMantenimiento] = useState(false); // Checkbox Mantenimiento
@@ -26,7 +28,7 @@ function Mesas() {
   return (
     <form className="containerForm" onSubmit={handleConfirmar}>
       <label className="label">Mesas disponibles:</label>
-      <div className="groupInput">
+      <div className="groupInput"  style={{display:"flex", flexDirection:"column"}}>
         {/* Select de mesas */}
         <select value={mesa} onChange={(e) => setMesa(e.target.value)}>
           <option value="">-- Mesas disponibles --</option>
@@ -37,9 +39,9 @@ function Mesas() {
           <option value="15">15</option>
         </select>
 
-        {/* Checkbox Mantenimiento */}
+        <div className="checkbox-grid"></div>
         <div className="checkbox" style={{ marginTop: "10px" }}>
-          <label>
+          <label  style={{ marginRight: "10px", display:"flex", flexDirection:"row"}}>
             <input
               type="checkbox"
               checked={mantenimiento}

app/Components/BitacoraSanciones/TableSancion.tsx

@@ -27,19 +27,18 @@ export default function TableSancion() {
   const [sanciones, setSanciones] = useState<any>();
   const [button, setButton] = useState<boolean>(false);
 
-  useEffect(() => {
-    const getSanciones = async () => {
-      const response = await axios.get(
-        ""
-      );
-      setSanciones(response);
-    };
-    getSanciones();
-  }, [button]);
+  // useEffect(() => {
+  //   const getSanciones = async () => {
+  //     const response = await axios.get("");
+  //     setSanciones(response);
+  //   };
+  //   getSanciones();
+  // }, [button]);
 
   const handlebutton = () => {
     setButton(!button);
   };
+  
   return (
     <>
       <h1>{sanciones}</h1>
@@ -48,9 +47,9 @@ export default function TableSancion() {
           <thead>
             <tr>
               <th>Cuenta</th>
-              <th>Motivo de la sancion</th>
+              <th>Motivo de la sanción</th>
               <th>Duracion (Semanas) </th>
-              <th>Fecha Sancion</th>
+              <th>Fecha Sanción</th>
               <th>Podra utilizar el servicio hasta</th>
             </tr>
           </thead>
@@ -61,15 +60,14 @@ export default function TableSancion() {
       <form className="containerForm">
         <div className="groupInput">
           <select>
-            <option value="">-- Selecciona una sancion --</option>
+            <option value="">-- Selecciona una sanción --</option>
             <option value="sancion 1">No cerrar sesion (Una semana)</option>
           </select>
         </div>
       </form>
-          <button className="button buttonSearch" onClick={handlebutton}>
-            Aplicar sancion
-          </button>
-          <h1>{button ? <p>desactivado</p> : <p>activado</p>}</h1>
+      <button className="button buttonSearch" onClick={handlebutton}>
+        Aplicar sanción
+      </button>
     </>
   );
 }

app/Components/Equipos/equipos.tsx

@@ -14,16 +14,17 @@ export default function Equipos() {
   const [Equipo, setEquipo] = useState("");
   const [Data, setData] = useState<Data | any>();
 
-  const handleSubmit = async () => {
-    const response = await axios.get(
-      `${envConfig.apiUrl}/InformacionEquipo/${Equipo}`
-    );
+  const handleSubmit = async (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    // const response = await axios.get(
+    //   `${envConfig.apiUrl}/equipo/${Equipo}`
+    // );
 
-    if (!response) {
-      return;
-    }
+    // if (!response) {
+    //   return;
+    // }
 
-    setData(response);
+    setData("response");
   };
 
   return (
@@ -37,7 +38,7 @@ export default function Equipos() {
           }}
         />
 
-        <button className="button buttonSearch" onClick={handleSubmit}>
+        <button type="button" className="button buttonSearch" onClick={handleSubmit}>
           Buscar
         </button>
       </div>

app/Components/QuitarSancion/QuitarSancion.tsx

@@ -22,9 +22,9 @@ function QuitarSancion() {
             <tr>
               <th>id</th>
               <th>Nombre</th>
-              <th>Motivo Sancion</th>
+              <th>Motivo Sanción</th>
               <th>Duracion (semanas) </th>
-              <th>Fecha Sancion</th>
+              <th>Fecha Sanción</th>
               <th>Podria utilizar el servicio hasta</th>
             </tr>
           </thead>
@@ -42,7 +42,7 @@ function QuitarSancion() {
           </tbody>
         </table>
       </div>
-      <button className="button buttonSearch">Quitar Sancion</button>
+      <button className="button buttonSearch">Quitar Sanción</button>
     </section>
   );
 }

app/Components/layout/BarNavigation/BarNavigation.tsx

@@ -24,7 +24,7 @@ function BarNavigation() {
 
       <ul className={openMenu ? "active" : ""}>
         <li className={`subMenu ${openSubMenu === 0 ? "open" : ""}`}>
-          <span onClick={() => toggleSubMenu(0)}>Inscripcion</span>
+          <span onClick={() => toggleSubMenu(0)}>Inscripción</span>
           <ul className="containerLinks" onClick={toggleMenu}>
             <Link href="/Alta" className="links">
               <li>Alta</li>
@@ -33,7 +33,7 @@ function BarNavigation() {
               <li>Agregar Tiempo</li>
             </Link>
             <Link href="/Inscripcion" className="links">
-              <li>Inscripcion</li>
+              <li>Inscripción</li>
             </Link>
           </ul>
         </li>
@@ -90,7 +90,7 @@ function BarNavigation() {
         </li>
         <li className="subMenu" onClick={toggleMenu}>
           <Link href="/QuitarSancion" className="links">
-            <span>Quitar sancion</span>
+            <span>Quitar sanción</span>
           </Link>
         </li>
         <li className="subMenu" onClick={toggleMenu}>