From e4e4042b31ea69d04ca4c820355acf7fec69bdff Mon Sep 17 00:00:00 2001
From: elmer-20 <80175046+elmer-20@users.noreply.github.com>
Date: Mon, 16 Mar 2026 09:01:53 -0500
Subject: [PATCH] Update ConvocatoriasSection.vue

---
 .../WebPageSections/ConvocatoriasSection.vue  | 58 ++++++++++---------
 1 file changed, 31 insertions(+), 27 deletions(-)

diff --git a/front/src/components/WebPageSections/ConvocatoriasSection.vue b/front/src/components/WebPageSections/ConvocatoriasSection.vue
index 0abc7fa..77d2b76 100644
--- a/front/src/components/WebPageSections/ConvocatoriasSection.vue
+++ b/front/src/components/WebPageSections/ConvocatoriasSection.vue
@@ -15,86 +15,90 @@
       <a-skeleton v-if="store.loading" active :paragraph="{ rows: 8 }" />
 
       <div v-else class="convocatorias-grid">
-        <a-card v-if="store.procesoPrincipal" class="main-convocatoria-card">
+        <a-card
+            v-for="proceso in store.procesos"
+            :key="proceso.id"
+            class="main-convocatoria-card"
+          >
           <div class="card-badge">Principal</div>
 
           <div class="main-card-grid">
             <div class="main-card-text">
               <div class="convocatoria-header">
                 <div>
-                  <h3>{{ store.procesoPrincipal.titulo }}</h3>
+                  <h3>{{ proceso.titulo }}</h3>
                       <a-divider class="custom-divider" />
                                     <p class="convocatoria-date">
                     PreInscripciones:
-                    {{ formatFecha(store.procesoPrincipal.fecha_inicio_preinscripcion) }}
+                    {{ formatFecha(proceso.fecha_inicio_preinscripcion) }}
                     -
-                    {{ formatFecha(store.procesoPrincipal.fecha_fin_inscripcion) }}
+                    {{ formatFecha(proceso.fecha_fin_inscripcion) }}
                   </p>
                   <p class="convocatoria-date">
                     Inscripciones:
-                    {{ formatFecha(store.procesoPrincipal.fecha_inicio_inscripcion) }}
+                    {{ formatFecha(proceso.fecha_inicio_inscripcion) }}
                     -
-                    {{ formatFecha(store.procesoPrincipal.fecha_fin_inscripcion) }}
+                    {{ formatFecha(proceso.fecha_fin_inscripcion) }}
                   </p>
                                     <p class="convocatoria-date">
                     Examen:
-                    {{ formatFecha(store.procesoPrincipal.fecha_examen1) }}
+                    {{ formatFecha(proceso.fecha_examen1) }}
                     -
-                    {{ formatFecha(store.procesoPrincipal.fecha_examen2) }}
+                    {{ formatFecha(proceso.fecha_examen2) }}
 
                   </p>
                 </div>
 
                 <a-tag color="success" class="status-tag">
-                  {{ store.procesoPrincipal.estado }}
+                  {{ proceso.estado }}
                 </a-tag>
               </div>
 
               <p class="convocatoria-desc">
-                {{ store.procesoPrincipal.descripcion }}
+                {{ proceso.descripcion }}
               </p>
 
               <a-divider class="custom-divider" />
 
               <!-- ACCIONES RAPIDAS -->
               <div
-                v-if="store.procesoPrincipal?.detalles?.length"
+                v-if="proceso?.detalles?.length"
                 class="quick-actions"
               >
                 <h4 class="subheading">Acciones Rápidas</h4>
 
                 <div class="action-buttons-grid">
                   <a-button
-                    v-if="tieneTipo('requisitos')"
+                    v-if="tieneTipo(proceso,'requisitos')"
                     class="action-btn"
-                    @click="abrirPorTipo('requisitos')"
+                    @click="abrirPorTipo(proceso,'requisitos')"
                   >
                     <template #icon><FileTextOutlined /></template>
                     Requisitos
                   </a-button>
 
                   <a-button
-                    v-if="tieneTipo('pagos')"
+                    v-if="tieneTipo(proceso,'pagos')"
                     class="action-btn"
-                    @click="abrirPorTipo('pagos')"
+                    @click="abrirPorTipo(proceso,'pagos')"
                   >
                     <template #icon><DollarOutlined /></template>
                     Pagos
                   </a-button>
 
                   <a-button
-                    v-if="tieneTipo('vacantes')"
+                    v-if="tieneTipo(proceso,'vacantes')"
                     class="action-btn"
-                    @click="abrirPorTipo('vacantes')"
+                    @click="abrirPorTipo(proceso,'vacantes')"
                   >
                     <template #icon><TeamOutlined /></template>
                     Vacantes
                   </a-button>
 
                   <a-button
-                    v-if="tieneTipo('cronograma')"
+                    v-if="tieneTipo(proceso,'cronograma')"
                     class="action-btn"
-                    @click="abrirPorTipo('cronograma')"
+                    @click="abrirPorTipo(proceso,'cronograma')"
                   >
                     <template #icon><CalendarOutlined /></template>
                     Cronograma
@@ -128,11 +132,11 @@
                 <h4 class="subheading">Preinscripción en Línea</h4>
                 <p>Completa tu preinscripción de manera virtual y segura</p>
               </div>
-              <div v-if="store.procesoPrincipal?.link_preinscripcion" class="preinscripcion-btn-wrap">
+              <div v-if="proceso?.link_preinscripcion" class="preinscripcion-btn-wrap">
                 <a-button
                   type="primary"
                   size="large"
-                  :href="store.procesoPrincipal.link_preinscripcion"
+                  :href="proceso.link_preinscripcion"
                   target="_blank"
                 >
                   <template #icon><FormOutlined /></template>
@@ -145,8 +149,8 @@
             </div>
 
           <a-image
-            v-if="store.procesoPrincipal?.imagen_url"
-            :src="store.procesoPrincipal.imagen_url"
+            v-if="proceso?.imagen_url"
+            :src="proceso.imagen_url"
             alt="Convocatoria"
             :preview="true"
             class="convocatoria-image"
@@ -289,13 +293,13 @@ const formatFecha = (fecha) => {
   })
 }
 
-const tieneTipo = (tipo) => {
-  return store.procesoPrincipal?.detalles?.some((d) => d.tipo === tipo)
+const tieneTipo = (proceso, tipo) => {
+  return proceso?.detalles?.some((d) => d.tipo === tipo)
 }
 
-const abrirPorTipo = (tipo) => {
+const abrirPorTipo = (proceso, tipo) => {
   detallesSeleccionados.value =
-    store.procesoPrincipal?.detalles?.filter((d) => d.tipo === tipo) ?? []
+    proceso?.detalles?.filter((d) => d.tipo === tipo) ?? []
 
   tituloModal.value = tipo.charAt(0).toUpperCase() + tipo.slice(1)
   modalVisible.value = true