Admin Dashboard

The admin dashboard provides complete control over your SaaS platform with real-time insights, user management, subscription oversight, and detailed analytics.

Preview

Overview

Built with Nuxt 3 and Vue 3, the admin dashboard gives administrators comprehensive platform management capabilities through an intuitive interface.

Core Features

• Real-time metrics - Revenue, users, subscriptions
• User management - Full lifecycle control
• Subscription oversight - Billing and plan management
• Analytics dashboard - Business intelligence and reporting
• Security controls - Admin-only access with audit logging

Architecture

Main Components

/admin/
├── index.vue          # Dashboard overview with key metrics
├── users.vue          # User management interface
├── subscriptions.vue  # Subscription and billing management
└── analytics.vue      # Detailed reporting and insights

Security Layer

// Admin middleware protection
definePageMeta({
  layout: 'admin',
  middleware: 'admin'
})

// Admin verification
const isAdmin = computed(() => {
  const adminEmails = getAdminEmails()
  return adminEmails.includes(user.value?.email)
})

Dashboard Overview

Key Metrics

The main dashboard displays four critical business metrics:

const { data: stats } = await useFetch('/api/admin/stats')

// Metrics displayed:
// - Total Revenue (with MRR calculation)
// - Active Subscriptions (with churn rate)  
// - Total Users (with monthly signups)
// - Canceled Subscriptions (last 30 days)

Revenue Chart

Interactive Chart.js visualization showing revenue trends:

const createRevenueChart = () => {
  revenueChartInstance = new Chart(ctx, {
    type: 'line',
    data: {
      labels: analyticsData.value.revenue.map(d => 
        new Date(d.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
      ),
      datasets: [{
        label: 'Revenue ($)',
        data: analyticsData.value.revenue.map(d => d.revenue),
        borderColor: '#000000',
        backgroundColor: gradient,
        tension: 0.4,
        fill: true
      }]
    }
  })
}

Geographic Distribution

3D globe showing user locations worldwide:

const globePoints = computed(() => {
  return geographyData.value.cities.map(city => ({
    lat: city.lat,
    lng: city.lng,
    size: Math.max(0.01, Math.min(0.05, city.users / 20)),
    color: city.users > 10 ? '#000000' : city.users > 5 ? '#374151' : '#6b7280',
    label: city.name,
    users: city.users,
    country: city.country
  }))
})

User Management

User List with Filtering

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

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
}))

User Actions

Available actions for each user:

• View Details - Complete profile with subscription history
• Delete User - Soft delete with confirmation
• Suspend/Activate - Account status management
• Export Data - GDPR-compliant data export

Bulk Operations

const selectedUsers = ref([])

const bulkAction = async (action: string) => {
  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 }
    })
    refreshUsers()
  }
}

Subscription Management

Subscription Overview

Real-time monitoring of all subscriptions:

const { data: subscriptionsData } = await useFetch('/api/admin/subscriptions', {
  query: { 
    page: currentPage.value,
    limit: itemsPerPage.value,
    status: selectedStatus.value
  }
})

const totalRevenue = computed(() => {
  return subscriptionsData.value?.subscriptions?.reduce((sum, sub) => {
    return sum + (sub.status === 'active' ? (sub.planPrice / 100) : 0)
  }, 0) || 0
})

Subscription Actions

• Cancel Subscription - Immediate or end-of-period
• Resume Subscription - Reactivate canceled subscriptions
• Change Plan - Upgrade/downgrade with proration
• Process Refund - Direct Stripe integration

const cancelSubscription = async (subscriptionId: string) => {
  const confirmed = await showConfirmModal(
    'Cancel Subscription',
    'This action cannot be undone. Are you sure?',
    { type: 'warning' }
  )
  
  if (confirmed) {
    await $fetch('/api/subscription/cancel', {
      method: 'POST',
      body: { subscriptionId }
    })
    refreshSubscriptions()
  }
}

Analytics Dashboard

Revenue Analytics

Comprehensive revenue tracking with multiple visualizations:

const revenueChart = ref<HTMLCanvasElement>()

const createRevenueChart = () => {
  revenueChartInstance = new Chart(ctx, {
    type: 'line',
    data: {
      labels: analyticsData.value.revenue.map(d => 
        new Date(d.date).toLocaleDateString()
      ),
      datasets: [{
        label: 'Revenue',
        data: analyticsData.value.revenue.map(d => d.revenue),
        borderColor: '#000000',
        backgroundColor: 'rgba(0, 0, 0, 0.1)',
        tension: 0.4
      }]
    }
  })
}

