IO420
101 lines
2.8 KiB
TypeScript
101 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import styles from "./Page.module.css";
|
|
import Toggle from "@/app/Components/Global/Toggle/Toggle";
|
|
import SearchDateBetween from "@/app/Components/SearchDateBetween/SearchDateBetween";
|
|
|
|
import { useState } from "react";
|
|
|
|
export default function Page() {
|
|
const [reportes] = useState([
|
|
{
|
|
Servicio: "Plotter",
|
|
Total: "$1440.00",
|
|
},
|
|
]);
|
|
|
|
const [recibos] = useState([
|
|
{
|
|
folio_recibo: "100255",
|
|
monto: "40.00",
|
|
fecha_recibo: "10/10/2025",
|
|
fecha_registro: "10/10/2025 05:32:20 pm",
|
|
usuario: "modulo1",
|
|
},
|
|
]);
|
|
|
|
return (
|
|
<section className="containerSection">
|
|
<h2 className="title"> REPORTES </h2>
|
|
|
|
<Toggle
|
|
defaultView="1"
|
|
options={[
|
|
{
|
|
key: "1",
|
|
label: "Por recibo",
|
|
content: (
|
|
<>
|
|
<SearchDateBetween />
|
|
<div className={styles.tableContainer}>
|
|
<table className={styles.machineTable}>
|
|
<thead>
|
|
<tr>
|
|
<th>Folio Recibo</th>
|
|
<th>Monto</th>
|
|
<th>Fecha Recibo</th>
|
|
<th>Fecha Registro</th>
|
|
<th>Usuario</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{recibos.map((recibo, index) => (
|
|
<tr key={index}>
|
|
<td>{recibo.folio_recibo}</td>
|
|
<td>{recibo.monto}</td>
|
|
<td>{recibo.fecha_recibo}</td>
|
|
<td>{recibo.fecha_registro}</td>
|
|
<td>{recibo.usuario}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</>
|
|
),
|
|
},
|
|
|
|
{
|
|
key: "2",
|
|
label: "Por Servicio",
|
|
content: (
|
|
<>
|
|
<SearchDateBetween />
|
|
<div className={styles.tableContainer}>
|
|
<table className={styles.machineTable}>
|
|
<thead>
|
|
<tr>
|
|
<th>Servicio</th>
|
|
<th>Total</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{reportes.map((reporte, index) => (
|
|
<tr key={index}>
|
|
<td>{reporte.Servicio}</td>
|
|
<td>{reporte.Total}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</>
|
|
),
|
|
},
|
|
]}
|
|
/>
|
|
</section>
|
|
);
|
|
}
|
|
//IO
|