file restructuring

2025-09-28 01:59:16 -06:00
parent d13ceed45e
commit d006fc8c0e
38 changed files with 342 additions and 319 deletions
@@ -1 +0,0 @@
-NEXT_PUBLIC_API_URL=
@@ -1,21 +1,33 @@
-"use client";
-import Areas from "@/app/Components/Equipo/ActivosMantenimiento/Areas";
-import Mesas from "@/app/Components/Equipo/ActivosMantenimiento/Mesas";
-import Equipos from "@/app/Components/Equipo/Equipos/equipos";
+import Areas from "@/app/Components/ActivosMantenimiento/Areas";
+import Mesas from "@/app/Components/ActivosMantenimiento/Mesas";
+import Equipos from "@/app/Components/Equipos/equipos";
+import AlertBox from "@/app/Components/Global/AlertBox/AlertBox";
 import SearchUser from "@/app/Components/Global/SearchUser/searchUser";
 import Toggle from "@/app/Components/Global/Toggle/Toggle";

-export default function Page(props: {
+export default async function Page(props: {
  searchParams?: Promise<{
-    numAcount: string;
+    numAcount?: string;
+    machine?: string;
    success?: string;
    error?: string;
  }>;
 }) {
-  const params = props.searchParams;
+  const params = await props.searchParams;
+  const numAcount = params?.numAcount ? params.numAcount : null;
+  const showSuccess = params?.success ? params.success : null;
+  const showError = params?.error ? params.error : null;

  return (
    <section className="containerSection">
+      {showError && (
+        <AlertBox key={Date.now()} message={showError} type="error" />
+      )}
+
+      {showSuccess && (
+        <AlertBox key={Date.now()} message={showSuccess} type="success" />
+      )}
+
      <h2 className="title">EQUIPOS ACTIVOS Y EN MANTENIMIENTO</h2>

      <Toggle
@@ -26,7 +38,7 @@ export default function Page(props: {
            label: "Equipos",
            content: (
              <>
-                <SearchUser urlBase="ActivosMantenimiento" value={"2"} />
+                <SearchUser urlBase="ActivosMantenimiento" value={numAcount} />
                <Equipos />
              </>
            ),
@@ -54,3 +66,4 @@ export default function Page(props: {
    </section>
  );
 }
+//IO
@@ -1,9 +1,28 @@
-import RegisterAlta from "@/app/Components/Inscripciones/Alta/registerAlta";
+import AlertBox from "@/app/Components/Global/AlertBox/AlertBox";
+import RegisterAlta from "@/app/Components/Alta/registerAlta";
+
 import "./style.css";

-export default function Page() {
+export default async function Page(props: {
+  searchParams?: Promise<{
+    success?: string;
+    error?: string;
+  }>;
+}) {
+  const params = await props.searchParams;
+  const showSuccess = params?.success ? params.success : null;
+  const showError = params?.error ? params.error : null;
+
  return (
    <section className="containerSection">
+      {showError && (
+        <AlertBox key={Date.now()} message={showError} type="error" />
+      )}
+
+      {showSuccess && (
+        <AlertBox key={Date.now()} message={showSuccess} type="success" />
+      )}
+
      <h1 className="title">ALTA</h1>

      <RegisterAlta />
@@ -1,10 +1,31 @@
-"use client";
+import AlertBox from "@/app/Components/Global/AlertBox/AlertBox";
 import SearchUser from "@/app/Components/Global/SearchUser/searchUser";
 import Toggle from "@/app/Components/Global/Toggle/Toggle";

-export default function Page() {
+export default async function Page(props: {
+  searchParams?: Promise<{
+    numAcount?: string;
+    machine?:string;
+    success?: string;
+    error?: string;
+  }>;
+}) {
+  const params = await props.searchParams;
+  const numAcount = params?.numAcount ? params.numAcount : null;
+  const machine = params?.machine ? params.machine : null;
+  const showSuccess = params?.success ? params.success : null;
+  const showError = params?.error ? params.error : null;
+
  return (
    <section className="containerSection">
+      {showError && (
+        <AlertBox key={Date.now()} message={showError} type="error" />
+      )}
+
+      {showSuccess && (
+        <AlertBox key={Date.now()} message={showSuccess} type="success" />
+      )}
+      
      <h2 className="title"> ASIGNACION DE EQUIPOS </h2>

      <Toggle
@@ -15,7 +36,7 @@ export default function Page() {
            label: "Asignar tiempo",
            content: (
              <>
-                <SearchUser urlBase="AsignacionEquipo" value={"2"} />
+                <SearchUser urlBase="AsignacionEquipo" value={numAcount} />

                <form className="containerForm"></form>
              </>
@@ -34,7 +55,8 @@ export default function Page() {
                    <input type="checkbox" /> Cuenta
                  </label>
                </div>
-                <SearchUser urlBase="AsignacionEquipo" value={"2"} />
+
+                <SearchUser urlBase="AsignacionEquipo" value={numAcount} />
              </>
            ),
          },
@@ -43,3 +65,4 @@ export default function Page() {
    </section>
  );
 }
+//IO
@@ -1,19 +1,53 @@
-import BitacoraAlumno from "@/app/Components/Reportes/BitacoraSanciones/BitacoraAlumno";
-import BitacoraEquipo from "@/app/Components/Reportes/BitacoraSanciones/BitacoraEquipo";
-import BitacoraMesas from "@/app/Components/Reportes/BitacoraSanciones/BitacoraMesas";
-import Sanciones from "@/app/Components/Reportes/BitacoraSanciones/Sanciones";
+import BitacoraAlumno from "@/app/Components/BitacoraSanciones/BitacoraAlumno";
+import BitacoraEquipo from "@/app/Components/BitacoraSanciones/BitacoraEquipo";
+import BitacoraMesas from "@/app/Components/BitacoraSanciones/BitacoraMesas";
+import Sanciones from "@/app/Components/BitacoraSanciones/Sanciones";
 import Toggle from "@/app/Components/Global/Toggle/Toggle";
+import AlertBox from "@/app/Components/Global/AlertBox/AlertBox";
+import { GetStudent } from "@/app/lib/getStudent";
+
+export default async function Page(props: {
+  searchParams?: Promise<{
+    key?: string;
+    numAcount?: string;
+    success?: string;
+    error?: string;
+  }>;
+}) {
+  const params = await props.searchParams;
+  const key = params?.key && params.key ;
+  const numAcount = params?.numAcount ? params.numAcount : null;
+  const showSuccess = params?.success ? params.success : null;
+  const showError = params?.error ? params.error : null;
+
+    let student: any = null;
+  
+    if (numAcount) {
+      const result = await GetStudent(parseInt(numAcount));
+  
+      if (result.error) {
+      } else {
+        student = result;
+      }
+    }

-export default function Page() {
  return (
    <section className="containerSection">
+      {showError && (
+        <AlertBox key={Date.now()} message={showError} type="error" />
+      )}
+
+      {showSuccess && (
+        <AlertBox key={Date.now()} message={showSuccess} type="success" />
+      )}
+      
      <h2 className="title"> BITACORA Y SANCIONES </h2>

      <Toggle
-        defaultView="1"
+        defaultView={key}
        options={[
          {
-            key: "1",
+            key: "Equipo",
            label: "Bitacora equipo",
            content: (
              <>
@@ -22,7 +56,7 @@ export default function Page() {
            ),
          },
          {
-            key: "2",
+            key: "Alumno",
            label: "Bitacora alumno",
            content: (
              <>
@@ -31,7 +65,7 @@ export default function Page() {
            ),
          },
          {
-            key: "3",
+            key: "Mesas",
            label: "Bitacora mesas",
            content: (
              <>
@@ -40,11 +74,11 @@ export default function Page() {
            ),
          },
          {
-            key: "4",
+            key: "Sanciones",
            label: "Sanciones",
            content: (
              <>
-                <Sanciones />
+                <Sanciones student={student}/>
              </>
            ),
          },
@@ -1,8 +1,26 @@
 import ChangePassword from "@/app/Components/auth/ChangePassword/changePassword";
+import AlertBox from "@/app/Components/Global/AlertBox/AlertBox";
+
+export default async function Page(props: {
+  searchParams?: Promise<{
+    success?: string;
+    error?: string;
+  }>;
+}) {
+  const params = await props.searchParams;
+  const showSuccess = params?.success ? params.success : null;
+  const showError = params?.error ? params.error : null;

-export default function Page() {
  return (
    <section className="containerSection">
+      {showError && (
+        <AlertBox key={Date.now()} message={showError} type="error" />
+      )}
+
+      {showSuccess && (
+        <AlertBox key={Date.now()} message={showSuccess} type="success" />
+      )}
+      
      <h2 className="title"> Cambiar contraseña </h2>

      <ChangePassword />
@@ -3,19 +3,21 @@ import Receipt from "../../Components/Receipt/Receipt";
 import Toggle from "../../Components/Global/Toggle/Toggle";
 import Information from "../../Components/Global/Information/information";
 import AlertBox from "@/app/Components/Global/AlertBox/AlertBox";
-import Impressions from "@/app/Components/Servicios/Impressions/impressions";
+import Impressions from "@/app/Components/Impressions/impressions";
 import { GetStudent } from "@/app/lib/getStudent";

 import "@/app/globals.css";

 export default async function Page(props: {
  searchParams?: Promise<{
+    key: string;
    numAcount: string;
    success?: string;
    error?: string;
  }>;
 }) {
  const params = await props.searchParams;
+  const key = params?.key && params.key;
  const numAcount = params?.numAcount ? params.numAcount : null;
  const showSuccess = params?.success ? params.success : null;
  const showError = params?.error ? params.error : null;
@@ -34,9 +36,7 @@ export default async function Page(props: {
  return (
    <section className="containerSection">
      {showError && (
-        <>
-          <AlertBox key={Date.now()} message={showError} type="error" />
-        </>
+        <AlertBox key={Date.now()} message={showError} type="error" />
      )}

      {showSuccess && (
@@ -56,10 +56,10 @@ export default async function Page(props: {
          />

          <Toggle
-            defaultView="1"
+            defaultView={key}
            options={[
              {
-                key: "1",
+                key: "Recibo",
                label: "Recibo",
                content: (
                  <Receipt
@@ -69,20 +69,22 @@ export default async function Page(props: {
                ),
              },
              {
-                key: "2",
+                key: "B/N",
                label: "Impresiones B/N",
                content: (
                  <Impressions
+                    key={1}
                    costs={[{ value: 1 }, { value: 2 }]}
                    numAcount={student.id_cuenta}
                  />
                ),
              },
              {
-                key: "3",
+                key: "color",
                label: "Impresiones color",
                content: (
                  <Impressions
+                    key={2}
                    costs={[
                      { value: 4 },
                      { value: 5 },
@@ -98,10 +100,11 @@ export default async function Page(props: {
                ),
              },
              {
-                key: "4",
+                key: "Plotter",
                label: "Plotter",
                content: (
                  <Impressions
+                    key={3}
                    costs={[
                      { value: 15 },
                      { value: 18 },
@@ -126,10 +129,11 @@ export default async function Page(props: {
                ),
              },
              {
-                key: "5",
+                key: "Escaner",
                label: "Escaner",
                content: (
                  <Impressions
+                    key={4}
                    costs={[{ value: 1 }, { value: 2 }, { value: 5 }]}
                    numAcount={student.id_cuenta}
                  />
@@ -1,12 +1,32 @@
 import Toggle from "@/app/Components/Global/Toggle/Toggle";
-import ProgramSelector from "@/app/Components/Equipo/ProgramSelector/ProgramSelector";
-import Equipos from "@/app/Components/Equipo/Equipos/equipos";
+import Equipos from "@/app/Components/Equipos/equipos";
+import AlertBox from "@/app/Components/Global/AlertBox/AlertBox";
+import ProgramSelector from "@/app/Components/InformacionEquipos/ProgramSelector";

 import "./informacionequipo.css";

-export default function Page() {
+export default async function Page(props: {
+  searchParams?: Promise<{
+    machine: string;
+    success?: string;
+    error?: string;
+  }>;
+}) {
+  const params = await props.searchParams;
+  const machine = params?.machine ? params.machine : null;
+  const showSuccess = params?.success ? params.success : null;
+  const showError = params?.error ? params.error : null;
+
  return (
    <section className="containerSection">
+      {showError && (
+        <AlertBox key={Date.now()} message={showError} type="error" />
+      )}
+
+      {showSuccess && (
+        <AlertBox key={Date.now()} message={showSuccess} type="success" />
+      )}
+
      <h2 className="title"> INFORMACION DE EQUIPOS </h2>

      <Toggle
@@ -15,7 +35,7 @@ export default function Page() {
          {
            key: "1",
            label: "Equipos",
-            content: <Equipos key={2} />,
+            content: <Equipos />,
          },
          {
            key: "2",
@@ -44,3 +64,4 @@ export default function Page() {
    </section>
  );
 }
+//IO
@@ -3,10 +3,10 @@ import Information from "@/app/Components/Global/Information/information";
 import StepNavigator from "@/app/Components/Global/StepNavigator/StepNavigator";
 import Receipt from "@/app/Components/Receipt/Receipt";
 import Selection from "@/app/Components/Selection/Selection";
+import AlertBox from "@/app/Components/Global/AlertBox/AlertBox";
 import { GetStudent } from "@/app/lib/getStudent";

 import "./inscriptions.css";
-import AlertBox from "@/app/Components/Global/AlertBox/AlertBox";

 export default async function Page(props: {
  searchParams?: Promise<{
@@ -34,9 +34,7 @@ export default async function Page(props: {
  return (
    <section className="containerSection">
      {showError && (
-        <>
-          <AlertBox key={Date.now()} message={showError} type="error" />
-        </>
+        <AlertBox key={Date.now()} message={showError} type="error" />
      )}

      {showSuccess && (
@@ -1,5 +1,16 @@

-export default function Page() {
+export default async function Page(props: {
+  searchParams?: Promise<{
+    period: string;
+    success?: string;
+    error?: string;
+  }>;
+}) {
+  const params = await props.searchParams;
+  const period = params?.period ? params.period : null;
+  const showSuccess = params?.success ? params.success : null;
+  const showError = params?.error ? params.error : null;
+
  return (
    <section className='containerSection'>
      <h2 className='title'> INSCRITOS </h2>
@@ -1,15 +1,33 @@
-"use client";
-
-import EnviarMensaje from "@/app/Components/Equipo/EviarMensaje/EnviarMensaje";
+import EnviarMensaje from "@/app/Components/EviarMensaje/EnviarMensaje";
+import AlertBox from "@/app/Components/Global/AlertBox/AlertBox";
 import Toggle from "@/app/Components/Global/Toggle/Toggle";

-export default function Page() {
+export default async function Page(props: {
+  searchParams?: Promise<{
+    key:string;
+    success?: string;
+    error?: string;
+  }>;
+}) {
+  const params = await props.searchParams;
+  const key = params?.key && params.key ;
+  const showSuccess = params?.success ? params.success : null;
+  const showError = params?.error ? params.error : null;
+
  return (
    <section className="containerSection">
+      {showError && (
+        <AlertBox key={Date.now()} message={showError} type="error" />
+      )}
+
+      {showSuccess && (
+        <AlertBox key={Date.now()} message={showSuccess} type="success" />
+      )}
+
      <h2 className="title">Enviar mensaje</h2>

      <Toggle
-        defaultView="Equipo"
+        defaultView={key}
        options={[
          {
            key: "Equipo",
@@ -1,126 +1,16 @@
-"use client";
+import styles from "./Page.module.css";

-import { useState } from "react";
-import styles from "./Page.module.css"; // importamos el css
-
-export default function Page() {
-  const [machines] = useState([
-    {
-      ubicacion: "Laboratorio 1",
-      nombre: "PC-01",
-      plataforma: "Windows 10",
-      area: "Diseño",
-      disponible: true,
-    },
-    {
-      ubicacion: "Laboratorio 2",
-      nombre: "PC-15",
-      plataforma: "Linux",
-      area: "Programación",
-      disponible: false,
-    },
-    {
-      ubicacion: "Laboratorio 3",
-      nombre: "PC-23",
-      plataforma: "MacOS",
-      area: "Edición",
-      disponible: true,
-    },
-    {
-      ubicacion: "Laboratorio 3",
-      nombre: "PC-23",
-      plataforma: "MacOS",
-      area: "Edición",
-      disponible: true,
-    },
-    {
-      ubicacion: "Laboratorio 3",
-      nombre: "PC-23",
-      plataforma: "MacOS",
-      area: "Edición",
-      disponible: true,
-    },
-    {
-      ubicacion: "Laboratorio 3",
-      nombre: "PC-23",
-      plataforma: "MacOS",
-      area: "Edición",
-      disponible: true,
-    },
-    {
-      ubicacion: "Laboratorio 3",
-      nombre: "PC-23",
-      plataforma: "MacOS",
-      area: "Edición",
-      disponible: true,
-    },
-    {
-      ubicacion: "Laboratorio 3",
-      nombre: "PC-23",
-      plataforma: "MacOS",
-      area: "Edición",
-      disponible: true,
-    },
-    {
-      ubicacion: "Laboratorio 3",
-      nombre: "PC-23",
-      plataforma: "MacOS",
-      area: "Edición",
-      disponible: true,
-    },
-    {
-      ubicacion: "Laboratorio 3",
-      nombre: "PC-23",
-      plataforma: "MacOS",
-      area: "Edición",
-      disponible: true,
-    },
-    {
-      ubicacion: "Laboratorio 3",
-      nombre: "PC-23",
-      plataforma: "MacOS",
-      area: "Edición",
-      disponible: true,
-    },
-    {
-      ubicacion: "Laboratorio 3",
-      nombre: "PC-23",
-      plataforma: "MacOS",
-      area: "Edición",
-      disponible: true,
-    },
-    {
-      ubicacion: "Laboratorio 3",
-      nombre: "PC-23",
-      plataforma: "MacOS",
-      area: "Edición",
-      disponible: true,
-    }, {
-      ubicacion: "Laboratorio 3",
-      nombre: "PC-23",
-      plataforma: "MacOS",
-      area: "Edición",
-      disponible: true,
-    }, {
-      ubicacion: "Laboratorio 3",
-      nombre: "PC-23",
-      plataforma: "MacOS",
-      area: "Edición",
-      disponible: true,
-    }, {
-      ubicacion: "Laboratorio 3",
-      nombre: "PC-23",
-      plataforma: "MacOS",
-      area: "Edición",
-      disponible: true,
-    }, {
-      ubicacion: "Laboratorio 3",
-      nombre: "PC-23",
-      plataforma: "MacOS",
-      area: "Edición",
-      disponible: true,
-    },
-  ]);
+export default async function Page(props: {
+  searchParams?: Promise<{
+    numAcount: string;
+    success?: string;
+    error?: string;
+  }>;
+}) {
+  const params = await props.searchParams;
+  const numAcount = params?.numAcount ? params.numAcount : null;
+  const showSuccess = params?.success ? params.success : null;
+  const showError = params?.error ? params.error : null;

  return (
    <section className='containerSection'>
@@ -144,7 +34,7 @@ export default function Page() {
            </tr>
          </thead>
          <tbody>
-            {machines.map((machine, index) => (
+            {/* {machines.map((machine, index) => (
              <tr key={index}>
                <td>{machine.ubicacion}</td>
                <td>{machine.nombre}</td>
@@ -154,7 +44,7 @@ export default function Page() {
                  {machine.disponible ? "si" : "no"}
                </td>
              </tr>
-            ))}
+            ))} */}
          </tbody>
        </table>
      </div>
@@ -1,15 +1,26 @@
-"use client";
-
 import SearchUser from "@/app/Components/Global/SearchUser/searchUser";
 import QuitarSancion from "@/app/Components/QuitarSancion/QuitarSancion";

-export default function Page() {
+export default async function Page(props: {
+  searchParams?: Promise<{
+    numAcount: string;
+    success?: string;
+    error?: string;
+  }>;
+}) {
+  const params = await props.searchParams;
+  const numAcount = params?.numAcount ? params.numAcount : null;
+  const showSuccess = params?.success ? params.success : null;
+  const showError = params?.error ? params.error : null;
+
  return (
+    <>
+    <h2 className="title"> Quitar Sanciones </h2>
    <div style={{ display: "flex", gap: "1rem", flexDirection: "column" }}>
-      <h2 className="title"> Quitar Sanciones </h2>
-      <SearchUser urlBase="QuitarSancion" value={"2"} />
+      <SearchUser urlBase="QuitarSancion" value={numAcount} />
      <QuitarSancion />
    </div>
+    </>
  );
 }
 //IO
@@ -1,9 +1,10 @@
 "use client";

-import { useState } from "react";
-import styles from "./Page.module.css"; // importamos el css
+import styles from "./Page.module.css";
 import Toggle from "@/app/Components/Global/Toggle/Toggle";
-import SearchDateBetween from "@/app/Components/Reportes/SearchDateBetween/SearchDateBetween";
+import SearchDateBetween from "@/app/Components/SearchDateBetween/SearchDateBetween";
+
+import { useState } from "react";

 export default function Page() {
  const [reportes] = useState([
@@ -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;
@@ -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;
@@ -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 />
@@ -0,0 +1,20 @@
+import Information from "../Global/Information/information";
+import SearchUser from "../Global/SearchUser/searchUser";
+
+interface Student {
+  id_cuenta: string ;
+  nombre: string ;
+}
+
+export default async function Sanciones(props: { student?: Student }) {
+  const idCuenta = props?.student?.id_cuenta ?? null;
+
+  return (
+    <>
+      <SearchUser urlBase="BitacoraSanciones" value={idCuenta} />
+      {props.student && (
+        <Information NoCuenta={props.student.id_cuenta} Nombre={props.student.nombre} />
+      )}
+    </>
+  );
+}
@@ -1,4 +1,5 @@
 import { useState } from "react";
+
 import styles from "./Page.module.css";

 interface alumno_sancion {
@@ -20,9 +21,8 @@ interface sancion {
  duracion: number;
 }

-export default function UbicacionEquipo() {
+export default function UbicacionEquipo(sanciones:alumno_sancion[]) {
  const [ubicacionEquipo, setUbicacionEquipo] = useState("");
-  const [sanciones, setSanciones] = useState<>([]);

  return (
    <>
@@ -59,13 +59,12 @@ export default function UbicacionEquipo() {
          </thead>
          <tbody>
            {sanciones &&
-              sanciones.map((sancion, index) => (
+              sanciones.map((s, index) => (
                <tr key={index}>
-                  <td>{sancion.id_sancion}</td>
-                  <td>{sancion.sancion}</td>
-                  <td>{sancion.fecha_sancion}</td>
-                  <td>{sancion.duracion}</td>
-                  <td>{sancion.utilizar_hasta}</td>
+                  <td>{s.sancion.id_sancion}</td>
+                  <td>{s.sancion.sancion}</td>
+                  <td>{s.fecha_inicio}</td>
+                  <td>{s.sancion.duracion}</td>
                </tr>
              ))}
          </tbody>
@@ -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);
@@ -1,5 +1,7 @@
 "use client";

+import { useSearchParams } from "next/navigation";
+import { useRouter } from "next/navigation";
 import { useState, ReactNode } from "react";

 interface ToggleOption {
@@ -14,8 +16,19 @@ interface ToggleProps {
 }

 export default function Toggle({ options, defaultView }: ToggleProps) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
  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(`${window.location.pathname}?${params.toString()}`);
+  };
+  
  return (
    <section className="toggleSection">
      <div className="toggleGroup">
@@ -23,7 +36,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 +49,4 @@ export default function Toggle({ options, defaultView }: ToggleProps) {
    </section>
  );
 }
+//IO
@@ -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;
 }
@@ -110,10 +108,11 @@ function Impressions({ costs, numAcount }: ImpressionsProps) {
          />
        </div>

-        <div className="groupLabel">
+        <div className="groupInput">
          <label className="label">
-            Total: {pages && cost && `$${parseInt(cost) * parseInt(pages)}.00`}
+            Total: 
          </label>
+          <label style={{width:"100%", minWidth:"200px", maxWidth:"500px"}}>{pages && cost && `$${parseInt(cost) * parseInt(pages)}.00`}</label>
        </div>

        <div className="containerButton">
@@ -12,7 +12,6 @@ function ProgramSelector({ titulo, opcion }: DatosEquipo) {
  return (
    <div>
      <form className="form-container">
-        {/* Label dinámico con el título que recibimos */}
        <label>{titulo}</label>

        {/* Renderizamos UN solo <select> con varias <option> */}
@@ -1,5 +1,6 @@
 "use client";
 import { useState } from "react";
+
 import styles from "./Page.module.css";

 interface quitarSanciones {
@@ -1,49 +0,0 @@
-import SearchUser from "../../Global/SearchUser/searchUser";
-import Information from "../../Global/Information/information";
-import AlertBox from "../../Global/AlertBox/AlertBox";
-import { GetStudent } from "@/app/lib/getStudent";
-
-export default async function Sanciones(props: {
-  searchParams?: Promise<{
-    numAcount: string;
-    success?: string;
-    error?: string;
-  }>;
-}) {
-  const params = await props.searchParams;
-  const numAcount = params?.numAcount ? params.numAcount : null;
-  const showSuccess = params?.success ? params.success : null;
-  let showError = params?.error ? params.error : null;
-
-  let student: any = null;
-
-  if (numAcount) {
-    const result = await GetStudent(parseInt(numAcount));
-
-    if (result.error) {
-      showError = "alumno no encontrado";
-    } else {
-      student = result;
-    }
-  }
-
-  return (
-    <>
-      {showError && (
-        <>
-          <AlertBox key={Date.now()} message={showError} type="error" />
-        </>
-      )}
-
-      {showSuccess && (
-        <AlertBox key={Date.now()} message={showSuccess} type="success" />
-      )}
-
-      <SearchUser urlBase="BitacoraSanciones" value={numAcount} />
-
-      {student && (
-        <Information NoCuenta={student.id_cuenta} Nombre={student.nombre} />
-      )}
-    </>
-  );
-}
@@ -1,31 +1,35 @@
 import Image from "next/image";
-import header from"./Header.module.css";
+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>
-    );
+  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
+//IO
@@ -1,33 +0,0 @@
-
-import { NextResponse } from "next/server";
-
-export async function POST(req: Request) {
-    try {
-        const { user, password } = await req.json();
-
-        const res = await fetch(`${process.env.API_URL}/login`, {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ user, password }),
-        });
-
-        if (!res.ok) {
-            return NextResponse.json({ error: "Credenciales incorrectas" }, { status: 401 });
-        }
-
-        const data = await res.json();
-
-        const response = NextResponse.json({ success: true });
-        response.cookies.set("token", data.token, {
-            httpOnly: true,
-            secure: true,
-            path: "/",
-            maxAge: 60 * 60 * 24,
-        });
-
-        return response;
-    } catch (err) {
-        return NextResponse.json({ error: "Error en el servidor" }, { status: 500 });
-    }
-}
-//IO
@@ -167,12 +167,21 @@ select {
  width: 100%;
  min-width: 200px;
  max-width: 500px;
-  padding: 1rem;
+  padding: 0.75rem;
  border: 1px solid #cfcfcf;
  background-color: #fff;
  border-radius: 4px;
  font-size: 2rem;
  color: black;
+  height: 4rem;
+}
+
+input:focus,
+select:focus {
+  background-color: #f9f9f9;
+  outline:none;
+    box-shadow: 0px 0px 8px 2px rgba(0, 62, 121, 0.5);
+  transition: all 0.2s ease-in-out;
 }

 label {
@@ -186,6 +195,7 @@ button {
  padding: 1rem 1.75rem;
  border-radius: 4px;
  cursor: pointer;
+  height: 4rem;
 }

 .groupInput {
@@ -278,9 +288,10 @@ a {
  top: 0;
  left: 0;
  width: 100%;
-  font-size: 2.5rem;
+  font-size: 3rem;
  font-weight: bold;
  text-align: start;
+  color:#bd8c01;
  border-bottom: 1px solid #cfcfcf;
  margin-bottom: 10px;
 }
@@ -426,10 +437,6 @@ table tr {
 }

@media (max-width: 1330px) {
-  .mainContainer {
-    grid-template-rows: 60px 1fr;
-  }
-
  .centerGrid {
    display: flex !important;
    justify-content: center;
@@ -26,7 +26,7 @@ export default function RootLayout({
 }>) {
  return (
    <html lang="es">
-      <body className={poppins.variable}>
+      <body className={poppins.variable} suppressHydrationWarning>
        <Header />
        <main>{children}</main>
        <Footer />