file restructuring

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

@@ -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} />
+      )}
+    </>
+  );
+}

app/Components/BitacoraSanciones/UbicacionEquipo.tsx

@@ -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>

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/Toggle/Toggle.tsx

@@ -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

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;
 }
@@ -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">

app/Components/InformacionEquipos/ProgramSelector.tsx

@@ -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> */}

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/Reportes/BitacoraSanciones/Sanciones.tsx

@@ -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} />
-      )}
-    </>
-  );
-}

app/Components/layout/Header/Header.tsx

@@ -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