diff --git a/client/src/pages/Avoirs.tsx b/client/src/pages/Avoirs.tsx index 625661a..11eceac 100644 --- a/client/src/pages/Avoirs.tsx +++ b/client/src/pages/Avoirs.tsx @@ -145,7 +145,71 @@ export default function Avoirs() { } }); - // Initialize form + // Edit avoir mutation + const editAvoirMutation = useMutation({ + mutationFn: async ({ id, data }: { id: number, data: AvoirFormData }) => { + const response = await fetch(`/api/avoirs/${id}`, { + method: 'PUT', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify(data), + credentials: 'include', + }); + if (!response.ok) { + throw new Error('Failed to edit avoir'); + } + return response.json(); + }, + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: ['/api/avoirs'] }); + setIsEditDialogOpen(false); + setSelectedAvoir(null); + toast({ + title: "Avoir modifié", + description: "L'avoir a été modifié avec succès.", + }); + }, + onError: (error: any) => { + toast({ + title: "Erreur", + description: error.message || "Erreur lors de la modification", + variant: "destructive", + }); + } + }); + + // Delete avoir mutation + const deleteAvoirMutation = useMutation({ + mutationFn: async (id: number) => { + const response = await fetch(`/api/avoirs/${id}`, { + method: 'DELETE', + credentials: 'include', + }); + if (!response.ok) { + throw new Error('Failed to delete avoir'); + } + return response.json(); + }, + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: ['/api/avoirs'] }); + setIsDeleteDialogOpen(false); + setSelectedAvoir(null); + toast({ + title: "Avoir supprimé", + description: "L'avoir a été supprimé avec succès.", + }); + }, + onError: (error: any) => { + toast({ + title: "Erreur", + description: error.message || "Erreur lors de la suppression", + variant: "destructive", + }); + } + }); + + // Initialize create form const form = useForm({ resolver: zodResolver(avoirSchema), defaultValues: { @@ -158,11 +222,59 @@ export default function Avoirs() { }, }); + // Initialize edit form + const editForm = useForm({ + resolver: zodResolver(avoirSchema), + defaultValues: { + supplierId: 0, + groupId: 0, + invoiceReference: "", + amount: undefined, + comment: "", + commercialProcessed: false, + }, + }); + // Handle form submission const onSubmit = (data: AvoirFormData) => { createAvoirMutation.mutate(data); }; + // Handle edit form submission + const onEditSubmit = (data: AvoirFormData) => { + if (selectedAvoir) { + editAvoirMutation.mutate({ id: selectedAvoir.id, data }); + } + }; + + // Handle edit action + const handleEdit = (avoir: Avoir) => { + setSelectedAvoir(avoir); + editForm.reset({ + supplierId: avoir.supplierId, + groupId: avoir.groupId, + invoiceReference: avoir.invoiceReference || "", + amount: avoir.amount, + comment: avoir.comment || "", + commercialProcessed: avoir.commercialProcessed, + status: avoir.status, + }); + setIsEditDialogOpen(true); + }; + + // Handle delete action + const handleDelete = (avoir: Avoir) => { + setSelectedAvoir(avoir); + setIsDeleteDialogOpen(true); + }; + + // Confirm delete + const confirmDelete = () => { + if (selectedAvoir) { + deleteAvoirMutation.mutate(selectedAvoir.id); + } + }; + // Filter avoirs based on search term const filteredAvoirs = avoirs.filter(avoir => avoir.invoiceReference?.toLowerCase().includes(searchTerm.toLowerCase()) || @@ -525,6 +637,7 @@ export default function Avoirs() { size="sm" className="h-8 w-8 p-0" title="Modifier" + onClick={() => handleEdit(avoir)} > @@ -533,6 +646,7 @@ export default function Avoirs() { size="sm" className="h-8 w-8 p-0 text-red-600 hover:text-red-700 hover:bg-red-50" title="Supprimer" + onClick={() => handleDelete(avoir)} > @@ -549,6 +663,187 @@ export default function Avoirs() { )} + + {/* Edit Modal */} + + + + Modifier l'avoir + + Modifiez les informations de l'avoir. + + + +
+ + ( + + Fournisseur * + + + + )} + /> + + ( + + Référence facture + + + + + + )} + /> + + ( + + Montant + + + + + + )} + /> + + ( + + Statut + + + + )} + /> + + ( + + Commentaire + +