User Management

Complete user lifecycle management with advanced filtering, bulk operations, and detailed user insights.

Preview

Overview

The user management interface provides administrators with comprehensive control over user accounts, including registration tracking, subscription management, and account lifecycle operations.

User List Interface

Data Fetching

const { data: usersData, refresh: refreshUsers } = await useFetch('/api/admin/users', {
  query: { 
    page: currentPage.value,
    limit: itemsPerPage.value,
    search: searchQuery.value,
    status: selectedStatus.value,
    plan: selectedPlan.value
  }
})

User Statistics

Real-time user metrics displayed at the top of the interface:

const userStats = computed(() => ({
  total: usersData.value?.total || 0,
  active: usersData.value?.users?.filter(u => u.subscription_status === 'active').length || 0,
  inactive: usersData.value?.users?.filter(u => u.subscription_status === 'inactive').length || 0,
  canceled: usersData.value?.users?.filter(u => u.subscription_status === 'canceled').length || 0,
  trial: usersData.value?.users?.filter(u => u.subscription_status === 'trialing').length || 0
}))

Filtering & Search

Advanced Filters

• Search by name/email - Real-time search with debouncing
• Filter by status - Active, Inactive, Canceled, Trial
• Filter by plan - Free, Pro, Enterprise
• Date range - Registration date filtering
• Payment status - Current, Past Due, Failed

const filters = reactive({
  search: '',
  status: 'all',
  plan: 'all',
  dateRange: {
    start: null,
    end: null
  },
  paymentStatus: 'all'
})

// Debounced search
const debouncedSearch = debounce((query) => {
  filters.search = query
  currentPage.value = 1
  refreshUsers()
}, 300)

User Actions

Individual User Actions

Each user row provides quick actions:

const userActions = [
  {
    label: 'View Details',
    icon: 'eye',
    action: (user) => showUserDetails(user),
    color: 'blue'
  },
  {
    label: 'Edit Profile',
    icon: 'edit',
    action: (user) => editUser(user),
    color: 'green'
  },
  {
    label: 'Suspend Account',
    icon: 'ban',
    action: (user) => suspendUser(user),
    color: 'yellow',
    condition: (user) => user.status !== 'suspended'
  },
  {
    label: 'Delete User',
    icon: 'trash',
    action: (user) => deleteUser(user),
    color: 'red'
  }
]

User Details Modal

Comprehensive user information display:

const showUserDetails = (user) => {
  selectedUser.value = user
  
  // Fetch additional user data
  $fetch(`/api/admin/users/${user.id}/details`).then(details => {
    userDetails.value = {
      ...user,
      ...details,
      subscriptionHistory: details.subscriptions,
      paymentHistory: details.payments,
      activityLog: details.activities
    }
    showDetailsModal.value = true
  })
}

Bulk Operations

Selection System

const selectedUsers = ref([])
const selectAll = ref(false)

const toggleSelectAll = () => {
  if (selectAll.value) {
    selectedUsers.value = usersData.value.users.map(u => u.id)
  } else {
    selectedUsers.value = []
  }
}

const toggleUserSelection = (userId) => {
  const index = selectedUsers.value.indexOf(userId)
  if (index > -1) {
    selectedUsers.value.splice(index, 1)
  } else {
    selectedUsers.value.push(userId)
  }
}

Bulk Actions

const bulkActions = [
  {
    label: 'Export Selected',
    action: 'export',
    icon: 'download',
    color: 'blue'
  },
  {
    label: 'Send Email',
    action: 'email',
    icon: 'mail',
    color: 'green'
  },
  {
    label: 'Suspend Accounts',
    action: 'suspend',
    icon: 'ban',
    color: 'yellow',
    requiresConfirmation: true
  },
  {
    label: 'Delete Users',
    action: 'delete',
    icon: 'trash',
    color: 'red',
    requiresConfirmation: true
  }
]

const executeBulkAction = async (action) => {
  if (selectedUsers.value.length === 0) {
    toast.warning('No users selected')
    return
  }

  const confirmed = await showConfirmModal(
    `Bulk ${action}`,
    `Are you sure you want to ${action} ${selectedUsers.value.length} users?`
  )
  
  if (confirmed) {
    await $fetch('/api/admin/users/bulk', {
      method: 'POST',
      body: { 
        userIds: selectedUsers.value, 
        action,
        adminId: user.value.id
      }
    })
    
    selectedUsers.value = []
    refreshUsers()
    toast.success(`Bulk ${action} completed successfully`)
  }
}

User Profile Management

Edit User Profile

const editUser = (user) => {
  editingUser.value = { ...user }
  showEditModal.value = true
}

const updateUser = async () => {
  try {
    await $fetch(`/api/admin/users/${editingUser.value.id}`, {
      method: 'PUT',
      body: {
        full_name: editingUser.value.full_name,
        email: editingUser.value.email,
        subscription_status: editingUser.value.subscription_status,
        has_access: editingUser.value.has_access
      }
    })
    
    showEditModal.value = false
    refreshUsers()
    toast.success('User updated successfully')
  } catch (error) {
    toast.error('Failed to update user')
  }
}

