fixes, theming, branding

components/admin/AdminUserManagement.tsx

@@ -7,6 +7,17 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Badge } from '@/components/ui/badge';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from '@/components/ui/alert-dialog';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
 import { useToast } from '@/hooks/use-toast';
@@ -35,7 +46,9 @@ export function AdminUserManagement() {
 	const [searchTerm, setSearchTerm] = useState('');
 	const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
 	const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
+	const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
 	const [editingUser, setEditingUser] = useState<User | null>(null);
+	const [userToDelete, setUserToDelete] = useState<User | null>(null);
 	const [formData, setFormData] = useState<UserFormData>({
 		name: '',
 		surname: '',
@@ -184,12 +197,21 @@ export function AdminUserManagement() {
 		}
 	};
 
+	const openDeleteDialog = (user: User) => {
+		setUserToDelete(user);
+		setIsDeleteDialogOpen(true);
+	};
+
+	const confirmDeleteUser = async () => {
+		if (userToDelete) {
+			await handleDeleteUser(userToDelete.id);
+			setIsDeleteDialogOpen(false);
+			setUserToDelete(null);
+		}
+	};
+
 	const handleDeleteUser = async (userId: string) => {
 		try {
-			if (!confirm('Are you sure you want to delete this user? This action cannot be undone.')) {
-				return;
-			}
-
 			const response = await fetch(`/api/admin/users/${userId}`, {
 				method: 'DELETE',
 			});
@@ -406,7 +428,7 @@ export function AdminUserManagement() {
 											<Button
 												variant='outline'
 												size='sm'
-												onClick={() => handleDeleteUser(user.id)}
+												onClick={() => openDeleteDialog(user)}
 												className='text-red-600 hover:text-red-700'
 											>
 												<Trash2 className='h-4 w-4' />
@@ -498,6 +520,29 @@ export function AdminUserManagement() {
 					</div>
 				</DialogContent>
 			</Dialog>
+
+			{/* Delete Confirmation Dialog */}
+			<AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>Are you sure?</AlertDialogTitle>
+						<AlertDialogDescription>
+							Are you sure you want to delete{' '}
+							{userToDelete ? `${userToDelete.name} ${userToDelete.surname}` : 'this user'}? This action
+							cannot be undone.
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					<AlertDialogFooter>
+						<AlertDialogCancel>Cancel</AlertDialogCancel>
+						<AlertDialogAction
+							onClick={confirmDeleteUser}
+							className='bg-destructive hover:bg-destructive/90'
+						>
+							Delete
+						</AlertDialogAction>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
 		</div>
 	);
 }