modified table and fixed chow numTable

app/(private)/AsignacionMesas/TableMesas.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import styles from "../Monitor/Page.module.css";
+import axios from "axios";
+import Cookies from "js-cookie";
+
+type Mesa = {
+  id_mesa: number;
+  ocupado: number;
+};
+
+export default function TableMesas() {
+  const [mesas, setMesas] = useState<Mesa[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const token = Cookies.get("token");
+  const headers = { Authorization: `Bearer ${token}` };
+
+  const fetchMesas = async () => {
+    try {
+      const res = await axios.get(
+        `${process.env.NEXT_PUBLIC_API_URL}/mesa/usoWhitout`,
+        { headers },
+      );
+
+      setMesas(res.data);
+    } catch (error) {
+      console.error("Error cargando mesas:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchMesas();
+  }, []);
+
+  if (loading) {
+    return <p>Cargando mesas...</p>;
+  }
+
+  return (
+    <div className={styles.tableContainer}>
+      <table className={styles.machineTable}>
+        <thead>
+          <tr>
+            <th>ID Mesa</th>
+          </tr>
+        </thead>
+
+        <tbody>
+          {mesas.map((mesa) => (
+            <tr key={mesa.id_mesa} className={!mesa.ocupado ? '' : styles.ocupado}>
+              <td>{mesa.id_mesa}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

app/(private)/AsignacionMesas/page.tsx

@@ -4,13 +4,13 @@ import Information from "@/app/Components/Global/Information/information";
 import SearchUser from "@/app/Components/Global/SearchUser/searchUser";
 import ShowError from "@/app/Components/Global/ShowError";
 import Toggle from "@/app/Components/Global/Toggle/Toggle";
+import TableMesas from "./TableMesas";
 
 import { GetRegisterStudent } from "@/app/lib/getRegisterStudent";
 import { GetRegisterStudentSancion } from "@/app/lib/GetRegisterStudentSancion";
-import TableTable from "../Monitor/TableTable";
+import { Metadata } from "next";
 
 import './asignacion.css'
-import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "AsignacionMesas",
@@ -20,7 +20,7 @@ export default async function Page(props: {
   searchParams?: Promise<{
     key?: string;
     numAcount?: string;
-    table?: number
+    table?: string
   }>;
 }) {
   const params = await props.searchParams;
@@ -100,7 +100,7 @@ export default async function Page(props: {
           ]}
         />
         <div className="tableTable">
-          <TableTable />
+          <TableMesas />
         </div>
       </div>
     </section>

app/(private)/Periodo/page.tsx

@@ -210,4 +210,5 @@ export default function PeriodoPage() {
       </div>
     </div>
   );
-}
+}
+//IO

app/Components/CheckBoxMesa.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState } from "react";
 import { getTableByCount } from "../lib/getTableByCount";
 import { envConfig } from "../lib/config";
 import { getMesaByCount } from "../lib/getMesaByCount";
-import { useRouter } from "next/navigation";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 
 import SearchUser from "./Global/SearchUser/searchUser";
 import Information from "./Global/Information/information";
@@ -15,7 +15,7 @@ import Cookies from "js-cookie";
 
 interface props {
   numAcount: string | null;
-  table: number | null;
+  table: string | null;
 }
 
 export default function CheckBoxMesa({ numAcount, table }: props) {
@@ -31,6 +31,8 @@ export default function CheckBoxMesa({ numAcount, table }: props) {
   const bitacora = modo === "Cuenta" ? bitacoraCuenta : bitacoraMesa;
 
   const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
 
   const fetchByCuenta = async (idCuenta: number) => {
     const result = await getMesaByCount(idCuenta);
@@ -66,7 +68,7 @@ export default function CheckBoxMesa({ numAcount, table }: props) {
 
   useEffect(() => {
     if (modo !== "Mesa" || !table) return;
-    const idEquipo = table;
+    const idEquipo = parseInt(table);
     if (isNaN(idEquipo)) return;
 
     fetchByMesa(idEquipo);
@@ -130,15 +132,22 @@ export default function CheckBoxMesa({ numAcount, table }: props) {
         icon: "success",
       });
 
+      const params = new URLSearchParams(searchParams.toString());
+
       if (modo === "Cuenta" && numAcount) {
         fetchByCuenta(parseInt(numAcount));
+        params.delete("numAcount");
+        router.push(`${pathname}?${params.toString()}`);
       }
 
       if (modo === "Mesa" && table) {
-        fetchByMesa(table);
+        fetchByMesa(parseInt(table));
+        params.delete("table");
+        router.push(`${pathname}?${params.toString()}`);
       }
 
       router.refresh();
+
       setBitacoraMesa(null);
       setBitacoraCuenta(null);
     } catch (error) {
@@ -204,7 +213,7 @@ export default function CheckBoxMesa({ numAcount, table }: props) {
       }
       {modo === "Mesa" &&
         <>
-          <SearchMesa />
+          <SearchMesa value={table ?? null}/>
           <h2 style={{ marginTop: "10px" }}>{errorMesa}</h2>
 
           {bitacoraMesa && tiempoRestante !== "agotado" && (

app/Components/SearchMesa.tsx

@@ -1,15 +1,28 @@
 "use client";
 
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
+interface urlProp {
+  value: string | null;
+}
 
-export default function SearchMesa() {
+export default function SearchMesa(props: urlProp) {
   const [inputValue, setInputValue] = useState("");
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
 
+    useEffect(() => {
+      if (props.value) {
+        setInputValue(props.value);
+      }
+  
+      if(props.value===null){
+        setInputValue("")
+      }
+    }, [props.value]);
+
   const buscar = (e: React.FormEvent) => {
     e.preventDefault();
     const params = new URLSearchParams(searchParams.toString());