now this can edit

app/Components/Equipos/equipos.tsx

@@ -2,6 +2,7 @@
 import axios from "axios";
 import { envConfig } from "@/app/lib/config";
 import { useState } from "react";
+import toast from "react-hot-toast";
 
 interface Data {
   nombre_equipo: string;
@@ -9,6 +10,7 @@ interface Data {
   id_plataforma: number;
   id_area_ubicacion: number;
   ubicacion: string;
+  ip:string
 }
 
 interface Plataforma {
@@ -35,14 +37,15 @@ export default function Equipos() {
   const [idPlataforma, setIdPlataforma] = useState<number | "">("");
   const [idArea, setIdArea] = useState<number | "">("");
 
+  const [isEditing, setIsEditing] = useState(false);
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
 
-
     const [equipoRes, plataformaRes, areaRes] = await Promise.all([
       axios.get(`${envConfig.apiUrl}/equipo/${id}`),
       axios.get(`${envConfig.apiUrl}/alumno-inscrito/plataforma`),
-      axios.get(`${envConfig.apiUrl}/area-ubicacion`)
+      axios.get(`${envConfig.apiUrl}/area-ubicacion`),
     ]);
 
     const equipo = equipoRes.data as Data;
@@ -57,6 +60,36 @@ export default function Equipos() {
     setArea(areaRes.data);
   };
 
+  const handleSave = async () => {
+    if (!data) return;
+
+    try {
+      await axios.patch(`${envConfig.apiUrl}/equipo`, {
+        id_equipo: data.id_equipo,
+        nombre_equipo: nombre,
+        ubicacion: ubicacion,
+        id_plataforma: idPlataforma,
+        id_area_ubicacion: idArea,
+        ip:data.ip
+      });
+
+      // Actualiza el estado local
+      setData({
+        ...data,
+        nombre_equipo: nombre,
+        ubicacion,
+        id_plataforma: idPlataforma as number,
+        id_area_ubicacion: idArea as number,
+      });
+
+      setIsEditing(false);
+      toast.success("Equipo actualizado correctamente");
+    } catch (error) {
+      console.error(error);
+      toast.error("Error al guardar el equipo");
+    }
+  };
+
   return (
     <form className="containerForm" onSubmit={handleSubmit}>
       <div className="groupInput">
@@ -77,6 +110,7 @@ export default function Equipos() {
           <input
             type="text"
             value={ubicacion}
+            disabled={!isEditing}
             onChange={(e) => setUbicacion(e.target.value)}
           />
 
@@ -84,12 +118,14 @@ export default function Equipos() {
           <input
             type="text"
             value={nombre}
+            disabled={!isEditing}
             onChange={(e) => setNombre(e.target.value)}
           />
 
           <label className="label">Plataforma</label>
           <select
             value={idPlataforma}
+            disabled={!isEditing}
             onChange={(e) => setIdPlataforma(Number(e.target.value))}
           >
             <option value="">Elige</option>
@@ -103,6 +139,7 @@ export default function Equipos() {
           <label className="label">Área Ubicación</label>
           <select
             value={idArea}
+            disabled={!isEditing}
             onChange={(e) => setIdArea(Number(e.target.value))}
           >
             <option value="">Elige</option>
@@ -114,12 +151,38 @@ export default function Equipos() {
           </select>
 
           <div className="containerButton" style={{ marginTop: "1rem" }}>
-            <button type="button" className="button buttonSearch">
-              Nuevo
-            </button>
-            <button type="button" className="button buttonSearch">
-              Editar
-            </button>
+            {isEditing ? (
+              <>
+                <button
+                  type="button"
+                  className="button buttonSearch"
+                  onClick={handleSave}
+                >
+                  Guardar
+                </button>
+
+                <button
+                  type="button"
+                  className="button buttonCancel"
+                  onClick={() => setIsEditing(false)}
+                >
+                  Cancelar
+                </button>
+              </>
+            ) : (
+              <>
+                <button type="button" className="button buttonCharge">
+                  Nuevo
+                </button>
+                <button
+                  type="button"
+                  className="button buttonSearch"
+                  onClick={() => setIsEditing(true)}
+                >
+                  Editar
+                </button>
+              </>
+            )}
           </div>
         </div>
       )}