From e29eacf5c7c2635903b677fd0850be300ae11559 Mon Sep 17 00:00:00 2001
From: marcoitaloesp-ai <marcoitaloesp@icloud.com>
Date: Tue, 16 Dec 2025 17:03:14 +0000
Subject: [PATCH] =?UTF-8?q?v1.43.13=20-=20Padroniza=C3=A7=C3=A3o=20visual?=
 =?UTF-8?q?=20de=20badges=20em=20relat=C3=B3rios?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                   | 18 +++++++++++++++
 VERSION                        |  2 +-
 frontend/src/pages/Reports.jsx | 40 +++++++++++++++++++++++-----------
 3 files changed, 46 insertions(+), 14 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5d78283..5db8a51 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,24 @@ O formato segue [Keep a Changelog](https://keepachangelog.com/pt-BR/).
 Este projeto adota [Versionamento Semântico](https://semver.org/pt-BR/).
 
 
+## [1.43.13] - 2025-12-16
+
+### Changed
+- **Relatórios - Padronização de Badges**
+  - **Categorias**: Agora usam cores personalizadas (category_color) ao invés de `bg-primary`
+    * Mostram ícone da categoria quando disponível
+    * Fallback para `bg-secondary` quando sem categoria
+    * Aplicado em: Maiores Gastos, Transações Futuras
+  - **Tamanhos de fonte**: Padronizados em `0.75rem` para todos os badges
+    * Porcentagens, contadores, dias, frequências, tipos
+  - **Tipo de Passivo**: Alterado de `bg-secondary` para `bg-info` (azul)
+  - **Frequência (Recorrentes)**: Alterado de `bg-secondary` para `bg-primary` (destaque)
+  - **Consistência visual**: Todos os badges agora seguem o mesmo padrão de estilo
+
+### Fixed
+- Cards mobile de Maiores Gastos agora mostram cor e ícone corretos da categoria
+- Transações Futuras mostram fallback quando sem categoria
+
 ## [1.43.12] - 2025-12-16
 
 ### Fixed
diff --git a/VERSION b/VERSION
index 3b1654c..42feb01 100644
--- a/VERSION
+++ b/VERSION
@@ -1 +1 @@
-1.43.12
+1.43.13
diff --git a/frontend/src/pages/Reports.jsx b/frontend/src/pages/Reports.jsx
index b77df65..d760a14 100644
--- a/frontend/src/pages/Reports.jsx
+++ b/frontend/src/pages/Reports.jsx
@@ -566,7 +566,7 @@ const Reports = () => {
                         </td>
                         <td className="text-end">{currency(cat.total, categoryData.currency)}</td>
                         <td className="text-end">
-                          <span className="badge bg-secondary">{cat.percentage}%</span>
+                          <span className="badge bg-secondary" style={{ fontSize: '0.75rem' }}>{cat.percentage}%</span>
                         </td>
                       </tr>
                     ))}
