Admin Panel: Managing Your SaaS

// src/app/(admin)/layout.tsx
import { auth } from '@/lib/auth';
import { redirect } from 'next/navigation';
import { AdminSidebar } from '@/components/admin/admin-sidebar';
import { AdminHeader } from '@/components/admin/admin-header';

export default async function AdminLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const session = await auth();

  // Redirect non-admins
  if (!session?.user || session.user.role !== 'admin') {
    redirect('/dashboard');
  }

  return (
    <div className="flex h-screen">
      <AdminSidebar />
      <div className="flex-1 flex flex-col overflow-hidden">
        <AdminHeader user={session.user} />
        <main className="flex-1 overflow-y-auto p-6 bg-background">
          {children}
        </main>
      </div>
    </div>
  );
}

// middleware.ts
import { auth } from '@/lib/auth';
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export async function middleware(request: NextRequest) {
  // Protect admin routes
  if (request.nextUrl.pathname.startsWith('/admin')) {
    const session = await auth();

    if (!session?.user) {
      return NextResponse.redirect(new URL('/login', request.url));
    }

    if (session.user.role !== 'admin') {
      return NextResponse.redirect(new URL('/dashboard', request.url));
    }
  }

  return NextResponse.next();
}

export const config = {
  matcher: ['/admin/:path*'],
};

// lib/admin/rbac.ts
export type AdminRole = 'super_admin' | 'admin' | 'support';

export const ADMIN_PERMISSIONS = {
  super_admin: [
    'users:read',
    'users:write',
    'users:delete',
    'users:impersonate',
    'subscriptions:read',
    'subscriptions:write',
    'subscriptions:refund',
    'flags:read',
    'flags:write',
    'logs:read',
    'settings:read',
    'settings:write',
  ],
  admin: [
    'users:read',
    'users:write',
    'users:impersonate',
    'subscriptions:read',
    'subscriptions:write',
    'flags:read',
    'flags:write',
    'logs:read',
    'settings:read',
  ],
  support: [
    'users:read',
    'users:impersonate',
    'subscriptions:read',
    'logs:read',
  ],
} as const;

export function hasPermission(
  role: AdminRole,
  permission: string
): boolean {
  return ADMIN_PERMISSIONS[role]?.includes(permission) ?? false;
}

export function requirePermission(permission: string) {
  return async function (session: Session | null) {
    if (!session?.user || session.user.role === 'user') {
      throw new Error('Unauthorized');
    }

    if (!hasPermission(session.user.role as AdminRole, permission)) {
      throw new Error('Forbidden');
    }

    return session;
  };
}

// lib/admin/protect-api.ts
import { auth } from '@/lib/auth';
import { hasPermission } from './rbac';

export function withAdminAuth(
  handler: (req: Request, session: Session) => Promise<Response>,
  permission?: string
) {
  return async (request: Request) => {
    const session = await auth();

    if (!session?.user) {
      return Response.json({ error: 'Unauthorized' }, { status: 401 });
    }

    if (session.user.role === 'user') {
      return Response.json({ error: 'Forbidden' }, { status: 403 });
    }

    if (permission && !hasPermission(session.user.role, permission)) {
      return Response.json({ error: 'Forbidden' }, { status: 403 });
    }

    return handler(request, session);
  };
}

// Usage in API route
export const GET = withAdminAuth(
  async (request, session) => {
    const users = await prisma.user.findMany();
    return Response.json({ users });
  },
  'users:read'
);

// components/admin/admin-dashboard.tsx
import { Card } from '@/components/ui/card';
import { mode } from '@/design-system';
import { cn } from '@/lib/utils';
import { LineChart } from '@/components/charts/line-chart';
import { BarChart } from '@/components/charts/bar-chart';
import { Gauge } from '@/components/charts/gauge';

interface AdminDashboardProps {
  stats: {
    totalUsers: number;
    activeUsers: number;
    mrr: number;
    mrrChange: number;
    churnRate: number;
    trialConversion: number;
    activeSubscriptions: number;
    pendingTickets: number;
  };
  revenueData: Array<{ date: string; amount: number }>;
  userGrowthData: Array<{ month: string; users: number }>;
  recentActivity: Array<{
    id: string;
    action: string;
    user: string;
    timestamp: Date;
  }>;
}

