From b2ac262871d4b35e016dcd4eb4ce0114a5e38f78 Mon Sep 17 00:00:00 2001 From: michaelschal <35957947-michaelschal@users.noreply.replit.com> Date: Thu, 10 Jul 2025 00:11:56 +0000 Subject: [PATCH] Improve user experience by providing colored notifications for operations Modify toast notifications to display success messages in green and errors in red using the "variant" property in Administration.tsx, NewSaleForm.tsx, and SalesHistory.tsx. Replit-Commit-Author: Agent Replit-Commit-Session-Id: dec54137-d5a2-4406-8ad4-5f2f9fb110bf Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/0715008c-7244-40f4-befc-26c014852236/5aef45ab-dd7f-4d72-856e-de1c85394516.jpg --- client/src/components/Administration.tsx | 18 +++++++++++------- client/src/components/NewSaleForm.tsx | 1 + client/src/components/SalesHistory.tsx | 3 +++ client/src/components/ui/toast.tsx | 8 +++++--- 4 files changed, 20 insertions(+), 10 deletions(-) diff --git a/client/src/components/Administration.tsx b/client/src/components/Administration.tsx index d820cd1..d17d159 100644 --- a/client/src/components/Administration.tsx +++ b/client/src/components/Administration.tsx @@ -113,7 +113,7 @@ export default function Administration() { queryClient.invalidateQueries({ queryKey: ['/api/admin/users'] }); setIsUserDialogOpen(false); userForm.reset(); - toast({ title: "Utilisateur créé avec succès" }); + toast({ title: "Utilisateur créé avec succès", variant: "success" }); }, onError: () => { toast({ title: "Erreur", description: "Impossible de créer l'utilisateur", variant: "destructive" }); @@ -133,7 +133,7 @@ export default function Administration() { queryClient.invalidateQueries({ queryKey: ['/api/admin/users'] }); setEditingUser(null); editUserForm.reset(); - toast({ title: "Utilisateur modifié avec succès" }); + toast({ title: "Utilisateur modifié avec succès", variant: "success" }); }, onError: (error) => { let errorMessage = "Impossible de modifier l'utilisateur"; @@ -152,7 +152,7 @@ export default function Administration() { }, onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['/api/admin/users'] }); - toast({ title: "Utilisateur supprimé avec succès" }); + toast({ title: "Utilisateur supprimé avec succès", variant: "success" }); }, onError: () => { toast({ title: "Erreur", description: "Impossible de supprimer l'utilisateur", variant: "destructive" }); @@ -172,7 +172,7 @@ export default function Administration() { queryClient.invalidateQueries({ queryKey: ['/api/admin/stores'] }); setIsStoreDialogOpen(false); storeForm.reset(); - toast({ title: "Magasin créé avec succès" }); + toast({ title: "Magasin créé avec succès", variant: "success" }); }, onError: () => { toast({ title: "Erreur", description: "Impossible de créer le magasin", variant: "destructive" }); @@ -192,7 +192,7 @@ export default function Administration() { queryClient.invalidateQueries({ queryKey: ['/api/admin/stores'] }); setEditingStore(null); editStoreForm.reset(); - toast({ title: "Magasin modifié avec succès" }); + toast({ title: "Magasin modifié avec succès", variant: "success" }); }, onError: () => { toast({ title: "Erreur", description: "Impossible de modifier le magasin", variant: "destructive" }); @@ -205,7 +205,7 @@ export default function Administration() { }, onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['/api/admin/stores'] }); - toast({ title: "Magasin supprimé avec succès" }); + toast({ title: "Magasin supprimé avec succès", variant: "success" }); }, onError: () => { toast({ title: "Erreur", description: "Impossible de supprimer le magasin", variant: "destructive" }); @@ -329,6 +329,7 @@ export default function Administration() { toast({ title: "Sauvegarde exportée", description: "Le fichier de sauvegarde a été téléchargé", + variant: "success", }); }, onError: () => { @@ -354,6 +355,7 @@ export default function Administration() { toast({ title: "Sauvegarde importée", description: "Les données ont été restaurées avec succès", + variant: "success", }); }, onError: () => { @@ -377,6 +379,7 @@ export default function Administration() { toast({ title: "Sauvegarde créée", description: `Sauvegarde automatique créée: ${data.filename}`, + variant: "success", }); }, onError: (error) => { @@ -430,7 +433,8 @@ export default function Administration() { queryClient.invalidateQueries({ queryKey: ['/api/sales'] }); toast({ title: "Purge exécutée avec succès", - description: result.message || `${result.deletedCount} vente(s) supprimée(s)` + description: result.message || `${result.deletedCount} vente(s) supprimée(s)`, + variant: "success" }); }, onError: (error: any) => { diff --git a/client/src/components/NewSaleForm.tsx b/client/src/components/NewSaleForm.tsx index 6368168..fe56abc 100644 --- a/client/src/components/NewSaleForm.tsx +++ b/client/src/components/NewSaleForm.tsx @@ -82,6 +82,7 @@ export default function NewSaleForm() { toast({ title: "Vente enregistrée", description: "La vente a été enregistrée avec succès", + variant: "success", }); form.reset({ vendeur: '', diff --git a/client/src/components/SalesHistory.tsx b/client/src/components/SalesHistory.tsx index 9d77a12..479b33a 100644 --- a/client/src/components/SalesHistory.tsx +++ b/client/src/components/SalesHistory.tsx @@ -60,6 +60,7 @@ export default function SalesHistory({ canDelete = false }: SalesHistoryProps) { toast({ title: "Vente supprimée", description: "La vente a été supprimée avec succès", + variant: "success", }); }, onError: () => { @@ -169,6 +170,7 @@ export default function SalesHistory({ canDelete = false }: SalesHistoryProps) { toast({ title: "Export PDF réussi", description: `${sales.length} ventes exportées en PDF`, + variant: "success", }); } catch (error) { console.error('Erreur lors de l\'export PDF:', error); @@ -238,6 +240,7 @@ export default function SalesHistory({ canDelete = false }: SalesHistoryProps) { toast({ title: "Export réussi", description: `${sales.length} ventes exportées`, + variant: "success", }); }; diff --git a/client/src/components/ui/toast.tsx b/client/src/components/ui/toast.tsx index a822477..6f9a476 100644 --- a/client/src/components/ui/toast.tsx +++ b/client/src/components/ui/toast.tsx @@ -29,7 +29,9 @@ const toastVariants = cva( variant: { default: "border bg-background text-foreground", destructive: - "destructive group border-destructive bg-destructive text-destructive-foreground", + "destructive group border-red-500 bg-red-500 text-white", + success: + "success group border-green-500 bg-green-500 text-white", }, }, defaultVariants: { @@ -60,7 +62,7 @@ const ToastAction = React.forwardRef<