feat: Add credit card expense to transactions
Adds the functionality to include credit card expenses within the transactions menu, mirroring the existing "Nova Despesa" button functionality. This allows users to select a credit card when adding a new expense.
This commit is contained in:
gpt-engineer-app[bot]
parent
34968ee74a
commit
9d02a2203d
202
src/components/credito/DespesaCartaoFormSelect.tsx
Normal file
202
src/components/credito/DespesaCartaoFormSelect.tsx
Normal file
@ -0,0 +1,202 @@
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import * as z from 'zod';
|
||||
import { useToast } from '@/components/ui/use-toast';
|
||||
import { criarDespesa } from '@/services/cartaoCreditoService';
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage
|
||||
} from '@/components/ui/form';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { CartaoCredito } from '@/types/cartaoTypes';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue
|
||||
} from '@/components/ui/select';
|
||||
|
||||
const despesaSchema = z.object({
|
||||
cartaoId: z.string().min(1, { message: 'Cartão é obrigatório' }),
|
||||
valor: z.string().min(1, { message: 'Valor é obrigatório' }),
|
||||
data_despesa: z.string().min(1, { message: 'Data é obrigatória' }),
|
||||
descricao: z.string().min(1, { message: 'Descrição é obrigatória' }),
|
||||
});
|
||||
|
||||
type DespesaFormValues = z.infer<typeof despesaSchema>;
|
||||
|
||||
interface DespesaCartaoFormSelectProps {
|
||||
cartoes: CartaoCredito[];
|
||||
onSuccess: () => void;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
export function DespesaCartaoFormSelect({ cartoes, onSuccess, onCancel }: DespesaCartaoFormSelectProps) {
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const { toast } = useToast();
|
||||
|
||||
const form = useForm<DespesaFormValues>({
|
||||
resolver: zodResolver(despesaSchema),
|
||||
defaultValues: {
|
||||
cartaoId: '',
|
||||
valor: '',
|
||||
data_despesa: new Date().toISOString().split('T')[0],
|
||||
descricao: '',
|
||||
}
|
||||
});
|
||||
|
||||
async function onSubmit(data: DespesaFormValues) {
|
||||
setIsSubmitting(true);
|
||||
|
||||
try {
|
||||
const valorNumerico = parseFloat(data.valor.replace(',', '.'));
|
||||
|
||||
if (isNaN(valorNumerico)) {
|
||||
toast({
|
||||
title: "Erro no formulário",
|
||||
description: "O valor precisa ser um número válido",
|
||||
variant: "destructive"
|
||||
});
|
||||
setIsSubmitting(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const resultado = await criarDespesa(
|
||||
data.cartaoId,
|
||||
valorNumerico,
|
||||
data.data_despesa,
|
||||
data.descricao
|
||||
);
|
||||
|
||||
if (resultado) {
|
||||
toast({
|
||||
title: "Despesa adicionada",
|
||||
description: "Despesa do cartão cadastrada com sucesso",
|
||||
});
|
||||
onSuccess();
|
||||
} else {
|
||||
toast({
|
||||
title: "Erro ao salvar",
|
||||
description: "Não foi possível salvar a despesa do cartão",
|
||||
variant: "destructive"
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Erro ao processar formulário:', error);
|
||||
toast({
|
||||
title: "Erro inesperado",
|
||||
description: "Ocorreu um erro ao processar sua solicitação",
|
||||
variant: "destructive"
|
||||
});
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
}
|
||||
|
||||
const selectedCartaoNome = form.watch('cartaoId') ?
|
||||
cartoes.find(cartao => cartao.id === form.watch('cartaoId'))?.nome : '';
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="cartaoId"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Cartão de Crédito</FormLabel>
|
||||
<Select
|
||||
onValueChange={field.onChange}
|
||||
value={field.value}
|
||||
>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Selecione um cartão" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{cartoes.map((cartao) => (
|
||||
<SelectItem key={cartao.id} value={cartao.id}>
|
||||
{cartao.nome}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{selectedCartaoNome && (
|
||||
<div className="mb-4">
|
||||
<p className="text-sm text-muted-foreground">Cartão selecionado: <span className="font-medium">{selectedCartaoNome}</span></p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="valor"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Valor</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="0,00"
|
||||
{...field}
|
||||
type="text"
|
||||
inputMode="decimal"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="data_despesa"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Data</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="date" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="descricao"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Descrição</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="Detalhes da despesa" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="flex justify-end space-x-2 pt-2">
|
||||
<Button variant="outline" type="button" onClick={onCancel} disabled={isSubmitting}>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button type="submit" disabled={isSubmitting}>
|
||||
{isSubmitting ? "Salvando..." : "Salvar"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
@ -7,7 +7,7 @@ import { Transaction } from '@/types/financialTypes';
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { getTransacoes } from '@/services/transacaoService';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { PlusCircle } from 'lucide-react';
|
||||
import { PlusCircle, CreditCard } from 'lucide-react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import {
|
||||
Dialog,
|
||||
@ -16,6 +16,9 @@ import {
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { CartaoCredito } from '@/types/cartaoTypes';
|
||||
import { getCartoes } from '@/services/cartaoCreditoService';
|
||||
import { DespesaCartaoFormSelect } from '@/components/credito/DespesaCartaoFormSelect';
|
||||
|
||||
const TransacoesPage = () => {
|
||||
const [transactions, setTransactions] = useState<Transaction[]>([]);
|
||||
@ -24,6 +27,8 @@ const TransacoesPage = () => {
|
||||
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 () => {
|
||||
@ -45,8 +50,23 @@ const TransacoesPage = () => {
|
||||
}
|
||||
};
|
||||
|
||||
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 = () => {
|
||||
@ -62,6 +82,16 @@ const TransacoesPage = () => {
|
||||
});
|
||||
};
|
||||
|
||||
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');
|
||||
@ -75,6 +105,10 @@ const TransacoesPage = () => {
|
||||
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');
|
||||
@ -97,6 +131,10 @@ const TransacoesPage = () => {
|
||||
setIsDialogOpen(true);
|
||||
};
|
||||
|
||||
const handleOpenCartaoCreditoDialog = () => {
|
||||
setIsCartaoCreditoDialogOpen(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="space-y-6">
|
||||
@ -117,6 +155,13 @@ const TransacoesPage = () => {
|
||||
<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>
|
||||
|
||||
@ -161,6 +206,7 @@ const TransacoesPage = () => {
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Dialog para transações */}
|
||||
<Dialog open={isDialogOpen} onOpenChange={handleCloseDialog}>
|
||||
<DialogContent className="sm:max-w-[500px]">
|
||||
<DialogHeader>
|
||||
@ -186,6 +232,23 @@ const TransacoesPage = () => {
|
||||
/>
|
||||
</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>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user