Account Status Management

const suspendUser = async (user) => {
  const confirmed = await showConfirmModal(
    'Suspend User Account',
    `Are you sure you want to suspend ${user.full_name}'s account?`
  )
  
  if (confirmed) {
    await $fetch(`/api/admin/users/${user.id}/suspend`, {
      method: 'POST',
      body: { reason: 'Administrative action' }
    })
    
    refreshUsers()
    toast.success('User account suspended')
  }
}

const deleteUser = async (user) => {
  const confirmed = await showConfirmModal(
    'Delete User Account',
    `This will permanently delete ${user.full_name}'s account and all associated data. This action cannot be undone.`,
    { type: 'danger' }
  )
  
  if (confirmed) {
    await $fetch(`/api/admin/users/${user.id}`, {
      method: 'DELETE'
    })
    
    refreshUsers()
    toast.success('User account deleted')
  }
}

Data Export

User Data Export

GDPR-compliant data export functionality:

const exportUsers = async (format = 'csv') => {
  const exportData = {
    users: selectedUsers.value.length > 0 ? selectedUsers.value : 'all',
    format,
    fields: [
      'id', 'email', 'full_name', 'subscription_status', 
      'created_at', 'last_login', 'plan_name'
    ],
    filters: filters
  }
  
  const response = await $fetch('/api/admin/users/export', {
    method: 'POST',
    body: exportData
  })
  
  // Download file
  const blob = new Blob([response.data], { 
    type: format === 'csv' ? 'text/csv' : 'application/json' 
  })
  const url = window.URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = `users-export-${new Date().toISOString().split('T')[0]}.${format}`
  a.click()
  
  toast.success('User data exported successfully')
}

User Analytics

Registration Trends

const registrationStats = computed(() => {
  const now = new Date()
  const thirtyDaysAgo = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000)
  
  const recentUsers = usersData.value?.users?.filter(user => 
    new Date(user.created_at) >= thirtyDaysAgo
  ) || []
  
  return {
    last30Days: recentUsers.length,
    dailyAverage: Math.round(recentUsers.length / 30),
    growthRate: calculateGrowthRate(recentUsers)
  }
})

User Engagement Metrics

const engagementMetrics = computed(() => ({
  activeUsers: usersData.value?.users?.filter(u => {
    const lastLogin = new Date(u.last_login)
    const sevenDaysAgo = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000)
    return lastLogin >= sevenDaysAgo
  }).length || 0,
  
  dormantUsers: usersData.value?.users?.filter(u => {
    const lastLogin = new Date(u.last_login)
    const thirtyDaysAgo = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000)
    return lastLogin < thirtyDaysAgo
  }).length || 0
}))

Pagination & Performance

Efficient Pagination

const pagination = reactive({
  currentPage: 1,
  itemsPerPage: 25,
  totalItems: 0,
  totalPages: 0
})

const paginationOptions = [10, 25, 50, 100]

const goToPage = (page) => {
  pagination.currentPage = page
  refreshUsers()
}

const changeItemsPerPage = (newLimit) => {
  pagination.itemsPerPage = newLimit
  pagination.currentPage = 1
  refreshUsers()
}

Real-time Updates

Live User Status

// WebSocket connection for real-time updates
const { $socket } = useNuxtApp()

onMounted(() => {
  $socket.on('user:registered', (userData) => {
    // Add new user to the list
    if (usersData.value?.users) {
      usersData.value.users.unshift(userData)
      usersData.value.total++
    }
    toast.success(`New user registered: ${userData.email}`)
  })
  
  $socket.on('user:subscription_changed', (update) => {
    // Update user subscription status
    const userIndex = usersData.value?.users?.findIndex(u => u.id === update.userId)
    if (userIndex !== -1) {
      usersData.value.users[userIndex].subscription_status = update.status
    }
  })
})

API Endpoints

User Management APIs

GET  /api/admin/users                    # List users with filtering
GET  /api/admin/users/:id                # Get user details
GET  /api/admin/users/:id/details        # Get comprehensive user data
PUT  /api/admin/users/:id                # Update user profile
POST /api/admin/users/:id/suspend        # Suspend user account
DELETE /api/admin/users/:id              # Delete user account
POST /api/admin/users/bulk               # Bulk operations
POST /api/admin/users/export             # Export user data

Security Considerations

Data Protection

• All user data access is logged
• Sensitive information is masked in lists
• Full data only shown to authorized admins
• GDPR compliance for data export/deletion

Access Control

// Verify admin permissions for sensitive operations
const requiresSuperAdmin = ['delete', 'bulk_delete', 'export_all']

const checkPermissions = (action) => {
  const isSuperAdmin = process.env.SUPER_ADMIN_EMAILS?.includes(user.value.email)
  
  if (requiresSuperAdmin.includes(action) && !isSuperAdmin) {
    throw createError({
      statusCode: 403,
      statusMessage: 'Super admin access required'
    })
  }
}

The user management interface provides comprehensive tools for managing your SaaS platform's user base while maintaining security and compliance with data protection regulations.