Fix: Apply responsiveness adjustments

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

View File

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

View File

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