Se cambiaron estilos

- Updated the Dashboard component to simplify layout and styling.
- Enhanced IconCircle component with improved CSS for better alignment and display.
- Refactored global styles for consistency and clarity.
- Improved LandingBody component to utilize Link for navigation.
- Revamped Header component to manage navigation state more effectively.
- Implemented a new LoginPage component for user authentication.
- Introduced useSession hook for managing user session state.
- Updated CargaArchivo component to use a consistent Button component.
- Enhanced Consulta component for better error handling and display.
- Cleaned up Footer component styling and structure.

package-lock.json

@@ -12,6 +12,7 @@
         "bootstrap": "^5.3.6",
         "bootstrap-icons": "^1.13.1",
         "framer-motion": "^12.18.1",
+        "jwt-decode": "^4.0.0",
         "next": "15.3.3",
         "react": "^19.0.0",
         "react-dom": "^19.0.0"
@@ -1193,6 +1194,15 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/jwt-decode": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
+      "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",

package.json

@@ -13,6 +13,7 @@
     "bootstrap": "^5.3.6",
     "bootstrap-icons": "^1.13.1",
     "framer-motion": "^12.18.1",
+    "jwt-decode": "^4.0.0",
     "next": "15.3.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

src/app/(auth)/old_login.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import Input from "@/components/input";
+import PasswordInput from "@/components/password";
+import { useState } from "react";
+import axios from "axios";
+import { useRouter } from "next/navigation";
+
+
+export default function Login() {
+  const [value, setValue] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const router = useRouter();
+
+  const handleLogin = async () => {
+    try {
+      const response = await axios.post('https://venus.acatlan.unam.mx/servicios_pcpuma_test/login', {
+        email: value,
+        password: password,
+      });
+
+
+
+      const token = response.data.access_token;
+      localStorage.setItem('token', token);
+
+      // Redirige al usuario
+      window.location.href = '/carga';
+    } catch (err: any) {
+      const message =
+        err.response?.data?.message ||
+        err.message ||
+        'Error al iniciar sesión';
+      setError(message);
+    }
+  };
+
+  return (
+    <main style={{
+      minHeight: "100vh",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      background: "#063970"
+    }}>
+      <div style={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        background: "#f3f4f6",
+        padding: "2rem",
+        borderRadius: "8px",
+        boxShadow: "0 4px 6px rgba(253, 253, 253, 0.1)",
+        width: "100%",
+      }}>
+        <div style={{
+          background: "#f3f4f6",
+          padding: "2rem",
+          borderRadius: "8px",
+          boxShadow: "0 4px 6px rgba(253, 253, 253, 0.1)",
+          width: "100%",
+          maxWidth: "400px",
+        }}>
+          <h2 style={{ color: "#fbbf24", textAlign: "center", marginBottom: "0.25rem" }}>Inicio de sesión</h2>
+          <h1 style={{ color: "#1e3a8a", textAlign: "center", fontWeight: "bold", marginBottom: "2rem" }}>Sistema de --------</h1>
+
+          <Input
+            label="Correo"
+            placeholder="escribe tu correo"
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+          />
+
+          <PasswordInput
+            label="Contraseña"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+
+          {error && (
+            <p style={{ color: "red", marginTop: "0.5rem", textAlign: "center" }}>{error}</p>
+          )}
+
+          <div style={{
+            display: "flex",
+            flexDirection: "row",
+            justifyContent: "center",
+            gap: "16px",
+          }}>
+            <button
+              type="button"
+              onClick={handleLogin}
+              style={{
+                width: "100%",
+                padding: "0.5rem",
+                marginTop: "1rem",
+                backgroundColor: "#2563eb",
+                color: "#fff",
+                fontWeight: "bold",
+                border: "none",
+                borderRadius: "4px",
+                cursor: "pointer"
+              }}
+            >
+              Iniciar Sesión
+            </button>
+            <button
+              type="button"
+              onClick={() => router.replace("/visualizacion")}
+              style={{
+                width: "100%",
+                padding: "0.5rem",
+                marginTop: "1rem",
+                backgroundColor: "#009939",
+                color: "#fff",
+                fontWeight: "bold",
+                border: "none",
+                borderRadius: "4px",
+                cursor: "pointer",
+              }}
+            >
+              Iniciar Sesión Sin Contraseña
+            </button>
+
+
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}

src/app/(auth)/page.tsx

@@ -1,40 +1,91 @@
+"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";
+const apiUrl = process.env.NEXT_PUBLIC_API_URL;
 
 
 export default function Page() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const router = useRouter();
