marco/webmoney
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1.43.13 - Padronização visual de badges em relatórios

Browse Source
This commit is contained in:
marcoitaloesp-ai 2025-12-16 17:03:14 +00:00 committed by GitHub
parent 891df889ec
commit e29eacf5c7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 46 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
CHANGELOG.md
View File

@ -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/). 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 ## [1.43.12] - 2025-12-16
### Fixed ### Fixed

2
VERSION
View File

@ -1 +1 @@
1.43.12 1.43.13

38
frontend/src/pages/Reports.jsx
View File

@ -566,7 +566,7 @@ const Reports = () => {
</td> </td>
<td className="text-end">{currency(cat.total, categoryData.currency)}</td> <td className="text-end">{currency(cat.total, categoryData.currency)}</td>
<td className="text-end"> <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> </td>
</tr> </tr>
))} ))}
@ -1236,7 +1236,14 @@ const Reports = () => {
</div> </div>
</td> </td>
<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>
<td className="text-center text-slate-400 small">{item.date}</td> <td className="text-center text-slate-400 small">{item.date}</td>
<td className="text-end"> <td className="text-end">
@ -1299,9 +1306,14 @@ const Reports = () => {
{/* Footer: Categoria e Data */} {/* Footer: Categoria e Data */}
<div className="d-flex justify-content-between align-items-center"> <div className="d-flex justify-content-between align-items-center">
<span className="badge bg-primary" style={{ fontSize: '0.7rem' }}> {item.category ? (
{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>
) : (
<span className="badge bg-secondary" style={{ fontSize: '0.7rem' }}>-</span>
)}
<small className="text-slate-400" style={{ fontSize: '0.7rem' }}> <small className="text-slate-400" style={{ fontSize: '0.7rem' }}>
{item.date} {item.date}
</small> </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> <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}`)} {t(`reports.dayOfWeek.${d.day_key}`)}
</td> </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-danger">{currency(d.total, dayOfWeekData.currency)}</td>
<td className="text-end text-slate-400">{currency(d.average, dayOfWeekData.currency)}</td> <td className="text-end text-slate-400">{currency(d.average, dayOfWeekData.currency)}</td>
</tr> </tr>
@ -1806,7 +1818,7 @@ const Reports = () => {
</span> </span>
)} )}
</td> </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-slate-400">{t.next_date}</td>
<td className={`text-end fw-bold ${t.type === 'credit' ? 'text-success' : 'text-danger'}`}> <td className={`text-end fw-bold ${t.type === 'credit' ? 'text-success' : 'text-danger'}`}>
{t.type === 'credit' ? '+' : '-'}{currency(t.amount, t.currency)} {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 className="d-flex justify-content-between align-items-start mb-3">
<div> <div>
<h6 className="text-white mb-1">{liability.name}</h6> <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> </div>
{liability.overdue_installments > 0 && ( {liability.overdue_installments > 0 && (
<span className="badge bg-danger"> <span className="badge bg-danger" style={{ fontSize: '0.75rem' }}>
{liability.overdue_installments} {t('reports.overdueInstallments')} {liability.overdue_installments} {t('reports.overdueInstallments')}
</span> </span>
)} )}
@ -1997,16 +2009,18 @@ const Reports = () => {
{data.map(tx => ( {data.map(tx => (
<tr key={tx.id}> <tr key={tx.id}>
<td> <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> <span className="text-slate-400 ms-2">{tx.date}</span>
</td> </td>
<td>{tx.description}</td> <td>{tx.description}</td>
<td> <td>
{tx.category && ( {tx.category ? (
<span className="badge bg-secondary"> <span className="badge" style={{ background: tx.category_color || '#6b7280' }}>
<i className={`bi ${tx.category_icon || 'bi-tag'} me-1`}></i> <i className={`bi ${tx.category_icon || 'bi-tag'} me-1`}></i>
{tx.category} {tx.category}
</span> </span>
) : (
<span className="badge bg-secondary">-</span>
)} )}
</td> </td>
<td className="text-slate-400">{tx.account}</td> <td className="text-slate-400">{tx.account}</td>
@ -2086,7 +2100,7 @@ const Reports = () => {
<td>{item.description}</td> <td>{item.description}</td>
<td className="text-slate-400">{item.due_date}</td> <td className="text-slate-400">{item.due_date}</td>
<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>
<td className="text-end text-danger fw-bold"> <td className="text-end text-danger fw-bold">
{currency(item.amount, item.currency)} {currency(item.amount, item.currency)}