Periodo conexion

app/(private)/Periodo/page.tsx

@@ -1,35 +1,143 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
+import axios from "axios";
+
+interface Periodo {
+  id_periodo: number;
+  semestre: string;
+  fecha_inicio_servicio: string;
+  fecha_fin_servicio: string;
+  activo: boolean;
+}
 
 export default function PeriodoPage() {
-  const [periodos] = useState([
-    { id: 1, nombre: "2024-2", activo: true },
-    { id: 2, nombre: "2025-1", activo: false },
-    { id: 3, nombre: "2025-2", activo: false },
-    { id: 4, nombre: "2026-1", activo: true },
-    { id: 5, nombre: "2026-2", activo: false },
-    { id: 6, nombre: "2027-1", activo: false },
-  ]);
+
+  const [periodos, setPeriodos] = useState<Periodo[]>([]);
+  const [semestre, setSemestre] = useState("");
+  const [fechaInicio, setFechaInicio] = useState("");
+  const [fechaFin, setFechaFin] = useState("");
+
+  const API = "http://localhost:3000/periodo"; // NO CAMBIO RUTA
+
+  
+  const config = {
+    headers: {
+      Authorization: `Bearer ${localStorage.getItem("token")}`,
+    },
+  };
+
+ 
+  const obtenerPeriodos = async () => {
+    try {
+      const res = await axios.get(API, config);
+      setPeriodos(res.data);
+    } catch (error) {
+      console.error("Error al obtener periodos", error);
+    }
+  };
+
+  useEffect(() => {
+    obtenerPeriodos();
+  }, []);
+
+  // CREAR PERIODO
+ 
+  const crearPeriodo = async () => {
+    try {
+      await axios.post(
+        API,
+        {
+          semestre,
+          fecha_inicio_servicio: fechaInicio,
+          fecha_fin_servicio: fechaFin,
+          activo: true,
+        },
+        config
+      );
+
+      setSemestre("");
+      setFechaInicio("");
+      setFechaFin("");
+
+      obtenerPeriodos();
+    } catch (error) {
+      console.error("Error al crear periodo", error);
+    }
+  };
+
+  // ELIMINAR PERIODO
+ 
+  const eliminarPeriodo = async (id_periodo: number) => {
+    try {
+      await axios.delete(`${API}/${id_periodo}`, config);
+      obtenerPeriodos();
+    } catch (error) {
+      console.error("Error al eliminar periodo", error);
+    }
+  };
 
   return (
     <div style={{ padding: "40px" }}>
-      <h1 style={{ color: "#b8860b" }}>PERIODO ESCOLAR</h1>
+      <h1 style={{ color: "#0c035c" }}>PERIODO ESCOLAR</h1>
 
-      <table border={1} cellPadding={10} style={{ marginTop: "20px" }}>
+      {/* ================= CREAR ================= */}
+      <div style={{ marginBottom: "20px" }}>
+        <input
+          type="text"
+          placeholder="Semestre (6 caracteres)"
+          value={semestre}
+          onChange={(e) => setSemestre(e.target.value)}
+        />
+
+        <input
+          type="date"
+          value={fechaInicio}
+          onChange={(e) => setFechaInicio(e.target.value)}
+        />
+
+        <input
+          type="date"
+          value={fechaFin}
+          onChange={(e) => setFechaFin(e.target.value)}
+        />
+
+        <button
+          className="button buttonSearch"
+          onClick={crearPeriodo}
+        >
+          Crear Periodo
+        </button>
+      </div>
+
+      {/* ================= LISTADO ================= */}
+      <table border={1} cellPadding={8}>
         <thead>
           <tr>
             <th>ID</th>
-            <th>Periodo</th>
+            <th>Semestre</th>
+            <th>Inicio</th>
+            <th>Fin</th>
             <th>Activo</th>
+            <th>Acción</th>
           </tr>
         </thead>
         <tbody>
           {periodos.map((p) => (
-            <tr key={p.id}>
-              <td>{p.id}</td>
-              <td>{p.nombre}</td>
+            <tr key={p.id_periodo}>
+              <td>{p.id_periodo}</td>
+              <td>{p.semestre}</td>
+              <td>{p.fecha_inicio_servicio}</td>
+              <td>{p.fecha_fin_servicio}</td>
               <td>{p.activo ? "Sí" : "No"}</td>
+              <td>
+                <button
+                  className="button buttonCancel"
+                  onClick={() => eliminarPeriodo(p.id_periodo)}
+                >
+                  Borrar Periodo
+                </button>
+              </td>
             </tr>
           ))}
         </tbody>

app/globals.css

@@ -255,10 +255,13 @@ button:disabled {
   background-color: #2563eb;
 }
 
+
+
 .buttonSearch:hover {
   background-color: #1d4ed8;
 }
 
+
 .buttonCharge {
   background-color: #16a34a;
 }