added ranking

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

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

src/app/styles/layout/history.scss

@@ -76,3 +76,27 @@
   background: #fff;
   border-radius: 4px;
 }
+
+.total{
+  background-color: #fff;
+  justify-content: space-evenly;
+}
+
+.rowTotal{
+  box-shadow: 0 2px 8px #00000045;
+}
+
+.primer-lugar {
+  background-color: #bd8c01 !important; // Oro
+  font-weight: bold;
+}
+
+.segundo-lugar {
+  background-color: #cfcfcf !important; // Plata
+  font-weight: bold;
+}
+
+.tercer-lugar {
+  background-color: #ddb288 !important; // Bronce
+  font-weight: bold;
+}

src/components/BarNavigation.tsx

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

src/components/History.tsx

@@ -13,7 +13,6 @@ export default function History() {
   const api_url = process.env.NEXT_PUBLIC_API_URL;
   const router = useRouter();
 
-
   useEffect(() => {
     const fetchHistorial = async () => {
       try {
@@ -42,6 +41,14 @@ export default function History() {
     <div className="history-table-container">
       <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>

src/components/Ranking.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 Ranking() {
+  const [ranking, setRanking] = useState<any[]>([]);
+  const api_url = process.env.NEXT_PUBLIC_API_URL;
+
+  useEffect(() => {
+    const fetchRanking = async () => {
+      try {
+        const token = Cookies.get("token");
+        const headers = { Authorization: `Bearer ${token}` };
+
+        const response = await axios.get(`${api_url}/equipos/ranking`, {
+          headers,
+        });
+
+        setRanking(response.data);
+      } catch (error) {
+        toast.error("No se pudo cargar el ranking");
+      }
+    };
+
+    fetchRanking();
+  }, []);
+
+  return (
+    <div className="history-table-container">
+      <table className="history-table">
+        <thead>
+          <tr className="rowTotal">
+            <td colSpan={2} className="total">
+              Total de equipos censados:
+            </td>
+            <td colSpan={1} className="total">
+              {ranking.reduce((acc, r) => acc + r.total, 0)}
+            </td>
+          </tr>
+
+          <tr>
+            <th>Usuario</th>
+            <th>Total Censado</th>
+            <th>Ranking</th>
+          </tr>
+        </thead>
+
+        <tbody>
+          {ranking.length > 0 ? (
+            ranking.map((item: any, index: number) => (
+              <tr
+                key={item.id_usuario || index}
+                className={
+                  index === 0
+                    ? "primer-lugar"
+                    : index === 1
+                    ? "segundo-lugar"
+                    : index === 2
+                    ? "tercer-lugar"
+                    : ""
+                }
+              >
+                <td>{item.nombre}</td>
+                <td>{item.total}</td>
+                <td>#{index + 1}</td>
+              </tr>
+            ))
+          ) : (
+            <tr>
+              <td colSpan={3} className="empty-row">
+                No hay datos de ranking disponibles
+              </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","/historial"];
+  const publicNav = ["/escaner", "/agregarEquipo", "/editar", "/cambiarPass","/historial","/ranking"];
   const privateNav = ["/equipoComputo", "/crearCuenta", "/perifericos"];
 
   return (