creacion de censo frontend

2025-10-22 13:27:10 -06:00
parent 218a6ebde0
commit acfee154d0
20 changed files with 1133 additions and 329 deletions
@@ -0,0 +1,104 @@
+"use client";
+import { useState } from "react";
+import "../app/styles/components/BarNavigation.scss";
+import Link from "next/link";
+
+function BarNavigation() {
+  const [openMenu, setOpenMenu] = useState(false);
+  const [openSubMenu, setOpenSubMenu] = useState<number | null>(null);
+
+  const toggleMenu = () => setOpenMenu(!openMenu);
+  const toggleSubMenu = (index: number) => {
+    if (typeof window !== "undefined" && window.innerWidth <= 800) {
+      setOpenSubMenu(openSubMenu === index ? null : index);
+    }
+  };
+
+  return (
+    <nav className="barNavigation">
+      <div className={`menuToggle ${openMenu ? "" : ""}`} onClick={toggleMenu}>
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+
+      <ul className={openMenu ? "active" : ""}>
+        <li className={`subMenu ${openSubMenu === 0 ? "open" : ""}`}>
+          <span onClick={() => toggleSubMenu(0)}>Inscripciónes</span>
+          <ul className="containerLinks" onClick={toggleMenu}>
+            <Link href="/AgregarTiempo" className="links">
+              <li>Agregar Tiempo</li>
+            </Link>
+            <Link href="/Inscripcion" className="links">
+              <li>Inscripción Usuario</li>
+            </Link>
+          </ul>
+        </li>
+
+        <li className={`subMenu ${openSubMenu === 1 ? "open" : ""}`}>
+          <span onClick={() => toggleSubMenu(1)}>Servicios</span>
+          <ul onClick={toggleMenu}>
+            <Link href="/Impresiones" className="links">
+              <li>Impresiones y Ploteo</li>
+            </Link>
+            <Link href="/AsignacionMesas" className="links">
+              <li>Asignacion de Mesas</li>
+            </Link>
+            <Link href="/AsignacionEquipo" className="links">
+              <li>Asignacion de Equipos</li>
+            </Link>
+            <Link href="/Monitor" className="links">
+              <li>Monitor</li>
+            </Link>
+          </ul>
+        </li>
+
+        <li className={`subMenu ${openSubMenu === 2 ? "open" : ""}`}>
+          <span onClick={() => toggleSubMenu(2)}>Equipo</span>
+          <ul onClick={toggleMenu}>
+            <Link href="/InformacionEquipo" className="links">
+              <li>Informacion de Equipos</li>
+            </Link>
+            <Link href="/ActivosMantenimiento" className="links">
+              <li>Activos y en Mantenimiento</li>
+            </Link>
+            <Link href="/Mensajes" className="links">
+              <li>Mensajes</li>
+            </Link>
+            <Link href="/Programas" className="links">
+              <li>Programas</li>
+            </Link>
+          </ul>
+        </li>
+
+        <li className={`subMenu ${openSubMenu === 3 ? "open" : ""}`}>
+          <span onClick={() => toggleSubMenu(3)}>Reportes</span>
+          <ul onClick={toggleMenu}>
+            <Link href="/Reportes" className="links">
+              <li>Reportes</li>
+            </Link>
+            <Link href="/Inscritos" className="links">
+              <li>Inscritos</li>
+            </Link>
+            <Link href="/BitacoraSanciones" className="links">
+              <li>Bitacora y sanciones</li>
+            </Link>
+          </ul>
+        </li>
+        <li className="subMenu" onClick={toggleMenu}>
+          <Link href="/QuitarSancion" className="links">
+            <span>Quitar sanción</span>
+          </Link>
+        </li>
+        <li className="subMenu" onClick={toggleMenu}>
+          <Link href="/CambiarPass" className="links">
+            <span> Cambiar contraseña</span>
+          </Link>
+        </li>
+      </ul>
+    </nav>
+  );
+}
+
+export default BarNavigation;
+//IO
@@ -0,0 +1,42 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { BrowserMultiFormatReader } from "@zxing/library";
+
+type Props = { onDetected: (code: string) => void; };
+
+export default function BarcodeScanner({ onDetected }: Props) {
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  useEffect(() => {
+    const codeReader = new BrowserMultiFormatReader();
+    if (!videoRef.current) return;
+
+    // Obtener la cámara trasera si existe
+    codeReader.listVideoInputDevices().then((devices) => {
+      const backDevice = devices.find(d => d.label.toLowerCase().includes("back"));
+      const deviceId = backDevice ? backDevice.deviceId : devices[0].deviceId;
+
+      // Inicia la cámara inmediatamente
+      codeReader.decodeFromVideoDevice(deviceId, videoRef.current!, (result) => {
+        if (result) onDetected(result.getText());
+      });
+    }).catch(console.error);
+
+    return () => { codeReader.reset(); };
+  }, [onDetected]);
+
+  return (
+    <video
+      ref={videoRef}
+      style={{
+        width: "100%",
+        maxWidth: "600px", // Más grande
+        border: "2px solid #004aad",
+        borderRadius: "10px"
+      }}
+      autoPlay
+      muted
+    />
+  );
+}
@@ -0,0 +1,46 @@
+"use client";
+import Image from "next/image";
+import header from "../app/styles/components/header.module.scss";
+import Link from "next/link";
+import BarNavigation from "./BarNavigation";
+
+function Header() {
+  return (
+    <header className={header.header}>
+      <Link
+        href="https://www.unam.mx/"
+        target="_blank"
+        className={header.center}
+        style={{
+          display: "flex",
+          alignItems: "center",
+        }}
+      >
+        <Image
+          className={header.logo}
+          src="/logo_fes.png"
+          alt="Logo FES"
+          width={200}
+          height={50}
+        />
+      </Link>
+      <div className={header.yellowPart}></div>
+      <div
+        style={{
+          display: "flex",
+          width: "100%",
+          marginLeft: "40px",
+          marginTop: "45px",
+          maxHeight: "50%",
+          alignItems: "end",
+        }}
+        className=""
+      >
+        <BarNavigation />
+      </div>
+    </header>
+  );
+}
+
+export default Header;
+//IO