feat: add cupo_maximo field to event creation and editing forms; update related components and types

src/components/evento-card.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { GetEventoWithCuestionarios } from '@/types/evento';
 import Image from 'next/image';
 import Link from 'next/link';
@@ -12,7 +13,7 @@ export default function EventoCard({
   user?: 'public' | 'administrador' | 'staff';
 }) {
   const [verMas, setVerMas] = useState(false);
-  const descripcion = evento.descripcion_evento;
+  const descripcion = evento.descripcion_evento ?? '';
   const limite = 100;
 
   const descripcionRecortada =
@@ -26,11 +27,11 @@ export default function EventoCard({
         <div className="card-image scale-hover-1">
           <Link
             href={
-              user === 'public'
-                ? `/evento/${evento.nombre_evento.split(' ').join('_')}/${
+              user === 'administrador' || user === 'staff'
+                ? `/${user}/evento/${evento.id_evento}`
+                : `/evento/${evento.nombre_evento.split(' ').join('_')}/${
                     evento.id_evento
-                  }/${evento.cuestionarios[0]?.id_cuestionario}`
-                : `/${user}/evento/${evento.id_evento}/${evento.cuestionarios[0]?.id_cuestionario}`
+                  }`
             }
           >
             <Image
@@ -44,8 +45,16 @@ export default function EventoCard({
           </Link>
           <div className="ripple-cont"></div>
         </div>
+
         <div className="card-body">
           <div className="card-description mb-0">
+            {evento.cuestionarios[0]?.cupo_maximo === null ? (
+              <span className="badge bg-success">Sin límite</span>
+            ) : (
+              <span className="badge bg-primary mb-2">
+                {evento.cuestionarios[0]?.cupos_disponibles} cupos disponibles
+              </span>
+            )}
             <MarkdownRenderer markdown={descripcionRecortada} />
             {descripcion.length > limite && (
               <button
@@ -57,21 +66,37 @@ export default function EventoCard({
               </button>
             )}
           </div>
+
           {evento.cuestionarios.length > 0 &&
             evento.cuestionarios.map((cuestionario) => (
               <div key={cuestionario.id_cuestionario} className="">
-                <Link
-                  href={
-                    user === 'public'
-                      ? `/evento/${evento.nombre_evento.split(' ').join('_')}/${
-                          evento.id_evento
-                        }/${cuestionario.id_cuestionario}`
-                      : `/${user}/evento/${evento.id_evento}/${cuestionario.id_cuestionario}`
-                  }
-                  className="btn mt-2 w-100 btn-outline-primary"
-                >
-                  Regístrate
-                </Link>
+                {user === 'administrador' || user === 'staff' ? (
+                  <Link
+                    href={`/${user}/evento/${evento.id_evento}`}
+                    className="btn mt-2 w-100 btn-outline-primary"
+                  >
+                    Ver evento
+                  </Link>
+                ) : cuestionario.cupos_disponibles === 0 &&
+                  cuestionario.cupo_maximo !== null ? (
+                  <button
+                    className="btn mt-2 w-100 btn-outline-secondary"
+                    disabled
+                  >
+                    Cupo lleno
+                  </button>
+                ) : (
+                  <Link
+                    href={`/evento/${evento.nombre_evento
+                      .split(' ')
+                      .join('_')}/${evento.id_evento}/${
+                      cuestionario.id_cuestionario
+                    }`}
+                    className="btn mt-2 w-100 btn-outline-primary"
+                  >
+                    Regístrate
+                  </Link>
+                )}
               </div>
             ))}
         </div>