Skip to Content
ClientComponentsAdmin Components

Admin Components

Components for building admin dashboards and user management interfaces.

Components

UserDetailCard

Display detailed user information.

Location: src/components/Admin/UserDetailCard.tsx

Shows:

  • User name and email
  • Account creation date
  • Admin status
  • Identity providers

BillingDetailsCard

Display user billing and subscription information.

Location: src/components/Admin/BillingDetailsCard.tsx

Shows:

  • Current plan
  • Subscription status
  • Stripe customer ID
  • Billing history

StatsCard

Display statistics and metrics.

Location: src/components/Admin/StatsCard.tsx

Shows:

  • Total users
  • Active subscriptions
  • Revenue metrics
  • Growth stats

ModalEditUser

Modal for editing user information.

Location: src/components/Admin/ModalEditUser.tsx

Allows editing:

  • Display name
  • Email
  • Admin status

ModalDeleteUser

Confirmation modal for deleting users.

Location: src/components/Admin/ModalDeleteUser.tsx

Features:

  • Confirmation dialog
  • Soft delete option
  • Cascade delete warning

IdentityProvidersList

List of user’s authentication providers.

Location: src/components/Admin/IdentityProvidersList.tsx

Shows:

  • Email/password
  • Google OAuth
  • Other connected providers

Admin Page

The main admin page is at /app/admin/page.tsx.

Features:

  • User list with search
  • Filtering by plan/status
  • Pagination
  • Quick actions

User Detail Page

Individual user pages at /app/admin/user/[id]/page.tsx.

Features:

  • Full user details
  • Billing information
  • Edit/delete actions
  • Activity log

Protecting Admin Routes

Admin routes should be protected with middleware or auth checks:

app/admin/page.tsx
import { getServerSession } from 'next-auth'
 
export default async function AdminPage() {
  const session = await getServerSession()
  
  if (!session?.user?.isAdmin) {
    redirect('/auth/login')
  }
  
  // Admin content
}

Next Steps

Last updated on
ComponentsButtons