From b18fd46acfced0f75f8b4b9ee3f5e3a9ec524ba9 Mon Sep 17 00:00:00 2001
From: evenegas <emilio.00124e@gmail.com>
Date: Mon, 30 Jun 2025 12:55:08 -0600
Subject: [PATCH] Cambios de estilo

---
 src/app/(auth)/page.tsx          |   2 +-
 src/app/alta/alta.tsx            | 191 +++++++++++++++++++++++++++++++
 src/app/carga/page.tsx           |   6 +-
 src/app/landing/IconCircle.css   |   5 +-
 src/app/landing/globals.css      |  24 ++--
 src/app/landing/landing_body.tsx |   9 +-
 src/app/landing/page.tsx         |  66 -----------
 src/app/layout.tsx               |   2 +-
 src/app/page.tsx                 |  24 ++--
 src/app/visualizacion/page.tsx   |  26 +++--
 src/components/cargaArchivo.tsx  |   2 +-
 src/containers/LoginPage.tsx     |   4 +-
 12 files changed, 253 insertions(+), 108 deletions(-)
 create mode 100644 src/app/alta/alta.tsx
 delete mode 100644 src/app/landing/page.tsx

diff --git a/src/app/(auth)/page.tsx b/src/app/(auth)/page.tsx
index 91b4047..3919ba1 100644
--- a/src/app/(auth)/page.tsx
+++ b/src/app/(auth)/page.tsx
@@ -57,7 +57,7 @@ export default function Page() {
         transition={{ delay: 0, duration: 0.5 }}
       >
         <h2 className="text-dorado">Bienvenido al sistema de</h2>
-        <h1 className="text-azul">Carga Masiva</h1>
+        <h1 className="text-azul">Servicios PCPUMA y CEDETEC</h1>
         <SimpleInput
           label="Usuario"
           className={{
diff --git a/src/app/alta/alta.tsx b/src/app/alta/alta.tsx
new file mode 100644
index 0000000..caa1bd7
--- /dev/null
+++ b/src/app/alta/alta.tsx
@@ -0,0 +1,191 @@
+"use client";
+
+import React, { useState } from "react";
+
+const tiposUsuarioEstudiante = [
+    "Diplomado", "Extra Largo", "Servicio Social", "Idiomas R (UNAM)",
+    "Idiomas Sabatino", "Reinscrito", "Posgrado", "Intercambio UNAM",
+    "Movilidad", "Ampliación de Conocimiento", "Licenciatura",
+];
+
+const tiposUsuarioEspecial = ["Profesor", "Trabajadores"];
+
+const FormularioCargaIndividual = () => {
+    const [tipoUsuario, setTipoUsuario] = useState("");
+    const [formData, setFormData] = useState<any>({});
+    const [errores, setErrores] = useState<string[]>([]);
+    const [mensaje, setMensaje] = useState("");
+
+    const camposEstudiante = [
+        "num_cuenta", "carrera", "clave_carrera", "nombre",
+        "a_paterno", "a_materno", "fecha_nacimiento", "genero", "generacion",
+    ];
+
+    const camposEspecial = [
+        "num_cuenta", "nombre", "a_paterno", "a_materno", "rfc",
+        "fecha_nacimiento", "genero", "carrera", "clave_carrera",
+    ];
+
+    const camposVisibles =
+        tipoUsuario === ""
+            ? []
+            : tiposUsuarioEstudiante.includes(tipoUsuario)
+                ? camposEstudiante
+                : 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;
+        }
+
+        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("http://localhost:4000/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 ❌");
+        }
+    };
+
+    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, ...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" }}
+                >
+                    Guardar Usuario
+                </button>
+            </div>
+        </form>
+    );
+};
+
+export default FormularioCargaIndividual;
diff --git a/src/app/carga/page.tsx b/src/app/carga/page.tsx
index 74e27ae..cdc3c6f 100644
--- a/src/app/carga/page.tsx
+++ b/src/app/carga/page.tsx
@@ -31,7 +31,7 @@ export default function Dashboard() {
       const data = await res.json();
       console.log("Respuesta del backend:", data);
 
-      const fuentesConvertidas: Fuente[] = data.map((mov: any) => ({
+      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", {
@@ -40,7 +40,7 @@ export default function Dashboard() {
           month: "long",
           year: "numeric",
         }),
-        activa: true, // puedes ajustar esto si hay una lógica real
+        activa: data.button,
       }));
 
       setFuentes(fuentesConvertidas);
@@ -111,7 +111,7 @@ export default function Dashboard() {
           ))}
         </div>
 
-        <h2 className="text-xl font-semibold mt-6 mb-4">Carga</h2>
+        <h2 style={{ marginTop: "2rem" }} className="text-xl font-semibold mt-6 mb-4">Carga</h2>
         <div>
           <CargaArchivo />
         </div>
