Alejandra-Guzman-Mendez
93 lines
3.2 KiB
TypeScript
93 lines
3.2 KiB
TypeScript
"use client";
|
|
import { useState } from "react";
|
|
import "./reporte.css";
|
|
import axios from "axios";
|
|
|
|
export default function Page() {
|
|
const [report, setReport] = useState();
|
|
|
|
async function Report() {
|
|
const res = await axios.get("https");
|
|
setReport(res.data);
|
|
}
|
|
|
|
return (
|
|
<div className="reporte-layout">
|
|
{/* Panel izquierdo: título, buscador y tabla */}
|
|
<div className="panel-izquierdo">
|
|
<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 className="tabla-rec">
|
|
{/* Aquí irá tu tabla real */}
|
|
<p>Tabla de equipos...</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Panel derecho: filtros + botón descargar */}
|
|
<div className="panel-derecho">
|
|
<div className="filtro-rec">
|
|
<form className="editar">
|
|
<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 className="botones-filtro">
|
|
<button type="reset" className="limpiar">
|
|
Limpiar filtros
|
|
</button>
|
|
<button type="submit" className="aplicar">
|
|
Aplicar filtros
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<button className="boton-descargar">Descargar</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|