added history

src/components/BarNavigation.tsx

@@ -39,6 +39,11 @@ function BarNavigation() {
             <span>Agregar equipo</span>
           </Link>
         </li>
+        <li className="subMenu" onClick={toggleMenu}>
+          <Link href="/historial" className="links">
+            <span>Historial</span>
+          </Link>
+        </li>
         <li className="subMenu" onClick={toggleMenu}>
           <Link href="/cambiarPass" className="links">
             <span>Cambiar datos</span>

src/components/History.tsx

@@ -0,0 +1,85 @@
+"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 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) {
+        console.error(error);
+        toast.error("No se pudo cargar el historial");
+      }
+    };
+
+    fetchHistorial();
+  }, []);
+
+  const handleClick = (item: any) => {
+    const inventario = item.inventario;
+    router.push(`/editar?equipoId=${inventario}`);
+  };
+
+  return (
+    <div className="history-table-container">
+      <table className="history-table">
+        <thead>
+          <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>
+    </div>
+  );
+}

src/components/header.tsx

@@ -9,7 +9,7 @@ import { usePathname } from "next/navigation";
 function Header() {
   const pathname = usePathname();
 
-  const publicNav = ["/escaner", "/agregarEquipo", "/editar", "/cambiarPass"];
+  const publicNav = ["/escaner", "/agregarEquipo", "/editar", "/cambiarPass","/historial"];
   const privateNav = ["/equipoComputo", "/crearCuenta", "/perifericos"];
 
   return (