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

Refactor: Sum category values in Categorias page

Browse Source 
Use the 'categoria' column to sum values in the Categorias menu.
This commit is contained in:
gpt-engineer-app[bot] 2025-05-17 23:54:56 +00:00
parent 14f970f191
commit 254b231ec8
3 changed files with 87 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
src/pages/Categorias.tsx
View File

@ -6,6 +6,14 @@ import { getCategorySummary } from '@/services/transacaoService';
import { CategorySummary } from '@/types/financialTypes';
import { useToast } from "@/components/ui/use-toast";
import { Progress } from "@/components/ui/progress";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow
} from "@/components/ui/table";
const CategoriasPage = () => {
const [categories, setCategories] = useState<CategorySummary[]>([]);
@ -41,6 +49,8 @@ const CategoriasPage = () => {
currency: 'BRL',
}).format(value);
};
const totalGastos = categories.reduce((total, category) => total + category.valor, 0);
return (
<Layout>
@ -70,36 +80,78 @@ const CategoriasPage = () => {
</CardContent>
</Card>
) : (
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
{categories.map((category) => (
<Card key={category.categoria}>
<CardHeader className="pb-2">
<CardTitle className="text-base flex items-center">
<span
className="w-3 h-3 rounded-full mr-2"
style={{ backgroundColor: category.color }}
/>
{category.categoria}
</CardTitle>
</CardHeader>
<CardContent>
<div className="text-2xl font-bold mb-2">
{formatCurrency(category.valor)}
</div>
<div className="space-y-2">
<Progress
value={category.percentage * 100}
className="h-2"
indicatorColor={category.color}
/>
<div className="text-xs text-muted-foreground">
{(category.percentage * 100).toFixed(1)}% do total de despesas
<>
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
{categories.map((category) => (
<Card key={category.categoria}>
<CardHeader className="pb-2">
<CardTitle className="text-base flex items-center">
<span
className="w-3 h-3 rounded-full mr-2"
style={{ backgroundColor: category.color }}
/>
{category.categoria}
</CardTitle>
</CardHeader>
<CardContent>
<div className="text-2xl font-bold mb-2">
{formatCurrency(category.valor)}
</div>
</div>
</CardContent>
</Card>
))}
</div>
<div className="space-y-2">
<Progress
value={category.percentage * 100}
className="h-2"
style={{
backgroundColor: 'rgba(0,0,0,0.1)',
'--progress-background': category.color
} as React.CSSProperties}
/>
<div className="text-xs text-muted-foreground">
{(category.percentage * 100).toFixed(1)}% do total de despesas
</div>
</div>
</CardContent>
</Card>
))}
</div>
<Card className="mt-6">
<CardHeader>
<CardTitle>Resumo de Categorias</CardTitle>
</CardHeader>
<CardContent>
<Table>
<TableHeader>
<TableRow>
<TableHead>Categoria</TableHead>
<TableHead>Valor</TableHead>
<TableHead>Percentual</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{categories.map((category) => (
<TableRow key={category.categoria}>
<TableCell className="font-medium flex items-center">
<span
className="w-3 h-3 rounded-full mr-2"
style={{ backgroundColor: category.color }}
/>
{category.categoria}
</TableCell>
<TableCell>{formatCurrency(category.valor)}</TableCell>
<TableCell>{(category.percentage * 100).toFixed(1)}%</TableCell>
</TableRow>
))}
<TableRow className="bg-muted/50">
<TableCell className="font-bold">Total</TableCell>
<TableCell className="font-bold">{formatCurrency(totalGastos)}</TableCell>
<TableCell>100%</TableCell>
</TableRow>
</TableBody>
</Table>
</CardContent>
</Card>
</>
)}
</div>
</Layout>

9
src/services/transacaoService.ts
View File

@ -25,7 +25,7 @@ export async function getTransacoes(): Promise<Transaction[]> {
quando: item.quando || new Date().toISOString(),
detalhes: item.detalhes || '',
estabelecimento: item.estabelecimento || '',
tipo: item.tipo || 'saida',
tipo: item.tipo || 'despesa',
categoria: item.categoria || 'Outros'
}));
}
@ -79,10 +79,11 @@ export async function getCategorySummary() {
const categorias: Record<string, number> = {};
data.forEach(item => {
if (item.categoria && item.valor) {
if (!categorias[item.categoria]) {
categorias[item.categoria] = 0;
const categoriaKey = item.categoria || 'Outros';
if (!categorias[categoriaKey]) {
categorias[categoriaKey] = 0;
}
categorias[item.categoria] += Math.abs(item.valor);
categorias[categoriaKey] += Math.abs(item.valor);
}
});

2
src/types/financialTypes.ts
View File

@ -7,7 +7,7 @@ export interface Transaction {
quando: string;
detalhes: string;
estabelecimento: string;
tipo: 'entrada' | 'saida';
tipo: string;
categoria: string;
}