Fix: Implement income/expense logic and icon activation

-   Adjusted the display of transaction values to be positive for income and negative for expenses, based on the category.
-   Activated the icons for "Receitas", "Despesas", "Saldo", and "Economia" in the dashboard.
This commit is contained in:
gpt-engineer-app[bot] 2025-05-17 23:49:54 +00:00
parent d7b24fa168
commit d7bf29cf60
4 changed files with 15 additions and 15 deletions

View File

@ -24,8 +24,8 @@ const SummaryCard: React.FC<SummaryCardProps> = ({
}) => { }) => {
return ( return (
<Card className={cn("dashboard-card animate-fade-in", className)}> <Card className={cn("dashboard-card animate-fade-in", className)}>
<CardContent className="p-0"> <CardContent className="flex flex-col gap-2 p-6">
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between">
<div className={cn("p-2 rounded-md", iconClass || "bg-primary/10")}> <div className={cn("p-2 rounded-md", iconClass || "bg-primary/10")}>
{icon} {icon}
</div> </div>

View File

@ -189,9 +189,9 @@ const TransactionsTable = ({
</TableCell> </TableCell>
<TableCell className={cn( <TableCell className={cn(
"text-right font-medium", "text-right font-medium",
transaction.tipo === 'entrada' ? "text-finance-green" : "text-finance-red" transaction.valor > 0 ? "text-finance-green" : "text-finance-red"
)}> )}>
{transaction.tipo === 'entrada' ? '+' : '-'}{formatCurrency(Math.abs(transaction.valor))} {formatCurrency(transaction.valor)}
</TableCell> </TableCell>
</TableRow> </TableRow>
)) ))

View File

@ -5,7 +5,7 @@ import SummaryCard from '@/components/dashboard/SummaryCard';
import TransactionsTable from '@/components/dashboard/TransactionsTable'; import TransactionsTable from '@/components/dashboard/TransactionsTable';
import CategoryChart from '@/components/dashboard/CategoryChart'; import CategoryChart from '@/components/dashboard/CategoryChart';
import MonthlyChart from '@/components/dashboard/MonthlyChart'; import MonthlyChart from '@/components/dashboard/MonthlyChart';
import { DollarSign, TrendingUp, TrendingDown, PiggyBank } from 'lucide-react'; import { Wallet, ArrowUp, ArrowDown, PiggyBank } from 'lucide-react';
import { Transaction, CategorySummary, MonthlyData } from '@/types/financialTypes'; import { Transaction, CategorySummary, MonthlyData } from '@/types/financialTypes';
import { useToast } from "@/components/ui/use-toast"; import { useToast } from "@/components/ui/use-toast";
import { getTransacoes, getTransactionSummary, getCategorySummary, getMonthlyData } from '@/services/transacaoService'; import { getTransacoes, getTransactionSummary, getCategorySummary, getMonthlyData } from '@/services/transacaoService';
@ -84,7 +84,7 @@ const Dashboard = () => {
<SummaryCard <SummaryCard
title="Receitas" title="Receitas"
value={formatCurrency(totals.receitas)} value={formatCurrency(totals.receitas)}
icon={<DollarSign className="h-4 w-4 text-finance-green" />} icon={<ArrowUp size={20} className="text-finance-green" />}
trend={5} trend={5}
iconClass="bg-finance-green/10" iconClass="bg-finance-green/10"
valueClass="text-finance-green" valueClass="text-finance-green"
@ -92,7 +92,7 @@ const Dashboard = () => {
<SummaryCard <SummaryCard
title="Despesas" title="Despesas"
value={formatCurrency(totals.despesas)} value={formatCurrency(totals.despesas)}
icon={<TrendingDown className="h-4 w-4 text-finance-red" />} icon={<ArrowDown size={20} className="text-finance-red" />}
trend={-2} trend={-2}
iconClass="bg-finance-red/10" iconClass="bg-finance-red/10"
valueClass="text-finance-red" valueClass="text-finance-red"
@ -100,14 +100,14 @@ const Dashboard = () => {
<SummaryCard <SummaryCard
title="Saldo" title="Saldo"
value={formatCurrency(totals.saldo)} value={formatCurrency(totals.saldo)}
icon={<TrendingUp className="h-4 w-4 text-finance-blue" />} icon={<Wallet size={20} className="text-finance-blue" />}
iconClass="bg-finance-blue/10" iconClass="bg-finance-blue/10"
valueClass="text-finance-blue" valueClass="text-finance-blue"
/> />
<SummaryCard <SummaryCard
title="Economia" title="Economia"
value={`${totals.receitas > 0 ? ((totals.saldo / totals.receitas) * 100).toFixed(1) : 0}%`} value={`${totals.receitas > 0 ? ((totals.saldo / totals.receitas) * 100).toFixed(1) : 0}%`}
icon={<PiggyBank className="h-4 w-4 text-finance-purple" />} icon={<PiggyBank size={20} className="text-finance-purple" />}
iconClass="bg-finance-purple/10" iconClass="bg-finance-purple/10"
valueClass="text-finance-purple" valueClass="text-finance-purple"
/> />

View File

@ -21,7 +21,7 @@ export async function getTransacoes(): Promise<Transaction[]> {
id: item.id.toString(), id: item.id.toString(),
user: item.user || '', user: item.user || '',
created_at: item.created_at, created_at: item.created_at,
valor: item.valor || 0, valor: item.tipo === 'entrada' ? Math.abs(item.valor || 0) : -Math.abs(item.valor || 0),
quando: item.quando || new Date().toISOString(), quando: item.quando || new Date().toISOString(),
detalhes: item.detalhes || '', detalhes: item.detalhes || '',
estabelecimento: item.estabelecimento || '', estabelecimento: item.estabelecimento || '',
@ -45,11 +45,11 @@ export async function getTransactionSummary() {
const totalReceitas = data const totalReceitas = data
.filter(item => item.tipo === 'entrada') .filter(item => item.tipo === 'entrada')
.reduce((sum, item) => sum + (item.valor || 0), 0); .reduce((sum, item) => sum + Math.abs(item.valor || 0), 0);
const totalDespesas = data const totalDespesas = data
.filter(item => item.tipo === 'saida') .filter(item => item.tipo === 'saida')
.reduce((sum, item) => sum + (item.valor || 0), 0); .reduce((sum, item) => sum + Math.abs(item.valor || 0), 0);
const resultado = { const resultado = {
receitas: totalReceitas, receitas: totalReceitas,
@ -82,7 +82,7 @@ export async function getCategorySummary() {
if (!categorias[item.categoria]) { if (!categorias[item.categoria]) {
categorias[item.categoria] = 0; categorias[item.categoria] = 0;
} }
categorias[item.categoria] += item.valor; categorias[item.categoria] += Math.abs(item.valor);
} }
}); });
@ -133,9 +133,9 @@ export async function getMonthlyData() {
const nomeMes = nomesMeses[mesIndex]; const nomeMes = nomesMeses[mesIndex];
if (item.tipo === 'entrada') { if (item.tipo === 'entrada') {
meses[nomeMes].receitas += item.valor; meses[nomeMes].receitas += Math.abs(item.valor);
} else { } else {
meses[nomeMes].despesas += item.valor; meses[nomeMes].despesas += Math.abs(item.valor);
} }
} }
}); });