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

@@ -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) => {

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: '',

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",
     });
   };
 

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<
   <ToastPrimitives.Action
     ref={ref}
     className={cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive group-[.success]:border-muted/40 group-[.success]:hover:border-success/30 group-[.success]:hover:bg-success group-[.success]:hover:text-success-foreground group-[.success]:focus:ring-success",
       className
     )}
     {...props}
@@ -75,7 +77,7 @@ const ToastClose = React.forwardRef<
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 group-[.success]:text-green-300 group-[.success]:hover:text-green-50 group-[.success]:focus:ring-green-400 group-[.success]:focus:ring-offset-green-600",
       className
     )}
     toast-close=""