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

Fix: Apply responsiveness adjustments

Browse Source 
The AI addressed responsiveness issues, ensuring the changes are reflected on the live URL.
This commit is contained in:
gpt-engineer-app[bot] 2025-05-18 02:27:44 +00:00
parent 0df3fc10ee
commit 98fb2f72ec
2 changed files with 20 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/dashboard/CategoryChart.tsx
View File

@ -10,6 +10,9 @@ interface CategoryChartProps {
} }
const CategoryChart: React.FC<CategoryChartProps> = ({ categories, isLoading = false }) => { const CategoryChart: React.FC<CategoryChartProps> = ({ categories, isLoading = false }) => {
// Filter out any categories with zero value to prevent rendering issues
const validCategories = categories.filter(cat => cat.valor > 0);
const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent }: any) => { const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent }: any) => {
if (percent === 0) return null; if (percent === 0) return null;
@ -48,16 +51,17 @@ const CategoryChart: React.FC<CategoryChartProps> = ({ categories, isLoading = f
<div className="flex items-center justify-center h-[250px]"> <div className="flex items-center justify-center h-[250px]">
<div className="h-32 w-32 rounded-full border-4 border-t-primary border-opacity-20 animate-spin" /> <div className="h-32 w-32 rounded-full border-4 border-t-primary border-opacity-20 animate-spin" />
</div> </div>
) : categories.length === 0 ? ( ) : validCategories.length === 0 ? (
<div className="flex items-center justify-center h-[250px] text-muted-foreground"> <div className="flex flex-col items-center justify-center h-[250px] text-muted-foreground">
Sem dados disponíveis <p>Sem dados disponíveis</p>
<p className="text-sm mt-2">Verifique se existem transações do tipo 'despesa' cadastradas</p>
</div> </div>
) : ( ) : (
<div className="h-[250px]"> <div className="h-[250px]">
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" height="100%">
<PieChart> <PieChart>
<Pie <Pie
data={categories} data={validCategories}
cx="50%" cx="50%"
cy="50%" cy="50%"
labelLine={false} labelLine={false}
@ -66,13 +70,13 @@ const CategoryChart: React.FC<CategoryChartProps> = ({ categories, isLoading = f
fill="#8884d8" fill="#8884d8"
dataKey="valor" dataKey="valor"
> >
{categories.map((entry, index) => ( {validCategories.map((entry, index) => (
<Cell key={`cell-${index}`} fill={entry.color} /> <Cell key={`cell-${index}`} fill={entry.color} />
))} ))}
</Pie> </Pie>
<Tooltip <Tooltip
formatter={(value: number) => formatCurrency(value)} formatter={(value: number) => formatCurrency(value)}
labelFormatter={(index) => categories[index].categoria} labelFormatter={(index) => validCategories[index].categoria}
/> />
<Legend /> <Legend />
</PieChart> </PieChart>

25
src/services/transacaoService.ts
View File

@ -48,7 +48,7 @@ export async function getTransactionSummary() {
.reduce((sum, item) => sum + Math.abs(item.valor || 0), 0); .reduce((sum, item) => sum + Math.abs(item.valor || 0), 0);
const totalDespesas = data const totalDespesas = data
.filter(item => item.tipo?.toLowerCase() === 'despesa') .filter(item => (item.tipo?.toLowerCase() === 'despesa'))
.reduce((sum, item) => sum + Math.abs(item.valor || 0), 0); .reduce((sum, item) => sum + Math.abs(item.valor || 0), 0);
const resultado = { const resultado = {
@ -63,10 +63,11 @@ export async function getTransactionSummary() {
export async function getCategorySummary() { export async function getCategorySummary() {
console.log("Buscando resumo de categorias..."); console.log("Buscando resumo de categorias...");
// Buscar todas as transações que são despesas, independente da capitalização
const { data, error } = await supabase const { data, error } = await supabase
.from('transacoes') .from('transacoes')
.select('categoria, valor, tipo') .select('categoria, valor, tipo');
.eq('tipo', 'Despesa');
if (error) { if (error) {
console.error('Erro ao buscar resumo de categorias:', error); console.error('Erro ao buscar resumo de categorias:', error);
@ -75,22 +76,16 @@ export async function getCategorySummary() {
console.log("Dados de categorias encontrados:", data); console.log("Dados de categorias encontrados:", data);
// Vamos buscar tanto "Despesa" quanto "despesa" para garantir // Filtrar usando JavaScript para pegar todas as despesas (case insensitive)
const { data: dataLowerCase, error: errorLowerCase } = await supabase const despesasData = data.filter(item =>
.from('transacoes') item.tipo?.toLowerCase() === 'despesa'
.select('categoria, valor, tipo') );
.eq('tipo', 'despesa');
if (errorLowerCase) { console.log("Despesas filtradas:", despesasData.length);
console.error('Erro ao buscar despesas minúsculas:', errorLowerCase);
} else if (dataLowerCase) {
data.push(...dataLowerCase);
console.log("Dados adicionais encontrados:", dataLowerCase);
}
// Agrupar por categoria // Agrupar por categoria
const categorias: Record<string, number> = {}; const categorias: Record<string, number> = {};
data.forEach(item => { despesasData.forEach(item => {
if (item.categoria && item.valor) { if (item.categoria && item.valor) {
const categoriaKey = item.categoria || 'Outros'; const categoriaKey = item.categoria || 'Outros';
if (!categorias[categoriaKey]) { if (!categorias[categoriaKey]) {