diff --git a/src/app/(Administrador)/CambiarPass/page.tsx b/src/app/(Administrador)/CambiarPass/page.tsx index 7f86b63..3b4e8f7 100644 --- a/src/app/(Administrador)/CambiarPass/page.tsx +++ b/src/app/(Administrador)/CambiarPass/page.tsx @@ -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) => { 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 ( -
-

¿Olvidaste tu contraseña?

-

- Escribe el correo asociado a tu cuenta y te enviaremos instrucciones - para restablecerla. -

+
+

Cambiar contraseña

+

Ingresa el nombre del usuario y su nueva contraseña.

-
- + + 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 /> -
- Recordé mi contraseña — Iniciar sesión + Regresar al inicio
diff --git a/src/app/(Administrador)/pregunta1/page.tsx b/src/app/(Administrador)/pregunta1/page.tsx new file mode 100644 index 0000000..6174012 --- /dev/null +++ b/src/app/(Administrador)/pregunta1/page.tsx @@ -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('pc-desktop'); + const [data, setData] = useState(MOCK_DATA); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(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

Cargando...

; + // if (error) console.warn(error); // o muestra un toast, etc. + + return ( +
+
+

Estadísticas de Plataformas

+
+ +
+
+
+ Presione cada pestaña para ver la información de las plataformas. +
+ +
+
+ {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]) => ( +
setActiveTab(key)} + > + {label} +
+ ))} +
+ +
+
+ {currentData.map((item, index) => ( +
+
{item.os}
+
{item.count}
+
+ ))} +
+
+
+
+
+
+ ); +}; + +export default Page; \ No newline at end of file diff --git a/src/app/(Administrador)/pregunta2/page.tsx b/src/app/(Administrador)/pregunta2/page.tsx new file mode 100644 index 0000000..b2443a7 --- /dev/null +++ b/src/app/(Administrador)/pregunta2/page.tsx @@ -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('pc-desktop'); + const [data, setData] = useState(MOCK_DATA); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(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

Cargando...

; + // if (error) console.warn(error); // o muestra un toast, etc. + + return ( +
+
+

Estadísticas de Plataformas

+
+ +
+
+
+ Presione cada pestaña para ver la información de las plataformas. +
+ +
+
+ {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]) => ( +
setActiveTab(key)} + > + {label} +
+ ))} +
+ +
+
+ {currentData.map((item, index) => ( +
+
{item.os}
+
{item.count}
+
+ ))} +
+
+
+
+
+
+ ); +}; + +export default Page; diff --git a/src/app/(Administrador)/pregunta2/pregunta2.scss b/src/app/(Administrador)/pregunta2/pregunta2.scss new file mode 100644 index 0000000..dff448f --- /dev/null +++ b/src/app/(Administrador)/pregunta2/pregunta2.scss @@ -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; + } +} \ No newline at end of file diff --git a/src/app/(Administrador)/preguntas/page.tsx b/src/app/(Administrador)/preguntas/page.tsx deleted file mode 100644 index e8e587a..0000000 --- a/src/app/(Administrador)/preguntas/page.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import "./preguntas.css"; - -export default function Preguntas() { - - return ( - -
-

Pregunta 2

- {/* Recuadro pregunta*/} -
- 2. Desglose el número de equipos de cómputo que cuentan con los siguientes sistemas operativos. -
-
- - ); -} \ No newline at end of file diff --git a/src/app/(Administrador)/preguntas/preguntas.css b/src/app/(Administrador)/preguntas/preguntas.css deleted file mode 100644 index e921af2..0000000 --- a/src/app/(Administrador)/preguntas/preguntas.css +++ /dev/null @@ -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*/ - -} diff --git a/src/app/reporte/page.tsx b/src/app/reporte/page.tsx index b587bdc..ce601e1 100644 --- a/src/app/reporte/page.tsx +++ b/src/app/reporte/page.tsx @@ -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(); ); -} \ No newline at end of file +} diff --git a/src/app/styles/layout/BarNavigationAdmin.scss b/src/app/styles/layout/BarNavigationAdmin.scss new file mode 100644 index 0000000..2291f9b --- /dev/null +++ b/src/app/styles/layout/BarNavigationAdmin.scss @@ -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; + } +} diff --git a/src/app/styles/layout/ForgotPasswordPage.scss b/src/app/styles/layout/ForgotPasswordPage.scss index 567d813..93651e9 100644 --- a/src/app/styles/layout/ForgotPasswordPage.scss +++ b/src/app/styles/layout/ForgotPasswordPage.scss @@ -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; + } +} diff --git a/src/app/styles/layout/pregunta1.scss b/src/app/styles/layout/pregunta1.scss new file mode 100644 index 0000000..dff448f --- /dev/null +++ b/src/app/styles/layout/pregunta1.scss @@ -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; + } +} \ No newline at end of file diff --git a/src/components/BarNavigation.tsx b/src/components/BarNavigation.tsx index 2559eb6..bf2a026 100644 --- a/src/components/BarNavigation.tsx +++ b/src/components/BarNavigation.tsx @@ -29,12 +29,12 @@ function BarNavigation() {
  • - + Escanear
  • - + Agregar equipo
    • diff --git a/src/components/BarNavigationAdmin.tsx b/src/components/BarNavigationAdmin.tsx new file mode 100644 index 0000000..f2b7d13 --- /dev/null +++ b/src/components/BarNavigationAdmin.tsx @@ -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 ( + + ); +} + +export default BarNavigation; +//IO diff --git a/src/components/header.tsx b/src/components/header.tsx index df18e34..6fd177f 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -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 (
    @@ -42,7 +43,7 @@ function Header() { }} > {publicNav.includes(pathname) && } - {privateNav.includes(pathname) && } + {privateNav.includes(pathname) && }
    );