From a8fba0e98021f76f322f007b47cb911ee5140136 Mon Sep 17 00:00:00 2001
From: IO420 <320154041@pcpuma.acatlan.unam.mx>
Date: Thu, 29 Jan 2026 12:35:31 -0600
Subject: [PATCH] tring to do active

---
 app/Components/ActivosMantenimiento/Areas.tsx | 107 +++++++++---------
 .../ActivosMantenimiento/Equipos.tsx          |   2 -
 .../ActivosMantenimiento/MesasDisponibles.tsx |  40 +++++--
 app/Components/Equipos/tableEquipos.css       |  35 ++++++
 app/Components/Equipos/tableequipos.tsx       |  33 ++++--
 5 files changed, 142 insertions(+), 75 deletions(-)
 create mode 100644 app/Components/Equipos/tableEquipos.css

diff --git a/app/Components/ActivosMantenimiento/Areas.tsx b/app/Components/ActivosMantenimiento/Areas.tsx
index e76508f..5c62fa1 100644
--- a/app/Components/ActivosMantenimiento/Areas.tsx
+++ b/app/Components/ActivosMantenimiento/Areas.tsx
@@ -1,77 +1,81 @@
 "use client";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
-import "@/app/globals.css"
+import "@/app/globals.css";
+import axios from "axios";
+import { envConfig } from "@/app/lib/config";
+import toast from "react-hot-toast";
 
 export default function Areas() {
-  const [area, setArea] = useState(""); // Área seleccionada
-  const [activo, setActivo] = useState(false); // Checkbox Activo
-  const [mantenimiento, setMantenimiento] = useState(false); // Checkbox Mantenimiento
-  const [mensaje, setMensaje] = useState(""); // Mensaje dinámico
+  const [areas, setAreas] = useState([]);
+  const [selectedArea, setSelectedArea] = useState("");
+
+  const [modo, setModo] = useState<"Activo" | "Mantenimiento" | null>(
+    "Mantenimiento",
+  );
+
+  useEffect(() => {
+    axios
+      .get(`${envConfig.apiUrl}/area-ubicacion`)
+      .then((data) => {
+        setAreas(data.data);
+      })
+      .catch((error) => {
+        console.error("Error al traer las áreas:", error);
+      });
+  }, []);
 
   const handleActualizar = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    if (!area) {
-      setMensaje("Selecciona un área antes de actualizar");
+    if (!areas) {
+      toast.error("Selecciona un área antes de actualizar");
       return;
     }
-
-    // Crear mensaje dinámico
-    const estado = [];
-    if (activo) estado.push("Activo");
-    if (mantenimiento) estado.push("Mantenimiento");
-    const estadosSeleccionados = estado.length
-      ? estado.join(" y ")
-      : "Sin estado";
-
-    setMensaje(`Área ${area} actualizada con estado: ${estadosSeleccionados}`);
-
-    // Aquí puedes enviar los datos al backend si quieres
-    console.log({
-      area,
-      activo,
-      mantenimiento,
-    });
   };
 
   return (
     <form className="containerForm" onSubmit={handleActualizar}>
       <label className="label">Áreas</label>
+
       <div className="groupInput">
-        <select value={area} onChange={(e) => setArea(e.target.value)}>
-          <option value="">-- Áreas --</option>
-          <option value="PECERA">PECERA</option>
-          <option value="JAULA">JAULA</option>
-          <option value="HUACAL">HUACAL</option>
-          <option value="PCNET1">PCNET1</option>
-          <option value="PCNET2">PCNET2</option>
+        <select
+          id="areaSelect"
+          value={selectedArea}
+          onChange={(e) => setSelectedArea(e.target.value)}
+        >
+          <option value="">-- Selecciona una opción --</option>
+          {areas.map((area: any, index) => (
+            <option key={index} value={area.area}>
+              {area.area}
+            </option>
+          ))}
         </select>
 
-        {/* Checkboxes */}
-        <div className="checkbox-grid">
-
-        <div className="checkbox" style={{ marginTop: "10px" }}>
-          <label style={{ marginRight: "10px"}}>
+        <div className="radio-grid">
+          <label className="radio-card">
             <input
-              type="checkbox"
-              checked={activo}
-              onChange={(e) => setActivo(e.target.checked)}
-              />
-            Activo
+              type="radio"
+              name="modo"
+              checked={modo === "Activo"}
+              onChange={() => setModo("Activo")}
+            />
+            <span className="radio-ui"></span>
+            <span className="radio-text">Activo</span>
           </label>
-          <label>
+
+          <label className="radio-card">
             <input
-              type="checkbox"
-              checked={mantenimiento}
-              onChange={(e) => setMantenimiento(e.target.checked)}
-              />
-            Mantenimiento
+              type="radio"
+              name="modo"
+              checked={modo === "Mantenimiento"}
+              onChange={() => setModo("Mantenimiento")}
+            />
+            <span className="radio-ui"></span>
+            <span className="radio-text">Mantenimiento</span>
           </label>
         </div>
-              </div>
 
-        {/* Botón Actualizar */}
         <button
           className="button buttonSearch"
           type="submit"
@@ -80,9 +84,6 @@ export default function Areas() {
           Actualizar
         </button>
       </div>
-
-      {/* Mensaje dinámico */}
-      {mensaje && <p style={{ marginTop: "20px" }}>{mensaje}</p>}
     </form>
   );
 }
diff --git a/app/Components/ActivosMantenimiento/Equipos.tsx b/app/Components/ActivosMantenimiento/Equipos.tsx
index 006206a..b3b98e6 100644
--- a/app/Components/ActivosMantenimiento/Equipos.tsx
+++ b/app/Components/ActivosMantenimiento/Equipos.tsx
@@ -36,7 +36,6 @@ function Equipos() {
 
   return (
     <div className="containerForm">
-      {/* Buscar */}
       <form onSubmit={handleBuscar} className="groupInput">
         <label>No. de cuenta:</label>
         <input
@@ -47,7 +46,6 @@ function Equipos() {
         <button type="submit">Buscar</button>
       </form>
 
-      {/* Asignar */}
       <form onSubmit={handleAsignar} className="groupInput">
         <label>Equipos disponibles:</label>
         <select value={equipoId} onChange={(e) => setEquipoId(e.target.value)}>
diff --git a/app/Components/ActivosMantenimiento/MesasDisponibles.tsx b/app/Components/ActivosMantenimiento/MesasDisponibles.tsx
index 98ee3d1..f862b42 100644
--- a/app/Components/ActivosMantenimiento/MesasDisponibles.tsx
+++ b/app/Components/ActivosMantenimiento/MesasDisponibles.tsx
@@ -5,8 +5,8 @@ import axios from "axios";
 import { envConfig } from "@/app/lib/config";
 
 interface Mesa {
-  idMesa: number;
-  activo: boolean;
+  id_mesa: number;
+  activo: number;
 }
 
 export default function MesasDisponibles() {
@@ -49,14 +49,34 @@ export default function MesasDisponibles() {
             </thead>
             <tbody>
               {mesas &&
-                mesas.map((Mesa, index) => (
-                  <tr key={index}>
-                    <td>Mesa {Mesa.idMesa}</td>
-                    <td className={Mesa.activo ? "activo" : "inactivo"}>
-                      {Mesa.activo ? "Sí" : "No"}
-                    </td>
-                  </tr>
-                ))}
+                mesas.map((mesa) => {
+                  const isActivo = mesa.activo === 1;
+
+                  return (
+                    <tr key={mesa.id_mesa}>
+                      <td>Mesa {mesa.id_mesa}</td>
+
+                      <td
+                        className={isActivo ? "activo" : "inactivo"}
+                        style={{
+                          display: "flex",
+                          alignItems: "center",
+                          gap: "8px",
+                          justifyContent: "center",
+                        }}
+                      >
+                        <span>{isActivo ? "Sí" : "No"}</span>
+
+                        <input
+                          type="checkbox"
+                          checked={isActivo}
+                          readOnly
+                          style={{ height: "2.5rem", maxWidth:"50px"}}
+                        />
+                      </td>
+                    </tr>
+                  );
+                })}
             </tbody>
           </table>
         )}
diff --git a/app/Components/Equipos/tableEquipos.css b/app/Components/Equipos/tableEquipos.css
new file mode 100644
index 0000000..61b14a0
--- /dev/null
+++ b/app/Components/Equipos/tableEquipos.css
@@ -0,0 +1,35 @@
+.WINDOWS::before {
+  content: "";
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  background-image: url("/windows.png");
+  background-size: contain;
+  background-repeat: no-repeat;
+  margin-right: 6px;
+  vertical-align: middle;
+}
+
+.MACINTOSH::before {
+  content: "";
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  background-image: url("/apple.png");
+  background-size: contain;
+  background-repeat: no-repeat;
+  margin-right: 6px;
+  vertical-align: middle;
+}
+
+.PROFESORES::before {
+  content: "";
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  background-image: url("/teacher.png");
+  background-size: contain;
+  background-repeat: no-repeat;
+  margin-right: 6px;
+  vertical-align: middle;
+}
\ No newline at end of file
diff --git a/app/Components/Equipos/tableequipos.tsx b/app/Components/Equipos/tableequipos.tsx
index 8630278..3582870 100644
--- a/app/Components/Equipos/tableequipos.tsx
+++ b/app/Components/Equipos/tableequipos.tsx
@@ -3,12 +3,12 @@
 import { envConfig } from "@/app/lib/config";
 import { useEffect, useState } from "react";
 
+import "./tableEquipos.css";
 export default function TableEquipos() {
   const [equipos, setEquipos] = useState<any[]>([]);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    console.log("LLAMANDO API EQUIPO");
     fetch(`${envConfig.apiUrl}/equipo`)
       .then((res) => res.json())
       .then((data) => {
@@ -45,15 +45,28 @@ export default function TableEquipos() {
           </tr>
         </thead>
         <tbody>
-          {equipos.map((eq) => (
-            <tr key={eq.id_equipo}>
-              <td>{eq.ubicacion}</td>
-              <td>{eq.nombre_equipo}</td>
-              <td>{eq.plataforma?.nombre || eq.id_plataforma}</td>
-              <td>{eq.areaUbicacion?.nombre || eq.id_area_ubicacion}</td>
-              <td>{eq.activo ? "Sí" : "No"}</td>
-            </tr>
-          ))}
+          {equipos.map((eq) => {
+            const isActivo = eq.activo?.data?.[0] === 1;
+
+            return (
+              <tr key={eq.id_equipo}>
+                <td>{eq.ubicacion}</td>
+                <td>{eq.nombre_equipo}</td>
+                <td className={eq.plataforma?.nombre}>
+                  {eq.plataforma?.nombre}
+                </td>
+                <td>{eq.areaUbicacion?.nombre || eq.id_area_ubicacion}</td>
+
+                <td
+                  style={{ display: "flex", alignItems: "center", gap: "5px" }}
+                >
+                  <span>{isActivo ? "Sí" : "No"}</span>
+
+                  <input type="checkbox" checked={isActivo} readOnly style={{height:"2.5rem"}}/>
+                </td>
+              </tr>
+            );
+          })}
         </tbody>
       </table>
     </div>