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

2025-06-13 15:12:59 -06:00
parent 877fcfe81e
commit 30944dee62
8 changed files with 689 additions and 66 deletions
@@ -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>
  );
 }
@@ -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>
  );
@@ -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>
+  );
+}
@@ -40,6 +40,12 @@ const CargaArchivo: React.FC = () => {
        onClick={handleUpload}
        disabled={!archivo}
        className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
+        style={{
+
+          backgroundColor: "#2563eb",
+          color: "#fff",
+
+        }}
      >
        Subir archivo
      </button>
@@ -0,0 +1,103 @@
+import React, { useId } from 'react';
+
+interface Option {
+  value: string | number;
+  label: string;
+}
+
+interface SelectProps
+  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'className'> {
+  label: string;
+  className?: {
+    container?: string;
+    label?: string;
+    input?: string;
+  };
+  options: Option[];
+  placeholder?: string;
+}
+
+/**
+ * Componente `Select` reutilizable en React.
+ *
+ * Este componente renderiza un elemento `<select>` con una etiqueta visible,
+ * opciones personalizadas y estilos configurables por clase. Es compatible
+ * con el uso controlado (`value`) o no controlado (`defaultValue`).
+ *
+ * Además, genera automáticamente un `id` si no se proporciona, manteniendo
+ * buenas prácticas de accesibilidad.
+ *
+ * @component
+ * @example
+ * // Uso básico
+ * <Select
+ *   label="País"
+ *   name="pais"
+ *   options={[
+ *     { value: 'mx', label: 'México' },
+ *     { value: 'us', label: 'Estados Unidos' },
+ *     { value: 'ca', label: 'Canadá' }
+ *   ]}
+ *   placeholder="Selecciona un país"
+ *   defaultValue=""
+ * />
+ *
+ * @param {Object} props - Propiedades del componente.
+ * @param {string} props.label - Etiqueta visible asociada al campo.
+ * @param {Array<{ value: string | number, label: string }>} props.options - Lista de opciones disponibles en el select.
+ * @param {string} [props.placeholder] - Opción deshabilitada inicial que actúa como guía o título (si se proporciona).
+ * @param {string} [props.name] - Nombre del campo (útil en formularios).
+ * @param {string} [props.id] - ID del campo; si no se proporciona, se genera automáticamente.
+ * @param {string | number} [props.defaultValue] - Valor por defecto del select (modo no controlado).
+ * @param {string | number} [props.value] - Valor actual del select (modo controlado).
+ * @param {Object} [props.className] - Objeto para aplicar clases CSS personalizadas.
+ * @param {string} [props.className.container] - Clases del contenedor principal.
+ * @param {string} [props.className.label] - Clases de la etiqueta.
+ * @param {string} [props.className.input] - Clases del `<select>`.
+ * @param {React.SelectHTMLAttributes<HTMLSelectElement>} [rest] - Cualquier otra prop válida para `<select>`.
+ *
+ * @returns {JSX.Element} Un elemento `<select>` con sus opciones y etiqueta asociada.
+ */
+const Select: React.FC<SelectProps> = ({
+  label,
+  className,
+  options,
+  placeholder,
+  id,
+  name,
+  defaultValue,
+  value,
+  ...rest
+}) => {
+  const generatedId = useId();
+  const selectId = id || name || generatedId;
+
+  return (
+    <div className={`mb-3 ${className?.container ?? ''}`}>
+      <label htmlFor={selectId} className={`form-label ${className?.label ?? ''}`}>
+        {label}
+      </label>
+      <select
+        id={selectId}
+        name={name}
+        className={`form-select bg-white ${className?.input ?? ''}`}
+        defaultValue={defaultValue ?? (value === undefined ? '' : undefined)}
+        value={value}
+        {...rest}
+      >
+        {placeholder && (
+          <option value="" disabled>
+            {placeholder}
+          </option>
+        )}
+        {options.map((option) => (
+          <option key={option.value.toString()} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};
+
+export default Select;
@@ -0,0 +1,23 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+
+export function useAuthRedirect() {
+  const router = useRouter();
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const token = localStorage.getItem("token");
+
+    // Simula verificación (puedes hacer una llamada real)
+    if (!token) {
+      router.replace("/");
+    } else {
+      // Aquí podrías verificar validez con una API, jwt-decode, etc.
+      setLoading(false); // Ya está autenticado, muestra contenido
+    }
+  }, [router]);
+
+  return loading;
+}