modified creadores

app/Components/Dowload/Reporte.tsx

@@ -1,43 +1,74 @@
 "use client";
 
-import styles from "./style.module.css";
-import Cookies from "js-cookie";
 import { useState } from "react";
-import toast from "react-hot-toast";
+import { saveAs } from "file-saver";
+import ExcelJS from "exceljs";
 
-export default function DownloadReporteXLSX() {
+import styles from "./style.module.css";
+
+interface Recibo {
+  id_recibo: number;
+  folio_recibo: string;
+  fecha_recibo: string;
+  fecha_registro: string;
+  monto: string;
+  user: {
+    usuario: string;
+  };
+}
+
+interface Columns{
+  header:string;
+  key:string;
+  width:number
+}
+
+interface Props {
+  data: Recibo[];
+  columns:Columns[];
+}
+
+export default function DownloadReporteXLSX({ data,columns }: Props) {
   const [loading, setLoading] = useState(false);
 
+  const formatearFechaMX = (fechaISO: string) => {
+    return new Date(fechaISO).toLocaleString("es-MX", {
+      timeZone: "America/Mexico_City",
+    });
+  };
+
   const handleDownload = async () => {
+    if (!data || data.length === 0) return;
+
     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 }
-      );
+      const workbook = new ExcelJS.Workbook();
+      const worksheet = workbook.addWorksheet("Recibos");
 
-      if (!response.ok) {
-        toast.error("Error al descargar el archivo");
-        return;
-      }
+      worksheet.columns = columns;
 
-      const blob = await response.blob();
-      const url = window.URL.createObjectURL(blob);
+      data.forEach((recibo) => {
+        worksheet.addRow({
+          folio: recibo.folio_recibo,
+          monto: Number(recibo.monto),
+          fechaRecibo: recibo.fecha_recibo,
+          fechaRegistro: formatearFechaMX(recibo.fecha_registro),
+          usuario: recibo.user.usuario,
+        });
+      });
 
-      const a = document.createElement("a");
-      a.href = url;
-      a.download = "Reporte Recibos.xlsx";
-      document.body.appendChild(a);
-      a.click();
-      a.remove();
+      worksheet.getColumn("monto").numFmt = '"$"#,##0.00';
 
-      window.URL.revokeObjectURL(url);
+      const buffer = await workbook.xlsx.writeBuffer();
+      const blob = new Blob([buffer], {
+        type:
+          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+      });
+
+      saveAs(blob, "Reporte_Recibos.xlsx");
     } catch (error) {
-      console.error(error);
-      toast.error("Hubo un problema al descargar el archivo.");
+      console.error("Error generando Excel", error);
     } finally {
       setLoading(false);
     }
@@ -52,7 +83,13 @@ export default function DownloadReporteXLSX() {
       {loading ? (
         <div className={styles.loader}></div>
       ) : (
-        <img src="/excel.svg" alt="Excel" className={styles.iconExcel} width={30} height={30}/>
+        <img
+          src="/excel.svg"
+          alt="Excel"
+          className={styles.iconExcel}
+          width={30}
+          height={30}
+        />
       )}
     </button>
   );

app/Components/Reportes/porRecibo.tsx

