addded dowload

app/Components/Dowload/Reporte.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import styles from "./style.module.css";
+import Cookies from "js-cookie";
+import { useState } from "react";
+import toast from "react-hot-toast";
+
+export default function DownloadReporteXLSX() {
+  const [loading, setLoading] = useState(false);
+
+  const handleDownload = async () => {
+    setLoading(true);
+    const token = Cookies.get("token");
+    const headers = { Authorization: `Bearer ${token}` };
+
+    try {
+      const response = await fetch(
+        `${process.env.NEXT_PUBLIC_API_URL}/equipos/reporteXLSX`,//Modificar
+        { headers }
+      );
+
+      if (!response.ok) {
+        toast.error("Error al descargar el archivo");
+        return;
+      }
+
+      const blob = await response.blob();
+      const url = window.URL.createObjectURL(blob);
+
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = "Reporte Recibos.xlsx";
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+
+      window.URL.revokeObjectURL(url);
+    } catch (error) {
+      console.error(error);
+      toast.error("Hubo un problema al descargar el archivo.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <button
+      className={styles.downloadBtn}
+      onClick={handleDownload}
+      disabled={loading}
+    >
+      {loading ? (
+        <div className={styles.loader}></div>
+      ) : (
+        <img src="/excel.svg" alt="Excel" className={styles.iconExcel} width={30} height={30}/>
+      )}
+    </button>
+  );
+}

app/Components/Dowload/style.module.css

@@ -0,0 +1,46 @@
+.downloadBtn {
+  position: absolute;
+  right: 15px;
+  top:-35px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  background: #ffffff;
+  border: 1px solid #ddd;
+  border-bottom: none;
+  padding: 5px 5px;
+  cursor: pointer;
+  border-radius: 10px 10px 0 0;
+  font-size: 14px;
+  font-weight: 600;
+  transition: background 0.2s ease;
+  min-width: 50px;
+}
+
+.downloadBtn:hover {
+  background: #95d2b0;
+}
+
+.downloadBtn:disabled {
+  background: #a5a5a5;
+  cursor: not-allowed;
+}
+
+.loader {
+  border: 3px solid #ffffff55;
+  border-top: 3px solid white;
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}