rodrigo/budget-view-finance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add economy value to dashboard

Browse Source 
Add economy value and percentage to the dashboard summary card.
This commit is contained in:
gpt-engineer-app[bot] 2025-05-19 13:04:03 +00:00
parent f3b00231de
commit db6468b4cc
2 changed files with 7 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/dashboard/SummaryCard.tsx
View File

@ -6,6 +6,7 @@ import { cn } from '@/lib/utils';
interface SummaryCardProps { interface SummaryCardProps {
title: string; title: string;
value: string; value: string;
secondaryValue?: string;
icon: React.ReactNode; icon: React.ReactNode;
trend?: number; trend?: number;
className?: string; className?: string;
@ -16,6 +17,7 @@ interface SummaryCardProps {
const SummaryCard: React.FC<SummaryCardProps> = ({ const SummaryCard: React.FC<SummaryCardProps> = ({
title, title,
value, value,
secondaryValue,
icon, icon,
trend, trend,
className, className,
@ -41,6 +43,9 @@ const SummaryCard: React.FC<SummaryCardProps> = ({
<div className="space-y-1"> <div className="space-y-1">
<p className="text-sm font-medium text-muted-foreground">{title}</p> <p className="text-sm font-medium text-muted-foreground">{title}</p>
<p className={cn("text-2xl font-bold", valueClass)}>{value}</p> <p className={cn("text-2xl font-bold", valueClass)}>{value}</p>
{secondaryValue && (
<p className="text-sm text-muted-foreground">{secondaryValue}</p>
)}
</div> </div>
</CardContent> </CardContent>
</Card> </Card>

3
src/pages/Index.tsx
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 { Wallet, ArrowUp, ArrowDown, PiggyBank } from 'lucide-react'; import { Wallet, ArrowUp, ArrowDown, PiggyBank, Percent, DollarSign } 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';
@ -120,6 +120,7 @@ const Dashboard = () => {
<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}%`}
secondaryValue={formatCurrency(totals.saldo)}
icon={<PiggyBank size={20} className="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"