Se afinaron detalles y se agregó la página de visualizacion

src/app/carga/page.tsx

@@ -4,6 +4,7 @@ import React from "react";
 import FuenteCard from "@/components/fuenteCard";
 import CargaArchivo from "@/components/cargaArchivo";
 import Button from "@/components/button";
+import { useAuthRedirect } from "@/hooks/auth";
 
 const fuentes = [
   { nombre: "Fuente 1", fecha: "Martes 3 de mayo 2025", activa: true },
@@ -13,51 +14,61 @@ const fuentes = [
 ];
 
 export default function Dashboard() {
+  // const loading = useAuthRedirect();
+
+  // if (loading) {
+  //   return <p></p>;
+  // }
+
+
   return (
-    <main className="p-6" style={{
-    minHeight: "100vh",
+    <main className="roboto" style={{
+      minHeight: "100vh",
       display: "flex",
       justifyContent: "center",
       alignItems: "center",
-      background: "#063970"}}>
+      background: "#063970"
+    }}>
+
+
 
-        
 
-      
       <div className="flex gap-4 flex-wrap mb-6" style={{
         background: "#f3f4f6",
         padding: "2rem",
         borderRadius: "8px",
         boxShadow: "0 4px 6px rgba(253, 253, 253, 0.1)",
         width: "100%",
-        
-        }}>
-        <Button onClick={() => alert('¡Hola mundo!')} className='mb-3'>
-            descarga Base de datos
-        </Button>    
+
+      }}>
+
         <h2 className="text-xl font-semibold mb-4">Fuentes</h2>
-       <div 
-            style={{
+        <div
+          style={{
             display: "flex",
             flexDirection: "row",
             justifyContent: "center",
-            gap: "16px", // espacio entre las cajas
-        }}>
-         {fuentes.map((f, idx) => (
-          <FuenteCard
-            key={idx}
-            nombre={f.nombre}
-            fecha={f.fecha}
-            activa={f.activa}
-          />
-        ))}
-       </div>
-
-      <h2 className="text-xl font-semibold mb-4">Carga</h2>
-      <div>
-        <CargaArchivo />
-      </div>
+            gap: "16px",
+          }}>
+          {fuentes.map((f, idx) => (
+            <FuenteCard
+              key={idx}
+              nombre={f.nombre}
+              fecha={f.fecha}
+              activa={f.activa}
+            />
+          ))}
         </div>
+
+        <h2 className="text-xl font-semibold mb-4">Carga</h2>
+        <div>
+          <CargaArchivo />
+        </div>
+        <h2 className="text-xl font-semibold mb-4"> Descarga de Datos</h2>
+        <Button onClick={() => alert('¡Hola mundo!')} className='mb-3'>
+          Descarga Base de Datos
+        </Button>
+      </div>
     </main>
   );
 }

src/app/page.tsx

@@ -3,12 +3,36 @@
 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('/api/auth/login', {
+        cuenta: value,
+        password: password,
+      });
+
+      const token = response.data.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={{
@@ -19,7 +43,6 @@ export default function Login() {
       background: "#063970"
     }}>
       <div style={{
-         
         display: "flex",
         justifyContent: "center",
         alignItems: "center",
@@ -28,47 +51,79 @@ export default function Login() {
         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>
+          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="Número de cuenta"
-          placeholder="9 dígitos sin guión"
-          value={value}
-          onChange={(e) => setValue(e.target.value)}
-        />
+          <Input
+            label="Número de cuenta"
+            placeholder="9 dígitos sin guión"
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+          />
 
-        <PasswordInput
-          label="Contraseña"
-          value={password}
-          onChange={(e) => setPassword(e.target.value)}
-        />
+          <PasswordInput
+            label="Contraseña"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
 
-        <button
-          type="submit"
-          style={{
-            width: "100%",
-            padding: "0.5rem",
-            backgroundColor: "#2563eb",
-            color: "#fff",
-            fontWeight: "bold",
-            border: "none",
-            borderRadius: "4px",
-            cursor: "pointer"
-          }}
-        >
-          Iniciar Sesión
-        </button></div>
+          {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/visualizacion/page.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+import React, { useState } from "react";
+import axios from "axios";
+
+import Select from "@/components/select";
+import Input from "@/components/input";
+import Button from "@/components/button";
+
+export default function Dashboard() {
+  const [tipo, setTipo] = useState("");
+  const [value, setValue] = useState("");
+  const [resultados, setResultados] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const handleSubmit = async () => {
+    setLoading(true);
+    try {
+      const response = await axios.get(`/api/usuarios`, {
+        params: {
+          tipo,
+          cuenta: value,
+        },
+      });
+      setResultados(response.data);
+    } catch (err: any) {
+      const message =
+        err.response?.data?.message ||
+        err.message ||
+        'Error al iniciar sesión';
+      setError(message);
+      console.error("Error al obtener datos:", error);
+      setResultados([]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <main
+      className="roboto"
+      style={{
+        minHeight: "100vh",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        background: "#063970",
+        flexDirection: "column",
+        padding: "2rem",
+      }}
+    >
+      <div
+        className="flex gap-4 flex-wrap mb-6"
+        style={{
+          background: "#f3f4f6",
+          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>
+
+          <Select
+            label="Tipo de Usuario"
+            name="usuario"
+            placeholder="Selecciona un usuario"
+            options={[
+              { value: "mx", label: "México" },
+              { value: "us", label: "Estados Unidos" },
+              { value: "ca", label: "Canadá" },
+            ]}
+            value={tipo}
+            onChange={(e) => setTipo(e.target.value)}
+          />
+
+          <Input
+            label="No.Cuenta"
+            placeholder="Ingresa tu No.Cuenta"
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+          />
+
+          <Button onClick={handleSubmit}>
+            {loading ? "Consultando..." : "Enviar Formulario"}
+          </Button>
+        </div>
+      </div>
+      {error && (
+        <p style={{ color: "red", marginTop: "0.5rem", textAlign: "center" }}>{error}</p>
+      )}
+      {/* Resultados */}
+      {resultados.length > 0 && (
+        <table
+          style={{
+            background: "#fff",
+            borderCollapse: "collapse",
+            width: "100%",
+            maxWidth: "900px",
+            borderRadius: "8px",
+            overflow: "hidden",
+            boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+          }}
+        >
+          <thead style={{ backgroundColor: "#2563eb", color: "#fff" }}>
+            <tr>
+              {Object.keys(resultados[0]).map((key) => (
+                <th
+                  key={key}
+                  style={{ padding: "1rem", textAlign: "left", borderBottom: "1px solid #ccc" }}
+                >
+                  {key.toUpperCase()}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <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>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </main>
+  );
+}