modified ranking

src/app/styles/layout/history.scss

@@ -13,11 +13,10 @@
   color: #e5e5e5;
 }
 
-.history-table td{
-    color: black;
+.history-table td {
+  color: black;
 }
 
-
 .history-table thead {
   background: linear-gradient(90deg, #015cb8, #003e79);
   border-radius: 4px;
@@ -40,7 +39,7 @@
 
 .history-table tbody tr {
   background: rgba(255, 255, 255, 0.06);
-  transition: all 0.30s ease;
+  transition: all 0.3s ease;
   box-shadow: 0 2px 8px #00000045;
   border-radius: 4px;
 }
@@ -77,12 +76,12 @@
   border-radius: 4px;
 }
 
-.total{
+.total {
   background-color: #fff;
   justify-content: space-evenly;
 }
 
-.rowTotal{
+.rowTotal {
   box-shadow: 0 2px 8px #00000045;
 }
 
@@ -227,7 +226,7 @@
   padding: 12px 14px;
   border-radius: 10px;
   text-align: center;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
 }
 
 .headerCard .label {
@@ -245,14 +244,13 @@
   color: #222;
 }
 
-
 /* Sección de texto largo */
 .sectionCard {
   background: #f8f8f8;
   padding: 14px 16px;
   border-radius: 10px;
   margin-bottom: 15px;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.07);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
 }
 
 .sectionLabel {
@@ -272,3 +270,46 @@
   white-space: pre-wrap;
   word-break: break-word;
 }
+
+.year-selector {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  margin-top: 1rem;
+}
+
+.year-selector div {
+  width: min(95%, 1000px);
+  display: flex;
+  align-items: center;
+  justify-content: end;
+}
+
+.year-selector label {
+  text-align: end;
+  font-weight: 600;
+  color: #333;
+  margin-right: 10px;
+}
+
+.year-selector select {
+  width: 55px;
+  padding: 6px 10px;
+  font-size: 14px;
+  border-radius: 6px;
+  border: 1px solid #ccc;
+  background-color: #fff;
+  cursor: pointer;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.year-selector select:hover {
+  border-color: #999;
+}
+
+.year-selector select:focus {
+  outline: none;
+  border-color: #4a90e2;
+  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
+}

src/components/Ranking.tsx

@@ -1,7 +1,6 @@
 "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";
@@ -9,17 +8,28 @@ 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;
 
+  const currentYear = new Date().getFullYear();
+
+  const [year, setYear] = useState<number>(currentYear);
+
+  const [ranking, setRanking] = useState<any[]>([]);
+
+  const years = [];
+  for (let y = 2025; y <= currentYear; y++) {
+    years.push(y);
+  }
+
   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,
+        const response = await axios.get(`${api_url}/equipos/ranking/${year}`, {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
         });
 
         setRanking(response.data);
@@ -29,57 +39,74 @@ export default function Ranking() {
     };
 
     fetchRanking();
-  }, []);
+  }, [year, api_url]);
 
   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
+    <section>
+      <div className="year-selector">
+        <div>
+          <label>Año:</label>
+          <select
+            value={year}
+            onChange={(e) => setYear(Number(e.target.value))}
+          >
+            {years.map((y) => (
+              <option key={y} value={y}>
+                {y}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+      <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>
-          )}
-        </tbody>
-      </table>
-    </div>
+
+            <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}
+                  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>
+    </section>
   );
 }