+
+  const handleLogin = async () => {
+    setLoading(true);
+    try {
+      const response = await axios.post(`${apiUrl}/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("");
+
+
+
+    } catch (err: any) {
+      const message =
+        err.response?.data?.message || err.message || "Error al iniciar sesión";
+      setError(message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
   return (
+    <>
+      <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: 0.5 }}
+      >
+        <h2 className="text-dorado">Bienvenido al sistema de</h2>
+        <h1 className="text-dorado">Servicios PC PUMA y CEDETEC</h1>
 
+        <SimpleInput
+          label="Usuario"
+          className={{
+            container: "w-300px mb-3",
+          }}
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+        />
 
-        <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 }}
-    >
+        <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)}
+        />
 
-  
-      <h2 className="text-dorado">Bienvenido al sistema de</h2>
-      <h1 className="text-azul">Carga Masiva</h1>
-      <SimpleInput
-        label="Usuario"
-        className={{
-          container: "w-300px mb-3",
-        }}
-      />
-      <PasswordInput
-        label="Contraseña"
-        className={{
-          container: "w-300px mb-3",
-        }}
-      />
-      <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} disabled={loading}>
+            {loading ? "Iniciando sesión..." : "Iniciar Sesión"}
+          </Button>
+        </div>
+      </motion.main>
+    </>
   );
 }

src/app/alta/alta.tsx

@@ -0,0 +1,208 @@
+"use client";
+
+import React, { useState } from "react";
+
+const apiUrl = process.env.NEXT_PUBLIC_API_URL;
+
+const tiposUsuarioEstudiante = [
+    "Diplomado", "Extra Largo", "Servicio Social", "Idiomas R (UNAM)",
+    "Idiomas Sabatino", "Reinscrito", "Posgrado", "Intercambio UNAM",
+    "Movilidad", "Ampliación de Conocimiento", "Licenciatura",
+];
+
+const tiposUsuarioEspecial = ["Caso especial"];
+
+const tiposUsuarioTrabajador = ["Profesor", "Trabajadores"];
+
+const FormularioCargaIndividual = () => {
+    const [tipoUsuario, setTipoUsuario] = useState("");
+    const [formData, setFormData] = useState<any>({});
+    const [errores, setErrores] = useState<string[]>([]);
+    const [mensaje, setMensaje] = useState("");
+    const [guardando, setGuardando] = useState(false); // 🔹 Estado para controlar el botón
+
+    const camposEstudiante = [
+        "num_cuenta", "carrera", "clave_carrera", "nombre",
+        "a_paterno", "a_materno", "fecha_nacimiento", "genero", "generacion",
+    ];
+
+    const camposEspecial = [
+        "nombre", "a_paterno", "a_materno", "contraseña",
+        "usuario",
+    ];
+
+    const camposTrabajador = [
+        "num_cuenta", "nombre", "a_paterno", "a_materno", "rfc",
+        "fecha_nacimiento", "genero", "carrera", "clave_carrera",
+    ];
+
+    const camposVisibles =
+        tipoUsuario === ""
+            ? []
+            : tiposUsuarioEstudiante.includes(tipoUsuario)
+                ? camposEstudiante
+                : tiposUsuarioTrabajador.includes(tipoUsuario)
+                    ? camposTrabajador
+                    : tiposUsuarioEspecial.includes(tipoUsuario)
+                        ? camposEspecial
+                        : [];
+
+    const handleChange = (
+        e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
+    ) => {
+        const { name, value } = e.target;
+
+        if (name === "tipo_usuario") {
+            setTipoUsuario(value);
+            setFormData((prev: any) => ({
+                ...prev,
+                tipo_usuario: value,
+            }));
+        } else {
+            setFormData((prev: any) => ({
+                ...prev,
+                [name]: value,
+            }));
+        }
+    };
+
+    const validarCampos = (): boolean => {
+        const faltantes = camposVisibles.filter(
+            (campo) => !formData[campo] || formData[campo].toString().trim() === ""
+        );
+        setErrores(faltantes);
+        return faltantes.length === 0;
+    };
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setMensaje("");
+
+        if (!validarCampos()) {
+            setMensaje("Por favor llena todos los campos obligatorios.");
+            return;
+        }
+
+        setGuardando(true); // 🔹 Empieza a guardar
+
+        try {
+            const token = localStorage.getItem("token");
+            const normalizado = { ...formData };
+
+            if (normalizado.fecha_nacimiento) {
+                normalizado.fecha_nacimiento = normalizado.fecha_nacimiento.replaceAll("-", "").slice(0, 8);
+            }
+
+            if (normalizado.generacion !== undefined && normalizado.generacion !== "") {
+                const num = Number(normalizado.generacion);
+                if (!isNaN(num)) {
+                    normalizado.generacion = num;
+                } else {
+                    delete normalizado.generacion;
+                }
+            }
+
+            const response = await fetch(`${apiUrl}/excel/carga`, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                    Authorization: `Bearer ${token}`,
+                },
+                body: JSON.stringify(normalizado),
+            });
+
+            if (!response.ok) {
+                const error = await response.json();
+                console.error("Error del servidor:", error);
+                setMensaje("Ocurrió un error al guardar el usuario ❌");
+                return;
+            }
+
+            setMensaje("Usuario guardado correctamente ✅");
+            setFormData({});
+            setTipoUsuario("");
+        } catch (err) {
+            console.error("Error en petición fetch:", err);
+            setMensaje("Ocurrió un error al guardar el usuario ❌");
+        } finally {
+            setGuardando(false); // 🔹 Termina de guardar
+        }
+    };
+
+    return (
+        <form onSubmit={handleSubmit} style={{ maxWidth: "600px", margin: "0 auto" }}>
+            <h2 className="text-xl font-semibold mt-4 mb-3 text-start">Carga Individual</h2>
+
+            {/* Select tipo_usuario */}
+            <div className="mb-3 text-start">
+                <label className="form-label fw-bold">Tipo de Usuario</label>
+                <select
+                    name="tipo_usuario"
+                    className="form-select"
+                    value={tipoUsuario}
+                    onChange={handleChange}
+                    required
+                >
+                    <option value="">Selecciona una opción</option>
+                    {[...tiposUsuarioEstudiante, ...tiposUsuarioTrabajador, ...tiposUsuarioEspecial].map((tipo) => (
+                        <option key={tipo} value={tipo}>
+                            {tipo}
+                        </option>
+                    ))}
+                </select>
+            </div>
+
+            {/* Renderizado dinámico de campos */}
+            {camposVisibles.map((campo) => (
+                <div key={campo} className="mb-3 text-start">
+                    <label htmlFor={campo} className="form-label fw-bold">
+                        {campo.replace(/_/g, " ").toUpperCase()}
+                    </label>
+
+                    {/* campo especial "genero" */}
+                    {campo === "genero" ? (
+                        <select
+                            name="genero"
+                            className={`form-select ${errores.includes(campo) ? "is-invalid" : ""}`}
+                            value={formData.genero || ""}
+                            onChange={handleChange}
+                            required
+                        >
+                            <option value="">Selecciona M o F</option>
+                            <option value="M">M</option>
+                            <option value="F">F</option>
+                        </select>
+                    ) : (
+                        <input
+                            type={campo === "fecha_nacimiento" ? "date" : "text"}
+                            name={campo}
+                            className={`form-control ${errores.includes(campo) ? "is-invalid" : ""}`}
+                            value={formData[campo] || ""}
+                            onChange={handleChange}
+                            maxLength={campo === "rfc" ? 13 : undefined}
+                        />
+                    )}
+                </div>
+            ))}
+
+            {mensaje && (
+                <div className="alert alert-info text-start" role="alert">
+                    {mensaje}
+                </div>
+            )}
+
+            <div className="d-grid">
+                <button
+                    type="submit"
+                    className="btn"
+                    style={{ backgroundColor: "#003d79", color: "#fff" }}
+                    disabled={guardando} // 🔹 Se desactiva mientras se guarda
+                >
+                    {guardando ? "Guardando..." : "Guardar Usuario"}
+                </button>
+            </div>
+        </form>
+    );
+};
+
+export default FormularioCargaIndividual;

src/app/carga/page.tsx

@@ -1,34 +1,72 @@
 "use client";
 
-import React from "react";
+import React, { useEffect, useState } from "react";
+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";
+import { getUserFromToken } from "@/components/Hook";
 
-const fuentes = [
-  { nombre: "Fuente 1", fecha: "Martes 3 de mayo 2025", activa: true },
-  { nombre: "Fuente 2", fecha: "Martes 3 de mayo 2025", activa: true },
-  { nombre: "Fuente 3", fecha: "Martes 3 de mayo 2025", activa: true },
-  { nombre: "Fuente 4", fecha: "Martes 3 de mayo 2025", activa: false },
-];
+const apiUrl = process.env.NEXT_PUBLIC_API_URL;
+
+
+interface Fuente {
+  nombre: string;
+  fecha: string;
+  activa: boolean;
+  id_mov: number;
+}
 
 export default function Dashboard() {
-  /* const loading = useAuthRedirect();
+  const loading = useAuthRedirect();
+  const [fuentes, setFuentes] = useState<Fuente[]>([]);
+  const [descargando, setDescargando] = useState(false);
 
-  if (loading) {
-    return <p></p>;
-  } */
+  const fetchMovimientos = async () => {
+    const token = localStorage.getItem("token");
+    if (!token) return;
+
+    const res = await fetch(
+      `${apiUrl}/excel/movimientos`,
+      {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      }
+    );
+
+    const data = await res.json();
+
+    const fuentesConvertidas: Fuente[] = data.move.map((mov: any) => ({
+      nombre: `${mov.reporte}: ${mov.id_mov}`,
+      id_mov: mov.id_mov,
+      fecha: new Date(mov.fecha_mov).toLocaleString("es-MX", {
+        weekday: "long",
+        day: "numeric",
+        month: "long",
+        year: "numeric",
+      }),
+      activa: data.button,
+    }));
+
+    setFuentes(fuentesConvertidas);
+  };
+
+  useEffect(() => {
+    fetchMovimientos();
+  }, []);
 
   const handleDownload = async () => {
     const token = localStorage.getItem("token");
-
-   /*  if (!token) {
+    if (!token) {
       alert("Token no encontrado. Inicia sesión.");
       return;
-    } */
+    }
+
+    setDescargando(true);
 
     try {
-      const response = await fetch("http://localhost:4000/excel/download", {
+      const response = await fetch(`${apiUrl}/excel/download`, {
         method: "GET",
         headers: {
           Authorization: `Bearer ${token}`,
@@ -41,40 +79,39 @@ export default function Dashboard() {
         return;
       }
 
+      // Obtén el nombre del archivo desde el header
+      const disposition = response.headers.get("Content-Disposition");
+      let filename = "usuarios.csv"; // Valor por defecto
+      console.log(disposition);
+      if (disposition && disposition.includes("filename=")) {
+        const match = disposition.match(/filename="?(.+?)"?$/);
+        if (match && match[1]) {
+          filename = match[1];
+        }
+      }
+
       const blob = await response.blob();
       const url = window.URL.createObjectURL(blob);
 
       const a = document.createElement("a");
       a.href = url;
-      a.download = "usuarios.tsv";
+      a.download = filename;
       document.body.appendChild(a);
       a.click();
       a.remove();
       window.URL.revokeObjectURL(url);
     } catch (error: any) {
       alert(`Error al descargar: ${error.message}`);
+    } finally {
+      setDescargando(false);
     }
   };
 
+  if (loading) return <p>Cargando...</p>;
+
   return (
-    <main
-      className="roboto"
-      style={{
-        minHeight: "100vh",
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-      }}
-    >
-      <div
-        className="flex gap-4 flex-wrap mb-6"
-        style={{
-          padding: "2rem",
-          borderRadius: "8px",
-          boxShadow: "0 4px 6px rgba(253, 253, 253, 0.1)",
-          width: "100%",
-        }}
-      >
+    <main>
+      <div className="flex gap-4 flex-wrap mb-6">
         <h2 className="text-xl font-semibold mb-4">Fuentes</h2>
         <div
           style={{
@@ -82,26 +119,43 @@ export default function Dashboard() {
             flexDirection: "row",
             justifyContent: "center",
             gap: "16px",
+            flexWrap: "wrap",
           }}
         >
-          {/* {fuentes.map((f, idx) => (
+          {fuentes.map((f, idx) => (
             <FuenteCard
               key={idx}
               nombre={f.nombre}
               fecha={f.fecha}
               activa={f.activa}
+              id_mov={f.id_mov}
+              onValidated={fetchMovimientos} // ← actualiza fuentes al validar
             />
-          ))} */}
+          ))}
         </div>
 
-        <h2 className="text-xl font-semibold mb-4">Carga</h2>
-        <div>
-          <CargaArchivo />
-        </div>
+        {getUserFromToken()?.tipo === "LOAD" && (
+          <>
+            <h2
+              style={{ marginTop: "2rem" }}
+              className="text-xl font-semibold mt-4 mb-4"
+            >
+              Carga
+            </h2>
+            <div>
+              <CargaArchivo />
+            </div>
+          </>
+        )}
 
-        <h2 className="text-xl font-semibold mb-4">Descarga de Datos</h2>
-        <Button onClick={handleDownload} className="mb-3">
-          Descarga Base de Datos
+        <h2 className="text-xl font-semibold mt-5 mb-4">Descarga de Datos</h2>
+        <Button
+          onClick={handleDownload}
+          disabled={descargando}
+          className="mb-3"
+          variant="azul"
+        >
+          {descargando ? "Descargando..." : "Descarga Base de Datos"}
         </Button>
       </div>
     </main>

src/app/landing/IconCircle.css

@@ -7,21 +7,33 @@
   position: relative;
   width: 300px;
   height: 300px;
-  margin: 2rem auto;
-  border-radius: 50%;
+  margin: auto;
 }
 
 .central-icon {
   position: absolute;
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%) !important;
   font-size: 2rem;
   background: white;
-  padding: 1rem;
   border-radius: 50%;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   z-index: 1;
+  width: 60px;
+  height: 60px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.orbiting-container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
 }
 
 .floating-icon {
@@ -33,13 +45,14 @@
   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

@@ -1,60 +1,106 @@
 // IconCircle.tsx
-'use client';
-import React from 'react';
-import { motion } from 'framer-motion';
-import './IconCircle.css';
+"use client";
+import React from "react";
+import { motion } from "framer-motion";
+import "./IconCircle.css";
+import red from "@/assets/pngs/1.png";
+import equipos from "@/assets/pngs/2.png";
+import correo from "@/assets/pngs/3.png";
+import desarrolla from "@/assets/pngs/4.png";
+import cedetec from "@/assets/pngs/5.png";
+import Image from "next/image";
+
+const iconImages = [red, equipos, correo, desarrolla, cedetec];
 
 const iconClasses = [
-    'bi bi-graph-up',
-    'bi bi-lightning-fill',
-    'bi bi-currency-exchange',
-    'bi bi-globe2',
-    'bi bi-bar-chart-line-fill',
-    'bi bi-arrow-left-right',
-    'bi bi-bank',
-    'bi bi-boxes',
+  "bi bi-graph-up",
+  "bi bi-lightning-fill",
+  "bi bi-currency-exchange",
+  "bi bi-globe2",
+  "bi bi-bar-chart-line-fill",
+  "bi bi-arrow-left-right",
+  "bi bi-bank",
+  "bi bi-boxes",
 ];
 
 interface IconCircleProps {
-    delay?: number;
+  delay?: number;
 }
 
 const IconCircle: React.FC<IconCircleProps> = ({ delay = 0 }) => {
-    return (
-        <div className="icon-circle">
-        <motion.div
-            className="central-icon"
-            initial={{ scale: 0 }}
-            animate={{ scale: 1, rotate: 1080 }}
-            transition={{ duration: 1, delay }}
-        >
-            <i className="bi bi-stars"></i>
-        </motion.div>
+  return (
+    <div className="icon-circle">
+      {/* Icono central fijo */}
+      <motion.div
+        className="central-icon"
+        initial={{ scale: 0 }}
+        animate={{ scale: 1 }}
+        transition={{ duration: 1, delay }}
+      >
+        <i className="bi bi-stars"></i>
+      </motion.div>
 
-        {iconClasses.map((iconClass, i) => (
+      {/* Contenedor que orbita con los iconos flotantes */}
+      <motion.div
+        className="orbiting-container"
+        animate={{ rotate: 360 }}
+        transition={{
+          duration: 30,
+          repeat: Infinity,
+          ease: "linear",
+        }}
+      >
+        {iconImages.map((iconClass, i) => {
+          const angle = i * 70 * (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"
-            initial={{
-                transform: 'translate(0, 0) scale(0)',
+              key={i}
+              className="floating-icon"
+              style={{
+                left: x,
+                top: y,
+              }}
+              initial={{
+                scale: 0,
                 opacity: 0,
-            }}
-            animate={{
-                transform: `rotate(${i * 45}deg) translate(130px) rotate(-${i * 45}deg)`,
+              }}
+              animate={{
                 scale: 1,
                 opacity: 1,
-            }}
-            transition={{
-                delay: delay + 0.5 + i * 0.1, // empieza después del centro
+              }}
+              transition={{
+                delay: delay + 0.5 + i * 0.1,
                 duration: 0.5,
-                type: 'spring',
-            }}
+                type: "spring",
+              }}
             >
-            <i className={iconClass}></i>
+              <motion.div
+                animate={{
+                  rotate: 360,
+                }}
+                transition={{
+                  duration: 20 + i * 2,
+                  repeat: Infinity,
+                  ease: "linear",
+                }}
+              >
+                <Image
+                  src={iconClass}
+                  alt={`Icon ${i + 1}`}
+                  width={64}
+                  height={64}
+                />
+              </motion.div>
             </motion.div>
-        ))}
-        </div>
-    );
+          );
+        })}
+      </motion.div>
+    </div>
+  );
 };
 
 export default IconCircle;

src/app/landing/globals.css

@@ -3,120 +3,123 @@
   margin: none;
 }
 
-  /* Fondo general y tipografía */
-  body {
-    margin: 0;
-    font-family: 'Segoe UI', sans-serif;
-    background: radial-gradient(circle at center, #f8f4ff, hsl(218, 45%, 37%));
+/* Fondo general y tipografía */
+body {
+  margin: 0;
+  font-family: "Segoe UI", sans-serif;
+  /*   background: radial-gradient(circle at center, #f8f4ff, hsl(218, 45%, 37%)); */
+  background: radial-gradient(circle at center, #f8f4ff, #d5a00f65);
 
-       /*  background: radial-gradient(circle at center, #f8f4ff, hsl(217, 100%, 89%)); */
+  color: #1a1a1a;
+  text-align: center;
+}
 
-    color: #1a1a1a;
-    text-align: center;
-    
-  }
 
-  /* Header */
-  header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 1.5rem 2rem;
-    background: transparent;
-    font-weight: bold;
-  }
 
-  header div:first-child {
-    font-size: 1.5rem;
-    color: #5b2edd;
-  }
 
-  .nav-links {
-    background-color: white;
-    padding: 10px;
-    border-radius: 50px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* sombra suave */
-    display: flex;
-    gap: 1rem; /* espacio entre los <a> */
-  }
+/* Header */
+header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.5rem 2rem;
+  background: transparent;
+  font-weight: bold;
+}
 
-  header a {
-    margin: 0 0.75rem;
-    text-decoration: none;
-    color: #333;
-    font-weight: 500;
-  }
+header div:first-child {
+  font-size: 1.5rem;
+  color: #003d79;
+}
 
-  header button {
-    margin-left: 0.5rem;
-    padding: 0.4rem 1rem;
-    border-radius: 20px;
-    border: none;
-    font-weight: 600;
-    cursor: pointer;
-  }
+.nav-links {
+  background-color: white;
+  padding: 10px;
+  border-radius: 50px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  /* sombra suave */
+  display: flex;
+  gap: 1rem;
+  /* espacio entre los <a> */
+}
 
-  header button:first-of-type {
-    background-color: white;
-    border: 1px solid #ccc;
-    color: #555;
-  }
+header a {
+  margin: 0 0.75rem;
+  text-decoration: none;
+  color: #333;
+  font-weight: 500;
+}
 
-  header button:last-of-type {
-    background-color: #0033ff;
-    color: white;
-  }
+header button {
+  margin-left: 0.5rem;
+  padding: 0.4rem 1rem;
+  border-radius: 20px;
+  border: none;
+  font-weight: 600;
+  cursor: pointer;
+}
 
-  /* Texto principal */
-  strong {
-    display: block;
-    font-size: 2.5rem;
-    margin: 2rem 0 1rem;
-  }
+header button:first-of-type {
+  background-color: white;
+  border: 1px solid #ccc;
+  color: #555;
+}
 
-  p {
-    font-size: 1rem;
-    color: #555;
-    /* max-width: 600px; */
-    margin: 0 auto 1rem;
-  }
+header button:last-of-type {
+  background-color: #0033ff;
+  color: white;
+}
 
-  /* Botón principal */
-  div > button {
-    margin-top: 1rem;
-    background-color: #5b2edd;
-    color: white;
-    padding: 0.7rem 2rem;
-    border: none;
-    border-radius: 25px;
-    font-size: 1rem;
-    cursor: pointer;
-  }
+/* Texto principal */
+strong {
+  display: block;
+  font-size: 2.5rem;
+  margin: 2rem 0 1rem;
+}
 
-  /* Texto de "years of reliability" */
-  div > div {
-   /*  display: flex; */
-    justify-content: center;
-    align-items: center;
-    gap: 0.5rem;
-    margin-top: 0.5rem;
-  }
+p {
+  font-size: 1rem;
+  color: #555;
+  /* max-width: 600px; */
+  margin: 0 auto 1rem;
+}
 
-  div > div p {
-    margin: 0;
-    font-size: 0.9rem;
-    color: #888;
-  }
+/* Botón principal */
+div>button {
+  background-color: #003d79;
+  color: white;
+  padding: 0.7rem 2rem;
+  border: none;
+  border-radius: 25px;
+  font-size: 1rem;
+  cursor: pointer;
+}
 
-  
+div>div p {
+  margin: 0;
+  font-size: 0.9rem;
+  color: #888;
+}
 
-  /* Scroll hint */
-  body > p:last-of-type {
-    margin-top: 2rem;
-    font-size: 0.85rem;
-    color: #aaa;
-    letter-spacing: 1px;
-  }
+/* Scroll hint */
+body>p:last-of-type {
+  margin-top: 2rem;
+  font-size: 0.85rem;
+  color: #aaa;
+  letter-spacing: 1px;
+}
+
+.ocultar-scroll {
+  scrollbar-width: none;
+  /* Firefox */
+  -ms-overflow-style: none;
+  /* IE 10+ */
+}
+
+.ocultar-scroll::-webkit-scrollbar {
+  display: none;
+  /* Chrome, Safari */
+}
 
 .circle-background {
   margin-top: 0;
@@ -125,12 +128,16 @@
   top: none;
   left: none;
   width: 100vw;
-  height: 100vh; 
-  z-index: -1; /* para que esté detrás de todo */
-  pointer-events: none; /* no interfiere con el contenido */
+  height: 100vh;
+  z-index: -1;
+  background-color: #003d79c2;
+  /* para que esté detrás de todo */
+  pointer-events: none;
+  /* no interfiere con el contenido */
   display: flex;
   justify-content: center;
   align-items: center;
+  height: 100%;
   overflow: hidden;
 }
 
@@ -142,11 +149,6 @@
   backdrop-filter: blur(2px);
 }
 
-
-
-
-
-
 .invert {
   filter: invert(1);
 }

src/app/landing/landing_body.tsx

@@ -3,29 +3,36 @@
 
 import { motion } from "framer-motion";
 import IconCircle from "./IconCircle";
+import Button from "@/components/button";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { getUserFromToken } from "@/components/Hook";
+import { useEffect, useState } from "react";
+
+
 
 export default function LandingBody() {
+
+
+
+  const router = useRouter();
   return (
+
     <motion.main
-      className="flex-fill"
+
       initial={{ y: 50, opacity: 0 }}
       animate={{ y: 0, opacity: 1 }}
       transition={{ delay: 1, duration: 1 }}
     >
+
+
+
       <IconCircle delay={2} />
 
-      <strong>Explore markets ready for trading</strong>
-      <p>
-        Explore 300+ trading instruments across 10+ asset classes with Alchemy
-        Markets. Trade Forex, Stocks, Indices, and more!
-      </p>
 
-      <div>
-        <button>Start Trading</button>
-        <div>
-          <i></i>
-        </div>
-      </div>
+
+      <strong className="text-dorado">Servicios PC PUMA y CEDETEC</strong>
+
     </motion.main>
   );
 }

src/app/landing/new_header.tsx

@@ -3,16 +3,32 @@
 import { motion } from "framer-motion";
 import Image from "next/image";
 import Link from "next/link";
+import { useState } from "react";
+import { PageKey } from "../page";
 
-
-
-interface HeaderProps {
-  onNavClick: (page: string) => void;
+interface HeaderItem {
+  label: string;
+  page?: PageKey;
+  onClick?: () => void;
 }
 
+interface HeaderProps {
+  items: HeaderItem[];
+  onClickItem: (page: PageKey) => void;
+}
 
+export default function Header({ items, onClickItem }: HeaderProps) {
+  const [currentPage, setCurrentPage] = useState<PageKey>("landing");
+
+  const handleItemClick = (item: HeaderItem) => {
+    if (item.onClick) {
+      item.onClick();
+    } else if (item.page) {
+      setCurrentPage(item.page);
+      onClickItem(item.page);
+    }
+  };
 
-export default function Header({ onNavClick }: HeaderProps) {
   return (
     <motion.header
       initial={{ x: -100, opacity: 0 }}
@@ -35,29 +51,22 @@ export default function Header({ onNavClick }: HeaderProps) {
         </Link>
       </div>
 
-     {/*  <div className="nav-links">
-        <a href="">Trading</a>
-        <a href="">Platforms</a>
-        <a href="">Tools & Education</a>
-        <a href="">About Us</a>
-        <a href="">Partners</a>
-         <a href="">Login</a>
-      </div> */}
-
-
-
-       <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" },
-        ].map((item) => (
+      <nav className="nav-links">
+        {items.map((item) => (
           <a
-            key={item.page}
-          
-            onClick={() => onNavClick(item.page)}
+            key={item.label}
+            onClick={() => handleItemClick(item)}
+            className={
+              item.page && currentPage === item.page
+                ? "text-dorado fw-bold"
+                : ""
+            }
+            style={{
+              cursor: "pointer",
+              ...(item.page && currentPage === item.page
+                ? { color: "#fbbf24", fontWeight: "bold" }
+                : {}),
+            }}
           >
             {item.label}
           </a>

src/app/landing/page.tsx

@@ -1,93 +0,0 @@
-"use client";
-
-import "./globals.css";
-import "bootstrap-icons/font/bootstrap-icons.css";
-import IconCircle from "./IconCircle";
-import { motion } from "framer-motion";
-import Image from "next/image";
-import Link from "next/link";
-
-
-import Header from "./new_header"; // ajusta la ruta si estás en otra carpeta
-import Footer from "@/components/layout/footer";
-import LandingBody from "./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/app/layout.tsx

@@ -1,15 +1,8 @@
-import type { Metadata } from "next";
-import { Roboto } from "next/font/google";
-
-import 'bootstrap-icons/font/bootstrap-icons.css';
-import '@/styles/sass/bootstrap.scss';
+'use client';
+import "bootstrap-icons/font/bootstrap-icons.css";
+import "@/styles/sass/bootstrap.scss";
 import BootstrapClient from "@/components/bootstrap-client";
-
-
-const roboto = Roboto({
-  weight: ["100", "300", "400", "500", "700", "900"],
-  subsets: ["latin"],
-});
+import { motion } from "framer-motion";
 
 export default function RootLayout({
   children,
@@ -18,9 +11,35 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body >
-      
-        {children}
+      <body className="overflow">
+        <BootstrapClient />
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 1 }}
+          className="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>
+          {children}
+        </motion.div>
       </body>
     </html>
   );

src/app/page.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import "./landing/globals.css";
+import Header from "./landing/new_header";
+import Footer from "@/components/layout/footer";
+import LandingBody from "./landing/landing_body";
+import Dashboard from "./carga/page";
+import Consulta from "./visualizacion/page";
+import LoginPage from "@/containers/LoginPage";
+import FormularioCargaIndividual from "./alta/alta";
+import { useSession } from "@/hooks/use-session";
+import { useEffect, useState } from "react";
+import path from "path";
+import { motion } from "framer-motion";
+
+export type PageKey = "landing" | "login" | "carga" | "consulta" | "carga individual";
+
+export interface HeaderItem {
+  label: string;
+  page?: PageKey;
+  onClick?: () => void;
+}
+
+const Home = () => {
+  const [page, setPage] = useState<PageKey>("landing");
+  const { data: user, loading } = useSession(); // usuario viene de useSession()
+  const [isCarga, setIsCarga] = useState("Carga");
+  const [saludo, setSaludo] = useState("");
+
+  useEffect(() => {
+    const origen = user?.tipo;
+
+    if (origen === "LOAD") {
+      setSaludo("Bienvenido al módulo de carga de datos");
+    } else if (origen === "RED") {
+      setSaludo("Bienvenido usuario de red");
+    } else if (origen === "AT") {
+      setSaludo("Bienvenido usuario de AT");
+    } else if (origen === "CORREO") {
+      setSaludo("Bienvenido usuario de correo");
+    } else if (origen === "SOLICITA") {
+      setSaludo("Bienvenido usuario de préstamos PC Puma");
+    }
+  }, [user]);
+
+  useEffect(() => {
+    if (user?.tipo === "LOAD") {
+      setIsCarga("Carga");
+    } else {
+      setIsCarga("Descarga");
+    }
+  }, [user]);
+
+  const handleLogout = () => {
+    localStorage.removeItem("token");
+    location.reload();
+  };
+
+  const items: HeaderItem[] = user
+    ? [
+      { label: "Inicio", page: "landing" },
+      { label: "Consulta", page: "consulta" },
+      { label: isCarga, page: "carga" },
+      ...(user.tipo === "LOAD"
+        ? [
+          { label: "Carga individual", page: "carga individual" as PageKey },
+        ]
+        : []),
+      { label: "Cerrar sesión", onClick: handleLogout },
+    ]
+    : [
+      { label: "Consulta", page: "consulta" },
+      { label: "Inicio", page: "landing" },
+      { label: "Login", page: "login" },
+    ];
+
+  return (
+    <>
+      <Header items={items} onClickItem={setPage} />
+
+      {/* Saludo en la esquina superior derecha */}
+      {saludo && (
+        <motion.div
+          className="w-full flex justify-end pr-6 mb-5"
+          initial={{ x: -100, opacity: 0 }}
+          animate={{ x: 0, opacity: 1 }}
+          transition={{ duration: 1.5, ease: "easeOut" }}
+        >
+          <h2 className="text-dorado text-sm text-right">{saludo}</h2>
+        </motion.div>
+
+
+      )}
+
+      <div className="flex-grow-1 d-flex flex-column align-items-center justify-content-center text-center">
+        {page === "landing" && <LandingBody />}
+        {page === "login" && <LoginPage />}
+        {page === "consulta" && <Consulta />}
+        {page === "carga" && <Dashboard />}
+        {page === "carga individual" && user?.tipo === "LOAD" && (
+          <FormularioCargaIndividual />
+        )}
+      </div>
+
+      <Footer />
+    </>
+  );
+};
+
+export default Home;

src/app/visualizacion/page.tsx

@@ -3,13 +3,17 @@
 import React, { useState } from "react";
 import Input from "@/components/input";
 import Button from "@/components/button";
+import Link from "next/link";
+
+const apiUrl = process.env.NEXT_PUBLIC_API_URL;
 
 export default function Consulta() {
   const [tipo, setTipo] = useState("");
   const [value, setValue] = useState("");
   const [resultados, setResultados] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState('');
+  const [error, setError] = useState("");
+  const [usuario, setUsuario] = useState("");
 
   const handleSubmit = async () => {
     if (!value) {
@@ -18,99 +22,102 @@ export default function Consulta() {
     }
 
     setLoading(true);
-    setError('');
+    setError("");
     setResultados([]);
+    setUsuario("");
 
     try {
-      const res = await fetch(`http://localhost:4000/usuarios/${value}`);
+      const res = await fetch(`${apiUrl}/usuarios/${value}`);
 
       if (!res.ok) {
         const errData = await res.json();
-        throw new Error(errData.message || "Error al consultar usuario");
+        throw new Error("No se encontró usuario");
       }
 
       const data = await res.json();
-      setResultados(data);
+      setUsuario(data.usuario);
+      setResultados(data.resultado || []);
     } catch (err: any) {
-      const message = err.message || "Error desconocido";
+      const message = "No se encontró usuario";
       setError(message);
-      console.error("Error al obtener datos:", err);
+      console.error(message);
     } finally {
       setLoading(false);
     }
   };
 
   return (
-    <main
-      className="roboto"
-      style={{
-        minHeight: "100vh",
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        flexDirection: "column",
-        padding: "2rem",
-      }}
-    >
-      <div
-        className="flex gap-4 flex-wrap mb-6"
-        style={{
-          padding: "2rem",
-          borderRadius: "8px",
-          boxShadow: "0 4px 6px rgba(253, 253, 253, 0.1)",
-          width: "100%",
-          maxWidth: "900px",
-        }}
-      >
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "row",
-            justifyContent: "center",
-            gap: "16px",
-            flexWrap: "wrap",
-            width: "100%",
-          }}
-        >
-          <h2 className="text-xl font-semibold mb-4">Visualización De Datos</h2>
+    <main>
+      <div>
+        <div>
+          <strong className="text-dorado">Servicios PC PUMA y CEDETEC</strong>
+          <h2 className="text-xl font-semibold mb-4">Servicios habilitados</h2>
 
           <Input