@@ -24,6 +24,14 @@ function PorRecibos({ desde, hasta }: Props) {
   const [recibos, setRecibos] = useState<Recibo[]>([]);
   const [loading, setLoading] = useState(false);
 
+  const columns = [
+    { header: "Folio", key: "folio", width: 15 },
+    { header: "Monto", key: "monto", width: 15 },
+    { header: "Fecha Recibo", key: "fechaRecibo", width: 18 },
+    { header: "Fecha Registro", key: "fechaRegistro", width: 22 },
+    { header: "Usuario", key: "usuario", width: 20 },
+  ];
+
   useEffect(() => {
     if (!desde || !hasta) return;
 
@@ -61,7 +69,8 @@ function PorRecibos({ desde, hasta }: Props) {
 
   return (
     <div style={{ position: "relative" }}>
-      {recibos.length > 0 && <DownloadReporteXLSX />}
+      {recibos.length > 0 && <DownloadReporteXLSX data={recibos} columns={columns} />}
+
       <div
         style={{
           overflow: "auto",

app/Components/Reportes/porServicio.tsx

@@ -44,7 +44,6 @@ function PorServicio({ desde, hasta }: Props) {
 
   return (
     <div style={{ position: "relative" }}>
-      {servicios.length > 0 && <DownloadReporteXLSX />}
 
       <div
         style={{

app/Components/layout/BarNavigation/BarNavigation.tsx

@@ -123,7 +123,7 @@ export default function BarNavigation() {
             >
               <li>Activos y en Mantenimiento</li>
             </Link>
-            <Link
+            {/* <Link
               href="/Mensajes"
               className="links"
               onClick={(e) => {
@@ -132,7 +132,7 @@ export default function BarNavigation() {
               }}
             >
               <li>Mensajes</li>
-            </Link>
+            </Link> */}
             <Link
               href="/Programas"
               className="links"

app/Components/layout/BarNavigation/BarNavigationServicio.tsx

@@ -100,7 +100,7 @@ export default function BarNavigationServicio() {
           </ul>
         </li>
 
-        <li className="subMenu" onClick={toggleMenu}>
+        {/* <li className="subMenu" onClick={toggleMenu}>
           <Link
             href="/Mensajes"
             className="links"
@@ -111,7 +111,7 @@ export default function BarNavigationServicio() {
           >
             <span>Mensajes</span>
           </Link>
-        </li>
+        </li> */}
       </ul>
     </nav>
   );

app/creadores/CreatorCard.tsx

@@ -0,0 +1,26 @@
+import Image from "next/image";
+import "./creadores.css";
+
+interface props{
+    title:string;
+    img:string;
+    width:number;
+    height:number;
+}
+
+export default function CreatorCard({title,img,width,height}:props) {
+    return (
+        <div className="card">
+            <div className="imageWrapper">
+                <Image
+                    src={img}
+                    alt="IO"
+                    width={width}
+                    height={height}
+                    className="creators"
+                />
+            </div>
+            <h1 className="title">{title}</h1>
+        </div>
+    )
+}

app/creadores/page.tsx

@@ -1,5 +1,5 @@
-import Image from "next/image";
 import "./creadores.css";
+import CreatorCard from "./CreatorCard";
 
 export default function Page() {
     return (
@@ -7,31 +7,9 @@ export default function Page() {
             <div className="container" style={{ display: "flex", justifyContent: "center", gap: "4rem" }}>
                 <div className="img"></div>
 
-                <div className="card">
-                    <div className="imageWrapper">
-                        <Image
-                            src="/IO.png"
-                            alt="IO"
-                            width={160}
-                            height={200}
-                            className="creators"
-                        />
-                    </div>
-                    <h1 className="title">IO</h1>
-                </div>
+                <CreatorCard title="IO" img="/IO.png" width={150} height={200} />
+                <CreatorCard title="CarloSpak" img="/SPAK.png" width={160} height={100} />
 
-                <div className="card">
-                    <div className="imageWrapper">
-                        <Image
-                            src="/SPAK.png"
-                            alt="Carlos Pak"
-                            width={160}
-                            height={100}
-                            className="creators"
-                        />
-                    </div>
-                    <h1 className="title">Carlos Pak</h1>
-                </div>
             </div>
         </div>
 

package.json

@@ -10,6 +10,8 @@
   },
   "dependencies": {
     "axios": "^1.11.0",
+    "exceljs": "^4.4.0",
+    "file-saver": "^2.0.5",
     "js-cookie": "^3.0.5",
     "next": "^16.0.7",
     "react": "19.1.0",
@@ -21,6 +23,7 @@
     "sweetalert2-react-content": "^5.1.1"
   },
   "devDependencies": {
+    "@types/file-saver": "^2.0.7",
     "@types/js-cookie": "^3.0.6",
     "@types/node": "^20",
     "@types/react": "^19",