modified barNavigation and name of dasboard
This commit is contained in:
@@ -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>
|
||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user