-            label="No.Cuenta"
-            placeholder="Ingresa tu No.Cuenta"
+            label="Número de cuenta o trabajador"
+            placeholder="Ingresa número"
             value={value}
+            className={{
+              container: "mb-3 text-start",
+            }}
             onChange={(e) => setValue(e.target.value)}
           />
 
-          <Button onClick={handleSubmit}>
-            {loading ? "Consultando..." : "Enviar Formulario"}
-          </Button>
+          <button
+            onClick={handleSubmit}
+            style={{
+              backgroundColor: "#003d79",
+              color: "#fff",
+              padding: "0.5rem 1rem",
+              border: "none",
+              borderRadius: "4px",
+              cursor: "pointer",
+            }}
+          >
+            {loading ? "Buscando..." : "Buscar"}
+          </button>
         </div>
       </div>
 
+      {usuario && (
+
+        <h2 className="text-xl font-semibold mb-4 mt-5">El status de los servicios para <span className="text-blue-700">{usuario} son</span></h2>
+
+
+      )}
+
       {error && (
-        <p style={{ color: "red", marginTop: "0.5rem", textAlign: "center" }}>{error}</p>
+        <p style={{ color: "red", marginTop: "0.5rem", textAlign: "center" }}>
+          {error}
+        </p>
       )}
 
       {resultados.length > 0 && (
         <table
           style={{
+            marginTop: "2rem",
+            marginBottom: "3rem",
             background: "#fff",
             borderCollapse: "collapse",
             width: "100%",
             maxWidth: "900px",
             borderRadius: "8px",
-            overflow: "hidden",
+            overflow: "auto",
             boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
           }}
         >
-          <thead style={{ backgroundColor: "#2563eb", color: "#fff" }}>
+          <thead style={{ backgroundColor: "#003d79", color: "#fff" }}>
             <tr>
               {Object.keys(resultados[0]).map((key) => (
                 <th
                   key={key}
-                  style={{ padding: "1rem", textAlign: "left", borderBottom: "1px solid #ccc" }}
+                  style={{
+                    padding: "1rem",
+                    textAlign: "left",
+                    borderBottom: "1px solid #ccc",
+                  }}
                 >
-                  {key.toUpperCase()}
+                  {key.charAt(0).toUpperCase() + key.slice(1).toLowerCase()}
                 </th>
               ))}
             </tr>
@@ -118,16 +125,38 @@ export default function Consulta() {
           <tbody>
             {resultados.map((item, idx) => (
               <tr key={idx}>
-                {Object.values(item).map((val, i) => (
-                  <td key={i} style={{ padding: "0.75rem", borderBottom: "1px solid #eee" }}>
-                    {String(val)}
-                  </td>
-                ))}
+                {Object.values(item).map((val, i) => {
+                  const cellKey = Object.keys(item)[i];
+                  return (
+                    <td
+                      key={i}
+                      style={{
+                        padding: "0.75rem",
+                        borderBottom: "1px solid #eee",
+                        textAlign: cellKey === "fecha_activacion" ? "center" : "left",
+                      }}
+                    >
+                      {String(val)}
+                    </td>
+                  );
+                })}
               </tr>
             ))}
           </tbody>
         </table>
       )}
+      <div>
+        <Link
+          href="https://www.acatlan.unam.mx/pcpuma/"
+          target="_blank"
+          className="btn btn-azul btn-lg rounded-pill mt-5 mb-5"
+        >
+          Conoce PCPUMA
+        </Link>
+        <div>
+          <i></i>
+        </div>
+      </div>
     </main>
   );
 }

