fixed SearchDate
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
"use client";
|
"use client";
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
import { SetStateAction, useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { envConfig } from "../lib/config";
|
import { envConfig } from "../lib/config";
|
||||||
|
|
||||||
interface mesas {
|
interface mesas {
|
||||||
|
|||||||
@@ -11,7 +11,7 @@ interface Recibo {
|
|||||||
fecha_registro: string;
|
fecha_registro: string;
|
||||||
monto: string;
|
monto: string;
|
||||||
user: {
|
user: {
|
||||||
nombre: string;
|
usuario: string;
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -72,7 +72,7 @@ function PorRecibos({ desde, hasta }: Props) {
|
|||||||
<tbody>
|
<tbody>
|
||||||
{!loading && recibos.length === 0 && (
|
{!loading && recibos.length === 0 && (
|
||||||
<tr>
|
<tr>
|
||||||
<td colSpan={2}>No hay recibos en este rango</td>
|
<td colSpan={5}>No hay recibos en este rango</td>
|
||||||
</tr>
|
</tr>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
@@ -82,7 +82,7 @@ function PorRecibos({ desde, hasta }: Props) {
|
|||||||
<td>${Number(recibo.monto).toFixed(2)}</td>
|
<td>${Number(recibo.monto).toFixed(2)}</td>
|
||||||
<td>{recibo.fecha_recibo}</td>
|
<td>{recibo.fecha_recibo}</td>
|
||||||
<td>{recibo.fecha_registro}</td>
|
<td>{recibo.fecha_registro}</td>
|
||||||
<td>{recibo.user.nombre}</td>
|
<td>{recibo.user.usuario}</td>
|
||||||
</tr>
|
</tr>
|
||||||
))}
|
))}
|
||||||
</tbody>
|
</tbody>
|
||||||
|
|||||||
@@ -0,0 +1,11 @@
|
|||||||
|
.containerDate{
|
||||||
|
gap: 10px;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
.alingDate{
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
gap: 10px;
|
||||||
|
|
||||||
|
}
|
||||||
@@ -1,14 +1,15 @@
|
|||||||
'use client';
|
"use client";
|
||||||
|
|
||||||
import { useState } from 'react';
|
import { useState } from "react";
|
||||||
|
|
||||||
|
import "./SearchDate.css";
|
||||||
interface Props {
|
interface Props {
|
||||||
onSearch: (desde: string, hasta: string) => void;
|
onSearch: (desde: string, hasta: string) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
function SearchDateBetween({ onSearch }: Props) {
|
function SearchDateBetween({ onSearch }: Props) {
|
||||||
const [startDate, setStartDate] = useState('');
|
const [startDate, setStartDate] = useState("");
|
||||||
const [endDate, setEndDate] = useState('');
|
const [endDate, setEndDate] = useState("");
|
||||||
|
|
||||||
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
@@ -17,26 +18,37 @@ function SearchDateBetween({ onSearch }: Props) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<form className="containerForm" onSubmit={handleSubmit}>
|
<form className="containerForm containerDate" onSubmit={handleSubmit}>
|
||||||
<label className="label">Desde</label>
|
<div className="alingDate">
|
||||||
<div className="groupInput">
|
<div className="">
|
||||||
<input
|
<label className="label">Desde</label>
|
||||||
type="date"
|
<div className="groupInput">
|
||||||
value={startDate}
|
<input
|
||||||
onChange={(e) => setStartDate(e.target.value)}
|
type="date"
|
||||||
/>
|
value={startDate}
|
||||||
|
onChange={(e) => setStartDate(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="label">Hasta</label>
|
||||||
|
|
||||||
|
<div className="groupInput">
|
||||||
|
<input
|
||||||
|
type="date"
|
||||||
|
value={endDate}
|
||||||
|
onChange={(e) => setEndDate(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<label className="label">Hasta</label>
|
<button
|
||||||
<div className="groupInput">
|
className="button buttonSearch"
|
||||||
<input
|
type="submit"
|
||||||
type="date"
|
style={{ marginBottom: "10px" }}
|
||||||
value={endDate}
|
>
|
||||||
onChange={(e) => setEndDate(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button className="button buttonSearch" type="submit" style={{marginBottom:"10px"}}>
|
|
||||||
Buscar
|
Buscar
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
@@ -44,3 +44,4 @@ export default function SelectAreas(props: proms) {
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
//IO
|
||||||
+1
-1
@@ -15,7 +15,7 @@
|
|||||||
"moduleResolution": "bundler",
|
"moduleResolution": "bundler",
|
||||||
"resolveJsonModule": true,
|
"resolveJsonModule": true,
|
||||||
"isolatedModules": true,
|
"isolatedModules": true,
|
||||||
"jsx": "react-jsx",
|
"jsx": "preserve",
|
||||||
"incremental": true,
|
"incremental": true,
|
||||||
"plugins": [
|
"plugins": [
|
||||||
{
|
{
|
||||||
|
|||||||
Reference in New Issue
Block a user