CIDWA/front-AT
12
0
Fork 0
Code Issues Pull Requests Actions Releases Wiki Activity

modification impression component and fixed barNavigation

Browse Source
This commit is contained in:
Lino
2025-09-04 18:04:41 -04:00
parent ad5accb704
commit fe842952a9
6 changed files with 124 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/Alta/page.tsx
+56 -56
View File
@@ -1,10 +1,10 @@
'use client'
import { useState } from "react";
import "../globals.css";
import StepNavigator from "../Components/StepNavigator/StepNavigator";
export default function Page() {
const [step, setStep] = useState(1);
const [major, setMajor] = useState("");
const handleNext = (e: any) => {
e.preventDefault();
@@ -20,67 +20,67 @@ export default function Page() {
<section className="containerSection">
<h1 className="title">ALTA</h1>
<StepNavigator totalSteps={2}>
<div className='containerInput'>
<label className='label'>No.Cuenta</label>
<input
type='text'
//value={user}
//onChange={(e) => setUser(e.target.value)}
placeholder='Coloca un número de cuenta...'
/>
<div className='containerInput'>
<label className='label'>No.Cuenta</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'>Apellido Paterno</label>
<input
type='text'
//value={user}
//onChange={(e) => setUser(e.target.value)}
placeholder='Coloca '
/>
<label className='label'>Apellido Paterno</label>
<input
type='text'
//value={user}
//onChange={(e) => setUser(e.target.value)}
placeholder='Coloca '
/>
<label className='label'>Apellido Materno</label>
<input
type='text'
//value={user}
//onChange={(e) => setUser(e.target.value)}
placeholder='Coloca '
/>
</div>
<label className='label'>Apellido Materno</label>
<input
type='text'
//value={user}
//onChange={(e) => setUser(e.target.value)}
placeholder='Coloca '
/>
<div className='containerInput'>
<label className='label'>Email</label>
<input
type='text'
//value={user}
//onChange={(e) => setUser(e.target.value)}
placeholder='Coloca '
/>
<label className='label'>Email</label>
<input
type='text'
//value={user}
//onChange={(e) => setUser(e.target.value)}
placeholder='Coloca '
/>
<label className='label'>Fecha Nacimiento</label>
<input
type='text'
//value={user}
//onChange={(e) => setUser(e.target.value)}
placeholder='Coloca '
/>
<label className='label'>Fecha Nacimiento</label>
<input
type='text'
//value={user}
//onChange={(e) => setUser(e.target.value)}
placeholder='Coloca '
/>
<label className='label'>Carrera</label>
<select
value={major}
onChange={(e) => setMajor(e.target.value)}
>
<option value="">-- Selecciona un tiempo --</option>
<option value="15">15 minutos</option>
</select>
<button className="button buttonSearch">registrar</button>
</div>
<label className='label'>Carrera</label>
<input
type='text'
//value={user}
//onChange={(e) => setUser(e.target.value)}
placeholder='Coloca '
/>
</div>
</StepNavigator>
</section>
);
}
app/Components/BarNavigation/BarNavigation.css
+5 -1
View File
@@ -54,7 +54,7 @@
position: relative;
z-index: 1;
border-radius: 4px 4px 0 0;
padding: 15px 0;
padding: 5px 0;
}
.subMenu ul {
@@ -102,8 +102,12 @@
}
.links {
display: flex;
justify-content: center;
align-items: center;
color: white;
width: 100%;
height: 100%;
}
.subMenu:hover .links {
app/Components/BarNavigation/BarNavigation.tsx
+14 -13
View File
@@ -25,13 +25,13 @@ function BarNavigation() {
<li className={`subMenu ${openSubMenu === 0 ? "open" : ""}`}>
<span onClick={() => toggleSubMenu(0)}>Inscripciones</span>
<ul className="containerLinks">
<Link href="/Alta" className="links">
<Link href="/Alta">
<li >Alta</li>
</Link>
<Link href="/AgregarTiempo" className="links">
<Link href="/AgregarTiempo" >
<li >Agregar Tiempo</li>
</Link>
<Link href="/Inscripciones" className="links">
<Link href="/Inscripciones">
<li>Inscripciones</li>
</Link>
</ul>
@@ -40,22 +40,22 @@ function BarNavigation() {
<li className={`subMenu ${openSubMenu === 1 ? "open" : ""}`}>
<span onClick={() => toggleSubMenu(1)}>Servicios</span>
<ul>
<Link href="/Impresiones" className="links">
<Link href="/Impresiones">
<li >
Impresiones y Ploteo
</li>
</Link>
<Link href="/AsignacionMesas" className="links">
<Link href="/AsignacionMesas">
<li>
Asignacion de Mesas
</li>
</Link>
<Link href="/AsignacionEquipo" className="links">
<Link href="/AsignacionEquipo">
<li>
Asignacion de Equipos
</li>
</Link>
<Link href="/Monitor" className="links">
<Link href="/Monitor">
<li>
Monitor
</li>
@@ -66,16 +66,16 @@ function BarNavigation() {
<li className={`subMenu ${openSubMenu === 2 ? "open" : ""}`}>
<span onClick={() => toggleSubMenu(2)}>Equipo</span>
<ul >
<Link href="/InformacionEquipo" className="links">
<Link href="/InformacionEquipo">
<li>Informacion de Equipos</li>
</Link>
<Link href="/ActivosMantenimiento" className="links">
<Link href="/ActivosMantenimiento">
<li >Activos y en Mantenimiento</li>
</Link>
<Link href="/Mensajes" className="links">
<Link href="/Mensajes">
<li>Mensajes</li>
</Link>
<Link href="/Programas" className="links">
<Link href="/Programas">
<li>Programas</li>
</Link>
</ul>
@@ -96,12 +96,12 @@ function BarNavigation() {
</Link>
</ul>
</li>
<li className={`subMenu`}>
<li className="subMenu">
<Link href="/QuitarSancion" className="links">
Quitar sancion
</Link>
</li>
<li className={`subMenu`}>
<li className="subMenu">
<Link href="CambiarPass" className="links">
Cambiar contraseña
</Link>
@@ -112,3 +112,4 @@ function BarNavigation() {
}
export default BarNavigation;
//IO
app/Components/Impressions/impressions.tsx
+23 -4
View File
@@ -3,8 +3,16 @@
import { useState } from "react";
import './Impressions.css'
function Impressions() {
const [pages, setPages] = useState('');
interface CostOption {
value: number;
}
interface ImpressionsProps {
costs: CostOption[];
}
function Impressions({ costs }:ImpressionsProps) {
const [pages, setPages] = useState("");
const [cost, setCost] = useState("");
const [error, setError] = useState('');
const [alert, setAlert] = useState('');
@@ -54,8 +62,19 @@ function Impressions() {
}}>
<div className="gap">
<div className='groupLabel'>
<label className='label'>Costo: $1.00</label>
<div className='groupInput'>
<label className='label'>Costo:</label>
<select
value={cost}
onChange={(e) => setCost(e.target.value)}
>
<option value="">-- Selecciona un tiempo --</option>
{costs.map((c) => (
<option key={c.value} value={c.value}>
${c.value}
</option>
))}
</select>
</div>
<div className='groupInput'>
app/Impresiones/page.tsx
+24 -4
View File
@@ -32,22 +32,42 @@ export default function Page() {
{
key: "2",
label: "Impresiones B/N",
content: <Impressions />,
content: <Impressions
costs={[
{ value: 1 },
{ value: 2 },
]}
/>,
},
{
key: "3",
label: "Impresiones color",
content: <Impressions />,
content: <Impressions
costs={[
{ value: 2 },
{ value: 4 },
]}
/>,
},
{
key: "4",
label: "Plotter",
content: <Impressions />,
content: <Impressions
costs={[
{ value: 1 },
{ value: 2 },
]}
/>,
},
{
key: "5",
label: "Escaner",
content: <Impressions />,
content: <Impressions
costs={[
{ value: 1 },
{ value: 2 },
]}
/>,
},
]}
/>
app/globals.css
+2 -1
View File
@@ -74,7 +74,7 @@ footer {
border-radius: 4px;
width: 90%;
max-width: 1100px;
height: 520px;
height: 550px;
min-height: 520px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
overflow: hidden;
@@ -202,6 +202,7 @@ a {
background-color: #f3f4f6;
width: 100%;
max-width: 400px;
margin-top: 10px;
}
.information ul{