edded new button delete to programs

app/(private)/Programas/page.tsx

@@ -3,6 +3,8 @@
 import { useState, useEffect } from "react";
 import styleprograms from "./programas.module.css";
 import { envConfig } from "@/app/lib/config";
+import axios from "axios";
+import Swal from "sweetalert2";
 
 interface Programa {
   id_programa: number;
@@ -11,66 +13,87 @@ interface Programa {
 
 export default function Page() {
   const [modo, setModo] = useState("ver");
-
   const [programaSeleccionado, setProgramaSeleccionado] = useState("");
   const [programas, setProgramas] = useState<Programa[]>([]);
   const [nombrePrograma, setNombrePrograma] = useState("");
 
+  const cargarProgramas = async () => {
+    try {
+      const response = await axios.get(`${envConfig.apiUrl}/programa/`);
+      setProgramas(response.data);
+    } catch (error: any) {
+      console.error("Error al cargar programas:", error);
+      Swal.fire({
+        title: "Error al cargar programas",
+        text: error.response?.data?.message || error.message,
+        icon: "error",
+      });
+    }
+  };
+
   useEffect(() => {
-    fetch(`${envConfig.apiUrl}/programa/`)
-      .then((res) => res.json())
-      .then((data) => setProgramas(data))
-      .catch((error) => console.error("Error al cargar programas:", error));
+    cargarProgramas();
   }, []);
 
   const handleInsertar = async () => {
-  if (!nombrePrograma) return;
+    if (!nombrePrograma) return;
 
-  await fetch(`${envConfig.apiUrl}/programa`, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify({
-      programa: nombrePrograma,
-    }),
-  });
+    try {
+      await axios.post(`${envConfig.apiUrl}/programa`, {
+        programa: nombrePrograma,
+      });
 
-  const res = await fetch(`${envConfig.apiUrl}/programa/`);
-  const data = await res.json();
-  setProgramas(data);
+      await cargarProgramas();
 
-  setNombrePrograma("");
-  setModo("ver");
-};
+      setNombrePrograma("");
+      setModo("ver");
 
+      Swal.fire({
+        title: "Programa creado correctamente",
+        icon: "success",
+      });
+    } catch (error: any) {
+      Swal.fire({
+        title: "Error al insertar",
+        text: error.response?.data?.message || error.message,
+        icon: "error",
+      });
+    }
+  };
 
   const handleGuardar = async () => {
     if (!programaSeleccionado) return;
 
-    await fetch(`${envConfig.apiUrl}/programa/${programaSeleccionado}`, {
-      method: "PATCH",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        programa: nombrePrograma,
-      }),
-    });
+    try {
+      await axios.patch(
+        `${envConfig.apiUrl}/programa/${programaSeleccionado}`,
+        {
+          programa: nombrePrograma,
+        }
+      );
 
-    const res = await fetch(`${envConfig.apiUrl}/programa/`);
-    const data = await res.json();
-    setProgramas(data);
+      await cargarProgramas();
+      setModo("ver");
 
-    setModo("ver");
+      Swal.fire({
+        title: "Programa actualizado correctamente",
+        icon: "success",
+      });
+    } catch (error: any) {
+      Swal.fire({
+        title: "Error al actualizar",
+        text: error.response?.data?.message || error.message,
+        icon: "error",
+      });
+    }
   };
 
   const handleNuevo = () => setModo("nuevo");
-
   const handleCancelar = () => setModo("ver");
+
   const handleEditar = () => {
     const programa = programas.find(
-      (p) => p.id_programa === Number(programaSeleccionado),
+      (p) => p.id_programa === Number(programaSeleccionado)
     );
 
     if (programa) {
@@ -79,12 +102,38 @@ export default function Page() {
     }
   };
 
+  const handleDelete = async () => {
+    if (!programaSeleccionado) return;
+
+    try {
+      await axios.delete(
+        `${envConfig.apiUrl}/programa/${programaSeleccionado}`
+      );
+
+      await cargarProgramas();
+      setProgramaSeleccionado("");
+
+      Swal.fire({
+        title: "Programa eliminado exitosamente",
+        icon: "success",
+      });
+    } catch (error: any) {
+      Swal.fire({
+        title: "Error al eliminar",
+        text: error.response?.data?.message || error.message,
+        icon: "error",
+      });
+    }
+  };
+
   return (
     <section className="containerSection">
       {modo === "ver" && (
         <section className="containersection">
           <h3 className="title">PROGRAMAS</h3>
-          <label className="label">Selecciona el programa que quieres editar</label>
+          <label className="label">
+            Selecciona el programa que quieres editar
+          </label>
 
           <select
             value={programaSeleccionado}
@@ -105,21 +154,26 @@ export default function Page() {
             </button>
 
             <button
-              className={`button buttonCharge`}
-              style={{margin:"5px"}}
+              className="button buttonCharge"
+              style={{ margin: "5px" }}
               onClick={handleNuevo}
             >
               Nuevo
             </button>
+
+            <button
+              className={`button buttonCancel ${styleprograms.button}`}
+              onClick={handleDelete}
+            >
+              Eliminar
+            </button>
           </div>
         </section>
       )}
 
-      {}
       {modo === "editar" && (
         <section className="containersection">
           <h2 className="title">Editar Programa</h2>
-          <label className="label"> {programaSeleccionado}</label>
 
           <input
             type="text"
@@ -129,11 +183,9 @@ export default function Page() {
           />
 
           <div className="margin">
-         <button className="button buttonSearch" onClick={handleGuardar}>
-  Guardar
-</button>
-
-            
+            <button className="button buttonSearch" onClick={handleGuardar}>
+              Guardar
+            </button>
 
             <button
               className={`button buttonCancel ${styleprograms.button}`}
@@ -145,25 +197,21 @@ export default function Page() {
         </section>
       )}
 
-      {}
       {modo === "nuevo" && (
         <section className="containersection">
           <h2 className="title">Nuevo Programa</h2>
 
-          <label className="label">Programa</label>
           <input
-  type="text"
-  value={nombrePrograma}
-  onChange={(e) => setNombrePrograma(e.target.value)}
-  placeholder="Coloca el programa"
-/>
-
+            type="text"
+            value={nombrePrograma}
+            onChange={(e) => setNombrePrograma(e.target.value)}
+            placeholder="Coloca el programa"
+          />
 
           <div className="margin">
             <button className="button buttonSearch" onClick={handleInsertar}>
-  Insertar
-</button>
-
+              Insertar
+            </button>
 
             <button
               className={`button buttonCancel ${styleprograms.button}`}
@@ -177,3 +225,4 @@ export default function Page() {
     </section>
   );
 }
+//IO