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

src/app/Escaner/page.tsx

@@ -22,14 +22,11 @@ export default function Dashboard() {
   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())
+      (e) =>
+        e.id.includes(search) ||
+        e.nombre.toLowerCase().includes(search.toLowerCase())
     );
     setEquipos(resultado);
   };
@@ -42,7 +39,7 @@ export default function Dashboard() {
   const handleScan = (code: string) => {
     setLastScan(code);
 
-    const encontrado = equipos.find(e => e.id === code);
+    const encontrado = equipos.find((e) => e.id === code);
     if (encontrado) {
       alert(`Equipo encontrado: ${encontrado.nombre} (${encontrado.estado})`);
     } else {
@@ -64,7 +61,12 @@ export default function Dashboard() {
       <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)} />
+          <input
+            type="text"
+            placeholder="ID o nombre"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+          />
           <button onClick={buscarEquipo}>Buscar</button>
         </div>
       </div>
@@ -72,7 +74,11 @@ export default function Dashboard() {
       <div className="scanner-section">
         <h3>Escanear código de barras</h3>
         <BarcodeScanner onDetected={handleScan} />
-        {lastScan && <p>Último código escaneado: <strong>{lastScan}</strong></p>}
+        {lastScan && (
+          <p>
+            Último código escaneado: <strong>{lastScan}</strong>
+          </p>
+        )}
       </div>
 
       <div className="equipos-section">
@@ -80,8 +86,18 @@ export default function Dashboard() {
         <ul>
           {equipos.map((e) => (
             <li key={e.id}>
-              <span>{e.id} - {e.nombre}</span>
+              <span>
-              <span className={e.estado === "Disponible" ? "estado-disponible" : "estado-reparacion"}>{e.estado}</span>
+                {e.id} - {e.nombre}
+              </span>
+              <span
+                className={
+                  e.estado === "Disponible"
+                    ? "estado-disponible"
+                    : "estado-reparacion"
+                }
+              >
+                {e.estado}
+              </span>
             </li>
           ))}
         </ul>

src/app/layout.tsx

@@ -5,7 +5,7 @@ import "../app/styles/base/_globales.scss"; // si tienes estilos globales
 // Carga optimizada de fuentes
 const inter = Inter({
   subsets: ["latin"],
-  weight: ["400", "700"],
+  weight: ["400", "500", "700"],
   variable: "--font-inter",
 });
 const montserrat = Montserrat({

src/app/styles/base/_globales.scss

@@ -2,6 +2,7 @@ html {
   font-size: 62.5%;
   box-sizing: border-box;
   scroll-padding-top: 0rem;
+  scrollbar-width: none;
 }
 
 *,
@@ -19,8 +20,7 @@ body {
   font-size: 2rem;
   font-optical-sizing: auto;
   min-height: 100dvh;
-  width: 100%;
+  width: 100vw;
-  max-width: 100vw;
 
   
 }
@@ -38,7 +38,7 @@ h1,
 h2,
 h3 {
   margin: 0 0 5rem 0;
-  font-weight: 900;
+  font-weight: 600;
   font-family: "Montserrat", sans-serif; /* 👈 Títulos con Montserrat */
 }
 
@@ -54,3 +54,9 @@ h3 {
   font-size: 4rem;
   text-align: center;
 }
+
+label {
+  display: block;
+  text-align: start;
+  width: 100%;
+}

src/app/styles/layout/header.module.scss

@@ -25,13 +25,14 @@
   content: "";
   top: 0;
   left: -20px;
-  width: 65%;
+  width: 100%;
   height: 30px;
   min-width: 300px;
-  background: #bd8c01;
+  background: linear-gradient(to right, #bd8c01 40%, #fff 100%);
   transform: skew(-45deg);
   z-index: 0;
 }
+
 .header {
   background-color: #fff;
   display: grid;

src/app/styles/layout/login.scss

@@ -6,7 +6,7 @@
 }
 
 .login-container {
-  width: 400px;
+  width: 300px;
   margin: 100px auto;
   padding: 1.5rem;
   text-align: center;
@@ -20,8 +20,8 @@
     width: 100%;
     padding: 10px;
     margin-bottom: 15px;
-    border-radius: 5px;
+    border-radius: 10px;
-    border: 1px solid #ccc;
+    border: 1px solid #003e79;
   }
 
   button {
@@ -30,7 +30,7 @@
     background-color: #004aad;
     color: white;
     border: none;
-    border-radius: 5px;
+    border-radius: 4px;
     cursor: pointer;
   }
 
@@ -39,3 +39,7 @@
     margin-bottom: 10px;
   }
 }
+
+.imageContainer {
+  border-radius: 20px;
+}

src/components/BarNavigation.tsx

@@ -16,23 +16,22 @@ function BarNavigation() {
 
   return (
     <nav className="barNavigation">
-      <div className="menuToggle" onClick={toggleMenu}>
+      <div className={`menuToggle ${openMenu ? "" : ""}`} onClick={toggleMenu}>
         <div></div>
         <div></div>
         <div></div>
       </div>
 
       <ul className={openMenu ? "active" : ""}>
-        <li className={`subMenu ${openSubMenu === 0 ? "open" : ""}`}>
+        <li className="subMenu" onClick={toggleMenu}>
-          <span onClick={() => toggleSubMenu(0)}>Equipo</span>
+          <Link href="/Escaner" className="links">
-          <ul onClick={toggleMenu}>
+            <span>Escanear</span>
-            <Link href="/CrearGrupo" className="links">
+          </Link>
-              <li>Crear Grupo</li>
+        </li>
-            </Link>
+        <li className="subMenu" onClick={toggleMenu}>
-            <Link href="/Scanner" className="links">
+          <Link href="/AgregarEquipo" className="links">
-              <li>Scanner</li>
+            <span>Agregar equipo</span>
-            </Link>
+          </Link>
-          </ul>
         </li>
       </ul>
     </nav>

src/components/Login.tsx

@@ -3,6 +3,8 @@
 import { useState } from "react";
 
 import "../app/styles/layout/login.scss";
+import "../app/styles/base/_globales.scss"; // si tienes estilos globales
+import Image from "next/image";
 
 export default function Login() {
   const [email, setEmail] = useState("");
@@ -16,28 +18,40 @@ export default function Login() {
   return (
     <section className="containerGrid">
       <div className="login-container">
-        <h2>Iniciar sesión</h2>
+        <h2>Inicio sesión</h2>
         {error && <p className="error">{error}</p>}
         <form onSubmit={handleSubmit}>
-          <label>Usuario</label>
+          <div>
-          <input
+            <label>Usuario</label>
-            type="email"
+            <input
-            placeholder="Correo"
+              type="email"
-            value={email}
+              placeholder="Correo"
-            onChange={(e) => setEmail(e.target.value)}
+              value={email}
-            required
+              onChange={(e) => setEmail(e.target.value)}
-          />
+              required
-          <label>Contraseña</label>
+            />
-          <input
+          </div>
-            type="password"
+          <div>
-            placeholder="Contraseña"
+            <label>Contraseña</label>
-            value={password}
+            <input
-            onChange={(e) => setPassword(e.target.value)}
+              type="password"
-            required
+              placeholder="Contraseña"
-          />
+              value={password}
-          <button type="submit">Ingresar</button>
+              onChange={(e) => setPassword(e.target.value)}
+              required
+            />
+          </div>
+          <button type="submit">Iniciar sesión</button>
         </form>
       </div>
+      <div className="imageContainer">
+        <Image src="/Piedra.jpg" alt="Logo FES" width={250} height={150} />
+        <Image src="/image 1.png" alt="Logo FES" width={250} height={150} />
+        <Image src="/estrella.jpg" alt="Logo FES" width={250} height={150} />
+        <Image src="/sorjuana.jpg" alt="Logo FES" width={250} height={150} />
+        <Image src="/fes.jpg" alt="Logo FES" width={250} height={150} />
+        <Image src="/picachu.jpg" alt="Logo FES" width={250} height={150} />
+      </div>
     </section>
   );
 }

src/components/header.tsx

@@ -21,7 +21,7 @@ function Header() {
           src="/logo-blanco.png"
           alt="Logo FES"
           width={250}
-          height={60}
+          height={70}
         />
       </Link>
       <div className={header.yellowPart}></div>