src/app/(admins)/administrador/formulario/[id_formulario]/page.tsx

@@ -8,7 +8,6 @@ import { downloadFile } from '@/utils/downloas-utils';
 import { useParams } from 'next/navigation';
 import React, { useEffect } from 'react';
 import toast from 'react-hot-toast';
-import * as XLSX from 'xlsx';
 
 export default function Page() {
   const params = useParams<{ id_formulario: string }>();
@@ -21,6 +20,7 @@ export default function Page() {
     Record<number, boolean>
   >({});
   const [busquedaCorreo, setBusquedaCorreo] = React.useState('');
+  const [loading, setLoading] = React.useState(false);
 
   useEffect(() => {
     if (!id_formulario) return;
@@ -119,7 +119,7 @@ export default function Page() {
     p.participante.correo.toLowerCase().includes(busquedaCorreo.toLowerCase())
   );
 
-  const handleDownload = () => {
+  /*   const handleDownload = () => {
     if (participantesFiltrados.length === 0) {
       toast.error('No hay participantes para exportar');
       return;
@@ -150,14 +150,58 @@ export default function Page() {
     });
 
     downloadFile(blob, `participantes_formulario_${id_formulario}`, 'xlsx');
+  }; */
+
+  const handleDownload = async () => {
+    setLoading(true);
+    if (participantesFiltrados.length === 0) {
+      toast.error('No hay participantes para exportar');
+      return;
+    }
+
+    try {
+      const res = await axiosInstance.get(
+        `/cuestionario-respondido/reporte-respuestas/${id_formulario}`,
+        {
+          responseType: 'blob',
+        }
+      );
+
+      downloadFile(
+        res.data,
+        `reporte_respuestas_formulario_${id_formulario}`,
+        'csv'
+      );
+    } catch (error) {
+      console.error('Error al descargar el archivo:', error);
+      toast.error('Error al descargar el archivo');
+    } finally {
+      setLoading(false);
+    }
   };
 
   return (
     <div>
       <h2 className="mb-4">Participantes del formulario #{id_formulario}</h2>
 
-      <Button icon="download" onClick={handleDownload} className="mt-2">
-        Descargar lista
+      <Button
+        icon="download"
+        onClick={handleDownload}
+        className="my-2"
+        disabled={loading}
+      >
+        {loading ? (
+          <>
+            <span
+              className="spinner-border spinner-border-sm me-2"
+              role="status"
+              aria-hidden="true"
+            ></span>
+            Descargando...
+          </>
+        ) : (
+          'Descargar respuestas'
+        )}
       </Button>
       {participantes.length > 0 && (
         <>