export function AdminDashboard({
  stats,
  revenueData,
  userGrowthData,
  recentActivity,
}: AdminDashboardProps) {
  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="font-mono text-2xl font-semibold">ADMIN DASHBOARD</h1>
          <p className="text-muted-foreground font-mono text-xs">
            System overview and key metrics
          </p>
        </div>
        <div className="flex items-center gap-2">
          <span className="font-mono text-xs text-muted-foreground">
            Last updated: {new Date().toLocaleTimeString()}
          </span>
        </div>
      </div>

      {/* KPI Cards */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        <KPICard
          label="TOTAL USERS"
          value={stats.totalUsers.toLocaleString()}
          subValue={`${stats.activeUsers} active`}
        />
        <KPICard
          label="MRR"
          value={`$${stats.mrr.toLocaleString()}`}
          change={stats.mrrChange}
        />
        <KPICard
          label="CHURN RATE"
          value={`${stats.churnRate}%`}
          isNegative={stats.churnRate > 5}
        />
        <KPICard
          label="TRIAL CONVERSION"
          value={`${stats.trialConversion}%`}
          isPositive={stats.trialConversion > 20}
        />
      </div>

      {/* Charts */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <Card className={cn('p-4', mode.radius)}>
          <div className="border-b border-border pb-2 mb-4">
            <span className="font-mono text-xs text-muted-foreground">
              [ REVENUE TREND ]
            </span>
          </div>
          <LineChart
            data={revenueData}
            xKey="date"
            yKey="amount"
            height={200}
          />
        </Card>

        <Card className={cn('p-4', mode.radius)}>
          <div className="border-b border-border pb-2 mb-4">
            <span className="font-mono text-xs text-muted-foreground">
              [ USER GROWTH ]
            </span>
          </div>
          <BarChart
            data={userGrowthData}
            xKey="month"
            yKey="users"
            height={200}
          />
        </Card>
      </div>

      {/* Gauges Row */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        <Card className={cn('p-4 flex flex-col items-center', mode.radius)}>
          <Gauge
            value={stats.churnRate}
            max={10}
            size={120}
            label="Churn Rate"
            unit="%"
          />
        </Card>
        <Card className={cn('p-4 flex flex-col items-center', mode.radius)}>
          <Gauge
            value={stats.trialConversion}
            max={100}
            size={120}
            label="Trial Conversion"
            unit="%"
          />
        </Card>
        <Card className={cn('p-4 flex flex-col items-center', mode.radius)}>
          <Gauge
            value={stats.activeSubscriptions}
            max={1000}
            size={120}
            label="Active Subs"
          />
        </Card>
        <Card className={cn('p-4 flex flex-col items-center', mode.radius)}>
          <Gauge
            value={stats.pendingTickets}
            max={50}
            size={120}
            label="Pending Tickets"
          />
        </Card>
      </div>

      {/* Recent Activity */}
      <Card className={cn('overflow-hidden', mode.radius)}>
        <div className="border-b border-border px-4 py-2">
          <span className="font-mono text-xs text-muted-foreground">
            [ RECENT ACTIVITY ]
          </span>
        </div>
        <div className="divide-y divide-border">
          {recentActivity.map((activity) => (
            <div
              key={activity.id}
              className="px-4 py-3 flex items-center justify-between"
            >
              <div>
                <span className="font-mono text-sm">{activity.action}</span>
                <span className="text-muted-foreground font-mono text-xs ml-2">
                  by {activity.user}
                </span>
              </div>
              <span className="text-muted-foreground font-mono text-xs">
                {formatRelativeTime(activity.timestamp)}
              </span>
            </div>
          ))}
        </div>
      </Card>
    </div>
  );
}

function KPICard({
  label,
  value,
  subValue,
  change,
  isPositive,
  isNegative,
}: {
  label: string;
  value: string;
  subValue?: string;
  change?: number;
  isPositive?: boolean;
  isNegative?: boolean;
}) {
  return (
    <Card className={cn('p-4', mode.radius)}>
      <span className="font-mono text-xs text-muted-foreground">
        [ {label} ]
      </span>
      <div className="mt-2 flex items-baseline gap-2">
        <span className="font-mono text-2xl font-semibold">{value}</span>
        {change !== undefined && (
          <span
            className={cn(
              'font-mono text-xs',
              change > 0 ? 'text-success' : 'text-destructive'
            )}
          >
            {change > 0 ? '+' : ''}
            {change}%
          </span>
        )}
      </div>
      {subValue && (
        <span className="font-mono text-xs text-muted-foreground">
          {subValue}
        </span>
      )}
      {isPositive && (
        <span className="font-mono text-xs text-success">[GOOD]</span>
      )}
      {isNegative && (
        <span className="font-mono text-xs text-destructive">[ALERT]</span>
      )}
    </Card>
  );
}

// components/admin/user-management.tsx
'use client';

import { useState } from 'react';
import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { InputSearch } from '@/components/ui/input-search';
import { Badge } from '@/components/ui/badge';
import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { Checkbox } from '@/components/ui/checkbox';
import { mode } from '@/design-system';
import { cn } from '@/lib/utils';
import { MoreHorizontal, Download, Mail, UserX } from 'lucide-react';

interface User {
  id: string;
  name: string;
  email: string;
  image?: string;
  plan: string;
  status: 'active' | 'inactive' | 'suspended';
  createdAt: Date;
  lastLoginAt?: Date;
}

interface UserManagementProps {
  users: User[];
  totalCount: number;
  page: number;
  pageSize: number;
  onPageChange: (page: number) => void;
  onSearch: (query: string) => void;
  onFilter: (filters: Record<string, string>) => void;
}

export function UserManagement({
  users,
  totalCount,
  page,
  pageSize,
  onPageChange,
  onSearch,
  onFilter,
}: UserManagementProps) {
  const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
  const [searchQuery, setSearchQuery] = useState('');
  const [statusFilter, setStatusFilter] = useState<string>('all');
  const [planFilter, setPlanFilter] = useState<string>('all');

  const handleSelectAll = (checked: boolean) => {
    if (checked) {
      setSelectedUsers(users.map((u) => u.id));
    } else {
      setSelectedUsers([]);
    }
  };

  const handleSelectUser = (userId: string, checked: boolean) => {
    if (checked) {
      setSelectedUsers([...selectedUsers, userId]);
    } else {
      setSelectedUsers(selectedUsers.filter((id) => id !== userId));
    }
  };

  const handleBulkAction = async (action: string) => {
    // Implement bulk actions
    console.log(`Bulk action: ${action}`, selectedUsers);
  };

  return (
    <div className="space-y-4">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="font-mono text-2xl font-semibold">USER MANAGEMENT</h1>
          <p className="text-muted-foreground font-mono text-xs">
            {totalCount.toLocaleString()} total users
          </p>
        </div>
        <div className="flex items-center gap-2">
          <Button variant="outline" size="sm">
            <Download className="h-4 w-4 mr-2" />
            > EXPORT
          </Button>
        </div>
      </div>

      {/* Filters */}
      <Card className={cn('p-4', mode.radius)}>
        <div className="flex flex-wrap items-center gap-4">
          <div className="flex-1 min-w-[200px]">
            <InputSearch
              placeholder="Search users..."
              value={searchQuery}
              onChange={(e) => {
                setSearchQuery(e.target.value);
                onSearch(e.target.value);
              }}
            />
          </div>
          <Select
            value={statusFilter}
            onValueChange={(value) => {
              setStatusFilter(value);
              onFilter({ status: value });
            }}
          >
            <SelectTrigger className="w-[150px]">
              <SelectValue placeholder="Status" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Status</SelectItem>
              <SelectItem value="active">Active</SelectItem>
              <SelectItem value="inactive">Inactive</SelectItem>
              <SelectItem value="suspended">Suspended</SelectItem>
            </SelectContent>
          </Select>
          <Select
            value={planFilter}
            onValueChange={(value) => {
              setPlanFilter(value);
              onFilter({ plan: value });
            }}
          >
            <SelectTrigger className="w-[150px]">
              <SelectValue placeholder="Plan" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Plans</SelectItem>
              <SelectItem value="free">Free</SelectItem>
              <SelectItem value="starter">Starter</SelectItem>
              <SelectItem value="pro">Pro</SelectItem>
              <SelectItem value="enterprise">Enterprise</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </Card>

      {/* Bulk Actions */}
      {selectedUsers.length > 0 && (
        <Card className={cn('p-4 bg-muted', mode.radius)}>
          <div className="flex items-center justify-between">
            <span className="font-mono text-sm">
              {selectedUsers.length} users selected
            </span>
            <div className="flex items-center gap-2">
              <Button
                variant="outline"
                size="sm"
                onClick={() => handleBulkAction('email')}
              >
                <Mail className="h-4 w-4 mr-2" />
                Email
              </Button>
              <Button
                variant="destructive"
                size="sm"
                onClick={() => handleBulkAction('suspend')}
              >
                <UserX className="h-4 w-4 mr-2" />
                Suspend
              </Button>
            </div>
          </div>
        </Card>
      )}

      {/* Users Table */}
      <Card className={cn('overflow-hidden', mode.radius)}>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead className="w-12">
                <Checkbox
                  checked={selectedUsers.length === users.length}
                  onCheckedChange={handleSelectAll}
                />
              </TableHead>
              <TableHead>User</TableHead>
              <TableHead>Email</TableHead>
              <TableHead>Plan</TableHead>
              <TableHead>Status</TableHead>
              <TableHead>Joined</TableHead>
              <TableHead>Last Login</TableHead>
              <TableHead className="w-12">Actions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {users.map((user) => (
              <TableRow key={user.id}>
                <TableCell>
                  <Checkbox
                    checked={selectedUsers.includes(user.id)}
                    onCheckedChange={(checked) =>
                      handleSelectUser(user.id, checked as boolean)
                    }
                  />
                </TableCell>
                <TableCell>
                  <div className="flex items-center gap-2">
                    <Avatar className="h-8 w-8">
                      <AvatarImage src={user.image} />
                      <AvatarFallback>
                        {user.name?.charAt(0) || 'U'}
                      </AvatarFallback>
                    </Avatar>
                    <span className="font-mono text-sm">{user.name}</span>
                  </div>
                </TableCell>
                <TableCell className="font-mono text-xs">
                  {user.email}
                </TableCell>
                <TableCell>
                  <Badge variant="outline">{user.plan.toUpperCase()}</Badge>
                </TableCell>
                <TableCell>
                  <Badge
                    variant={
                      user.status === 'active'
                        ? 'default'
                        : user.status === 'suspended'
                          ? 'destructive'
                          : 'secondary'
                    }
                  >
                    {user.status.toUpperCase()}
                  </Badge>
                </TableCell>
                <TableCell className="font-mono text-xs text-muted-foreground">
                  {formatDate(user.createdAt)}
                </TableCell>
                <TableCell className="font-mono text-xs text-muted-foreground">
                  {user.lastLoginAt ? formatRelativeTime(user.lastLoginAt) : 'Never'}
                </TableCell>
                <TableCell>
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button variant="ghost" size="icon">
                        <MoreHorizontal className="h-4 w-4" />
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                      <DropdownMenuItem>View Details</DropdownMenuItem>
                      <DropdownMenuItem>Edit User</DropdownMenuItem>
                      <DropdownMenuItem>Impersonate</DropdownMenuItem>
                      <DropdownMenuItem>Send Email</DropdownMenuItem>
                      <DropdownMenuSeparator />
                      <DropdownMenuItem>Reset Password</DropdownMenuItem>
                      <DropdownMenuItem className="text-destructive">
                        Suspend User
                      </DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </Card>

      {/* Pagination */}
      <div className="flex items-center justify-between">
        <span className="font-mono text-xs text-muted-foreground">
          Showing {(page - 1) * pageSize + 1} to{' '}
          {Math.min(page * pageSize, totalCount)} of {totalCount}
        </span>
        <div className="flex items-center gap-2">
          <Button
            variant="outline"
            size="sm"
            onClick={() => onPageChange(page - 1)}
            disabled={page === 1}
          >
            Previous
          </Button>
          <Button
            variant="outline"
            size="sm"
            onClick={() => onPageChange(page + 1)}
            disabled={page * pageSize >= totalCount}
          >
            Next
          </Button>
        </div>
      </div>
    </div>
  );
}

// components/admin/user-details.tsx
import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { mode } from '@/design-system';
import { cn } from '@/lib/utils';

interface UserDetailsProps {
  user: {
    id: string;
    name: string;
    email: string;
    image?: string;
    role: string;
    plan: string;
    status: string;
    createdAt: Date;
    lastLoginAt?: Date;
    organizationMemberships: Array<{
      organization: { name: string };
      role: string;
    }>;
    subscription?: {
      plan: string;
      status: string;
      currentPeriodEnd: Date;
      cancelAtPeriodEnd: boolean;
    };
  };
  activityLogs: Array<{
    id: string;
    action: string;
    details: string;
    timestamp: Date;
    ipAddress?: string;
  }>;
  invoices: Array<{
    id: string;
    amount: number;
    status: string;
    createdAt: Date;
  }>;
}

export function UserDetails({ user, activityLogs, invoices }: UserDetailsProps) {
  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-start justify-between">
        <div className="flex items-center gap-4">
          <Avatar className="h-16 w-16">
            <AvatarImage src={user.image} />
            <AvatarFallback className="text-2xl">
              {user.name?.charAt(0) || 'U'}
            </AvatarFallback>
          </Avatar>
          <div>
            <h1 className="font-mono text-2xl font-semibold">{user.name}</h1>
            <p className="text-muted-foreground font-mono text-sm">
              {user.email}
            </p>
            <div className="flex items-center gap-2 mt-2">
              <Badge>{user.plan.toUpperCase()}</Badge>
              <Badge
                variant={user.status === 'active' ? 'default' : 'destructive'}
              >
                {user.status.toUpperCase()}
              </Badge>
            </div>
          </div>
        </div>
        <div className="flex items-center gap-2">
          <Button variant="outline">> IMPERSONATE</Button>
          <Button variant="outline">> SEND EMAIL</Button>
          <Button variant="destructive">> SUSPEND</Button>
        </div>
      </div>

      {/* Quick Stats */}
      <div className="grid grid-cols-4 gap-4">
        <Card className={cn('p-4', mode.radius)}>
          <span className="font-mono text-xs text-muted-foreground">
            [ JOINED ]
          </span>
          <p className="font-mono text-lg mt-1">{formatDate(user.createdAt)}</p>
        </Card>
        <Card className={cn('p-4', mode.radius)}>
          <span className="font-mono text-xs text-muted-foreground">
            [ LAST LOGIN ]
          </span>
          <p className="font-mono text-lg mt-1">
            {user.lastLoginAt ? formatRelativeTime(user.lastLoginAt) : 'Never'}
          </p>
        </Card>
        <Card className={cn('p-4', mode.radius)}>
          <span className="font-mono text-xs text-muted-foreground">
            [ ORGANIZATIONS ]
          </span>
          <p className="font-mono text-lg mt-1">
            {user.organizationMemberships.length}
          </p>
        </Card>
        <Card className={cn('p-4', mode.radius)}>
          <span className="font-mono text-xs text-muted-foreground">
            [ LIFETIME VALUE ]
          </span>
          <p className="font-mono text-lg mt-1">
            ${invoices.reduce((sum, inv) => sum + inv.amount, 0).toLocaleString()}
          </p>
        </Card>
      </div>

      {/* Tabs */}
      <Tabs defaultValue="activity">
        <TabsList>
          <TabsTrigger value="activity">Activity</TabsTrigger>
          <TabsTrigger value="subscription">Subscription</TabsTrigger>
          <TabsTrigger value="invoices">Invoices</TabsTrigger>
          <TabsTrigger value="organizations">Organizations</TabsTrigger>
        </TabsList>

        <TabsContent value="activity">
          <Card className={cn('overflow-hidden', mode.radius)}>
            <div className="divide-y divide-border">
              {activityLogs.map((log) => (
                <div key={log.id} className="px-4 py-3">
                  <div className="flex items-center justify-between">
                    <div>
                      <span className="font-mono text-sm">{log.action}</span>
                      <p className="text-muted-foreground font-mono text-xs">
                        {log.details}
                      </p>
                    </div>
                    <div className="text-right">
                      <span className="font-mono text-xs text-muted-foreground">
                        {formatRelativeTime(log.timestamp)}
                      </span>
                      {log.ipAddress && (
                        <p className="font-mono text-xs text-muted-foreground">
                          {log.ipAddress}
                        </p>
                      )}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </Card>
        </TabsContent>

        <TabsContent value="subscription">
          {user.subscription ? (
            <Card className={cn('p-4', mode.radius)}>
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <span className="font-mono text-sm">Plan</span>
                  <Badge>{user.subscription.plan.toUpperCase()}</Badge>
                </div>
                <div className="flex items-center justify-between">
                  <span className="font-mono text-sm">Status</span>
                  <Badge
                    variant={
                      user.subscription.status === 'active'
                        ? 'default'
                        : 'secondary'
                    }
                  >
                    {user.subscription.status.toUpperCase()}
                  </Badge>
                </div>
                <div className="flex items-center justify-between">
                  <span className="font-mono text-sm">Renews</span>
                  <span className="font-mono text-sm">
                    {formatDate(user.subscription.currentPeriodEnd)}
                  </span>
                </div>
                {user.subscription.cancelAtPeriodEnd && (
                  <div className="p-3 bg-destructive/10 rounded">
                    <span className="font-mono text-xs text-destructive">
                      [CANCELS AT PERIOD END]
                    </span>
                  </div>
                )}
                <div className="flex gap-2">
                  <Button variant="outline" size="sm">> CHANGE PLAN</Button>
                  <Button variant="outline" size="sm">> EXTEND TRIAL</Button>
                  <Button variant="destructive" size="sm">> CANCEL</Button>
                </div>
              </div>
            </Card>
          ) : (
            <Card className={cn('p-8 text-center', mode.radius)}>
              <span className="font-mono text-muted-foreground">
                No active subscription
              </span>
            </Card>
          )}
        </TabsContent>

        {/* Additional tabs content... */}
      </Tabs>
    </div>
  );
}