SearchMesas

app/(private)/AsignacionMesas/page.tsx

@@ -103,7 +103,7 @@ export default async function Page(props: {
           },
           {
             key: "Liberar",
-            label: "Cancelar mesa",
+            label: "Liberar mesa",
             content: <CheckBoxMesa numAcount={numAcount} />,
           },
         ]}

app/Components/CheckBoxMesa.tsx

@@ -3,6 +3,7 @@
 import { useState } from "react";
 import SearchUser from "./Global/SearchUser/searchUser";
 import SearchBoxEquipo from "./SearchEquipo";
+import SearchMesa from "./SearchMesa";
 
 export default function CheckBoxMesa({
   numAcount,
@@ -38,7 +39,7 @@ export default function CheckBoxMesa({
       </div>
 
       {modo === "Cuenta" && <SearchUser value={numAcount ?? null} />}
-      {modo === "Mesa" && <SearchBoxEquipo />}
+      {modo === "Mesa" && <SearchMesa />}
     </>
   );
 }

app/Components/Global/SearchUser/searchUserTable.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import axios from "axios";
+
+interface SearchUserProps {
+  value?: string | null;
+}
+
+type Alumno = {
+  nombre: string;
+  carrera: string;
+  mesaActiva: boolean;
+};
+
+export default function SearchUserTable({ value }: SearchUserProps) {
+  const [numAcount, setNumAcount] = useState(value || "");
+  const [alumno, setAlumno] = useState<Alumno | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Si el prop cambia, actualizar el input
+  useEffect(() => {
+    if (value) setNumAcount(value);
+  }, [value]);
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    if (!numAcount) {
+      setError("Ingresa un número de cuenta");
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+    setAlumno(null);
+
+    try {
+      // Llamada a la API con Axios
+      const { data } = await axios.get<Alumno>(`/api/alumnos/${numAcount}`);
+      setAlumno(data);
+    } catch (err: any) {
+      setAlumno(null);
+      setError(err.response?.data?.message || "Alumno no encontrado");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="search-user">
+      <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;
+              // Solo números y máximo 9 dígitos
+              if (/^\d*$/.test(value) && value.length <= 9) {
+                setNumAcount(value);
+              }
+            }}
+            placeholder="Coloca un número de cuenta..."
+            inputMode="numeric"
+            pattern="[0-9]*"
+          />
+          <button className="button buttonSearch" type="submit" disabled={loading}>
+            {loading ? "Buscando..." : "Buscar"}
+          </button>
+        </div>
+      </form>
+
+      {error && <p style={{ color: "red", marginTop: "10px" }}>{error}</p>}
+
+      {alumno && (
+        <div className="alumno-info" style={{ marginTop: "15px" }}>
+          <p><strong>Nombre:</strong> {alumno.nombre}</p>
+          <p><strong>Carrera:</strong> {alumno.carrera}</p>
+          <p><strong>Mesa activada:</strong> {alumno.mesaActiva ? "Sí" : "No"}</p>
+        </div>
+      )}
+    </div>
+  );
+}

app/Components/Mesas

@@ -0,0 +1,22 @@
+"use client";
+import axios from 'axios';
+import { useEffect } from 'react';
+
+interface Props {
+  id_cuenta: number;
+}
+
+export function Mesas({ id_cuenta }: Props) {
+
+  useEffect(() => {
+    if (!id_cuenta) return;
+
+    axios.get(`/cuenta/${id_cuenta}`)
+      .then(res => {
+        console.log('Mesas:', res.data);
+      })
+      .catch(err => console.error(err));
+  }, [id_cuenta]);
+
+  return <div> </div>Buscando mesas para cuenta {id_cuenta}...</div>;
+}

app/Components/SearchMesa.tsx

@@ -0,0 +1,83 @@
+"use client";
+import axios from 'axios';
+import { useEffect, useState } from 'react';
+
+interface Mesa {
+  id_mesa: number;
+  nombre?: string;
+}
+
+interface Props {
+  id_cuenta: number;
+}
+
+function Mesas({ id_cuenta }: Props) {
+  const [mesas, setMesas] = useState<Mesa[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (!id_cuenta) return;
+
+    setLoading(true);
+
+    axios.get(`/cuenta/${id_cuenta}`)
+      .then(res => {
+        setMesas(res.data);
+      })
+      .catch(err => console.error(err))
+      .finally(() => setLoading(false));
+  }, [id_cuenta]);
+
+  if (loading) return <p>Cargando mesas...</p>;
+
+  return (
+    <div>
+      <h3>Mesas asignadas</h3>
+
+      {mesas.length === 0 ? (
+        <p>No hay mesas</p>
+      ) : (
+        <ul>
+          {mesas.map(mesa => (
+            <li key={mesa.id_mesa}>
+              Mesa {mesa.id_mesa} {mesa.nombre && `- ${mesa.nombre}`}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+export default function SearchMesa() {
+  const [inputValue, setInputValue] = useState('');
+  const [idCuenta, setIdCuenta] = useState<number | null>(null);
+
+  const buscar = (e: React.FormEvent) => {
+    e.preventDefault();
+    setIdCuenta(Number(inputValue));
+  };
+
+  return (
+    <>
+      <form className="containerForm" onSubmit={buscar}>
+        <label>Numero de mesa</label>
+
+        <div className="groupInput">
+          <input
+            type="number"
+            placeholder="Coloca el numero de mesa"
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+          />
+
+          <button type="submit" className="button buttonSearch">
+            Buscar
+          </button>
+        </div>
+      </form>
+
+      {idCuenta && <Mesas id_cuenta={idCuenta} />}
+    </>
+  );
+}

tsconfig.json

@@ -15,7 +15,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {