From fe842952a945cd7184470583ad619c476e5355f1 Mon Sep 17 00:00:00 2001
From: IO420 <320154041@pcpuma.acatlan.unam.mx>
Date: Thu, 4 Sep 2025 18:04:41 -0400
Subject: [PATCH] modification impression component and fixed barNavigation

---
 app/Alta/page.tsx                             | 112 +++++++++---------
 .../BarNavigation/BarNavigation.css           |   6 +-
 .../BarNavigation/BarNavigation.tsx           |  27 +++--
 app/Components/Impressions/impressions.tsx    |  27 ++++-
 app/Impresiones/page.tsx                      |  28 ++++-
 app/globals.css                               |   3 +-
 6 files changed, 124 insertions(+), 79 deletions(-)

diff --git a/app/Alta/page.tsx b/app/Alta/page.tsx
index 77cb778..2d6431f 100644
--- a/app/Alta/page.tsx
+++ b/app/Alta/page.tsx
@@ -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>
   );
 }
diff --git a/app/Components/BarNavigation/BarNavigation.css b/app/Components/BarNavigation/BarNavigation.css
index 260f47d..fcd37b7 100644
--- a/app/Components/BarNavigation/BarNavigation.css
+++ b/app/Components/BarNavigation/BarNavigation.css
@@ -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 {
diff --git a/app/Components/BarNavigation/BarNavigation.tsx b/app/Components/BarNavigation/BarNavigation.tsx
index 895bba3..a3a12d6 100644
--- a/app/Components/BarNavigation/BarNavigation.tsx
+++ b/app/Components/BarNavigation/BarNavigation.tsx
@@ -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
\ No newline at end of file
diff --git a/app/Components/Impressions/impressions.tsx b/app/Components/Impressions/impressions.tsx
index e54d0b5..c8bc9c3 100644
--- a/app/Components/Impressions/impressions.tsx
+++ b/app/Components/Impressions/impressions.tsx
@@ -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'>
diff --git a/app/Impresiones/page.tsx b/app/Impresiones/page.tsx
index d0067e6..a6e0682 100644
--- a/app/Impresiones/page.tsx
+++ b/app/Impresiones/page.tsx
@@ -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 },
+              ]} 
+              />,
           },
         ]}
       />
diff --git a/app/globals.css b/app/globals.css
index dea32eb..ed499e8 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -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{