diff --git a/src/app/landing/IconCircle.css b/src/app/landing/IconCircle.css
index 99b933b..4d30313 100644
--- a/src/app/landing/IconCircle.css
+++ b/src/app/landing/IconCircle.css
@@ -53,5 +53,6 @@
 
 .floating-icon i {
   font-size: 1.25rem;
-  color: #d59f0f; /* Dorado UNAM */
-}
+  color: #d59f0f;
+  /* Dorado UNAM */
+}
\ No newline at end of file
diff --git a/src/app/landing/globals.css b/src/app/landing/globals.css
index 2fed0d1..ff45995 100644
--- a/src/app/landing/globals.css
+++ b/src/app/landing/globals.css
@@ -33,9 +33,11 @@ header div:first-child {
   background-color: white;
   padding: 10px;
   border-radius: 50px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* sombra suave */
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  /* sombra suave */
   display: flex;
-  gap: 1rem; /* espacio entre los <a> */
+  gap: 1rem;
+  /* espacio entre los <a> */
 }
 
 header a {
@@ -80,7 +82,7 @@ p {
 }
 
 /* Botón principal */
-div > button {
+div>button {
   background-color: #003d79;
   color: white;
   padding: 0.7rem 2rem;
@@ -90,14 +92,14 @@ div > button {
   cursor: pointer;
 }
 
-div > div p {
+div>div p {
   margin: 0;
   font-size: 0.9rem;
   color: #888;
 }
 
 /* Scroll hint */
-body > p:last-of-type {
+body>p:last-of-type {
   margin-top: 2rem;
   font-size: 0.85rem;
   color: #aaa;
@@ -112,12 +114,16 @@ body > p:last-of-type {
   left: none;
   width: 100vw;
   height: 100vh;
-  z-index: -1; /* para que esté detrás de todo */
-  pointer-events: none; /* no interfiere con el contenido */
+  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;
-  overflow: hidden;
+  height: 100%;
+  overflow-y: auto;
 }
 
 .circle {
@@ -130,4 +136,4 @@ body > p:last-of-type {
 
 .invert {
   filter: invert(1);
-}
+}
\ No newline at end of file
diff --git a/src/app/landing/landing_body.tsx b/src/app/landing/landing_body.tsx
index ca7a6c1..9519eb2 100644
--- a/src/app/landing/landing_body.tsx
+++ b/src/app/landing/landing_body.tsx
@@ -11,18 +11,15 @@ export default function LandingBody() {
   const router = useRouter();
   return (
     <motion.main
+      className="overflow"
       initial={{ y: 50, opacity: 0 }}
       animate={{ y: 0, opacity: 1 }}
       transition={{ delay: 1, duration: 1 }}
     >
       <IconCircle delay={2} />
 
-      <strong>Servicios de soporte técnico PCPUMA</strong>
-      <p>
-        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>
+      <strong>Servicios PCPUMA y CEDETEC</strong>
+
 
       <div>
         <Link
diff --git a/src/app/landing/page.tsx b/src/app/landing/page.tsx
deleted file mode 100644
index 8a02c6c..0000000
--- a/src/app/landing/page.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-"use client";
-
-import "./globals.css";
-import { motion } from "framer-motion";
-
-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="min-vh-100 d-flex flex-column"
-    >
-      {/* <Header onNavClick={setPage} /> */}
-
-      <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,
-              duration: 2,
-              ease: "easeOut",
-            }}
-            style={{
-              width: size,
-              height: size,
-            }}
-          />
-        ))}
-      </div>
-
-      <div className="flex-grow-1 d-flex flex-column align-items-center justify-content-center text-center">
-        {/* renderiza el body según el estado `page` */}
-        {page === "landing" && <LandingBody />}
-        {page === "login" && <Page />}
-        {page === "carga" && <Dashboard />}
-        {page === "consulta" && <Consulta />}
-      </div>
-
-      {/* <Login />
-
-      <contenidoAdmin1 />
-      <contenidoWorker />
-      <contenidoPublico /> */}
-
-      <Footer />
-    </motion.div>
-  );
-};
-
-export default Home;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 32f2e23..4f13e7c 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -11,7 +11,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className="overflow-hidden">
+      <body className="overflow">
         <BootstrapClient />
         <motion.div
           initial={{ opacity: 0 }}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 5f4c428..52e1477 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -10,8 +10,9 @@ import Dashboard from "./carga/page";
 import Consulta from "./visualizacion/page";
 import LoginPage from "@/containers/LoginPage";
 import { useSession } from "@/hooks/use-session";
+import FormularioCargaIndividual from "./alta/alta";
 
-export type PageKey = "landing" | "login" | "carga" | "consulta" | "publico";
+export type PageKey = "landing" | "login" | "carga" | "consulta" | "carga individual";
 
 export interface HeaderItem {
   label: string;
@@ -30,17 +31,17 @@ const Home = () => {
 
   const items: HeaderItem[] = data?.id
     ? [
-        { label: "Inicio", page: "landing" },
-        { label: "Consulta", page: "consulta" },
-        { label: "Carga", page: "carga" },
-        { label: "Público", page: "publico" },
-        { label: "Cerrar sesión", onClick: handleLogout },
-      ]
+      { label: "Inicio", page: "landing" },
+      { label: "Consulta", page: "consulta" },
+      { label: "Carga", page: "carga" },
+      { label: "Carga individual", page: "carga individual" },
+      { label: "Cerrar sesión", onClick: handleLogout },
+    ]
     : [
-        { label: "Consulta", page: "consulta" },
-        { label: "Inicio", page: "landing" },
-        { label: "Login", page: "login" },
-      ];
+      { label: "Consulta", page: "consulta" },
+      { label: "Inicio", page: "landing" },
+      { label: "Login", page: "login" },
+    ];
 
   return (
     <>
@@ -51,6 +52,7 @@ const Home = () => {
         {page === "login" && <LoginPage />}
         {page === "consulta" && <Consulta />}
         {page === "carga" && <Dashboard />}
+        {page === 'carga individual' && <FormularioCargaIndividual />}
       </div>
 
       <Footer />
diff --git a/src/app/visualizacion/page.tsx b/src/app/visualizacion/page.tsx
index b460aeb..dcdfc0c 100644
--- a/src/app/visualizacion/page.tsx
+++ b/src/app/visualizacion/page.tsx
@@ -44,10 +44,10 @@ export default function Consulta() {
     <main>
       <div>
         <div>
-          <h2 className="text-xl font-semibold mb-4">Consulta de servicios</h2>
+          <h2 className="text-xl font-semibold mb-4">Servicios habilitados</h2>
 
           <Input
-            label="No.Cuenta"
+            label="Número de cuenta o trabajador"
             placeholder="Ingresa tu No.Cuenta"
             value={value}
             className={{
@@ -56,9 +56,19 @@ export default function Consulta() {
             onChange={(e) => setValue(e.target.value)}
           />
 
-          <Button onClick={handleSubmit}>
-            {loading ? "Consultando..." : "Consultar"}
-          </Button>
+          <button
+            onClick={handleSubmit}
+            style={{
+              backgroundColor: "#003d79",
+              color: "#fff",
+              padding: "0.5rem 1rem",
+              border: "none",
+              borderRadius: "4px",
+              cursor: "pointer"
+            }}
+          >
+            {loading ? "Buascando..." : "Buascar"}
+          </button>
         </div>
       </div>
 
@@ -71,16 +81,17 @@ export default function Consulta() {
       {resultados.length > 0 && (
         <table
           style={{
+            marginTop: "2rem",
             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
@@ -105,6 +116,7 @@ export default function Consulta() {
                     style={{
                       padding: "0.75rem",
                       borderBottom: "1px solid #eee",
+                      textAlign: "left"
                     }}
                   >
                     {String(val)}
diff --git a/src/components/cargaArchivo.tsx b/src/components/cargaArchivo.tsx
index 7600abb..d864957 100644
--- a/src/components/cargaArchivo.tsx
+++ b/src/components/cargaArchivo.tsx
@@ -67,7 +67,7 @@ const CargaArchivo: React.FC = () => {
       {errores && (
         <div className="">
           <div className="flex justify-between items-center mb-2">
-            <strong className="text-lg">Reporte de Errores</strong>
+            <h2 className="text-xl font-semibold mt-6 mb-4">Reporte de Errores</h2>
             <Button
               variant="danger"
               onClick={() => setErrores(null)}
diff --git a/src/containers/LoginPage.tsx b/src/containers/LoginPage.tsx
index afdaaec..74734ff 100644
--- a/src/containers/LoginPage.tsx
+++ b/src/containers/LoginPage.tsx
@@ -33,6 +33,8 @@ export default function LoginPage() {
       setEmail("");
       setPassword("");
       setError("");
+      window.location.reload();
+
 
       // Opcional: mostrar mensaje de éxito
       alert("Login exitoso. Ahora puedes acceder a Carga y Visualización.");
@@ -52,7 +54,7 @@ export default function LoginPage() {
         transition={{ delay: 0, duration: 0.5 }}
       >
         <h2 className="text-dorado fw-bold">Bienvenido al sistema de</h2>
-        <h1 className="text-azul fw-bold">Carga Masiva</h1>
+        <h1 className="text-azul fw-bold">Servicios PC Puma</h1>
         <SimpleInput
           label="Usuario"
           className={{