From e9f4df02f73358a36eba1edea8d09a84498530d3 Mon Sep 17 00:00:00 2001
From: Emanuel Almeida <emanuel@descomplicar.pt>
Date: Sat, 7 Feb 2026 23:05:22 +0000
Subject: [PATCH] fix: remove pie chart, show expense list with total

- Remove PieChart (caused empty space above legend)
- Show clean category list with colored dots directly
- Add total sum row at bottom with separator line

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/pages/Financial.tsx | 36 +++++++-----------------------------
 1 file changed, 7 insertions(+), 29 deletions(-)

diff --git a/src/pages/Financial.tsx b/src/pages/Financial.tsx
index 0bbeea6..81ffc05 100644
--- a/src/pages/Financial.tsx
+++ b/src/pages/Financial.tsx
@@ -3,7 +3,6 @@ import { motion } from 'framer-motion'
 import { Link } from 'react-router-dom'
 import {
   BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend,
-  PieChart, Pie, Cell,
 } from 'recharts'
 import {
   Zap,
@@ -257,38 +256,13 @@ export default function Financial() {
                 </div>
               </motion.div>
 
-              {/* Pie Chart - Expense Distribution */}
+              {/* Expense Distribution */}
               <motion.div variants={itemVariants} className="glass-card p-6">
-                <h3 className="text-sm font-semibold text-white mb-4 uppercase tracking-wide flex items-center gap-2">
+                <h3 className="text-sm font-semibold text-white mb-5 uppercase tracking-wide flex items-center gap-2">
                   <Receipt className="w-4 h-4 text-brand-400" />
                   Despesas por Categoria
                 </h3>
-                <div className="h-[180px]">
-                  <ResponsiveContainer width="100%" height="100%">
-                    <PieChart>
-                      <Pie
-                        data={data.categorias.slice(0, 10)}
-                        cx="50%"
-                        cy="50%"
-                        innerRadius={40}
-                        outerRadius={75}
-                        dataKey="value"
-                        stroke="none"
-                      >
-                        {data.categorias.slice(0, 10).map((_, i) => (
-                          <Cell key={i} fill={PIE_COLORS[i % PIE_COLORS.length]} />
-                        ))}
-                      </Pie>
-                      <Tooltip
-                        formatter={(value: number | undefined) => formatEUR(value || 0)}
-                        contentStyle={{ background: '#18181b', border: '1px solid rgba(255,255,255,0.1)', borderRadius: 12, fontSize: 13 }}
-                        itemStyle={{ color: '#e4e4e7' }}
-                      />
-                    </PieChart>
-                  </ResponsiveContainer>
-                </div>
-                {/* Legend */}
-                <div className="space-y-2.5 mt-3">
+                <div className="space-y-3">
                   {data.categorias.slice(0, 10).map((cat, i) => (
                     <div key={i} className="flex items-center justify-between">
                       <div className="flex items-center gap-2.5 min-w-0">
@@ -299,6 +273,10 @@ export default function Financial() {
                     </div>
                   ))}
                 </div>
+                <div className="border-t border-white/10 mt-4 pt-3 flex items-center justify-between">
+                  <span className="text-sm font-semibold text-zinc-400">Total</span>
+                  <span className="text-sm font-bold text-white tabular-nums">{formatEUR(data.despesas_ano)}</span>
+                </div>
               </motion.div>
             </div>
           </motion.div>