From afb53c142961fb0ed05d794783017cff455083a4 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Tue, 20 May 2025 23:11:39 +0000
Subject: [PATCH] Refactor: Split Transacoes.tsx into smaller components

Refactored the `TransacoesPage` component into smaller, more manageable components to improve code organization and readability. This includes extracting the table, form, and dialog related logic into separate files. Unused imports and files were also removed.
---
 .../transacoes/TransactionDialogs.tsx         |  87 ++++++
 .../transacoes/TransactionHeader.tsx          |  43 +++
 .../transacoes/TransactionSummaryCards.tsx    |  45 +++
 src/hooks/useTransactions.ts                  | 145 +++++++++
 src/integrations/supabase/types.ts            |  36 ---
 src/pages/Transacoes.tsx                      | 275 +++---------------
 6 files changed, 368 insertions(+), 263 deletions(-)
 create mode 100644 src/components/transacoes/TransactionDialogs.tsx
 create mode 100644 src/components/transacoes/TransactionHeader.tsx
 create mode 100644 src/components/transacoes/TransactionSummaryCards.tsx
 create mode 100644 src/hooks/useTransactions.ts

diff --git a/src/components/transacoes/TransactionDialogs.tsx b/src/components/transacoes/TransactionDialogs.tsx
new file mode 100644
index 0000000..001ee23
--- /dev/null
+++ b/src/components/transacoes/TransactionDialogs.tsx
@@ -0,0 +1,87 @@
+
+import React from 'react';
+import { TransactionForm } from '@/components/dashboard/TransactionForm';
+import { DespesaCartaoFormSelect } from '@/components/credito/DespesaCartaoFormSelect';
+import { Transaction } from '@/types/financialTypes';
+import { CartaoCredito } from '@/types/cartaoTypes';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+
+interface TransactionDialogsProps {
+  isDialogOpen: boolean;
+  isCartaoCreditoDialogOpen: boolean;
+  tipoForm: 'receita' | 'despesa';
+  selectedTransaction: Transaction | null;
+  isEditing: boolean;
+  cartoes: CartaoCredito[];
+  onTransactionSuccess: () => void;
+  onDespesaCartaoSuccess: () => void;
+  onCloseDialog: () => void;
+  onCloseCartaoCreditoDialog: () => void;
+}
+
+export const TransactionDialogs = ({
+  isDialogOpen,
+  isCartaoCreditoDialogOpen,
+  tipoForm,
+  selectedTransaction,
+  isEditing,
+  cartoes,
+  onTransactionSuccess,
+  onDespesaCartaoSuccess,
+  onCloseDialog,
+  onCloseCartaoCreditoDialog
+}: TransactionDialogsProps) => {
+  return (
+    <>
+      {/* Dialog para transações */}
+      <Dialog open={isDialogOpen} onOpenChange={onCloseDialog}>
+        <DialogContent className="sm:max-w-[500px]">
+          <DialogHeader>
+            <DialogTitle>
+              {isEditing 
+                ? `Editar ${tipoForm === 'receita' ? 'Receita' : 'Despesa'}`
+                : `Nova ${tipoForm === 'receita' ? 'Receita' : 'Despesa'}`
+              }
+            </DialogTitle>
+            <DialogDescription>
+              {isEditing
+                ? 'Edite os campos para atualizar a transação.'
+                : `Preencha os campos para registrar uma nova ${tipoForm === 'receita' ? 'receita' : 'despesa'}.`
+              }
+            </DialogDescription>
+          </DialogHeader>
+          <TransactionForm 
+            onSuccess={onTransactionSuccess}
+            onCancel={onCloseDialog}
+            defaultTipo={tipoForm}
+            transaction={selectedTransaction}
+            isEditing={isEditing}
+          />
+        </DialogContent>
+      </Dialog>
+
+      {/* Dialog para despesas de cartão */}
+      <Dialog open={isCartaoCreditoDialogOpen} onOpenChange={onCloseCartaoCreditoDialog}>
+        <DialogContent className="sm:max-w-[500px]">
+          <DialogHeader>
+            <DialogTitle>Nova Despesa de Cartão</DialogTitle>
+            <DialogDescription>
+              Selecione o cartão e preencha os detalhes da despesa.
+            </DialogDescription>
+          </DialogHeader>
+          <DespesaCartaoFormSelect 
+            cartoes={cartoes}
+            onSuccess={onDespesaCartaoSuccess}
+            onCancel={onCloseCartaoCreditoDialog}
+          />
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};
diff --git a/src/components/transacoes/TransactionHeader.tsx b/src/components/transacoes/TransactionHeader.tsx
new file mode 100644
index 0000000..4a135c4
--- /dev/null
+++ b/src/components/transacoes/TransactionHeader.tsx
@@ -0,0 +1,43 @@
+
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import { PlusCircle, CreditCard } from 'lucide-react';
+
+interface TransactionHeaderProps {
+  onOpenDialog: (tipo: 'receita' | 'despesa') => void;
+  onOpenCartaoCreditoDialog: () => void;
+}
+
+export const TransactionHeader = ({ 
+  onOpenDialog, 
+  onOpenCartaoCreditoDialog 
+}: TransactionHeaderProps) => {
+  return (
+    <div className="flex justify-between items-center">
+      <h1 className="text-2xl font-bold tracking-tight">Todas as Transações</h1>
+      <div className="flex gap-2">
+        <Button 
+          className="flex items-center gap-2 bg-finance-green hover:bg-finance-green/90"
+          onClick={() => onOpenDialog('receita')}
+        >
+          <PlusCircle className="h-4 w-4" />
+          Nova Receita
+        </Button>
+        <Button 
+          className="flex items-center gap-2 bg-finance-red hover:bg-finance-red/90"
+          onClick={() => onOpenDialog('despesa')}
+        >
+          <PlusCircle className="h-4 w-4" />
+          Nova Despesa
+        </Button>
+        <Button 
+          className="flex items-center gap-2"
+          onClick={onOpenCartaoCreditoDialog}
+        >
+          <CreditCard className="h-4 w-4" />
+          Despesa Cartão
+        </Button>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/transacoes/TransactionSummaryCards.tsx b/src/components/transacoes/TransactionSummaryCards.tsx
new file mode 100644
index 0000000..88b5722
--- /dev/null
+++ b/src/components/transacoes/TransactionSummaryCards.tsx
@@ -0,0 +1,45 @@
+
+import React from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+interface TransactionSummaryCardsProps {
+  totalReceitas: number;
+  totalDespesas: number;
+  formatCurrency: (value: number) => string;
+}
+
+export const TransactionSummaryCards = ({ 
+  totalReceitas, 
+  totalDespesas,
+  formatCurrency 
+}: TransactionSummaryCardsProps) => {
+  return (
+    <div className="grid gap-4 md:grid-cols-2">
+      <Card>
+        <CardHeader className="pb-2 bg-green-50">
+          <CardTitle className="text-finance-green flex items-center">
+            Ganhos do mês
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="pt-4">
+          <p className="text-2xl font-bold text-finance-green">
+            {formatCurrency(totalReceitas)}
+          </p>
+        </CardContent>
+      </Card>
+      
+      <Card>
+        <CardHeader className="pb-2 bg-red-50">
+          <CardTitle className="text-finance-red flex items-center">
+            Gastos do mês
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="pt-4">
+          <p className="text-2xl font-bold text-finance-red">
+            {formatCurrency(totalDespesas)}
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
diff --git a/src/hooks/useTransactions.ts b/src/hooks/useTransactions.ts
new file mode 100644
index 0000000..9177ea5
--- /dev/null
+++ b/src/hooks/useTransactions.ts
@@ -0,0 +1,145 @@
+
+import { useState, useEffect } from 'react';
+import { Transaction } from '@/types/financialTypes';
+import { CartaoCredito } from '@/types/cartaoTypes';
+import { useToast } from '@/hooks/use-toast';
+import { getTransacoes } from '@/services/transacaoService';
+import { getCartoes } from '@/services/cartaoCreditoService';
+
+export const useTransactions = () => {
+  const [transactions, setTransactions] = useState<Transaction[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [tipoForm, setTipoForm] = useState<'receita' | 'despesa'>('despesa');
+  const [selectedTransaction, setSelectedTransaction] = useState<Transaction | null>(null);
+  const [isEditing, setIsEditing] = useState(false);
+  const [isCartaoCreditoDialogOpen, setIsCartaoCreditoDialogOpen] = useState(false);
+  const [cartoes, setCartoes] = useState<CartaoCredito[]>([]);
+  const { toast } = useToast();
+
+  const loadTransactions = async () => {
+    try {
+      setIsLoading(true);
+      console.log("Carregando todas as transações...");
+      const data = await getTransacoes();
+      console.log(`${data.length} transações carregadas com sucesso`);
+      setTransactions(data);
+    } catch (error) {
+      console.error("Erro ao carregar transações:", error);
+      toast({
+        title: "Erro ao carregar transações",
+        description: "Não foi possível obter os dados do Supabase",
+        variant: "destructive"
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const loadCartoes = async () => {
+    try {
+      const data = await getCartoes();
+      setCartoes(data);
+    } catch (error) {
+      console.error("Erro ao carregar cartões:", error);
+      toast({
+        title: "Erro ao carregar cartões",
+        description: "Não foi possível obter os dados dos cartões",
+        variant: "destructive"
+      });
+    }
+  };
+
+  useEffect(() => {
+    loadTransactions();
+    loadCartoes();
+  }, []);
+
+  const handleTransactionSuccess = () => {
+    setIsDialogOpen(false);
+    setSelectedTransaction(null);
+    setIsEditing(false);
+    loadTransactions();
+    toast({
+      title: isEditing ? "Transação atualizada" : "Transação registrada",
+      description: isEditing 
+        ? "A transação foi atualizada com sucesso" 
+        : "A nova transação foi adicionada com sucesso",
+    });
+  };
+
+  const handleDespesaCartaoSuccess = () => {
+    setIsCartaoCreditoDialogOpen(false);
+    loadCartoes();
+    loadTransactions();
+    toast({
+      title: "Despesa de cartão registrada",
+      description: "A despesa do cartão foi adicionada com sucesso",
+    });
+  };
+
+  const handleEditTransaction = (transaction: Transaction) => {
+    setSelectedTransaction(transaction);
+    setTipoForm(transaction.tipo as 'receita' | 'despesa');
+    setIsEditing(true);
+    setIsDialogOpen(true);
+  };
+
+  const handleCloseDialog = () => {
+    setIsDialogOpen(false);
+    setSelectedTransaction(null);
+    setIsEditing(false);
+  };
+
+  const handleCloseCartaoCreditoDialog = () => {
+    setIsCartaoCreditoDialogOpen(false);
+  };
+
+  const handleOpenDialog = (tipo: 'receita' | 'despesa') => {
+    setTipoForm(tipo);
+    setIsEditing(false);
+    setSelectedTransaction(null);
+    setIsDialogOpen(true);
+  };
+
+  const handleOpenCartaoCreditoDialog = () => {
+    setIsCartaoCreditoDialogOpen(true);
+  };
+
+  // Separar transações em receitas e despesas
+  const receitas = transactions.filter(t => t.tipo === 'receita');
+  const despesas = transactions.filter(t => t.tipo === 'despesa');
+
+  // Calcular totais
+  const totalReceitas = receitas.reduce((sum, t) => sum + Math.abs(t.valor), 0);
+  const totalDespesas = despesas.reduce((sum, t) => sum + Math.abs(t.valor), 0);
+
+  const formatCurrency = (value: number) => {
+    return new Intl.NumberFormat('pt-BR', {
+      style: 'currency',
+      currency: 'BRL',
+    }).format(value);
+  };
+
+  return {
+    transactions,
+    isLoading,
+    isDialogOpen,
+    tipoForm,
+    selectedTransaction,
+    isEditing,
+    isCartaoCreditoDialogOpen,
+    cartoes,
+    totalReceitas,
+    totalDespesas,
+    formatCurrency,
+    handleTransactionSuccess,
+    handleDespesaCartaoSuccess,
+    handleEditTransaction,
+    handleCloseDialog,
+    handleCloseCartaoCreditoDialog,
+    handleOpenDialog,
+    handleOpenCartaoCreditoDialog,
+    loadTransactions
+  };
+};
diff --git a/src/integrations/supabase/types.ts b/src/integrations/supabase/types.ts
index 0adc9dc..1459497 100644
--- a/src/integrations/supabase/types.ts
+++ b/src/integrations/supabase/types.ts
@@ -239,42 +239,6 @@ export type Database = {
         }
         Relationships: []
       }
-      rodrigo_audio_messages: {
-        Row: {
-          audio_url: string | null
-          created_at: string
-          duration: number | null
-          id: string
-          instance_id: string
-          message_id: string | null
-          metadata: Json | null
-          sender_id: string
-          sender_name: string | null
-        }
-        Insert: {
-          audio_url?: string | null
-          created_at?: string
-          duration?: number | null
-          id?: string
-          instance_id: string
-          message_id?: string | null
-          metadata?: Json | null
-          sender_id: string
-          sender_name?: string | null
-        }
-        Update: {
-          audio_url?: string | null
-          created_at?: string
-          duration?: number | null
-          id?: string
-          instance_id?: string
-          message_id?: string | null
-          metadata?: Json | null
-          sender_id?: string
-          sender_name?: string | null
-        }
-        Relationships: []
-      }
       transacoes: {
         Row: {
           categoria: string | null
diff --git a/src/pages/Transacoes.tsx b/src/pages/Transacoes.tsx
index fded534..7ba4d55 100644
--- a/src/pages/Transacoes.tsx
+++ b/src/pages/Transacoes.tsx
@@ -1,198 +1,49 @@
 
-import { useState, useEffect } from 'react';
+import React from 'react';
 import Layout from '@/components/layout/Layout';
 import TransactionsTable from '@/components/dashboard/TransactionsTable';
-import { TransactionForm } from '@/components/dashboard/TransactionForm';
-import { Transaction } from '@/types/financialTypes';
-import { useToast } from "@/hooks/use-toast";
-import { getTransacoes } from '@/services/transacaoService';
-import { Button } from '@/components/ui/button';
-import { PlusCircle, CreditCard } from 'lucide-react';
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { CartaoCredito } from '@/types/cartaoTypes';
-import { getCartoes } from '@/services/cartaoCreditoService';
-import { DespesaCartaoFormSelect } from '@/components/credito/DespesaCartaoFormSelect';
+import { useTransactions } from '@/hooks/useTransactions';
+import { TransactionHeader } from '@/components/transacoes/TransactionHeader';
+import { TransactionSummaryCards } from '@/components/transacoes/TransactionSummaryCards';
+import { TransactionDialogs } from '@/components/transacoes/TransactionDialogs';
 
 const TransacoesPage = () => {
-  const [transactions, setTransactions] = useState<Transaction[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [isDialogOpen, setIsDialogOpen] = useState(false);
-  const [tipoForm, setTipoForm] = useState<'receita' | 'despesa'>('despesa');
-  const [selectedTransaction, setSelectedTransaction] = useState<Transaction | null>(null);
-  const [isEditing, setIsEditing] = useState(false);
-  const [isCartaoCreditoDialogOpen, setIsCartaoCreditoDialogOpen] = useState(false);
-  const [cartoes, setCartoes] = useState<CartaoCredito[]>([]);
-  const { toast } = useToast();
-
-  const loadTransactions = async () => {
-    try {
-      setIsLoading(true);
-      console.log("Carregando todas as transações...");
-      const data = await getTransacoes();
-      console.log(`${data.length} transações carregadas com sucesso`);
-      setTransactions(data);
-    } catch (error) {
-      console.error("Erro ao carregar transações:", error);
-      toast({
-        title: "Erro ao carregar transações",
-        description: "Não foi possível obter os dados do Supabase",
-        variant: "destructive"
-      });
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const loadCartoes = async () => {
-    try {
-      const data = await getCartoes();
-      setCartoes(data);
-    } catch (error) {
-      console.error("Erro ao carregar cartões:", error);
-      toast({
-        title: "Erro ao carregar cartões",
-        description: "Não foi possível obter os dados dos cartões",
-        variant: "destructive"
-      });
-    }
-  };
-
-  useEffect(() => {
-    loadTransactions();
-    loadCartoes();
-  }, []);
-
-  const handleTransactionSuccess = () => {
-    setIsDialogOpen(false);
-    setSelectedTransaction(null);
-    setIsEditing(false);
-    loadTransactions();
-    toast({
-      title: isEditing ? "Transação atualizada" : "Transação registrada",
-      description: isEditing 
-        ? "A transação foi atualizada com sucesso" 
-        : "A nova transação foi adicionada com sucesso",
-    });
-  };
-
-  const handleDespesaCartaoSuccess = () => {
-    setIsCartaoCreditoDialogOpen(false);
-    loadCartoes(); // Recarregar lista de cartões
-    loadTransactions(); // Recarregar transações
-    toast({
-      title: "Despesa de cartão registrada",
-      description: "A despesa do cartão foi adicionada com sucesso",
-    });
-  };
-
-  const handleEditTransaction = (transaction: Transaction) => {
-    setSelectedTransaction(transaction);
-    setTipoForm(transaction.tipo as 'receita' | 'despesa');
-    setIsEditing(true);
-    setIsDialogOpen(true);
-  };
-
-  const handleCloseDialog = () => {
-    setIsDialogOpen(false);
-    setSelectedTransaction(null);
-    setIsEditing(false);
-  };
-
-  const handleCloseCartaoCreditoDialog = () => {
-    setIsCartaoCreditoDialogOpen(false);
-  };
-
-  // Separar transações em receitas e despesas
-  const receitas = transactions.filter(t => t.tipo === 'receita');
-  const despesas = transactions.filter(t => t.tipo === 'despesa');
-
-  // Calcular totais
-  const totalReceitas = receitas.reduce((sum, t) => sum + Math.abs(t.valor), 0);
-  const totalDespesas = despesas.reduce((sum, t) => sum + Math.abs(t.valor), 0);
-
-  const formatCurrency = (value: number) => {
-    return new Intl.NumberFormat('pt-BR', {
-      style: 'currency',
-      currency: 'BRL',
-    }).format(value);
-  };
-
-  const handleOpenDialog = (tipo: 'receita' | 'despesa') => {
-    setTipoForm(tipo);
-    setIsEditing(false);
-    setSelectedTransaction(null);
-    setIsDialogOpen(true);
-  };
-
-  const handleOpenCartaoCreditoDialog = () => {
-    setIsCartaoCreditoDialogOpen(true);
-  };
+  const {
+    transactions,
+    isLoading,
+    isDialogOpen,
+    tipoForm,
+    selectedTransaction,
+    isEditing,
+    isCartaoCreditoDialogOpen,
+    cartoes,
+    totalReceitas,
+    totalDespesas,
+    formatCurrency,
+    handleTransactionSuccess,
+    handleDespesaCartaoSuccess,
+    handleEditTransaction,
+    handleCloseDialog,
+    handleCloseCartaoCreditoDialog,
+    handleOpenDialog,
+    handleOpenCartaoCreditoDialog,
+    loadTransactions
+  } = useTransactions();
 
   return (
     <Layout>
       <div className="space-y-6">
-        <div className="flex justify-between items-center">
-          <h1 className="text-2xl font-bold tracking-tight">Todas as Transações</h1>
-          <div className="flex gap-2">
-            <Button 
-              className="flex items-center gap-2 bg-finance-green hover:bg-finance-green/90"
-              onClick={() => handleOpenDialog('receita')}
-            >
-              <PlusCircle className="h-4 w-4" />
-              Nova Receita
-            </Button>
-            <Button 
-              className="flex items-center gap-2 bg-finance-red hover:bg-finance-red/90"
-              onClick={() => handleOpenDialog('despesa')}
-            >
-              <PlusCircle className="h-4 w-4" />
-              Nova Despesa
-            </Button>
-            <Button 
-              className="flex items-center gap-2"
-              onClick={handleOpenCartaoCreditoDialog}
-            >
-              <CreditCard className="h-4 w-4" />
-              Despesa Cartão
-            </Button>
-          </div>
-        </div>
+        <TransactionHeader 
+          onOpenDialog={handleOpenDialog}
+          onOpenCartaoCreditoDialog={handleOpenCartaoCreditoDialog}
+        />
 
         {/* Resumo em Cards */}
-        <div className="grid gap-4 md:grid-cols-2">
-          <Card>
-            <CardHeader className="pb-2 bg-green-50">
-              <CardTitle className="text-finance-green flex items-center">
-                Ganhos do mês
-              </CardTitle>
-            </CardHeader>
-            <CardContent className="pt-4">
-              <p className="text-2xl font-bold text-finance-green">
-                {formatCurrency(totalReceitas)}
-              </p>
-            </CardContent>
-          </Card>
-          
-          <Card>
-            <CardHeader className="pb-2 bg-red-50">
-              <CardTitle className="text-finance-red flex items-center">
-                Gastos do mês
-              </CardTitle>
-            </CardHeader>
-            <CardContent className="pt-4">
-              <p className="text-2xl font-bold text-finance-red">
-                {formatCurrency(totalDespesas)}
-              </p>
-            </CardContent>
-          </Card>
-        </div>
+        <TransactionSummaryCards 
+          totalReceitas={totalReceitas}
+          totalDespesas={totalDespesas}
+          formatCurrency={formatCurrency}
+        />
 
         {/* Tabela completa de transações */}
         <div className="space-y-4">
@@ -206,49 +57,19 @@ const TransacoesPage = () => {
           />
         </div>
 
-        {/* Dialog para transações */}
-        <Dialog open={isDialogOpen} onOpenChange={handleCloseDialog}>
-          <DialogContent className="sm:max-w-[500px]">
-            <DialogHeader>
-              <DialogTitle>
-                {isEditing 
-                  ? `Editar ${tipoForm === 'receita' ? 'Receita' : 'Despesa'}`
-                  : `Nova ${tipoForm === 'receita' ? 'Receita' : 'Despesa'}`
-                }
-              </DialogTitle>
-              <DialogDescription>
-                {isEditing
-                  ? 'Edite os campos para atualizar a transação.'
-                  : `Preencha os campos para registrar uma nova ${tipoForm === 'receita' ? 'receita' : 'despesa'}.`
-                }
-              </DialogDescription>
-            </DialogHeader>
-            <TransactionForm 
-              onSuccess={handleTransactionSuccess}
-              onCancel={handleCloseDialog}
-              defaultTipo={tipoForm}
-              transaction={selectedTransaction}
-              isEditing={isEditing}
-            />
-          </DialogContent>
-        </Dialog>
-
-        {/* Dialog para despesas de cartão */}
-        <Dialog open={isCartaoCreditoDialogOpen} onOpenChange={handleCloseCartaoCreditoDialog}>
-          <DialogContent className="sm:max-w-[500px]">
-            <DialogHeader>
-              <DialogTitle>Nova Despesa de Cartão</DialogTitle>
-              <DialogDescription>
-                Selecione o cartão e preencha os detalhes da despesa.
-              </DialogDescription>
-            </DialogHeader>
-            <DespesaCartaoFormSelect 
-              cartoes={cartoes}
-              onSuccess={handleDespesaCartaoSuccess}
-              onCancel={handleCloseCartaoCreditoDialog}
-            />
-          </DialogContent>
-        </Dialog>
+        {/* Diálogos */}
+        <TransactionDialogs 
+          isDialogOpen={isDialogOpen}
+          isCartaoCreditoDialogOpen={isCartaoCreditoDialogOpen}
+          tipoForm={tipoForm}
+          selectedTransaction={selectedTransaction}
+          isEditing={isEditing}
+          cartoes={cartoes}
+          onTransactionSuccess={handleTransactionSuccess}
+          onDespesaCartaoSuccess={handleDespesaCartaoSuccess}
+          onCloseDialog={handleCloseDialog}
+          onCloseCartaoCreditoDialog={handleCloseCartaoCreditoDialog}
+        />
       </div>
     </Layout>
   );