/** * UserActionMenu Component * Dropdown menu for user row actions (Edit, Activate/Deactivate, Delete) */ 'use client'; import { useState } from 'react'; import { MoreHorizontal, Edit, CheckCircle, XCircle, Trash } from 'lucide-react'; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from '@/components/ui/alert-dialog'; import { Button } from '@/components/ui/button'; import { toast } from 'sonner'; import { useActivateUser, useDeactivateUser, useDeleteUser, type User, } from '@/lib/api/hooks/useAdmin'; interface UserActionMenuProps { user: User; isCurrentUser: boolean; onEdit?: (user: User) => void; } type ConfirmAction = 'delete' | 'deactivate' | null; export function UserActionMenu({ user, isCurrentUser, onEdit }: UserActionMenuProps) { const [confirmAction, setConfirmAction] = useState(null); const [dropdownOpen, setDropdownOpen] = useState(false); const activateUser = useActivateUser(); const deactivateUser = useDeactivateUser(); const deleteUser = useDeleteUser(); const fullName = user.last_name ? `${user.first_name} ${user.last_name}` : user.first_name; // Handle activate action const handleActivate = async () => { try { await activateUser.mutateAsync(user.id); toast.success(`${fullName} has been activated successfully.`); } catch (error) { toast.error(error instanceof Error ? error.message : 'Failed to activate user'); } }; // Handle deactivate action const handleDeactivate = async () => { try { await deactivateUser.mutateAsync(user.id); toast.success(`${fullName} has been deactivated successfully.`); } catch (error) { toast.error(error instanceof Error ? error.message : 'Failed to deactivate user'); } finally { setConfirmAction(null); } }; // Handle delete action const handleDelete = async () => { try { await deleteUser.mutateAsync(user.id); toast.success(`${fullName} has been deleted successfully.`); } catch (error) { toast.error(error instanceof Error ? error.message : 'Failed to delete user'); } finally { setConfirmAction(null); } }; // Handle edit action const handleEdit = () => { setDropdownOpen(false); if (onEdit) { onEdit(user); } }; // Render confirmation dialog const renderConfirmDialog = () => { if (!confirmAction) return null; const isDelete = confirmAction === 'delete'; const title = isDelete ? 'Delete User' : 'Deactivate User'; const description = isDelete ? `Are you sure you want to delete ${fullName}? This action cannot be undone.` : `Are you sure you want to deactivate ${fullName}? They will not be able to log in until reactivated.`; const action = isDelete ? handleDelete : handleDeactivate; const actionLabel = isDelete ? 'Delete' : 'Deactivate'; return ( setConfirmAction(null)}> {title} {description} Cancel {actionLabel} ); }; return ( <> Edit User {user.is_active ? ( setConfirmAction('deactivate')} disabled={isCurrentUser} > Deactivate ) : ( Activate )} setConfirmAction('delete')} disabled={isCurrentUser} className="text-destructive focus:text-destructive" > Delete User {renderConfirmDialog()} ); }