IO/front-AT
1
0
Fork 0
Code Issues Pull Requests Actions Releases Wiki Activity

Merge branch 'Carlos' of https://github.com/IO420/Nexus into Lino

Browse Source
This commit is contained in:
Lino
2025-09-05 14:17:36 -04:00
parent e980b0400c 03efc1bd36
commit 02980b8e03
7 changed files with 630 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/AsignacionMesas/asignacionmesas.css
+36
View File
@@ -0,0 +1,36 @@
/* Add these new styles to your CSS file */
.mainContainer {
display: flex;
justify-content: space-between;
gap: 20px; /* Adjust the spacing as needed */
flex-wrap: wrap; /* Allows components to wrap on smaller screens */
}
.availableTablesContainer {
/* You can add specific styles for the table list here */
width: 45%; /* Adjust width to fit the layout */
background-color: #f9f9f9;
border-radius: 8px;
padding: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.tableList {
list-style: none;
padding: 0;
display: flex;
flex-direction: column; /* Or use flex-wrap to make it a grid */
height: 200px; /* Or a fixed height with overflow */
overflow-y: auto;
}
.tableList li {
padding: 8px;
border-bottom: 1px solid #ddd;
cursor: pointer;
transition: background-color 0.2s;
}
.tableList li:hover {
background-color: #f0f0f0;
}
app/AsignacionMesas/page.tsx
+61 -45
View File
@@ -1,59 +1,75 @@
'use client'
"use client";
import { useState } from "react";
import SearchUser from "../Components/SearchUser/searchUser";
import Toggle from "../Components/Toggle/Toggle";
// Assuming you will create this new component
export default function Page() {
const [tiempo, setTiempo] = useState("");
const [selectedTable, setSelectedTable] = useState(null);
return (
<section className='containerSection'>
<h2 className='title'> ASIGNACION DE MESAS </h2>
<section className="containerSection">
<h2 className="title"> ASIGNACION DE MESAS </h2>
<Toggle
defaultView="AsigTime"
options={[
{
key: "AsigTime",
label: "Asignar mesa",
content: <>
<SearchUser />
<div className="mainContainer">
{/* Toggle component for 'Asignar' and 'Liberar' tabs */}
<Toggle
defaultView="Asignar"
options={[
{
key: "Asignar",
label: "Asignar mesa",
content: (
<>
<SearchUser />
<form className="containerForm">
<label className="label">Tiempo</label>
<div className="groupInput">
<select
value={tiempo}
onChange={(e) => setTiempo(e.target.value)}
>
<option value="">-- Selecciona un tiempo --</option>
<option value="15">15 minutos</option>
<option value="30">30 minutos</option>
<option value="45">45 minutos</option>
<option value="60">1 hora</option>
<option value="90">1 hora 30 minutos</option>
<option value="120">2 horas</option>
</select>
<button
className='button buttonSearch'
type='submit'
>Asignar
</button>
</div>
</form>
</>,
},
{
key: "Liberarmesa",
label: "Liberar mesa",
content: <></>,
},
]}
/>
<form className="containerForm">
<label className="label">Mesas disponibles</label>
<div className="groupInput">
<select
value={tiempo}
onChange={(e) => setTiempo(e.target.value)}
>
<option value="">-- Mesas disponibles --</option>
<option value="15">1 </option>
<option value="30">3 </option>
<option value="45">4 </option>
<option value="60">22 </option>
<option value="90">15 </option>
<option value="120">20 </option>
</select>
<button className="button buttonSearch" type="submit">
Asignar
</button>
</div>
</form>
</>
),
},
{
key: "Liberar",
label: "Liberar mesa",
content: (
<>
<div className="checkbox-grid">
{" "}
<label>
<input type="checkbox" /> Mesa
</label>
<label>
<input type="checkbox" /> Cuenta
</label>
</div>
<SearchUser />
</>
),
},
]}
/>
{/* This is the new component to display available tables */}
</div>
</section>
);
}
//IO
app/InformacionEquipo/informacionequipo.css
+86
View File
@@ -0,0 +1,86 @@
.cuadro {
display: flex;
padding-left: 10px;
margin: 10px 0;
width: 500px;
align-items: start;
justify-content: start;
}
.margin {
margin: 10px 0;
display: flex;
gap: 50px;
}
.conteinercuadro {
display: flex;
flex-direction: column;
align-items: start;
}
.form-container label {
font-size: 14px;
margin-right: 10px; /* espacio entre "Salas" y la caja */
display: inline-block; /* lo hace estar en la misma línea */
vertical-align: middle; /* alinea verticalmente con el select */
}
.form-container select {
font-size: 13px;
padding: 4px 8px;
border: 1px solid #ccc;
border-radius: 6px;
outline: none;
vertical-align: middle; /* asegura alineación */
transition: all 0.2s ease-in-out;
}
.form-container select:hover {
border-color: #007bff;
box-shadow: 0px 0px 0px rgba(0, 123, 255, 0.3);
}
.form-container select:focus {
border-color: #c2c3c5; /* azul al enfocar */
box-shadow: 0 0 4px rgba(59, 130, 246, 0.4);
outline: none;
}
.checkbox-grid {
display: grid;
grid-template-columns: repeat(3, 240px); /* ancho fijo por columna */
gap: 6px 20px;
margin-bottom: 20px;
}
.checkbox-grid label {
display: flex;
align-items: center;
font-size: 13px;
cursor: pointer;
white-space: nowrap;
}
.checkbox-grid input[type="checkbox"] {
all: unset; /* elimina TODOS los estilos del navegador */
appearance: checkbox; /* lo vuelve a mostrar como checkbox */
margin: 0;
margin-right: 1px; /* espacio mínimo entre el box y el texto */
}
input[type="checkbox"] {
accent-color: #2563eb;
}
.btn {
display: inline-block;
background: #2563eb;
color: white;
border: none;
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
transition: 0.2s ease;
}
.btn:hover {
background: #1d4ed8;
}
app/InformacionEquipo/page.tsx
+227 -53
View File
@@ -1,9 +1,10 @@
import Toggle from "../Components/Toggle/Toggle";
import "./informacionequipo.css";
export default function Page() {
return (
<section className='containerSection'>
<h2 className='title'> INFORMACION DE EQUIPOS </h2>
<section className="containerSection">
<h2 className="title"> INFORMACION DE EQUIPOS </h2>
<Toggle
defaultView="1"
@@ -11,73 +12,246 @@ export default function Page() {
{
key: "1",
label: "Equipos",
content: <div className='containerInput'>
<label className='label'>Ubicacion</label>
<input
type='text'
//value={user}
//onChange={(e) => setUser(e.target.value)}
placeholder='Coloca un número de cuenta...'
/>
content: (
<div className="containerInput">
<div className="margin">
{" "}
<input type="text" />
<button className="button buttonSearch">
{" "}
Buscar por ubicación{" "}
</button>
</div>
<label className="label">Ubicacion</label>
<input
type="text"
//value={user}
//onChange={(e) => setUser(e.target.value)}
placeholder="Coloca un número de cuenta..."
/>
<label className='label'>Nombre</label>
<input
type='text'
//value={user}
//onChange={(e) => setUser(e.target.value)}
placeholder='Coloca '
/>
<label className="label">Nombre</label>
<input
type="text"
//value={user}
//onChange={(e) => setUser(e.target.value)}
placeholder="Coloca "
/>
<label className='label'>Plataforma</label>
<input
type='text'
//value={user}
//onChange={(e) => setUser(e.target.value)}
placeholder='Coloca '
/>
<label className="label">Plataforma</label>
<input
type="text"
//value={user}
//onChange={(e) => setUser(e.target.value)}
placeholder="Coloca "
/>
<label className='label'>Area Ubicacion</label>
<input
type='text'
//value={user}
//onChange={(e) => setUser(e.target.value)}
placeholder='Coloca '
/>
<label className="label">Area Ubicacion</label>
<input
type="text"
//value={user}
//onChange={(e) => setUser(e.target.value)}
placeholder="Coloca "
/>
<div className="margin">
<button className="button buttonSearch">Nuevo</button>
<button
className="button buttonSearch"
>
Nuevo
</button>
<button
className="button buttonSearch"
>
Editar
</button>
</div>,
<button className="button buttonSearch">Editar</button>
</div>
</div>
),
},
{
key: "2",
label: "Programa por equipo",
content:
<>
<button></button>
<label>hola</label>
</>,
content: (
<div>
<div className="form-container">
<label htmlFor="equipo">Ubicación de equipo</label>
<select id="equipo">
<option value="">buscar</option>
<option value="sala1">Equipo 1</option>
<option value="sala2">Equipo 2</option>
<option value="sala3">Equipo 3</option>
</select>
<div className="checkbox-grid">
<label>
<input type="checkbox" /> 3D MAX STUDIO 2014
</label>
<label>
<input type="checkbox" /> ADOBE CREATIVE SUITE
</label>
<label>
<input type="checkbox" /> ARCHICAD 20
</label>
<label>
<input type="checkbox" /> AUDACITY - win - 2.0
</label>
<label>
<input type="checkbox" /> AUTOCAD
</label>
<label>
<input type="checkbox" /> CODE-BLOCKS
</label>
<label>
<input type="checkbox" /> COREL DRAW
</label>
<label>
<input type="checkbox" /> DEV-C++
</label>
<label>
<input type="checkbox" /> EVIEWS Enterprise
</label>
<label>
<input type="checkbox" /> Google Earth
</label>
<label>
<input type="checkbox" /> INTERNET
</label>
<label>
<input type="checkbox" /> MAPLE
</label>
<label>
<input type="checkbox" /> MATHEMATICA
</label>
<label>
<input type="checkbox" /> MATLAB
</label>
<label>
<input type="checkbox" /> Maxima
</label>
<label>
<input type="checkbox" /> miktex
</label>
<label>
<input type="checkbox" /> NETBEANS
</label>
<label>
<input type="checkbox" /> OFFICE 2016
</label>
<label>
<input type="checkbox" /> PSeInt
</label>
<label>
<input type="checkbox" /> R 3.0.1
</label>
<label>
<input type="checkbox" /> RStudio
</label>
<label>
<input type="checkbox" /> SPSS Statistics
</label>
<label>
<input type="checkbox" /> STATA 13
</label>
<label>
<input type="checkbox" /> STATGRAPHICS Centurion XVI
</label>
</div>
<button className="btn">Guardar cambios</button>
</div>
</div>
),
},
{
key: "3",
label: "Programa por sala",
content:
<>
content: (
<div>
<div className="form-container">
<label htmlFor="salas ">Salas </label>
<select id="salas">
<option value="">Seleccione una sala</option>
<option value="sala1">Sala 1</option>
<option value="sala2">Sala 2</option>
<option value="sala3">Sala 3</option>
</select>
</>,
<div className="checkbox-grid">
<label>
<input type="checkbox" /> 3D MAX STUDIO 2014
</label>
<label>
<input type="checkbox" /> ADOBE CREATIVE SUITE
</label>
<label>
<input type="checkbox" /> ARCHICAD 20
</label>
<label>
<input type="checkbox" /> AUDACITY - win - 2.0
</label>
<label>
<input type="checkbox" /> AUTOCAD
</label>
<label>
<input type="checkbox" /> CODE-BLOCKS
</label>
<label>
<input type="checkbox" /> COREL DRAW
</label>
<label>
<input type="checkbox" /> DEV-C++
</label>
<label>
<input type="checkbox" /> EVIEWS Enterprise
</label>
<label>
<input type="checkbox" /> Google Earth
</label>
<label>
<input type="checkbox" /> INTERNET
</label>
<label>
<input type="checkbox" /> MAPLE
</label>
<label>
<input type="checkbox" /> MATHEMATICA
</label>
<label>
<input type="checkbox" /> MATLAB
</label>
<label>
<input type="checkbox" /> Maxima
</label>
<label>
<input type="checkbox" /> miktex
</label>
<label>
<input type="checkbox" /> NETBEANS
</label>
<label>
<input type="checkbox" /> OFFICE 2016
</label>
<label>
<input type="checkbox" /> PSeInt
</label>
<label>
<input type="checkbox" /> R 3.0.1
</label>
<label>
<input type="checkbox" /> RStudio
</label>
<label>
<input type="checkbox" /> SPSS Statistics
</label>
<label>
<input type="checkbox" /> STATA 13
</label>
<label>
<input type="checkbox" /> STATGRAPHICS Centurion XVI
</label>
</div>
<button className="btn">Guardar cambios</button>
</div>
</div>
),
},
]}
/>
</section>
);
}
//IO
//IO
app/Mensajes/mensaje.css
+94
View File
@@ -0,0 +1,94 @@
.card {
background: #fff;
padding: 20px 30px;
border-radius: 12px;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
width: 700px;
margin: 40px auto;
font-family: Arial, sans-serif;
}
/* Título */
.cardTitle {
font-size: 18px;
margin-bottom: 15px;
font-weight: 600;
color: #333;
}
/* Tabs */
.tabs {
display: flex;
margin-bottom: 20px;
border-bottom: 1px solid #ddd;
}
.tab {
flex: 1;
background: none;
border: none;
padding: 10px;
font-size: 14px;
cursor: pointer;
transition: 0.3s;
color: #333;
}
.active {
font-weight: 600;
color: #0056d2;
border-bottom: 2px solid #0056d2;
}
/* Formulario */
.formGroup {
display: flex;
flex-direction: column;
margin-bottom: 15px;
}
.formGroup label {
font-size: 14px;
margin-bottom: 6px;
color: #444;
font-weight: 500;
}
.formGroup select,
.formGroup input {
padding: 8px 10px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 14px;
transition: border 0.3s, box-shadow 0.3s;
}
.formGroup select:focus,
.formGroup input:focus {
border-color: #0056d2;
box-shadow: 0px 0px 4px rgba(0, 86, 210, 0.3);
outline: none;
}
/* Botones */
.actions {
text-align: right;
}
.btn {
padding: 8px 16px;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
border: none;
transition: 0.3s;
}
.btnPrimary {
background: #0056d2;
color: white;
}
.btnPrimary:hover {
background: #0041a8;
}
app/Mensajes/page.tsx
+116 -4
View File
@@ -1,11 +1,123 @@
"use client";
import { useState } from "react";
import SearchUser from "../Components/SearchUser/searchUser";
import Toggle from "../Components/Toggle/Toggle";
export default function Page() {
const [tiempo, setTiempo] = useState(""); // <-- AQUÍ defines el estado
return (
<section className='containerSection'>
<h2 className='title'> MENSAJES </h2>
<section className="containerSection">
<h2 className="title"> Enviar mensaje </h2>
<Toggle
defaultView="AsigTime"
options={[
{
key: "AsigTime",
label: "Equipo",
content: (
<>
<form className="containerForm">
<label className="label">Seleccione un equipo</label>
<div className="groupInput">
<select
value={tiempo}
onChange={(e) => setTiempo(e.target.value)}
>
<option value="">-- Seleccione un equipo--</option>
<option value="15">1 </option>
<option value="30">2 </option>
<option value="45">3 </option>
<option value="60">4 </option>
<option value="90">5 </option>
<option value="120">6 </option>
</select>
</div>
</form>
<form className="containerForm">
<label className="label">Seleccione el mensaje</label>
<div className="groupInput">
<select
value={tiempo}
onChange={(e) => setTiempo(e.target.value)}
>
<option value="">-- Seleccione el mensaje--</option>
<option value="15">No olvides cerrar sesión </option>
<option value="30">???????????????????????? </option>
<option value="45">¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡</option>
<option value="60">???????????????????????? </option>
<option value="90">???????????????????????? </option>
<option value="120">¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡ </option>
</select>
</div>
</form>
<form className="containerForm">
<label className="label">Mensaje perzonalizado</label>
<div className="groupInput">
<input type="text" />
<button className="button buttonSearch" type="submit">
Mandar mensaje
</button>
</div>
</form>
</>
),
},
{
key: "CancelTime",
label: "Sala",
content: (
<>
<form className="containerForm">
<label className="label">Seleccione un equipo</label>
<div className="groupInput">
<select
value={tiempo}
onChange={(e) => setTiempo(e.target.value)}
>
<option value="">-- Seleccione una Sala--</option>
<option value="15">PECERA </option>
<option value="30">PCNET1 </option>
<option value="45">PCNET2 </option>
<option value="60">PCNET3</option>
<option value="90">______ </option>
<option value="120">______</option>
</select>
</div>
</form>
<form className="containerForm">
<label className="label">Seleccione el mensaje</label>
<div className="groupInput">
<select
value={tiempo}
onChange={(e) => setTiempo(e.target.value)}
>
<option value="">-- Seleccione el mensaje--</option>
<option value="15">No olvides cerrar sesión </option>
<option value="30">???????????????????????? </option>
<option value="45">¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡</option>
<option value="60">???????????????????????? </option>
<option value="90">???????????????????????? </option>
<option value="120">¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡ </option>
</select>
</div>
</form>
<form className="containerForm">
<label className="label">Mensaje perzonalizado</label>
<div className="groupInput">
<input type="text" />
<button className="button buttonSearch" type="submit">
Mandar mensaje
</button>
</div>
</form>
</>
),
},
]}
/>
</section>
);
}
//IO
//IO
app/globals.css
+10 -12
View File
@@ -91,7 +91,7 @@ footer {
flex-direction: column;
}
.containerForm{
.containerForm {
width: 100%;
max-width: 450px;
}
@@ -102,7 +102,7 @@ footer {
right: 0;
width: 400px;
height: 615px;
background-image: url('/rock.jpg');
background-image: url("/rock.jpg");
background-size: cover;
background-position: center;
overflow: hidden;
@@ -111,7 +111,7 @@ footer {
}
.img::after {
content: '';
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to right, #f9f9f9, rgba(128, 128, 128, 0));
@@ -137,7 +137,6 @@ select {
justify-content: space-between;
}
.button {
padding: 0.5rem 1.25rem;
font-size: 1rem;
@@ -166,7 +165,6 @@ select {
background-color: #15803d;
}
.absoluteButton {
position: absolute;
bottom: 1rem;
@@ -185,7 +183,7 @@ ul {
margin-bottom: 10px;
}
.label{
.label {
font-size: 1rem;
font-weight: bold;
display: block;
@@ -206,7 +204,7 @@ a {
margin-top: 10px;
}
.information ul{
.information ul {
padding: 1rem;
}
@@ -275,7 +273,7 @@ form {
}
@media(max-width:800px) {
@media (max-width: 800px) {
header {
padding: 6px 16px;
}
@@ -301,7 +299,7 @@ form {
.img::before,
.img::after {
content: '';
content: "";
position: absolute;
top: 0;
bottom: 0;
@@ -328,8 +326,8 @@ form {
}
}
@media(max-height:960px) {
@media (max-height: 960px) {
.container {
margin: 0
margin: 0;
}
}
}