Files
front-AT/app/Components/BitacoraSanciones/BitacoraMesas.tsx
T

80 lines
2.0 KiB
TypeScript

"use client";
import { useEffect, useState } from "react";
import { useSearchParams } from "next/navigation";
import { envConfig } from "@/app/lib/config";
import SearchDate from "../SearchDate/SearchDate";
import axios from "axios";
import Cookies from "js-cookie";
interface Tables {
no_mesa: number;
no_cuenta: number;
hora_entrada: string;
tiempo_asignado: number;
hora_salida: string;
}
export default function BitacoraMesas() {
const [tables, setTables] = useState<Tables[]>([]);
const searchParams = useSearchParams();
const date = searchParams.get("date");
const token = Cookies.get("token");
const headers = { Authorization: `Bearer ${token}` };
useEffect(() => {
if (!date) return;
axios.post(`${envConfig.apiUrl}/bitacora-mesa/mesas-por-dia`, {
fecha: date,
}, { headers })
.then(res => {
setTables(res.data);
})
.catch(err => {
console.error(err);
});
}, [date]);
return (
<>
<SearchDate />
<div>
<table>
<thead>
<tr>
<th>Mesa</th>
<th>Cuenta</th>
<th>Hora Entrada</th>
<th>Tiempo Asignado</th>
<th>Hora Salida</th>
</tr>
</thead>
<tbody>
{tables.length === 0 ? (
<tr>
<td colSpan={5} style={{ textAlign: "center" }}>
No hubo mesas utilizadas en esta fecha
</td>
</tr>
) : (
tables.map((table, index) => (
<tr key={index}>
<td>{table.no_mesa}</td>
<td>{table.no_cuenta}</td>
<td>{new Date(table.hora_entrada).toLocaleString()}</td>
<td>{table.tiempo_asignado}</td>
<td>{new Date(table.hora_salida).toLocaleString()}</td>
</tr>
))
)}
</tbody>
</table>
</div>
</>
);
}
//IO