From 298663b36e5d7c52ea4c76c2cd1eb9a4ea19e17b Mon Sep 17 00:00:00 2001
From: IO420 <320154041@pcpuma.acatlan.unam.mx>
Date: Mon, 9 Feb 2026 14:36:11 -0600
Subject: [PATCH] nuevo componente EnviarMensajeSala

---
 app/(private)/Mensajes/page.tsx               |   7 +-
 app/Components/EviarMensaje/EnviarMensaje.tsx |  98 +++++++++++------
 .../EviarMensaje/EnviarMensajeSala.tsx        | 104 ++++++++++++++++++
 3 files changed, 174 insertions(+), 35 deletions(-)
 create mode 100644 app/Components/EviarMensaje/EnviarMensajeSala.tsx

diff --git a/app/(private)/Mensajes/page.tsx b/app/(private)/Mensajes/page.tsx
index 7b9eeba..4049d50 100644
--- a/app/(private)/Mensajes/page.tsx
+++ b/app/(private)/Mensajes/page.tsx
@@ -1,4 +1,5 @@
 import EnviarMensaje from "@/app/Components/EviarMensaje/EnviarMensaje";
+import EnviarMensajeSala from "@/app/Components/EviarMensaje/EnviarMensajeSala";
 import Toggle from "@/app/Components/Global/Toggle/Toggle";
 
 export default async function Page(props: {
@@ -24,7 +25,7 @@ export default async function Page(props: {
               <EnviarMensaje
               key={1}
                 titulo="Seleccione un equipo"
-                opciones={["1", "2", "3", "4", "5", "6"]}
+                
               />
             ),
           },
@@ -32,10 +33,10 @@ export default async function Page(props: {
             key: "Sala",
             label: "Sala",
             content: (
-              <EnviarMensaje
+              <EnviarMensajeSala
               key={2}
                 titulo="Seleccione una sala"
-                opciones={["PECERA", "PCNET1", "PCNET2", "PCNET3"]}
+               
               />
             ),
           },
diff --git a/app/Components/EviarMensaje/EnviarMensaje.tsx b/app/Components/EviarMensaje/EnviarMensaje.tsx
index 3a6f637..2ddb5bb 100644
--- a/app/Components/EviarMensaje/EnviarMensaje.tsx
+++ b/app/Components/EviarMensaje/EnviarMensaje.tsx
@@ -1,60 +1,92 @@
 "use client";
-import { useState } from "react";
 
-// Definimos la interfaz de props
-interface EnviarMensajeProps {
-  titulo: string;
-  opciones: string[];
+import { useEffect, useState } from "react";
+import axios from "axios";
+import { envConfig } from "@/app/lib/config";
+
+interface Equipo {
+  id_equipo: number;
+  id_plataforma: number;
+  id_area_ubicacion: number;
+  nombre_equipo: string;
+  ubicacion: string;
+  activo: boolean;
+  ip: string;
+  areaUbicacion: { area: string };
+  plataforma: { nombre: string };
 }
 
-const EnviarMensaje = ({ titulo, opciones }: EnviarMensajeProps) => {
-  const [seleccion, setSeleccion] = useState("");
+interface EnviarMensajeProps {
+  titulo: string;
+}
+
+const EnviarMensaje = ({ titulo }: EnviarMensajeProps) => {
+  const [equipos, setEquipos] = useState<Equipo[]>([]);
+  const [equipoSeleccionado, setEquipoSeleccionado] = useState("");
   const [mensaje, setMensaje] = useState("");
   const [customMsg, setCustomMsg] = useState("");
 
+  // 🔹 Traer equipos desde API
+  useEffect(() => {
+    const fetchEquipos = async () => {
+      try {
+        const response = await axios.get(`${envConfig.apiUrl}/equipo`);
+        setEquipos(response.data);
+      } catch (error) {
+        console.error("Error cargando equipos:", error);
+      }
+    };
+
+    fetchEquipos();
+  }, []);
+
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    // Aquí puedes manejar el envío (guardar en estado global, enviar a backend, etc.)
+
+    const payload = {
+      equipo: equipoSeleccionado,
+      mensaje: customMsg || mensaje,
+    };
+
+    console.log(payload);
+
+    // aquí puedes enviar al backend
+    // axios.post(...)
   };
 
   return (
     <form className="containerForm" onSubmit={handleSubmit}>
-      {/* Selección principal */}
+
       <label className="label">{titulo}</label>
       <div className="groupInput">
         <select
-          value={seleccion}
-          onChange={(e) => setSeleccion(e.target.value)}
+          value={equipoSeleccionado}
+          onChange={(e) => setEquipoSeleccionado(e.target.value)}
         >
-          <option value="">-- {titulo} --</option>
-          {opciones.map((opt, idx) => (
-            <option key={idx} value={opt}>
-              {opt}
+          <option value="">-- Selecciona un equipo --</option>
+
+          {equipos.map((eq) => (
+            <option key={eq.id_equipo} value={eq.id_equipo}>
+              {eq.ubicacion} {eq.nombre_equipo} {eq.plataforma.nombre}{" "}
+              {eq.areaUbicacion.area}
             </option>
           ))}
         </select>
       </div>
 
-      {/* Selección de mensaje */}
       <label className="label">Seleccione el mensaje</label>
       <div className="groupInput">
         <select value={mensaje} onChange={(e) => setMensaje(e.target.value)}>
           <option value="">-- Seleccione el mensaje --</option>
-          {[
-            { value: "cerrar", label: "No olvides cerrar sesión" },
-            { value: "alerta1", label: "⚠️ Atención" },
-            { value: "alerta2", label: "🔔 Aviso importante" },
-            { value: "alerta3", label: "✅ Confirmación" },
-          ].map((msg, idx) => (
-            <option key={idx} value={msg.value}>
-              {msg.label}
-            </option>
-          ))}
+
+          <option value="cerrar">No olvides cerrar sesión</option>
+          <option value="alerta1">⚠️ Atención</option>
+          <option value="alerta2">🔔 Aviso importante</option>
+          <option value="alerta3">✅ Confirmación</option>
         </select>
-        <input type="checkbox" style={{minWidth:"20px", width:"20px",maxWidth:"30px"}}/>
       </div>
 
-      {/* Mensaje personalizado */}
+ 
       <label className="label">Mensaje personalizado</label>
       <div className="groupInput">
         <input
@@ -63,12 +95,14 @@ const EnviarMensaje = ({ titulo, opciones }: EnviarMensajeProps) => {
           onChange={(e) => setCustomMsg(e.target.value)}
           placeholder="Escribe tu mensaje..."
         />
-        <input type="checkbox" style={{minWidth:"20px", width:"20px",maxWidth:"30px"}}/>
       </div>
 
-
-      {/* Botón de enviar */}
-      <button className="button buttonSearch" type="submit" style={{marginTop:"1rem"}}>
+  
+      <button
+        className="button buttonSearch"
+        type="submit"
+        style={{ marginTop: "1rem" }}
+      >
         Mandar mensaje
       </button>
     </form>
diff --git a/app/Components/EviarMensaje/EnviarMensajeSala.tsx b/app/Components/EviarMensaje/EnviarMensajeSala.tsx
new file mode 100644
index 0000000..67cc87f
--- /dev/null
+++ b/app/Components/EviarMensaje/EnviarMensajeSala.tsx
@@ -0,0 +1,104 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import axios from "axios";
+import { envConfig } from "@/app/lib/config";
+
+interface Area {
+  id_area_ubicacion: number;
+  area: string;
+  extra: string;
+}
+
+interface EnviarMensajeSalaProps {
+  titulo: string;
+}
+
+const EnviarMensajeSala = ({ titulo }: EnviarMensajeSalaProps) => {
+  const [salas, setSalas] = useState<Area[]>([]);
+  const [salaSeleccionada, setSalaSeleccionada] = useState<number>(0);
+  const [mensaje, setMensaje] = useState("");
+  const [customMsg, setCustomMsg] = useState("");
+
+  // 🔹 Traer salas desde API
+  useEffect(() => {
+    const fetchSalas = async () => {
+      try {
+        const response = await axios.get(`${envConfig.apiUrl}/area-ubicacion`);
+        setSalas(response.data);
+      } catch (error) {
+        console.error("Error cargando salas:", error);
+      }
+    };
+
+    fetchSalas();
+  }, []);
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    const payload = {
+      sala: salaSeleccionada,
+      mensaje: customMsg || mensaje,
+    };
+
+    console.log(payload);
+
+    
+  };
+
+  return (
+    <form className="containerForm" onSubmit={handleSubmit}>
+  
+      <label className="label">{titulo}</label>
+      <div className="groupInput">
+        <select
+          value={salaSeleccionada}
+          onChange={(e) => setSalaSeleccionada(Number(e.target.value))}
+        >
+          <option value={0}>-- Selecciona una sala --</option>
+
+          {salas.map((s) => (
+            <option key={s.id_area_ubicacion} value={s.id_area_ubicacion}>
+              {s.area}
+            </option>
+          ))}
+        </select>
+      </div>
+
+ 
+      <label className="label">Seleccione el mensaje</label>
+      <div className="groupInput">
+        <select value={mensaje} onChange={(e) => setMensaje(e.target.value)}>
+          <option value="">-- Seleccione el mensaje --</option>
+
+          <option value="cerrar">No olvides cerrar sesión</option>
+          <option value="alerta1">⚠️ Atención</option>
+          <option value="alerta2">🔔 Aviso importante</option>
+          <option value="alerta3">✅ Confirmación</option>
+        </select>
+      </div>
+
+
+      <label className="label">Mensaje personalizado</label>
+      <div className="groupInput">
+        <input
+          type="text"
+          value={customMsg}
+          onChange={(e) => setCustomMsg(e.target.value)}
+          placeholder="Escribe tu mensaje..."
+        />
+      </div>
+
+      <button
+        className="button buttonSearch"
+        type="submit"
+        style={{ marginTop: "1rem" }}
+      >
+        Mandar mensaje
+      </button>
+    </form>
+  );
+};
+
+export default EnviarMensajeSala;