added history

src/app/(Operador)/historial/page.tsx

@@ -0,0 +1,5 @@
+import History from "@/components/History";
+
+export default function Page() {
+  return <History/>;
+}

src/app/styles/layout/escaner.scss

@@ -37,8 +37,10 @@
 
   h3 {
     font-size: 16px;
-    font-weight: 500;
     margin: 0;
+    color: #bd8c01;
+    font-size: 3rem;
+    font-weight: 700;
   }
 }
 

src/app/styles/layout/history.scss

@@ -0,0 +1,78 @@
+.history-table-container {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  overflow-x: auto;
+}
+
+.history-table {
+  width: min(95%, 1000px);
+  border-collapse: separate;
+  border-spacing: 0 10px;
+  font-size: 15px;
+  color: #e5e5e5;
+}
+
+.history-table td{
+    color: black;
+}
+
+
+.history-table thead {
+  background: linear-gradient(90deg, #015cb8, #003e79);
+  border-radius: 4px;
+}
+
+.history-table thead tr th:first-child {
+  border-top-left-radius: 4px;
+}
+.history-table thead tr th:last-child {
+  border-top-right-radius: 4px;
+}
+
+.history-table th {
+  padding: 14px;
+  text-align: center;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  text-shadow: 0 0 5px #00000060;
+}
+
+.history-table tbody tr {
+  background: rgba(255, 255, 255, 0.06);
+  transition: all 0.30s ease;
+  box-shadow: 0 2px 8px #00000045;
+  border-radius: 4px;
+}
+
+.history-table tbody tr td:first-child {
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+
+.history-table tbody tr td:last-child {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+.history-table td {
+  padding: 12px;
+  text-align: center;
+  font-weight: 400;
+}
+
+/* Hover mejorado */
+.history-table tbody tr:hover {
+  background: rgba(1, 92, 184, 0.45);
+  transform: scale(1.01);
+  box-shadow: 0 4px 12px #00000070;
+}
+
+/* Fila vacía */
+.empty-row {
+  text-align: center;
+  color: black;
+  font-style: italic;
+  background: #fff;
+  border-radius: 4px;
+}

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 (