From 17a5b333fd67642bfeb18fdbc2ebc79ee79d713f Mon Sep 17 00:00:00 2001
From: dmolinari <dmolinari@eldia.com>
Date: Sat, 18 Oct 2025 10:51:51 -0300
Subject: [PATCH] Fix Widgets Carousel

---
 .../legislativas/DevAppLegislativas.tsx       | 12 +++
 .../nacionales/HomeCarouselNacionalWidget.tsx | 73 +++++++++----------
 .../nacionales/HomeCarouselWidget.tsx         | 29 +++-----
 .../net9.0/Elecciones.Api.AssemblyInfo.cs     |  2 +-
 4 files changed, 58 insertions(+), 58 deletions(-)

diff --git a/Elecciones-Web/frontend/src/features/legislativas/DevAppLegislativas.tsx b/Elecciones-Web/frontend/src/features/legislativas/DevAppLegislativas.tsx
index 2374eec..4786541 100644
--- a/Elecciones-Web/frontend/src/features/legislativas/DevAppLegislativas.tsx
+++ b/Elecciones-Web/frontend/src/features/legislativas/DevAppLegislativas.tsx
@@ -77,6 +77,18 @@ export const DevAppLegislativas = () => {
                 />
             </div>
 
+            <div style={sectionStyle}>
+                <h2>Widget: Carrusel de Resultados Nación (Home)</h2>
+                <p style={descriptionStyle}>
+                    Uso: <code style={codeStyle}>&lt;HomeCarouselNacionalWidget eleccionId={2} categoriaId={2} titulo="Senadores - Argentina" /&gt;</code>
+                </p>
+                <HomeCarouselNacionalWidget
+                    eleccionId={2}
+                    categoriaId={2} // 3 para Diputados, 2 para Senadores
+                    titulo="Senadores - Total País"
+                />
+            </div>
+
             {/* --- SECCIÓN PARA EL WIDGET DE TARJETAS CON EJEMPLOS --- */}
             <div style={sectionStyle}>
                 <h2>Widget: Resultados por Provincia (Tarjetas)</h2>
diff --git a/Elecciones-Web/frontend/src/features/legislativas/nacionales/HomeCarouselNacionalWidget.tsx b/Elecciones-Web/frontend/src/features/legislativas/nacionales/HomeCarouselNacionalWidget.tsx
index a888395..49b2e05 100644
--- a/Elecciones-Web/frontend/src/features/legislativas/nacionales/HomeCarouselNacionalWidget.tsx
+++ b/Elecciones-Web/frontend/src/features/legislativas/nacionales/HomeCarouselNacionalWidget.tsx
@@ -1,4 +1,5 @@
 // src/features/legislativas/nacionales/HomeCarouselNacionalWidget.tsx
+
 import { useQuery } from '@tanstack/react-query';
 import { getHomeResumenNacional } from '../../../apiService';
 import { ImageWithFallback } from '../../../components/common/ImageWithFallback';
@@ -12,41 +13,42 @@ import 'swiper/css';
 import 'swiper/css/navigation';
 import styles from './HomeCarouselWidget.module.css';
 
-const formatPercent = (num: number | null | undefined) => `${(num || 0).toFixed(2).replace('.', ',')}%`;
-const formatNumber = (num: number) => num.toLocaleString('es-AR');
-
-const formatDateTime = (dateString: string | undefined | null) => {
-    if (!dateString) return '...';
-    try {
-        const date = new Date(dateString);
-        if (isNaN(date.getTime())) {
-            return dateString;
-        }
-        const day = String(date.getDate()).padStart(2, '0');
-        const month = String(date.getMonth() + 1).padStart(2, '0');
-        const year = date.getFullYear();
-        const hours = String(date.getHours()).padStart(2, '0');
-        const minutes = String(date.getMinutes()).padStart(2, '0');
-        return `${day}/${month}/${year}, ${hours}:${minutes} hs.`;
-    } catch (e) {
-        return dateString;
-    }
-};
-
-// Las props ya no incluyen distritoId
 interface Props {
   eleccionId: number;
   categoriaId: number;
   titulo: string;
 }
 
+const formatPercent = (num: number | null | undefined) => `${(num || 0).toFixed(2).replace('.', ',')}%`;
+const formatNumber = (num: number) => num.toLocaleString('es-AR');
+const formatDateTime = (dateString: string | undefined | null) => {
+  if (!dateString) return '...';
+  try {
+    const date = new Date(dateString);
+    if (isNaN(date.getTime())) {
+      return dateString;
+    }
+    const day = String(date.getDate()).padStart(2, '0');
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const year = date.getFullYear();
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    return `${day}/${month}/${year}, ${hours}:${minutes} hs.`;
+  } catch (e) {
+    return dateString;
+  }
+};
+
 export const HomeCarouselNacionalWidget = ({ eleccionId, categoriaId, titulo }: Props) => {
+  const uniqueId = `swiper-${Math.random().toString(36).substring(2, 9)}`;
+  const prevButtonClass = `prev-${uniqueId}`;
+  const nextButtonClass = `next-${uniqueId}`;
+
   const { data, isLoading, error } = useQuery({
-    // La queryKey ahora no necesita distritoId
     queryKey: ['homeResumenNacional', eleccionId, categoriaId],
-    // Llama a la nueva función de la API
     queryFn: () => getHomeResumenNacional(eleccionId, categoriaId),
   });
+
   if (isLoading) return <div>Cargando widget...</div>;
   if (error || !data) return <div>No se pudieron cargar los datos.</div>;
 
@@ -82,8 +84,8 @@ export const HomeCarouselNacionalWidget = ({ eleccionId, categoriaId, titulo }:
           spaceBetween={16}
           slidesPerView={1.3}
           navigation={{
-            prevEl: `.${styles.navButtonPrev}`,
-            nextEl: `.${styles.navButtonNext}`,
+            prevEl: `.${prevButtonClass}`,
+            nextEl: `.${nextButtonClass}`,
           }}
           breakpoints={{
             320: { slidesPerView: 1.25, spaceBetween: 10 },
@@ -96,7 +98,6 @@ export const HomeCarouselNacionalWidget = ({ eleccionId, categoriaId, titulo }:
           {data.resultados.map(candidato => (
             <SwiperSlide key={candidato.agrupacionId}>
               <div className={styles.candidateCard} style={{ '--candidate-color': candidato.color || '#ccc' } as React.CSSProperties}>
-
                 <div className={styles.candidatePhotoWrapper}>
                   <ImageWithFallback
                     src={candidato.fotoUrl ?? undefined}
@@ -105,22 +106,15 @@ export const HomeCarouselNacionalWidget = ({ eleccionId, categoriaId, titulo }:
                     className={styles.candidatePhoto}
                   />
                 </div>
-
                 <div className={styles.candidateDetails}>
                   <div className={styles.candidateInfo}>
                     {candidato.nombreCandidato ? (
                       <>
-                        <span className={styles.candidateName}>
-                          {candidato.nombreCandidato}
-                        </span>
-                        <span className={styles.partyName}>
-                          {candidato.nombreCortoAgrupacion || candidato.nombreAgrupacion}
-                        </span>
+                        <span className={styles.candidateName}>{candidato.nombreCandidato}</span>
+                        <span className={styles.partyName}>{candidato.nombreCortoAgrupacion || candidato.nombreAgrupacion}</span>
                       </>
                     ) : (
-                      <span className={styles.candidateName}>
-                        {candidato.nombreCortoAgrupacion || candidato.nombreAgrupacion}
-                      </span>
+                      <span className={styles.candidateName}>{candidato.nombreCortoAgrupacion || candidato.nombreAgrupacion}</span>
                     )}
                   </div>
                   <div className={styles.candidateResults}>
@@ -128,14 +122,13 @@ export const HomeCarouselNacionalWidget = ({ eleccionId, categoriaId, titulo }:
                     <span className={styles.votes}>{formatNumber(candidato.votos)} votos</span>
                   </div>
                 </div>
-
               </div>
             </SwiperSlide>
           ))}
         </Swiper>
 
-        <div className={`${styles.navButton} ${styles.navButtonPrev}`}></div>
-        <div className={`${styles.navButton} ${styles.navButtonNext}`}></div>
+        <div className={`${styles.navButton} ${styles.navButtonPrev} ${prevButtonClass}`}></div>
+        <div className={`${styles.navButton} ${styles.navButtonNext} ${nextButtonClass}`}></div>
       </div>
 
       <div className={styles.widgetFooter}>
diff --git a/Elecciones-Web/frontend/src/features/legislativas/nacionales/HomeCarouselWidget.tsx b/Elecciones-Web/frontend/src/features/legislativas/nacionales/HomeCarouselWidget.tsx
index 4d9967d..66b1722 100644
--- a/Elecciones-Web/frontend/src/features/legislativas/nacionales/HomeCarouselWidget.tsx
+++ b/Elecciones-Web/frontend/src/features/legislativas/nacionales/HomeCarouselWidget.tsx
@@ -1,4 +1,5 @@
 // src/features/legislativas/nacionales/HomeCarouselWidget.tsx
+
 import { useQuery } from '@tanstack/react-query';
 import { getHomeResumen } from '../../../apiService';
 import { ImageWithFallback } from '../../../components/common/ImageWithFallback';
@@ -21,7 +22,6 @@ interface Props {
 
 const formatPercent = (num: number | null | undefined) => `${(num || 0).toFixed(2).replace('.', ',')}%`;
 const formatNumber = (num: number) => num.toLocaleString('es-AR');
-
 const formatDateTime = (dateString: string | undefined | null) => {
     if (!dateString) return '...';
     try {
@@ -41,6 +41,10 @@ const formatDateTime = (dateString: string | undefined | null) => {
 };
 
 export const HomeCarouselWidget = ({ eleccionId, distritoId, categoriaId, titulo }: Props) => {
+    const uniqueId = `swiper-${Math.random().toString(36).substring(2, 9)}`;
+    const prevButtonClass = `prev-${uniqueId}`;
+    const nextButtonClass = `next-${uniqueId}`;
+
     const { data, isLoading, error } = useQuery({
         queryKey: ['homeResumen', eleccionId, distritoId, categoriaId],
         queryFn: () => getHomeResumen(eleccionId, distritoId, categoriaId),
@@ -81,8 +85,8 @@ export const HomeCarouselWidget = ({ eleccionId, distritoId, categoriaId, titulo
                     spaceBetween={16}
                     slidesPerView={1.3}
                     navigation={{
-                        prevEl: `.${styles.navButtonPrev}`,
-                        nextEl: `.${styles.navButtonNext}`,
+                        prevEl: `.${prevButtonClass}`,
+                        nextEl: `.${nextButtonClass}`,
                     }}
                     breakpoints={{
                         320: { slidesPerView: 1.25, spaceBetween: 10 },
@@ -95,7 +99,6 @@ export const HomeCarouselWidget = ({ eleccionId, distritoId, categoriaId, titulo
                     {data.resultados.map(candidato => (
                         <SwiperSlide key={candidato.agrupacionId}>
                             <div className={styles.candidateCard} style={{ '--candidate-color': candidato.color || '#ccc' } as React.CSSProperties}>
-
                                 <div className={styles.candidatePhotoWrapper}>
                                     <ImageWithFallback
                                         src={candidato.fotoUrl ?? undefined}
@@ -104,22 +107,15 @@ export const HomeCarouselWidget = ({ eleccionId, distritoId, categoriaId, titulo
                                         className={styles.candidatePhoto}
                                     />
                                 </div>
-
                                 <div className={styles.candidateDetails}>
                                     <div className={styles.candidateInfo}>
                                         {candidato.nombreCandidato ? (
                                             <>
-                                                <span className={styles.candidateName}>
-                                                    {candidato.nombreCandidato}
-                                                </span>
-                                                <span className={styles.partyName}>
-                                                    {candidato.nombreCortoAgrupacion || candidato.nombreAgrupacion}
-                                                </span>
+                                                <span className={styles.candidateName}>{candidato.nombreCandidato}</span>
+                                                <span className={styles.partyName}>{candidato.nombreCortoAgrupacion || candidato.nombreAgrupacion}</span>
                                             </>
                                         ) : (
-                                            <span className={styles.candidateName}>
-                                                {candidato.nombreCortoAgrupacion || candidato.nombreAgrupacion}
-                                            </span>
+                                            <span className={styles.candidateName}>{candidato.nombreCortoAgrupacion || candidato.nombreAgrupacion}</span>
                                         )}
                                     </div>
                                     <div className={styles.candidateResults}>
@@ -127,14 +123,13 @@ export const HomeCarouselWidget = ({ eleccionId, distritoId, categoriaId, titulo
                                         <span className={styles.votes}>{formatNumber(candidato.votos)} votos</span>
                                     </div>
                                 </div>
-
                             </div>
                         </SwiperSlide>
                     ))}
                 </Swiper>
 
-                <div className={`${styles.navButton} ${styles.navButtonPrev}`}></div>
-                <div className={`${styles.navButton} ${styles.navButtonNext}`}></div>
+                <div className={`${styles.navButton} ${styles.navButtonPrev} ${prevButtonClass}`}></div>
+                <div className={`${styles.navButton} ${styles.navButtonNext} ${nextButtonClass}`}></div>
             </div>
 
             <div className={styles.widgetFooter}>
diff --git a/Elecciones-Web/src/Elecciones.Api/obj/Debug/net9.0/Elecciones.Api.AssemblyInfo.cs b/Elecciones-Web/src/Elecciones.Api/obj/Debug/net9.0/Elecciones.Api.AssemblyInfo.cs
index 487fd3b..4e62aac 100644
--- a/Elecciones-Web/src/Elecciones.Api/obj/Debug/net9.0/Elecciones.Api.AssemblyInfo.cs
+++ b/Elecciones-Web/src/Elecciones.Api/obj/Debug/net9.0/Elecciones.Api.AssemblyInfo.cs
@@ -14,7 +14,7 @@ using System.Reflection;
 [assembly: System.Reflection.AssemblyCompanyAttribute("Elecciones.Api")]
 [assembly: System.Reflection.AssemblyConfigurationAttribute("Debug")]
 [assembly: System.Reflection.AssemblyFileVersionAttribute("1.0.0.0")]
-[assembly: System.Reflection.AssemblyInformationalVersionAttribute("1.0.0+4bc257df43f5813ec432b89b47fa078c1cfa1fc8")]
+[assembly: System.Reflection.AssemblyInformationalVersionAttribute("1.0.0+ae846f2d4834f3cd03079e91a8225e9f74cd073b")]
 [assembly: System.Reflection.AssemblyProductAttribute("Elecciones.Api")]
 [assembly: System.Reflection.AssemblyTitleAttribute("Elecciones.Api")]
 [assembly: System.Reflection.AssemblyVersionAttribute("1.0.0.0")]