Merge branch 'ale' of https://github.com/jls846/front-censo into Lino
This commit is contained in:
@@ -0,0 +1 @@
|
||||
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
|
||||
|
After Width: | Height: | Size: 391 B |
@@ -0,0 +1 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -0,0 +1 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 128 B |
@@ -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;
|
||||
}
|
||||
+62
-31
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
.editar{
|
||||
|
||||
max-width: 1000px;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.columna{
|
||||
display: flex ;
|
||||
flex-direction: column;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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
|
||||
/>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user