modified barNavigation and name of dasboard

This commit is contained in:
2025-10-24 17:34:07 -06:00
parent 7f84cd0dd6
commit e6151d0fe5
2 changed files with 38 additions and 23 deletions
@@ -3,7 +3,7 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import BarcodeScanner from "../../components/BarcodeScanner"; import BarcodeScanner from "../../components/BarcodeScanner";
import "../styles/components/dashboard.scss"; import "../styles/layout/dashboard.scss";
type Equipo = { type Equipo = {
id: string; id: string;
@@ -22,14 +22,11 @@ export default function Dashboard() {
const [search, setSearch] = useState(""); const [search, setSearch] = useState("");
const [lastScan, setLastScan] = useState(""); const [lastScan, setLastScan] = useState("");
useEffect(() => {
const loggedIn = localStorage.getItem("loggedIn");
if (!loggedIn) router.push("/");
}, [router]);
const buscarEquipo = () => { const buscarEquipo = () => {
const resultado = equipos.filter( 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); setEquipos(resultado);
}; };
@@ -42,7 +39,7 @@ export default function Dashboard() {
const handleScan = (code: string) => { const handleScan = (code: string) => {
setLastScan(code); setLastScan(code);
const encontrado = equipos.find(e => e.id === code); const encontrado = equipos.find((e) => e.id === code);
if (encontrado) { if (encontrado) {
alert(`Equipo encontrado: ${encontrado.nombre} (${encontrado.estado})`); alert(`Equipo encontrado: ${encontrado.nombre} (${encontrado.estado})`);
} else { } else {
@@ -64,7 +61,12 @@ export default function Dashboard() {
<div className="search-section"> <div className="search-section">
<h3>Buscar equipo</h3> <h3>Buscar equipo</h3>
<div style={{ display: "flex", marginTop: "10px" }}> <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> <button onClick={buscarEquipo}>Buscar</button>
</div> </div>
</div> </div>
@@ -72,7 +74,11 @@ export default function Dashboard() {
<div className="scanner-section"> <div className="scanner-section">
<h3>Escanear código de barras</h3> <h3>Escanear código de barras</h3>
<BarcodeScanner onDetected={handleScan} /> <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>
<div className="equipos-section"> <div className="equipos-section">
@@ -80,8 +86,18 @@ export default function Dashboard() {
<ul> <ul>
{equipos.map((e) => ( {equipos.map((e) => (
<li key={e.id}> <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> </li>
))} ))}
</ul> </ul>
+10 -11
View File
@@ -16,23 +16,22 @@ function BarNavigation() {
return ( return (
<nav className="barNavigation"> <nav className="barNavigation">
<div className="menuToggle" onClick={toggleMenu}> <div className={`menuToggle ${openMenu ? "" : ""}`} onClick={toggleMenu}>
<div></div> <div></div>
<div></div> <div></div>
<div></div> <div></div>
</div> </div>
<ul className={openMenu ? "active" : ""}> <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> </li>
</ul> </ul>
</nav> </nav>