CIDWA/cargaMasiva_front
13
0
Fork 0
Code Issues Pull Requests Actions Releases Wiki Activity

GUI validada final

Browse Source
This commit is contained in:
Your Name
2025-06-25 06:20:58 -06:00
parent f27effa389
commit 20f01dccb3
9 changed files with 331 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/(auth)/page.tsx
+97 -17
View File
@@ -1,24 +1,85 @@
"use client";
import Button from "@/components/button";
import SimpleInput from "@/components/input";
import PasswordInput from "@/components/password";
import React from "react";
import React, { useState } from "react";
import axios from "axios";
import { useRouter } from "next/navigation";
import { motion } from "framer-motion";
// Estilos CSS adicionales para el input group
const inputGroupStyles = `
.auth-page .input-group {
display: flex !important;
align-items: stretch !important;
}
.auth-page .input-group .form-control {
border-right: none !important;
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
.auth-page .input-group .btn {
border-left: none !important;
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
padding: 0.375rem 0.75rem !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 40px !important;
}
`;
export default function Page() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState('');
const router = useRouter();
const handleLogin = async () => {
try {
const response = await axios.post('http://localhost:4000/login', {
email: email,
password: password,
});
const token = response.data.access_token;
localStorage.setItem('token', token);
// Disparar evento personalizado para notificar cambio de token
window.dispatchEvent(new Event('tokenChanged'));
// Limpiar formulario
setEmail('');
setPassword('');
setError('');
// Opcional: mostrar mensaje de éxito
alert('Login exitoso. Ahora puedes acceder a Carga y Visualización.');
} catch (err: any) {
const message =
err.response?.data?.message ||
err.message ||
'Error al iniciar sesión';
setError(message);
}
};
return (
<motion.main
className="flex-fill flex-grow-1 d-flex flex-column justify-content-center align-items-center"
initial={{ y: 50, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0, duration: .5 }}
>
<>
{/* Inyectar estilos CSS */}
<style dangerouslySetInnerHTML={{ __html: inputGroupStyles }} />
<motion.main
className="auth-page flex-fill flex-grow-1 d-flex flex-column justify-content-center align-items-center"
initial={{ y: 50, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0, duration: .5 }}
>
<h2 className="text-dorado">Bienvenido al sistema de</h2>
<h1 className="text-azul">Carga Masiva</h1>
<SimpleInput
@@ -26,15 +87,34 @@ export default function Page() {
className={{
container: "w-300px mb-3",
}}
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<PasswordInput
label="Contraseña"
className={{
container: "w-300px mb-3",
input: "form-control",
button: "btn btn-outline-secondary"
}}
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<Button>Iniciar Sesión</Button>
</motion.main>
{error && (
<p className="text-danger text-center mb-3">{error}</p>
)}
<div className="d-flex gap-3">
<Button onClick={handleLogin}>Iniciar Sesión</Button>
{/* <Button
onClick={() => router.replace("/visualizacion")}
className="btn-success"
>
Iniciar Sin Contraseña
</Button> */}
</div>
</motion.main>
</>
);
}
}
src/app/carga/page.tsx
-1
View File
@@ -5,7 +5,6 @@ import FuenteCard from "@/components/fuenteCard";
import CargaArchivo from "@/components/cargaArchivo";
import Button from "@/components/button";
import { useAuthRedirect } from "@/hooks/auth";
import CargaArchivo from "@/components/cargaArchivo";
interface Fuente {
nombre: string;
src/app/landing/IconCircle.css
+19 -6
View File
@@ -13,8 +13,8 @@
.central-icon {
position: absolute;
top: 50%;
left: 50%;
top: 40%;
left: 40%;
transform: translate(-50%, -50%);
font-size: 2rem;
background: white;
@@ -24,6 +24,19 @@
z-index: 1;
}
.central-icon i {
color: #000; /* Negro para el icono central */
}
.orbiting-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
}
.floating-icon {
position: absolute;
width: 40px;
@@ -33,13 +46,13 @@
display: flex;
justify-content: center;
align-items: center;
top: 50%;
left: 50%;
transform: rotate(calc(45deg * var(--i))) translate(130px) rotate(calc(-45deg * var(--i)));
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
/* Centrar el icono en el punto de origen */
margin-top: -20px;
margin-left: -20px;
}
.floating-icon i {
font-size: 1.25rem;
color: #7c3aed; /* Morado como el diseño */
color: #d59f0f; /* Dorado UNAM */
}
src/app/landing/IconCircle.tsx
+53 -21
View File
@@ -22,37 +22,69 @@ interface IconCircleProps {
const IconCircle: React.FC<IconCircleProps> = ({ delay = 0 }) => {
return (
<div className="icon-circle">
{/* Icono central fijo */}
<motion.div
className="central-icon"
initial={{ scale: 0 }}
animate={{ scale: 1, rotate: 1080 }}
animate={{ scale: 1 }}
transition={{ duration: 1, delay }}
>
<i className="bi bi-stars"></i>
</motion.div>
{iconClasses.map((iconClass, i) => (
<motion.div
key={i}
className="floating-icon"
initial={{
transform: 'translate(0, 0) scale(0)',
opacity: 0,
}}
animate={{
transform: `rotate(${i * 45}deg) translate(130px) rotate(-${i * 45}deg)`,
scale: 1,
opacity: 1,
}}
{/* Contenedor que orbita con los iconos flotantes */}
<motion.div
className="orbiting-container"
animate={{ rotate: 360 }}
transition={{
delay: delay + 0.5 + i * 0.1, // empieza después del centro
duration: 0.5,
type: 'spring',
duration: 30,
repeat: Infinity,
ease: "linear"
}}
>
<i className={iconClass}></i>
</motion.div>
))}
>
{iconClasses.map((iconClass, i) => {
const angle = (i * 45) * (Math.PI / 180); // Convertir a radianes
const radius = 130;
const x = Math.cos(angle) * radius;
const y = Math.sin(angle) * radius;
return (
<motion.div
key={i}
className="floating-icon"
style={{
left: x,
top: y,
}}
initial={{
scale: 0,
opacity: 0,
}}
animate={{
scale: 1,
opacity: 1,
}}
transition={{
delay: delay + 0.5 + i * 0.1,
duration: 0.5,
type: 'spring',
}}
>
<motion.i
className={iconClass}
animate={{
rotate: 360
}}
transition={{
duration: 20 + i * 2,
repeat: Infinity,
ease: "linear"
}}
></motion.i>
</motion.div>
);
})}
</motion.div>
</div>
);
};
src/app/landing/globals.css
+2 -2
View File
@@ -28,7 +28,7 @@
header div:first-child {
font-size: 1.5rem;
color: #5b2edd;
color: #003d79;
}
.nav-links {
@@ -84,7 +84,7 @@
/* Botón principal */
div > button {
margin-top: 1rem;
background-color: #5b2edd;
background-color: #003d79;
color: white;
padding: 0.7rem 2rem;
border: none;
src/app/landing/landing_body.tsx
+7 -4
View File
@@ -14,14 +14,17 @@ export default function LandingBody() {
>
<IconCircle delay={2} />
<strong>Explore markets ready for trading</strong>
<strong>Servicios de soporte técnico PCPUMA</strong>
<p>
Explore 300+ trading instruments across 10+ asset classes with Alchemy
Markets. Trade Forex, Stocks, Indices, and more!
Accede a PC PUMA Conecta para reportes especializados, módulos de soporte físico
en campus, servicio de correo institucional y herramientas de gestión académica.
</p>
<div>
<button>Start Trading</button>
<button onClick={() => window.open('https://www.acatlan.unam.mx/pcpuma/', '_blank')}>
Conoce PCPUMA
</button>
<div>
<i></i>
</div>
src/app/landing/new_header.tsx
+43 -7
View File
@@ -3,16 +3,50 @@
import { motion } from "framer-motion";
import Image from "next/image";
import Link from "next/link";
import { useState, useEffect } from "react";
interface HeaderProps {
onNavClick: (page: string) => void;
onNavClick: (page: any) => void;
}
export default function Header({ onNavClick }: HeaderProps) {
const [hasToken, setHasToken] = useState(false);
useEffect(() => {
// Función para verificar token
const checkToken = () => {
const token = localStorage.getItem('token');
setHasToken(!!token);
};
// Verificar token al montar
checkToken();
// Escuchar cambios en localStorage
const handleStorageChange = (e: StorageEvent) => {
if (e.key === 'token') {
checkToken();
}
};
// Escuchar evento personalizado para cambios de token
const handleTokenChange = () => {
checkToken();
};
window.addEventListener('storage', handleStorageChange);
window.addEventListener('tokenChanged', handleTokenChange);
return () => {
window.removeEventListener('storage', handleStorageChange);
window.removeEventListener('tokenChanged', handleTokenChange);
};
}, []);
return (
<motion.header
initial={{ x: -100, opacity: 0 }}
@@ -48,16 +82,18 @@ export default function Header({ onNavClick }: HeaderProps) {
<nav className="nav-links">
{[
{ label: "Landing", page: "landing" },
{ label: "Login", page: "login" },
{ label: "carga", page: "carga" },
{ label: "consulta", page: "consulta" },
{ label: "Público", page: "publico" },
{ label: "Inicio", page: "landing" },
{ label: "Login", page: "login", isLogin: true },
...(hasToken ? [
{ label: "Carga", page: "carga" },
{ label: "Consulta", page: "consulta" },
] : [])
].map((item) => (
<a
key={item.page}
onClick={() => onNavClick(item.page)}
className={item.isLogin ? "text-dorado fw-bold" : ""}
style={item.isLogin ? { color: '#fbbf24', fontWeight: 'bold' } : {}}
>
{item.label}
</a>
src/app/page.tsx
+93
View File
@@ -0,0 +1,93 @@
"use client";
import "./landing/globals.css";
import "bootstrap-icons/font/bootstrap-icons.css";
import IconCircle from "./landing/IconCircle";
import { motion } from "framer-motion";
import Image from "next/image";
import Link from "next/link";
import Header from "./landing/new_header"; // ajusta la ruta si estás en otra carpeta
import Footer from "@/components/layout/footer";
import LandingBody from "./landing/landing_body";
import { useState } from "react";
import Page from "./(auth)/page";
import Dashboard from "./carga/page";
import Consulta from "./visualizacion/page";
type PageKey = "landing" | "login" | "carga" | "consulta" | "publico";
const Home = () => {
const [page, setPage] = useState<PageKey>("landing");
return (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1 }}
className="page-wrapper d-flex flex-column min-vh-100"
>
<div className="circle-background">
{[150, 300, 450, 600, 900].map((size, i) => (
<motion.div
key={i}
className="circle"
initial={{ scale: 0 }}
animate={{ scale: 3 }}
transition={{
delay: 1 + i * 0.3, // empieza después de la animación del texto
duration: 2,
ease: "easeOut",
}}
style={{
width: size,
height: size,
}}
/>
))}
</div>
{/* ⬇️ Tu contenido principal */}
<Header onNavClick={setPage} />
{/* <LandingBody />*/}
{/* renderiza el body según el estado `page` */}
{page === "landing" && <LandingBody />}
{page === "login" && <Page />}
{page === "carga" && <Dashboard />}
{page === "consulta" && <Consulta />}
{/* <Login />
<contenidoAdmin1 />
<contenidoWorker />
<contenidoPublico />
*/}
<Footer></Footer>
</motion.div>
);
};
export default Home;
src/components/password.tsx
+17 -1
View File
@@ -48,12 +48,18 @@ export default function PasswordInput(props: PasswordInputProps) {
{label}
</label>
)}
<div className="input-group">
<div className="input-group" style={{ display: 'flex', alignItems: 'stretch' }}>
<input
id={inputId}
name={name}
type={inputType}
className={className?.input || 'form-control'}
style={{
borderRight: 'none',
borderTopRightRadius: 0,
borderBottomRightRadius: 0,
flex: 1
}}
{...rest}
/>
<button
@@ -62,6 +68,16 @@ export default function PasswordInput(props: PasswordInputProps) {
onClick={toggleVisibility}
aria-label={visible ? 'Ocultar contraseña' : 'Mostrar contraseña'}
title={visible ? 'Ocultar contraseña' : 'Mostrar contraseña'}
style={{
borderLeft: 'none',
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0,
padding: '0.375rem 0.75rem',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
minWidth: '40px'
}}
>
<i className={`bi ${visible ? 'bi-eye-slash' : 'bi-eye'}`} />
</button>