152 lines
4.3 KiB
TypeScript
152 lines
4.3 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import Cookies from "js-cookie";
|
|
import axios from "axios";
|
|
import toast from "react-hot-toast";
|
|
|
|
import "../app/styles/layout/history.scss";
|
|
|
|
export default function History() {
|
|
const [historial, setHistorial] = useState<any[]>([]);
|
|
const [selected, setSelected] = useState<any | null>(null);
|
|
|
|
const api_url = process.env.NEXT_PUBLIC_API_URL;
|
|
const router = useRouter();
|
|
|
|
useEffect(() => {
|
|
const fetchHistorial = async () => {
|
|
try {
|
|
const token = Cookies.get("token");
|
|
const headers = { Authorization: `Bearer ${token}` };
|
|
|
|
const response = await axios.get(`${api_url}/movimientos/historial`, {
|
|
headers,
|
|
});
|
|
|
|
setHistorial(response.data);
|
|
} catch (error) {
|
|
toast.error("No se pudo cargar el historial");
|
|
}
|
|
};
|
|
|
|
fetchHistorial();
|
|
}, []);
|
|
|
|
const handleClick = (item: any) => {
|
|
setSelected(item); // <-- abrir modal con datos del equipo
|
|
};
|
|
|
|
const handleBuscar = () => {
|
|
if (!selected) return;
|
|
const inventario = selected.inventario;
|
|
router.push(`/editar?equipoId=${inventario}`);
|
|
};
|
|
|
|
return (
|
|
<div className="history-table-container">
|
|
{/* TABLA */}
|
|
<table className="history-table">
|
|
<thead>
|
|
<tr className="rowTotal">
|
|
<td colSpan={2} className="total">
|
|
Numero total modificado:
|
|
</td>
|
|
<td colSpan={1} className="total">
|
|
{historial.length}
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th>Inventario</th>
|
|
<th>Tipo de Equipo</th>
|
|
<th>Fecha de Censo</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
{historial.length > 0 ? (
|
|
historial.map((item: any, index: number) => (
|
|
<tr
|
|
key={item.id || index}
|
|
onClick={() => handleClick(item)}
|
|
className="clickable-row"
|
|
>
|
|
<td>{item.inventario}</td>
|
|
<td>
|
|
{item.tipo_equipo === "PERIFÉRICO"
|
|
? item.periferico
|
|
: item.tipo_equipo}
|
|
</td>
|
|
<td>
|
|
{item.fechaMovimiento
|
|
? new Date(item.fechaMovimiento).toLocaleDateString("es-MX")
|
|
: "—"}
|
|
</td>
|
|
</tr>
|
|
))
|
|
) : (
|
|
<tr>
|
|
<td colSpan={3} className="empty-row">
|
|
No hay registros de historial
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
|
|
{selected && (
|
|
<div className="modal-overlay">
|
|
<div className="modal-content fade-in">
|
|
<h2>Detalles del Equipo</h2>
|
|
|
|
<div className="modal-body">
|
|
{/* Encabezado limpio */}
|
|
<div className="headerSelected">
|
|
<div className="headerCard">
|
|
<span className="label">Inventario</span>
|
|
<span className="value">{selected.inventario}</span>
|
|
</div>
|
|
|
|
<div className="headerCard">
|
|
<span className="label">Equipo</span>
|
|
<span className="value">
|
|
{selected.tipo_equipo === "PERIFÉRICO"
|
|
? selected.periferico
|
|
: selected.tipo_equipo}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Lugar */}
|
|
<div className="sectionCard">
|
|
<span className="sectionLabel">Lugar</span>
|
|
<p className="sectionText">
|
|
{selected.lugar || "Sin especificar"}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Observaciones */}
|
|
<div className="sectionCard">
|
|
<span className="sectionLabel">Observaciones</span>
|
|
<p className="sectionText">{selected.observaciones || "—"}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="modal-buttons">
|
|
<button className="btn cancel" onClick={() => setSelected(null)}>
|
|
Cancelar
|
|
</button>
|
|
|
|
<button className="btn search" onClick={handleBuscar}>
|
|
Editar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|