mensaje
This commit is contained in:
Alejandra-Guzman-Mendez
@@ -4,79 +4,82 @@ import { useState } from "react";
|
||||
import axios from "axios";
|
||||
import { useRouter } from "next/navigation";
|
||||
import toast from "react-hot-toast";
|
||||
import "../../styles/layout/ForgotPasswordPage.scss"; // ajusta ruta si tu proyecto la tiene en otro sitio
|
||||
import "../../styles/layout/ForgotPasswordPage.scss";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function Page() {
|
||||
const [email, setEmail] = useState("");
|
||||
const [nombre, setNombre] = useState("");
|
||||
const [contraseña, setContraseña] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const router = useRouter();
|
||||
|
||||
const validateEmail = (e: string) => {
|
||||
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e);
|
||||
};
|
||||
|
||||
const handleSubmit = async (ev: React.FormEvent<HTMLFormElement>) => {
|
||||
ev.preventDefault();
|
||||
if (!validateEmail(email)) {
|
||||
toast.error("Ingresa un correo válido.");
|
||||
|
||||
if (nombre.trim().length < 3) {
|
||||
toast.error("El nombre debe tener al menos 3 caracteres.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (contraseña.trim().length < 6) {
|
||||
toast.error("La contraseña debe tener al menos 6 caracteres.");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
const res = await axios.post("/api/auth/forgot-password", { email });
|
||||
const res = await axios.post("/api/admin/change-password", {
|
||||
nombre,
|
||||
contraseña,
|
||||
});
|
||||
|
||||
if (res.status === 200) {
|
||||
toast.success(
|
||||
"Si existe esa cuenta, recibirás un correo con instrucciones."
|
||||
);
|
||||
// Opcional: redirigir al login después de enviar
|
||||
setTimeout(() => router.push("/"), 1200);
|
||||
toast.success("Contraseña actualizada correctamente.");
|
||||
setNombre("");
|
||||
setContraseña("");
|
||||
} else {
|
||||
toast.error("Ocurrió un error. Intenta de nuevo.");
|
||||
toast.error("No se pudo cambiar la contraseña.");
|
||||
}
|
||||
} catch (error) {
|
||||
// manejar mensajes de error desde el servidor si vienen
|
||||
console.log(error);
|
||||
console.error(error);
|
||||
toast.error("Ocurrió un error al cambiar la contraseña.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<main
|
||||
className="forgot-password-page"
|
||||
>
|
||||
<h1>¿Olvidaste tu contraseña?</h1>
|
||||
<p>
|
||||
Escribe el correo asociado a tu cuenta y te enviaremos instrucciones
|
||||
para restablecerla.
|
||||
</p>
|
||||
<main className="forgot-password-page">
|
||||
<h1>Cambiar contraseña</h1>
|
||||
<p>Ingresa el nombre del usuario y su nueva contraseña.</p>
|
||||
|
||||
<form
|
||||
onSubmit={handleSubmit}
|
||||
className="forgot-form"
|
||||
style={{ display: "grid", gap: 12 }}
|
||||
>
|
||||
<label htmlFor="email">Correo electrónico</label>
|
||||
<form onSubmit={handleSubmit} className="forgot-form">
|
||||
<label htmlFor="nombre">Nombre de usuario</label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="tu@correo.com"
|
||||
id="nombre"
|
||||
type="text"
|
||||
value={nombre}
|
||||
onChange={(e) => setNombre(e.target.value)}
|
||||
placeholder="Nombre de usuario"
|
||||
required
|
||||
/>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? "Enviando..." : "Enviar instrucciones"}
|
||||
<label htmlFor="contraseña">Nueva contraseña</label>
|
||||
<input
|
||||
id="contraseña"
|
||||
type="password"
|
||||
value={contraseña}
|
||||
onChange={(e) => setContraseña(e.target.value)}
|
||||
placeholder="Nueva contraseña"
|
||||
required
|
||||
/>
|
||||
|
||||
<button type="submit" disabled={loading}>
|
||||
{loading ? "Actualizando..." : "Cambiar contraseña"}
|
||||
</button>
|
||||
|
||||
<div style={{ marginTop: 8 }}>
|
||||
<Link href="/">Recordé mi contraseña — Iniciar sesión</Link>
|
||||
<Link href="/">Regresar al inicio</Link>
|
||||
</div>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
@@ -0,0 +1,150 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import '../../styles/layout/pregunta1.scss';
|
||||
|
||||
// Tipos
|
||||
type OsEntry = {
|
||||
os: string;
|
||||
count: string; // o number si la API devuelve números
|
||||
isTotal?: boolean;
|
||||
};
|
||||
|
||||
type PlatformData = {
|
||||
[key: string]: OsEntry[];
|
||||
};
|
||||
|
||||
// === DATOS TEMPORALES (mock) ===
|
||||
const MOCK_DATA: PlatformData = {
|
||||
'pc-desktop': [
|
||||
{ os: 'Windows 11', count: '408' },
|
||||
{ os: 'Windows 10', count: '1171' },
|
||||
{ os: 'Windows 7/8', count: '177' },
|
||||
{ os: 'Windows XP/Vista', count: '43' },
|
||||
{ os: 'Linux', count: '45' },
|
||||
{ os: 'Total', count: '1844', isTotal: true },
|
||||
],
|
||||
'apple-desktop': [
|
||||
{ os: 'Mac OS X(13 - Ventura, 14 - Sonoma)', count: '205' },
|
||||
{ os: 'Mac OS X(Mojave,Catalina,11 - Big Sur, 12 - Monterrey)', count: '180' },
|
||||
{ os: 'Mac OS X(Yosemite,El Capitan,Sierra,High Sierra)', count: '95' },
|
||||
{ os: 'Mac OS X(Snow Leopard,Mountain Lion,Mavericks)', count: '6' },
|
||||
{ os: 'Total', count: '480', isTotal: true },
|
||||
],
|
||||
'pc-laptop': [
|
||||
{ os: 'Windows 11', count: '40' },
|
||||
{ os: 'Windows 10', count: '171' },
|
||||
{ os: 'Windows 7/8', count: '17' },
|
||||
{ os: 'Windows XP/Vista', count: '3' },
|
||||
{ os: 'Linux', count: '5' },
|
||||
{ os: 'Total', count: '144', isTotal: true },
|
||||
],
|
||||
'apple-laptop': [
|
||||
{ os: 'Mac OS X(13 - Ventura, 14 - Sonoma)', count: '205' },
|
||||
{ os: 'Mac OS X(Mojave,Catalina,11 - Big Sur, 12 - Monterrey)', count: '180' },
|
||||
{ os: 'Mac OS X(Yosemite,El Capitan,Sierra,High Sierra)', count: '95' },
|
||||
{ os: 'Mac OS X(Snow Leopard,Mountain Lion,Mavericks)', count: '6' },
|
||||
{ os: 'Total', count: '480', isTotal: true },
|
||||
],
|
||||
'servers': [
|
||||
{ os: 'Linux (CentOs,Fedora,Ubuntu,Red Hat Enterprise,entre otros)', count: '120' },
|
||||
{ os: 'Unix (AIX,MAC OS Server,Solaris,entre otros)', count: '80' },
|
||||
{ os: 'Windows Server 2022/2023', count: '50' },
|
||||
{ os: 'Windows Server 2016/2019', count: '80' },
|
||||
{ os: 'Windows Server 2008/2012', count: '50' },
|
||||
{ os: 'Windows Server 2000/2003', count: '12' },
|
||||
{ os: 'Total', count: '250', isTotal: true },
|
||||
],
|
||||
};
|
||||
|
||||
const API_ENDPOINT = '/api/platform-stats'; // ← ¡Reemplaza esto cuando sepas la URL real!
|
||||
|
||||
const Page = () => {
|
||||
const [activeTab, setActiveTab] = useState<string>('pc-desktop');
|
||||
const [data, setData] = useState<PlatformData>(MOCK_DATA);
|
||||
const [loading, setLoading] = useState<boolean>(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
// === DESCOMENTA ESTO CUANDO TENGAS LA API ===
|
||||
// const response = await fetch(API_ENDPOINT);
|
||||
// if (!response.ok) throw new Error('Error al cargar estadísticas');
|
||||
// const apiData: PlatformData = await response.json();
|
||||
// setData(apiData);
|
||||
// setLoading(false);
|
||||
|
||||
// === POR AHORA: usa datos simulados (y simula un retraso si quieres) ===
|
||||
// await new Promise(resolve => setTimeout(resolve, 300));
|
||||
setData(MOCK_DATA);
|
||||
setLoading(false);
|
||||
} catch (err) {
|
||||
console.error('Error al cargar datos:', err);
|
||||
setError('No se pudieron cargar las estadísticas. Usando datos temporales.');
|
||||
setData(MOCK_DATA); // fallback en caso de error
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
const currentData = data[activeTab] || [];
|
||||
|
||||
// Si quisieras mostrar un estado de carga (opcional)
|
||||
// if (loading) return <div className="dashboardContainer"><p>Cargando...</p></div>;
|
||||
// if (error) console.warn(error); // o muestra un toast, etc.
|
||||
|
||||
return (
|
||||
<div className="dashboardContainer">
|
||||
<div className="header">
|
||||
<h2>Estadísticas de Plataformas</h2>
|
||||
</div>
|
||||
|
||||
<div className="scanView">
|
||||
<div className="container">
|
||||
<div className="header">
|
||||
Presione cada pestaña para ver la información de las plataformas.
|
||||
</div>
|
||||
|
||||
<div className="main-content">
|
||||
<div className="tabs">
|
||||
{Object.entries({
|
||||
'pc-desktop': 'Computadoras de escritorio Plataforma PC',
|
||||
'apple-desktop': 'Computadoras de escritorio Plataforma Apple',
|
||||
'pc-laptop': 'Computadoras portatiles Plataforma PC',
|
||||
'apple-laptop': 'Computadoras portatiles Plataforma Apple',
|
||||
'servers': 'Servidores de alto rendimiento',
|
||||
}).map(([key, label]) => (
|
||||
<div
|
||||
key={key}
|
||||
className={`tab ${activeTab === key ? 'active' : ''}`}
|
||||
onClick={() => setActiveTab(key)}
|
||||
>
|
||||
{label}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="data-table-wrapper">
|
||||
<div className="data-table">
|
||||
{currentData.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`data-row ${item.isTotal ? 'total-row' : ''}`}
|
||||
>
|
||||
<div className="os-name">{item.os}</div>
|
||||
<div className="count-box">{item.count}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Page;
|
||||
@@ -0,0 +1,150 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import './pregunta2.scss';
|
||||
|
||||
// Tipos
|
||||
type OsEntry = {
|
||||
os: string;
|
||||
count: string; // o number si la API devuelve números
|
||||
isTotal?: boolean;
|
||||
};
|
||||
|
||||
type PlatformData = {
|
||||
[key: string]: OsEntry[];
|
||||
};
|
||||
|
||||
// === DATOS TEMPORALES (mock) ===
|
||||
const MOCK_DATA: PlatformData = {
|
||||
'pc-desktop': [
|
||||
{ os: 'Windows 11', count: '408' },
|
||||
{ os: 'Windows 10', count: '1171' },
|
||||
{ os: 'Windows 7/8', count: '177' },
|
||||
{ os: 'Windows XP/Vista', count: '43' },
|
||||
{ os: 'Linux', count: '45' },
|
||||
{ os: 'Total', count: '1844', isTotal: true },
|
||||
],
|
||||
'apple-desktop': [
|
||||
{ os: 'Mac OS X(13 - Ventura, 14 - Sonoma)', count: '205' },
|
||||
{ os: 'Mac OS X(Mojave,Catalina,11 - Big Sur, 12 - Monterrey)', count: '180' },
|
||||
{ os: 'Mac OS X(Yosemite,El Capitan,Sierra,High Sierra)', count: '95' },
|
||||
{ os: 'Mac OS X(Snow Leopard,Mountain Lion,Mavericks)', count: '6' },
|
||||
{ os: 'Total', count: '480', isTotal: true },
|
||||
],
|
||||
'pc-laptop': [
|
||||
{ os: 'Windows 11', count: '40' },
|
||||
{ os: 'Windows 10', count: '171' },
|
||||
{ os: 'Windows 7/8', count: '17' },
|
||||
{ os: 'Windows XP/Vista', count: '3' },
|
||||
{ os: 'Linux', count: '5' },
|
||||
{ os: 'Total', count: '144', isTotal: true },
|
||||
],
|
||||
'apple-laptop': [
|
||||
{ os: 'Mac OS X(13 - Ventura, 14 - Sonoma)', count: '39' },
|
||||
{ os: 'Mac OS X(Mojave,Catalina,11 - Big Sur, 12 - Monterrey)', count: '23' },
|
||||
{ os: 'Mac OS X(Yosemite,El Capitan,Sierra,High Sierra)', count: '0' },
|
||||
{ os: 'Mac OS X(Snow Leopard,Mountain Lion,Mavericks)', count: '9' },
|
||||
{ os: 'Total', count: '71', isTotal: true },
|
||||
],
|
||||
'servers': [
|
||||
{ os: 'Linux (CentOs,Fedora,Ubuntu,Red Hat Enterprise,entre otros)', count: '21' },
|
||||
{ os: 'Unix (AIX,MAC OS Server,Solaris,entre otros)', count: '2' },
|
||||
{ os: 'Windows Server 2022/2023', count: '6' },
|
||||
{ os: 'Windows Server 2016/2019', count: '3' },
|
||||
{ os: 'Windows Server 2008/2012', count: '3' },
|
||||
{ os: 'Windows Server 2000/2003', count: '2' },
|
||||
{ os: 'Total', count: '37', isTotal: true },
|
||||
],
|
||||
};
|
||||
|
||||
const API_ENDPOINT = '/api/platform-stats'; // ← ¡Reemplaza esto cuando sepas la URL real!
|
||||
|
||||
const Page = () => {
|
||||
const [activeTab, setActiveTab] = useState<string>('pc-desktop');
|
||||
const [data, setData] = useState<PlatformData>(MOCK_DATA);
|
||||
const [loading, setLoading] = useState<boolean>(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
// === DESCOMENTA ESTO CUANDO TENGAS LA API ===
|
||||
// const response = await fetch(API_ENDPOINT);
|
||||
// if (!response.ok) throw new Error('Error al cargar estadísticas');
|
||||
// const apiData: PlatformData = await response.json();
|
||||
// setData(apiData);
|
||||
// setLoading(false);
|
||||
|
||||
// === POR AHORA: usa datos simulados (y simula un retraso si quieres) ===
|
||||
// await new Promise(resolve => setTimeout(resolve, 300));
|
||||
setData(MOCK_DATA);
|
||||
setLoading(false);
|
||||
} catch (err) {
|
||||
console.error('Error al cargar datos:', err);
|
||||
setError('No se pudieron cargar las estadísticas. Usando datos temporales.');
|
||||
setData(MOCK_DATA); // fallback en caso de error
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
const currentData = data[activeTab] || [];
|
||||
|
||||
// Si quisieras mostrar un estado de carga (opcional)
|
||||
// if (loading) return <div className="dashboardContainer"><p>Cargando...</p></div>;
|
||||
// if (error) console.warn(error); // o muestra un toast, etc.
|
||||
|
||||
return (
|
||||
<div className="dashboardContainer">
|
||||
<div className="header">
|
||||
<h2>Estadísticas de Plataformas</h2>
|
||||
</div>
|
||||
|
||||
<div className="scanView">
|
||||
<div className="container">
|
||||
<div className="header">
|
||||
Presione cada pestaña para ver la información de las plataformas.
|
||||
</div>
|
||||
|
||||
<div className="main-content">
|
||||
<div className="tabs">
|
||||
{Object.entries({
|
||||
'pc-desktop': 'Computadoras de escritorio Plataforma PC',
|
||||
'apple-desktop': 'Computadoras de escritorio Plataforma Apple',
|
||||
'pc-laptop': 'Computadoras portátiles Plataforma PC',
|
||||
'apple-laptop': 'Computadoras portátiles Plataforma Apple',
|
||||
'servers': 'Servidores de alto rendimiento',
|
||||
}).map(([key, label]) => (
|
||||
<div
|
||||
key={key}
|
||||
className={`tab ${activeTab === key ? 'active' : ''}`}
|
||||
onClick={() => setActiveTab(key)}
|
||||
>
|
||||
{label}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="data-table-wrapper">
|
||||
<div className="data-table">
|
||||
{currentData.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`data-row ${item.isTotal ? 'total-row' : ''}`}
|
||||
>
|
||||
<div className="os-name">{item.os}</div>
|
||||
<div className="count-box">{item.count}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Page;
|
||||
@@ -0,0 +1,166 @@
|
||||
.dashboardContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 24px;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
color: #0056b3;
|
||||
}
|
||||
}
|
||||
|
||||
.scanView {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 16px 20px;
|
||||
background: #f7f7f7;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
font-size: 15px;
|
||||
color: #0056b3;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
box-shadow: none;
|
||||
position: static;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
display: flex;
|
||||
min-height: 420px;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
width: 230px;
|
||||
background-color: #fafafa;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 18px 16px;
|
||||
cursor: pointer;
|
||||
border-right: 1px solid #e0e0e0;
|
||||
color: #555;
|
||||
transition: all 0.3s ease;
|
||||
border-left: 4px solid transparent;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tab:hover {
|
||||
background-color: #f0f0f0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
background-color: #fff;
|
||||
border-left: 4px solid #0056b3;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid #0056b3;
|
||||
color: #0056b3;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.data-table-wrapper {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.data-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
background: #f9f9f9;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.data-row:hover {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
.os-name {
|
||||
flex: 1;
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.count-box {
|
||||
background: #ffffff;
|
||||
border: 1px solid #0056b3;
|
||||
padding: 6px 14px;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
text-align: center;
|
||||
min-width: 70px;
|
||||
}
|
||||
|
||||
.total-row {
|
||||
background: #eaf4ff;
|
||||
font-weight: bold;
|
||||
|
||||
.count-box {
|
||||
color:#0056b3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ======== RESPONSIVE ======== */
|
||||
@media (max-width: 700px) {
|
||||
.scanView .main-content {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.scanView .tabs {
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.scanView .tab {
|
||||
flex: 1;
|
||||
padding: 14px 0;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
import "./preguntas.css";
|
||||
|
||||
export default function Preguntas() {
|
||||
|
||||
return (
|
||||
|
||||
<div>
|
||||
<h1 className="titulo">Pregunta 2</h1>
|
||||
{/* Recuadro pregunta*/}
|
||||
<div className="pregunta-cuadro">
|
||||
2. Desglose el número de equipos de cómputo que cuentan con los siguientes sistemas operativos.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
.titulo{
|
||||
align-content: left;
|
||||
color: rgb(16, 16, 123);
|
||||
margin-top: 40px;
|
||||
margin-left: 40px;
|
||||
font-size: 30px; /*tamaño del texto*/
|
||||
}
|
||||
|
||||
.pregunta-cuadro{
|
||||
border: 2px solid rgb(16, 16, 123); /* Borde del cuadro */
|
||||
border-radius: 10px; /* Bordes redondeados */
|
||||
padding: 20px; /* Espacio dentro del cuadro */
|
||||
background-color: rgb(230, 230, 250); /* Color de fondo */
|
||||
font-size: 18px; /* Tamaño del texto */
|
||||
width: 80%; /* Ancho del cuadro */
|
||||
margin-left: 40px; /* Centrar horizontalmente */
|
||||
box-shadow: 2px 2px 10px rgba(0,0,0,0.2); /* Sombra opcional */
|
||||
font-size: 15px; /*tamaño del texto*/
|
||||
|
||||
}
|
||||
@@ -1,14 +1,13 @@
|
||||
"use client"
|
||||
"use client";
|
||||
import { useState } from "react";
|
||||
import "./reporte.css";
|
||||
import axios from "axios";
|
||||
|
||||
export default function Reporte() {
|
||||
|
||||
const [report,setReport]=useState();
|
||||
export default function Page() {
|
||||
const [report, setReport] = useState();
|
||||
|
||||
async function Report() {
|
||||
const res=await axios.get("https");
|
||||
const res = await axios.get("https");
|
||||
setReport(res.data);
|
||||
}
|
||||
|
||||
@@ -90,4 +89,4 @@ const [report,setReport]=useState();
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,186 @@
|
||||
.barNavigation {
|
||||
text-align: center;
|
||||
justify-content: end;
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
height: 45px;
|
||||
max-height: 40px;
|
||||
}
|
||||
|
||||
.barNavigation ul {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 90%;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.barNavigation li {
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
width: auto;
|
||||
transition: background-color 0.3s ease;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.menuToggle {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.menuToggle div {
|
||||
width: 25px;
|
||||
height: 3px;
|
||||
background-color: black;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.subMenu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
.subMenu ul {
|
||||
opacity: 0;
|
||||
max-height: 0;
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
min-width: 200px;
|
||||
max-width: 300px;
|
||||
left: 0;
|
||||
background-color: #003e79;
|
||||
transition: opacity 0.4s ease, max-height 0.4s ease;
|
||||
}
|
||||
|
||||
.subMenu ul a {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.subMenu:hover ul {
|
||||
opacity: 1;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
.subMenu:hover ul a {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.subMenu li {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.subMenu span {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #383838;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.links {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
/* Estilo del botón de cierre de sesión */
|
||||
.logout-button {
|
||||
background-color: #ff4d4d;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
font-size: 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
max-width: 200px;
|
||||
|
||||
&:hover {
|
||||
background-color: #e63939;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.menuToggle {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: end;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.barNavigation {
|
||||
font-size: 15px;
|
||||
display: block;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.barNavigation ul {
|
||||
position: absolute;
|
||||
background-color: #f4f5f7;
|
||||
flex-direction: column;
|
||||
padding: 10px 0;
|
||||
align-items: center;
|
||||
display: none;
|
||||
z-index: 1;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.barNavigation ul.active {
|
||||
left: 0;
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.barNavigation li:hover {
|
||||
background-color: #d59f0f;
|
||||
color: black;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.subMenu ul {
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
background-color: rgb(1, 92, 184);
|
||||
}
|
||||
|
||||
.logout-button {
|
||||
margin-top: 10px;
|
||||
font-size: 1.75rem;
|
||||
padding: 6px 12px;
|
||||
max-width: 180px;
|
||||
}
|
||||
|
||||
thead,
|
||||
tbody {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.subMenu a span {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
@@ -1,10 +1,11 @@
|
||||
// =====================================
|
||||
// Forgot Password Page Styles (sin variables)
|
||||
// Forgot Password Page Styles (Responsive)
|
||||
// =====================================
|
||||
|
||||
.forgot-password-page {
|
||||
width: 90%;
|
||||
max-width: 520px;
|
||||
margin: 15rem auto;
|
||||
margin: 10rem auto;
|
||||
padding: 2rem;
|
||||
background: #ffffff;
|
||||
border-radius: 1rem;
|
||||
@@ -12,15 +13,10 @@
|
||||
color: #222;
|
||||
transition: background 0.3s ease, color 0.3s ease;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin: 2rem auto;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.8rem;
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
color: #1a73e8;
|
||||
}
|
||||
@@ -33,7 +29,6 @@
|
||||
color: #555;
|
||||
}
|
||||
|
||||
// Formulario principal
|
||||
.forgot-form {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
@@ -43,8 +38,9 @@
|
||||
color: #222;
|
||||
}
|
||||
|
||||
input[type="email"] {
|
||||
padding: 0.6rem 0.8rem;
|
||||
input[type="text"],
|
||||
input[type="password"] {
|
||||
padding: 1rem 0.8rem;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
@@ -61,7 +57,7 @@
|
||||
background-color: #1a73e8;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
padding: 0.75rem 1rem;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
@@ -93,14 +89,15 @@
|
||||
}
|
||||
|
||||
// =====================================
|
||||
// Modo oscuro (opcional)
|
||||
// Modo oscuro
|
||||
// =====================================
|
||||
|
||||
[data-theme="dark"] .forgot-password-page {
|
||||
background: #1e1e1e;
|
||||
color: #eee;
|
||||
|
||||
input[type="email"] {
|
||||
input[type="text"],
|
||||
input[type="password"] {
|
||||
background: #2a2a2a;
|
||||
border-color: #444;
|
||||
color: #f3f3f3;
|
||||
@@ -123,3 +120,81 @@
|
||||
color: #82b1ff;
|
||||
}
|
||||
}
|
||||
|
||||
// =====================================
|
||||
// Responsividad
|
||||
// =====================================
|
||||
|
||||
// --- Teléfonos pequeños ---
|
||||
@media (max-width: 480px) {
|
||||
.forgot-password-page {
|
||||
margin: 15rem auto;
|
||||
padding: 1.5rem;
|
||||
width: 92%;
|
||||
box-shadow: none;
|
||||
|
||||
h1 {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 0.95rem;
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
|
||||
.forgot-form {
|
||||
input[type="text"],
|
||||
input[type="password"] {
|
||||
font-size: 0.95rem;
|
||||
padding: 0.9rem;
|
||||
}
|
||||
|
||||
button[type="submit"] {
|
||||
font-size: 0.95rem;
|
||||
padding: 0.9rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// --- Tablets (iPad y similares) ---
|
||||
@media (min-width: 768px) and (max-width: 1024px) {
|
||||
.forgot-password-page {
|
||||
margin: 8rem auto;
|
||||
padding: 3rem 2.5rem;
|
||||
max-width: 600px;
|
||||
font-size: 1.05rem;
|
||||
|
||||
h1 {
|
||||
font-size: 2.1rem;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.05rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.forgot-form {
|
||||
gap: 1.2rem;
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"] {
|
||||
font-size: 1.05rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
button[type="submit"] {
|
||||
padding: 1.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// --- Escritorio grande ---
|
||||
@media (min-width: 1280px) {
|
||||
.forgot-password-page {
|
||||
margin: 12rem auto;
|
||||
padding: 3rem;
|
||||
max-width: 520px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,166 @@
|
||||
.dashboardContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 24px;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
color: #0056b3;
|
||||
}
|
||||
}
|
||||
|
||||
.scanView {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 16px 20px;
|
||||
background: #f7f7f7;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
font-size: 15px;
|
||||
color: #0056b3;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
box-shadow: none;
|
||||
position: static;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
display: flex;
|
||||
min-height: 420px;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
width: 230px;
|
||||
background-color: #fafafa;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 18px 16px;
|
||||
cursor: pointer;
|
||||
border-right: 1px solid #e0e0e0;
|
||||
color: #555;
|
||||
transition: all 0.3s ease;
|
||||
border-left: 4px solid transparent;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tab:hover {
|
||||
background-color: #f0f0f0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
background-color: #fff;
|
||||
border-left: 4px solid #0056b3;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid #0056b3;
|
||||
color: #0056b3;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.data-table-wrapper {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.data-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
background: #f9f9f9;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.data-row:hover {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
.os-name {
|
||||
flex: 1;
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.count-box {
|
||||
background: #ffffff;
|
||||
border: 1px solid #0056b3;
|
||||
padding: 6px 14px;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
text-align: center;
|
||||
min-width: 70px;
|
||||
}
|
||||
|
||||
.total-row {
|
||||
background: #eaf4ff;
|
||||
font-weight: bold;
|
||||
|
||||
.count-box {
|
||||
color:#0056b3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ======== RESPONSIVE ======== */
|
||||
@media (max-width: 700px) {
|
||||
.scanView .main-content {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.scanView .tabs {
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.scanView .tab {
|
||||
flex: 1;
|
||||
padding: 14px 0;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
@@ -29,12 +29,12 @@ function BarNavigation() {
|
||||
|
||||
<ul className={openMenu ? "active" : ""}>
|
||||
<li className="subMenu" onClick={toggleMenu}>
|
||||
<Link href="/Escaner" className="links">
|
||||
<Link href="/escaner" className="links">
|
||||
<span>Escanear</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="subMenu" onClick={toggleMenu}>
|
||||
<Link href="/AgregarEquipo" className="links">
|
||||
<Link href="/agregarEquipo" className="links">
|
||||
<span>Agregar equipo</span>
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
@@ -0,0 +1,57 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import "../app/styles/layout/BarNavigation.scss";
|
||||
import Link from "next/link";
|
||||
|
||||
function BarNavigation() {
|
||||
const router = useRouter();
|
||||
const [openMenu, setOpenMenu] = useState(false);
|
||||
|
||||
const toggleMenu = () => setOpenMenu(!openMenu);
|
||||
|
||||
const cerrarSesion = () => {
|
||||
if (typeof window !== "undefined") {
|
||||
localStorage.removeItem("loggedIn");
|
||||
router.push("/");
|
||||
}
|
||||
setOpenMenu(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<nav className="barNavigation">
|
||||
<div className="menuToggle" onClick={toggleMenu}>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<ul className={openMenu ? "active" : ""}>
|
||||
<li className="subMenu" onClick={toggleMenu}>
|
||||
<Link href="/crearCuenta" className="links">
|
||||
<span>Crear Cuenta</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="subMenu" onClick={toggleMenu}>
|
||||
<Link href="/cambiarPass" className="links">
|
||||
<span>Cambiar Contraseña</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="subMenu" onClick={toggleMenu}>
|
||||
<Link href="/reporte" className="links">
|
||||
<span>Reporte</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="subMenu">
|
||||
<button className="logout-button" onClick={cerrarSesion}>
|
||||
Cerrar sesión
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
export default BarNavigation;
|
||||
//IO
|
||||
@@ -3,13 +3,14 @@ import Image from "next/image";
|
||||
import header from "../app/styles/layout/header.module.scss";
|
||||
import Link from "next/link";
|
||||
import BarNavigation from "./BarNavigation";
|
||||
import BarNavigationAdmin from "./BarNavigationAdmin";
|
||||
import { usePathname } from "next/navigation";
|
||||
|
||||
function Header() {
|
||||
const pathname = usePathname();
|
||||
|
||||
const publicNav = ["/Escaner", "/AgregarEquipo", "/Editar"];
|
||||
const privateNav = ["/Reporte", "/CrearCuenta", "/CambiarPass"];
|
||||
const publicNav = ["/escaner", "/agregarEquipo", "/editar"];
|
||||
const privateNav = ["/reporte", "/crearCuenta", "/cambiarPass"];
|
||||
|
||||
return (
|
||||
<header className={header.header}>
|
||||
@@ -42,7 +43,7 @@ function Header() {
|
||||
}}
|
||||
>
|
||||
{publicNav.includes(pathname) && <BarNavigation />}
|
||||
{privateNav.includes(pathname) && <BarNavigation />}
|
||||
{privateNav.includes(pathname) && <BarNavigationAdmin />}
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user