download and plantima image

src/app/(admins)/administrador/crear-formulario/page.tsx

@@ -217,7 +217,7 @@ export default function AdminFormPage() {
             <div className="col-md-4 mb-3" key={plantilla.id}>
               <h3>Plantillas</h3>
               <div
-                className="box w-100 cursor-pointer"
+                className=" cursor-pointer"
                 onClick={() => {
                   const {
                     nombre_form,
@@ -249,8 +249,8 @@ export default function AdminFormPage() {
               >
                 <Image
                   src={plantilla.imagen}
-                  width={1000}
-                  height={300}
+                  width={250}
+                  height={250}
                   alt={`Plantilla de formulario ${index + 1}`}
                   className="img-fluid rounded shadow-sm"
                 />
@@ -313,7 +313,8 @@ export default function AdminFormPage() {
         />
       </div>
 
-      <div className="row">
+      <div className="row alert alert-info">
+        <p className="mb-0 h2">Fechas de inicio y fin del formulario</p>
         <div className="col-md-6">
           <Input
             label="Fecha de inicio"

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

@@ -8,6 +8,7 @@ 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 }>();
@@ -118,20 +119,37 @@ export default function Page() {
     p.participante.correo.toLowerCase().includes(busquedaCorreo.toLowerCase())
   );
 
-  const handleDownload = async () => {
-    try {
-      const res = await axiosInstance.get(
-        `/cuestionario-respondido/reporte-respuestas/${id_formulario}`,
-        {
-          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);
+  const handleDownload = () => {
+    if (participantesFiltrados.length === 0) {
+      toast.error('No hay participantes para exportar');
+      return;
     }
+
+    const rows = participantesFiltrados.map((item) => ({
+      ID_Participante: item.id_participante,
+      ID_Evento: item.id_evento,
+      Correo: item.participante.correo,
+      Fecha_Inscripcion: new Date(item.fecha_inscripcion).toLocaleString(),
+      Estatus: item.fecha_asistencia ? 'Asistio' : 'No asistio',
+      Fecha_Asistencia: item.fecha_asistencia
+        ? new Date(item.fecha_asistencia).toLocaleString()
+        : '',
+    }));
+
+    const worksheet = XLSX.utils.json_to_sheet(rows);
+    const workbook = XLSX.utils.book_new();
+    XLSX.utils.book_append_sheet(workbook, worksheet, 'Participantes');
+
+    const excelBuffer = XLSX.write(workbook, {
+      bookType: 'xlsx',
+      type: 'array',
+    });
+
+    const blob = new Blob([excelBuffer], {
+      type: 'application/octet-stream',
+    });
+
+    downloadFile(blob, `participantes_formulario_${id_formulario}`, 'xlsx');
   };
 
   return (

src/app/(public)/page.tsx

@@ -70,7 +70,7 @@ export default function Page() {
 
               return (
                 <div
-                  className={`col-md-4 my-4 fade-in-up-bounce   ${fadeClass}`}
+                  className={`col-md-6 col-lg-4 my-4 fade-in-up-bounce   ${fadeClass}`}
                   key={cuestionario.id_cuestionario}
                 >
                   <FormularioCard

src/types/participante-evento.d.ts

@@ -1,15 +1,14 @@
 export interface ParticipacionEvento {
-    id_participante: number;
-    id_evento: number;
-    fecha_inscripcion: string; // formato ISO
-    estatus: boolean;
-    fecha_asistencia: string | null;
-    participante: Participante;
-  }
-  
-  export interface Participante {
-    id_participante: number;
-    correo: string;
-    id_tipo_user: number;
-  }
-  
+  id_participante: number;
+  id_evento: number;
+  fecha_inscripcion: string; // formato ISO
+  estatus: boolean;
+  fecha_asistencia: string | null;
+  participante: Participante;
+}
+
+export interface Participante {
+  id_participante: number;
+  correo: string;
+  id_tipo_user: number;
+}