From c01bbb7e0536a3a49276fef5a04d8c9dbc939bbc Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 28 Feb 2026 16:42:18 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Improve=20My=20Contri?=
 =?UTF-8?q?butions=20empty=20state=20and=20loading=20feedback?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added a descriptive empty state card with a "Nueva Contribución" CTA when no contributions are found.
- Standardized loading feedback using the `enarm-loading-wrapper` utility class.
- Standardized badges using the `enarm-badge-pill` class for theme consistency.
- Improved accessibility by adding `aria-hidden="true"` to decorative icons.
- Refined conditional rendering to ensure error and empty states are mutually exclusive.
- Cleaned up unused imports and local development artifacts.

Co-authored-by: godie <227743+godie@users.noreply.github.com>
---
 src/components/PlayerCasoContainer.jsx    |  1 -
 src/pages/Player/MyContributions.jsx      | 89 ++++++++++++++---------
 src/pages/Player/MyContributions.test.jsx |  4 +-
 3 files changed, 57 insertions(+), 37 deletions(-)

diff --git a/src/components/PlayerCasoContainer.jsx b/src/components/PlayerCasoContainer.jsx
index 44ffcf7..e8d138c 100644
--- a/src/components/PlayerCasoContainer.jsx
+++ b/src/components/PlayerCasoContainer.jsx
@@ -5,7 +5,6 @@ import ExamService from "../services/ExamService";
 import { useHistory } from 'react-router-dom';
 import { alertError, alertSuccess } from "../services/AlertService";
 import CasoContext from "../context/CasoContext";
-import { CustomButton } from "./custom";
 import EnarmUtil from "../modules/EnarmUtil";
 import ContributionTypeSelector from "./ContributionTypeSelector";
 import ContributionsSummary from "./ContributionsSummary";
diff --git a/src/pages/Player/MyContributions.jsx b/src/pages/Player/MyContributions.jsx
index 84072c9..484ba83 100644
--- a/src/pages/Player/MyContributions.jsx
+++ b/src/pages/Player/MyContributions.jsx
@@ -1,15 +1,24 @@
 import { useState, useEffect, useMemo } from "react";
+import { useHistory } from "react-router-dom";
 import ExamService from "../../services/ExamService";
