80 lines
2.1 KiB
TypeScript
80 lines
2.1 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 style={{ maxHeight: "400px", overflowY: "auto", border: "1px solid #ccc" }}>
|
|
<table style={{ width: "100%", borderCollapse: "collapse" }}>
|
|
<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>
|
|
</>
|
|
);
|
|
}
|