@@ -1236,7 +1236,14 @@ const Reports = () => {
                               </div>
                             </td>
                             <td>
-                              <span className="badge bg-primary">{item.category || '-'}</span>
+                              {item.category ? (
+                                <span className="badge" style={{ background: item.category_color || '#3b82f6' }}>
+                                  {item.category_icon && <i className={`bi ${item.category_icon} me-1`}></i>}
+                                  {item.category}
+                                </span>
+                              ) : (
+                                <span className="badge bg-secondary">-</span>
+                              )}
                             </td>
                             <td className="text-center text-slate-400 small">{item.date}</td>
                             <td className="text-end">
@@ -1299,9 +1306,14 @@ const Reports = () => {
 
                           {/* Footer: Categoria e Data */}
                           <div className="d-flex justify-content-between align-items-center">
-                            <span className="badge bg-primary" style={{ fontSize: '0.7rem' }}>
-                              {item.category || '-'}
-                            </span>
+                            {item.category ? (
+                              <span className="badge" style={{ fontSize: '0.7rem', background: item.category_color || '#3b82f6' }}>
+                                {item.category_icon && <i className={`bi ${item.category_icon} me-1`}></i>}
+                                {item.category}
+                              </span>
+                            ) : (
+                              <span className="badge bg-secondary" style={{ fontSize: '0.7rem' }}>-</span>
+                            )}
                             <small className="text-slate-400" style={{ fontSize: '0.7rem' }}>
                               {item.date}
                             </small>
@@ -1489,7 +1501,7 @@ const Reports = () => {
                         <i className={`bi bi-calendar3 me-2 ${d.day_num === 1 || d.day_num === 7 ? 'text-warning' : 'text-primary'}`}></i>
                         {t(`reports.dayOfWeek.${d.day_key}`)}
                       </td>
-                      <td className="text-center"><span className="badge bg-secondary">{d.count}</span></td>
+                      <td className="text-center"><span className="badge bg-secondary" style={{ fontSize: '0.75rem' }}>{d.count}</span></td>
                       <td className="text-end text-danger">{currency(d.total, dayOfWeekData.currency)}</td>
                       <td className="text-end text-slate-400">{currency(d.average, dayOfWeekData.currency)}</td>
                     </tr>
@@ -1806,7 +1818,7 @@ const Reports = () => {
                             </span>
                           )}
                         </td>
-                        <td><span className="badge bg-secondary">{t.frequency}</span></td>
+                        <td><span className="badge bg-primary" style={{ fontSize: '0.75rem' }}>{t.frequency}</span></td>
                         <td className="text-slate-400">{t.next_date}</td>
                         <td className={`text-end fw-bold ${t.type === 'credit' ? 'text-success' : 'text-danger'}`}>
                           {t.type === 'credit' ? '+' : '-'}{currency(t.amount, t.currency)}
@@ -1871,10 +1883,10 @@ const Reports = () => {
                 <div className="d-flex justify-content-between align-items-start mb-3">
                   <div>
                     <h6 className="text-white mb-1">{liability.name}</h6>
-                    <span className="badge bg-secondary">{liability.type}</span>
+                    <span className="badge bg-info" style={{ fontSize: '0.75rem' }}>{liability.type}</span>
                   </div>
                   {liability.overdue_installments > 0 && (
-                    <span className="badge bg-danger">
+                    <span className="badge bg-danger" style={{ fontSize: '0.75rem' }}>
                       {liability.overdue_installments} {t('reports.overdueInstallments')}
                     </span>
                   )}
@@ -1997,16 +2009,18 @@ const Reports = () => {
                     {data.map(tx => (
                       <tr key={tx.id}>
                         <td>
-                          <span className="badge bg-primary">{tx.days_until}d</span>
+                          <span className="badge bg-primary" style={{ fontSize: '0.75rem' }}>{tx.days_until}d</span>
                           <span className="text-slate-400 ms-2">{tx.date}</span>
                         </td>
                         <td>{tx.description}</td>
                         <td>
-                          {tx.category && (
-                            <span className="badge bg-secondary">
+                          {tx.category ? (
+                            <span className="badge" style={{ background: tx.category_color || '#6b7280' }}>
                               <i className={`bi ${tx.category_icon || 'bi-tag'} me-1`}></i>
                               {tx.category}
                             </span>
+                          ) : (
+                            <span className="badge bg-secondary">-</span>
                           )}
                         </td>
                         <td className="text-slate-400">{tx.account}</td>
@@ -2086,7 +2100,7 @@ const Reports = () => {
                           <td>{item.description}</td>
                           <td className="text-slate-400">{item.due_date}</td>
                           <td>
-                            <span className="badge bg-danger">{item.days_overdue} {t('common.days')}</span>
+                            <span className="badge bg-danger" style={{ fontSize: '0.75rem' }}>{item.days_overdue} {t('common.days')}</span>
                           </td>
                           <td className="text-end text-danger fw-bold">
                             {currency(item.amount, item.currency)}