Creacion de nuevo componente y arreglos de botones

app/(private)/BitacoraSanciones/page.tsx

@@ -3,6 +3,7 @@ import BitacoraEquipo from "@/app/Components/BitacoraSanciones/BitacoraEquipo";
 import BitacoraMesas from "@/app/Components/BitacoraSanciones/BitacoraMesas";
 import Sanciones from "@/app/Components/BitacoraSanciones/Sanciones";
 import SearchUser from "@/app/Components/Global/SearchUser/searchUser";
+import SearchUserWithDate from "@/app/Components/Global/SearchUser/SearchUserWithDate";
 import Toggle from "@/app/Components/Global/Toggle/Toggle";
 import { GetStudent } from "@/app/lib/getStudent";
 
@@ -13,23 +14,22 @@ export default async function Page(props: {
   }>;
 }) {
   const params = await props.searchParams;
-  const key = params?.key && params.key ;
+  const key = params?.key && params.key;
   const numAcount = params?.numAcount ? params.numAcount : null;
 
-    let student: any = null;
-  
-    if (numAcount) {
-      const result = await GetStudent(parseInt(numAcount));
-  
-      if (result.error) {
-      } else {
-        student = result;
-      }
+  let student: any = null;
+
+  if (numAcount) {
+    const result = await GetStudent(parseInt(numAcount));
+
+    if (result.error) {
+    } else {
+      student = result;
     }
+  }
 
   return (
     <section className="containerSection">
-      
       <h2 className="title"> BITACORA Y SANCIONES </h2>
 
       <Toggle
@@ -49,7 +49,7 @@ export default async function Page(props: {
             label: "Bitacora alumno",
             content: (
               <>
-              <SearchUser value={numAcount}/>
+                <SearchUserWithDate value={numAcount} />
                 <BitacoraAlumno />
               </>
             ),
@@ -68,7 +68,7 @@ export default async function Page(props: {
             label: "Sanciones",
             content: (
               <>
-                <Sanciones student={student}/>
+                <Sanciones student={student} />
               </>
             ),
           },

app/(private)/Impresiones/page.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import SearchUser from "../../Components/Global/SearchUser/searchUser";
 import Receipt from "../../Components/Receipt/Receipt";
 import Toggle from "../../Components/Global/Toggle/Toggle";
@@ -8,6 +10,7 @@ import ShowError from "@/app/Components/Global/ShowError";
 import { GetStudent } from "@/app/lib/getStudent";
 
 import "@/app/globals.css";
+import toast from "react-hot-toast";
 
 export default async function Page(props: {
   searchParams?: Promise<{
@@ -26,7 +29,7 @@ export default async function Page(props: {
     const result = await GetStudent(parseInt(numAcount));
 
     if (result.error) {
-      errorMessage = `${result.error}`;
+      toast.error("This didn't work.");
     } else {
       student = result as Student;
     }
@@ -34,7 +37,6 @@ export default async function Page(props: {
 
   return (
     <section className="containerSection">
-
       {errorMessage && <ShowError key={Date.now()} message={errorMessage} />}
 
       <h2 className="title">IMPRESIONES Y PLOTEO</h2>

app/Components/BitacoraSanciones/BitacoraAlumno.tsx

@@ -3,6 +3,7 @@ import SearchDate from "../SearchDate/SearchDate";
 import { useState } from "react";
 
 import styles from "./Page.module.css";
+import SearchUserWithDate from "../Global/SearchUser/SearchUserWithDate";
 
 interface alumnos {
   tiempo_entrada: string;
@@ -14,8 +15,7 @@ function BitacoraAlumno() {
   const [alumnos, setAlumnos] = useState<alumnos[]>([]);
   return (
     <>
-      <SearchDate />
-      <div className={styles.tableContainer} style={{marginTop:"1rem"}}>
+      <div className={styles.tableContainer} style={{ marginTop: "1rem" }}>
         <table className={styles.machineTable}>
           <thead>
             <tr>

app/Components/BitacoraSanciones/BitacoraEquipo.tsx

@@ -16,7 +16,6 @@ function BitacoraEquipo() {
   const [ubicacion_equipo, setUbicacionEquipo] = useState("");
   return (
     <>
-      <SearchDate />
       <form className="containerForm">
         <label className="label">Ubicacion de equipo</label>
 
@@ -28,12 +27,10 @@ function BitacoraEquipo() {
             <option value="">-- Selecciona un equipo --</option>
             <option value="255">Equipo 255</option>
           </select>
-          <button className="button buttonSearch" type="submit">
-            Asignar
-          </button>
         </div>
+        <SearchDate />
       </form>
-      <div className={styles.tableContainer} style={{marginTop:"1rem"}}>
+      <div className={styles.tableContainer} style={{ marginTop: "1rem" }}>
         <table className={styles.machineTable}>
           <thead>
             <tr>

app/Components/Global/SearchUser/SearchUserWithDate.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
+import SearchDate from "../../SearchDate/SearchDate";
+
+interface urlProp {
+  value: string | null;
+}
+
+function SearchUserWithDate(props: urlProp) {
+  const [numAcount, setnumAcount] = useState("");
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  useEffect(() => {
+    if (props.value) {
+      setnumAcount(props.value);
+    }
+  }, [props.value]);
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const params = new URLSearchParams(searchParams.toString());
+    if (numAcount) {
+      params.set("numAcount", `${numAcount}`);
+      router.push(`${pathname}?${params.toString()}`);
+    }
+  };
+
+  return (
+    <>
+      <form className="containerForm" onSubmit={handleSubmit}>
+        <label className="label">No.Cuenta</label>
+        <div className="groupInput">
+          <input
+            type="text"
+            value={numAcount}
+            onChange={(e) => {
+              const value = e.target.value;
+              if (/^\d*$/.test(value) && value.length <= 9) {
+                setnumAcount(value);
+              }
+            }}
+            placeholder="Coloca un número de cuenta..."
+            inputMode="numeric"
+            pattern="[0-9]*"
+          />
+          <SearchDate />
+        </div>
+      </form>
+    </>
+  );
+}
+
+export default SearchUserWithDate;
+//IO