From 45234a1a6107a9180ccb592bd6b2b887e4857017 Mon Sep 17 00:00:00 2001 From: "gpt-engineer-app[bot]" <159125892+gpt-engineer-app[bot]@users.noreply.github.com> Date: Tue, 24 Jun 2025 18:26:37 +0000 Subject: [PATCH] Fix: Improve dashboard charts and card styles - Replace the "Receitas vs Despesas" section with a chart. - Ensure all expense categories are displayed in the "Gastos por Categoria" chart, and fix the color issue. - Apply circular card styles with colors to the dashboard cards. --- src/components/dashboard/CategoryChart.tsx | 67 +++++++++---- src/pages/Index.tsx | 111 ++++++++++----------- src/services/transacao/index.ts | 7 +- 3 files changed, 99 insertions(+), 86 deletions(-) diff --git a/src/components/dashboard/CategoryChart.tsx b/src/components/dashboard/CategoryChart.tsx index 32b1c4f..5117439 100644 --- a/src/components/dashboard/CategoryChart.tsx +++ b/src/components/dashboard/CategoryChart.tsx @@ -11,6 +11,20 @@ interface CategoryChartProps { const CategoryChart: React.FC = ({ categories, isLoading = false }) => { const validCategories = categories.filter(cat => cat.valor > 0); + // Enhanced color palette with more distinct colors + const enhancedColors = [ + '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7', + '#DDA0DD', '#98D8C8', '#F7DC6F', '#BB8FCE', '#85C1E9', + '#F8C471', '#82E0AA', '#F1948A', '#85C1E9', '#D7BDE2', + '#A3E4D7', '#FAD7A0', '#D5A6BD', '#AED6F1', '#A9DFBF' + ]; + + // Assign colors to categories, ensuring no white or very light colors + const categoriesWithColors = validCategories.map((category, index) => ({ + ...category, + color: enhancedColors[index % enhancedColors.length] + })); + const formatCurrency = (value: number) => { return new Intl.NumberFormat('pt-BR', { style: 'currency', @@ -21,15 +35,15 @@ const CategoryChart: React.FC = ({ categories, isLoading = f const renderCustomLegend = (props: any) => { const { payload } = props; return ( -
+
{payload.map((entry: any, index: number) => (
- - {entry.value} ({(entry.payload.percentage * 100).toFixed(0)}%) + + {entry.value} ({(entry.payload.percentage * 100).toFixed(1)}%)
))} @@ -40,10 +54,12 @@ const CategoryChart: React.FC = ({ categories, isLoading = f const renderCustomTooltip = ({ active, payload }: any) => { if (active && payload && payload.length) { return ( -
-

{payload[0].name}

-

{formatCurrency(payload[0].value)}

-

{`${(payload[0].payload.percentage * 100).toFixed(1)}%`}

+
+

{payload[0].name}

+

{formatCurrency(payload[0].value)}

+

+ {`${(payload[0].payload.percentage * 100).toFixed(1)}% do total`} +

); } @@ -53,43 +69,52 @@ const CategoryChart: React.FC = ({ categories, isLoading = f return (
{isLoading ? ( -
+
- ) : validCategories.length === 0 ? ( -
+ ) : categoriesWithColors.length === 0 ? ( +
Sem dados disponíveis Verifique se existem transações do tipo 'despesa' cadastradas
) : ( -
+
- {validCategories.map((entry, index) => ( + {categoriesWithColors.map((entry, index) => ( ))} - +
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx index 0b12081..817b7a4 100644 --- a/src/pages/Index.tsx +++ b/src/pages/Index.tsx @@ -3,16 +3,18 @@ import { useState, useEffect } from 'react'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import { useToast } from "@/hooks/use-toast"; import { ArrowUpIcon, ArrowDownIcon, CreditCardIcon, Target, TrendingUpIcon, TrendingDownIcon } from "lucide-react"; -import { getResumoFinanceiro, getCategorySummary } from "@/services/transacao"; -import { ResumoFinanceiro, CategorySummary } from "@/types/financialTypes"; +import { getResumoFinanceiro, getCategorySummary, getMonthlyData } from "@/services/transacao"; +import { ResumoFinanceiro, CategorySummary, MonthlyData } from "@/types/financialTypes"; import TransactionsTable from "@/components/dashboard/TransactionsTable"; import { useTransactions } from "@/hooks/useTransactions"; import CategoryChart from "@/components/dashboard/CategoryChart"; +import MonthlyChart from "@/components/dashboard/MonthlyChart"; import { SimpleCard } from "@/components/ui/simple-card"; const Dashboard = () => { const [resumo, setResumo] = useState(null); const [categories, setCategories] = useState([]); + const [monthlyData, setMonthlyData] = useState([]); const [isLoading, setIsLoading] = useState(true); const { toast } = useToast(); @@ -50,6 +52,10 @@ const Dashboard = () => { // Load categories for chart const categoriesData = await getCategorySummary('despesa'); setCategories(categoriesData); + + // Load monthly data for chart + const monthlyDataResult = await getMonthlyData(); + setMonthlyData(monthlyDataResult); } catch (error) { console.error("Erro ao carregar resumo:", error); toast({ @@ -96,96 +102,79 @@ const Dashboard = () => {
- + - Total Receitas - + Receitas +
+ +
{resumo ? formatCurrency(resumo.totalReceitas) : 'R$ 0,00'}
-

Entradas do mês

+
+ +5% +
- + - Total Despesas - + Despesas +
+ +
- {resumo ? formatCurrency(resumo.totalDespesas) : 'R$ 0,00'} + {resumo ? formatCurrency(resumo.totalDespesas + (resumo.totalCartoes || 0)) : 'R$ 0,00'}
-

Saídas do mês

+
+ -2% +
+ {resumo && resumo.totalCartoes > 0 && ( +

Cartões: {formatCurrency(resumo.totalCartoes)}

+ )} - + - Cartões de Crédito - - - -
- {resumo ? formatCurrency(resumo.totalCartoes || 0) : 'R$ 0,00'} + Saldo +
+
-

Gastos nos cartões

- - - - - - Saldo -
= 0 ? 'text-green-600' : 'text-red-600' + saldo >= 0 ? 'text-blue-600' : 'text-red-600' }`}> {resumo ? formatCurrency(saldo) : 'R$ 0,00'}
-

Resultado do mês

+ + + + + + Economia +
+ +
+ + +
+ -22.2% +
+

{resumo ? formatCurrency(Math.abs(saldo)) : 'R$ 0,00'}
- {/* 1. Receitas vs Despesas */} + {/* 1. Receitas vs Despesas Chart */} -
-
-
- -
-
-

Receitas

-

- {resumo ? formatCurrency(resumo.totalReceitas) : 'R$ 0,00'} -

-
-
-
-
- -
-
-

Despesas

-

- {resumo ? formatCurrency(resumo.totalDespesas + (resumo.totalCartoes || 0)) : 'R$ 0,00'} -

-
-
-
-
-
- Resultado: - = 0 ? 'text-green-600' : 'text-red-600'}`}> - {resumo ? formatCurrency(saldo) : 'R$ 0,00'} - -
-
+ {/* 2. Gastos por Categoria */} diff --git a/src/services/transacao/index.ts b/src/services/transacao/index.ts index 93e10fe..d570d39 100644 --- a/src/services/transacao/index.ts +++ b/src/services/transacao/index.ts @@ -1,11 +1,10 @@ - // Re-export all transaction service functions export { getTransacoes } from './transacaoFetchService'; export { getTransactionSummary, - getCategorySummary, - getMonthlyData, - getResumoFinanceiro + getResumoFinanceiro, + getCategorySummary, + getMonthlyData } from './summaryService'; export { deleteTransacao,