Business Intelligence

Key performance indicators:

const kpis = computed(() => ({
  mrr: analyticsData.value?.mrr || 0,           // Monthly Recurring Revenue
  arr: (analyticsData.value?.mrr || 0) * 12,   // Annual Recurring Revenue
  churnRate: analyticsData.value?.churnRate || 0,
  ltv: analyticsData.value?.ltv || 0,          // Lifetime Value
  cac: analyticsData.value?.cac || 0           // Customer Acquisition Cost
}))

Tracking Metrics

• Signup Trends - Daily, weekly, monthly user acquisition
• Retention Rates - User engagement and churn analysis
• Geographic Distribution - User location heatmaps
• Conversion Funnels - Free to paid conversion tracking

Real-time Updates

Auto-refresh System

onMounted(() => {
  const interval = setInterval(() => {
    refreshStats()
    refreshUsers()
    refreshSubscriptions()
  }, 30000) // Refresh every 30 seconds

  onUnmounted(() => {
    clearInterval(interval)
  })
})

Live Notifications

Real-time alerts for:

• New user registrations
• Subscription changes
• Payment failures
• System alerts

Security & Access Control

Admin Verification

const getAdminEmails = () => {
  const emails = process.env.ADMIN_EMAILS || 'admin@example.com'
  return emails.split(',').map(email => email.trim())
}

// Middleware protection
export default defineNuxtRouteMiddleware((to) => {
  const user = useSupabaseUser()
  const adminEmails = getAdminEmails()
  
  if (!user.value || !adminEmails.includes(user.value.email)) {
    throw createError({
      statusCode: 403,
      statusMessage: 'Access denied'
    })
  }
})

Audit Logging

All admin actions are logged with:

• User identification
• Action performed
• Timestamp
• IP address
• Request details

API Endpoints

Admin APIs

GET  /api/admin/stats           # Dashboard metrics
GET  /api/admin/users           # User management data
GET  /api/admin/subscriptions   # Subscription data
GET  /api/admin/analytics       # Analytics data
GET  /api/admin/geography       # Geographic distribution
POST /api/admin/users/bulk      # Bulk user operations
POST /api/subscription/cancel   # Cancel subscription
POST /api/subscription/resume   # Resume subscription

Configuration

Environment Variables

# Admin access control
ADMIN_EMAILS=admin@example.com,owner@company.com

# Database access
SUPABASE_SERVICE_ROLE_KEY=your_service_role_key

# Stripe integration
STRIPE_SECRET_KEY=sk_live_...

Admin Setup

1. Set admin emails in environment variables
2. Configure database permissions for admin queries
3. Set up Stripe webhooks for real-time updates
4. Enable audit logging in your database

Performance Optimizations

Data Handling

• Lazy Loading - Components load data when needed
• Pagination - Efficient large dataset handling
• Caching - Strategic use of Nuxt caching
• Debouncing - Optimized search inputs

UI/UX Features

• Loading States - Skeleton screens during fetch
• Error Handling - Graceful error recovery
• Responsive Design - Mobile-first approach
• Accessibility - WCAG 2.1 compliance

Customization

Theme System

• Dark/light mode toggle
• Custom color schemes
• Brand-specific styling
• Responsive breakpoints

Extensions

• Custom widgets
• Third-party integrations
• Additional reporting modules
• Custom notification systems

Best Practices

Security

• Always validate admin permissions
• Use HTTPS for all communications
• Implement rate limiting
• Regular security audits

Data Management

• Use database transactions for critical operations
• Implement proper error handling
• Maintain comprehensive audit trails
• Validate all user inputs

User Experience

• Provide clear feedback for all actions
• Use confirmation modals for destructive operations
• Implement proper loading states
• Ensure responsive design across devices

Troubleshooting

Common Issues

Data not loading

• Check API endpoints and authentication
• Verify database permissions
• Check network connectivity

Permission denied errors

• Verify admin email configuration
• Check environment variables
• Confirm user authentication status

Charts not rendering

• Ensure Chart.js is properly loaded
• Check data format and structure
• Verify canvas element availability

Real-time updates failing

• Check WebSocket connections
• Verify server-side event handling
• Test network connectivity

Debug Tools

• Browser developer tools for network inspection
• Supabase dashboard for database queries
• Stripe dashboard for payment verification
• Application logs for error tracking

The admin dashboard provides complete SaaS platform management with real-time insights, comprehensive controls, and detailed analytics. Its modular architecture makes it easy to extend and customize for specific business requirements.