Merge branch 'ale' of https://github.com/jls846/front-censo into Lino

src/app/Editar/editar.css

@@ -0,0 +1,126 @@
+
+
+/* ====== FORMULARIO ====== */
+.editar {
+  max-width: 1000px;
+  display: flex;
+  gap: 20px;
+  margin: 40px auto;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.columna {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+label {
+  font-weight: bold;
+}
+
+input {
+  padding: 6px 8px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  outline: none;
+}
+
+input:focus {
+  border-color: #003366;
+  box-shadow: 0 0 4px rgba(0, 51, 102, 0.3);
+}
+
+
+/* Botón cerrar sesión */
+.boton-cerrar {
+  background-color: #e60000;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background-color 0.3s;
+  margin-top: 10px;
+}
+
+.boton-cerrar:hover {
+  background-color: #cc0000;
+}
+
+.titulo-editar {
+  position: absolute;
+  top: 50%;
+  left: 50%; /* centra horizontalmente */
+  transform: translate(-50%, -50%); /* centra vertical y horizontalmente */
+  
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 35%; /* ajusta el ancho del bloque de texto */
+  font-size: 18px;
+  font-weight: bold;
+  color: #003366;
+  z-index: 5;
+}
+
+.titulo-editar span {
+  flex: 1;
+  text-align: center;
+  cursor: pointer;
+  transition: color 0.3s, text-decoration 0.3s;
+}
+
+/* Cambia de color al pasar el mouse */
+.titulo-editar span:hover {
+  color: #b8870b;
+}
+
+.recuadro{
+  box-shadow: 0 0 7px 0px black;
+  border-radius: 10px;       /* Bordes redondeados */
+  padding: 10px;             /* Espacio interno */
+  margin: 85px 350px;            /* Separación del resto del contenido */
+  background-color: #f9f9f9; /* Color de fondo */
+}
+
+.titulo-rec {
+  font-size: 20px;
+  font-weight: bold;
+  margin-left: 0;       /* alinea el texto con el resto de la columna */
+  text-align: left;     /* asegura que esté alineado a la izquierda */
+  margin-bottom: 8px;   /* un poco de espacio debajo del título */
+}
+.linea{
+  border-bottom: 2px solid #003366; /* color y grosor de la línea */
+  width: 100%;                       /* ocupa toda la columna */
+  margin-bottom: 10px;               /* espacio entre línea y los campos */
+}
+
+.botones {
+  display: flex;
+  justify-content: flex-end;  /* Alinea los botones a la derecha */
+  gap: 10px;                  /* Espacio entre ellos */
+  margin-top: 15px;           /* Separación del formulario */
+}
+.guardar{
+  background-color: #b8870b;
+  color: #003366;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+
+}
+.cancelar{
+  background-color: #003366;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+}

src/app/Editar/page.tsx

@@ -1,37 +1,68 @@
-import "../styles/layout/editar.scss";
-export default function Page() {
+import './editar.css';
+export default function Home() {
   return (
-    <form className="editar">
-      <div className="columna">
-        <label htmlFor="serie">Serie</label>
-        <input type="text" id="serie" />
-        <label htmlFor="marca">Marca</label>
-        <input type="text" id="marca" />
-        <label htmlFor="modelo">Modelo</label>
-        <input type="text" id="modelo" />
-        <label htmlFor="estado">Estado</label>
-        <input type="text" id="estado" />
-      </div>
+    <div>
+      
 
-      <div className="columna">
-        <label htmlFor="so">Sistema Operativo</label>
-        <input type="text" id="so" />
-        <label htmlFor="procesador">Procesador</label>
-        <input type="text" id="procesador" />
-        <label htmlFor="tipoUso">Tipo de uso</label>
-        <input type="text" id="tipoUso" />
-        <label htmlFor="observaciones">Observaciones</label>
-        <input type="text" id="observaciones" />
-      </div>
 
-      <div className="columna">
-        <label htmlFor="adscripcion">Adscripción</label>
-        <input type="text" id="adscripcion" />
-        <label htmlFor="responsable">Responsable</label>
-        <input type="text" id="responsable" />
-        <label htmlFor="lugar">Lugar</label>
-        <input type="text" id="lugar" />
+      <div className="recuadro">
+        <form className="editar">
+          {/* Columna 1 */}
+          <div className="columna">
+            <p className="titulo-rec">CPU</p>
+            <div className="linea"></div>
+
+            <label htmlFor="serie">Serie</label>
+            <input type="text" id="serie" />
+
+            <label htmlFor="marca">Marca</label>
+            <input type="text" id="marca" />
+
+            <label htmlFor="modelo">Modelo</label>
+            <input type="text" id="modelo" />
+
+            <label htmlFor="estado">Estado</label>
+            <input type="text" id="estado" />
+          </div>
+
+          {/* Columna 2 */}
+          <div className="columna">
+            <p className="titulo-rec">Inventario:</p>
+            <div className="linea"></div>
+
+            <label htmlFor="sistema">Sistema Operativo</label>
+            <input type="text" id="sistema" />
+
+            <label htmlFor="procesador">Procesador</label>
+            <input type="text" id="procesador" />
+
+            <label htmlFor="uso">Tipo de uso</label>
+            <input type="text" id="uso" />
+
+            <label htmlFor="observaciones">Observaciones</label>
+            <input type="text" id="observaciones" />
+          </div>
+
+          {/* Columna 3 */}
+          <div className="columna">
+            <p className="titulo-rec">Fecha Censo:</p>
+            <div className="linea"></div>
+            
+            <label htmlFor="adscripcion">Adscripción</label>
+            <input type="text" id="adscripcion" />
+
+            <label htmlFor="responsable">Responsable</label>
+            <input type="text" id="responsable" />
+
+            <label htmlFor="lugar">Lugar</label>
+            <input type="text" id="lugar" />
+          </div>
+        </form>
+        <div className="botones">
+          <button className="guardar">Guardar</button>
+          <button className="cancelar">Cancelar</button>
+        </div>
       </div>
-    </form>
+    </div>
   );
 }

src/app/dashboard/page.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import BarcodeScanner from "../../components/BarcodeScanner";
+import "../styles/components/dashboard.scss";
+
+type Equipo = {
+  id: string;
+  nombre: string;
+  estado: string;
+};
+
+const initialEquipos: Equipo[] = [
+  { id: "001", nombre: "PC Aula 1", estado: "Disponible" },
+  { id: "002", nombre: "PC Aula 2", estado: "En reparación" },
+];
+
+export default function Dashboard() {
+  const router = useRouter();
+  const [equipos, setEquipos] = useState<Equipo[]>(initialEquipos);
+  const [search, setSearch] = useState("");
+  const [lastScan, setLastScan] = useState("");
+
+  useEffect(() => {
+    const loggedIn = localStorage.getItem("loggedIn");
+    if (!loggedIn) router.push("/");
+  }, [router]);
+
+  const buscarEquipo = () => {
+    const resultado = equipos.filter(
+      e => e.id.includes(search) || e.nombre.toLowerCase().includes(search.toLowerCase())
+    );
+    setEquipos(resultado);
+  };
+
+  const cerrarSesion = () => {
+    localStorage.removeItem("loggedIn");
+    router.push("/");
+  };
+
+  const handleScan = (code: string) => {
+    setLastScan(code);
+
+    const encontrado = equipos.find(e => e.id === code);
+    if (encontrado) {
+      alert(`Equipo encontrado: ${encontrado.nombre} (${encontrado.estado})`);
+    } else {
+      const nombre = prompt("Equipo no registrado. Ingresa el nombre:");
+      if (nombre) {
+        setEquipos([...equipos, { id: code, nombre, estado: "Disponible" }]);
+        alert("Equipo agregado al inventario");
+      }
+    }
+  };
+
+  return (
+    <div className="dashboard-container">
+      <div className="header">
+        <h2>Dashboard Inventario Escolar</h2>
+        <button onClick={cerrarSesion}>Cerrar sesión</button>
+      </div>
+
+      <div className="search-section">
+        <h3>Buscar equipo</h3>
+        <div style={{ display: "flex", marginTop: "10px" }}>
+          <input type="text" placeholder="ID o nombre" value={search} onChange={(e) => setSearch(e.target.value)} />
+          <button onClick={buscarEquipo}>Buscar</button>
+        </div>
+      </div>
+
+      <div className="scanner-section">
+        <h3>Escanear código de barras</h3>
+        <BarcodeScanner onDetected={handleScan} />
+        {lastScan && <p>Último código escaneado: <strong>{lastScan}</strong></p>}
+      </div>
+
+      <div className="equipos-section">
+        <h3>Equipos</h3>
+        <ul>
+          {equipos.map((e) => (
+            <li key={e.id}>
+              <span>{e.id} - {e.nombre}</span>
+              <span className={e.estado === "Disponible" ? "estado-disponible" : "estado-reparacion"}>{e.estado}</span>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}

src/app/reporte/page.tsx

@@ -0,0 +1,88 @@
+import './reporte.css';
+
+export default function Reporte() {
+  return (
+    <div>
+      <header className="encabezado">
+        <div className="encabezado-sup"></div>
+        <div className="logo">
+          <img src="fes-logo.jpg" alt="" className="logo-img" />
+        </div>
+
+        <div className="pestaña">
+          <span>Escanear código</span>
+          <span>Equipo</span>
+          <span>Reportes</span>
+        </div>
+
+        <nav className="Sesion">
+          <button className="boton-cerrar">Cerrar sesión</button>
+        </nav>
+      </header>
+
+      <div className='contenedor'>
+        <div className='titulo-reporte'>
+          <p>REPORTE</p>
+        </div>
+
+        <form action="/buscar" method="get">
+          <input type="text" name="q" placeholder="Buscar equipo" />
+          <button type="submit">Buscar</button>
+        </form>
+      </div>
+      <div className='tabla-rec'></div>
+      <button className='boton-descargar'>Descargar</button>
+
+      <div className='filtro-rec'>
+        <form className="editar">
+          {/* Columna 1 */}
+          <div className="columna">
+            <p className="titulo-rec">Filtro</p>
+            <div className="linea"></div>
+
+            <label htmlFor="adscripcion">Adscripción</label>
+            <select id="adscripcion">
+              <option value="">Seleccione la adscripción</option>
+              <option value="informatica">CEDETEC</option>
+              <option value="administracion">Administración</option>
+              <option value="biblioteca">Biblioteca</option>
+              <option value="direccion">Dirección</option>
+            </select>
+
+            <label htmlFor="estado">Estado</label>
+            <select id="estado">
+              <option value="">Seleccione el estado del equipo</option>
+              <option value="activo">Activo</option>
+              <option value="mantenimiento">En Mantenimiento</option>
+              <option value="baja">Dado de Baja</option>
+              <option value="reparacion">En Reparación</option>
+            </select>
+
+            <label htmlFor="tipo">Tipo de Equipo</label>
+            <select id="tipo">
+              <option value="">Seleccione el tipo de equipo</option>
+              <option value="cpu">CPU</option>
+              <option value="laptop">Laptop</option>
+              <option value="monitor">Monitor</option>
+              <option value="impresora">Impresora</option>
+              <option value="servidor">Servidor</option>
+            </select>
+
+            <label htmlFor="antiguedad">Antigüedad</label>
+            <select id="antiguedad">
+              <option value="">Seleccione la antigüedad del equipo</option>
+              <option value="menos1">Menos de 1 año</option>
+              <option value="1-3">1 a 3 años</option>
+              <option value="3-5">3 a 5 años</option>
+              <option value="mas5">Más de 5 años</option>
+            </select>
+          </div>
+          <div className="botones-filtro">
+          <button type="reset" className="limpiar">Limpiar filtros</button>
+          <button type="submit" className="aplicar">Aplicar filtros</button>
+           </div>
+        </form>
+      </div>
+    </div>
+  );
+}

src/app/reporte/reporte.css

@@ -0,0 +1,163 @@
+.pestaña {
+  position: absolute;
+  top: 50%;
+  left: 62%; 
+  transform: translate(-50%, -50%);
+  
+  display: flex;
+  justify-content: space-around; /* espacio igual entre los tres textos */
+  align-items: center;
+  width: 45%; /* controla el ancho total del bloque central */
+  font-size: 18px;
+  color: #003366;
+  font-weight: bold;
+  z-index: 5; /* por encima del logo */
+}
+
+.pestaña span {
+  flex: 1;
+  text-align: center;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+
+.pestaña span:hover {
+  color: #b8870b; /* cambia de color al pasar el cursor */
+}
+
+.titulo-reporte{
+  font-weight: bold;  /* negrita */
+  font-size: 24px;    /* tamaño de texto */
+  font-family: Arial, sans-serif;
+}
+
+/*BUSCADOR*/
+
+input[type="text"] {
+  width: 500px;   /* más ancho, más largo */
+  padding: 7px;  /* mantiene espacio cómodo dentro */
+  font-size: 18px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+button {
+  padding: 8px 12px;
+  font-size: 16px;
+  border: none;
+  background-color: #007bff;
+  color: white;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #0056b3;
+}
+.contenedor{
+  margin-left: 80px;
+}
+
+.filtro-rec{
+  border: 2px solid #003366; /* Color del borde */
+  border-radius: 10px;       /* Bordes redondeados */
+  padding: 10px;             /* Espacio interno */
+  margin: 80px 550px;            /* Separación del resto del contenido */
+  background-color: #f9f9f9; 
+  position: relative;
+  left: 380px; 
+  font-family: Arial, sans-serif;
+  top: -570px; /* sube 50px respecto a su posición original */
+  
+
+}
+
+/* Estilos para los selects */
+select {
+  padding: 8px 12px;
+  border: 1px solid #003366;
+  border-radius: 5px;
+  background-color: white;
+  font-size: 14px;
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+select:focus {
+  border-color: #003366;
+  box-shadow: 0 0 4px rgba(0, 51, 102, 0.3);
+  outline: none;
+}
+
+/* Botón de buscar */
+form[action="/buscar"] {
+  display: flex;
+  gap: 10px;
+  margin: 20px 0;
+  
+}
+
+form[action="/buscar"] input {
+  padding: 8px 12px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  width: 300px;
+}
+
+form[action="/buscar"] button {
+  background-color: #003366;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.botones-filtro {
+  display: flex;
+  justify-content: flex-end; /* botones a la derecha */
+  gap: 10px;                 /* espacio entre botones */
+  margin-top: 15px;          /* separación del resto del formulario */
+}
+
+.aplicar {
+  background-color: #003366;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.limpiar {
+  background-color: #b8870b;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.tabla-rec{
+  border: 2px solid #003366; /* Color del borde */
+  border-radius: 10px;        /* Bordes redondeados */
+  padding: 10px;              /* Espacio interno */
+  margin: 50px 700px 0 80px;      /* superior, derecha, inferior, izquierda */
+  background-color: #f9f9f9; 
+  font-family: Arial, sans-serif;
+   height: 400px;
+}
+
+.boton-descargar{
+  padding: 8px 12px;
+  font-size: 16px;
+  border: none;
+  background-color: #003366;
+  color: white;
+  border-radius: 4px;
+  cursor: pointer;
+  right: 30px;
+  margin-left: 700px;
+}

src/app/styles/layout/__editar.scss

@@ -0,0 +1,11 @@
+.editar{
+   
+  max-width: 1000px;
+  display: flex;
+  gap: 20px;
+}
+
+.columna{
+  display:  flex ;
+  flex-direction: column;
+}

src/app/styles/layout/dashboard.scss

@@ -0,0 +1,83 @@
+.dashboard-container {
+  max-width: 900px;
+  margin: 50px auto;
+  padding: 20px;
+  background: #f8f9fa;
+  border-radius: 15px;
+  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
+  font-family: Arial, sans-serif;
+}
+
+h2 {
+  color: #004aad; // azul marino
+  font-size: 2rem;
+  margin-bottom: 15px;
+}
+
+button {
+  background-color: #d4af37; // dorado
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: bold;
+  transition: background 0.3s;
+}
+
+button:hover {
+  background-color: #b5952e;
+}
+
+input {
+  padding: 8px 12px;
+  border-radius: 8px;
+  border: 1px solid #ccc;
+  flex: 1;
+  font-size: 1rem;
+}
+
+.search-section, .scanner-section, .equipos-section {
+  margin-top: 30px;
+}
+
+.search-section input, .search-section button {
+  margin-right: 10px;
+}
+
+.scanner-section video {
+  border: 2px solid #004aad;
+  border-radius: 10px;
+  max-width: 400px;
+  width: 100%;
+}
+
+.equipos-section ul {
+  list-style: none;
+  padding: 0;
+}
+
+.equipos-section li {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 15px;
+  border-radius: 8px;
+  border: 1px solid #ccc;
+  margin-bottom: 10px;
+  background: white;
+  transition: background 0.3s;
+}
+
+.equipos-section li:hover {
+  background: #e6f0ff;
+}
+
+.estado-disponible {
+  color: green;
+  font-weight: bold;
+}
+
+.estado-reparacion {
+  color: red;
+  font-weight: bold;
+}

src/components/BarcodeScanner.tsx

@@ -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
+    />
+  );
+}