From 20f01dccb32d7b10d2ad827967d532a8ae8041e1 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Wed, 25 Jun 2025 06:20:58 -0600
Subject: [PATCH] GUI validada final

---
 src/app/(auth)/page.tsx          | 114 ++++++++++++++++++++++++++-----
 src/app/carga/page.tsx           |   1 -
 src/app/landing/IconCircle.css   |  25 +++++--
 src/app/landing/IconCircle.tsx   |  74 ++++++++++++++------
 src/app/landing/globals.css      |   4 +-
 src/app/landing/landing_body.tsx |  11 +--
 src/app/landing/new_header.tsx   |  50 ++++++++++++--
 src/app/page.tsx                 |  93 +++++++++++++++++++++++++
 src/components/password.tsx      |  18 ++++-
 9 files changed, 331 insertions(+), 59 deletions(-)
 create mode 100644 src/app/page.tsx

diff --git a/src/app/(auth)/page.tsx b/src/app/(auth)/page.tsx
index 1d31a6b..5368192 100644
--- a/src/app/(auth)/page.tsx
+++ b/src/app/(auth)/page.tsx
@@ -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>
+    </>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/carga/page.tsx b/src/app/carga/page.tsx
index 98edfff..230562e 100644
--- a/src/app/carga/page.tsx
+++ b/src/app/carga/page.tsx
@@ -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;
diff --git a/src/app/landing/IconCircle.css b/src/app/landing/IconCircle.css
index 7f6f6e5..47adb46 100644
--- a/src/app/landing/IconCircle.css
+++ b/src/app/landing/IconCircle.css
@@ -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 */
 }
diff --git a/src/app/landing/IconCircle.tsx b/src/app/landing/IconCircle.tsx
index 6fd4acb..2d8ea86 100644
--- a/src/app/landing/IconCircle.tsx
+++ b/src/app/landing/IconCircle.tsx
@@ -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>
     );
 };
diff --git a/src/app/landing/globals.css b/src/app/landing/globals.css
index 4ed1e28..52cbd2b 100644
--- a/src/app/landing/globals.css
+++ b/src/app/landing/globals.css
@@ -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;
diff --git a/src/app/landing/landing_body.tsx b/src/app/landing/landing_body.tsx
index d7664aa..3f3ea96 100644
--- a/src/app/landing/landing_body.tsx
+++ b/src/app/landing/landing_body.tsx
@@ -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>
diff --git a/src/app/landing/new_header.tsx b/src/app/landing/new_header.tsx
index cb8e887..e25a155 100644
--- a/src/app/landing/new_header.tsx
+++ b/src/app/landing/new_header.tsx
@@ -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>
diff --git a/src/app/page.tsx b/src/app/page.tsx
new file mode 100644
index 0000000..1095263
--- /dev/null
+++ b/src/app/page.tsx
@@ -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;
\ No newline at end of file
diff --git a/src/components/password.tsx b/src/components/password.tsx
index d643c0d..2c58547 100644
--- a/src/components/password.tsx
+++ b/src/components/password.tsx
@@ -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>