src/app/(admins)/staff/lista-manual/page.tsx

@@ -6,6 +6,7 @@ import Table, { Header } from '@/components/table';
 import { GetCuestionario } from '@/types/cuestionario';
 import { ParticipacionEvento } from '@/types/participante-evento';
 import axiosInstance from '@/utils/api-config';
+import { downloadFile } from '@/utils/downloas-utils';
 import React, { useEffect } from 'react';
 import toast from 'react-hot-toast';
 
@@ -72,6 +73,9 @@ export default function Page() {
     Record<number, boolean>
   >({});
   const [busquedaCorreo, setBusquedaCorreo] = React.useState('');
+  const [idEventoSeleccionado, setIdEventoSeleccionado] = React.useState<
+    number | null
+  >(null);
 
   useEffect(() => {
     const getEventos = async () => {
@@ -89,6 +93,7 @@ export default function Page() {
 
   const handleOnSelect = async (idSeleccionado: number) => {
     try {
+      setIdEventoSeleccionado(idSeleccionado);
       const { data } = await axiosInstance.get<ParticipacionEvento[]>(
         `/participante-evento/evento/${idSeleccionado}`
       );
@@ -123,6 +128,22 @@ export default function Page() {
     p.participante.correo.toLowerCase().includes(busquedaCorreo.toLowerCase())
   );
 
+  const handleDownload = async () => {
+    try {
+      const res = await axiosInstance.get(
+        `/cuestionario-respondido/reporte-respuestas/${idEventoSeleccionado}`,
+        {
+          responseType: 'blob',
+        }
+      );
+
+      downloadFile(res.data, 'lista_participantes', 'xlsx');
+    } catch (error) {
+      toast.error('Error al descargar la lista de participantes');
+      console.error('Error al descargar la lista de participantes:', error);
+    }
+  };
+
   return (
     <div>
       <Select
@@ -132,13 +153,16 @@ export default function Page() {
           label: evento.nombre_form,
         }))}
         onChange={(e) => {
-          const id = Number(e?.target?.value ?? e); // Por si el componente Select devuelve directamente el value
+          const id = Number(e?.target?.value ?? e);
           if (!isNaN(id)) handleOnSelect(id);
         }}
         placeholder="Selecciona un evento"
       />
       {participantes.length > 0 && (
         <>
+          <Button icon="download" onClick={handleDownload}>
+            Descargar lista
+          </Button>
           <Input
             label="Buscar por correo"
             placeholder="ejemplo@correo.com"

src/utils/downloas-utils.ts

@@ -0,0 +1,24 @@
+export const downloadFile = (
+  blob: Blob,
+  fileName: string,
+  extension: 'xlsx' | 'pdf' | 'csv' | 'txt'
+) => {
+  // Asegurar la extensión correcta
+  const finalFileName = fileName.endsWith(`.${extension}`)
+    ? fileName
+    : `${fileName}.${extension}`;
+
+  // Crear una URL para el blob
+  const url = window.URL.createObjectURL(blob);
+
+  // Crear un enlace invisible
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = finalFileName;
+  document.body.appendChild(a);
+  a.click();
+
+  // Limpiar la URL creada
+  window.URL.revokeObjectURL(url);
+  document.body.removeChild(a);
+};