This commit is contained in:
2026-01-21 14:12:45 -06:00
14 changed files with 267 additions and 80 deletions
+1 -1
View File
@@ -1,6 +1,6 @@
"use client";
import axios from "axios";
import { SetStateAction, useEffect, useState } from "react";
import { useEffect, useState } from "react";
import { envConfig } from "../lib/config";
interface mesas {
View File
@@ -43,7 +43,7 @@ function QuitarSancion({ data }: Props) {
<th>Motivo Sanción</th>
<th>Duración (semanas)</th>
<th>Fecha Sanción</th>
<th>Podría utilizar el servicio hasta</th>
<th>Podra utilizar el servicio hasta</th>
</tr>
</thead>
<tbody>
+3 -3
View File
@@ -11,7 +11,7 @@ interface Recibo {
fecha_registro: string;
monto: string;
user: {
nombre: string;
usuario: string;
};
}
@@ -72,7 +72,7 @@ function PorRecibos({ desde, hasta }: Props) {
<tbody>
{!loading && recibos.length === 0 && (
<tr>
<td colSpan={2}>No hay recibos en este rango</td>
<td colSpan={5}>No hay recibos en este rango</td>
</tr>
)}
@@ -82,7 +82,7 @@ function PorRecibos({ desde, hasta }: Props) {
<td>${Number(recibo.monto).toFixed(2)}</td>
<td>{recibo.fecha_recibo}</td>
<td>{recibo.fecha_registro}</td>
<td>{recibo.user.nombre}</td>
<td>{recibo.user.usuario}</td>
</tr>
))}
</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 {
onSearch: (desde: string, hasta: string) => void;
}
function SearchDateBetween({ onSearch }: Props) {
const [startDate, setStartDate] = useState('');
const [endDate, setEndDate] = useState('');
const [startDate, setStartDate] = useState("");
const [endDate, setEndDate] = useState("");
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
@@ -17,26 +18,37 @@ function SearchDateBetween({ onSearch }: Props) {
};
return (
<form className="containerForm" onSubmit={handleSubmit}>
<label className="label">Desde</label>
<div className="groupInput">
<input
type="date"
value={startDate}
onChange={(e) => setStartDate(e.target.value)}
/>
<form className="containerForm containerDate" onSubmit={handleSubmit}>
<div className="alingDate">
<div className="">
<label className="label">Desde</label>
<div className="groupInput">
<input
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>
<label className="label">Hasta</label>
<div className="groupInput">
<input
type="date"
value={endDate}
onChange={(e) => setEndDate(e.target.value)}
/>
</div>
<button className="button buttonSearch" type="submit" style={{marginBottom:"10px"}}>
<button
className="button buttonSearch"
type="submit"
style={{ marginBottom: "10px" }}
>
Buscar
</button>
</form>
+1
View File
@@ -44,3 +44,4 @@ export default function SelectAreas(props: proms) {
</div>
);
}
//IO
@@ -21,7 +21,9 @@
cursor: pointer;
color: #585858;
width: 100%;
transition: background-color 0.3s ease, border 0.3s ease;
transition:
background-color 0.3s ease,
border 0.3s ease;
font-size: 1.5rem;
}
@@ -71,7 +73,9 @@
border-radius: 8px;
background-color: #ffffff;
transition: color 0.3s ease;
transition: opacity 0.4s ease, max-height 0.4s ease;
transition:
opacity 0.4s ease,
max-height 0.4s ease;
}
.subMenu ul a {
@@ -87,11 +91,6 @@
color: #101113;
}
.subMenu:hover ul {
opacity: 1;
max-height: 500px;
}
.subMenu:hover ul a {
display: flex;
}
@@ -138,6 +137,13 @@ tbody {
font-size: 1.25rem;
}
@media (min-width: 1001px) {
.subMenu:hover ul {
opacity: 1;
max-height: 500px;
}
}
@media (max-width: 1000px) {
.menuToggle {
display: flex;
@@ -153,7 +159,7 @@ tbody {
.barNavigation {
font-size: 15px;
display: block;
justify-content: end;
}
.barNavigation ul {
@@ -171,7 +177,9 @@ tbody {
pointer-events: none;
transition: transform 0.35s ease-in-out, opacity 0.35s ease-in-out,
transition:
transform 0.35s ease-in-out,
opacity 0.35s ease-in-out,
visibility 0.35s ease-in-out;
}
@@ -194,6 +202,10 @@ tbody {
padding: 0;
}
.barNavigation li {
color: white;
}
.barNavigation li:hover {
color: white;
border-radius: 0;
@@ -205,14 +217,16 @@ tbody {
top: 0px;
width: 100%;
background-color: rgb(1, 92, 184);
max-height: 0;
opacity: 0;
overflow: hidden;
transform: translateY(-5px);
transition: max-height 0.35s ease, opacity 0.3s ease, transform 0.3s ease;
transition:
max-height 0.35s ease,
opacity 0.3s ease,
transform 0.3s ease;
}
.subMenu.open ul {
@@ -221,8 +235,9 @@ tbody {
transform: translateY(0);
}
.subMenu ul {
opacity: 0;
.subMenu.open ul a{
display: flex;
pointer-events:auto;
}
thead,
@@ -14,6 +14,11 @@ function BarNavigation() {
}
};
const closeAllMenus = () => {
setOpenMenu(false);
setOpenSubMenu(null);
};
return (
<nav className="barNavigation">
<div className={`menuToggle ${openMenu ? "" : ""}`} onClick={toggleMenu}>
@@ -25,11 +30,25 @@ function BarNavigation() {
<ul className={openMenu ? "active" : ""}>
<li className={`subMenu ${openSubMenu === 0 ? "open" : ""}`}>
<span onClick={() => toggleSubMenu(0)}>Inscripciónes</span>
<ul className="containerLinks" onClick={toggleMenu}>
<Link href="/AgregarTiempo" className="links">
<ul onClick={toggleMenu}>
<Link
href="/AgregarTiempo"
className="links"
onClick={(e) => {
e.stopPropagation();
closeAllMenus();
}}
>
<li>Agregar Tiempo</li>
</Link>
<Link href="/Inscripcion" className="links">
<Link
href="/Inscripcion"
className="links"
onClick={(e) => {
e.stopPropagation();
closeAllMenus();
}}
>
<li>Inscripción Usuario</li>
</Link>
</ul>
@@ -38,16 +57,44 @@ function BarNavigation() {
<li className={`subMenu ${openSubMenu === 1 ? "open" : ""}`}>
<span onClick={() => toggleSubMenu(1)}>Servicios</span>
<ul onClick={toggleMenu}>
<Link href="/Impresiones" className="links">
<Link
href="/Impresiones"
className="links"
onClick={(e) => {
e.stopPropagation();
closeAllMenus();
}}
>
<li>Impresiones y Ploteo</li>
</Link>
<Link href="/AsignacionMesas" className="links">
<Link
href="/AsignacionMesas"
className="links"
onClick={(e) => {
e.stopPropagation();
closeAllMenus();
}}
>
<li>Asignacion de Mesas</li>
</Link>
<Link href="/AsignacionEquipo" className="links">
<Link
href="/AsignacionEquipo"
className="links"
onClick={(e) => {
e.stopPropagation();
closeAllMenus();
}}
>
<li>Asignacion de Equipos</li>
</Link>
<Link href="/Monitor" className="links">
<Link
href="/Monitor"
className="links"
onClick={(e) => {
e.stopPropagation();
closeAllMenus();
}}
>
<li>Monitor</li>
</Link>
</ul>
@@ -56,16 +103,44 @@ function BarNavigation() {
<li className={`subMenu ${openSubMenu === 2 ? "open" : ""}`}>
<span onClick={() => toggleSubMenu(2)}>Equipo</span>
<ul onClick={toggleMenu}>
<Link href="/InformacionEquipo" className="links">
<Link
href="/InformacionEquipo"
className="links"
onClick={(e) => {
e.stopPropagation();
closeAllMenus();
}}
>
<li>Informacion de Equipos</li>
</Link>
<Link href="/ActivosMantenimiento" className="links">
<Link
href="/ActivosMantenimiento"
className="links"
onClick={(e) => {
e.stopPropagation();
closeAllMenus();
}}
>
<li>Activos y en Mantenimiento</li>
</Link>
<Link href="/Mensajes" className="links">
<Link
href="/Mensajes"
className="links"
onClick={(e) => {
e.stopPropagation();
closeAllMenus();
}}
>
<li>Mensajes</li>
</Link>
<Link href="/Programas" className="links">
<Link
href="/Programas"
className="links"
onClick={(e) => {
e.stopPropagation();
closeAllMenus();
}}
>
<li>Programas</li>
</Link>
</ul>
@@ -74,24 +149,59 @@ function BarNavigation() {
<li className={`subMenu ${openSubMenu === 3 ? "open" : ""}`}>
<span onClick={() => toggleSubMenu(3)}>Reportes</span>
<ul onClick={toggleMenu}>
<Link href="/Reportes" className="links">
<Link
href="/Reportes"
className="links"
onClick={(e) => {
e.stopPropagation();
closeAllMenus();
}}
>
<li>Reportes</li>
</Link>
<Link href="/Inscritos" className="links">
<Link
href="/Inscritos"
className="links"
onClick={(e) => {
e.stopPropagation();
closeAllMenus();
}}
>
<li>Inscritos</li>
</Link>
<Link href="/BitacoraSanciones" className="links">
<Link
href="/BitacoraSanciones"
className="links"
onClick={(e) => {
e.stopPropagation();
closeAllMenus();
}}
>
<li>Bitacora y sanciones</li>
</Link>
</ul>
</li>
<li className="subMenu" onClick={toggleMenu}>
<Link href="/QuitarSancion" className="links">
<Link
href="/QuitarSancion"
className="links"
onClick={(e) => {
e.stopPropagation();
closeAllMenus();
}}
>
<span>Quitar sanción</span>
</Link>
</li>
<li className="subMenu" onClick={toggleMenu}>
<Link href="/CambiarPass" className="links">
<Link
href="/CambiarPass"
className="links"
onClick={(e) => {
e.stopPropagation();
closeAllMenus();
}}
>
<span> Cambiar contraseña</span>
</Link>
</li>
@@ -101,4 +211,4 @@ function BarNavigation() {
}
export default BarNavigation;
//IO
//IO