file restructuring
This commit is contained in:
IO420
@@ -0,0 +1,42 @@
|
||||
"use client";
|
||||
import SearchDate from "../SearchDate/SearchDate";
|
||||
import { useState } from "react";
|
||||
|
||||
import styles from "./Page.module.css";
|
||||
|
||||
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,62 @@
|
||||
"use client";
|
||||
import SearchDate from "../SearchDate/SearchDate";
|
||||
import { useState } from "react";
|
||||
|
||||
import styles from "./Page.module.css";
|
||||
|
||||
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 SearchDate from "../SearchDate/SearchDate";
|
||||
import { useState } from "react";
|
||||
|
||||
import styles from "./Page.module.css";
|
||||
|
||||
interface tables {
|
||||
no_mesa: number;
|
||||
no_cuenta: number;
|
||||
hora_entrada: string;
|
||||
tiempo_asignado: number;
|
||||
hora_salida: string;
|
||||
}
|
||||
|
||||
function BitacoraMesas() {
|
||||
const [tables, setTables] = useState<tables[]>([]);
|
||||
|
||||
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,20 @@
|
||||
import Information from "../Global/Information/information";
|
||||
import SearchUser from "../Global/SearchUser/searchUser";
|
||||
|
||||
interface Student {
|
||||
id_cuenta: string ;
|
||||
nombre: string ;
|
||||
}
|
||||
|
||||
export default async function Sanciones(props: { student?: Student }) {
|
||||
const idCuenta = props?.student?.id_cuenta ?? null;
|
||||
|
||||
return (
|
||||
<>
|
||||
<SearchUser urlBase="BitacoraSanciones" value={idCuenta} />
|
||||
{props.student && (
|
||||
<Information NoCuenta={props.student.id_cuenta} Nombre={props.student.nombre} />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
import { useState } from "react";
|
||||
|
||||
import styles from "./Page.module.css";
|
||||
|
||||
interface alumno_sancion {
|
||||
id_alumno_sancion: number;
|
||||
fecha_inicio: string;
|
||||
alumno: alumno;
|
||||
sancion: sancion;
|
||||
}
|
||||
|
||||
interface alumno {
|
||||
id_cuenta: number;
|
||||
nombre: string;
|
||||
credito: number;
|
||||
}
|
||||
|
||||
interface sancion {
|
||||
id_sancion: number;
|
||||
sancion: string;
|
||||
duracion: number;
|
||||
}
|
||||
|
||||
export default function UbicacionEquipo(sanciones:alumno_sancion[]) {
|
||||
const [ubicacionEquipo, setUbicacionEquipo] = useState("");
|
||||
|
||||
return (
|
||||
<>
|
||||
<form className="containerForm">
|
||||
<label className="label">Ubicacion de equipo</label>
|
||||
|
||||
<div
|
||||
className="groupInput"
|
||||
style={{ display: "flex", gap: "1rem", flexDirection: "row" }}
|
||||
>
|
||||
<select
|
||||
value={ubicacionEquipo}
|
||||
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 &&
|
||||
sanciones.map((s, index) => (
|
||||
<tr key={index}>
|
||||
<td>{s.sancion.id_sancion}</td>
|
||||
<td>{s.sancion.sancion}</td>
|
||||
<td>{s.fecha_inicio}</td>
|
||||
<td>{s.sancion.duracion}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<form className="containerForm">
|
||||
<div className="groupInput">
|
||||
<select
|
||||
value={ubicacionEquipo}
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
//IO
|
||||
Reference in New Issue
Block a user