Merge branch 'Carlos' of repositorio.acatlan.unam.mx:IO/front-AT

app/(private)/Periodo/page.tsx

@@ -0,0 +1,229 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import axios from "axios";
+import Cookies from "js-cookie";
+
+interface Periodo {
+  id_periodo: number;
+  semestre: string;
+  fecha_inicio_servicio: string;
+  fecha_fin_servicio: string;
+  activo: boolean;
+}
+
+export default function PeriodoPage() {
+
+  const [periodos, setPeriodos] = useState<Periodo[]>([]);
+  const [semestre, setSemestre] = useState("");
+  const [fechaInicio, setFechaInicio] = useState("");
+  const [fechaFin, setFechaFin] = useState("");
+  const [modoEdicion, setModoEdicion] = useState(false);
+  const [idEditar, setIdEditar] = useState<number | null>(null);
+
+  const API = "http://localhost:5000/periodo";
+
+  const token = Cookies.get("token");
+  const headers = { Authorization: `Bearer ${token}` };
+
+  const obtenerPeriodos = async () => {
+    try {
+      const res = await axios.get(API, { headers });
+      setPeriodos(res.data);
+    } catch (error) {
+      console.error("Error al obtener periodos", error);
+    }
+  };
+
+  useEffect(() => {
+    obtenerPeriodos();
+  }, []);
+
+  // VALIDAR SEMESTRE 
+  const handleSemestreChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const valor = e.target.value;
+
+   
+    if (/^\d{0,6}$/.test(valor)) {
+      setSemestre(valor);
+    }
+  };
+
+  const crearPeriodo = async () => {
+    if (semestre.length !== 6) {
+      alert("El semestre debe tener exactamente 6 dígitos.");
+      return;
+    }
+
+    try {
+      await axios.post(
+        API,
+        {
+          semestre,
+          fecha_inicio_servicio: fechaInicio,
+          fecha_fin_servicio: fechaFin,
+          activo: true,
+        },
+        { headers }
+      );
+
+      limpiarFormulario();
+      obtenerPeriodos();
+    } catch (error) {
+      console.error("Error al crear periodo", error);
+    }
+  };
+
+
+  const eliminarPeriodo = async (id_periodo: number) => {
+    try {
+      await axios.delete(`${API}/${id_periodo}`, { headers });
+      obtenerPeriodos();
+    } catch (error) {
+      console.error("Error al eliminar periodo", error);
+    }
+  };
+
+  const cargarPeriodo = (p: Periodo) => {
+    setModoEdicion(true);
+    setIdEditar(p.id_periodo);
+    setSemestre(p.semestre);
+    setFechaInicio(p.fecha_inicio_servicio);
+    setFechaFin(p.fecha_fin_servicio);
+  };
+
+ 
+  const modificarPeriodo = async () => {
+    if (semestre.length !== 6) {
+      alert("El semestre debe tener exactamente 6 dígitos.");
+      return;
+    }
+
+    try {
+      await axios.put(
+        `${API}/${idEditar}`,
+        {
+          semestre,
+          fecha_inicio_servicio: fechaInicio,
+          fecha_fin_servicio: fechaFin,
+        },
+        { headers }
+      );
+
+      limpiarFormulario();
+      obtenerPeriodos();
+    } catch (error) {
+      console.error("Error al modificar periodo", error);
+    }
+  };
+
+  const limpiarFormulario = () => {
+    setSemestre("");
+    setFechaInicio("");
+    setFechaFin("");
+    setModoEdicion(false);
+    setIdEditar(null);
+  };
+
+  return (
+    <div>
+      <h1 style={{ color: "rgb(3, 1, 72)" }}>PERIODO ESCOLAR</h1>
+
+      {/* ================= FORMULARIO ================= */}
+      <div style={{ marginBottom: "10px" }}>
+        <input
+          type="text"
+          placeholder="Periodo (6 dígitos)"
+          value={semestre}
+          maxLength={6}
+          onChange={handleSemestreChange}
+        />
+
+        <label style={{ color: "rgb(3, 1, 72)" }}>
+          Elige la fecha de inicio de Periodo
+        </label>
+        <input
+          type="date"
+          value={fechaInicio}
+          onChange={(e) => setFechaInicio(e.target.value)}
+        />
+
+        <label style={{ color: "rgb(3, 1, 72)" }}>
+          Elige la fecha de fin de Periodo
+        </label>
+        <input
+          type="date"
+          value={fechaFin}
+          onChange={(e) => setFechaFin(e.target.value)}
+        />
+
+        {modoEdicion ? (
+          <>
+            <button
+              className="button buttonSearch"
+              onClick={modificarPeriodo}
+            >
+              Guardar Cambios
+            </button>
+
+            <button
+              className="button buttonCancel"
+              onClick={limpiarFormulario}
+            >
+              Cancelar
+            </button>
+          </>
+        ) : (
+          <button
+            className="button buttonSearch"
+            onClick={crearPeriodo}
+          >
+            Crear Periodo
+          </button>
+        )}
+      </div>
+
+      {/* ================= TABLA ================= */}
+      <div style={{ overflow: "auto", maxHeight: "350px" }}>
+        <table>
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>PERIODO</th>
+              <th>Inicio</th>
+              <th>Fin</th>
+              <th>Activo</th>
+              <th>Acción</th>
+            </tr>
+          </thead>
+          <tbody>
+            {periodos.map((p) => (
+              <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 === true ? "Sí" : "No"}</td>
+                <td>
+                  <button
+                    className="button buttonSearch"
+                    onClick={() => cargarPeriodo(p)}
+                  >
+                    Modificar
+                  </button>
+
+                  <button
+                    className="button buttonCancel"
+                    onClick={() => eliminarPeriodo(p.id_periodo)}
+                  >
+                    Borrar
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

app/globals.css

@@ -268,10 +268,13 @@ button:disabled {
   background-color: #2563eb;
 }
 
+
+
 .buttonSearch:hover {
   background-color: #1d4ed8;
 }
 
+
 .buttonCharge {
   background-color: #16a34a;
 }
@@ -493,7 +496,7 @@ thead tr {
   background-color: #2563eb;
   position: relative;
   z-index: 1;
-}
+}  
 
 tbody tr {
   transition: transform 0.3s ease, opacity 0.3s ease;

package-lock.json

@@ -693,6 +693,7 @@
       "version": "2.5.6",
       "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.6.tgz",
       "integrity": "sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==",
+      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "optional": true,
@@ -732,6 +733,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -752,6 +754,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -772,6 +775,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -792,6 +796,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -812,6 +817,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -832,6 +838,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -852,6 +859,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -872,6 +880,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -892,6 +901,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -912,6 +922,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -932,6 +943,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -952,6 +964,7 @@
       "cpu": [
         "ia32"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -972,6 +985,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1841,6 +1855,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "engines": {
@@ -1851,6 +1866,7 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -2200,6 +2216,7 @@
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
       "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "dev": true,
       "license": "MIT",
       "optional": true
     },
@@ -2246,6 +2263,7 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "engines": {

proxy.ts

@@ -41,6 +41,7 @@ export async function proxy(request: NextRequest) {
         "/AsignacionEquipo",
         "/Monitor",
         "/ActivosMantenimiento",
+        "/Periodo",
       ];
 
       if (role === 5 && !onlyImpresiones.includes(pathname)) {
@@ -66,6 +67,7 @@ export const config = {
   matcher: [
     "/",
     "/Reportes",
+    "/Periodo",
     "/Monitor",
     "/QuitarSancion",
     "/Programas",