Fix: Implement filters and calculations
- Added a filter to the AvisosContas page to search for recurring accounts by name. - Adjusted the dashboard calculations for balance and economy to reflect the transactions of the selected month. - Fixed the Admin page not opening correctly. - Corrected the economy card logic on the dashboard.
This commit is contained in:
gpt-engineer-app[bot]
parent
33f2d389cd
commit
991922432d
342
src/components/avisos/ContaRecorrentesList.tsx
Normal file
342
src/components/avisos/ContaRecorrentesList.tsx
Normal file
@ -0,0 +1,342 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { supabase } from '@/integrations/supabase/client';
|
||||
import { useAuthStore } from '@/stores/authStore';
|
||||
import { Edit, Trash2, Calendar, Clock, DollarSign, Bell, Search } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { format } from 'date-fns';
|
||||
import { ptBR } from 'date-fns/locale';
|
||||
import FiltroMesAno from './FiltroMesAno';
|
||||
import StatusTags from './StatusTags';
|
||||
|
||||
interface ContaRecorrente {
|
||||
id: string;
|
||||
nome_conta: string;
|
||||
descricao: string | null;
|
||||
valor: number | null;
|
||||
dia_vencimento: number;
|
||||
hora_aviso: string;
|
||||
dias_antecedencia: number;
|
||||
ativo: boolean;
|
||||
created_at: string;
|
||||
email_usuario: string | null;
|
||||
}
|
||||
|
||||
interface StatusPagamento {
|
||||
status: string | null;
|
||||
valor_pago: number | null;
|
||||
data_pagamento: string | null;
|
||||
}
|
||||
|
||||
interface AvisoEnviado {
|
||||
data_aviso: string;
|
||||
}
|
||||
|
||||
const ContasRecorrentesList = () => {
|
||||
const { session } = useAuthStore();
|
||||
const queryClient = useQueryClient();
|
||||
const [deletingId, setDeletingId] = useState<string | null>(null);
|
||||
const [hoveredCard, setHoveredCard] = useState<string | null>(null);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
|
||||
// Estado para filtro de mês/ano - inicializa com mês/ano atual
|
||||
const dataAtual = new Date();
|
||||
const [mesAno, setMesAno] = useState({
|
||||
mes: dataAtual.getMonth() + 1,
|
||||
ano: dataAtual.getFullYear()
|
||||
});
|
||||
|
||||
// Buscar email do usuário logado
|
||||
const userEmail = session?.user?.email;
|
||||
|
||||
const { data: contas, isLoading } = useQuery({
|
||||
queryKey: ['contas-recorrentes', userEmail],
|
||||
queryFn: async () => {
|
||||
if (!userEmail) return [];
|
||||
|
||||
const { data, error } = await supabase
|
||||
.from('contas_recorrentes')
|
||||
.select('*')
|
||||
.eq('email_usuario', userEmail)
|
||||
.order('created_at', { ascending: false });
|
||||
|
||||
if (error) throw error;
|
||||
return data as ContaRecorrente[];
|
||||
},
|
||||
enabled: !!userEmail
|
||||
});
|
||||
|
||||
// Buscar status de pagamento para todas as contas do período selecionado
|
||||
const { data: statusPagamentos } = useQuery({
|
||||
queryKey: ['status-pagamentos', mesAno.mes, mesAno.ano, contas?.map(c => c.id)],
|
||||
queryFn: async () => {
|
||||
if (!contas || contas.length === 0) return {};
|
||||
|
||||
const { data, error } = await supabase
|
||||
.from('status_pagamento_mensal')
|
||||
.select('conta_id, status, valor_pago, data_pagamento')
|
||||
.in('conta_id', contas.map(c => c.id))
|
||||
.eq('mes', mesAno.mes)
|
||||
.eq('ano', mesAno.ano);
|
||||
|
||||
if (error) throw error;
|
||||
|
||||
// Converter array em objeto indexado por conta_id
|
||||
const statusMap: Record<string, StatusPagamento> = {};
|
||||
data?.forEach(status => {
|
||||
statusMap[status.conta_id] = status;
|
||||
});
|
||||
|
||||
return statusMap;
|
||||
},
|
||||
enabled: !!contas && contas.length > 0
|
||||
});
|
||||
|
||||
// Buscar avisos enviados para todas as contas do período selecionado
|
||||
const { data: avisosEnviados } = useQuery({
|
||||
queryKey: ['avisos-enviados', mesAno.mes, mesAno.ano, contas?.map(c => c.id)],
|
||||
queryFn: async () => {
|
||||
if (!contas || contas.length === 0) return {};
|
||||
|
||||
// Criar range de datas para o mês/ano selecionado
|
||||
const inicioMes = new Date(mesAno.ano, mesAno.mes - 1, 1);
|
||||
const fimMes = new Date(mesAno.ano, mesAno.mes, 0);
|
||||
|
||||
const { data, error } = await supabase
|
||||
.from('avisos_enviados')
|
||||
.select('conta_id, data_aviso')
|
||||
.in('conta_id', contas.map(c => c.id))
|
||||
.gte('data_aviso', inicioMes.toISOString().split('T')[0])
|
||||
.lte('data_aviso', fimMes.toISOString().split('T')[0]);
|
||||
|
||||
if (error) throw error;
|
||||
|
||||
// Converter array em objeto indexado por conta_id (pega o primeiro aviso do mês)
|
||||
const avisosMap: Record<string, AvisoEnviado> = {};
|
||||
data?.forEach(aviso => {
|
||||
if (!avisosMap[aviso.conta_id]) {
|
||||
avisosMap[aviso.conta_id] = aviso;
|
||||
}
|
||||
});
|
||||
|
||||
return avisosMap;
|
||||
},
|
||||
enabled: !!contas && contas.length > 0
|
||||
});
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
setDeletingId(id);
|
||||
|
||||
try {
|
||||
const { error } = await supabase
|
||||
.from('contas_recorrentes')
|
||||
.delete()
|
||||
.eq('id', id);
|
||||
|
||||
if (error) throw error;
|
||||
|
||||
toast.success('Conta removida com sucesso!');
|
||||
queryClient.invalidateQueries({ queryKey: ['contas-recorrentes'] });
|
||||
} catch (error) {
|
||||
console.error('Erro ao remover conta:', error);
|
||||
toast.error('Erro ao remover conta. Tente novamente.');
|
||||
} finally {
|
||||
setDeletingId(null);
|
||||
}
|
||||
};
|
||||
|
||||
const toggleAtivo = async (id: string, ativo: boolean) => {
|
||||
try {
|
||||
const { error } = await supabase
|
||||
.from('contas_recorrentes')
|
||||
.update({ ativo: !ativo })
|
||||
.eq('id', id);
|
||||
|
||||
if (error) throw error;
|
||||
|
||||
toast.success(ativo ? 'Conta desativada' : 'Conta ativada');
|
||||
queryClient.invalidateQueries({ queryKey: ['contas-recorrentes'] });
|
||||
} catch (error) {
|
||||
console.error('Erro ao alterar status:', error);
|
||||
toast.error('Erro ao alterar status da conta.');
|
||||
}
|
||||
};
|
||||
|
||||
const formatCurrency = (value: number | null) => {
|
||||
if (value === null) return 'Não informado';
|
||||
return new Intl.NumberFormat('pt-BR', {
|
||||
style: 'currency',
|
||||
currency: 'BRL'
|
||||
}).format(value);
|
||||
};
|
||||
|
||||
// Filtrar contas por termo de busca
|
||||
const contasFiltradas = contas?.filter(conta =>
|
||||
conta.nome_conta.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
(conta.descricao && conta.descricao.toLowerCase().includes(searchTerm.toLowerCase()))
|
||||
);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<div className="text-center">Carregando contas...</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
if (!userEmail) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Suas Contas Recorrentes</CardTitle>
|
||||
<CardDescription>Você precisa estar logado para ver suas contas</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Filtros */}
|
||||
<div className="space-y-4">
|
||||
<FiltroMesAno mesAno={mesAno} onMesAnoChange={setMesAno} />
|
||||
|
||||
{/* Filtro de busca */}
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
|
||||
<Input
|
||||
placeholder="Buscar conta por nome..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="pl-10"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Lista de Contas */}
|
||||
{!contasFiltradas || contasFiltradas.length === 0 ? (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Suas Contas Recorrentes</CardTitle>
|
||||
<CardDescription>
|
||||
{searchTerm ? 'Nenhuma conta encontrada com esse termo de busca' : 'Você ainda não cadastrou nenhuma conta recorrente'}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-center py-8">
|
||||
<Bell className="h-12 w-12 text-gray-400 mx-auto mb-4" />
|
||||
<p className="text-gray-500">
|
||||
{searchTerm ? 'Tente buscar por outro termo' : 'Clique em "Nova Conta" para começar'}
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-xl font-semibold">
|
||||
Suas Contas Recorrentes - {mesAno.mes.toString().padStart(2, '0')}/{mesAno.ano}
|
||||
{searchTerm && ` (${contasFiltradas.length} encontradas)`}
|
||||
</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{contasFiltradas.map((conta) => (
|
||||
<div
|
||||
key={conta.id}
|
||||
className="relative group"
|
||||
onMouseEnter={() => setHoveredCard(conta.id)}
|
||||
onMouseLeave={() => setHoveredCard(null)}
|
||||
>
|
||||
{hoveredCard === conta.id && (
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-blue-400/20 to-purple-400/20 rounded-lg blur-xl transition-all duration-300 ease-in-out" />
|
||||
)}
|
||||
|
||||
<Card className={`
|
||||
relative z-10 transition-all duration-300 ease-in-out
|
||||
${conta.ativo ? 'hover:shadow-lg hover:scale-105' : 'opacity-60 hover:opacity-80'}
|
||||
${hoveredCard === conta.id ? 'border-blue-300 shadow-lg' : ''}
|
||||
`}>
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<CardTitle className="text-lg">{conta.nome_conta}</CardTitle>
|
||||
{conta.descricao && (
|
||||
<CardDescription className="mt-1">{conta.descricao}</CardDescription>
|
||||
)}
|
||||
</div>
|
||||
<Badge variant={conta.ativo ? 'default' : 'secondary'}>
|
||||
{conta.ativo ? 'Ativo' : 'Inativo'}
|
||||
</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-3">
|
||||
{/* Tags de Status */}
|
||||
<StatusTags
|
||||
statusPagamento={statusPagamentos?.[conta.id] || null}
|
||||
avisoEnviado={avisosEnviados?.[conta.id] || null}
|
||||
/>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<DollarSign className="h-4 w-4 text-green-600" />
|
||||
<span className="font-medium">Valor:</span>
|
||||
<span>{formatCurrency(conta.valor)}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Calendar className="h-4 w-4 text-blue-600" />
|
||||
<span className="font-medium">Vencimento:</span>
|
||||
<span>Todo dia {conta.dia_vencimento}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Clock className="h-4 w-4 text-purple-600" />
|
||||
<span className="font-medium">Horário:</span>
|
||||
<span>{conta.hora_aviso}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Bell className="h-4 w-4 text-orange-600" />
|
||||
<span className="font-medium">Antecedência:</span>
|
||||
<span>{conta.dias_antecedencia} dia(s)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 pt-2 border-t">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => toggleAtivo(conta.id, conta.ativo)}
|
||||
className="flex-1"
|
||||
>
|
||||
{conta.ativo ? 'Desativar' : 'Ativar'}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleDelete(conta.id)}
|
||||
disabled={deletingId === conta.id}
|
||||
className="text-red-600 hover:text-red-700"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContasRecorrentesList;
|
||||
@ -14,6 +14,15 @@ const DashboardSummaryCards: React.FC<DashboardSummaryCardsProps> = ({ resumo, f
|
||||
const { navigateToTransactions } = useNavigateWithFilter();
|
||||
|
||||
const saldo = resumo ? resumo.totalReceitas - resumo.totalDespesas - (resumo.totalCartoes || 0) : 0;
|
||||
const totalGastos = resumo ? resumo.totalDespesas + (resumo.totalCartoes || 0) : 0;
|
||||
|
||||
// Calcular economia baseada nas transações do mês
|
||||
// Se há receitas, calcular quanto foi economizado (receitas - gastos totais)
|
||||
// Se não há receitas, mostrar 0% de economia
|
||||
const economiaValor = resumo?.totalReceitas ? saldo : 0;
|
||||
const economiaPercentual = resumo?.totalReceitas && resumo.totalReceitas > 0
|
||||
? ((economiaValor / resumo.totalReceitas) * 100)
|
||||
: 0;
|
||||
|
||||
return (
|
||||
<div className="grid gap-4 sm:gap-6 grid-cols-1 sm:grid-cols-2 xl:grid-cols-4">
|
||||
@ -106,10 +115,14 @@ const DashboardSummaryCards: React.FC<DashboardSummaryCardsProps> = ({ resumo, f
|
||||
</div>
|
||||
<div className="space-y-1 sm:space-y-2">
|
||||
<p className="text-xs sm:text-sm font-semibold text-purple-700">Economia</p>
|
||||
<p className="text-base sm:text-xl xl:text-2xl font-bold text-purple-600 leading-tight">
|
||||
-22.2%
|
||||
<p className={`text-base sm:text-xl xl:text-2xl font-bold leading-tight ${
|
||||
economiaPercentual >= 0 ? 'text-purple-600' : 'text-red-600'
|
||||
}`}>
|
||||
{economiaPercentual.toFixed(1)}%
|
||||
</p>
|
||||
<p className="text-xs text-purple-500 leading-tight">
|
||||
{formatCurrency(Math.abs(economiaValor))}
|
||||
</p>
|
||||
<p className="text-xs text-purple-500 leading-tight">{resumo ? formatCurrency(Math.abs(saldo)) : 'R$ 0,00'}</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user