src/components/Hook.tsx

@@ -0,0 +1,21 @@
+import { jwtDecode } from "jwt-decode";
+
+interface JwtPayload {
+    sub: string,
+    email: string,
+    tipo: string
+}
+
+export function getUserFromToken(): JwtPayload | null {
+    const token = localStorage.getItem("token");
+
+    if (!token) return null;
+
+    try {
+        const payload: JwtPayload = jwtDecode(token);
+        return payload;
+    } catch (error) {
+        console.error("Token inválido:", error);
+        return null;
+    }
+}

src/components/cargaArchivo.tsx

@@ -1,33 +1,48 @@
 "use client";
 import React, { useState } from "react";
+import Button from "./button";
+const apiUrl = process.env.NEXT_PUBLIC_API_URL;
+
 
 const CargaArchivo: React.FC = () => {
   const [archivo, setArchivo] = useState<File | null>(null);
+  const [errores, setErrores] = useState<string[] | null>(null);
+  const [loading, setLoading] = useState(false); // ← estado de carga
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (file) setArchivo(file);
   };
 
+  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+  };
+
+  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    const file = e.dataTransfer.files?.[0];
+    if (file) setArchivo(file);
+  };
+
   const handleUpload = async () => {
     if (!archivo) return;
 
-    const token = localStorage.getItem("token"); // 👈 Token JWT guardado en login
-
-
+    const token = localStorage.getItem("token");
     if (!token) {
       alert("No hay token disponible. Inicia sesión.");
       return;
     }
 
     const formData = new FormData();
-    formData.append("file", archivo); // 👈 ¡Debe coincidir con FileInterceptor('file')
+    formData.append("file", archivo);
+
+    setLoading(true); // ← empieza a subir
 
     try {
-      const res = await fetch("http://localhost:4000/excel/load", {
+      const res = await fetch(`${apiUrl}/excel/load`, {
         method: "POST",
         headers: {
-          Authorization: `Bearer ${token}`, // 👈 Incluye el token en el header
+          Authorization: `Bearer ${token}`,
         },
         body: formData,
       });
@@ -35,36 +50,81 @@ const CargaArchivo: React.FC = () => {
       const data = await res.json();
 
       if (res.ok) {
-        alert("Archivo subido correctamente");
+        alert(
+          `Archivo subido correctamente (ID Movimiento: ${data.id_movimiento})`
+        );
         setArchivo(null);
+        if (data.errors && data.errors.length > 0) {
+          setErrores(data.errors);
+        }
       } else {
         console.error(data);
         alert(`Error al subir archivo: ${JSON.stringify(data)}`);
       }
     } catch (err) {
       alert(`Error en la solicitud: ${err}`);
+    } finally {
+      setLoading(false); // ← termina de subir
     }
   };
 
   return (
-    <div className="w-full">
+    <div className="w-full max-w-xl mx-auto">
       <input
+        id="fileInput"
         type="file"
         accept=".xls,.xlsx"
         onChange={handleChange}
-        className="mb-4 block text-sm"
+        style={{ display: "none" }}
       />
-      <button
-        onClick={handleUpload}
-        disabled={!archivo}
-        className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
+
+      <div
+        className="rounded p-5 text-center bg-white shadow-lg transition hover:shadow-xl"
         style={{
-          backgroundColor: "#2563eb",
-          color: "#fff",
+          border: "none",
+          cursor: "pointer",
         }}
+        onDragOver={handleDragOver}
+        onDrop={handleDrop}
+        onClick={() => document.getElementById("fileInput")?.click()}
       >
-        Subir archivo
-      </button>
+        <p className="text-gray-600 mb-2">
+          Arrastra y suelta un archivo aquí o{" "}
+          <span className="text-blue-600 font-semibold">
+            haz clic para seleccionarlo
+          </span>.
+        </p>
+        <i className="bi bi-upload fs-1 text-primary"></i>
+
+        {archivo && (
+          <p className="my-0 text-green-600 font-semibold">
+            Archivo seleccionado: {archivo.name}
+          </p>
+        )}
+      </div>
+
+      <div className="mt-4 text-center">
+        <Button onClick={handleUpload} disabled={!archivo || loading} variant="azul">
+          {loading ? "Subiendo..." : "Subir archivo"}
+        </Button>
+      </div>
+
+      {/* Modal de errores */}
+      {errores && (
+        <div className="mt-6 p-4 bg-red-100 border border-red-300 rounded">
+          <div className="flex justify-between items-center mb-2">
+            <h2 className="text-lg font-semibold text-red-800">Errores detectados</h2>
+            <Button variant="danger" onClick={() => setErrores(null)} className="text-sm">
+              <i className="fas fa-times"></i>
+            </Button>
+          </div>
+          <ul className="list-disc list-inside text-sm max-h-60 overflow-y-auto text-red-700">
+            {errores.map((error, index) => (
+              <li key={index}>{error}</li>
+            ))}
+          </ul>
+        </div>
+      )}
     </div>
   );
 };

src/components/fuenteCard.tsx

@@ -0,0 +1,85 @@
+"use client";
+import React, { useState } from "react";
+import Button from "./button";
+const apiUrl = process.env.NEXT_PUBLIC_API_URL;
+
+type FuenteCardProps = {
+  nombre: string;
+  fecha: string;
+  activa: boolean;
+  id_mov: number;
+  onValidated?: () => void;
+};
+
+const FuenteCard: React.FC<FuenteCardProps> = ({
+  nombre,
+  fecha,
+  activa,
+  id_mov,
+  onValidated,
+}) => {
+  const [loading, setLoading] = useState(false); // ← nuevo estado
+
+  const handleActivar = async () => {
+    const token = localStorage.getItem("token");
+    if (!token) {
+      alert("Token no encontrado.");
+      return;
+    }
+
+    try {
+      setLoading(true); // ← activa estado de carga
+      const res = await fetch(
+        `${apiUrl}/excel/activar-servicios/${id_mov}`,
+        {
+          method: "POST",
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        }
+      );
+
+      const data = await res.json();
+
+      if (res.ok) {
+        alert("Usuarios validados correctamente");
+        onValidated?.();
+      } else {
+        alert(`Error: ${data.message || "No se pudo validar"}`);
+      }
+    } catch (error: any) {
+      alert(`Error en la solicitud: ${error.message}`);
+    } finally {
+      setLoading(false); // ← desactiva estado de carga
+    }
+  };
+
+  return (
+    <div className="border rounded shadow-sm p-4 bg-white w-44">
+      <div className="flex items-center justify-between mb-2">
+        <span className="font-semibold text-sm">{nombre}</span>
+        <span
+          className={`w-3 h-3 rounded-full ${activa ? "bg-green-500" : "bg-red-500"}`}
+        />
+      </div>
+      <p className="text-xs text-gray-700 leading-tight">
+        Fecha de carga:
+        <br />
+        {fecha}
+      </p>
+
+      {activa && (
+        <Button
+          onClick={handleActivar}
+          className="mb-3 px-3 py-1 mt-3"
+          variant="success"
+          disabled={loading} // ← deshabilita mientras valida
+        >
+          {loading ? "Validando..." : "Validar"}
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export default FuenteCard;

src/components/layout/footer.tsx

@@ -1,15 +1,12 @@
 import React from "react";
 
-
-
 import { motion } from "framer-motion";
 
-
 export default function Footer() {
   const date = new Date();
   const year = date.getFullYear();
 
-return (
+  return (
     <motion.footer
       // Empieza 50px abajo y totalmente transparente
       initial={{ y: 50, opacity: 0 }}
@@ -17,17 +14,17 @@ return (
       animate={{ y: 0, opacity: 1 }}
       // Retraso para que aparezca justo después del main
       transition={{ delay: 2, duration: 1, ease: "easeOut" }}
-      className="p-3 text-center small text-muted opacity-50"
+      className="p-3 text-center small text-muted"
     >
       <p className="mb-1">
         Hecho en México. Todos los derechos reservados 2025.
       </p>
       <p className="mb-0">
-        Esta página puede ser reproducida con fines no lucrativos, siempre y
+        Esta página no puede ser reproducida con fines lucrativos, siempre y
         cuando no se mutile, se cite la fuente completa y su dirección
         electrónica. De otra forma, requiere permiso previo por escrito de la
         institución.
       </p>
     </motion.footer>
-  )
-}
+  );
+}

src/components/password.tsx

@@ -1,10 +1,9 @@
-'use client';
-import React, { useState } from 'react';
+import React, { useState } from "react";
 
 export interface PasswordInputProps
   extends Omit<
     React.InputHTMLAttributes<HTMLInputElement>,
-    'type' | 'className'
+    "type" | "className"
   > {
   /**
    * Texto de la etiqueta asociada al input (opcional).
@@ -33,18 +32,18 @@ export default function PasswordInput(props: PasswordInputProps) {
   const [visible, setVisible] = useState(false);
 
   // Determina el tipo de input según el estado de visibilidad
-  const inputType = visible ? 'text' : 'password';
+  const inputType = visible ? "text" : "password";
   const inputId =
     id ||
     name ||
-    (label ? `password-${label.replace(/\s+/g, '-')}` : undefined);
+    (label ? `password-${label.toLowerCase().replace(/\s+/g, "-")}` : undefined);
 
   const toggleVisibility = () => setVisible((v) => !v);
 
   return (
-    <div className={className?.container || 'mb-3'}>
+    <div className={className?.container || "mb-3"}>
       {label && inputId && (
-        <label htmlFor={inputId} className={className?.label || 'form-label'}>
+        <label htmlFor={inputId} className={className?.label || "form-label"}>
           {label}
         </label>
       )}
@@ -53,17 +52,17 @@ export default function PasswordInput(props: PasswordInputProps) {
           id={inputId}
           name={name}
           type={inputType}
-          className={className?.input || 'form-control'}
+          className={className?.input || "form-control"}
           {...rest}
         />
         <button
           type="button"
-          className={className?.button || 'btn btn-light border'}
+          className={className?.button || "btn btn-light border"}
           onClick={toggleVisibility}
-          aria-label={visible ? 'Ocultar contraseña' : 'Mostrar contraseña'}
-          title={visible ? 'Ocultar contraseña' : 'Mostrar contraseña'}
+          aria-label={visible ? "Ocultar contraseña" : "Mostrar contraseña"}
+          title={visible ? "Ocultar contraseña" : "Mostrar contraseña"}
         >
-          <i className={`bi ${visible ? 'bi-eye-slash' : 'bi-eye'}`} />
+          <i className={`bi ${visible ? "bi-eye-slash" : "bi-eye"}`} />
         </button>
       </div>
     </div>

src/containers/LoginPage.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import Button from "@/components/button";
+import SimpleInput from "@/components/input";
+import PasswordInput from "@/components/password";
+import React, { useState } from "react";
+import axios from "axios";
+import { useRouter } from "next/navigation";
+import { motion } from "framer-motion";
+
+const apiUrl = process.env.NEXT_PUBLIC_API_URL;
+
+
+export default function Page() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const router = useRouter();
+
+  const handleLogin = async () => {
+    setLoading(true);
+    try {
+
+      const response = await axios.post(`${apiUrl}/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("");
+      window.location.reload();
+
+      // Redirigir al usuario
+    } catch (err: any) {
+      const message =
+        "credenciales incorrectas, por favor verifica tu usuario y contraseña";
+      setError(message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <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: 0.5 }}
+      >
+        <h2 className="text-dorado">Bienvenido al sistema de</h2>
+        <h1 className="text-dorado">Servicios PC PUMA y CEDETEC</h1>
+
+        <SimpleInput
+          label="Usuario"
+          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)}
+        />
+
+        {error && <p className="text-danger text-center mb-3">{error}</p>}
+
+        <div className="d-flex gap-3">
+          <Button onClick={handleLogin} disabled={loading} variant="azul" >
+            {loading ? "Iniciando sesión..." : "Iniciar Sesión"}
+          </Button>
+        </div>
+      </motion.main>
+    </>
+  );
+}

src/hooks/auth.ts

@@ -10,13 +10,12 @@ export function useAuthRedirect() {
   useEffect(() => {
     const token = localStorage.getItem("token");
 
-    // Simula verificación (puedes hacer una llamada real)
-/*     if (!token) {
-      router.replace("/");
+    if (!token) {
+
     } else {
-      // Aquí podrías verificar validez con una API, jwt-decode, etc.
+      // Aquí podrías verificar validez con una API o jwt-decode
       setLoading(false); // Ya está autenticado, muestra contenido
-    } */
+    }
   }, [router]);
 
   return loading;

src/hooks/use-session.tsx

@@ -0,0 +1,52 @@
+// hooks/use-session.ts
+import { useEffect, useState } from "react";
+import { jwtDecode } from "jwt-decode";
+
+interface JwtPayload {
+  sub: string;
+  email: string;
+  tipo: string;
+  exp: number; // <-- Asegúrate de incluir esto
+}
+
+export const useSession = () => {
+  const [data, setData] = useState<JwtPayload | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const token = localStorage.getItem("token");
+    if (!token) {
+      setLoading(false);
+      return;
+    }
+
+    try {
+      const decoded = jwtDecode<JwtPayload>(token);
+      const now = Date.now() / 1000;
+
+      if (decoded.exp < now) {
+        // Token expirado
+        localStorage.removeItem("token");
+        setData(null);
+      } else {
+        setData(decoded);
+
+        // Programar logout automático al momento exacto de expiración
+        const timeout = setTimeout(() => {
+          localStorage.removeItem("token");
+          setData(null);
+          window.location.reload();
+        }, (decoded.exp - now) * 1000);
+
+        return () => clearTimeout(timeout);
+      }
+    } catch (e) {
+      console.error("Token inválido", e);
+      localStorage.removeItem("token");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  return { loading, data };
+};

tsconfig.json

@@ -22,6 +22,6 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/app/landing"],
   "exclude": ["node_modules"]
 }