Admin Dashboard

pnpm add @fyit/crouton

const {
  apps,              // All registered apps
  dashboardRoutes,   // All user-facing routes
  adminRoutes,       // All admin routes
  settingsRoutes,    // All settings routes
  getApp,            // Get app by ID
  hasApp             // Check if app exists
} = useCroutonApps()

// Build navigation
const navItems = dashboardRoutes.value.map(route => ({
  label: t(route.label),
  icon: route.icon,
  to: `/dashboard/${teamSlug}/${route.path}`
}))

interface CroutonAppRoute {
  path: string          // Route path segment
  label: string         // Translation key
  icon?: string         // Heroicon name
  hidden?: boolean      // Hide from sidebar
  children?: CroutonAppRoute[]
}

interface CroutonAppConfig {
  id: string
  name: string
  icon?: string
  dashboardRoutes?: CroutonAppRoute[]
  adminRoutes?: CroutonAppRoute[]
  settingsRoutes?: CroutonAppRoute[]
}

const {
  users,           // List of users
  total,           // Total count
  page,            // Current page
  loading,         // Loading state
  error,           // Error message

  getUsers,        // Fetch users with filters
  getUser,         // Get user detail
  createUser,      // Create new user
  banUser,         // Ban a user
  unbanUser,       // Unban a user
  deleteUser       // Delete user permanently
} = useAdminUsers()

// Fetch users with filters
await getUsers({
  page: 1,
  pageSize: 20,
  search: 'john',
  status: 'active',     // 'all' | 'active' | 'banned'
  superAdmin: false,
  sortBy: 'createdAt',
  sortOrder: 'desc'
})

// Ban a user
await banUser('user-id', {
  reason: 'Spam activity',
  duration: 168  // hours (null = permanent)
})

const {
  teams,           // List of teams
  total,           // Total count
  loading,         // Loading state
  error,           // Error message

  getTeams,        // Fetch teams with filters
  getTeam          // Get team detail with members
} = useAdminTeams()

// Fetch teams
await getTeams({
  page: 1,
  pageSize: 20,
  search: 'acme',
  personal: false,
  sortBy: 'memberCount',
  sortOrder: 'desc'
})

const {
  stats,           // AdminStats object
  loading,         // Loading state
  error,           // Error message

  refresh,         // Fetch/refresh stats
  startAutoRefresh,// Start auto-refresh
  stopAutoRefresh  // Stop auto-refresh
} = useAdminStats({ autoRefresh: true, refreshInterval: 30000 })

// Stats include:
// - totalUsers, newUsersToday, newUsersWeek
// - bannedUsers, superAdminCount
// - totalTeams, newTeamsWeek
// - activeSessions

const {
  isImpersonating,     // Boolean: currently impersonating
  impersonatedUser,    // User being impersonated
  originalAdminId,     // Original admin's ID
  loading,             // Loading state

  startImpersonation,  // Start impersonating a user
  stopImpersonation,   // Return to admin account
  checkStatus          // Check current status
} = useImpersonation()

// Start impersonating
await startImpersonation('user-id')

// Stop impersonating
await stopImpersonation()

<template>
  <AdminDashboard
    :stats="preloadedStats"
    :show-quick-actions="true"
    @navigate="handleNavigation"
  />
</template>

<template>
  <AdminUserList
    :page-size="20"
    @user-selected="handleSelect"
  />
</template>

interface AdminStats {
  totalUsers: number
  newUsersToday: number
  newUsersWeek: number
  bannedUsers: number
  totalTeams: number
  newTeamsWeek: number
  activeSessions: number
  superAdminCount: number
}

interface BanPayload {
  userId: string
  reason: string
  duration: number | null  // hours, null = permanent
}

interface ImpersonationState {
  isImpersonating: boolean
  originalAdminId: string | null
  impersonatedUser: {
    id: string
    name: string
    email: string
  } | null
}