Merge branch 'Lino' of https://github.com/IO420/Nexus into Carlos

app/Components/ActivosMantenimiento/Mesas.tsx

@@ -37,14 +37,9 @@ function Mesas() {
           <option value="15">15</option>
         </select>
 
-        {/* Checkbox Mantenimiento */}
-        <div className="checkbox" style={{ marginTop: "10px" }}>
+        <div className="checkbox-grid">
           <label>
-            <input
-              type="checkbox"
-              checked={mantenimiento}
-              onChange={(e) => setMantenimiento(e.target.checked)}
-            />
+            <input type="checkbox" />
             Mantenimiento
           </label>
         </div>

app/Components/Alta/registerAlta.tsx

@@ -0,0 +1,68 @@
+"use client";
+import { useState } from "react";
+
+export default function RegisterAlta() {
+  const [major, setMajor] = useState("");
+  return (
+    <form className="containerAlta gap gridAlta">
+      <div className="containerForm">
+        <label className="label">No.Cuenta</label>
+        <input
+          type="text"
+          //value={user}
+          //onChange={(e) => setUser(e.target.value)}
+          placeholder="Coloca un número de cuenta..."
+        />
+      </div>
+
+      <div className="containerForm">
+        <label className="label">Nombre</label>
+        <input
+          type="text"
+          //value={user}
+          //onChange={(e) => setUser(e.target.value)}
+          placeholder="Coloca el nombre"
+        />
+      </div>
+
+      <div className="containerForm">
+        <label className="label">Apellido Paterno</label>
+        <input
+          type="text"
+          //value={user}
+          //onChange={(e) => setUser(e.target.value)}
+          placeholder="Coloca el apellido paterno"
+        />
+      </div>
+
+      <div className="containerForm">
+        <label className="label">Apellido Materno</label>
+        <input
+          type="text"
+          //value={user}
+          //onChange={(e) => setUser(e.target.value)}
+          placeholder="Coloca el apellido materno"
+        />
+      </div>
+
+      <div className="containerForm">
+        <label className="label">Fecha Nacimiento</label>
+        <input
+          type="text"
+          //value={user}
+          //onChange={(e) => setUser(e.target.value)}
+          placeholder="Coloca fecha empezando por año"
+        />
+      </div>
+
+      <div className="containerForm">
+        <label className="label">Carrera</label>
+        <select value={major} onChange={(e) => setMajor(e.target.value)}>
+          <option value="">Selecciona la carrera</option>
+        </select>
+      </div>
+
+      <button className="button buttonSearch">registrar</button>
+    </form>
+  );
+}

app/Components/BitacoraSanciones/BitacoraAlumno.tsx

@@ -1,7 +1,8 @@
 "use client";
-import { useState } from "react";
-import styles from "./Page.module.css";
 import SearchDate from "../SearchDate/SearchDate";
+import { useState } from "react";
+
+import styles from "./Page.module.css";
 
 interface alumnos {
   tiempo_entrada: string;

app/Components/BitacoraSanciones/BitacoraEquipo.tsx

@@ -1,7 +1,8 @@
 "use client";
-import { useState } from "react";
-import styles from "./Page.module.css";
 import SearchDate from "../SearchDate/SearchDate";
+import { useState } from "react";
+
+import styles from "./Page.module.css";
 
 interface equipos {
   hora_entrada: string;

app/Components/BitacoraSanciones/BitacoraMesas.tsx

@@ -1,8 +1,8 @@
 "use client";
-import { useState } from "react";
-import styles from "./Page.module.css";
-
 import SearchDate from "../SearchDate/SearchDate";
+import { useState } from "react";
+
+import styles from "./Page.module.css";
 
 interface tables {
   no_mesa: number;
@@ -14,7 +14,7 @@ interface tables {
 
 function BitacoraMesas() {
   const [tables, setTables] = useState<tables[]>([]);
-  const [ubicacion_equipo, setUbicacionEquipo] = useState("");
+
   return (
     <>
       <SearchDate />

app/Components/BitacoraSanciones/Sanciones.tsx

@@ -1,97 +1,28 @@
-"use client";
-import { useEffect, useState } from "react";
-import styles from "./Page.module.css";
-import SearchUser from "../SearchUser/searchUser";
-import Information from "../Information/information";
-import { GetStudent } from "@/app/lib/getStudent";
-import { envConfig } from "@/app/lib/config";
+import Information from "../Global/Information/information";
+import SearchUser from "../Global/SearchUser/searchUser";
+import TableSancion from "./TableSancion";
 
-interface sancion {
-  no_cuenta: number;
+interface Student {
+  id_cuenta: string;
   nombre: string;
-  motivo: string;
-  duracion: number;
-  fecha_sancion: string;
-  utilizar_hasta: number;
 }
 
-export default function Sanciones() {
-  const [sanciones, setSanciones] = useState<sancion[]>([]);
-  const [ubicacion_equipo, setUbicacionEquipo] = useState("");
-  const [no_cuenta, setNo_cuenta] = useState("");
-
-  useEffect(() => {
-    fetch(`${envConfig.apiUrl}/student/${no_cuenta}`).then(
-      (
-        response // Revisar
-      ) => response.json().then((data) => setNo_cuenta(data[0].sancion))
-    );
-  }, [no_cuenta]);
+export default async function Sanciones(props: { student?: Student }) {
+  const idCuenta = props?.student?.id_cuenta ?? null;
 
   return (
     <>
-      <SearchUser urlBase="BitacoraSanciones" value="3" />
+      <SearchUser value={idCuenta} />
+      {props.student && (
+        <>
+          <Information
+            NoCuenta={props.student.id_cuenta}
+            Nombre={props.student.nombre}
+          />
 
-      {/*  <Information NoCuenta={sancion.id_cuenta} Nombre={student.nombre} /> */}
-
-      <form className="containerForm">
-        <label className="label">Ubicacion de equipo</label>
-
-        <div
-          className="groupInput"
-          style={{ display: "flex", gap: "1rem", flexDirection: "row" }}
-        >
-          <select
-            value={ubicacion_equipo}
-            onChange={(e) => setUbicacionEquipo(e.target.value)}
-          >
-            <option value="">-- Selecciona un equipo --</option>
-            <option value="255">Equipo 255</option>
-          </select>
-          <button className="button buttonSearch" type="submit">
-            Asignar
-          </button>
-        </div>
-      </form>
-
-      <div className={styles.tableContainer}>
-        <table className={styles.machineTable}>
-          <thead>
-            <tr>
-              <th>Cuenta</th>
-              <th>Motivo de la sancion</th>
-              <th>Duracion (Semanas) </th>
-              <th>Fecha Sancion</th>
-              <th>Podra utilizar el servicio hasta</th>
-            </tr>
-          </thead>
-          <tbody>
-            {sanciones.map((sancion, index) => (
-              <tr key={index}>
-                <td>{sancion.no_cuenta}</td>
-                <td>{sancion.motivo}</td>
-                <td>{sancion.fecha_sancion}</td>
-                <td>{sancion.duracion}</td>
-                <td>{sancion.utilizar_hasta}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-      <form className="containerForm">
-        <div className="groupInput">
-          <select
-            value={ubicacion_equipo}
-            onChange={(e) => setUbicacionEquipo(e.target.value)}
-          >
-            <option value="">-- Selecciona una sancion --</option>
-            <option value="sancion 1">No cerrar sesion (Una semana)</option>
-          </select>
-          <button className="button buttonSearch" type="submit">
-            Aplicar sancion
-          </button>
-        </div>
-      </form>
+        <TableSancion  />
+        </>
+      )}
     </>
   );
 }

app/Components/BitacoraSanciones/TableSancion.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import styles from "./Page.module.css";
+import axios from "axios";
+
+interface alumno_sancion {
+  id_alumno_sancion: number;
+  fecha_inicio: string;
+  alumno: alumno;
+  sancion: sancion;
+}
+
+interface alumno {
+  id_cuenta: number;
+  nombre: string;
+  credito: number;
+}
+
+interface sancion {
+  id_sancion: number;
+  sancion: string;
+  duracion: number;
+}
+
+export default function TableSancion() {
+  const [sanciones, setSanciones] = useState<any>();
+  const [button, setButton] = useState<boolean>(false);
+
+  useEffect(() => {
+    const getSanciones = async () => {
+      const response = await axios.get(
+        ""
+      );
+      setSanciones(response);
+    };
+    getSanciones();
+  }, [button]);
+
+  const handlebutton = () => {
+    setButton(!button);
+  };
+  return (
+    <>
+      <h1>{sanciones}</h1>
+      <div className={styles.tableContainer}>
+        <table className={styles.machineTable}>
+          <thead>
+            <tr>
+              <th>Cuenta</th>
+              <th>Motivo de la sancion</th>
+              <th>Duracion (Semanas) </th>
+              <th>Fecha Sancion</th>
+              <th>Podra utilizar el servicio hasta</th>
+            </tr>
+          </thead>
+          <tbody></tbody>
+        </table>
+      </div>
+
+      <form className="containerForm">
+        <div className="groupInput">
+          <select>
+            <option value="">-- Selecciona una sancion --</option>
+            <option value="sancion 1">No cerrar sesion (Una semana)</option>
+          </select>
+        </div>
+      </form>
+          <button className="button buttonSearch" onClick={handlebutton}>
+            Aplicar sancion
+          </button>
+          <h1>{button ? <p>desactivado</p> : <p>activado</p>}</h1>
+    </>
+  );
+}
+//IO

app/Components/Equipos/equipos.tsx

@@ -30,7 +30,7 @@ export default function Equipos() {
     <form className="containerForm">
       <div className="groupInput">
         <input
-          placeholder="text"
+          placeholder="Numero de Equipo a buscar..."
           value={Equipo}
           onChange={(e) => {
             setEquipo(e.target.value);

app/Components/Global/AlertBox/AlertBox.css

@@ -1,3 +1,25 @@
+@keyframes slideInLeft {
+  0% {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+  100% {
+    opacity: 0.9;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideOutRight {
+  0% {
+    opacity: 0.9;
+    transform: translateX(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+}
+
 .messageBox {
   display: flex;
   position: absolute;
@@ -6,20 +28,20 @@
   font-weight: bold;
   font-size: 2rem;
   text-align: center;
-  opacity: 1;
   z-index: 100;
   top: 0;
   left: 0;
-  width: 100%;
+  max-width: 500px;
   max-height: min-content;
-  opacity: 0.9;
-  transition: opacity 0.5s ease, transform 0.5s ease;
+  opacity: 0;
+}
+
+.messageBox:not(.hidden) {
+  animation: slideInLeft 0.5s ease forwards;
 }
 
 .messageBox.hidden {
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 1s ease-out,transform 0.5 ease;
+  animation: slideOutRight 0.5s ease forwards;
 }
 
 .success {
@@ -32,4 +54,4 @@
   background-color: #ffcdd2;
   color: #000000;
   border: 1px solid #ef9a9a;
-}
+}

app/Components/Global/AlertBox/AlertBox.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from "react";
 import "./AlertBox.css";
+import ClearParams from "../ClearParams/ClearParams";
 
 interface AlertBoxProps {
   message: string | null;

app/Components/Global/ClearParams/ClearParams.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { useEffect } from "react";
+
+interface ClearParamsProps {
+  paramsToClear: string[];
+}
+
+export default function ClearParams({ paramsToClear }: ClearParamsProps) {
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const url = new URL(window.location.href);
+    let changed = false;
+
+    paramsToClear.forEach((param) => {
+      if (url.searchParams.has(param)) {
+        url.searchParams.delete(param);
+        changed = true;
+      }
+    });
+
+    if (changed) {
+      window.history.replaceState({}, "", url.toString());
+    }
+  }, [paramsToClear]);
+
+  return null;
+}

app/Components/Global/FormHandle.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { ReactNode, useCallback } from "react";
+import { useRouter, usePathname, useSearchParams } from "next/navigation";
+
+interface FormHandlerProps {
+  children: ReactNode;
+  onSubmit: () => Promise<void>;
+}
+
+export default function FormHandler({ children, onSubmit }: FormHandlerProps) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+
+  const updateParams = useCallback(
+    (updates: Record<string, string | null>) => {
+      const params = new URLSearchParams(searchParams.toString());
+
+      Object.entries(updates).forEach(([key, value]) => {
+        if (value === null) params.delete(key);
+        else params.set(key, value);
+      });
+
+      router.push(`${pathname}?${params.toString()}`);
+    },
+    [searchParams, router, pathname]
+  );
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    try {
+      await onSubmit();
+    } catch (err: any) {
+      updateParams({ error: String(err) });
+    }
+  };
+
+  return <form onSubmit={handleSubmit}>{children}</form>;
+}

app/Components/Global/SearchUser/searchUser.tsx

@@ -1,16 +1,17 @@
-'use client'
+"use client";
 
-import { useRouter } from "next/navigation";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useEffect, useState } from "react";
 
-interface urlProp{
-  urlBase:string
-  value:string|null
+interface urlProp {
+  value: string | null;
 }
 
-function SearchUser(props:urlProp) {
+function SearchUser(props: urlProp) {
   const [numAcount, setnumAcount] = useState("");
   const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
 
   useEffect(() => {
     if (props.value) {
@@ -20,16 +21,17 @@ function SearchUser(props:urlProp) {
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-
+    const params = new URLSearchParams(searchParams.toString());
     if (numAcount) {
-      router.push(`/${props.urlBase}?numAcount=${numAcount}`);
+      params.delete("error");
+      params.set("numAcount", `${numAcount}`);
+      router.push(`${pathname}?${params.toString()}`);
     }
   };
 
   return (
     <>
-      <form className="containerForm"
-      onSubmit={handleSubmit}>
+      <form className="containerForm" onSubmit={handleSubmit}>
         <label className="label">No.Cuenta</label>
         <div className="groupInput">
           <input

app/Components/Global/StepNavigator/StepNavigator.css

@@ -0,0 +1,12 @@
+.stepNavigator {
+  position: relative;
+  width: 100%;
+  max-width: 600px;
+  margin-top: 1rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 4px;
+  background-color: #f9fafb;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+}

app/Components/Global/Toggle/Toggle.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { usePathname, useSearchParams } from "next/navigation";
+import { useRouter } from "next/navigation";
 import { useState, ReactNode } from "react";
 
 interface ToggleOption {
@@ -14,8 +16,20 @@ interface ToggleProps {
 }
 
 export default function Toggle({ options, defaultView }: ToggleProps) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
   const [view, setView] = useState(defaultView || options[0].key);
 
+  const handleClick = (key: string) => {
+    setView(key);
+
+    const params = new URLSearchParams(searchParams.toString());
+    params.set("key", key);
+
+    router.replace(`${pathname}?${params.toString()}`);
+  };
+  
   return (
     <section className="toggleSection">
       <div className="toggleGroup">
@@ -23,7 +37,7 @@ export default function Toggle({ options, defaultView }: ToggleProps) {
           <button
             key={opt.key}
             className={`toggleButton ${view === opt.key ? "active" : ""}`}
-            onClick={() => setView(opt.key)}
+            onClick={() => handleClick(opt.key)}
           >
             {opt.label}
           </button>
@@ -36,3 +50,4 @@ export default function Toggle({ options, defaultView }: ToggleProps) {
     </section>
   );
 }
+//IO

app/Components/Global/visual/GlobalAlert.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import AlertBox from "@/app/Components/Global/AlertBox/AlertBox";
+import ClearParams from "@/app/Components/Global/ClearParams/ClearParams";
+import { useSearchParams } from "next/navigation";
+
+export default function GlobalAlert() {
+  const searchParams = useSearchParams();
+  const [showSuccess, setShowSuccess] = useState<string | null>(null);
+  const [showError, setShowError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const success = searchParams.get("success");
+    const error = searchParams.get("error");
+
+    if (success) setShowSuccess(success);
+    if (error) setShowError(error);
+  }, []);
+
+  return (
+    <section className="containerAlerts">
+      {showError && (
+        <>
+          <AlertBox key={Date.now()} message={showError} type="error" />
+        </>
+      )}
+
+      {showSuccess && (
+        <>
+          <AlertBox key={Date.now()} message={showSuccess} type="success" />
+        </>
+      )}
+    </section>
+  );
+}

app/Components/Header/Header.tsx

@@ -1,31 +0,0 @@
-import Image from "next/image";
-import header from"./Header.module.css";
-import Link from "next/link";
-
-function Header() {
-    return (
-        <header>
-            <Link href="https://www.unam.mx/" className={header.center}>
-                <Image
-                    className={header.logo}
-                    src="/logo_fes.png"
-                    alt="Logo FES"
-                    width={200}
-                    height={50}
-                />
-            </Link>
-            <div className={header.yellowPart}></div>
-            <div className={header.cedetecContainer}>
-                <Image
-                    src="/cedetec.jpg"
-                    alt="Image of CEDETEC"
-                    width={300}
-                    height={71}
-                />
-            </div>
-        </header>
-    );
-}
-
-export default Header;
-//IO

app/Components/Impressions/impressions.tsx

@@ -5,8 +5,6 @@ import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { PostImpressions } from "@/app/lib/postImpressions";
 
-import "./Impressions.css";
-
 interface CostOption {
   value: number;
 }
@@ -29,25 +27,24 @@ function Impressions({ costs, numAcount }: ImpressionsProps) {
   };
 
   const handlePayment = async () => {
+    const currentUrl = new URL(window.location.href);
+    const params = new URLSearchParams();
+
+    const setError = (msg: string) => {
+      params.set("error", msg);
+      router.push(`${currentUrl}&${params.toString()}`);
+    };
+
     if (!numAcount) {
-      router.push(
-        `/Impresiones?numAcount=${numAcount}&error=Error busca denuevo al estudiante`
-      );
-      return;
+      return setError("busca de nuevo al estudiante");
     }
 
     if (!pages) {
-      router.push(
-        `/Impresiones?numAcount=${numAcount}&error=Ingresa el numero de hojas a imprimir`
-      );
-      return;
+      return setError("Ingresa el numero de hojas a imprimir");
     }
 
     if (!cost) {
-      router.push(
-        `/Impresiones?numAcount=${numAcount}&error=Selecciona un costo`
-      );
-      return;
+      return setError("Selecciona un costo");
     }
 
     const result = await PostImpressions({
@@ -59,18 +56,16 @@ function Impressions({ costs, numAcount }: ImpressionsProps) {
     if (result.error) {
       if (result.error === "Token inválido") handleLogout();
       else {
-        router.push(
-          `/Impresiones?numAcount=${numAcount}&error=${result.error}`
-        );
+        return setError(`Error: ${result.error}`);
       }
       return;
     }
 
     setPages("");
     setCost("");
-    router.push(
-      `/Impresiones?numAcount=${numAcount}&success=Impresion cobrada correctamente`
-    );
+    params.delete("error");
+    params.set("success", "Impresion cobrada correctamente");
+    router.push(`${currentUrl}&${params.toString()}`);
   };
 
   return (
@@ -84,7 +79,7 @@ function Impressions({ costs, numAcount }: ImpressionsProps) {
         <div className="groupInput">
           <label className="label">Costo:</label>
           <select value={cost} onChange={(e) => setCost(e.target.value)}>
-            <option value="">-- Selecciona un tiempo --</option>
+            <option value="">Selecciona el costo</option>
             {costs.map((c) => (
               <option key={c.value} value={c.value}>
                 ${c.value}
@@ -110,9 +105,12 @@ function Impressions({ costs, numAcount }: ImpressionsProps) {
           />
         </div>
 
-        <div className="groupLabel">
-          <label className="label">
-            Total: {pages && cost && `$${parseInt(cost) * parseInt(pages)}.00`}
+        <div className="groupInput">
+          <label className="label">Total:</label>
+          <label
+            style={{ width: "100%", minWidth: "200px", maxWidth: "500px" }}
+          >
+            {pages && cost && `$${parseInt(cost) * parseInt(pages)}.00`}
           </label>
         </div>
 

app/Components/QuitarSancion/QuitarSancion.tsx

@@ -1,5 +1,6 @@
 "use client";
 import { useState } from "react";
+
 import styles from "./Page.module.css";
 
 interface quitarSanciones {

app/Components/Receipt/Receipt.tsx

@@ -7,11 +7,10 @@ import { useRouter } from "next/navigation";
 import "./Receipt.css";
 
 interface ReceiptsProps {
-  urlBase: string;
   numAcount: number | null;
 }
 
-function Receipt({ urlBase, numAcount }: ReceiptsProps) {
+function Receipt({ numAcount }: ReceiptsProps) {
   const router = useRouter();
 
   const [folio, setFolio] = useState("");
@@ -29,30 +28,28 @@ function Receipt({ urlBase, numAcount }: ReceiptsProps) {
   //restrict this month//
 
   const handleSaveReceipt = async () => {
+    const currentUrl = new URL(window.location.href);
+    const params = new URLSearchParams();
+
+    const setError = (msg: string) => {
+      params.set("error", msg);
+      router.push(`${currentUrl}&${params.toString()}`);
+    };
+
     if (!numAcount) {
-      router.push(
-        `${urlBase}?numAcount=${numAcount}&error=Error busca denuevo al estudiante`
-      );
-      return;
+      return setError("busca de nuevo al estudiante");
     }
 
     if (!folio) {
-      router.push(
-        `${urlBase}?numAcount=${numAcount}&error=Ingresa el folio del tiket`
-      );
-      return;
+      return setError("Ingresa el folio del ticket");
     }
 
     if (!amount) {
-      router.push(
-        `${urlBase}?numAcount=${numAcount}&error=coloca el monto a depositar`
-      );
-      return;
+      return setError("Coloca el monto a depositar");
     }
 
     if (!date) {
-      router.push(`${urlBase}?numAcount=${numAcount}&error=coloca la fecha`);
-      return;
+      return setError("Coloca la fecha");
     }
 
     try {
@@ -67,10 +64,11 @@ function Receipt({ urlBase, numAcount }: ReceiptsProps) {
       setAmount("");
       setDate("");
 
-      router.push(`${urlBase}?numAcount=${numAcount}&success=Recibo guardado`);
+      params.delete("error");
+      params.set("success", "Recibo guardado");
+      router.push(`${currentUrl}&${params.toString()}`);
     } catch (err: any) {
-      console.error(err);
-      router.push(`${urlBase}?numAcount=${numAcount}&error=${err}`);
+      setError(String(err));
     }
   };
 
@@ -89,11 +87,11 @@ function Receipt({ urlBase, numAcount }: ReceiptsProps) {
             value={folio}
             onChange={(error) => {
               const value = error.target.value;
-              if (/^\d*$/.test(value)) {
+              if (/^\d*$/.test(value) && value.length <= 7) {
                 setFolio(value);
               }
             }}
-            placeholder="Numero de folio..."
+            placeholder="Numero de tiket..."
             inputMode="numeric"
             pattern="[0-9]*"
           />
@@ -113,9 +111,10 @@ function Receipt({ urlBase, numAcount }: ReceiptsProps) {
                 if (value === "" || numericValue <= 1000) {
                   setAmount(value);
                 } else {
-                  router.push(
-                    `/Impresiones?numAcount=${numAcount}&error=El monto no puede superar $1000.00`
-                  );
+                  const currentUrl = new URL(window.location.href);
+                  const params = new URLSearchParams();
+                  params.set("error", "El monto no puede superar $1000.00");
+                  router.push(`${currentUrl}&${params.toString()}`);
                 }
               }
             }}

app/Components/SearchDateBetween/SearchDateBetween.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { Margarine } from "next/font/google";
+
 import { useState } from "react";
 
 function SearchDateBetween() {

app/Components/StepNavigator/StepNavigator.css

@@ -1,11 +0,0 @@
-.stepNavigator {
-    position: relative;
-    max-width: 600px;
-    margin-top: 1rem;
-    border: 1px solid #e5e7eb;
-    border-radius: 4px;
-    background-color: #f9fafb;
-    padding: 1rem;
-    display: flex;
-    flex-direction: column;
-}

app/Components/auth/ChangePassword/changePassword.tsx

@@ -14,7 +14,7 @@ export default function ChangePassword() {
 
   return (
     <section className="centerGrid containerSection">
-      <form onSubmit={handleChangePass}>
+      <form onSubmit={handleChangePass} className="pass">
         <div className="containerInput relative">
           <label className="label">Contraseña actual</label>
           <input
@@ -42,7 +42,7 @@ export default function ChangePassword() {
         <div className="containerInput relative">
           <label className="label">Confirmar la contraña</label>
           <input
-            placeholder="Coloca tu contraseña..."
+            placeholder="Coloca tu nueva contraseña..."
             value={confirmNewPass}
             onChange={(e) => {
               setconfirmNewPass(e.target.value);
@@ -61,7 +61,7 @@ export default function ChangePassword() {
           </button>
 
           <button
-            className="button buttonSearch"
+            className="button buttonCancel"
             style={{ maxWidth: "100%", width: "100%" }}
             type="submit"
           >

app/Components/auth/Login/Login.tsx

@@ -3,8 +3,8 @@ import { useState } from "react";
 import { loginUser } from "@/app/lib/login";
 import { useRouter } from "next/navigation";
 
-import AlertBox from "../AlertBox/AlertBox";
 import "./Login.css";
+import AlertBox from "../../Global/AlertBox/AlertBox";
 
 function Login() {
   const [user, setUser] = useState("");
@@ -24,10 +24,10 @@ function Login() {
     } else {
       const token = data.access_token;
       const payload = JSON.parse(atob(token.split(".")[1]));
-      const id_usuario = payload.id;
+      const usuario = payload.usuario;
 
       document.cookie = `token=${token}; path=/; SameSite=Strict`;
-      document.cookie = `id_usuario=${id_usuario}; path=/; SameSite=Strict`;
+      document.cookie = `usuario=${usuario}; path=/; SameSite=Strict`;
 
       setAlert("Inicio de sesión exitoso");
       router.push("/Impresiones");

app/Components/auth/Logout/Logout.css

@@ -23,8 +23,8 @@
     content: "";
     border: 3px solid white;
     border-radius: 2px;
-    height: 15px;
-    width: 15px;
+    height: 2rem;
+    width: 2rem;
     position: absolute;
     left: 50%;
     top: 50%;
@@ -36,7 +36,7 @@
     border: 2px solid white;
     border-radius: 1px;
     height: 0px;
-    width: 10px;
+    width: 1.5rem;
     position: absolute;
     left: 50%;
     top: 50%;

app/Components/layout/BarNavigation/BarNavigation.css

@@ -56,20 +56,25 @@
   align-items: center;
   justify-content: center;
   width: 100%;
-  gap: 10px;
   position: relative;
   z-index: 1;
   border-radius: 4px 4px 0 0;
 }
 
 .subMenu ul {
-  display: none;
+  opacity: 0;
+  max-height: 0;
   position: absolute;
   flex-direction: column;
   top: 100%;
   width: 100%;
   background-color: #003e79;
-  transition: color 0.3s ease, opacity 0.3s ease;
+  transition: color 0.3s ease;
+  transition: opacity 0.4s ease, max-height 0.4s ease;
+}
+
+.subMenu ul a {
+  display: none;
 }
 
 .subMenu.open ul {
@@ -82,6 +87,11 @@
 }
 
 .subMenu:hover ul {
+  opacity: 1;
+  max-height: 500px;
+}
+
+.subMenu:hover ul a {
   display: flex;
 }
 
@@ -139,7 +149,7 @@ tbody {
 
   .barNavigation ul {
     position: absolute;
-    background-color: rgb(1, 92, 184);
+    background-color: #003e79;
     flex-direction: column;
     padding: 10px 0;
     align-items: center;
@@ -160,10 +170,10 @@ tbody {
   }
 
   .subMenu ul {
-    width: 90%;
+    width: 100%;
     border-radius: 4px;
     position: relative;
-    background-color: rgba(0, 61, 121, 1);
+    background-color: rgb(1, 92, 184);
   }
 
   thead,

app/Components/layout/BarNavigation/BarNavigation.tsx

@@ -24,7 +24,7 @@ function BarNavigation() {
 
       <ul className={openMenu ? "active" : ""}>
         <li className={`subMenu ${openSubMenu === 0 ? "open" : ""}`}>
-          <span onClick={() => toggleSubMenu(0)}>Inscripciones</span>
+          <span onClick={() => toggleSubMenu(0)}>Inscripcion</span>
           <ul className="containerLinks" onClick={toggleMenu}>
             <Link href="/Alta" className="links">
               <li>Alta</li>
@@ -32,8 +32,8 @@ function BarNavigation() {
             <Link href="/AgregarTiempo" className="links">
               <li>Agregar Tiempo</li>
             </Link>
-            <Link href="/Inscripciones" className="links">
-              <li>Inscripciones</li>
+            <Link href="/Inscripcion" className="links">
+              <li>Inscripcion</li>
             </Link>
           </ul>
         </li>

app/Components/layout/Header/Header.module.css

@@ -26,10 +26,16 @@
   content: "";
   top: 0;
   left: -20px;
-  width: 50%;
+  width: 65%;
   height: 100%;
   min-width: 300px;
-  background: #bd8c01;
+  background: linear-gradient(to right, #bd8c01, #f9f9f9);
   transform: skew(-45deg);
   z-index: 0;
 }
+
+@media (max-width: 800px) {
+  .yellowPart {
+    background: #bd8c01;
+  }
+}

app/Components/layout/Header/Header.tsx

@@ -0,0 +1,35 @@
+import Image from "next/image";
+import header from "./Header.module.css";
+import Link from "next/link";
+
+function Header() {
+  return (
+    <header>
+      <Link
+        href="https://www.unam.mx/"
+        target="_blank"
+        className={header.center}
+      >
+        <Image
+          className={header.logo}
+          src="/logo_fes.png"
+          alt="Logo FES"
+          width={200}
+          height={50}
+        />
+      </Link>
+      <div className={header.yellowPart}></div>
+      <div className={header.cedetecContainer}>
+        <Image
+          src="/cedetec.jpg"
+          alt="Image of CEDETEC"
+          width={300}
+          height={71}
+        />
+      </div>
+    </header>
+  );
+}
+
+export default Header;
+//IO