restructuring layout
This commit is contained in:
@@ -0,0 +1,41 @@
|
||||
"use client";
|
||||
import { useState } from "react";
|
||||
import styles from "./Page.module.css";
|
||||
import SearchDate from "../SearchDate/SearchDate";
|
||||
|
||||
interface alumnos {
|
||||
tiempo_entrada: string;
|
||||
tiempo_asignado: string;
|
||||
Ubicacion_equipo: number;
|
||||
}
|
||||
|
||||
function BitacoraAlumno() {
|
||||
const [alumnos, setAlumnos] = useState<alumnos[]>([]);
|
||||
return (
|
||||
<>
|
||||
<SearchDate />
|
||||
<div className={styles.tableContainer}>
|
||||
<table className={styles.machineTable}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Tiempo Entrada</th>
|
||||
<th>Tiempo Asignado</th>
|
||||
<th>Ubicacion del equipo</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{alumnos.map((alumno, index) => (
|
||||
<tr key={index}>
|
||||
<td>{alumno.tiempo_entrada}</td>
|
||||
<td>{alumno.tiempo_asignado}</td>
|
||||
<td>{alumno.Ubicacion_equipo}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default BitacoraAlumno;
|
||||
@@ -0,0 +1,61 @@
|
||||
"use client";
|
||||
import { useState } from "react";
|
||||
import styles from "./Page.module.css";
|
||||
import SearchDate from "../SearchDate/SearchDate";
|
||||
|
||||
interface equipos {
|
||||
hora_entrada: string;
|
||||
min_utilizados: number;
|
||||
hora_salida: string;
|
||||
cuenta_asociada: number;
|
||||
}
|
||||
|
||||
function BitacoraEquipo() {
|
||||
const [equipo, setEquipo] = useState<equipos[]>([]);
|
||||
const [ubicacion_equipo, setUbicacionEquipo] = useState("");
|
||||
return (
|
||||
<>
|
||||
<SearchDate />
|
||||
<form className="containerForm">
|
||||
<label className="label">Ubicacion de equipo</label>
|
||||
|
||||
<div className="groupInput">
|
||||
<select
|
||||
value={ubicacion_equipo}
|
||||
onChange={(e) => setUbicacionEquipo(e.target.value)}
|
||||
>
|
||||
<option value="">-- Selecciona un equipo --</option>
|
||||
<option value="255">Equipo 255</option>
|
||||
</select>
|
||||
<button className="button buttonSearch" type="submit">
|
||||
Asignar
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div className={styles.tableContainer}>
|
||||
<table className={styles.machineTable}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Hora Entrada</th>
|
||||
<th>Minutos utilizados</th>
|
||||
<th>Hora salida</th>
|
||||
<th>Cuenta asociada</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{equipo.map((equipo, index) => (
|
||||
<tr key={index}>
|
||||
<td>{equipo.hora_entrada}</td>
|
||||
<td>{equipo.min_utilizados}</td>
|
||||
<td>{equipo.hora_salida}</td>
|
||||
<td>{equipo.cuenta_asociada}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default BitacoraEquipo;
|
||||
@@ -0,0 +1,49 @@
|
||||
"use client";
|
||||
import { useState } from "react";
|
||||
import styles from "./Page.module.css";
|
||||
|
||||
import SearchDate from "../SearchDate/SearchDate";
|
||||
|
||||
interface tables {
|
||||
no_mesa: number;
|
||||
no_cuenta: number;
|
||||
hora_entrada: string;
|
||||
tiempo_asignado: number;
|
||||
hora_salida: string;
|
||||
}
|
||||
|
||||
function BitacoraMesas() {
|
||||
const [tables, setTables] = useState<tables[]>([]);
|
||||
const [ubicacion_equipo, setUbicacionEquipo] = useState("");
|
||||
return (
|
||||
<>
|
||||
<SearchDate />
|
||||
<div className={styles.tableContainer}>
|
||||
<table className={styles.machineTable}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Mesa</th>
|
||||
<th>Cuenta</th>
|
||||
<th>Hora Entrada</th>
|
||||
<th>Tiempo Asignado</th>
|
||||
<th>Hora Salida</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{tables.map((table, index) => (
|
||||
<tr key={index}>
|
||||
<td>{table.no_mesa}</td>
|
||||
<td>{table.no_cuenta}</td>
|
||||
<td>{table.hora_entrada}</td>
|
||||
<td>{table.tiempo_asignado}</td>
|
||||
<td>{table.hora_salida}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default BitacoraMesas;
|
||||
@@ -0,0 +1,69 @@
|
||||
.tableContainer {
|
||||
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;
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
"use client";
|
||||
import { useEffect, useState } from "react";
|
||||
import styles from "./Page.module.css";
|
||||
import SearchUser from "../../Global/SearchUser/searchUser";
|
||||
import Information from "../../Global/Information/information";
|
||||
import { GetStudent } from "@/app/lib/getStudent";
|
||||
import { envConfig } from "@/app/lib/config";
|
||||
|
||||
interface sancion {
|
||||
no_cuenta: number;
|
||||
nombre: string;
|
||||
motivo: string;
|
||||
duracion: number;
|
||||
fecha_sancion: string;
|
||||
utilizar_hasta: number;
|
||||
}
|
||||
|
||||
export default function Sanciones() {
|
||||
const [sanciones, setSanciones] = useState<sancion[]>([]);
|
||||
const [ubicacion_equipo, setUbicacionEquipo] = useState("");
|
||||
const [no_cuenta, setNo_cuenta] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`${envConfig.apiUrl}/student/${no_cuenta}`).then(
|
||||
(
|
||||
response // Revisar
|
||||
) => response.json().then((data) => setNo_cuenta(data[0].sancion))
|
||||
);
|
||||
}, [no_cuenta]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<SearchUser urlBase="BitacoraSanciones" value="3" />
|
||||
|
||||
{/* <Information NoCuenta={sancion.id_cuenta} Nombre={student.nombre} /> */}
|
||||
|
||||
<form className="containerForm">
|
||||
<label className="label">Ubicacion de equipo</label>
|
||||
|
||||
<div
|
||||
className="groupInput"
|
||||
style={{ display: "flex", gap: "1rem", flexDirection: "row" }}
|
||||
>
|
||||
<select
|
||||
value={ubicacion_equipo}
|
||||
onChange={(e) => setUbicacionEquipo(e.target.value)}
|
||||
>
|
||||
<option value="">-- Selecciona un equipo --</option>
|
||||
<option value="255">Equipo 255</option>
|
||||
</select>
|
||||
<button className="button buttonSearch" type="submit">
|
||||
Asignar
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div className={styles.tableContainer}>
|
||||
<table className={styles.machineTable}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Cuenta</th>
|
||||
<th>Motivo de la sancion</th>
|
||||
<th>Duracion (Semanas) </th>
|
||||
<th>Fecha Sancion</th>
|
||||
<th>Podra utilizar el servicio hasta</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{sanciones.map((sancion, index) => (
|
||||
<tr key={index}>
|
||||
<td>{sancion.no_cuenta}</td>
|
||||
<td>{sancion.motivo}</td>
|
||||
<td>{sancion.fecha_sancion}</td>
|
||||
<td>{sancion.duracion}</td>
|
||||
<td>{sancion.utilizar_hasta}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<form className="containerForm">
|
||||
<div className="groupInput">
|
||||
<select
|
||||
value={ubicacion_equipo}
|
||||
onChange={(e) => setUbicacionEquipo(e.target.value)}
|
||||
>
|
||||
<option value="">-- Selecciona una sancion --</option>
|
||||
<option value="sancion 1">No cerrar sesion (Una semana)</option>
|
||||
</select>
|
||||
<button className="button buttonSearch" type="submit">
|
||||
Aplicar sancion
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
"use client";
|
||||
import { useState } from "react";
|
||||
|
||||
function SearchDate() {
|
||||
const [date, setDate] = useState("");
|
||||
|
||||
return (
|
||||
<>
|
||||
<form className="containerForm">
|
||||
<label className="label">Fecha</label>
|
||||
<div className="groupInput">
|
||||
<input
|
||||
type="date"
|
||||
value={date}
|
||||
onChange={(e) => setDate(e.target.value)}
|
||||
placeholder="Selecciona una fecha..."
|
||||
/>
|
||||
<button className="button buttonSearch" type="submit">
|
||||
Buscar
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default SearchDate;
|
||||
|
||||
//By Tyrannuss
|
||||
@@ -0,0 +1,51 @@
|
||||
"use client";
|
||||
|
||||
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
|
||||
Reference in New Issue
Block a user