-import { CustomRow, CustomCol, CustomTable, CustomPreloader } from "../../components/custom";
+import {
+    CustomRow,
+    CustomCol,
+    CustomTable,
+    CustomPreloader,
+    CustomCard,
+    CustomButton
+} from "../../components/custom";
 import EnarmUtil from "../../modules/EnarmUtil";
 
 const STATUS_LABELS = {
-    pending: <span className="badge yellow darken-1 white-text" style={{ borderRadius: '4px', float: 'none', marginLeft: 0 }}>Pendiente</span>,
-    published: <span className="badge green darken-1 white-text" style={{ borderRadius: '4px', float: 'none', marginLeft: 0 }}>Publicado</span>,
-    rejected: <span className="badge red darken-1 white-text" style={{ borderRadius: '4px', float: 'none', marginLeft: 0 }}>Rechazado</span>,
+    pending: <span className="badge yellow darken-1 white-text enarm-badge-pill" style={{ float: 'none', marginLeft: 0 }}>Pendiente</span>,
+    published: <span className="badge green darken-1 white-text enarm-badge-pill" style={{ float: 'none', marginLeft: 0 }}>Publicado</span>,
+    rejected: <span className="badge red darken-1 white-text enarm-badge-pill" style={{ float: 'none', marginLeft: 0 }}>Rechazado</span>,
 };
 
 const MyContributions = () => {
+    const history = useHistory();
     const [contributions, setContributions] = useState({ clinical_cases: [], questions: [] });
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
@@ -55,8 +64,8 @@ const MyContributions = () => {
 
     if (loading) {
         return (
-            <div className="center-align" style={{ padding: '3rem' }}>
-                <CustomPreloader size="big" active />
+            <div className="center-align enarm-loading-wrapper">
+                <CustomPreloader size="big" active color="green" />
             </div>
         );
     }
@@ -70,51 +79,61 @@ const MyContributions = () => {
         <div className="container" style={{ marginTop: '2rem' }}>
             <h4 className="center grey-text text-darken-3">Mis Contribuciones</h4>
 
-            {error && (
+            {error ? (
                 <div className="card-panel yellow lighten-4 brown-text center-align">
-                    <i className="material-icons left">info_outline</i>
+                    <i className="material-icons left" aria-hidden="true">info_outline</i>
                     {error}
                 </div>
-            )}
-
-            <CustomRow>
-                <CustomCol s={12}>
-                    <CustomTable striped hoverable className="z-depth-1">
-                        <thead>
-                            <tr>
-                                <th>Tipo</th>
-                                <th>Nombre / Texto</th>
-                                <th>Especialidad</th>
-                                <th>Status</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {allContributions.length === 0 ? (
+            ) : allContributions.length === 0 ? (
+                <CustomRow>
+                    <CustomCol s={12} m={8} offset="m2">
+                        <CustomCard className="center-align enarm-card-rounded">
+                            <i className="material-icons enarm-empty-state-icon grey-text" aria-hidden="true" style={{ fontSize: '4rem', marginBottom: '1rem' }}>history_edu</i>
+                            <h5 className="grey-text text-darken-3">¿Aún no has contribuido?</h5>
+                            <p className="grey-text text-darken-1">Tus aportaciones ayudan a miles de médicos a prepararse para el ENARM. ¡Comienza hoy mismo!</p>
+                            <CustomButton
+                                className="green darken-1 enarm-mt-10"
+                                onClick={() => history.push('/contribuir')}
+                                icon="add_circle_outline"
+                                iconPosition="left"
+                            >
+                                Nueva Contribución
+                            </CustomButton>
+                        </CustomCard>
+                    </CustomCol>
+                </CustomRow>
+            ) : (
+                <CustomRow>
+                    <CustomCol s={12}>
+                        <CustomTable striped hoverable className="z-depth-1">
+                            <thead>
                                 <tr>
-                                    <td colSpan="4" className="center-align grey-text">
-                                        No has realizado ninguna contribución todavía.
-                                    </td>
+                                    <th>Tipo</th>
+                                    <th>Nombre / Texto</th>
+                                    <th>Especialidad</th>
+                                    <th>Status</th>
                                 </tr>
-                            ) : (
-                                allContributions.map((item, idx) => (
+                            </thead>
+                            <tbody>
+                                {allContributions.map((item, idx) => (
                                     <tr key={`${item.type}-${item.id || idx}`}>
                                         <td><strong>{item.type}</strong></td>
                                         <td className="truncate" style={{ maxWidth: '300px' }}>
                                             {item.display_name}
                                         </td>
                                         <td>
-                                            <span className="badge white border darken-1" style={{ float: 'none', marginLeft: 0 }}>
+                                            <span className="badge white border darken-1 enarm-badge-pill" style={{ float: 'none', marginLeft: 0 }}>
                                                 {especialidadesMap.get(item.category_id?.toString()) || 'N/A'}
                                             </span>
                                         </td>
                                         <td>{STATUS_LABELS[item.status] || item.status}</td>
                                     </tr>
-                                ))
-                            )}
-                        </tbody>
-                    </CustomTable>
-                </CustomCol>
-            </CustomRow>
+                                ))}
+                            </tbody>
+                        </CustomTable>
+                    </CustomCol>
+                </CustomRow>
+            )}
         </div>
     );
 };
diff --git a/src/pages/Player/MyContributions.test.jsx b/src/pages/Player/MyContributions.test.jsx
index 7adde24..25fd762 100644
--- a/src/pages/Player/MyContributions.test.jsx
+++ b/src/pages/Player/MyContributions.test.jsx
@@ -40,7 +40,9 @@ describe('MyContributions Component', () => {
         );
 
         await waitFor(() => {
-            expect(screen.getByText(/No has realizado ninguna contribución todavía/i)).toBeDefined();
+            expect(screen.getByText(/¿Aún no has contribuido\?/i)).toBeDefined();
+            expect(screen.getByText(/Tus aportaciones ayudan a miles de médicos/i)).toBeDefined();
+            expect(screen.getByText(/Nueva Contribución/i)).toBeDefined();
         });
     });