From 002103e6762e334d3865f6b3981c6f3ef2e141bf Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Tue, 20 May 2025 14:35:43 +0000
Subject: [PATCH] Refactor: Improve chart visuals

Improve the visual appearance of the pie chart and the "Receitas vs Despesas" chart, aiming for a more modern look, without affecting other functionalities.
---
 src/components/dashboard/CategoryChart.tsx |  53 +++++++----
 src/components/dashboard/MonthlyChart.tsx  | 100 ++++++++++++++++++---
 2 files changed, 124 insertions(+), 29 deletions(-)

diff --git a/src/components/dashboard/CategoryChart.tsx b/src/components/dashboard/CategoryChart.tsx
index 99239b6..d5c3dac 100644
--- a/src/components/dashboard/CategoryChart.tsx
+++ b/src/components/dashboard/CategoryChart.tsx
@@ -1,7 +1,7 @@
 
 import React from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip, Label } from 'recharts';
+import { PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip } from 'recharts';
 import { CategorySummary } from '@/types/financialTypes';
 
 interface CategoryChartProps {
@@ -13,6 +13,9 @@ const CategoryChart: React.FC<CategoryChartProps> = ({ categories, isLoading = f
   // Filter out any categories with zero value to prevent rendering issues
   const validCategories = categories.filter(cat => cat.valor > 0);
   
+  // Calcular o valor total para exibir no centro do gráfico
+  const totalValue = validCategories.reduce((sum, cat) => sum + cat.valor, 0);
+  
   const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent, index, name }: any) => {
     if (percent < 0.05) return null; // Não mostrar texto para fatias muito pequenas
     
@@ -27,7 +30,7 @@ const CategoryChart: React.FC<CategoryChartProps> = ({ categories, isLoading = f
         fill="#fff" 
         textAnchor={x > cx ? 'start' : 'end'}
         dominantBaseline="central"
-        className="text-xs font-medium"
+        className="text-xs font-bold"
       >
         {`${(percent * 100).toFixed(0)}%`}
       </text>
@@ -45,14 +48,14 @@ const CategoryChart: React.FC<CategoryChartProps> = ({ categories, isLoading = f
     const { payload } = props;
     
     return (
-      <div className="grid grid-cols-2 gap-x-4 gap-y-1 mt-2 text-xs">
+      <div className="grid grid-cols-2 gap-x-4 gap-y-2 mt-3 text-xs">
         {payload.map((entry: any, index: number) => (
           <div key={`item-${index}`} className="flex items-center">
             <div
-              className="w-3 h-3 mr-2"
+              className="w-3 h-3 mr-2 rounded-sm"
               style={{ backgroundColor: entry.color }}
             />
-            <span className="truncate">{entry.value}</span>
+            <span className="truncate font-medium">{entry.value}</span>
           </div>
         ))}
       </div>
@@ -62,10 +65,10 @@ const CategoryChart: React.FC<CategoryChartProps> = ({ categories, isLoading = f
   const renderCustomTooltip = ({ active, payload }: any) => {
     if (active && payload && payload.length) {
       return (
-        <div className="bg-background border border-border p-2 rounded shadow-lg">
+        <div className="bg-background border border-border p-2 rounded-lg shadow-lg">
           <p className="font-medium">{payload[0].name}</p>
-          <p>{formatCurrency(payload[0].value)}</p>
-          <p>{`${(payload[0].payload.percentage * 100).toFixed(1)}%`}</p>
+          <p className="font-bold">{formatCurrency(payload[0].value)}</p>
+          <p className="text-sm">{`${(payload[0].payload.percentage * 100).toFixed(1)}%`}</p>
         </div>
       );
     }
@@ -74,9 +77,11 @@ const CategoryChart: React.FC<CategoryChartProps> = ({ categories, isLoading = f
   };
 
   return (
-    <Card className="dashboard-card h-full">
-      <CardHeader>
-        <CardTitle className="text-lg">Gastos por Categoria</CardTitle>
+    <Card className="dashboard-card h-full shadow-md">
+      <CardHeader className="pb-2 bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900">
+        <CardTitle className="text-lg flex items-center">
+          Gastos por Categoria
+        </CardTitle>
       </CardHeader>
       <CardContent>
         {isLoading ? (
@@ -89,28 +94,44 @@ const CategoryChart: React.FC<CategoryChartProps> = ({ categories, isLoading = f
             <p className="text-sm mt-2">Verifique se existem transações do tipo 'despesa' cadastradas</p>
           </div>
         ) : (
-          <div className="h-[250px]">
+          <div className="h-[300px] relative">
             <ResponsiveContainer width="100%" height="100%">
               <PieChart>
                 <Pie
                   data={validCategories}
                   cx="50%"
-                  cy="50%"
+                  cy="45%"
                   labelLine={false}
                   label={renderCustomizedLabel}
-                  outerRadius={80}
+                  outerRadius={100}
+                  innerRadius={60}
                   fill="#8884d8"
                   dataKey="valor"
                   nameKey="categoria"
+                  paddingAngle={1}
+                  strokeWidth={1}
+                  stroke="#fff"
                 >
                   {validCategories.map((entry, index) => (
-                    <Cell key={`cell-${index}`} fill={entry.color} />
+                    <Cell 
+                      key={`cell-${index}`} 
+                      fill={entry.color} 
+                      style={{ filter: 'drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.1))' }}
+                    />
                   ))}
                 </Pie>
                 <Tooltip content={renderCustomTooltip} />
-                <Legend content={renderCustomLegend} />
+                <Legend content={renderCustomLegend} layout="horizontal" verticalAlign="bottom" />
               </PieChart>
             </ResponsiveContainer>
+            
+            {/* Valor total no centro do gráfico */}
+            <div 
+              className="absolute top-[45%] left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center pointer-events-none"
+              style={{ width: '120px' }}
+            >
+              <div className="font-bold text-lg">{formatCurrency(totalValue)}</div>
+            </div>
           </div>
         )}
       </CardContent>
diff --git a/src/components/dashboard/MonthlyChart.tsx b/src/components/dashboard/MonthlyChart.tsx
index 87233e9..2e6f999 100644
--- a/src/components/dashboard/MonthlyChart.tsx
+++ b/src/components/dashboard/MonthlyChart.tsx
@@ -10,6 +10,8 @@ import {
   Tooltip,
   Legend,
   ResponsiveContainer,
+  Cell,
+  LabelList,
 } from 'recharts';
 import { MonthlyData } from '@/types/financialTypes';
 
@@ -27,10 +29,35 @@ const MonthlyChart: React.FC<MonthlyChartProps> = ({ data, isLoading = false })
       maximumFractionDigits: 0,
     }).format(value);
   };
+  
+  // Adicionar formatação condicional para os barras
+  const getBarColor = (dataPoint: MonthlyData) => {
+    return dataPoint.receitas > dataPoint.despesas ? '#10B981' : '#EF4444';
+  };
+  
+  const customTooltip = ({ active, payload, label }: any) => {
+    if (active && payload && payload.length) {
+      return (
+        <div className="bg-white p-3 border border-gray-200 rounded-md shadow-lg">
+          <p className="font-bold mb-1">{`Mês: ${label}`}</p>
+          <p className="text-green-600">
+            {`Receitas: ${formatCurrency(payload[0].value)}`}
+          </p>
+          <p className="text-red-600">
+            {`Despesas: ${formatCurrency(payload[1].value)}`}
+          </p>
+          <p className="text-gray-700 font-medium pt-1 border-t border-gray-200 mt-1">
+            {`Saldo: ${formatCurrency(payload[0].value - payload[1].value)}`}
+          </p>
+        </div>
+      );
+    }
+    return null;
+  };
 
   return (
-    <Card className="dashboard-card h-full">
-      <CardHeader>
+    <Card className="dashboard-card h-full shadow-md">
+      <CardHeader className="pb-2 bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900">
         <CardTitle className="text-lg">Receitas vs Despesas</CardTitle>
       </CardHeader>
       <CardContent>
@@ -43,35 +70,82 @@ const MonthlyChart: React.FC<MonthlyChartProps> = ({ data, isLoading = false })
             Sem dados disponíveis
           </div>
         ) : (
-          <div className="h-[250px]">
+          <div className="h-[300px]">
             <ResponsiveContainer width="100%" height="100%">
               <BarChart
                 data={data}
-                margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
+                margin={{ top: 20, right: 30, left: 20, bottom: 15 }}
+                barGap={0}
               >
-                <CartesianGrid strokeDasharray="3 3" vertical={false} />
-                <XAxis dataKey="month" />
+                <CartesianGrid strokeDasharray="3 3" vertical={false} opacity={0.4} />
+                <XAxis 
+                  dataKey="month" 
+                  axisLine={false}
+                  tickLine={false}
+                  tick={{ fontSize: 12, fontWeight: 500 }}
+                  dy={10}
+                />
                 <YAxis 
                   tickFormatter={formatCurrency}
+                  axisLine={false}
+                  tickLine={false}
+                  tick={{ fontSize: 12 }}
                   width={80}
                 />
                 <Tooltip 
-                  formatter={(value: number) => formatCurrency(value)}
-                  labelFormatter={(label) => `Mês: ${label}`}
+                  cursor={{ fill: 'rgba(0, 0, 0, 0.05)' }}
+                  content={customTooltip}
+                />
+                <Legend 
+                  verticalAlign="top"
+                  height={36}
+                  iconType="circle"
+                  iconSize={10}
                 />
-                <Legend />
                 <Bar 
                   name="Receitas" 
                   dataKey="receitas" 
-                  fill="#10B981" 
+                  fill="#10B981"
                   radius={[4, 4, 0, 0]}
-                />
+                  barSize={30}
+                  animationDuration={1000}
+                >
+                  {data.map((entry, index) => (
+                    <Cell 
+                      key={`cell-receitas-${index}`}
+                      fill="#10B981"
+                      style={{ filter: 'drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.1))' }}
+                    />
+                  ))}
+                  <LabelList 
+                    dataKey="receitas"
+                    position="top"
+                    formatter={formatCurrency}
+                    style={{ fontSize: 10, fontWeight: 600, fill: '#10B981' }}
+                  />
+                </Bar>
                 <Bar 
                   name="Despesas" 
                   dataKey="despesas" 
                   fill="#EF4444" 
-                  radius={[4, 4, 0, 0]}
-                />
+                  radius={[4, 4, 0, 0]} 
+                  barSize={30}
+                  animationDuration={1000}
+                >
+                  {data.map((entry, index) => (
+                    <Cell 
+                      key={`cell-despesas-${index}`}
+                      fill="#EF4444"
+                      style={{ filter: 'drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.1))' }}
+                    />
+                  ))}
+                  <LabelList 
+                    dataKey="despesas"
+                    position="top"
+                    formatter={formatCurrency}
+                    style={{ fontSize: 10, fontWeight: 600, fill: '#EF4444' }}
+                  />
+                </Bar>
               </BarChart>
             </ResponsiveContainer>
           </div>