Merge branch 'Axel_branch' of https://github.com/IO420/Nexus into Lino
This commit is contained in:
@@ -0,0 +1,51 @@
|
||||
"use client";
|
||||
import { Margarine } from "next/font/google";
|
||||
import { useState } from "react";
|
||||
|
||||
function SearchDateBetween() {
|
||||
const [startDate, setStartDate] = useState("");
|
||||
const [endDate, setEndDate] = useState("");
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
console.log("Fecha inicio:", startDate);
|
||||
console.log("Fecha fin:", endDate);
|
||||
// Aquí puedes hacer la lógica para buscar entre fechas
|
||||
};
|
||||
|
||||
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)}
|
||||
placeholder="Fecha inicio"
|
||||
/>
|
||||
</div>
|
||||
<label className="label">Hasta</label>
|
||||
<div className="groupInput">
|
||||
<input
|
||||
type="date"
|
||||
value={endDate}
|
||||
onChange={(e) => setEndDate(e.target.value)}
|
||||
placeholder="Fecha fin"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
className="button buttonSearch"
|
||||
type="submit"
|
||||
style={{ margin: "1rem 0" }}
|
||||
>
|
||||
Buscar
|
||||
</button>
|
||||
</form>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default SearchDateBetween;
|
||||
|
||||
// By Tyrannuss
|
||||
@@ -0,0 +1,70 @@
|
||||
.tableContainer {
|
||||
margin-top: 10px;
|
||||
overflow-y: auto;
|
||||
overflow-x: auto;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #cfcfcf;
|
||||
max-height: 430px;
|
||||
scrollbar-color: rgb(1, 92, 184) rgba(0, 0, 0, 0);
|
||||
background-color: #f9f9f9;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.machineTable {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
table-layout: auto;
|
||||
}
|
||||
|
||||
.machineTable th,
|
||||
.machineTable td {
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #cfcfcf;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.machineTable th {
|
||||
position: sticky;
|
||||
top: 0px;
|
||||
background-color: rgb(1, 92, 184);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.machineTable tr {
|
||||
min-width: 400px;
|
||||
}
|
||||
|
||||
.disponible {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: green;
|
||||
color: green;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ocupado {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.actions {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.resetButton {
|
||||
padding: 8px 16px;
|
||||
background-color: #ff4d4d;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.resetButton:hover {
|
||||
background-color: #cc0000;
|
||||
}
|
||||
@@ -1,11 +1,51 @@
|
||||
"use client";
|
||||
import { useState } from "react";
|
||||
import SearchUser from "../Components/SearchUser/searchUser";
|
||||
import styles from "./Page.module.css"; // importamos el css
|
||||
|
||||
export default function Page() {
|
||||
const [sanciones] = useState([
|
||||
{
|
||||
id: "1",
|
||||
nombre: "Jose Toleda",
|
||||
mmotivo: "No cerrar sancion",
|
||||
duracion: "2",
|
||||
fecha_sancion: "10/09/2025 a las 02:45:26 PM",
|
||||
utilizar_equipo: "13/09/2025",
|
||||
},
|
||||
]);
|
||||
return (
|
||||
<section className='containerSection'>
|
||||
<h2 className='title'> Quitar Sanciones </h2>
|
||||
<SearchUser/>
|
||||
<section className="containerSection">
|
||||
<h2 className="title"> Quitar Sanciones </h2>
|
||||
<SearchUser />
|
||||
<div className={styles.tableContainer}>
|
||||
<table className={styles.machineTable}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>id</th>
|
||||
<th>Nombre</th>
|
||||
<th>Motivo Sancion</th>
|
||||
<th>Duracion (semanas) </th>
|
||||
<th>Fecha Sancion</th>
|
||||
<th>Podria utilizar el servicio hasta</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{sanciones.map((sancion, index) => (
|
||||
<tr key={index}>
|
||||
<td>{sancion.id}</td>
|
||||
<td>{sancion.nombre}</td>
|
||||
<td>{sancion.mmotivo}</td>
|
||||
<td>{sancion.duracion}</td>
|
||||
<td>{sancion.fecha_sancion}</td>
|
||||
<td>{sancion.utilizar_equipo}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<button className="button buttonSearch">Quitar Sancion</button>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
//IO
|
||||
//IO
|
||||
|
||||
@@ -0,0 +1,70 @@
|
||||
.tableContainer {
|
||||
margin-top: 10px;
|
||||
overflow-y: auto;
|
||||
overflow-x: auto;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #cfcfcf;
|
||||
max-height: 430px;
|
||||
scrollbar-color: rgb(1, 92, 184) rgba(0, 0, 0, 0);
|
||||
background-color: #f9f9f9;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.machineTable {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
table-layout: auto;
|
||||
}
|
||||
|
||||
.machineTable th,
|
||||
.machineTable td {
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #cfcfcf;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.machineTable th {
|
||||
position: sticky;
|
||||
top: 0px;
|
||||
background-color: rgb(1, 92, 184);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.machineTable tr {
|
||||
min-width: 400px;
|
||||
}
|
||||
|
||||
.disponible {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: green;
|
||||
color: green;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ocupado {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.actions {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.resetButton {
|
||||
padding: 8px 16px;
|
||||
background-color: #ff4d4d;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.resetButton:hover {
|
||||
background-color: #cc0000;
|
||||
}
|
||||
+91
-6
@@ -1,13 +1,98 @@
|
||||
import SearchUser from "../Components/SearchUser/searchUser";
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import styles from "./Page.module.css"; // importamos el css
|
||||
import SearchDateBetween from "../Components/SearchDateBetween/SearchDateBetween";
|
||||
import Toggle from "../Components/Toggle/Toggle";
|
||||
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'> RECIBO </h2>
|
||||
<section className="containerSection">
|
||||
<h2 className="title"> RECIBO </h2>
|
||||
|
||||
<SearchUser/>
|
||||
<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
|
||||
//IO
|
||||
|
||||
Reference in New Issue
Block a user