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

new view and components

Browse Source
This commit is contained in:
Lino
2025-09-03 20:41:25 -04:00
parent 685c92a82f
commit 2da630c8a8
29 changed files with 680 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/Components/BarNavigation/BarNavigation.tsx
+22 -3
View File
@@ -81,9 +81,28 @@ function BarNavigation() {
</ul>
</li>
<li className={`subMenu ${openSubMenu === 2 ? "open" : ""}`}>Reportes</li>
<li className={`subMenu ${openSubMenu === 2 ? "open" : ""}`}>Quitar sancion</li>
<li className={`subMenu ${openSubMenu === 2 ? "open" : ""}`}>Cambiar contraseña</li>
<li className={`subMenu ${openSubMenu === 2 ? "open" : ""}`}>
Reportes
<ul>
<Link href="/Recibo">
<li>Recibo</li>
</Link>
<Link href="/Inscritos">
<li>Inscritos</li>
</Link>
<Link href="/BitacoraSanciones">
<li>Bitacora y sanciones</li>
</Link>
</ul>
</li>
<Link href="/QuitarSancion" className={`subMenu ${openSubMenu === 2 ? "open" : ""}`}>
<li>
Quitar sancion
</li>
</Link>
<li className={`subMenu ${openSubMenu === 2 ? "open" : ""}`}>
Cambiar contraseña
</li>
</ul>
</nav>
);
app/Components/Impressions/Impressions.css
-6
View File
@@ -1,6 +0,0 @@
.impressions {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1rem;
}
app/Components/Impressions/impressions.tsx
+5 -2
View File
@@ -1,6 +1,8 @@
'use client'
import { useState } from "react";
import './Impressions.css'
function Impressions() {
const [pages, setPages] = useState('');
@@ -50,8 +52,8 @@ function Impressions() {
e.preventDefault();
// handlePayment();
}}>
<div className="gap">
<div className='impressions'>
<div className='groupLabel'>
<label className='label'>Costo: $1.00</label>
</div>
@@ -100,4 +102,5 @@ function Impressions() {
)
}
export default Impressions
export default Impressions
//IO
app/Components/Information/information.tsx
+24
View File
@@ -0,0 +1,24 @@
'use client';
interface InformationProps {
[key: string]: string | number | undefined;
}
export default function Information(props: InformationProps) {
// Obtenemos las entradas (key + value) y filtramos los que sean undefined
const entries = Object.entries(props).filter(([_, value]) => value !== undefined);
if (entries.length === 0) return null; // no mostrar nada si no hay datos
return (
<div className="information">
<ul>
{entries.map(([key, value]) => (
<li key={key}>
<b>{key}: </b>{value}
</li>
))}
</ul>
</div>
);
}
app/Components/Login/Login.css
+13
View File
@@ -2,6 +2,13 @@
width: 300px;
}
.center{
display: grid;
grid-template-columns: auto 400px;
justify-content: center;
align-items: center;
}
.relative {
position: relative;
}
@@ -17,3 +24,9 @@
background-size: cover;
cursor: pointer;
}
@media(max-width:800px){
.center{
display: flex;
}
}
app/Components/Login/Login.tsx
+1 -1
View File
@@ -2,7 +2,7 @@ import "./Login.css";
function Login() {
return (
<section className='containerSection'>
<section className='center containerSection'>
<form
className='login'
app/Components/Receipt/Receipt.tsx
+67 -58
View File
@@ -54,71 +54,80 @@ function Receipt() {
// handleSaveReceipt();
}}
>
<div className='groupInput'>
<label className='label'>Folio:</label>
<input
type='text'
value={folio}
onChange={(e) => {
const value = e.target.value;
if (/^\d*$/.test(value)) {
setFolio(value);
}
}}
placeholder='Numero de folio...'
inputMode='numeric'
pattern='[0-9]*'
/>
</div>
<div className='groupInput'>
<label className='label'>Monto:</label>
<input
type='text'
value={amount}
onChange={(e) => {
const value = e.target.value;
<div className="gap">
if (/^\d*\.?\d*$/.test(value)) {
const numericValue = parseFloat(value);
if (value === '' || (numericValue <= 1000)) {
setAmount(value);
} else {
setAlert('')
setError('El monto no puede superar $1000.00')
<div className='groupInput'>
<label className='label'>Folio:</label>
<input
type='text'
value={folio}
onChange={(e) => {
const value = e.target.value;
if (/^\d*$/.test(value)) {
setFolio(value);
}
}
}}
placeholder='Monto recibido...'
inputMode='numeric'
pattern="^\d*\.?\d+$"
/>
</div>
}}
placeholder='Numero de folio...'
inputMode='numeric'
pattern='[0-9]*'
/>
</div>
<div className='groupInput'>
<label className='label'>Fecha de Pago:</label>
<input
type='date'
value={date}
onChange={(e) => setDate(e.target.value)}
min={minFecha}
max={maxFecha}
/>
</div>
<div className='groupInput'>
<label className='label'>Monto:</label>
<input
type='text'
value={amount}
onChange={(e) => {
const value = e.target.value;
<div className='containerButton'>
if (/^\d*\.?\d*$/.test(value)) {
const numericValue = parseFloat(value);
{error &&
<div className={`messageBox error ${!showError ? 'hidden' : ''}`}>
{error}
</div>
}
{alert &&
<div className={`messageBox success ${!showAlert ? 'hidden' : ''}`}>
{alert}
</div>
}
if (value === '' || (numericValue <= 1000)) {
setAmount(value);
} else {
setAlert('')
setError('El monto no puede superar $1000.00')
}
}
}}
placeholder='Monto recibido...'
inputMode='numeric'
pattern="^\d*\.?\d+$"
/>
</div>
<div className='groupInput'>
<label className='label'>Fecha de Pago:</label>
<input
type='date'
value={date}
onChange={(e) => setDate(e.target.value)}
min={minFecha}
max={maxFecha}
/>
</div>
<div className='containerButton'>
<button
className="button buttonSearch">
Guardar
</button>
{error &&
<div className={`messageBox error ${!showError ? 'hidden' : ''}`}>
{error}
</div>
}
{alert &&
<div className={`messageBox success ${!showAlert ? 'hidden' : ''}`}>
{alert}
</div>
}
</div>
</div>
</form>
)
app/Components/SearchUser/searchUser.tsx
+9 -8
View File
@@ -1,11 +1,12 @@
'use client'
import { useState } from "react";
import Information from "../Information/information";
function SearchUser() {
const [numAccount, setNumAccount] = useState('');
return (
<>
<form>
<form className="containerForm">
<label className='label'>No.Cuenta</label>
<div className='groupInput'>
<input
@@ -28,13 +29,13 @@ function SearchUser() {
</button>
</div>
</form>
<div className='information'>
<label><b>No.Cuenta: </b>id_cuenta</label>
<label><b>Nombre: </b>nombre</label>
<label><b>Carrera: </b>carrera</label>
<label><b>Crédito: </b>credito</label>
</div>
<Information
NoCuenta="idcuanta"
Nombre="juan"
Carrera="carrera"
Credito="credito"
/>
</>
)
}
app/Components/Selection/Selection.tsx
-4
View File
@@ -15,10 +15,6 @@ function Selection() {
name: "MACINTOSH",
img: "https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg",
},
{
name: "LINUX",
img: "https://upload.wikimedia.org/wikipedia/commons/3/35/Tux.svg",
},
{
name: "PROFESORES",
img: "https://cdn-icons-png.flaticon.com/512/3135/3135715.png",
app/Components/StepNavigator/StepNavigator.css
+2 -1
View File
@@ -1,4 +1,5 @@
.receipt {
.stepNavigator {
position: relative;
max-width: 600px;
margin-top: 1rem;
border: 1px solid #e5e7eb;
app/Components/StepNavigator/StepNavigator.tsx
+11 -9
View File
@@ -24,10 +24,10 @@ export default function StepNavigator({ totalSteps, children, onFinish }: StepNa
};
return (
<div className="receipt">
<section className="stepNavigator">
{children[step - 1]}
<div className="buttonContainer">
<div className="absoluteButton">
{step > 1 && (
<button
onClick={handlePrev}
@@ -36,13 +36,15 @@ export default function StepNavigator({ totalSteps, children, onFinish }: StepNa
</button>
)}
<button
onClick={handleNext}
className="button buttonSearch"
>
{step === totalSteps ? "Inscribir" : "Siguiente"}
</button>
{step < totalSteps &&
<button
onClick={handleNext}
className="button buttonSearch"
>
Siguiente
</button>
}
</div>
</div>
</section>
);
}
app/Components/Toggle/Toggle.tsx
+38
View File
@@ -0,0 +1,38 @@
"use client";
import { useState, ReactNode } from "react";
interface ToggleOption {
key: string;
label: string;
content: ReactNode;
}
interface ToggleProps {
options: ToggleOption[];
defaultView?: string;
}
export default function Toggle({ options, defaultView }: ToggleProps) {
const [view, setView] = useState(defaultView || options[0].key);
return (
<section className="toggleSection">
<div className="toggleGroup">
{options.map((opt) => (
<button
key={opt.key}
className={`toggleButton ${view === opt.key ? "active" : ""}`}
onClick={() => setView(opt.key)}
>
{opt.label}
</button>
))}
</div>
<div className="padding">
{options.find((opt) => opt.key === view)?.content}
</div>
</section>
);
}