diff --git a/src/pages/Transacoes.tsx b/src/pages/Transacoes.tsx
index dc6f49e..ff95294 100644
--- a/src/pages/Transacoes.tsx
+++ b/src/pages/Transacoes.tsx
@@ -1,13 +1,22 @@
-import React from 'react';
+import React, { useState } from 'react';
import Layout from '@/components/layout/Layout';
import TransactionsTable from '@/components/dashboard/TransactionsTable';
import { useTransactions } from '@/hooks/useTransactions';
import { TransactionHeader } from '@/components/transacoes/TransactionHeader';
import { TransactionSummaryCards } from '@/components/transacoes/TransactionSummaryCards';
import { TransactionDialogs } from '@/components/transacoes/TransactionDialogs';
+import { MonthFilter } from '@/components/filters/MonthFilter';
const TransacoesPage = () => {
+ // Função para obter o mês atual no formato YYYY-MM
+ const getCurrentMonth = () => {
+ const now = new Date();
+ return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`;
+ };
+
+ const [selectedMonth, setSelectedMonth] = useState
(getCurrentMonth());
+
const {
transactions,
isLoading,
@@ -29,11 +38,34 @@ const TransacoesPage = () => {
handleOpenDialog,
handleOpenCartaoCreditoDialog,
loadTransactions
- } = useTransactions();
+ } = useTransactions({ monthFilter: selectedMonth });
+
+ // Função para formatar o mês para exibição
+ const formatMonthDisplay = (month: string) => {
+ const [year, monthNum] = month.split('-');
+ const months = [
+ 'Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho',
+ 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'
+ ];
+ return `${months[parseInt(monthNum) - 1]} ${year}`;
+ };
return (
+
+
+
Transações
+
+ Dados de: {formatMonthDisplay(selectedMonth)}
+
+
+
+
+
0 ? `grupo_id.in.(${groupIds.map(id => `"${id}"`).join(',')})` : ''}`);
+ // Apply month filter if provided
+ if (monthFilter) {
+ const startDate = `${monthFilter}-01`;
+ const year = parseInt(monthFilter.split('-')[0]);
+ const month = parseInt(monthFilter.split('-')[1]);
+ const endDate = new Date(year, month, 0).toISOString().split('T')[0]; // Last day of the month
+
+ query = query
+ .gte('quando', startDate)
+ .lte('quando', `${endDate}T23:59:59.999Z`);
+ }
+
+ const { data, error } = await query;
+
if (error) {
console.error('Erro ao buscar resumo das transações:', error);
throw new Error('Não foi possível carregar o resumo das transações');
@@ -56,12 +71,13 @@ export async function getTransactionSummary() {
}
/**
- * Get category summary for transactions
+ * Get category summary for transactions with optional month filter
* @param tipoFiltro Filter by transaction type ('receita', 'despesa', or 'all')
+ * @param monthFilter - Optional month filter in format 'YYYY-MM'
* @returns Promise with category summary data
*/
-export async function getCategorySummary(tipoFiltro: string = 'despesa'): Promise {
- console.log(`Buscando resumo de categorias para tipo: ${tipoFiltro}`);
+export async function getCategorySummary(tipoFiltro: string = 'despesa', monthFilter?: string): Promise {
+ console.log(`Buscando resumo de categorias para tipo: ${tipoFiltro}`, monthFilter ? `Filtro do mês: ${monthFilter}` : "Sem filtro de mês");
const normalizedEmail = getUserEmail();
@@ -73,12 +89,26 @@ export async function getCategorySummary(tipoFiltro: string = 'despesa'): Promis
// Get user groups by email
const groupIds = await getUserGroups(normalizedEmail);
- // Fetch category summary with enhanced filter based on email (login) or group_id
- const { data, error } = await supabase
+ // Build the query with month filter if provided
+ let query = supabase
.from('transacoes')
.select('categoria, valor, tipo')
.or(`login.eq.${normalizedEmail},${groupIds.length > 0 ? `grupo_id.in.(${groupIds.map(id => `"${id}"`).join(',')})` : ''}`);
+ // Apply month filter if provided
+ if (monthFilter) {
+ const startDate = `${monthFilter}-01`;
+ const year = parseInt(monthFilter.split('-')[0]);
+ const month = parseInt(monthFilter.split('-')[1]);
+ const endDate = new Date(year, month, 0).toISOString().split('T')[0]; // Last day of the month
+
+ query = query
+ .gte('quando', startDate)
+ .lte('quando', `${endDate}T23:59:59.999Z`);
+ }
+
+ const { data, error } = await query;
+
if (error) {
console.error('Erro ao buscar resumo de categorias:', error);
throw new Error('Não foi possível carregar o resumo por categoria');
diff --git a/src/services/transacao/transacaoFetchService.ts b/src/services/transacao/transacaoFetchService.ts
index af088d0..a1c3de1 100644
--- a/src/services/transacao/transacaoFetchService.ts
+++ b/src/services/transacao/transacaoFetchService.ts
@@ -4,11 +4,12 @@ import { Transaction } from "@/types/financialTypes";
import { getUserEmail, getUserGroups } from "./baseService";
/**
- * Fetch all transactions for the current user
+ * Fetch all transactions for the current user with optional month filter
+ * @param monthFilter - Optional month filter in format 'YYYY-MM'
* @returns Promise with array of transactions
*/
-export async function getTransacoes(): Promise {
- console.log("Buscando transações do Supabase...");
+export async function getTransacoes(monthFilter?: string): Promise {
+ console.log("Buscando transações do Supabase...", monthFilter ? `Filtro do mês: ${monthFilter}` : "Sem filtro de mês");
// Get the user's email from localStorage
const normalizedEmail = getUserEmail();
@@ -24,13 +25,29 @@ export async function getTransacoes(): Promise {
const groupIds = await getUserGroups(normalizedEmail);
console.log(`Encontrados ${groupIds.length} grupos vinculados ao usuário:`, groupIds);
- // Fetch transactions with filter based on email (login) or group_id
- const { data, error } = await supabase
+ // Build the query with month filter if provided
+ let query = supabase
.from('transacoes')
.select('*')
.or(`login.eq.${normalizedEmail},${groupIds.length > 0 ? `grupo_id.in.(${groupIds.map(id => `"${id}"`).join(',')})` : ''}`)
.order('quando', { ascending: false });
+ // Apply month filter if provided
+ if (monthFilter) {
+ const startDate = `${monthFilter}-01`;
+ const year = parseInt(monthFilter.split('-')[0]);
+ const month = parseInt(monthFilter.split('-')[1]);
+ const endDate = new Date(year, month, 0).toISOString().split('T')[0]; // Last day of the month
+
+ query = query
+ .gte('quando', startDate)
+ .lte('quando', `${endDate}T23:59:59.999Z`);
+
+ console.log(`Aplicando filtro de mês: ${startDate} até ${endDate}`);
+ }
+
+ const { data, error } = await query;
+
if (error) {
console.error('Erro ao buscar transações:', error);
throw new Error('Não foi possível carregar as transações');