From 04aff6fbbe8dd0c7e79870838795184315c31c9b Mon Sep 17 00:00:00 2001 From: michaelschal <35957947-michaelschal@users.noreply.replit.com> Date: Wed, 9 Jul 2025 19:21:31 +0000 Subject: [PATCH] Improve the way users confirm deletions of sales and user accounts Replaces native confirm() dialogs with AlertDialog modals from shadcn/ui in SalesHistory and Administration components. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 91318273-c764-4fd4-be04-bdc12c38af32 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/0715008c-7244-40f4-befc-26c014852236/af392dda-fd07-4339-ad27-aa15ea23c8ed.jpg --- client/src/components/Administration.tsx | 91 ++++++++++++++++++------ client/src/components/SalesHistory.tsx | 49 +++++++++---- replit.md | 9 ++- 3 files changed, 112 insertions(+), 37 deletions(-) diff --git a/client/src/components/Administration.tsx b/client/src/components/Administration.tsx index 17eef92..a286edd 100644 --- a/client/src/components/Administration.tsx +++ b/client/src/components/Administration.tsx @@ -7,6 +7,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogDescription } from "@/components/ui/dialog"; +import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog"; import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"; import { Badge } from "@/components/ui/badge"; import { useForm } from "react-hook-form"; @@ -258,16 +259,12 @@ export default function Administration() { }); }; - const handleDeleteUser = async (user: User) => { - if (window.confirm(`Êtes-vous sûr de vouloir supprimer l'utilisateur "${user.username}" ?`)) { - await deleteUserMutation.mutateAsync(user.id); - } + const handleDeleteUser = (user: User) => { + deleteUserMutation.mutate(user.id); }; - const handleDeleteStore = async (store: Store) => { - if (window.confirm(`Êtes-vous sûr de vouloir supprimer le magasin "${store.name}" ?`)) { - await deleteStoreMutation.mutateAsync(store.id); - } + const handleDeleteStore = (store: Store) => { + deleteStoreMutation.mutate(store.id); }; const getRoleBadge = (role: string) => { @@ -518,14 +515,38 @@ export default function Administration() { > - + + + + + + + Confirmer la suppression + + Êtes-vous sûr de vouloir supprimer l'utilisateur "{user.username}" ? Cette action est irréversible. +

+ Nom complet : {user.firstName} {user.lastName}
+ Email : {user.email || "Non renseigné"}
+ Rôle : {user.role} + + + + Annuler + handleDeleteUser(user)} + className="bg-red-600 hover:bg-red-700" + > + Supprimer + + + + @@ -819,13 +840,37 @@ export default function Administration() { > - + + + + + + + Confirmer la suppression + + Êtes-vous sûr de vouloir supprimer le magasin "{store.name}" ? Cette action est irréversible. +

+ Adresse : {store.address || "Non renseignée"}
+ Téléphone : {store.phone || "Non renseigné"}
+ Email : {store.email || "Non renseigné"} + + + + Annuler + handleDeleteStore(store)} + className="bg-red-600 hover:bg-red-700" + > + Supprimer + + + + diff --git a/client/src/components/SalesHistory.tsx b/client/src/components/SalesHistory.tsx index 6527e7f..ea9c679 100644 --- a/client/src/components/SalesHistory.tsx +++ b/client/src/components/SalesHistory.tsx @@ -4,7 +4,8 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'; -import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'; +import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogFooter, DialogDescription } from '@/components/ui/dialog'; +import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog'; import { useToast } from '@/hooks/use-toast'; import { useStoreContext } from '@/hooks/useStoreContext'; import { useAuth } from '@/hooks/useAuth'; @@ -70,10 +71,8 @@ export default function SalesHistory({ canDelete = false }: SalesHistoryProps) { }, }); - const handleDeleteSale = async (sale: Sale) => { - if (confirm(`Êtes-vous sûr de vouloir supprimer cette vente ?`)) { - deleteSaleMutation.mutate(sale.id); - } + const handleDeleteSale = (sale: Sale) => { + deleteSaleMutation.mutate(sale.id); }; const exportToCSV = () => { @@ -280,14 +279,38 @@ export default function SalesHistory({ canDelete = false }: SalesHistoryProps) { {canDelete && ( - + + + + + + + Confirmer la suppression + + Êtes-vous sûr de vouloir supprimer cette vente ? Cette action est irréversible. +

+ Client : {sale.nom} {sale.prenom}
+ Article : {sale.typeArticle}
+ Date : {formatDateTime(sale.timestamp!)} + + + + Annuler + handleDeleteSale(sale)} + className="bg-red-600 hover:bg-red-700" + > + Supprimer + + + + )} diff --git a/replit.md b/replit.md index 5c142b3..fe1423d 100644 --- a/replit.md +++ b/replit.md @@ -151,4 +151,11 @@ Preferred communication style: Simple, everyday language. - ✅ Generated default admin account (admin/admin123) for initial setup - ✅ Updated all components to work with database instead of local storage - ✅ Added session-based authentication with PostgreSQL session store -- ✅ Implemented comprehensive API with proper validation and error handling \ No newline at end of file +- ✅ Implemented comprehensive API with proper validation and error handling + +### User Experience Improvements (January 9, 2025) +- ✅ Fixed authentication flow issues with login/logout redirects +- ✅ Replaced native browser confirm() dialogs with modern AlertDialog modals +- ✅ Enhanced deletion confirmations in sales history and administration panels +- ✅ Improved visual feedback with detailed confirmation dialogs showing item details +- ✅ Added proper modal management with shadcn/ui AlertDialog components \ No newline at end of file